brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jan 08. 2023

[HIG] Motion

앱에 생동감을 주는 모션

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

모든 플랫폼에서 아름답고 부드러운 모션을 통해 생동감 있는 인터페이스를 만들 수 있으며, 상태와 피드백 및 가이드를 제공하며, 시각적 경험을 풍부하게 만듭니다.

시스템 컴포넌트들은 자동으로 모션을 적용해 앱이나 게임 전반에 걸쳐 사용자에게 친숙하고 일관된 경험을 제공합니다. 사용자 지정 모션을 설계할 때는 사용자들의 사용 방향에 맞는 애니메이션을 설계해야 하며, 사용자의 행동에 대한 명확한 피드백을 제공하여 자연스럽게 인터페이스를 학습하도록 돕는 것이 좋습니다.

Best Practices

사용자와의 커뮤니케이션을 위해 모션을 사용하세요. 모션을 사용해 인터페이스의 변화와 행동에 대한 앱의 반응 또는 이후의 작업에 대해 대략적으로 암시할 수 있습니다. 모션을 통해 사용자의 피드백과 이해를 향상하는 좋은 방법이 될 수 있습니다. 예를 들어, macOS에서 창을 최소화하면 창이 데스크톱에서 독으로 부드럽게 이동하기 때문에 창이 어디로 갔는지 사용자는 자연스럽게 알 수 있습니다. 사람들이 Face ID를 설정할 때 시스템은 어떤 일을 해야 하는지 간략하게 설명하고 얼굴을 둘러싼 눈금 표시들을 시각적으로 변경시켜서 스캔 시 도움을 줍니다.

사용자의 경험을 방해하지 않기 위해 필요한 모션을 추가하고 제공해야 합니다. 모션을 추가하기 위해 또 다른 모션을 추가하지 마세요. 불필요하거나 과도한 애니메이션은 몰입형 앱(예 : 게임)이 아니라면 사람들의 주의를 흐리거나 앱과의 단절감을 줄 수 있습니다.

다양한 모션을 선택할 수 있게 하세요. 정보를 전달하는 방법으로 애니메이션만 사용하지 않아야 합니다. 사람들은 다양한 이유로 화면에 표시되는 애니메이션을 볼 수 없을 수 있습니다. 예를 들어 동작 줄이기 설정이 켜져 있는 경우 애니메이션을 최소화하거나 제거해야 합니다. 가이드라인은 Color and effects를 참고하세요.

역자설명 : 설정 > 손쉬운 사용 > 동작 줄이기 효과를 활성화시키면 인터페이스의 애니메이션을 최소화시킬 수 있습니다.

현실감 있고 사실적인 모션을 제공하는 것이 좋습니다. 정확하고 사실적인 모션은 사람들이 모션이 동작하는지 쉽게 이해할 수 있지만 물리 법칙을 무시하는 것처럼 보이는 모션은 사용자를 혼란에 빠질 수 있게 합니다. 예를 들어 화면 상단에서 아래로 슬라이드해 뷰를 표시하는 경우, 해당 뷰를 옆으로 슬라이드 하여 닫을 것이라고 사용자들은 생각하지 않을 것입니다.

빠르고 정확한 애니메이션이 좋습니다. 짧고 정확한 애니메이션을 사용해 대부분 정보를 더 효과적으로 전달할 수 있습니다. 예를 들어 사람들은 iPhone의 날씨 앱에서 목록 버튼을 탭 하면 현재 도시의 전체 화면 뷰가 목록 뷰로 빠르게 전환되어서 목록에서 도시의 위치를 정확히 파악할 수 있습니다.

사용자들이 자주 사용하는 기능에 모션을 추가하지 마세요. 시스템은 이미 표준 인터페이스 요소와의 상호 작용을 위한 애니메이션을 제공합니다. 사용자가 앱과 상호 작용할 때마다 불필요한 모션을 보는 데 시간을 낭비하게 하지 않는 것이 좋습니다.

Platform Considerations

No additional considerations for iOS, iPadOS, macOS, or tvOS.

watchOS

SwiftUI는 앱에 모션을 추가하는 강력하고 효율적인 방법을 제공합니다. 레이아웃 및 형태 변경에 애니메이션 효과를 주거나 애니메이션 이미지 시퀀스를 생성하기 위해 WatchKit을 사용해야 하는 경우 다음 지침을 따르세요.

NOTE : 모든 레이아웃 및 화면 모드 기반 애니메이션들은 애니메이션의 시작과 끝 부분에 재생되는 기본 제공 easing(Easy-in, East-out)이 자동으로 포함됩니다. 이를 끄거나 커스텀할 수 없습니다.

WatchKit을 사용하여 앱 인터페이스의 다음과 같은 속성에 대해 애니메이션으로 만들 수 있습니다.

정렬 (Alignment)

배경 색상 (Background color)

그룹 이 셋 (Group insets)

높이 (Height)

투명도 (Opacity)

강조 색상 (Accent color)

너비 (Width)

또한 WatchKit을 사용하면 애니메이션 이미지 시퀀스(Animated Image Sequence)를 만들 수 있습니다. 애니메이션 이미지 시퀀스는 시간에 따라 순차적으로 표시되는 두 개 이상의 개별 이미지로 구성됩니다. 시퀀스의 각 이미지는 애니메이션의 단일 프레임을 구성하며 실행 시 재생 동작을 변경하지 않는 한 애니메이션 전체가 루프 상태로 실행됩니다. 애니메이션 이미지 시퀀스는 주로 인터페이스의 이미지, 그룹 및 버튼 요소에 설치합니다.