작성 맥락
이 글은 직접 학습하거나 구현하며 남긴 개인 기술 기록입니다. 참고 자료가 있는 경우 본문에 출처를 남기고, 틀린 부분을 발견하면 수정합니다.
UI 설계 종합 가이드
UI 시스템의 필수 기능
- prompt와 검증기능
- 결함처리 메시지처리
- 도움말기능
UI 설계 원칙
UI는 사용자 인터페이스로서, 사용자 입장에서 편리하게 사용할 수 있도록 설계되어야 합니다. 주요 원칙은 다음과 같습니다:
- 직관성: 사용자가 즉각적으로 이해하고 사용할 수 있어야 합니다
- 유효성: 목적을 정확하게 달성할 수 있어야 합니다
- 학습성: 누구나 쉽게 익힐 수 있어야 합니다
- 유연성: 사용자의 실수를 최소화하고 복구할 수 있어야 합니다
UI의 설계 지침
- 사용자 중심: 모든 설계의 기본 전제
- 사용자가 UI를 쉽게 사용할 수 있는 특성을 최우선으로 고려
- 모든 설계 지침은 사용자 중심을 기반으로 함
UI 설계 절차
- 문제 정의
- 사용자 모델링
- 초급자
- 중급자
- 숙련자 그룹으로 분류
- 작업 분석
- 문제를 세분화하고 구체화
- 컴퓨터 장치 및 기능 정의
- 복사, 붙여넣기, 되돌리기 등의 기능 제공
- 사용자 인터페이스 정의
- 상호작용 장치(마우스, 키보드) 식별
- 상태를 명확히 인식할 수 있도록 설계
- 디자인 평가
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의 특징
- 주관성
- 정황성 (주변 환경에 따른 영향)
- 총체성 (개인의 심리적 요인)
댓글이 보이지 않으면 GitHub에 로그인한 뒤 새로고침해 주세요. 공개 댓글은 로그인 상태에서 더 안정적으로 표시됩니다.