얼마씩 (eolmassik)
가입 없이 링크 하나로 끝내는 1/N 정산
여러 명이 함께 쓴 돈을 항목별로 입력하고, 누가 얼마씩 더 낼지 조정한 뒤, 카카오톡으로 공유하는 모바일 웹 서비스다.
왜 만들었나
정산할 때 실제로 나오는 말은 "우리 얼마씩 내면 돼?" 다. 그런데 이 질문에 답하기가 생각보다 번거롭다.
- 카톡에서 암산하면 항목이 세 개만 넘어가도 틀린다
- 기존 정산 앱은 가입과 앱 설치, 친구추가를 요구한다. 한 번 쓰고 말 정산에는 과하다
- "이건 우리가 낼게" 같은 조정을 어느 도구도 깔끔하게 처리하지 못한다
얼마씩은 이 세 가지만 푼다.
주요 기능
불균등 부담을 일급 기능으로
"13,000원 중에 우리가 8,000원 낼게", "바베큐 비용은 우리가 낼게". 이런 조정이 예외 처리가 아니라 기본 기능이다. 금액을 넣으면 나머지 인원이 각각 얼마를 내게 되는지 바로 보여준다.
최소 송금 계산
각자의 (결제액 − 부담액)을 구해 채권과 채무를 매칭한다. 6명이면 최대 15건까지 나올 송금을 5건 이하로 줄인다.
서버 없는 링크 공유
정산 데이터를 압축해 URL fragment에 넣는다. 데이터베이스도 로그인도 없이 링크 하나로 공유된다.
| 참여자 | 항목 | 압축 후 URL |
|---|
| 5명 | 10개 | 586자 |
| 8명 | 30개 | 1,200자 |
| 12명 | 100개 | 2,831자 |
항목 구조가 반복되기 때문에 항목이 늘어도 URL은 선형 이하로만 길어진다. 현재는 1,500자를 넘으면 텍스트 복사를 안내하며, 단축 URL 백엔드는 후속 버전에서 추가한다.
기술 스택
| 영역 | 사용 기술 |
|---|
| 프레임워크 | React, Vite |
| 언어 | TypeScript |
| 라우팅 | TanStack Router (파일 기반) |
| 상태 관리 | Zustand |
| 스타일 | Tailwind CSS |
| 공유 | lz-string, Kakao JavaScript SDK |
| 검증 | Zod |
| 테스트 | Vitest, fast-check |
| 린트·포맷 | Biome |
| 배포 | Vercel |
시작하기
Node 22 이상과 pnpm이 필요하다.
pnpm install
pnpm dev # http://localhost:3000
카카오 공유를 쓰려면 .env.local에 JavaScript 키를 넣는다. 키가 없으면 카카오 공유 버튼이 숨겨지고 링크 복사로 폴백한다.
VITE_KAKAO_JS_KEY=your_kakao_javascript_key
카카오 디벨로퍼스의 제품 링크 관리에서 실제 배포 도메인을 웹 도메인으로 등록해야 공유 메시지의 링크가 열린다.
개발
pnpm check-types # 타입 검사
pnpm lint # Biome 린트
pnpm format # 포맷·자동수정 적용
pnpm format:check # 검사만 (CI와 동일)
pnpm test # 단위 테스트
pnpm build # 타입 검사 + 프로덕션 빌드
기능 브랜치에서 작업해 develop으로 PR을 올리고, develop을 main으로 머지한다. PR마다 GitHub Actions가 lint와 build, audit를 검사한다. 셋 다 통과해야 머지할 수 있다. main에 머지되면 Vercel이 프로덕션으로 배포한다.
AI 에이전트 작업 규칙은 CLAUDE.md에 있다.
테스트
돈 계산이 1원이라도 틀리면 서비스를 믿을 수 없게 된다. 그래서 계산 로직은 테스트로 고정해 뒀다. 합계 불변식은 예제 테스트가 아니라 fast-check property 테스트로 검증한다.
pnpm test
- 항목별 부담액의 합 == 항목 금액
- 전체 부담액의 합 == 전체 결제액의 합
- 추가 부담이 항목 금액을 넘는 경우
- 전액 부담자가 여러 명인 경우
- 참여자 1명, 금액 0원 같은 엣지 케이스
프로젝트 구조
src/
├─ features/
│ ├─ participants/ 참여자 입력, 프리셋
│ ├─ items/ 항목 입력, 추가 부담 설정
│ ├─ result/ 부담액·송금 계산 결과
│ └─ share/ 공유 액션 UI 컴포넌트
├─ lib/
│ ├─ calc/ 정산 계산 로직 (순수 함수 + 테스트)
│ ├─ codec/ URL 인코딩·디코딩 (키 축약 스키마)
│ └─ share/ 공유 텍스트·URL 생성, 외부 공유 연동
├─ routes/ 화면 (/ 편집, /s 읽기 전용)
├─ store/ Settlement 전역 상태
├─ constants/ 기본 옵션, 임계값
├─ types/ 도메인 모델
└─ styles/ 디자인 토큰, 전역 스타일
lib/ 바로 아래에는 공통 유틸(format.ts, cn.ts)이 있다.
계산 로직(lib/calc)은 UI에 의존하지 않는 순수 함수로 분리해 뒀다.
라이선스
MIT
