게임 보드 만들기
플레이어가 실제로 보고 클릭할 UI 만들기
⏱ 예상 ~7분
01 · 읽기
서버는 준비됐어요. 이제 얼굴이 필요해요. 플레이어가 브라우저에서 볼 HTML 페이지요.
순수 HTML, CSS, JavaScript 예요. React 없어요. 프레임워크 없어요. 모든 프레임워크가 그 위에 세워지는 web 기초만 있어요.
일부러 그런 거예요. 프레임워크는 큰 앱에 좋지만, 프레임워크 없이 무슨 일이 일어나는지 이해하면 훨씬 더 강력한 엔지니어가 돼요. React 가 망가지면, raw HTML 과 JavaScript를 이해하는 엔지니어가 몇 분 만에 고쳐요. React 만 아는 엔지니어는 몇 시간 동안 에러를 노려보고 있어요.
핵심 정리
- 프런트엔드는 순수 HTML, CSS, JavaScript 예요
- 이 정도 크기 게임에는 프레임워크가 필요 없어요
- 기초를 이해하면 나중에 어떤 프레임워크에서도 더 잘해요
- Socket.io 는 자동으로 자체 클라이언트 라이브러리를 제공해요
02 · 프롬프트 템플릿
Claude에게 게임 페이지를 만들어 달라고 해요. 필요한 요소를 구체적으로 적어요.
tic-tac-toe 게임용 public/index.html 을 만들어 주세요. 내용: (1) 제목 'Tic Tac Toe'. (2) 'Find Game' 버튼. (3) 상태 영역, 초기 텍스트는 'Click Find Game to start'. (4) 3x3 게임 보드, 각 cell 은 클릭 가능한 button 요소. (5) 기본은 숨김 상태인 'Play Again' 버튼, 게임이 끝나면 표시. '/socket.io/socket.io.js' 라는 Socket.io 클라이언트 스크립트를 include 해 주세요 (Socket.io 가 자동으로 이 파일을 제공해요). 그리고 style.css 와 client.js 를 링크해요.
03 · 프롬프트 템플릿
이제 Claude에게 게임 스타일을 입혀 달라고 해요. 구체적인 디자인 방향을 줘요.
tic-tac-toe 게임용 public/style.css 를 만들어 주세요. 보드는 3x3 CSS grid 로 만들고 각 cell 은 100x100 픽셀이에요. cell 사이에 깔끔한 테두리를 두고, 빈 cell 에 hover 효과를 줘요. 전체 화면을 가운데 정렬하고 배경은 어두운 색으로 해요. X 는 파란색, O 는 빨간색이에요. Find Game 버튼은 눈에 띄게 해요. 심볼이 놓일 때 살짝 확대되는 애니메이션을 추가해요. 전체적으로 깔끔하고 모던한 느낌이에요.
04 · 읽기
보드를 작동하게 하는 핵심 CSS 패턴은 CSS Grid 예요. 복잡한 table 레이아웃이나 flexbox 꼼수 대신 CSS Grid 세 줄로 3x3 보드를 만들어요: ``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
이게 다예요. 열 세 개, 각 100 픽셀 너비, cell 사이 4 픽셀 gap. 브라우저가 모든 레이아웃 수학을 처리해요. 각 cell 은 grid 안의 <button> 요소예요. div 대신 button 을 쓰는 이유는 button 이 기본적으로 키보드 포커스 가능하고 스크린 리더에 접근 가능하기 때문이에요.
핵심 정리
- CSS Grid 가 3x3 레이아웃을 쉽게 만들어요
- repeat(3, 100px) 으로 같은 크기 열 3 개 생성
- 각 cell 은 <button> 이라서 키보드와 스크린 리더 접근성을 가져요
- Socket.io 가 /socket.io/socket.io.js 에서 자체 클라이언트 스크립트를 제공해요
05 · 실기 실습
서버를 시작하고 브라우저에서 게임 보드를 미리 봐요.
06 · 퀴즈
왜 보드 cell 을 <div> 가 아니라 <button> 으로 만들까요?
- Button 이 기본적으로 더 예뻐 보여요
- Div 는 click event listener 를 가질 수 없어요
- Button 은 키보드 포커스 가능하고 스크린 리더 접근 가능해서 모든 플레이어가 쓸 수 있어요
- Socket.io 는 button 요소와만 작동해요
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.