"설계도만 던져주세요. 시공은 AI가 합니다."
지난 1편에서는 클로드(Claude)를 '수석 개발자'로 세팅하고 사이트 구조(Sitemap)를 기획하는 법을 다뤘다. 우리의 든든한 AI 개발자는 내 요청을 분석하여 아래와 같이 완벽한 디자인 방향과 메뉴 구조를 제안해 주었다.
디자인 톤앤매너부터 8단계 메뉴 구조까지 완벽하다. 남은 건 "이대로 만들어!"라는 명령뿐이다. 오늘은 복잡한 코딩 문법을 몰라도, 이 설계도를 바탕으로 단 1분 만에 실제 작동하는 웹사이트를 만드는 과정을 생생하게 보여주겠다. 특히 클로드의 킬러 기능인 '아티팩트(Artifacts)'가 어떻게 개발의 판도를 바꿨는지 직접 확인해 보길 바란다.
1. MVP(최소 기능 제품)의 법칙: 핵심부터 공략하라
위 이미지에서 클로드는 Hero부터 Footer까지 총 8개의 섹션을 제안했다. 물론 다 만들면 좋겠지만, 개발의 첫 원칙은 MVP(Minimum Viable Product)다. 처음부터 너무 많은 것을 한 번에 코딩시키면 에러가 날 확률이 높다.
따라서 우리는 클로드가 제안한 목록 중, 사이트 구동에 필수적인 핵심 기능 3가지를 먼저 구현해 달라고 요청할 것이다.
- 1. Hero 섹션: 사이트의 첫인상을 결정하는 메인 화면
- 3. Latest Guides (핵심): 내가 쓴 글이나 포트폴리오를 보여주는 공간
- 7. Contact: 방문자가 나에게 연락할 수 있는 창구
나머지(About, Newsletter 등)는 뼈대를 세운 뒤에 추가해도 늦지 않다.
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 파일을 따로 만듭니다. 하지만 초보자가 이 파일들을 연결하려면 골치가 아픕니다. "하나의 파일로 합쳐줘"라고 하면, 나중에 배포할 때 파일 하나만 드래그하면 끝나기 때문에 훨씬 간편합니다.
3. 실전 Step 2: 아티팩트(Artifacts)로 실시간 확인하기
여기서 챗GPT와 결정적인 차이가 드러난다. 클로드는 코드를 다 짤 때까지 기다릴 필요가 없다. 우측 화면에 웹사이트 미리보기(Preview) 창이 뜬다.
보이는가? 왼쪽에서는 복잡한 코드가 생성되고 있지만, 오른쪽에는 우리가 요청한 '블루/퍼플 그라디언트'가 적용된 세련된 다크 모드 사이트가 실제로 작동하고 있다. 1분도 안 돼서 기획서가 현실이 된 순간이다.
4. 실전 Step 3: "좀 더 예쁘게 해 봐" (디자인 수정)
첫 결과물도 훌륭하지만, 디테일을 수정하고 싶을 수 있다. 이때 코드를 직접 고치는 게 아니라, 팀장님이 피드백 주듯이 말하면 된다.
수정 프롬프트 예시:
1. "Hero 섹션의 문구가 너무 작아. 좀 더 굵고 임팩트 있게 키워줘."
2. "Contact 버튼이 너무 각져 있어. 둥글게(Radius) 깎아주고, 마우스 올리면 빛나는 효과를 줘."
3. "스마트폰으로 볼 때도 글자가 깨지지 않게 모바일 반응형(Responsive)으로 신경 써줘."
말하는 즉시 우측 미리보기 화면이 실시간으로 바뀐다. 마치 옆에 앉은 유능한 디자이너에게 "여기 색깔 좀 바꿔볼래?"라고 말하는 것과 똑같다.
5. 다음 편 예고: 내 컴퓨터 밖으로 내보내기 (배포)
지금까지 만든 멋진 사이트는 아직 클로드 서버와 내 눈앞에만 존재한다. 이걸 친구들에게, 그리고 전 세계 사람들에게 보여주려면 인터넷 주소(URL)가 필요하다.
다음 마지막 포스팅(3편)에서는 이 코드를 파일로 저장하고, 돈 한 푼 들이지 않고 '무료 호스팅(Netlify)'을 통해 단 10초 만에 실제 인터넷 사이트로 배포하는 방법을 소개하겠다. 드디어 "나 홈페이지 있는 사람이야"라고 명함에 주소를 박을 순간이 왔다.