구글 스티치와 클로드 코드로 홈페이지 만들기

이 글을 다 읽고 나면, 디자인 툴 한 번도 안 써본 분이라도 프롬프트 몇 줄로 웹사이트를 디자인하고, 실제로 동작하는 코드로 바꾸고, 공유 가능한 주소까지 배포할 수 있어요.

오늘 소개할 조합은 구글의 Stitch(바이브 디자인), 앤트로픽의 Claude Code(바이브 코딩), 그리고 Netlify Drop(배포) 이렇게 세 가지예요. 각자 잘하는 일이 달라서 이어 붙이면 기획부터 배포까지 한 번에 끝납니다.

예제로는 '그린코끼리'라는 AI 교육 유튜브 채널을 홍보하는 원페이지를 만들어볼게요. 여러분의 주제로 바꿔 따라 하셔도 전혀 문제없습니다.

이 글은 영상을 보지 않아도 똑같이 따라 할 수 있도록, 각 단계에서 실제로 클릭하는 버튼과 결과 화면을 하나하나 스크린샷으로 옮겨 담았어요. 순서대로만 따라오시면 돼요.

1. Stitch에 접속해서 예제 프롬프트로 감 잡기

먼저 구글 Stitch(stitch.withgoogle.com)에 접속해 주세요. 바이브 디자인을 담당할 첫 번째 도구예요.

화면이 뜨면 오른쪽 상단의 '시작하기(Get started)' 버튼을 눌러주세요. 구글 계정으로 무료로 시작할 수 있어요.

로그인이 끝나면 이렇게 홈 화면으로 넘어와요. 왼편을 보면 예제 디자인 이미지들이 주르륵 나열돼 있어요.

예제 이미지 아무거나 하나 클릭해볼게요. 그러면 오른편에는 완성된 디자인이 보이고, 왼편에는 그 디자인을 만들 때 사용된 프롬프트가 나와요.

이 프롬프트를 한국어로 번역해서 한 번 읽어보세요. 어느 정도 길이로, 어떤 구성으로 써야 원하는 결과가 나오는지 금방 감이 잡힙니다.

예제를 다 확인했다면 왼쪽 상단의 메뉴 아이콘을 클릭한 뒤 '모든 프로젝트로 이동(Go to all projects)'을 눌러 메인으로 돌아와 주세요.

2. 홍보 사이트 프롬프트 작성하고 참고 이미지 업로드하기

이제 우리가 만들 원페이지 사이트의 프롬프트를 직접 작성해 볼게요. 아래 프롬프트 입력창에 만들고 싶은 사이트를 구체적으로 적어주세요. 저는 이렇게 작성했어요.

"그린코끼리라는 AI 교육 유튜브 채널을 홍보하는 원페이지 웹사이트를 만들어줘. 목적은 사람들이 그린코끼리 유튜브 채널에 방문하게 만드는 거야. 테마 분위기는 업로드한 이미지를 참고해줘. 페이지 전체를 한국어 텍스트로 구성하고, 히어로 섹션에는 '1시간을 10시간처럼 AI, 그냥 시작해라' 헤드라인을 넣어줘."

여기서 핵심 포인트는 '참고 이미지 업로드'예요. 말로만 분위기를 설명하는 것보다 이미지 한 장이 의도를 훨씬 정확하게 전달합니다. 저는 유튜브 채널을 캡처한 이미지 한 장을 올렸어요.

3. 프롬프트 개선 기능 쓰고 모델 선택하기

입력창 왼쪽에 플러스 아이콘이 있어요. 클릭하면 '웹사이트 주소' 옵션이 가장 먼저 보입니다. 참고하고 싶은 사이트 주소가 있다면 여기에 입력해도 좋아요.

저는 입력할 주소가 없으니 X 아이콘으로 닫고, 플러스 아이콘을 다시 누른 뒤 '프롬프트 개선(Improve prompt)' 옵션을 선택할게요.

잠시 후 프롬프트가 영어로 훨씬 구체적이게 다듬어집니다. 번역해서 읽어보면 원래 의도는 그대로 유지하면서 디테일이 더 풍부해진 걸 확인할 수 있어요.

프롬프트 아래에는 '앱(App)'과 '웹(Web)' 선택 옵션이 있어요. 우리는 웹사이트를 만드니 '웹'을 클릭해 주세요.

오른편의 '모델' 옵션을 누르면 네 가지 선택지가 나와요. 크게는 Gemini 3.0 Flash(빠름)와 3.1 Pro(고품질) 두 계열이에요. 저는 품질 우선으로 Pro 모델을 선택하겠습니다.

프롬프트·이미지·웹/앱·모델 네 가지가 모두 설정됐으면 아래 '생성(Generate)' 버튼을 눌러주세요.

4. 생성된 페이지에서 화면 이동·확대 조작 익히기

몇 초 뒤 페이지 디자인이 딱 나타납니다. 요청한 대로 유튜브 채널 느낌이 반영된 히어로 섹션과 본문이 만들어졌어요.

작업하기 전에 조작법 두 개만 기억해주세요. 첫째, 스페이스바를 누른 채 마우스를 드래그하면 캔버스가 자유롭게 움직입니다. 둘째, 맥은 커맨드(⌘), 윈도우는 컨트롤을 누른 채 마우스 휠을 굴리면 확대·축소가 돼요.

생성된 요소들은 캔버스 안에서 드래그앤드롭으로 원하는 곳에 자유롭게 배치할 수도 있으니 참고하세요.

5. 디자인 시스템 수정해서 색상·폰트 한번에 바꾸기

생성된 디자인 옆에는 '디자인 시스템(Design System)'이라는 기준표가 함께 만들어져 있어요. 이 페이지가 어떤 색상 팔레트와 폰트로 구성됐는지 한눈에 보여주는 설계도예요.

디자인 시스템을 수정하면 여기에 연결된 모든 페이지의 스타일이 한 번에 바뀝니다. 수정하려면 디자인 시스템 위에서 오른쪽 마우스 버튼을 클릭한 뒤 '수정(Edit)'을 선택하세요.

편집 화면에서 색상 팔레트와 글꼴을 자유롭게 바꿀 수 있어요. 원하는 값으로 조정해 주세요.

다 바꿨다면 '저장 및 적용(Save and apply)' 버튼을 누르세요. 디자인 시스템이 업데이트되면서 연결된 페이지에도 자동으로 반영됩니다.

디자인 시스템과 페이지가 잘 연결돼 있는지 확인하려면, 디자인 시스템 위에서 다시 오른쪽 클릭 → '연결 표시(Show connections)'를 클릭해 보세요. 어떤 디자인과 이어져 있는지 선으로 보여줍니다.

6. 변형 기능으로 색상 시안 한번에 비교하기

현재 색상이 애매하게 느껴진다면 여러 색상 시안을 한 번에 만들어 비교해볼 수 있어요. 먼저 페이지 디자인을 클릭해 선택한 뒤, 상단의 '생성 → 변형(Variants)'을 눌러주세요.

오른쪽에 변형 옵션 패널이 열립니다. 옵션 수는 3개로 두고, 범위(광고 소재 범위)에는 '미세 조정·탐색·스타일 바꾸기' 세 가지가 있어요. 저는 중간 세기인 '탐색'으로 갈게요.

'변경 요소'에서는 색상만 체크하고, 아래 '변형 생성하기(Generate variants)' 버튼을 눌러주세요.

잠시 후 레이아웃과 내용은 그대로, 색상만 달라진 3가지 시안이 나란히 만들어집니다. 마음에 드는 버전을 골라 편집을 이어가면 됩니다.

7. 변형으로 레이아웃 시안 비교하고 하나 고르기

이번엔 같은 방식으로 레이아웃만 바꿔볼게요. 원래 디자인만 남기고 나머지는 지운 뒤, 다시 페이지 클릭 → 상단 '생성 → 변형'으로 들어가 주세요.

이번에는 '변경 요소'에서 레이아웃만 체크하고 변형 생성하기 버튼을 누릅니다.

결과를 보면 정보는 동일한데 섹션 배치와 구도가 완전히 달라진 버전들이 생성됩니다. 색상 때와 마찬가지로 마음에 드는 버전을 선택해 이어가면 돼요.

8. AI 편집으로 텍스트 세부 조정하기

색상과 레이아웃을 정했으면 세부 편집으로 넘어갈게요. 페이지를 클릭해 선택하고, 상단의 '모디파이(Modify) → 수정(Edit)'을 눌러주세요.

편집 모드로 전환되면, 마우스를 요소 위에 올렸을 때 수정 가능한 부분이 하이라이트로 표시됩니다.

텍스트는 그냥 클릭해서 키보드로 바로 편집할 수 있어요. 내용 자체를 바꿀 때는 이 방법이 제일 빠릅니다.

텍스트 크기·색상 같은 '스타일'을 바꾸고 싶다면, 요소를 선택한 뒤 'AI 기반 편집(AI-powered editing)'을 눌러주세요. 아래 프롬프트 창에 선택된 요소가 담긴 채로 준비됩니다.

예를 들어 "폰트 사이즈를 조금 더 키우고, 색상은 모두 검정색으로 변경하세요"라고 입력하고 생성 버튼을 눌러볼게요.

잠시 후 요청한 대로 해당 요소가 수정된 새 페이지 디자인이 생성됩니다.

9. AI로 히어로 이미지 새로 생성해서 교체하기

이번엔 이미지 요소를 AI로 새로 생성해볼게요. 다시 상단 '모디파이 → 수정'을 누르고, 바꾸고 싶은 이미지를 클릭합니다.

이미지를 선택하면 먼저 '주소 입력' 옵션이 보여요. 이미 다른 곳에 올려둔 이미지가 있다면 이 주소만 넣어서 가져올 수도 있어요. 이번엔 닫고 넘어갈게요.

이미지를 다시 클릭하고 'AI 기반 편집'을 선택한 뒤, 프롬프트 창에 만들고 싶은 이미지를 설명해 주세요. 저는 "스마트한 코끼리가 AI 도구를 다루는 장면을 일러스트 스타일로 생성하세요"라고 입력했어요.

생성 버튼을 누르면 요청한 장면이 새로 만들어지고, 그 자리 이미지에도 바로 적용됩니다. 별도 저장·업로드 과정이 필요 없어요.

10. 준비한 로고 이미지를 드래그로 끌어다 교체하기

이미 준비한 로고나 이미지가 있다면 AI 생성 없이 바로 적용할 수 있어요. 예제로 로고 이미지를 교체해 보겠습니다.

페이지 클릭 → 상단 '모디파이 → 수정' → 로고 부분을 클릭 → 'AI 기반 편집'을 선택합니다.

이 상태에서 준비한 로고 이미지 파일을 프롬프트 창으로 드래그앤드롭해 주세요. 파일이 바로 첨부됩니다.

프롬프트로 "선택한 요소를 업로드한 그린코끼리 로고 PNG로 변경해줘"라고 입력하고 실행하면, 내 파일이 그대로 로고 자리에 교체됩니다.

11. 주석 편집으로 여러 곳 한번에 수정하기

고칠 부분이 여러 군데 흩어져 있다면 하나씩 AI 편집을 여는 대신 '주석 작성(Annotate)' 기능을 쓰는 게 훨씬 빨라요. 페이지를 선택하고 상단 '모디파이 → 주석 작성'을 눌러주세요.

고치고 싶은 영역을 드래그로 박스 친 다음 요청사항을 적어두세요. 예를 들어 특정 텍스트 주변을 박스 치고 "색상을 초록색으로 변경해줘"처럼 메모할 수 있어요.

다른 영역에는 "이 요소 전체를 제거해줘"처럼 삭제 요청을 할 수도 있어요. 이런 식으로 여러 주석을 달아두고 아래 '적용(Apply)' 버튼을 누르면 한 번에 전부 반영됩니다.

12. 프로토타입 만들어서 실제처럼 클릭해보기

디자인이 끝났다면 버튼 클릭·페이지 이동이 실제로 되는 '프로토타입'을 만들 수 있어요. 원페이지라 이동할 곳이 없으니, 예제로 채널 페이지 하나를 추가로 만들어둔 상태에서 진행할게요.

프로토타입에 포함할 페이지들을 모두 선택한 뒤, 상단 '생성(Generate) → 인스턴트 프로토타입(Instant prototype)'을 클릭합니다.

프로토타입이 만들어지면 오른쪽 메뉴의 기기 아이콘을 눌러 데스크톱·모바일 화면을 전환하면서 확인할 수 있어요.

메인 페이지에서 버튼이나 링크에 점선으로 표시된 부분을 클릭하면 연결된 다른 페이지로 이동돼요. 실제 사이트처럼 동작하는 걸 미리 확인할 수 있습니다.

이동할 페이지를 바꾸거나 트랜지션 효과를 주고 싶다면 상단의 '편집(Edit)' 탭으로 들어가세요. 버튼을 클릭하면 '연결 편집(Edit connection)' 옵션이 나오고, 여기서 목적지 스크린과 전환 효과를 고를 수 있어요.

13. 코드 복사해서 Claude Code로 옮기기

디자인 작업은 여기까지예요. 이제 이 디자인을 진짜 '동작하는 웹사이트'로 만들 차례입니다. 완성된 디자인을 선택하고 오른쪽 상단의 '내보내기(Export)'를 클릭하세요.

내보내기 옵션은 크게 세 가지예요. MCP 연동, ZIP 다운로드, 클립보드에 코드 복사. 이 글에서는 가장 단순한 '클립보드의 코드 복사(Copy code to clipboard)'로 진행할게요.

옵션을 선택하고 아래 '내보내기' 버튼을 누르면 코드가 클립보드에 복사됩니다.

14. Claude Code로 실제 동작하는 사이트 만들기

Claude 데스크톱 앱을 엽니다. 초보자 기준으로 가장 쉬운 방식이에요.

왼쪽 상단의 Claude Code 아이콘을 클릭해서 새 세션을 시작하세요.

프롬프트 입력창 위에 '작업 폴더(Working folder)' 버튼이 있어요. 사이트 파일을 저장할 폴더를 지정해야 합니다. 새 폴더를 하나 만들어서 설정해 주세요.

이제 프롬프트 창에 "아래 코드를 기반으로 기본 인터랙션 모두 작동하게 사이트를 구현해줘"라고 입력하고, 그 아래에 Stitch에서 복사한 코드를 그대로 붙여넣은 뒤 실행 버튼을 누르세요.

실행하면 '워크스페이스 신뢰(Trust workspace)' 팝업이 뜹니다. 이 폴더에 접근해도 되냐고 묻는 거예요. 신뢰 버튼을 눌러주세요.

작업 중간중간 '허용(Allow)' 팝업이 뜰 수 있어요. 파일 생성, 명령 실행 같은 동작에 대한 확인이에요. 초보자라면 '권한 건너뛰기' 대신 허용을 하나씩 눌러가며 진행하는 걸 추천해요.

작업이 끝나면 오른쪽 상단 아이콘을 눌러 '미리보기(Preview)'로 전환합니다. 관련 설정이 필요하다면 Claude Code가 안내하는 대로 설정 버튼을 눌러주세요.

메뉴와 버튼을 하나씩 눌러보며 동작이 정상인지 확인해 주세요. 문제없이 잘 돌아간다면 기본 구현은 완료입니다.

15. 링크 연결과 UI 효과 추가해서 사이트 완성도 높이기

동작은 되지만 아직 비어 있는 부분들을 채워볼게요. Claude Code에 추가 요청을 보내면 됩니다.

"채널로 이동되는 버튼·링크를 눌렀을 때 그린코끼리 유튜브 채널로 이동되도록 해줘. 영상 자리에는 채널 최신 영상을 배치해줘"처럼 자연어로 적어 보내세요.

이 정도 수정은 Sonnet 모델로도 충분해요. 모델 선택에서 Sonnet으로 바꿔주세요.

작업이 끝난 뒤 데스크톱 앱 안 미리보기에서는 외부 사이트로 이동이 안 될 수 있어요. 상단 주소를 복사해서 일반 브라우저에서 열어 확인해 주세요.

브라우저에서 '채널 구독' 같은 버튼을 눌러보면, 실제로 그린코끼리 유튜브 채널로 잘 이동되는 걸 확인할 수 있어요.

이번엔 UI 효과를 한 번 덧붙여 볼게요. 21st.dev라는 사이트에 들어가면 멋진 UI 컴포넌트들이 프롬프트 형태로 정리돼 있어요. 왼편 사이드바에서 요소를 하나씩 클릭해 보세요.

저는 '배경(Background)' 항목에서 마음에 드는 효과 하나를 골랐어요. 선택하면 오른쪽 상단에 '프롬프트 복사' 버튼이 보입니다. 그걸 눌러 프롬프트를 복사해 주세요.

다시 Claude Code로 돌아와 "히어로 섹션 배경으로 적용하기 위해"라는 문구와 함께 복사한 프롬프트를 붙여넣고 실행하세요.

결과를 보면 효과가 그대로 들어간 게 아니라, 기존 사이트 색상에 맞게 변형되어 적용됩니다.

16. Netlify Drop으로 실제 주소에 배포하기

마지막은 배포예요. 완성한 사이트를 어디서든 접속할 수 있는 주소로 올릴게요.

Claude Code로 돌아와 "Netlify Drop에 바로 업로드해서 배포할 수 있는 파일을 만들어줘"라고 요청합니다.

작업 폴더 경로에 ZIP 파일이 만들어지면, Netlify(netlify.com) 또는 Netlify Drop(app.netlify.com/drop)에 방문하세요.

Netlify Drop 화면에 만들어진 ZIP 파일을 드래그앤드롭으로 올려주세요.

사이트를 실제로 운영하려면 무료 가입이 필요해요. '무료로 가입하기(Sign up free)' 버튼을 누르고 구글 계정으로 빠르게 가입합니다.

가입 후 몇 가지 간단한 설문이 나와요. 이름은 영문으로 입력하고, 용도는 '개인(Personal)'·레벨은 '비기너(Beginner)'·프로젝트 성격은 '개인 프로젝트(Personal project)' 같은 식으로 편하게 답하시면 돼요.

설문이 끝나면 '디플로이(Deploy)' 버튼 → '건너뛰기(Skip)' 링크 순으로 클릭합니다. 처음에 드래그로 올린 프로젝트가 그대로 목록에 보여요.

주소 앞 이름을 바꾸고 싶다면 'Quick Setup(Site Settings)'을 누른 뒤, 원하는 이름을 입력하고 업데이트하면 돼요. 저는 'greenkey-youtube'처럼 바꿨어요.

커스텀 도메인이나 사이트 접근 제한 설정도 여기서 할 수 있지만, 처음이라면 '나중에 끝내기(Finish later)'를 눌러 넘어가도 충분해요. 업데이트된 주소를 클릭하면 어디서든 내 사이트에 접속할 수 있습니다.

정리하며

• Stitch로 프롬프트·참고 이미지를 활용해 원페이지 디자인 생성
• 디자인 시스템·변형·AI 편집·주석 편집으로 빠르게 다듬기
• 프로토타입으로 실제 동작까지 확인한 뒤 코드 복사
• Claude Code에 붙여넣어 실제 동작하는 사이트로 구현
• 링크·UI 효과까지 자연어 대화로 붙이고, Netlify Drop에 ZIP 업로드로 즉시 배포

이 세 도구 조합은 원페이지를 넘어 포트폴리오·랜딩 페이지·간단한 SaaS 소개 페이지까지 충분히 확장할 수 있어요. 다음 글에서는 여기에 사용자 로그인·DB 연결까지 붙이는 한 단계 더 나간 예제를 보여드릴게요. 궁금한 점은 댓글로 편하게 남겨주세요.