티스토리 뷰

UI 설계 검토하기

UI 디자인 가이드 이해

UI 제작을 위하여 UI 디자인 가이드를 이해하고 이를 기반으로 구현 가능성 여부를 학습 목표 검토할 수 있다.
구현 환경에 따라서 구체적인 UI 프로세스의 이해와 설계 변경 여부를 파악할 수 있다

UI 디자인 가이드에 대한 이해

UI 디자인 가이드의 정의

UI 디자인가이드는 UX기획, UI디자인이 완료된 화면을 토대로 해당 프로젝트의 화면 구현과 실물 개발에 필요한 이미지 리소스, 텍스트 크기, 기타 컴포넌트의 속성 및 위치 등을 정리한 문서이다.

  • UI 디자인의 목적은 사용자의 사용성을 높이기 위해 시간 및 조작의 흐름과 심미 성까지 고려하여 사용의 편리성과 접근성을 높이는데 있다.
  • UI 디자인 가이드 기본 원칙
    • 효율적인 업무지원이 되게 설계해야 한다.
    • 입력의 사용성을 높여야 한다.
    • 이해하기 쉽게 디자인해야 한다.
    • 시각적으로 간결하게 디자인해야 한다.
  • UI 디자인 가이드의 요소
    • 사용자 경험에 대한 정의
    • 서비스의 핵심기능
    • 호환성과 확장성
    • 정보소외 계층의 접근성
    • UI 디자인과 레이아웃 일관성
    • 이미지 사용에 대한 지침

완성된 디자인을 각각의 구성요소의 해당되는 영역을 자르고(컷팅), 그 이미지 소스에 대한 위치 값과 크기 값을 표시한다.

UI 디자인 가이드의 필요성

UI 디자인 가이드는 UI 디자인을 개발하기 위한 설명서, 즉 개발자와 디자인 실무자를 연 결해주는 일종의 협업 도구이다. 업무의 효율성을 향상할 목적으로 UI 디자인에 따른 규 칙을 세우고 이것을 적용하는 과정이라 할 수 있다. UI 디자인이 최상의 사용자 경험을 위한 다양한 문제와 요구를 해결하는 창조적인 사고 작업이라면, UI 디자인 가이드는 이 를 위해 지켜야할 공통의 규칙이라고 할 수 있다.

모바일 서비스 UI 디자인 가이드의 화면 구성 요소 분석
  • Indicator 영역 : 각종 서비스의 알림 및 수신, 네트워크 ,배터리 상태 등을 아이콘화 하여 제공한다.
  • Header 영역 : 기관의 로고 또는 사이트 명을 제공하여 사이트의 정체성(Identity)을 전달한다.
  • Navigation 영역 : 주로 홈이나 이전 또는 최상위 메뉴 같은 주요 이동만 제공되며 모 바일 웹의 경우 브라우저 내비게이션 버튼을 활용하므로 생략하는 경우도 있다.
  • Content 영역 : 사용자에게 전달하고자 하는 주요 정보를 담는다.
  • Button 영역 : 필요한 경우에만 제공되며, 버튼은 해당 콘텐츠 아래에 배치하는 것이 일반적이나 상단에 위치시키는 경우도 있다.
  • Footer 영역 : 저작권, 연락처, PC웹으로의 링크 등의 내용이 제공된다.
세로형/가로형 배치
  • 모바일 화면은 가로 스크롤보다는 세로 스크롤이 편리하므로 서비스의 콘텐츠 레이 아웃은 단일 칼럼의 세로 레이아웃을 기본형으로 적용한다. 그러나 서비스의 성격에 따라 가로 레이아웃을 기본형으로 적용하는 것이 가능하다
  • 레이아웃은 세로형/가로형 변환시 반응형 웹을 권장하며, 가로폭에 따라 레이아웃이 유동적으로 변경 및 브라우저 지원을 한다.
  • 해상도의 가로(width)값을 픽셀이 아닌 퍼센트(%)로 제작하여 가로 크기에 따라 레이 아웃의 비율이 변경되도록 하고, 변경된 폭에 따라 내용도 같이 움직이게 한다.
  • Flexible images를 이용하여 이미지의 가로값이 자동으로 계산되어 가로 크기의 비율 대로 사이즈가 조절되게 한다.
  • 미디어쿼리(Media Queries)를 통해 해상도의 가로값에 따라 CSS 처리를 다르게 한다
모바일 디자인 가이드 레이아웃
  • Status Bar : 디바이스의 시스템 상태와 정보를 표시하는 영역으로 Default상태로 고정
  • Navigation Bar 1 : 기본 네비게이션 바로 메인으로 가기와 즐겨찾기 버튼 등이 위치
  • Navigation Bar 2 : 타이틀 표시와 네비게이션의 기능을 함께 포함한 영역으로 메뉴, 쓰기, 뒤로 가기 등 기능성 메뉴와 현재 위치의 타이틀을 함께 표시하며 각 콘텐츠 별 메뉴에 따라 변경
  • Main Area : 메인 콘텐츠를 보여주는 영역으로 기본정보와 메뉴, 리스트, 콘텐츠 뷰 등 다양한 속성을 포함
  • Tab Bar : 네비게이션 바 아래에 위치하며 서로다른 depth의 메뉴를 활성화하며 콘 텐츠에 따라 생략 혹은 위치가 변경 가능
  • Tool Bar : 화면의 가장 하단에 위치하며 다양하고 복잡한 기능을 제공함

HIG 가이드라인(Human Interface Guideline) 테마

  • 존중(Deference): UI는 사용자가 콘텐츠를 이해하고 상호작용하는 데 도움을 주어야 하지만, 콘텐츠에 대한 집중을 방해하지 마라.
  • 명료함(Clarity): 글씨는 어떤 크기에서도 읽을 수 있어야 하며, 아이콘은 정확하고 명 료해야 하며, 장식은 미묘하면서도 정확해야 하며 기능으로부터 모티를 얻은 디자인을 지향해라.
  • 깊이(Depth): 눈으로 보이는 레이어와 실제같은 움직임으로 사용자의 재미와 이해를 증가 시켜라.

안드로이드 머터리얼 UI 가이드라인의 대표적인 특징

  • 시스템 바 : 시스템 바는 알림을 표시하고 기기의 상태를 알리거나 앱 사이를 이동하는 역할을 가지고 보통 앱과 언제나 함께 표시된다. 앱이 영화나 그림처럼 몰입형 콘텐츠 를 제공하는 경우는 방해받지 않도록 시스템 바를 숨겨서 전체 화면으로 콘텐츠를 즐 기게 할 수 있다.
    • 상태 표시줄(Status Bar) : 사용자 확인이 필요한 알림을 왼쪽에, 시간이나 배터리 양, 네트워크 신호 강도 등을 오른쪽에 표시한다. 상태 표시줄을 아래로 스와이프하 면 세부 알림 사항이 나온다.
    • 내비게이션 바 : 안드로이드 4.0 폰에 처음 추가된 내비게이션 바는 하드웨어 키가 없는 기기에만 표시된다. 내비게이션 바에는 이전, 홈, 최근 앱 컨트롤이 있으며, 안 드로이드 2.3 이하 버전 앱을 사용할 경우 해당 앱의 메뉴를 띄우는 컨트롤이 함께 표시된다.
    • 결합 바(Combined Bar) : 태블릿 형태 기기는 상태 표시줄과 내비게이션 바를 하나로 결합하여 하나의 바로 나타내고 화면 아래에 위치한다.
  • 알림(Notifications) : 알림은 상태 표시줄을 통해 언제든지 접근할 수 있는 짧은 메시 지이다. 알림은 업데이트나 일정 알림 등 중요하긴 하지만 사용자를 방해할 필요는 없 는 정보를 제공한다. 상태 표시줄을 아래로 스와이프하여 알림 서랍(notifications drawer) 을 열 수 있고, 그 상태에서 각 알림을 터치하면 그 알림에 해당하는 앱이 열린다.
  • 일반적인 앱 UI
    • 메인 액션 바 : 앱의 명령 및 통제 센터이다. 메인 액션 바는 앱의 계층과 뷰를 탐 색하고 중요한 작업을 다루는 요소를 담고 있다
    • 뷰 컨트롤 : 앱이 제공하는 여러 뷰를 전환할 수 있는 방법을 제공한다. 일반적으로 뷰는 앱 데이터를 다양하게 배치하거나 다양한 기능을 제공하도록 구성.
    • 콘텐츠 영역 : 앱의 콘텐츠를 표시하는 공간
    • 분할 액션 바 : 분할 액션 바는 액션들을 추가 바에 배치하는 방법으로, 메인 액션 바 아래나 화면 하단에 배치.

머터리얼 UI 구성요소

  • 탭: 액션 바의 탭은 뷰나 기능적 요소의 탐색과 전환을 용이하게 해주며, 분류된 데이 터 셋을 쉽게 찾을 수 있게 해 준다.
  • 리스트: 여러 줄의 항목을 세로로 정렬해서 보여준다. 리스트는 하위 탐색 뿐 아니라 데이터를 선택할 때에도 사용할 수 있다.
  • 그리드 리스트: 표준 리스트 뷰 대신 사용할 수 있다. 그리드 리스트는 이미지와 함께 데이터 모음을 보여주기 위한 가장 적당한 방법이다. 단순한 리스트와는 달리 그리드 리스트는 수직, 수평 방향으로 스크롤 할 수 있다.
  • 스크롤: 스크롤은 사용자가 스와이프 제스처를 사용해서 화면을 벗어나는 내용을 볼 수 있게 해주며 스크롤의 속도는 제스처의 속도와 같다.
  • 스피너: 여러 값 모음 중 값 하나를 빠르게 선택할 수 있게 해준다. 기본 상태에서 스 피너는 현재 선택중인 값을 보여주고 스피너를 터치하면 다른 모든 사용 가능한 값들 이 드롭다운 메뉴에 표시되며 사용자는 그 중 하나를 새로 선택할 수 있다.
  • 버튼: 텍스트나 이미지로 구성되는 버튼은 사용자가 터치했을 때 어떤 동작이 일어날지 알기 쉽게 전달해준다. 안드로이드는 기본 버튼 및 무테 버튼(테두리나 배경이 없는 버 튼)이라는 두가지 타입의 버튼을 지원하고 텍스트 레이블 또는 이미지를 포함한다.
  • 텍스트 필드: 텍스트 필드는 사용자가 텍스트를 입력할 수 있게 한다. 텍스트 필드는 한 줄 또는 여러 줄이 될 수 있고 텍스트 필드를 터치해 커서가 놓이면 키보드가 자동 으로 표시된다. 또한, 텍스트 입력에 더해 텍스트 선택(자르기, 복사하기, 붙여넣기)과 자동 완성을 통한 데이터 찾기와 같은 다양한 기능을 지원한다.
  • 탐색 바와 슬라이더: 대화형 슬라이더는 연속 또는 불연속적인 범위의 값을 슬라이더 끝을 움직여서 선택할 수 있다. 가장 작은 값은 왼쪽, 가장 큰 값은 오른쪽에 있고 슬 라이더의 상호작용적 속성 때문에 슬라이더는 볼륨, 밝기, 채도와 같은 강도 레벨을 반 영하는 설정을 위한 기능이다.
  • 프로그레스와 활동: 프로그레스 바(progress bar)와 활동 표시(activity indicator)는 사 용자에게 무언가가 진행중이며 시간이 약간 걸린다는 것을 알리는 데에 사용한다.
  • 스위치: 스위치에는 세 가지 종류(체크박스, 라디오 버튼, 온오프 스위치)가 있고 스위 치를 통해 사용자는 원하는 선택을 할 수 있다.
  • 대화 상자: 대화 상자(dialog)는 앱에서 작업을 계속 진행하기 위해 결정사항이나 필요 한 추가 정보를 사용자에게 묻는다. 이러한 요청은 단순한 확인/취소 결정부터 좀 더 복잡한 조절 설정이나 텍스트 입력까지도 포함한다.
  • 피커: 피커(picker)는 값들의 모음에서 값 하나를 선택하는 간단한 방법을 제공한다. 위/ 아래 버튼을 터치하거나, 키보드/스와이프 제스처로 값을 선택할 수도 있다.

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

TAG
댓글
댓글쓰기 폼