본문 바로가기
카테고리 없음

미니앱 기획하기 - 쫀득 슬라임

by 테크구루스 2026. 8. 5.

쫀득 슬라임이라는 미니앱을 개발, 런칭하며 겪은 내용을 바탕으로 기록해보겠습니다. 감각을 코드가 지킬 물성 원칙으로 못박은 쫀득 슬라임(playwithslime)의 기획 이야기입니다.

부수는 공을 보다가, 만지는 반죽이 하고 싶어졌습니다

시작점은 왁뿌볼이었습니다. 앱인토스(토스 미니앱)에 이미 올라와 있는, 3D 공을 손가락으로 돌려가며 클릭해 부수는 미니앱이죠. 이걸 레퍼런스로 삼은 이유는 단순합니다. 토스 WebView 안에서 three.js 3D가 매끄럽게 돈다는 것, 그리고 화면 속 물체를 손가락으로 만지는 인터랙션이 사람을 붙잡는다는 것을 이미 증명한 포맷이었으니까요. 검증된 무대를 처음부터 다시 깔 이유는 없었습니다.

다만 같은 걸 하나 더 만들 생각은 없었습니다. 부수기는 본질적으로 목표가 있는 게임입니다. 공이 있고, 깨면 끝나고, 다음 공이 나오죠. 저는 목표가 없는 쪽이 궁금했습니다. 깨지 않고, 이기지도 않고, 그냥 계속 만지작거리게 되는 것. 그래서 컨셉을 한 문장으로 이렇게 못박았습니다. "부수는 공이 아니라, 진짜 밀가루 반죽 같은 슬라임을 만진다." 축이 부수기(destroy)에서 만지기(touch)로 넘어간 순간이었습니다.

여기서 기획의 핵심 가치도 딱 하나로 좁혔습니다. 바로 촉감입니다. 기획서 §1에 저는 이렇게 적어 뒀습니다. "화려한 기능보다 '진짜 만지는 것 같다'는 감각이 전부다." 레벨도, 점수도, 컬렉션도 아니고 그저 손끝의 물성 하나. 앱 이름이 원래 "쫀득 슬라임 월드"였는데 2026-07-31에 "월드"를 떼고 "쫀득 슬라임"으로 줄인 것도 같은 맥락입니다. '월드'라는 말에는 세계관이니 스테이지니 하는 확장 욕심이 배어 있었고, 그 욕심이 촉감 하나에 집중하겠다는 결심을 흐리게 했거든요. 브랜드 컬러도 반죽이 신선해 보이는 연둣빛 #5EE87F 하나로 고정했습니다.

스코프를 좁히는 일은 곧 기능을 빼는 결단이기도 했습니다. 왁뿌볼처럼 "많이 주무르면 보상" 같은 목표 이벤트를 붙이자는 아이디어도 있었지만, 기획서 로드맵(§8)에 저는 그걸 "촉감이 완성된 뒤에만 검토"로 미뤄 뒀습니다. 감각이 먼저 서지 않은 상태에서 게임성을 얹으면, 사람들은 반죽을 만지는 게 아니라 점수를 좇게 되니까요. 재미 요소야 나중에 얼마든지 더할 수 있지만, 핵심 감각은 처음에 못 잡으면 나중에 덧칠해서 살아나지 않는다고 봤습니다.

미니앱 기획하기 - 쫀득 슬라임
미니앱 기획하기 - 쫀득 슬라임

"촉감"은 너무 말랑한 단어라, 8개 규칙으로 못박았습니다

문제는 "촉감이 전부다"가 개발 스펙이 될 수 없다는 것이었습니다. 감각은 컴파일되지 않으니까요. 코드에게 "반죽처럼 느껴지게 해줘"라고 말할 수는 없습니다. 그래서 기획서에서 가장 공들인 절이 §2 물성 원칙입니다. 제목 옆에 대놓고 "가장 중요 — 절대 어기지 말 것"이라고 붙여 뒀죠.

이 8개 규칙 전체를 관통하는 문장은 딱 하나입니다. "탱탱볼이 아니라 밀가루 반죽이다." 이 한 줄이 이후의 모든 판단을 갈랐습니다. 탱탱볼은 탄성체입니다. 늘리면 튕겨 돌아오고, 누르면 출렁이고, 던지면 통통 튀죠. 반죽은 소성체입니다. 늘린 자리에 그냥 있고, 누른 자국이 남고, 아무리 주물러도 출렁이지 않습니다. 저는 규칙 8개를, 사람들이 3D 물체에서 무심코 기대하는 '가짜 탱탱볼 감각'을 하나씩 금지하는 방식으로 적었습니다.

  • 놓으면 그 자리에 — 잡아 늘리고 손을 떼면 그 모양 그대로 있어야 합니다(①스냅백 없음). 충분히 주무르면 원래 구형을 아예 잊습니다(②영구 변형). 이건 감으로 두지 않고 실측 기준을 박았습니다. "놓고 10초 뒤 형상 변화 1% 미만."
  • 진짜 덩어리답게 — 한쪽을 누르면 다른 쪽이 불룩 밀려 나오고(③비압축성, 전역 부피 보존), 모든 움직임은 과감쇠라 진동이 없으며(④점성), 주무른 표면은 종이 구겨지듯 각지지 않고 반죽처럼 둥글게 뭉개집니다(⑤라플라시안 스무딩).
  • 감각을 지키는 안전장치 — 영구 변형이니 되돌릴 "모양복원" 버튼이 반드시 필요하고(⑥), 덩어리는 화면에서 절대 이동하지 않으며(⑦질량중심 원점 고정), 아무리 당겨도 무한정 늘어나지 않습니다(⑧최대 크기 소프트 바운드).

이렇게 적어 두니 인터랙션 명세(§3)도 자연스럽게 따라 나왔습니다. 한 손가락 드래그는 늘리기·주무르기, 슬라임 위에서 두 손가락을 벌리면 듀얼 그랩, 짧은 탭은 콕 찌르기, 더블탭은 손가락으로 깊이 0.85까지 푹 눌러 자국을 영구히 남기기. 전부 "반죽을 만지는 손동작"이라는 하나의 은유에서 파생된 것들이죠.

UI도 이 감각을 방해하지 않는 쪽으로 정리했습니다(§3.5). 배경은 반죽이 도드라지는 흰색 #f2f4f6(토스 톤)으로 깔고, 앱에 진입하면 슬라임이 저 멀리 작게 보이는 줌아웃 상태에서 시작하도록 했습니다. 만지기 전에 '멀찍이 놓인 한 덩이'를 먼저 눈에 담고, 핀치로 당겨 확대한 다음 손을 대게 하려는 순서였죠. 아이콘도 흔한 이모지 대신 직접 그린 SVG로 통일했는데, 이모지의 제각각인 톤이 반죽 한 덩이에 집중된 화면의 결을 흐트러뜨린다고 느꼈기 때문입니다.

감각을 지키려, 세 가지를 코드에서 금지했습니다

기획서를 쓸 때 제가 가장 신경 쓴 지점이 여기입니다. 물성 원칙은 감상이 아니라 개발 스펙이어야 한다는 것. 실제로 SlimePhysics.ts를 열어 보면 원칙의 금지 조항이 그대로 상수와 함수가 되어 있습니다.

첫째, 스냅백 금지입니다. 고무줄처럼 튕겨 돌아가는 순간 반죽은 실패입니다. 그래서 마지막 손가락을 떼는 endGrab에서 commitPlasticState()를 호출해, 지금 이 모양을 그대로 "원래 모양"(rest shape)으로 확정하고 속도를 0으로 죽입니다. 돌아갈 원본이 매 순간 갱신되니 튕길 것 자체가 없어지는, 스냅백의 원리적 제거죠. 그런데 여기서 재미있는 역설이 생깁니다. 안 돌아오게 만들었더니, 사용자가 반죽을 알아볼 수 없게 뭉개 놓으면 되돌릴 방법이 없어진 겁니다. 그래서 "모양복원" 버튼이 옵션이 아니라 필수가 됐습니다. 이 버튼 이름도 "새 슬라임"에서 "리셋"을 거쳐 결국 "모양복원"으로 바뀌었는데(2026-07-31), 색과 파츠 커스텀은 유지한 채 모양만 매끈한 구로 되돌린다는 의미를 이름에 담고 싶었기 때문입니다.

둘째, 멀미 금지입니다. WebView에서 손가락으로 덩어리를 당길 때, 놓은 뒤 중심이 화면에서 스르륵 미끄러져 돌아가면 그게 곧 멀미를 유발합니다. 그래서 질량중심을 매 프레임 원점에 정확히 고정했습니다(무중력 반죽). 당기면 모양만 변하고 몸통은 제자리죠. 카메라로 덩어리를 따라가는 흔한 방식은 오히려 더 어지러워서 기획 단계에서 아예 금지했습니다.

셋째, 무한 늘어남 금지입니다. 이건 솔직히 처음 기획엔 없던 조항입니다. 초안에는 늘림에 상한이 없었는데, 2026-07-30에 "무한정 늘어나는 건 반죽답지 않다"며 명시적으로 기각하고 규칙 ⑧을 새로 넣었습니다. 코드로는 중심에서 벗어날 수 있는 최대 거리를 MAX_RADIUS = 2.75, 소성 엣지의 휴지 길이 상한을 원본의 3배(MAX_EDGE_STRETCH = 3.0)로 잡았습니다. 다만 한계에 닿았다고 딱딱한 벽에 눌린 듯 평면으로 뭉개지면 그것도 반죽 감각을 깨므로, 한계 근처에서 부드럽게 안쪽으로 되돌아오는 소프트 바운드로 처리했죠.

정리하면 이 앱의 기획은 "무엇을 넣을까"의 목록이 아니라, 가짜 감각을 무엇무엇 금지할까의 목록에 가깝습니다. 스냅백·멀미·무한 늘어남을 코드에서 못하게 막는 순간, 남는 감각이 곧 반죽이었으니까요. 다음 편에서는 이 원칙들을 실제로 지탱하는 XPBD 소프트바디 물리를 뜯어보겠습니다.