home
works
motorskin
web-design
year
2025
Client
모터스킨
Role
front-end develop
Web Design
Contribution
100%
Explore
모터스킨은 세계적으로 유명한 자동차 코팅 브랜드인 KAVACA와 공식적으로 협약을 맺어 벤츠, 포르쉐 등의 고급차를 전문으로 취급하는 코팅 시공 업체입니다.
Figma로 홈페이지를 디자인하고 parallax scroll, toggle animation 등 다양한 인터렉티브를 포함하여 서버 내 데이터를 바탕으로 예상 견적을 계산하는 기능 등을 개발하였습니다.
차종 및 옵션 종류가 많아 이런 견적에 대해 고민하다가 이탈하는 고객층이 많다는 것을 알게 되었고, 이를 해결하고자 실시간 견적 계산 시스템을 도입하였습니다.
각 차종의 패키지별 가격과 옵션을 워드프레스의 CPT(custom post type)을 통해 DB 구조를 만들어 외부 요인에 의해 가격이 변동될 경우 관리자가 직접 가격을 수정할 수 있는 시스템을 제공하였습니다.
차종 및 패키지 선택을 URL parameter로 저장하여 공유가 가능하도록 작업하였습니다.
타 업체들의 홈페이지를 벤치마킹한 결과 정보성 위주의 홈페이지가 많은 것을 파악하여, 차별화를 위해 시각적으로 눈 길을 끌 수 있는 인터랙티브 요소를 넣는 것을 제안하였습니다.
javasccript 라이브러리인 GSAP와 Lenis를 활용하여 버튼 이벤트 및 parallax effect 등 다양한 인터랙티브를 제작하였습니다.