"이게 1분 만에 된다고?" 코딩 1도 몰라도 클로드(Claude)로 '진짜 웹사이트' 만드는 법 (웹서비스 런칭 2편)

"설계도만 던져주세요. 시공은 AI가 합니다."

지난 1편에서 클로드(Claude)를 '수석 개발자'로 세팅하고 사이트 구조(Sitemap)를 기획하는 법을 다뤘다. AI 개발자는 내 요청을 분석해 디자인 톤앤매너부터 8단계 메뉴 구조까지 완벽한 설계도를 내놓았다. 남은 건 "이대로 만들어"라는 명령 한 줄뿐이다.

오늘은 복잡한 코딩 문법을 몰라도, 이 설계도를 바탕으로 단 1분 만에 실제 작동하는 웹사이트를 만드는 과정을 처음부터 끝까지 보여준다. 특히 클로드의 킬러 기능인 '아티팩트(Artifacts)'가 왜 ChatGPT와 결정적으로 다른 판을 만들었는지 직접 확인해 보길 바란다.

1. MVP(최소 기능 제품)의 법칙: 핵심부터 공략하라

클로드는 Hero부터 Footer까지 총 8개 섹션을 제안했다. 물론 다 만들면 좋겠지만, 개발의 첫 원칙은 MVP(Minimum Viable Product)다. 처음부터 너무 많은 기능을 한꺼번에 코딩시키면 토큰이 꼬이거나, 한 섹션에서 에러가 나면 전체가 무너진다.

그래서 사이트 구동에 꼭 필요한 핵심 3가지만 먼저 구현한다.

• Hero 섹션 — 사이트의 첫인상을 결정하는 메인 화면
• Latest Guides — 내가 쓴 글/포트폴리오를 보여주는 공간 (핵심)
• Contact — 방문자가 나에게 연락할 수 있는 창구

나머지(About, Newsletter, Testimonials 등)는 뼈대가 선 뒤에 하나씩 붙여도 늦지 않다. 오히려 그렇게 하는 편이 버그 추적이 훨씬 쉽다.

2. 실전 Step 1: "제안한 대로 코드 짜줘" (프롬프트 입력)

1편의 대화가 끊기지 않은 상태(Context 유지)에서 명령해야 한다. 앞서 클로드가 제안한 디자인 방향(블루/퍼플 그라디언트, 산세리프 폰트)을 콕 집어서 반영하도록 요구한다.

[개발 요청 프롬프트]

"완벽해. 네가 제안한 디자인 방향과 구조를 바탕으로 'AI 크리에이터 포트폴리오' 웹사이트의 전체 코드(HTML, CSS, JS)를 작성해 줘.

[요구사항]

1. 반드시 하나의 HTML 파일(Single File) 안에 CSS와 JS를 모두 포함해 줘.
2. 디자인: 네가 제안한 대로 다크 모드 배경에 블루/퍼플 그라디언트를 포인트로 써줘.
3. 폰트: 가독성 좋은 산세리프(Inter) 폰트를 적용해 줘.
4. 구조: 일단 Hero, Latest Guides, Contact 3가지 섹션만 먼저 구현해 줘.
5. 애니메이션: 스크롤 할 때 부드럽게 페이드인(Fade-in) 되는 효과를 넣어줘."

엔터를 치는 순간, 클로드는 망설임 없이 코드를 쏟아내기 시작한다.

💡 테크바이버의 Tip: 왜 '하나의 파일'인가?

보통 개발은 HTML / CSS / JS 파일을 따로 만든다. 하지만 초보자가 이 파일들을 서로 연결하려면 경로 문제로 골치가 아프다. "하나의 파일로 합쳐줘"라고 하면 나중에 Netlify로 배포할 때 파일 하나만 드래그하면 끝이라 훨씬 간편하다.

3. 실전 Step 2: 아티팩트(Artifacts)로 실시간 확인하기

여기서 챗GPT와 결정적인 차이가 드러난다. 클로드는 코드를 다 짤 때까지 기다릴 필요가 없다. 우측 화면에 웹사이트 미리보기(Preview) 창이 바로 뜬다.

왼쪽에서는 복잡한 코드가 한 줄씩 생성되고 있는데, 오른쪽에서는 이미 '블루/퍼플 그라디언트'가 적용된 세련된 다크 모드 사이트가 실제로 작동하고 있다. 1분도 안 돼서 기획서가 현실이 되는 순간이다.

 

4. 실전 Step 3: "좀 더 예쁘게 해 봐" (디자인 수정)

첫 결과물도 훌륭하지만, 디테일을 수정하고 싶을 수 있다. 이때 코드를 직접 고치는 게 아니라, 팀장님이 디자이너에게 피드백 주듯 말하면 된다.

수정 프롬프트 예시:

• "Hero 섹션의 문구가 너무 작아. 좀 더 굵고 임팩트 있게 키워줘."
• "Contact 버튼이 너무 각져 있어. 둥글게(Radius) 깎아주고, 마우스 올리면 빛나는 효과를 줘."
• "스마트폰으로 볼 때도 글자가 깨지지 않게 모바일 반응형(Responsive)으로 신경 써줘."

말하는 즉시 우측 미리보기 화면이 실시간으로 바뀐다. 마치 옆에 앉은 유능한 디자이너에게 "여기 색깔 좀 바꿔볼래?"라고 말하는 것과 똑같다.

5. 내가 실제로 1분 웹사이트를 만들어본 두 가지 케이스

이 방식이 실제로 '쓸모 있느냐'는 다른 문제다. 내가 직접 써본 두 가지 상황을 공유한다.

케이스 A — 사내 팀 소개 페이지. 팀 워크숍 자료용으로 팀원 8명 프로필 카드가 들어간 원페이지 사이트가 급하게 필요했다. 디자이너에게 외주 맡길 시간도, 예산도 없었다. 클로드에 팀원 명단(이름/직책/한 줄 소개)과 '블루톤 다크 모드, 카드 호버 애니메이션'만 요청했더니, 아티팩트로 약 7분 만에 초안이 나왔다. 피드백 3번으로 톤만 조정해서 그대로 배포했다.

케이스 B — 개인 사이드 프로젝트 랜딩페이지. 새 서비스 베타 신청받을 랜딩페이지가 필요했다. Hero + 기능 3개 소개 + 이메일 수집 폼 구조. 여기서 막힌 지점은 '이메일 수집 폼이 실제로 어디에 저장되느냐'였다. 클로드는 HTML 폼은 잘 그려줬지만, 백엔드가 없으니 입력값이 허공에 사라졌다. 이 부분은 Make + 구글 시트 연동으로 해결했다.

6. 솔직한 한계: 이 구조가 깨지는 지점

이 방식이 만능은 아니다. 직접 부딪히며 알게 된 한계선은 이렇다.

• 페이지가 여러 개일 때 — 한 HTML 파일 안에 모든 섹션을 넣는 방식이다 보니, 페이지 라우팅(/about, /blog 같은)이 필요한 다중 페이지 사이트에는 부적합하다. 이럴 땐 처음부터 React/Next.js 같은 프레임워크를 요청해야 한다.
• 복잡한 상호작용 — 로그인, 결제, 사용자별 데이터 저장처럼 서버가 필요한 기능은 '예쁜 화면'까지만 만들어준다. 실제 작동시키려면 별도 백엔드 세팅이 필요하다.
• 긴 대화에서 망가짐 — 수정 요청을 20회 이상 누적하면 컨텍스트가 꼬여서 클로드가 이전에 잘 되던 부분을 되돌려놓는 경우가 있다. 주기적으로 "현재까지의 전체 코드를 다시 한 번 통째로 출력해줘"라고 시켜 스냅샷을 저장해두는 습관이 필요하다.
• 이미지/폰트 자산 — 클로드는 실제 이미지를 만들어주지 않는다. 이미지 자리에는 플레이스홀더만 들어가므로, 이후 나노 바나나나 Ideogram 같은 이미지 생성 AI로 별도 준비해야 한다.

7. 다음 편 예고: 내 컴퓨터 밖으로 내보내기 (배포)

지금까지 만든 멋진 사이트는 아직 클로드 서버와 내 눈앞에만 존재한다. 이걸 친구들에게, 그리고 전 세계 사람들에게 보여주려면 인터넷 주소(URL)가 필요하다.

다음 3편에서는 이 코드를 파일로 저장하고, 돈 한 푼 들이지 않고 무료 호스팅(Netlify)을 통해 단 10초 만에 실제 인터넷 사이트로 배포하는 방법을 소개한다. 드디어 "나 홈페이지 있는 사람이야"라고 명함에 주소를 박을 순간이 온다.

---

📚 AI 사이드 프로젝트 시리즈

• 1편 — 개발자 채용하지 마세요: 클로드(Claude)를 '수석 엔지니어'로 세팅하는 법
• 2편 (현재 글) — 코딩 1도 몰라도 클로드로 '진짜 웹사이트' 만드는 법
• 3편 — 서버비 0원, 드래그 한 번으로 평생 무료 웹사이트 배포하기 (Netlify)
• 4편 — 개발자 없이 '문의하기' 기능을 AI + Make로 10분 만에 구현하기
• 5편 — 서버도 DB도 필요 없다: 구글 시트를 '무료 CRM'으로 쓰는 법