[실기] Ⅵ.화면설계

핵심개념정리

no	개념	설명
1	UI(User Interface)	넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
2	UX(User Experience)	제품, 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험
3	UI 표준	디자인 철학과 원칙 기반 하에 전체 시스템에서 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약
4	UI 스타일 가이드	UI의 통일과 일관적인 화면구성을 위해 시스템이 지켜야할 UI요소 정의와 화면설계원칙
5	UI 패턴모델	CRUD방식을 기반으로 데이터 입출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준절차를 표시하고 모델을 개발
6	리치 클라이언트	SW코드를 클라이언트 PC의 자원을 이용하여 실행, 책임지는 기술
7	씬 클라이언트	소프트웨어의 실행을 전적으로 서버에서 책임지는 기술, 서버에서 가상머신을 이용하여 데이터와 SW관리
8	SSO(Single Sign On)	한 번의 로그인으로 여러 다른 사이트들을 자동으로 접속하여 이용하는 방법
9	UI 지침	UI표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드
10	스토리보드	UI화면 설계를 위한 정책, 프로세스및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능정의, 데이터베이스, 연동 등 구축하는 서비스를 위한 정보가 수록된 문서
11	프로토타입	시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 더 잘 이해하고 결정하기 위해 전체기능을 간략한 형태로 구현한 시제품
12	3C 분석	Custome(고객)r – Company(자사) – Competitor(경쟁사)를 비교하여 어떻게 차별화하여 이길것인지 분석
13	SWOT 분석	Strength, Weakness, Opportunity, Threat 요인을 규정하고 경영전략 수립
14	시나리오 플래닝	불확실성이 높은 상황변화를 사전에 예측하고 다양한 시나리오 설계, 불확실성을 제거해나가려는 전략
15	사용성 테스트	사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행 한 후 질문에 답하는 테스트
16	페르소나	잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
17	콘셉트 모델	여러 가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램(브레인스토밍)
18	CSS	(Cascading Style Sheet) HTML 문서를 스타일링하는 표준 문서

 

---

 

1. UI 요구사항 확인

▶︎ UI 유형

▶︎ UI 설계원칙

▶︎ UI 설계지침

사용자 중심	사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며 실사용자에게 대한 이해가 바탕이 되어야 함
일관성	버튼이나 조작 방법을 사용자가 기억하기 빠르고 쉽게 습득할 수 있도록 설계
단순성	조작방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화
결과 예측 가능	작동시킬 기능만 보고도 결과 예측이 가능해야 함
가시성	주요기능을 메인화면에 노출하여 쉬운 조작이 가능해야 함
표준화	디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용가능해야 함
접근성	사용자의 직무, 연령, 성별이 고려된 다양한 계층을 수용해야 함
명확성	사용자가 개념적으로 쉽게 인지해야 함
오류발생해결	사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

▶︎ UI 화면 설계 원칙[직유학유]: 직관성/ 유효성/ 학습성/ 유연성

 

2. UI 표준

▶︎ UI 표준 구성 : 전체적인 UX원칙, 정책 및 철학, 스타일가이드, 패턴모델정의(CRUD기반), 조직구성
▶︎ UI 스타일 가이드 구성
  1) UI 구동환경 정의 : 컴퓨터 운영체제 확인, 웹 브라우저 확인, 모니터 해상도 확인, 프레임세트 확인
  2) 레이아웃 정의
  3) 메뉴 내비게이션 정의
  4) 공통표준화면 정의
  5) 기능 정의
  6) 구성요소 정의
▶︎ UI 패턴모델 정의 

 

 

3. UI 지침

▶︎ UI 지침 구성도(실기에서는 전체 순서만 볼 것)

 

 

4. 스토리보드

▶︎ UI 화면 구분 설계

▶︎ 스토리보드 작성 절차: 전체개요 – 서비스 흐름 – 스타일 확정 – 메뉴별 화면 설계도, 설명 – 추가 정보 작성

 

 

5. UI 프로토타입 제작 및 검토

▶︎ 프로토타입 작성 시 고려사항 : 계획 작성 - 범위 확인 - 목표 확인 - 기간 및 비용 확인 - 산출물 확인 - 유의사항 확인

 

 

6. UI 설계

▶︎ UI 화면 설계 도구

파워목업(Power Mockup)	PPT + 추가 메뉴 설치, 드래그하여 사용
발사믹목업(Balsamiq Mockup)	간단한 스케치로 빠르고 심플하게 컨셉 전달
카카오 오븐(Kakao Oven)	카카오에서 제작한 온라인 프로토타이핑 도구로, 직관적인 인터페이스가 장점

▶︎ 디자인 도구 : 스케치/ 어도비 익스피리언스 디자인 CC

▶︎ 프로토타이핑 도구

* 커피스크립트: 자바스크립트의 단점을 해결하기 위한 프로그래밍 언어로, 자신의 언어로 작성된 프로그램을 자바스크립트로 변환할 수 있는 컴파일러를 제공