Apple의 HIG 문서를 번역했습니다. 의역과 오역이 난무합니다 XD 순서도 제각각입니다.
Loading
컨텐츠가 로드될 때, 빈 페이지나 정적인 화면은 앱이 멈춘 것처럼 보일 수 있어 혼란과 좌절감을 유발할 수 있고 잠재적으로 사람들이 앱을 종료시킬 수 있다.
로딩이 발생함을 명확히 하자! 최소한 Activity Spinner라도 보여줘서 뭔가 일어나고 있다고 알려주자. 대략적인 진행사항을 보여줘서 사용자들이 얼마나 기다려야 하는지에 대해 예상할 수 있으면 더 좋다.
가능한 한 빨리 컨텐츠를 보여주자. 내용이 로드되기를 기다리는 것 때문에 사람들이 기대하는 화면을 보여 주는 걸 늦추지 말자. 화면을 빠르게 보여주고, placeholder와 그래픽이나 애니메이션 요소들을 사용해서 아직 컨텐츠가 사용불가능하다는 걸 알려주자. 컨텐츠가 로드되면 그 때 이 placeholder 요소들을 교체하자. 가능하다면 다가올 컨텐츠들을 백그라운드에서 미리 로딩하자. 예를 들어서 애니메이션이 보이고 있다거나, 사용자가 레벨이나 메뉴를 탐색할 시점에.
로딩 타임에 사람들을 교육하거나 즐겁게 해라. 게임 플레이에 대한 힌트를 보여주거나, 재밌는 비디오를 보여주거나, 흥미로운 대체 이미지들을 보여주는 건 어떨까?
로딩 화면을 사용자화하자 물론 표준 progress indicator를 사용하는 것도 좋지만, 컨텍스트에 맞지 않다고 느낄 수도 있다. 당신의 앱이나 게임에 맞는 스타일의 사용자 애니메이션이나 요소들을 통해 더 인상적인 경험을 디자인하는 건 어떨까?
함께 보기
Modality
Modality는 사용자의 이전 컨텍스트와 분리되고 종료하는 명시적인 액션이 필요한 컨텐츠를 일시모드로 보여주는 디자인 기법입니다. 컨텐츠를 모달로 보여주는 건 다음과 같은 역할을 할 수 있습니다.
- 사람들로 하여금 현재 보여지는 묶인 작업이나 밀접하게 관련된 옵션들에 집중하도록 할 수 있습니다.
- 중요한 정보를 수신하고 필요한 경우 행동하도록 보장할 수 있습니다.
iOS는 앱의 특정 상황에서 사용할 수 있도록 알럿과 Activity View와 Action Sheet를 제공합니다. 사용자 모달 컨텐츠를 앱에서 보여주려면 iOS 13 이후에서는 다음과 같은 화면 스타일을 지원합니다.
Sheet
sheet 프레젠테이션 스타일은 카드처럼 보이며 부분적으로 뒤의 컨텐츠를 덮으면서 덮이지 않은 영역이 액션을 받는 것을 막기 위해 딤처리합니다. 사용자가 카드를 열였을 때 이전 작업들이 정지되었음을 기억할 수 있도록 부모 뷰의 상단 모서리나 이전 카드는 현재 카드 뒤에 보여집니다. 사람들이 다음 방식으로 현재 카드를 닫을 수 있습니다.
- 화면 위쪽에서 아래로 스와이프 합니다.
- 카드 컨텐츠가 최상위로 스크롤 된 상태에서 화면 아무데서든 아래로 스와이프 합니다.
- 버튼을 누릅니다.
모달 컨텐츠가 너무 복잡해서 혼란을 주지 않을 경우에만 sheet를 사용하세요.
Fullscreen
fullscreen 프레젠테이션 스타일은 전체화면을 덮습니다. 이전 화면은 완전히 덮이기 때문에 시각적 산만함이 최소화됩니다. 사람들은 버튼을 누름으로써 전체 화면 모달 뷰를 종료할 수 있습니다.
전체 화면 모달 뷰는 예를 들어 비디오나, 사진, 카메라 뷰와 같은 몰입되어야 하는 컨텐츠에 사용하세요. 혹은 문서를 표시하거나 사진을 편집하는 것과 같이 복잡한 작업에 전체 화면 프레젠테이션을 사용하면 좋습니다.
Note 만약 현재 컨텍스트 모달 뷰 스타일이 split view pane 이나 popover, 혹은 전체화면이 아닌 뷰의 모달 컨텐츠라면, 소형 환경에서 모달 컨텐츠를 제공할 때는 풀스크린이 아니라 sheet 로 변경해야합니다.
상황에 맞게 모달을 사용하자. 모달로 화면을 보여주는 건 사용자들이 선택을 하거나 현재 작업과는 다른 작업을 수행하는데 집중시키는 게 중요할 경우에만 사용하세요. 모달로 보여주는 건 사용자로 하여금 현재 컨텍스트에서 빠져나오게 되고 어떤 빠져나가야만하는 액션을 요구하기 때문에, 이 모달을 보여주는 것이 명백히 이점일 때 사용해야 합니다.
필수적이고 이상적인 행동을 위한 정보를 제공하는 알럿을 준비하세요. 통상적으로 알럿은 뭔가 잘못됐을 때 나타납니다. 왜냐하면 알럿은 기존 경험을 중단시키고 탭하여 사라지기를 요구하기 때문에, 사람들이 이러한 간섭에 대해 확신을 갖는 것이 중요합니다. 가이드에서는 Alert을 참조하세요.
모달 작업은 단순하고, 짧고, 좁은 포커스여야합니다. 앱 내에서 새로운 앱을 만들지 맙시다.(복잡한 작업을 모달로 만들지 맙시다.) 만약 모달 작업이 너무 복잡하면 사람들이 모달 컨텍스트에 진입한 후에, 중단된 이전 작업에 대한 sight를 잃을 수 있습니다. 특히 사람들이 길을 잃고 길을 돌아가는 법을 잊을 수 있기 때문에 뷰의 계층 구조가 포함 된 모달 작업을 만드는 데 주의하십시오. 모달 작업에 하위보기가 포함되어야하는 경우 계층 구조를 통과하는 단일 경로와 완료까지 명확한 경로를 제공하세요. 작업 완료 이외의 작업에는 Done 버튼을 사용하지 마세요.
항상 모달 뷰를 닫는 버튼을 포함하세요. 예를 들어, 완료 또는 취소를 사용할 수 있습니다. 단추를 포함하면 모달 뷰가 보조 기술을 적용할 수 있고 dismiss 제스처 대신 사용할 수 있습니다.
필요한 경우 모달 뷰를 닫기 전에 확인을 받아 사람들이 데이터 손실을 피하도록 도와줍니다. 사람들이 짤막한 제스처 또는 뷰를 닫는 데 사용하는 버튼과 상관없이 작업으로 인해 사용자가 생성한 콘텐츠가 손실 될 수 있는 경우 상황을 설명하고 해결 방법을 제시하는 작업 시트를 제시합니다.
팝 오버 위에 카드를 표시하지 마십시오. popover 내에 카드를 표시 할 수는 있지만, popover의 상단에는 아무 것도 나타나지 않습니다 (alert는 제외). 드물게 사람들이 popover에서 행동을 취한 후에 카드를 제시해야 할 경우 카드를 표시하기 전에 popover를 닫습니다.
일반적으로 모달 작업을 식별하는 제목을 표시하세요. 사람들이 모달 작업에 참여하면 이전 컨텍스트에서 벗어나므로 새 컨텍스트를 명확하게 만드는 것이 좋습니다. 보기의 다른 부분에 텍스트를 제공하여 작업을 보다 자세히 설명하거나 지침을 제공할 수도 있습니다.
모달 뷰의 시각적 부분을 앱과 맞추세요. 예를 들어, 모달 뷰에 탐색 막대가 포함되어있는 경우 응용 프로그램의 탐색 막대와 동일한 모양을 사용해야합니다.
앱에서 적절한 모달 전환 스타일을 선택하십시오. 앱과 맞는 전환 스타일을 사용하면 임시 컨텍스트 이동에 대한 인지도를 높입니다. 기본 전환은 모달 뷰를 화면 아래쪽에서 수직으로 슬라이드시키고 닫을 때 뒤로 내립니다. 앱 전체에서 일관된 모달 전환 스타일을 사용하십시오.
For developer guidance, see UIViewController and UIPresentationController.