UI 설계란?

• 사용자와의 상호작용(interaction) 설계
  • 상호작용 요소
  • 워크플로우(workflow)
• 사용용이성(Usability)은 제품 차별화 요소
• 관련 분야 지식과 연결
  • HCI(인간-컴퓨터 상호작용)
  • 인터랙션 디자인
  • UX(사용자 경험)
  • 인간공학

---

1. UI 기본 개념

1.1 사용성(Usability)

• 시스템이 얼마나 사용하기 편한지를 나타내는 척도
• 인간-컴퓨터 상호작용을 개선하기 위한 방법/기술

사용성에 영향을 주는 요소

• 학습용이성(Learnability)
• 효율성(Efficiency)
• 기억용이성(Memorability)
• 낮은 오류율
• 자신감과 만족

1.2 멘탈 모델(Mental Model)

• 현실 세계의 사물/과정이 어떻게 동작하는지에 대한 개인의 이해
  • 예: GUI는 “책상 위(Desktop)” 메타포를 연상
• 구성 요소: 시스템 사용 경험, 다른 프로그램 경험, 응용 분야 지식
• 사용자와 개발자의 멘탈 모델은 다를 수 있음(그래서 UI에서 더 “설명 가능한 흐름”이 중요)

개발자는 본인이 어떤 기능과 어떤 버튼인지 다 알지만, 사용자는 그렇지 않다.

1.3 피드백(Feedback)

• 사용자는 “명령이 처리되고 있는지/입력이 어떻게 해석됐는지”를 궁금해함
• 피드백 UI는 사용자 지시에 대한 효과를 보여줌
  • 로딩 스피너(회전 휠)
    

반응 시간 표시(예: 1~10초 걸리는 작업은 진행 표시 필요)

1.4 제약(Constraints)

• 일반적인 사용자는 매뉴얼 읽기를 싫어함
• 일반적인 사용자는 선택에 익숙하지 않음
  → UI가 사용자를 “덜 고민하게” 만들도록 제약/가이드가 필요
  

설명을 싫어하기 때문에 메뉴얼을 읽게 만들면 안된다.

---

2. UI 설계 원리

• 단순하고 자연스럽게 만들라
• 안전한 사용과 오류 회복이 쉽게 하라
• 직접 조작하고 바로 피드백 받게 하라
• 일관성을 유지하라
• 즉각적으로 만족시켜라
• 단축 명령을 제공하라
• 인식하기 쉽게 만들라
• 공간 기억을 활용하라
• 접근성이 좋게 하라
• 도움말과 문서는 최후의 수단

---

3. UI 설계 과정

3.1 사용자 분석

• 사용자 유형 예: 청소년 / 숙련 사용자 / 초보자
• 질문 예: 사용자의 목표는? 사용 스킬/경험은?
• UI/UX 전략을 세우기 위한 방법
  • 페르소나
  • 여정 지도
  • 엘리토 분석법
  • 친화도 다이어그램

3.2 태스크 분석(Task Analysis)

• 소프트웨어가 수행할 작업을 분석
• 유스케이스 별 UI 흐름 파악이 중요
• 하위 작업 간 정보 흐름에 따라 GUI 내용 흐름이 결정
  

3.3 UI 설계와 구현

• GUI를 디자인하고 코드에 구현

와이어프레임

• 레이아웃 시각화
• 정보 정리
• 조기 검증

프로토타입

• 유용성 테스트
• 피드백
• 디자인 반복

스토리보드

• 사용자 흐름 시각화
• 작업 상황화
• 갭 식별

UI 설계에 사용하는 개념들

• 마법사(Wizard): 미리 저장된 순서대로 사용자 안내
  
  
• 사이트 이동경로(Breadcrumbs)
  
  
• 메타포(Metaphor): 사용자의 개념적 인식 모델
  
  

3.4 사용성 테스트(Usability Test)

테스트 목적 설정

학습성, 오류율, 예측성

대표 사용자 선정

제품 개발 주기 동안 테스트를 한번 만 하는 경우 5명 이상의 사용자로 테스트하는 것이 좋다.

테스트 준비와 실행

테스트 대상을 준비

사전, 사후 테스트 설문지 및 작업 시나리오 정의

참가자에게 수행 요청

결과 분석

사용성 테스트를 수행하고 데이터를 기록

---

4. UI 요소

대표 UI 컨트롤

• 윈도우 – 응용 프로그램 내용이 표시되는 영역
• 탭 – 응용 프로그램이 여러 인스턴스를 실행할 수 있는 경우 별도의 창으로 화면에 나타냄
• 메뉴 – 표준 명령의 배열
• 아이콘 – 응용 프로그램을 나타내는 작은 그림
• 커서 – 포인터
• 명령 버튼 - 사용자의 명령을 지시 받으려 할 때 사용
• 다이얼로그 박스 - 시스템이 수행할 작업에 대한 정보를 사용자에게 입력하게 할 때
• 텍스트 박스 - 메시지를 보여주거나 사용자가 데이터를 입력할 곳
• 토글 버튼 - 버튼을 클릭하면 상태를 ‘on’, ‘off’로 변환
• 리스트 박스 - 사용자가 선택할 수 있는 후보 리스트를 디스플레이
• 드롭다운 리스트 박스 - 현재의 선택을 보여주고 사용자가 화살표를 클릭하면 가능한 선택 후보들을 펼쳐서 보여줌
• 라디오 버튼 - 여러 가지 제시된 것 중 하나만을 선택할 때 사용
• 체크 박스 - 그룹 중에 하나 이상의 후보를 선택할 때

체크박스 vs 라디오 버튼

• 체크 박스: 항목별로 독립적인 on/off 선택
• 라디오 버튼: 여러 항목 중 하나만 선택
  
  

---

5. 화면 및 출력 설계

5.1 화면 설계

• 쉽게 배우고 사용할 수 있는 입력 화면 가이드라인
  • 입력이 끝났음을 알리는 “완료 키/동작”을 반드시 정한다
  • 콤보 박스를 사용하면 입력 오류를 줄일 수 있다
• 입력 양식(Form): 처리할 자료를 요청하고 모으는 양식
  

5.2 출력물 설계

• 출력물은 종류가 다양하고 다양한 기술 사용
• 대부분은 인쇄된 리포트
  • 모든 리포트는 머리말/꼬리말이 있어야 함
  • 매력적/전문적이어야 하며 무엇보다 읽기 쉬워야 함
  • 항목은 논리적 순서로 표시하고 그루핑 되어야 함
    

---