📌 CIAOSMOS: 아방가르드 비주얼 아트 & 브랜딩 하우스 웹사이트
🔹 프로젝트 개요
- 작업 기간: 2026.03 ~ 2026.04
- 작업 범위: 하이엔드 인터랙티브 웹 디자인 및 프론트엔드 개발, 포트폴리오 아카이브 시스템, 커스텀 스크롤 애니메이션 구현
- 사용 도구:
- Frontend: Next.js (App Router), TypeScript, Tailwind CSS
- Creative / UI: React, CSS Modules
- Animation: GSAP (ScrollTrigger), Lenis (Smooth Scroll)
- Backend: Supabase (Contact Form Uplink)
- Deployment: Vercel
🔹 프로젝트 목적
CIAOSMOS는 단순한 에이전시 포트폴리오를 넘어, 오뜨 꾸뛰르(Haute couture) 미학과 급진적인 브랜드 아이덴티티를 융합하는 스튜디오의 철학을 디지털 경험으로 치환한 웹 프로젝트입니다. 패션 필름과 에디토리얼 사진을 주로 다루는 브랜드의 정체성에 맞춰, 넓은 여백과 거대한 텍스트, 그리고 우아한 트랜지션을 통해 브라우저 자체를 하나의 하이엔드 매거진처럼 경험하도록 구축하는 데 목적을 두었습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
- Cinematic Scroll Experience (시네마틱 스크롤 경험)
- Smooth Scroll Integration: Lenis를 도입하여 네이티브 스크롤의 이질감을 없애고, 물리 기반의 부드럽고 묵직한 스크롤 경험을 제공하여 시각적 몰입감을 극대화했습니다.
- Horizontal & Vertical Flow: GSAP ScrollTrigger를 활용하여 "Select Work" 섹션 등에서 수직 스크롤을 수평 이동(Horizontal Scroll)으로 자연스럽게 전환하며 포트폴리오 연도를 탐색할 수 있는 다이내믹한 레이아웃을 구현했습니다.
- Immersive Interaction System (몰입형 인터랙션)
- Subtle Parallax & Reveal: 이미지가 뷰포트에 진입할 때 미세한 패럴랙스(Parallax) 효과와 마스크 리빌(Mask Reveal) 애니메이션을 적용하여 정적인 이미지에 생동감을 부여했습니다.
- Micro-interactions: 마우스 커서의 움직임에 반응하는 커스텀 커서 및 텍스트 호버 시의 미세한 트랜지션을 통해 하이엔드 웹사이트 특유의 정교한 디테일을 살렸습니다.
- Minimalist Data Integration (미니멀리스트 데이터 연동)
- Seamless Contact Form: "Let's craft a visual legacy."라는 슬로건과 함께 제공되는 문의 양식은 불필요한 요소를 배제하고 직관적인 텍스트 필드만 배치했습니다. 입력된 데이터는 Supabase와 연동되어 안정적으로 전송됩니다.
- Optimized Asset Loading: 고해상도의 에디토리얼 사진과 작업물이 다수 포함된 만큼, Next.js의 이미지 최적화 기능과 Lazy Loading을 적용하여 렌더링 성능을 확보했습니다.
🔹 디자인 포인트
- Avant-Garde Typography: 클래식하고 우아한 세리프(Serif) 서체('CIAOSMOS', 'Select Work' 등)를 뷰포트를 가득 채우는 거대한 스케일로 배치하여, 시각적인 압도감과 럭셔리한 무드를 동시에 연출했습니다.
- Editorial Layout: 웜톤의 오프화이트(Off-white) 배경과 딥 블랙(Deep Black)의 텍스트 대비를 베이스로 삼고, 비대칭적인 그리드와 여백(Negative Space)을 적극적으로 활용하여 작품 자체에 온전히 집중할 수 있는 갤러리 환경을 구성했습니다.
- Refined Identity: "Orchestrating the chaos of imagination into cinematic order"라는 브랜드 비전에 걸맞게, 군더더기 없는 미니멀리스트 디자인 스탠스를 유지하면서도 타이포그래피의 자간과 행간을 섬세하게 조율했습니다.
🔹 담당 역할
- Web Designer & Developer:
- 전체적인 하이엔드 미니멀리즘 비주얼 컨셉 도출 및 UI/UX 디자인.
- Next.js 아키텍처 설계 및 프론트엔드 개발.
- GSAP와 Lenis를 활용한 정교한 스크롤 타이밍 및 트랜지션 애니메이션 설계.
- Supabase 연동을 통한 문의 폼(Contact Form) 백엔드 로직 구현.
🔹 주요 화면