넥스코어 인더스트리 — 전기차 부품 제조사 B2B 기업 사이트

전기차 구동계 정밀부품을 만드는 1차 협력사를 위한 기업 사이트입니다. 제조업 사이트를 찾는 사람은 브랜드 감성을 보러 오지 않습니다. 공차를 몇 μm까지 잡는지, 불량률이 어떻게 움직였는지, 어떤 인증을 갖고 있는지를 확인하러 옵니다. 그래서 이 사이트의 주인공은 사진이 아니라 수치와 도면입니다.

과제

국내 부품 제조사 사이트는 대부분 회사 소개서 PDF를 웹에 옮겨놓은 형태입니다. 구매·기술 담당자가 실제로 필요한 정보(공정 능력, 검사 설비, 납기 준수율, 인증)는 PDF 안쪽에 묻혀 있어 문의 전에 검증이 끝나지 않습니다.

디자인 접근

스틸 블랙과 인더스트리얼 블루에 모노스페이스 수치 라벨을 얹어 "도면을 읽는 화면"의 문법을 만들었습니다. 1px 그리드, 도면풍 코너 마커, 치수선을 직접 SVG로 그려 사진 의존도를 낮췄습니다. 사진은 가공 현장 클로즈업만 절제해서 쓰고, 그 위에 치수 표기를 오버레이해 기술 문서처럼 읽히게 했습니다.

핵심 인터랙션

• 차트 라이브러리 없는 데이터 시각화 — 불량률 추이 라인 차트, 공정능력 Cpk 바, 납기 준수율 게이지를 모두 손으로 작성한 인라인 SVG로 만들고, 스크롤 진입 시 stroke-dashoffset으로 그려지게 했습니다. 차트마다 "데이터 표 보기"를 두어 스크린리더와 검증 목적 모두를 충족합니다.
• 글로벌 거점 SVG 지도 — 외부 지도 API 없이 path를 직접 작성했고, 거점 노드는 호버와 키보드 포커스 모두에서 툴팁이 열립니다.
• 5단계 공정 스텝 — 소재 입고부터 조립까지 각 단계의 설비·공차·검사 항목을 스크롤로 따라가며 확인합니다.
• 캔버스 히어로 — 회로/기어 라인이 미세하게 흐르는 배경을 requestAnimationFrame으로 그리고, reduced-motion에서는 정지 프레임으로 대체합니다.

신뢰 설계

인증 배지는 타사 로고 이미지를 가져오지 않고 텍스트 배지로 조판했습니다. 모든 수치에는 "데모 수치" 캡션을 붙여, 포트폴리오 데모가 실제 실적으로 오해되지 않도록 했습니다. 문의 폼은 회사명·문의 유형·도면 첨부 안내까지 실제 RFQ 흐름을 따르되 전송은 하지 않습니다.

기술 · 성능 · 접근성

• 빌드 없는 정적 사이트 — HTML · CSS · 바닐라 JS만으로 구성했습니다. 프레임워크·번들러가 없어 배포 산출물이 그대로 소스이고, 유지보수 시점에 의존성이 깨질 여지가 없습니다.
• Cloudflare Pages 배포 — 전 세계 엣지에서 서빙하며, _headers로 보안 헤더(X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy)와 정적 에셋 1년 immutable 캐시를 적용했습니다. 존재하지 않는 경로는 브랜드 404 페이지가 올바른 404 상태로 응답합니다.
• 이미지 — 전량 WebP로 변환하고 모든 img에 width/height를 명시해 레이아웃 이동(CLS)을 제거했습니다. 히어로는 우선 로딩, 나머지는 지연 로딩입니다.
• 모션 — 애니메이션은 transform/opacity만 사용해 컴포지터에서 처리하고, prefers-reduced-motion에서는 모든 자동 재생 모션이 정지합니다.
• 접근성 — 본문 바로가기 링크, 시맨틱 랜드마크, 키보드로 조작 가능한 탭·라이트박스·모바일 내비, 포커스 링, 스크린리더용 라이브 영역, WCAG AA 명도 대비를 지켰습니다.
• SEO — 타이틀·설명·canonical·Open Graph·트위터 카드·업종별 JSON-LD 구조화 데이터를 포함합니다.

결과물

라이브 데모: ononc-nexcore-industry.pages.dev

본 사이트는 ononc가 제작 역량을 보여주기 위해 만든 가상 브랜드 데모입니다. 실제 사업장이 아니며, 문의 폼은 전송되지 않습니다. 사진은 Wikimedia Commons의 자유 이용 라이선스 이미지를 사용했고 출처를 사이트 하단에 표기했습니다.