코딩 경험 없는 그래픽 디자이너가 Claude Code로 2개월 만에 3D 태양계 사이트를 만든 후기

뭐하는 거냐: SOLARIA(https://solaria3d.com)는 태양계랑 우리 은하를 구현한 브라우저 모델이다. 행성이랑 우주선 위치는 NASA JPL 데이터를 그대로 가져와서 실제 위치랑 똑같고, 행성 내부를 뜯어보거나 빛을 스펙트럼으로 분해하고, 내레이션 가이드를 따라가거나 은하 전체를 조망할 수도 있다.

왜 만들었냐: 초보자도 기 안 죽고 우주를 배울 수 있으면서, 파고들면 깊이도 있는 그런 공간이 하나쯤 있었으면 했다. 그래픽 디자이너로 20년 굴렀고 HTML이랑 CSS는 가물가물한 수준이라, Claude Code 없었으면 그냥 머릿속 아이디어로 끝났을 거다.

어떻게 만들었냐 (도움 될 만한 팁):

1. 코드 전체가 아니라 지도를 던져줘라. 메인 파일이 700KB 정도라 한 번에 다 읽히지도 않는다. CLAUDE.md에 파일별 설명을 다 적어두고, 수정할 때마다 스크립트로 메인 파일의 줄 번호가 포함된 지도를 다시 뽑게 했다. Claude는 그 지도를 보고 필요한 줄만 딱딱 읽는다.

2. 반복되는 실수는 무조건 규칙으로 박아라. Claude가 한 줄짜리 함수 중간에 주석을 달아서 나머지 코드를 다 날려 먹은 적이 있다. 7번이나 당하고 나서야 CLAUDE.md에 규칙으로 박아버렸다. 그 뒤로는 안 나타난다. 행성이랑 별 관련해서는 따로 치트 시트를 만들어서, 한 번 고친 버그는 다시 안 나오게 관리 중이다.

3. 무서운 작업은 자동화해라. 초반에 수동으로 업로드하다가 서버 파일 덮어씌워서 사이트 날려 먹은 적 있다. 지금은 배포 스크립트 하나로 테스트 돌리고, 바뀐 파일만 올리고, 라이브 사이트에서 제대로 돌아가는지까지 확인한다. 이제 수동 업로드 같은 건 절대 안 한다.

4. 말로 설명하지 말고 슬라이더를 만들어라. "카메라 좀 왼쪽으로 옮겨봐" 해봤자 답도 없다. 그래서 Claude한테 튜닝 패널을 만들게 했다. 슬라이더로 화면 딱 맞추고 JSON 복사해서 다시 붙여넣으면 끝이다. 추측할 필요 없이 정확한 수치가 나온다.

5. 가벼운 모델 먼저, 검증은 나중에. 단순한 작업은 작은 모델한테 시키고, 결과가 영 아니다 싶을 때만 큰 모델을 투입한다.

6. 실제 폰으로 테스트해라. 폰이랑 데스크톱 양쪽에서 다 잘 돌아가게 만드는 게 제일 빡셌다. Claude가 adb로 내 폰을 직접 제어해서 스크린샷을 찍게 했는데, 데스크톱에선 절대 안 보이던 문제들을 거기서 다 잡아냈다.