클로드 코드 웹사이트 제작이 화제입니다. 약 60달러로 개발자에게 맡기면 수천 달러 드는 사이트를 직접 뽑는다는 거죠. 도구 설치가 처음이라면 클로드 코드 설치 가이드부터 보고 오시면 좋습니다. 결론부터 말씀드리면 비용 절감은 진짜이지만 핵심은 따로 있습니다. AI 티를 얼마나 지우느냐입니다.
해외에서 200만 조회를 넘긴 가이드 영상을 토대로 진짜 차이를 만드는 디테일을 정리했습니다.
목차
약 60달러로 외주급이 나오는 이유
클로드 코드 웹사이트의 비용 구조는 단순합니다. 월 20달러 Claude Pro 플랜에 호스팅 비용만 더하면 끝입니다.
GrowwStacks 정리 기준 총비용은 약 60달러 선입니다. Claude Pro 한 달치에 Hostinger 1년 호스팅과 도메인 약 43달러를 합친 금액입니다. 같은 결과물을 프리랜서에게 맡기면 통상 3,000에서 8,000달러를 부릅니다.
영상은 이를 “1만 달러급”이라 부르지만 그 숫자는 헤드라인에 가깝습니다. 현실 시세는 그보다 낮은 범위로 보는 게 정확합니다. 그래도 수십 달러와 수천 달러의 격차는 충분히 큽니다.
| 항목 | 직접 제작 | 외주 |
|---|---|---|
| 도구 비용 | Claude Pro 월 20달러 | — |
| 호스팅·도메인 | 연 약 43달러 | 별도 |
| 총 체감 비용 | 약 60달러 | 3,000~8,000달러 |
클로드 코드 디자인의 핵심은 AI 티 지우기
여기서 진짜 실력이 갈립니다. 클로드 코드 디자인의 기본값은 한눈에 AI가 만든 티가 납니다.
MindStudio 분석에 따르면 Claude는 기본적으로 Inter 폰트, 둥근 모서리, 파란 버튼, 카드 레이아웃을 남발합니다. 이른바 ‘AI 슬롭’ 미감입니다. 의식적으로 이 기본값을 거슬러야 결과물이 달라집니다.
영상이 권하는 방법은 두 가지 스킬입니다. 앤트로픽 공식 스킬인 Front End Design은 남용 폰트를 차단하고 과감한 방향을 유도합니다. 커뮤니티 스킬 UI UX Pro Max에는 수십 종의 UI 스타일과 색상 팔레트, 폰트 조합이 들어 있다고 합니다.
마무리 단계의 디테일도 중요합니다. 영상은 가치 있는 사이트를 결정하는 8가지 요소로 관점, 타이포그래피, 색상, 계층 구조, 이미지, 모션, 모바일, 완성도를 꼽습니다. 초안이 나오면 Claude에게 이 체크리스트로 스스로를 정직하게 평가하라고 시키는 식입니다.
특히 모바일은 따로 신경 써야 합니다. 단순히 화면을 줄인 반응형이 아니라 스마트폰에 맞게 재설계해야 합니다. 작은 화면에서 불필요한 요소를 숨기고 간격을 좁히는 작업을 Claude에게 별도로 요청하는 거죠. 한국 방문자 대부분이 모바일로 들어온다는 점을 생각하면 이 단계를 건너뛸 수 없습니다.
프롬프트 한 줄이 결과를 바꾼다
도구보다 중요한 게 지시 방법입니다. 가장 효과적인 한 줄로 꼽히는 건 지시 끝에 “Ask me clarifying questions”를 붙이는 겁니다.
이 문장을 넣으면 Claude가 바로 코딩에 들어가지 않습니다. 브랜드 이름이나 필요한 섹션, 스타일 방향부터 되묻습니다. 여러 크리에이터가 “95% 확신이 들 때까지 질문하라”는 형태로 공유하는 검증된 기법입니다.
취향을 말로 설명하기 어려울 땐 레퍼런스를 씁니다. Dribbble이나 Awwwards에서 마음에 드는 화면을 캡처해 보여주면 됩니다. 애니메이션 같은 고급 요소가 필요하면 21st.dev 같은 무료 컴포넌트 라이브러리에서 가져와 적용을 요청할 수 있습니다.
수정할 때도 요령이 있습니다. 하나씩 고치기보다 “더 비싸 보이게, 단 복잡하지는 않게”처럼 의도를 담아 한 번에 지시하는 방식이 효율적입니다.
한국어 사이트라면 폰트부터 바꿔라
여기는 한국 사용자에게 특히 중요한 지점입니다. 영상은 Inter 폰트를 Geist로 바꾸라고 하지만 한국어 사이트엔 더 나은 답이 있습니다.
바로 Pretendard입니다. 눈누에 등록된 Pretendard는 상업용으로도 무료이고 CDN으로 바로 불러올 수 있습니다. 한글과 영문이 모두 깔끔해 AI 기본 폰트의 티를 단번에 지워줍니다. 클로드 코드에 “본문 폰트를 Pretendard로 지정해줘”라고만 해도 인상이 확 달라집니다.
호스팅도 한국 사정에 맞추면 좋습니다. Hostinger 대신 카페24나 가비아 같은 국내 서비스를 쓰면 결제와 도메인 관리가 한결 수월합니다. 단순 정적 사이트라면 저렴한 기본 플랜으로 충분합니다.
이미지가 필요할 때도 외부 비용을 거의 안 들입니다. 사진이 없으면 AI로 생성한 이미지를 쓰고, 영상은 별도 도구로 변환한 뒤 업스케일링까지 거치는 흐름입니다. 결국 사이트 한 채를 만드는 데 들어가는 추가 비용은 이미지값 몇 푼 수준입니다. 디자인 감각만 있으면 돈보다 시간이 더 드는 작업이라는 뜻입니다.
이걸로 외주를 받을 수 있을까
마지막으로 솔직한 평가입니다. 도구가 좋아졌다고 누구나 외주를 받을 수 있는 건 아닙니다.
클로드 코드는 코드를 대신 짜줄 뿐 디자인 안목까지 주지는 않습니다. 어떤 레퍼런스가 좋은지, 어디를 고쳐야 비싸 보이는지 판단하는 눈은 결국 사람 몫입니다. 8가지 품질 요소를 체크하는 감각이 진짜 장벽인 셈입니다.
그래도 진입 비용은 확실히 내려갔습니다. 예전엔 코딩과 디자인을 모두 배워야 했던 일을 이제 안목 하나로 시작할 수 있습니다. 작은 사이트부터 만들어 포트폴리오를 쌓아보려는 분께 권할 만합니다.
자주 묻는 질문
📺 출처: Metics Media — “Build $10,000 Websites using Claude Code (Ultimate Guide)”
클로드 코드 웹사이트 제작은 비용을 수십 달러로 끌어내린 동시에 디자인 안목을 새로운 경쟁력으로 만들었습니다. 도구는 준비됐으니 남은 건 어떤 화면을 좋다고 느끼는 감각입니다. 그 눈을 키우려는 분께 이 워크플로우를 권합니다.