[앱인토스] 월급타이머(PayClock)

[ 월급타이머 (PayClock) ]

"지금 이 순간에도 내 월급은 올라가고 있다"는 아이디어에서 시작했습니다. 출근하면 실시간으로 오늘 번 금액이 올라가고, 그 돈으로 치킨 몇 마리, 에어팟 몇 개를 살 수 있는지 보여주는 앱입니다. 토스 앱인토스에 올릴 수 있는 웹앱으로 만들었습니다.       

 

 

스크린샷 / 데모

https://minion.toss.im/FOzuV3Q6

토스 버티면 돈이 된다

 

https://youtube.com/shorts/XAvcIhjsK3I?feature=share

 

 

 

 

기술 스택

Frontend	React 19 + TypeScript + Vite
스타일링	CSS Modules + CSS Variables (라이트/다크)
데이터 저장	localStorage (Serverless)
모니터링	Vercel Analytics + Speed Insights + 커스텀 에러 로깅
배포	Vercel

 

왜 만들었나

 

하루하루 직장에서 견디고, 힘든 날들을 보내면서 문득 이런 생각이 들었습니다.
 "지금 이 순간에도 내 월급은 올라가고 있을까?"
 회의가 길어질 때, 야근이 끝나지 않을 때, 월요일 아침 알람이 울릴 때 버티는 이유는
  결국 하나였습니다. 통장에 찍히는 숫자.
  
  그런데 월급은 한 달에 한 번만 옵니다. 그 사이 30일 동안은 내가 얼마를 벌고 있는지      
  체감할 수가 없습니다. 그래서 만들었습니다.

  출근한 순간부터 돈이 올라가는 걸 눈으로 보여주는 앱.

  지금 이 시간에 치킨 2.3마리를 벌었고, 에어팟 0.4개를 벌었다는 걸 알면 오늘 하루를    
  버틸 이유가 조금은 더 선명해집니다.

  대단한 재테크 앱이 아닙니다. 그냥 오늘 하루, 출근한 내가 이미 돈을 벌고 있다는 사실을  
  실시간으로 확인하는 앱입니다.

  버티면 돈이 됩니다. 진짜로.

 

배운 점 / 어려웠던 점
  문제 1: 환산 아이템이 의미 없는 숫자로 나온다

  처음에는 매일 랜덤 아이템을 보여줬는데, "한강뷰 아파트 0.00005채"처럼 와닿지 않는      
  숫자가 표시됐습니다.

  해결: getBestItems() 함수로 현재 수입에 맞는 가격대 아이템을 자동 선택. count가 0.5~99 
  범위인 아이템만 후보로 골라서 "스타벅스 3.2잔", "에어팟 0.8개"처럼 체감되는 숫자를     
  표시.

  문제 2: 이미지 저장인데 메인 화면이 안 예쁘다

  이미지 저장 기능을 넣었는데, 메인 화면을 그대로 캡처하면 디자인이 밋밋했습니다. 메인   
  UI를 영수증 스타일로 바꿨더니 평소 사용성이 떨어졌습니다.

  해결: 메인 화면은 그대로 유지하고, 화면 밖(left: -9999px)에 영수증 스타일 컴포넌트를   
  숨겨둔 뒤 이미지 저장 시에만 캡처. 사용성과 공유용 디자인을 분리.

  문제 3: 서버 없이 데이터를 유지해야 한다

  토스 앱인토스는 웹뷰 기반이라 별도 서버 없이 동작해야 합니다. Vercel은 서버리스라      
  사용자별 상태를 유지할 수 없습니다.

  해결: 출석 기록, 설정, 스트릭 등 모든 데이터를 localStorage에 저장. 토스 앱을 삭제하지 
  않는 한 데이터 유지. 에러 발생 시 Vercel Analytics로 원격 모니터링.

  링크
  
   - GitHub: https://github.com/miracle380301/toss_hanginthere
   - 서비스: 토스 앱인토스 (심사 예정)

      반려 ) 사유 : 앱 제목은 ~다 체로 하면 안됨.

 
 다음 계획

  - 토스 앱인토스 심사 제출 -> 앱 출시 2026-02-13
  - 광고 SDK 연동 (Google AdMob)
  - 기기 간 데이터 동기화 (백엔드 추가 시)
  - 환산 아이템 사용자 커스텀 기능