🤖 AI 제작 가이드

AI로 홈페이지 만들기
코딩 몰라도 첫 사이트 완성하는 법

📅 2026년 5월 13일 ✍️ 뚝딱닷컴 ⏱️ 6분 읽기 👁 -

🤔 홈페이지를 만들고 싶은데 코딩을 모른다

홈페이지가 갖고 싶다. 내 작업물을 올려두거나, 블로그를 쓰거나, 뭔가를 판매하거나. 이유는 각자 다르지만 결국 같은 벽에 막힌다. 코딩을 모른다는 것.

예전엔 선택지가 둘이었다. 직접 코딩을 배우거나, 돈 주고 개발자를 고용하거나. 둘 다 시간과 돈이 많이 든다. 그런데 지금은 세 번째 선택지가 생겼다. AI한테 말하면 된다.

💡

뚝딱닷컴이 바로 그 결과물이다. 운영자는 코딩을 배운 적 없다. AI와 대화하면서 만든 사이트다.

💬 어떻게 가능한가?

Claude Code라는 AI 도구가 있다. 말을 코드로 바꿔준다. "상단에 메뉴 만들어줘", "버튼 색깔 주황색으로 바꿔줘", "로그인 기능 넣어줘" — 이런 말을 타이핑하면 AI가 HTML, CSS, JavaScript를 직접 작성해준다.

내가 할 일은 무엇을 원하는지 말하는 것뿐이다. 코드가 뭔지 몰라도 된다. 결과물을 보고 "이건 좀 다르게 해줘"라고 다시 말하면 된다. 대화하듯 홈페이지를 만드는 것이다.

📌

Claude Code는 Anthropic이 만든 AI 코딩 도구다. 터미널에서 실행하며, 파일을 직접 읽고 쓰고 수정한다. 명령어 한 줄로 설치할 수 있다.

📦 준비물

복잡하지 않다. 딱 두 가지면 된다.

💡

그 외에 설치하는 것들(Node.js 등)은 Claude Code 설치 과정에서 안내가 나온다. 하나씩 따라가면 된다. 뚝딱닷컴 1장 교재에 전부 정리돼 있다.

🪜 만드는 순서

큰 흐름은 이렇다. 각 단계에서 막히는 부분은 교재에 자세히 나와 있다.

1
Claude Code 설치 터미널을 열고 설치 명령어 한 줄 입력. Node.js가 없으면 먼저 설치하라고 안내가 나온다. 따라가면 된다.
2
폴더 만들기 내 홈페이지 파일이 들어갈 폴더를 하나 만든다. 이름은 아무거나 괜찮다. 그 폴더에서 Claude Code를 실행한다.
3
AI에게 말하기 "뚝딱닷컴처럼 주황색 테마의 홈페이지 만들어줘. 상단 메뉴에는 교재, 블로그, 소개 버튼을 넣어줘." 이런 식으로 원하는 것을 말한다.
4
파일 생성 확인 AI가 index.html 파일을 만들어준다. 브라우저로 열어서 결과를 확인한다. 마음에 안 드는 부분은 다시 말하면 된다.
5
Netlify 배포 완성된 폴더를 Netlify에 드래그앤드롭하면 전 세계에서 접속 가능한 주소가 생긴다. 10분이면 끝난다.

✨ 실제로 이런 게 됩니다

"말로만 된다고?" 싶을 것이다. 실제로 뚝딱닷컴에 들어간 기능들을 보면 된다. 코드 한 줄 직접 쓴 게 없다. 전부 AI에게 말해서 만든 것이다.

🔐
구글 로그인 "구글 계정으로 로그인하는 기능 만들어줘"라고 말했다. Firebase 연동까지 AI가 처리했다.
💬
실시간 게시판 커뮤니티 게시판. 글 작성, 댓글, 실시간 업데이트. AI가 Firestore를 연동해줬다.
📤
카카오 공유 버튼 "카카오톡으로 공유하는 버튼 넣어줘." 카카오 API 연동도 AI가 코드를 작성했다.
💰
애드센스 연결 구글 광고 코드 삽입도 말 한마디로 됐다. 광고 위치 지정까지 AI가 처리했다.

이게 전부 뚝딱닷컴이다. 뚝딱닷컴 교재에서 각 기능을 어떻게 만들었는지 단계별로 볼 수 있다.


⏱️ 얼마나 걸리나?

첫 페이지 완성까지
30분. Claude Code 설치하고, 폴더 만들고, AI에게 원하는 걸 말하면 index.html이 생긴다. 처음 해보는 사람도 30분이면 첫 화면이 뜬다.
도메인 연결까지
하루. Netlify 배포는 10분. 도메인 구매와 연결에 짧게는 수십 분, DNS 전파까지 기다리면 최대 하루가 걸린다. 설정 자체는 간단하다.
완성도를 높이는 건?
계속. 홈페이지는 만들고 끝이 아니다. 기능을 추가하고, 글을 올리고, 디자인을 다듬는 일이 이어진다. 그 과정도 AI와 대화하면서 한다. 뚝딱닷컴도 지금도 계속 업데이트 중이다.

✅ 마무리 — 전체 과정을 교재로 정리했다

설치부터 배포까지, 로그인 기능부터 광고 연결까지. 뚝딱닷컴을 만들면서 거친 과정을 20장짜리 교재로 정리했다.

순서대로 따라가면 뚝딱닷컴과 비슷한 구조의 홈페이지를 만들 수 있다. 코딩 경험이 전혀 없어도 된다. 중간에 막히는 부분은 AI에게 물어보면 해결된다. 뚝딱닷컴에서 무료로 볼 수 있다.

설치부터 배포까지 전 과정을 담은 20장 교재, 무료로 공개돼 있어요.

📖 교재 보러 가기