와이어프레임, 프로토타입(feat. 에브리타임)
[코드스테이츠 PMB 8기 W4D4]
안녕하세요,
UX 디자이너를 꿈꾸는 도현입니다!
이번에는 UX/UI에 관심 있는 분이라면 한 번쯤 들어보셨을 법한 와이어프레임과 프로토타입을 주제로 포스팅을 해보려 합니다.
UX의 기본, 와이어프레임과 프로토타입이란?
출처) Adobe Blog와이어프레임(Wireframe)은 실제 GUI 디자인이 입혀지기 전, 페이지의 골격을 확인하기 위해 만드는 기획 산출물입니다. 만들고자 하는 서비스의 기능 및 화면의 초안은 PM 또는 기획 제안자가 그려야 커뮤니케이션이 수월하고, 텍스트로 전달될 시 커뮤니케이션의 오류와 불필요한 커뮤니케이션 비용이 발생하는 것을 방지하기 위해 와이어프레임이 활용됩니다. 와이어프레임을 통해 앱의 전체 서비스를 명확하게 예측할 수 있도록 돕고 팀 구성원에게 개발하려는 앱이 어떻게 동작하고 어떻게 상호작용하는지 예측하게 합니다. 또한 개발할 서비스에 대한 구상을 구체화할 수 있습니다.
프로토타입(Prototype)은, 개발자가 실제로 코딩하기 전, 각 이해관계자들이 함께 보며 정보들이 어디에 위치해야 하는지를 이해하고 합의하기 위한 것으로, UI를 빠르게 디자인하여, 개발 이전에 모의 테스트를 할 수 있도록 하는 기법입니다. 프로토타이핑은 크게 두 가지 경우에 주로 활용됩니다. 첫 번째, 사용자 중심 디자인 프로세스의 첫 단계에서 디자이너, 개발자, 유저, 다른 이해관계자가 서로 아이디어를 소통하기 위해. 두 번째, UI가 디자인되고 개발되기 전, 제품과 유저 사이의 상호작용을 관찰하기 위한 사용성 테스트를 위함입니다. 프로토타입은 구현 수준에 따라 Lo-Fi Prototype(Low Fidelity Prototype), Mid-Fi Prototype(Middle Fidelity Prototype), Hi-Fi Prototype (High Fidelity Prototype)으로 나뉩니다.
Lo-Fi Prototype (출처 uxdesign.cc)Lo-Fi Prototype은 핸드 스케치와 같이 실제 출시될 서비스와 거리가 먼 초기 단계의 프로토타입입니다. 이 방법은 시간 및 리소스가 절약되고, 복잡한 수정 절차가 없기 때문에 새로운 의견을 바로 적용하는 것이 가능합니다. 따라서, 아이디어 회의와 같은 기획 단계에서 자주 작성합니다. 그러나 팀 간 소통을 위한 정식 업무 산출물은 아니고, 유용한 임시방편 정도로 생각해주시면 좋습니다.
Mid-Fi Prototype (출처 Figma)Mid-Fi Prototype은 주로 피그마, PPT와 같은 디자인 툴을 이용해서 만듭니다. 위에서 설명한 와이어프레임이 여기에 해당되는데요, 이 Mid-Fi Prototype은 PM이나 서비스 기획자가 가장 많이 만드는 산출물 중 하나입니다. Lo-Fi 프로토타입에서 발전해, 레이아웃을 맞추고 기능 배치와 영역, 글자 포인트, 이미지 위치 등을 실제 산출물에 조금 더 가깝게 조정합니다. 서비스 기획자의 경우, 여기서 디스크립션이라는 설명을 추가해 스토리보드, 화면 설계서라는 최종 산출물을 만들기도 합니다.
Hi-Fi Prototype (출처 Figma)Hi-Fi Prototype은 디자인과 인터랙션을 가미해, 실제 개발될 완성본에 가깝게 만드는 산출물입니다. 높은 그래픽 수준을 요구하기 때문에 PM이 직접 만드는 경우는 드뭅니다.
대학생 필수 애플리케이션, 에브리타임
대학 생활을 더 편하고 즐겁게, 에브리타임
출처) 에브리타임에브리타임은 대학교 커뮤니티 서비스로, 시간표 서비스, 시간표 작성 및 학업 관리, 학교 생활 정보, 학교별 익명 커뮤니티 기능을 제공합니다. 전국 400개 대학을 지원하는 에브리타임은 대학생 어플 다운로드 1위를 유지하고 있는데요, 편리한 학업 관리가 가능하고 유용한 학교 생활 정보를 접할 수 있으며, 같은 캠퍼스의 학생들과 소통하는 커뮤니티를 이용할 수 있어 많은 대학생들이 사용하고 있습니다.
에브리타임의 유저가 수행하길 원하는 Task는?
제 주변 대학생 친구들을 살펴보면, 에브리타임에서 주로 2가지 기능을 사용합니다. 첫 번째는 에브리타임의 시간표 기능, 두 번째는 익명 커뮤니티 기능입니다. 시간표 기능은 학교마다 다르겠지만, 저의 모교의 경우 학교 홈페이지에서 시간표를 짜기엔 불편한 UX를 가지고 있어 저 역시 에브리타임을 통해 담은 인원을 확인할 수 있고 편하게 시간표를 짤 수 있어 수강신청 전에 항상 애용했던 기능입니다. 커뮤니티의 기능은 학교생활에서 궁금한 게 있는데 물어볼 데가 마땅치 않다던지, 일반 커뮤니티들처럼 자신의 이야기를 익명으로 한다던지 소통의 창구가 필요할 때 같은 학교라는 울타리 안에서 자유롭게 소통을 할 수 있게 합니다.
즉, 에브리타임은 기존 대학교 내에 따로 소통창구가 없어 불편을 겪었던 대학생들에게 '오직 같은 학교 학생들만이 소통할 수 있는 커뮤니티'라는 Task를 통해 불편사항을 해결해주고 있습니다. 원래는 페이스북의 'ㅇㅇ대 대나무 숲'을 이용해 학생들끼리 소통했었는데, 페이스북을 하지 않는 사람들도 있고 페이스북과는 다르게 완전히 익명이기에 자신의 의견을 편하게 표출할 수 있다는 점이 에브리타임이 하나의 커뮤니티로 자리 잡을 수 있는 계기가 되었습니다.
Task에 대한 User Story는 무엇일까요?
출처) https://yozm.wishket.com/User Story란 사용자의 요구사항을 정의하고 그것을 관리해나가는 방법으로, '고객은 / 목적을 위해서 / 필요한 가치를 원한다'로 작성될 수 있습니다. 유저 스토리를 통해 고객이 문제나 요구사항을 가지게 된 맥락을 유저 입장에서 이해할 수 있고, 이를 기획자의 주관이 아닌 객관적으로 바라볼 수 있습니다. 그렇다면 에브리타임의 User Story는 무엇일까요? 그리고 이와 같은 니즈를 해결하기 위해, 필요한 핵심기능은 무엇일까요?
대학생들은 학교생활에 관련한 궁금한 점이나 교내 이슈 등을 공유하는 등의
목적을 위해 같은 학교 학생들만의 커뮤니티를 원한다.
Lo-Fi 프로토타입을 그려봅시다!
에브리타임 Lo-Fi 프로토타입유저 스토리로 작성한 유저의 요구사항을 해결하기 위해서 에브리타임에서는 게시판 기능을 제공합니다. 핸드 스케치를 통해 에브리타임의 Flow를 간단하게 표현해보았습니다. 에브리타임은 교내 게시판이라는 콘셉트로 홈 화면에서 원하는 게시판을 터치하여 진입할 수 있습니다. 유저는 게시판 내의 원하는 게시물을 확인하고 댓글, 스크랩 등을 통해 학우들과 소통하며 궁금한 점을 해결하거나 교내 이슈를 공유할 수 있습니다.
Figma로 Mid-Fi 프로토타입을 구현해보기
에브리타임 화면 캡처 및 Mid-Fi PrototypeFigma를 이용해 에브리타임의 홈 화면과 게시판 화면의 Mid-Fi 프로토타입을 그려보았습니다. Figma를 사용하면 실시간으로 협업이 가능하며 공유 작업 환경이 매우 좋아 팀원들과 함께 작업하기에 가장 편리한 프로토타이핑 툴입니다. 자동으로 저장이 되며 브라우저 기반의 프로그램으로 설치를 하지 않아도 사용이 가능합니다. 무엇보다 무료로 사용할 수 있다는 점이 제일 장점입니다! 요즘 Figma를 사용하는 기업이 많아지면서 UX 디자이너가 아니더라도, PM이라면 시각화된 자료로 소통을 하기 위해 Figma는 꼭 한 번 다뤄보시길 추천드립니다!
