[4주 프로젝트] 2. 와이어프레임 작성

 

 

프로젝트 아이디어를 선정한 후, 웹어플리케이션의 전체적인 레이아웃과 기능들을 팀원들과 논의하기위해

와이어프레임을 작성하였다.

와이어프레임 작성 툴 중, 우리팀은 figma를 이용하였다.

https://www.figma.com/

Figma: the collaborative interface design tool.

 

처음에는 와이어프레임 / 프로토타입 개념을 혼동하였다.

실제 실무에서는 두 개념을 같이 사용한다고 하지만, 그래도 정확하게 아는게 좋을 것 같아 찾아보았다.

나같은 사람이 있을 수도 있으니 간단하게 정리하도록 하겠다.

 

- 와이어프레임(Wire Frame)이란?

선(Wire)으로 틀(Frame)을 잡는다는 뜻. 

웹 사이트의 레이아웃을 간단한 모양만을 사용하여 시각적으로 묘사한 것.

구조, 콘텐츠, 기능을 설명하는데 사용되고 대부분의 디자인 요소가 포함되기 전 상태이다. 

 

- 프로토타입(Prototype)이란?

와이어프레임과 달리 실제 서비스와 비슷하게 구현된 상태. 

 

백문이 불여일견이다.

실제 우리팀에서 작성한 와이어프레임과 프로토타입을 예로 들어보겠다.

 

먼저, 아래 그림은 우리 웹서비스인 '아팡'의 메인 페이지 와이어프레임이다.

대략적인 레이아웃을 정하고 간단한 내용 정도만 작성하였다.

디자인적 요소는 거의 찾아볼 수 없다.

 

 

 

아래 그림은 위의 와이어프레임을 바탕으로 만든 프로토타입이다.

프로토타입 작성 툴 중, 우리는 miro를 이용하였다.

우리 웹사이트 대표컬러, 로고, 메인 페이지에 들어갈 그림 등을 넣었고, 실제 우리 웹사이트와 거의 흡사하다.

(프로토타입은 다음에 다시 한번 자세하게 적도록 하겠다!)

 

 

와이어프레임을 작성하면서 기본적으로 웹사이트에 넣을 기능, 필요한 페이지, 대략적인 레이아웃 등을 팀원들과 논의하였다.

 

4주 프로젝트이다보니 어느정도의 규모로 웹사이트를 만들어야 하는지 정확하게 감이 오지 않았고,

비록 프로젝트지만 실제 출시한다고 생각하고 회의를 하다보니 생각보다 고려해야할 사항들이 꽤 많았다.

 

예를 들면, QnA답변을 의사만 할 수있는데 의사라는걸 어떻게 증명할 수 있는지,

의사라는걸 증명하기 위해 의사면허번호를 받게되면 실제 유효한 번호인지 확인할 수 있는지,

비로그인시 어디까지 정보를 열람할 수 있는지 등.

 

그래서 생각보다 와이어프레임을 짜는데 많은 시간이 들었다. 

조금은 힘들더라도 이렇게 대략적인 레이아웃을 만들어 시각적으로 표현하니 훨씬 감이 생기고 신이 났다.

 

아, 신난다!

열심히 해서 멋진 웹어플리케이션 만들어보자!