챕터별 상세
00:00
서론 및 디자인 목표 설정
AI가 생성한 일반적인 디자인(AI Slop)에서 벗어나 애니메이션을 활용한 고품질 웹사이트 제작의 중요성을 강조했다. 단순한 정적 페이지가 아닌 사용자에게 시각적 충격을 줄 수 있는 '와우 포인트'를 만드는 것이 목표이다. 코딩 경험이 전혀 없어도 Claude Code를 통해 이를 실현할 수 있는 워크플로를 제시했다.
01:37
Nano Banana Pro를 이용한 이미지 생성
Higgsfield의 Nano Banana Pro를 사용하여 웹사이트의 배경이 될 이미지를 생성했다. 프롬프트 템플릿을 활용해 카메라 타입, 조명, 분위기 등을 세부적으로 설정했다. Midjourney나 Dribbble에서 영감을 얻은 레퍼런스 이미지를 함께 입력하여 결과물의 품질을 높였다.
Nano Banana Pro는 Higgsfield에서 제공하는 고성능 이미지 생성 모델로, 특정 스타일 유지 능력이 뛰어나다.
04:01
정지 영상을 비디오로 변환
생성된 이미지를 Kling 3.0 또는 VEO 3.1 모델에 입력하여 비디오로 변환했다. 'static camera, extremely slow and subtle motion' 프롬프트를 사용하여 랜딩 페이지에 적합한 절제된 움직임을 구현했다. 15초 길이의 긴 영상과 5초 영상을 반전시켜 루프를 만드는 두 가지 방식의 장단점을 비교했다.
웹사이트 배경 비디오는 너무 화려하면 콘텐츠 가독성을 해치므로 미세한 움직임(Subtle Motion)이 권장된다.
07:24
Claude Code를 활용한 웹사이트 구현
Claude Code를 실행하고 생성한 이미지와 비디오 파일을 프로젝트 폴더에 배치했다. 'UI UX Pro Max' 스킬을 설치하여 Claude가 전문적인 디자인 규칙을 적용하도록 설정했다. 프롬프트를 통해 모바일 사용자를 위한 대체 이미지 설정과 애니메이션 히어로 섹션 구현을 지시했다.
Claude Code는 Anthropic의 코딩 에이전트로, 로컬 파일 시스템에 직접 접근하여 코드를 작성하고 실행할 수 있다.
09:55
GitHub 연동 및 Vercel 배포
Claude Code 내에서 GitHub 리포지토리를 생성하고 코드를 커밋 및 푸시했다. Vercel 계정을 GitHub와 연동하여 클릭 몇 번으로 웹사이트를 실제 도메인에 배포했다. 배포된 URL을 통해 최종 결과물을 확인하고 추가적인 디자인 수정을 진행했다.
Vercel은 프런트엔드 개발자들을 위한 배포 플랫폼으로, GitHub와 연동 시 자동 배포(CI/CD) 기능을 제공한다.
언급된 리소스
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 03. 17.수집 2026. 03. 17.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
