클로드 코드로 숫자 맞히기 게임 만들기

클로드 코드 왕초보 시리즈의 열 번째 글이자, 따라 만들기 세 번째 순서입니다. 앞 편에서는 적은 것이 목록에 쌓이는 체크리스트를 만들었습니다. 이번에는 내가 넣은 값에 따라 대답이 달라지는 프로그램을 만들어 봅니다. 손주나 아이와 같이 해 보기에도 좋습니다.

흔히 이런 것을 만들려면 "조건"이니 "반복"이니 하는 말을 배워야 한다고들 합니다. 이 글에서는 그런 말을 한 번도 쓰지 않습니다. 원하는 상황을 우리말로 또박또박 적어 주기만 하면 됩니다.

오늘 만들 것 — 규칙부터 정합니다

화면 가운데에 숫자를 넣는 칸과 "확인" 단추가 있습니다. 컴퓨터는 1부터 50 사이에서 숫자 하나를 몰래 골라 둡니다. 내가 25를 넣고 확인을 누르면, 컴퓨터가 고른 숫자가 그보다 크면 "더 큰 수예요", 작으면 "더 작은 수예요"라고 알려 줍니다. 맞히면 "정답! 3번 만에 맞혔어요"처럼 몇 번 만에 맞혔는지 함께 보여 줍니다. 그 아래에는 지금까지 넣은 숫자가 순서대로 늘어섭니다.

게임을 다시 하고 싶으면 "새 게임" 단추를 누릅니다. 컴퓨터가 숫자를 새로 고르고 시도 횟수도 0으로 돌아갑니다. 다만 창을 닫거나 새로고침하면 그때까지의 시도는 모두 사라집니다. 이 게임은 점수를 저장하지 않습니다. 기록을 남기고 싶다면 그것은 따로 부탁해야 하는 다른 기능입니다.

준비 — 폴더에서 클로드를 부릅니다

1. 지난 편에서 만든 연습 폴더를 그대로 씁니다. 없으면 바탕화면에 폴더를 하나 새로 만듭니다.
2. 윈도우는 그 폴더를 연 상태에서 위쪽 주소 칸에 powershell이라고 쓰고 Enter를 누릅니다. 맥은 터미널에서 cd를 치고 한 칸 띄운 뒤 폴더를 창 안으로 끌어다 놓고 Enter를 누릅니다.
3. 검은 창이 열리면 아래 한 단어를 칩니다.

claude

클로드 코드는 지금 열려 있는 폴더 안에서만 일합니다. 그래서 어느 폴더에서 불렀는지가 중요합니다. 엉뚱한 곳에서 불렀다면 창을 닫고 맞는 폴더에서 다시 열면 됩니다.

이 일곱 줄을 그대로 붙여넣습니다

아래 내용을 통째로 복사해 입력창에 붙여넣고 Enter를 누릅니다. 따옴표 안에 적은 말이 화면에 그대로 나오게 되니, 마음에 드는 문구로 바꿔 넣으셔도 좋습니다.

숫자 맞히기 게임을 웹페이지로 만들어 줘.
컴퓨터가 1부터 50 사이에서 숫자 하나를 몰래 고르고, 내가 칸에 숫자를 넣고 "확인"을 누르면 알려 줘.
내 숫자가 작으면 "더 큰 수예요", 크면 "더 작은 수예요", 맞히면 "정답! O번 만에 맞혔어요"라고 큰 글씨로 보여 줘.
지금까지 몇 번 넣었는지와, 넣은 숫자들을 순서대로 화면에 보여 줘.
"새 게임" 버튼을 누르면 숫자를 새로 고르고 처음부터 시작하게 해 줘.
1부터 50 밖의 숫자나 빈칸이면 "1부터 50 사이 숫자를 넣어 주세요"라고 알려 줘.
game.html 파일 하나로만 만들고, 만들기 전에 무엇을 할지 먼저 알려 줘.

클로드가 먼저 무엇을 만들지 설명합니다. 읽어 보고 좋아, 그렇게 만들어 줘라고 답하면 파일을 만듭니다. 요금제에 따라 "이렇게 해도 될까요?" 하고 한 번 더 묻기도 합니다. 그때는 마우스가 아니라 위아래 화살표로 고르고 Enter입니다. 지금 내 화면이 물어보는 쪽인지 아닌지는 입력창에 /status를 쳐서 볼 수 있습니다.

열어서 놀아 보고, 말로 고쳐 봅니다

폴더에 game.html이 생겼으면 더블클릭합니다. 먼저 게임이 제대로 도는지 이렇게 확인해 보십시오.

1. 아무 숫자나 넣고 확인을 누릅니다. "더 큰 수예요" 또는 "더 작은 수예요"가 나와야 합니다.
2. 알려 준 방향으로 숫자를 몇 번 바꿔 넣어 맞혀 봅니다. 맞히면 몇 번 만에 맞혔는지 나옵니다.
3. 일부러 99를 넣어 봅니다. "1부터 50 사이 숫자를 넣어 주세요"가 나오면 잘 만들어진 것입니다.
4. "새 게임"을 눌러 시도 횟수가 0으로 돌아가는지 봅니다.

다 돌아간다면 이제 취향대로 고칠 차례입니다. 클로드 코드 창으로 돌아가 한 줄씩 부탁하면 됩니다.

1부터 100 사이로 바꿔 줘.

기회를 10번으로 정하고, 남은 기회를 화면에 보여 줘.

맞혔을 때 화면 색이 밝게 바뀌게 해 줘.

눌러도 아무 반응이 없을 때

이 예제를 실제로 만들어 보다가 겪은 일을 그대로 적습니다. 화면은 멀쩡하게 나왔는데, 숫자를 넣고 확인을 눌러도 아무 글자도 뜨지 않았습니다. 시도 횟수도 0에서 꼼짝하지 않았습니다. 알고 보니 프로그램 안에서 쓰려던 이름 하나가 브라우저가 이미 쓰고 있던 이름과 겹쳐서, 그 자리에서 조용히 멈춰 버린 것이었습니다. 이름 한 군데를 바꾸니 바로 정상으로 돌아왔습니다.

여기서 중요한 것은 원인이 아닙니다. 보이는 그대로 말하면 된다는 점입니다.

확인을 눌러도 아무 일도 안 생겨. 왜 그런지 찾아서 고쳐 줘.

• 화면이 하얗게 비어 있을 때도 같습니다. 파일을 열었는데 아무것도 안 보여. 고쳐 줘.
• 글자가 겹치거나 단추가 화면 밖으로 나갈 때는 휴대폰 화면에서 단추가 잘려. 화면 크기에 맞게 고쳐 줘.
• 파일을 고쳤는데 화면이 그대로일 때는 브라우저가 예전 화면을 기억하고 있는 것입니다. Ctrl + F5(맥은 Cmd + Shift + R)로 새로 읽어 옵니다.

자주 묻는 질문

함께 보면 좋은 글

• 클로드 코드 왕초보 시리즈 목차 — 설치부터 따라 만들기까지 순서대로 모아 두었습니다.

참고: 클로드 코드 공식 문서 · 빠른 시작, 세션 안에서 쓰는 명령어