📌 WIMSY STUDIO - 인테리어 디자인 에이전시 웹사이트
🔹 프로젝트 개요
- 작업 기간: 2023.08 ~ 2023.10
- 작업 범위: 전체 UI 시안 디자인 및 UX/IX 기획, 프런트엔드 개발,인테리어 포트폴리오 관리 시스템(CMS) 연동 아키텍처 설계
- 사용 도구:
프런트엔드 : HTML5, CSS3(Flex/Grid), JavaScript(ES6+),GSAP, ScrollTrigger, Locomotive Scroll
백엔드/CMS (설계) : Headless CMS(Strapi/Sanity) 연동을 위한 회원 데이터 API 데이터 구조 명세,JSON을 활용한 초기 콘텐츠 구조화
디자인 : Figma, Adobe Photoshop/Illustrator, Visual Studio Code
🔹 프로젝트 목적
WIMSY STUDIO의 섬세하고 고급스러운 인테리어 디자인 전문성을 강조하고, 복잡하지 않은 구조 내에서 포트폴리오 콘텐츠의 전달력을 극대화하는 웹사이트 시스템 구축
- 공간감 전달 극대화: 인테리어 포트폴리오의 생명인 공간감과 질감을 스크롤 기반의 고급 인터랙션으로 표현하여 시각적 몰입도 확보.
- 콘텐츠 관리의 유연성: 'Latest Stories'와 같은 포트폴리오 섹션이 개발자 개입 없이 쉽게 추가/수정될 수 있도록 안정적인 백엔드 연동 구조 설계.
- 구조적 명료함: 명확한 그리드 정렬과 미니멀한 타이포그래피를 통해 정보 탐색의 피로도를 낮추고 사용자 경험(UX) 최적화.
🔹 디자인 포인트
1. 프런트엔드 & 인터랙션 (인테리어 콘텐츠 경험 극대화)
- GSAP 기반의 공간 연출: 인테리어 이미지를 활용한 스크롤 기반의 시차 이동(Parallax) 또는 화면 전환 효과를 GSAP/ScrollTrigger를 이용해 구현하여 사용자에게 마치 공간을 거니는 듯한 몰입감 제공.
- 구조적 및 미니멀 UI의 완벽 구현: CSS Grid 및 Flexbox를 사용하여 '그리드 정렬 기반의 구조적 UI'를 구현하고, 미니멀한 타이포그래피와 여백 중심의 배치를 모든 해상도에서 완벽하게 유지하는 반응형 코드 작성.
- 고화질 이미지 로딩 최적화: 인테리어 포트폴리오 특성상 고용량의 이미지가 많으므로, 지연 로딩(Lazy Loading) 및 WebP 포맷 적용을 통해 초기 로딩 속도와 스크롤 성능을 극대화.