웹/앱 개발에서의 와이어프레임, 스토리보드, 목업, 프로토타입

인사말

안녕하세요. 뭐맘입니다 :)

목업파일을 쭉 나눔 하다 보니 정보성 나눔이 너무 부족한 것 같다는 생각이 들어 오늘은 저의 경험을 토대로 정보를 나누고자 합니다. 

여태 제가 합성하는 목업 파일만 올려서 그런 실물 목업만 떠올리시는 분이 많으실 텐데요.

목업은 정말 다양한 분야에서 쓰이는 용어이고 특히 웹/앱 개발에서도 자주 쓰입니다.

 

 

웹/앱 개발

웹/앱 개발은 회사마다 진행방식이 조금씩 다르겠지만 크게 자주 쓰이는 용어 네 가지가 있습니다.

바로 와이어프레임, 스토리보드, 목업, 프로토타입입니다.

와이어프레임, 스토리보드, 목업, 프로토타입은 모두 사용자 인터페이스 디자인과 웹/앱 개발 과정에서 중요한 단계를 나타내는데요. 하나씩 설명드리도록 하겠습니다.

 

와이어프레임(Wireframe)

wire는 철사라는 뜻이죠? 제품의 구조적인 설계를 나타내는 기본적인 레이아웃을 '와이어프레임'이라고 지칭합니다.

주로 간단한 박스, 선 등을 사용하여 페이지의 기본 구조와 콘텐츠 배치를 보여주는데 디자인 극 초기 단계에서 사용되며,

기능과 구조에만 초점을 맞춰 간단히 제작하는 게 특징입니다. 색상, 그래픽이나 실제 콘텐츠는 전혀 포함하지 않는 기본 틀이라고 생각하시면 됩니다.

 

 

스토리보드(Storyboard)

스토리보드는 사용자의 여정을 시각적으로 나타낸 문서입니다. 말로 풀이하면 어려운 것 같지만 제품에서 겪게 될 다양한 상황이나 인터랙션을 순서대로 나열한 것입니다. 이 화면에 로그인이 있고 여기서 이 버튼을 누르면 어디로 가며 고객은 여기서 이러한 정보를 얻게 되고 등등을 표현하는 것입니다. 일종의 시나리오라고 생각하시면 쉽습니다.

목업(Mockup)

제가 주 콘텐츠로 다루는 목업입니다. 목업은 와이어프레임보다 정교하고 디테일한 디자인 단계입니다. 실제 제품과 유사하게 디자인하게 되는데 색상, 타이포그래피, 아이콘 등을 포함한 예시 화면입니다. 와이어프레임이 구조를 보여주는 단계라면 목업에서는 디자인 즉 시각적인 측면을 중점적으로 보여줍니다. 클라이언트나 이해관계자에게 디자인을 보여주며 시각적으로 전달하고 회의하거나 설득하기에 유용합니다. 단 동작은 구현하지 않습니다.

 

프로토타입(Prototype)

프로토타입은 실제 제품에 가까운 인터랙티브 모델입니다. 사용자가 실제로 인터페이스와 상호작용할 수 있도록 만들어진 버전으로 클릭, 스크롤, 전환 등의 간단한 기능을 포함합니다. 최종 직전 단계로 목업+동작이라고 생각하시면 됩니다.

제품 출시 전 제품의 기능, 디자인, 사용자 경험을 테스트하고 평가하는데 주로 사용됩니다.

 

마치며

웹/앱 개발에서 이 네 가지 요소는 모두 사용자 경험(UX) 디자인의 중요한 부분입니다. 회사에 따라 생략하거나 조금 다르게 바꿔 부르기도 하지만 전체적은 흐름은 유사합니다. 이런 일련의 단계들을 거쳐야 제작자들끼리의 소통이 원활하게 이루어지고 이는 곧 제품의 완성도를 높입니다. 

 

다음에도 목업과 관련된 이미지, 파일, 제작방법, 이론 등 다양한 내용을 갖고 오겠습니다. 

감사합니다.