Waveform Editor 사용 가이드
Waveform Editor는 브라우저에서 디지털 타이밍 파형을 그리고, 미리보기·보내기까지 한 번에 할 수 있는 무료 도구입니다. 내부적으로 WaveDrom과 동일한 JSON 형식을 사용합니다.
👉 도구 바로가기: Waveform Editor 열기
이 도구로 무엇을 할 수 있나요?
- 버스·클럭·리셋 등 신호 묶음을 파형으로 표현
- 프로토콜 예시(SPI, I2C, UART, APB, AXI 등) 프리셋으로 빠르게 시작
- 실시간 미리보기(확대/축소, 배경색, 전체화면)
- SVG / PNG 다운로드, SVG 클립보드 복사, 임베드용 코드 복사
- JSON을 파일로 저장·불러오기, URL 공유 링크 생성
- (로그인 시) Supabase 연동 클라우드 저장 슬롯·자동 저장
문서화, 리뷰, 강의 자료, 스펙 협의용 타이밍 다이어그램을 만들 때 유용합니다.
화면 구성
| 영역 | 설명 |
|---|---|
| JSON 편집기 | WaveDrom 형식 JSON 입력. 수정 즉시 오른쪽에 파형 반영 |
| 미리보기 | 렌더된 파형. 배경(흰색/다크/투명), 줌, Fit 버튼 |
| 프리셋 / 프로토콜 | 기본 예제, 그룹·엣지, DDR 샘플 및 SPI·I2C·UART·APB·AXI 등 |
| 툴바 | 불러오기·저장·공유, 클라우드(로그인 시) |
에디터는 줄 번호, JSON 구문 강조, 밝기/어두운 테마, 글자 크기·표시 줄 수 조절을 지원합니다.
사용 방법 (빠른 시작)
- Waveform Editor 페이지를 엽니다.
- 왼쪽 JSON을 고치면 오른쪽 Preview가 바로 갱신됩니다.
- 상단 기본 예제, SPI / I2C 등 버튼으로 샘플을 넣을 수 있습니다.
- JSON 유효 뱃지가 초록이면 파싱에 성공한 상태입니다. 빨간색이면 문법을 점검하세요.
- SVG / PNG로 보내거나, 공유 링크로 동일 JSON을 URL에 담아 공유할 수 있습니다.
로컬·브라우저 저장
- 내용은 기본적으로 브라우저 로컬 스토리지에 자동 저장됩니다.
- 불러오기 / 저장으로
.json파일을 주고받을 수 있습니다.
클라우드 저장 (선택)
- 로그인 후 제목을 정해 저장하면 슬롯에 보관됩니다. 짧은 간격으로 자동 저장도 동작합니다.
- Ctrl+S (Mac은 ⌘S)로 수동 저장을 시도할 수 있습니다.
내 프리셋
- 자주 쓰는 JSON을 이름 붙여 저장해 두었다가 다시 꺼낼 수 있습니다. (개수 제한 있음)
JSON 형식 (WaveDrom 요약)
가장 흔한 뼈대는 다음과 같습니다.
{
"signal": [
{ "name": "clk", "wave": "p......" },
{ "name": "data", "wave": "x.345x", "data": ["A", "B", "C"] }
],
"head": { "text": "제목" },
"config": { "hscale": 1 }
}
wave:p(주기 클록),0/1/x/z,.(한 칸), 숫자+data배열로 버스 값 표현 등 WaveDrom 규칙을 따릅니다.head/foot: 다이어그램 위·아래 텍스트.config.hscale: 가로 스케일.
자세한 문법은 WaveDrom 문서를 참고하세요.
단축키 (일부)
| 단축키 | 동작 |
|---|---|
| Ctrl+] / Ctrl+[ | 에디터 글자 크게 / 작게 |
| Ctrl+S | 클라우드 저장 (로그인 시) |
| F11 | 미리보기 전체화면 토글 |
| Esc | 전체화면·단축키 패널 닫기 |
에디터 툴바의 단축키 버튼으로 목록을 다시 볼 수 있습니다.
팁
- 긴 버스는
data배열과 묶어서 한눈에 읽기 쉽게 만듭니다. - 프로토콜 프리셋을 복사한 뒤 신호 이름·타이밍만 바꾸면 빠르게 커스터마이즈할 수 있습니다.
- 미리보기 가로 스크롤이 길어지면 하단 슬라이더로 에디터와 맞출 수 있습니다.
제한·주의
- 합성·시뮬레이션은 하지 않습니다. 파형 그림(다이어그램) 전용입니다.
- WaveDrom이 지원하는 JSON만 렌더됩니다. 복잡한 스킨·플러그인 일부는 웹 빌드와 다를 수 있습니다.
- 클라우드 기능은 Supabase 설정·로그인이 되어 있을 때만 사용할 수 있습니다.