서비스 기획 산출물 2탄. Wireframe에 대하여

들어가기 전, 이전 글에서는

이전 시간에는 서비스 기획 산출물 1탄에서 다루었던 내용은 IA이다. 

IA를 간략하게 이야기하자면, 서비스 구조의 뼈대 가이드라인이라고 할 수 있다는 것이다. 

그렇다면, 다들 말하는 wire frame 이란 무엇인가? 

 

Wireframe
와이어프레임
전체적인 윤곽을 그려내는 것

 

이라고 할 수 있다. 서비스 기획을 하려면 꼭 필요한 요소 중 하나이다. 앞서 말한 AI 같은 역할이다. 서비스의 윤곽이라는 말씀!

웹 페이지를 2차원으로 보여주면서, 페이지의 구조, 레이아웃, 플로우, 기능, 의도된 동작을 전체적으로 확인할 수 있다.

 

어렵다면 다음 내용을 참고해 보자. 예시를 들어보겠다. 다음 서비스는 동물병원 검색 앱을 착안해 와이어 프레임을 만들어봤다. 

 

멍멍 냥냥 아프지마 앱 서비스 

서비스의 와이어프레임

확인해봐야 할 사항 

1. 검색하기 위해서는 해당 검색 버튼을 클릭하고 들어가야 한다.

2. 그리고 검색을 했다면 지도에 병원이 잘 나타나는지 확인해야 한다 

3. 또 해당 병원을 선택했을 때, [예약] 버튼을 누르면 예약이 잘 되는지 까지를 와이어프레임을 만들다 보면 한눈에 알아볼 수 있다. 

 

해당 버튼을 클릭함으로써 다음 동작을 예상 가능하기 때문에 와이어 프레임을 그리며, 서비스의 설계 방향을 잡을 수 있다.

 

 

왜 필요한 것일까?

나도 항상 WHY 에 대한 질문을 일상생활과 모든 방면에서 하는 편이다. 하지만, 와이어프레임이 왜 필요한 것인가에 대한 근본적인 질문은 던져보지 못했다.

 

그냥 부트캠프에서 배운 내용과 교과서적인 표현으로는

"서비스를 설계하는 데 있어서 건물 설계도를 그리는 것이기 때문이다~"라고 배우지만 흐음 글쎄 나는 좀 더 실무적인 관점에서 질문을 해보기로 했다.

 

실무적 관점에 와이퍼 프레임 바라보기 

기획자로 업무를 진행하다보면, 화면 설계서를 작성하는 것은 필수이다. 그 기획안을 토대로 디자이너나 개발자가 참고하면 제품을 만들어낸다. 

 

거기서 발생하는 점이 있다. 전체적인 와이어 프레임 없이 화면 설계서를 아무 생각 없이 작성하다 보면, 꼭 디자이너나 개발자에게 메신저가 온다. 

기획안에서 궁금한 사항을 질문하는 디자이너

 

허걱! 와이어프레임 처럼 윤곽 없이 설계를 마음대로 하다 보면 놓치는 부분이 있을 수 있다. 이 예시로 빌어 우리가 놓치고 있었던 것은 [뒤로] 버튼 대해 어디로 이동할 것인가? 에 대한 생각을 엄두 하지 않은 것이다. 

 

이것은 전체적으로 와이어프레임에서 다음 인터렉션을 엄두 하지 않은 것, 즉 의도된 동작을 수행하지 않은 경우이다. 

 

나는 와이어프레임이 꼭 필요한 이유로서 이 내용 또한 중요하다고 생각한다. 

 

같이 일을 하는 협업자들과 유연한 커뮤니케이션을 이루려면 전체적인 것을 알고, 세세한 동작까지 엄두 해둬야 하기 때문이다. 

 

마무리, 글을 쓰며 우리가 가져야 하는 마음 

이렇게 예시를 들어 설명을 하다보니, 나도 와이어프레임의 중요성을 깨닫는 바이다. 잊지 말자 

우리는 서비스를 전체를 기획하는 사람으로써 내가 모르는 인터렉션이 있어선 안된다.

전체가 서비스를 만들고 방향을 조절 하는 키의 한 부분이다. 

그리고 모든 가정에 대한 케이스를 엄두 해야 하는 직무이라는 것을 더더욱 깨닫는 글이었다. 

 

 

이상, 서비스 기획 산출물 2탄 와이어프레임에대해 알아보았다. 다음에는 보다 더 좋은 글로 찾아보려 한다. 

 

 

 

 

 

 

 

 

서비스 기획 산출물 1탄 아래 보기 

 

https://pm-life-0.tistory.com/17

서비스 기획 산출물 1탄. IA에 대하여 (feat.지그재그)