Spatial layout techniques help you take advantage of the infinite canvas of Apple Vision Pro and present your content in engaging, comfortable ways.
공간 레이아웃 기술은 Apple Vision Pro의 무한한 캔버스를 활용하여 콘텐츠를 매력적이고 편안한 방식으로 제공하는 데 도움이 됩니다
A person’s field of view is the space they can see without moving their head. The dimensions of an individual’s field of view while wearing Vision Pro vary based on factors like the way people configure the Light Seal and the extent of their peripheral acuity.
개인의 시야 영역은 머리를 움직이지 않고 볼 수 있는 공간을 의미합니다. Vision Pro를 착용한 상태에서의 개인의 시야 영역은 사람들이 Light Seal을 구성하는 방식과 주변 시력의 범위와 같은 요소에 따라 다양합니다.
→ 여기서 말하는 시야 영역: Vision Pro를 착용한 상태에서 머리를 움직이지 않고 볼 수 있는 공간
Important
The system doesn’t provide information about a person’s field of view.
이 시스템은 개인의 시야 영역에 대한 정보를 제공하지 않습니다.
Center important content within the field of view. By default, visionOS launches an app directly in front of people, placing it within their field of view. When people need to interact with content for extended periods, you want to keep it comfortably within their field of view.
시야 영역 내에서 중요한 콘텐츠를 가운데 정렬하세요. 기본적으로 visionOS는 앱을 사람들 바로 앞에 띄워 시야 영역 안에 배치합니다. 사람들이 콘텐츠와 오랜 시간 상호작용해야 할 때는 편안하게 시야 영역 내에 유지하도록 해야 합니다.
→ 주요 콘텐츠를 시야영역 내 가운데에 정렬해서 보여줘라
•
•
Avoid anchoring content to the wearer’s head. Although you generally want your app to stay within the field of view, anchoring content so that it remains statically in front of someone can make them feel stuck, confined, and uncomfortable, especially if the content obscures a lot of passthrough and decreases the apparent stability of their surroundings. Instead, anchor content in people’s space, giving them the freedom to look around naturally and view different objects in different locations.
콘텐츠를 착용자의 머리 쪽에 고정시키는 것을 피하세요. 일반적으로 앱이 시야 영역 안에 머무르기를 원하지만, 콘텐츠를 고정하여 정지된 상태로 유지하면, 사용자는 굳어져 있고 제한되고 불편하게 느낄 수 있습니다. 특히 콘텐츠가 시야를 가리고 주변 환경의 안정성을 감소시키는 경우에는 더욱 그렇습니다. 대신, 콘텐츠를 사용자의 공간에 고정시켜 자연스럽게 주변을 둘러볼 수 있도록 해야 합니다. 다양한 위치에서 다양한 객체를 볼 수 있도록 자유롭게 하세요.
→ 콘텐츠를 착용자의 머리 쪽에 고정시키지 말고, 사용자의 공간에 고정시켜 다양한 위치에서 자유롭고 자연스럽게 주변과 객체를 둘러볼 수 있도록 하라.
People rely on visual cues like distance, occlusion, and shadow to perceive depth and make sense of their surroundings. On Vision Pro, the system automatically uses visual effects like color temperature, reflections, and shadow to help people perceive the depth of virtual content. When people move a virtual object in space — or when they change their position relative to that object — the visual effects change the object’s apparent depth, making the experience feel more lifelike.
사람들은 거리, 가려짐, 그림자와 같은 시각적 단서를 활용하여 깊이를 인지하고 주변 환경을 이해합니다. Vision Pro에서는 시스템이 자동으로 색온도, 반사, 그림자와 같은 시각적 효과를 사용하여 가상 콘텐츠의 깊이를 인지하는 데 도움을 줍니다. 사용자가 가상 객체를 이동하거나 해당 객체와의 상대적인 위치를 변경할 때 시각적 효과가 객체의 인식된 깊이를 변화시켜 사실감있는 경험을 제공합니다.
→ Vision Pro에서는 시스템이 자동으로 색온도, 반사, 그림자와 같은 시각적 효과를 사용하여 가상 콘텐츠의 깊이를 인지하는 데 도움을 주어, 사실감있는 경험을 제공한다.
Because people can view your content from any angle, incorporating small amounts of depth throughout your interface — even in standard windows — can help it look more natural. When you use SwiftUI, the system adds visual effects to views in a 2D window, making them appear to have depth. For developer guidance, see Adding 3D content to your app.
사용자는 어떤 각도에서든 콘텐츠를 볼 수 있기 때문에 인터페이스 전체에 작은 깊이를 녹여내는 것이 더 자연스럽게 보이도록 도와줍니다. SwiftUI를 사용할 때, 시스템은 2D 창에 뷰에 시각적 효과를 추가하여 깊이가 있는 것처럼 보이게 합니다. 개발자 지침은 앱에 3D 콘텐츠 추가하기를 참조하세요.
→ 사용자는 어떤 각도에서든 콘텐츠를 볼 수 있기 때문에 인터페이스 전체에 작은 깊이를 녹여내는 것이 더 자연스럽게 보이도록 도와준다.
→ 2D 창에 뷰에 시각적 효과를 추가하여 깊이가 있는 것처럼 보이게 해라
If you need to present content with additional depth, you use RealityKit to create a 3D object (for developer guidance, see RealityKit). You can display the 3D object anywhere, or you can use a volume, which is a component that displays 3D content. A volume is similar to a window, but without a visible frame. For guidance, see Volumes.
만약 추가적인 깊이를 갖는 콘텐츠를 제공해야 한다면, RealityKit을 사용하여 3D 객체를 생성합니다 (개발자 지침은 RealityKit을 참조하세요). 이 3D 객체는 어디서든지 표시할 수 있으며, 또는 3D 콘텐츠를 표시하는 구성요소인 '볼륨'을 사용할 수도 있습니다. 볼륨은 창과 유사하지만 외부 프레임이 보이지 않는 구성요소입니다. 사용 방법에 대해서는 Volumes을 참조하세요.
→ 더 깊이있게 콘텐츠를 제공하고 싶다면, RealityKit을 사용하여 3D 객체를 생성해서 적용시켜라.
Provide visual cues that accurately communicate the depth of your content. If visual cues are missing or they conflict with a person’s real-world experience, people can experience visual discomfort.
콘텐츠의 깊이를 정확하게 전달하는 시각적 단서를 제공하세요. 시각적 단서가 누락되거나 사용자의 실제 경험과 충돌하는 경우, 사람들은 시각적 불편함을 느낄 수 있습니다.
→ 실제 경험과 유사하도록 콘텐츠의 깊이를 정확하게 전달하는 시각적 단서를 제공해라
Use depth to communicate hierarchy. Depth helps an object appear to stand out from surrounding content, making it more noticeable. People also tend to notice changes in depth: for example, when a sheet appears over a window, the window recedes along the z-axis, allowing the sheet to come forward and become visually prominent.
계층 구조를 전달하기 위해 깊이를 활용하세요. 깊이는 객체가 주변 콘텐츠와 더욱 두드러지게 보이도록 도와줍니다. 또한 사람들은 깊이의 변화에 주의를 기울이는 경향이 있습니다. 예를 들어 창 위에 시트가 나타날 때, 창이 z축을 따라 물러나고 시트가 앞으로 나와 시각적으로 두드러지게 보이게 됩니다.
→ 깊이 표현효과를 활용해서 레이어와 같은 계층 구조를 효과적으로 보이도록 도와줘라.
In general, avoid adding depth to text. Text that appears to hover above its background is difficult to read, which slows people down and can sometimes cause vision discomfort.
일반적으로 텍스트에 깊이표현을 추가하는 것을 피하세요. 배경 위에 떠다니는 듯한 텍스트는 읽기 어렵고, 사람들의 인식 속도를 저하시키고 때로는 시각적 불편함을 유발할 수 있습니다.
→ 배경 위에 떠다니는 텍스트는 읽기 어렵고 잘 인식되지 않기 때문에 텍스트에 깊이표현을 추가하는 것을 피해라
Make sure depth adds value. In general, you want to use depth to clarify and delight — you don’t need to use it everywhere. As you add depth to your design, think about the size and relative importance of objects. Depth is great for visually separating large, important elements in your app, like making a tab bar or toolbar stand out from a window, but it may not work as well on small objects. For example, using depth to make a button’s symbol stand out from its background can make the button less legible and harder to use. Also review how often you use different depths throughout your app. People need to refocus their eyes to perceive each difference in depth, and doing so too often or quickly can be tiring.
깊이표현이 가치를 더해주게끔 확실하게 표현하세요. 일반적으로 깊이를 사용하여 설명하고 즐겁게 만드는 것이 좋습니다. 모든 곳에 깊이를 사용할 필요는 없습니다. 디자인에 깊이를 추가할 때 객체의 크기와 상대적 중요성을 고려해야 합니다. 깊이는 앱에서 크고 중요한 요소를 시각적으로 분리하는 데 유용합니다. 예를 들어 탭 바나 툴바를 창과 구분짓게 하는 데에 효과적입니다. 하지만 작은 객체에는 적합하지 않을 수도 있습니다. 예를 들어 버튼의 기호를 배경에서 더욱 두드러지게 하기 위해 깊이를 사용하면 버튼이 읽기 어려워지고 사용하기 어려워질 수 있습니다. 또한 앱 전체에 얼마나 자주 다양한 깊이를 사용하는지도 검토하세요. 사람들은 각 깊이의 차이를 인식하기 위해 눈을 다시 초점 맞추어야 하며, 너무 자주 또는 빠르게 이를 반복하는 것은 피로를 유발할 수 있습니다.
→ 모든 곳에 깊이표현을 할 필요는 없다. 툴바, 탭바와 같은 큰 면적에 깊이표현을 했을 땐, 창과의 영역을 구분짓는 데에 더 도움을 주지만, 버튼 안의 기호 등의 작은 객체에 적용했을 때에는 오히려 더 읽기 어려워지고 사용하기 어려워질 수 있다.
→ 그러므로 깊이 표현이 너무 잦게 적용되기보다, 적절한 곳에 적절한 깊이표현이 적용되게끔 해야한다.
visionOS defines two types of scale to preserve the appearance of depth while optimizing usability.
visionOS에서는 깊이의 모습을 유지하면서 사용성을 최적화하기 위해 두 가지 유형의 크기 조정을 정의합니다.
Dynamic scale helps content remain comfortably legible and interactive regardless of its proximity to people. Specifically, visionOS automatically increases a window’s scale as it moves away from the wearer and decreases it as the window moves closer, making the window appear to maintain the same size at all distances.
동적 크기 조정은 콘텐츠가 사람들과의 거리와 상관없이 편안하게 가독성 있고 상호작용 가능하도록 돕습니다. 구체적으로, visionOS는 창이 착용자로부터 멀어짐에 따라 자동으로 창의 크기를 증가시키고, 창이 가까이 움직일 때는 크기를 감소시켜 창이 모든 거리에서 동일한 크기로 유지되는 것처럼 보이도록 합니다.
→ 동적 크기 조정: 콘텐츠와 사용자의 거리에 따라 창이 모든 거리에서 동일한 크기로 유지되는 것처럼 보이도록 한다.
Fixed scale means that an object maintains the same scale regardless of its proximity to people. A fixed-scale object appears smaller when it moves farther from the viewer along the z-axis, similar to the way an object in a person’s physical surroundings looks smaller when it’s far away than it does when it’s close up.
고정 크기는 객체가 사람들과의 거리와 상관없이 동일한 크기를 유지함을 의미합니다. 고정 크기의 객체는 z축을 따라 뷰어로부터 멀어질 때 작아지는데, 이는 마치 사람의 물리적인 주변 환경에서 먼 거리에 있는 객체가 가까이 있을 때보다 작게 보이는 것과 유사합니다.
역자첨언
To support dynamic scaling and the appearance of depth, visionOS defines a point as an angle, in contrast to other platforms, which define a point as a number of pixels that can vary with the resolution of a 2D display.
동적 크기 조정과 깊이표현을 지원하기 위해 visionOS에서는 포인트를 각도로 정의합니다. 다른 플랫폼은 포인트를 2D 디스플레이의 해상도와 함께 변할 수 있는 픽셀의 수로 정의하는 반면에, visionOS에서는 포인트를 각도로 정의합니다.
→ 동적 크기 조정과 깊이표현을 지원하기 위해 visionOS에서는 포인트를 각도로 정의한다.
Consider using fixed scale when you want a virtual object to look exactly like a physical object. For example, you might want to maintain the life-size scale of a product you offer so it can look more realistic when people view it in their space. Because interactive content needs to scale to maintain usability as it gets closer or farther away, prefer applying fixed scale sparingly, reserving it for noninteractive objects that need it.
가상 객체를 실제 객체와 완벽하게 같게 보이게 하려면 고정 크기를 사용하는 것을 고려하세요. 예를 들어, 제공하는 제품의 실제 크기를 유지하여 사용자가 공간에서 제품을 볼 때 더 현실적으로 보이도록 할 수 있습니다. 상호작용 콘텐츠는 가까이 또는 멀어질 때 사용성을 유지하기 위해 크기를 조정해야 하므로, 고정 크기는 상호작용하지 않는 객체에 적용하는 것이 좋습니다.
→ 가상 물체를 실제처럼 보이게 하려면 고정크기 방법을 사용해라.
Avoid displaying too many windows. Too many windows can obscure people’s surroundings, making them feel overwhelmed, constricted, and even uncomfortable. It can also make it difficult for people to focus on the content they want without having to resize or relocate a lot of windows.
너무 많은 창을 표시하는 것을 피하세요. 너무 많은 창은 사람들의 주변 환경을 가려서 답답하고 압박감을 줄 수 있으며, 때로는 불편함을 유발할 수 있습니다. 또한 사용자가 많은 창을 크기 조정하거나 이동하지 않고도 원하는 콘텐츠에 집중하기 어려울 수 있습니다.
→ 너무 많은 창은 주변 환경을 가려서 답답함과 압박감을 주게되어 불편함을 유발하기 때문에, 너무 많은 창을 표시하는 것은 피해라.
Prioritize standard, indirect gestures. People can make an indirect gesture without moving their hand into their field of view. In contrast, making a direct gesture requires people to touch the virtual object with their finger, which can be tiring, especially when the object is positioned at or above their line of sight. In visionOS, people use indirect gestures to perform the standard gestures they already know. When you prioritize indirect gestures, people can use them to interact with any object they can focus, whatever its distance. If you support direct gestures, consider reserving them for nearby objects that invite close inspection or manipulation for short periods of time. For guidance, see Gestures > visionOS.
표준 간접 동작에 우선순위를 두세요. 사용자는 손을 시야 영역으로 움직이지 않고도 간접적인 동작을 수행할 수 있습니다. 반면, 직접적인 동작은 사용자가 가상 객체에 손가락으로 터치해야 하는 동작으로, 특히 눈 높이 이상에 위치한 객체에 대해서는 피곤할 수 있습니다. visionOS에서는 사용자가 이미 알고 있는 표준 동작을 수행하기 위해 간접 동작을 사용합니다. 간접 동작에 우선순위를 두면 사용자는 어떤 거리에 있는 객체라도 초점을 맞출 수 있는 동작으로 상호작용할 수 있습니다. 직접적인 동작을 지원한다면, 가까이 있는 객체에 집중적인 관찰이나 조작을 필요로 하는 경우에 사용하는 것을 고려하세요. 자세한 지침은 Gestures > visionOS를 참조하세요.
→ 손을 시야 영역으로 움직여 가상 객체에 손가락으로 터치해야하는 동작인 직접적인 동작은 눈 높이 이상에 위치한 객체에 대해서는 피곤할 수 있기 때문에, 손을 시야 영역으로 움직이지 않고도 수행할 수 있는 간접적인 동작을 표준 동작으로써 우선순위에 두어라.
Rely on the Digital Crown to help people recenter windows in their field of view. When people move or turn their head, content might no longer appear where they want it to. If this happens, people can press the Digital Crown when they want to recenter content in front of them. Your app doesn’t need to do anything to support this action.
디지털 크라운을 활용하여 사용자가 시야 영역 내에서 창을 중앙으로 재배치 할 수 있도록 하세요. 사용자가 머리를 돌리거나 움직일 때 콘텐츠가 원하는 위치에 나타나지 않을 수 있습니다. 이런 경우, 사용자는 디지털 크라운을 눌러 콘텐츠를 다시 중앙에 배치할 수 있습니다. 앱에서 이 동작을 지원하기 위해 별도의 조치가 필요하지 않습니다.
→ 디지털 크라운을 활용해서 사용자가 시야 영역 내에서 창을 중앙으로 재배치 할 수 있도록 해라.
Include enough space around interactive components to make them easy for people to focus. When people use their eyes to bring focus to an interactive element, visionOS responds by displaying a visual hover effect that helps them confirm the element is the one they want. It’s crucial to include enough space around an interactive component so that focusing it is easy and comfortable, while preventing the hover effect from crowding other content. For example, place buttons so their centers are at least 60 points apart.
→ 인터랙티브 컴포넌트 주변에 충분한 공간을 포함해서, 해당 요소에 시각적인 호버효과를 표시해서 초첨을 맞출 때 보기 쉽고 편안하게 만들어라. 그리고 호버 효과가 다른 콘텐츠를 가리지 않도록 주의해라
Let people use your app with minimal or no physical movement. Unless some physical movement is essential to your experience, help everyone enjoy it while remaining stationary.
물리적인 움직임을 최소화하거나 없을 때에도 사용자가 앱을 사용할 수 있게 하세요. 경험에 있어서 물리적인 움직임이 필수적이지 않은 경우, 사용자가 정지 상태에서도 편안하게 앱을 즐길 수 있도록 도와주세요.
→ 물리적인 움직임을 최소화하거나 정지 상태일 때에도 사용자가 앱을 사용할 수 있게 해라.
Use the floor to help you place a large immersive experience. If your immersive experience includes content that extends up from the floor, place it using a flat horizontal plane. Aligning this plane with the floor can help it blend seamlessly with people’s surroundings and provide a more intuitive experience.
바닥을 사용하여 대규모 몰입형 경험을 배치할 수 있습니다. 몰입 경험 중에 바닥에서 위로 올라오는 콘텐츠가 포함된 경우, 평평한 수평면을 사용하여 배치하세요. 이러한 평면을 바닥과 일치시키면 사람들의 주변 환경과 자연스럽게 조화를 이룰 수 있으며 직관적인 경험을 제공할 수 있습니다.
→ 바닥에서 위로 올라오는 콘텐츠를 표현할 때와 같은, 객체가 평평한 수평 바닥과 직관적으로 같이 활용될 때 더 자연스러운 몰입 경험을 이끌 수 있을 것이다.
To learn more about windows and volumes in visionOS, see Windows > visionOS; for guidance on laying content within a window, see Layout > visionOS.
visionOS에서 창과 볼륨에 대해 더 자세히 알아보려면 Windows > visionOS를 참조하세요. 또한 창 내에서 콘텐츠를 배치하는 방법에 대한 지침은 Layout > visionOS를 참조하세요.
Not supported in iOS, iPadOS, macOS, tvOS, or watchOS.
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/07/25 | 예나 | 초기 번역 |
2023/12/17 | 예나 | 2차 수정 |
2023/12/22 | 예나 | 배포 |