UI 설계 종합 가이드

UI 시스템의 필수 기능

  • prompt와 검증기능
  • 결함처리 메시지처리
  • 도움말기능

UI 설계 원칙

UI는 사용자 인터페이스로서, 사용자 입장에서 편리하게 사용할 수 있도록 설계되어야 합니다. 주요 원칙은 다음과 같습니다:

  • 직관성: 사용자가 즉각적으로 이해하고 사용할 수 있어야 합니다
  • 유효성: 목적을 정확하게 달성할 수 있어야 합니다
  • 학습성: 누구나 쉽게 익힐 수 있어야 합니다
  • 유연성: 사용자의 실수를 최소화하고 복구할 수 있어야 합니다

UI의 설계 지침

  • 사용자 중심: 모든 설계의 기본 전제
  • 사용자가 UI를 쉽게 사용할 수 있는 특성을 최우선으로 고려
  • 모든 설계 지침은 사용자 중심을 기반으로 함

UI 설계 절차

  1. 문제 정의
  2. 사용자 모델링
    • 초급자
    • 중급자
    • 숙련자 그룹으로 분류
  3. 작업 분석
    • 문제를 세분화하고 구체화
  4. 컴퓨터 장치 및 기능 정의
    • 복사, 붙여넣기, 되돌리기 등의 기능 제공
  5. 사용자 인터페이스 정의
    • 상호작용 장치(마우스, 키보드) 식별
    • 상태를 명확히 인식할 수 있도록 설계
  6. 디자인 평가

UI 흐름 설계

UI 흐름 설계 프로세스

  • 기능 식별
  • 입력 요소 식별
  • 유스케이스를 통한 UI 요구사항 식별
  • UI 유스케이스 설계
  • 기능 및 양식 확인: UI element 식별

UI 설계서 작성 프로세스

  • UI 설계서 표지: 프로젝트명/시스템명 명확히 표기
  • 개정이력: 1.0부터 시작하여 0.1씩 증가
  • UI 요구사항 정의
  • 사이트 맵: 전체 메뉴의 계층구조 표현
  • 프로세스 정의
  • 화면 설계

UI 화면 설계 기본 구성

  • 윈도우: 독립적인 박스(Box) 형태
  • 메뉴: 텍스트로 기능을 나열한 영역
  • 아이콘: 작은 이미지로 표현
  • 포인터: 정보 입력 위치 지정 (텍스트 커서, 마우스 커서)

유용성

유용성의 정의

  • 목표를 얼마나 효과적으로 달성하는가를 측정
  • 사용자가 생각하는 UI와 개발자가 개발하려는 UI의 차이가 적을수록 유용성이 높음

유용성이 줄어드는 원인

  • 실행차
    • 실행 기능의 차이
    • 줄이는 방법: 불필요한 기능 제거, 적은 단계 수행, 의도한 행위 순서대로 실행
  • 평가차
    • 실행 결과의 차이
    • 줄이는 방법: 즉각적이고 직접적인 변화 파악, 시스템 상태 이해, 사용자의 쉬운 파악

UI 상세 설계

UI 시나리오

  • UI의 기능 구조, 대표 화면, 화면 간 상호작용 흐름을 문서화
  • 문서 작성 → 디자인 → 구현 순으로 진행
  • 개발자가 이를 바탕으로 개발 진행

작성 원칙

  • 작동 방식을 한눈에 이해할 수 있도록 구성
  • 일반적인 규칙 준수
  • 순서, 분기, 조건, 루프를 명확히 명시
  • 예외 상황 케이스와 상세 기능 시나리오 정의

UI 설계 도구

  • 와이어프레임: 뼈대와 레이아웃 설계
  • 목업: 실제 화면과 유사한 형태로 작업
  • 스토리보드: 콘텐츠 설명과 이동 흐름 표현
  • 프로토타입
  • 유스케이스

사용자 경험 관련 개념

감성공학

  • 사람의 감성을 UI 설계에 최대한 반영
  • 인간이 추구하는 감성을 디자인으로 실현하는 공학적 접근
  • 생체, 감각 등을 과학적으로 측정하여 HCI 설계에 반영 (예: 아이폰의 동작 감성)

HCI (Human Computer Interface)

  • 인간과 시스템의 상호작용을 편리하고 안전하게 구현
  • 사용자가 최적의 경험을 할 수 있도록 설계

UX (User Experience)

  • 사용자가 느끼는 종합적인 경험
  • 시스템과의 상호작용 과정에서의 만족감 중시
  • UI가 편의성을 중시한다면, UX는 가치 있는 경험(만족감)을 중시

UX의 특징

  • 주관성
  • 정황성 (주변 환경에 따른 영향)
  • 총체성 (개인의 심리적 요인)