Ciaosmos
설명
아방가르드 비주얼 아트·브랜딩 하우스 웹사이트
기간
Mar 2026 - Apr 2026
역할
- 웹 디자이너 & 개발자: 전체 고급 미니멀리즘 비주얼 컨셉 도출 및 UI/UX 디자인 리드.
- 프론트엔드 개발: Next.js 아키텍처 설계 및 전체 프론트엔드 구현.
- 모션 디렉션: GSAP와 Lenis를 활용한 정밀한 스크롤 타이밍 및 전환 애니메이션 설계.
- 백엔드 연동: Supabase를 통한 문의 폼 백엔드 로직 구현.
기술
Next.js (App Router) · TypeScript · Tailwind CSS · CSS Modules
GSAP · ScrollTrigger · Lenis
Supabase
Vercel
프로젝트 목적
"상상의 혼돈을 시네마틱 질서로 조율한다." CIAOSMOS는 단순한 에이전시 포트폴리오를 넘어, 오뜨 꾸뛰르 미학과 급진적 브랜드 아이덴티티의 융합이라는 스튜디오 철학을 디지털 경험으로 번역한 웹 프로젝트입니다. 패션 필름과 에디토리얼 사진에서의 브랜드 아이덴티티에 맞춰, 넉넉한 여백과 대형 타이포그래피, 우아한 전환 효과를 통해 브라우저 자체를 고급 매거진으로 경험할 수 있도록 제작되었습니다.
범위
- · 고급 인터랙티브 웹 디자인 & 프론트엔드 개발
- · 포트폴리오 아카이브 시스템
- · 커스텀 스크롤 애니메이션 구현
주요 기술 특징
시네마틱 스크롤 경험
- · 스무스 스크롤 연동: Lenis가 네이티브 스크롤의 거친 느낌을 제거해 물리 기반의 묵직한 스크롤 경험으로 시각적 몰입감을 극대화합니다.
- · 수직 & 수평 흐름: GSAP ScrollTrigger가 수직 스크롤을 자연스럽게 수평 이동으로 전환하며 포트폴리오 연도를 탐색하는 다이나믹 레이아웃을 구현합니다.
몰입형 인터랙션 시스템
- · 이미지가 뷰포트를 지날 때 미세한 패럴랙스와 마스크 리빌이 걸립니다. 정지된 사진이 움직임과 함께 도착합니다.
- · 마이크로 인터랙션: 마우스 움직임에 반응하는 커스텀 커서와 세밀한 텍스트 호버 전환이 고급 웹사이트 특유의 정교함을 전달합니다.
미니멀리스트 데이터 연동
- · 매끄러운 문의 폼: 'Let's craft a visual legacy.'와 함께하는 문의 폼이 불필요한 요소를 걷어냅니다. Supabase 연동을 통해 제출된 데이터를 안정적으로 전송합니다.
- · 최적화된 에셋 로딩: 다수의 고해상도 에디토리얼 사진에서도 렌더링 성능을 보장하는 Next.js 이미지 최적화와 Lazy Loading이 적용되었습니다.
디자인 포인트
아방가르드 타이포그래피
클래식하고 우아한 세리프 서체를 뷰포트를 가득 채우는 스케일로 배치해 압도감과 럭셔리를 동시에 선사합니다.
에디토리얼 레이아웃
따뜻한 오프화이트 배경에 짙은 블랙 텍스트 대비를 기본으로, 비대칭 그리드와 넉넉한 여백이 작품 자체에 완전한 시선이 집중되는 갤러리 환경을 구성합니다.
세련된 아이덴티티
'상상의 혼돈을 시네마틱 질서로 조율한다'는 브랜드 비전에 충실하게, 미니멀리스트 디자인 기조를 유지하면서 자간과 행간을 섬세하게 조율합니다.
갤러리
클릭하여 확대자주 묻는 질문
3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?
Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.
웹사이트 제작 기간은 얼마나 걸리나요?
랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.
호스팅, 도메인, 서버 비용은 따로 드나요?
SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.
완성 후 제가 직접 내용을 수정할 수 있나요?
관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.