클로드로 30분 만에 만드는 애니메이션 웹사이트
코딩 한 줄 없이 30분 만에 움직이는 고품질 웹사이트를 만들 수 있다. 개발자나 디자이너 없이 클로드(Claude) 두 가지 도구만으로 애니메이션까지 포함된 홈페이지를 완성하는 방법이다.
AI 웹사이트 제작의 새로운 시대
과거 웹사이트 제작은 기획자, 디자이너, 개발자 등 많은 전문가의 협업과 시간, 비용을 필요로 했다. 그러나 이제는 클로드 하나만으로 이 모든 과정을 대체할 수 있다. 영상을 통해 소개된 AI 웹사이트는 스크롤 시 이미지가 확대되고 영상이 재생되며, 캔이 회전하고 버튼 클릭 시 움직이는 등 다양한 애니메이션 효과를 포함한다. 이 모든 작업은 30분 만에 코딩 없이 완성되었다.
이러한 웹사이트 제작을 가능하게 하는 핵심 도구는 클로드 코드와 클로드 디자인이다.
| 특징 | 클로드 코드 | 클로드 디자인 |
|---|---|---|
| 주요 기능 | 사이트를 실제로 작동하게 만든다 | 아름다운 디자인을 생성한다 |
| 결과물 | 기능적이지만 디자인이 밋밋할 수 있다 | 디자인은 뛰어나지만 작동하지 않는다 |
| 강점 | 기능 구현에 강하다 | 시각적 요소에 강하다 |
두 도구는 각자의 단점을 보완하며, 함께 사용할 때 시너지를 발휘한다.
디자인 시스템 활용 전략
클로드 디자인을 시작하면 여러 탭이 보인다. 사이트 제작 시에는 프로토타입을 선택한다. 여기에는 디자인 시스템이라는 기능이 있는데, 브랜드 로고, 색상, 폰트 등을 한 번 저장해두면 클로드가 해당 스타일로 디자인을 자동 생성한다.
그러나 초보자는 디자인 시스템 기능을 바로 사용하지 않는 것이 좋다. 그 이유는 다음과 같다.
- 토큰 소모: 디자인 시스템을 활성화하면 요청 시마다 저장된 정보를 읽어 토큰을 많이 소모한다.
- 토큰 분리: 클로드 디자인과 클로드 코드는 토큰 사용량이 분리되어 있다. 시작 단계에서 토큰을 과도하게 소모하면 전체 작업에 지장이 생긴다.
만약 디자인 시스템을 꼭 사용해야 한다면, getdesign.systems 같은 외부 사이트에서 실제 브랜드의 디자인 시스템(색상, 폰트, 버튼 등) 파일을 복사하여 클로드 디자인에 붙여넣는 방법을 활용할 수 있다. 클로드 디자인 상단에서 디자인 시스템을 누르고 크리에이트를 선택한 뒤, 이름과 파일을 추가하고 복사한 내용을 붙여넣으면 브랜드 컬러, 버튼, 글자 스타일이 갖춰진 디자인 시스템이 완성된다.
오늘은 디자인 시스템 없이 진행한다. 프로젝트 이름은 ‘제로 소다’로 설정하고, 와이어프레임 대신 하이 피델리티를 선택한다. 하이 피델리티는 토큰을 더 사용하지만, 수정 횟수를 줄여 전체적인 효율을 높인다.
고품질 디자인 확보
AI가 만든 티가 나지 않는 고유한 디자인을 얻기 위해서는 참고 디자인을 먼저 모으는 과정이 필수다. 이 단계를 건너뛰면 AI가 생성하는 획일적인 디자인을 벗어나기 어렵다.
- 핀터레스트(Pinterest): 만들 디자인과 관련된 키워드를 검색하여 스크롤하면서 마음에 드는 디자인을 최소 세 장 이상 캡처한다. 한 장만으로는 클로드가 방향을 잡기 어렵고 단순히 따라 그릴 수 있다.
- 디자인 스펠스(Design Spells), 포트폴리오스(Portfolios.xyz): 디자인 감각을 기르는 데 도움이 되는 추가 사이트들이다.
수집한 세 장의 디자인 이미지와 함께 구체적인 프롬프트를 클로드 디자인에 입력한다. 프롬프트는 브랜드가 무엇인지, 필요한 섹션, 원하는 분위기를 포함한다.
예시 프롬프트:
무설탕 소다 브랜드 랜딩 페이지를 만들어 줘. 첨부한 세 장을 참고해서 깔끔하고 청량한 느낌으로 히어로 섹션, 제품 소개, 후기, 가격 섹션을 넣어 줘. 젊고 트렌디한 무드로.
클로드는 즉시 작업을 시작하지 않고, 색감, 타겟, 브랜드 느낌 등 세부적인 질문을 던진다. 여기에 명확하게 답변하거나, 애매하면 클로드에게 알아서 해달라고 요청한다.
다양한 디자인 탐색 및 미세 조정
첫 디자인이 나오면 이제 본격적인 수정 단계에 들어간다. 더 다양한 디자인을 탐색하려면 클로드에게 이 디자인과 완전히 다른 스타일로 여러 개 제안해 줘. 먼저 가능한 스타일 목록을 나열해 줘.라고 요청한다. 이렇게 하면 클로드가 다양한 스타일을 먼저 보여주고 사용자가 선택할 수 있다. 예를 들어, Y2K나 볼드팝 스타일을 요청하면 몇 분 안에 완전히 다른 세 가지 디자인이 생성된다.
디자인을 수정하는 방법은 세 가지가 있으며, 각기 다른 용도로 사용된다.
| 수정 방법 | 용도 | 특징 | 토큰 소모 |
|---|---|---|---|
| 에디트 | 요소를 직접 클릭하여 크기, 색깔, 폰트, 투명도 등을 바로 변경한다. | 특정 글씨나 요소가 거슬릴 때 즉각적으로 고치는 데 유용하다. | 발생 |
| 코멘트 | 요소를 하나 지정하여 이것 지워 줘와 같이 댓글을 단다. |
지정된 부분만 수정하고 나머지 부분은 건드리지 않는다. 한 곳만 명확히 고칠 때 사용한다. | 발생 |
| 트윅스 | 우측 상단의 쇼 트윅스(Show Tweaks) 탭에서 슬라이더와 버튼으로 색깔, 폰트, 여백, 회전 각도 등을 조절한다. |
프롬프트 없이 실시간으로 디자인이 바뀌며, 토큰 소모가 없다. 무한정으로 빠르게 다듬을 수 있다. | 초기 생성 시 발생, 이후 조정 시 미발생 |
트윅스는 디자인 초안을 완성한 후 무한정 빠르게 다듬을 수 있는 강력한 기능이다. 클로드 디자인에서 애니메이션까지 넣으려고 하기보다는, 디자인만 확정하고 애니메이션과 작동 기능은 클로드 코드로 넘기는 것이 효율적이다. 클로드 디자인에서 애니메이션을 시도하면 일주일치 토큰이 순식간에 소모될 수 있다.
디자인을 실제 웹사이트로 전환
디자인이 확정되면 이제 클로드 코드로 넘겨 실제 작동하는 웹사이트를 만든다.
- 클로드 디자인 우상단의
쉐어(Share)버튼을 누른다. 핸드오프 클로드 코드(Handoff Claude Code)를 선택한다.- 자동으로 생성된
이 디자인을 그대로 만들어 줘라는 명령어를 복사한다. - VS 코드나 커서(Cursor) 같은 개발 환경을 열고 터미널에 복사한 명령어를 붙여넣는다.
클로드 코드는 클로드 디자인에서 확정된 색상, 폰트, 레이아웃, 섹션 등을 완벽하게 재현한다. 트윅스를 통해 적용한 스타일도 그대로 유지된다. 완성된 사이트를 배포할 때는 트윅스 부분만 제거하면 된다.
콘텐츠 및 애니메이션 추가
현재 웹사이트에는 임시 이미지가 들어가 있다. 이를 실제 이미지로 교체하는 과정은 간단하다.
- 사용할 이미지(예: 딸기, 민트, 레몬, 블루베리 맛 음료 이미지)를 미리 준비한다.
- 새 폴더를 만들고
인풋(input)으로 이름을 지정한 뒤, 이미지 파일을 저장한다. - 클로드 코드에
인풋 폴더에 음료 네 개 이미지가 있어. 레몬, 자몽, 딸기, 멜로니아. 각 자리에 맞는 이미지를 넣어주고 음료에 맞게 텍스트도 바꿔 줘.라고 지시한다. - 클로드 코드는 프롬프트에 따라 이미지를 교체하고 텍스트를 수정한다.
이제 애니메이션을 추가할 차례다. 전 세계 디자이너들이 만든 무료 애니메이션을 모아둔 사이트(lottiefiles.com 등)를 활용한다. 이 사이트에는 움직이는 버튼, 카드 플립, 슬라이딩 후기 등 다양한 애니메이션 컴포넌트가 있으며, 복사 붙여넣기로 쉽게 적용할 수 있다.
후기 섹션에 카드가 올라오는 애니메이션 적용 예시:
- 애니메이션 사이트에서 원하는 컴포넌트(
카드가 스르륵 올라오는 애니메이션)를 찾는다. - 컴포넌트의 프롬프트를 복사하여 클로드 코드에 붙여넣는다.
리뷰 섹션 애니메이션을 바꾸고 싶어. 섹션의 디자인은 절대 건드리지 마. 내가 주는 컴포넌트에서 카드가 올라오는 애니메이션만 가지고 와.와 같이 디자인은 유지하고 애니메이션만 적용하도록 명확하게 지시한다.
스크롤 미디어 확장 히어로 애니메이션 적용 예시:
이 효과는 스크롤 시 이미지가 열리며 뒤에서 영상이 재생되는 고급 애니메이션이다. 준비물은 전면에 쓰일 이미지 한 장과 뒤에서 재생될 영상 하나이며, 이들을 인풋 폴더에 넣어둔다.
- 애니메이션 사이트에서
스크롤 미디어 익스펜션 히어로(Scroll Media Expansure Hero)컴포넌트를 검색한다. - 컴포넌트 프롬프트를 복사하여 클로드 코드에 붙여넣는다.
기존 히어로는 아래로 내리고 이걸 맨 위로 올려 줘. 인풋에 있는 레몬 이미지랑 영상을 활용해서 애니메이션을 만들 거야. 영상이 루프로 재생되면서 나타나게 해 줘.라고 구체적으로 지시한다. 하고 싶은 것과 하지 말아야 할 것을 함께 말하면 클로드가 정확하게 작업을 수행한다.
결과적으로 스크롤 시 이미지가 열리고 뒤에서 영상이 올라오며, 다시 올리면 이미지가 닫히는 고품질 애니메이션이 구현된다.
결론
클로드 디자인과 클로드 코드를 활용한 AI 웹사이트 제작 과정은 세 가지 핵심 단계로 요약된다.
- 클로드 디자인으로 디자인을 뽑는다.
- 클로드 코드로 넘겨 실제 작동하는 웹사이트를 만든다.
- 외부 라이브러리를 활용하여 애니메이션을 추가한다.
이 순서만 기억하면 코딩 지식 없이도 전문가 수준의 움직이는 웹사이트를 제작할 수 있다.
출처
-
홍아린 AI. (2026-06-20). [클로드 디자인 + 코드 최강 조합으로 움직이는 고퀄 홈페이지 만드는법 AI 웹사이트 제작](https://www.youtube.com/watch?v=vHmJg8VQW5c). YouTube.