drawtonomy — 자율주행 시나리오 화이트보드

drawtonomy란?

drawtonomy는 자율주행 시나리오를 위한 무료 브라우저 기반 화이트보드입니다 — 자율주행(AV), 자율주행(AD), ADAS를 모두 아우릅니다.

차선, 교차로, 차량, 보행자, 신호등, 노면 표시를 기본 도형으로 배치하세요. 설치할 것도, 계정도, 업로드되는 파일도 없습니다. 필요할 때는 같은 장면을 ASAM OpenDRIVE 1.8, OpenSCENARIO 1.3, esmini 즉시 실행 가능 zip으로 내보내고, Lanelet2 OSM 지도와 ROS 점유 격자를 가져올 수도 있습니다 — 다만 이는 외부로 이어지는 다리일 뿐, 핵심은 아닙니다(아래 [시뮬레이션·매핑 워크플로우와 연결] 참조).

논문에 들어가는 그림, 설계 리뷰 전에 그리는 슬라이드, 팀원에게 코너 케이스를 설명하기 위해 회의 중에 그리는 다이어그램, OpenSCENARIO 파일을 작성하기 전에 미리 스케치하는 장면 등 다양한 용도에 활용할 수 있습니다. 자율주행(AV) 연구 그림, 자율주행(AD) 설계 토론, ADAS 테스트 시나리오 스케치 — 끼어들기, 차선 변경, 비보호 좌회전, 로터리 진입, 보행자 횡단, 선행 차량 제동 등 흔한 시나리오가 모두 여기서 손쉽게 그려집니다.

차선·차량·교차로 도형이 일반 목적으로도 충분히 사용할 수 있어 운전 교육 수업 계획, 도로 안전 교육 자료, 교통 공학 개념도, 도로 상황 스케치에도 활용할 수 있습니다. 전체 용례는 활용 사례에서 확인하세요.

캔버스에는 Math (LaTeX) 도구도 포함되어 있습니다. KaTeX로 수식을 렌더링하므로, 시나리오 옆에 비용 함수나 컨트롤러 수식을 바로 배치할 수 있습니다. 논문 그림, 슬라이드, Notion, 블로그 포스트를 위한 독립형 브라우저 기반 LaTeX 수식 에디터로도 손색이 없습니다 — 논문 그림의 수식과 슬라이드·블로그의 수식을 참고하세요.

이 도구가 존재하는 이유는 단순합니다. 일반 그림 도구나 슬라이드 도구는 차선이 무엇인지 알지 못하기 때문에, 무언가가 움직일 때마다 도로 형상을 다시 만들어야 합니다. drawtonomy는 차선, 교차로 등 자율주행 도메인의 어휘 자체를 기본 도형으로 다루므로, 반복 작업을 거치는 동안에도 그림이 정확하게 유지됩니다.

다음으로 할 일

목적에 맞는 시작점을 선택하세요.

활용 사례 보기 논문 그림, 설계 리뷰 슬라이드, ADAS 테스트 스케치, Lanelet2 편집, ROS 지도 주석 등. 카탈로그에서 내 용례를 찾아보세요.

다른 도구와 비교 RoadRunner, MATLAB Driving Scenario Designer, Truevision Designer, JOSM, Vector Map Builder, 슬라이드 도구, 온라인 화이트보드와의 중립적인 비교.

파일 형식 알아보기 OpenSCENARIO, OpenDRIVE, Lanelet2, esmini, Autoware HD맵, ROS 점유 격자, 시나리오 분류(기능적/논리적/구체적)가 무엇인지, drawtonomy가 어디에 위치하는지 설명합니다.

바로 시작하기 빈 캔버스에서 내보낸 장면까지 5분이면 충분합니다. 이후 튜토리얼, 가이드, 레퍼런스, 확장 개발자용 SDK로 이어집니다.

사람들이 이런 용도로 사용합니다

논문과 학위 논문 그림

LaTeX, 슬라이드, Markdown에 깔끔하게 들어가는 선명한 벡터 자율주행 시나리오 그림 — .drawtonomy.svg (drawtonomy의 기본 재편집 가능 SVG 형식), PDF, EPS로 내보낼 수 있습니다.

설계 토론용 다이어그램

차선 변경, 비보호 좌회전, 가림(occlusion) 사례 같은 상황을 몇 초 만에 스케치할 수 있습니다. 결과를 공유하고 다음 날에도 같은 캔버스에서 토론을 이어가세요.

시나리오 작성 전 스케치

OpenSCENARIO XML을 작성하기 전에 장면을 먼저 그려 보고, 스케치가 완성되면 .xosc / .xodr로 내보내세요.

지도와 ROS 주석

위성 이미지 위에 차선을 따라 그리거나, Lanelet2 OSM 지도를 편집하거나, ROS 점유 격자 위에 경로와 장애물을 주석으로 표시하세요.

일반 그림 도구보다 빠른 이유

자율주행 도메인 도형

차선, 교차로, 횡단보도, 신호등, 노면 표시, 차량, 보행자가 기본 내장되어 있습니다. 직접 만든 SVG 템플릿을 추가해 PR로 기여할 수도 있습니다.

토폴로지를 인식하는 차선

각 차선은 Next / Previous / Left / Right 연결 정보를 가집니다. 경계를 공유하는 두 차선은 같은 경계 점을 사용하므로, 한 번 드래그하면 두 차선이 함께 움직입니다.

무한 캔버스, 위성 이미지 배경

아무리 큰 레이아웃도 자유롭게 패닝·줌할 수 있습니다. 위성 또는 도로 지도 배경을 깔고 실제 위치를 따라 그릴 수 있습니다. 스냅과 공유 점 기능이 형상을 정렬해 주므로 수동 보정이 필요 없습니다.

무료, 브라우저 전용

설치, 계정, 업로드가 모두 없습니다. 저장한 drawtonomy.svg를 나중에 다시 열면 모든 연결과 겹침 관계까지 그대로 복원됩니다.

시뮬레이션·매핑 워크플로우와 연결

화이트보드 자체가 핵심이고, 아래 항목들은 그려진 다이어그램이 이후 워크플로우로 흘러가는 방식을 보여 줍니다.

논문·슬라이드용 재편집 가능 SVG

.drawtonomy.svg 형식은 브라우저, GitHub, 슬라이드에서 그대로 미리보기되는 표준 SVG이며, 모든 연결을 유지한 채 drawtonomy에서 다시 열립니다. 나중에 편집이 필요할 수 있는 모든 그림(논문, 슬라이드, 문서, 블로그)에 가장 먼저 선택해야 할 형식입니다.

Lanelet2 왕복

Autoware 샘플 지도를 포함한 Lanelet2 OSM 지도를 편집하기 위해 열고 다시 OSM으로 내보낼 수 있습니다. 기존 HD맵에 변경 사항을 스케치할 때 유용합니다.

ASAM OpenDRIVE / OpenSCENARIO

OpenDRIVE 1.8과 OpenSCENARIO 1.3을 내보낼 수 있습니다 — 시뮬레이터에서 장면을 재생하고 싶다면 esmini 즉시 실행 가능 zip으로 함께 묶을 수 있습니다.

AI Scene Generator

자연어로 시나리오를 설명하거나 OpenSCENARIO XML을 붙여넣으면 편집 가능한 캔버스를 받을 수 있습니다. 출력은 일반적인 drawtonomy 장면이므로, 다른 장면처럼 자유롭게 다듬을 수 있습니다.

바로 그리기 시작할 준비가 됐다면

도구 평가를 마치고 실제로 그림을 그리려 한다면, 문서는 네 가지 목적에 맞춰 구성되어 있습니다. 지금 하려는 작업에 맞는 섹션을 선택하세요.

튜토리얼 직접 따라 하면서 배우기. 빈 캔버스에서 완성된 장면까지 단계별로 진행합니다.

How-to 가이드 특정 작업을 끝내기 위한 레시피. 차선, 차량, 내보내기, 가져오기 작업법을 다룹니다.

레퍼런스 사실 정보를 찾아보기. 단축키, 파일 형식, 도형 카탈로그, SDK API.

설명 모델을 이해하기. drawtonomy가 왜 이런 방식으로 동작하는지 설명합니다.

확장 개발자라면

drawtonomy를 단순히 사용하는 것을 넘어 그 위에서 무언가를 만들고 싶다면 drawtonomy 확장하기를 참고하세요. SDK 소스, 예제, 레퍼런스는 이 사이트와 함께 github.com/kosuke55/drawtonomy에 있습니다.