게임화 앱 스킬
하나의 다크 쇼케이스 페이지에 여러 화면의 모바일 프로토타입을 생성합니다. 세 대의 전화기 프레임이 나란히 배치되며, 각 프레임은 앱 여정의 특정 순간을 나타냅니다.
작업 흐름
- 활성화된 DESIGN.md를 읽습니다 (위에 주입됨). 게임화된 앱의 경우, 헤드라인에는 굵은 디스플레이 서체를 사용하고 대부분의 제품보다 더 밝고 넓은 색상 팔레트를 활용합니다. 퀘스트가 색상으로 인해 퀘스트처럼 보여야 합니다.
- 브리핑에서 브랜드와 가치 제안을 선택합니다. 실제 퀘스트 이름을 생성합니다 (예: "운동 — 20분 근력: 푸시업 & 플랭크", "독서 — 사천 주", "듣기 — Huberman Lab · 수면 구조", "영양 — 고단백 점심 요리", "마음 — 10분 집중 명상", "시청 — 더 베어 · 시즌3 에피4").
- 무대 설정 — 전체 화면 다크 페이지 (
#0e0d0c또는 DS 다크 토큰에 가까움)에 상단에 부드러운 스포트라이트 그라데이션을 적용합니다. 전화기 위에는 작은 캡션 행: 왼쪽에 "HI-FI PROTOTYPE · IPHONE", 오른쪽에 브랜드 워드마크, 둘 다 모노 서체. - 전화기 — 360×780 크기의 전화기 프레임 세 개를 가로로 배열합니다 (좁은 뷰포트에서는 세로로 쌓임). 각 전화기:
- 12px 검은색 베젤, 44px 모서리 둥글기, 다이내믹 아일랜드 노치.
- 상태 표시줄 (시간 / 신호 / 배터리).
- 전화기별 콘텐츠 (아래 참조).
- 하단 탭 바 (Today, Library, Stats, ⊕ 중앙 CTA, Profile) 5개 아이콘. 활성 탭은 강조 색상.
- 전화기 1 — 커버 포스터 (세일즈/가치 제안) :
- 상태 표시줄.
- "HI-FI PROTOTYPE · IPHONE" 눈썹.
- 큰 디스플레이 헤드라인 ("더 나은 인간이 되기 위한 일일 퀘스트."), "becoming"에 강조.
- 1~2문장의 무딘 세리프/산세리프 본문.
- 모노 팁 행 ("퀘스트를 탭하여 세부 정보를 엽니다. 도구 모음에서 [테마]를 전환하여 테마와 레이아웃을 변경합니다.")
- 하단 가장자리에 다음 화면의 미묘한 스크롤 미리보기.
- 전화기 2 — 오늘의 퀘스트 대시보드 (주요 화면) :
- 인사말 "안녕하세요, Sam" + 작은 XP 벨 아이콘.
- 레벨 리본 — "LV 14 · 레벨 14 · 1648 / 2480 XP"와 유리 형태의 진행 표시줄.
- 보조 행: "8개의 퀘스트 대기 중 · 오늘 430 XP 획득".
- 3×2 퀘스트 타일 그리드. 각 타일: 둥근 모서리, 파스텔 강조 색상, 왼쪽 상단 글리프 칩, 제목, 미니 메타 행, 오른쪽 하단 "+NN XP" 알약.
- 하단 탭 바.
- 전화기 3 — 퀘스트 상세 :
- 뒤로 가기 화살표 + 화면 제목 ("Quest").
- 퀘스트의 강조 색상을 배경으로 한 히어로 블록, 큰 세리프 퀘스트 제목 ("운동 — 근력"), 짧은 서사 본문, "REWARD +90 XP" 스탬프.
- 단계별 체크리스트 (3~4개의 마이크로 태스크, 완료 1개, 보류 2개).
- 하단에 큰 기본 CTA 알약 "퀘스트 시작" (강조 색상).
- 단일 HTML 문서 작성:
<!doctype html>부터</html>까지, CSS는 인라인.- 모든 것은 CSS로 처리 — 이미지 없음. 타일 칩과 탭 아이콘에
linear-gradient와 인라인 SVG 글리프 사용. - 무대, 각 전화기, 각 프레임의 영역에
data-od-id속성 지정.
- 자체 점검:
- 세 개의 프레임이 각각 뚜렷한 목적을 가져야 함. 같은 화면의 복사본이 아님.
- 타일 색상이 과하지 않음 — 각 퀘스트 타일이 동일한 중립 표면 위에서 서로 다른 파스텔 색상을 사용.
- 게임화되었으며 성인용으로 읽혀야 함 — 장난스럽지만 유치하지 않음.
출력 규약
<artifact> 태그 사이에 출력:
<artifact identifier="game-slug" type="text/html" title="Mobile — 앱 이름">
<!doctype html>
<html>...</html>
</artifact>
아티팩트 앞에 한 문장, 뒤에는 아무것도 없음.