Awesome Opus 5.5 Videos란?
Awesome Opus 5.5 Videos는 Claude Opus 5.5로 제작된 바이럴 동영상의 엄선된 모음입니다. 각 프로젝트는 Claude에게 애니메이션을 코드로 작성하도록 요청해 제작되었으며, HTML, Canvas, SVG, Three.js, GSAP, GLSL, WebGL, Web Audio, 파티클 등의 기술을 사용합니다.
저장소에는 prompts/ 디렉터리와 data/videos.json에 282개의 프롬프트가 포함되어 있습니다. README에는 각기 다른 프롬프트당 하나의 예시로 100개 항목이 소개되어 있으며, 모든 항목은 제작자의 원본 게시물로 연결됩니다.
설치하고 가져와 사용하는 소프트웨어 라이브러리가 아닙니다. 대신 실용적인 프롬프트 갤러리로, 예시를 선택하고 프롬프트를 복사한 뒤 자신이 사용하는 AI 코딩 에이전트에 비슷한 경험을 만들어 달라고 요청할 수 있습니다.
Skillry에서 282개 동영상 전체와 실시간 리메이크를 나란히 감상하세요.
창작 카테고리별 모음 살펴보기
주요 예시는 네 가지 그룹으로 구성되어 있습니다. 원하는 시각적 스타일이나 상호작용 유형부터 쉽게 탐색할 수 있습니다.
- 모션 그래픽: 애니메이션 시각 구성에 기반한 58개 예시.
- 설명형 콘텐츠: 애니메이션으로 아이디어를 전달하는 16개 예시.
- 3D 장면: 브라우저 기반 3차원 시각 효과를 사용하는 14개 예시.
- 게임 및 인터랙티브: 사용자 입력에 반응하거나 작은 플레이 가능한 경험처럼 작동하는 12개 예시.
소개된 구현은 가벼운 Canvas 및 SVG 실험부터 Three.js, GSAP, GLSL, WebGL, Web Audio, AI 생성 이미지, 파티클 시스템을 활용하는 프로젝트까지 다양합니다. 각 항목 옆에 표시된 기술 라벨을 참고하면 적절한 시작점을 선택하는 데 도움이 됩니다.
저장소 설정하기
프롬프트를 살펴보기 위해 패키지를 설치할 필요는 없습니다. 검색하거나 참고 자료를 저장하거나 구조화된 동영상 데이터를 확인하려는 경우에는 로컬 클론이 유용합니다.
- GitHub 저장소를 컴퓨터에 클론합니다.
- 편집기에서 저장소 폴더를 엽니다.
- 개별 Markdown 프롬프트 파일이 있는
prompts/디렉터리를 살펴봅니다. - 전체 모음을 구조화된 데이터로 다루려면
data/videos.json을 엽니다.
git clone <repository-url>
cd <repository-directory>
README에는 필수 런타임, 의존성 설치 명령 또는 로컬 애플리케이션 서버가 명시되어 있지 않습니다. 이 모음은 주로 프롬프트를 읽고 연결된 예시를 따라 하기 위한 것입니다. 생성된 프로젝트가 외부 라이브러리나 브라우저 API를 사용하는 경우, 해당 프로젝트에 필요한 설정 방법을 Claude에게 포함해 달라고 요청하세요.
프롬프트 사용 방법
각 주요 항목에는 Prompt라는 링크가 있습니다. 원하는 애니메이션 유형에 맞는 예시를 선택한 다음 저장소에서 해당 프롬프트 파일을 엽니다.
- 모션 그래픽, 설명형 콘텐츠, 3D 장면 또는 인터랙티브 프로젝트와 같은 카테고리를 선택합니다.
Canvas,SVG,GSAP,Three.js등의 기술 라벨을 확인합니다.prompts/에 있는 연결된 Markdown 파일을 엽니다.- 프롬프트를 Claude Opus 5.5 또는 선호하는 코딩 에이전트에 복사합니다.
- 에이전트에게 프로젝트 파일을 생성하고 실행 방법을 설명해 달라고 요청합니다.
- 완성된 HTML 프로젝트를 브라우저에서 열고 결과를 반복해서 개선합니다.
예를 들어 Canvas 예시와 연결된 프롬프트 파일은 브라우저 애니메이션의 출발점으로 활용할 수 있습니다. 시각적 아이디어만 복사하기보다 렌더링 방식, 움직임, 시각적 분위기, 상호작용, 기술적 제약 등 프롬프트의 중요한 요구 사항을 유지하세요. 그런 다음 주제나 스타일을 바꾸어 자신만의 결과물을 만드세요.
프롬프트 하나로 시작해 정확히 복사하고, 생성된 결과를 실행한 뒤 짧은 후속 요청으로 수정하세요.
반복 작업 예시
실용적인 작업 흐름은 다음과 같습니다.
- 선택한 콘셉트를 독립 실행형 HTML 파일로 구현해 달라고 Claude에게 요청합니다.
- 최신 브라우저에서 파일을 실행하고 애니메이션이 올바르게 렌더링되는지 확인합니다.
- 색상 팔레트 변경, 전환 속도 조정, 새로운 상호작용 추가처럼 한 가지 변경 사항을 요청합니다.
- 다음 변경을 요청하기 전에 수정된 버전을 다시 테스트합니다.
- 성공한 버전은 별도로 저장하여 반복 결과를 비교할 수 있게 합니다.
프로젝트가 특정 기술에 의존한다면 요청에 이를 명시하세요. 예를 들어 참조 항목에 Canvas라고 표시되어 있으면 Canvas 구현을 요청하고, 3D 장면을 사용하는 참조라면 Three.js를 요청합니다. 이렇게 하면 생성된 결과가 원본 예시와 일치합니다.
기술 라벨 이해하기
Canvas
Canvas 예제는 브라우저 캔버스에 직접 그래픽을 그리며, 파티클, 절차적 애니메이션, 프레임 단위 모션에 유용한 선택인 경우가 많습니다.
SVG
SVG 예제는 확장 가능한 벡터 도형으로 시각적 요소를 구성합니다. 기하학적 구성, 다이어그램, 선명한 형태가 필요한 애니메이션에 적합합니다.
GSAP
GSAP는 타임라인, 전환, 움직임을 조율하기 위해 전용 애니메이션 라이브러리를 사용하는 예제에 표시됩니다.
Three.js, WebGL 및 GLSL
이 라벨은 더 고급 렌더링 방식을 나타냅니다. Three.js는 3D 장면을 위한 JavaScript 프레임워크를 제공하며, WebGL과 GLSL은 저수준 GPU 가속 그래픽 및 셰이더 효과를 지원합니다.
Web Audio 및 파티클
Web Audio 예제는 시각적 요소를 브라우저의 오디오 기능과 연결합니다. 파티클 예제는 필드, 궤적, 폭발과 같은 효과를 만드는 작은 움직이는 요소들의 모음에 중점을 둡니다.
더 나은 결과를 위한 고급 팁
- 저장소를 프롬프트 라이브러리로 활용하세요: 다른 시각적 요소를 만들 계획이더라도 하나를 선택하기 전에 여러 프롬프트를 비교하세요.
- 기술 라벨을 따르세요: 의도한 프로젝트의 구현 방식과 일치하는 예제로 시작하세요.
- 완전히 실행 가능한 결과를 요청하세요: 단편적인 코드가 아니라 필요한 모든 코드와 명확한 브라우저 사용 방법을 Claude에 제공해 달라고 요청하세요.
- 작은 단계로 반복하세요: 시각적 변경, 상호작용 변경, 성능 개선을 서로 다른 요청으로 나누세요.
- 비교를 위해 원본 프롬프트를 보관하세요: 수정한 버전을 원본 프롬프트와 함께 저장하면 어떤 변경 사항이 결과에 영향을 미쳤는지 파악할 수 있습니다.
- 소스 링크를 확인하세요: 모든 주요 항목은 제작자의 원본 게시물로 연결되므로 프로젝트에 대한 추가 정보를 확인할 수 있습니다.
- 구조화된 데이터로 탐색하세요: 강조 표시된 예제뿐 아니라 전체 282개 항목을 대상으로 작업해야 할 때는
data/videos.json을 검색하세요. - 브라우저 권한을 테스트하세요: 오디오, 사용자 입력 또는 고급 그래픽을 사용하는 프로젝트는 브라우저 권한과 하드웨어에 따라 다르게 작동할 수 있습니다.
크레딧 및 원본 작업
이 컬렉션은 주요 영상 제작자들의 공로를 표시하고 원본 게시물로 연결합니다. 아이디어나 프롬프트를 재사용할 때는 원본 항목을 검토하고 적절한 출처 표시를 유지하세요. 이 저장소는 탐색 및 학습을 위한 자료이며, 개별 영상의 권리는 각 제작자에게 있습니다.
전체 탐색 환경을 이용하려면 Skillry 갤러리를 사용하거나 저장소에서 프롬프트 파일을 직접 살펴보세요.
결론
Awesome Opus 5.5 Videos는 프롬프트 기반 창의적 코딩을 실습하며 배울 수 있는 방법을 제공합니다. 카테고리를 둘러보고 구현 방식을 선택한 다음 prompts/에서 프롬프트를 복사하여 Claude Opus 5.5에 실행 가능한 브라우저 경험을 생성해 달라고 요청하세요. Canvas, SVG, Three.js, GLSL, GSAP, Web Audio 등을 아우르는 282개의 프롬프트를 통해 이 컬렉션은 나만의 애니메이션과 인터랙티브 실험을 시작할 수 있는 다양한 출발점을 제공합니다.