브랜드 디자이너 포트폴리오-본문 영역

### 4.3. Brand Making Section (비디오 배경 섹션) - **구조**: `rounded-[3rem]` 둥근 모서리를 가진 대형 컨테이너. `overflow-hidden` 적용. - **배경 (Video Background)**: - 특정 URL의 `.mp4` 컬러플로우 애니메이션 영상을 배경으로 꽉 차게 배치 (`object-cover`). - **주의**: 영상 위에 어두운 블러(Blur)나 투명도(Opacity) 오버레이를 씌우지 않고 영상 원본의 선명한 색감을 100% 그대로 노출. - **텍스트 콘텐츠**: - 라벨: "BRAND MAKING" (`font-mono`, `text-white/60`) - 제목: "웰니스 티 브랜드 런칭" (`text-4xl md:text-5xl`) - 본문: "이 프로젝트는 바쁜 직장인을 위한 웰니스 티 브랜드를 새롭게 런칭하는 가상의 브랜딩 사례입니다. 브랜드의 핵심은 차를 판매하는 것이 아니라, 하루의 리듬을 회복하는 작은 의식을 제안하는 데 있으며..." - **프로젝트 요약 (2단 분할 레이아웃)**: - 좌측 (1.5 비율): 프로젝트 대표 이미지 (`rounded-[2.5rem]`, `aspect-[16/10]`). - 우측 (1 비율): 메타데이터 리스트. - Client: T-O-A - Role: Brand Identity, Naming, Package Design - Timeline: 2023. 09 - 2023. 12 - Output: Brand Guideline, Package, Web Design - (라벨은 `font-mono text-white/40`, 값은 `text-white/80` 적용) ### 4.4. Project Grid Section (프로젝트 카드 그리드) - **구조**: 3단 그리드 (`grid-cols-1 md:grid-cols-3`), 카드 간 간격 `gap-6`. - **UI 구성 (ProjectCard 컴포넌트)**: - 각 카드는 `rounded-[2.5rem]`, 배경색 `bg-white/5`. - 호버 시 옅은 테두리(`border-white/10`) 생성 및 카드가 살짝 위로 떠오르는 애니메이션. - 내부 이미지: `aspect-[4/3]`, 호버 시 부드럽게 스케일 업 (`scale-105`). - 하단 텍스트: 프로젝트 타이틀 (예: "• 브랜드 전용 가이드라인"). - 버튼: "프로젝트 보기" (`rounded-full`, 호버 시 배경색 반전). --- ## 5. 애니메이션 및 인터랙션 요구사항 (Animations) 1. **스크롤 등장 애니메이션 (Framer Motion)**: - 모든 주요 섹션과 텍스트는 화면에 보일 때(whileInView) 투명도 0에서 1로, 아래에서 위로(`y: 20` -> `y: 0`) 부드럽게 등장해야 합니다. 2. **3D 책 넘김 애니메이션 (GSAP + Three.js)**: - 페이지가 넘어갈 때 종이가 휘어지는 곡선(MorphTarget)과 회전(Rotation)이 GSAP Timeline으로 부드럽게 동기화되어야 합니다. 3. **마우스 패럴랙스 (Mouse Parallax)**: - 3D 책 컴포넌트는 마우스 커서의 움직임에 따라 미세하게 X, Y 축으로 회전하며 입체감을 주어야 합니다.