처음 만나는 AI와 Claude Code
Gabriel Yang
- 작성일
- 이 서재에서 책을 만든 날
- 공개판 업데이트
- 이 판본을 만든 날
AI와 LLM을 처음 배우는 독자를 위한 짧은 실습서. 생성형 모델의 특징을 이해한 뒤, Claude Code로 독서모임 안내와 여러 장의 준비 카드를 만들며 문제 정의부터 시험·개선까지 경험한다.
저자 서가파일을 만들고 브라우저에서 확인하기
2장. 안내 페이지 한 장 만들기
이제 index.html을 만듭니다. 이 파일은 웹페이지의 내용을 담습니다. 브라우저에서 열어 볼 수 있으므로 첫 결과를 확인하기 쉽습니다. HTML 문법을 미리 알아야 할 필요는 없습니다. 이 장에서는 어떤 정보를 제공했고 어떤 정보가 빠졌는지 구분하는 데 집중합니다.
안내 페이지를 모임 장소 입구에 붙이는 종이 공지라고 생각해 보세요. 처음 온 사람이 필요한 정보를 한눈에 볼 수 있어야 하고, 아직 정해지지 않은 항목은 비워 두거나 ‘추후 안내’라고 밝혀야 합니다. 웹페이지는 종이와 달리 브라우저가 HTML을 읽어 화면으로 그려 줍니다.
알려 줄 정보부터 고르기
예제에서 확실히 아는 사실은 모임 이름 ‘동네 책모임’과 독자가 ‘처음 오는 사람’이라는 점뿐입니다. 모임 시간·장소·신청 방법은 아직 모릅니다. AI에게 그럴듯한 날짜나 주소를 만들게 하면 페이지는 완성된 것처럼 보이지만 실제로는 잘못된 안내문이 됩니다. 그래서 모르는 항목은 ‘추후 안내’라고 표시합니다.
독자가 자신의 모임 정보를 가지고 있다면 아래 요청에서 모임 이름만 바꿔도 됩니다. 실습을 처음 따라 할 때는 그대로 사용하는 편이 결과를 비교하기 쉽습니다.
파일 만들기 요청하기
1장의 Claude Code 대화가 열려 있는 상태에서 다음을 입력합니다. 이제 첫 파일을 만들어 볼까요?
이 폴더에 처음 오는 사람을 위한 독서모임 안내 페이지
index.html을 만들어 줘. 모임 이름은 ‘동네 책모임’이야. 시간·장소·신청 방법을 모르면 지어내지 말고 ‘추후 안내’로 표시해. 페이지에는 외부 이미지·스크립트·서비스를 연결하지 마. 만든 파일과 브라우저에서 확인하는 방법을 알려줘.
이 요청에는 목표(안내 페이지), 자료(모임 이름과 대상), 조건(모르는 정보를 만들지 않기, 페이지에 외부 자원을 연결하지 않기), 확인할 결과(index.html과 여는 방법)가 들어 있습니다. 긴 주문처럼 보이지만 결과에 영향을 주는 정보만 담았습니다. 다른 작업에서는 이 네 가지 중 필요한 것만 말하면 됩니다. ChatGPT의 프롬프트 안내도 목표와 맥락, 원하는 출력, 경계를 필요에 맞게 제시하라고 설명합니다.
여러분이 부탁할 일을 작은 주문서에 적는다고 생각하면 편합니다. 무엇을 만들지, 어떤 사실을 쓸지, 지켜야 할 경계와 완성 여부를 확인할 방법을 적으면 됩니다. 주문서가 결과를 자동으로 보장하지는 않으니, 완성된 파일은 직접 열어 확인합니다.
같은 요청을 따라 해도 Claude Code가 만든 문장, 색, HTML 코드의 모양은 사람마다 다를 수 있습니다. 1장에서 본 생성형 모델의 특징 때문입니다. 책과 화면을 똑같이 맞추려 하기보다, 아래의 확인 기준을 지켰는지 살펴봅니다.
Claude Code가 파일을 만들기 전에 허락을 요청할 수도 있습니다. 이때 표시된 파일 경로가 연습용 폴더의 index.html인지 확인합니다. 예상하지 못한 파일이나 외부 서비스가 표시되면 진행하기 전에 무엇을 하려는지 물어봅니다. 권한을 묻는 화면은 설정과 실행 환경에 따라 다를 수 있습니다.
실제 파일 열어 보기
Claude Code가 작업을 마치면 먼저 만든 파일 이름과 위치를 확인합니다. 답변에 HTML 코드만 있고 파일은 없다면 “설명한 내용을 이 폴더의 index.html 파일로 저장해 줘”라고 다시 요청합니다. 실제 파일이 있어야 다음 단계로 갈 수 있습니다.
파일 관리자에서 reading-club-practice 폴더를 열고 index.html을 더블클릭합니다. 기본 브라우저에서 열리지 않으면 파일의 ‘다음으로 열기’ 메뉴에서 브라우저를 고릅니다. 코드 편집기가 먼저 열렸다면 브라우저로 다시 엽니다. 이 연습에는 웹 서버나 배포가 필요 없습니다. 브라우저 주소가 로컬 파일을 가리켜도 정상입니다.
확인할 내용은 세 가지입니다.
화면에 ‘동네 책모임’이 보이나요?
처음 오는 사람이 읽을 수 있는 안내 문장이 있나요?
시간·장소·신청 방법에 가짜 사실 대신 ‘추후 안내’가 보이나요?
아래는 이 조건을 만족하는 참고 파일을 Playwright로 브라우저에서 열어 캡처한 첫 생성 결과 화면입니다. 신청 방법은 모임 안내의 마지막에 있습니다. 독자의 화면은 색이나 배치가 달라도 위 세 항목을 확인할 수 있으면 됩니다.
내용이 기대와 다르면 바로 수정을 지시할 수 있습니다. 이 책에서는 먼저 파일이 생기고 열리는 것까지 확인합니다. 다음 장에서는 독자가 이 페이지에서 직접 할 수 있는 일을 추가합니다.
이 장의 결과
성공의 기준은 Claude Code의 “완료했습니다”라는 답이나 책과 똑같은 화면이 아닙니다. 내 컴퓨터의 index.html이 브라우저에서 열리고 요청한 문구가 실제로 보여야 합니다. 페이지의 디자인이 단순하거나 달라도 괜찮습니다. 지금은 ‘파일을 만들고 열어 본다’는 첫 단계가 중요합니다. 다음에는 동작을 정하고 시험해 보겠습니다.