스롤라인 카페

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

재현할 게임은 한국어 1인용 카페 타임어택 미니게임 **“스롤라인 카페 챌린지”**다. 모바일과 데스크톱 모두에서 동작하는 반응형 단일 화면 게임으로 만들고, 마우스 클릭과 터치를 모두 지원한다.

전체 아트 방향은 귀엽고 따뜻한 카페 일러스트 UI다. 화면 바깥 배경은 크림색(#fff7ea), 중앙 게임 패널은 짙은 갈색 3~4px 테두리와 큰 둥근 모서리, 은은한 그림자를 가진다. 패널 배경은 위쪽 약 1/3이 연한 복숭아/크림색, 아래쪽이 갈색-카라멜색 카페 공간으로 나뉘며, 세로 빛줄기와 흐릿한 원형 하이라이트가 장식으로 보인다. 모든 글자는 한국어, 진한 갈색이며, 노란색·민트색·분홍색을 포인트로 사용한다. 상단에는 고정 헤더가 있고 왼쪽에 커피 아이콘과 “스롤라인 카페 챌린지”, 오른쪽에 둥근 상태 필 “1인 플레이”가 표시된다. 게임 중에는 오른쪽 필이 “제한 시간 3분”으로 바뀐다.

타이틀 화면에서는 중앙 콘텐츠에 귀여운 카페 직원 마스코트를 크게 배치한다. 마스코트는 갈색 테두리의 복숭아색 얼굴과 몸, 둥근 귀, 작은 검은 눈과 입, 갈색 모자, 크림색 앞치마, 오른쪽의 흰 컵과 김을 가진 단순한 CSS/벡터풍 캐릭터다. 옆 또는 아래에 큰 제목 “3분 안에 최대한 많이 만들기!”를 보여주고 “손님의 주문을 보고 재료를 순서대로 눌러 음료를 완성하세요.”라는 설명, 노란색 둥근 버튼 “게임 시작 ▶”, “마우스 클릭과 터치 모두 가능해요” 안내를 배치한다.

‘게임 시작’을 누르면 설명 화면으로 이동한다. 설명 카드에는 “게임 방법” 제목과 세 단계 카드가 있다: “👀 주문을 확인해요”, “👇 재료를 순서대로 눌러요”, “⭐ 완성하면 점수 획득!”. 아래에는 “틀리면 현재 음료가 처음부터 다시 시작돼요. 콤보를 이어 가면 더 높은 점수를 받을 수 있어요!”를 보여주고, 노란색 “알겠어요! 시작하기” 및 보조색 “처음으로” 버튼을 둔다.

실제 게임은 180초(3분) 동안 최대한 많은 음료를 완성하는 방식이다. 게임 화면에는 다음 HUD를 표시한다: 점수(초기 0), 콤보(초기 0), 남은 시간(3:00부터 감소), 완료한 주문 수(초기 0). 시간은 실시간으로 감소하고 가로 타이머 바도 함께 줄어든다. 남은 시간이 30초 이하가 되면 타이머 바 색상을 경고용 산호/빨강으로 바꾼다.

HUD 아래에는 흰색 둥근 주문 패널이 있다. 왼쪽에는 손님/카페 직원 이모지(주문 종류에 따라 🧑‍🍳 또는 👩‍🍳), 오른쪽에는 “손님 주문”, 현재 음료 이름, 필요한 재료가 순서대로 둥근 칩으로 표시된다. 현재 눌러야 하는 칩은 주황색 강조 외곽선과 약간의 확대 효과를 갖고, 이미 맞힌 칩은 민트색 배경과 체크 표시로 바뀐다.

주문은 아래 6종 중 무작위로 하나를 선택한다. 각 재료와 순서는 정확히 다음과 같다: 카페라떼 = 원두 ☕ → 우유 🥛 → 거품 🫧; 카푸치노 = 원두 ☕ → 우유 🥛 → 거품 ☁️ → 시나몬 ✨; 카라멜마키아토 = 원두 ☕ → 우유 🥛 → 카라멜 🍯 → 거품 🫧; 딸기라떼 = 딸기 🍓 → 우유 🥛 → 얼음 🧊; 아이스초코 = 초콜릿 🍫 → 우유 🥛 → 얼음 🧊 → 거품 🫧; 레몬에이드 = 레몬 🍋 → 시럽 🍯 → 얼음 🧊 → 탄산 🫧.

작업대에는 왼쪽에 큰 갈색-주황색 음료 제조 기계/패널을 놓고 중앙에 커피 아이콘과 “음료 만들기” 문구를 넣는다. 오른쪽에는 2열 그리드로 4개의 큰 재료 버튼을 표시한다. 버튼은 흰색/크림색 카드, 진한 갈색 테두리와 둥근 모서리, 아래쪽 눌림 그림자를 가지며, 큰 이모지와 한국어 재료명을 세로로 보여준다. 현재 주문에 필요한 재료는 반드시 선택지에 포함하고, 나머지는 원두·우유·거품·시나몬·카라멜·딸기·얼음·초콜릿·레몬·시럽·탄산 풀에서 무작위로 채운다. 버튼 순서는 매번 섞는다.

플레이어가 재료 버튼을 누르면 현재 주문의 다음 예상 재료와 비교한다. 맞으면 해당 단계가 완료되고 콤보가 1 증가하며 다음 재료가 강조된다. 아직 음료가 완성되지 않았다면 안내 문구를 “좋아요! 다음 재료는 [이모지] [재료명]이에요.”처럼 갱신한다. 틀리면 콤보를 0으로 만들고 현재 음료의 진행 단계를 0으로 되돌리며, “앗, 순서가 달라요! 처음부터 다시 해볼까요?”를 표시한다. 즉 틀린 버튼을 누른 뒤 같은 주문을 처음 재료부터 다시 해야 한다.

주문을 끝까지 맞히면 점수를 얻는다. 완성 점수는 기본 100점에 현재 콤보의 최대 10까지 각각 20점을 더한 값(100 + min(콤보, 10)×20)이다. 완료 수를 1 증가시키고 “완성! +[점수]점 🎉 다음 주문이에요!”를 보여준 뒤 짧은 지연 후 새로운 무작위 주문을 제시한다. 콤보는 주문을 완성해도 유지되며 오답일 때만 초기화된다. 게임 중에는 간단한 귀여운 전자음/멜로디를 재생해도 좋지만, 핵심 시각 피드백과 클릭 동작이 우선이다.

시간이 0이 되면 게임을 잠그고 결과 화면으로 이동한다. 결과 화면은 같은 카드형 따뜻한 UI를 사용하며 점수에 따라 메달을 표시한다: 1800점 이상은 🌟와 “전설의 바리스타!”, 900점 이상은 🏆와 “훌륭한 바리스타!”, 그 미만은 ☕와 “오늘도 수고했어요!”. 중앙에 “[점수]점”을 크게 보여주고, 최고 점수도 표시한다. 최고 점수는 브라우저 로컬 저장소에 저장해 다음 플레이에도 유지한다. 이번 점수가 기존 최고 기록보다 높고 0점보다 크면 “새로운 최고 점수예요! 손님들이 행복해요.”를 표시하고, 900점 이상이면 “손이 아주 빠르네요!”, 그 외에는 “조금 더 연습하면 더 높은 점수를 얻을 수 있어요.”를 표시한다. 하단에는 “다시 도전하기 ↻”와 “처음으로” 버튼을 둔다. 다시 도전하기는 3분 게임을 초기화해 바로 시작하고, 처음으로는 타이틀 화면으로 돌아간다.

레이아웃은 큰 화면에서는 가로형으로 마스코트/텍스트와 작업대가 여유 있게 보이고, 좁은 모바일 화면에서는 타이틀 영웅 영역을 세로로 쌓고, 설명 단계 카드를 세로로 배치하며, 작업대 기계와 재료 그리드를 나란히 축소한다. 화면 안에 모든 콘텐츠가 들어가도록 스크롤과 반응형 글자 크기를 사용한다. 게임의 목표, 주문 재료 순서, 3분 제한, 오답 시 리셋, 점수/콤보/완료 HUD가 항상 명확해야 한다.