본문 바로가기
UXUI 디자인 공부

iOS 가이드라인 1

by itmini 2023. 4. 10.
반응형

웹 아키텍처

iOS의 주제는 다음과 같은 특징을 통해 다른 플랫폼과의 차별화를 추구한다.

가독성 높은 텍스트
장식의 최소화
기능 주도 디자인
전체 화면 활용한 콘텐츠 표시
부드러운 모션과 미려한 인터페이스
콘텐츠 이외의 요소가 더 두드러지지 않도록 하는 것
이해하기 쉬운 아이콘
중요한 요소를 강조하는 명확함
베젤, 그러데이션, 그림자 등의 사용을 최소화
레이어와 모션을 통해 계층 구조 표현
콘텐츠 이동 시 깊이를 더해주는 화면 전환

또한, iOS는 미적인 통일성 Aesthetic Integrity, 일관성 Consistency, 직접 조작 Direct Manipulation, 피드백 Feedback, 은유 Metaphors, 사용자 조작 User Control을 디자인 원칙으로 하여 앱 개발 과정에 전반적으로 적용할 수 있도록 한다. 

1. 손쉬운 사용
iOS는 전통적으로 접근성 기능을 지원해왔다. 그런데 화면에 표시되는 내용을 읽어주는 보이스오버 VoiceOver 기능을 지원하려면 이미지나 아이콘 등에 설명을 추가해야 한다. 가독성을 높이는 볼드서체를 적용하거나 더 큰 텍스트가 활성화되어도 UI가 깨지지 않게 해야 한다.

2. 로딩 화면 Loading Screen
로딩 화면은 애플리케이션을 로딩할 때 적용되는 가이드로, 로딩이 진행 중일 때 사용자에게 상태를 알리는 것이다. 로딩 중인 콘텐츠의 일부라도 접근할 수 있다면 그래픽이나 애니메이션을 통해 콘텐츠를 사용할 수 없는 곳을 식별할 수 있게 하는 등의 방법을 적용해야 한다. 

3. 모달 뷰 Modal View
모달 뷰는 현재 페이지에서 콘텐츠의 진행을 잠시 중단하고 독립적인 기능을 제공해 사용자에게 무엇인가를 알리거나 입력하게 한 후에 다시 원래의 흐름으로 돌아가도록 하는 요소이다. 모달 뷰를 사용할 때는 완료 또는 취소를 선택할 수 있도록 해야 한다. 또한, 사용성을 위해 일반적으로 모달 작업을 식별하는 제목을 표시해 이전 맥락에서 벗어났다는 것을 알리는 것이 좋다. 

4. 내비게이션 Navigation
사용자는 자연스럽고 친숙한 인터페이스를 선호하며 이를 바탕으로 앱을 탐색하는데, 아무리 디자인이 아름다워도 원하는 것을 찾기 힘든 방식으로 UI가 구성되어 있다면 기본 기능조차 만족시키기 어렵다. 따라서 앱의 UI를 제대로 설계하려면 운영체제별 컴포넌트 Component와 더불어 내비게이션에 대해 이해하고 있어야 한다. 내비게이션 UI는 화면 이동을 담당하는 UI로, 운영체제별로 다른 UI를 사용한다. 내비게이션 UI는 정보 구조의 설정에 따라, 그리고 사용성이나 중요도에 따라 다르게 디자인해야 한다.

-계층적 내비게이션 Hierarchical Navigation 
계층적 내비게이션에는 위계 구조가 있으므로 사용자가 목적지에 도달할 때까지 하나의 메뉴에 하나의 화면을 제공하며, 다른 목적지로 가거나 단계를 되돌리려면 처음부터 다시 시작하거나 다른 선택을 해야 한다. 주로 리스트 형태로 제시된 메뉴를 탭 해 하위 메뉴로 진입하는 방식의 UI를 사용하며, 설정이나 메일 등에서 사용하는 방법이다.

-평면 내비게이션 Flat Navigation
평면 내비게이션에서는 평면의 정보 구조를 바탕으로 메인화면에 항상 메뉴가 나타나기 때문에 사용자가 현재 메뉴에서 다른 콘텐츠로 이동할 수 있다. 주로 탭 바의 형태로 구성되며 음악 재생이나 앱 스토어 등에서 적합한 내비게이션이다.

- 콘텐츠나 경험 기반 내비게이션 Content-driven or Experience-driven Navigation
콘텐츠나 경험 기반 내비게이션에서는 콘텐츠를 통해 자유롭게 이동하거나 콘텐츠 자체가 내비게이션의 역할을 한다. 게임이나 전자책에 적합한 내비게이션이다. 
대표적인 세 가지 내비게이션 외에 복합적인 내비게이션 UI를 제공하는 앱도 있다. 예를 들어, 평면 내비게이션 구조라 해도 설정 등의 카테고리에서는 다른 구조의 내비게이션을 구현할 수 있다.
내비게이션을 구성할 때는 항상 명확한 경로를 제공해 사용자가 앱에서 어디에 있는지 인지할 수 있게 해야 하며, 다음 목적지로 이동하는 방법도 알 수 있게 해야 한다. 내비게이션 스타일과 관계없이 콘텐츠를 통한 경로는 논리적이고 예측할 수 있어야 하며, 각 화면에 하나의 경로를 제공하는 것이 좋다. 복잡한 상황에서는 경고 창이나 팝업 또는 모달 뷰를 사용하는 것도 좋은 방법이다.
이러한 내비게이션을 구성하기 위해 선행되어야 하는 것이 정보 구조의 설계이다. 화면에 필요한 방식으로 정보 구조를 구성해 최소의 탭 수를 사용하는 것이 바람직하다. 또한, 사용자가 예측할 수 있는 터치 제스처를 통해 내비게이션을 예상할 수 있도록 해야 한다. 그 밖에도 탭 바, 제어, 테이블 등의 구성 요소를 사용하고, 적절한 페이지 제어을 제시해야 한다.

5. 온보딩 On-boarding
온보딩의 본래 의미는 신입사원이 업무와 회사 문화에 빨리 적응할 수 있게 하는 과정을 일컫는 말이다. 앱에서의 온보딩이란 앱을 처음 활용하는 사용자에게 사용 이유와 가치를 보여주는 것이라고 할 수 있다. 사용자가 첫 실행 후 매력을 느끼지 못해 사용을 포기하는 일이 없도록 해야 하므로, 사용자의 목적에 초점을 맞추어 불필요한 항목을 최소화하고 가장 중요한 기능과 사용법을 알리는 데 집중해야 한다. 예를 들어, 회원가입 과정이나 튜토리얼을 최소화하면 사용자가 원하는 콘텐츠에 최대한 빨리 접근할 수 있다. 또한, 스플래시 UI나 메뉴 및 콘텐츠 표시 앱 사용을 시작하는 데 시간이 오래 걸리지 않도록 하는 것이 중요하다. 만약 튜토리얼을 제공해야 한다면 애니메이션과 상호작용을 통해 즐겁게 학습할 수 있도록 해야 한다. 초보자에 대한 지침을 제공하는 것이 좋기는 하지만, 튜토리얼이 필요 없는 앱이 더 직관적이라고 할 수 있다.

 

2023.04.11 - [UXUI 디자인] - iOS 가이드라인 2

 

iOS 가이드라인 2

시각 요소 1. 적응성 및 레이아웃 iOS에서는 멀티태스킹, 분할 보기, 화면 회전 등의 작업을 하는 동안 다양한 장치에서 모양과 크기가 자동으로 변경되도록 인터페이스 요소와 레이아웃을 구성

itmini.tistory.com

2023.04.10 - [UXUI 디자인] - 모바일 디자인 가이드 요소 2

 

모바일 디자인 가이드 요소 2

그리드 Grid 그리드는 '격자'를 의미하는 용어로, 디자인에서는 디자인 영역을 일정하게 구획하는 것을 의미한다. 일종의 지침이라고 생각하면 된다. 그리드 시스템을 구축하면 사진, 그림, 문자,

itmini.tistory.com

 

반응형

'UXUI 디자인 공부' 카테고리의 다른 글

iOS 가이드라인 3  (0) 2023.04.12
iOS 가이드라인 2  (0) 2023.04.11
모바일 디자인 가이드 요소 2  (0) 2023.04.10
모바일 디자인 가이드 요소 1  (0) 2023.04.09
모바일 UI/UX 디자인의 종류  (0) 2023.04.09

댓글