6. 화면 설계
UI 요구사항 확인
UI 요구사항 확인
UI 개념
넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체. 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면.
UI 유형
- CLI : 정적인 텍스트 기반 인터페이스
- GUI : 그래픽 반응 기반 인터페이스
- NUI : 직관적 사용자 반응 기반 인터페이스. 신체 부위를 이용.
- OUI : 유기적 상호작용 기반 인터페이스. 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스.
UI 설계 원칙
- 직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함
- 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록
- 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
- 유연성 : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작
UI 설계 지침
- 사용자 중심
- 일관성
- 단순성
- 결과 예측 가능
- 가시성
- 표준화
- 접근성
- 명확성
- 오류 발생 해결
UI 요구사항 확인
UI 요구사항
사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
UI 요구사항 구분
- 기능적 요구사항 : 시스템이 무엇을 하여야 하는지를 설명. 시스템이 제공하는 기능, 서비스에 대한 요구사항
- 비기능적 요구사항 : 개발과정에서 지켜져야 할 제약조건들. 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항.
UI 표준
UI 표준 개념
디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 관한 규약
UI 표준 구성
- 전체적인 UX 원칙 : 사용자 업무를 효율적으로 수행할 수 있는.
- 정책 및 철학 : 목표나 정체성
- UI 스타일 가이드 : 구동 환경 및 레이아웃
- UI 패턴 모델 정의 : CRUD 방식을 기반으로
- UI 표준 수립을 위한 조직 구성
UX
제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 통체적 경험
UI 스타일 가이드 구성
UI 통일과 일관적인 화면 구성을 위해서 시스템이 지켜야 할 UI 요소 정의와 화면 설계원칙을 제시
UI 구동 환경의 정의
- OS
- 웹 브라우저
- 모니터 해상도
- 프레임세트 : 속도 및 업무 편의성을 고려하여 각 영역별 프레임을 구분해 적용
레이아웃 정의
- 화면 구조 정의
- 상단 메뉴 고정 : 필수
- 좌측 메뉴 구성
- 내용 구성 : 필수
- 하단 메뉴 구성
- 사용 환경에 맞춰 페이지 폭 정의
메뉴 내비게이션 정의 : 4가지 타입의 애플리케이션의 메뉴 구조에 따라 적당한 타입 선택
- 기본 내비게이션
- 기본 내비게이션의 변형
- 메뉴 구조가 2뎁스인 경우 적용
- 메뉴 구조가 복잡할 경우 적용
기능 정의
시스템 요구사항에 대한 개념 모델을 논리적 모델(프로세스 모델, UI 설계, 논리 데이터 모델, 아키텍처 정의, 인터페이스 설계 측면)로 상세화하여 기능을 정의
구성요소 정의
- 그리드 : 테이블 형태로 UI를 구성
- 버튼/컨트롤 타입
- Page 요소 : 폰트규정, 아이콘 요소, 테크박스/라디오 버튼, 말풍선, 이미지 표시, 탭 표시, 스탭 표시, 페이지 이동, 상하 스크롤, 정보입력 등
- 팝업 요소 : 윈도 팝업, 레이어 팝업
- Alert 요소
UI 패턴 모델 정의
CRUD 방식을 기반으로 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발. 표준 프레임워크로 개발하고, 유스케이스를 이용해서 패턴별 표준 개발 방법 총 7가지 영역을 정의.
- 업무 화면 클라이언트 정의 : 리치 클라이언트, 씬 클라이언트
- 서버 컨트롤러
- 서버 메시지 및 예외 처리 정의
- 클라이언트 - 서버 간 데이터 변환 정의
- 기업 포털 연계 정의 : EP-SSO-사용자 간 연계 방안을 URL 연계 시를 고려하여 정의
- 보고서 정의
- 외부 컴포넌트 연계 정의
리치 클라이언트
SW의 실행을 클라이언트에서 책임지는 기술로 서버는 클라이언트에서 요청한 SW의 실행 코드를 스트림 형태로 제공하고, 클라이언트는 서버로부터 스트리밍되는 SW 코드를 클라이언트 PC의 자원을 이용하여 실행하는 기술.
씬 클라이언트
소프트웨어의 실행을 전적으로 서버에서 책임지는 기술로 서버에서 가상 머신을 이용하여 클라이언트의 데이터와 소프트웨어를 관리 및 실행하는 기술.
SSO(Single Sign On)
한 번의 로그인을 통해 여러 다른 사이트들을 자동적으로 접속하여 이용하는 방법
UI 표준 수립을 위한 조직의 구성
- 조직 구성 및 역할 정의
- 커뮤니케이션 방안 수립
UI 지침
UI 지침 개념
UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항을 규정하는 가이드라인
- 목표 정의
- 프로젝트 계획
- 요구사항 정의
- 설계 및 구현
- 테스트
- 배포 및 관리
UI 표준 적용을 위한 환경 분석
- 사용자 트렌트 분석
- 기능 및 설계 분석
UI 개발 목표 및 범위
- 경영진의 UI 관련 개발 요구사항 조사 및 정의
- 자사-타사-사용자 분석(3C 분석) 및 트렌트 분석
- 관계자 간 개발 목표 협의 및 공유 워크숍
UI 개발을 위한 주요 기법
- 3C 분석 : 고객, 자사, 경쟁사를 비교, 분석하여 어떻게 이길것인가
- SWOT 분석 : Strength, Weakness, Opportunity, Threat를 토대로 경영 전략을 수립
- 시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법
- 사용성 테스트
- 워크숍
사용자 분석 및 니즈 조사
최신 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 예상 타깃 고객층의 프로파일을 기술하고 정의.
- 리서치 대상 선정 및 내용 설계
- 리서치 진행
- 리서치 결과 정리
사용자 요구사항 도출
- 페르소나 정의 : 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자.
- 콘셉트 모델 정의 : 여러 가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램. 브레인스토밍 활용.
- 사용자 요구사항 정의 : 요구사항 매트릭스 작성. 정황 시나리오 제작.
- UI 컨셉션 : 요구사항 구체화하는 단계. 대표 화면 설계.
요구사항 매트릭스
다양한 경로를 통해 수집된 직접적인 요구사항을 검토하여, 페르소나의 목적을 기준으로 데이터 요구, 기능 요구, 제품 품질, 제약 요인 기반으로 만든 요구사항 표
정황 시나리오
요구사항 정의에 사용되는 초기 시나리오를 말하며, 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞추는 시나리오
사용자 요구사항 도출 이후에 UI 상세설계, UI 화면 디자인, UI 시연을 통한 사용성 검토/검증, 테스트, 배포 및 관리를 거침.
스토리보드
스토리보드 개념
UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서. UI 화면 설계를 위해서는 와이어 프레임, 스토리보드, 프로토타입이 활용.
와이어 프레임
이해관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업.
스토리보드 작성 절차
- 전체 개요 작성
- 서비스 흐름 작성
- 스타일 확정
- 메뉴별 화면 설계도 작성 및 상세 설명
- 추가 관련 정보 작성
스토리보드 작성 시 유의사항
- 일관된 기호 표시
- 공통 영역의 정의
- 영역별 세부 설계
- 버전 업 관리
UI 프로토타입 제작 및 검토
UI 프로토타입 이해
컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품.
프로토타입의 장점
- 사용자 설득, 이해 쉬움
- 개발 시간 감소
- 오류 사전 발견을 통한 예방 가능
프로토타입의 단점
- 작업 시간 증가 위험 존재
- 요구사항에 대한 적절한 타협 필요
- 자원 효율성 관점에서는 필요 이상의 많은 자원 소모
UI 프로토타입 계획 및 작성 시 고려 사항
계획 시 고려 사항
- 프로토타입 목표 확인(아키텍처 검증)
- 프로토타입 환경 확인
- 프로토타입 일정 확인
- 프로토타입 범위 확인
- 프로토타입 인원 확인
- 프로토타입 아키텍처 검증 확인
- 프로토타입 이슈 및 해결
- 프로토타입 가이드 확정
- 프로토타입 개발 생산성 확인
- 프로토타입 결과 시연
작성 시 고려 사항
- 프로토타입 계획 작성
- 프로토타입 범위 확인
- 프로토타입 목표 확인
- 프로토타입 기간 및 비용 확인
- 프로토타입 산출물 확인
- 프로토타입 유의사항 확인
UI 프로토타입 제작 및 검토 프로세스
- 소프트웨어 아키텍처 설계 원리 확인
- 프로토타입 유스케이스 작성
- UI 요구사항을 반영한 프로토타입 제작
- UI 적정성 검토
UI 설계
UI 흐름 설계
UI 설계서 구성
- UI 설계서 표지
- UI 설계서 계정 이력
- UI 요구사항 정의
- 시스템 구조
- 사이트 맵
- 프로세스 정의
- 화면 설계
UI 설계 원리
실행 차를 줄이기 위한 UI 설계 원리
- 사용의도 파악
- 행위 순서 규정
- 행위의 순서대로 실행
평가 차를 줄이기 위한 UI 설계 원리
- 수행한 키 조작 결과를 사용자가 빠르게 자각하도록 유도
- 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
- 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
UI 흐름 설계 수행 절차
위 UI 설계 원리의 적정성을 확인함.
화면과 폼의 흐름 설계
- 화면에 표현되어야 할 기능 및 비기능적 요구사항을 검토함.
- 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
- 유스케이스 설계
- 기능 및 양식 확인
액터
시스템의 외부에 있고 시스템과 상호작용을 하는 사람 또는 시스템
UI 상세 설계
UI 상세설계 프로세스
- UI 요구사항 최종 확인
- UI 구조 설계
- 사용자 기반 메뉴 구조 설계
- 화면 설계
- 하위 시스템 단위의 내, 외부 상세 화면과 폼 설계
UI 검토 및 보완
- UI 검토 수행
- UI 검토 보완
- 사용성 검토 및 검증 수행
UI 설계 도구
UI 설계 도구의 개념
사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구
UI 설계 도구의 유형
화면 설계 도구
- 파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴
- 발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
- 카카오 오븐 : 카카오에서 제작한 온라인 프로토타이핑 도구
프로토타이핑 도구
- UX 핀 : 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구
- 액슈어(AXURE) : UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구
- 네이버 프로토나우 : 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능을 지원 가능한 도구
UI 디자인 도구
- 스케치 : 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구
- 어도비 익스피리언스 : UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구
UI 디자인 산출물로 작업하는 프로토타이핑 도구
- 인비전 : 포토샵, 스케지 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구
- 픽사에이트(Pixate) : 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등 다양한 회사에서 사용
- 프레이머 : 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구.