Wireframe (와이어프레임)

사용자 경험의 기본이자 핵심이라고 할 수 있는 와이어프레임은 기초적인 골격을 통해 만들고자 하는 결과물이 어떤 모습을 할 것인지를 예상해 볼 수 있는 중요한 문서입니다.  

그렇다면 와이어프레임은 어떻게 작성해 나가는 것일까요?

와이어프레임은 일반적으로 제품이나 서비스의 모든 부분을 흑백으로 그린 개념도 혹은 그림으로 표현됩니다.

색상에 현혹되지 않고 기본적인 내용에 집중하기 위해서 흑백 (혹은 단색)으로 그려집니다. 

와이어프레임에서 보여줘야 하는 기본적인 내용은 아래와 같습니다.

1. 화면에 어떤 정보가 나타나야 하는가?

2. 어떤 레이아웃을 가져야 하는가?

3. 어떤 세부 모습이 나타나야 하는가?

4. 어느 부분과 이어지며 어디로 이어져야 하는가?

5. 네비게이션은 적절히 기능하는가?

종합적으로는 모든 정보와 세부사항이 어떻게 연결되는지와 정보 체계가 적절하게 선택, 이용되고 있는지 확인할 수 있어야 합니다. 

이를 설명하기 위해 그림에 다이어그램이나 자세한 설명, 주석들이 달리게 됩니다.

이러한 자세한 설명과 직관적인 레이아웃이 있기에 와이어프레임은 디자이너, 개발자, 기획자 등 프로젝트에 참가하는 대부분의 사람들을 이어주는 놀라운 가교 역할을 할 수 있습니다. 

잘 만들어진 와이어프레임이 있다면 개발자는 그 것만 가지고도 서비스를 구현할 수 있는 경우가 많습니다. 디자이너 역시 와이어프레임만 가지고도 UI 작업을 완료할 수 있습니다. 

협업이 강조되고 있는 현 시대에 모두의 의견을 경청하고 통합할 수 있는 중요한 문서입니다. 

와이어 프레임을 그릴때에는 UI디자인을 하는 것이 아니라는 것을 명심하여야 합니다. 위에 열거한 5가지 기본사항을 바탕으로 시나리오가 어떻게 진행되는지를 체크하는 것에 집중해야 합니다. 

예를 들어 비밀번호를 찾는 시나리오가 있다면 아래와 같이

 비밀번호 찾는 화면 → 비밀번호 변경링크 발송 → 이메일에서 링크를 클릭 → 변경화면 → 변경완료 → 완료 시 이동할 화면

을 연계해서 설계하는 것이 중요합니다. 

시나리오를 그려보며 불필요한 단계는 없는지, 혹은 누락된 단계가 없는지 확인이 필요합니다. 프로그램을 이용해 작성해도 좋지만, 손으로 그려서 표현하는 것도 괜찮은 방법입니다.

그럼 실제로 진행된 사례를 보면서 와이어프레임이 어떻게 작동하는 지 작성해보도록 하겠습니다.

간단한 구조의 회원가입에 대한 와이어프레임의 초안입니다. 

로그인 화면에서 회원가입으로 이동하여 인증메일을 받고 다시 로그인으로 돌아오는 전체 시나리오가 표시되어 있습니다. 

초안 작성 시 중요한 점은 우선 그리는 것 그리고 사용자의 사용 흐름을 상상할 수 있을 것입니다. 너무 많은 것을 고민하면 그리는 것이 어려워집니다. 

텍스트는 자리만 표시하고 대략적인 내용을 빠르게 그려 나갑니다. 그리는 도중에 더 나은 아이디어가 나오기도 하고 뒤늦게 잘 못 그렸다는 점을 알게 되어도 우선은 완성하는데 집중하도록 합니다. 

그리는 도중 알게 된 문제점은 그린 후에 다른 색상의 펜을 이용해서 메모를 해 두도록 합니다.

초안을 그리며 생각난 방안과 주변의 의견을 청취하여 개선 방안을 붉은색 펜으로 표시하였습니다.

 “이메일 찾기 없어도 되나?”, “소셜 로그인 빠짐”, “취소 버튼이 로그인으로 링크되는 것이 이상하다.” 등의 의견이 작성되었습니다. 

개선안이 충분히 작성되었다고 판단되면 해당 개선안이 반영된 와이어프레임을 작성합니다.

초안에 작성된 의견이 모두 반영된 개선안입니다. 

처음보다 많이 나아진 모습입니다. 하지만 아직 완벽하지는 않습니다. 

개선안부터는 본인 의견보다 팀원들에게 빠진 부분이 없는지 체크를 받는 것이 좋습니다. 의견을 받는 동시에 함께 개발할 내용에 대해 서로의 이해도를 높여 더 나은 개선안을 도출할 수 있습니다. 

의견교환이 원할 하지 않거나 팀원들이 비협조적일 경우 역할을 바꾸어 보는 것도 한가지 방법이 될 수 있습니다. 

와이어프레임 작성자는 본인도 모르게 본인이 만든 와이어프레임을 변호하게 될 가능성이 있습니다. 

이 때 역할을 바꾸어 팀원들이 와이어프레임을 옹호하고 작성자가 부족한 부분에 대해 비평적인 역할을 맡아 회의를 진행하게 되면 팀원들은 와이어프레임에 대한 이해도가 높아지고 작성자는 조금 더 입체적인 시각으로 의견 교환을 진행할 수 있습니다. 

이 회의 방법이 효과가 있고 조금 더 진지하게 다뤄보고 싶다면 에드워드 드 보노의“6가지 생각모자 기법”을 권장합니다. 

팀원들의 의견이 반영된 와이어 프레임 개선안입니다. 

빠진 부분에 대한 이야기는 없고 “문구가 좀 딱딱함”, “로그인 하러 가기라고 쓰는 것이 더 나을 듯”, “닉네임 받는 INPUT이 제일 위로 가는 것이 좋겠다” 등의 의견이 나오고 있습니다. 

이런 의견이 나온다는 것은 와이어 프레임이 거의 완성되었다는 것을 의미합니다. 

여기서 주의할 점은 문구에 너무 집착하지 말아야 한다는 것입니다. 와이어 프레임은 문구를 완성하기 위해 작성하는 문서가 아닙니다. 문구는 추후에 작성하는 것으로 미뤄두고 빠진 기능은 없는지, 개선할 부분은 없는지, 특히 사용자 흐름(이 화면 다음에 저 화면이 나오는 것)이 맞는지에 대한 검증에 집중하시기 바랍니다.

최종적으로 작성된 와이어 프레임의 모습입니다. 

이렇듯 와이어 프레임은 어떠한 형식이나 그림 그리는 능력이 필요한 것이 아닙니다. 

와이어 프레임 작성의 핵심은 사용자의 흐름에 불편함이 없는 지와 개발할 서비스에 대한 구상을 구체화하고 팀원 및 이해관계자의 오해를 줄이는 것에 있습니다. 

마지막으로 손으로 그린 와이어프레임을 모두가 보기 좋고 공유하기 쉽도록 전문 제작 툴(adobe XD)로 옮긴 예제를 보여드리며 와이어프레임 이야기를 마치도록 하겠습니다.

본 글을 통해 와이어 프레임을 작성하고 팀원과 공유하여 의견을 나누는 것이 개발 결과물, 특히 사용자가 느낄 사용성에 어떤 영향을 줄 수 있는지 확인해볼 수 있는 계기가 되었으면 좋겠습니다.