제품 개발
제품을 설계하고 공개한 뒤 고친 기록입니다. 현재 23편을 모았습니다.
- 17분
앱인토스 게임 출시: 웹게임 RAYFRAME을 토스 미니앱으로 옮기고 등급분류에서 멈춘 기록
앱인토스 게임 출시를 준비하며 웹 메카 슈팅 RAYFRAME을 토스 미니앱 빌드로 옮겼고, 지금은 출시 전 게임 등급분류를 기다리고 있습니다. 가로 고정, 안전 영역과 ⋯/X 버튼, 안드로이드 뒤로가기, 백그라운드 음소거, 토스 공유 초대를 고친 과정과 mTLS 인증 코드 교환으로 사용자를 식별한 방법, 등급분류를 받는 두 길과 비용을 적었습니다.
- RAYFRAME
- 웹게임
- 제품 개발
- 15분
크레이지게임즈 개발자 제출: RAYFRAME을 Basic Launch에 올리며 고친 다섯 가지
크레이지게임즈 개발자 포털에 3대3 메카 슈팅 RAYFRAME을 10월 19일에 제출했고, 지금은 Basic Launch로 일부 이용자에게만 공개돼 있습니다. SDK v3 신호, 전체 화면에서 막히는 Esc 키, 작은 iframe의 글자 크기, 초대 링크와 즉시 멀티, 로그인 감지 순서를 고친 과정과 Basic Launch 판정 조건을 적었습니다.
- RAYFRAME
- 웹게임
- 제품 개발
- 22분
learncave 적금 계산기: 연 5% 적금에 360만 원을 넣어도 이자가 9만 7,500원인 이유
learncave 적금 계산기가 쓰는 단리 공식, 15.4% 세후 계산, 같은 돈을 처음부터 예금했을 때와의 비교를 calc 함수를 직접 돌린 값으로 적었습니다. 먼저 만든 복리 계산기에서 고친 버그 세 가지가 적금 계산기로 어떻게 넘어왔는지도 코드로 확인했습니다.
- learncave
- 제품 개발
- 19분
앱을 열지 않고 막힌 카드에 답하기: Plan Wall에 앱 배지, 공유 시트, 알림 「승인」 버튼을 붙인 기록
Plan Wall은 에이전트 카드가 막히면 푸시를 보내지만, 답하려면 앱을 열어야 했습니다. 매니페스트의 shortcuts·share_target, 서비스 워커의 setAppBadge, 알림 action으로 그 단계를 줄이고, 조용히 끊기던 푸시 구독까지 고친 과정입니다.
- Plan Wall
- 제품 개발
- 에이전트
- 22분
주사위 눈을 난수로 정하지 않았습니다: Jelly Dice가 XPBD로 멈춘 윗면을 읽는 방식
Playground의 Jelly Dice는 결과를 난수로 뽑지 않고, 물리 시뮬레이션이 멈춘 뒤 회전 행렬에서 위를 향한 면을 읽습니다. 그 구조를 코드로 다시 읽고 1,000번 굴려 보니 18번은 주사위가 기운 채 멈췄고, 그중 10번은 보이지 않는 울타리에 기대 있었습니다.
- Playground
- 웹게임
- 제품 개발
- 17분
learncave는 각주 번호가 출처 목록을 벗어나면 빌드를 멈춥니다: 출처 등급과 각주를 배포 전에 검사하는 방법
학습 코스 아카이브 learncave는 출처마다 A·B·C 등급을 매기고 본문 각주를 번호로 겁니다. 출처를 지우고 각주만 남겨도 Astro 빌드는 그대로 통과했습니다. 검사 스크립트를 빌드 앞에 세워 그런 각주가 배포되지 않게 막은 과정과 실제 실패 출력을 적었습니다.
- learncave
- 제품 개발
- 에이전트
- 자동화
- 10분
사진 2,000장에 갤러리가 5.6초 걸렸습니다: SQLite FTS5 CTE에 MATERIALIZED 한 단어를 붙인 기록
카드 편집 도구의 사진 갤러리가 사진이 늘수록 제곱으로 느려졌습니다. SQLite가 전문 검색 CTE를 LEFT JOIN 안으로 펼쳐서 행마다 MATCH를 다시 돌린 것이 원인이었고, AS MATERIALIZED로 2,000장 기준 5.6초가 0.04초가 됐습니다.
- SQLite
- 트러블슈팅
- 셀프호스팅
- 제품 개발
- 시행착오
- 10분
예측한 산탄이 서버와 20~40u씩 어긋났습니다: 매치 난수를 투사체 id 시드로 바꾼 기록
웹 메카 슈팅 RAYFRAME을 온라인으로 붙인 날, 내가 쏜 산탄이 서버 사본과 20~40u씩 벌어졌습니다. 퍼짐을 매치 난수 대신 투사체 id에서 뽑게 바꾼 과정과, 그 한 줄이 밸런스 표와 결정론 해시까지 흔든 이야기입니다.
- RAYFRAME
- 웹게임
- 트러블슈팅
- 제품 개발
- 시행착오
- 11분
오래된 탭 하나가 새 일정을 지울 수 있었습니다: 전체 덮어쓰기 저장을 항목 단위 API와 409로 바꾼 기록
Plan Wall은 편집할 때마다 목록 전체를 PUT으로 올렸고, 서버는 업로드에 없는 행을 지웠습니다. updated_at 비교와 409 응답으로 저장 경로를 다시 짠 과정입니다.
- Plan Wall
- 제품 개발
- API
- 셀프호스팅
- 6분
File System Access API는 절대 경로를 주지 않습니다: 프로젝트 식별자를 다시 설계한 기록
로컬 폴더를 직접 읽는 개인 프로젝트 Workbench를 만들다가, 브라우저가 디렉터리 핸들의 실제 경로를 알려주지 않는다는 사실을 구현 단계에서 뒤늦게 확인하고 식별자 설계를 다시 짠 기록입니다.
- 제품 개발
- 트러블슈팅
- 시행착오
- 8분
틱톡 썸네일이 이틀 뒤 전부 깨졌습니다: CDN 서명 만료와 서버 프록시로 고친 기록
개인 프로젝트 Reelpool에서 틱톡 썸네일이 수집 이틀 뒤 전부 403이 되는 문제를 겪고, CDN 서명 만료 구조를 확인한 뒤 서버 프록시로 바이트를 캐싱해 고친 기록입니다.
- Reelpool
- 트러블슈팅
- API
- 제품 개발
- 8분
드로우콜 2857개를 218개로 줄인 밤: three.js InstancedMesh와 거울 변환 함정
제가 만든 3D 웹게임 EBB & GRAB에서 정적 프롭을 InstancedMesh로 병합해 드로우콜을 2857개에서 218개로 줄인 기록입니다. 그 과정에서 마주친 거울 변환 함정도 같이 정리했습니다.
- EBB & GRAB
- 웹게임
- 트러블슈팅
- 제품 개발
- 14분
글쓰기 규칙은 문서가 아니라 게이트여야 합니다
오픈소스 휴머나이저 스킬 두 개와 제 글쓰기 지침을 비교해 보려다, 정작 제 블로그 21편에서 금지 규칙 위반 122건을 찾은 기록.
- 제품 개발
- AI
- 글쓰기
- 시행착오
- 11분
Coolify 사용법: 서버 한 대에 apex와 서브도메인 6개를 올린 Cloudflare 구성
Coolify 사용법으로 서버 한 대에 루트 도메인과 서브도메인 서비스를 올렸습니다. Cloudflare 전역 리다이렉트가 ads.txt까지 301로 넘기던 문제, SSL 모드 불일치, 헬스체크 경로를 실제 장애 순서대로 정리했습니다.
- 셀프호스팅
- Docker
- 제품 개발
- 트러블슈팅
- 18분
Poki와 CrazyGames: 웹게임 포털 6곳의 수익 배분, 독점 조항, 용량 제한을 비교했습니다
Poki는 직접 유입 수익 100%를 주는 대신 7년 독점을 요구하고, CrazyGames는 독점 없이 2주 테스트 뒤 수익을 나눕니다. 웹게임 포털 6곳의 공식 문서를 읽고 수익 배분과 기술 요건을 표로 정리했습니다.
- 웹게임
- 수익화
- 제품 개발
- 인디
- 10분
Claude Code 토큰 절약 방법: 탐색 위임과 출력 압축으로 컨텍스트를 아낀 다섯 가지 습관
Claude Code 토큰 절약 방법으로 몇 달 동안 남긴 습관 다섯 가지입니다. 탐색은 서브에이전트에 맡기고, 출력 길이를 규칙 파일로 줄이고, CLI 출력은 걸러서 넘기고, 긴 파일은 필요한 부분만 읽습니다.
- AI
- 제품 개발
- 생산성
- 10분
Next.js를 Coolify로 셀프호스팅한 기록
Vercel 대신 Coolify + Docker standalone 빌드로 직접 배포하며 헬스체크 프로브 실패를 잡은 과정.
- 셀프호스팅
- Docker
- 제품 개발
- 9분
Next.js 블로그 만들기: CMS 없이 마크다운 파일과 Shiki 코드 하이라이트로 정적 빌드한 기록
Next.js 블로그 만들기를 CMS 없이 .md 파일과 git만으로 한 기록입니다. unified 파이프라인에 rehype-pretty-code(Shiki)를 붙이고 빌드 타임에 전부 구웠습니다.
- Next.js
- 블로그
- 제품 개발
- 14분
macOS LaunchAgent plist 예제: LaunchDaemon과의 차이와 cron 대신 쓰는 기준
실제로 쓰는 macOS LaunchAgent plist 예제와 launchctl bootstrap 명령을 정리했습니다. RunAtLoad와 StartInterval 기준, LaunchDaemon 차이, PATH의 command not found 해결법을 담았습니다.
- Loupecast
- macOS
- 자동화
- 제품 개발
- 15분
Uptime Kuma 설치: Coolify에 Docker 컨테이너로 올려 모니터 11개와 알림을 붙인 기록
Uptime Kuma 설치는 Coolify에 Docker 컨테이너 하나를 올리는 것으로 끝났고, 시간을 쓴 곳은 /health 설계와 알림 설정이었습니다. Docker HEALTHCHECK와 외부 모니터의 역할을 나누고 같은 서버 감시의 한계까지 적었습니다.
- 셀프호스팅
- 모니터링
- 제품 개발
- 9분
오픈소스 기여 후기: AI와 페어로 첫 PR을 올려 하루 만에 머지된 과정
오픈소스 기여 후기입니다. 매일 쓰던 터미널 앱의 작은 불편을 AI와 페어로 고쳐 첫 PR을 하루 만에 머지했고, 머지 후 한 시간 만에 후속 수정도 올렸습니다.
- Loupecast
- 오픈소스
- 제품 개발
- AI 코딩
- Claude Code
- macOS
- 경험담
- 7분
카피바라 게임: 설치 없이 브라우저에서 WASD로 하는 서바이벌 미니게임을 오후에 만든 기록
카피바라 게임을 설치 없이 브라우저에서 바로 하는 서바이벌 미니게임으로 오후 한나절에 만들었습니다. 생산성 툴 사이에 잠깐 쉬어 가는 칸을 넣은 이유와 범위를 적었습니다.
- Capybara
- 제품 개발
- 놀이
- 인디
- 9분
주간 계획표 앱 Plan Wall: 리스트가 아니라 이번 주가 한 벽에 보이게 만든 이유
주간 계획표 앱 Plan Wall을 만든 이유입니다. 할일 앱은 많은데 이번 주 병목은 안 보여서, 주간 보드에 할일을 펼치고 드래그로 날짜를 옮기게 설계했습니다.
- Plan Wall
- 제품 개발
- 제품
- 인디