L'ART DE LA
설명
Brutalist Architecture & Art Studio
기간
Dec 2025 - Jan 2026
역할
- 컨셉 & 아이덴티티: L\'ART DE LA의 브랜드 철학을 시각화하는 '모던 브루탈리즘' 컨셉 도출. 프랑스어 기반 메뉴명(Étudier, Réaliser 등)과 타이포그래피의 조화를 고려한 레이아웃 설계.
- 비주얼 디자인: 대형 타이포그래피와 이미지의 균형을 잡는 반응형 레이아웃 설계. 명확한 정보 위계를 갖춘 비대칭 그리드 시스템 구축.
- 인터랙티브 개발: GSAP를 활용한 고수준 스크롤 인터랙션 및 텍스트 애니메이션 구현. 이미지 최적화 및 레이지 로딩 적용. 다양한 기기에서 크로스 브라우저 및 성능 최적화.
기술
React.js · Next.js · TypeScript · Tailwind CSS
GSAP · ScrollTrigger · Lenis · WebGL
Sanity.io
Figma · Vercel
프로젝트 목적
"디지털 모뉴멘탈리즘." 단순한 정보 전달을 넘어, 웹사이트 자체가 '현대 미술 박물관'처럼 느껴지도록 설계했습니다. 평면 화면에 깊이와 구조적 미학을 더해, 'L'ART DE LA'가 추구하는 예술과 건축 사이의 경계를 디지털 공간으로 확장했습니다. • 아키텍처럴 레이아웃: 건축 도면을 보는 것과 같은 구조적 그리드와 레이아웃 디자인. • 키네틱 타이포그래피: 텍스트를 단순한 정보가 아닌, 공간을 점유하는 조각적 요소로 활용. • 매끄러운 흐름: 스크롤에 반응하는 유기적으로 연결된 콘텐츠 경험(내러티브) 제공.
범위
- · 전체 UI/UX 디자인
- · 인터랙티브 웹 개발
- · 브랜드 아이덴티티 확립
- · 인터랙션 구현
- · CMS 구축
주요 기술 특징
아키텍처럴 레이아웃
- · 건축 도면을 보는 것 같은 구조적 그리드와 레이아웃 디자인.
키네틱 타이포그래피
- · 텍스트를 단순한 정보가 아닌, 공간을 점유하는 조각적 요소로 활용. 'L\'ART DE LA', 'DESIGN ART ARCHITECTURE' 같은 텍스트가 스크롤에 반응해 움직이는 마퀴 효과.
매끄러운 흐름 & 인터랙션
- · 묵직하면서도 부드러운 스크롤을 위한 Lenis Scroll; 평면 웹 환경에서 공간감과 깊이를 극대화하는 패럴랙스와 미묘한 스케일 변화.
디자인 포인트
브루탈리스트 타이포그래피 & 스케일
화면을 가득 채우는 대형 산세리프 서체로 브랜드의 자신감과 웅장함을 시각적으로 표현했습니다. 'L\'ART DE LA', 'DESIGN ART ARCHITECTURE' 같은 텍스트에 스크롤에 반응하는 키네틱 효과(마퀴 효과)를 적용해 정적 이미지에 역동적 에너지를 불어넣었습니다.
모노크롬 & 구조적 그리드
포트폴리오 이미지(작품)가 가장 돋보이는 완벽한 배경을 위해 철저히 절제된 흑백(모노크롬) 컬러 팔레트를 사용했습니다. 두껍고 명확한 구분선으로 섹션을 분리해 건물의 골격(구조)을 보는 듯한 인상을 줍니다.
몰입형 인터랙션
Lenis Scroll을 적용해 묵직하면서도 부드러운 스크롤 경험을 제공하여, 사용자가 웹사이트가 아닌 전시홀을 거니는 것 같은 느낌을 줍니다. 이미지에 패럴랙스 효과와 미묘한 스케일 변화를 더해 평면 웹 환경에서 공간감과 깊이를 극대화했습니다.