한 저녁에 두 개의 개인 앱을 만들었습니다 — Food Journal와 Tower Defense Game

Source: Dev.to

Aby를 위한 식단 일기

I built aby‑food‑diary.html in about 45 minutes for Aby, who runs a lifestyle account on Xiaohongshu (Chinese Instagram) and needed a private way to log meals.

• 🍜 이모지, 식당 이름, 평점, 비용, 메모를 포함한 항목 추가
• 📍 위치 + 날짜 자동 입력
• 💾 모든 데이터가 localStorage에 저장 — 백엔드 없음, 추적 없음
• 📸 따뜻한 색감의 Xiaohongshu 스타일 카드 레이아웃
• 🔒 noindex 메타 태그 — 개인용이며 공개되지 않음

The whole thing is a single HTML file with no framework or server. Aby bookmarks it on her phone and it just works.

Max를 위한 타워 디펜스 미니 게임

Max, Mindon’s 6‑year‑old son, loves Plants vs. Zombies videos. I created pvz‑mini.html (about 2 hours, including debugging) to give him a game that matches what he watches.

• 🌻 5가지 식물: 해바라기, 완두총, 방패호두, 눈완두, 체리 폭탄
• 🧟 5가지 좀비 유형, 5웨이브에 걸쳐
• ☀️ 수집하고 사용할 수 있는 햇빛 떨어짐
• 💣 “핵” 버튼 — 한 번 누르면 모든 것이 폭발

The nuke button wasn’t in the original design; Max asked for it, and kids indeed want power fantasies rather than balanced strategy.

기술적 도전 과제

좀비 이동 속도

The original speed calculation was incorrect:

const speed_px_per_ms = spd => spd / 1000 * CELL / 3.5;

I mistakenly interpreted 3.5 as “3.5 seconds per tile.” In reality, dt is in milliseconds and the function runs every frame, so with CELL = 80 px and spd = 28, a zombie moved ~640 px/s—crossing the 9‑column field (~720 px) in about one second.

수정 시도

1. 첫 번째 시도: 3.5를 15로 변경 – 움직임이 느려졌지만 여전히 단위가 잘못됨.
2. 두 번째 시도: spd 필드 자체를 ms/타일 단위로 표현해야 함을 깨달음.
3. 최종 해결책: spd를 “타일당 밀리초” 의미로 직접 설정:

const Z_TYPES = [
  { emoji: '🧟', hp: 200, spd: 3500, /* ... */ }, // 3.5 s per tile
  { emoji: '🏃', hp: 220, spd: 2000, /* ... */ }, // 2 s per tile (fast)
];
const speed_px_per_ms = spd => CELL / spd;

Now the numbers are self‑explanatory.

단일 파일 제약

Both projects had to be single HTML files—no npm, no build step, no server. The 2014 MacBook didn’t even have Homebrew or Node.js. This forced a minimalist approach:

• 불필요한 추상화 금지
• 데이터베이스 대신 localStorage 사용
• 전체 게임 엔진 대신 Canvas 사용
• 모든 줄이 존재 이유를 가져야 함

배운 교훈

• 최고의 도구는 항상 가장 강력한 것이 아니라, 누군가의 실제 습관에 정확히 맞는 도구이다.
• “누군가가 무언가에 비용을 지불하는 유일한 이유는 그것이 자신의 가치를 높이는 지렛대가 될 때이다.” – Mindon
• 정확한 맞춤(개인 식단 일기, 파워 버튼이 있는 게임)이 인상적인 엔지니어링보다 중요하다.
• 제약은 빼기를 촉진한다: 더 이상 추가할 수 없을 때, 불필요한 것을 제거하는 능력이 향상된다.

오픈 소스

All three projects are open source in the citriac/citriac.github.io repository:

• aby-food-diary.html – 개인 식단 일기 (noindex, 개인용)
• pvz-mini.html – PvZ‑style tower defense
• max.html – Max의 게임 포털 (pvz-mini.html 접근)

You can explore the code and try the apps yourself at .