Car Box Size

차를 상자로 바꿔서 크기를 비교합니다.

• 코어 = 축거 × 전폭 × 전고 (m³) — 앞뒤 범퍼를 뺀 바퀴 사이 부피
• 외형 = 전장 × 전폭 × 전고 (m³) — 주차장에서 차지하는 부피

카드마다 실제 치수 비율로 만든 3D 상자를 차 사진 위에 겹쳐 보여줍니다. 기준자로 성인사람(500×500×1700)과 주차장(5000×2500×300)이 목록에 함께 들어 있습니다.

화면

탭	하는 일
전체보기	100종을 판매·코어·외형·축거·전장·전고·전폭 기준으로 정렬. 같은 버튼을 다시 누르면 오름/내림 전환. 이름·브랜드·초성(ㅅㅌㅅ → 셀토스)으로 검색
상식	코어·축거·기계식 주차·주차구획 규격 등 자주 헷갈리는 것들. 규격 표는 parking.ts 상수를 그대로 읽어 그리므로 기준이 바뀌면 문서도 따라갑니다
비교하기	두 대를 골라 6개 항목의 차이를 문장으로. 선택창은 검색 가능하고, 아무것도 입력 안 하면 그 달 많이 팔린 순으로 보여준다. 랜덤 버튼으로 아무 두 대. 아래에 자주 비교하는 조합 바로가기

전체보기에서 카드를 누르면 그 차를 왼쪽에 넣은 채로 비교하기가 열립니다. 상대는 랜덤으로 채워지고, 카드 제목(다나와 링크)만 예외로 원래 링크대로 동작합니다.

개발

npm install
npm run dev      # http://localhost:5173
npm run build

데이터 갱신 — 손으로 옮기지 않습니다

값의 출처는 전부 다나와이고, 갱신 경로는 스크립트 하나뿐입니다. 화면에 보이는 숫자를 직접 타이핑하는 순간 다음 달에 반드시 틀어집니다.

npm run sync:sales     # 판매량 최근 6개월 재수집 -> src/data/sales.ts
npm run sync:sales -- --months=12
npm run verify:cars    # cars.ts 치수를 다나와 제원과 전수 대조 (차이 있으면 exit 1)
npm run sync:weights   # 공차중량 재수집 -> cars.ts (기계식 주차 판정용)
npm run sync:segments  # 세그먼트 재수집 -> cars.ts (비교 조합 선정용)
npm run check:claim    # m1k.app 등록·귀속 상태가 config와 맞는지 (어긋나면 exit 1)

• src/data/sales.ts는 생성물입니다. 손으로 고치지 마세요.
• verify:cars는 값을 고치지 않고 차이만 보고합니다. 다나와와 다른 게 늘 틀린 건 아니라서(아래 "제원 기준") 판단은 사람이 하고, 확정한 예외는 스크립트의 ACCEPTED에 이유와 함께 적습니다. 그래야 다음 사람이 같은 조사를 반복하지 않습니다.
• 색·slug 같은 사이트 설정은 src/config.ts 한 곳에 있습니다.

SEO

SPA라 초기 HTML의 <body>가 비어 있습니다. 크롤러가 JS를 실행해주길 기대하는 대신, scripts/build-seo.mjs가 빌드 뒤에 내용을 심습니다(npm run build에 포함).

• #root 안에 h1·제원표 100행·상식 Q&A를 넣습니다. React가 createRoot로 마운트하며 통째로 갈아치우므로 화면에는 한 프레임도 보이지 않습니다. 화면에 없는 걸 심는 게 아니라 화면에 있는 걸 미리 적어두는 것이라 클로킹이 아닙니다.
• canonical, FAQPage 구조화 데이터를 함께 넣습니다.
• robots.txt·sitemap.xml을 생성합니다. 이게 없으면 vercel.json의 SPA rewrite가 가로채서 robots.txt 요청에 HTML을 돌려줍니다(실제로 그랬습니다).

내용은 전부 cars.ts에서 생성하므로 차를 추가하면 자동으로 따라갑니다.

OG 이미지 121장 · 목록 썸네일 120장

scripts/lib/og.mjs가 SVG를 직접 쓰고 resvg로 PNG를 굽습니다. 조합마다 그 두 대가 그려진 이미지를 만들어서, 공유될 때 어떤 비교인지 바로 보이게 합니다.

• 한 장의 비교 스테이지에 두 차를 크게 그립니다 — 공유 앱에서 500px 안팎으로 축소돼도 차량과 3D 상자가 먼저 보이게 하고, 차 이름·차이 수치·설명은 서로 겹치지 않는 안전영역에 둡니다.
• 3D 상자는 앱과 같은 각도입니다. 처음엔 satori를 썼는데 CSS transform을 그리지 않아 상자가 납작한 사각형이 됐습니다. scripts/lib/box3d.mjs가 회전(rotateX 8°, rotateY 128°)을 직접 계산해 육면체 여섯 면을 polygon으로 냅니다 — 앱과 같은 각도라 같은 그림이 나옵니다.
• 차 사진을 깔고 그 위에 상자를 겹칩니다. 사진이 없으면 상자만 남습니다.
• 두 차를 같은 자로 나란히 그립니다. 처음엔 겹쳐 그렸는데, 전장 차이가 15mm쯤인 조합(쏘렌토·싼타페)은 한 대로 보였습니다.
• 한글 폰트가 필요해 scripts/fonts/에 Pretendard를 둡니다(3MB).
• 같은 그림을 비교 화면의 조합 목록 썸네일로도 씁니다. 목록에서 본 그림이 공유 카드에 그대로 뜨면 "아까 그거"로 이어집니다. 다만 OG 원본은 한 장 145KB라 목록에 16장 깔면 2MB가 넘어서, scripts/gen-thumbs.mjs가 절반 크기(600px, 63KB)로 따로 굽습니다.
• 썸네일은 public/og에 둡니다 — vite dev 서버도 public을 서빙해서 개발 중에도 보입니다. 생성물이라 .gitignore에 있습니다.
• 모든 페이지가 og:url·이미지 MIME·크기·대체텍스트와 X 대체텍스트를 냅니다. 이미지 sitemap에도 페이지별 대표 이미지를 넣고, npm run verify:seo가 HTML과 이미지 121장을 전수 검사합니다.

비교 페이지 120개

/compare/쏘렌토-vs-싼타페 같은 주소를 조합마다 만듭니다. "쏘렌토 싼타페 크기"처럼 조합으로 검색하는 사람을 위한 것입니다. 각 페이지는 고유한 title·description·canonical과 두 차의 제원표를 갖습니다.

조합은 scripts/gen-pairs.mjs가 골라 src/data/pairs.ts로 냅니다(build 첫 단계). 화면의 "자주 비교하는 조합"과 비교 페이지가 이 목록을 함께 봅니다 — 두 곳에서 따로 고르면 화면엔 있는데 색인엔 없는 조합이 생깁니다.

아무 조합이나 만들면 색인만 낭비하므로 세 조건으로 거릅니다.

• 같은 세그먼트 — 부피만 보면 "그랜저 vs 셀토스"가 나오는데 아무도 그렇게 고민하지 않습니다
• 코어 차이 15% 이내 — 체급이 다르면 비교가 아닙니다
• 둘 다 팔리는 차 — 판매 하위 조합은 검색되지 않습니다

434쌍 중 판매량 상위 120쌍을 씁니다. 세그먼트는 npm run sync:segments로 다나와에서 받습니다.

앱에서 두 차를 고르면 주소도 그 조합으로 바뀝니다(history.replaceState). 공유하거나 북마크하면 그대로 색인 대상이 됩니다.

스택

Vite · React 19 · TypeScript · Tailwind 4 · @m1kapp/kit

차량 이미지는 다나와(autoimg.danawa.com)의 모델 이미지를 참조합니다.

데이터 추가

src/data/cars.ts의 CARS 배열에 한 줄 추가하면 끝입니다.

{ name: "모델명 (2025)", xSize: 4710, ySize: 1825, zSize: 1420, xInSize: 2720, brand: "현대", no: 4455 },

no는 다나와 모델 번호입니다. https://autoimg.danawa.com/photo/{no}/model_360.png 이미지를 가리키고, 판매량도 이 번호로 붙습니다.

판매량

src/data/sales.ts는 다나와 자동차 판매실적(모델별)에서 가져온 국내 신차 등록 대수입니다. 최근 6개월치가 월별로 들어 있고, 키가 Car.no(다나와 모델 번호)라서 이름 매칭 없이 정확히 붙습니다.

• 화면 어디서나 기준월을 바꿔 볼 수 있습니다. 순위 칩·정렬·대수가 그 달 기준으로 다시 계산됩니다.
• 다나와는 수입차를 브랜드마다 다른 시점에 집계해서, 가장 최근 달은 수입차가 덜 찹니다. 그 달은 화면에 "수입차는 아직 집계 중"이라고 표시합니다(importedPending).
• 표에 없는 차(단종·미출시·초소량)는 판매량을 비워 둡니다. 0으로 채우지 않습니다.

순위 칩

카드 왼쪽 위 칩은 src/data/rank.ts에서 계산합니다. 기준자(성인사람·주차장)는 순위에서 뺍니다.

• 기계식 불가 / 기계식 대형만 — 맨 앞에 옵니다. 판매 순위는 알면 좋은 정보지만, 차를 사고 나서 "우리 건물에 못 넣는다"를 아는 건 되돌릴 수 없습니다
• 판매 N위 다음, 코어 상위/하위 10% — 없으면 외형 기준으로 대신 붙습니다

가운데 80%에는 일부러 아무것도 안 붙입니다. 전부에 칩이 붙으면 칩이 의미를 잃습니다.

기계식 주차 판정

주차장법 시행규칙 제16조의2 기준으로 카드에 표시합니다.

규격	길이	너비	높이	무게
중형	5.2m	2.0m	1.85m	2,350kg
대형	5.75m	2.15m	1.85m	2,650kg

• 중형에 들어가면 아무 표시도 하지 않습니다. 대부분이 통과하는데 다 붙이면 의미가 없습니다.
• 걸리면 카드 칩으로 알리고, 칩에 마우스를 올리면 걸린 항목이 보입니다.
• 무게는 npm run sync:weights로 다나와에서 받습니다. 트림마다 갈리는데 가장 무거운 트림을 씁니다 — 못 들어가면 그만인 판정이라 유리한 쪽으로 반올림하면 안 됩니다.
• 공차중량을 모르는 차는 무게 판정을 건너뜁니다. 모른다는 이유로 "못 들어간다"고 하면 안 됩니다.

치수만 보면 13대가 걸리는데, 무게까지 넣으면 22대가 걸립니다. 배터리를 얹은 전기차가 치수는 멀쩡한데 무게에서 막히는 경우가 많습니다(아이오닉9 2,675kg, 카이엔EV 2,525kg).

제원 기준

• 치수는 다나와 자동차 제원 탭 값을 기본으로 하고, 어긋나는 건 제조사 공식 제원으로 확정합니다.
• 전폭은 사이드미러를 뺀 값입니다. 미러 포함/접힘 값이 섞이면 차끼리 비교가 깨지므로, 출처가 미러 포함값만 주는 경우(사이버트럭 2201·2413, 폴스타4 2068·2139) 미러 제외값을 씁니다.
• 트림에 따라 값이 갈리면(휠 크기 등) 대표 트림 하나로 통일합니다.

코어는 실내 용적이 아닙니다

미국 EPA 실내용적이 공개된 24대와 대조해봤습니다.

• 코어의 **약 42%**가 실제 승객+화물 공간입니다(표준편차 3.9%p).
• 순위는 같은 차급 안에서만 얼추 맞습니다. 세단끼리는 스피어만 +0.93까지 나오지만 크로스오버끼리는 −0.10으로 무너집니다.
• 실제 실내 부피와 가장 상관이 높은 치수는 전고(+0.84)이고 축거는 +0.12로 거의 무관합니다. 코어는 "차가 차지하는 상자"이지 "타는 공간"이 아닙니다.

"축거 × 폭"으로 차 크기를 재는 방식 자체는 미국 연비 규제가 쓰는 것과 같습니다 (49 CFR 523.2, footprint = 축거 × 윤거).