mkdir landing은 landing이라는 폴더를 만들고, cd landing은 그 폴더 안으로 들어가는 명령어입니다. 폴더 이름은 원하는 걸로 바꿔도 됩니다.
2단계. 클로드코드 실행
같은 자리에서 아래 명령어를 입력합니다.
bash
claude
프롬프트(>)가 뜨면 준비 완료입니다. 이제부터는 한글로 말하듯 요청하면 됩니다.
3단계. 플랜 모드로 먼저 계획 확인하기 (권장)
바로 만들라고 시켜도 되지만, 초보자일수록 플랜 모드를 먼저 쓰는 걸 권장합니다. 플랜 모드는 클로드코드가 파일을 건드리지 않고 "이렇게 만들 계획입니다"라고 먼저 보여주는 읽기 전용 모드입니다. 계획을 보고 방향이 맞는지 확인한 뒤 승인하면 되니, 엉뚱한 결과물이 나오는 걸 미리 막을 수 있습니다.
플랜 모드로 들어가는 방법은 두 가지입니다.
/plan 이라고 입력하고 엔터
또는 Shift + Tab 키를 눌러 모드 전환
Windows 사용자 참고: 일부 버전에서 Shift + Tab이 플랜 모드를 건너뛰고 자동 승인 모드로만 전환되는 문제가 보고된 바 있습니다. 단축키가 잘 안 먹힌다면 /plan 명령어를 쓰는 게 확실합니다.
4단계. 원하는 랜딩페이지를 설명하기
프롬프트에 만들고 싶은 페이지를 설명합니다. 막연하게 "랜딩페이지 만들어줘"라고 하면 결과물도 막연해집니다. 어떤 목적의, 어떤 내용이 들어가는 페이지인지 구체적으로 적을수록 결과가 좋아집니다.
아래는 그대로 복사해서 써볼 수 있는 예시입니다.
개인 포트폴리오용 랜딩페이지를 index.html 파일 하나로 만들어줘.
- 상단에 이름과 한 줄 소개
- 자기소개 문단 3~4줄
- 보유 기술을 카드 형태로 4개
- 하단에 이메일 연락처와 깃허브 링크
- 반응형으로 만들어서 모바일에서도 깨지지 않게
- CSS는 별도 파일 말고 HTML 안에 같이 넣어줘
- 외부 라이브러리는 쓰지 말고 순수 HTML/CSS로만
마지막 두 줄이 특히 중요합니다. 파일을 하나로 묶고 외부 라이브러리를 안 쓰게 하면, 나중에 파일을 옮기거나 열어볼 때 문제가 생길 일이 거의 없습니다.
5단계. 계획 확인 후 승인
요청을 보내면 클로드코드가 어떤 파일을 만들고 어떤 구조로 구성할지 계획을 보여줍니다. 내용을 읽어보고 원하는 방향이 맞으면 승인하면 됩니다.
이후 파일을 실제로 생성할 때도 클로드코드가 한 번 더 확인을 요청합니다. 화면에 뜨는 선택지 중 승인에 해당하는 항목을 고르면 파일이 만들어집니다.
플레이스홀더는 개인정보 넣는 란에 예시표를 보여주는 것입니다.
1번으로 하시는 게 편합니다. 심층으로 가면 풀스택으로 하면 좋습니다.
이후에 1번을 다시 누르면 진행이 됩니다.
6단계. 브라우저에서 결과 확인하기
파일이 만들어졌으면 실제로 어떻게 보이는지 확인할 차례입니다. 터미널에서 클로드코드를 잠시 빠져나온 뒤(Ctrl + C 또는 /exit), 아래 명령어를 입력합니다.
macOS
bash
open index.html
Windows PowerShell
powershell
start index.html
기본 브라우저가 열리면서 방금 만든 페이지가 표시됩니다. 인터넷에 올린 게 아니라 내 컴퓨터의 파일을 그대로 여는 것이라, 인터넷 연결 없이도 확인됩니다.
7단계. 마음에 안 드는 부분 수정 요청하기
여기서부터가 클로드코드의 진짜 장점입니다. 코드를 직접 고칠 필요 없이, 다시 claude를 실행해서 말로 수정을 요청하면 됩니다.
> 전체 색상을 어두운 배경에 밝은 글씨로 바꿔줘
> 기술 카드를 4개에서 6개로 늘리고 아이콘 대신 이모지를 써줘
> 모바일에서 글씨가 너무 작아. 폰트 크기를 키워줘
> 맨 위에 메뉴 바를 추가하고, 스크롤해도 상단에 고정되게 해줘
수정할 때마다 브라우저를 새로고침(F5)하면 바로 반영된 결과를 볼 수 있습니다. 한 번에 완성하려 하기보다, 작은 요청을 여러 번 반복하는 방식이 원하는 결과에 더 빨리 도달합니다.
결과물을 실제 웹사이트로 올리려면
만든 파일은 아직 내 컴퓨터에만 있는 상태입니다. 다른 사람이 볼 수 있게 하려면 웹 호스팅에 올려야 하는데, 이 부분도 클로드코드에 물어보면 됩니다.
> 이 페이지를 GitHub Pages에 올리는 방법을 단계별로 알려줘
무료로 정적 페이지를 올릴 수 있는 서비스로는 GitHub Pages, Netlify, Vercel 등이 있습니다. 파일 하나짜리 랜딩페이지라면 어느 쪽을 써도 큰 차이는 없습니다.
실수하기 쉬운 부분 3가지
① 폴더 밖에서 claude를 실행하는 경우 클로드코드는 실행한 위치의 폴더를 기준으로 작업합니다. 엉뚱한 위치에서 실행하면 파일도 엉뚱한 곳에 생깁니다. 현재 위치가 헷갈리면 pwd(macOS) 또는 cd(Windows) 명령어로 확인할 수 있습니다.
② 요청이 너무 추상적인 경우 "예쁘게 만들어줘" 같은 요청은 결과가 매번 달라집니다. "배경은 흰색, 강조색은 파란색, 글꼴은 고딕 계열" 처럼 구체적으로 적으면 훨씬 안정적입니다.
③ 수정 요청을 한꺼번에 몰아서 하는 경우 한 번에 열 가지를 고쳐달라고 하면, 그중 몇 개는 의도와 다르게 반영될 수 있습니다. 두세 개씩 나눠서 요청하고 그때그때 확인하는 편이 결과적으로 빠릅니다.
자주 묻는 질문
Q. HTML을 전혀 몰라도 되나요? 페이지를 만드는 것 자체는 가능합니다. 다만 결과물을 보고 "여기가 마음에 안 든다"고 판단해서 다시 요청하는 과정이 필요하기 때문에, 기본 용어(헤더, 푸터, 폰트, 여백 정도)를 알면 훨씬 수월합니다.
Q. 만든 파일은 어디에 저장되나요? 클로드코드를 실행한 폴더 안에 저장됩니다. 위 예시대로 따라 했다면 landing 폴더 안에 index.html 파일이 생성됩니다.
Q. 결과가 마음에 안 들면 되돌릴 수 있나요? 세션 안에서 /rewind 명령어로 이전 상태로 되돌릴 수 있습니다. 큰 수정 전에 파일을 따로 복사해두는 것도 간단하고 확실한 방법입니다.
Q. 무료로 쓸 수 있나요? 클로드코드는 무료 Claude 플랜에서는 사용할 수 없고, Pro 이상 유료 구독이나 API 계정이 필요합니다.
