Figma를 활용해 Wireframe 만들어 보기
독서와 얼마나 친하신가요?
2020년 코로나로 인하여 바깥 생활이 제한이 되고 비대면으로 학교를 다니면서
바쁜 일상에서 잠시 멈춰 개인 시간으로 잠시의 여유를 즐길때 책을 많이 읽었던 것 같은데요 📚
이때 밀리의 서재도 몇개월 구독하고 보았지만 저는 유독 종이책으로 읽는 책이 집중이 잘되는것 같아요..
그래도 한권의 책을 살 비용으로 밀리의 서재를 구독하면 다양한 책들을 읽을 수 있는 점이 큰 장점이라 종종 구독하여 사용하고 있습니다.
들어가기 전..
간단하게 밀리의 서재에 대해 알아보면, 밀리의 서재는 국내 최대 독서 플랫폼으로 쉽게는 전자책 정기구독 서비스 앱이라고 생각하시면 되는데요. 밀리의 서재는 2018년에 2만5000권이던 콘텐츠 규모를 최근 10만 권까지 4배 가량 확장 및 2017년 사업 시작 당시 1억 원이던 매출은 지난해 기준 192억 원으로 약 200배 성장하는 놀라운 실적을 보여주었습니다. 이외에도 기록적인 실적들과 무궁무진한 가능성을 보여주고 있는 밀리의 서재를 Figma를 활용해 Wireframe 만들어보고 밀리의 서재에 대해서 분석하는 시간을 가져보도록 하겠습니다.
1. User Story
🤔 사용자의 어떤 문제를 해결하는지 정의하고 이에 대한 User Story를 작성해 봅니다.
제품이나 서비스를 만들때, 고객의 니즈에 대해 끊임없이 생각하고 고민하는데요, 이미 이전 과제들을 통해서도 고객의 중요성을 많이 언급했듯이, 고객의 니즈는 중요합니다. 하지만 서비스를 만드는 과정에서 고객의 니즈를 놓치는 부분도 많이 있지만 유저 스토리 작성한다면 모든 서비스를 만들어나가는 분들이 모두 고객의 니즈를 반영 및 달성할 수 있도록 고객을 계속 생각할 수 있도록 도와줍니다.
User Story의 중요성을 알아보았다면, 밀리의 서재의 User Story를 유저스토리 형식에 맞게 기술해보도록 하겠습니다.
독서 습관을 가지고 싶지만 어려워하는 사용자(유저)는
독서 루틴을 만들기 위해서(목적)
습관을 길러주기 위한 여러 기능과 다양한 콘텐츠를 제공하는 앱을 원합니다. (필요)
2. Wireframe
🤔 Figma 를 통해 위에서 구성한 화면의 Wireframe을 디자인해보겠습니다 최대한 High-Fi 로 👍
독서의 습관을 만들어주기 위해서 밀리의 서재는 여러 기능과 다양한 콘텐츠를 제공하고 있는데요. 이를 살펴보면
독서 루틴 알림 만들기, 1일 1밀리, 독서 통계, 독서 습관 영상, 오디오북, 챗북 등이 있습니다.
그 중에서 오디오북으로 부담 없이 가볍게 독서를 즐길 수 있게 도와주는 기능이 매력적으로 느껴졌기에
오디오북 기능을 와이어프레임으로 디자인해보도록 하겠습니다.
Figma 를 통해서 오디오북을 들을 수 있는 흐름 화면을 화이어프레임으로 그려보았습니다.
Figma의 활용도는 이미 높다는 것을 알고 있었지만 제대로 사용하는 것은 처음인데요..
낯설기도 하고 어렵기도 하였지만 하나씩 해나가보았습니다!
아래는 해당 책에 대해서 상세페이지 내용인데 참고하시면 좋을 것 같습니다. (사실 시간이 없어 아래의 화면도 와이어프레임을 그려보고 싶었는데 다음기회에...☘️)
3. 스토리보드
🤔 Mid-Fi로 작성했다면, 디스크립션을 추가해서 스토리보드를 작성합니다.
위에 작성한 와이어프레임을 기반으로 디스크립션을 추가해 스토리보드를 작성해보았는데요.
오늘 올려주신 자료를 통해서 개발자가 스토리보드를 통해서 개발이 가능하도록 해야하는데
제가 작성한 스토리보드는 너무 간단한것 같아요..
정말 여기서 ,,,, 저의 한계를 느꼈는데
좋은 의미로는 제가 더 깊게 공부해야하는 부분을 알게된거겠죠!!?!?
(다음기회,, 곧 다시 보충하도록 하겠습니다. )
4. UX 라이팅
🤔 UX 라이팅을 직접 작성한다고 생각하고 서비스를 더 좋게 만들어 봅시다
UX 라이팅은 사용자의 행동을 가이드하고 동기를 부여해 행동을 이끌어내는 문구를 작성하는 일입니다.
마이크로카피 즉 UX 라이팅의 목적은 무엇일까요?
1) 사용자의 행동을 유도(동기 부여, 전환율 증대)하거나 가이드 제공
2) 브랜딩 및 차별성 강화
3) 사용자 행동에 따르는 문제를 미리 방지하며, 긍정적인 사용자 경험을 제공
3가지의 목적을 설명드릴 수 있습니다. 이제 감이 조금 잡히시나요?
그렇다면 여러분들 실제 밀리의 서재 화면과 와이어프레임를 비교했을때 다른 부분을 찾으셨나요?
찾으셨다면 박수를 👏🏻👏🏻 눈썰미가 좋으신데요?
총 2가지를 변경해보았습니다.
1) NOW → 책방
2) 오디오북 열기 → 오디오북 듣기
사실 이미 밀리의 서재는 사용자가 서비스를 이해하고 행동을 이끌어낼 수 있도록, 사용자입장에서 이해하기 쉬운 문구를 제공하고 있는데요.
그래서 어떤 부분을 더 좋게 변경해볼까라는 고민을 많이 했던 것 같습니다.
고민 끝에 변경한 앞서 2가지 내용!!
이유를 설명드리면,
✔️ NOW → 책방
NOW 메인?첫화면에서는 다양한 콘텐츠를 활용하여 책을 소개하고 독서 습관 도와줄 수 있는 내용들이 많이 들어있었는데요. 즉 통일성이 있는 내용들로 구성되어 있는 것이 아니라 다채로운 콘텐츠 및 책이 담겨있는 페이지 였습니다.
이를 반영하여 NOW 지금? 현재라고 해석하고 사용자가 이 페이지를 이해하기 다소 어렵다고 생각하여 책과 사람이 만나는 장소라는 의미의 책방이라는 단어로 변경하여 친밀감과 해당 페이지의 목적을 이해하기 쉬도록 하였습니다.
✔️ 오디오북 열기 → 오디오북 듣기
오디오북은 테이프, CD, MP3 등의 형태로 제작된 `귀로 듣는 책'입니다. 즉 오디오북 열기를 통해서 책을 여는 듯한 의미 보다는 오디오북 듣기를 통해서 특정행동을 듣다로 유도할 수 있도록 하면 어떨까? 라는 생각에 변경해보았습니다.
갑분끝..
이렇게 오늘 과제를 수행해보았는데요.
읽으신다고 수고많으셨습니다.
오늘 유독 첫주가 한가해요라고 하셨던 말이 실감이 확되네요...
하루가 24시간이 아니라 48시간이면 좋겠네용//
하루만에 작성하기에는 조금 힘든 과제였지만 이를 기반으로 부족한 부분을 돌아보고
이후 진행하는 와이어프레임, 스토리보드는 이것보다 더 낫은 결과물이길 바라며
글을 마무리 해보겠습니다.
| 출처
https://brunch.co.kr/@ohmung/33
01. 밀리의 서재
취준생의 PM 준비하기 | 나는 언제, 그리고 왜 '밀리의 서재'를 이용했나? 언제 밀리의 서재를 이용했나? 퇴사하고 소설을 쓸 때 궁금한 게 많았다. 이야기를 어떤 시점으로 쓸지, 시점을 정했다
brunch.co.kr
'PMB_15기 > DAILY' 카테고리의 다른 글
| [코드스테이츠 PMB 15기_W5D2] 하루 한 번의 성장, LongBlack (1) | 2022.11.15 |
|---|---|
| [코드스테이츠 PMB 15기_W5D1] 차가 필요한 모든 순간, 쏘카 (0) | 2022.11.14 |
| [코드스테이츠 PMB 15기_W4D3] 모바일 승차권 예약 앱, 코레일톡 (0) | 2022.11.09 |
| [코드스테이츠 PMB 15기_W4D2] 더 나은 내가 되는 곳, 뱅크샐러드 앱 리뷰 (0) | 2022.11.08 |
| [코드스테이츠 PMB 15기_W4D1] 일상을 편하고 맛있게, 윙잇 (1) | 2022.11.07 |