기획 산출물 #4 와이어프레임
그래서 너(내)가 생각하는 그림은 뭔데?
서비스를 구상하다 보면 아무리 설명하고, 아무리 글로 잘 정리해두어도 상대방이 이해를 하지 못하는 경우가 반드시 발생한다. 내 머릿속에는 아름답고, 직관적인 서비스가 이미 그려져 있지만 상대방 머릿속에는 이 완벽한 모습이 그려지지 않는다는 것이 안타까울 따름이다. 사실 알고 있다. 너무나도 당연하게 상대방은 내 상상 속에 구현된 이 서비스를 직접 보기 전엔 상상하기 어렵다는 것을. 그래서 필요하다. 내 머릿속에 존재하던 그림을 와이어프레임이라는 형태로 만들어서 보여주어야 한다.
이번 글은 와이어프레임에 대한 내용이다.
1. 와이어프레임이란 무엇인가?
2. 어떻게 와이어프레임을 작성하면 되는 걸까?
3. 와이어프레임을 빠르고 편리하게 만들어주는 도구
와이어프레임이란 무엇인가?
와이어프레임은 기획자가 생각하는 서비스의 모습을 간략하게 그려 넣은 것을 의미한다. 최근에는 많은 모바일 서비스가 생겨나고, 이에 따라 UI표준화가 많이 이루어지게 되었는데 이에 따라 각종 툴이 활성화되어 와이어프레임이 간단한 형태보다는 좀 더 완성도 높은 형태로 제작할 수 있게끔 되었다. 이전에 기획 산출물에서 화면 설계서에 대해 설명한 적이 있었는데, 와이어프레임은 화면 설계서에서 이미지를 넣는 영역에 해당한다. 아래와 같이 와이어프레임에 설명을 덧붙이면 하나의 화면 설계서가 된다. 그리고 이를 토대로 디자이너와 개발자가 기획자가 의도한 바대로 결과물을 만들어내는 것이다.
어떻게 와이어프레임을 작성하면 되는 걸까?
최근에는 와이어프레임을 손쉽게 만들 수 있도록 도와주는 도구들이 많이 생겨서 쉽고 빠르게 작성할 수 있다. 다만, 와이어프레임을 그릴 때 처음부터 완성도 높게 만들려는 노력은 하지 않았으면 하는 바람이다. 와이어프레임을 처음 만들 때부터 고도화해서 만들게 되면 더 발전되지 않는 모습을 보여주는 경우가 많다. 즉, 부족한 부분이 많은 화면임에도 불구하고, 그 완성도에 갇혀 더 이상 발전시키지 않는 형태가 되어버리는 것이다. 그래서 처음 그리는 와이어프레임은 날 것 그대로가 좋다. 이를테면 손으로 그리는 핸드 스케치부터 시작하는 것이다. 이를 LFW(Low Fidelity Wireframe) 또는 Lo-FI Wireframe이라고 부른다.
1. Low Fidelity Wireframe
LFW로 와이어프레임을 시작하면 크게 두 가지 이점이 있다. 시간 및 자원 절약, 아이디어 확장이다. 펜과 노트만 있으면 바로바로 작성할 수 있기 때문에 시공간의 제약 없이 작성이 가능하다. 그리고 복잡하게 수정할 필요가 없기 때문에 수정사항이 발생하거나 새로운 의견이 등장하면 바로 반영하는 것도 가능하다. 이 두 가지 이점 때문에라도 반드시 LFW를 작성하는 것을 추천한다.
LFW로 아이디어를 그려내었다면 다음은 이 아이디어를 보기 좋게 다듬는 작업이 남았다. 이제 컴퓨터에 존재하는 각종 툴들을 이용해서 손으로 그려 넣은 화면들을 보기 좋고 깔끔하고 일관성 있게 바꿔보자.
2. Mid Fidelity Wireframe
Mid Fidelity Wireframe은 조금 보기 좋게 다듬는 수준이라고 보면 된다. 아무렇게나 그려 넣은 LFW에서 레이아웃을 맞추고, 영역 및 글자 포인트, 이미지 위치 등을 조정하는 작업이다.
3. High Fidelity Wireframe
High Fidelity Wireframe은 완성본에 가깝게 그려내는 것이다. 사실상 목업에 가까운 이미지인데, 보통은 HFW까지는 잘 만들지 않긴 하다. 물론, 상급자에게 보고하는 경우 간혹 만들기는 하나 만드는 걸 선호하지는 않는다. (만드는데 시간도 많이 소요될뿐더러, 디자이너가 훨씬 이쁘고, 아름답고, 직관적이게 보이게끔 만들어주기 때문이다. 내가 아무리 열심히 3~4시간 소요해서 만들어도 디자이너가 1시간 동안 작업한 것보다 못한 경우가 많다...)
High Fideliy Wireframe 예시와이어프레임을 빠르고 편리하게 만들어주는 도구
1. 카카오 Oven : https://ovenapp.io
카카오에서 만든 Oven이라는 툴은 웹에서 간편하게 앱의 와이어프레임을 그릴 수 있도록 하는 도구이다. 심지어 무료이며 팀원을 초대하여 공동작업이 가능하다. 또한 다른 스케치 툴과는 다르게 기본적인 컴포넌트들을 제공하며 드래그 앤 드롭으로 그저 끌어다 놓기만 하면 배치가 되기 때문에 익히기에도 별 무리가 없다.
2. Adobe XD : https://www.adobe.com/kr/products/xd.html
Adobe사에서 만든 Adobe XD는 무료로 사용이 가능하다. 윈도우와 맥 환경에서 모두 사용할 수 있다. 플러그인을 다운로드하면 기본적인 UI/UX Kit를 통해 좀 더 완성도 높은 와이어프레임을 제작할 수 있다. 또한 Adobe를 이용하는 팀원들 간 공동작업이 가능하며, XD앱을 통해 프로토타이핑을 진행할 수 있는 장점도 있다. 카카오 Oven에 비해서 좀 더 자유도 높게, 완성도 높게 와이어프레임을 제작하고 싶다면 추천하는 도구이다. 사용 방법도 매우 간단하여 익히기에 별 무리가 없다.
3. Sketch : https://www.sketch.com/
맥 환경에서 작업을 한다면 스케치만 한 툴도 없다. 더욱이 제플린과의 연동이 손쉬워 디자이너들이 많이 쓰는 도구이기에 디자이너들과 함께 작업을 하려면 스케치를 쓰는 걸 추천한다. 스케치 역시 Adobe XD와 유사하게 플러그인을 다운로드하여 완성도 높은 와이어프레임을 제작할 수 있다. 또한 iOS에서 스케치 앱을 다운로드하면 프로토타이핑을 모바일로도 진행해볼 수 있다는 장점이 있다. 개인적으로 처음 익히는 난이도는 카카오 Oven이나 Adobe XD에 비해서 조금 높긴 하나 적응하지 못할 정도는 아니다.
정리
오늘은 와이어프레임에 대한 내용을 적어보았다. 기획자가 와이어프레임을 완벽하게 구현할 필요까지는 없지만, 본인이 생각한 걸 다른 사람에게 보여주기 위해서 반드시 작성해야 하는 것임에는 틀림없다. 그리고 와이어프레임을 작성할 때 너무 공을 들여 오와 열을 맞춰가며 화면을 그려내기보단 빠르고, 알아보기 쉽게만 그려 넣으면 된다는 점을 잊지 말아야 한다. 간혹, 너무 완벽하게 그려내려고 신경 쓰곤 하는데 결과적으로 시간은 시간대로 사용하고 디자이너의 창의성이 묻히는 자원낭비가 발생하기도 한다. 물론 팀마다 회사마다 와이어프레임의 수준을 요구하는 정도는 조금씩 다르기 때문에 각각의 상황에 맞게 그려내면 된다.
