Flank의 디자인이란?
Design on the Flank는 Three.js, WebGL, GSAP를 사용해 Framer 코드 컴포넌트를 만드는 AI 스킬입니다. Codex, Claude, Claude Code 또는 ChatGPT와 함께 사용하면 작성한 설명이나 시각적 레퍼런스를 바탕으로 3D 장면, 셰이더 효과, 스크롤 기반 애니메이션, 사용자 지정 상호작용을 만들 수 있습니다.
생성된 각 컴포넌트는 Framer에 복사해 사용할 수 있는 완전한 TSX 파일로 제공됩니다. 컴포넌트 설정은 Framer의 Properties 패널에 노출되므로 코드를 수정하지 않고도 콘텐츠, 색상, 이미지, 모션 매개변수를 변경할 수 있습니다.
주요 기능
- 3D 그래픽: 제품 장면, 파티클 시스템, 머티리얼, 조명, 마우스 또는 터치 상호작용을 만듭니다.
- WebGL 효과: 이미지 왜곡, 리플, 전환, 사용자 지정 셰이더 효과를 구현합니다.
- GSAP 모션: 타임라인, 텍스트 효과, 전환 시퀀스, 스크롤 위치에 연동되는 애니메이션을 사용합니다.
- Framer 통합: Framer에서 직접 사용할 수 있는 반응형 레이아웃, Property Controls, 컴포넌트를 생성합니다.
- 컴포넌트 편집: 요청 범위를 벗어난 설정은 유지하면서 기존 컴포넌트를 확장하거나 문제를 수정합니다.
AI 플랫폼 선택
이 프로젝트는 여러 AI 워크플로를 지원합니다. 이미 사용 중인 도구에 맞는 방식을 선택하세요.
- Codex: AI에게 스킬 설치를 요청하세요. Codex 설치 가이드를 참고하세요.
- Claude: 스킬 패키지를 다운로드해 Claude의 Skills 섹션에 추가하세요. Claude 설치 가이드를 참고하세요.
- Claude Code: 작업 환경에 스킬을 설치하도록 AI에게 요청하세요. Claude Code 가이드를 따르세요.
- ChatGPT: 시작용 지식 파일을 다운로드해 대화에 첨부하세요. ChatGPT 가이드를 참고하세요.
Codex로 스킬 설치하기
가장 빠른 설정 방법은 저장소에서 직접 스킬을 설치하도록 Codex에 요청하는 것입니다.
Cài skill Design on the Flank từ https://github.com/Chien1618/design-on-the-flank/tree/main/skills/design-on-the-flank설치가 완료되면 새 대화를 시작하고 만들고 싶은 Framer 컴포넌트를 설명하세요. 위 요청은 프로젝트 README에 맞춰 베트남어로 작성되었지만, 동일한 워크플로를 원하는 언어에 맞게 적용할 수 있습니다.
ChatGPT에서 지식 파일 사용하기
ChatGPT에서는 시작용 지식 파일을 대화에 첨부한 다음 원하는 컴포넌트를 설명하세요. Framer에 노출하고 싶은 시각적 동작, 상호작용 모델, 설정을 포함하세요.
ChatGPT가 추가 문서를 요청하거나 연결된 리소스를 열 수 없는 경우, 요청된 파일을 다운로드해 같은 대화에 첨부하세요. 프로젝트에는 자세한 ChatGPT 가이드가 제공됩니다.
단계별로 Framer 컴포넌트 만들기
- 원하는 결과를 설명하세요. 시각적 효과, 사용자 상호작용, Framer에서 조정할 수 있어야 하는 매개변수를 설명하세요. 레퍼런스 이미지, 동영상 또는 기존 코드도 제공할 수 있습니다.
- 전체 코드를 요청하세요. AI에게 완전한 TSX 파일을 요청하거나, 컴포넌트에 추가 리소스가 필요한 경우 전체 코드 스캐폴드를 요청하세요.
- 코드를 Framer로 옮기세요. Framer 코드 컴포넌트를 만들고, 샘플 콘텐츠를 생성된 코드로 교체한 다음 페이지에 컴포넌트를 추가하세요. 자세한 과정은 Framer 통합 가이드를 참고하세요.
- 사용자 지정 및 테스트를 진행하세요. Properties 패널에서 노출된 설정을 조정한 다음 Preview를 열어 애니메이션, 스크롤, 마우스 입력, 터치 입력, 반응형 동작을 테스트하세요.
효과적인 프롬프트 작성하기
좋은 프롬프트는 필요한 외관과 컨트롤을 모두 설명합니다. 컴포넌트의 역할, 애니메이션 동작, 상호작용 모델, Properties에서 편집할 수 있어야 하는 값을 구체적으로 지정하세요.
예를 들어 다음과 같이 3D 히어로 섹션을 요청할 수 있습니다.
Dùng Design on the Flank tạo hero sản phẩm 3D cho Framer, chuyển góc nhìn theo cuộn và cho phép chỉnh model, ánh sáng, nội dung trong Properties.영어로 같은 요청을 작성하면 Framer용 3D 제품 히어로, 스크롤에 따라 변하는 카메라 각도, Properties에서 편집할 수 있는 모델, 조명, 콘텐츠 설정을 요청하게 됩니다. 프로젝트의 샘플 프롬프트 가이드에서 추가 예시를 확인할 수 있습니다.
외부 에셋 사용하기
일부 컴포넌트에는 3D 모델, 이미지 또는 기타 비공개 데이터가 필요합니다. 이 경우 관련 에셋을 AI에 제공하고 생성된 코드에 포함된 설정 지침을 따르세요. 필요한 리소스가 구성되기 전까지는 에셋이 필요한 컴포넌트가 작동한다고 가정하지 마세요.
컴포넌트를 Framer에 추가한 후에는 생성된 코드에서 노출한 설정에 Properties를 사용하세요. 컴포넌트에 따라 콘텐츠, 색상, 이미지, 모션 매개변수 등이 포함될 수 있습니다.
고급 팁
상호작용을 정확하게 설명하세요
Three.js 및 WebGL 컴포넌트의 경우 마우스, 터치, 스크롤 위치 또는 입력 조합에 반응해야 하는지 명확히 하세요. 생성된 애니메이션이 의도한 동작과 일치하도록 효과가 어떻게 시작하고, 변화하며, 끝나야 하는지 설명하세요.
편집 가능한 설정과 구현 세부 정보 분리
Framer의 Properties 패널에서 사용할 수 있어야 하는 값을 AI에 알려주세요. 이렇게 하면 구현은 TSX 컴포넌트 내부에 유지하면서 콘텐츠와 시각적 매개변수를 조정할 수 있습니다.
편집할 때 기존 구성 유지
AI에 기존 컴포넌트 수정을 요청할 때는 범위에 포함되는 기능이나 버그를 명확히 밝히고, 관련 없는 설정은 유지하도록 요청하세요. Design on the Flank는 요청한 변경 사항과 무관한 구성을 바꾸지 않고 컴포넌트를 확장하거나 문제를 수정할 수 있도록 지원합니다.
Preview에서 테스트
Framer Preview를 사용해 반응형 레이아웃, 스크롤 전환, 포인터 상호작용, 터치 동작, 에셋 로딩을 확인하세요. 변경이 필요하면 관찰한 문제와 원하는 결과를 후속 요청에 설명하세요.
문제 해결 및 문서
일반적인 문제는 프로젝트의 문제 해결 가이드와 자주 묻는 질문을 참고하세요. 문서에는 생성된 코드를 Framer로 옮기는 단계별 가이드도 포함되어 있습니다.
Design on the Flank에는 Framer Labs의 Framer 및 Three.js 지식과 GreenSock의 공식 GSAP 기술이 반영되어 있습니다. 사용하기 전에 프로젝트의 이용 약관과 서드파티 저작자 표시 정보를 확인하세요.
결론
Design on the Flank는 Three.js, WebGL, GSAP를 활용해 Framer Code Components를 제작할 수 있는 실용적인 AI 지원 워크플로를 제공합니다. 스킬을 설치하거나 지식 파일을 연결하고, 원하는 경험을 설명한 다음, 생성된 TSX를 Framer에 복사하고 Properties 패널과 Preview를 통해 결과를 다듬으세요.