📌 ATELIER - 자연과 예술의 감성기반 웹사이트

🔹 프로젝트 개요

• 작업 기간: 2024.09 ~ 2024.12
• 작업 범위: 전체 UI 디자인 및 UX 기획, 감성적 프런트엔드 개발 및 퍼블리싱, 프로그램 및 콘텐츠 관리 시스템(CMS) 연동 아키텍처 설계
• 사용 도구: Figma, Adobe Photoshop, Adobe Illustrator, HTML5, CSS3 (Flex/Grid), JavaScript (ES6+), GSAP, ScrollTrigger, Locomotive Scroll, Swiper.js, AOS, JSON, Git, GitHub, Visual Studio Code

🔹 프로젝트 목적

'Lisbonne', 'Programme', 'Installations' 등 예술 아틀리에의 핵심 정보를 담고, 자연에서 영감을 받은 청량한 비주얼과 스크롤 인터랙션을 통해 독특하고 시적인 사용자 경험을 제공하는 웹사이트 구축

• 감성적 몰입감 구현: 하늘색 배경과 자연 이미지가 주는 시적인 분위기를 GSAP/ScrollTrigger 기반의 부드럽고 섬세한 인터랙션으로 완벽하게 구현.
• 프로그램 정보 관리: 정기적인 프로그램(Programme) 및 설치 미술(Installations) 등 변동성이 높은 콘텐츠를 효율적으로 업데이트할 수 있는 백엔드 연동 구조 설계.
• 미니멀리즘과 정보 전달의 균형: 최소화된 타이포그래피와 레이아웃 내에서 복잡하지 않게 정보 흐름을 명확히 설계하여 사용자의 이해도 증진.

🔹 디자인 포인트

프런트엔드 & 감성 인터랙션 (시각적 시와 동적 경험)

• GSAP 기반의 배경 및 콘텐츠 동기화: 배경의 질감(하늘색 노이즈/텍스처)과 이미지의 등장을 스크롤에 동기화하는 GSAP 및 ScrollTrigger 로직을 구현하여 웹사이트에 깊이감과 공간감을 부여.
• Locomotive Scroll을 활용한 부드러움: Locomotive Scroll을 사용하여 기본 브라우저 스크롤보다 더 부드럽고 유려한 스크롤 경험을 제공, 웹사이트의 시적인 분위기를 강화.
• 반응형 이미지 및 타이포그래피 제어: 고화질의 자연 이미지를 모든 디바이스에서 최적의 비율로 제공하며, 미니멀한 타이포그래피가 해상도에 따라 가독성을 잃지 않도록 정교한 CSS 설계 및 @media 쿼리 구현.

🔹 담당 역할