2026Branding

Ciaosmos

설명

Avant-Garde Visual Art & Branding House Website

기간

Mar 2026 - Apr 2026

역할

웹 디자이너 & 개발자: 전체 고급 미니멀리즘 비주얼 컨셉 도출 및 UI/UX 디자인 리드.
프론트엔드 개발: Next.js 아키텍처 설계 및 전체 프론트엔드 구현.
모션 디렉션: GSAP와 Lenis를 활용한 정밀한 스크롤 타이밍 및 전환 애니메이션 설계.
백엔드 연동: Supabase를 통한 문의 폼 백엔드 로직 구현.

기술

Frontend

Next.js (App Router) · TypeScript · Tailwind CSS · CSS Modules

Animation

GSAP · ScrollTrigger · Lenis

Backend

Supabase

Deployment

Vercel

프로젝트 목적

"상상의 혼돈을 시네마틱 질서로 조율한다." CIAOSMOS는 단순한 에이전시 포트폴리오를 넘어, 오뜨 꾸뛰르 미학과 급진적 브랜드 아이덴티티의 융합이라는 스튜디오 철학을 디지털 경험으로 번역한 웹 프로젝트입니다. 패션 필름과 에디토리얼 사진에서의 브랜드 아이덴티티에 맞춰, 넉넉한 여백과 대형 타이포그래피, 우아한 전환 효과를 통해 브라우저 자체를 고급 매거진으로 경험할 수 있도록 제작되었습니다.

범위

· 고급 인터랙티브 웹 디자인 & 프론트엔드 개발
· 포트폴리오 아카이브 시스템
· 커스텀 스크롤 애니메이션 구현

주요 기술 특징

시네마틱 스크롤 경험

· 스무스 스크롤 연동: Lenis가 네이티브 스크롤의 거친 느낌을 제거해 물리 기반의 묵직한 스크롤 경험으로 시각적 몰입감을 극대화합니다.
· 수직 & 수평 흐름: GSAP ScrollTrigger가 수직 스크롤을 자연스럽게 수평 이동으로 전환하며 포트폴리오 연도를 탐색하는 다이나믹 레이아웃을 구현합니다.

몰입형 인터랙션 시스템

· 서틀 패럴랙스 & 리빌: 이미지가 뷰포트에 진입할 때 마이크로 패럴랙스와 마스크 리빌 애니메이션이 적용돼 정적인 이미지에 생동감을 불어넣습니다.
· 마이크로 인터랙션: 마우스 움직임에 반응하는 커스텀 커서와 세밀한 텍스트 호버 전환이 고급 웹사이트 특유의 정교함을 전달합니다.

미니멀리스트 데이터 연동

· 매끄러운 문의 폼: 'Let\'s craft a visual legacy.'와 함께하는 문의 폼이 불필요한 요소를 걷어냅니다. Supabase 연동을 통해 제출된 데이터를 안정적으로 전송합니다.
· 최적화된 에셋 로딩: 다수의 고해상도 에디토리얼 사진에서도 렌더링 성능을 보장하는 Next.js 이미지 최적화와 Lazy Loading이 적용되었습니다.