케이스스터디
Vibee 온보딩 케이스스터디
프로덕트 디자이너 · Popcorn AI Tech Inc.
Vibee는 사진과 AI가 해석한 분위기를 나누는 커뮤니티 앱입니다. 저는 서비스를 이해하고 그룹을 살펴본 뒤 사진 공유를 선택할 수 있도록 온보딩 순서를 제안하고 제작했습니다.
완성된 첫 경험
그룹을 먼저 보고, 사진은 선택하도록.
Vibee는 사진과 AI가 해석한 분위기를 나누는 커뮤니티 앱입니다. 저는 서비스를 이해하고 그룹을 살펴본 뒤 사진 공유를 선택할 수 있도록 온보딩 순서를 제안하고 제작했습니다.
흐름을 제안하고, 화면과 모션으로 만들었습니다.
Popcorn AI Tech Inc.의 프로덕트 디자이너로서 온보딩 순서와 스플래시를 제안하고, 인터랙티브 모션과 마이크로 모션을 직접 제작했습니다. 요청의 순서부터 화면과 피드백까지 함께 다룬 작업입니다.
어디에서 망설였나
가입과 그룹 사이를 사진 요청이 가로막았습니다.
기존 흐름은 전화번호 인증, 프로필과 소셜 정보 입력, 필수 사진 업로드를 거쳐 그룹으로 이어졌습니다. 어떤 경험인지 소개받거나 그룹을 보기 전에 사진부터 올려야 했습니다.
시작하기도 전에 무엇을 요구하고 있었나.
서비스 소개와 그룹 탐색에 앞서 사진은 필수였고, 단계를 넘겨도 처리 상태를 알아보기 어려웠습니다. 저는 소개와 탐색을 앞에 두고, 화면의 전환과 반응으로 진행을 읽을 수 있게 만드는 방향을 제안했습니다.
출시 준비 속에서 놓친 첫 방문의 경험.
팀은 빠르게 출시를 준비하는 데 집중하고 있었습니다. 온보딩을 살펴보니 사진 요청 전에 필요한 설명과 단계 사이의 피드백이 부족했습니다. 저는 진입 순서와 소개, 모션을 함께 다듬는 방향을 제안했습니다.
사진 요청 앞에서 겹친 네 가지 어려움.
서비스 소개와 그룹 탐색보다 사진 요청이 앞섰고, 업로드는 필수였습니다. 진행과 완료를 알아볼 피드백도 부족했습니다. 흐름과 UI 설계로 다룰 수 있는 진입 경험의 문제를 이렇게 좁혔습니다.
관찰과 우선순위
첫 경험이 어디에서 막히는지 확인하다.
내부 구성원과 잠재 사용자 14명을 대상으로 인터뷰와 사용성 테스트를 진행했습니다. 이른 사진 요청에서 나온 질문과 망설임으로 문제를 좁혔습니다. 원본에 보고된 사진 단계 이탈률 30~40%는 표본 설명이 없어 참고 수치로 남겼습니다.
참여를 요구하기 전에 이해하고 살펴볼 여유를.
첫 방문에서 Vibee의 경험을 설명하고, 그룹을 살펴본 뒤 사진을 공유하도록 만드는 데 집중했습니다. 더 깊은 참여는 이후 과제로 두었습니다. 시작하기도 전에 막히는 지점을 먼저 풀기 위한 범위였습니다.
참여 순서를 다시 설계하다
사진 요청 앞에 그룹을 둘러보는 경험을.
사진 공유를 그룹 탐색 뒤로 옮기고 선택 사항으로 바꿨습니다. 스플래시와 소개 두 장은 전화번호 인증 앞에 놓았습니다. 계정을 설정한 뒤 그룹을 둘러보며, 사진을 올리기 전에 참여할 맥락을 접하도록 했습니다.
시작할 때 꼭 필요한 요청만 남기다.
성별 선택을 없애고 계정 입력과 인증은 유지했습니다. 사진은 그룹을 둘러본 뒤 선택하도록 바꿨습니다. 먼저 들어가 볼 수 있게 된 만큼, 그룹 도달과 자발적인 사진 공유는 각각 살펴봐야 할 행동이 됐습니다.
바꾼 순서를 전체 흐름에 연결하다.
화면 맵에는 소개, 인증, 프로필, 그룹 진입이 연결돼 있습니다. 기존 사용자와 여러 그룹 진입 경로도 함께 다뤘습니다. 대표 시연 밖의 분기까지 같은 흐름 안에서 설계했습니다.
처리된 일과 고칠 내용을 알아볼 수 있게.
국가 선택부터 전화번호와 인증 코드, 이름과 소셜 정보 입력까지 빈 상태, 입력 상태, 오류 상태를 설계했습니다. 완성 화면 사이에서 사용자가 입력하고 확인하고 고치는 과정도 흐름에 포함했습니다.
두 경로 모두 그룹에 도착할 수 있게.
공개 그룹을 찾거나 초대 코드를 입력해 들어갈 수 있습니다. 코드 입력과 오류, 가입 상태를 각 경로에 맞춰 설계했습니다. 두 경로 모두 커뮤니티에 먼저 도착한 뒤 사진 공유를 선택하도록 연결했습니다.
두 장으로 설명하다
내가 할 일과 함께 경험할 결과를 나누다.
글 중심, 한 장 요약, 시각적인 두 장을 비교했습니다. 글은 지나치기 쉬웠고, 한 장에는 설명이 몰렸습니다. 두 장으로 나눠 매일 사진으로 답하는 행동과 그룹에서의 결과를 각각 보여주면서 제품의 분위기도 담았습니다.
첫 행동만 봐도 서비스를 이해할 수 있게.
초기에는 사진 앱인지, 소셜 서비스인지, 게임인지 제품의 정체성이 불분명했습니다. 매일의 질문과 사진, 시각적인 리듬으로 사람들이 함께 무엇을 하는지 전달할 방법을 탐색했습니다.
하나의 설명이 다음 경험으로 이어지도록.
첫 화면은 매일의 질문에 사진으로 답하는 행동을 소개하고, 두 번째는 그룹의 분위기를 보여줍니다. 행동에서 결과로 설명이 이어지도록 전환을 연결했습니다. 두 화면 모두 전화번호 인증 전에 나옵니다.
각 설명에 읽을 공간을 주다.
매일의 사진 질문과 그룹의 반응에 각각 읽을 공간을 줬습니다. 사진으로 예를 보여주고 짧은 문장으로 할 일을 짚었습니다. 두 화면을 함께 보면 한 화면에 설명을 몰지 않고도 행동과 결과가 연결됩니다.
시작을 느끼게 하는 모션
첫 행동에 앞서 시작을 알아볼 수 있게.
갑작스럽던 시작을 연결하기 위해 3초 스플래시를 제안하고 제작했습니다. 소개를 거쳐 인증으로 이어지는 시작을 화면에 드러냈습니다. 이후 단계의 반응은 작은 인터랙션과 피드백으로 이어갔습니다.
다음 화면이 나타나는 방식을 비교하다.
로고 페이드, 화면의 수직 이동, 중앙 분할을 탐색했습니다. 각각 브랜드 인지, 화면으로 들어오는 움직임, 다음 경험이 열리는 느낌에 초점이 있습니다. 세 시연은 원본의 탐색 방향을 재구성한 것입니다.
변화가 일어나는 곳에 알아볼 수 있는 반응을.
스플래시는 시작을 알리고, 전환은 화면을 연결하며, 마이크로 인터랙션은 행동에 반응합니다. 순서를 따라갈 수 있도록 UI와 함께 제작했습니다. 모션의 타이밍은 내용을 읽고 다음으로 넘어갈 여유와 함께 다뤄야 합니다.
경험에서 확인한 변화
먼저 둘러볼 수 있는 첫 방문으로 바뀌었습니다.
완성한 흐름에서는 Vibee를 소개받고 그룹을 둘러본 뒤 사진을 공유할 수 있습니다. 재설계 후 경험적으로 개선을 확인했습니다. 현재 비교 가능한 측정 자료는 없어, 개선 폭을 수치로 제시하지는 않습니다.
바꾼 구조와 경험의 변화를 연결하다.
인증 전 소개, 탐색 후 선택적 사진 공유, 단계 사이의 피드백은 화면에서 확인할 수 있습니다. 사진을 선택으로 바꾸면서 진입과 기여가 분리됐습니다. 결과를 평가할 때도 그룹 진입과 자발적인 참여를 함께 살펴봐야 합니다.
다음 설계에 남긴 것
판단할 맥락이 생긴 뒤 참여를 요청하다.
요청의 순서를 사용자가 보고 이해할 수 있는 경험과 연결한 작업입니다. 저는 그 순서를 제안하고 화면과 모션으로 제작했습니다. 다음에는 그룹을 둘러본 사람이 사진 공유를 선택하고 첫 활동까지 이어가는지를 살펴보고 싶습니다.
직접 만든 것과 다음에 확인할 것.
온보딩 순서, 스플래시, 인터랙티브 모션과 마이크로 모션을 직접 제안하고 제작했습니다. 화면과 영상에 그 작업이 담겨 있습니다. 경험적으로 확인한 개선을 구체적인 행동과 일관된 기준으로 연결하는 것이 다음 과제입니다.
소개
디자이너 소개
안녕하세요, 이종민입니다. 디자인 엔지니어링으로 영역을 넓혀가는 프로덕트 디자이너입니다. 쓰임새만큼 사용하는 감각도 중요하게 생각해요.
사용자에게 무엇이 필요한지, 어떻게 목적에 도달하는지, 어떤 디테일이 그 경험을 자연스럽게 만드는지 함께 고민합니다.
프로덕트 디자인을 바탕으로 디자인 엔지니어링을 탐구하고 있어요. 머릿속 아이디어를 직접 작동하는 인터랙션으로 연결하고 싶습니다.
연락
나누고 싶은 이야기가 있나요?
채용, 함께할 프로젝트, 가벼운 인사도 좋아요.