앱인토스 미니앱 2 – 카드값 페이스

앱인토스 미니앱 제작기 두 번째는 카드값 페이스입니다. 이번 달 카드 예산과 결제일, 지금까지 쓴 금액을 넣으면 오늘 얼마까지 써도 괜찮은지 알려주는 앱이에요.

계산기는 한 번 보면 볼일이 끝나기 쉽습니다. 이 앱은 매일 열어 볼 이유가 있는 앱으로 만들고 싶었고, 이 글은 그러려고 화면과 코드를 어떻게 짰는지에 대한 기록입니다.

카드값 페이스는 어떤 앱인토스 미니앱인가

입력란은 세 칸이 전부고, 계산을 누르면 오늘 안전하게 쓸 수 있는 금액과 월말 예상 카드값이 나옵니다. 카드사와 연동하는 앱은 아니어서 넣은 숫자만 가지고 계산하는데, 금융상품을 추천하거나 신용을 판단하는 앱으로 보이지 않도록 그 점을 화면에 적어 뒀습니다. 개인 카드 사용액을 다루는 앱이라 공유 기능은 처음부터 뺐고요.

매일 열 이유를 어디서 찾았나

“오늘 쓸 수 있는 금액”을 한 번 확인하면 이 앱에서 할 일은 일단 끝납니다. 지출을 하나하나 적게 만드는 방법도 있지만 그건 사용자한테 일을 시키는 거라, 다른 데서 이유를 찾고 싶었어요.

그런데 가만히 보면 이 앱에는 이미 쓸 만한 재료가 있었습니다.

기능을 새로 붙이기 전에 이 두 가지부터 화면에 드러내 보기로 했습니다.

매일 달라지는 숫자 하나

계산은 네 줄이면 끝납니다.

const dailySafe = remaining / cycle.daysRemaining;
const projected = Math.max(totalUsed, (totalUsed / cycle.elapsedDays) * cycle.cycleDays);
const paceRatio = plan.budget > 0 ? projected / plan.budget : 0;
const tone: PaceTone = paceRatio <= 0.9 ? 'safe' : paceRatio <= 1.05 ? 'watch' : 'danger';

dailySafe는 남은 예산을 남은 날 수로 나눈 값이라, 사용자가 아무것도 안 해도 하루가 지나면 숫자가 달라집니다. 매일 열어볼 이유로 삼기에 딱 좋은 값이죠.

하루에 한 칸씩 쌓이는 기록

매일 앱을 열면 칸이 하나 채워지고 그날 상태가 색으로 남습니다. 물마시기처럼 쌓이는 게 눈에 보이는 구조를 가져왔습니다.

export function recordCheckIn(checkIns, dateKey, tone) {
  const list = (Array.isArray(checkIns) ? checkIns : []).filter((item) => item && item.date);
  const index = list.findIndex((item) => item.date === dateKey);
  if (index >= 0) {
    // 같은 날 상태가 나빠졌으면 갱신한다. 좋아진 쪽으로는 되돌리지 않는다 —
    // 하루 중 한 번이라도 초과했으면 그날은 초과한 날이다.
    const next = [...list];
    if (RANK[tone] > RANK[next[index].tone]) next[index] = { ...next[index], tone };
    return next;
  }
  return [...list, { date: dateKey, tone }].slice(-90);
}

여기서 신경 쓴 건 하루 안에서 상태가 바뀔 때입니다. 나빠지면 그날 칸을 고치지만 좋아졌다고 되돌리지는 않아요. 하루 중 한 번이라도 초과했으면 그날은 초과한 날로 남기는 게 규칙이고, 같은 날 여러 번 열어도 칸은 하나만 쌓이며 기록은 최근 90칸까지만 둡니다.

알림 동의는 앱을 열자마자 창을 띄우는 대신 이 칸 아래에 제안 카드로만 뒀고, 버튼을 눌러야 동의 요청이 나갑니다.

예산을 고쳐도 연속 기록은 그대로

예산을 고치러 들어오는 건 이 앱을 다시 여는 가장 자연스러운 이유입니다. 그래서 설정을 저장할 때 그동안 쌓은 연속 확인 기록이 같이 보존되도록 했어요.

// 예산 조정은 이 앱에서 가장 자연스러운 재방문 행동이다.
// 여기서 checkIns를 빠뜨리면 그 행동이 연속 기록을 통째로 지운다.
checkIns: initial?.checkIns ?? [],

쓴 돈은 버튼 한 번으로

연속 확인을 넣은 뒤에도 지출 기록은 여전히 접힌 입력 폼 안에 있었습니다. 그래서 10월 초에 물마시기 방식을 한 번 더 빌려 왔어요. 첫 화면에 금액 버튼을 놓고, 누르면 오늘 사용액에 바로 더해지도록 했습니다.

/** 당일 1초 원탭 추가 프리셋 금액 목록 (물마시기 공식) */
export const QUICK_SPEND_PRESETS = [5000, 10000, 20000, 50000];

버튼을 누르면 지출이 한 건 기록되면서 오늘 쓸 수 있는 금액과 예상 카드값이 그 자리에서 다시 계산됩니다. 금액을 정확히 넣고 싶은 사람도 있을 테니 직접입력 버튼은 옆에 남겨 뒀습니다.

기록한 지출은 흩어지지 않게 묶어 보여줍니다. 지출을 추가하면 카테고리 비중이 바로 바뀌고, 한 주의 페이스를 주간 리포트로 저장해 두면 기록 탭에서 다시 볼 수 있어요. 매일 확인한 날은 최근 이레 띠에 색으로 남아서 어느 날이 여유였고 어느 날이 주의였는지 한눈에 보입니다.

결제일까지 날짜별로 나누기

남은 예산을 남은 날로 똑같이 나누면 주말에는 잘 안 맞습니다. 날짜별 달력에서는 주말을 평일의 1.5배로 잡았어요.

function paceCalendar(remaining: number, daysRemaining: number) {
  const now = new Date();
  const days = Array.from({ length: daysRemaining }, (_, i) => new Date(now.getFullYear(), now.getMonth(), now.getDate() + i));
  const weight = (d: Date) => (d.getDay() === 0 || d.getDay() === 6 ? 1.5 : 1);
  const total = days.reduce((sum, d) => sum + weight(d), 0);
  return days.map((d) => ({ date: d, weekend: weight(d) > 1, amount: (remaining * weight(d)) / total }));
}

실제 앱에서 이 달력은 광고를 보고 여는 기능이고, 위 영상은 광고가 동작하지 않는 로컬 환경이라 바로 열린 겁니다.

다음에 할 일

빠른 지출 버튼이 들어간 버전까지 출시했습니다. 9월 30일부터 10월 6일까지 하루 평균 14명 정도가 이 앱을 썼고, 대부분 검색으로 들어왔어요.

프로젝트를 어떤 식으로 진행하는지는 앱인토스 제작기 소개 글에 적어 뒀습니다.

이 글은 앱인토스 미니앱 「카드값 페이스」의 기록입니다. 앱인토스는 토스 앱 안에서 미니앱을 서비스하는 플랫폼이고, 공식 안내는 앱인토스 개발자센터에 있습니다.

이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.