정처기 1-2. 화면 설계

1. UI 요구사항 확인

< UI 개요 >

- UI : 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체. 좁은 의미에서 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면

- 유형 : CLI(텍스트 기반 인터페이스) / GUI(그래픽 반응 기반 인터페이스) / NUI(직관적 사용자 기반 인터페이스) / OUI(유기적 상호작용 기반 인터페이스)

- UI 설계 원칙 : 

직관성	쉬운 검색, 쉬운 사용성, 일관성
유효성	쉬운 오류 처리 및 복구
학습성	쉽게 학습, 쉬운 접근, 쉽게 기억
유연성	오류 예방, 실수 포용, 오류 감지

- UI 설계 지침 : 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

- 필요 기능 : 사용자의 입력을 검증 / 에러 처리와 에러 메세지 처리 / 도움, 프롬프트 제공

 

---

< UI 표준 >

- UI 표준 : 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약

- UI 표준 구성 : 전체적인 UX 원칙 / 정책 및 철학 / UI 스타일 가이드 / UI 패턴 모델 정의 / UI 표준 수립을 위한 조직 구성

 

- UI 스타일 가이드 구성 : UI 구동 환경의 정의 / 레이아웃 정의 / 메뉴 네비게이션 정의 / 기능 정의

- UI 패턴 모델 정의 : CRUD 방식을 기반으로 함. 업무 화면 클라이언트 정의 / 서버 컨트롤러 정의 / 서버 메세지 및 예외처리 정의 (S, E, I) / 클라이언트 - 서버 간 데이터 변환 정의 / 기업 포털 연계 정의 / 보고서 정의 / 외부 컴포넌트 연계 정의

---

< UI 지침(Guideline) >

- UI 지침 : UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항

- UI 개발을 위한 주요 기법 : 3CE 분석 / SWOT 분석 / 시나리오 플래닝 / 사용성 테스트 / 워크숍

- 사용자 요구사항 도출 : 

페르소나 정의	잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
콘셉트 모델 정의	여러가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램 브레인스토밍 활용
사용자 요구사항 정의	리서치 및 페르소나 결과물을 토대로 요구사항을 도출하고 우선순위 선정 요구사항 매트릭스 작성 정황 시나리오로부터 요구사항 도출
UI 컨셉션	정보 구조 설계 / 와이어프레임 스케치 / 스토리보드 설계

- UI 시나리오 문서의 작성 요건 : 완전성 / 일관성 / 이해성 / 가독성 / 추적 용이성 / 수정 용이성

 

---

< 스토리보드 >

- 스토리보드 : 구축하는 서비스를 위한 대부분의 정보가 수록된 문서

- UI 화면 설계를 위해서는 스토리보드, 와이어 프레임, 프로토타입이 활용

- 스토리보드 작성 절차 : 전체 개요 작성 -> 서비스 흐름 작성 -> 스타일 확정 -> 메뉴별 화면설계도 작성 및 상세설명 -> 추가 관련 정보 작성

- 스토리보드 작성 시 유의사항 : 일관된 기호의 표시 / 공통 영역의 정의 / 영역별 세부 설계 / 버전 업 관리

 

 

---

2. UI 설계

< UI 흐름설계 및 상세설계 >

- UI 설계 프로세스 : 문제 정의 / 사용자 모델 정의 / 작업 분석 / 컴퓨터 오브젝트 및 기능 정의 / 사용자 인터페이스 정의 / 디자인 평가

- UI 흐름 설계 : 기능 작성 / 입력 요소 확인 / 유스케이스 설계 / 기능 및 양식 확인

 

---

< 감성공학 >

- 감성공학 : 인간의 감성을 정성적 , 정량적으로 측정 및 평가하고 과학으로 분석하여 이를 구체적인 제품 설계로 실현해 내는 공학

- 접근 방법: 

1류	인간의 감성을 표현하는 어휘를 이용하여 제품 이미지를 조사
2류	개인의 연령, 성별 등의 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법
3류	공학적인 방법으로 접근하여 인간의 감각을 측정

 

---

< UI 설계 도구 >

- UI 설계 도구 : 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

- 유형 :

화면 설계 도구	파워 목업, 발사믹 목업, 카카오 오븐
프로토타이핑 도구	UX핀, 액슈어, 네이버 프로토나우
UI 디자인 도구	스케치, Adobe XD
UI 디자인 산출물로 작업하는 프로토타이핑 도구	인비젼, 픽사에이트, 프레이머