[HIG 스터디] Foundation : Layout 번역

Layout

Using a consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices.

일관된 레이아웃을 사용하여 다양한 문맥에 적응하는 것은 경험을 더 접근 가능하게 만들어주며 사람들이 모든 기기에서 좋아하는 앱과 게임을 즐길 수 있도록 도와줍니다.

→ 일관된 레이아웃을 사용하는 것은 중요하다

 

 

Guides and safe areas

A layout guide defines a rectangular region that helps you position, align, and space your content on the screen. 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.

레이아웃 가이드(Layout Guide)는 화면에 컨텐츠를 위치시키고 정렬하며 간격을 조정하는 데 도움을 주는 직사각형 영역을 정의하는 것입니다. 시스템에는 컨텐츠 주변의 표준 여백을 적용하고 최적의 가독성을 위해 텍스트 너비를 제한하는 미리 정의된 레이아웃 가이드가 포함되어 있습니다. 또한 사용자 정의 레이아웃 가이드를 정의할 수도 있습니다.

→ 레이아웃 가이드는 화면에 컨텐츠를 정렬하는 데 도움을 주는 영역이며, 미리 정의된 가이드가 시스템에 존재하고 사용자가 직접 가이드를 정의할 수도 있다

 

A safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a window or scene might provide. Safe areas are essential for avoiding a device’s interactive and display features, like the Dynamic Island on iPhone or the camera housing on some Mac models.

안전 영역(Safe Area)은 네비게이션 바, 탭 바, 툴 바 또는 다른 화면이나 창을 제외한 영역을 의미합니다. 안전 영역은 iPhone의 Dynamic Island나 일부 Mac 모델의 카메라 하우징과 같은 기기의 인터랙티브 및 디스플레이 기능을 방지하기 위해 필수적입니다.

*Dynamic Island : 모양을 바꾸고, 기능을 바꾸고, 시각을 바꾸고, 판도를 바꾸는 iPhone의 새로운 사용법. 각종 알림 및 활동 관련 정보를 한곳에서 인터랙티브한 방식으로 확인할 수 있게 해준다

*카메라 하우징 : 카메라 렌즈, 플래시, 마이크 및 다른 센서들이 포함된 디바이스의 뒷면 상단 부분

→ 안전 영역은 네비게이션 바, 탭 바, 툴 바 또는 컨텐츠가 표시되는 화면 및 창을 제외한 영역을 의미하며, 앱을 디자인할 때 안전 영역을 고려해야 한다

 

In iOS, iPadOS, and tvOS, the system defines a collection of traits that characterize variations in the device environment that can affect the way your app displays on the screen. Using SwiftUI or Auto Layout, you can ensure that your interface adapts dynamically to a wide range of traits and contexts, including:

iOS, iPadOS 및 tvOS에서 시스템은 화면에 앱이 표시되는 방식에 영향을 줄 수 있는 기기 환경의 변화를 나타내는 특성 모음을 정의합니다. SwiftUI 또는 자동 레이아웃을 사용하면 인터페이스가 다음과 같은 다양한 특성과 상황에 동적으로 적응하도록 할 수 있습니다:

→ 시스템에는 기기 환경의 변화를 나타내는 특성 모음 집합이 정의되어 있어서, SwiftUI와 자동 레이아웃을 사용하면 인터페이스가 다음과 같은 다양한 특성과 상황에 동적으로 적응하도록 할 수 있다

 

• Different device screen sizes, resolutions, and color spaces
• Different device orientations (portrait/landscape)
• Split view
• External display support, Display Zoom, and multitasking modes on iPad
• Dynamic Type text-size changes
• Locale-based internationalization features like left-to-right/right-to-left layout direction, date/time/number formatting, font variation, and text length
• System feature availability
• 다양한 장치의 화면 크기, 해상도 및 색 공간
• 다양한 장치의 방향(세로/가로)
• 분할 보기(Split View)
• iPad의 외부 디스플레이 지원, 디스플레이 확대/축소 및 멀티태스킹 모드
• 동적 유형(Dynamic Type) 텍스트 크기 변경
• 텍스트 길이, 폰트 변화, 날짜/시간/숫자 형식 지정과 같은 지역 기반 국제화 기능, 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로의 레이아웃 방향 등
• 시스템 기능 가용성

 

Best practices

Design a consistent layout that adapts gracefully to context changes, while displaying the same content as much as possible. People expect your experience to work well and remain familiar when they rotate their device, resize a window, add another display, or switch to a different device. Ensure an adaptable interface by respecting system-defined safe areas, margins, and guides and specifying layout modifiers to fine-tune the placement of views in your hierarchy.

가능한 한 동일한 내용을 표시하면서 맥락 변경에 적절하게 적응하는 일관된 레이아웃을 디자인하세요. 사용자들은 기기를 회전하거나 창 크기를 조정하거나 다른 기기로 전환할 때, 사용자의 경험이 잘 작동하고 익숙한 상태를 유지되기를 기대합니다. 시스템에서 정의한 안전 영역, 여백 및 가이드를 존중하고 layout modifiers를 지정하여 뷰의 배치를 정교하게 조정함으로써 적응 가능한 인터페이스를 보장하세요.

→ 맥락 변경에 적절하게 적응하는 일관된 레이아웃을 디자인 해야 한다

 

Respect key display and system features in each platform. Safe areas help you accommodate features like the corner radius and sensor housings on various devices, and avoid interfering with interactive system elements like Dynamic Island on iPhone and the Home indicator and app switcher on iPhone and iPad. Safe areas also help you account for interactive components like bars, dynamically repositioning content if sizes change.

각 플랫폼에서 중요한 디스플레이와 시스템 기능을 존중하세요. 안전 영역을 사용하면 다양한 기기의 코너 반경 및 센서 하우징과 같은 기능을 수용하고, iPhone의 Dynamic Island나 iPhone 및 iPad의 Home indicator 및 app switcher와 같은 상호 작용하는 시스템 요소를 방해하지 않도록 도와줍니다. 또한 안전 영역은 또한 바와 같은 대화형 구성 요소를 고려하여 컨텐츠를 동적으로 재배치하여 크기가 변경될 때 맞추는 데도 도움이 됩니다.

*Home indicator : 하단 가장자리에서 홈 버튼을 대신하여 사용자가 홈 화면으로 돌아갈 수 있도록 도와주는 가상 버튼

*App switcher : iOS 기기에서 현재 실행 중인 앱을 보여주는 인터페이스

→ 안전 영역을 사용해, 각 플랫폼에서 디스플레이와 시스템 기능을 존중해야 한다

 

Use placement to convey relative importance. In general, place principal items in the upper half of the screen or window, near the leading side. People typically start in this area, whether they’re looking at the screen or using a screen reader like VoiceOver.

상대적 중요도를 전달하기 위해 배치를 사용하세요. 일반적으로 주요 항목은 화면 또는 창의 상단 절반 또는 leading side 근처에 배치합니다. 사용자들은 화면을 보거나 VoiceOver와 같은 스크린 리더기를 사용할 때 일반적으로 이 영역에서 시작하는 경향이 있습니다.

*Leading side : 일반적으로 화면이나 창에서 왼쪽

→ 중요도를 잘 전달하기 위해서, 일반적으로 중요한 항목들을 화면 또는 창의 상단 절반 또는 leading side 근처에 배치함을 잘 이용해야 한다

 

Elevate essential information by giving it sufficient space. People want to view the most important information instantly, so you don’t want to clutter the screen or window with nonessential details. People can easily access secondary information by scrolling.

중요한 정보는 충분한 공간을 주어 강조하세요. 사람들은 가장 중요한 정보를 즉시 보고 싶어하기 때문에 불필요한 세부 정보로 화면이나 창을 혼란스럽게 만들고 싶지 않습니다. 보조 정보에는 스크롤하여 쉽게 접근할 수 있습니다. 따라서 주요 정보가 더욱 강조되도록 적절한 공간을 유지하는 것이 좋습니다.

→ 보조 정보에는 스크롤을 통해 쉽게 접근할 수 있으니, 중요한 정보가 강조되도록 충분한 공간을 주어야 한다

 

Create visual groupings to help people find the information they want. For example, you might use negative space, background shapes, colors, and materials, or separator lines to display related elements and information in distinct areas.

시각적 그룹을 만들어 사용자가 원하는 정보를 찾을 수 있도록 도와주세요. 예를 들어, negative space, 배경 모양, 색상 및 재료 또는 구분선을 사용하여 관련된 요소와 정보를 구분된 영역에 나타낼 수 있습니다.

*negative space : 빈 공간, 주로 레이아웃에서의 각 요소 사이 간격

→ 관련된 요소와 정보를 시각적 그룹을 통해 구분해, 사용자가 원하는 정보를 찾을 수 있도록 해야 한다

 

Use alignment to ease visual 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 help people visualize an information hierarchy.

정렬(alignment)을 사용하여 시각 주사를 용이하게 하고 구조 및 계층 구조를 전달하세요. 정렬은 앱을 깔끔하고 정리된 것처럼 보이게 해서 사람들이 스크롤하는 동안 집중할 수 있도록 하며, 정보를 더 쉽게 찾을 수 있도록 합니다. 들여쓰기(indentation) 및 정렬은 정보 계층 구조를 시각화하는 데에도 도움이 됩니다.

*시각 주사(visual scanning) : 눈이 정보를 수집할 수 있도록 해주는 안구 운동 시스템의 일부

→ 사용자가 정보를 더 쉽게 찾을 수 있도록 하기 위해서, 들여쓰기와 정렬을 사용해야 한다

 

Be mindful of aspect ratio. Different screen sizes may have different aspect ratios, causing artwork to appear cropped, letterboxed, or pillarboxed. When this is the case, don’t change the aspect ratio of the artwork; instead, scale it to fill the screen so that important visual content remains in view on all display sizes.

종횡비(Aspect ratio)에 유의하세요. 화면 크기에 따라 종횡비가 달라 이로 인해 작업물이 잘리거나, letterboxed 또는 pillarboxed가 생기는 등의 문제가 발생할 수 있습니다. 이 경우에는 작업물의 종횡비를 변경하지 말고, 화면을 채우도록 조정하여 중요한 시각적 콘텐츠가 모든 디스플레이 크기에서 볼 수 있도록 합니다.

*종횡비 : 화면 가로와 세로의 비율

*필러박스(pillar boxed) : 4:3비율의 원본 영상을 보존하고 16:9비율에 맞추기 위해 양옆에 배치하는 검은 띠

*레터박스(letterboxed) : 필름의 원래의 가로세로비를 보존하면서 표준 너비의 비디오 포맷에 맞추어 와이드스크린 가로세로비로 촬영하는 방식

→ 화면 크기에 따라 종횡비가 달라 작업물이 잘리는 등의 문제가 발생할 수 있는데, 이 경우에는 종횡비를 변경하지 말고 화면을 채우도록 조정해야 한다

 

Be prepared for text-size changes. People expect most apps to respond when they choose a different text size. To accommodate text-size changes, you might need to adjust the layout. For guidance on displaying text in your app, see Typography.

텍스트 크기 변경에 대비하세요. 사용자들은 다른 텍스트 크기를 선택할 때 대부분의 앱이 반응하는 것을 기대합니다. 텍스트 크기 변경을 수용하기 위해 레이아웃을 조정해야 할 수도 있습니다. 앱에서 텍스트를 표시하는 방법에 대한 지침은 "Typography"를 참조하세요.

→ 사용자들이 다양한 텍스트 크기를 선택할 때, 대부분의 앱이 반응하는 것을 기대하니 텍스트 크기 변경에 대비해야 한다

 

When possible, consider alluding to hidden content by partially displaying offscreen elements. In large collections where content doesn’t fit on a single screen, you might be able to hint at the additional content by showing portions of the offscreen items.

가능하면 화면 밖의 요소의 일부를 부분적으로 표시하여 숨겨진 콘텐츠를 암시하는 것을 고려하세요. 모든 콘텐츠가 한 화면에 들어가지 않는 대규모 컬렉션의 경우, 화면 밖 항목의 일부를 보여줌으로써 추가 콘텐츠를 암시할 수 있습니다.

→ 모든 내용이 한 화면에 들어가지 않는다면, 화면 밖 요소의 일부를 보여줌으로써 추가 콘텐츠를 암시해야 한다

 

On touch screens, provide ample touch targets for interactive components. Maintain a minimum tappable area of 44x44 points for all controls.

터치 스크린에서는 상호작용하는 구성 요소에 충분한 터치 대상을 제공하세요. 모든 컨트롤에 대해 최소 44x44 포인트의 탭 가능 영역을 유지합니다.

→ 최소 44x44 포인트의 탭 가능 영역을 유지해서 충분한 터치 영역을 제공해야 한다

 

Preview your app on multiple devices, using different orientations, localizations, and text sizes. Although it’s generally best to preview features like wide color on actual devices, you can use Xcode Simulator to check for clipping and other layout issues. For example, if your iOS 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 Simulator를 사용할 수도 있습니다. 예를 들어, iOS 앱이 가로 모드를 지원하는 경우 Simulator를 사용하여 기기가 왼쪽으로 회전하든 오른쪽으로 회전하든 상관없이 레이아웃이 멋지게 보이도록 할 수 있습니다.

→ 다양한 요소들을 고려해 여러 장치에서 앱을 미리 보며, 요소들에 상관없이 레이아웃이 멋지게 보이도록 해야 한다

 

Platform considerations

iOS, iPadOS

Aim to support both portrait and landscape orientations. People choose different orientations for a variety of reasons, and they generally expect apps to work well in every context. If it’s essential that your app run in a single orientation, don’t tell people to rotate their device to match; if your app doesn’t rotate automatically when someone holds the device in an unsupported orientation, they’ll know instinctively to rotate it. If your app is landscape-only, make sure it runs equally well whether people rotate their device to the left or the right.

세로 방향과 가로 방향을 모두 지원하는 것을 목표로 하세요. 사람들은 다양한 이유로 다른 방향을 선택하며, 일반적으로 앱이 모든 상황에서 잘 작동하기를 기대합니다. 앱이 하나의 방향에서만 실행되어야 하는 경우, 사람들에게 기기를 회전하여 일치시키라고 말하지 마세요. 지원되지 않는 방향으로 기기를 사용할 때 앱이 자동으로 회전하지 않으면, 사용자는 본능적으로 회전시킬 것입니다. 앱이 가로 모드 전용인 경우 장치를 왼쪽으로 회전하든 오른쪽으로 회전하든 동일하게 잘 작동되는지 확인하세요.

→ 기기의 세로 방향과 가로 방향을 모두 지원하는 것을 목표로 해야 한다. 앱이 한 방향에서만 실행되어야 하는 경우, 그 모드를 사용하라고 강요해서는 안된다

 

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. For guidance, see Device screen sizes and orientations.

만약 앱이 특정 기기에서 실행된다면, 해당 기기의 모든 화면 크기에서 실행 되는지 확인하세요. 다시 말해, iPhone 전용 앱은 모든 iPhone 화면 크기에서 실행되어야 하며, iPad 전용 앱은 모든 iPad 화면 크기에서 실행되어야 합니다. 자세한 지침은 "Device screen sizes and orientations"을 참조하세요.

→ 앱이 특정 기기(iPhone or iPad)에서 실행될 경우 해당 기기의 모든 화면 크기에서 실행되는지 확인해야 한다

 

Inset full-width buttons. Respect the standard system-defined margins on the sides of full-width buttons. A full-width button at the bottom of the screen generally looks best when it has rounded corners and it aligns with the bottom of the safe area — which also ensures that it doesn’t conflict with the Home indicator.

전체 너비의 버튼을 삽입하세요. 전체 너비의 버튼 옆에는 표준 시스템 정의 여백을 준수하세요. 화면 하단에 있는 전체 너비의 버튼은 일반적으로 둥근 모서리를 가지며 안전 영역의 하단에 정렬되는 것이 가장 좋아 보입니다. 이렇게 함으로써 홈 인디케이터와 충돌하지 않도록 할 수 있습니다.

→ 화면 하단의 전체 너비 버튼은 일반적으로 둥근 모서리를 가지며, 안전 영역의 하단에 정렬시킴으로써, 홈 인디케이터와 충돌하지 않도록 해야 한다

 

Extend visual content 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.

화면을 가득 채울 수 있도록 시각적 콘텐츠를 확장하세요. 배경이 디스플레이 가장자리까지 확장되도록 하고, 테이블이나 컬렉션과 같은 세로로 스크롤 가능한 레이아웃은 하단까지 계속해서 확장되도록 해야 합니다.

→ 시각적 콘텐츠를 확장해야 한다

 

On iPad, consider placing controls on the sides of the screen in landscape orientation. When controls are on the left and right sides of the screen, people can reach them easily with both hands while they’re holding the device.

iPad에서는 가로 방향으로 화면의 양쪽에 컨트롤을 배치하는 것을 고려하세요. 화면의 왼쪽과 오른쪽에 컨트롤을 배치하면 사용자가 기기를 잡은 상태에서 양손으로 쉽게 접근할 수 있습니다.

→ iPad에서 화면의 양쪽에 컨트롤을 배치한다면, 사용자가 보다 편리하게 컨트롤을 조작할 수 있다

 

Avoid placing interactive controls at the bottom edge of the screen when possible. Regardless of orientation, people use system 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. Also avoid placing controls in the far corners of the screen because these areas can be difficult for people to reach comfortably. If your game needs to place controls in the lower portion of the screen — below the safe area — use matching insets when placing them 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.

가능한 경우 화면 하단 가장자리에 상호작용 가능한 컨트롤을 배치하지 않도록 하세요. 방향에 관계없이, 사람들은 화면 하단 가장자리에서 홈 스크린이나 app switcher와 같은 기능에 액세스하기 위해 시스템 제스처를 사용합니다. 이러한 제스처는 이 영역에 구현한 사용자 정의 제스처를 취소시킬 수 있습니다. 또한 사용자가 편안하게 접근하기 어려울 수 있는 화면 모서리에 컨트롤을 배치하지 마세요. 게임에서 안전 영역 아래의 화면 하단에 컨트롤을 배치해야 하는 경우, 화면 상단과 하단에 해당되는 여백을 일치시키고 홈 인디케이터 주변에 충분한 공간을 남겨 사용자가 컨트롤과 상호작용하려고 할 때 실수로 홈 인디케이터를 선택하지 않도록 해야 합니다.

*시스템 제스처 : 모바일 장치에서 사용되는 특정 동작이나 제어

→ 시스템 제스처가 사용자 정의 제스처를 취소시킬 수 있고, 사용자가 화면 모서리에 편안하게 접근하기 어려울 수 있으니 화면 하단 가장자리에 가능한 컨트롤을 배치하지 않도록 해야 한다

 

Be prepared for different status bar heights. If you display content below the status bar, you can use the safe area to help dynamically reposition the content as needed.

다양한 상태 표시줄 높이에 대비하세요. 상태 표시줄 아래에 콘텐츠를 표시하는 경우, 필요에 따라 안전 영역을 사용하여 콘텐츠를 동적으로 재배치할 수 있습니다.

→ 기기들에서의 상태 표시줄 크기 차이가 있으니, 다양한 상태 표시줄 높이에 대비해야 한다

 

Hide the status bar only when it adds value or enhances your experience. The status bar displays information people find useful and it occupies an area of the screen most apps don’t fully use, so it’s generally a good idea to keep it visible.

상태 표시줄은 가치를 더하거나 사용자 경험을 향상시킬 때에만 숨기세요. 상태 표시줄은 사람들이 유용하게 사용하는 정보를 표시하며, 대부분의 앱이 화면의 해당 영역을 완전히 활용하지 않습니다. 따라서 일반적으로는 상태 표시줄을 보이도록 유지하는 것이 좋은 아이디어입니다.

→ 상태 표시줄은 유용한 정보를 표시하며, 대부분의 앱이 해당 영역을 완전히 활용하지 않기 때문에 일반적으로 보이도록 유지하는 것이 좋다

 

iOS, iPadOS safe areas

The safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.

안전 영역은 뷰 내에서 네비게이션 바, 탭 바, 툴바 또는 뷰 컨트롤러가 제공하는 다른 뷰들에 의해 가려지지 않는 영역을 정의합니다.

→ 안전 영역 정의

 

iPhone / iPad

 

iOS keyboard layout guide

iOS 15 and later provides a keyboard layout guide that represents the space the keyboard currently occupies and accounts for safe area insets. Using this guide can help you make the keyboard feel like an integral part of your app, regardless of the type of keyboard people use or where they position it. For developer guidance, see UIKeyboardLayoutGuide.

iOS 15 이상에서는 키보드가 현재 차지하는 공간과 안전 영역 인셋을 고려하는 키보드 레이아웃 가이드를 제공합니다. 이 가이드를 사용하면 사용자가 어떤 종류의 키보드를 사용하든 어디에 위치하든지 간에 키보드가 앱의 중요한 부분으로 느껴지도록 도움을 줄 수 있습니다. 개발자 지침은 UIKeyboard 레이아웃 가이드를 참조하십시오.

→ iOS 15 이상에서 키보드 레이아웃 가이드에 대한 설명

 

 

macOS

Avoid placing controls or critical information at the bottom of a window. People often move windows so that the bottom edge is below the bottom of the screen.

창 하단에 컨트롤이나 중요한 정보를 배치하지 마세요. 사람들은 종종 창을 이동하여 하단 가장자리가 화면 하단을 벗어나도록 조정합니다.

→ macOS에서, 종종 가려질 수 있으니 창 하단에 컨트롤이나 중요한 정보를 배치하지 않아야 한다

 

tvOS

TVs vary widely in size. On Apple TV, app layouts don’t automatically adapt to the size of the screen like they do on iPhone or iPad. Instead, apps show the same interface on every display. Take extra care in designing your layout so that it looks great in a variety of screen sizes.

TV는 크기가 매우 다양합니다. Apple TV에서 앱 레이아웃은 iPhone이나 iPad에서처럼 화면 크기에 자동으로 적응하지 않습니다. 대신, 앱은 모든 디스플레이에서 동일한 인터페이스를 보여줍니다. 따라서 다양한 화면 크기에서도 멋지게 보이도록 레이아웃을 디자인할 때 특별히 주의를 기울여야 합니다.

→ TV의 크기는 매우 다양하지만, tvOS에서 앱 레이아웃이 화면 크기에 자동으로 적응하지 않으니 디자인할 때 이를 고려해야 한다

 

Adhere to the screen’s safe zone. Inset primary content 60 pixels from the top and bottom of the screen, and 80 pixels from the sides. It can be difficult for people to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs. Allow only partially displayed offscreen content and elements that deliberately flow offscreen to appear outside this zone.

화면의 안전 영역을 지켜야 합니다. 화면의 상단과 하단에서 60픽셀, 측면에서 80픽셀의 여백을 두고 주요 콘텐츠를 넣습니다. 가장자리에 가까운 콘텐츠는 사람들이 볼 때 어려울 수 있으며, 구형 TV에서는 과주사(overscanning)로 인해 의도치 않은 자르기가 발생할 수 있습니다. 부분적으로 표시된 offscreen 콘텐츠와 의도적으로 화면 밖으로 흐르는 요소만이 이 영역 외부에 나타날 수 있도록 하세요.

*과주사(overscanning) : 소거 구간의 주사선이 화면에 나타나지 않도록 주사하는 것

*offscreen : 화면에 안 나오는

→ tvOS에서 화면의 안전 영역을 지켜, 주요 콘텐츠는 상하단에서 60픽셀, 측면에서 80픽셀의 여백을 두고 넣어야 한다

 

 

Include appropriate padding between focusable elements. When you use UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure they don’t unintentionally overlap important information.

포커스 가능한 요소 사이에 적절한 간격을 추가해야 합니다. UIKit 및 포커스 API를 사용할 때 포커스가 되면 요소가 커집니다. 요소들이 포커스 되었을 때의 모습을 고려하고, 중요한 정보와 의도치 않은 겹침이 발생하지 않도록 해야 합니다.

→ 요소들이 포커스 되었을 때의 모습을 고려해, 포커스 가능한 요소 사이에 적절한 간격을 추가해야 한다

 

 

Use layout templates to build media-centered apps and use grids to provide collections of content. If the layout of your media app simply needs to present content beautifully with minimal layout customization, use a predesigned layout template. If your app needs to showcase a collection of content, use a grid to make the content easy to browse at a distance and quick to navigate with the remote.

레이아웃 템플릿을 사용하여 미디어 중심 앱을 만들고 그리드를 사용하여 컨텐츠 모음을 제공합니다. 만약 미디어 앱에서 컨텐츠를 아름답게 보여주는 것이 목적이라 최소한의 레이아웃 수정만 필요한 경우, 미리 디자인된 레이아웃 템플릿을 사용하세요. 앱에서 컨텐츠 모음을 표시해야 하는 경우, 그리드를 사용해 컨텐츠를 격자 형태로 표시하면 사용자가 멀리서도 리모컨으로도 쉽게 탐색하고 빠르게 탐색할 수 있습니다.

→ 미디어 앱에서 컨텐츠만 아름답게 보여주는 것이 목적이라면 레이아웃 템플릿을 사용하면 되고, 컨텐츠 모음을 표시해야 한다면 그리드를 사용하면 된다

 

Layout templates

Apple TV templates deliver clean, consistent layouts that make content the center of attention. These templates — based on JavaScript and the Apple TV markup language (TVML) — dynamically load and populate with content when people open your app. Templates give you flexibility to create content-rich apps with predefined layouts that look good on the TV screen and are ideal for streaming media.

Apple TV 템플릿은 깔끔하고 일관된 레이아웃을 제공하여 컨텐츠를 주목받는 중심이 되도록 합니다. 이러한 템플릿은 JavaScript와 Apple TV 마크업 언어(TVML)를 기반으로 하며, 사람들이 앱을 열 때 동적으로 컨텐츠를 로드하고 채우게 됩니다. 템플릿을 사용하면 TV 화면에서 보기 좋고 스트리밍 미디어에 이상적인 미리 정의된 레이아웃을 갖춘 컨텐츠 풍부한 앱을 유연하게 생성할 수 있습니다.

→ Apple TV 템플릿에 대한 설명

 

Choose a template based on its purpose. You can customize a template’s background, color, size, layout, and more, but if your customizations make the template jarring or unrecognizable, consider using a different one or designing a custom interface.

목적에 따라 템플릿을 선택하세요. 템플릿의 배경, 색상, 크기, 레이아웃 등을 사용자 정의할 수 있지만, 사용자 정의가 템플릿을 어색하게 만들거나 알아보기 어렵게 만든다면 다른 템플릿을 사용하거나 사용자 정의 인터페이스를 디자인하는 것을 고려해야 합니다.

→ 목적에 따라 템플릿을 선택해야 한다

 

Customize templates tastefully. Layout templates are highly customizable; you have control over the background, tinting, size, layout, and more. As you design your app, defer to content whenever possible, avoiding customizations that appear distracting, jarring, or obtrusive.

템플릿을 세련되게 사용자 정의하세요. 레이아웃 템플릿은 매우 많은 사용자 정의가 가능합니다. 배경, 색조, 크기, 레이아웃 등을 조정할 수 있습니다. 앱을 디자인할 때 가능한 한 컨텐츠를 우선으로 고려하고, 주의를 분산시키거나 혼란스러운 사용자 정의를 피하도록 해야 합니다.

→ 배경, 색조, 크기, 레이아웃 등을 조정해 템플릿을 세련되게 사용자 정의해야 한다

 

Understand a template’s purpose before using it. If your customizations make the underlying template unrecognizable, consider using a different template or building a custom interface.

For detailed information about integrating templates into your app, see TVML.

템플릿을 사용하기 전에 목적을 이해하세요. 기본 템플릿을 알아볼 수 없게 만드는 사용자 정의 템플릿이 있다면, 다른 템플릿을 사용하거나 사용자 정의 인터페이스를 구축하는 것을 고려해야 합니다.

앱에 템플릿을 통합하는 자세한 정보는 **TVML**을 참조하세요.

→ 템플릿을 사용하기 전에 목적을 이해해서 기본 템플릿을 알아볼 수 없게 만드는 사용자 정의 템플릿이 있을 때, 사용하지 않도록 해야 한다

 

Grids

The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item is brought into focus.

다음과 같은 그리드 레이아웃은 최적의 화면 표시 경험을 제공합니다. 항목이 포커스되었을 때 오버랩이 발생하지 않도록 포커스가 아닌 행과 열 사이에 적절한 간격을 사용해야 합니다.

→ 최적의 화면 표시 경험을 제공하는 그리드 레이아웃에 대한 설명

 

If you use the UIKit collection view flow element, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see [UICollectionViewFlowLayout].

UIKit의 collection view 플로우 요소를 사용하면 그리드의 열 수는 컨텐츠의 너비와 간격에 따라 자동으로 결정됩니다. 자세한 개발자 지침은 UICollectionViewFlowLayout를 참조하세요.

→ UIKit의 collection view flow 요소를 사용하면 그리드의 열 수가 자동으로 결정된다

 

 

Include additional vertical spacing for titled rows. If a row has a title, provide enough spacing between the bottom of the previous unfocused row and the center of the title to avoid crowding. Also provide spacing between the bottom of the title and the top of the unfocused items in the row.

제목이 있는 행에 대해서는 추가적인 수직 간격을 포함해야 합니다. 만약 행에 제목이 있는 경우, 포커스가 맞지 않는 이전 행의 맨 아래와 제목의 중심 사이에 충분한 간격을 제공하여 혼잡을 피해야 합니다. 또한, 제목의 맨 아래와 포커스 되지 않은 행의 항목들의 맨 위 사이에도 간격을 제공해야 합니다.

→ 제목이 있는 행에 대해서 추가로 수직 간격을 포함해야 한다

Use consistent spacing. When content isn’t consistently spaced, it no longer looks like a grid and it’s harder for people to scan.

일관된 간격을 사용해야 합니다. 콘텐츠 간격이 일관되지 않으면 그리드처럼 보이지 않으며, 사용자들이 스캔하기 어려워집니다.

→ 그리드처럼 보이게 하기 위해 콘텐츠 사이에 일관된 간격을 사용해야 한다

 

Make partially hidden content look symmetrical. To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.

부분적으로 숨겨진 콘텐츠를 대칭적으로 보이도록 만드세요. 완전히 표시되는 콘텐츠에 주의를 집중시키기 위해, 화면의 양쪽에 부분적으로 가려진 콘텐츠의 너비를 동일하게 유지하세요.

→ 완전히 표시되는 콘텐츠에 사용자의 주의를 집중시키기 위해, 일부가 숨겨진 콘텐츠는 대칭적으로 보이게 만들어야 한다

 

watchOS

Design your content to extend from one edge of the screen to the other. The Apple Watch bezel provides a natural visual padding around your content. To avoid wasting valuable space, consider minimizing the padding between elements.

컨텐츠를 화면의 한 가장자리에서 다른 가장자리까지 확장하도록 디자인해야 합니다. Apple Watch의 베젤은 컨텐츠 주변에 자연스러운 시각적인 여백을 제공합니다. 가치있는 공간을 낭비하지 않기 위해 요소 사이의 여백을 최소화하는 것을 고려해 보세요. 이렇게 하면 더 많은 컨텐츠를 화면에 효과적으로 배치할 수 있고, 사용자에게 더 많은 정보를 제공할 수 있습니다.

→ 더 많은 컨텐츠를 제공하고, 화면에 효과적으로 배치하기 위해서 요소 사이의 여백을 최소화하며 full width에 맞춰 디자인해야 한다

 

 

Avoid placing more than two or three controls side by side in your interface. As a general rule, display no more than three buttons that contain glyphs — or two buttons that contain text — in a row. Although it’s usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn’t scroll.

인터페이스에서는 한 줄에 두 개 이상의 컨트롤을 나란히 배치하는 것을 피해야 합니다. 일반적으로, 한 줄에는 글리프를 포함하는 버튼은 최대 세 개까지, 텍스트를 포함하는 버튼은 최대 두 개까지만 표시하는 것이 좋습니다. 텍스트 버튼은 일반적으로 화면의 전체 너비를 차지하도록 하는 것이 좋지만, 화면이 스크롤되지 않는 한 줄에 두 개의 짧은 텍스트 레이블이 있는 버튼도 잘 작동할 수 있습니다.

*글리프 : 아이콘 또는 기호로 표시되는 작은 그래픽 요소

→ watchOS에서 한 줄에 두 개 이상의 컨트롤을 나란히 배치하는 것을 피해야 한다

 

 

Support autorotation in views people might want to show others. When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see [isAutorotating].

사용자가 다른 사람에게 보여주고자 하는 뷰에서 자동 회전을 지원하세요. 사용자가 손목을 돌려서 화면을 꺼두는 경우, 앱은 일반적으로 화면을 절전 상태로 전환하지만, 일부 경우에는 콘텐츠를 자동으로 회전시키는 것이 유용할 수 있습니다. 예를 들어 착용자가 친구에게 이미지를 보여주거나 판독기에 QR 코드를 표시하고자 할 수 있습니다. 개발자 가이드는 isAutorotating을 참조하십시오.

→ 사용자가 다른 사람에게 보여주고자 하는 뷰에서 자동 회전을 지원해야 한다

 

Device size classes

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

크기가 다른 기기에서는 화면 크기에 따라 전체 화면 경험에 다른 크기 클래스 조합이 적용됩니다.

 

 

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

iPad에서도 앱 또는 게임이 멀티태스킹 구성에서 실행될 때 사이즈 클래스가 적용됩니다.

 

 

Resources

Related

Right to left

Right to left | Apple Developer Documentation

 

Developer documentation

[UITraitCollection](<https://developer.apple.com/documentation/uikit/uitraitcollection>)

[UITraitEnvironment](<https://developer.apple.com/documentation/uikit/uitraitenvironment>)

Responding to changing display modes on Apple TV

 

Videos

What's New in iOS Design

Essential Design Principles