iPhone X는 앱 디자인을 근본적으로 변화시켰습니다. 고유한 형식과 새로운 사용자 인터페이스 요소 덕분에 디자이너는 인상적인 앱을 만들기 위해 더 많은 유연성과 창의성을 보여줘야 합니다. 이 가이드에서는 Sketch를 사용하여 디자인을 iPhone X의 요구 사항에 맞게 조정하는 방법을 단계별로 설명합니다.
주요 발견사항
- iPhone X의 화면 높이는 812픽셀로, 새로운 UI 요소를 위한 공간을 만듭니다.
- 내비게이션 및 탭 바는 더 높아지며 레이아웃을 조정할 필요가 있습니다.
- 안전 구역을 고려하는 것이 중요하여, 내용이 화면의 둥근 영역에 들어가지 않도록 해야 합니다.
- 홈 인디케이터는 디자인 시 고려해야 할 새로운 인터페이스 요소입니다.
단계별 가이드
Sketch에서 새로운 iPhone X 디자인을 만들기로 시작합니다. A 키를 눌러 새로운 요소를 추가하고, iPhone X 디자인을 클릭합니다.
너비는 375픽셀로 유지되며, 높이는 812픽셀로 설정됩니다. 이는 사용자 인터페이스 디자인을 위한 공간을 더 확보해 줍니다. 화면의 둥근 모서리는 레이아웃에 중요한 요소라는 것을 잊지 마세요.
홈 컨트롤러를 복사하고 디자인을 조정합니다. 표준 라이브러리를 사용하는 것보다는 더 정밀한 조정을 위해 iPhone X 전용 라이브러리를 사용하는 것이 좋습니다. Sketch의 설정으로 가서 iOS 11 라이브러리를 활성화하세요.
인터페이스를 일관되게 만들기 위해 표준 내비게이션 바를 추가합니다. 내비게이션 바의 높이는 iPhone 8의 44 픽셀에 비해 88 픽셀이어야 합니다.
iOS 11 라이브러리에서 상태 표시줄을 찾아 추가합니다. 상태 표시줄은 화면의 상단 가장자리에 위치해야 합니다.
탭 바 또한 동일하게: iOS 11 라이브러리에서 세 개의 탭이 있는 버전을 선택하고, 83 픽셀의 높이를 유지하여 레이아웃에 잘 맞도록 합니다.
디자인할 때는 어떤 요소도 둥근 영역에 겹치지 않도록 주의하세요. 프로그래밍에서는 이를 안전 지역 레이아웃 가이드(Safe Area Layout Guide)라고 하며, 안전한 보기를 위해 필요한 공간입니다.
홈 인디케이터를 디자인의 필수 요소로 추가합니다. 이는 하단 가장지의 중앙에 배치되어야 합니다.
기본 요소를 추가한 후에는 전체 섹션을 복사하여 원하는 위치에 붙여넣을 수 있습니다. 복사한 후에는 간격을 조정하는 것을 잊지 마세요.
채팅 컨트롤러에 대해 동일한 프로세스를 반복합니다. 디자인의 복사본을 만들고 적절하게 이름을 바꿉니다.
탭에 대한 아이콘을 교체하고 표현을 조정합니다. 여기서는 적절한 상징성과 텍스트를 세심하게 선택하는 것이 중요합니다.
간격에 주의하세요, 특히 채팅 말풍선과 탭 바 사이의 간격을 중요하게 고려해야 합니다. 요소들이 잘 어우러질 수 있도록 16픽셀의 간격을 유지하세요.
이 단계들은 디자인을 새 형식에 얼마나 빨리 맞출 수 있는지를 보여줍니다. 불분명한 점이 있을 경우, 디자인을 계속 다듬는 것이 전혀 문제가 되지 않습니다.
다음 수업에서는 프로필 영역에서 블러 효과 사용을 포함한 추가 효과 작업 방법에 대해 배울 것입니다.
요약 – 효과적인 iPhone X 디자인 in Sketch
디자인을 iPhone X에 맞추는 것은 새로운 가능성을 열어줍니다. 새로운 화면 형식과 UI 요소에 대한 올바른 이해를 통해 인상적인 사용자 인터페이스를 만들 수 있습니다.
자주 묻는 질문
iPhone X 화면의 높이는 얼마인가요?iPhone X 화면의 높이는 812픽셀입니다.
탭 바를 어떻게 조정하나요?탭 바는 레이아웃에서 잘 작동하도록 83픽셀의 높이를 가져야 합니다.
디자인할 때 무엇을 주의해야 하나요?안전 구역을 고려하고 요소가 둥근 영역에 겹치지 않도록 합니다.
Sketch에서 변경 사항을 어떻게 적용하나요?기존의 컨트롤러 요소를 복사하고 iOS 11 라이브러리를 사용하여 조정합니다.
내비게이션 바를 조정해야 하나요?네, 내비게이션 바의 높이는 88픽셀이며, 시각적 일관성을 위해 조정해야 합니다.
