AI 클로드코드: 수백만원 웹사이트 직접 제작하기

수백만원에 달하는 웹사이트 외주 비용은 부담스럽다. 그러나 이제 클로드 코드와 AI를 활용하면 코딩 지식 없이도 전문적인 웹사이트를 직접 만들 수 있다. 이 글은 기획부터 디자인, 배포까지 웹사이트 제작 전 과정을 무료로 진행하는 방법을 다룬다.

AI 웹사이트, 한계를 넘다

일반적으로 AI로 만든 웹사이트는 특유의 단점이 있다. 한글이 어색하게 깨지거나 문구가 과장 광고처럼 들리는 경우가 많다. 디자인도 누가 봐도 AI가 만들었다는 인상을 준다. 이 한계를 극복하고 고품질 웹사이트를 만드는 것이 중요하다.

영상은 AI 웹사이트의 품질을 높이는 두 가지 핵심 순간을 강조한다. 이는 완성도 높은 웹사이트와 저품질 웹사이트의 차이를 만드는 요소이다. 외주 단가 수백만원짜리 웹사이트와 견줄 만한 퀄리티를 AI로 구현하는 것이 목표이다.

웹사이트 제작 과정은 다음과 같다. 먼저 클로드 코드를 설치하고, 두 가지 디자인 스킬을 추가한다. 이후 프롬프트 하나로 기본적인 웹사이트를 만들고, 사용자 요구에 맞게 다듬는다. 마지막으로 완성된 웹사이트를 무료로 배포한다.

일부 사용자는 Wix나 아이맵(iMap) 같은 노코드 도구를 떠올릴 수 있다. 물론 이 도구들도 웹사이트를 쉽게 만들 수 있으나, 다른 모든 사이트와 비슷하게 보이는 경향이 있다. 템플릿화된 규격에서 벗어나지 못하면 사업체의 고유한 브랜드 이미지를 담기 어렵다.

클로드코드 실력 향상 스킬 장착

기본적인 클로드는 범용 AI로서 디자인이 뛰어나지 않고 그럭저럭인 수준이다. AI가 만든 듯한 디자인에서 벗어나려면 특정 분야의 실력을 끌어올리는 스킬을 장착해야 한다. 스킬은 클로드를 위한 일종의 설명서 또는 텍스트 파일이다.

설치할 스킬은 두 가지이다.

스킬 이름	개발사/특징	기능	설치 방법
Frontend Design	Anthropic (클로드 개발사)	AI스러운 글꼴 사용을 금지하고 더 다채로운 디자인을 사용하게 한다.	스킬 페이지에서 코드 복사 후 클로드 코드 터미널에 붙여 넣고 “이 스킬을 설치해 줘” 입력
UI/UX Pro Max	(설명 없음)	57가지 UI 스타일, 95가지 색상 팔레트, 56가지 폰트 조합 내장. 직접 호출하여 디자인 변경에 활용한다.	설명란 링크에서 코드 복사 후 클로드 코드 터미널에 붙여 넣고 “npm으로 이 플러그인 설치해 줘” 입력

이 두 스킬 설치가 완료되면 클로드 코드는 고품질 디자인 작업을 수행할 준비를 마친다.

고품질 웹사이트 제작 과정

좋은 결과와 평범한 결과를 가르는 핵심은 브리핑의 구체성이다. 원하는 것을 명확하고 구체적으로 설명할수록 결과물은 더 좋아진다.

레퍼런스 찾기

자신이 원하는 취향을 말로 설명하기 어렵다면 레퍼런스를 활용한다. 마음에 드는 웹사이트 스크린샷을 찍어 클로드 코드에게 제공하면 된다. 유용한 레퍼런스 사이트는 다음과 같다.

• Dribbble: 사람들이 만든 다양한 홈페이지와 인기 있는 디자인을 볼 수 있다.
• Awwwards: 디자인으로 수상한 고품질 웹사이트들을 살펴볼 수 있다.

마음에 드는 이미지를 찾았다면 캡처하여 클로드 코드에 복사, 붙여 넣기한다.

프롬프트 설계

동일한 클로드 코드를 사용해도 프롬프트에서 원하는 무드(mood)를 어떻게 지시하느냐에 따라 결과는 완전히 달라진다. 예시로 피부과 홈페이지를 만들 때 ‘청결함, 신뢰감, 세련됨’이라는 무드를 설정한다.

1. UI/UX Pro Max 스킬을 호출한다.
2. “나는 피부과 홈페이지 제작할 거야”와 같이 원하는 홈페이지의 무드를 입력한다.
3. 마지막으로 “명확히 하기 위해. 잘 이해가 안 되면 질문을 해 줘.”라는 결정적인 한 줄을 추가한다. 이 문장은 클로드가 작업을 시작하기 전에 잠시 생각하게 하여 결과물의 품질을 높인다.

프롬프트 전송 후 클로드는 기술 스택을 선택하라고 묻는다. Next.js와 Tailwind CSS를 선택한다. 메인 랜딩 페이지 외에 추가 페이지 구성 가능성을 물으면, 클로드는 일반적으로 포함하는 페이지 유형을 제안한다. 이를 모두 포함하여 요청하면 된다.

초기 버전 생성 및 개선

클로드 코드가 생성한 초안은 더미 데이터로 채워져 있다. 이때 중요한 것은 이미지와 영상의 퀄리티이다. 홈페이지 퀄리티의 80%는 이미지와 영상이 결정한다. 따라서 클로드 코드가 이미지를 직접 만들게 하는 대신, 사업체에서 준비한 고품질의 실제 사진과 영상을 사용하는 것이 좋다.

영상이 없는 상황을 가정하고 인물 이미지와 영상을 직접 제작하는 방법을 시연한다.

1. Grok을 활용하여 “16대 9 비율로 여성 이미지를 제작해 줘. 피부과 홈페이지에서 사진 예쁜 여성”과 같은 프롬프트로 인물 이미지를 생성한다.
2. 생성된 인물 이미지가 인물을 꽉 채운 느낌이라면, 챗GPT에 이미지를 붙여넣고 “이미지 비율을 16대 9로 바꿔주고 인물도 가운데 정렬해 줘”라고 요청하여 이미지를 보정한다.
3. 최종 보정된 이미지를 Gemini에 붙여 넣고 “천천히 움직이는 영상 하나 만들어 줘”라고 요청하여 영상을 생성한다.
4. 만들어진 영상은 웹사이트 폴더에 저장하고, 클로드 코드에 “히어로 섹션 뒤에 이 영상 추가해 줘”라고 명령한다.

영상이 추가되면 웹사이트의 퀄리티가 즉시 향상된다. 히어로 섹션은 방문자의 신뢰감과 주목도를 높이는 역할을 한다.

8가지 기준 기반 평가 및 수정

클로드 코드가 만든 결과물이 고품질 웹사이트의 8가지 기준을 얼마나 충족하는지 평가한다.

1. 클로드가 제시했던 고품질 홈페이지 기준 8가지(관점, 타이포그래피, 색상, 위계, 이미지, 애니메이션, 모바일 최적화, 보이지 않는 디테일)를 그대로 복사하여 클로드 코드에 붙여 넣는다.
2. “이 기준들을 두고 지금 만든 결과물이 10점 만점에 몇 점인지 평가해 봐”라고 요청한다.
3. 클로드가 점수를 산출하면 “한꺼번에 적용할 개선안 묶음이 나왔다면 보고 적용 부탁해”라고 명령하여 한 번에 여러 개선 사항을 적용한다. 이는 수정 효율을 크게 높인다.

디자인 및 기능 고급화

시각적 요소 강화

히어로 섹션의 시각적 요소를 더욱 강화하고 싶다면 21st.dev 사이트를 활용할 수 있다. 이 사이트는 즉시 사용할 수 있는 컴포넌트, 애니메이션, 스크롤 효과 라이브러리를 제공한다.

예시로, 21st.dev의 이미지 파트에서 마우스 스크롤을 내리면 히어로 섹션이 커지는 효과 컴포넌트를 선택한다. 해당 컴포넌트의 프롬프트를 복사하여 클로드 코드에 “히어로 섹션에 이 효과를 추가해 줘”라고 입력하면 된다. 21st.dev에는 카드 캐러셀, 카드 슬라이드 등 다양한 효과들이 많다.

세부 디자인 조정

히어로 섹션을 고급스럽게 만들었다면, 이제 나머지 섹션들도 스크롤하면서 하나씩 다듬어야 한다. 예를 들어, 카드 전환이 딱딱하게 느껴진다면 해당 부분을 캡처하여 클로드 코드에 붙여넣고 “카드가 넘어가는 듯하게 자연스럽게 바뀌게 해 줘”라고 요청한다.

상단 내비게이션 바가 답답하게 느껴진다면 “더 투명하게 이 상단 내비게이션 바를 만들어 달라”고 요청하여 시각적 개방감을 높일 수 있다.

법률 준수 확인

특히 병원 홈페이지의 경우, 의료법 저촉 여부를 확인하는 것이 중요하다. 클로드 코드에게 “한국 의료 광고법에 의거해서 지금 현재 내 홈페이지에 의료법 저촉되는 위반 사항이 있는지 체크해 줘”라고 명령하면, 많은 위반 사항을 사전에 잡아낼 수 있다.

폰트 통일

폰트 변경은 웹사이트의 고급스러움을 결정하는 중요한 단계이다. Pretendard 폰트로 전체 폰트를 통일하는 것을 추천한다. Pretendard는 상업적으로 사용할 수 있는 무료 폰트이며, 가독성이 뛰어나다. 클로드 코드에 “폰트는 프리텐다드로 변경해 줘”라고 입력하여 적용한다.

모바일 최적화

오늘날 환자 대부분은 모바일 기기로 웹사이트에 접속한다. 따라서 모바일 최적화는 필수이다. 단순히 화면을 축소하는 것이 아니라, 반응형 웹 디자인으로 모바일 환경에 맞춰 최적화해야 한다.

1. 브라우저에서 개발자 도구(F12 키)를 눌러 모바일 기기 화면으로 전환한다.
2. 다양한 스마트폰 기종에서 웹사이트가 어떻게 보이는지 확인한다.
3. 클로드 코드에 “모바일 최적화를 위해 반응형으로 나오게 해 달라고 요청”한다.
4. 클로드는 현재 상태에서 부족한 부분만 반응형으로 수정해 준다. React와 Next.js 기반으로 웹을 만들었기 때문에 이미 반응형 기능이 내장되어 있어 크게 고칠 부분이 없는 경우가 많다.

이 단계까지 완료하면 홈페이지의 기본 뼈대가 모두 갖춰진다. 이제 실제 사진 등을 채워 넣으면 된다.

전 세계에 웹사이트 배포

제작된 웹사이트를 전 세계 모든 사람이 볼 수 있도록 배포하는 과정이다.

1. 깃허브(GitHub)에 접속하여 새로운 저장소를 생성한다.
2. 생성된 저장소 링크를 복사하여 클로드 코드에 “깃허브에 저장해 줘”라고 명령하고 링크를 붙여 넣는다.
3. 코드가 깃허브 저장소에 성공적으로 업로드되었는지 확인한다.
4. Vercel 사이트에 접속하여 로그인한다.
5. ‘Add New’ 버튼을 눌러 프로젝트를 생성한다.
6. 깃허브와 연동되어 있으므로, 방금 업로드한 깃허브 저장소 링크가 자동으로 뜬다. ‘Import’ 버튼을 누른다.
7. ‘Deploy’ 버튼을 눌러 배포를 시작한다.
8. 배포가 완료되면 ‘Visit’ 버튼을 눌러 웹사이트가 정상적으로 온라인에 공개되었는지 확인한다.

이 링크를 통해 전 세계 누구나 웹사이트를 방문할 수 있다. 이 모든 배포 과정은 무료로 진행한다.

이처럼 클로드 코드를 월 약 3만 원에 구독하여 수백만원짜리 외주 퀄리티의 웹사이트를 직접 만들 수 있다. 외주 시 수정 비용이 추가되는 것과 달리, 이렇게 만든 웹사이트는 원하는 만큼 직접 수정하고 개선할 수 있다는 장점이 있다. 이는 전문적인 홈페이지를 가장 저렴하게 만들고 온라인에 게시하는 효과적인 방법이다.

출처

• 잭PD의 바이브코딩 아카데미. (2026-06-04). 왕초보도 가능한 수백만원짜리 웹사이트 제작 과정 총정리 ㅣ 클로드코드 핵심 디자인 스킬 + 실무팁. YouTube.