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

자율주행, 자율주행차, ADAS에 관한 엔지니어링 블로그, Medium / Substack 글, GitHub README, 기술 뉴스레터는 정기적으로 깔끔한 시나리오 그림이 필요합니다: 설명하는 교차로, 설명하는 코너 케이스, 코드가 추론하는 차선 구성. 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 미리보기) 고DPI로 사용 가능합니다.
무한 캔버스로 OG 치수에 잘 잘리는 넓은 그림을 그릴 수 있습니다.

권장 워크플로

일반적인 블로그 그림을 위한 반복 가능한 워크플로:

시나리오를 선택합니다. 하나의 장면, 하나의 포인트. 단일 그림에서 전체 파이프라인을 설명하려 하지 마세요.
drawtonomy.com에서 스케치합니다. 도로, 차선, 교차로, 차량, 보행자, 경로, 텍스트 레이블.
라이트와 다크 모드 모두를 위한 스타일을 설정합니다. #fff와 #1a1a1a 배경에서 모두 살아남는 색상을 사용합니다. 순수 흰색 선 (라이트에서 보이지 않음)과 순수 검정 선 (다크에서 보이지 않음)을 피합니다. 중간 회색 선은 두 모드에서 잘 작동합니다.
캔버스 자르기를 설정합니다. 가장 관련성 있는 부분이 중앙에 오도록 그림을 배치합니다. OG 카드로도 사용할 그림이라면 대략 1200 × 630으로 프레이밍합니다.
.drawtonomy.svg로 저장합니다. 편집 가능한 원본입니다. 대부분의 블로그 글은 발행 후 최소 한 번 업데이트됩니다 — 오타 수정, 후속 정정, “관련 다이어그램을 후속 글에 추가했습니다” — .drawtonomy.svg는 모든 업데이트를 재그리기가 아닌 편집으로 만들어 줍니다.
실제로 배포할 에셋을 내보냅니다. 같은 장면에서:
- OG 카드 (LinkedIn / X / Hacker News 미리보기)용 1200 × 630 .png.
- 블로그 플랫폼이 .drawtonomy.svg보다 일반 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">
</picture>

GitHub README:

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

기술 글을 위한 스타일 제안

그림당 하나의 시나리오. 세 가지 경우를 설명한다면 세 개의 그림을 그립니다.
그림에 주석을 달기. 그림에 짧은 레이블 (“TTC = 2.5 s”)이 포함되면 독자의 눈을 절약해 줍니다; 긴 설명은 주변 텍스트에 넣습니다.
시리즈에서 일관된 자차 스타일. 글이 시리즈의 일부라면 자차 색상을 하나 선택하여 모든 그림에 유지합니다.
독점 스크린샷 없음. drawtonomy의 일반적이고 시나리오 특화된 그림은 “이게 시뮬레이터에서 나온 건가요?”라는 질문을 피하고 재사용 권리에 대한 자신감을 줍니다.

이 도구가 적합하지 않은 경우

사실적인 일러스트레이션. drawtonomy는 엄격하게 탑다운 2D입니다. 센서의 1인칭 시점 렌더링은 시뮬레이터 스크린샷을 사용하세요.
애니메이션. drawtonomy는 정적 그림을 내보냅니다. 애니메이션 시나리오 설명이 필요하다면 정적 그림을 내보내고 별도로 애니메이션을 만들거나, 녹화된 재생을 위해 esmini와 함께 OpenSCENARIO 내보내기를 사용하세요.