클로드 코드로 할 일 체크리스트 만들기

클로드 코드 왕초보 시리즈의 아홉 번째 글이자, 직접 따라 만드는 두 번째 순서입니다. 앞 편에서는 글과 그림만 있는 소개 페이지를 만들었습니다. 이번에는 한 걸음 더 나가서 버튼을 누르면 화면이 바뀌는 프로그램을 만듭니다. 장 보기 목록, 오늘 처리할 일, 여행 짐 싸기 목록처럼 매일 쓰는 것을 내 손으로 만들어 보는 것이 목표입니다.

만드는 방법은 앞 편과 똑같습니다. 우리말로 적은 부탁 문장을 클로드 코드에 붙여넣고 기다리면 됩니다. 결과물은 파일 한 개이고, 더블클릭하면 인터넷 창에서 열립니다. 따로 설치할 프로그램은 없습니다.

오늘 만들 것 — 무엇이 되고 무엇이 안 되는지

완성하면 이런 화면이 나옵니다. 위쪽에 "오늘 할 일"이라는 제목이 있고, 그 아래에 글자를 적는 칸과 "추가" 버튼이 나란히 놓입니다. 할 일을 적고 추가를 누르면 아래에 한 줄씩 쌓입니다. 쌓인 줄을 손가락이나 마우스로 한 번 누르면 회색 취소선이 생기고, 한 번 더 누르면 취소선이 없어집니다. 줄 오른쪽 동그란 X 단추를 누르면 그 줄만 사라집니다. 맨 아래에는 "남은 일 3개"처럼 아직 못 한 일의 개수가 표시됩니다.

되는 것과 안 되는 것을 먼저 정확히 말씀드리겠습니다. 적어 둔 할 일은 창을 닫았다 다시 열어도 남습니다. 브라우저가 내 컴퓨터 안에 따로 기억해 두기 때문입니다. 반대로 이 파일을 카카오톡이나 메일로 다른 사람에게 보내면, 파일만 갈 뿐 적어 둔 할 일은 따라가지 않습니다. 휴대폰으로 열어도 컴퓨터에 적은 목록은 보이지 않습니다. 여러 사람이 같이 보는 목록을 만들고 싶다면 이 방식으로는 안 되고, 다른 준비가 필요합니다.

준비 — 폴더를 정하고 클로드를 부릅니다

1. 바탕화면에 연습용 폴더를 하나 만듭니다. 이름은 연습처럼 짧은 것이 좋습니다.
2. 윈도우는 그 폴더를 파일 탐색기로 연 뒤, 위쪽 주소가 적힌 칸을 한 번 누르고 powershell이라고 쓴 다음 Enter를 누릅니다. 그 폴더에서 검은 창이 열립니다. 윈도우 버전에 따라 방법이 조금 다를 수 있습니다.
3. 맥은 터미널을 연 뒤 cd와 한 칸 띄어쓰기를 치고, 폴더를 터미널 창 안으로 끌어다 놓은 다음 Enter를 누릅니다.
4. 창이 열리면 다음 한 단어를 치고 Enter를 누릅니다.

claude

인사말과 입력창이 나오면 준비가 끝난 것입니다. 처음이라 로그인 화면이 나온다면 시리즈 목차에서 첫 실행 편을 먼저 보시기 바랍니다.

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

아래 상자의 내용을 통째로 복사해서 클로드 코드 입력창에 붙여넣고 Enter를 누릅니다. 윈도우는 Ctrl + V, 맥은 Cmd + V입니다. 줄이 여러 개라도 한 번에 붙여집니다.

할 일 체크리스트를 웹페이지로 만들어 줘.
맨 위에 "오늘 할 일" 제목, 그 아래 입력칸 하나와 "추가" 버튼 하나를 놓아 줘.
추가를 누르면 아래 목록에 한 줄씩 쌓이고, 줄을 누르면 회색 취소선이 생겼다 없어지게 해 줘.
줄 오른쪽의 X 버튼을 누르면 그 줄만 지워지고, 맨 아래에 "남은 일 O개"를 보여 줘.
적은 내용은 이 브라우저에 저장해서 새로고침해도 남게 해 줘.
연한 하늘색 바탕에 글씨는 크게, 휴대폰에서도 보기 좋게 해 줘.
todo.html 파일 하나로만 만들고, 만들기 전에 무엇을 할지 먼저 알려 줘.

마지막 줄이 중요합니다. "먼저 알려 줘"라고 적어 두면 클로드가 곧바로 만들지 않고 무엇을 만들지 설명부터 합니다. 설명을 읽고 마음에 들면 좋아, 그렇게 만들어 줘라고 한 줄 답하면 됩니다.

그다음에는 글자가 주르륵 올라가면서 파일이 만들어집니다. 쓰시는 요금제에 따라 "파일을 만들까요?" 하고 물어보기도 하고, 묻지 않고 바로 만들기도 합니다. 물어보면 마우스는 듣지 않으니 위아래 화살표 키로 고르고 Enter를 누릅니다. 지금 어느 쪽인지 궁금하면 입력창 맨 앞에 /status를 쳐서 확인할 수 있습니다.

열어서 확인하고, 말로 고쳐 봅니다

다 만들었다는 말이 나오면 아까 만든 폴더를 엽니다. todo.html이라는 파일이 새로 생겨 있습니다. 더블클릭하면 인터넷 창에서 열립니다. 할 일을 두어 개 적어 넣고, 줄을 눌러 취소선이 생기는지, X를 눌러 지워지는지 확인해 보십시오. 그다음 F5를 눌러 새로고침했을 때 적은 내용이 그대로 남아 있으면 제대로 만들어진 것입니다.

마음에 안 드는 곳은 클로드 코드 창으로 돌아가 말로 고치면 됩니다. 파일을 다시 만들라고 할 필요 없이, 아래처럼 한 줄만 던지면 고친 다음 알려 줍니다.

바탕색을 연한 분홍색으로 바꿔 줘.

다 한 일은 목록 맨 아래로 내려가게 해 줘.

맨 아래에 "전부 지우기" 버튼을 넣어 줘.

세 가지를 한꺼번에 시키지 말고 하나씩 시키는 편이 좋습니다. 한 번에 하나씩 고치면 무엇 때문에 화면이 달라졌는지 알 수 있고, 마음에 안 들 때 되돌리기도 쉽습니다.

잘 안 될 때

• 열었더니 화면이 하얗게 비어 있습니다. 클로드 코드 창에 화면에 아무것도 안 보여. 왜 그런지 찾아서 고쳐 줘.라고 그대로 말하면 됩니다. 어디가 잘못됐는지는 몰라도 됩니다.
• 추가 버튼을 눌러도 아무 일이 없습니다. 이때도 본 그대로 말하면 됩니다. 추가를 눌러도 아무 일도 안 생겨. 고쳐 줘. 실제로 이 글을 준비하면서 다른 예제에서 같은 일이 있었고, 한 군데를 고쳐서 해결됐습니다.
• 파일이 어디 있는지 모르겠습니다. 방금 만든 파일이 어느 폴더에 있는지 알려 줘.라고 물어보면 위치를 알려 줍니다.
• 고치기 전이 더 나았습니다. Esc를 두 번 누르면 되돌리기 메뉴가 나옵니다. 입력창에 /rewind를 쳐도 됩니다. 대화만 되돌릴지, 파일까지 되돌릴지 고를 수 있습니다.

자주 묻는 질문

함께 보면 좋은 글

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

참고: 클로드 코드 공식 문서 · 빠른 시작, 대화형 모드 단축키