케이스스터디
UpNext: 계획보다 행동이 먼저인 습관 앱
개인 프로젝트 · 제품 설계, 인터랙션 디자인, AI를 활용한 개발 · 웹과 iOS
UpNext는 일상에서 해볼 활동을 카드로 제안하는 습관 앱입니다. 하나를 골라 해보고, 계속하고 싶은 일을 찾도록 만들었습니다. 제품과 인터랙션을 설계하고 AI의 도움으로 제작·출시했습니다. 이 케이스에서는 첫 활동을 고르는 경험을 웹에서 만들고 Swift로 옮기며 다듬은 과정을 이야기합니다.
행동에서 시작하기
작게 해보고, 나에게 맞는 습관으로.
UpNext는 일상에서 해볼 활동을 카드로 제안하는 습관 앱입니다. 하나를 골라 해보고, 계속하고 싶은 일을 찾도록 만들었습니다. 제품과 인터랙션을 설계하고 AI의 도움으로 제작·출시했습니다. 이 케이스에서는 첫 활동을 고르는 경험을 웹에서 만들고 Swift로 옮기며 다듬은 과정을 이야기합니다.
시작 전의 부담
시작하기도 전에 계획부터 세워야 했습니다.
습관 앱을 쓰려면 원하는 습관을 생각하고 계획부터 세워야 했습니다. 제게는 그 준비도 귀찮은 일이었습니다. 먼저 움직여보고, 재미있는 것을 찾은 뒤에 이어가고 싶었습니다. 그래서 오늘 해볼 만한 활동을 앱이 먼저 건네주는 방식으로 시작했습니다.
로그라이크의 카드 선택에서 시작점을 찾았습니다.
즐기던 로그라이크 게임에서는 주어진 카드를 살펴보며 다음 행동을 골랐습니다. 개발 초기에 읽은 넛지 연구의 선택 설계도 영향을 줬습니다. 선택은 본인에게 남기면서 시작을 돕고 싶었습니다. 앱은 활동을 제안하고, 사용자는 내용을 읽고 오늘 할 만한지 판단하도록 만들었습니다.
내가 고르는 행동
해볼 일이 구체적으로 보이게.
앱은 보유 카드 풀에서 서로 다른 후보 여섯 장을 뽑습니다. “1,000걸음 걷기”, “5분 스트레칭”처럼 무엇을 할지 바로 알 수 있게 했습니다. 모드에 따라 한 장에서 세 장을 고릅니다. 개인의 상황을 판단해 추천하는 방식은 아니지만, 첫 선택의 범위를 정해줍니다.
읽어보고, 마음을 바꿀 시간도.
카드를 누르면 먼저 내용을 읽을 수 있습니다. 오늘 할 활동에 넣은 뒤에도 일반 카드는 빼낼 수 있고, 확정해야 보드가 시작됩니다. 초기 테스터의 피드백을 받고 하단 내비게이션이 확정 버튼을 가리지 않도록 여백도 늘렸습니다. 읽는 동작이 곧바로 결정이 되지 않게 나눴습니다.
Swift에서도 같은 감각으로
Swift에서도 살펴보는 시간이 필요했습니다.
초기 Swift 버전은 두 열의 카드 목록에서 탭으로 뽑는 방식이었습니다. 선택은 가능했지만, 웹에서 덱을 누르고 펼쳐진 카드를 살펴보던 과정이 빠졌습니다. 네이티브 앱에도 그 순서를 다시 넣어 확정 전에 탐색할 시간을 남겼습니다. 세 영상은 복원한 초기 Swift 커밋, 로컬 iOS 빌드 35, 현재 웹 컴포넌트를 비교합니다.
살펴보려던 탭이 드래그가 되지 않도록.
iOS에서는 카드를 누르는 동작과 끄는 동작이 충돌할 수 있었습니다. 탭을 분리하고, 세로로 충분히 움직였을 때만 드래그 선택이나 닫기로 처리했습니다. 카드가 들어오는 거리와 선택 슬롯의 정렬도 조정했습니다. 내용을 보려다가 뜻하지 않게 선택되는 일을 줄이려는 수정이었습니다.
손을 뗐는데 반응이 남으면 어색하니까.
웹과 iOS 모두 덱을 800ms 동안 누르면 카드가 펼쳐집니다. 진행 표시와 소리, 햅틱은 함께 시작하고 중간에 손을 떼거나 화면을 벗어나면 함께 멈춰야 했습니다. 누르기 상태에 시작과 정리를 연결했습니다. 코드만으로 판단하기 어려운 감각의 차이는 TestFlight에서 직접 확인하며 조정했습니다.
한 번 해본 다음
하나를 해내면 화면에도 남도록.
확정한 카드는 오늘의 보드가 됩니다. 활동을 완료하면 상태가 바뀌고 해당 경험치를 한 번 지급합니다. 레벨이 오르면 카드 팩이 열려 다음에 뽑을 후보가 늘어납니다. 해낸 일이 화면에 남고, 다음 방문의 시작점이 되도록 만들었습니다. 실제 활동의 완료 여부는 사용자가 직접 기록합니다.
완료한 다음에는 다시 돌아올 길을.
첫 활동을 끝낸 뒤에는 다음 방문을 준비합니다. 첫 완료 후에는 알림을, 두 번째 완료 후에는 위젯 설정을 안내합니다. 영상은 앱에서 실제로 이어지는 장면입니다. 먼저 한 번 해본 뒤 설정을 제안해, 무엇을 위한 알림과 위젯인지 맥락을 주려 했습니다. 재방문에 미치는 효과는 아직 측정하지 않았습니다.
다음에 확인할 것
읽은 카드와 고른 카드가 분명히 구분될까.
미리 보기, 선택 슬롯, 확정한 보드는 서로 다른 상태입니다. 다음 사용성 테스트에서는 카드 하나를 읽고, 다른 카드와 비교한 뒤 선택을 바꿔보도록 하려 합니다. 매번 설명을 읽지 않아도 슬롯과 전환 방향만으로 지금 무엇이 선택됐는지 알 수 있는지 살펴보겠습니다.
잠깐 다른 일을 하고 와도 이어서 고를 수 있을까.
카드를 고르다가 알림을 보거나 다른 일을 할 수도 있습니다. 상세를 읽던 중 돌아온 경우와 선택한 뒤 돌아온 경우를 나눠 확인하려 합니다. 어디까지 했는지 바로 알 수 있는지, 다음 동작을 찾느라 이미 한 행동을 반복하지는 않는지 보려 합니다. 아직 측정한 결과가 아닌 다음 테스트의 질문입니다.
직접 해보세요.
UpNext를 iPhone과 Android에서 사용할 수 있습니다. 카드를 펼쳐 살펴보고, 오늘 해볼 활동을 골라보세요.
소개
디자이너 소개
안녕하세요, 이종민입니다. 디자인 엔지니어링으로 영역을 넓혀가는 프로덕트 디자이너입니다. 쓰임새만큼 사용하는 감각도 중요하게 생각해요.
사용자에게 무엇이 필요한지, 어떻게 목적에 도달하는지, 어떤 디테일이 그 경험을 자연스럽게 만드는지 함께 고민합니다.
프로덕트 디자인을 바탕으로 디자인 엔지니어링을 탐구하고 있어요. 머릿속 아이디어를 직접 작동하는 인터랙션으로 연결하고 싶습니다.
연락
나누고 싶은 이야기가 있나요?
채용, 함께할 프로젝트, 가벼운 인사도 좋아요.