639. (ios/swift5) [Design] 노치 Notch 디스플레이 화면 디자인 설명 정리

---

[개발 환경 설정]

​

개발 툴 : XCODE

개발 언어 : SWIFT5

​

 

---

[소스 코드]

​

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : Swift5

- 개발 툴 : Xcode

- 기술 구분 : UI / UX / 디자인

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[설명 정리]
// --------------------------------------------------------------------------------------

1. 노치 (Notch) 디자인은 스마트폰의 화면을 최대한 활용하기 위한 디자인 기법으로, 상단부에 카메라, 스피커 및 센서 등을 몰아 넣어 화면의 일부가 파여있는 형태의 디자인입니다


2. 노치 (Notch) 디자인은 베젤이 중간에 돌출된 형태로 상단 베젤과 합쳐져 휴대폰 상단부가 알파벳 M자 처럼 보여집니다


3. 노치 (Notch) 디자인은 아이폰 X (2017년 9월 12) 부터 대중적으로 사용되었으며, 그이후에 출시 된 휴대폰 모델들 대부분도 노치 형태 디자인으로 출시 되었습니다

  >> 대표적으로 아이폰 X, 아이폰 XS, 아이폰 XR, 아이폰 11, 아이폰 11 프로, 아이폰 12, 아이폰 12 프로, 아이폰 13, 아이폰 13 프로, 아이폰 14에 적용


4. 노치 (Notch) 디자인 화면에 대응하기 위해서는 웹 디자인 CSS 작업 시에도 안정 영역 (Safe Area) 작업 처리가 필요합니다

  >> 노치 다자인에 대한 대응 작업이 되어 있지 않은 경우 CSS 화면이 밀리거나 , 영역 밖에 배치되어 보일 수 있습니다


5. 노치 (Notch) 화면 대응 기본 웹 디자인 작업 사항

  >> css : body 요소의 배경 색 설정 : 

    body {
      background: #9bc13d;
    }

  >> meta : viewport-fit 설정 : 설정 안할 시 기본 auto 설정 값 사용

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

  >> css : safe-area-inset 설정 : iOS 11.2 이상 (iOS 11.0 하위 버전에서도 대응이 필요한 경우 constant 속성도 동시 적용 필요)

    .container {
      padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    }

// --------------------------------------------------------------------------------------





// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[위키 백과]

https://ko.wikipedia.org/wiki/%EB%85%B8%EC%B9%98_%EB%94%94%EC%9E%90%EC%9D%B8

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://ko.wikipedia.org/wiki/%EB%85%B8%EC%B9%98_%EB%94%94%EC%9E%90%EC%9D%B8

노치 디자인 - 위키백과, 우리 모두의 백과사전

---