본문으로 건너뛰기
/home/soohan

화장실 효과음 미니앱으로 앱인토스 챌린지에 참여해보기

앱인토스 바이브코딩 챌린지 "하찮아도 괜찮아"를 보고, 버튼을 누르면 화장실 효과음이 나는 미니앱 "변동성"을 Claude Code와 하루 만에 만들어 출품했고 토스 앱에 배포했다.

5#react#typescript#claude-code#web-audio#apps-in-toss
변동성 미니앱의 기본 화면, 자동 재생 설정, 기록 패널을 나란히 보여주는 이미지
버튼을 눌러 소리를 내는 기본 화면, 자동 재생과 환풍기 설정, 기록 패널입니다.

"오늘의 변동성을 소리로 확인해요"

화장실에서 잠깐 더 머물고 싶은데 밖에서 눈치가 보일 때 쓰는 앱이에요. 버튼을 누르면 화장실에서 들릴 법한 효과음이 재생돼서, 밖에서 들으면 정말 볼일을 보고 있는 것처럼 들려요. 앱 이름은 便동성과 변동성을 겹친 말장난이에요.

앱을 열면 화면 가운데에 큰 버튼 하나가 보여요. 버튼을 누르면 효과음이 무작위로 재생되고, 화면에는 소리에 맞는 의성어가 함께 떠요. 가끔 여러 소리가 이어지는 콤보가 나오기도 해요.

큰 버튼 아래에는 물 내리기, 휴지 뜯기, 힘주기 버튼이 있어서 원하는 소리를 직접 골라 재생할 수도 있어요. 자동으로 소리 내기를 켜면 느리게, 보통, 빠르게 중 고른 간격으로 소리가 저절로 나고, 환풍기 소리를 배경에 깔 수도 있어요. 화면 오른쪽 위 토글을 누르면 모든 소리를 한 번에 끄고 켤 수 있어요.

화면 위에는 머문 시간이, 아래에는 지금까지 재생한 횟수가 쌓여요. 기록 보기 버튼을 누르면 오늘과 누적 기록, 연속으로 온 날, 등급을 볼 수 있어요. 친구에게 공유하기를 누르면 앱 링크를 보낼 수 있어요.

효과음이 모두 앱 안에 들어 있어서 인터넷 연결 없이도 들을 수 있어요.

2026년 8월 앱인토스 바이브코딩 챌린지의 주제는 "하찮아도 괜찮아"였습니다. 주제를 보자마자 회사 화장실에서 잠깐 주식 창을 볼 때, 밖에서는 열심히 볼일을 보는 것처럼 들리게 하면 어떨까 하는 생각이 났습니다.

그렇게 만든 것이 화장실 효과음 미니앱 변동성입니다. 便동성과 주식의 변동성을 겹친 이름이고, 저장소에서는 toss-poopatility라고 불렀습니다. 거창한 문제를 해결하려던 프로젝트라기보다, 챌린지를 계기로 떠오른 농담 하나를 실제 앱인토스 번들까지 만들어본 작업입니다.

버튼 하나면 농담이 성립하도록

앱 가운데에는 큰 버튼이 하나 있습니다. 누르면 힘주는 소리, 방귀 소리, 떨어지는 소리 중 하나가 무작위로 재생되고 화면에는 끄응..., 뿌직!, 퐁당! 같은 의성어가 나타납니다. 가끔은 두세 소리가 이어지는 콤보도 나옵니다.

원하는 상황을 직접 만들 수 있도록 물 내리기, 휴지 뜯기, 힘주기 버튼을 따로 뒀습니다. 자동 재생을 켜면 고른 간격으로 소리가 나오고, 환풍기 소리를 배경에 계속 깔 수도 있습니다. 앱을 열어둔 시간을 보여주고 소리를 낸 횟수도 기록합니다.

기능을 늘려 농담을 설명하기보다 처음 봐도 누를 곳을 알 수 있는 한 화면으로 만들었습니다. 화면을 열고 큰 버튼을 누르면 바로 소리가 나는 흐름이 이 앱의 전부입니다.

Claude Code로 먼저 만들고 귀로 다시 고치기

아이디어와 방향을 정한 뒤 Claude Code로 첫 구현을 만들었습니다. 2026년 8월 5일 하루 동안 여덟 개의 커밋으로 기본 화면부터 스토어 이미지와 앱인토스 설정까지 정리했습니다. 코드가 빠르게 나온 덕분에 바로 실행해보고 다음 판단으로 넘어갈 수 있었습니다.

처음 버전은 Web Audio로 효과음을 실시간 합성했습니다. 코드만 봤을 때는 그럴듯했지만 직접 들어보니 너무 구리고 부자연스러웠습니다. 사운드가 핵심인 앱에서는 동작한다는 사실만으로는 완료라고 할 수 없었습니다.

그래서 합성 코드를 버리고 Mixkit 무료 음원 16개와 Wikimedia Commons의 CC0·퍼블릭 도메인 음원 6개로 바꿨습니다. 앞뒤 무음을 자르고 짧은 페이드를 넣은 뒤 음량과 피크를 맞춰, 종류를 바꿔도 갑자기 커지거나 작아지지 않게 했습니다.

같은 파일을 반복해서 듣는 느낌도 줄였습니다. 방금 재생한 파일은 다음 후보에서 빼고, 최근에 나온 종류의 가중치를 낮춥니다. 재생 속도도 매번 0.92배에서 1.08배 사이로 조금씩 바꿉니다. 결과가 완전히 만족스럽지는 않지만 처음의 합성음보다는 훨씬 나아졌습니다.

Mixkit 음원은 앱에 포함해 사용하는 것은 허용하지만 원본 음원을 따로 재배포하는 조건은 애매하게 느껴졌습니다. 그래서 저장소는 비공개로 유지하고, 음원별 출처와 잘라낸 구간, 가공 내역은 저장소 안의 CREDITS.md에 따로 기록했습니다.

브라우저에서 끝내지 않고 미니앱 번들까지

화면은 React와 TypeScript, Vite로 만들고 앱인토스 Web Framework를 붙였습니다. 브라우저에서도 기본 화면과 소리는 확인할 수 있지만, 토스 앱 안에서는 햅틱, 기록 저장, 공유, 화면 꺼짐 방지 같은 SDK 기능을 함께 사용합니다. SDK 호출이 지원되지 않거나 실패해도 기본 기능은 계속 쓸 수 있도록 각 호출을 안전하게 감쌌습니다.

자동 재생 중에는 화면이 꺼지지 않게 요청하고, 앱이 백그라운드로 가면 소리를 즉시 멈춥니다. 음원 22개는 첫 버튼 입력 때 받아 디코딩한 뒤 메모리에 보관하므로, 그다음부터는 번들 안의 소리를 바로 재생합니다. 카메라나 위치 같은 네이티브 권한은 요구하지 않습니다.

마지막에는 앱 ID와 브랜드 색상, 비게임 분류, 스토어용 로고와 스크린샷을 맞추고 .ait 번들을 생성했습니다. 만들어진 번들은 약 1.5MB입니다.

심사를 통과해 토스 앱에 배포되기까지

배포 전에는 린트와 프로덕션 번들 빌드를 확인한 뒤 콘솔에 번들을 등록하고 챌린지 신청과 검토를 요청했습니다. 자동화 테스트는 따로 만들지 않았습니다.

이후 앱인토스 심사를 통과했고, 현재는 토스 앱에 배포된 상태입니다. 변동성 미니앱 열기를 누르면 토스 앱에서 직접 실행해볼 수 있습니다.

하찮은 아이디어를 번들까지

챌린지가 아니었다면 화장실 효과음이라는 생각을 실제 앱으로 만들지는 않았을 것 같습니다. 지금도 과연 누가 쓸까 싶긴 하니까요ㅎㅎ

아무튼 "하찮아도 괜찮아"라는 주제가 시작할 이유가 됐고, 번뜩이는 하찮은 아이디어와 함께 하루 만에 실행 가능한 미니앱과 배포용 번들을 만들고, 실제 배포까지 이어갈 수 있었습니다.

바이브코딩으로 인해 첫 결과를 빠르게 만드는 데 도움이 됐지만, 사운드 앱에서 가장 중요한 판단은 직접 들어보는 작업이었습니다. 생성된 코드가 동작하는 것과 내가 듣기에 괜찮은 것은 달랐고, 녹음 음원으로 바꾸고 반복감을 줄이는 과정은 결국 직접 듣고 고쳐야 했습니다.

처음에는 앱 검토 결과를 알 수 없는 채 번들을 제출했지만, 이후 심사를 통과해 앱인토스에 실제로 배포됐습니다. 하찮은 아이디어를 머릿속 농담으로 끝내지 않고 토스 앱에서 직접 실행해볼 수 있는 결과물로 이어갔다는 것이 나름 의미 있던 작업이었던 것 같습니다.

이 글의 Markdown 원문 →