MAKING · 제작기

스위트 소트 잼 제작기: 정렬 퍼즐 위에 카페를 얹은 나흘

음료를 옮겨 같은 색 넷을 모으는 정렬 퍼즐에, 코인이 쌓이는 카페와 꾸미기·미션·룰렛·업적을 일곱 단계(Phase)로 얹었습니다. 커밋 18개, 나흘의 기록을 따라가며 단계마다 무엇을 붙였고 무엇을 지웠는지, 꾸미기 화면이 엉뚱한 곳에 열리던 버그까지 돌아봤습니다.

2026.10.05 · KKflow · 읽는 시간 약 8분

스위트 소트 잼은 컵(튜브)에 섞여 있는 음료를 옮겨 같은 종류 4개를 한 컵에 모으는 정렬 퍼즐입니다. 퍼즐 바깥에는 내 디저트 카페가 있어서, 퍼즐로 번 코인으로 카페를 키우고 꾸밉니다. 저장소에 남은 커밋은 18개입니다. 첫 커밋이 2026년 7월 3일 새벽 3시 15분, 마지막 커밋이 7월 7일 오전 7시 26분이니 나흘 남짓입니다. 커밋 제목에는 "Phase 1"부터 "Phase 7"까지 단계 번호가 붙어 있어, 무엇을 어떤 순서로 쌓았는지 그대로 보입니다. 이 글은 그 순서를 따라간 제작기입니다. 18개 커밋 모두 Claude Code와 함께 작성했습니다.

한눈에 보는 일곱 단계

Phase 1부터 Phase 5까지가 7월 3일 하루 새벽부터 아침 사이에 들어갔습니다. 첫 커밋에서 Phase 5 직후의 버그 수정(08:31)까지 약 5시간 15분, 그 사이 커밋이 15개입니다. 단계 사이사이에는 번호 없는 커밋이 끼어 있는데, 대부분이 직접 해 보고 고친 흔적입니다.

Phase 1: 컵과 음료

첫 커밋에 이미 게임의 핵심이 다 있었습니다. 컵의 맨 위에 있는 같은 색 음료 묶음을 다른 컵으로 붓고, 한 컵에 같은 음료 4개가 모이면 유니콘 파르페로 합쳐지는 "MERGE!" 연출이 나옵니다. 레벨이 오를수록 색이 늘어나 어려워지고, 막히면 빈 컵 하나를 더 받아 이어 할 수 있습니다.

점수는 붓기·완성·클리어 보너스로 매기고, 최고 점수는 기기에 저장합니다. 데이터베이스 서비스(Supabase)를 연결하면 온라인 랭킹 TOP 10이 뜨고, 연결 정보가 없어도 게임은 그대로 돌아가게 만들었습니다. 홈 화면에 설치할 수 있는 PWA 설정도 첫날부터 들어갔습니다. 그림 에셋 8장은 배경의 체크무늬를 지우고 잘라 투명 PNG로 만들어 넣었다고 적혀 있습니다.

Phase 2: 퍼즐 아래에 카페를 열다

16분 뒤의 두 번째 커밋에서 게임의 성격이 바뀝니다. 퍼즐 아래에 방치형 카페가 생겼습니다. 가만히 있어도 1초에 0.5코인씩 쌓이고, 자리를 비운 동안에도 최대 2시간까지 절반 효율로 수익이 쌓입니다. 돌아오면 "그동안 번 코인" 창이 뜹니다. 바리스타 제니, 디저트 진열대, 단골 토끼 손님 업그레이드가 수익을 올리고, 레벨을 클리어하면 코인을 받습니다. 퍼즐과 카페가 코인으로 이어진 것입니다.

진행 상황은 익명 로그인으로 클라우드에 저장됩니다. 20초마다, 그리고 탭을 떠날 때 저장하고, 기기 두 대의 기록이 다르면 더 높은 값을 따릅니다.

20분 뒤에는 화면 구성을 다시 짰습니다. 카페가 퍼즐 아래에 붙어 있던 것을, 카페를 첫 화면으로 두고 "퍼즐 시작" 버튼으로 퍼즐 화면에 들어가는 구조로 나눴습니다. 두 화면이 모두 살아 있어서 퍼즐 도중 카페에 다녀와도 진행이 이어지고, 코인은 어느 화면에서든 계속 쌓입니다.

Phase 2와 3 사이: 직접 해 보고 고친 것들

화면을 나눈 뒤 Phase 3까지 약 1시간 반 동안 번호 없는 커밋이 7개 더 들어갔습니다. 새 기능보다 손에 닿는 느낌을 다듬은 것들입니다.

• 음료 2종과 그림 9장 추가 — 블루베리 에이드와 포도 젤리가 들어가 음료가 6색이 됐고, 동전 이모지는 귀여운 동전 그림으로, 카페는 실내 일러스트 배경으로 바뀌었습니다. 곰돌이 손님 업그레이드도 이때 생겼습니다.
• 끌어서 놓기를 버리고 탭 두 번으로 — 첫날 만든 드래그 앤 드롭 조작을 지웠습니다. 컵을 탭하면 맨 위 음료가 컵 위로 들려 올라가고, 다른 컵을 탭하면 그쪽으로 부어집니다. 같은 컵을 다시 탭하면 내려놓습니다. 끌기 미리보기와 손가락 추적 코드가 통째로 빠졌습니다.
• 카페로 돌아가는 버튼을 크게 — 퍼즐 화면 위쪽에 항상 보이는 "← 카페" 버튼을 따로 두고, 붐비던 상단 칩들을 정리했습니다.
• 링크 공유 미리보기 — 게임 그림으로 공유 이미지를 만들어 붙였는데, 이미지 주소를 존재하지 않는 주소로 적어 미리보기에 그림이 안 나왔습니다. 다음 커밋에서 실제 배포 도메인을 읽어 오도록 고쳤습니다.
• 완성된 컵을 판에서 치우기 — 완성 표시였던 유니콘 파르페가 컵 전체를 가리던 것을 작은 배지로 줄였고, 6분 뒤에는 아예 완성된 컵을 약 1초 축하 연출 뒤 판에서 빼서 오른쪽 위 "모은 음료" 칸으로 옮겼습니다. 다 끝난 컵이 자리만 차지하지 않게 한 것입니다.

Phase 3~4: 소리, 반짝임, 그리고 매일 올 이유

Phase 3은 감각을 채웠습니다. 효과음은 음원 파일 없이 브라우저의 Web Audio로 그 자리에서 합성합니다. 선택·취소, 붓기, 합치기 아르페지오, 클리어 팡파르, 동전 소리까지 모두 코드입니다. 반짝이는 별·하트 입자도 외부 라이브러리 없이 캔버스로 직접 그렸고, 합쳐진 음료가 포물선을 그리며 "모은 음료" 칸으로 날아가는 연출이 들어갔습니다.

보상형 광고("광고 보고 2배")는 Phase 1부터 버튼 자리만 있었고, Phase 3에서 게임 코드가 광고 회사와 상관없이 showRewardedAd() 하나만 부르도록 구조를 나눴습니다. 지금 저장소에 들어 있는 것은 1.8초짜리 가짜 광고를 흉내 내고 항상 보상을 주는 임시 구현입니다. 실제 광고는 붙이지 않은 상태입니다.

Phase 4는 "매일 들를 이유"입니다. 한국 날짜 기준으로 매일 바뀌는 미션 세 개(레벨 3개 클리어, 음료 8번 합치기, 600코인 벌기), 날마다 첫 방문에 커지는 출석 보너스, 그리고 월 단위 시즌 랭킹이 들어갔습니다. 랭킹 표에 시즌 칸이 아직 없는 데이터베이스에서도 오류 없이 돌아가도록 대비해 두었습니다.

Phase 5: 꾸미기, 그리고 엉뚱한 곳에 열린 화면

Phase 5는 번 코인을 쓰는 곳입니다. 300코인짜리 포스터부터 5만 코인짜리 황금 카운터까지 장식 8종을 사면 카페 그림 속 정해진 자리에 실제로 놓이고, 각각 수익이 영구히 2~15% 오릅니다. 8개를 다 사면 +53%입니다.

처음에는 장식을 목록에서 고르는 상점 창으로 만들었다가, 10분 뒤 카페 그림 위에서 바로 꾸미는 방식으로 바꿨습니다. "꾸미기"를 누르면 카페가 크게 펼쳐지고, 아직 없는 장식 자리에 점선 빈칸이 보입니다. 빈칸을 누르면 구매 창이 뜨고, 사면 그 자리에 장식이 톡 하고 나타납니다. 작은 카페 그림과 큰 꾸미기 화면에서 장식이 똑같은 자리에 오도록 위치를 퍼센트 좌표로 바꿨습니다.

그리고 30분 뒤, 이날의 마지막 커밋이 들어갑니다. 실제 휴대폰에서 꾸미기 화면과 구매 창이 엉뚱한 위치에 열려 깨져 보였습니다. 원인은 화면 전환 애니메이션이었습니다.

• 카페와 퍼즐을 오갈 때 쓰는 등장 애니메이션이 끝난 뒤에도 마지막 상태를 유지하도록(fill-mode: both) 설정돼 있어서, 화면을 감싼 요소에 transform 값이 계속 남아 있었습니다.
• CSS에는 transform이 걸린 요소 안에서는 position: fixed가 화면이 아니라 그 요소를 기준으로 붙는다는 규칙이 있습니다.
• 그래서 화면 전체를 덮어야 할 꾸미기 화면, 구매 창, 랭킹 창, 클리어 창이 모두 화면이 아니라 감싼 요소에 갇혀 있었습니다.

해결은 두 가지였습니다. 애니메이션이 끝나면 transform을 남기지 않도록(fill-mode: backwards) 바꾸고, 꾸미기 화면은 아예 문서 맨 바깥(document.body)에 그리도록 옮겨서 앞으로 어떤 바깥 스타일도 가두지 못하게 했습니다. 커밋에는 휴대폰 화면 흉내(390×844)에서 꾸미기 화면과 랭킹 창이 정확히 화면 전체에 맞는 것을 확인했다고 적혀 있습니다. 애니메이션 한 줄이 그 아래 모든 팝업의 위치를 바꿀 수 있다는, 웹 화면을 만들 때 자주 밟는 함정입니다.

Phase 6~7: 퍼즐을 깊게, 카페를 길게

다음 날 새벽의 Phase 6은 퍼즐 쪽을 깊게 만들었습니다.

• 파워업 3종 — 빈 컵 추가, 컵 맨 위 음료 하나 빼기, 한 수 되돌리기. 코인으로 사거나 광고로 채웁니다.
• 콤보와 별점 — 5초 안에 연달아 컵을 완성하면 점수 배수가 ×1.5부터 ×5까지 쌓이고, 클리어하면 이동 효율에 따라 별 1~3개를 줍니다.
• 손님 주문 — 레벨의 약 65%에서 토끼나 곰돌이 손님이 특정 음료를 주문합니다. 어느 레벨에 주문이 뜨는지는 레벨 번호로 정해져 있어 다시 해도 같습니다.
• 데일리 룰렛 — 하루 한 번 무료로 돌리는 확률 가중 룰렛입니다.

7월 6일 밤에는 작은 연출 하나가 추가됐습니다. "다시 섞기"를 누르거나 새 레벨에 들어가면 판이 한 번에 툭 바뀌던 것을, 음료가 아래에서 위로, 왼쪽 컵부터 오른쪽 컵으로 차례로 떨어져 자리 잡게 바꿨습니다. 마지막 Phase 7은 누적 기록으로 받는 업적 11종과, 광고를 보면 5분 동안 카페 수익이 2배가 되는 해피아워입니다. 해피아워 종료 시각은 일부러 저장하지 않는다고 커밋에 적혀 있습니다.

돌아보며

스위트 소트 잼의 기록에서 눈에 띄는 것은 단계의 순서입니다. 퍼즐(1) 다음에 바로 카페(2)를 붙여 두 축을 먼저 세웠고, 감각(3), 매일 올 이유(4), 코인을 쓸 곳(5)을 차례로 얹은 뒤에야 퍼즐 자체를 깊게(6) 만들었습니다. 그리고 단계 사이마다 끌기 조작, 상점 창, MERGE! 글자, 다 끝난 컵처럼 처음 만든 것을 지우는 커밋이 끼어 있습니다.

왜 이 게임을 만들었는지, 왜 7월 7일 이후로 커밋이 없는지는 기록에 없습니다. 저장소에 남은 것은 나흘 동안 일곱 단계를 쌓은 순서와, 그 사이에 직접 해 보고 고친 흔적입니다.