웹기획 실전가이드 17
와이어프레임, 프로토타입, 스토리보트 차이와 활용법
와이어프레임
웹페이지나 앱 화면의 뼈대를 보여주는 도구다.
색상이나 이미지 같은 시각적 요소는 배제하고, 정보의 배치와 구조에만 집중한다.
장점 : 기능과 구조에 집중할 수 있다.
와이어프레임 구분
충실도에 따라 구분한다.
1. 로우파이델리티 와이어프레임
손으로 그린 스케치 수준, 전체적인 레이아웃과 주요 요소의 위치만 대략적으로 표현
초기 방향성을 논의할 때 유용
2. 하이 파이델리티 와이어프레임
실제 화면과 거의 비슷한 수준으로 상세하게 작성된다.
프로토타입
실제로 작동하는 '시제품'이다.
와이어프레임은 정적인 설계도라면, 프로토타입은 동적인 체험판이다.
복잡한 인터렉션이나 새로운 UI패턴을 도입할 때 유용하다.
장점: 사용자가 실제로 클릭하고 상호작용할 수 있어서, 사용자 경험을 미리 검증할 수 있다.
프로토타입 구분
충실도에 따라 나뉜다.
1. 페이퍼 프로토타입
종이에 그린 화면들을 손으로 바꿔가며 시뮬레이션하는 방식
초기 아이디어 검증에 효과적
2. 디지털 프로토타입
전용 도구를 사용해서 실제 디바이스에서 테스트할 수 있는 수준을 제작된다.
사용자 테스트나 이해관계자 프레젠테이션에서 활용
스토리보드
사용자 경험을 '이야기'형태로 시각화하는 도구다.
영화나 애니메이션 제작에서 사용되는 스토리보드와 비슷한 개념
사용자가 서비스를 사용하는 전체 과정을 기산 순서대로 장면별로 나누어 표현한다.
장점: 맥락과 감정을 전달할 수 있다.
각 도구 별 적절한 활용 시점
<프로젝트 초기>
스토리보드롤 전체적인 사용자 여정을 그리기 > 로우 파이델리티 와이어프레임으로 주요 화면 구조를 잡기
<프로젝트 중기>
하이 파이델리티 와이어프레임으로 세부사항 정리 > 프로토타입으로 복잡한 인터랙션 검장
<프로젝트 최종단계>
완성도 높은 프로토타입으로 사용자 테스트를 진행
팀원 별 선호하는 도구
<개발자>
하이델리티 와이어프레임
<디자이너>
로우 파이델리티 와이어프레임, 스토리보드
<경영진, 클라이언트>
프로토타입
하이브리드 접근법 효과적
>> 중요한 것은 도구 자체가 아니라 커뮤니케이션의 목적이다.