홈페이지 리뉴얼 견적을 받아보신 적 있으신가요? 영상 배경이 도는 메인 화면에 갤러리, 다국어까지 넣으면 수백만 원 견적이 우습게 나옵니다. 그래서 미루게 되죠. 저도 그랬습니다. 그런데 이번에 회사 홈페이지 atm.ai.kr을 리뉴얼하면서 쓴 돈은 0원입니다. 디자이너도, 개발자도, 저 자신의 코딩도 없었습니다. 클로드 코드와 대화한 것이 전부입니다. 이 글에서는 제가 실제로 진행한 순서 그대로, 벤치마킹부터 배포까지 다섯 단계를 정리하겠습니다.
기록부터 적어 두면, 2026년 8월 12일에 첫 목업을 띄우고 네 번 고친 뒤 8월 13일에 라이브로 배포했습니다. 클로드 코드와 보낸 시간은 이틀, 직접 쓴 코드는 0줄, Netlify에 올라가는 데 걸린 시간은 12.5초였습니다.
목차
클로드 코드로 홈페이지를 만드는 방법은? 대화 세 마디면 됩니다
바쁘신 분들을 위해 핵심을 먼저 말씀드리면 이렇습니다. 클로드 코드에게 ① 벤치마크하고 싶은 사이트 주소를 주고, ② 내 콘텐츠 폴더를 통째로 넘기고, ③ “netlify로 배포해줘”라고 말하면 끝입니다. 아래 다섯 단계는 이 세 마디를 실전에서 어떻게 쓰는지 풀어쓴 것입니다.
클로드 디자인과 클로드 코드, 무엇이 다를까요?
클로드 코드를 한 문장으로 정의하면 “내 컴퓨터 안에서 파일을 직접 만들고 고치는 AI”입니다. 보통의 AI 채팅은 답을 글로 써 주지만, 클로드 코드에게 홈페이지를 만들어 달라고 하면 설명 대신 실제 홈페이지 파일이 내 폴더에 생깁니다.
브라우저에서 바로 쓰는 클로드 디자인으로도 홈페이지를 만들 수 있고, 한 장짜리 소개 페이지라면 그쪽이 더 가볍습니다. 다만 이번처럼 메인에서 영상 10편이 돌고, 이미지 36장짜리 갤러리와 8개 언어가 들어가는 회사 홈페이지 규모라면 파일을 내 컴퓨터에 두고 작업하는 클로드 코드가 맞습니다. 한 장짜리 소개 페이지는 클로드 디자인, 규모가 있는 홈페이지는 클로드 코드로 나눠 기억하시면 편합니다.
준비물은 무엇이 필요할까요? 딱 세 가지
- 클로드 코드 — 앤트로픽의 유료 구독 서비스입니다. 이 글의 “0원”은 구독료 외에 외주비·디자인비·서버 이용료로 나간 돈이 없다는 뜻입니다.
- 빈 폴더 하나 — 홈페이지 파일이 담길 자리입니다. 바탕화면에 새로 만들고 홈페이지 이름을 붙이면 됩니다.
- 그동안 만든 이미지·영상 — 가장 중요한 준비물입니다. 분류나 파일명 정리는 필요 없고, 폴더 하나에 몰아넣기만 하면 분류는 클로드 코드가 합니다.
클로드 코드 말고는 따로 배운 프로그램이 없습니다. 홈페이지 완성도를 가른 건 AI 실력보다 세 번째 준비물, 즉 그동안 모아 둔 자료의 양이었습니다.
1단계. 벤치마크 사이트 주소를 건넵니다
먼저 마음에 드는 사이트를 하나 찾아두세요. 저는 영상 히어로와 갤러리 구성이 인상적인 포트폴리오 사이트를 골랐습니다. 그리고 클로드 코드에 이렇게 말했습니다. “이 사이트를 벤치마킹하고 싶어”라고 적고 URL을 붙여넣은 뒤, 특히 가져오고 싶은 요소를 짚어줬습니다 — 메인 화면을 영상으로 처리한 부분과 이미지 갤러리 영역이었습니다.
여기서 주의할 점이 하나 있습니다. 막연히 “예쁘게 만들어줘”라고 하면 결과도 막연해집니다. 벤치마크 사이트에서 어떤 영역을 가져올지 구체적으로 지목해야 원하는 구조가 나옵니다.
주소를 넣으면 클로드 코드가 그 사이트를 직접 읽고 구조를 정리해 줍니다. “메인은 화면 전체를 영상으로 채우고 위에 어두운 막을 한 겹 씌웠다”, “아래로 내리라는 표시가 있다”, “갤러리는 분류 버튼으로 걸러 본다” 같은 식입니다. 저는 이 요약을 읽고서야 제가 그 사이트의 어떤 점을 좋아했는지 알았습니다. 제가 한 일은 “이건 좋다, 이건 빼자”를 답하는 것뿐이었습니다.
그리고 바로 만들게 하지 않았습니다. “바로 만들지 말고, 어떤 구조로 만들지 계획부터 글로 정리해줘”라고 먼저 시켰습니다. 그러면 코드 대신 섹션 순서와 메뉴 개수가 번호로 적힌 글 설계도가 나옵니다. 저는 이 계획서를 놓고 “이 섹션은 빼줘”, “후기 영역 하나 넣어줘”처럼 열 번 넘게 주고받았는데, 전부 글 수정이라 한 번에 몇 초면 끝났습니다. 계획이 마음에 든 뒤에야 “방금 정한 계획대로 만들어줘”라고 했습니다.
2단계. 메뉴 구성을 한 줄씩 적어줍니다
너무 거창할 필요 없습니다. 저는 “소개 / 서비스 / 포트폴리오 / 채널 / 마케팅 / 교육” 수준으로 사업 메뉴를 한 줄씩 적어줬습니다. 클로드가 이 목록을 바탕으로 내비게이션과 페이지 섹션 구조를 잡아줍니다.
여기에 한 문장을 덧붙이면 좋습니다. “이 순서 그대로 위쪽 메뉴, 페이지 순서, 맨 아래 메뉴까지 전부 맞춰줘.” 홈페이지에는 메뉴가 세 군데 나오는데, 저는 나중에 메뉴 순서를 한 번 바꿨을 때 이 한마디로 세 군데가 동시에 정리됐습니다. 손으로 했다면 한 군데쯤 빠뜨리기 쉬운 작업입니다.
3단계. 콘텐츠 폴더를 통째로 넘깁니다
이 단계가 이번 리뉴얼의 백미였습니다. 그동안 SNS에 올렸던 이미지·영상 콘텐츠를 폴더 하나에 정리해두고, 클로드 코드에서 ‘@’ 기호로 폴더 경로를 지정한 뒤 이렇게 말했습니다. “여기에 내 콘텐츠 포트폴리오들 있어! 홈페이지 메뉴 구성하고 갤러리 메뉴로 만들어줘!”
클로드는 폴더 안 이미지들을 룩북·프로필·제품샷 같은 카테고리로 분류해 필터가 달린 갤러리 섹션을 만들어줬습니다. 결과적으로 지금 atm.ai.kr의 포트폴리오 메뉴에는 이미지 36장이 카테고리 8종으로 정리되어 있고, 메인 화면에는 영상 10편이 돌아가며 재생됩니다.
8종을 모두 적으면 룩북, 프로필, 스트리트, 제품샷, 클로즈업, 브랜드, 일러스트, 인포그래픽입니다. 분류 기준은 제가 알려준 것이 아니라 클로드 코드가 이미지를 보고 스스로 나눈 것이고, 사진을 누르면 크게 뜨는 기능까지 붙어 있습니다.
한 가지 솔직한 이야기를 덧붙이면 — 그동안 콘텐츠를 하나씩 올릴 때는 반응이 없어 속상한 날도 많았습니다. 그런데 이렇게 한곳에 모아 갤러리로 정리하고 나니 제법 그럴싸한 포트폴리오가 됐습니다. 보잘것없어 보여도 꾸준히 만들어두는 것이 결국 자산이 된다는 걸 이번에 실감했습니다.
메인 영상과 8개 언어도 요청 한 줄씩
메인 화면도 같은 폴더에서 채웠습니다. “메인 화면 전체를 영상으로 채우고, 이 폴더의 열 편을 순서대로 돌리되 넘어갈 때 뚝 끊기지 말고 부드럽게 겹쳐줘”라고 한 뒤, “영상 위에 글씨가 얹히니 살짝 어둡게 깔아줘”를 덧붙였습니다. 영상은 장면마다 밝기가 바뀌어서, 이 한 줄이 없으면 어떤 장면에서는 흰 글씨가 묻혀 버립니다. 세로로 찍은 홍보 영상은 “휴대폰 모양 틀 안에 넣어서 반복 재생해줘”라고 눈에 보이는 대로 설명했습니다.
다국어는 “영어, 일본어, 중국어를 포함해 여덟 개 언어를 지원하고 오른쪽 위에 언어 바꾸는 버튼을 달아줘”라는 한 문장이 전부였습니다. 주의할 점은 나중에 추가한 문구나 메뉴는 한국어로만 남는다는 것입니다. 그래서 저는 뭔가를 추가할 때마다 요청 끝에 “여덟 개 언어에도 반영해줘”를 붙였습니다.
4단계. Netlify에 드래그 앤 드롭으로 배포합니다
올리기 전에 내 컴퓨터에서 먼저 네 번 고쳤습니다
배포 전에는 “내 컴퓨터에서 미리 볼 수 있게 띄워줘”라고 해서 나만 보는 미리보기 주소로 먼저 확인했습니다. 여기서 네 번을 고쳤습니다. 1차는 전체 뼈대, 2차는 메인 문구와 자료 뷰어 추가, 3차는 항목 교체와 갤러리 이미지 12장 추가, 4차는 세부 조정이었습니다.
4차 요청은 “메인 영상과 그 아래 영역 사이가 너무 벌어졌어, 3픽셀만 남기고 붙여줘”였습니다. 외주였다면 눈치가 보였을 요청도 여기서는 마음에 들 때까지 시킬 수 있습니다. 휴대폰 화면 기준으로도 보여 달라고 하면 좁은 화면에서 글씨가 잘리거나 버튼이 너무 작은 곳을 바로 찾을 수 있습니다.
완성된 홈페이지 폴더는 Netlify(app.netlify.com)에 올리면 끝입니다. 방법은 두 가지입니다.
첫째, 수동 방식. 폴더를 압축해서 Netlify의 Drop 페이지에 드래그 앤 드롭하면 몇 초 만에 임시 주소가 발급됩니다. 무료입니다. 둘째, 자동 방식. 클로드 코드에게 “netlify로 배포해줘”라고 시키면 됩니다. 처음 한 번만 브라우저에서 Netlify 계정 인증을 해두면, 이후에는 말 한마디로 배포가 끝납니다. FTP 같은 것은 몰라도 됩니다.
제 실측 수치를 그대로 공개하면 — 이번 배포에서 Netlify 빌드에 걸린 시간은 12.5초였습니다. 참고로 처음에는 영상·이미지 원본이 138MB라 업로드가 거절됐는데, 클로드에게 웹용 압축을 맡기니 화질 손상 없이 44MB로 줄여서 재배포까지 알아서 처리했습니다. 이런 시행착오 해결까지 대화로 끝난다는 것이 핵심입니다.
압축 요청은 “웹에 올릴 거니까 영상이랑 이미지를 화질 손상 없이 웹용으로 줄여줘. 원본은 따로 백업해두고.”였습니다. 메인 영상은 67MB에서 17MB로, 홍보 영상은 27MB에서 8MB로 줄었고, 이미지 36장은 형식을 바꿔 가볍게 만들었습니다. 뒤에 붙인 “원본은 따로 백업해두고”는 꼭 챙기세요. 원본을 다시 쓸 일이 반드시 생깁니다.
조금 더 정확히 적으면, 44MB로 줄인 뒤에도 한 번 더 막혔습니다. 처음 쓴 자동 배포 방식이 사이트 전체를 한 덩어리로 묶어 보내는 구조라, 영상이 들어간 사이트는 용량 한계에 걸렸던 겁니다. 실패 사실을 그대로 전하면서 “파일을 하나씩 나눠서 올리는 방식으로 배포해줘”라고 하자 클로드 코드가 방법을 바꿔 성공했습니다. 오류 메시지의 뜻을 몰라도 화면을 그대로 복사해 붙여넣으면 대부분 이렇게 풀립니다.
5단계(보너스). 디자인은 design.md에서 가져옵니다
링크: getdesign.md
“디자인 감각이 없는데 촌스러워지면 어쩌지?”라는 걱정이 있다면 design.md라는 오픈 포맷을 활용해 보세요. 구글이 공개한 DESIGN.md 규격으로, 세계 유수 브랜드들의 디자인 시스템(컬러·폰트·컴포넌트 규칙)이 마크다운 파일로 정리되어 공개돼 있습니다. design-md-hub 같은 모음 사이트에는 실제 서비스에서 역설계한 브랜드 디자인 가이드가 100개 이상 올라와 있습니다.
사용법은 단순합니다. 마음에 드는 브랜드의 md 파일을 복사해 클로드에게 붙여넣고, “이 디자인 가이드를 적용해줘”라고 요청하면 사이트 전체의 색·타이포·간격이 그 브랜드 체계로 정리됩니다.
저는 그 위에 브랜드 색을 얹어서 마무리했습니다. “메인 색은 이 색으로 바꿔줘”라며 색상 코드 하나를 알려주면 관련된 곳이 전부 바뀝니다. 코드를 모르면 “짙은 청록색으로 해줘”처럼 말로 해도 되고, 후보를 몇 개 뽑아 달라고 한 뒤 고르는 편이 더 쉽습니다.
getdesign.md 관련 포스트
코딩 없이 내 브랜드 홈페이지 만들기 — Claude Code와 getdesign.md로 atm.ai.kr를 만든 과정
배포 후 내 도메인과 검색 등록은 어떻게 하나요?
Netlify로 올리면 주소 뒤에 netlify.app이 붙습니다. 명함에 넣을 주소를 쓰려면 Netlify 사이트 설정의 Domain management에서 Add custom domain을 누르고 내 도메인을 입력합니다. 그러면 도메인을 산 곳에 넣을 값을 알려 주는데, 이것이 “이 주소로 들어오면 여기로 보내라”는 이정표 역할을 하는 DNS 설정입니다. 알려 준 값을 그대로 붙여넣으면 되고, 헷갈리면 클로드 코드에게 단계별 안내를 부탁하면 됩니다.
주소창의 자물쇠 표시(https)는 Netlify가 무료로 붙여 줍니다. 연결이 반영되기까지는 몇 분에서 몇 시간이 걸릴 수 있으니 바로 안 열려도 기다려 보세요. 새로 도메인을 사는 경우라면 그 구입비는 따로 듭니다.
검색에 뜨게 하려면 파일 두 개와 등록 한 번이 필요합니다. sitemap.xml은 내 홈페이지에 어떤 페이지가 있는지 적은 목차이고, robots.txt는 검색 로봇의 방문을 허락하는 안내문입니다. 둘 다 “sitemap.xml하고 robots.txt 만들어서 폴더 맨 위에 넣어줘”라고 시킨 뒤 다시 배포하면 됩니다. 마지막으로 구글 서치 콘솔에 주소를 등록하고 sitemap.xml을 제출합니다. 네이버에는 같은 역할의 네이버 서치어드바이저가 있습니다. 이 등록은 직접 로그인해서 눌러야 하는 절차라 클로드 코드가 대신해 주지 못합니다.
실측 요약과 예방 팁
이번 리뉴얼의 수치를 표로 정리합니다.
| 항목 | 실측값 |
|---|---|
| 총 지출 | 0원 (클로드 구독료 외 추가 비용 없음) |
| 코딩한 줄 수 | 0줄 |
| 작업 기간 | 이틀 (2026-08-12 목업 → 08-13 배포, 수정 4라운드 포함) |
| 메인 영상 히어로 | 10편 로테이션 |
| 포트폴리오 갤러리 | 이미지 36장 · 카테고리 8종 |
| 지원 언어 | 8개 언어 |
| 에셋 최적화 | 138MB → 44MB (웹용 압축) |
| Netlify 빌드 시간 | 12.5초 |
마지막으로 같은 시행착오를 반복하지 않기 위한 팁 세 가지입니다. 첫째, 콘텐츠 폴더는 평소에 정리해 두세요. 갤러리의 품질은 결국 모아둔 콘텐츠의 양에서 나옵니다. 둘째, 대용량 영상은 배포 전에 웹용 압축을 요청하세요. 방문자 로딩 속도에도 직결됩니다. 셋째, Netlify 계정 인증은 첫날 한 번 해두세요. 이후의 모든 업데이트가 말 한마디로 끝납니다.
이 순서는 홈페이지에만 쓰이지 않습니다. 계획부터 시키고, 내 자료를 폴더로 넘기고, 미리 보면서 고치고, Netlify로 올리는 흐름 그대로 상품 상세페이지나 예약 페이지도 클로드 코드로 만들 수 있습니다.
완성된 결과물은 atm.ai.kr에서 직접 확인하실 수 있습니다. 여러분이라면 어떤 사이트를 벤치마킹하고 싶으신가요?
Claude (클로드) AI로 1시간 만에 나만의 공식 홈페이지를 직접 만들기— AI Trend Master 사이트 제작기
작성자 소개
