KVR Coachworks

어떻게 만들어졌나

원본은 호주의 고급차 차체 수리 공장 사이트입니다. Site of the Day와 함께 Developer Award를 받았습니다.

업종은 원본과 같게 두고 상호를 가상의 시드니 공장으로 바꿨습니다. 실존 자동차 브랜드 12개도 가상 마크로 바꿨습니다.

바탕은 흰색·검정·짙은 회색 #191919뿐입니다. 좌우 여백 32px에 12칸 그리드, 글자 크기는 여섯 단계입니다.

마크 12개는 스크롤로 하나씩 켜지고 오른쪽 사진이 바뀝니다. 사진 넘김은 다음 사진을 커서 옆에 미리 보여 줍니다.

원본 히어로 영상은 사진 3장 교차로 바꿨습니다. 소리 켜기 버튼 자리는 멈춤·재생 버튼이 됩니다.

서체는 Schibsted Grotesk와 Saira Semi Condensed입니다. 라이브러리 없이 CSS와 바닐라 JS로 만들었습니다.

주요 기능

• 글자 타자 인트로 · 고정 꼬리말 뒤판
• 커서 미리보기 사진 넘김 · 스크롤로 켜지는 마크 12
• 큰 링크 메뉴 덮개 · 링크에 올리면 바뀌는 사진
• 서비스 아코디언 · 지점 사진 넘김 · 팀 사진

어디에 어떻게 쓸 수 있나

인증과 다루는 브랜드를 앞세우는 고급 수리·정비 업체에 맞습니다. 홈, 서비스, 파트너, 소개, 연락, 채용이 같은 메뉴 덮개와 꼬리말을 씁니다.

확인할 점

꼬리말 이메일 칸은 검증만 하고 전송하지 않습니다. 원본 영상과 실제 브랜드 로고는 사진과 가상 글자 로고로 대신했습니다.