[소프트웨어 설계] 화면 설계

Chapter 02 화면 설계

1. UI 요구사항 확인

1. UI 개요

• UI 개념
  • 넓은 의미: 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적/가상의 매개체
  • 좁은 의미: 정보 기기/sw 화면 등에서 사용자가 접하는 화면
• UI 유형
  • CLI: Command Line Interface; 정적 텍스트 기반 인터페이스
  • GUI: Graphical User Interface; 그래픽 반응 기반 인터페이스
  • NUI: Natural User Interface; 직관적 사용자 반응 기반 인터페이스
  • OUI: Organic User Interface; 유기적 상호작용 기반 인터페이스
• UI 특징
  • 오류 최소화, 작업기능 구체화, 상호 작용, 작업시간 감소, 피드백 제공
• UI 설계 원칙
  • 직관성(쉬운 검색/사용성, 일관성)
  • 유효성(쉬운 오류 처리/복구)
  • 학습성(쉽게 학습, 쉬운 접근, 쉽게 기억)
  • 유연성(오류 예방, 실수 포용, 오류 감지)
• UI 설계 지침
  • 사용자 중심, 효율성, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결
• UI 시스템의 필요 기능
  • 사용자 입력 검증
  • 에러 처리/메시지 처리
  • 도움/프롬프트 제공

1. UI 표준

• UI 표준 개념
  • 디자인 철학, 원칙 기반 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 관한 규약
• UI 표준 구성
  • 전체적인 UX 원칙, 정책/철학, UI 스타일 가이드, UI 패턴 모델 정의, UI 표준 수립을 위한 조직 구성
• UI 표준 수립 시 고려사항
  • 사용자 불편X, 많은 업무 케이스 포함, 다양한 사용상황 대처 가능, 표준 적용이 쉽도록 충분한 가이드/활용 수단 제공, 변화하는 상황에 빠르게 대응하는 관리조직
• UI 화면 구성요소
  • 그리드
  • 버튼/컨트롤 타입
    • 콤보 박스
    • 토글 버튼
    • 텍스트 박스(텍스트 필드)
    • 라디오 버튼
    • 체크박스
  • page 요소
  • 팝업 요소
  • Alert 요소
• UI 제스처
  • 탭, 더블 탭, 프레스, 플릭, 스와이프, 팬, 드래그, 핀치, 로테이트
• UI 패턴 모델
  • CRUD 방식 기반 데이터 입출력을 처리하는 화면 흐름을 포함해 오퍼레이션 방식에 대한 표준절차 표시, UI 패턴 모델 개발
  • 표준 프레임워크로 개발하며 유스케이스를 이용해 패턴별 표준 개발 방법의 7가지 영역 정의
    • 업무 화면 클라이언트 정의
    • 서버 컨트롤러 정의
    • 서버 메시지 및 예외처리 정의
    • 클라이언트-서버 간 데이터 반환 정의
    • 기업 포털 연계 정의
    • 보고서 정의
    • 외부 컴포넌트 연계 정의

1. UI 지침

• UI 지침 개념
  • UI 표준에 따라 사용자 인터페이스 설계/개발 시 지켜야 할 세부 사항
• UI 표준 적용을 위한 환경 분석
  • 사용자 트렌드, 기능 조작성, 오류 방지, 최소한의 조작으로 업무 처리 가능 여부, UI 정보 전달력 확인

1. 스토리보드

• 스토리보드 개념
  • UI 화면 설계를 위해 정책/프로세스/콘텐츠 구성, 와이어프레임, 기능 정의, 데이터베이스 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
  • 와이어프레임: 화면 구성 협의, 서비스 간략 흐름 공유를 위해 화면 단위 레이아웃 설계 작업
  • 프로토타입: 정적 화면으로 설계된 와이어프레임/스토리보드에 동적 효과를 적용해 실제 구현처럼 시뮬레이션할 수 있는 모형

2. UI 설계

1. UI 설계 프로세스 및 UI 흐름 설계

• UI 설계 프로세스
  1. 문제 정의
  2. 사용자 모델 정의
  3. 작업 분석
  4. 컴퓨터 오브젝트 및 기능 정의
  5. 사용자 인터페이스 정의
  6. 디자인 평가
• UI 흐름 설계
  1. 화면에 표현되어야 할 기능 작성
  2. 화면의 입력 요소 확인
  3. UI 요구사항 기반 유스케이스 설계
  4. 기능 및 양식 확인

1. 감성공학 Sensibility Ergonamics

• 감성공학 개념
  • 인간의 감성을 정성적/정량적으로 측정/평가해 과학적으로 분석해 이를 구체적 제품 설계로 실현하는 공학
  • 연구영역: 인간의 생리적/심리적 특성에 기반한 인간과 기계, 인간과 환경 사이를 연계시키는 인터페이스 설계 분야
• 감성공학 접근 방법
  1. 1류 접근 방법
     • 의미 미분법
     • 인간 감성을 표현하는 어휘를 이용해 제품 이미지 조사, 그 분석을 통해 제품 디자인 요소와 연계
  2. 2류 접근 방법
     • 문화적 감성의 일부 반영
     • 개인 연령/성별 등 개별 특성, 생활 방식으로부터 개인이 갖는 이미지 구체화
     • 감성의 심리적 특성 강조
  3. 3류 접근 방법
     • 기존 감성적 어휘 대신 공학적 방법으로 접급해 인간 감각 측정, 이를 바탕으로 수학적 모델 구축/활용
     • 대상 제품의 물리적 특성에 대한 객관적 지표와 연관분석으로 제품 설계에 응용
     • 감성의 생리적 특성을 강조한 접근 방법

1. UI 설계 도구

• UI 설계 도구 개념
  • 사용자, 시스템 사이 의사소통할 수 있도록 일시/영구적 접근을 목적으로 만들어진 UI의 설계를 지원하는 도구
  • 목업(Mockup): 디자인, 사용법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적 형태의 모형
  • UI 설계에서 비용 절감을 위해 실 제품 이전 목업을 활용
• UI 개발 단계별 활용 가능한 설계 도구
  • 분석 단계: UI 패턴 도구, UI 모델링 도구
  • 설계 단계: UI 설계 도구
  • 구현 단계: 프로토타이핑 도구