6장. 화면 설계

#1 UI 요구사항 확인

UI 요구사항 확인

1. UI(User Interface) 개념

 

■ UI는 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이다. 사람이 접하게 되는 화면.

 

 

2. UI 유형 (CG NO)

 

- CLI (Command Line Interface) : 정적인 텍스트 기반 인터페이스

- GUI (Graphical User Interface) : 그래픽 반응 기반 인터페이스

- NUI (Natural User Interface) : 직관적 사용자 반응 기반 인터페이스 (신체부위 사용)

- OUI (Organic User Interface) : 유기적 상호작용 기반 인터페이스 (모든 사물)

 

 

3. UI 분야 

 

- 물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반

- 디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성

- 기능적 분야 : 사용자의 편의성에 맞춰 쉽고 간편하게 사용가능

 

 

4. UI 설계 원칙 (직유 학유)

 

- 직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함

- 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작

- 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작

- 유연성 : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

 

 

5. UI 설계 지침 (사일단결 가표접명오)

 

- 사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며 실사용자에 대한 이해가 바탕이 되어야 함

- 일관성 : 버튼이나 조작 방법을 사용자가 기억하기 빠르고 쉽게 습득할 수 있도록 설계

- 단순성 : 조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화

- 결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측이 가능해야 함

- 가시성 : 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 함

- 표준화 : 디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용 가능해야 함

- 접근성 : 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함

- 명확성 : 사용자가 개념적으로 쉽게 인지해야 함

- 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

 

 

6. UI 요구사항 확인

 

■ UI 요구사항은 사용자가 정보 시스템을 구축하여 얻고자 하는 최종 목적의 기준이다.

 

■ UI 요구사항 구분

• 기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항

• 비기능적 요구사항 : 사용성, 효율성, 시스템 환경 등에 관한 요구사항

 

UI 표준

1. UI 표준 개념

 

■ UI 표준은 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약이다.

 

 

2. UI 표준 구성 (액정 스패조)

- 전체적인 UX 원칙 : 사용자의 관점에서 사용자 업무를 효율적으로 수행할 수 있는 UX원칙 정의

- 정책 및 철학 : 조직의 목표나 정체성을 포함하는 정책 및 철학 설정

- UI 스타일 가이드 : UI에 대한 구동 환경 및 레이아웃 등을 정의

- UI 패턴 모델 정의 : CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의

- UI 표준 수립을 위한 조직 구성 : UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성

 

UI 지침

1. UI 지침(Guideline) 개념

 

■ UI 지침이란 UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드라인이다. 

 

■ UI 개발을 위한 주요 기법 

- 3C 분석 : 고객(Customer), 경쟁하고 있는 자사(Company)와 경쟁사(Competitor)를 비교, 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법

- SWOT 분석 : 기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법

- 시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법

- 사용성 테스트 : 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞춰 과제를 수행한 후, 질문에 답하도록 하는 테스트

- 워크숍 : 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어 방법들을 서로 교환하고 검토하는 연구회 및 세미나

 

■ UI 컨셉션 (정와스) : 요구사항을 구체화하는 단계, 대표 화면 설계를 진행하는 단계 

- 정보 구조 설계

- 와이어 프레임 스케치

- 스토리보드 설계

 

스토리보드

1. 스토리보드 개념

 

■ UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임, 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분의 정보가 수록된 문서. 디자이너나 개발자가 최종적으로 참고하는 산출 문서.

 

■ UI 화면 설계 구분  (와스프)

- 와이프레임 : 이해 관계자들과 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업 

- 스토리보드 : 정책, 프로세스, 콘텐츠 구성, 와이어 프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물 (정적)

- 프로토타입 : 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형

 

 

2. 스토리보드 작성 절차 (개서스 메추)

 

1. 전체 개요 작성

2. 서비스 흐름 작성

3. 스타일링 작성

4. 메뉴별 화면 설계도 작성 및 상세설계

5. 추가 관련 정보 작성

 

프로토타입

1. 프로토타입 개념

 

■ 컴퓨터 시스템이나 소프트웨어 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위해서 전체적인 기능을 간략한 형태로 구현한 시제품

 

 

2. 프로토타입 유형

• 아날로그 : 종이와 펜을 이용하여 화면의 구조를 스케치

• 디지털 : 프로토타이핑 도구를 사용하여 화면의 구조를 만듬

 

3. UI 프로토타입 작성 시 고려 사항 (계범 목기 산유)

 

- 프로토타입 계획 작성

- 프로토타입 범위 확인

- 프로토타입 목표 확인

- 프로토타입 기간 및 비용 확인

- 프로토타입 산출물 확인

- 프로토타입 유의사항 확인

 

 

4. UI 프로토타입 제작 및 검토 프로세스 (아유프적)

 

- 소프트웨어 아키텍처 설계 원리 확인

- 프로토타입 유스케이스 작성

- UI 요구사항을 반영한 프로토타입 제작

- UI 적정성 검토

 

#2 UI 설계

UI 설계 도구

1. UI 설계 도구의 유형

 

■ 화면 설계 도구 

- 파워 목업

- 발사믹 목업

- 카카오 오븐

 

■ 프로토타이핑 도구

- UX 핀

- 액슈어

- 네이버 프로토나우

 

■ UI 디자인 도구

- 스케치

- 어도비 익스피리언스 디자인 CC