UI 지침(Guideline)
개념 : UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야 할 세부사항을 규정하는 가이드라인
| 소프트웨어 개발 단계별 UI 지침 | |||||
| 목표 정의 | 프로젝트 계획 | 요구사항 정의 | 설계 및 구현 | 테스트 | 배포 및 관리 |
| - 환경 분석 - UI 개발 목표 및 범위 정의 |
- 사용자 분석 및 니즈(needs)조사 |
- 사용자 요구사항 도출 - UI 컨셉션 정의 |
- UI 상세 설계 - UI 화면 디자인 - UI 검증 |
- 사용성 테스트 실행, 결과 분석 |
- 매뉴얼 배포, 관리 |
UI 개발을 위한 주요 기법
| 3C 분석 | - 고객(Customer), 자사(Company), 경쟁사(Competitor)를 비교 |
| SWOT 분석 | - 기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법 |
| 시나리오 플래닝 | - 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법 |
| 사용성 테스트 | - 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트 |
| 워크숍 | - 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나 |
사용자 분석 및 니즈 조사
- 최신 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 예상 타깃 고객층의 프로파일을 기술하고 정의
- 세부 수행 활동 : 리서치 대상 선정 및 내용 설계, 리서치 진행, 리서치 결과 정의
UI 사용자 요구사항 도출
1. 페르소나(가상의 사용자) 정의 - 페르소나 분류 및 정의, 페르소나 작성, 페르소나 활용
2. 콘셉트 모델 정의 - 콘셉트 모델 정의, 브레인스토밍 활용
3. 사용자 요구사항 정의 - 요구사항 매트릭스 작성, 정황 시나리오 제작 및 요구사항 도출
4. UI 컨셉션 - 정와스 : 정보 구조 설계 / 대표 화면 와이어 프레임 스케치 / 페이퍼 프로토타입을 통한 스토리보드 설계
스토리보드(Storyboard)
개념
- 스토리보드는 UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
UI 화면 설계 구분
와스프
| 와이어 프레임 | - 이해관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업 |
| 스토리보드 | - 정책, 프로세스, 콘텐츠 구성, 와이어 프레임(UI, UX), 기능 정의, 데이터 베이스 연동 등 서비스를 구축하기 위한 모든 정보가 담겨 있는 설계 산출물 |
| 프로토타입 | - 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용함으로써 실제 구현된 것 처럼 시뮬레이션 할 수 있는 모형 |
스토리보드 작성 절차
전체 개요 작성 → 서비스 흐름 작성 → 스타일 확정 → 메뉴별 화면 설계도 작성 및 상세설계 → 추가 관련 정보 작성
스토리보드 작성 시 유의사항
일관된 기호의 표시, 공통 영역의 정의, 영역별 세부 설계, 버전 업 관리
프로토타입 개념
- 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품
- 사전에 프로토타입을 먼저 제작하고 이를 기반으로 UI의 적정성을 평가, 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지하는 효과가 있음
프로토타입의 장점 및 단점
| 장점 | 단점 |
| - 사용자 설득과 이해가 쉬움 - 개발 시간 감소 - 오류 사전 발견을 통한 예방 가능 |
- 수정 과정 증가 시, 작업 시간 증가 위험 존재 - 요구사항에 대한 적절한 타협 필요 - 자원 효율성 관점에서는 필요 이상의 많은 자원 소모 |
UI 프로토타입 유형
| 아날로그 | 디지털 |
| - 종이와 펜을 활용하여 화면의 구조를 스케치하는 프로토타입 - 화이트보드, 펜, 종이, 포스트잇 이용 |
- 디지털 편집기, HTML 등의 프로토타이핑 도구를 사용해 화면의 구조를 만드는 프로토타입 - Keynote, UX pin, HTML |