프로젝트 시작하기 시작하기
사례 연구사례 템플릿 · MV Agusta
모던한 검은색 MacBook과 iPhone에 표시된 MV Agusta 딜러 웹사이트, 홈페이지의 노란색 Superveloce
MV Agusta자동차 · 딜러 웹사이트 디자인
홈페이지 첫 화면: 진한 빨강 배경의 노란색 모터사이클 클로즈업, 환영 제목, 재고, 혜택, 시승에 관한 한 줄
의뢰받은 디자인을 스튜디오가 실제 작동하는 쇼룸으로 구현

서비스

  • UX/UI 디자인
  • 디자인 시스템
  • 프런트엔드 개발
  • 모션 디자인

도구

  • 브랜드 웹사이트 분석
  • 경쟁사 분석
  • 현지화 조사
  • 사용자 흐름

기술 스택

  • HTML
  • CSS
  • Vanilla JavaScript
  • Web Animations API

MV Agusta

MV Agusta 딜러의 의뢰로 제작한 웹사이트 디자인을 이후 자체적으로 실제 작동하는 쇼룸으로 구축했습니다. 모델 탐색, 재고 선택, 대리점 문의까지 브랜드의 시각적 개성이 이어지는 경험입니다.

대리점의 두 측면

웹사이트는 구매자가 모터사이클을 찾고 문의하도록 돕습니다. 워크스페이스는 그 맥락을 대리점의 일상 업무로 이어 가도록 설계되었습니다. 이 데모들은 별도로 실행되며, 실시간으로 연결되어 있지 않습니다.

브리프

브랜드의 에디토리얼 시각 언어를 딜러 웹사이트에 맞게 적용했습니다. 구매자는 판매 중인 모델을 확인하고, 특정 모터사이클의 세부 정보를 비교하고, 대리점과의 명확한 다음 단계를 찾을 수 있어야 했습니다.

디자인 결정

제공된 구조 브리프를 바탕으로 시각적 스타일, 구성, 컴포넌트, 페이지 순서 일부를 재작업했습니다. 대형 사진이 브랜드를 각인시키고, 재고 카드, 사양, 직접 동작이 구매 여정을 뒷받침합니다.

디자인을 납품한 뒤 저희가 직접 실제 작동하는 웹사이트로 구축했습니다. 공통 페이지 패턴으로 쇼룸 전체에 같은 내비게이션, 모델 표현, 재고 선택을 적용했습니다.

저희의 기여

UX/UI 디자인과 재사용 가능한 컴포넌트를 납품한 뒤, 스튜디오 프로젝트로 쇼룸 프런트엔드와 모션을 개발했습니다. 브랜드 아이덴티티와 모터사이클 이미지는 MV Agusta의 것입니다.

오프닝 이미지 끝부터 이어지는 홈페이지: 상태, 연식, 가격이 표시된 재고 모터사이클 네 대, ‘전체 보기’ 버튼, 이어서 ‘시승’과 ‘서비스’ 카드
재고, 시승, 서비스가 쇼룸의 첫 번째 동선을 이룹니다

구매 가능한 모터사이클을 입구 가까이에 둡니다.

홈페이지는 오프닝 이미지 바로 뒤에 재고를 배치합니다. 상태, 연식, 가격이 함께 보이므로 딜러가 실제로 제공하는 모터사이클에 대해 첫 결정을 내릴 수 있습니다.

시승과 서비스가 직접 동작으로 이어집니다. 이는 대리점을 방문하는 일상적인 이유이며, 페이지 위계에서 명확한 자리를 차지합니다.

Dragster RR SCS 모델 카드: 측면에서 본 모터사이클, 각도를 바꾸는 화살표, 색상 견본, 여섯 가지 사양, ‘재고 보기’ 버튼
모델 세부 정보에서 같은 모델의 재고로 바로 이동합니다

다음 단계를 모델 옆에 둡니다.

모터사이클, 볼 수 있는 뷰, 주요 사양, ‘재고 보기’를 일관된 하나의 제품 카드에 담았습니다. 구매자는 실용적인 정보를 놓치지 않고 모델을 살펴볼 수 있습니다.

‘재고 보기’는 선택한 모델을 재고 필터로 이어 줍니다. 이를 통해 표현력 있는 모델 페이지가 딜러의 판매 가능한 모터사이클과 연결됩니다.

Dragster RR SCS로 필터링한 ‘재고 모터사이클’: 가격, 사양, VIN 일부, 연식, 주행 거리, 소유자, 색상, ‘문의하기’ 버튼이 있는 모터사이클 한 대
등록된 모터사이클 한 대의 세부 정보를 포함한 Dragster 셀렉션

모터사이클마다 고유한 세부 정보를 제공합니다.

재고 등록에는 모델명 이상의 정보가 필요합니다. 제시 가격, 연식, 주행 거리, 이전 소유자, VIN 일부를 모터사이클 옆에 두고 ‘문의하기’ 동작을 함께 배치했습니다.

패밀리, 모델, 상태 필터로 목록을 좁히고, 정렬로 가격과 연식을 비교할 수 있습니다. 필터링된 보기는 선택 사항을 URL에 유지하여 공유할 수 있습니다. 여기에 표시된 재고는 샘플 데이터입니다.

Dragster RR SCS 첫 화면: 어두운 배경에 크게 배치한 빨간색과 검은색 모터사이클, 모델명과 짧은 문구
모델 소개가 스케일과 개성을 각인시킵니다
Dragster 에디토리얼 블록: 노란색 페어링의 대형 클로즈업에 제목 ‘번개 같은 출발을 위한 트랙션 컨트롤’과 짧은 문구
클로즈업으로 하나의 기술적 특징을 집중적으로 설명합니다

구매 여정 전체에 브랜드를 이어 갑니다.

대형 모터사이클 이미지, 강렬한 타이포그래피, 명암 대비로 쇼룸이 한눈에 MV Agusta임을 알 수 있게 했습니다. 브랜드 사진을 새로운 구성과 컴포넌트 시스템 안에서 사용했습니다.

모델 페이지는 기술적 세부 사항에 고유한 시각적 리듬을 부여합니다. 클로즈업, 명확한 제목, 짧은 설명으로 구성됩니다. 모션은 이 위계를 따라 인상적인 오프닝에서 세부 정보를 지나는 차분한 전환으로 이어집니다.

납품한 디자인과 실제 작동하는 쇼룸.

의뢰받은 디자인을 납품했습니다. 이후 모델 페이지, 재고 필터, 시승, 서비스를 갖춘 이 28페이지 쇼룸을 자체 개발했습니다. 표시된 버전은 샘플 콘텐츠를 사용하며, 양식은 입력을 검증하지만 전송하지 않습니다.

다른 사례

KO