화면 설계 UI 요구사항 확인 3/3

화면 설계 UI 요구사항 확인

스토리보드

스토리보드(Storyboard) 개념

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

UI 화면 설계 구분

와이어프레임(Wireframe)

• 이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업
• 파워포인트, 키노트, 스케치, 일러스트

스토리보드(Storyboard)

• 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
• 파워포인트, 키노트, 스케치

프로토타입(Prototype)

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

스토리보드 작성 절차

1. 전체 개요 작성

• 문서명, 개정 이력, 디렉토리, 작성 일자, 업데이트 기록, 기재해야 할 중요사항 등에 대한 전반적인 개요를 명시

2. 서비스 흐름 작성

• 메인 페이지로부터 각각의 서브 메뉴들이 어떤 화면들을 거쳐서 진행 되는지 과정을 보여주는 화면 작성
• 서비스 흐름 작성을 통해 와이어프레임 상에서 발견하지 못한 서비스 흐름상 문제 점검 가능

3. 스타일 확정

• 레이아웃이나 글자 모양, 크기, 색상, 그래픽에서의 일관성을 유지해야 하는 스타일 확정

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

• 각각의 화면에 대한 상세 설명 페이지를 작성

5. 추가 관련 정보 작성

• 메뉴별 화면 설명은 구체적이고 이해하기 쉽게 설명
• 연결되는 서버가 있다면 해당 URL이나 관련 정보도 같이 작성
• 프로그램 요소나 스크립트 기능, ASP나 PHP 등의 프로그램 등을 표시하고, 그 기능에 대해 설명

스토리보드 작성 시 유의사항

• 일관된 기호의 표시 : 내용을 작성하는 방법이나 기호, 번호 등에 일관된 방식을 사용하여 내용에 대한 명확한 전달 필요
• 공통 영역의 정의 : 상단 메뉴나 하단 내용, 퀵 메뉴 등 화면 내의 공통 영역은 페이지마다 같은 형태로 구성
• 영역별 세부 설계 : 스토리보드의 영역별 세부 설계 시 각각의 영역을 명확히 구분한 다음 세부적인 설명을 기술
• 버전 업 관리 : 갱신 시 버전과 날짜를 기록하여 효율적인 관리 필요

UI 프로토타입 제작 및 검토

프로토타입(Prototype) 개념

• 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품
• 사용자의 요구사항이 정확하게 반영될 때까지 지속적으로 개선하고 보완해서 최종 설계를 완성

프로토타입의 의의

• 사전에 프로토타입을 먼저 제작하고 이를 기반으로 UI의 적정성을 평가, 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지하는 효과가 있음
• 시스템 설계 및 개발에 소요되는 총 비용과 노력을 절감할 수 있음

프로토타입의 장점 및 단정

장점

• 사용자 설득과 이해가 쉬움
• 개발 시간 감소
• 오류 사전 발견으로 문제 예방 가능

단점

• 수정 과정 증가 시, 작업 시간 증가 위험 존재
• 요구사항에 대한 적절한 타협 필요
• 자원 효율성 관점에서는 필요 이상의 많은 자원 소모

UI 프로토타입 유형

아날로그

• 개념 : 종이와 펜을 활용하여 화면의 구조를 스케치하는 프로토타입
• 도구 : 화이트보드, 펜, 종이를 이용, 포스트잇 사용
• 제작 기간이 짧은 경우 적용
• 제작 비용이 적을 경우 적용
• 업무 협의가 빠른 상황일 경우 적용

디지털

• 개념 : 디지털 편집기, HTML 등의 프로토타이핑 도구를 사용해 화면의 구조를 만드는 프로토타입
• 도구 : Keynote, UX pin, HTML
• 재사용이 필요한 경우 적용
• 산출물과 비슷한 효과를 필요로 할 경우 적용
• 숙련된 전문가가 있을 경우 적용