Claude AI로 99% 제품 판매되는 사이트 구축하기

AI LABS 구독자 10,300명

요약

이 영상은 Claude AI 모델을 활용해 단순하고 흔한 AI 랜딩 페이지를 넘어서, 99%의 제품을 판매할 수 있는 전문적인 랜딩 페이지를 만드는 방법을 공유합니다. 발견한 Legion’s dev 템플릿을 분석해 Paper Shaders, Framer Motion 등 라이브러리 적용법과 컨텍스트 윈도우 분리 전략을 통해 인터랙티브 배경과 부드러운 애니메이션, 폰트·레이아웃 커스터마이즈 노하우를 상세히 설명합니다. Landbook 레이아웃 영감 제공과 SVG 코드 활용 팁까지 실제 사례를 바탕으로 단계별 실전 가이드를 제시합니다.

주요 키워드

랜딩 페이지 Claude AI Paper Shaders Framer Motion SVG Gooey morphing Google Fonts 레이아웃 컨텍스트 윈도우 Landbook

하이라이트

🔑 제품 성공은 랜딩 페이지 품질에 달려있습니다. 처음부터 디자인을 고려해야 합니다.
⚡️ AI로 생성된 랜딩 페이지는 진부하고 비슷해지기 쉬우니, 세부 디자인 강화가 필수입니다.
🌟 Paper Shaders 라이브러리로 인터랙티브하고 반응형인 배경을 손쉽게 구현할 수 있습니다.
🚀 Framer Motion 라이브러리를 이용하면 안정적이고 부드러운 애니메이션을 빠르게 적용할 수 있습니다.
📌 Landbook에서 레이아웃 예시를 골라 AI에 스크린샷을 제공하면, 구조적이고 차별화한 페이지가 완성됩니다.
🔍 SVG 코드를 직접 전달하면 로고와 아이콘을 AI가 정확히 이해하고, 애니메이션까지 구현할 수 있습니다.
💡 컨텍스트 윈도우 분리 전략으로 필요한 정보만 모델에 전달해 성능을 극대화합니다.
📌 Google Fonts를 활용해 특정 단어에 개성 있는 폰트를 입히면 페이지에 강렬한 인상을 줄 수 있습니다.

용어 설명

Claude Code

Claude AI의 코드 생성 특화 모델로, 개발·디자인 자동화에 사용됩니다.

Paper Shaders

웹 사이트용 인터랙티브 배경을 만드는 JavaScript 라이브러리입니다.

Framer Motion

React 기반 애니메이션 라이브러리로, 사전 설정된 효과를 손쉽게 적용합니다.

Context Window(컨텍스트 윈도우)

AI 모델이 한 번에 처리할 수 있는 입력 범위로, 핵심 정보만 전달해 성능을 높입니다.

Gooey morphing

두 요소를 점탄성처럼 자연스럽게 변형·합성하는 애니메이션 기법입니다.

SVG

벡터 형식 아이콘·로고를 코드로 표현해 해상도 저하 없이 자유롭게 편집할 수 있는 이미지 포맷입니다.

제품을 출시하기 전 랜딩 페이지 디자인의 중요성을 강조합니다. 대부분은 제품 개발 후 마지막에 대충 페이지를 만들지만, 페이지가 아마추어 같으면 제품도 그렇게 보이기 쉽다는 점을 지적합니다.

[00:00] 제품 출시 전에 고려해야 할 가장 중요한 요소는 랜딩페이지의 품질입니다. 대부분의 사람들이 제품을 먼저 만들고 나서 급하게 랜딩페이지를 만드는 실수를 저지르는데, 이는 제품의 전체적인 인상을 해칠 수 있습니다.

X(구 트위터)에서 Legion’s dev가 공개한 전문 템플릿을 발견합니다. V0ero 채팅 기록으로 확인된 프롬프트를 Claude Code에 입력했지만 원하는 디자인이 생성되지 않았던 경험을 공유합니다.

[00:18] AI를 사용한 랜딩페이지 제작의 문제점을 지적합니다. 대부분의 AI 생성 사이트들은 그라데이션과 카드를 사용한 비슷한 디자인으로 지루하고 평범해 보이며, 프리미엄한 느낌을 주지 못한다고 설명합니다.

[00:34] 화자가 X(트위터)에서 레전즈 데브의 전문적인 랜딩페이지 템플릿을 발견한 경험을 공유합니다. 이 템플릿은 AI가 아닌 사람이 디자인한 것처럼 보이는 세밀한 디테일들로 가득했다고 설명합니다.

[00:53] V제로에서 디자인된 사이트의 채팅을 분석하고, 웹사이트를 더욱 반응형으로 만드는 미묘한 디테일들을 발견했다고 설명합니다. 이를 바탕으로 누구나 사용할 수 있는 템플릿을 만들고자 했습니다.

최종 코드와 원본 프롬프트를 복사해 템플릿을 완전히 분해했습니다. 누구나 AI 에이전트를 써서도 훌륭한 디자인을 얻도록 단계별로 가이드할 준비를 알립니다.

[01:16] 클로드 코드에 동일한 프롬프트를 적용했을 때의 한계를 설명합니다. 여러 시도에도 불구하고 원하는 디자인 컴포넌트를 제대로 생성하지 못했고, 기본적인 점 구조나 단순한 그라데이션만 추가되는 수준이었다고 합니다.

[01:44] 문제 해결을 위해 사이트의 최종 결과물을 복사해서 완전히 분해하고 분석하는 접근법을 택했습니다. 실제 코드와 원래 프롬프트를 결합하여 V제로 웹사이트의 상세한 분석을 통해 최고의 팁과 인사이트를 제공하겠다고 약속합니다.

Chat LLM Teams를 통해 여러 AI 모델을 한 곳에서 사용해보고, 이미지·영상 생성부터 문서·코딩 지원까지 통합 툴을 월 $10에 제공한다는 광고를 간단히 설명합니다.

[02:03] 스폰서 소개 부분으로, Chat LLM Teams에 대해 설명합니다. 여러 AI 도구를 개별적으로 구매하는 대신, 모든 주요 AI 모델을 한 곳에서 사용할 수 있는 서비스를 소개하며, 프롬프트에 따라 자동으로 최적의 모델을 선택해주는 기능을 강조합니다.

[02:38] AI 도구가 슬라이드, 문서, 프레젠테이션부터 앱과 에이전트 구축까지 다양한 작업을 월 10달러로 제공하는 chatlm.abacus.ai 서비스를 소개합니다.

[02:53] 인상적인 웹사이트의 핵심은 인터랙티브 배경으로, 페이퍼 셰이더 라이브러리를 활용해 만들어집니다.

사이트의 핵심은 인상적인 인터랙티브 배경입니다. Paper Shaders 라이브러리 사용법과, Claude Code가 배경을 제대로 이해하지 못했을 때 개선된 접근 방식을 소개합니다.

[03:14] Claude Code로 페이퍼 셰이더 배경을 만들 때 처음엔 실패했지만, 명확한 지시와 특정 프롬프트로 해결할 수 있었습니다.

Gitingest로 리포지토리를 AI 읽기용 텍스트로 변환해 Claude Code에 붙여넣습니다. 전체 코드 대신 배경 관련 정보만 대화창에 넣는 분리 전략의 효과를 설명합니다.

[03:45] GitHub에서 Gitingest를 사용해 리포지토리를 AI가 읽을 수 있는 텍스트로 변환하고, 전체 코드베이스보다는 배경 세부사항만 컨텍스트에 포함하는 분리 접근법이 더 효과적입니다.

[04:24] Claude Code로 다양한 스타일의 드롭다운을 구현하여 물방울, 셀 애니메이션 등 여러 배경 변형을 생성할 수 있습니다.

[04:46] 특정 프롬프트를 사용한 후 Claude Code의 디자인 품질이 크게 향상되어, 애니메이션이 없던 기존 디자인에서 놀라운 배경을 만들 수 있게 되었습니다.

[05:07] 웹사이트의 다른 요소들과 함께 구성되는 내용을 설명하며, 회전하는 원과 팝업 애니메이션 등의 요소들을 소개합니다.

직접 애니메이션을 요청하기보다 Framer Motion 라이브러리를 활용하는 것이 안정적이라고 강조합니다. 버튼·컴포넌트 등 다양한 요소에 사전 설정된 애니메이션을 적용하는 방법을 안내합니다.

[05:25] 애니메이션 구현 시 AI에게 단순히 추가해달라고 하는 것보다, 전용 라이브러리를 사용하는 것이 더 나은 접근법이라고 설명합니다.

[05:43] Framer Motion이 애니메이션을 위한 최고의 라이브러리 중 하나이며, 임포트만 하면 다양한 요소에 대한 미리 제작된 애니메이션을 제공한다고 소개합니다.

[06:00] 회전하는 원 애니메이션을 구현할 때 Framer Motion for React를 사용하라고 AI에게 명시하는 것이 중요하며, 이렇게 하면 결과가 훨씬 더 좋아진다고 설명합니다.

[06:26] 라이브러리 내에 미리 구성된 애니메이션이 커스텀 코드보다 안정적이며, Frame Motion의 기반으로 구축되면 배경 변경 시에도 깨지지 않는다고 강조합니다.

[06:50] 품질 높은 애니메이션이 전체 웹사이트 경험을 향상시킨다고 말하며, 설명란에 추가 애니메이션 목록을 제공하겠다고 약속합니다.

로그인 버튼과 작은 화살표 원을 별도 요소로 만든 뒤, Framer Motion으로 gooey morphing을 적용해 자연스러운 변형 애니메이션을 구현하는 과정을 설명합니다.

[07:04] 단순한 효과가 아닌 끈적한 모핑 효과를 구현하는 방법을 설명하며, 두 개의 별도 요소를 만들고 그 사이에 끈적한 모핑 애니메이션을 적용하는 과정을 안내합니다.

[07:35] 작지만 강력한 애니메이션 효과를 구현하는 방법을 설명하며, 다른 테스트 예시들도 리소스 섹션에서 확인할 수 있다고 안내합니다.

Google Fonts에서 마음에 드는 폰트를 골라 특정 단어에만 적용하는 방법을 설명합니다. 코드 복사·프롬프트 제공으로 쉽게 커스터마이징할 수 있다는 점을 강조합니다.

[07:49] 웹사이트를 인상적으로 만드는 핵심 요소로 폰트 선택의 중요성을 강조하며, 기본 AI 폰트 대신 구글 폰트를 활용해 특정 단어에 다른 폰트를 적용하는 방법을 시연합니다.

[08:46] 그라데이션과 폰트와 함께 레이아웃이 웹사이트 디자인의 중요한 요소임을 설명하며, 텍스트를 중앙이 아닌 왼쪽 하단에 배치하여 더 나은 시각적 효과를 얻는 방법을 소개합니다.

Landbook 갤러리에서 디자인 영감을 얻고, 화면 캡처를 Claude Code에 제공해 맞춤 농업 제품 랜딩 페이지를 만드는 예시를 제시합니다.

[09:08] 디자인 영감을 위해 Landbook 웹사이트 갤러리를 추천하며, 기존 웹사이트에서 레이아웃과 구조를 참고하여 농업 제품 등 다양한 분야에 적용할 수 있는 방법을 제안합니다.

[09:41] 단순히 '랜딩 페이지를 만들어달라'고 요청하는 것보다 적절한 구조와 독특한 레이아웃을 제공해야 인상적인 결과를 얻을 수 있으며, 원래 작성자의 사이트와 같은 품질의 특성들을 보여줍니다.

[10:00] 전문적인 랜딩 페이지를 만들기 위해서는 다양한 폰트, 애니메이션 배경, 독특한 레이아웃을 결합하는 것이 중요합니다. 간단히 스크린샷을 찍어 Claude Code에 제공하면 컬러 팔레트까지 함께 제공받을 수 있습니다.

SVG 코드를 직접 제공하면 AI가 로고·아이콘을 코드 수준에서 이해해 애니메이션까지 지원합니다. 다양한 SVG 리소스와 사용 팁을 공유합니다.

[10:18] V0ero 브랜드 로고 구현 사례를 통해 SVG 코드 제공의 장점을 설명합니다. 이미지 파일 대신 SVG 코드를 직접 제공하면 AI 모델이 더 잘 이해하고 구현할 수 있습니다.

[10:33] SVG의 핵심 장점들을 소개합니다. 코드로 표현되는 도형 기반 구조로 인해 모델이 쉽게 이해할 수 있고, Framer Motion을 활용한 애니메이션 구현과 추가적인 유연성을 제공합니다.

[10:56] 다양한 SVG 리소스 사이트들을 소개하며, 브랜드 로고를 쉽게 찾고 복사하는 방법을 시연합니다. 클릭 한 번으로 SVG 코드를 클립보드에 복사하여 바로 사용할 수 있습니다.

[11:16] SVG 일러스트레이션 리소스의 활용법을 설명합니다. 전문적인 랜딩 페이지 구축에 유용한 SVG 일러스트레이션들을 다운로드하여 Claude Code에 제공하면 쉽게 구현할 수 있고, 브랜드에 맞게 색상 변경도 가능합니다.

[11:40] 영상을 마무리하며 채널 지원을 위한 슈퍼 땡스 버튼 사용을 안내하고 시청자들에게 감사 인사를 전합니다.

영상의 주요 팁을 정리하고, 채널 지원을 위한 ‘슈퍼 땡스’ 버튼 사용을 안내하며 시청자에게 감사 인사를 전합니다.

타임라인 정보가 없습니다.

[00:00] 제품 출시를 생각하기도 전에

[00:01] 성공을 좌우할 결정적인 요소가 하나 있습니다.

[00:03] 그런데 대부분의 사람들이 이 부분을 완전히 망칩니다.

[00:05] 먼저 제품을 급하게 만들고 나서

[00:07] 마지막 순간에 대충 만든 일반적인 랜딩페이지를

[00:08] 급조해서 올리죠. 하지만 현실은 이렇습니다.

[00:10] 여러분의 제품은 랜딩페이지 품질로 평가받고

[00:12] 그게 아마추어처럼 보이면

[00:14] 여러분의 제품도 그렇게 보일 겁니다.

[00:16] 요즘 AI로 랜딩페이지 만드는 게

[00:18] 쉽다고 생각하는 사람들이 많습니다.

[00:20] 커서나 클로드에 가서 랜딩페이지 만들어달라고 하면

[00:22] 그라데이션과 카드가 들어간 뭔가가 나옵니다.

[00:24] 하지만 다른 AI 생성 사이트들과

[00:26] 똑같이 생겼죠.

[00:28] 지루하고 평범하며 절대 프리미엄처럼 보이지 않습니다.

[00:30] 오늘은 이 문제를 해결하는 방법을

[00:32] 보여드리겠습니다.

[00:34] X를 둘러보다가 레전즈 데브의

[00:37] 게시물을 우연히 발견했는데

[00:39] 랜딩페이지 디자인용 공개 템플릿을

[00:41] 공유해둔 게 있었습니다.

[00:43] 정말 전문적이고

[00:45] 놀라운 디자인이라고 생각했습니다.

[00:47] AI가 생성한 것이 아니라

[00:49] 완전히 사람이 디자인한 것처럼 보이게 만드는

[00:51] 작은 디테일들이 정말 많았습니다.

[00:53] 디자인이 만들어진 V제로에서

[00:56] 채팅을 열어봤습니다.

[00:57] 바로 여기서 전체 대화를 볼 수 있죠.

[00:59] 열어보고 테스트해보니

[01:02] 웹사이트를 더욱 반응형으로 만드는

[01:04] 미묘한 디테일들을 발견했습니다.

[01:06] 그래서 그의 프롬프트를 신중하게

[01:07] 읽어보았습니다.

[01:09] 어떤 AI 에이전트를 사용하든

[01:11] 누구나 쉽게 이런 놀라운 디자인을

[01:14] 만들 수 있는 템플릿을 만들고 싶었습니다.

[01:16] 먼저 그가 사용한 프롬프트를

[01:18] 클로드 코드에 그대로 넣어봤습니다.

[01:20] 첫 번째와 두 번째 시도 후에도

[01:21] 클로드 코드는 제가 원하는 것과

[01:24] 비슷한 것조차 생성하지 못했습니다.

[01:26] 예를 들어 이런 특정 디자인

[01:28] 컴포넌트를 만들어야 했는데

[01:30] 클로드 코드는 그냥 기본적인

[01:32] 점 구조 같은 걸 만들어냈습니다.

[01:34] V제로가 실제로 구현한 것의

[01:36] 설명을 제공해봐도 여전히

[01:38] 원하는 결과를 만들어내지 못했습니다.

[01:40] 이전 결과에 그라데이션만 추가했을 뿐

[01:42] 여전히 그렇게 좋아보이지 않았습니다.

[01:44] 그래서 제가 한 일은 이겁니다.

[01:45] 사이트의 최종 결과물을 복사해서

[01:48] 완전히 분해해봤습니다.

[01:49] 최종 결과물인 실제 코드와

[01:51] 그가 사용한 원래 프롬프트 일부를

[01:53] 가져왔습니다.

[01:55] 이제 V제로에서 만든 웹사이트의

[01:57] 자세한 분석을 통해 이런 놀라운 웹사이트를

[01:59] 만들기 위한 최고의 팁과

[02:01] 인사이트를 공유하겠습니다.

[02:03] 잠깐 오늘의 스폰서인 Chat LLM에 대해

[02:06] 말씀드리겠습니다.

[02:08] AI 도구들이 정말 많지만

[02:10] 모두 사기엔 비싸고 복잡합니다.

[02:14] 이제 그럴 필요가 없습니다.

[02:17] Chat LLM Teams는 모든 최고의 AI 모델을

[02:21] 한 곳에서 제공합니다.

[02:23] Chat GPT-o3 Pro, GPT 4.1

[02:25] Claude Sonnet 4, Llama 3, Gemini 2.5

[02:28] Pro, Abacus Smog, Deepseek, Grock 4

[02:31] Root LLM까지 말이죠.

[02:33] 프롬프트에 따라 자동으로

[02:34] 최적의 모델을 선택해줍니다.

[02:37] 시각 자료가 필요하신가요?

[02:38] 슬라이드를 만들어요? 차트와 심층

[02:40] 연구가 포함된 완전한 문서와

[02:42] 프레젠테이션을 제작합니다. 코딩은? 내장된 Codel

[02:44] LLM 에디터를 사용하거나 딥 에이전트를 실행하여

[02:46] 완전한 앱과 에이전트를 구축하세요. 이 모든 것이

[02:49] 단 월 10달러입니다. chatlm.abacus.ai를 방문하거나

[02:52] 지금 설명란의 링크를 클릭하세요.

[02:53] 자, 이 웹사이트를 멋지게 만드는

[02:55] 첫 번째 요소는 바로

[02:57] 인터랙티브 배경입니다. 저는 AI가

[02:59] 배경을 생성하는 것을 본 적이 있고

[03:02] 그래디언트도 봤지만, 이렇게

[03:04] 인상적으로 만드는 건 처음 봤습니다.

[03:05] 코드와 프롬프트를 살펴보니

[03:07] 그가 페이퍼 셰이더라는 라이브러리를 사용하고 있다는 걸

[03:10] 발견했습니다. 이 라이브러리는 웹사이트용으로

[03:12] 놀라운 배경을 만드는 라이브러리입니다.

[03:14] 처음에는 Claude Code에게 이 라이브러리를 사용해서

[03:16] 좋은 배경을 생성하라고 요청했지만

[03:18] 실패했습니다. 어떤 이유에서인지

[03:19] 무엇이 더 나은지 이해하지 못했고

[03:21] 이 예시와는 달랐습니다.

[03:23] Vzero는 첫 번째 시도에서 성공했습니다.

[03:25] 그의 프롬프트에서 볼 수 있듯이 말이죠.

[03:27] 하지만 같은 프롬프트를 Claude Code에게 주었을 때

[03:28] 정말 엉망이 되었습니다.

[03:30] 그래서 제가 한 방법과

[03:32] 여러분만의 웹사이트에서

[03:33] 놀라운 배경을 생성하는 방법을

[03:35] 알려드리겠습니다. 먼저 Claude Code에게

[03:37] 페이퍼 셰이더를 사용한다고 명확히 알려주고

[03:39] 디자인을 명확하게 명시해야 합니다.

[03:41] 다음 단계는 이미 준비된 프롬프트를

[03:43] 사용하는 것입니다. 이 세부 내용들은

[03:45] 실제로 그의 웹사이트에서

[03:47] 추출한 것입니다. GitHub으로 돌아가서

[03:49] Gitingest를 사용했고, 기본적으로

[03:51] 리포지토리를 AI가 읽을 수 있는 텍스트로 변환했습니다.

[03:53] 큰 리포지토리가 아니어서 이를

[03:56] Claude Code에 붙여넣고 집중적인

[03:58] 대화를 나눴습니다. 이 특정 프롬프트를 사용해서

[03:59] 여기서 보는 정확한 디자인을 제공했고

[04:02] 같은 라이브러리로 다른

[04:04] 놀라운 배경들을 만들어냈습니다.

[04:05] 프롬프트와 리소스에 대해서는 걱정하지 마세요.

[04:07] 이 비디오의 리소스 섹션에서

[04:09] 모두 찾을 수 있습니다.

[04:11] 본질적으로 이 채팅의 컨텍스트 윈도우에는

[04:13] 배경 세부사항만 포함되어 있습니다.

[04:15] 전체 코드베이스를 Claude Code에게 넘겨주는 것보다

[04:17] 더 효과적입니다. 이것이 제가

[04:19] 이 분리 접근법을 선호하는 이유입니다.

[04:21] 심지어 Claude Code에게 다양한 스타일을 가진

[04:24] 드롭다운을 구현하게 했습니다.

[04:25] 그래서 여러분께 다양한 배경들을

[04:27] 보여드릴 수 있었습니다.

[04:29] 예를 들어, 화면을 가로지르는

[04:31] 이 물방울이 있습니다. 그리고 이런

[04:33] 작은 셀 애니메이션도 있습니다.

[04:35] 정말 천천히 움직이지만

[04:37] 여전히 아름답게 애니메이션됩니다.

[04:38] 다양한 유형의 애니메이션이 있고

[04:40] Claude Code로 많은 변형을 생성할 수 있습니다.

[04:42] 색상을 바꾸고, 다른 옵션을 요청하고

[04:44] 자유롭게 실험할 수 있습니다.

[04:46] 제가 발견한 주요 사실은 이 프롬프트를 준 후

[04:48] 어떤 종류의 개선이 잠금 해제되었다는 것입니다.

[04:50] 이전에는 생성한 대부분의 디자인이

[04:52] 전혀 애니메이션이 없었습니다.

[04:54] 하지만 그 후에는 디자인이

[04:56] 놀라워 보였습니다. 바로 여기

[04:58] 이 배경을 보세요. 정말

[05:00] 놀랍도록 보입니다.

[05:03] 이것이 실제로 랜딩 페이지를

[05:05] 아름답게 만드는 요소입니다. 놀라운 배경들

[05:07] 다른 요소들과 함께

[05:09] 다음에 설명하겠습니다. 이제

[05:11] 웹사이트에서 아래쪽에 보시면

[05:13] 작은 회전하는 원이 있는데 이것이 V 0가

[05:15] 얼마나 놀라운지 애니메이션으로 보여줍니다. 여기

[05:17] 보시면 작은 팝업이나 병합

[05:19] 애니메이션도 확인하실 수 있습니다. 또한

[05:21] 제작자가 더 많은 애니메이션을

[05:23] 구현하려고 시도한 것도 발견했습니다. 그리고

[05:25] 애니메이션을 구현할 때 여러분 중 많은 분들이

[05:27] AI에게 그냥 추가해달라고 말하는데

[05:30] 사실 그건 올바른 접근법이 아닙니다.

[05:32] 애니메이션 전용 라이브러리를 사용하는 것이

[05:33] 훨씬 더 나은 방법입니다. AI가

[05:35] 모든 것을 처음부터 만들 필요가 없기 때문입니다.

[05:37] 대신 이미 애니메이션을 처리하기 위해

[05:39] 전문적으로 구축된 라이브러리를 활용합니다.

[05:41] 이를 위한 최고의 라이브러리 중 하나는

[05:43] AI 모델들이 실제로 매우 숙련된

[05:45] Framer Motion입니다.

[05:47] 기본적으로 임포트만 하면

[05:49] 모든 종류의 요소를 위한

[05:51] 미리 만들어진 놀라운 애니메이션을 제공합니다.

[05:53] 버튼, 컴포넌트 등을 포함해서요.

[05:55] 그래서 여러분이 해야 할 일은 다음과 같습니다.

[05:56] 애니메이션을 구현할 때마다

[05:58] 이 접근법을 사용해야 합니다.

[06:00] 예를 들어, 여기 있는 회전하는 원

[06:02] 애니메이션을 구현하고 싶다면

[06:04] AI에게 텍스트가 있는 회전하는 원을

[06:06] 만들어달라고 요청할 것입니다. 하지만

[06:08] 그 요청과 함께 Framer Motion for React를

[06:10] 사용하라고 하는 프롬프트도 제공해야 합니다.

[06:12] 이는 Framer Motion 라이브러리의

[06:14] React 버전입니다.

[06:16] 이렇게 하면 결과가 훨씬 더 좋아집니다.

[06:18] 제가 직접 테스트해본 결과에서도

[06:20] 이 라이브러리를 사용하기만 해도

[06:22] 애니메이션이 더 부드럽고 안정적이 되는

[06:24] 수많은 사례를 봤습니다.

[06:26] 이런 애니메이션들이 커스텀 코드보다는

[06:28] 라이브러리 내에 미리 구성되어 있기 때문에

[06:29] 문제가 발생할 가능성이 훨씬 낮습니다.

[06:31] 예를 들어, 이 웹사이트의 배경을 바꾼다면

[06:33] 움직이는 요소 애니메이션이

[06:35] 무작정 깨지지 않을 것입니다.

[06:37] Frame Motion의 안정적인 기반으로

[06:39] 구축되었기 때문입니다.

[06:41] 그래서 애니메이션을 구현할 때마다

[06:42] 이 라이브러리를 최대한 자주 사용해보세요.

[06:44] 그런데 이 특정 애니메이션 주제로 돌아가서

[06:46] 이런 작은 품질 애니메이션들을 보는 것은

[06:48] 정말 놀랍습니다. 왜냐하면

[06:50] 전체 웹사이트 경험을 훨씬 더 좋게 만들기 때문입니다.

[06:52] 그런 의미에서 설명란에

[06:54] 추가 애니메이션 목록을 남겨두겠습니다.

[06:56] 기본적으로 이 효과를 구현한다면

[06:58] 단순한 마우스 커서나 옆에서 튀어나오는

[07:00] 작은 원이 아닐 것입니다.

[07:02] 실제로 여기서 일어난 것은

[07:04] 끈적한 모핑 효과였습니다. 즉, 이것들은

[07:06] 이 끈적한 애니메이션 기법을 사용해서

[07:08] 함께 모핑된 두 개의 별도 요소입니다.

[07:10] 그래서 방법은 다음과 같습니다.

[07:12] 먼저 AI가 두 개의 별도 요소를

[07:14] 만들도록 합니다. 예를 들어

[07:16] 로그인 버튼을 만들고 그 다음 작은

[07:18] 화살표 원을 만들라고 말합니다.

[07:20] 그 후에 끈적한 모핑 애니메이션을

[07:22] 그들 사이에 적용하라는 프롬프트를 주고

[07:24] 다시 Framer Motion을 사용하라고

[07:26] 명시합니다.

[07:28] 그리고 다시 React용으로

[07:30] 지정해야 합니다.

[07:32] 이 효과를 위해 Framer Motion을 사용해야 합니다.

[07:35] 이 효과를 얻는 방법입니다. 이렇게 해서

[07:36] 작지만 놀라울 정도로 강력한 효과를 가진

[07:38] 애니메이션을 구현할 수 있습니다. 또한, 다른 예시들도 찾아서

[07:41] 철저히 테스트해봤습니다.

[07:43] 이 모든 것들을

[07:44] 리소스 섹션에서 확인할 수 있습니다.

[07:46] 자, 다음으로, 웹사이트를 인상적으로 만드는

[07:49] 또 다른 작은 디테일은

[07:50] 작성자가 사용한 다양한 폰트 선택입니다.

[07:52] AI가 보통 생성하는 기본 폰트에만

[07:54] 머물지 않았습니다. 그렇게 했다면

[07:56] 사이트 전체적인 모습에 도움이 되지 않았을 겁니다.

[07:58] 특히 단일 단어에 다른 폰트를 적용함으로써

[08:00] 랜딩 페이지에 엄청난 개성을

[08:02] 더할 수 있습니다. 폰트를 얻기 위한

[08:04] 최고의 장소는 구글 폰트입니다.

[08:06] 거기서 찾은 폰트를 구현하는 것은

[08:08] 정말 간단합니다. 예를 들어,

[08:10] 마음에 드는 폰트를 발견했고

[08:12] 이를 구현하기 위해서

[08:13] 코드를 복사해서 Claude에게 추가하라고 말했습니다.

[08:16] 'beautiful'이라는 단어에 특별히

[08:18] 폰트를 적용하라고 요청하고

[08:20] 복사한 링크를 제공했습니다.

[08:22] Claude가 완벽하게 구현해줬습니다.

[08:24] 제가 시도한 폰트가 반드시 기존 것보다

[08:26] 더 나은 것은 아니지만

[08:28] 얼마나 쉽게 커스터마이즈할 수 있는지를

[08:30] 보여줍니다. 그래서 웹사이트에

[08:32] 다양한 폰트를 꼭 시도해보세요.

[08:34] 여기서처럼 특정 단어에

[08:36] 적용하면 사이트가 훨씬 더

[08:38] 세련되어 보이고 훨씬 더 많은

[08:40] 개성을 부여합니다.

[08:42] 실제로 사이트를 보면, 제 생각에는

[08:43] 정말 놀라울 정도로 멋집니다.

[08:46] 그라데이션과 폰트와 함께

[08:48] 또 다른 중요한 요소는

[08:50] 그들이 선택한 레이아웃입니다.

[08:52] 예를 들어, 텍스트를 구현할 때

[08:54] 중앙에 배치하는 대신

[08:56] 의도적으로 왼쪽 하단 모서리에

[08:58] 배치해서 훨씬 더 보기 좋게

[08:59] 만들었습니다. 이를 위해서는

[09:02] 기본적으로 디자인 개선에 사용할 수 있는

[09:04] 몇 가지 웹사이트 레이아웃을 알아야 합니다.

[09:06] 처음부터 새로 발명할 필요는 없습니다.

[09:08] 이미 존재하는 웹사이트에서

[09:09] 영감을 얻으면 됩니다.

[09:11] 이를 위해 Landbook이라는

[09:13] 웹사이트 갤러리를 찾았는데,

[09:15] 최근에 디자인 영감을 위해 사용하고 있습니다.

[09:17] 다양한 레이아웃, 구조,

[09:19] 웹사이트의 매핑 스타일을 찾을 수 있고

[09:21] 훌륭한 아이디어를 제공합니다.

[09:22] 바로 여기 있는 이것을 보세요.

[09:24] 제 생각에는 정말 놀랍고

[09:26] 기본적으로 단순한 레이아웃입니다.

[09:28] 예를 들어, 농업 제품의 랜딩 페이지를

[09:30] 만든다면 이것도 쉽게 활용할 수 있습니다.

[09:32] Claude Code에게 이것의 스크린샷을 주고

[09:33] 로고와 함께 농업 이미지를 사용하라고

[09:35] 말하기만 하면 됩니다. 하지만 만약

[09:37] Claude Code에게 그냥

[09:39] '랜딩 페이지를 만들고 싶어요'라고만

[09:41] 말했다면, 폰트와 배경을 추가해도

[09:43] 적절한 구조나 독특한 레이아웃 없이는

[09:45] 결과가 인상적이지 않을 겁니다.

[09:47] 바로 여기 있는 이 사이트를 보세요.

[09:49] 원래 작성자가 만든 것과

[09:52] 같은 특성들을 많이 가지고 있습니다.

[09:54] 짧은 텍스트 덩어리들과 함께

[09:56] 원래 작성자가 만든 것과 같은

[09:58] 품질들을 가지고 있습니다.

[10:00] 다양한 폰트, 애니메이션 배경,

[10:02] 그리고 독특한 레이아웃이 있습니다. 이 모든 것들을

[10:04] 결합하면 여러분의 랜딩 페이지가

[10:06] 정말 전문적으로 보입니다. 그리고 솔직히 말해서

[10:08] 여러분이 해야 할 일은 스크린샷을 찍어서

[10:10] Claude Code에 제공하는 것뿐입니다. 그게 전부예요.

[10:12] 심지어 컬러 팔레트까지 제공해주는데,

[10:14] 이것도 정말 환상적입니다. 그러니 반드시

[10:16] 그것도 활용하세요. 제가 원작자의

[10:18] 채팅을 살펴보던 중, 그가 어떻게

[10:20] V0ero 브랜드 로고를 구현했는지 발견했습니다.

[10:22] 그는 단순히 로고를 구현해 달라고 요청하거나

[10:24] 이미지를 제공하지 않았습니다. 대신

[10:26] SVG 코드를 제공했습니다. 이는 다른 대안들에 비해

[10:29] 훨씬 더 나은 방법입니다. 그 이유는

[10:31] SVG는 코드로 표현되기 때문입니다.

[10:33] 이러한 로고들은 다양한

[10:35] 모양들로 구성되어 있기 때문입니다. 이로 인해

[10:36] 모델이 이미지를 제공하고 해당 이미지를 추가해 달라고

[10:38] 요청하는 것에 비해 훨씬 더 쉽게

[10:40] 이해할 수 있습니다. 또한 이는

[10:42] 추가적인 유연성도 제공합니다. 아이콘과

[10:45] 이미지를 SVG로 추가하면 추가적인

[10:47] 기능에 접근할 수 있습니다. 여러분은

[10:49] Framer Motion을 사용해서 이러한 SVG 아이콘을 애니메이션화하고

[10:52] 정말 놀라운 애니메이션 드로잉

[10:54] 아이콘을 만들 수 있습니다. SVG는 쉽게 찾을 수 있고

[10:56] 사용 가능한 리소스가 많이 있습니다.

[10:58] 저는 이러한 리소스들을 여러 개 나열하고 있습니다.

[11:00] 이 사이트를 한번 보세요. 여기서 여러분은

[11:02] 다양한 브랜드의 SVG 로고를 많이 찾을 수 있습니다.

[11:04] V0ero 로고를 원한다면, 검색해서

[11:06] 찾을 수 있습니다. 바로 여기 있네요.

[11:08] 클릭하면 SVG가 클립보드에 복사됩니다.

[11:10] 터미널로 돌아가서 붙여넣으면

[11:12] SVG 코드를 얻을 수 있습니다. 여기서부터

[11:14] 애니메이션화하거나 앱에서 직접 사용할 수 있습니다.

[11:16] 아이콘 외에도 정말 멋져 보이는

[11:19] SVG 일러스트레이션이 있는 사이트도 많습니다.

[11:21] 이들은 특정 사이트에서 중요하며,

[11:23] 우리의 경우에는 필요하지 않았지만

[11:25] 여전히 전문적인 랜딩 페이지를 구축할 때

[11:27] 놀라운 리소스입니다.

[11:28] 이러한 SVG들을 다운로드해서 Claude Code에 제공하면

[11:30] 구현이 쉬워집니다.

[11:32] SVG는 모양으로 만들어지기 때문에

[11:34] 쉽게 편집할 수 있습니다. 색상을 브랜드에 맞게

[11:36] 변경할 수 있어서 정말 훌륭한

[11:38] 리소스입니다.

[11:40] 이것으로 이 영상을 마무리합니다.

[11:42] 채널을 지원하고 이런 영상을 계속 만들 수 있도록

[11:44] 도와주고 싶다면

[11:46] 아래의 슈퍼 땡스 버튼을 사용해 주세요.

[11:48] 언제나 시청해 주셔서 감사하고

[11:50] 다음 영상에서 만나요.

[11:52]