용어 설명

건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 웹사이트 또는 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요합니다. 

IT 현장에서는 이를 화면 설계라 지칭하며 

- 와이어프레임, 

- 스토리보드, 

- 프로토타입

으로 구분

국내에서는 파워포인트로 제작한 스토리보드가 표준 설계 방법으로 사용되고 있지만, 

보다 원활한 커뮤니케이션을 위해 점차 다양한 툴로 확장되고 있음

o 와이어프레임(Wireframe)

- 와이어프레임은 화면 단위의 레이아웃을 설계하는 작업

. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며 

. UI, UX 설계에 집중

- 와이어프레임 툴 

. 손그림, 

 파워포인트, 

. 키노트, 

. 스케치, 

. 일러스트, 포토샵 등

o 스토리보드(Storyboard)

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

. 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 문서

. 현업에서는 해당 문서를 바탕으로 커뮤니케이션을 진행 

- 스토리보드 툴 

. 파워포인트, 

. 파워목업

. 키노트, 

. 스케치, 

. Axure 등

o 프로토타입(Prototype)

- 프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업

. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용함으로써 실제 구현된 것처럼 시물레이션 할 수 있으며, 

. 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행할 수 있음

. 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있음

- 프로토타이핑 툴 : 

. HTML/CSS, 

. AXURE, 

. INVISON, 

. Flinto, 

. FRAMER, 

. UXPin, 

. 네이버 프로토나우, 카카오 오븐 등.