UI 설계

📌 UI 설계 핵심 정리

1️⃣ UI 설계 개요

✔ UI 설계란?

UI 요구사항 & 표준을 반영하여 시스템 화면을 체계적으로 설계하는 과정
기능 흐름과 제약 사항을 고려하여 사용성과 효율성을 높이는 것이 목표

✔ UI 필수 기능

입력 지원 (Prompt) : 사용자가 올바른 값 입력하도록 도움
오류 처리 : 잘못된 입력 시 메시지 제공
도움말 기능 : UI 사용법 안내
피드백 제공 : 시스템 반응을 명확히 표시

✔ UI 설계 원칙

직관성 : 쉽게 이해 & 즉시 사용 가능
유효성 : 사용자 목표를 빠르게 달성
학습성 : 누구나 쉽게 익힐 수 있도록
유연성 : 다양한 사용자 요구 & 환경 수용

2️⃣ UI 설계 절차

문제 정의 → 해결해야 할 UI 문제 분석
사용자 모델링 → 사용자 유형(초급, 중급, 숙련자) 구분
작업 분석 → 사용자의 주요 작업 정의
컴퓨터 장치 및 기능 정의 → 입력 장치(마우스, 키보드 등) 고려
사용자 인터페이스 정의 → UI 요소 & 상호작용 설계
디자인 평가 → 설계된 UI가 사용성 요구 충족 여부 검토

3️⃣ UI 흐름 설계

✔ UI 흐름 설계 프로세스

기능 식별 → 시스템에서 필요한 기능 분석
입력 요소 식별 → UI에서 필요한 입력 요소 결정
유스케이스 분석 → 사용자 요구사항과 UI 흐름 반영
UI 유스케이스 설계 → 사용 시나리오 기반으로 UI 구조 설계
UI 요소 규칙 정의 → UI 구성 요소의 표준 규칙 설정

✔ UI 설계서 작성 프로세스

설계서 표기 : 프로젝트명 & 시스템명 포함
설계 변경 이력 관리 : 수정 사항 기록
UI 요구사항 정리 : 사용자 요구사항 적용 여부 확인
시스템 구조
사이트 맵
프로세스 정의
화면 설계

4️⃣ UI 화면 설계 & 유용성

✔ UI 화면 설계 기본 요소

창(Window) : 독립적인 UI 영역
메뉴(Menu) : 기능 선택을 위한 텍스트 목록
아이콘(Icon) : 기능 및 상태 표현
포인터(Pointer) : UI 내 정보 입력 위치 표시

✔ 유용성 개념

사용자가 시스템을 통해 목표를 얼마나 효율적으로 달성하는가
유용성이 높은 UI → 사용자가 기대하는 UI와 실제 UI 차이가 적음

✔ 유용성 저하 원인

실행 차이 : 목표와 실행 기능의 차이
평가 차이 : 목표와 실행 결과의 차이

5️⃣ UI 상세 설계

✔ UI 시나리오

UI의 주요 기능 & 상호작용 흐름을 문서화
사용자가 목표를 달성하는 방법을 단계별로 정리

✔ UI 시나리오 작성 원칙

UI 기능 & 작동 방식이 쉽게 이해되도록 구조화
UI 요소 간의 상호작용을 규칙화
순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 고려

✔ UI 시나리오 문서 작성 요건

완전성 : 기능 누락 없이 작성
일관성 : 문서 스타일 한결같아야 함
이해성 : 누구나 쉽게 이해 가능
가독성 : 정보 정리, 강조 등 고려
수정 및 추적 용이성 : 쉽게 추적 및 수정할 수 있어야 함

6️⃣ UI 설계 도구 & 감성공학

✔ UI 설계 도구 종류

와이어프레임 : 화면 레이아웃만 표현한 설계
목업(Mockup) : 정적인 UI 디자인
스토리보드 : UI 흐름 & 화면 간 이동 설명
프로토타입 : 기능을 일부 구현하여 테스트 가능
유스케이스 : 사용자의 요구사항을 기능 중심으로 정리

✔ 감성공학 (Human Sensibility Ergonomics)

사용자의 감성을 UI 설계에 반영하는 기술
HCI (Human-Computer Interaction) → 사용자의 편리하고 안전한 상호작용 연구
UX (User Experience) → 사용자가 시스템을 통해 느끼는 종합적인 경험

✔ UX의 특징

주관성 : 같은 현상에 대해 사용자마다 다른 감정
정황성 : 환경에 따라 달라지는 경험
총체성 : 심리적 요인에 따른 감정 차이

총정리