UI_UX Design/UI Design 개론

ch05_iOS가이드라인(4)_view

jsBae 2024. 11. 27. 14:26
학습목표
iOS View의 설계, 구성, 활용에 대한 전반적인 이해를 돕고, 실제 프로젝트에 적용할 수 있는 실무 역량 고양

View란?

  • View는 iOS 앱의 UI 구성 요소로, 화면에 표시되는 콘텐츠(텍스트, 이미지, 버튼 등)를 담당.
  • 사용자가 앱과 상호작용하는 주요 창구.

1.액션 시트와 액티비티 뷰

  • 액션 시트: 컨트롤 또는 작업에 대한 응답으로 나타나는 특정 스타일의 경고로, 현재 맥락과 관련된 두 가지 이상의 선택 사항을 제공한다. 사람들이 시작하는 액션과 관련된 선택 사항을 제시하는 모달 뷰입니다.
  • 액티비티 뷰: 복사, 즐겨찾기, 찾기와 같은 특정 과업을 수행하는 데 사용되며, 즉시 작업을 수행하거나 진행하기 전에 더 많은 정보를 나타낼 수 있다. 공유 및 작업 수행을 위한 표준 인터페이스로, 사용자가 콘텐츠를 다른 사람과 공유하거나 다양한 작업을 수행할 수 있도록 지원한다. UIActivityViewController를 통해 구현된다.

액션 시트의 특징과 역할

  • 특징: 화면 하단에서 슬라이드로 나타나는 UI 구성 요소로, 사용자가 선택해야 할 중요한 작업이나 옵션을 제공.
  • 역할: 사용자가 작업을 결정하기 전, 선택 사항을 명확히 제공하며 신중하게 결정을 내릴 수 있도록 도움.

디자인 원칙

  1. 액션 시트를 아껴서 사용: 액션 시트는 현재 작업을 방해하므로 필요할 때만 사용. 과도한 사용은 사용자 경험을 해칠 수 있음.
  2. 제목은 간결하게: 한 줄에 표시될 만큼 짧고 명확하게 작성. 긴 제목은 잘리거나 읽기 어렵고, 스크롤을 유발할 수 있음.
  3. 메시지는 필요한 경우에만 추가:제목만으로 충분하다면 별도의 메시지를 제공하지 않음.
  4. 취소 버튼 제공:
    • 사용자가 데이터를 파괴하거나 원치 않는 작업을 수행하지 않도록 취소 버튼을 제공. 
    • iOS/아이패드OS: 작업 시트 하단에 배치. 
  5. 파괴적 작업(Destructive Action) 강조
    • 데이터를 삭제하거나 파괴하는 작업은 **파괴적 스타일(빨간색)**을 사용하여 눈에 띄게 표시.
    • 파괴적 작업 버튼은 액션 시트의 맨 위에 배치해 가장 먼저 보이도록 설정.
  •  

 

요약

  • 액션 시트는 중요한 선택 사항을 제공하는 데 사용되며, 사용을 최소화하고 간결하고 명확하게 설계해야 함.
  • 취소 및 파괴적 버튼의 위치와 스타일을 통해 사용자 경험을 안전하게 보장.
  • 스크롤을 최소화하고 각 플랫폼의 요구 사항을 고려해 구현.

2. Activity View

iOS에서 제공하는 공유 및 작업 수행을 위한 표준 인터페이스로, 사용자가 콘텐츠를 다른 사람과 공유하거나 다양한 작업을 수행할 수 있도록 지원한다. UIActivityViewController를 통해 구현된다.

Activity View 구성 요소

  1. 활동 항목(Activities): 공유 또는 작업에 사용할 수 있는 기본 옵션들.
    • 예: 메시지, 메일, 복사, 저장, 프린트.
  2. 사용자 지정 작업(Custom Actions): 개발자가 특정 동작(예: 앱 내 저장)을 추가할 수 있음.
  3. 공유 확장(Share Extensions):사용자의 디바이스에 설치된 앱(예: Twitter, Facebook 등)에서 제공하는 추가 공유 옵션.

디자인 가이드

  1. 사용자 친화적인 옵션 제공 : 사용자가 가장 자주 사용하는 옵션(예: 메시지, 메일, AirDrop)을 위에 배치.
  2. 중복 제거 동일한 작업을 여러 옵션으로 제공하지 않도록 함.
  3. 취소 버튼 포함 사용자가 작업을 선택하지 않고 Activity View를 닫을 수 있도록 취소 버튼 제공.
  4. 접근성 지원 VoiceOver 및 Dynamic Type과 호환되도록 구성.

3. 컬렉션 뷰와 이미지 뷰

  • 컬렉션 뷰: 컬렉션은 정리된 콘텐츠 세트를 관리하고 사용자 정의가 가능하고 시각적으로 뛰어난 레이아웃으로 제공
    • 그리드와 스택, 타일, 원형 배열 등을 포함한 인터페이스로, 정보를 보는 유연한 방법을 제공하기 위해 만들어진 컨트롤이다. 이미지 기반 콘텐츠를 보여주는 데 적합하고, 사진과 같이 순서대로 배열된 콘텐츠를 관리하는 데 주로 사용된다.
  • 이미지 뷰: 투명하거나 불투명한 배경 위에 단일 이미지 또는 애니메이션 시퀀스를 표시한다. 이미지 뷰 내에서 이미지의 크기를 조정하거나 특정 위치에 고정할 수 있다.

컬렉션 뷰

일반적으로 컬렉션은 이미지 기반 콘텐츠를 보여주는 데 이상적입니다.

 

  • 표준 레이아웃 사용 수평 행 또는 그리드 레이아웃 권장. 복잡한 사용자 지정 레이아웃 지양.
  • 적합한 뷰 선택 : 텍스트 중심 콘텐츠는 테이블 뷰 사용 고려.
  • 선택 용이성 : 항목 간 간격 유지, 패딩 추가로 명확히 표시.콘텐츠 겹침 방지, 선택 상태 명확히 전달.
  • 상호작용 강화 : 필요한 경우 사용자 정의 제스처 추가.
  • 시각적 피드백 제공 : 삽입, 삭제, 재정렬 시 애니메이션 활용.

Image view

이미지 뷰는 투명하거나 불투명한 배경에 단일 이미지(또는 일부 경우 애니메이션 이미지 시퀀스)를 표시합니다.

  • 이미지 뷰의 역할 : 투명하거나 불투명한 배경 위에 단일 이미지 또는 애니메이션 시퀀스를 표시
  • 사용 시 주의사항 : 이미지를 대화형으로 만들려면 이미지 뷰 대신 시스템 제공 버튼을 사용. 
  • 콘텐츠 : 지원 포맷: PNG, JPEG, PDF 등. 
  • 텍스트 오버레이: 이미지 위에 텍스트를 추가할 때, 텍스트 가독성을 높이기 위해 대비를 강화. 텍스트 그림자나 배경 레이어 추가로 가독성 개선.
  • 애니메이션 이미지 : 애니메이션 이미지 시퀀스의 모든 이미지는 동일한 크기와 모양이어야 함. 
  • 사전 조정: 이미지 크기를 사전에 조정해 시스템 스케일링 필요성을 줄이고 성능 최적화.

List & Table

  • 테이블 리스트는 텍스트 기반 콘텐츠를 표시할 때 사용하며, 데이터를 섹션 또는 그룹으로 나누어 단일 열의 스크롤 행 목록으로 표시한다. iOS에서는 테이블 리스트를 테이블 뷰라고 한다.
  • 대표적인 UI 형태에는 기본 테이블 뷰와 그룹 테이블 뷰가 있다.
  • 그룹 또는 계층 구조로 정리해 사용자가 탐색하고 상호작용할 수 있도록 지원.

가이드 라인

  1. 텍스트 중심 콘텐츠 권장: 
    • 텍스트 중심 데이터는 표나 목록에서 쉽게 스캔하고 읽기 가능.
    • 많은 이미지가 필요한 경우 컬렉션 뷰 사용 고려.
  2. 편집 허용:항목 추가, 삭제, 재정렬 등의 작업을 제공.
  3. 선택 피드백 제공: 선택 시 강조 표시 또는 체크 표시를 통해 명확히 전달. 계층 탐색 시, 현재 선택된 행을 지속적으로 강조.
  4. 콘텐츠 가독성 강화:
    • 간결한 텍스트 사용으로 읽기 편리. 
    • 좁은 공간에서는 텍스트 중간에 줄임표 추가해 정보의 시작과 끝을 보존.
  5. 다중 열 표: 열 제목을 간결하고 설명적으로 작성. 제목은 대문자로 시작하며 구두점 제외.
  6. 행 스타일: 행의 선두에 이미지나 아이콘을 추가하고, 텍스트 설명 제공.

728x90
반응형