다듬고 출시 준비
작동하는 코드를 완성된 제품으로 바꾸기
⏱ 예상 ~9분
01 · 읽기
게임이 작동해요. 두 플레이어가 서로를 찾고, 실시간으로 tic-tac-toe 를 하고, disconnect 를 깔끔하게 처리해요. 하지만 작동 과 완성 은 다른 얘기예요.
완성된 프로젝트는 깔끔한 UI, 그게 뭔지 설명하는 README, 코드에 남지 않은 디버그 로그, 적절한 git 히스토리가 있어요. 사이드 프로젝트와 포트폴리오 작품의 차이예요. 다른 엔지니어나 채용 담당자에게 실제로 보여줄 수 있는 거요.
이 레슨은 앞선 90% 의 노력을 빛나게 하는 마지막 10% 에 관한 거예요.
핵심 정리
- 작동하는 코드와 완성된 코드는 같지 않아요
- 다듬기란: 깔끔한 UI, README, 디버그 로그 없음, 적절한 git
- README 는 누군가가 프로젝트를 볼 때 가장 먼저 보는 것
- 이게 사이드 프로젝트와 포트폴리오 작품을 가르는 차이예요
02 · 프롬프트 템플릿
Claude에게 게임의 시각적 마감을 개선해 달라고 해요. 거칠어 보이는 것에 대해 구체적인 피드백을 줘요.
tic-tac-toe 게임의 UI 를 개선해 주세요. 구체적 요구 사항: (1) 심볼이 cell 에 나타날 때 부드러운 전환 애니메이션을 추가해요. (2) 누가 이기면 승리한 세 cell 을 다른 배경색으로 highlight 해요. (3) 누구 차례인지 보여주는 시각적 단서를 추가해요. 예를 들면 상태 텍스트가 펄스 효과로 깜빡이거나, 색상이 현재 플레이어 심볼 색으로 바뀌게 해요. (4) 상대를 찾는 동안 Find Game 버튼을 비활성화하고 loading spinner 나 애니메이션을 표시해요. (5) 모바일에서도 잘 보이게 해요. 작은 화면에 맞게 보드가 자동으로 크기 조정되어야 해요.
03 · 프롬프트 템플릿
모든 프로젝트는 README 가 필요해요. Claude에게 프로젝트가 무엇인지, 어떻게 실행하는지, 어떤 기술을 썼는지 설명하는 걸 써 달라고 해요.
tic-tac-toe 프로젝트용 README.md 를 만들어 주세요. 내용: (1) 제목과 한 줄짜리 소개. (2) 'How to Play' 섹션. 게임 흐름 (상대 찾기, 차례대로 두기, 승/무) 을 설명해요. (3) 'Tech Stack' 섹션. Node.js, Express, Socket.io, 순수 HTML/CSS/JS 를 나열해요. (4) 'Run Locally' 섹션. 단계별 안내: clone, npm install, node server.js, localhost:3000 열기. (5) 'How It Works' 섹션. 클라이언트-서버 구조와 WebSocket 통신을 짧게 설명해요. 짧게 유지해 주세요. 500 줄짜리 README 는 아무도 안 읽어요.
04 · 체크리스트
이 출시 준비 체크리스트를 살펴봐요. 각 항목이 아마추어 프로젝트와 프로페셔널 프로젝트를 가르는 차이예요.
- 디버그용 console.log 문 모두 제거 (server.js 의 connection/disconnection 로그만 남김)
- 게임 UI 가 깔끔해 보임. 겹친 요소, 깨진 레이아웃, 자리표시자 텍스트 없음
- README 가 프로젝트가 무엇이고 어떻게 실행하는지 설명함
- node_modules/ 를 제외하는 .gitignore 파일 생성
- 코드에 하드코딩된 localhost URL 없음. 배포해도 작동하도록 상대 경로 사용
- 다듬기 변경 후 전체 게임 흐름을 한 번 더 테스트함
05 · 실기 실습
git repository 를 초기화하고, 첫 commit 을 하고, GitHub에 push 해요. Level 4 에서 배운 흐름이에요.
06 · 퀴즈
왜 출시 전에 console.log 디버그 문을 제거해야 할까요?
- 서버를 눈에 띄게 느리게 만들어요
- DevTools 를 여는 누구에게나 내부 상태를 노출하고, 서버 로그를 어지럽혀서 진짜 문제를 찾기 어렵게 해요
- JavaScript 는 production 모드에서 console.log 를 허용하지 않아요
- Socket.io 가 console.log 와 충돌해요
07 · 빈칸 채우기
_____ 파일은 다른 엔지니어에게 프로젝트가 무엇인지, 어떻게 설치하고 실행하는지 알려줘요.
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.