데일리 퀘스트 앱 디자인

데일리 퀘스트 앱 디자인

데일리 퀘스트 앱 디자인은 익숙한 자기계발 활동을 일일 퀘스트 로그로 바꾸는 모바일 콘셉트 Level을 보여 줍니다. “Daily quests for becoming a better human.”이라는 제목이 먼저 전제를 세우고, 이어 인터페이스가 다음 행동인 “NEXT — TODAY'S QUESTS”를 안내합니다.

환영 화면은 어두운 배경, 큰 에디토리얼 세리프 타이포그래피, “becoming”의 주황색 강조, 고정폭 글꼴로 표시한 간결한 프로토타입 라벨을 사용합니다. 이런 구성은 운영 대시보드가 아니라 소개 화면처럼 느껴지게 합니다. 의도된 트레이드오프도 있습니다. 표현력 있는 헤드라인이 세로 공간을 많이 차지하므로, 전환 전에는 짧은 제품 설명과 다음 단계 안내만 보입니다.

화면 문구는 XP를 얻고 클래스가 레벨업하는 모습을 보는 것을 설명하지만, 제공된 HTML은 정적인 3화면 디자인입니다. 퀘스트 선택, 보상 업데이트, 테마 전환을 구현한 것이 아니라 제안된 정보 모델과 완료 상태를 묘사합니다. 수치는 샘플 콘텐츠이며 저장된 진행 상황이나 건강 결과의 근거가 아닙니다.

데일리 퀘스트 계획과 보상 훑어보기

홈 화면은 빠르게 훑어볼 수 있도록 구성되어 있습니다. “Good morning, Sam”이 “1648 / 2480”을 보여 주는 Level 14 진행 패널 위에 놓이고, 그 뒤에 “8 quests waiting · earn 430 XP today”가 이어집니다. 이 값들은 샘플 데이터로 제시되지만, 배치 순서는 의도한 우선순위를 설명합니다. 먼저 현재 위치, 다음으로 진행 상황, 그다음으로 가능한 작업입니다.

이어서 여섯 개의 색상 카드가 하루를 Body, Read, Listen, Nourish, Mind, Watch로 나눕니다. 각 카드는 한 글자 마커, 카테고리 이름, 구체적인 활동, XP 배지를 결합합니다. 예를 들어 Body는 “20-min strength: pushups & planks”와 “+90”을, Watch는 “The Bear · S3 E4”와 “+30”을 짝지읍니다. 카테고리 그리드는 서로 다른 활동을 같은 종류의 태스크인 척하지 않으면서도 비교할 수 있게 해 줍니다.

2열 카드 배치는 빠른 선택과 시각적 다양성을 돕고, 파스텔 배경색은 카테고리를 구분합니다. 대신 긴 라벨은 고정 크기 카드 안에서 줄바꿈되므로 설명을 간결하게 유지해야 합니다. 하단 내비게이션은 Today를 활성 상태로 두고, 인접한 목적지로 Library, 중앙 추가 컨트롤, Stats, Profile을 마련해 둡니다.

퀘스트 목록에서 마이크로 태스크까지

세 화면은 구체적인 순서를 이룹니다. 어두운 환영 화면이 아이디어를 세우고, 밝은 홈 화면이 하루를 보여 주며, 상세 화면이 선택된 퀘스트 하나를 펼칩니다. 이 전환은 테마와 정보 밀도를 모두 바꿉니다. 홈 화면은 여섯 카테고리 간 비교를 지원하고, 상세 화면은 하나의 근력 활동과 그 완료 구조에 집중합니다.

상세 화면은 “QUEST · 03 / 08”로 스스로를 나타내고 활동을 “BODY · STRENGTH”로 표시합니다. 코랄색 패널에는 “+90 XP”, 제목 “20 minutes that change Wednesday.”, 그리고 푸시업, 플랭크, 와일드카드 하나, 장비 불필요를 언급하는 짧은 설명이 담겨 있습니다. 반복되는 문구 “11 times this month”는 눈에 보이는 샘플 이력이며 측정된 결과의 근거가 아닙니다.

“TODAY'S MICRO-TASKS” 아래에는 “Roll out the mat”, “3 × 12 pushups”, “3 × 45s plank”, “Wildcard: lunges”가 나열됩니다. 첫 번째 행은 체크되고 취소선이 그어져 있으며, 나머지 행은 빈 원을 사용합니다. +5, +30, +30, +25의 XP 값이 오른쪽 가장자리에 놓입니다. 이 상태 구분 덕분에 독자는 퀘스트 상세를 벗어나지 않고도 부분 완료를 이해할 수 있습니다.

큰 “Start quest” 버튼이 체크리스트 뒤에 이어져 명확한 행동 종착점을 만듭니다. 이 순서는 제안된 인터랙티브 플로우에는 유용하지만, 캡처만으로는 버튼, 체크리스트, 레벨업 순간이 저장 기능에 연결되어 있다는 것을 증명하지 못합니다. 다만 의도한 상태 언어와 퀘스트 보상 및 더 작은 태스크 사이의 관계는 보여 줍니다.

보이는 범위와 기능의 한계

이 산출물은 OpenDesign이 제작한 3화면 모바일 앱 디자인 예시입니다. 구성, 샘플 데이터 위계, 카테고리 그룹화, 화면 전환, 완료 상태 표기를 살펴보는 데 유용합니다. 모바일 프레임에는 눈에 보이는 iPhone 상태 표시줄과 하단 내비게이션이 포함되지만, 제공된 근거로는 렌더링된 화면 너머의 플랫폼 동작을 확인할 수 없습니다.

이 디자인은 상세를 위해 퀘스트를 탭하기, 퀘스트 완료하기, 여섯 번째 퀘스트 이후 레벨업 순간 발생시키기, 테마와 레이아웃 전환하기 같은 인터랙션을 제안합니다. 이런 설명은 의도한 콘셉트를 설명할 뿐 검증된 런타임 기능이 아닙니다. 따라서 XP 합계, Level 14 상태, 활동 이력, 일일 퀘스트 수는 실제 제품 구현에서 제품 데이터와 명시적인 상태 규칙으로 대체해야 합니다.