홈페이지 리뉴얼 견적을 받아보신 적 있으신가요? 영상 배경이 도는 메인 화면에 갤러리, 다국어까지 넣으면 수백만 원 견적이 우습게 나옵니다. 그래서 미루게 되죠. 저도 그랬습니다. 그런데 이번에 회사 홈페이지 atm.ai.kr을 리뉴얼하면서 쓴 돈은 0원입니다. 디자이너도, 개발자도, 저 자신의 코딩도 없었습니다. 클로드 코드와 대화한 것이 전부입니다. 이 글에서는 제가 실제로 진행한 순서 그대로, 벤치마킹부터 배포까지 다섯 단계를 정리하겠습니다.
결론부터: 방법은 “대화 세 마디”입니다
바쁘신 분들을 위해 핵심을 먼저 말씀드리면 이렇습니다. 클로드 코드에게 ① 벤치마크하고 싶은 사이트 주소를 주고, ② 내 콘텐츠 폴더를 통째로 넘기고, ③ “netlify로 배포해줘”라고 말하면 끝입니다. 아래 다섯 단계는 이 세 마디를 실전에서 어떻게 쓰는지 풀어쓴 것입니다.
1단계. 벤치마크 사이트 주소를 건넵니다
먼저 마음에 드는 사이트를 하나 찾아두세요. 저는 영상 히어로와 갤러리 구성이 인상적인 포트폴리오 사이트를 골랐습니다. 그리고 클로드 코드에 이렇게 말했습니다. “이 사이트를 벤치마킹하고 싶어”라고 적고 URL을 붙여넣은 뒤, 특히 가져오고 싶은 요소를 짚어줬습니다 — 메인 화면을 영상으로 처리한 부분과 이미지 갤러리 영역이었습니다.
여기서 주의할 점이 하나 있습니다. 막연히 “예쁘게 만들어줘”라고 하면 결과도 막연해집니다. 벤치마크 사이트에서 어떤 영역을 가져올지 구체적으로 지목해야 원하는 구조가 나옵니다.
2단계. 메뉴 구성을 한 줄씩 적어줍니다
너무 거창할 필요 없습니다. 저는 “소개 / 서비스 / 포트폴리오 / 채널 / 마케팅 / 교육” 수준으로 사업 메뉴를 한 줄씩 적어줬습니다. 클로드가 이 목록을 바탕으로 내비게이션과 페이지 섹션 구조를 잡아줍니다.
3단계. 콘텐츠 폴더를 통째로 넘깁니다
이 단계가 이번 리뉴얼의 백미였습니다. 그동안 SNS에 올렸던 이미지·영상 콘텐츠를 폴더 하나에 정리해두고, 클로드 코드에서 ‘@’ 기호로 폴더 경로를 지정한 뒤 이렇게 말했습니다. “여기에 내 콘텐츠 포트폴리오들 있어! 홈페이지 메뉴 구성하고 갤러리 메뉴로 만들어줘!”
클로드는 폴더 안 이미지들을 룩북·프로필·제품샷 같은 카테고리로 분류해 필터가 달린 갤러리 섹션을 만들어줬습니다. 결과적으로 지금 atm.ai.kr의 포트폴리오 메뉴에는 이미지 36장이 카테고리 8종으로 정리되어 있고, 메인 화면에는 영상 10편이 돌아가며 재생됩니다.
한 가지 솔직한 이야기를 덧붙이면 — 그동안 콘텐츠를 하나씩 올릴 때는 반응이 없어 속상한 날도 많았습니다. 그런데 이렇게 한곳에 모아 갤러리로 정리하고 나니 제법 그럴싸한 포트폴리오가 됐습니다. 보잘것없어 보여도 꾸준히 만들어두는 것이 결국 자산이 된다는 걸 이번에 실감했습니다.
4단계. Netlify에 드래그 앤 드롭으로 배포합니다
완성된 홈페이지 폴더는 Netlify(app.netlify.com)에 올리면 끝입니다. 방법은 두 가지입니다.
첫째, 수동 방식. 폴더를 압축해서 Netlify의 Drop 페이지에 드래그 앤 드롭하면 몇 초 만에 임시 주소가 발급됩니다. 무료입니다. 둘째, 자동 방식. 클로드 코드에게 “netlify로 배포해줘”라고 시키면 됩니다. 처음 한 번만 브라우저에서 Netlify 계정 인증을 해두면, 이후에는 말 한마디로 배포가 끝납니다. FTP 같은 것은 몰라도 됩니다.
제 실측 수치를 그대로 공개하면 — 이번 배포에서 Netlify 빌드에 걸린 시간은 12.5초였습니다. 참고로 처음에는 영상·이미지 원본이 138MB라 업로드가 거절됐는데, 클로드에게 웹용 압축을 맡기니 화질 손상 없이 44MB로 줄여서 재배포까지 알아서 처리했습니다. 이런 시행착오 해결까지 대화로 끝난다는 것이 핵심입니다.
5단계(보너스). 디자인은 design.md에서 가져옵니다
링크: getdesign.md
“디자인 감각이 없는데 촌스러워지면 어쩌지?”라는 걱정이 있다면 design.md라는 오픈 포맷을 활용해 보세요. 구글이 공개한 DESIGN.md 규격으로, 세계 유수 브랜드들의 디자인 시스템(컬러·폰트·컴포넌트 규칙)이 마크다운 파일로 정리되어 공개돼 있습니다. design-md-hub 같은 모음 사이트에는 실제 서비스에서 역설계한 브랜드 디자인 가이드가 100개 이상 올라와 있습니다.
사용법은 단순합니다. 마음에 드는 브랜드의 md 파일을 복사해 클로드에게 붙여넣고, “이 디자인 가이드를 적용해줘”라고 요청하면 사이트 전체의 색·타이포·간격이 그 브랜드 체계로 정리됩니다.
getdesign.md 관련 포스트
코딩 없이 내 브랜드 홈페이지 만들기 — Claude Code와 getdesign.md로 atm.ai.kr를 만든 과정
실측 요약과 예방 팁
이번 리뉴얼의 수치를 표로 정리합니다.
| 항목 | 실측값 |
|---|---|
| 총 지출 | 0원 (클로드 구독료 외 추가 비용 없음) |
| 코딩한 줄 수 | 0줄 |
| 메인 영상 히어로 | 10편 로테이션 |
| 포트폴리오 갤러리 | 이미지 36장 · 카테고리 8종 |
| 지원 언어 | 8개 언어 |
| 에셋 최적화 | 138MB → 44MB (웹용 압축) |
| Netlify 빌드 시간 | 12.5초 |
마지막으로 같은 시행착오를 반복하지 않기 위한 팁 세 가지입니다. 첫째, 콘텐츠 폴더는 평소에 정리해 두세요. 갤러리의 품질은 결국 모아둔 콘텐츠의 양에서 나옵니다. 둘째, 대용량 영상은 배포 전에 웹용 압축을 요청하세요. 방문자 로딩 속도에도 직결됩니다. 셋째, Netlify 계정 인증은 첫날 한 번 해두세요. 이후의 모든 업데이트가 말 한마디로 끝납니다.
완성된 결과물은 atm.ai.kr에서 직접 확인하실 수 있습니다. 여러분이라면 어떤 사이트를 벤치마킹하고 싶으신가요?
Claude (클로드) AI로 1시간 만에 나만의 공식 홈페이지를 직접 만들기— AI Trend Master 사이트 제작기
작성자 소개
