📌 Atelier Varga: 하이엔드 에디토리얼 & 디지털 경험 웹사이트
🔹 프로젝트 개요
- 작업 기간: 2026.03 ~ 2026.04
- 작업 범위: 하이엔드 인터랙티브 웹 디자인 및 프론트엔드 개발, 에디토리얼 레이아웃 구현, 다이내믹 호버 인터랙션 구축
- 사용 도구:
- Frontend: Next.js (App Router), TypeScript, Tailwind CSS
- Creative / UI: React, CSS Modules
- Animation: GSAP (ScrollTrigger), Lenis (Smooth Scroll)
- Backend: Headless CMS (데이터 관리용) / Supabase
- Deployment: Vercel
🔹 프로젝트 목적
"Editorial digital experiences for culture and luxury brands (문화 및 럭셔리 브랜드를 위한 에디토리얼 디지털 경험)."
Atelier Varga(Elias Varga)의 시니어 크리에이티브 파트너로서의 역량을 보여주는 개인 포트폴리오 웹사이트입니다. 단순한 작업물 나열을 넘어, 마치 한 권의 하이엔드 패션 매거진(Editorial Issue)을 읽는 듯한 깊이 있는 디지털 경험을 제공하는 데 중점을 두었습니다. 시각적 절제미와 세밀한 인터랙션을 통해 럭셔리 브랜드와 문화 예술 프로젝트에 걸맞은 우아하고 신뢰감 있는 브랜드 정체성을 확립하는 것이 핵심 목표입니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
- Editorial Scroll Experience (에디토리얼 스크롤 경험)
- Smooth Scrolling & Parallax: Lenis를 활용한 물리 기반의 부드러운 스크롤 환경을 구축하고, GSAP ScrollTrigger를 연계하여 텍스트와 이미지가 뷰포트에 진입할 때 묵직하고 우아하게 나타나는 트랜지션을 구현했습니다.
- Loading Sequence: 웹사이트 진입 시 "PREPARING EDITORIAL ISSUE"라는 타이포그래피 시퀀스를 배치하여, 단순한 로딩이 아닌 작품을 감상하기 전의 기대감을 조성하는 시네마틱한 연출을 적용했습니다.
- Dynamic Hover Interactions (다이내믹 호버 인터랙션)
- Interactive List & Reveal: 'E-V Insights' 섹션의 리스트 호버 시, 우측 빈 공간에 관련 이미지가 부드럽게 페이드인되며 나타나는 기능(Image Reveal on Hover)을 구현하여 텍스트 위주의 UI에 생동감을 부여했습니다.
- Custom Magnetic Cursor: 마우스 커서의 움직임에 반응하는 커스텀 커서를 적용하여, 프로젝트 썸네일이나 링크 위를 지날 때 직관적인 시각적 피드백(Micro-interaction)을 제공합니다.
- Seamless Page Transitions (매끄러운 페이지 전환)
- Project Flow: 'Fringe Study'에서 'Shadow Silhouette' 등 다음 프로젝트로 넘어가는 하단 네비게이션 영역을 어두운 배경과 세련된 타이포그래피로 구성하여, 몰입감이 깨지지 않고 자연스럽게 다음 서사로 이어지도록 라우팅 애니메이션을 설계했습니다.
🔹 디자인 포인트
- Cinematic Blur & Monotone Aesthetics: 히어로 섹션(메인 화면)에 몽환적인 모션 블러(Motion Blur)가 적용된 흑백 비주얼을 사용하여 아방가르드한 무드를 연출했으며, 전반적으로 웜톤의 오프화이트(Off-white)와 딥 블랙(Deep Black)을 매치하여 고급스러움을 강조했습니다.
- Refined Typography & Contrast: 세련된 세리프(Serif) 서체와 모던한 산세리프(Sans-serif) 서체를 교차 배치하여 시각적 깊이를 더했습니다. 특히 푸터(Footer) 영역에는 칠흑 같은 배경 위에 강렬한 레드 컬러로 "Atelier Varga"를 거대하게 배치하여 강렬한 여운(Visual Legacy)을 남깁니다.
- Negative Space & Grid System: 여백(Negative Space)을 극대화한 비대칭 그리드 레이아웃을 채택하여, "Need a senior creative partner?"와 같은 카피라이팅과 각 프로젝트 이미지가 하나의 예술 작품처럼 독립적으로 호흡할 수 있도록 갤러리 뷰를 구성했습니다.
🔹 담당 역할
- Web Designer & Developer:
- 에디토리얼 매거진 컨셉 기반의 전반적인 UI/UX 디자인 및 비주얼 아트 디렉션.
- Next.js 프론트엔드 환경 구축 및 컴포넌트 최적화.
- GSAP 및 Lenis를 활용한 고급 스크롤 애니메이션 및 호버 리빌(Hover Reveal) 인터랙션 구현.
- 포트폴리오 리스트 및 인사이트(블로그) 데이터 렌더링 구조 설계.
🔹 주요 화면