brunch

You can make anything
by writing

C.S.Lewis

by Jieon Feb 28. 2022

DIVE의 UX/UI는 어떤 고민의 흔적이 있을까?

[코드스테이츠 PMB 10기]Figma 와이어 프레임 

Figma로
DIVE 마이페이지 저장 과정
작성하기






1. DIVE는 누가 사용할까?


이번에는 드디어 'Figma' 라는 웹 또는 앱 프로토타입을 제작할 수 있는 툴을 배웠다. 이전까지는 간단하게 다 PPT로 작성했는데, 드디어 실제 유저의 앱 사용기를 실험할 수 있는 툴을 배운 것이다. 그래서 오늘은 해당 툴을 이용하여 하나의 유저 스토리에 맞는 앱 흐름도를 제작해볼 생각이다.


특히나 오늘은 윤제PM님이 이제껏 분석해보지 않은, 전혀 새로운 서비스를 선택하면 좋을 것 같다고 하셔서 오랜만에 앱 스토어를 뒤적거렸다. 그러던 중 발견한 이 앱! '현대카드 DIVE' 이다. 


여태껏 트렌드 정보를 제공하는 앱은 분석해본 적이 없는 것 같아 선택하게 되었다. 현대카드 DIVE 말고도 한화생명에서 출시한 '라이프 플러스'도 이 앱과 유사한 특징을 가지고 있었지만, '라이프 플러스' 는 2022년 2월 28일에 서비스를 종료한다는 공지를 봐서 현대카드 DIVE를 선택하게 되었다. (이후에, 라이프 플러스가 한층 더 업그레이드 되어서 출시된다면 바로 분석을 해보고 싶다!)


일단 현대카드 DIVE의 캐치프레이즈는 '트렌디한 정보를 내 취향에 맞게' 이다. 이 앱의 소개글을 살펴보자면, 다음과 같다.


- 뜨는 맛집, 최신 패션부터 추천 여행지까지 매일 업데이트되는 맞춤형 트렌드 정보
- 가장 먼저 확인하는 슈퍼콘서트, 다빈치 모텔 등 행사 소식
- 에어비앤비, 왓챠, 멜론 등이 함께하는 콜라보 컨텐츠
- 오직 DIVE에서만 만날 수 있는 특별한 이벤트
- DIVE만 있으면 현대카드 라이브러리 주중 무료 입장 


현대카드 DIVE의 자세한 기능들과 현대카드가 해당 앱을 만든 이유는 아래의 포스팅에서 확인할 수 있다.



남들보다 더 많이, 더 빨리 가지고 싶다는 욕구의 물결이 지나가고, 제3의 물결이 우리를 찾아와 문을 두드립니다. 이제는 ‘남’에게 집중하는 대신 ‘나’에게 집중하는, 다수의 취향이 아니라 나의 취향이 선택의 기준이 되는 시대입니다.

(중략)

이제 취향을 찾기 위해 정처 없이 헤매지 않아도 괜찮습니다. 어려운 인문학 수업을 쫓아다닐 필요도 없습니다. 그저 편안한 의자에 앉아 스마트폰을 들고, 현대카드 DIVE에 접속해보세요. 힙스터들이 직접 소개하는 트렌드가 있는 디지털 컬쳐 플랫폼이 내 방, 내 손 안에서 펼쳐질 테니까요.

- <취향 어렵게 공부하지 마세요, 현대카드 DIVE 하세요> 中


즉, 현대카드 DIVE는 '나'에게 집중하는 MZ 세대가 다가오면서 그 중 지속적으로 취향을 업데이트하고 싶은 사람들이 쉽게 정보를 찾을 수 있도록 이 앱을 만든 것으로 보인다. 그러니 이 앱의 task는 가입 시 설정한 관심분야의 트렌드 정보를 제공하였을 때, 유저가 자신의 취향에 맞는 정보들을 북마킹한다. 가 있을 수 있다.


종합해보자면, 이 앱을 사용하는 유저 스토리는 다음과 같이 생성할 수 있다.


지속적으로 취향을 업데이트하기 좋아하는 MZ세대 A씨는 새로운 취향을 쉽게 찾아보기 위해 현대카드 DIVE의 큐레이션 페이지를 보고 자신의 취향에 맞는 포스팅만을 골라보고자 한다.






2. 현대카드 DIVE 마이페이지 저장 과정 


그렇다면 유저는 어떤 저니맵을 거칠 지, 그림으로 알아보도록 하겠다.



처음 앱에 접속하게 되면, 홈 화면에서 현대카드 DIVE 가 추천하고 있는 콘텐츠들을 확인할 수 있다. 화면을 위아래 스와이프(swipe)하여 다른 콘텐츠들을 확인할 수 있고 보고 싶은 콘텐츠를 찾았을 때 탭(tap)한다. 콘텐츠는 아래로 스와이프하며 읽을 수 있고, 간혹 사진이 있는 경우 좌우로 스와이프하여 어떤 사진들이 있는 지 확인할 수 있다.



콘텐츠 화면에서 좌측 하단에는 좋아요와 댓글 아이콘이 있다. '좋아요'는 인스타그램에서처럼 탭하면 빨간색으로 활성화되고, 댓글 아이콘을 탭하였을 때는 댓글창이 모달창으로 뜨게 된다.


우측 하단에는 공유하기 아이콘과 북마크 아이콘이 존재한다. 북마크 아이콘을 탭하면 사진과 같이 검정색으로 표시되며, [마이페이지] - [저장] 에서 저장한 콘텐츠를 확인할 수 있다.






3. Figma 실습




현대카드 DIVE 저장 과정을 Figma로 표현하기 


그렇다면 위의 설명한 내용들을 이용하여 Figma에 구현해보았다.




참고자료.


매거진의 이전글 리뷰 적기가 힘들어요, 야놀자 (ft. PM의 눈)
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari