와이어 프레임(Wire frame) 쉽게 이야기하기

이미지 출처: MBC 무한도전 야유회편 이심전심

 

Q. 와이어 프레임을 왜 하나요?

 

 앞서 요구사항 정의서를 작성했었습니다. 요구사항 정의서를 통해서 우리 모두 한 가지 요구사항에 뜻을 같이 했다고 해봅시다. 그럼 사람들은 모두 같은 생각을 하고 있을까요?

그럴 수도 있겠지만 그러기는 쉽지 않습니다. '망고'라는 단어를 들었을 때 모두 과일 망고를 생각할 수도 있지만 통조림 망고를 생각하는 사람도 있을 테니까요. 이심전심이란 생각보다 쉽지 않은 것입니다.

그래도 추상적으로 이야기하는 것보다는 시각적으로 무언갈 보면서 이야기한다면 그 의견의 차이는 줄어들 것입니다. 그렇기에 SW에서도 와이어프레임을 진행합니다.

 

Q. 뭘 어떻게 해야 와이어 프레임인가요?

 

아주 간략하게 만든 와이어 프레임 - Figma

 

 

 와이어 프레임이란 말 그대로 선으로 틀을 잡는다 라는 의미를 가지고 있습니다. 대략적인 위치와 틀을 잡는 거죠.

이전 요구사항 정의서에서 그냥 백지상태였다면 와이어 프레임에서는 상단에 큰 메뉴가 들어가고 중간에 중요 내용 우측에 이미지를 넣는다 라는 정도로만 표시해둔 상태입니다. 너무 상세하게 할 필요는 없고 대략적인 위치만 잡으면 된다고 생각하시면 됩니다. 종이에 손으로 그려서 표시하시는 것 역시 무방합니다.

 

Q. 와이어 프레임을 통해서 최종 산출물을 정하는 과정이니 신중하게 해야 하나요?

 

 와이어 프레임은 최종 산출물과 다른 결과가 될 수도 있습니다. 그러니 최종 산출물을 만드는 것처럼 너무 힘을 쓰지 않으셔도 됩니다. 원활한 의사소통을 위해서 작업한다 정도로 접근하는 게 좋습니다.

 

Q. 그래도 기왕 작업하는 거 제대로 하는 게 좋지 않을까요?

 

 와이어프레임에 디자인까지 모두 입혀서 작업을 하게 된다면 시간이 너무 많이 소요될뿐더러 이것은 더 이상 와이어프레임이라고 부르기가 힘듭니다. 그리고 추후 새로 디자인 작업을 할 때 디자인이 혼선이 생기는 등의 문제가 발생할 수도 있습니다.