Claude로 3D 인터랙티브 웹사이트 제작하는 7단계 프롬프트 가이드

디지털 크리에이터이자 AI 워크플로우 연구자인 Alexander Inspira IA(@Alex_Inspira)가 Anthropic의 Claude를 활용해 Three.js 및 WebGL 기반 3D 인터랙티브 웹사이트를 단계별로 기획·구현하는 7단계 실전 프롬프트 세트를 공개했습니다.

이미지 출처: X @Alex_Inspira

이번 가이드는 단순한 3D 오브젝트 렌더링에 그치지 않고, 시스템 아키텍처 수립부터 시네마틱 스크롤 텔링, 디자인 토큰, 성능 제약 조건, AI 기반 컴포넌트 개발 분할, Core Web Vitals 최적화까지 프로덕션 웹 개발 전 과정을 7개 전문 역할로 분해해 프롬프트로 체계화한 것이 특징입니다.

1. 3D 웹사이트 전체 시스템 기획

프로젝트 시작 단계에서 정보 구조(IA), 비주얼 아이덴티티, 3D 인터랙션 로드맵, 반응형 설계 및 접근성 전략을 포괄적으로 수립하는 프롬프트입니다.

Actúa como un director creativo de clase mundial, un diseñador de UI/UX galardonado, un experto en Three.js/WebGL y un estratega de conversión. Diseña y desarrolla un sitio web cinematográfico en 3D para [marca/producto] que transmita una experiencia digital premium. Crea la arquitectura de la información, la identidad visual, el sistema de animaciones, las interacciones 3D, las transiciones, los diseños responsivos, la estrategia de accesibilidad y la hoja de ruta para la implementación. Explica claramente el propósito de cada animación e interacción.

• 핵심 역할: 월드클래스 크리에이티브 디렉터, UI/UX 디자이너, Three.js/WebGL 전문가, 전환 전략가
• 산출물: 정보 구조, 비주얼 아이덴티티, 애니메이션 시스템, 3D 인터랙션, 화면 전환, 반응형 레이아웃, 접근성 전략, 구현 로드맵 및 각 인터랙션의 명확한 목적 설명

2. 시네마틱 내러티브 설계

스크롤 기반 카메라 워킹, 조명 효과, 시차(Parallax), 파티클 시스템을 결합해 브랜드 스토리를 전달하는 시네마틱 경험 설계 프롬프트입니다.

Actúa como un diseñador de experiencias digitales de primer nivel. Convierte mi sitio web en un recorrido cinematográfico inmersivo utilizando entornos 3D, narrativa basada en el desplazamiento (scroll), escenas interactivas, movimientos de cámara, efectos de iluminación, parallax, sistemas de partículas y transiciones de alta calidad. Explica cómo cada escena guía al usuario hacia la siguiente sección manteniendo la claridad y la facilidad de uso. Restricción: utiliza únicamente una narrativa con propósito, optimizada para aumentar el engagement sin saturar al usuario.

• 핵심 역할: 최고 수준의 디지털 경험 디자이너
• 구성 요소: 3D 환경, 스크롤 기반 내러티브, 인터랙티브 씬, 카메라 무빙, 조명 연출, 패럴랙스, 파티클 시스템, 고품질 트랜지션
• 명시적 제약 조건: 사용자에게 과도한 피로감을 주지 않으면서 인게이지먼트를 높이도록 최적화된 목적 있는 내러티브만 사용할 것

3. 프리미엄 디자인 시스템 구축

타이포그래피, 스페이싱, 컬러 팔레트, 그리드, 컴포넌트 라이브러리 및 글래스모피즘 효과를 포함하는 일관된 럭셔리 디자인 토큰 구축 프롬프트입니다.

Actúa como un diseñador de productos galardonado. Crea un sistema de diseño de lujo para mi sitio web que incluya tipografía, espaciado, paleta de colores, cuadrículas, efectos de glassmorphism (cuando sean apropiados), biblioteca de componentes, navegación, botones, tarjetas, formularios, iconografía, guías de animación, comportamiento responsive y estándares de accesibilidad. Asegúrate de que cada decisión visual refuerce una identidad de marca premium. Restricción: crea un sistema escalable, consistente y fácil de mantener.

• 핵심 역할: 수상 경력의 프로덕트 디자이너
• 시스템 스펙: 타이포그래피, 간격 규칙, 컬러 팔레트, 그리드 시스템, 글래스모피즘 효과, 내비게이션·버튼·카드·폼 등 컴포넌트 라이브러리, 아이콘, 애니메이션 가이드, 반응형 규칙, 접근성 표준
• 명시적 제약 조건: 확장 가능하고 일관되며 유지보수가 용이한 시스템으로 설계할 것

4. 3D 인터랙션 및 모션 설계

히어로 섹션 애니메이션, 커서 인터랙션, 3D 오브젝트 제어, 호버 상태, 로딩 화면, 스크롤 트리거 이벤트 등 브라우저 런타임 인터랙션 전반을 정의하는 프롬프트입니다.

Actúa como un ingeniero web senior especializado en experiencias 3D y diseño de movimiento. Diseña un sistema completo de interacciones que incluya animaciones del hero, efectos del cursor, interacción con objetos, estados hover, pantallas de carga, transiciones entre escenas, movimientos de cámara, microinteracciones y eventos activados por el desplazamiento. Explica cuándo debe activarse cada animación y cómo mejora la experiencia del usuario. Restricción: las interacciones deben ser fluidas y ofrecer un alto rendimiento.

• 핵심 역할: 3D 경험 및 모션 디자인 전문 시니어 웹 엔지니어
• 설계 범위: 히어로 애니메이션, 커서 효과, 오브젝트 상호작용, 호버 상태, 로딩 화면, 씬 간 전환, 카메라 무빙, 마이크로 인터랙션, 스크롤 트리거 이벤트
• 명시적 제약 조건: 모든 인터랙션은 프레임 저하 없이 부드럽고 높은 런타임 성능을 유지할 것

5. AI 어시스턴트 개발 스프린트 분할

전체 웹사이트 개발 과정을 LLM 및 AI 코딩 도구로 단계별 구현할 수 있도록 섹션별 태스크와 테스트 절차로 모듈화하는 프롬프트입니다.

Actúa como un ingeniero de software experto en IA. Divide el desarrollo del sitio web en tareas adecuadas para trabajar con asistencia de IA. Para cada sección, proporciona prompts de implementación, una estructura reutilizable de componentes, procedimientos de prueba, requisitos responsive, verificaciones de accesibilidad y recomendaciones de optimización del rendimiento. Restricción: utiliza un flujo de trabajo listo para producción y optimizado para desarrollar de forma eficiente sin sacrificar la calidad del código.

• 핵심 역할: AI 전문 소프트웨어 엔지니어
• 모듈 분할 항목: 섹션별 AI 구현 프롬프트, 재사용 가능한 컴포넌트 아키텍처, 테스트 절차, 반응형 요구사항, 접근성 검증 체크리스트, 성능 최적화 권장안
• 명시적 제약 조건: 코드 품질을 타협하지 않으면서 효율적으로 개발할 수 있는 프로덕션 레디 워크플로우를 사용할 것

6. 고전환 랜딩 페이지 구성

인터랙티브 3D 비주얼과 제품 기능 소개, 고객 증거(Social Proof), 가격표, FAQ 및 CTA를 결합해 실제 전환율을 극대화하는 카피라이팅 및 레이아웃 프롬프트입니다.

Actúa como un director creativo y copywriter especializado en conversión. Crea una landing page premium que combine imágenes cinematográficas con mensajes persuasivos. Incluye una sección principal interactiva (hero), narrativa del producto, demostraciones de funciones, prueba social, precios, preguntas frecuentes y llamadas a la acción potentes. Recomienda en qué partes las animaciones deben mejorar la comprensión del usuario sin distraer del mensaje. Restricción: utiliza únicamente estrategias de marketing honestas.

• 핵심 역할: 전환 전문 크리에이티브 디렉터 겸 카피라이터
• 페이지 구성: 인터랙티브 히어로 섹션, 제품 내러티브, 기능 데모, 소셜 프루프, 가격 책정표, FAQ, 강력한 CTA
• 명시적 제약 조건: 기만적 요소를 배제한 정직한 마케팅 전략만을 사용할 것

7. 성능 최적화 및 접근성 검증

Core Web Vitals 지표, 지연 로딩(Lazy Loading), 에셋 최적화, 구조화 데이터, SEO, 캐싱 및 배포 전 QA 체크리스트를 완성하는 프롬프트입니다.

Actúa como un especialista en rendimiento web y accesibilidad. Optimiza mi sitio web interactivo para cumplir con Core Web Vitals, renderizado responsive, carga diferida (lazy loading), optimización de imágenes, estándares de accesibilidad, SEO, datos estructurados, analítica, almacenamiento en caché y despliegue. Crea una lista de verificación completa para el control de calidad antes del lanzamiento. Restricción: prioriza siempre el rendimiento sin sacrificar la experiencia premium.

• 핵심 역할: 웹 성능 및 접근성 스페셜리스트
• 최적화 및 QA 영역: Core Web Vitals, 반응형 렌더링, 레이지 로딩, 이미지 최적화, 웹 접근성 표준, SEO 메타태그, 구조화 데이터(Schema), 분석 도구 연동, 캐싱 전략, 런칭 전 QA 체크리스트
• 명시적 제약 조건: 프리미엄 사용자 경험을 유지하면서도 항상 최우선으로 런타임 성능을 확보할 것

원문 출처

• Alexander Inspira IA 공식 X (@Alex_Inspira): 7 Prompts para crear sitios web animados en 3D con Claude