클로드 코드로 공부 타이머 만들기

이 글은 클로드 코드 왕초보 시리즈의 열세 번째 글이자, 직접 따라 만드는 여섯 번째 작품입니다. 이번에 만들 것은 공부 타이머입니다. 시간을 정해 두고 그만큼 집중한 뒤, 다 되면 소리로 알려 주는 프로그램입니다.

앞선 편들과 마찬가지로 결과물은 파일 하나입니다. 따로 설치할 것도 없고, 더블클릭하면 평소 쓰던 브라우저에서 바로 열립니다. 아래 지시문은 실제로 클로드 코드에 넣어서 만들어 보고, 화면에서 동작까지 확인한 것입니다.

오늘 만들 것

화면이 이렇게 생긴 프로그램입니다. 글로 먼저 그려 보겠습니다.

• 배경은 짙은 남색, 글자는 흰색입니다.
• 화면 가운데에 남은 시간이 25:00처럼 아주 큰 숫자로 있습니다.
• 숫자 위에는 25분 · 10분 · 5분 버튼 세 개가 있습니다. 누르면 그 시간으로 바뀝니다.
• 숫자 아래에는 시작 · 멈춤 · 처음으로 버튼 세 개가 있습니다.
• 0이 되면 소리가 한 번 나고, 숫자 밑에 "끝났습니다"라는 글자가 큼직하게 나타납니다.

미리 알아 두실 점이 하나 있습니다. 이 타이머는 기록을 저장하지 않습니다. 브라우저를 새로 고치거나 창을 닫으면 처음 시간으로 돌아갑니다. 오늘 몇 번 공부했는지 쌓이지 않는다는 뜻입니다.

준비 - 폴더를 열고 클로드를 부릅니다

1. 바탕화면에 연습용 폴더를 하나 만듭니다. 이름은 timer처럼 영어로 짧게 지으시면 편합니다.
2. 터미널(글자로 컴퓨터에 말을 거는 창)을 엽니다. 윈도우는 Win + X를 누르고 Windows PowerShell, 맥은 Cmd + Space를 누르고 Terminal을 고릅니다.
3. 그 폴더 안으로 들어갑니다. 아래 명령에서 폴더 이름만 자기 것으로 바꿔 넣습니다.

cd Desktop/timer

4. 이제 클로드를 부릅니다.

claude

입력창이 나타나면 준비가 끝난 것입니다.

복사해서 붙여넣을 지시문

아래 여덟 줄을 통째로 복사해서 클로드 코드 입력창에 붙여넣고 Enter를 누릅니다. 붙여넣기는 윈도우에서 Ctrl + V, 맥에서 Cmd + V입니다.

공부 타이머를 만들어 줘.
화면 한가운데에 남은 시간이 25:00 처럼 크게 보이게 해 줘.
그 아래에 시작, 멈춤, 처음으로 버튼 세 개를 넣어 줘.
시간 위에는 25분, 10분, 5분 중에 고르는 버튼을 넣어 줘.
0이 되면 삐 소리가 한 번 나고 화면에 "끝났습니다" 라고 크게 떠야 해.
배경은 짙은 남색, 글자는 흰색으로 해 줘.
파일 하나로 만들고 이름은 timer.html 로 해서 지금 이 폴더에 저장해 줘.
만들기 전에 무엇을 만들지 먼저 한국어로 짧게 설명해 줘.

여덟 줄이 각각 무슨 일을 하는지 보시면, 지시문 쓰는 요령이 그대로 들어 있습니다. 무엇을(공부 타이머), 어떻게 보이게(가운데에 크게, 남색 바탕에 흰 글자), 어디에 저장(이 폴더에 timer.html), 먼저 보여줘(만들기 전에 설명)입니다.

나오는 화면과 승인

Enter를 누르면 클로드가 먼저 우리말로 "이런 걸 만들겠습니다" 하고 짧게 설명합니다. 그 다음 파일을 만들기 시작합니다.

이때 파일을 만들어도 되냐고 물어보는 화면이 뜰 수 있습니다. 터미널 안에서는 마우스 클릭이 되지 않습니다. 화살표 키 ↑ ↓로 "예"에 해당하는 줄을 고르고 Enter를 누르면 됩니다.

작업이 끝나면 클로드가 "timer.html 파일을 만들었습니다" 같은 말로 마무리합니다.

열어서 확인하는 법

1. 아까 만든 폴더를 파일 탐색기(맥은 Finder)에서 엽니다.
2. timer.html 파일을 더블클릭합니다. 브라우저가 열리면서 남색 화면이 나타납니다.
3. 시작을 눌러 봅니다. 숫자가 25:00에서 24:59, 24:58로 1초씩 줄어들면 잘 된 것입니다.
4. 멈춤을 누르면 그 숫자에서 멈춥니다. 다시 시작을 누르면 멈춘 자리에서 이어집니다.
5. 처음으로를 누르면 고른 시간으로 되돌아갑니다.
6. 맨 위의 5분을 눌러 짧게 맞춰 두면, 끝나는 순간까지 기다리지 않고도 확인해 볼 수 있습니다.

0이 되면 소리가 나고 숫자 아래에 "끝났습니다"가 뜹니다. 소리가 안 들리면 먼저 컴퓨터 볼륨부터 확인해 보십시오. 브라우저나 컴퓨터 설정에 따라 소리가 나지 않을 수도 있는데, 그래도 화면 글자는 그대로 뜨니 확인에는 문제가 없습니다.

바꿔 보기 세 가지

여기서 끝내지 마시고 꼭 고쳐 보십시오. 클로드 코드는 그대로 켜 둔 채, 아래 문장을 한 번에 하나씩 붙여넣고 Enter를 누르면 됩니다. 고친 뒤에는 브라우저로 돌아가 F5를 눌러 새로 고쳐야 바뀐 화면이 보입니다.

첫째, 색을 바꿉니다.

배경색을 짙은 초록색으로 바꿔 줘.

둘째, 마지막 1분을 눈에 띄게 만듭니다.

남은 시간이 1분 아래로 내려가면 숫자를 주황색으로 보여 줘.

셋째, 알림 소리를 늘립니다.

끝났을 때 소리를 0.5초 간격으로 세 번 나게 해 줘.

세 가지 모두 실제로 넣어서 확인해 본 것입니다. 이렇게 "무엇을 어떻게 바꿔 줘" 한 문장이면 충분합니다. 코드가 어디에 있는지, 어느 줄을 고쳐야 하는지는 몰라도 됩니다.

잘 안 될 때

• 파일이 안 보입니다 - 클로드를 실행한 폴더가 아닌 다른 폴더를 보고 계실 수 있습니다. 클로드 입력창에 "방금 만든 파일이 어느 폴더에 있는지 알려 줘"라고 물어보십시오.
• 더블클릭했더니 글자만 잔뜩 나옵니다 - 브라우저가 아니라 메모장으로 열린 경우입니다. 파일에 마우스 오른쪽 버튼을 누르고 "연결 프로그램"에서 크롬이나 엣지 같은 브라우저를 고르십시오.
• 숫자가 안 줄어듭니다 - 시작 버튼을 눌렀는지 확인하시고, 그래도 그대로면 클로드에게 "시작을 눌러도 숫자가 안 줄어들어. 고쳐 줘"라고 그대로 말하십시오. 화면에서 본 대로 말하는 것이 가장 잘 통합니다.
• 이상하게 고쳐졌습니다 - Esc를 두 번 누르면 되돌리기 메뉴가 열립니다. /rewind를 쳐도 같은 메뉴가 나옵니다.

자주 묻는 질문

함께 보면 좋은 글

• 클로드 코드 왕초보 시리즈 전체 목차

참고: 클로드 코드 공식 빠른 시작 안내