01 — USER INPUT DASHBOARD
유저 입력 변수
반드시 유저가 제공해야 하는 변수들. AI가 대신할 수 없다.
| 변수 | 현재 값 | 설명 |
|---|
| Brand Name | PAPAFLY | 브랜드명 |
| Slogan | Real Money, Real World | 핵심 메시지 |
| Primary Color | #D4AF37 (Gold) | 메인 컬러 |
| Background Color | #040806 | 배경 컬러 |
| Tagline | Built on Gold. Measured in Silver. | 서브 메시지 |
| EST. Date | 2026.01.13 | 설립일 |
02 — COLOR TOKENS
컬러 시스템
--text-secondary
rgba(250,250,248,.7)
03 — SPACING & TYPOGRAPHY
간격 & 타이포그래피
| Token | Value | Usage |
|---|
| --space-xs | 4px | 아이콘 여백 |
| --space-sm | 8px | 요소 간 최소 간격 |
| --space-md | 16px | 기본 간격 |
| --space-lg | 24px | 섹션 내 패딩 |
| --space-xl | 40px | 섹션 간격 |
| --space-2xl | 64px | 큰 섹션 간격 |
| --space-3xl | 100px | 페이지 전체 여백 |
| --text-xs | 10px | 레이블 |
| --text-sm | 12px | 메타 정보 |
| --text-base | 14px | 본문 |
| --text-lg | 16px | 강조 본문 |
| --text-xl | 20px | 서브헤딩 |
| --text-2xl | 26px | 헤딩 |
| --text-3xl | 36px | 큰 헤딩 |
| --text-4xl | 48px | 히어로 타이틀 |
--ease-out
cubic-bezier(0.16, 1, 0.3, 1)
--ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)
04 — FILE STRUCTURE
프로젝트 구조
papafly/
├── index.html
├── assets/
│ ├── css/components.css
│ ├── js/interactive.js
│ ├── js/app.js
│ ├── manifest.json
│ └── icons/
├── about/
│ ├── index.html
│ ├── strategy.html
│ ├── owner.html
│ └── architecture.html
├── brand/
│ ├── philosophy.html
│ ├── design-system.html
│ └── whitepaper.html
├── archive/
│ ├── index.html
│ ├── pipeline-comfyui.html
│ └── purchase-guardrails.html
├── channels/
│ ├── monogatari.html
│ ├── shitate.html
│ ├── coordinate.html
│ └── mekiki.html
├── showroom/
│ ├── index.html
│ └── lookbook/
├── studio/
├── strategy/
├── devlog/
├── docs/
└── philosophy/
05 — DEVELOPMENT LOG
개발 로그
2026-01-15
프로 마감 업그레이드
1차 작업: Inter 폰트 추가, CSS 변수 시스템 확장, 이모지 → SVG 아이콘 전환.
2차 작업: Ambient gradient, 노이즈 텍스처, 골드 펄스 글로우, 명함 카드 floatCard 애니메이션, 3D rotateX 호버, 3겹 그라데이션, 그림자 깊이 강화.
CSS
Typography
Animation
2026-04-23
듀얼 레인 시스템 & 인터랙티브 전환
GSAP + ScrollTrigger + VanillaTilt + Splitting.js 도입. 25개 인터랙티브 UI 태스크 완료.
Discord/YouTube 연동. 모든 페이지 인터랙티브 전환 완료.
GSAP
ScrollTrigger
PWA