In all platforms, beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience.
모든 플랫폼에서 아름답고 유동적인 모션은 인터페이스를 생동감 있게 만들어 상태를 전달하고 피드백과 지침을 제공하며 시각적 경험을 풍부하게 합니다.
→ 모션을 통해 감각적인 유저 경험을 생성, 사용자의 행동을 유도 가능
Many system components automatically include motion, letting you offer familiar and consistent experiences throughout your app or game. If you design custom motion, prefer intentional animations that keep people oriented and comfortable, provide clear feedback in response to their actions, and help them learn your interface without getting overwhelmed.
많은 시스템 컴포넌트에는 자동으로 모션이 포함되어 앱이나 게임 전반에 걸쳐 친숙하고 일관된 경험을 제공합니다. 사용자 지정 모션을 설계할 때는 의도적인 애니메이션에 초점을 맞추면 사람들의 방향성을 유지하고, 그들의 행동에 대한 명확한 피드백을 제공하며, 사용자들이 압도당하지(질리지) 않고 당신의 인터페이스를 배울 수 있도록 도와줍니다.
→ 애니메이션을 잘 활용하면, 개발자가 의도한대로 사용자를 유도할 수 있음
역자 첨언
Use subtle motion to communicate. Motion can be a great way to enhance feedback and understanding by showing how things change, what will happen when people perform an action, and what they can do next. For example, when people minimize a window in macOS, it moves smoothly from the desktop to the Dock so they know exactly where it went; when people set up Face ID, the system briefly describes what they need to do and helps them during scanning by visually changing the tick marks encircling their face; in visionOS, window controls expand gently when people look at them.
커뮤니케이션을 위해 섬세한 모션을 사용하세요. 모션은 상황이 어떻게 변하는지, 사람들이 행동을 수행할 때 어떤 일이 일어날지, 그리고 그들이 다음에 무엇을 할 수 있는지를 보여줌으로써 피드백과 이해를 향상시키는 좋은 방법이 될 수 있습니다. 예를 들어, MacOS에서 창을 최소화하면 창이 바탕 화면에서 독으로 부드럽게 이동하여 창이 어디로 갔는지 정확히 알 수 있습니다. Face ID를 설정하면 시스템은 얼굴 주위에 있는 체크 표시를 시각적으로 변경하여 스캔 중에 수행해야 할 작업을 간략하게 설명합니다. visionOS에서는 창 컨트롤은 사람들이 창을 볼 때 부드럽게 확장됩니다.
→ 모션을 통해 앱의 이해도를 높일 수 있음
역자 첨언
Add motion purposefully, supporting the experience without overshadowing it. Don’t add motion for the sake of adding motion. Gratuitous or excessive animation can distract people and may make them feel disconnected or physically uncomfortable.
모션은 목적성을 흐리지 않도록 사용자 경험에 도움을 주어야 합니다. 모션을 추가하기 위해 모션을 추가하지 마십시오. 근거가 없거나(Gratuitous) 과도한(excessive) 애니메이션은 특히 몰입형 경험을 제공하지 않는 앱에서 사람들의 신체적으로 불편하게 하거나 연결이 끊어진 느낌을 줄 수 있습니다.
→ 과도한 모션은 오히려 사용자 경험을 망친다.
Make motion optional. There are several reasons why people might not experience movement in your app, so it’s essential to avoid using it as the only way to communicate important information. For example, people can turn on the Reduce Motion accessibility setting to minimize or eliminate animations. For guidance, see Motion.
모션 옵션을 선택할 수 있도록 하세요. 사람들이 화면에 애니메이션을 볼 수 없는 몇 가지 이유가 있으므로 중요한 정보를 전달하는 유일한 방법으로 애니메이션을 사용하지 않는 것이 중요합니다. 예를 들어, Reduce Motion 옵션이 설정되어 있으면 애니메이션을 최소화하거나 제거해야 합니다. 자세한 내용은 Motion을 참조하세요.
→ 사용자가 모션 설정을 제어할 수 있어야 함. 또한, 중요한 정보를 전달하는 방법이 모션만 존재해서는 안된다.
역자 첨언
Strive for realism and credibility. Accurate, realistic motion can help people understand how something works, but motion that doesn’t make sense — or appears to defy physical laws — can make them feel disoriented. For example, if someone reveals a view by sliding it down from the top of the screen, they don’t expect to dismiss the view by sliding it to the side.
현실성과 신뢰성을 줄 수 있어야 합니다. 정확하고 사실적인 움직임은 사람들이 어떤 것이 어떻게 작동하는지 이해하는 데 도움을 줄 수 있지만, 말이 안 되거나 물리적인 법칙을 거스르는 것처럼 보이는 움직임은 그들을 혼란스럽게 만들 수 있습니다. 예를 들어 화면 위쪽에서 아래로 슬라이드하여 보기를 표시한다면, 보기를 옆으로 슬라이드하여 뒤로 갈 수 있을 것(dismiss)이라고 생각하지 못할 것입니다.
→ 혼란을 야기하는 모션을 사용하지 않도록 한다.
역자 첨언
Prefer brief, precise animations. Animations that combine brevity and precision tend to feel more lightweight and less intrusive, and often convey information more effectively. For example, when people tap the list button in Weather on iPhone, the fullscreen view of the current city quickly transitions to the list view, pinpointing the city’s location in the list. In visionOS, when people tap a panorama in Photos, the view smoothly expands to fill the space in front of them, helping them visually track the transition.
간결하고 정확한 애니메이션을 선호합니다. 간결함과 정확성이 결합된 애니메이션은 더 가볍고 덜 거슬리는 경향이 있고, 종종 정보를 더 효과적으로 전달합니다. 예를 들어, 사람들이 아이폰의 날씨에서 목록 버튼을 누르면, 현재 도시의 전체 화면 보기가 목록 보기로 빠르게 전환되며, 목록에서 도시의 위치를 정확히 파악합니다. visionOS에서 사람들이 사진에서 파노라마를 탭하면, 그 뷰는 그들 앞의 공간을 채우기 위해 부드럽게 확장되며, 그들이 시각적으로 전환을 추적하는 것을 돕습니다.
→ 간결하게 애니메이션을 사용하여라. Weather앱을 예시로, 빠르고 간결하게 창이 전환되지만, 정확한 정보를 전달한다.
역자 첨언
In general, avoid adding motion to interactions that occur frequently.The system already provides subtle animations for interactions with standard interface elements. Avoid making people spend extra time watching unnecessary motion every time they interact with something.
일반적으로 자주 발생하는 상호 작용에 모션을 추가하지 마십시오. 이 시스템은 이미 표준 인터페이스 요소와의 상호 작용을 위한 미묘한 애니메이션을 제공합니다. 사람들이 무언가와 상호 작용할 때마다 불필요한 움직임을 보면서 추가적인 시간을 보내게 하는 것을 피하세요.
→ 자주 사용할 것으로 예상되는 부분에는 모션을 좀 줄여도 된다.
Consider using animated symbols where it makes sense. When you use SF Symbols 5 or later, you can apply animations to SF Symbols or custom symbols. For guidance, see Animations.
문맥에 맞는 곳에 애니메이션 심볼을 사용하는 것을 고려해 보세요. SF Symbol 5 이상을 사용할 때 SF Symbol 또는 커스텀 심볼에 애니메이션을 적용할 수 있습니다. 안내는 Animations를 참조하세요.
Platform considerations
No additional considerations for iOS, iPadOS, macOS, or tvOS.
iOS, iPadOS, macOS, tvOS는 고려할 사항이 없습니다.
In visionOS, motion can subtly communicate context, draw attention to information, and enrich immersive experiences. Combined with depth, motion also provides essential feedback when people look at interactive elements. It’s crucial to use motion in ways that people appreciate without causing distraction, confusion, or discomfort.
visionOS에서 모션은 맥락을 미묘하게 전달하고, 정보에 관심을 끌며, 몰입형 경험을 풍부하게 할 수 있습니다. depth와 결합된 모션은 또한 사람들이 상호 작용적인 요소를 볼 때 필수적인 피드백을 제공합니다. 주의를 산만하게 하거나 혼란스럽게 하거나 불편함을 일으키지 않고 사람에게 도움이 되는 방향으로 모션을 사용하는 것이 중요합니다.
While wearing Apple Vision Pro, people use passthrough to view their physical surroundings while they interact with virtual content. Because both the surroundings and app content can be visible at the same time, people can be uncomfortable if the movement of virtual content makes them feel like they or their surroundings are moving instead. In general, the larger a moving virtual object is, the harder it can be to maintain the feeling of stability.
Apple Vision Pro를 착용한 상태에서 사람들은 가상 콘텐츠와 상호 작용하는 동안 자신의 물리적 환경을 보기 위해 passthrough를 사용합니다. 주변 환경과 앱 콘텐츠가 동시에 보일 수 있기 때문에, 가상 콘텐츠의 움직임이 자신이나 주변 환경이 움직이는 것처럼 느끼게 한다면 사람들은 불편할 수 있습니다. 일반적으로, 움직이는 가상 물체가 클수록 안정감을 유지하는 것이 어려울 수 있습니다.
→ 현실과 괴리감을 느끼지 않도록 가상 물체에 적당한 애니메이션을 사용해야 한다.
*passthrough : 현실과 가상 상태가 혼합되어 볼 수 있는 상태
Help people remain comfortable when showing the movement of large virtual objects. If an object is large enough to fill a lot of the field of view, occluding most or all of passthrough, people can naturally perceive it as being part of their surroundings. To help people perceive the object’s movement without making them think that they or their surroundings are moving, you can increase the object’s translucency, helping people see through it, or lower its contrast to make its motion less noticeable. If you need to show a transition between large objects, consider using a fade or an effect that brings content in and out of focus to minimize potential disorientation.
사람들이 큰 가상 물체의 움직임을 보여줄 때 편안함을 유지할 수 있도록 해야 합니다. 만약 어떤 물체가 field of view(시야)의 대부분 또는 전부를 채울 만큼 충분히 크다면, 사람들은 자연스럽게 그 물체를 주변 환경의 일부로 인식할 수 있습니다. 사람들이 그 물체나 주변 환경이 움직이고 있다고 생각하게 하지 않고 그 물체의 움직임을 인지할 수 있도록 돕기 위해, 당신은 그 물체의 투명도를 증가시켜 사람들이 그것을 통해 볼 수 있도록 돕거나, 그것의 대비를 낮춰 움직임을 덜 눈에 띄게 만들 수 있습니다. 만약 당신이 큰 물체들 사이의 트랜지션을 보여주어야 한다면, 잠재적인 방향감각 상실을 최소화하기 위해 페이드 또는 초점을 안팎으로 가져오는 효과를 사용하는 것을 고려해 보세요.
→ 현실과 괴리감을 느끼지 않을 수 있도록, 사이즈가 큰 물체의 움직임에 효과를 줄 수 있다.
NOTE
People can experience discomfort even when they’re the ones moving a large virtual object, such as a window. Although adjusting translucency and contrast can help in this scenario, too, consider keeping a window’s size fairly small.
사람들은 윈도우와 같은 거대한 가상 물체를 움직일 때도 불편함을 느낄 수 있습니다. 이 경우에도 투명도와 대비를 조정하는 것이 도움이 될 수 있지만 윈도우의 크기를 상당히 작게 유지하는 것을 고려해 보세요.
Be mindful of displaying moving content that occupies most of a window. In this scenario, people can sometimes perceive the window’s content as being the world around them and the movement as being their own. If you need to display moving content in a window, consider restricting the size of the window or the content area so people can continue to see their surroundings. If you create the motion shown in the window, prefer maintaining a horizontal horizon, keeping the speed low, and avoiding sudden or unexpected camera movements. You might also want to use low-contrast textures, which can make motion less perceptible.
윈도우의 대부분을 차지하는 움직이는 콘텐츠를 표시하는 것에 주의해야 합니다. 이 시나리오에서 사람들은 때때로 창의 콘텐츠를 자신의 주변 세계로 인식하고 움직임을 자신의 것으로 인식할 수 있습니다. 윈도우에 움직이는 콘텐츠를 표시해야 하는 경우 사람들이 주변을 계속 볼 수 있도록 윈도우의 크기나 콘텐츠 영역을 제한하는 것을 고려하십시오. 창에 표시된 동작을 생성할 경우 수평 유지, 속도를 낮게 유지하고 갑작스럽거나 예상치 못한 카메라 움직임을 피하는 것을 선호합니다. 또한 움직임을 덜 인지하게 만들 수 있는 대비가 낮은 텍스처를 사용할 수도 있습니다.
Be gentle with rotational motions. When you rotate the virtual world, either by rotating the camera, or by rotating large virtual objects around someone, the rotation can upset the person’s sense of stability, especially when the rotation is fast or lasts too long. Instead, consider using instantaneous directional changes during a quick fade-out.
회전 동작을 부드럽게 하세요. 카메라를 회전시키거나 큰 가상 물체를 누군가 주변에 회전시킴으로써 가상 세계를 회전시킬 때, 특히 회전이 빠르거나 너무 오래 지속될 때, 회전은 사람의 안정감에 영향을 끼칩니다. 대신 빠른 페이드 아웃하는 동안 순간적인 방향 변경을 사용하는 것을 고려해 보세요.
→ 빠른 회전에 적합한 모션이 있을 경우, 페이드아웃 + 순간적인 방향 변경을 하는 효과를 사용하라
Avoid showing objects that oscillate in a sustained way. In particular, you want to avoid showing an oscillation that has a frequency of around 0.2Hz because people can be very sensitive to this frequency. If you need to show objects oscillating, aim to keep the amplitude low and consider making the content translucent.
지속적으로 진동하는 물체를 보여주는 것은 피합니다. 특히 사람들은 주파수에 매우 민감할 수 있기 때문에 0.2Hz 정도의 주파수를 가진 진동을 보여주는 것을 피하는 것이 좋습니다. 물체가 진동하는 것을 보여주어야 한다면 진폭을 낮게 유지하는 것을 목표로 하고 내용물을 반투명하게 만드는 것을 고려하세요.
Eliminate unnecessary motion. Because people look at the object they want to interact with, displaying motion where it might cause them to look away can be frustrating. Prefer using motion only when you need to encourage people to look at something important.
불필요한 움직임을 없애세요. 사람들은 그들이 상호작용하기를 원하는 물체를 보기 때문에, 그것이 그들이 외면하게 할 수 있는 곳에 움직임을 보여주는 것은 실망스러울 수 있습니다. 여러분이 사람들이 어떤 중요한 것을 보도록 격려할 필요가 있을 때만 움직임을 사용하는 것을 선호합니다.
As much as possible, avoid displaying motion at the edges of a person’s field of view. People can be particularly sensitive to motion that occurs in their peripheral vision. In addition to being distracting, peripheral motion can even cause discomfort because it can make people feel like they or their surroundings are moving.
가능한 사람의 시야의 가장자리에 움직임을 표시하는 것을 피하세요. 사람들은 주변 시야에서 발생하는 움직임에 특히 민감할 수 있습니다. 주의를 산만하게 하는 것 외에도, 주변 움직임은 사람들이나 주변 환경이 움직이는 것처럼 느끼게 만들 수 있기 때문에 불편함을 유발할 수 있습니다.
Consider giving people a stationary frame of reference. It can be easier for people to handle visual movement when it’s contained within an area that doesn’t move. In contrast, people can feel unwell when it appears that everything around them is moving.
사람들에게 고정된 기준을 제시하는 것을 고려해 보세요. 시각적 움직임은 움직이지 않는 영역 안에 포함되어 있을 때 사람들이 더 쉽게 다룰 수 있습니다. 반면에, 사람들은 주변의 모든 것이 움직이는 것처럼 보일 때 불편함을 느낄 수 있습니다.
Avoid encouraging people to move their head while they’re experiencing visual rotation. When virtual objects appear to rotate around them, people typically need to keep their eyes in a consistent direction to avoid feeling unwell.
사람들이 시각적 회전을 경험하는 동안 머리를 움직이게끔 하는 것을 피하세요. 가상 물체가 그 주변에서 회전하는 것처럼 보일 때, 사람들은 일반적으로 몸이 불편하지 않도록 눈을 일정한 방향으로 유지해야 합니다.
Consider using fades when you need to relocate an object. When an object moves from one location to another, people naturally watch the movement. If such movement doesn’t communicate anything useful to people, you can fade the object out before moving it and fade it back in after it’s in the new location.
오브젝트를 재배치할 필요가 있을 때 페이드를 사용하는 것을 고려해 보세요. 물체가 한 위치에서 다른 위치로 이동할 때, 사람들은 자연스럽게 그 움직임을 지켜봅니다. 만약 그러한 움직임이 사람들에게 유용한 어떤 것도 전달하지 못한다면, 당신은 그것을 움직이기 전에 페이드 아웃하고 그것이 새로운 위치에 있는 후에 그것을 다시 페이드 인 할 수 있습니다.
→ 시각적 움직임이 유의미하지 않다면, 과한 모션은 의미가 없다.
SwiftUI provides a powerful and streamlined way to add motion to your app. If you need to use WatchKit to animate layout and appearance changes — or create animated image sequences — see WKInterfaceImage.
SwiftUI는 앱에 모션을 추가할 수 있는 강력하고 능률적인 방법을 제공합니다. WatchKit을 사용하여 레이아웃 및 모양 변경을 애니메이션화하거나 애니메이션 이미지 시퀀스를 만들어야 하는 경우 WKInterfaceImage를 확인하세요.
NOTE
All layout- and appearance-based animations automatically include built-in easing that plays at the start and end of the animation. You can’t turn off or customize easing.
모든 레이아웃 및 모양 기반 애니메이션에는 애니메이션의 시작과 끝에 재생되는 기본 제공 완화 기능이 자동으로 포함됩니다. 완화 기능을 해제하거나 사용자 지정할 수 없습니다.
역자 첨언
Animating views and transitions — SwiftUI
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/04/25 | 규니 | 초기 번역 |
2023/12/22 | 규니 | 배포 |