01 / Context
무엇을 해결할 것인가.
정비 과정과 비용, 사고 후 절차는 고객에게 익숙하지 않습니다. 서비스별 수리 범위와 정비소의 기술을 이해할 수 있는 설명이 필요합니다.
천안 자동차 공업사의 사고·보험 수리, 판금·도장, 엔진 정비와 복원 역량을 보여주고 전화 상담으로 연결하는 브랜드 홈페이지.
02 / Direction
프로젝트를 바라본 방향.
사고·보험 수리를 주요 상담 동선으로 잡았습니다. 차량·엔진의 3D 경험으로 기술을 설명하고, 운영자가 정비 이야기를 축적할 수 있도록 Site Studio를 연결했습니다.
기술을 조작 가능한 장면으로
클래식 차량은 회전과 분해로 살펴보고, 엔진은 부품을 선택하며 구조를 탐색합니다. 정비 기술 자체가 브랜드를 기억하게 하는 경험이 됩니다.
구조와 동작을 함께
LS3 V8 모델은 부품별 분해와 4행정 동작으로 전환됩니다. 복잡한 구조를 단계적으로 이해하도록 설계했습니다.
브랜드 경험과 콘텐츠 운영의 연결
3D 경험을 유지하면서 문구, 사진, 연락처와 정비 이야기를 편집할 수 있습니다. 공개 홈페이지와 편집 환경을 분리했습니다.
03 / Experience
사용자의 다음 행동을 설계하다.
사고·보험 수리 안내를 중심으로 서비스, 정비 과정, FAQ, 전화·지도 동선을 배치했습니다. 차량과 엔진은 사용자가 직접 회전·분해하며 살펴볼 수 있도록 구성했습니다.
- 01차량 회전·분해↓
- 02수리 범위 확인↓
- 03엔진 구조·동작 탐색↓
- 04정비 사례 읽기↓
- 05전화·지도 연결↓
04 / Making
경험을 실제 시스템으로.
React와 TypeScript로 서비스 페이지를 제작하고 Three.js·GLB 기반 3D 뷰어를 연결했습니다. 공개 사이트와 콘텐츠 관리 환경은 분리했습니다.
05 / In detail
구현의 디테일.
V8.238 parts. One system.
실제 Griffin Motors에 적용된 LS3 구조 모델 · 제조 도면과 정비 지침을 대신하지 않습니다.
전체 기능 보기 +
- Pony Pick-up 3D 회전·분해·확대 보기
- LS3 V8 구조·부품 선택·분해·4행정 동작 시각화
- 사고·보험 수리 안내·서비스 설명·진행 과정·FAQ
- 전화·지도 동선과 브랜드별 정비 안내
- Studio 홈페이지 텍스트·사진·전화/링크 수정
- 정비 이야기 글·사진·대표사진·분류·초안·게시·복구
06 / Intelligence & automation
인터랙션과 자동화.
차량과 엔진의 상태에 따라 시점을 바꾸고 부품을 선택하는 인터랙션을 구현했습니다. 엔진 분해와 4행정 시각화는 구조 이해를 위한 교육용 표현입니다.
07 / Outcome
그래서, 가능해진 일.
정비 서비스 안내, 3D 체험, 상담 동선을 한 사이트에 구성했습니다. 운영자가 정비 사례를 직접 게시하며 콘텐츠를 축적할 수 있습니다.
프로젝트 직접 보기 ↗08 / Continuity
만든 이후의 시간까지.
Site Studio에서 소개 문구, 사진, 전화번호와 링크를 수정합니다. 정비 이야기는 글·사진·분류를 편집한 뒤 게시하며 초안, 휴지통, 이전 버전으로 복구할 수 있습니다.
PAPA Site Studio ↗