[AI] 클로드(Claude) 실전 가이드 3-1편: 코딩 몰라도 3시간 만에 내 웹사이트 만들기

클로드(Claude)

코딩 몰라도 3시간 만에 내 웹사이트 만들기

 

안녕하세요. 따뜻한 디지털 일상을 따뜻하게 채워드리는  '오카시아 라운지'입니다.

2026년의 첫 달도 어느덧 끝자락인 1월 30일이네요. 새해 목표로 세웠던 '코딩 공부', 혹시 복잡한 문법 앞에 멈춰 서 계시진 않나요?

"나는 비전공자니까", "수학은 어려우니까"라며 지레 겁먹으실 필요 전혀 없습니다. 오늘 [실전 가이드 3-1편]에서는 Claude AI를 도구 삼아 코딩한 줄 몰라도 나만의 웹사이트와 자동화 툴을 뚝딱 만들어내는 마법 같은 경험을 선사해 드릴게요. 여러분의 상상력에 Claude의 날개를 달아보세요!

 

나만의 포트폴리오 웹사이트 만들기 (소요 시간: 2~3시간)

"코딩 한 줄 몰라도 괜찮습니다. Claude와 메모장만 있으면 나만의 근사한 홈페이지가 탄생합니다."

1 1단계: Claude에게 설계도 요청하기 (프롬프트)

먼저 Claude에게 만들고 싶은 사이트의 정보를 구체적으로 전달합니다.

[복사용 프롬프트] "나만의 포트폴리오 웹사이트를 만들고 싶어. 아래 정보를 바탕으로 한 페이지짜리 웹사이트 코드를 짜줘.
a. 정보: 이름 [홍길동], 직업 [기획자], SNS [링크]
b. 구성: 메인 화면, 자기소개, 작업물 갤러리, 기술 스택, 연락처
c. 디자인: 미니멀하고 모던한 느낌, 다크모드 지원, 스마트폰에서도 잘 보이는 반응형 레이아웃, 부드러운 스크롤 애니메이션 포함
결과물: HTML, CSS, JavaScript 코드를 한꺼번에 보여줘."

✨ Claude가 생성하는 것:
• HTML 구조 (index.html)
• CSS 스타일링 (완전한 디자인)
• JavaScript 인터랙션
• 이미지 플레이스홀더
• 반응형 레이아웃

---

2 2단계: 받은 코드를 내 컴퓨터에 저장하기 (실행 방법)

Claude가 코드를 생성하면, 이제 여러분의 컴퓨터에서 작동시켜 볼 차례입니다.

a. 코드 다운로드: Claude 답변 박스 우측 상단을 보면 다운로드(↓) 아이콘이 있습니다. 이 버튼을 클릭하세요.
b. 파일 이름 확인: 자동으로 파일이 다운로드됩니다. 만약 이름을 정해야 한다면 반드시 index.html로 설정해 주세요.
c. 확인: 다운로드된 폴더로 가서 index.html 파일을 더블 클릭하면 브라우저(크롬, 엣지 등)에서 여러분의 웹사이트가 즉시 열립니다!

 

꼭!! index.html이어야 하는 결정적인 이유는 바로 '약속' 때문입니다.

'index.html'은 건물의 '정문'과 같습니다.
a. 웹 서버의 자동 인식 (가장 중요!) 우리가 웹사이트를 인터넷(예: GitHub Pages)에 올리면, 서버는 그 폴더 안에 수많은 파일 중 어떤 것이 첫 페이지인지를 찾아야 합니다. 이때 전 세계 모든 서버는 "이름이 index.html인 파일을 가장 먼저 보여주자"라고 약속되어 있습니다. 만약 이름을 다르게 지으면, 주소를 치고 들어갔을 때 첫 화면을 띄우지 못하고 파일 목록만 보여주거나 에러가 날 수 있습니다.
b. 주소의 간결함 파일 이름을 index.html로 해두면, 주소창에 www.mysite.com/index.html이라고 다 칠 필요 없이 www.mysite.com만 쳐도 서버가 알아서 '정문'인 index 파일을 열어줍니다.
c. 파일 간의 연결(Link) 나중에 페이지를 여러 개 만들 때(예: 자기소개, 프로젝트 등), 다른 페이지에서 메인 화면으로 돌아오는 버튼을 만들 때 관습적으로 index.html을 연결점으로 사용합니다.

---

3 3단계: 내 입맛대로 바꾸기 (커스터마이징 Customizing)

화면을 확인한 후 마음에 안 드는 부분은 Claude에게 대화하듯 수정을 요청하세요.

"포트폴리오 사이트를 다음과 같이 수정해 줘: 1. 색상 테마를 파란색 계열로 변경 2. 프로젝트 카드에 호버 효과 추가 3. 이메일 폼 추가 (실제 작동) 4. 로딩 애니메이션 추가"

 

4 4단계: 전 세계에 공개하기 (무료 배포 가이드)

내 컴퓨터에서만 보이는 사이트를 남들도 볼 수 있게 온라인에 올리는 가장 쉬운 방법은 GitHub Pages입니다.

1. GitHub 계정 만들기: GitHub.com에 가입합니다.
2. 저장소(Repository) 생성: New 버튼을 눌러 새 저장소를 만듭니다. 이름은 my-portfolio 정도로 정합니다.
3. 파일 업로드: 아까 만든 index.html 파일을 드래그해서 올립니다.
4. 활성화: 설정(Settings) -> Pages 메뉴에서 main 브랜치를 선택하고 저장하면, 잠시 후 여러분만의 웹 주소(URL)가 생성됩니다!

"이 웹사이트를 무료로 배포하는 방법을 단계별로 알려줘. GitHub Pages 사용하고 싶어."라고 요청하면 단계별 가이드를 제공합니다.

---

💡 특별 꿀팁: 무료 사용자를 위한 '토큰(사용량)' 절약법

저도 여러분께 보여드릴 예시를 만들다 보니, 이름 하나만 바꾸고 싶은데 Claude가 전체 코드를 다시 써주느라 소중한 사용량을 다 써버리는 경우가 생기더라고요. 이럴 때 Claude를 다시 쓰지 않고 1초 만에 수정하는 법을 추천합니다!

---

1. 직접 '메모장'에서 1초 만에 바꾸기 (가장 추천!)

이미 파일을 다운로드 받으셨다면, 클로드를 아예 쓰지 않고 수정하는 게 가장 경제적입니다.

1. 파일 열기: index.html 파일 우클릭 → [연결 프로그램] → [메모장] 클릭
2. 단축키 활용: Ctrl + H(바꾸기) 누르기
3. 찾을 내용입력: 홍길동 / 바꿀 내용: 오카시아 입력
4. 마무리: [모두 바꾸기] 후 저장(Ctrl + S)하면 끝!

2. Claude에게 '바뀐 부분'만 요청하기

이건 이름 변경 외에 특정 기능이나 디자인 코드를 살짝 고치고 싶을 때 유용한 고급 팁입니다. 전체 코드를 다시 출력하게 하지 말고 이렇게 질문해 보세요.

"전체 코드를 다시 줄 필요는 없어. 이름이 '홍길동'으로 된 부분만 '오카시아'로 수정한 코드 한 줄만 알려줘."

이렇게 요청하면 클로드가 수십 줄의 코드 대신 딱 필요한 부분만 짧게 대답하므로, 답변 대기 시간과 사용량을 획기적으로 아낄 수 있습니다.

---

내 컴퓨터 안에서만 잠자던 아이디어가 실제 웹사이트로 탄생하는 순간, 그 짜릿함은 말로 표현할 수 없습니다. 오늘 배운 'index.html' 파일 하나가 여러분의 커리어와 브랜딩을 바꾸는 시작점이 될 것입니다.

막히는 부분이 있다면 주저하지 말고 Claude에게 다시 물어보세요. "이 부분 에러 나는데 도와줘"라는 한 마디면 Claude는 언제든 친절하게 답해줄 준비가 되어 있습니다. 여러분의 멋진 포트폴리오 사이트 탄생을 오카시아 라운지가 응원합니다!

 

🔗 다음 예고:

웹사이트를 만들었다면 이제 그 안을 채울 데이터가 필요하겠죠? [실전 가이드 3-2편]에서는 엑셀 노가다를 끝내줄 "클릭 한 번으로 끝나는 데이터 분석 자동화 스크립트 제작법"으로 돌아오겠습니다.

 

 

[AI 활용] 유튜브 숏츠 5분 만에 만들기: 2026년형 초스피드 제작 가이드