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

📌  이 글은 벌써 4년도 넘은 글인데요. 

2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!

• [웹/앱 설계의 기본] 화면설계서 작성방법
• 프로덕트 매니저의 툴, UI 디자이너의 툴

---

건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 웹사이트 또는 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요합니다. IT 현장에서는 이를 화면 설계라 지칭하며 와이어프레임, 스토리보드, 프로토타입으로 구분하고 있습니다. 국내에서는 파워포인트로 제작한 스토리보드가 표준 설계 방법으로 사용되고 있지만, 보다 원활한 커뮤니케이션을 위해 점차 다양한 툴로 확장되고 있습니다. 알듯 말듯 조금은 헷갈리는 각 용어들이 어떠한 차이가 있는지 살펴보겠습니다. 

모바일에서는 핀치 액션(손가락 벌리기)으로 이미지 확대가 가능합니다.

와이어프레임(Wireframe)

와이어프레임은 화면 단위의 레이아웃을 설계하는 작업입니다. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며 UI, UX 설계에 집중되어 있습니다.

• 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

UXPin 이미지 참조

스토리보드(Storyboard)

디자이너/개발자가 참고하는 최종적인 산출문서로써 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 문서입니다. 현업에서는 해당 문서를 바탕으로 커뮤니케이션을 진행합니다. 

• 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

야메의 이상한 생각과 공감 - 스토리보드 이미지

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

프로토타입(Prototype)

프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업입니다. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용함으로써 실제 구현된 것처럼 시물레이션 할 수 있으며, 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행해볼 수 있습니다. 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있습니다.

• 프로토타이핑 툴 : HTML/CSS, AXURE, INVISON, Flinto, FRAMER, UXPin, 네이버 프로토나우, 카카오 오븐 등.
• 애플워치 프로토타입 데모 : http://8gfcti.axshare.com/#c=2
• 그 외 프로토타입 데모 : http://bit.ly/1XyRB33

각 용어에 대해 정리가 되셨나요? 저 개인적으로는 약 5년 전부터 Axure 툴을 활용해 스토리보드와 프로토타입이 혼합된 형태의 설계 문서를 제작하고 있고 매우 만족하고 있습니다. 굳이 Axure가 아니더라도 다양한 프로토타이핑 툴이 있으니 화면 설계를 담당하는 기획자 또는 UX 디자이너라면 스토리보드와 더불어 프로토타이핑 스킬도 갖추기를 적극 권장합니다. 

---

📌  이 글은 벌써 4년도 넘은 글인데요. 

2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!

• [웹/앱 설계의 기본] 화면설계서 작성방법
• 프로덕트 매니저의 툴, UI 디자이너의 툴

저작자표시비영리변경금지

'IT 기획 > 서비스 기획' 카테고리의 다른 글

모바일 디바이스별 해상도 및 상세스펙 확인 방법  (3)	2016.03.21
기획자에게 꼭 필요한 산출물 모음 (웹만사 맥비님 자료 링크)  (14)	2016.03.07
[기획 팁] 회의 시간을 반으로 줄이는 기획 리뷰 노하우  (2)	2016.03.03
[기획 팁] 괜찮은 이메일은 모아두자!  (8)	2016.02.26
웹 서비스 구축 체크리스트  (6)	2016.02.21
[웹 기획] 화면 설계 용어 - 와이어프레임, 스토리보드, 프로토타입의 차이점  (5)	2016.01.06