트렌디한 정보를 내 취향에 맞게,
DIVE
1. 프롤로그
이번에는 드디어 'Figma' 라는 웹 또는 앱 프로토타입을 제작할 수 있는 툴을 배웠다. 이전까지는 간단하게 다 PPT로 작성했는데, 드디어 실제 유저의 앱 사용기를 실험할 수 있는 툴을 배운 것이다. 그래서 오늘은 해당 툴을 이용하여 하나의 유저 스토리에 맞는 앱 흐름도를 제작해볼 생각이다.
특히나 오늘은 윤제PM님이 이제껏 분석해보지 않은, 전혀 새로운 서비스를 선택하면 좋을 것 같다고 하셔서 오랜만에 앱 스토어를 뒤적거렸다. 그러던 중 발견한 이 앱! '현대카드 DIVE' 이다.
여태껏 트렌드 정보를 제공하는 앱은 분석해본 적이 없는 것 같아 선택하게 되었다. 현대카드 DIVE 말고도 한화생명에서 출시한 '라이프 플러스'도 이 앱과 유사한 특징을 가지고 있었지만, '라이프 플러스' 는 2022년 2월 28일에 서비스를 종료한다는 공지를 봐서 현대카드 DIVE를 선택하게 되었다. (이후에, 라이프 플러스가 한층 더 업그레이드 되어서 출시된다면 바로 분석을 해보고 싶다!)
일단 현대카드 DIVE의 캐치프레이즈는 '트렌디한 정보를 내 취향에 맞게' 이다. 이 앱의 소개글을 살펴보자면, 다음과 같다.
- 뜨는 맛집, 최신 패션부터 추천 여행지까지 매일 업데이트되는 맞춤형 트렌드 정보
- 가장 먼저 확인하는 슈퍼콘서트, 다빈치 모텔 등 행사 소식
- 에어비앤비, 왓챠, 멜론 등이 함께하는 콜라보 컨텐츠
- 오직 DIVE에서만 만날 수 있는 특별한 이벤트
- DIVE만 있으면 현대카드 라이브러리 주중 무료 입장
현대카드 DIVE의 자세한 기능들과 현대카드가 해당 앱을 만든 이유는 아래의 포스팅에서 확인할 수 있다.
취향 어렵게 공부하지 마세요, 현대카드 DIVE 하세요!
취향을 업데이트하는 문화콘텐츠 앱 현대카드 DIVE를 만났습니다.
news.hmgjournal.com
남들보다 더 많이, 더 빨리 가지고 싶다는 욕구의 물결이 지나가고, 제3의 물결이 우리를 찾아와 문을 두드립니다. 이제는 ‘남’에게 집중하는 대신 ‘나’에게 집중하는, 다수의 취향이 아니라 나의 취향이 선택의 기준이 되는 시대입니다.
(중략)
이제 취향을 찾기 위해 정처 없이 헤매지 않아도 괜찮습니다. 어려운 인문학 수업을 쫓아다닐 필요도 없습니다. 그저 편안한 의자에 앉아 스마트폰을 들고, 현대카드 DIVE에 접속해보세요. 힙스터들이 직접 소개하는 트렌드가 있는 디지털 컬쳐 플랫폼이 내 방, 내 손 안에서 펼쳐질 테니까요.
<취향 어렵게 공부하지 마세요, 현대카드 DIVE 하세요 中>
즉, 현대카드 DIVE는 '나'에게 집중하는 MZ 세대가 다가오면서 그 중 지속적으로 취향을 업데이트하고 싶은 사람들이 쉽게 정보를 찾을 수 있도록 이 앱을 만든 것으로 보인다. 그러니 이 앱의 task는 가입 시 설정한 관심분야의 트렌드 정보를 제공하였을 때, 유저가 자신의 취향에 맞는 정보들을 북마킹한다. 가 있을 수 있다.
종합해보자면, 이 앱을 사용하는 유저 스토리는 다음과 같이 생성할 수 있다.
지속적으로 취향을 업데이트하기 좋아하는 MZ세대 A씨는 새로운 취향을 쉽게 찾아보기 위해 현대카드 DIVE의 큐레이션 페이지를 보고 자신의 취향에 맞는 포스팅만을 골라보고자 한다.
2. 현대카드 DIVE 마이페이지 저장 과정
그렇다면 유저는 어떤 저니맵을 거칠 지, 그림과 gif 파일로 알아보도록 하겠다.
처음 앱에 접속하게 되면, 홈 화면에서 현대카드 DIVE 가 추천하고 있는 콘텐츠들을 확인할 수 있다. 화면을 위아래 스와이프(swipe)하여 다른 콘텐츠들을 확인할 수 있고 보고 싶은 콘텐츠를 찾았을 때 탭(tap)한다. 콘텐츠는 아래로 스와이프하며 읽을 수 있고, 간혹 사진이 있는 경우 좌우로 스와이프하여 어떤 사진들이 있는 지 확인할 수 있다.
콘텐츠 화면에서 좌측 하단에는 좋아요와 댓글 아이콘이 있다. '좋아요'는 인스타그램에서처럼 탭하면 빨간색으로 활성화되고, 댓글 아이콘을 탭하였을 때는 댓글창이 모달창으로 뜨게 된다.
우측 하단에는 공유하기 아이콘과 북마크 아이콘이 존재한다. 북마크 아이콘을 탭하면 사진과 같이 검정색으로 표시되며, [마이페이지] - [저장] 에서 저장한 콘텐츠를 확인할 수 있다.
3. Figma 실습
현대카드 DIVE 저장 과정을 Figma로 표현하기
그렇다면 위의 설명한 내용들을 이용하여 Figma에 구현해보았다.
회고.
여태껏 프로토타입은 다 PPT로 제작해와서 Figma를 처음 사용하는 게 무척 까다로웠다. 선배 기수분들이 한 것에는 화면전환도 가능하던데, 아직 거기까지는 구현을 하지 못하였다.. 이번 부트캠프를 지속적으로 하면서 선배기수분이 한 것처럼 나도 화면전환 기능까지 사용할 수 있도록 정진해야겠다!
이번에 많이 참고한 자료 👇
Figma로 '다시' 그려본 '지그재그'
[코드스테이츠 PMB 8기] Figma, 디자인 툴 | 갑자기 봄여어어어름 갈겨어어어어울이되면서 부랴부랴 겨울옷을 꺼내고 드라이 맡겼던 코트들을 꺼냈다. 가을 옷은 제대로 입지도 못했는데,,, 갑자기
brunch.co.kr
이만큼 할 수 있도록 노력해야겠다 👊
'CodeStates_ > [CodeStates_PMB 10기 Daily]' 카테고리의 다른 글
| [코드스테이츠_PMB 10기] 진짜 내 몸에 필요한 영양소를 알려줘, 필리! (0) | 2022.02.21 |
|---|---|
| [코드스테이츠_PMB 10기] 웹소설의 고급화, '네이버 시리즈'의 그로스해킹 전략 (0) | 2022.02.18 |
| [코드스테이츠_PMB 10기] 리뷰 적기가 너무 힘들어요, 야놀자 (feat. PM의 눈👀) (0) | 2022.02.15 |
| [코드스테이츠_PMB 10기] 심리학으로 보는 UX, 토스의 심리학 (0) | 2022.02.12 |
| [코드스테이츠_PMB 10기] 배달의 민족 UX 분석하기 (0) | 2022.02.11 |