13. UI 디자인 패턴과 UI 가이드문서 작성

1. 접근성과 항해성 관련 UI 패턴 

  - 사용자가 인터페이스를 사용하면서 경험하게 되는 기능 및 이벤트/컨텐츠의 방위(orientation)와 

     경로(path)의 인지와 탐색을 위한 UI 패턴 

 1) Side Menu(drawer) 메뉴(이벤트) 호출/컨텍스트 유지 

  - 여러 가지 기능을 화면 내 배치하지 않고, 좌우 Side Menu로 숨겨진 공간에 배치하여 화면 내 구성요소 단순화 

  - 장점: 화면 내 공간 효율성, 각 기능 간 context 분리가 명확 

  - 단점: 다른 기능 수행 시 현재 화면 유지가 어려움

 2) Action Bar(Android) 접근성 향상 

  - 전체 페이지 내 공통된 2~3개의 기능을 항상 제공하면서 접근이 자주 있는 기능의 배치 

  - 장점: 모든 페이지에서 일관되게 제공되는 형태를 통해 주요기능에 대한 접근성 확보/공간 효율 

  - 단점: 상단 바에 너무 많은 기능이 제시되면 혼잡도 증가 

 3) Dropdown Navigation 접근성/공간 절약

  - 메뉴들을 숨겼다가 펼쳐서 해당 메뉴 선택하여 이동하는 경우, 세부 카테고리가 위에서 아래로 펼쳐지는 구조 

  - 장점: 각 기능/메뉴 간 전환이 쉽고 빠름. 3D 효과와 함께 제시함으로써 시각적으로 쉽게 인지 가능 

  - 단점: 각 기능간 타이틀 바를 표시하므로 공간 활용 비효율적. 3D 효과로 인해 인지적 부담 유발 가능 

 4) Dash board 카테고리 커스텀 

  - 사용자 관련 데이터를 가공하고 개인화 하여 보여줄 때, 복수의 기능 카테고리를 한 페이지 안에 표시 

  - 장점: 주로 아이콘과 함께 표시되어 어떤 컨텐츠를 담고 있는지 직관적으로 확인할 수 있음 

  - 단점: Dash Board 내 제시 가능한 카테고리 개수가 제한적임 (스크롤로 보완 가능) 

 5) Pop-over Navigation navi-컨텍스트 유지 

  - 메뉴 개수가 4~5개 이상이고 페이지 간 전환시 Navi-context 유지(머물러 있는)가 필요할 때, 

    버튼을 눌렀을 때 메뉴나 기능이 화면 위에 오버레이(overlay) 형태로 표시 

  - 장점: 화면 위에 이동 가능한 메뉴나 접근 가능한 기능들을 제시 가능 

  - 단점: 메뉴 제공 시 화면의 일부를 덮을 수 있음 

2. 학습성 관련 UI 패턴 

 - 처음 사용자, 또는 초급 사용자를 위해 시각적 언어와 익숙한 사용성을 제공하여 학습성을 높이기 위한 UI 패턴 

 1) Guide Text 데이터 입력 방식의 학습성 

  - 사용자가 처음 페이지에 진입하여 데이터가 없을 때, 또는 데이터 입력 필드에서 해당 필드 내 

    입력될 데이터를 텍스트로 안내 

  - 장점: 해당 영역에서 필요한 설명을 그 안에서 설명해주므로 직관적이고, 사용자의 행동을 유도할 수 있음

  - 단점: 텍스트 양이 너무 많아질 경우 화면이 복잡해질 수 있음

 2) Coach Mark 학습성/특정 피쳐

  - 앱 실행 후 처음 접하는 기능과 인터랙션 등을 좀더 자세히 페이지 상에서 설명 

  - 장점: 직접 인터랙션을 따라 하게 유도할 수도 있음

  - 단점: 모든 사용자에게 제공하여 번거로울 수 있음

3. 공간 효율성 관련 UI 패턴 

 - 단위화면(기능) 구조의 컴포넌트화를 통해 접근성을 높이고 최대한 화면 공간 구성의 효율성을 확보 

 1) Compose Screens 접근성/멀티 이벤트

   - 메시지를 작성하는 화면으로 키보드 상단에 수행 가능한 액션들을 제공하여 추가 기능에 대한 접근성을 높임 

   - 장점: 텍스트 입력 외에 추가적인 기능도 페이지 전환 없이 바로 수행이 가능하고, 추가 기능을 강조할 수 있음. 

   - 단점: 화면의 절반을 차지하는 키보드 위에 추가로 1줄을 더 차지하므로 공간 활용이 비효율적

 2) Contextual Hovering Menu 접근성/멀티 이벤트

  - 모든 페이지에서 수시로 접근해야 하는 기능이 있을 경우, 화면 내 상시로 떠있는 형태의 메뉴 아이콘 제공

  - 장점: 수시로 접근해야 하는 기능을 할당하여 모든 페이지에서 접근성을 높임

  - 단점: 화면 내 항상 일부 영역을 차지하므로, 해당 영역에 이미지나 주요 정보를 가릴 수 있음

 3) Card UI 유연한 레이아웃

  - 다양한 콘텐츠를 카드 형태로 나열하여 보여줌

  - 장점: 콘텐츠의 개수가 늘어나도 정렬/그룹/확장 등을 통해 레이아웃을 유동적으로 대응할 수 있음

  - 단점: 텍스트가 위주인 콘텐츠에는 적당하지 않음

4. iOS Human Interface Guideline

 1) 콘텐츠 중심 (Defer to content) 

  - 사용자가 콘텐츠를 이해하고 상호작용 하는 것을 도와줘야 하는 반면, 

     콘텐츠에 집중하지 못하도록 방해해서는 안 됨

전체 화면을 최대한 활용	각종 UI 요소는 최대한 절제,  사용자가 컨텐츠에 집중할 수 있도록 함	반투명 컨텐츠 레이어 뒤에 현재  작업의 힌트를 제공해서 문맥(context) 유지

 2) 시각적 명료성(Provide Clarity) 

  - 글꼴은 읽기 쉽게, 아이콘은 이해하기 쉽게, 장식적인 요소는 절제

여백을 적극적으로 활용	색 사용을 절제하여 컨텐츠 강조,  키 컬러를 통해 주요기능 강조	자동으로 자간, 행간을 조정하는 시스템 폰트 활용

 3) 정보와 시각의 계층 구조 활용 (Depth for Communication) 

  - 상호작용을 위한 정보와 시각의 계층 구조 활용, 눈으로 보여지는 요소들은 층 구성 (layered)으로 

    이루어져 사용자의 이해를 돕고 재미를 추가

정보를 별도 레이어로 표시하여 작업  문맥(context) 유지	상위 레이어를 통해 폴더를 표현하고 폴더 내  콘텐츠와 스크린을 분리	카테고리 구분을 레이어 형태로 표현

 5. Android Human Interface Guideline 

 1) 사용자를 매혹하기 (Enchant Me) 

  - 애니메이션, 사운드 효과 등을 통해 사용자를 자극하거나 사용자가 좀 더 원하는 기능을 맞춤 기능으로 제공 

  - 표면의 미적 요소나 애니메이션, 사운드 효과를 통해 사용자를 자극  

  - 사용자가 직접 터치하고 조작할 수 있는 형태의 버튼을 제공

  - 주요 기능을 저해하지 않는 범위 내에서 맞춤 기능 제공

  - 사용자가 매번 선택하도록 요구하기보다, 이전 선택을 기반으로 쉽게 접근하도록 제시

 2) 사용자 생활을 단순하게 만들기 (Simplify My Life) 

  - 텍스트보다는 사진으로 정보를 전달하고, 너무 복잡한 기능은 뒤에 숨겨두어 앱 사용 방식을 단순화 

가능한 간단한 단어로 이루어진 짧은 문구를 사용	기능을 시각적으로 단순하게 만들기보다 눈에 띄게 만들어서  기능적 차이를 알아볼 수 있게 하고, 같은 방식으로 작동하도록 제공

현재 필요하지 않은 옵션은 숨기고 작업 진행 상황에  맞게 옵션을 표시	정말 중요한 태스크를 제외하고는 작업을 중단하는 일은 최소화

 3) 사용자를 놀라게 만들기(Make Me Amazing) 

  - 복잡한 태스크를 쉽게 완료할 수 있도록 세분화하고 명료한 피드백을 제공하거나, 복잡한 기능을 손쉽게 

    활용할 수 있도록 간편한 방법으로 제공 

사용자가 자기 탓으로 느끼지 않도록 명확한 복구 지침을 제공	복잡한 태스크를 쉽게 완료할 수 있도록 여러 단계로 나누고,  미묘한 피드백이라도 제공

초보자들이 하기 힘든 기능은 단축키와 같이  쉽게 접근할 수 있는 형태로 제공	화면 내 중요한 기능을 쉽게 찾고 수행할 수 있도록 제공

6. UX/UI 개발 프로세스의 이해 

7. UX/UI 기획의 주요 산출물 

 1) 사용자 요구분석 (User Need Analysis) 

  - 사용자분석 리서치, 페르소나 작성, 사용성 테스트 

 2) 정보/컨텐츠 개발전략 문서 (Contents Strategy) 

  - 벤치마킹 > 컨셉모델 > (정보)컨텐츠 인벤토리/IA 문서 

8. UI 설계문서의 개념과 목적 

  - UX기획 설계를 토대로 해당 프로젝트의 실물 개발에 필요한 이미지 리소스, 텍스트 크기, 

     기타 컴포넌트의 속성 및 위치 등 UI 개발을 위한 일종의 설계도면

  - 디자인을 개발하기 위한 설명서, 즉 개발자와 디자인 실무자를 연결해주는 일종의 협업 도구이기 때문에 

    개발자가 쉽고 원활히 알아볼 수 있도록 문서를 작성하는 것이 중요

9. UI 설계문서의 구조와 구성요소

  - 프로젝트 정의/목적, 기본 규칙(Basic Rule), 세부 화면 정의, 수정보완 업데이트 히스토리 등

  - 주요 내용: 태스크 플로우차트, 와이어프레임, IA, 키스크린, 스토리보드 등