오늘 읽은 아티클
궁금했어요. 와이어프레임이 뭐죠?
pm/po JD를 보면 UX를 잘 다루는 인재를 찾는 것을 많이 보았다. 그 특징으로는 figma, Sketch 등의 디자인 툴을 사용한 와이어 프레임 작성 경험을 물어본다.
내가 해본 화면 설계는 와이어 프레임이라고 할 수 있는가?가 궁금해서 정리해본다.
와이어 프레임(Wireframe)❓
디자인적인 요소를 최대한 배제하고 주요 화면의 기초적인 레이아웃과 UI요소만을 배치해보는 문서로서 디자인의 중요한 단계로 자리 잡았다.
이 부분에서 스토리보드와 무슨 차이가 있을까? 하는 생각이 들었다. 해당 아티클에서 자세히 설명해주었다.
내가 아는 스토리보드와 큰 차이는 없었지만, 아티클에서 설명하는 스토리보드는 영화, 광고 등의 영상분야에서 쓰이던 용어므로 "동적"인 문서의 형태를 말한다.
왜 와이어 프레임을 작성할까❓
와이어 프레임은 주로 여러 작업자들이 협력하여 하나의 결과물을 만들어내야 하거나 장기적으로 진행되는 큰 프로젝트에서 활용한다.
프로젝트를 수행하게 될 작업자(개발자, 디자이너 등)들은 목표가 되는 서비스나 시스템을 잘 알지 못하는 것이 일반적이다. 상위 기획(비즈니스 모델, 서비스 컨셉이나 정책 등)이 완료된 상태라 하더라도, 이들 문서는 대체로 추상적이어서 문서를 읽는 사람 마다 다르게 읽힐 수 있다.
와이어프레임은 상위 기획이나 사전 교섭 시의 이슈들을 '시각적'으로 정리하여 고객과의 커뮤니케이션을 보다 섬세하고 정확하게 진행할 수 있는 자료가 된다.
또한, 메이커들에게는 굵직한 기능과 플로우를 되도록 빠른 시기에, 되도록 직관적인 방법으로 공유하여 각 작업자가 자신의 자리에서 필요한 정보들을 수집할 수 있도록 가이드라인이 되어줄 수 있다.
가장 큰 장점으로는 기술적인 내용을 모두 제외하고, 최대한 빠르게 결과물을 만들어 작업자, 클라이언트 간 커뮤니케이션에 활용할 수 있는 "초기 비주얼"을 제공한다는 점이다.
잘 만들어진 와이어프레임이 있다면 개발자는 그것만을 가지고도 구현할 수 있는 경우가 많다. 디자이너도 마찬가지로 해당 문서만을 가지고도 UI 작업을 완료할 수 있다.
✳️ 협업에서 의견을 종합할 수 있는 아주 중요한 문서 ✳️
와이어프레임에서 보여줘야 하는 내용은 무엇일까❓
- 화면에 어떤 정보가 나타나야 하는가?
- 어떤 레이아웃을 가져야 하는가?
- 어떤 디테일이 나타나야 하는가?
- 이어지는 액션이 나타나는가? (사용자의 사용 흐름이 상상되는가?)
- 네비게이션은 적절히 기능하는가?
정리
개발자로 일할때는 화면 설계 문서를 직접 작성하여 산출물로 만든적이 많았다. PM으로서도 마찬가지로 화면 설계 문서를 만든 경험만 있다고 생각했다.
지금 생각해보니, 회의할 때 나의 의견을 설득시키기 위해 화이트보드에 그려서 나의 의도를 설명한 적은 생각보다 많은 것 같다. (이게 아마 와이어프레임이지 않았나 생각이 듬)
