[HIG] Layout 레이아웃

 🗣 10. H.I.G에서 읽어본 Layout

본 내용은 H.I.G - Foundations - Layout을 편역 한 것입니다.
 

1) 레이아웃

일관된 레이아웃을 다양한 맥락에 적용하여 사용자의 경험에 더욱 접근할 수 있으며 모든 기기에서 좋아하는 앱과 게임을 즐길 수 있도록 도울 수 있다. 아래의 지침을 따르면 모든 플랫폼에서 레이아웃을 일관되게 가져갈 수 있다.

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.

 
 

2) 가이드와 안전 영역

레이아웃 가이드는 화면에서 컨텐츠의 위치를 지정하고 정렬하고 공간을 지정하는 데 도움이 되는 직사각형 영역을 정의한다. 시스템에는 콘텐츠 주변에 표준 여백을 쉽게 적용하고 최적의 가독성을 위해 미리 정의된 레이아웃 가이드가 포함되어 있다. 사용자가 직접 레이아웃 가이드를 정의할 수도 있다.
안전 영역이란 창이나 장면에서 제공하는 내비게이션 바, 탭 바, 도구 모음 또는 기타 뷰에서 다루지 않는 뷰 내의 영역을 정의한다. 안전 영역은 아이폰의 다이내믹 아일랜드나 일부 맥 모델에서 카메라 하우징과 같은 장치의 대화 및 디스플레이 기능을 방지하는데 필수적이다.
iOS, iPadOS, tvOS, visionOS에서 디바이스 환경의 변화를 특징짓는 특성들에 대해 정의한다. 이는 앱이 보이는 방식에 영향을 미칠 수 있다. Swift UI 혹은 Auto Layout을 사용하여 인터페이스가 다음 사항들을 포함하여 광범위한 특성과 맥락에 동적으로 적응하도록 보장할 수 있다.

• 다양한 장치의 화면 크기, 해상도 및 색상
• 다양한 장치의 방향(사진/풍경)
• 분할 보기
• iPad의 외부 디스플레이 지원, Display Zoom 및 멀티태스킹 모드
• 동적으로 변하는 글자의 크기
• 국제화된 기능: 왼쪽에서 오른쪽으로 / 오른쪽에서 왼쪽으로 / 왼쪽으로 레이아웃 / 날짜, 시간, 숫자 형식, 글꼴 변화 및 텍스트의 길이
• 시스템 기능의 가용성

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.
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.
In iOS, iPadOS, tvOS, and visionOS, the system defines a collection of traits that characterize variations in the device environment that can affect the way your app looks. Using SwiftUI or Auto Layout, you can ensure that your interface adapts dynamically to a wide range of traits and contexts, including:

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

 
 

3) 좋은 예시

가능한 내용의 변화에 유연하게 대응하며 동일한 콘텐츠를 표시하려면 일관된 레이아웃을 디자인해야한다. 사람들은 장치를 회전하거나, 창의 크기를 조정하거나, 다른 디스플레이를 추가하거나, 다른 장치로 전환할 때 사용자의 경험이 잘 작동하고 친숙하게 유지되기를 기대한다. 시스템에서 정의한 안전 영역, 여백 및 가이드를 지정하고 레이아웃 수정자를 지정하여 계층에서 뷰 배치를 미세하게 조정하여 적응 가능한 인터페이스를 보장할 수 있다.
각 플랫폼의 주요 디스플레이 및 시스템 기능을 존중해야 한다. 안전 영역은 다양한 장치의 코너 반경 및 센서 하우징과 같은 기능을 수용하며, 아이폰의 다이내믹 아일랜드, 아이폰 및 아이패드의 홈 인디케이터 및 앱 전환기와 같은 대화형 시스템 요소를 방해하지 않도록 도와준다. 안전 영역은 또한 대화형 구성 요소를 설명하는데 도움이 되며, 크기가 변경되면 콘텐츠의 위치를 동적으로 변경한다.
상대적인 중요성을 전달하기 위해 배치를 사용해야 한다. 사람들은 종종 위에서 아래로, 그리고 뒤에서 뒤로 항목을 바라본다. 따라서 가장 중요한 내용을 시야의 상위 부분과 앞쪽 부분에 배치하는 것이 좋다.

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. You can help ensure an adaptable interface by respecting system-defined safe areas, margins, and guides (where available) and specifying layout modifiers to fine-tune the placement of views in your hierarchy.
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.
Use placement to convey relative importance. People often start by viewing items in reading order — that is, from top to bottom and from the leading to trailing side — so it generally works well to place the most important items near the top and leading side of the window, display, or field of view.

 
 
중요한 내용을 찾기 쉽게 하기 위해 적당한 공간을 두어라. 사람들은 가장 중요한 부분을 먼저 보려고 한다. 불필요한 세부정보들로 가득 채워져 있길 바라지 않는다. 2차 정보를 창이나 디스플레이의 다른 부분에서 사용할 수 있게 만들어야 한다.
시각적으로 그룹화하여야 사람들이 원하는 정보를 쉽게 찾을 수 있도록 하라. 예를 들어 배경, 색상, 재료 등 구분선을 사용하여 연관되어 있는 것들을 표시하고 다른 영역과 구분하여라.
정렬을 사용하여 시각적 스캔을 용이하게 하고 조직 및 계층 구조를 전달하라. 정렬은 앱을 깔끔하고 체계적으로 보이게 만들며 사람들이 눈을 움직이거나 스크롤하는 동안 콘텐츠를 추적하여 정보를 쉽게 찾을 수 있도록 도와준다. 들여 쓰기와 함께 정렬은 사람들이 정보계층을 이해하는데 도움을 줄 수 있다.
텍스트의 크기 변경에 대비해야 한다. 사람들은 대부분 앱이 다른 텍스트 크기를 선택할 때 응답하기를 기대한다. 텍스트 크기 변경을 수용하려면 레이아웃 자체를 바꿔야 할 수도 있다.

Make essential information easy to find by giving it sufficient space. People want to view the most important information right away, so you don’t want to obscure it by crowding it with nonessential details. You can make secondary information available in other parts of the window or display.
Create visual groupings to help people find the information they want. For example, you might use negative space, background shapes, colors, materials, or separator lines to show when elements are related and to separate information into distinct areas.
Use alignment to ease visual scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized and can help people track content while scrolling or moving their eyes, making it easier to find information. Along with indentation, alignment can also help people understand an information hierarchy.
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.

 
사람들이 현재 숨겨진 콘텐츠를 발견할 수 있도록 시각적 힌트를 제공하는 것을 고려할 수 있다. 예를 들어 대규모의 항목을 한 번에 표시할 수 없다면 현재 표시되어있지 않은 추가 항목이 있음을 표시해야 한다. 플랫폼에 따라 스크롤과 같이 사용자가 보기와 상호작용하여 추가 콘텐츠를 표시할 수 있음을 암시하기 위해 항목의 일부를 표시할 수 있다.
주변에 충분한 공간을 제공하여 대화형 구성 요소를 쉽게 찾을 수 있도록 해야한다. 대화형 구성 요소가 너무 가까이 있거나 다른 콘텐츠가 구성 요소를 가득 채우면 사람들이 구성 요소를 구별하기 어려워지기에 앱이나 게임을 사용하는데 불편함을 겪을 수 있다.
다양한 방향, 지역화 및 텍스트 크기를 사용하여 여러 장치에서 미리 앱을 볼 수 있다. 일반적으로 실제 장치에서 넓은 색상과 같은 기능을 미리 보는 것이 가장 좋지만, Xcode의 시뮬레이터를 사용하여 클리핑 및 기타 레이아웃 문제를 확인할 수 있다. 예를 들어 iOS 앱에서 가로 모드를 지원하는 경우 시뮬레이터를 사용하여 장치가 왼쪽 또는 오른쪽으로 회전하는지에 관계없이 레이아웃이 잘 보이도록 할 수 있다.
필요한 경우 디스플레이 변경 사항에 따라 크기를 조정할 수 있다. 예를 들어 가로, 세로 비율이 다른 화면에서와 같은 다른 상황에서 앱을 보는 경우 예술 작품이 잘리거나, 다르게 표시될 수 있다. 이런 경우에는 예술 작품의 비율을 변경해서는 안된다. 대신 중요한 시각적 콘텐츠가 계속 표시되도록 크기를 조정해야 한다. 비전 OS에서 시스템은 창이 Z 축을 따라갈 때마다 자동으로 크기를 조정한다.

Consider providing visual hints to help people discover content that’s currently hidden. For example, if you can’t display all the items in a large collection at once, you need to indicate that there are additional items that aren’t currently visible. Depending on the platform, you might display parts of items to hint that people can reveal additional content by interacting with the view, such as by scrolling.
Make interactive components easy to discover by providing enough space around them. If interactive components are too close together — or if other content crowds them — the components can be difficult for people to distinguish, which can make your app or game hard to use.
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.
When necessary, scale artwork in response to display changes. For example, viewing your app in a different context — such as on a screen with a different aspect ratio — might make your artwork appear cropped, letterboxed, or pillarboxed. If this happens, don’t change the aspect ratio of the artwork; instead, scale it so that important visual content remains visible. In visionOS, the system automatically scales a window when it moves along the z-axis.

 
 

4) 플랫폼 고려사항

iOS, iPadOS

세로 방향과 가로 방향을 모두 지원하는 것을 목표로 하라. 사람들은 다양한 이유로 다른 방향을 선택하며 일반덕으로 모든 방향에서 앱이 잘 작동하리라 기대한다. 만약 앱이 단일 방향으로 실행되는 것이 필수적이라면 장치를 회전하라고 말하지 않아야 한다. 지원되지 않는 방향으로 장치를 잡고 있을 때 자동으로 장치가 회전하지 않는다면 사람들은 본능적으로 장치를 회전시킬 것이다. 앱이 가로 방향으로만 실행되는 경우, 사람들이 장치를 왼쪽에서 오른쪽으로 회전하던 오른쪽에서 왼쪽으로 회전하던 동일하게 잘 동작되어야 한다.
특정 기기에서 앱이 실행되는 경우 해당 기기의 모든 화면 크기에서 실행되는지 확인해봐야 한다. 즉 아이폰 전용 앱은 모든 아이폰 화면 크기에서 실행되어야 하고, 아이패드 전용 앱은 모든 아이패드 화면 크기에서 실행되어야 한다.
전체 너비 버튼을 삽입하라. 전체 너비 버튼 측면의 표준 시스템의 정의 여백을 준수해야 한다. 화면 하단에 전체 너비 버튼을 배치하는 것이 좋다. 둥근 코너와 안전 영역 간의 배열이 홈 표시기와 충돌하지 않도록 도와준다.
화면을 채우려면 시각적 콘텐츠를 확장해야 한다. 배경이 디스플레이의 가장자리까지 확장되고 테이블과 컬렉션처럼 세로로 스크롤 가능한 레이아웃이 맨 아래까지 계속되로록 해야 한다.
아이패드에서 화면 양쪽에 가로세로 방향으로 조종 장치를 배치하는 것을 고려하라. 조종 장치가 화면의 왼쪽과 오른쪽에 있을 때, 사람들은 그 장치를 잡고 있는 동안 그것들에 쉽게 닿을 수 있다.
가능한 경우 화면의 하단 가장자리에 대화 관련 조작을 배치하지 말아라. 방향에 관계없이 사람들은 화면의 하단 가장자리에서 시스템 제스처를 사용하여 홈 화면 및 앱 전환과 같은 기능에 접근하며 이러한 제스처는 해당 영역에서 사용자 제스처를 취소할 수 있다. 또한 이런 영역은 사람들이 쉽게 도달하기 어려운 부분에 위치하므로 배치하지 않는 것이 좋다. 만약 게임에서 하단 영역에 컨트롤을 배치해야 하는 경우 화면 상단과 하단에 컨트롤을 배치할 때 일치하도록 하고 주변에 충분한 공간을 남겨 사람들이 컨트롤과 상호작용하려고 할 때 실수로 컨트롤을 목표하지 않도록 해야 한다.
다양한 상태의 상태 표시바에 대비해야 한다. 상태 표시바 아래에 콘텐츠를 표시하는 경우 안전 영역을 사용하여 필요에따라 컨텐츠 위치를 동적으로 변화시킬 수 있다.
상태표시바가 사용자 경험을 증진시키는 경우에만 상태 표시바를 숨겨라. 상태표시바는 사람들이 유용하다고 생각하는 정보를 표시하고 대부분의 앱에서는 사용하지 않는 화면 영역을 차질하기에 일반적으로 표시 상태를 유지하는 것이 좋다.

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.
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.
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.
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의 안전 영역

안전 영역은 내비게이션 바, 탭바, 툴바, 그리고 다른 뷰에서 다루지 않는 영역들에 대해 정의한다.

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.

 

iOS의 키보드 레이아웃

iOS15 이후부터는 카보드가 현재 차지하는 공간을 나타내는 키보드 레이아웃 가이드를 제공하여 안전 영역을 세트로 설명한다. 이 가이드를 사용하면 사람들이 사용하는 키보드의 종류나 위치에 관계없이 키보드가 앱의 필수적인 부분처럼 느껴지도록 할 수 있다.

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.

 

macOS

창 하단에 조작과 중요한 정보를 배치하는 것을 피하라. 사람들은 종종 창을 움직여서 가장자리가 화면 하단 아래에 있도록 한다.

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.

 

tvOS

TV의 크기는 매우 다양하다. 애플 TV에서 앱의 레이아웃은 아이폰이나 아이패드에서처럼 화면 크기에 자동으로 맞지 않는다. 대신 앱은 모든 디스플레이에서 동일한 인터페이스를 보여준다. 다양한 화면의 크기에서 멋지게 보이기 위해 레이아웃을 설계할 때 각별히 주의해야 한다.
화면의 안전 영역을 유지하라. 기본 콘텐츠의 경우 화면의 상단, 하단에 60픽셀, 측면에 80픽셀을 설정하라. 사람들은 가장자리에 위치한 컨텐츠를 보기 어려워하며 오래된 TV에서는 오버 스캐닝으로 인해 의도하지 않은 잘림 현상이 발생할 수 있다. 화면 밖 콘텐츠를 비롯하여 의도적으로 화면 밖으로 향하는 요소만이 이 영역 밖에 표시되어야 한다.

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.
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.

초점을 맞출 수 있는 요소 사이에 적절한 패딩을 포함하라. UIKit과 포커스 API를 사용하면 요소가 초점을 맞출 때 더 거친다. 요소가 초점을 맞출 때에 어떻게 보이는지 고려하고 중요한 정보와 의도치 않게 겹치는 것을 피해야 한다.

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.

 
 

레이아웃 템플릿을 사용하여 미디어 중심의 앱을 구축하고 그리드를 사용하여 콘텐츠 모음을 제공하라. 미디어 앱이 최소한의 레아아웃을 임의로 정의하여 콘텐츠를 잘 표현해야 하는 경우 템플릿을 사용하라. 앱에서 콘텐츠의 모음을 보여줘야 하는 경우 그리드를 사용하여 콘텐츠를 멀리서, 쉽게 탐색할 수 있으며 원격으로 빠르게 탐색할 수 있다.

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.

 

레이아웃 템플릿

애플 TV의 템플릿은 깔끔하고 일관된 레이아웃을 제공하여 콘텐츠가 중앙에서 집중될 수 있도록 한다. 이러한 템플릿은 애플 TV의 주 사용 언어인 자바스크립트와 TVML(Apple TV Markup Language)에 기반을 두고 있으며 사람들이 앱을 여는 경우 동적으로 작동한다. 템플릿은 유연성과 앱 자체의 콘텐츠에 풍부함을 제공하여 좋은 TV 스크린과 이상적인 스트리밍 서비스를 만들어준다.
의도에 맞게 템플릿을 사용하라. 사용자는 템플릿의 배경, 색상, 크기, 레이아웃 그 이상을 커스텀 화할 수 있다. 하지만 사용자 지정으로 인해 템플릿이 거슬리거나 인식할 수 없는 경우에는 다른 템플릿을 사용하거나 사용자 지정 인터페이스를 설계하는 것을 고려할 필요가 있다.
의도에 맞게 템플릿을 커스텀하라. 레이아웃 템플릿은 사용자가 원하는 대로 정의할 수 있다. 배경, 색, 크기, 레이아웃 등을 제어할 수 있다. 앱을 설계할 때 거슬리거나 방해가 되는 사용자 정의는 피하는 것이 좋다.
템플릿을 사용하기 전에 의도를 이해하라. 사용자가 임의로 변경한 건에 대하여 기본 템플릿을 인식할 수 없는 경우 다른 템플릿을 사용하거나 사용자 지정 인터페이스를 사용하는 것을 고려해봐야 한다.

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.
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.

 

 

격자

아래의 격자 레이아웃은 최적의 시각환경을 제공해 준다. 초점이 맞지 않는 행과 열 사이에 적절한 간격을 사용하여 항목에 초점을 맞출 때에 겹치지 않도록 해야 한다.
UIKit의 collection view flow 요소를 사용하는 경우 그리드의 열 수는 콘텐츠의 너비와 간격에 따라 자동으로 결정된다.

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.

 

행에 제목이 추가되는 경우 추가적인 간격이 필요하다. 행에 제목이 있는 경우 초점이 맞지 않은 이전 행의 바닥과 중심 사이에 시선이 쏠리지 않도록 충분한 간격을 제공해야 한다. 또한 제목의 바닥과 행의 초점이 맞지 않은 항목 사이의 상단에 추가적인 간격을 제공해야 한다.
일관된 간격을 사용하라. 일관된 간격을 사용하지 않은 경우 간격은 좋게 보이지 않으며 사람들이 인식하는데 어려움을 겪을 수 있다.
부분적으로 숨겨진 내용을 대칭적으로 보이도록 하라. 완전히 보이는 내용에 직접적인 주의를 기울이려면 화면 밖의 내용을 화면 양쪽의 너비와 동일하게 부분적으로 숨겨야 한다.

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.

 

visionOS

아래의 안내는 비전 OS 앱이나 게임 창에 콘텐츠를 배치하여 친숙하고 쉽게 사용할 수 있도록 도와준다. 공간에서 창을 표시하는 방법과 비전 OS에서 깊이, 스케일, 시야각을 사용하는 모범 사례는 지침을 참조하면 된다.

🗣일반적인 창에서 깊이를 더할 때는 Z 축을 따라 창의 경계가 확장된다. 만약 콘텐츠가 멀리 확장되면 시스템이 임의로 잘라낸다.

 visionOS
The guidance below can help you lay out content within the windows of your visionOS app or game, making it feel familiar and easy to use. For guidance on displaying windows in space and best practices for using depth, scale, and field of view in your visionOS app, see Spatial layout. To learn more about visionOS window components, see Windows > visionOS.

NoteWhen you add depth to content in a standard window, the content extends beyond the window’s bounds along the z-axis. If content extends too far along the z-axis, the system clips it.

 
창의 콘텐츠를 제한 범위 내에서 유지하라. 비전 OS에서 시스템은 X, Y 평면에서 창의 경계 바로 밖에 있는 창 컨트롤을 표시한다. 예를 들어 공유 메뉴는 창의 위에 나타내고, 이동 및 닫기 컨트롤러는 창의 아래에 나타낸다. 2D 혹은 3D 콘텐츠가 이러한 영역을 침범한다면, 사람들이 조작을 하기 어려워진다.
앱에서 자장 중요한 콘텐츠와 조작을 중앙에 배치하라. 사람들은 더욱 찾기 쉽고 상호작용하기 쉬워질 것이
창에서 상호작용할만한 요소들을 쉽게 볼 수 있도록 배치하라. 상호작용할만한 요소의 근방에 충분한 공간을 만들어 알기 쉽게 하고 편안하게 하라. 시스템에서 제공하는 효과로 인해 가려져서는 안 된다. 예를 들어 적어도 60픽셀 이상 떨어트리는 방법 등을 예시로 들 수 있다.
창에 속하지 않는 컨트롤을 추가로 표시해야 하는 경우 장식을 사용하라. 장식은 시각적으로 연결된 상태로 앱을 유지해 주며 시스템에서 제공하는 컨트롤을 방해하지 않는다. 예를 들어 창의 탭바와 툴바를 들 수 있다.

Keep a window’s content within its bounds. In visionOS, the system displays window controls just outside a window’s bounds in the XY plane. For example, the Share menu appears above the window and the controls for resizing, moving, and closing the window appear below it. Letting 2D or 3D content encroach on these areas can make the system-provided controls, especially those below the window, difficult for people to use.
Consider centering the most important content and controls in your app. It can be easier for people to discover and interact with content when it’s near the middle of a window, especially when the window is large.
Make a window’s interactive components easy for people to look at. You need to include enough space around an interactive component so that visually identifying it is easy and comfortable, and to prevent the system-provided hover effect from obscuring other content. For example, place buttons so their centers are at least 60 points apart. For guidance, see Eyes, Spatial layout, and Buttons > visionOS.
If you need to display additional controls that don’t belong within a window, use an ornament. An ornament lets you offer app controls that remain visually associated with a window without interfering with the system-provided controls. For example, a window’s toolbar and tab bar appear as ornaments. For guidance, see Ornaments.

 

watchOS

화면의 한쪽 가장자리에서 다른 쪽 가장자리로 콘텐츠가 확장되도록 디자인하라. 애플워치의 베젤은 콘텐츠 주변에 자연스러운 패딩을 제공한다. 소중한 공간을 낭비하지 않기 위해서는 요소 간 패딩을 최소화해야 한다.

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.

인터페이스에 2개 혹은 3개 이상의 컨트롤을 나란히 배치하지 마라. 일반적으로 글리프를 포함하여 3개 이하 혹은 2개 이하의 버튼을 연속적으로 표시하라. 일반적으로 텍스트가 있는 버튼을 화면에 꽉 차게끔 배치하는 것이 낫지만, 스크롤이 되지 않는 경우에는 나란히 놓인 2개의 짧은 문구는 잘 작동한다.

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.

 

사람들이 다른 사람들에게 보여주기를 원하는 경우를 대비해서 자동회전을 지원한다. 사람들이 손목을 뒤집을 때, 앱들은 일반적으로 잠자기 모드로 변경하지만 어떤 경우에는 자동회전을 해야 할 수도 있다. 예를 들어 착용자가 친구에게 이미지를 보여주거나 QR 코드를 보여주기를 원할 수 있는데, 이때는 자동회전 지침을 사용해야 한다.

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.

 

 

+) HIG를 공부하고

상태표시바가 사용자 경험을 증진시키는 경우에만 상태 표시바를 숨겨라.

Hide the status bar only when it adds value or enhances your experience.

상태 표시바의 와 관련하여 언제 보여줄지, 숨길지에 관한 내용이 있어서 신기했다.
유튜브를 보거나, 음악을 들을 때 어느 정도 들었는지 주로 보는 편인데, 이럴때 상태표시바가 아주 유용했다. 하지만, 어느정도 영상에 집중하거나 시간이 흐르다 보면 상태표시바가 사라지는 것을 알 수 있는데, 이러한 부분까지 문서화되어 있음에 놀랐다.
하지만 약간의 아쉬웠던 점은, 사용자의 경험을 증진시키는 경우에 표시바를 숨기라는 말이 조금은 모호하다고 생각된다. 누군가에게는 상태표시바를 지속적으로 보여주는 것이 좋을 수도 있고, 원할 때만 보이는 걸 원하는 사용자도 있을 텐데, 어떤 기준을 가지고 보여줄지 말지 결정하는 것에 대한 논의가 없어 약간은 아쉬웠다..
 
애플워치 관련 레이아웃도 인상 깊었다. 실제 애플워치 사용유저로서 화면에 있는 약간의 베젤 아래로 패딩값이 설정된 건 알고 있었다. 해당 문서에서는 시스템에서 제공하는 기본 패딩값을 고려하여 애초에 패딩을 작게 설정하라는 세심함에 두 번 놀랐다. 내 생각이지만, 짧은 텍스트 버튼을 2개 나란히 배치하는 방법 대신 아이콘을 활용하여 2개의 버튼에 여유로운 패딩을 제공하는 건 어떨까.. 생각해 보았다.
특히, 워치를 회전하는 경우에 잠자기 모드를 실행하거나 자동회전 모드를 실행해야 하는데, 각각의 경우를 대비한 문서가 추가로 있다는 점에서 놀랐다. 워치를 내려놓으면 자동으로 잠자기 모드에 돌입했는데, 어떤 메커니즘으로 작동한 건지 궁금하기는 하다.

isAutorotating | Apple Developer Documentation

 
인스턴스 속성으로 사용자가 손목을 뒤집을 때 인터페이스가 자동으로 회전할지를 결정하는 값이라고 한다.

var isAutorotating: Bool { get set }

기본 값은 false로 되어 손목을 회전하면 시계는 자체적으로 손목이 시계와 떨어지는 것으로 받아들여 절전모드로 실행된다고 한다. 자동회전이 활성화되면 watchOS는 인터페이스를 활성화하여 회전을 돕는다고 한다. 음… 직접 사용해 본 적도 없고 코드로만 봐서는 잘 이해가 가지 않는다.
 

willActivate() | Apple Developer Documentation

 

didDeactivate() | Apple Developer Documentation

각각의 메서드를 활용하여 동작된다고 한다!
 
애플 TV의 주된 언어가 자바스크립트와 TVML(Apple TV Markup Language) 임에 놀랐다.
TVML(Apple TV Markup Language)이란 언어는 처음 봐서 좀 찾아보았다.
 

TVML | Apple Developer Documentation