인천 코리아 튜닝 페스티벌 2016

인천 코리아 튜닝 페스티벌은 KATMO(한국자동차튜닝협회), 국토교통부, 인천광역시가 공동으로 주최한 국가 단위 자동차 튜닝 행사입니다. O2O Mate는 2016년 행사의 공식 웹사이트 퍼블리싱을 담당했습니다.

핵심 과제는 '튜닝'이라는 역동적이고 마니아적인 문화를 일반 관람객과 업계 관계자 모두에게 매력적으로 전달하는 것이었습니다. 슈퍼카·드리프트 주행·차량 커스터마이징·오토캠핑 등으로 관심사가 폭넓게 갈리는 만큼, '자동차 튜닝, 당신의 문화가 되다(TUNING BE YOUR CULTURE)'라는 슬로건을 첫 화면부터 각인시키고, 전시·드리프트·체험 세 축의 프로그램을 직관적으로 파악하도록 정보 구조를 설계했습니다. 동시에 공공 행사의 신뢰감과 튜닝 문화 특유의 강렬한 비주얼이라는 상반된 요구를 조화시키는 것도 중요한 과제였습니다.

메인 상단은 운전석 시점의 풀스크린 히어로 배너(3장 슬라이더)로 'IN-CHEON KOREA TUNING FESTIVAL 2016' 타이틀과 오렌지 '행사 자세히 보기' 버튼을 배치합니다. 히어로 하단에는 전시·드리프트·체험 3-ZONE 카드, 'LATEST NEWS' 3열 영역, 다크톤 GALLERY(Still Cut), SPONSOR 슬라이더가 이어지며, 상단 내비게이션은 페스티벌 소개·전시 ZONE·드리프트 ZONE·체험 ZONE·공지사항으로 정리되어 있습니다.

서브페이지는 아스팔트 질감 위에 금속 재질로 처리한 'TUNING BE YOUR CULTURE' 대형 타이포를 헤더로 삼고, 그 아래 페스티벌 개요·전시품목·행사일정·페스티벌 MAP·오시는 길 탭 내비게이션을 두었습니다. 본문은 밝은 카드 영역에 오토캠핑 페스티벌 배너, 캠핑카·트레일러·모터캐러밴·SUV 등 전시 품목 설명, 부대행사 안내, 그리고 루프탑 텐트·캐러밴 실내·티어드롭 트레일러 등 현장 사진 4컷 그리드를 담아 정보를 단정하게 전달합니다.

HTML5·CSS3로 다크톤 배경, 금속·아스팔트 질감의 타이포, 오렌지 포인트 컬러 등 강한 시각적 대비를 시맨틱 마크업과 정교한 스타일로 구현했습니다. 히어로 배너 슬라이더(3장 순환)·스폰서 캐러셀·갤러리 썸네일 인터랙션 등 동적 요소는 jQuery로 안정적으로 처리했습니다. 행사 웹사이트의 성격상 '첫인상'이 곧 전환을 좌우하므로, 무거운 프레임워크 대신 비주얼 강조 랜딩에 집중하고 핵심 인터랙션만 가볍게 얹어 로딩 속도와 임팩트를 동시에 잡았습니다.

다크톤 아스팔트 배경 위에서 오렌지 포인트 컬러가 버튼·라벨·구분선에 일관되게 적용되어 시선 흐름을 통제합니다. 아래 스와치는 실제 구축된 화면에서 관찰한 대표 색상입니다.

O2O Mate는 프론트엔드 퍼블리싱을 전담해, 디자인 시안의 픽셀 단위 재현에 그치지 않고 ZONE 카드의 반복 컴포넌트화, 히어로·스폰서 슬라이더 스크립팅, 메인–서브페이지 간 일관된 헤더/푸터·내비게이션 체계 정립까지 수행했습니다. 그 결과 국토교통부·인천광역시가 참여하는 공공 행사의 무게감과 튜닝 문화의 역동적 감성을 한 화면 안에 균형 있게 담아냈고, 전시·드리프트·체험 복합 프로그램을 3-ZONE 카드로 명료하게 구조화했습니다. 짧은 개최 기간 동안 임팩트와 정보 전달을 동시에 요구하는 이벤트 웹사이트의 과제를, 절제된 기술 구성과 강한 비주얼 전략으로 풀어낸 사례입니다.