🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude AI만으로 만든 FIFA 2026 Website 제작의 핵심은 “프롬프트 한 번으로 완성”이 아니라, Claude Design과 영상 프레임 자산을 반복적으로 맞춰 가는 스크롤 기반 인터랙션 구현 과정이다.

📌 핵심 요점

1. 이번 작업은 Claude Chat이나 Claude Code가 아니라 Claude Design을 중심으로, 흰색 프리미엄 느낌의 3개 섹션 축구 랜딩 페이지를 만드는 흐름으로 진행된다.
2. 핵심 인터랙션은 일반 비디오 삽입이 아니라, 스크롤 방향에 따라 선수 애니메이션이 정방향·역방향으로 재생되고 축구공이 페이지 전체를 따라 이동하는 구조다.
3. 메시·호날두·네이마르 자산은 이미지 레퍼런스에서 영상으로 만들고, 다시 12FPS JPG 프레임으로 쪼개 웹페이지의 스크롤 상태와 연결하는 방식으로 준비된다.
4. Claude Design 초안은 플레이스홀더와 이동하는 공으로 먼저 구조를 잡고, 이후 각 선수 패널에 프레임 시퀀스를 업로드해 실제 애니메이션처럼 보이도록 반복 수정한다.
5. 최종 완성도는 선수 프레임뿐 아니라 이동하는 축구공의 크기, 대비, 밝기, 회전, 경로를 애니메이션 속 공과 맞추는 세부 보정에서 크게 좌우된다.

🧩 배경과 문제 정의

• 이 영상은 Claude Design만 사용해 FIFA 2026 분위기의 스크롤 기반 축구 랜딩 페이지를 만드는 과정을 다룬다.
• 목표는 흰색의 프리미엄 톤을 가진 3개 섹션 웹사이트이며, 각 섹션에는 메시, 호날두, 네이마르 캐릭터 애니메이션이 배치된다.
• 핵심 문제는 단순히 영상을 페이지에 삽입하는 것이 아니라, 선수 움직임과 축구공 이동을 스크롤 상태에 맞춰 제어하는 인터랙션을 구현하는 데 있다.
• 아래로 스크롤하면 선수 애니메이션이 앞으로 진행되고, 위로 스크롤하면 되감기는 방식이 요구된다.
• 축구공 역시 한 섹션 안에 고정된 장식 요소가 아니라, 페이지 전체를 따라 내려가며 웹사이트의 흐름을 연결하는 핵심 시각 요소로 사용된다.
• 제작 흐름은 Claude Design의 템플릿 선택, 프롬프트 입력, 모델 선택, 이미지·프레임 파일 첨부, 반복 수정 프롬프트를 결합하는 방식으로 진행된다.
• 특히 이미지를 생성하고, 이를 영상으로 만들고, 다시 프레임 시퀀스로 쪼개 Claude Design에 넣는 과정이 이 작업의 중요한 실험 지점이다.
• 후반부에서는 선수 프레임 적용뿐 아니라 축구공의 크기·대비·밝기 불일치를 조정하고, 완성된 결과물을 공유·내보내기·외부 서비스 전송으로 확장하는 흐름까지 보여준다.

🕒 시간순 섹션별 상세정리

1. Claude Design 선택과 새 디자인 기능 확인

• 제작자는 스크롤하면 선수들이 움직이고 축구공이 페이지 전체를 따라 내려가는 축구 웹사이트를 완성 목표로 제시한다 [00:18]
• 전체 제작은 Claude Design을 중심으로 진행되며, 이번 영상은 Claude의 새 디자인 기능을 실제 웹 프로토타입 제작에 적용하는 흐름을 보여준다 [00:33]
• Claude 데스크톱 앱 안에서는 Claude Chat, Claude Co-work, Claude Code에 접근할 수 있지만, 이번 작업의 핵심 도구는 Chat이나 Code가 아니라 Claude Design이다 [00:48]
• 즉, 코드를 직접 작성하는 방식보다 디자인 생성 환경 안에서 프롬프트와 파일 첨부를 반복하며 웹사이트를 구성하는 접근이 선택된다 [01:03]

2. 초기 프롬프트와 프로토타입 생성 설정

• 초기 프롬프트는 흰색 프리미엄 축구 랜딩 페이지를 요구하며, 전체 구조는 3개 섹션으로 설정된다 [01:34]
• 각 섹션에는 텍스트와 선수 애니메이션이 좌우로 교차 배치되어야 하고, 전체적으로 고급스럽고 정돈된 축구 웹사이트 느낌을 목표로 한다 [01:49]
• 핵심 인터랙션은 비디오를 그냥 재생하는 방식이 아니라, 스크롤에 의해 구동되는 애니메이션이다 [01:57]
• 사용자가 아래로 스크롤하면 선수가 앞으로 움직이고, 위로 스크롤하면 애니메이션이 되감기는 식으로 스크롤 방향과 프레임 진행 방향이 연결된다 [02:12]

3. 선수 이미지와 영상 자산 생성

• Claude Design이 웹사이트 초안을 생성하는 동안, 별도로 필요한 자산은 메시, 네이마르, 호날두 3명의 선수 영상이다 [03:07]
• 이 영상들은 최종적으로 웹페이지 안에서 직접 재생되는 것이 아니라, 프레임으로 변환되어 스크롤 상태와 연결될 자산으로 준비된다 [03:22]
• 선수 이미지는 실제 인물 이미지를 그대로 사용하는 대신, 업로드한 이미지와 상세 프롬프트를 기반으로 3D 블렌더풍 캐릭터처럼 생성된다 [03:32]
• 이 단계는 선수별 애니메이션 프레임을 만들기 위한 선행 작업이며, 이후 Claude Design의 각 섹션 패널에 들어갈 시각 자산을 확보하는 과정이다 [03:47]

4. Claude Design 초안 확인과 Messi 프레임 적용

• 첫 프롬프트만으로 생성된 Claude Design 초안은 흰색 기반의 단순한 웹사이트 형태로 나타난다 [08:05]
• 초안에서는 스크롤에 따라 축구공이 아래로 내려가고, 화면의 숫자도 함께 바뀌는 기본 인터랙션이 구현되어 있다 [08:20]
• 다음 작업은 초안의 플레이스홀더 위치에 실제 선수 프레임 시퀀스를 넣는 것이다 [08:30]
• Messi 프레임은 Messi 패널에, Ronaldo 프레임은 Ronaldo 패널에, Neymar 프레임은 Neymar 패널에 들어가야 하므로, 선수별 프레임과 섹션 매칭이 중요해진다 [08:45]

5. Ronaldo·Neymar 프레임 적용과 공 스타일 보정

• 다음 act가 Ronaldo이므로, 제작자는 Ronaldo ZIP 파일을 압축 해제한 뒤 폴더 안의 이미지 프레임을 위에서 아래까지 모두 선택한다 [10:00]
• 선택한 Ronaldo 이미지들은 act two 패널용 프레임 시퀀스로 업로드되며, 해당 섹션에서 스크롤 애니메이션으로 작동하도록 프롬프트가 적용된다 [10:15]
• Neymar도 같은 방식으로 미리 압축을 풀고 이미지 프레임을 선택한다 [10:28]
• 이 프레임들은 act three이자 Neymar 패널에 들어갈 시퀀스로 지정되며, 선수별 섹션에 맞춰 프레임 애니메이션을 연결하는 흐름이 반복된다 [10:43]

6. 축구공 밝기 불일치와 이미지 교체

• 새 프롬프트를 적용한 뒤 축구공의 크기와 대비는 개선되고, 전체적인 크기도 거의 원하는 수준에 가까워진다 [12:12]
• 다만 축구공의 밝기는 선수 애니메이션 안에 등장하는 공과 여전히 완전히 맞지 않아 시각적 불일치가 남는다 [12:27]
• 제작자는 기존 축구공에 필터를 적용해 애니메이션 속 공과 맞추려 하지만, 사용한 원본 이미지 자체가 너무 밝아 CSS 보정만으로는 자연스럽게 맞추기 어렵다고 판단한다 [12:42]
• 이 문제는 단순 스타일 조정이 아니라 원본 이미지의 톤 차이에서 비롯된 것으로 정리되며, 더 어울리는 공 이미지로 교체해야 하는 흐름으로 계속된다 [12:57]

7. 공유·내보내기·외부 전송과 웹사이트 공개 흐름

• 완성된 결과물은 Claude Design의 공유 기능을 통해 작업 공간 구성원에게 전달할 수 있다 [13:31]
• 또한 PDF, PowerPoint, 프로젝트 아키텍처, 독립형 HTML 형식으로 바로 내보낼 수 있어 결과물을 발표 자료나 독립 실행 가능한 웹 파일 형태로 확장할 수 있다 [13:46]
• 결과물은 Claude Code와 Canva로 직접 보낼 수 있으며, 디자인 결과물을 후속 개발이나 편집 작업으로 넘기는 흐름도 제공된다 [14:01]
• 추가 목적지를 선택하면 Adobe, Gmail, Miro, Vercel, Wix 등 여러 외부 서비스로 연결할 수 있어, Claude Design에서 만든 프로토타입을 공유·배포·협업 워크플로로 이어갈 수 있음을 보여주며 영상이 마무리된다 [14:16]

🧾 결론

• 이 영상은 Claude Design이 단순한 정적 목업 도구가 아니라, 프롬프트·파일 첨부·반복 수정으로 상호작용형 웹 프로토타입을 만들 수 있는 제작 환경임을 보여준다.
• 다만 결과물은 Claude Design만으로 즉시 완성되는 형태라기보다, 외부 영상 생성 도구와 프레임 변환 도구를 함께 쓰는 복합 워크플로에 가깝다.
• 가장 중요한 제작 포인트는 “비디오를 웹에 넣는 것”이 아니라, 영상에서 추출한 프레임을 스크롤 진행률에 맞춰 보여 주는 방식이다.
• 완성 후에는 공유, 내보내기, Claude Code·Canva·Vercel·Wix 등 외부 서비스 전송이 가능하다고 설명되지만, 실제 공개 상태와 운영 안정성은 별도 검증이 필요하다.

📈 투자·시사 포인트

• AI 디자인 도구의 경쟁력은 단순 이미지 생성보다, 프롬프트 기반 화면 생성과 실제 인터랙션 프로토타이핑을 얼마나 자연스럽게 연결하느냐로 이동하고 있다.
• 크리에이터와 소규모 제작자는 Claude Design 같은 도구를 활용해 고급 랜딩 페이지 콘셉트를 빠르게 검증할 수 있지만, 고품질 결과에는 여전히 자산 제작·프레임 변환·시각 보정 역량이 필요하다.
• 스포츠, 이벤트, 캠페인형 웹사이트처럼 시각적 몰입감이 중요한 분야에서는 스크롤 기반 애니메이션과 AI 생성 캐릭터 자산의 조합이 활용 가능성이 크다.
• 검증 필요: 영상에서는 Claude Design의 내보내기와 외부 서비스 연동 가능성이 언급되지만, 실제 배포 성능, 반응형 품질, 저작권·초상권 이슈, 브라우저별 동작 안정성은 별도로 확인해야 한다.

⚠️ 불확실하거나 확인이 필요한 부분

• 영상에서 언급된 Claude Design의 템플릿, 내보내기 옵션, 외부 서비스 연동 범위는 제작 당시 화면 기준이므로, 현재 Claude 앱에서도 동일하게 제공되는지는 별도 확인이 필요하다.
• “Opus 4.8”, “Claude Fable 5”처럼 언급된 모델명과 제공 여부는 영상 내 설명 기준이며, 실제 제품 라인업·명칭·사용 가능 여부는 공식 문서나 앱 화면에서 검증해야 한다.
• Higgsfield의 Cance 2.0 O와 Super Computer 기능, 유명 인물 얼굴이 들어간 생성물 차단 여부는 영상의 사용 경험에 기반한 내용이므로 현재 정책과 기능 상태는 확인이 필요하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• Claude Design에서 프로토타입 템플릿을 선택하고, 흰색 프리미엄 축구 랜딩 페이지·3개 섹션·스크롤 기반 선수 애니메이션·페이지 전체를 이동하는 축구공을 포함한 초기 프롬프트를 작성한다.
• 선수별 이미지와 축구공 이미지를 준비하되, 실제 공개용 프로젝트라면 유명 선수와 유사한 자산 사용 가능 여부를 먼저 검토한다.
• 선수별 짧은 영상을 만든 뒤, 각 영상을 프레임 이미지로 변환하고 파일 순서가 스크롤 애니메이션에 맞게 정렬되는지 확인한다.
• Claude Design에 Messi, Ronaldo, Neymar 프레임을 각각 act one, act two, act three 패널에 맞춰 업로드하고, 기존 레이아웃·텍스트·공 이동 경로는 유지하도록 지시한다.

❓ 열린 질문

• Claude Design만으로 만들었다고 볼 수 있는 범위는 어디까지인가? 영상에서는 Claude Design이 중심이지만, 선수 영상 생성과 프레임 변환에는 외부 도구도 함께 사용된다.
• 많은 프레임 이미지를 포함한 웹페이지가 모바일 환경에서도 부드럽게 작동할 수 있는지, 별도의 최적화나 lazy loading이 필요한지는 추가 테스트가 필요하다.
• 실존 축구선수를 연상시키는 캐릭터를 상업용 랜딩 페이지나 공개 웹사이트에 사용할 경우 어떤 법적·플랫폼 정책 리스크가 있는가?