창업/기획

웹 기획 용어

0ver-grow 2019. 12. 2. 13:08

[웹 기획] 화면 설계 용어 - 와이어프레임, 스토리보드, 프로토타입의 차이점

 

전체적인 그림

스토리보드

디자이너/개발자가 참고하는 최종적 산출문서

정책, 프로세스, 컨텐츠 구성, UI,UX기능 정의, DB 연동 등 서비스 구축을 위한 모든 정보가 담긴 문서

현업에선 이 문서를 바탕으로 커뮤니케이션을 진행

[완료][1차개편]_060821_회원제재처리_관련_수정_기획.ppt
1.22MB

와이어프레임

화면 단위의 레이아웃을 설계하는 작업

의사소통 관계자들과 레이아웃을 협의, 서비스의 간략한 흐름을 공유하기 위해 UI,UX설계에 집중

프로토타입

실제 서비스와 흡사한 모형을 만드는 작업

정적인 화면으로 설계된 와이어프레임, 스토리보드에 동적효과(인터랙션)을 적용하여 실제 구현된 것처럼 시뮬레이션이 가능하다. 단시간에 구현이 가능하므로 사용자 경험에 대한 테스트를 진행해볼 수 있다. 

프로토타이핑툴 : HTML/CSS, AXURE(스토리보드와 프로토타입이 혼합된 형태의 설계문서), INVISON, Flinto, FRAMER, UXPin, 네이버 프로토나우, 카카오 오븐 등

애플워치 프로토타입 데모

그외 프로토타입데모