기술 블로그와 아티클용 시나리오 그림

엔지니어링 블로그, Medium / Substack 글, GitHub README, 자율주행 및 ADAS 기술 뉴스레터는 정기적으로 깔끔한 시나리오 그림을 필요로 합니다. 설명하는 교차로, 다루는 코너 케이스, 코드가 추론하는 차선 배치 등이 그것입니다. drawtonomy는 이러한 그림을 웹에 최적화된 출력 형식으로 제작하기에 적절합니다.

이 페이지는 자율주행 학술지용 그림의 기술 블로그 버전입니다. 같은 캔버스이지만 다른 출력 요구사항을 다룹니다.

기술 블로그와 아티클 그림의 요구사항

학술 논문 그림과는 다른 제약이 있습니다:

삽입 가능성. 변환 없이 Markdown / MDX / Notion / Ghost / Substack 편집기에 직접 넣을 수 있어야 합니다.
라이트/다크 모드 호환성. 많은 엔지니어링 블로그는 두 모드 모두에서 렌더링합니다. 그림이 두 배경에서 읽기 쉽거나 다크 모드 변형이 있어야 합니다.
작은 파일 크기. 4MB 래스터 이미지는 페이지 로드 속도와 SEO에 악영향을 미칩니다. SVG 또는 압축 PNG가 기본이어야 합니다.
소셜 카드 최적화. Twitter / LinkedIn / Hacker News에서 공유할 때 OG 이미지는 보통 그 그림입니다. 가로세로 비율과 작은 크기에서의 가독성이 중요합니다.
재편집 가능. 블로거는 게시 후에도 글을 수정합니다. 그림을 처음부터 다시 그리지 않고도 편집할 수 있어야 합니다.

drawtonomy의 기본 설정이 이런 요구사항에 잘 맞습니다:

.drawtonomy.svg (drawtonomy의 네이티브 SVG 형식)는 유효한 SVG이므로 모든 HTML / Markdown / MDX 환경에 임베드할 수 있습니다. 더 나아가 글을 수정해야 할 때 drawtonomy에서 다시 열어 편집할 수 있습니다.
PNG 내보내기는 SVG를 지원하지 않는 경우(예: LinkedIn 미리보기)를 위해 고해상도로 사용 가능합니다.
무한 캔버스로 OG 차원에 맞게 자를 수 있는 넓은 그림을 그릴 수 있습니다.

권장 워크플로

전형적인 블로그 그림을 위한 반복 가능한 프로세스입니다:

시나리오를 정합니다. 하나의 장면, 하나의 메시지입니다. 전체 파이프라인을 한 그림으로 설명하려 하지 마세요.
drawtonomy.com에서 스케치합니다. 도로, 차선, 교차로, 차량, 보행자, 경로, 텍스트 레이블을 그립니다.
라이트 모드와 다크 모드 모두 고려하여 색상을 선택합니다. #fff 배경과 #1a1a1a 배경 모두에서 잘 보이는 색을 사용합니다. 순색 흰색 선(라이트 모드에서 보이지 않음)과 순색 검정 선(다크 모드에서 보이지 않음)을 피합니다. 중간 회색 선은 두 배경에서 모두 잘 작동합니다.
캔버스 자르기 영역을 정합니다. 가장 중요한 부분이 중앙에 오도록 그림을 배치합니다. 같은 그림을 OG 카드로도 사용한다면 약 1200 × 630으로 프레이밍합니다.
.drawtonomy.svg로 저장합니다. 이것이 편집 가능한 원본입니다. 대부분의 블로그 글은 게시 후 최소 한 번은 수정됩니다. 오타 수정, 후속 정정, “후속 글에서 관련 다이어그램을 추가했습니다” 같은 경우들이 생기는데, .drawtonomy.svg는 모든 수정을 처음부터 다시 그리는 것이 아닌 편집으로 처리할 수 있게 합니다.
실제로 사용할 에셋을 내보냅니다. 같은 장면에서:
- .png 1200 × 630 크기로 OG 카드용(LinkedIn / X / Hacker News 미리보기).
- 일반 SVG 블로그 본문에 사용할 것(블로그 플랫폼이 .drawtonomy.svg보다 순수 SVG를 선호하는 경우. 대부분의 현대 플랫폼은 둘 다 지원하며 둘 다 유효한 SVG이기 때문).
임베드합니다. 블로그 편집기에 넣으세요. 캡션을 추가하세요. 검색 엔진과 스크린 리더 모두 캡션을 사용합니다.

크기와 해상도

SVG는 해상도가 중요하지 않습니다. 레이아웃이 필요한 크기에 맞게 확대됩니다. PNG의 경우 다음 크기들이 유용합니다:

용도	크기
인라인 블로그 그림(전체 너비)	1600 × 900
인라인 블로그 그림(절반 너비)	800 × 450
OG / 소셜 카드	1200 × 630
Twitter 카드	1200 × 600
LinkedIn 공유 이미지	1200 × 627
GitHub README 헤더	1200 × 600(또는 README 레이아웃에 맞는 크기)

임베드 예제

Markdown / MDX (Astro, Next.js, MDX 기반 블로그):

![컷인 시나리오: 자차 90 km/h, 진입 차량 +20 km/h](./cut-in.svg)

HTML 다크 모드 변형:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="컷인 시나리오: 자차 90 km/h, 진입 차량 +20 km/h" loading="lazy" decoding="async">
</picture>

GitHub README (소셜 카드 메타데이터와 함께, og-image 또는 유사한 도구 사용):

![컷인 시나리오 그림](./docs/img/cut-in.png)

기술 문서 스타일 제안

그림마다 하나의 시나리오. 세 가지 사례를 설명한다면 세 개의 그림을 그립니다.
그림에 주석 추가. 그림에 짧은 레이블(“TTC = 2.5 s”)을 넣으면 독자가 텍스트를 계속 읽지 않아도 됩니다. 긴 설명은 주변 텍스트에서 다룹니다.
시리즈 내 일관된 자차 스타일. 글이 시리즈의 일부라면 자차 색을 정하고 모든 그림에 일관되게 사용합니다.
독점 스크린샷 없음. drawtonomy의 일반적이고 시나리오 중심의 그림은 “이게 시뮬레이터에서 나온 건가?” 같은 의문을 피하고 재사용 권리에 대한 확신을 줍니다.

이 도구로 할 수 없는 것

사진 같은 일러스트레이션. drawtonomy는 엄격한 탑다운 2D입니다. 센서의 1인칭 뷰 렌더링이 필요하다면 시뮬레이터 스크린샷을 사용하세요.
애니메이션. drawtonomy는 정적 그림을 내보냅니다. 시간에 따른 시나리오 설명(예: 시간 경과에 따른 컷인)이 필요하다면 정적 그림을 내보내고 별도로 애니메이션하거나, OpenSCENARIO를 내보내 esmini로 녹화 재생을 만드세요.