AI와 10분 만에 개인 홈페이지 만들기: Next.js와 Claude 4로 시작하는 첫 프로젝트

나만의 홈페이지 하나쯤 만들어보고 싶다는 마음은 있어도, 개발 환경 세팅 단계에서 발목이 잡히는 사람이 많습니다. 터미널이라는 검은 창에 명령어를 치는 것부터 막막하게 느껴지고, 결국 "개발은 나와 맞지 않나 보다" 하고 물러서는 경우도 흔합니다.

클로드 4 같은 AI 코딩 도구는 이 진입 장벽을 크게 낮춰 줍니다. "프롬프트에 하고 싶은 말을 쓰면 코드를 만들어 준다"는 말이 반신반의하게 들릴 수 있지만, 실제로 기본 구조를 잡는 데는 충분히 쓸 만한 수준입니다. 이 글에서는 설치부터 배포까지의 흐름을 따라가며, 막히기 쉬운 구간과 그 해결 방법을 함께 정리했습니다.

AI 코딩의 시대, 왜 개인 홈페이지일까요?

개인 홈페이지는 어느 대 개발자만의 전유물이 아니게 되었습니다. 마케터, 디자이너, 작가, 프리랜서처럼 자신의 일을 스스로 알리고 싶은 사람들이 소개와 프로젝트를 한 곳에 모아두고 있습니다.

예전이라면 이런 웹을 만들기 위해 HTML, CSS, JavaScript는 기본이고 React나 Vue 같은 프레임워크까지 익혀야 했습니다. 그런데 지금은 아이디어를 프롬프트에 적어 보내면 구조부터 코드까지 AI가 끌어다 줍니다. 가장 큰 변화는 그렇게 '첫 문'을 여는 데 걸리는 시간이 크게 줄었다는 점입니다. 'Vibe Coding'이라는 흐름이 가리키는 것도 바로 이 변화입니다.

Claude 4와 Next.js로 홈페이지 만들기: 첫 프로젝트 진행 순서

이 실습은 클로드 4와 Next.js 환경을 기준으로 합니다. Next.js는 React 기반 프레임워크인데, 페이지와 컴포넌트 단위로 구성이 나뉘기 때문에 처음 홈페이지를 만들 때 구조를 잡기 좋습니다. 아래 4단계마다 어떤 프롬프트를 쓰면 되는지, 그리고 생성되는 코드가 어떤 성격을 갖는지 함께 적어두었습니다.

1. 프로젝트 아키텍처 제안받기

가장 먼저 할 일은 AI에게 전체 그림을 그려달라고 요청하는 것입니다. 무엇을 만들지 정하지 않은 채 코드부터 묻기보다, 어떤 기술 스택으로 어느 페이지들을 구성할지 함께 구상하는 것부터 시작합니다.

💻 프롬프트 예시:

"저는 제 개인 포트폴리오 웹사이트를 만들고 싶습니다. Next.js와 Tailwind CSS를 사용하여 반응형 웹사이트를 구축하고 싶습니다. 다음 페이지들이 포함되어야 합니다:
1. 메인 페이지 (자기소개, 핵심 역량 요약)
2. 포트폴리오 페이지 (프로젝트 목록, 각 프로젝트 상세 페이지)
3. 블로그 페이지 (간단한 글 목록, 각 글 상세 페이지)
4. 연락처 페이지 (연락 양식)

이러한 요구사항을 바탕으로 Next.js 프로젝트의 초기 아키텍처와 폴더 구조를 제안해 주세요. 각 페이지별로 어떤 컴포넌트가 필요할 모으기도 간략하게 설명해 주세요."

✅ 클로드 4의 응답 (진요):

이런 요청에는 보통 표준 Next.js 폴더 구조인 pages/, components/, public/, styles/가 제안됩니다. 각 페이지에 필요한 컴포넌트(HeroSection.js, ProjectCard.js, ContactForm.js) 설명과 tailwind.config.js 구성 안내까지 함께 나오는 경우가 많아, 처음부터 설계를 혼자 짜야 하는 부담이 줄어듭니다.

2. 핵심 컴포넌트 코드를 요청하기

아키텍처가 정해지면 이제 페이지를 하나씩 채워 넣을 차례입니다. 페이지를 통째로 만들어 달라고 하기보다, 컴포넌트 하나씩 기준을 잡고 요청하면 응답이 훨씬 깔끔하게 나옵니다.

💻 프롬프트 예시:

"위에서 제안해주신 아키텍처를 바탕으로, 메인 페이지에 들어갈 HeroSection 컴포넌트 코드를 생성해 주세요.
- 사용자 이름: '홍길동'
- 직업: '프리랜서 웹 개발자'
- 핵심 문서: '아이디어를 현실로 만드는 코드'
- 버튼: '포트폴리오 보기' (portfolio경로로 이동)
- Tailwind CSS를 사용하여 모던하고 깔직한 디자인을 적용해 주세요."

✅ 클로드 4의 응답 (코드 스니펫 예시):

// components/HeroSection.js
import Link from 'next/link';

export default function HeroSection() {
  return (
    <section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20 text-center">
      <div className="container mx-auto px-4">
        <h1 className="text-5xl font-bold mb-4">안녕하세요, 홍길동입니다.</h1>
        <p className="text-xl mb-8">프리랜서 웹 개발자, 아이디어를 현실로 만드는 코드</p>
        <Link href="/portfolio" className="bg-white text-purple-600 px-6 py-3 rounded-full text-lg font-semibold hover:bg-gray-100 transition duration-300">
            포트폴리오 보기
        </Link>
      </div>
    </section>
  );
}

JSX와 Tailwind CSS 클래스를 이렇게 조합한 컴포넌트를 만들어줍니다. 같은 방식으로 나머지 페이지도 채우면 됩니다. 컴포넌트 구성이 처음이라면, 한 화면의 작은 조각을 하나씩 요청하는 방식이 응답을 안정적으로 만들어 줍니다.

3. 디자인 적용하기 (Tailwind CSS 활용)

기본 화면이 나오면 이제 원하는 스타일을 입힐 차례입니다. 프롬프트로 색상 팔레트를 전달하면 Tailwind 설정과 클래스에 반영할 수 있습니다.

💻 프롬프트 예시:

"현재 웹사이트의 기본 색상 팔레트로 변경하고 싶습니다. 기본 배경색은 밝은 회색(#F8FAFC)으로, 주요 강조색은 테라코타(#E07A5F)로, 텍스트 색상은 어두운 남색(#3D405B)으로 변경하는 Tailwind CSS 설정과 적용 방법을 알려주세요."

클로드 4는 tailwind.config.js의 어느 부분을 바꿔야 하는지 단계적으로 알려줍니다. 다만 과정이 늘 매끄럽지는 않습니다. "다크 모드를 추가해 줘"처럼 범위가 넓은 요청은 의도가 제대로 전달되지 않는 경우가 많고, 어긋난 색이 나올 때는 설정 파일을 직접 열어 한 줄씩 확인해야 합니다.

4. 배포 안내받기

코드가 채워졌으면 이제 세상에 공개할 차례입니다. Next.js 프로젝트는 Vercel과 연동하는 방법이 여러모로 편리합니다.

💻 프롬프트 예시:

"이 Next.js 프로젝트로 Vercel에 배포하는 가장 빠르고 쉬운 방법을 단계별로 설명해 주세요. GitHub 연동을 통한 자동 배포 방법을 포함해 주세요."

GitHub에 올리고 Vercel과 연동하면 클릭 몇 번으로 배포가 끝납니다. 다만 중간에 빌드 오류로 막히는 경우도 있습니다. 이때는 에러 로그를 통째로 복사해 프롬프트에 붙여넣고 원인을 설명받는 방법이 효과적이며, 개발 경험이 적은 사람에게는 거의 필수인 작업 방식입니다. 한 번 연동해 두면 이후 배포는 자동으로 이루어지므로 같은 과정을 반복할 필요가 없습니다.

활용 사례로 보는 가능성과 주의점

가장 중요한 것은 견고한 초기 세팅과 구조를 먼저 기획하는 것입니다. 이 흐름을 다른 상황에 적용한 예시를 두 가지 살펴보겠습니다.

💻 사례 1: 긴급 랜딩 페이지. 제품 출시가 다가와 급하게 랜딩 페이지가 필요한데, 개발자에게 부탁할 시간이 없다고 가정해 보겠습니다. 클로드에게 "신제품의 랜딩 페이지를 Next.js와 Tailwind CSS로 만들어 달라. 제품 소개, 특징, 구매 버튼, 이메일 구독 폼을 넣어 줘"라고 요청하면, 아키텍처부터 모바일 반응형까지 한 번에 나오는 경우가 많습니다. 내용만 채워 Vercel로 배포하면 비교적 짧은 시간 안에 공개할 수 있습니다.

다만 여기에도 한계는 있습니다. 구매 버튼만 살짝 다르게 바꾸려고 속성값을 여러 번 요청하다 보면, 원래 코드의 다른 부분까지 함께 바뀌는 일이 잦습니다. 결국 코드 전체를 다시 검토하며 원하는 변경만 골라 반영하는 수고가 필요합니다.

💻 사례 2: 인터랙티브한 개인 홈페이지. 개인 페이지에 인터랙티브한 요소를 더하고 싶다면 "스크롤 시 부드럽게 나타나는 애니메이션과 마우스 오버 시 늘어나는 효과를 추가해 달라"고 요청할 수 있습니다. 이 경우 Framer Motion 라이브러리를 이용한 코드가 생성되곤 합니다. 다만 애니메이션 지연 수치를 조금만 바꿔도 화면 배치가 어긋날 수 있어, 이 라이브러리를 제대로 쓰려면 기초 개념을 따로 익혀 두는 것이 좋습니다.

AI 코드 도구의 한계

장점과 한계를 균형 있게 정리하면 다음과 같습니다.

AI가 코드를 만들어 주는 것은 분명 유용하지만, 그 코드를 이해하고 수정하는 일은 결국 사용자가 직접 단계를 밟아야 합니다. 예를 들어 컴포넌트의 렌더링 생명주기, 성능 최적화, 보안 이슈 같은 것은 프롬프트 길이를 늘린다고 해결되지 않습니다. 이런 문제에 대응할 수 있는 최소한의 웹 개발 기초 지식이 무엇보다 필요합니다.

그래서 제목의 10분은 '뼈대'를 갖추는 데 드는 시간으로 이해하는 것이 맞습니다. 완성된 웹사이트를 운영하려면 콘텐츠를 채우고, 디자인을 다듬고, 반응형 처리를 확정하는 등 그 뒤의 작업이 이어집니다. 그래도 개인 홈페이지의 뼈대가 빠르게 생긴다는 것 자체가 좋은 출발점이 됩니다.

마무리하며

처음 시작할 때 가장 중요한 것은, 에러가 발생하더라도 차근차근 디버깅하며 직접 문제를 해결해 보는 경험입니다. AI 도구가 제안하는 코드를 바탕으로 하나씩 화면을 만들어가는 과정 자체가 실질적인 개발 감각을 길러줍니다.

막히는 순간을 해결하며 얻는 작은 성취감은 도구가 주는 편리함보다 더 오래 기억에 남습니다. 첫 프로젝트를 완성했을 때의 그 감각을 꼭 느껴보시기 바랍니다.

---

첫 웹 프로젝트 완성을 위한 실천 3단계

1. AI 코딩 도구 준비하기: Claude나 ChatGPT 등 편한 AI 도구에 접속하여 코딩 환경을 준비해 보세요.
2. Next.js 프로젝트 생성하기: 터미널에서 npx create-next-app@latest my-personal-website 명령어로 기본 구조를 만들어 보세요.
3. 간단한 자기소개 컴포넌트 요청하기: AI에게 "간단한 자기소개 페이지의 Next.js 컴포넌트 코드를 작성해 줘"라고 요청하고 생성된 코드를 직접 브라우저에 띄워보세요.

---

📚 참고 문헌 및 공식 레퍼런스 (References)

• Next.js Documentation, 『App Router Fundamentals & Server Component Optimization』
• Tailwind CSS Documentation, 『Utility-First CSS Workflow and Production Build』

---

🔮 관련 인사이트 & 추천 가이드

• 프롬프트 기본 구조: 2026년형 제로샷 에이전트 지시법 마스터하기
• 풀스택 SaaS 만들기 - AI와 기획부터 배포·과금까지