Whimsy Studio
설명
Interior Design
기간
Aug 2023 - Oct 2023
역할
- 아키텍처/디자인: 인테리어 포트폴리오 콘텐츠(CMS 연동) 데이터 구조 설계, 웹사이트 성능과 확장성을 고려한 기술 스택 및 모듈 설계.
- 프론트엔드/인터랙션: GSAP/ScrollTrigger를 활용한 공간 인터랙션 개발, Figma 기반 미니멀하고 구조적인 UI 컴포넌트 개발, 크로스 브라우저 호환성과 반응형 완벽 구현.
- 최적화/배포: 이미지/영상 로딩 최적화 및 Lighthouse 성능 점수 관리, Git 기반 자동 배포 환경(CI/CD) 구축, 서버 안정화 작업.
기술
HTML5 · CSS3 (Flex/Grid) · JavaScript (ES6+)
GSAP · ScrollTrigger · Locomotive Scroll
Headless CMS · Strapi/Sanity · JSON
Figma · Adobe Photoshop · Adobe Illustrator
프로젝트 목적
WHIMSY STUDIO의 섬세하고 세련된 인테리어 디자인 전문성을 강조하는 웹사이트 시스템을 구축하여, 복잡하지 않은 구조 내에서 포트폴리오 콘텐츠의 전달력을 극대화합니다. • 공간감 극대화: 인테리어 포트폴리오의 본질인 공간감과 질감을 프리미엄 스크롤 기반 인터랙션으로 표현해 시각적 몰입감을 확보합니다. • 콘텐츠 관리 유연성: '최신 스토리'와 같은 포트폴리오 섹션을 개발자 개입 없이 쉽게 추가/수정할 수 있는 안정적인 백엔드 연동 구조를 설계합니다. • 구조적 명확성: 명확한 그리드 정렬과 미니멀한 타이포그래피로 정보 탐색 피로를 줄이고 사용자 경험(UX)을 최적화합니다.
범위
- · 전체 UI 디자인 및 UX/IX 기획
- · 프론트엔드 개발
- · 인테리어 포트폴리오 관리 시스템(CMS) 연동 아키텍처 설계
주요 기술 특징
공간감 극대화
- · 인테리어 포트폴리오의 공간감과 질감을 프리미엄 스크롤 기반 인터랙션으로 표현해 시각적 몰입감을 확보합니다.
콘텐츠 관리 유연성
- · 개발자 개입 없이 '최신 스토리' 같은 포트폴리오 섹션을 쉽게 추가/수정할 수 있는 안정적인 백엔드 연동 구조를 설계합니다.
구조적 명확성
- · 명확한 그리드 정렬과 미니멀한 타이포그래피로 정보 탐색 피로를 줄이고 UX를 최적화합니다.
디자인 포인트
GSAP 기반 공간 디렉션
GSAP/ScrollTrigger를 활용한 인테리어 이미지의 스크롤 기반 패럴랙스 또는 화면 전환 효과를 구현해 사용자에게 공간을 거니는 듯한 몰입감 있는 경험을 제공합니다.
구조적 미니멀 UI
CSS Grid와 Flexbox를 활용한 그리드 정렬 기반 구조적 UI를 구현하고, 모든 해상도에서 미니멀한 타이포그래피와 간격 중심 레이아웃을 완벽하게 유지하는 반응형 코드를 작성합니다.
고품질 이미지 로딩 최적화
인테리어 포트폴리오는 고용량 이미지가 많으므로, 레이지 로딩과 WebP 포맷 적용으로 초기 로딩 속도와 스크롤 성능을 극대화합니다.