Blog

case-study

정산칠판 출시와 웹 버전 분리 기록

작성 2026-06-29 · 수정 2026-07-22 · zozindev

정산칠판을 일단 출시했다. 2026년 6월 26일에 Apps in Toss 모바일 미니앱으로 올렸고, 2026년 6월 29일부터는 웹 버전도 열어뒀다.

웹 주소는 https://dutchpay.zozindev.com/ 이다.

토스 인앱 링크도 있다. https://minion.toss.im/3rZQFs9h 로 열 수 있다. 다만 이건 모바일에서, 특히 토스 앱으로 이어질 수 있는 환경에서 여는 링크로 보는 게 맞다. PC에서 누르면 기대한 흐름으로 안 열릴 수 있다.

Apps in Toss 정산칠판 출시 화면

이전 글에서는 MVP를 만들고 있다고 적었다. 그때는 모임 만들기, 영수증 입력, 정산 계산 정도를 잡아둔 상태였다. 이번에는 거기서 한 단계 더 갔다. 토스 인앱에 실제로 출시했고, 같은 기능을 웹에서도 쓸 수 있게 분리했다.

출시

Apps in Toss 출시일은 2026년 6월 26일이다. 콘솔에는 현재 출시된 버전이 20260625-27로 잡혀 있고, 출시 시간은 2026. 06. 26 09:58로 표시된다.

인앱토스에서 바로 열 때는 모바일용 Toss 인앱 링크를 쓰면 된다. 이 링크는 웹 버전 주소와 역할이 다르다. dutchpay.zozindev.com은 일반 브라우저용 웹앱이고, minion.toss.im 링크는 모바일에서 토스 앱 안으로 들어가는 진입 링크다.

출시하면서 크게 막힌 건 없었다. 이건 좀 의외였는데, Apps in Toss 쪽 개발자 가이드라인이 생각보다 잘 되어 있었다. 뭘 확인해야 하는지, 어떤 식으로 빌드하고 올려야 하는지가 비교적 명확했다.

그래서 이번 작업에서 힘들었던 건 출시 버튼 자체보다 구조 정리 쪽이었다. 인앱토스용으로만 두면 토스 안에서는 쓸 수 있지만, 바깥에서 링크를 열거나 검색 유입을 받거나 개인 도메인에 남기기에는 애매하다. 그래서 웹 버전을 따로 만들었다.

웹 버전을 따로 만든 이유

정산칠판은 모바일에서 쓰는 도구다. 여행 중이든 회식 끝나고든 보통 폰으로 입력하고 단체방에 던진다. 그래서 웹 버전도 PC용 대시보드처럼 바꾸지 않았다. 모바일 UI를 그대로 유지했다.

대신 PC에서 열었을 때 너무 빈 화면처럼 보이지 않게 바깥 배경을 넣었다. 가운데는 480px 정도의 모바일 앱 프레임을 유지하고, 바깥은 교실 배경처럼 보이게 했다. 이름이 정산칠판이라서 이 방향이 맞았다.

인앱토스 버전과 웹 버전의 기능 차이는 거의 없다. 핵심 사용 흐름은 같다. 모임 만들고, 사람 넣고, 영수증 추가하고, 마지막에 누가 누구에게 얼마 보내면 되는지 보는 구조다.

차이는 실행 환경이다.

토스 안에서 도는 앱은 Apps in Toss 환경을 기준으로 보고, 웹 버전은 일반 브라우저와 Cloudflare Pages 배포를 기준으로 본다. 그래서 웹 버전에서는 Toss 네이티브 기능을 억지로 들고 오지 않았다.

구조를 나눴다

웹 버전을 만들면서 저장소 구조도 바꿨다.

apps/toss-miniapp
apps/web
packages/core

기존 앱은 apps/toss-miniapp으로 옮겼다. 웹 버전은 apps/web으로 새로 만들었다. 정산 계산, 상태 타입, 요약 로직처럼 양쪽에서 같이 써야 하는 코드는 packages/core로 뺐다.

루트 package.json은 npm workspace 구조로 바꿨다.

npm run dev:toss
npm run build:toss
npm run dev:web
npm run build:web
npm run build

Cloudflare Pages는 웹 앱 산출물만 보면 된다.

Root directory: /
Build command: npm run build:web
Build output directory: apps/web/dist
Deploy command: 비워두기

처음부터 저장소를 두 개로 쪼갤 수도 있었지만, 지금은 공통 로직이 더 중요했다. 정산 계산이 인앱토스와 웹에서 다르게 움직이면 안 된다. 그래서 앱은 나누고, 계산은 하나로 묶었다.

지금 들어간 기능

현재 기능은 이 정도다.

이전 MVP보다 좋아진 건 영수증 수정/삭제와 공유용 이미지 쪽이다. 정산 결과를 텍스트로만 복사하는 것보다 이미지로 만들어 저장할 수 있으면 단체방에 던지기 편하다.

정산 로직은 여전히 단순하게 유지했다. 누가 얼마 냈고, 누가 같이 썼는지 넣으면 각자 낸 돈과 쓴 돈을 계산한다. 많이 받을 사람과 많이 보낼 사람을 매칭해서 송금 줄 수를 줄인다. 이 앱의 핵심은 여기다.

일부러 뺀 것

웹 버전으로 옮기면서 뺀 것도 많다.

Apps in Toss SDK, Toss native Storage, Toss 공유 링크, Toss 인앱 광고, 보상형 광고, Toss 리뷰 요청, Toss 네이티브 파일 저장, intoss:// 진입 URL은 웹 버전에 넣지 않았다.

로그인, 서버 저장, DB, serverless API, 여러 사람 공동 편집도 뺐다. 토스 송금 딥링크도 뺐다.

이건 기능을 못 넣어서가 아니라, 지금 단계에서 넣으면 앱의 성격이 흐려진다고 봤다. 정산칠판은 일단 빠르게 열고 바로 계산하는 도구다. 로그인하고 방 만들고 공동 편집까지 가면 편해지는 부분도 있겠지만, 그만큼 관리할 것도 늘어난다.

송금 딥링크도 마찬가지다. 정산 결과에서 바로 송금까지 가면 좋아 보이지만, 공식 기준과 사용자 맥락을 확실히 맞춰야 한다. 돈과 연결되는 기능은 대충 붙이면 안 된다.

웹 주소와 공유 정보

웹 버전은 dutchpay.zozindev.com 기준으로 정리했다.

앱을 서브도메인에서 열었을 때 주소와 공유 미리보기가 일치하도록 아래 파일을 같이 정리했다.

이런 것들은 계산 기능처럼 눈에 띄지는 않지만, 웹으로 열어두는 순간 제품 표면이 된다. 링크를 공유했을 때 앱 이름과 설명이 맞아야 하고, JavaScript를 끈 상태에서도 사용법과 데이터 저장 방식을 읽을 수 있어야 한다.

그래서 이번에는 앱 하나를 웹에 올리는 것으로 끝내지 않고, 도메인 기준으로 읽히는 파일까지 같이 맞췄다.

정리

이번 작업은 정산칠판을 “만든 앱”에서 “열 수 있는 앱”으로 바꾼 작업이었다.

2026년 6월 26일에는 Apps in Toss에 모바일 미니앱으로 출시했고, 2026년 6월 29일에는 dutchpay.zozindev.com 웹 버전을 열었다. 인앱토스와 웹의 기능 차이는 거의 없고, 웹에서도 모바일 UI를 그대로 쓴다. 대신 웹 배포, 도메인, 공유 메타와 정적 안내 페이지까지 챙겼다.

정리하면 링크는 두 개다. 일반 웹은 dutchpay.zozindev.com이고, 토스 앱에서 열 모바일 인앱 링크는 minion.toss.im/3rZQFs9h다. 후자는 모바일 접속 기준으로 안내하는 게 맞다.

지금은 아직 큰 서비스라고 부를 단계는 아니다. 그래도 모임 정산이라는 작은 문제 하나는 끝까지 밀어붙였다. 계산기 켜고, 카톡에 금액 적고, 누가 얼마 냈는지 다시 묻는 일을 줄이는 도구. 정산칠판은 계속 그 정도로 단순하게 가는 게 맞다.