all white cheat sheet Dana’s Swifty Life

HIG : Human Interface Guidlines - 왜 읽어야 할까?

03 Jun 2019 |   • • •

HIG : Human Interface Guidlines

Apple에서 제공하는 Apple 플랫폼에서의 application 에 대한 가이드라인

 

Why Need HIG - 왜 필요할까?

직관적 사용자 경험 제공을 위해 표준을 제공한다.

내가 본 HIG의 목적은 통일성, 일관성, 호환성을 통한 직관적 사용자 경험 제공이다. 이런 어플리케이션을 만들기 위해서는 어떤 사항을 고려해야 하는지 제안을 해주는것이 이 가이드라인의 역할이다. 이 과정에서 HIG는 효율적인 개발을 위한 결정사항 제안의 기능도 한다. 나는 HIG 가 일종의 서로 공통된 약속, 즉, 표준을 제공한다고 생각한다.

HIG가 필요한 이유를 크게 두 가지 측면에서 보자면, 사용자와 개발자로 나눌 수 있다. 개발자에는 designer, ux-designer도 포함된다.

개발하는 사람들에게는 표준과 일관된 기준을 제공한다. 이는 개발 과정에서 정말 중요한 부분에 집중할 수 있도록하고, 의사소통 과정에서 필요한 정보와 공통된 용어를 제공하여 효율적인 개발에 도움이 된다. 예를 들어, ui 항목의 공통된 이름을 제공하면서 효율적인 의사소통을 기대할 수 있다. 또, Launching screen 에는 frame을 보여주는 것이 좋다는 제안도 해준다.

반면에 사용자 입장에서는 일관적인 사용자 경험을 제공한다. 어떤 기기에서든 apple platform 안에서는 같은 동작에 대한 같은 결과를 기대할 수 있으므로 배우기 쉽고, 사용자가 통일성과 일관성을 느낄 수 있다. 예를 들어, iOS에서 왼쪽이나 오른쪽으로 swipe 하면 뒤로 혹은 앞으로 가기의 동작을 사용자는 기대하고, 어플리케이션도 그 기대에 맞는 동작을 보여줘야 한다.

HIG에서는 사용자 경험에 관해 이미 검증된 방식을 추천해준다. 따라서 UX나 디자인, 어플리케이션 구성을 처음 만드는 사람도 이 가이드라인만 따른다면 어느 정도 직관적인 사용자 경험, 어느 정도 효율적이고 명시적인 어플리케이션을 만들 수 있다.

일전에 모바일 게임 개발했을 때 내가 UI까지 다 맡았었다.(포토샵을 나만 할 줄 알아서..) 버튼의 위치, 버튼이 눌렸을 때 팝업창의 크기, 화면 종료시 나오는 화면, 환경설정은 새로운 뷰에서 보일 건지 팝업으로 보일 건지 등등 정말 사소하게 결정할 부분이 많았다. 물론 실제 게임 개발에서는 이것만 담당하는 사람이 있겠지만, 개발 및 동작 애니매이션과도 연관이 있는 부분이라 다 신경을 써야했다. 당시엔 어떤 가이드라인도 없었고(모르기도 했고) 일일히 다 결정하려니 머리가 아팠다. 매번 사용자의 입장이다가 막상 만드는 사람이 되어보니 사용자의 직관적 판단을 정말 하나도 모르겠었다.

이런 상황에서 HIG가 있었다면 어땠을까? 당신의 내 고민을 반의 반이라도 덜어주었을 것이라고 확신한다. 혹은 결정하는데 걸리는 시간도 줄여줬을 것이다.

 

HIG 는 매년 업데이트 된다.

꼭 읽어야 한다

HIG는 매년 WWDC 마다, 새로운 iOS 버전이 나올 때마다 업데이트 된다. 따라서 계속 주의깊게 살펴봐야한다.

iOS 개발자라면 최소 3번, 그것도 정독을 해야된다고 한다. HIG를 읽어보면 개발자가 이런 정보와 가이드라인을 알고 모르고가 천지차이일 것이라고 확신한다. 또, 같이 개발하는 디자이너나 기획자도 같은 내용의 HIG를 숙지하고 있다면 의사소통과 의사결정이 훨씬 더 빨라질 것이라고 확신한다.

 

HIG가 제안하는 것들

  • App Architecture
    • 기본적인 앱 구조. 큰 그림에서의 구조에 대한 설명이다
    • Loading - app content 가 로딩중일 때, 어떤 화면을 보여줘야 하고, 사용자는 어떤걸 기대하는지
    • Modality - 현재의 context에서 벗어나 임시로 뜨는 content 에 대한 가이드라인이다. Ex) 확인/취소, 메일 보내기 등
    • Navigation - 어플리케이션의 구조에 대한 내용
    • Onbording - 앱을 시작할 때 어떤 사항을 고려해야되는지 제안한다.
    • Requesting Permission - 앱 사용시 사용자에게 허락을 밭아야 하는 것 (ex. 위치 정보, 알람 등)
    • Settings - 앱 내에서 환경설정을 어떻게 구성해야 되는지
  • User Interaction
    • 사용자의 조작이 이루어지는, 즉, 사용자로부터 메시지를 받는 모든 인터페이스에 관련된 가이드라인
    • 3D touch - 힘주어서 일정시간이상 앱을 홀드하는 동작. 어떤 화면을 보여줘야 하는지
    • Apple Pencil
    • Audio - 사용자가 소리관련해서 조작하는 버튼과 모드의 종류 등
    • Authentication - 인증이 필요한 경우와 종류
    • Data Entry - 선택지가 정해져 있는 입력
    • Drag and Drop - 해당 동작에 어떻게 지원해야되는지
    • Feedback - 앱이 현재 어떤 상태인지, 무엇을 할 수 있는지 정보를 제공해주는 것
    • File Handling - 앱이 file을 사용해서 어떤 동작을 해야할 경우 따라야 할 항목들
    • Gestures - iOS에서 interaction 할 수 있는 표준 동작 소개
    • Haptics - 촉감을 통해 의미를 얻을 수 있는 기능. Accessibilities(손쉬운 사용) 관련 기능(장애인도 손쉽게 사용가능하도록)
    • Near Field Communication - NFC
    • Undo and Redo - undo or redo 하려면 꼭 사용자에게 확인을 받아야 함
  • System Capabilities
    • iOS 시스템이 할 수 있는 기능들
    • Augumented Reality - ARKit 관련 가이드라인
    • Multitasking
    • Multiple Windows - 한 앱에서 여러개의 창을 띄울 수 있는 기능 (ios13~)
    • Notifications
    • Printing
    • Quick Look - 미리보기
    • Ratings and Reviews
    • Screenshots
    • TV Providers
  • Visual Design
    • Adaptivity and Layout - 같은 앱을 어떤 애플 디바이스에서 실행하더라도 사이와 해상a도에 맞게 화면을 보여줘야 함 - Auto Layout, Safe Area, …
    • Animation
    • Branding
    • Color
    • Dark Mode
    • Materials
    • Terminology - 사용자와 의사소통하기 위한 적절한 용어 선택
    • Typography - 폰트 관련 사항들.. ex. 환경설정에서 설정한 폰트 크기가 앱 내에서도 동일하게 보일 수 있도록
    • Video
  • Icons and Images
    • Image Size and Resolution - 크기와 해상도. 다양한 애플 기기를 지원하기 위한 조건
    • App Icon - 앱 겉으로 보이는 아이콘
    • Custom Icons - 앱 안에서의 아이콘. iOS 13 부터는 SF Symbols 사용을 권장
    • Launch Screen - 시작화면. 실행 눌렀을 때 나오는 화면
    • System Icons

 

다음 세 가지는 앱 인터페이스에서 가장 핵심이 되는 구성요소이다.

  • Bars
    • Navigation Bars - 앱 내에서의 가장 상단 바. status bar 바로 밑
    • Search Bars
    • Status Bars - 화면 가장 위 상단에 보이는 날짜, 배터리, carrier 상태 등이 있는 곳
    • Tab Bars - 화면 아래 하단 바. 앱 내의 다른 section으로 이동하기 위한 용도
    • ToolBars - 앱 화면 아래에 위치해서 현재 view에 관련된 동작을 포함함
  • View
    • Action Sheets - 알림의 한 방법
    • Activity Views - 현재 문맥에서 어떤 일을 하기 위한 뷰 (ex. Copy, Favorite, Find)
    • Alerts - 현재 앱이나 기기의 상태에 관련한 중요한 정보를 알려주는 알람
    • Collections - 순서대로 정렬된 contents sets
    • Image Views
    • Pages - linear navigation으로 contents page 구현하는 방식
    • Popovers - 팝업인데 해당하는 component에 화살표로 연결되어 있는 팝업
    • Scroll Views
    • Split Views
    • Tables
    • Text Views - text 입력하는 곳
    • Web Views
  • Controls
    • Buttons
    • Context Menus
    • Edit Menus
    • Labels
    • Page Controls
    • Pickers
    • Progress Indicator
    • Refresh Content Controls
    • Segmented Controls
    • Sliders
    • Steppers
    • Switches
    • Text Fields
  • Extensions
    • Custom keyboards
    • Document Providers
    • Home Screen Actions
    • Messaging
    • Photo Editing
    • Sharing and Actions
    • Widgets

 

:paperclip: Reference

Related Posts