Zest: Claude로 만든 QR 코드 디자인 툴, 지겨운 사각형 QR 코드에 질려서 직접 만들었습니다.

Claude 써서 직접 하나 만들었다. 이름은 zest고, 여기 들어가면 돼: zest.lemoncello.studio. 디자인하는 건 공짜고, 계정 만들 필요도 없고, 여기서 받는 정적 코드는 유효기간도 없다.

왜 만들었냐고?

내가 인쇄 쪽 일을 하거든. 매일같이 QR 코드를 보는데, 10년 동안 맨날 똑같은 사각형만 보니까 진짜 질리더라. QR 코드는 원래 여유 공간(패딩이랑 오류 수정 영역)이 좀 있거든. zest는 그 공간을 활용해서 점들을 이미지의 명암에 맞춰서 밀어 넣는 방식이야. 로고를 그냥 위에 떡하니 붙이는 게 아니라, 데이터 사이에 자연스럽게 녹여내는 거지. 그리고 다운로드하기 전에 점 하나하나 다 스캔해서 제대로 읽히는지 확인까지 거친다.

처음에 재미로 모나리자 사진 넣어서 크게 뽑아봤는데, 진짜 스캔이 되더라고. 그때부터 이게 그냥 실험이 아니라 진짜 제품이 되겠구나 싶었지.

개발 과정

나 개발자 아니다. 코드는 전부 Claude가 짰어. 나는 디자인이랑 규칙, 기준 정하고 실제 폰으로 테스트만 존나게 했지. 서로 주고받은 게 엄청 많아. 얘가 왜 그런 식으로 설계했는지 이해하려고 노력하고, 계속 방향 수정해주고. 내가 취미 수준으로 프로그래밍을 좀 알아서 그나마 수월했던 것 같아. 잘 돌아가게 만든 핵심 요소 몇 개 적어볼게.

• 레포지토리 최상단에 내 작업 규칙을 적은 CLAUDE.md를 뒀어. 제일 중요한 규칙은 이거야: 뭐 만들기 전에 내가 시킨 거 맞는지 확인부터 할 것, 내 폰 스크린샷이 곧 진실이니까 버그 재현 안 되면 솔직하게 말하고 다시 물어볼 것, 커밋 하나당 변경 사항은 딱 하나만, 그리고 "배포 완료"라는 말은 절대 금지(배포는 내가 직접 함).

• 뭐 하나 끝낼 때마다 무조건 통과해야 하는 검증 스크립트가 있어. 사이트 빌드하고, JS 문법 체크하고, 실제 폰이랑 데스크탑 해상도에서 보안 헤더 다 태워서 페이지 로딩해보고, 워커 보안 테스트까지 돌려. Claude가 이거 돌리고 PASS/FAIL 라인 보여주면 내가 확인하는 식이지.

• 세션 끝날 때마다 짧게 회고록을 남겼어. 그래야 다음 세션 시작할 때 프로젝트 설명 다시 할 필요 없이 바로 이어서 할 수 있거든. 벌써 27개나 쌓였네.

제일 힘들었던 건 예상대로야. 그림 같은 코드를 스캔되게 만드는 거, 그리고 애니메이션 코드인데 모든 프레임이 스캔되면서도 보기 좋게 만드는 거.

8월 중순에 브라우저 채팅창에서 시작해서 파일 일일이 복사하고 수동으로 정리하면서 만들었어. 처음엔 컨트롤 섹션이랑 서브 섹션이 열두 개나 되는 엄청 복잡한 페이지였지. 9월 말에 Claude Code로 넘어왔고, 그때부터 커밋 150번 정도 찍은 것 같아.