00:00:00오늘은 최신 Claude Design과 Seed Dance 2.0의 기능을 결합하는 방법을 배우게 될 것입니다
00:00:06이와 같은 애니메이션 웹사이트를 만들기 위해서요. 전체 워크플로우를 단계별로
00:00:12알려드릴 테니, 이런 작업을 처음 해보시는 분들도 똑같이 재현하실 수 있을 겁니다. 그리고 그 과정에서
00:00:17Anthropic의 새로운 도구를 최대한 활용하는 몇 가지 팁과 노하우를 보여드릴 예정입니다.
00:00:22자, 이런 웹 페이지를 만들 때 가장 먼저 시작해야 할 부분은 바로
00:00:28이 배경 영상입니다. 배경 영상을 얻으려면 먼저 시작 이미지가 필요합니다.
00:00:32이제 Nano Banana Pro를 사용하여 해당 시작 이미지를 만들고,
00:00:37그 이미지를 Seed Dance 2.0을 사용해 영상으로 바꿀 겁니다. 이 모든 과정은 Higgsfield에서 진행되는데,
00:00:44이곳은 제가 사용하는 모든 AI 콘텐츠 제작 도구의 원스톱 플랫폼입니다. 시작하려면 그냥
00:00:49이미지 메뉴로 가서 Nano Banana Pro로 이동하세요. 바로 제가 작업 중인 이미지들이 보일 텐데,
00:00:55우리 웹 페이지와 매우 비슷해 보일 겁니다. 특히 이 이미지들이요. 제가 사용한 정확한 프롬프트는
00:01:01제 무료 School 커뮤니티에서 확인하실 수 있고, 설명란에 링크를 남겨두겠습니다.
00:01:05하지만 여기서 이미지와 관련해 강조하고 싶은 것은 특정
00:01:11프롬프트 자체가 아닙니다. 여러분이 만들고 싶은 이미지는 제 것과 다를 것이기 때문이죠.
00:01:15대신 구성을 더 중요하게 생각해야 합니다. 왜 이 이미지는 이런 방식으로 설정되었을까요? 최종 결과물을 보면
00:01:21확실하죠. 화면 오른쪽에 큰 히어로 이미지가 배치되어 있지만,
00:01:26왼쪽에는 텍스트를 위한 여백이 필요했습니다. Nano Banana Pro로 이 이미지를 만들 때
00:01:31그런 구성을 염두에 뒀습니다. 오른쪽은 절반 정도가 화려한 이미지로 채워지고,
00:01:38왼쪽에는 히어로 텍스트가 들어갈 공간을 확보하는 식이죠. 이게 일종의 태그라인이 들어갈 자리입니다.
00:01:44그리고 상단에는 사람들이 홈페이지나 다른 페이지로 이동할 수 있는 내비게이션 바가 있는 배너가 들어갈 것이고,
00:01:51회원가입이나 더 알아보기 같은 버튼도 여기 배치할 겁니다.
00:01:55하단에는 티커 같은 것을 넣을 수도 있겠죠. 저는 시작하기 전부터 이런 구상을 이미 알고 있었습니다.
00:02:00Nano Banana Pro에게 이미지를 생성해달라고 요청할 때는 반드시 미리 알고 있어야 하는 부분입니다.
00:02:04왜냐하면 이 구성이 결국 프롬프트의 내용을 결정하기 때문입니다.
00:02:10이제 여러분은 아마 "어떤 옵션이 있는지조차 모르겠는데, 애초에 구성을 어떻게 잡아야 하죠?"라고 생각하실 겁니다.
00:02:17가장 쉬운 방법은 마음에 드는 웹사이트를 찾아서 그곳의 히어로 섹션과 랜딩 페이지 구성을 분석해보는 것입니다.
00:02:22Dribbble이 그런 예시를 보기에 아주 좋은 곳이죠.
00:02:25B가 세 개 들어가는 Dribbble입니다. 여기서 "landing page sass"라고 검색해보세요.
00:02:30랜딩 페이지와 관련해 무엇이든 검색하면 제가 무슨 말을 하는지 이해하실 겁니다. 여기 나오는 예시들을 볼까요?
00:02:35이건 하단에 이미지가 있고 텍스트가 위에 있네요. 이런 식으로 비슷하게 만들 수도 있습니다.
00:02:40예를 들어, 저 인물을 아래쪽 중앙으로 옮기고 양옆에 구름을 배치한 뒤 텍스트를 여기 넣는 거죠.
00:02:47완전히 새로운 구성이 됩니다. 아니면 이미지를 중앙에 배치하고 텍스트를 주변에 두거나, 다른 요소를 추가할 수도 있습니다.
00:02:52스크롤을 내려보면 이런 구성을 하는 방법은 수만 가지가 있다는 걸 알게 될 겁니다.
00:02:56하지만 미리 알아두거나 최소한 서너 가지 아이디어는 머릿속에 가지고 있어야 합니다.
00:03:02그래야 Nano Banana Pro에 들어갔을 때 원하는 스타일을 반영한 프롬프트를 입력할 수 있으니까요.
00:03:07요약하자면, 이미지를 만들 때 가장 먼저 결정해야 할 것은 바로 구성입니다.
00:03:11여백을 어디에 둘 것인지, 텍스트를 어디에 배치할 것인지를 정하세요.
00:03:16왼쪽, 중앙, 오른쪽, 상단 어디든 상관없습니다. 그냥 선택하고 프롬프트에 반영하기만 하면 됩니다.
00:03:22그리고 프롬프트 작성 시에는 Claude 같은 도구에 도움을 받아 작성하는 것을 권장합니다.
00:03:26오늘 데모에서는 이 이미지를 사용할 것이고, 저를 따라 단계별로 작업하고 싶으신 분들을 위해
00:03:32커뮤니티에 사본을 올려두겠습니다. 정지 이미지를 준비했다면 이제 Claude Design으로 향할 시간입니다.
00:03:37전체적인 흐름은 Nano Banana Pro에서 이미지를 만들고, Claude Design에서 웹사이트를 목업한 다음,
00:03:42마음에 드는 랜딩 페이지 디자인이 완성되면 마지막 단계로 이미지를 영상으로 바꾸는 것입니다.
00:03:47매우 간단하죠. Claude Design을 처음 사용하시는 분들도 걱정 마세요. 이번 영상에서 핵심적인 부분들을 모두 다룰 겁니다.
00:03:51조금 더 자세한 내용은 제가 예전에 올린 심층 분석 영상을 참고하시면 좋겠네요. 링크는 위에 걸어두겠습니다.
00:03:56저희는 이제 왼쪽의 'Prototype'으로 이동해서 프로젝트 이름을 정해줄 겁니다.
00:04:01저는 프로젝트 이름을 "sd2"로 할게요. 디자인 시스템은 없어도 되니 건너뛰셔도 됩니다.
00:04:05디자인 시스템에 대해 더 알고 싶으시면 앞서 언급한 심층 분석 영상을 확인해주세요. 'High Fidelity'를 선택하고 만들기를 클릭하세요.
00:04:10그럼 이 페이지로 넘어오는데, 가장 먼저 해야 할 일은 컨텍스트를 추가하는 것입니다.
00:04:14여기에 우리가 다운로드한 이미지를 넣을 겁니다. 보시는 것처럼 왼쪽 하단에
00:04:18스크린샷을 업로드했습니다. 다음으로 프롬프트를 입력해야 합니다. 물론 스크린샷은 더 추가할 수 있습니다.
00:04:24Dribbble에서 찾은 좋은 예시들이 있다면 꼭 추가하시는 걸 추천합니다. 전체적인 구성을 잡는 데 도움이 되니까요.
00:04:30실제 프롬프트 작성은 Claude Code를 활용하세요. 제가 Claude Design에 붙여넣을 프롬프트를 보여드릴게요.
00:04:35우리 가상의 SaaS 회사인 "Olympus"를 위한 프롬프트입니다. 시장 정보 플랫폼이라는 회사 컨셉을
00:04:40상세하게 설명하고 히어로 섹션과 페이지에 들어가야 할 섹션, 그리고 모션에 대한 요구사항까지 포함했습니다.
00:04:45가장 중요한 부분은 마지막에 있는 "질문이 있으면 시작하기 전에 물어봐줘"라는 문구입니다.
00:04:49Claude Design의 멋진 점은 Claude Code처럼 작동하며 미리 계획을 수립할 수 있다는 점입니다.
00:04:55저는 이 프롬프트를 그대로 입력할 것이고, 제가 만들고자 하는 것을 더 구체화하기 위해 AI가 질문을 던질 것입니다.
00:04:59이 계획 모드 기능의 가장 큰 장점은, 프롬프트가 다소 부족하더라도
00:05:04Claude와의 질의응답 과정을 통해 충분히 탄탄한 첫 결과물을 얻을 수 있다는 점입니다.
00:05:09프롬프트를 모두 입력했으니 이제 전송해볼게요. Claude Design의 사용량 제한에 대해 한 가지 알려드릴 게 있습니다.
00:05:13이 도구는 Claude Pro나 Max 사용량 제한과는 별개로 독자적인 리소스를 사용합니다.
00:05:19꽤 많은 자원을 소비하는 도구이니 항상 사용량을 주시하세요. 저 같은 경우는 벌써 제한을 초과해서
00:05:25추가 사용량을 쓰고 있습니다. 참고로 오늘 보여드리는 과정을 직접 실행했을 때
00:05:30추가 사용량 비용으로 약 5달러 정도가 들었습니다. 더 아낄 수도 있었겠지만, 참고하시라고 말씀드려요.
00:05:36AI가 이제 질문을 가져왔네요. 타이포그래피 섹션은 "Modern Mythic" 스타일로 가고, 컬러 팔레트는
00:05:42반전(Inverted)된 느낌으로 해볼게요. 나중에 'Tweaks' 기능을 사용하면 더 많은 옵션을 조정할 수 있습니다.
00:05:46카피의 톤앤매너는 "Mythic"한 느낌을 섞어주세요. 회사 이름이 Olympus이고 지능형 앱이기 때문에,
00:05:50우리가 작업 중인 전체 이미지는 프로메테우스의 불 같은 느낌을 주려 합니다. 히어로 구성은
00:05:54풀 블리드(Full Bleed) 이미지로 하고 섹션 순서는 알아서 정해달라고 하겠습니다.
00:06:01사회적 증명(Social Proof) 섹션도 알아서 하라고 했고요. 여기서 'Tweaks'라는 정말 멋진 기능이 나옵니다.
00:06:06Tweaks는 나중에 설명해 드릴게요. 일단 가능한 한 많은 Tweaks를 사용하는 것을 추천합니다.
00:06:11나중에 추가할 수도 있으니 일단 계속 진행해 보죠.
00:06:18이제 AI가 우리를 위해 웹사이트를 만들기 시작할 겁니다. Claude Design을 사용할 때 한 가지 알아두어야 할 점이 있습니다.
00:06:23오른쪽 상단에 'Share' 버튼이 있는데, 여기서 만든 결과물은 Claude Design에만 갇혀 있는 게 아닙니다.
00:06:28정말 멋진 점은 나중에 Claude Code로 내보낼 수 있다는 것입니다. 그러면 리소스를 많이 잡아먹는 Claude Design에서
00:06:33나와서 Claude Code로 이동해 원하는 대로 수정할 수 있죠. HTML로 내보내 Canva로 보내거나,
00:06:38PPT나 PDF로 다운로드할 수도 있습니다. 동료를 초대해 협업 도구로 사용할 수도 있고요.
00:06:43정말 다재다능한 도구입니다. 이제 Claude Design이 결과물을 가져왔네요. 영상 중간중간에 계속 보여드릴 겁니다.
00:06:52가장 먼저 주목해야 할 곳은 오른쪽의 Tweaks 메뉴입니다.
00:06:58이 메뉴를 통해 웹 페이지의 세부 요소들을 빠르게 수정할 수 있습니다. 악센트 색상을 바꾸거나,
00:07:06테마를 라이트 모드에서 다크 모드로 변경할 수도 있죠. 하단에서 더 잘 보일 겁니다. 헤드라인, 로고,
00:07:11가격 책정 정보, 모션 등 사이트의 버전을 아주 쉽게 오가며 수정할 수 있습니다.
00:07:17그뿐만 아니라 더 세부적인 편집도 가능합니다. 오른쪽 상단의 'Edit'를 누르고
00:07:26상단의 버튼 같은 요소들을 클릭해서 색상을 직접 바꾸거나 폰트, 패딩, 투명도 등을 수정할 수 있습니다.
00:07:32댓글을 남기는 기능도 있습니다. 같은 버튼을 클릭하고 수정 값을 변경하는 대신
00:07:39댓글로 "더 크게 만들어줘" 또는 "더 작게 만들어줘"라고 요청하거나 그림을 그릴 수도 있습니다.
00:07:45예를 들어 여기를 선택해서 "왼쪽으로 옮겨줘"라고 적고 하단의 Claude에게 전송하면,
00:07:50AI가 방금 그린 내용의 스크린샷을 찍어 확인한 다음,
00:07:56정말 왼쪽으로 살짝 옮겨줍니다. 물론 우리가 없애야 할 이상한 흔적도 남겠지만요. 이 시점에서
00:08:01가장 먼저 해야 할 일은 디자인의 첫인상이 어떤지 확인하는 것입니다.
00:08:07가장 중요한 것은 Nano Banana Pro로 돌아가 이미지를 다시 생성해야 할지 판단하는 것입니다.
00:08:12더 크게 만들지, 더 작게 만들지 등을 결정하세요. 제 추천은 Claude Design 내에서
00:08:172단계 프로세스를 거치는 것입니다. 첫 번째로, 제 웹 페이지의 다양한 변형을 확인하고 싶습니다.
00:08:22사소한 수정 말고, 완전히 다른 레이아웃을 최소 두 개 더 확인해서 어떤 방향으로 나아갈지
00:08:27결정하고 싶습니다. 마음에 드는 매크로 레벨의 버전을 찾으면, 그때부터 더 세부적인 Tweaks를
00:08:33적용하는 것이죠. Tweaks를 5개에서 15개로 늘려 원하는 결과물을 얻는 것입니다.
00:08:40최종적으로는 90% 수준의 완성도를 만들고 나서, 영상을 삽입하고 Claude Code로 가져와
00:08:48나만의 웹사이트로 만드는 것이 목표입니다. 그렇게 하려면 Claude Design에 프롬프트를 입력하면 됩니다.
00:08:54저는 "우리 웹 페이지를 위해 클릭해서 넘겨볼 수 있는 두 가지 추가 레이아웃 변형을 만들어줘"라고
00:09:03요청했습니다. 이렇게 매크로 변형을 만들고 하나를 결정한 뒤에 수많은 Tweaks를 적용하는 방식,
00:09:07이것이 Claude Design과 Claude Code의 차이점입니다. 프롬프트만 놓고 보면
00:09:13프론트엔드 작업은 Design이 Code보다 약간 더 나은 것 같습니다. 하지만 시각적인 반복과
00:09:19빠른 수정이 가능하다는 점이 Claude Design의 가장 큰 강점이죠.
00:09:25Claude Code로 똑같은 작업을 하려고 하면 훨씬 번거롭거든요. 보시다시피 상단에는
00:09:30원래 버전인 'Cinematic'이 있고, 이제 'Archive'와 'Terminal' 버전도 추가되었습니다.
00:09:39모두 굉장히 독특하죠. 이런 변경 사항은 히어로 섹션뿐만 아니라 페이지 전체에 적용됩니다.
00:09:44개인적으로 Terminal 버전이 정말 멋져 보이네요. 이미지를 교체하고 영상은 사용하지 않아야겠지만,
00:09:49보자마자 정말 멋지다는 생각이 듭니다. 평범한 AI 생성 웹 페이지와는 확실히 달라 보이네요.
00:09:55이것이 제가 Claude Design의 잠재력을 최대한 활용해야 한다고 말하는 이유입니다. 이런 변형들을 확인할 수 있으니까요.
00:10:02저는 이런 아이디어를 직접 떠올리거나 프롬프트로 요구할 엄두도 내지 못했을 겁니다.
00:10:09영상 흐름을 위해 일단 Cinematic 버전을 유지하겠지만, 이런 기능이 있다는 걸 보여드리고 싶었습니다. 마음에 드는 것을 선택한 뒤
00:10:142단계로 넘어가면 되니까요. 바로 'Tweaks'입니다.
00:10:21아까 제가 레이아웃 변형을 추가해달라고 했던 것처럼, 이번에는 더 공격적으로 Tweaks를 제안해달라고 할 겁니다.
00:10:26어떤 Tweaks가 필요한지 몰라도 됩니다. 테마를 바꿀지, 헤드라인을 바꿀지 고민할 필요 없이,
00:10:32그냥 많이 던져달라고 하면 우리가 골라서 결정하면 됩니다. 저는 "Cinematic 버전을 유지하고 나머지는 지워줘.
00:10:37그리고 사용 가능한 Tweaks의 수를 공격적으로 늘려줘"라고 입력했습니다.
00:10:43AI가 어떤 Tweaks를 제안하는지 보시죠. 5개 정도였던 Tweaks가 15개 이상으로 늘어났습니다.
00:10:48정말 훌륭합니다. 악센트, 테마, 로고 마크 같은 원래 기능들에 폰트, 모노 폰트, 타입 스케일 같은 기능들까지 생겼네요.
00:10:53요점은 이제 이 모든 항목을 반복해서 테스트할 수 있다는 것입니다. 심지어
00:10:58CTA 오버레이 밝기나 앰버 조명 효과까지, 정말 끝이 없습니다. 모든 Tweaks를 적용해보고
00:11:03불필요한 효과들을 제거해서 최종 결과물을 얻었습니다. 이제 상단의 'Present'를 눌러
00:11:09전체 화면으로 확인해봅니다. 어떻게 보일지 더 잘 알 수 있죠. 제 기준에서는 이 정도면 충분히 좋습니다.
00:11:16기억하세요. Claude Design 안에서 100%를 완성할 필요는 없습니다. 최대한 근접하게 디자인 결정을 마치고,
00:11:20나머지 세부 조정은 나중에 Claude Code로 가져가서 하면 됩니다. Claude Design은 리소스를 많이 잡아먹으니
00:11:27효율적으로 사용해야 합니다. 이제 배경을 애니메이션으로 바꾸는 영상 단계로 넘어갑시다.
00:11:32한 가지 참고할 점은 모바일 사용자가 웹사이트에 접속했을 때
00:11:37속도를 늦출 수 있는 거대한 영상을 보여주지 않기 위해 정지 배경을 사용했다는 것입니다.
00:11:45모바일 사용자는 정지 이미지만 보게 될 겁니다. 이제 Seed Dance를 사용할 겁니다. Higgsfield에서
00:11:53Seed Dance 2.0으로 가세요. 꼭 이 도구만 써야 하는 건 아니지만 지금 가장 좋은 도구입니다.
00:12:01Cling 3.0이나 Vo 3.1 같은 다른 선택지도 있습니다. 영상 설정은 매우 쉽습니다.
00:12:09이미지를 드래그해서 여기 놓기만 하면 됩니다.
00:12:13시작 프레임으로 드래그 앤 드롭한 뒤 프롬프트를 입력하세요.
00:12:20저는 아주 단순하게 입력했습니다. "모션을 매우 느리게, 구름은 거의 움직이지 않고,
00:12:24손에 든 불꽃에서 나오는 불씨가 천천히 흩날리도록"이라고요. 결과물은 이렇게 나옵니다. 우리는 은은한 느낌을 원합니다.
00:12:29정신없는 비디오 게임 같은 영상이 아니라, 은은하게 움직이는 GIF처럼 보이길 바라는 거죠.
00:12:35히어로 이미지는 사이트에 멋진 분위기를 더해주는 용도여야지 모든 걸 다 차지하면 안 되니까요.
00:12:40그리고 보시다시피 영상은 최대 15초 정도가 나옵니다. 완벽한 루프를 만드는 건
00:12:46꽤 어렵기 때문에, 15초짜리 영상을 사용하는 게 가장 좋습니다. 생각보다 용량도 크지 않고요.
00:12:51사용자가 사이트에 들어와 히어로 섹션만 15초 동안 쳐다보고 있을 확률은 낮습니다.
00:12:56대부분 10초 정도 지나면 웹사이트가 어떤 곳인지 알아보기 위해 스크롤을 내릴 테니까요.
00:13:00그러니 프롬프트는 심플하고 은은하게 유지하세요. 더 길게 만들고 싶다면 그렇게 하셔도 됩니다.
00:13:0416대 9 비율의 최소 1080p 영상으로 만드세요. 어떤 모델은 나쁜 프롬프트를 자동으로 개선해주겠다고 하지만,
00:13:11그러지 마세요. 언제나 프롬프트에 대한 완전한 통제권을 가져야 합니다. 한 번에 성공하기는 어려우니
00:13:15네다섯 번 정도 변형을 시도해서 마음에 드는 결과물을 얻으세요.
00:13:22결과물이 나오면 다운로드한 뒤 Claude Design으로 돌아가서
00:13:36mp4 파일을 프롬프트 창에 드래그하세요.
00:13:42왼쪽 하단에 업로드하고 "히어로 배경을 방금 업로드한 영상으로 교체해줘"라고 적으면
00:13:51바로 이렇게 바꿔줍니다. 정말 간단하죠. 이제 Claude Design에서의 작업은
00:13:56거의 끝났습니다. 더 변경하고 싶은 부분이 있다면 Tweaks를 사용해도 되지만,
00:14:02이 정도면 Claude Design에서 나와서
00:14:08Claude Code로 넘어가기 충분합니다. 상단의 'Share' 버튼을 누르고
00:14:14Claude Code로 핸드오프하세요. mp4 영상이 포함되어 있기 때문에,
00:14:18그냥 복사 명령을 쓰면 다운로드가 안 될 수도 있습니다. 그래서
00:14:23Zip 파일로 다운로드하는 것을 추천합니다. 웹사이트의 모든 코드와 영상 파일이 포함되니까요.
00:14:29다운로드한 Zip 파일의 압축을 풀고,
00:14:35그 폴더를 Claude Code로 끌어다 놓으면서 "모든 파일을 다운로드해서
00:14:39이 코드로 웹사이트를 구축해줘"라고 말하면 끝입니다. 이제 거의 다 된 거죠.
00:14:43파일을 드롭하고 "웹 페이지를 위해 이 파일들의 압축을 풀고 개발 서버를 실행해줘"라고
00:14:47요청했습니다. 이제 개발 서버에서 웹 페이지가 실행되고 있네요.
00:14:52Claude Code로의 이전이 완료되었습니다. 애니메이션 히어로 섹션과 영상, 그리고 정지 이미지가 모두 설정되었습니다.
00:14:58이제 세부 수정만 해서 GitHub에 푸시하고 Vercel로 배포하기만 하면 됩니다.
00:15:04오늘 보여드릴 내용은 여기까지입니다. Claude Design과 Seed Dance 2.0을 결합하여
00:15:08이런 애니메이션 웹사이트를 만드는 방법에 대해 도움이 되었으면 합니다. 영상이 어땠는지 댓글로 알려주시고,
00:15:15모든 리소스를 얻고 싶으시다면 Chase AI를 확인해주세요. 그럼 다음에 뵙겠습니다.
00:15:21은은하게 하세요. 너무 과한 건 원치 않습니다. 마치 야생 비디오 게임처럼 보이는 건 좋지 않아요. 거의
00:15:26움직이는 낮은 화질의 GIF처럼 보이길 바라는 거죠. 히어로 이미지가 우리 사이트에
00:15:32멋을 더해주는 정도면 충분하니까요. 모든 것을 압도해서는 안 됩니다. 그리고 두 번째로 보시다시피 이건
00:15:37바뀔 겁니다. 길어야 15초 분량일 테니까요. 이상적으로는
00:15:43완벽한 루프 영상을 만들 수 있겠지만 꽤 어려울 수 있습니다. 그러니 우리가 한 것처럼 그냥
00:15:4815초짜리 영상으로 하는 게 가장 좋습니다. 처음엔 길게 느껴질 수도 있지만 전혀 무겁지 않습니다. 그리고
00:15:54또 하나, 15초라는 길이를 선택하면 사용자가 웹사이트에 들어와서
00:15:59히어로 페이지에서 15초 동안 읽고 있다가 갑자기
00:16:04루프가 다시 시작될 때 컷 편집 때문에 놀라게 될 가능성은 낮습니다. 오히려 일어날 가능성이 높은 건
00:16:10히어로 섹션을 보고 "와 멋지다" 한 뒤 10초 후에 나머지 랜딩 페이지로 내려가 여러분이
00:16:15어떤 일을 하는지 확인하는 것입니다. 그러니 프롬프트를 간단하고 은은하게 유지하세요. 과하게 만들고 싶다면 그렇게 하셔도 좋습니다.
00:16:2015초 동안 가능한 한 길게 만드세요. 16대 9 비율이어야 하고 최소
00:16:261080p는 되어야 합니다. 어떤 모델들은 프롬프트를 개선해주겠다며 거의
00:16:30여러분이 입력한 나쁜 프롬프트를 우리가 더 좋게 바꿔주겠다고 말하는데, 그러지 마세요. 항상 완전한 통제권을
00:16:34가지고 프롬프트를 작성해야 합니다. 원하는 결과가 나올 때까지 몇 번은 변형을 시도해야 할 겁니다.
00:16:40제대로 작동하는 하나를 얻으려면 네다섯 번 정도는 시도해야
00:16:45원하는 결과물을 얻을 수 있을 겁니다. 하지만 결과가 나오면 우리가 해야 할 일은
00:16:50다운로드한 뒤 다시 Claude Design으로 돌아가서 mp4 파일을
00:16:57프롬프트 창에 넣는 것뿐입니다. 저는 여기 왼쪽에 업로드한 뒤 "정지
00:17:01이미지를 방금 업로드한 히어로 배경 영상으로 교체해줄 수 있어?"라고 적었습니다. 그러면 이런 결과가 나올 겁니다.
00:17:05정말 글자 그대로 간단하죠. 이제 이 시점에서 우리는 Claude Design 내에서의 작업은
00:17:12거의 다 끝난 겁니다. 더 수정하고 싶은 게 있다면 Tweaks를 더 사용해도 좋지만,
00:17:17이 단계까지 왔다면 Claude Design에서 나와서
00:17:22앞서 이야기했던 Claude Code 같은 곳으로 가져갈 준비가 된 겁니다. 매우 쉽습니다. 상단으로 가서
00:17:26Share를 누르고 Claude Code로 핸드오프하세요. 왜냐하면 여기에 mp4 영상이 포함되어 있기 때문에
00:17:34그냥 복사 명령만으로는 제대로 다운로드가 안 될 수 있습니다. 그래서
00:17:38대신 Zip 파일을 다운로드하는 것이 좋습니다. 그러면
00:17:44모든 파일과 실시간 영상, 그리고 내부의 모든 코드 설정을 Zip
00:17:49파일로 묶어줍니다. 그러니 'Download Zip'을 선택하세요. 그런 다음 압축을 풀고,
00:17:56압축을 푼 폴더를 Claude Code로 끌어다 놓으면서 "전부 다운로드해줘. 이제
00:18:03이 코드를 사용하여 웹사이트를 만들 거야"라고 말하면 거의 다 된 셈입니다. 폴더를 드롭하고
00:18:10만들고 있는 웹 페이지를 위해 이 파일들의 압축을 풀고 개발 서버를 실행해줘라고 했더니
00:18:14개발 서버에 웹 페이지가 떴습니다. 이제 Claude Code로의 이전이 완료되었습니다.
00:18:19애니메이션 히어로 섹션이 설정되었고, 영상과 정지 이미지가 모두 준비되었습니다.
00:18:25이제 세부 변경 사항을 적용하고 GitHub에 푸시한 다음 Vercel을 통해
00:18:29온라인으로 호스팅할 준비가 끝났습니다. 오늘 여러분께 알려드릴 내용은 여기까지입니다. 이번 영상이
00:18:33Claude Design과 Seed Dance 2.0의 기능을 결합하여
00:18:39이런 종류의 애니메이션 웹사이트를 만드는 방법을 이해하는 데 도움이 되었으면 합니다. 늘 그렇듯 생각을 알려주세요.
00:18:44모든 리소스를 직접 확인하고 싶다면 Chase AI를 꼭 방문해보세요. 그럼 다음에 뵙겠습니다.