클로드 코드는 개발자만 쓰는 도구일까요? 그렇지 않습니다. 간단한 웹페이지 정도는 코딩 경험이 없어도 말로 설명해서 만들 수 있습니다. 이번 글은 빈 폴더에서 시작해 나를 소개하는 한 장짜리 웹페이지를 만드는 실습입니다. 설치가 아직이라면 윈도우 설치 글을 먼저 보세요.
실습 순서 한눈에 보기
- 빈 폴더를 만들고 그 안에서 클로드 코드를 실행합니다.
- 어떤 페이지를 원하는지 말로 설명합니다.
- 만들어진 파일을 브라우저로 열어 확인합니다.
- 보이는 것을 기준으로 수정을 요청합니다.
- 마지막에 파일 구조 설명을 듣습니다.
1단계. 빈 폴더 준비
mkdir C:\work\my-profile
cd C:\work\my-profile
claude
반드시 빈 폴더에서 시작하세요. 다른 파일이 있는 폴더에서 시작하면 그 파일들까지 작업 범위에 들어갑니다.
2단계. 뼈대 요청하기
나를 소개하는 한 장짜리 웹페이지를 만들고 싶어.
- 파일은 index.html 하나로 (CSS도 안에 포함)
- 구성: 이름과 한 줄 소개 / 하는 일 3가지 / 연락 버튼
- 모바일에서도 보기 좋게
- 외부 라이브러리는 쓰지 마
내용은 임시 문구로 채워 줘. 내가 나중에 바꿀게.
"파일 하나로", "외부 라이브러리 없이"를 넣으면 비개발자가 관리하기 쉬운 결과가 나옵니다. 클로드가 파일을 만들겠다고 허락을 구하면 내용을 보고 승인합니다.
3단계. 브라우저로 확인하기
폴더의 index.html을 더블클릭하면 브라우저에서 열립니다. 휴대폰 화면도 확인하려면 브라우저 창 폭을 좁혀 보세요.
4단계. 수정 반복하기
여기서부터가 핵심입니다. 화면을 보며 보이는 대로 구체적으로 요청합니다. "예쁘게"는 사람마다 기준이 다르니, 위치와 바꿀 내용을 말하는 것이 좋습니다.
| 하고 싶은 것 | 요청 예시 |
|---|---|
| 글자 크기 | "맨 위 이름 글자를 지금의 두 배로" |
| 색 | "버튼 색을 진한 남색으로, 글자는 흰색" |
| 배치 | "하는 일 3가지를 가로로 나란히, 휴대폰에서는 세로로" |
| 내용 | "임시 문구를 아래 내용으로 바꿔 줘: (내 소개)" |
한 번에 서너 가지를 번호 목록으로 묶어 요청하면 왕복이 줄어듭니다. 수정할 때마다 브라우저를 새로고침해서 확인합니다.
5단계. 무엇이 만들어졌는지 설명 듣기
지금 index.html의 구조를 초보자도 알 수 있게 설명해 줘.
내가 나중에 직접 문구만 바꾸려면 어디를 고치면 되는지도 알려 줘.
이 설명을 들어 두면 간단한 문구 수정은 메모장으로도 직접 할 수 있습니다.
막혔을 때
- 엉뚱하게 바뀌었을 때:
Esc로 멈추고 "방금 변경을 되돌려 줘"라고 요청합니다. - 화면이 깨졌을 때: 브라우저 화면을 캡처해 대화에 붙이고 "이 부분이 깨져 보여"라고 말합니다.
- 대화가 길어져 헷갈릴 때:
/clear로 비우고 "index.html을 읽고 지금 상태를 요약해 줘"부터 다시 시작합니다.
실습을 마치며
이 실습의 목표는 멋진 페이지가 아니라 "요청 → 확인 → 수정"의 리듬을 익히는 것입니다. 이 리듬은 웹페이지뿐 아니라 엑셀 정리 스크립트, 사내 공지 페이지 같은 다른 작업에도 그대로 쓰입니다. 처음엔 작게, 결과를 눈으로 확인하며 한 걸음씩 나아가 보세요.
마무리
- 빈 폴더에서 시작하고 "파일 하나, 외부 라이브러리 없이"를 요청하세요.
- 브라우저로 확인하며 위치와 내용을 지목해 수정을 요청합니다.
- 마지막엔 파일 구조 설명을 들어 두면 이후 간단한 수정은 직접 할 수 있습니다.
