애플 휴먼 인터페이스 가이드라인(22) Visual Design -1 Adaptivity and Layout

Adaptivity and Layout
적응과 레이아웃

People generally want to be able to use their favorite apps on all of their devices and in any context. In an iOS app, you can configure interface elements and layouts to automatically change shape and size on different devices, during multitasking on iPad, in split view, when the screen rotates, and more. It’s important to design an adaptable interface that provides a great experience in any environment.

 

사용자들은 보통 그들의 모든 기기에서 어떤 상황에서나 좋아하는 앱을 사용하고 싶어합니다. iOS 앱에선 화면 요소나 레이아웃의 환경을 설정하면, 다른 기기에서나, iPad에서 멀티태스킹을 하거나, 화면을 돌리는 등의 경우 자동으로 모양과 사이즈가 변하게 할 수 있습니다. 어떤 환경에서든지 좋은 경험을 제공할 수 있는 적용형 화면을 디자인 하는것은 매우 중요합니다.

Device Screen Sizes and Orientations

iOS devices have a variety of screen sizes and can be used in either portrait or landscape orientation. In edge-to-edge devices like iPhone X and iPad Pro, the display has rounded corners that closely match the device’s overall dimensions. Other devices — such as iPhone SE and iPad Air — have a rectangular display.

If your app runs on a specific device, make sure it runs on every screen size for that device. In other words, an iPhone-only app must run on every iPhone screen size and an iPad-only app must run on every iPad screen size.

 

iOS 기기는 다양한 크기의 화면을 가지고 있으며, 세로모드나 가로모드 둘 다 사용할 수 있습니다. iPhone X나 iPad Pro와 같이 edge-to-edge 형태인 경우 실제 기기와 화면이 거의 일치하도록 하는 둥근 모서리를 가지고 있습니다. iPhone SE나 iPad Air같은 다른 기기들은 각진 네모 형태죠.

특정 기기에서만 앱이 작동한다면, 앱이 그 기기의 모든 화면 사이즈에 대응할 수 있도록 하세요. 즉, iPhone에서만 작동되는 앱은 모든 iPhone의 화면 크기에서 작동해야하고, iPad에서만 작동되는 앱은 모든 iPad 화면의 크기에 맞춰 작동해야합니다.

 

 

Device 기기명	Dimensions (portrait) 크기 (세로모드 기준)
12.9" iPad Pro	1024x1366 pt (2048x2732 px @2x)
11" iPad Pro	834x1194 pt (1668x2388 px @2x)
10.5" iPad Pro	834x1194 pt (1668x2388 px @2x)
9.7" iPad Pro	768x1024 pt (1536x2048 px @2x)
7.9" iPad mini	768x1024 pt (1536x2048 px @2x)
10.5" iPad Air	834x1112 pt (1668x2224 px @2x)
9.7" iPad Air	768x1024 pt (1536x2048 px @2x)
10.2" iPad	810x1080 pt (1620x2160 px @2x)
9.7" iPad	768x1024 pt (1536x2048 px @2x)
iPhone 12 Pro Max	428x926 pt (1284x2778 px @3x)
iPhone 12 Pro	390x844 pt (1170x2532 px @3x)
iPhone 12	390x844 pt (1170x2532 px @3x)
iPhone 12 mini	375x812 pt (1125x2436 px @3x)
iPhone 11 Pro Max	414x896 pt (1242x2688 px @3x)
iPhone 11 Pro	375x812 pt (1125x2436 px @3x)
iPhone 11	414x896 pt (828x1792 px @2x)
iPhone XS Max	414x896 pt (1242x2688 px @3x)
iPhone XS	375x812 pt (1125x2436 px @3x)
iPhone XR	414x896 pt (828x1792 px @2x)
iPhone X	375x812 pt (1125x2436 px @3x)
iPhone 8 Plus	414x736 pt (1080x1920 px @3x)
iPhone 8	375x667 pt (750x1334 px @2x)
iPhone 7 Plus	414x736 pt (1080x1920 px @3x)
iPhone 7	375x667 pt (750x1334 px @2x)
iPhone 6s Plus	414x736 pt (1080x1920 px @3x)
iPhone 6s	375x667 pt (750x1334 px @2x)
iPhone 6 Plus	414x736 pt (1080x1920 px @3x)
iPhone 6	375x667 pt (750x1334 px @2x)
4.7" iPhone SE	375x667 pt (750x1334 px @2x)
4" iPhone SE	320x568 pt (640x1136 px @2x)
iPod touch 5th generation and later	320x568 pt (640x1136 px @2x)

NOTE

All scale factors in the table above are UIKit scale factors, which may differ from native scale factors. 

To learn how screen resolution impacts your app’s artwork, see Image Size and Resolution.

위 표의 모든 크기 요소는 UIKit 크기 요소이며, 실제 크기 요소와는 다를 수 있습니다.
화면의 해상도가 어떻게 앱의 아트워크에 영향을 끼치는지 알아보고 싶다면, Image Size and Resolution를 참고하세요.

Auto Layout

Auto Layout is a development tool for constructing adaptive interfaces. Using Auto Layout, you can define rules (known as constraints) that govern the content in your app. For example, you can constrain a button so it’s always horizontally centered and positioned eight points below an image, regardless of the available screen space.

 

자동 레이아웃은 적용형 화면을 만들기 위한 개발 툴입니다. 자동 레이아웃을 사용하면 contraints (제한) 라고도 알려진 '규칙'을 정의하여 앱의 콘텐츠들을 제어할 수 있습니다. 예를 들어 화면 크기에 관계없이 특정 버튼이 항상 가운데 정렬되어 이미지의 8pt 아래에 있도록 할 수 있죠.

Auto Layout automatically readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected. You can set your app to dynamically adapt to a wide range of traits, including:

• Different device screen sizes, resolutions, and color gamuts (sRGB/P3)
• Different device orientations (portrait/landscape)
• Split view
• Multitasking modes on iPad
• Dynamic Type text-size changes
• Internationalization features that are enabled based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)
• System feature availability (3D Touch)

자동 레이아웃은 특성 변화가 생기면 레이아웃을 자동으로 조정합니다. 아래와 같은 특성을 포함해 앱의 레이아웃을 변화시킬 수 있습니다 :

• 서로 다른 기기 화면 크기, 해상도, 색 공간
• 기기의 가로/세로 모드
• 스플릿 뷰
• iPad의 멀티태스킹 모드
• locale에서 변동되는 설정들 (좌->우, 또는 우->좌 레이아웃 방향, 날짜, 시간, 숫자 단위, 서체, 텍스트 길이 등)
• 특정 기능 사용 가능여부 (3D 터치)

Layout Guides and Safe Area

Layout guides define rectangular regions that don’t actually appear visibly onscreen, but aid with the positioning, alignment, and spacing of content. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.

 

레이아웃 가이드와 안전 영역

레이아웃 가이드는 스크린 위에 실제로 보이진 않는 사각형 영역을 말합니다. 이 가이드는 보이진 않아도 포지셔닝, 정렬, 콘텐츠의 간격 등을 맞출 수 있도록 돕습니다. 시스템에는 미리 만들어진 가이드를 포함하는데, 콘텐츠 주위로 표준 마진을 적용하기 쉽게 해주며, 텍스트를 가독성을 위한 최적의 텍스트 길이를 제한합니다. 물론 커스텀된 레이아웃 가이드라인을 만들 수도 있습니다.

iPhone Safe area

 

iPad Safe area

Adhere to the safe area and layout margins defined by UIKit. These layout guides ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar. Standard system-provided views automatically adopt a safe area layout guide.

안전영역과 UIKit에서 적용된 레이아웃 마진을 지키세요. 이 레이아웃 가이드는 기기와 콘텐츠를 위한 적절한 기본설정입니다. 안전영역은 상태 표시줄이나 네비게이션 바, 툴바, 탭바와 콘텐츠가 겹치지 않도록 해주기도 합니다. 시스템에서 제공되는 뷰는 이 안전영역과 레이아웃 가이드라인에 자동으로 적용되어 있습니다.

 

Size Classes

Size classes are traits that are automatically assigned to content areas based on their size. The system defines two size classes, regular (denotes expansive space) and compact (denotes constrained space), which describe the height and width of a view.

A view may possess any combination of size classes:

• Regular width, regular height
• Compact width, compact height
• Regular width, compact height
• Compact width, regular height

As with other environmental variations, iOS dynamically makes layout adjustments based on the size classes of a content area. For example, when the vertical size class changes from compact height to regular height — perhaps because the user rotated the device from landscape to portrait orientation — tab bars may become taller.

 

사이즈 클래스는 기기 사이즈에 맞춰 콘텐츠 영역을 자동으로 변화시킬 수 있는 특성입니다. 시스템은 두개의 사이즈 클래스를 정의하는데, 레귤러 (넓은 영역을 의미)와 컴팩트(제한된 영역을 의미) 두가지입니다. 이는 뷰의 높이와 너비를 의미합니다.

뷰는 사이즈 클래스의 어떤 조합도 갖출 수 있습니다.

• 레귤러 너비, 레귤러 높이
• 컴팩트 너비, 컴팩트 높이
• 레귤러 너비, 컴팩트 높이
• 컴팩트 너비, 레귤러 높이

다른 환경 변화와 함께, iOS는 다이내믹하게 콘텐츠 영역의 사이즈 클래스에 따라 레이아웃을 적용 및 변동시킵니다. 예를 들어, 수직 사이즈 클래스가 컴팩트에서 레귤러 높이로 변하면(아마 사용자가 기기를 가로에서 세로 모드로 바꾼 경우) 탭바의 길이는 더 길어지겠죠.

Device Size Classes

Different size class combinations apply to the full-screen experience on different devices, based on screen size.

사이즈 클래스의 서로다른 조합은 스크린 크기 기준 다른 기기에서의 풀스크린 경험에 적용됩니다.

 

Device 기기명	Portrait orientation 세로모드	Landscape orientation 가로모드
12.9" iPad Pro	Regular width, regular height	Regular width, regular height
11" iPad Pro	Regular width, regular height	Regular width, regular height
10.5" iPad Pro	Regular width, regular height	Regular width, regular height
9.7" iPad	Regular width, regular height	Regular width, regular height
7.9" iPad mini	Regular width, regular height	Regular width, regular height
iPhone 12 Pro Max	Compact width, regular height	Regular width, compact height
iPhone 12 Pro	Compact width, regular height	Compact width, compact height
iPhone 12	Compact width, regular height	Compact width, compact height
iPhone 12 mini	Compact width, regular height	Compact width, compact height
iPhone 11 Pro Max	Compact width, regular height	Regular width, compact height
iPhone 11 Pro	Compact width, regular height	Compact width, compact height
iPhone 11	Compact width, regular height	Regular width, compact height
iPhone XS Max	Compact width, regular height	Regular width, compact height
iPhone XS	Compact width, regular height	Compact width, compact height
iPhone XR	Compact width, regular height	Regular width, compact height
iPhone X	Compact width, regular height	Compact width, compact height
iPhone 8 Plus	Compact width, regular height	Regular width, compact height
iPhone 8	Compact width, regular height	Compact width, compact height
iPhone 7 Plus	Compact width, regular height	Regular width, compact height
iPhone 7	Compact width, regular height	Compact width, compact height
iPhone 6s Plus	Compact width, regular height	Regular width, compact height
iPhone 6s	Compact width, regular height	Compact width, compact height
iPhone SE	Compact width, regular height	Compact width, compact height
iPod touch 5th generation and later	Compact width, regular height	Compact width, compact height

Multitasking Size Classes

On iPad, size classes also apply when your app runs in a multitasking configuration.

iPad에서 사이즈 클래스는 당신의 앱이 멀티태스킹 상태일 때도 적용됩니다.

 

좌부터 2/3, 1/2, 1/3 스플릿 뷰

 

Device 기기명	Mode 모드	Portait orientation 세로모드	Landscape orientation 가로모드
12.9" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Regular width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height
11" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Compact width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height
10.5" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Compact width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height
9.7" iPad	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Compact width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height
7.9" iPad mini 4	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Compact width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height

General Layout Considerations
일반적인 레이아웃 고려사항들

Ensure that primary content is clear at its default size. People shouldn’t have to scroll horizontally to read important text, or zoom to see primary images, unless they choose to change the size.

주요 콘텐츠가 기본 사이즈일 때 잘 보이도록 하세요. 사용자들은 중요한 텍스트를 읽기 위해 가로스크롤 해야할 필요 없으며, 사이즈를 바꾸도록 한게 아니면 중요한 이미지를 보기 위해 줌할 필요 없습니다.

 

Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.

앱의 모든 모습이 한결같도록 유지하세요. 일반적으로, 비슷한 기능의 요소들은 비슷하게 생겨야 합니다.

 

Use visual weight and balance to convey importance. Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings, such as in the kitchen or a gym. In general, place principal items in the upper half of the screen and — in a left-to-right reading context — near the left side of the screen.

시각적 무게와 균형을 이용해 중요함을 전달하세요. 크기가 큰 아이템은 시선을 사로잡고, 작은 것보다 더 중요하게 보입니다. 또 탭하기 쉬워 주방이나 체육관 같이 주변상황에 방해받기 쉬울 때 앱을 사용하는 경우 특히 중요하죠. 일반적으로 중요한 아이템은 화면의 중앙선 기준 위쪽에, (왼쪽에서 오른쪽으로 문자를 읽는 경우) 화면의 왼쪽에 배치합니다.

 

Use alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.

정렬을 사용해 쉽게 스캔할 수 있도록 하고, 구조와 위계를 잘 전달하세요. 정렬은 앱을 산뜻하고 잘 정돈되어 보이게 만들며 사용자들이 스크롤할 때 집중할 수 있도록 합니다. 또한 정보를 찾기도 쉽죠. 들여쓰기와 정렬은 서로 관련된 콘텐츠 그룹을 구분할 수 있게 합니다.

 

If possible, support both portrait and landscape orientations. People prefer to use apps in different orientations, so it’s best when you can fulfill that expectation.

가능하다면, 가로모드와 세로모두 둘 다 지원하세요. 사용자들은 여러 모드에서 앱을 사용하는 것을 선호하니, 그들의 기대를 충족시켜주는 것이 가장 좋을 것입니다.

 

Be prepared for text-size changes. People expect most apps to respond when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout. For more information about text usage in your app, see Typography.

텍스트 사이즈 변동에 대비하세요. 사용자들은 설정에서 텍스트 크기를 바꿨을 때, 대부분의 앱이 이에 대응하길 바랍니다. 이 크기 변화에 대응하려면 레이아웃을 적용시키는 것이 필요합니다. Typography에서 텍스트 사용 방식에 대한 더 많은 정보를 얻으세요.

 

Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

상호작용 가능한 요소들을 충분한 터치할 수 있도록 타겟(영역)을 제공하세요. 모든 컨트롤의 탭 가능 영역은 최소 44*44pt로 유지하세요.

4.7" iPhone(좌) 5.8" iPhone(우)

 

Preview your app on multiple devices. Although it’s generally best to preview features like wide color imagery on actual devices, you can use Simulator (included with Xcode) to check for clipping and other layout issues. For example, if your app supports landscape mode, you can use Simulator to make sure your layouts look great regardless of whether the device rotates left or right.

여러가지 기기에서 당신의 앱을 미리보세요. 실제 기기의 넓은 색공간에서 기능을 미리보는 것이 가장 좋지만, Xcode에 포함된 시뮬레이터를 사용하여 클리핑이나 다른 레이아웃 문제를 체크해볼 수 있습니다. 예를 들어 앱이 가로모드를 지원한다면, 시뮬레이터를 사용해 기기가 왼쪽, 오른쪽 어느쪽으로 돌렸을 때도 변함없이 좋아보이는지 확인할 수 있습니다.

 

NOTE

By default, view controllers support all orientations on iPad and all orientations except upside-down portrait on iPhone (for developer guidance, see supportedInterfaceOrientations). Some devices, such as iPhone X, don’t support upside-down portrait mode, regardless of whether your app supports it.

기본적으로 뷰 컨트롤러는 iPad의 모든 모드, iPhone의 뒤집어진 세로모드를 제외한 모든 모드를 지원합니다. iPhone X와 같은 몇몇 기기들은 설사 앱이 지원하더라도 뒤집어진 세로모드를 (기기 차원에서)지원하지 않습니다.

Apply readability margins when displaying text on larger devices. These margins keep text lines short enough to ensure a comfortable reading experience.

큰 기기에서 텍스트를 보여줄 땐, 가독성을 위해 마진을 적용하세요. 이 마진은 텍스트 길이를 짧게 유지해 편안한 읽기 경험을 제공합니다.

Adapting to Changes in Context
맥락에 따라 레이아웃 조정하기

Maintain focus on the current content during context changes. Content is your highest priority. Changing focus when the environment changes can be disorienting and frustrating, and can make people feel like they’ve lost control of the app.

맥락이 변할 땐 현재 콘텐츠에 집중하세요. 콘텐츠는 가장 중요한 요소입니다. 환경이 변한다고 포커스를 바꾸면 좌절스럽고 갈피를 못잡게 합니다. 또한 사용자들이 앱의 통제권을 잃었다고 생각하게 할 수 있습니다.

 

Avoid gratuitous layout changes. When someone rotates a device, the entire layout doesn’t have to change. For example, if your app shows a grid of images in portrait mode, it doesn’t have to present the same images as a list in landscape mode. Instead, it might simply adjust the dimensions of the grid. Try to maintain a comparable experience in all contexts.

쓸데없는 레이아웃 변화는 주지 마세요. 누군가 기기를 회전시켰다고 해서 레이아웃의 모든것이 변할 필요는 없다는 것입니다. 예를 들어 앱이 세로모드에서 그리드를 보여준다고 해서 가로모드에서 똑같은 이미지들을 리스트로 보여줄 필요는 없다는 것입니다. 대신 그리드의 면적을 조금 변화시킬 수 있겠죠. 모든 맥락의 경험을 비슷한(똑같은X) 정도로 유지하도록 하세요. 

 

If it’s essential that your app run only in landscape, support both variants. Your landscape-only app should run equally well whether people rotate their device to the left or the right. Don’t tell people to rotate their device when they use your app. If your app doesn’t rotate automatically when someone holds the device in an unsupported orientation, they’ll know instinctively to rotate it.

앱이 가로모드에서만 실행되는 것이 매우 중요하다면, 왼쪽/오른쪽 회전 두가지 경우 모두 지원하세요. 가로모드로만 실행 가능한 앱은 사용자들이 기기를 왼쪽, 오른쪽 어디든 돌렸을 때 똑같이 작동되어야 합니다. 사용자들에게 앱을 사용할 때 기기를 돌리라고 말하지 마세요. 만약 사용자가 지원되지 않는 방향으로 기기를 잡아 앱이 자동으로 돌아가지 않는다면, 사용자들은 본능적으로 돌려야하는 것을 알테니까요.

 

Customize your app’s response to rotation according to context. A game that lets people move a character by rotating the device, for example, probably shouldn’t switch orientations during gameplay. It could, however, display menus and intro sequences based on the current orientation.

기기가 회전하면 맥락에 맞게 앱의 반응을 설정하세요. 사용자들이 기기를 돌려야 캐릭터가 움직이는 게임을 예로 든다면, 게임 플레이 중에는 모드를 바꿔선 안되겠죠. 현재 모드를 바탕으로 메뉴나 인트로 시퀀스를 보여줄 수 있습니다.

 

Aim to support both iPad and iPhone. People appreciate having the flexibility to run your app on either type of iOS device. If certain features of your app require iPhone-specific hardware — like telephony — consider hiding or disabling those features on iPad and letting people use your app’s other features.

iPad와 iPhone 둘 다 지원하는 것을 목표로 하세요. 다른 종류의 iOS 기기에서도 당신의 앱을 사용할 수 있는 유연성은 사용자들이 좋아하는 것입니다. 앱의 특정 기능이 iPhone에서만 작동하는 특정 하드웨어를 요구한다면 (예_전화) 이런 기능은 iPad에서 숨기거나 사용 불가능하게 하고, 앱의 다른 기능을 사용할 수 있도록 하세요.

 

Be mindful of aspect ratio differences when reusing existing artwork. Different screen sizes may have different aspect ratios, causing artwork to appear cropped, letterboxed, or pillarboxed. Make sure that important visual content remains in view on all display sizes.

이미 있는 아트워크를 쓸 땐 비율에 주의하세요. 다양한 화면 크기는 다양한 비율을 의미하며, 아트워크가 잘리거나, 레터박스 포맷*으로 보이게 하거나, 필러박스 효과**를 발생시킬 수 있습니다. 중요한 시각적 콘텐츠는 어떤 기기 사이즈에서도 볼 수 있도록 하세요.

 

**필러박스(양옆에 여백), *레터박스(위아래에 여백)

Designing a Full-Screen Experience
풀스크린 경험 디자인하기

Extend visual elements to fill the screen. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.

시각 요소를 늘려 화면을 채울 수 있도록 하세요. 화면의 가장자리에 맞춰 배경이 늘어나도록 하세요. 또한 표나 콜렉션처럼 수직으로 스크롤할 수 있는 레이아웃인 경우에는 제일 하단까지 이어지도록 하세요.

 

Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.

상호작용을 위한 컨트롤은 화면의 최하단이나 모서리에 위치시키지 마세요. 사용자들은 화면의 아래서 위로 스와이프하는 제스처를 사용해 홈스크린으로 나가거나 앱을 전환합니다. 이 제스처가 일어나는 부분에 커스텀된 제스처를 만들면 방해받을 수 있습니다. 또 화면의 먼 모퉁이는 사용자들이 편하게 누르기 어렵죠.

Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation, isn’t clipped by rounded corners, isn’t hidden by a sensor housing, and isn’t obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface and adhere to the layout guides and safe area defined by UIKit. When the device is in landscape orientation, it may be appropriate for some apps — like games — to place tappable controls in the lower portion of the screen (extending below the safe area) to allow more room for content. Use matching insets when placing controls at the top and bottom of the screen, and leave ample space around the Home indicator so people don’t accidentally target it when trying to interact with a control. Because the Home indicator remains centered on the screen, its location relative to your app’s interface may change.

 

중요한 내용은 클리핑되지 않도록 잘 넣으세요. 일반적인 경우 콘텐츠는 가운데에 균형을 맞춰 존재해야 어떤 모드에서도 좋아보입니다. 또 그렇게 해야 둥근 모서리에 가려지지도 않고, 센서 부분에 안보이지도 않으며, 홈스크린에 접근하기 위한 인디케이터 때문에 안보이지도 않죠. 최고의 결과를 위해선 시스템에서 제공되는 표준 요소들을 사용하고, 화면을 구성할 때 자동 레이아웃을 이용해야하며, UIKit에서 정의한 레이아웃 가이드라인과 안전영역을 고수해야 합니다. 기기가 가로모드일 땐 누를 수 있는 컨트롤들은 (안전 영역을 침범하는 최하단 말고) 아래 부분에 있어야 다른 콘텐츠들을 넣을 공간이 보장되어 게임과 같은 몇몇 앱에 적합할 것입니다. 컨트롤을 화면의 상단이나 하단에 위치시킬 땐 잘 맞춰넣어 홈 인디케이터 주변에 충분한 공간을 확보하고, 사용자들이 컨트롤을 누르려다가 실수로 인디케이터를 누르지 않게 하세요. 홈 인디케이터는 항상 화면의 가운데에 있으므로, 이 주변의 앱 화면이 바뀔 수도 있습니다.

 

Inset full-width buttons. A button that extends to the edges of the screen might not look like a button. Respect the standard UIKit margins on the sides of full-width buttons. A full-width button appearing at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the safe area — which also ensures that it doesn’t conflict with the Home indicator.

Safe area 영역을 꽉 채우는 너비의 버튼을 넣으세요. 화면의 마진영역까지 침범하는 너비의 버튼은 버튼처럼 보이지 않을 수 있습니다. 넓은 너비의 버튼을 만들 땐 표준 UIKit의 마진값을 맞춰주세요. 화면에 둥근 모서리가 있는 경우 이 버튼은 아래쪽, 즉 안전 영역의 최하단에 정렬되어 위치할 때 가장 좋아보입니다. 이렇게 정렬시키면 홈 인디케이터와도 부딪히지 않죠.

 

Don’t mask or call special attention to key display features. Don’t attempt to hide a device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas, either.

주요 화면 기능을 가리거나, 특별한 주의를 끌지 마세요. 기기의 둥근 모서리, 센서 부분, 홈 인디케이터 등을 화면 위아래에 검정 바를 두어 가리려고 하지 마세요. 브라켓, 베젤, 도형, 주의 텍스트 등 시각적 장식품을 사용해 위 부분을 가리려고 하지도 마세요.

 

Be mindful of the status bar height. The status bar is taller on full-screen iPhone models than on other models. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the current device. Note that the status bar on a full-screen iPhone doesn’t change height when background tasks like voice recording and location tracking are active.

상태 표시줄을 항상 신경쓰세요. status bar(상태 표시줄)은 풀스크린 아이폰 모델인 경우 높이가 더 깁니다. 만약 앱에서 상태 표시줄을 기준으로 콘텐츠 위치를 정하고, 상태표시줄의 높이를 고정된 값으로 지정했다면, 업데이트해 콘텐츠가 현재 기기에 맞춰 위치되도록 하세요. 풀스크린 아이폰의 상태 표시줄은 녹음이나 위치 정보 사용 중이더라도 높이가 변하지 않는다는 것을 기억하세요.

 

If you currently hide the status bar, reconsider that decision when your app runs on a full-screen iPhone. Full-screen iPhone models have more vertical space for content than other models, and the status bar occupies an area of the screen your app probably won’t fully utilize. The status bar also displays information people find useful. It should only be hidden in exchange for added value.

앱에서 일시적으로 상태표시줄을 숨긴다면, 풀스크린 아이폰에선 다시 한 번 생각해보세요. 풀스크린 아이폰 모델은 다른 모델보다 세로 길이가 길고, 이는 콘텐츠를 충분히 넣을 수 있다는 것을 의미합니다. 상태표시줄은 아마도 당신의 앱에서 딱히 활용하지 않는 영역만 사용할 것이구요. 상태표시줄은 사용자들이 유용하게 쓸 수 있는 정보를 보여주기도 합니다. (상태표시줄을) 숨겨서 정말 더 높은 가치를 줄 수 있는 경우가 아니라면, 항상 보여야 합니다.

 

Allow auto-hiding of the indicator for accessing the Home screen sparingly. When auto-hiding is enabled, the indicator fades out if the user hasn’t touched the screen for a few seconds. It reappears when people touch the screen again. This behavior should be enabled only for passive viewing experiences like playing videos or photo slideshows.

홈 인디케이터 자동숨김 기능을 너무 자주 사용하지 마세요. 자동숨김 기능이 켜져있는 경우, 사용자가 화면을 몇초간 만지지 않으면 인디케이터는 희미해집니다. 사용자가 다시 화면을 만지면 나타납니다. 이 기능은 비디오를 보거나 사진 슬라이드 쇼를 보는 등 사용자가 수동적으로 무언가를 보는 경험에서만 켜져야합니다.

Additional Layout Considerations
추가적인 레이아웃 고려사항들

Make sure your website looks great on an edge-to-edge display. See Designing Websites for iPhone X on webkit.org.

웹사이트가 edge-to-edge 화면에서도 여전히 좋아보이도록 하세요. webkit.org 의 Designing Websites for iPhone X 를 참고하세요.