생성형 AI의 ASCII 다이어그램, 좋긴 한데

생성형 AI와 기술 대화를 하다 보면 ASCII 박스 다이어그램을 자주 만나게 된다.

┌─────────────────────────────────────────────┐
│  4인 가구 단독주택 완전 자급 권장 사양      │
├─────────────────────────────────────────────┤
│  PV 용량      5~6 kW                        │
│  ESS 용량     10~15 kWh                     │
│  인버터       5kW 하이브리드                │
└─────────────────────────────────────────────┘

시스템 아키텍처, 비용 비교표, 시퀀스 흐름 등을 ┌─┐ │ └─┘ 문자로 깔끔하게 정리해준다. 터미널이나 채팅 창에서 읽기엔 충분하지만, 이걸 블로그 포스트나 발표 자료에 그대로 붙여넣으면 이야기가 달라진다.

고정폭 폰트가 아니면 줄이 어긋나고, 모바일에서는 가로 스크롤이 생기고, 무엇보다 “텍스트 덩어리"로 보여서 시선이 머물지 않는다.

매번 손으로 카드 UI를 만들자니 번거롭고, 그렇다고 ASCII 다이어그램을 안 쓰자니 생성형 AI의 구조화된 출력이 아깝다. 그래서 만들었다 — ASCII 텍스트를 붙여넣으면 카드 UI로 자동 변환해주는 도구, ascii2card.

기존 도구와 뭐가 다른가

다이어그램 도구라면 Mermaid나 PlantUML이 먼저 떠오를 것이다. 둘 다 훌륭한 도구지만, 내 상황에는 맞지 않았다.

Mermaid나 PlantUML은 별도 문법을 배워야 한다:

graph TD
    A[Cloudflare] --> B[AWS EKS]
    B --> C[RDS]

생성형 AI의 ASCII 출력을 이 문법으로 다시 옮겨 적어야 하는 거다. 변환 작업이 하나 더 끼는 셈이다.

ascii2card는 다르다. 생성형 AI가 만들어준 ASCII 텍스트를 그대로 붙여넣으면 끝이다. 새로운 문법을 배울 필요가 없다.

핵심 차이는 “입력이 무엇이냐"에 있다. Mermaid는 자체 DSL을 입력으로 받고, ascii2card는 이미 존재하는 ASCII 아트를 입력으로 받는다. 생성형 AI와의 대화에서 복사-붙여넣기 한 번이면 카드 UI가 나오고, 중간에 생성되는 JSON을 직접 편집해서 세밀하게 다듬을 수도 있다.

전체 파이프라인

ascii2card의 변환 과정은 세 단계다.

ASCII 텍스트 입력
    ↓
[1단계] 타입 감지 — 패턴 매칭으로 다이어그램 종류 판별
    - └─ ├─ 패턴 → tree
    - │──>│ 화살표 → sequence  
    - 중첩 ┌─┐ + ▼ → hierarchy
    - ──→ + └── label ──┘ → compare
    - 그 외 → 통합 파서가 줄 단위로 분석
    ↓
[2단계] JSON AST 생성
    {
      "title": "비용 최적화 아키텍처",
      "nodes": [
        { "type": "box", "title": "Cloudflare (무료)", "color": "green" },
        { "type": "kv", "items": [{ "k": "총 월 비용", "v": "~105만원" }] }
      ]
    }
    ↓
[3단계] React 렌더링
    - 노드 타입별 컴포넌트 매핑 (NodeRenderer)
    - 선택한 테마의 색상 자동 적용
    - 실시간 미리보기

이 파이프라인의 장점은 중간 포맷이 JSON이라는 점이다. ASCII 파싱 결과가 마음에 들지 않으면 JSON을 직접 수정할 수 있고, 반대로 JSON을 먼저 작성해서 카드를 만들 수도 있다. 파서와 렌더러가 JSON이라는 계약으로 분리되어 있기 때문에, 어느 한쪽만 독립적으로 개선할 수 있다.

8가지 다이어그램 타입

생성형 AI가 만드는 ASCII 다이어그램을 분석해보니, 반복적으로 등장하는 패턴이 8가지로 수렴했다.

hierarchy — 루트에서 자식으로 뻗어나가는 1:N 계층 구조. BMS 시스템처럼 하나의 컨트롤러가 여러 모듈을 관리하는 구조를 그릴 때 자주 사용된다.

sequence — 참여자 간 메시지 교환을 시간순으로 나열하는 시퀀스 다이어그램. SystemBMS와 MainBMS 사이의 CAN 통신 프로토콜을 설명할 때 │──>│, │<──│ 화살표로 표현된다.

timeline — 시간 흐름에 따른 변화를 나열하는 타임라인. 월별 발전량/소비량 추이처럼 “7월: 발전 400kWh → 잉여 100kWh” 형태로 나온다.

compare — 두 항목을 나란히 비교하는 표. 여름 vs 겨울 발전량, 3kW vs 6kW 시스템 비교 등에서 등장한다.

columns — 이모지 헤더로 구분된 2컬럼 병렬 배치. “🏡 주택"과 “🌾 농지"를 나란히 놓고 각각의 특성을 불릿으로 나열하는 식이다.

tree — └─, ├─로 표현되는 트리 구조. 메뉴 경로나 디렉토리 구조를 보여줄 때 사용된다.

kv — Key-Value 쌍의 스펙표. “PV 용량 → 5~6 kW"처럼 항목명과 값이 공백으로 구분된 표 형식이다.

box — 단일 또는 다중 카드 박스. 서비스 구성 요소를 ┌─┐ └─┘로 감싸고, 내부에 비용 정보를 포함하는 아키텍처 다이어그램의 기본 단위다.

이 8가지 타입이 조합되어 하나의 ASCII 다이어그램 안에 섞여 나오기도 한다. 예를 들어 아키텍처 다이어그램은 box + columns + kv가 한 화면에 공존한다. 파서는 이런 복합 구조를 nodes 배열에 순서대로 담아서 처리한다.

변환 전/후 비교

실제 변환 결과를 몇 가지 살펴보자.

아키텍처 다이어그램 (box + kv)

ASCII 원본에서는 ┌─┐ └─┘로 감싼 텍스트 박스들이 세로로 나열된다. Cloudflare, AWS EKS, RDS/InfluxDB/ElastiCache가 각각 박스로 표현되고, 하단에 “총 월 비용: ~105만원” 같은 요약이 붙는다.

카드 UI로 변환하면 각 박스가 색상이 구분된 카드가 되고, “무료” 키워드가 있는 Cloudflare는 자동으로 초록색, 비용이 표시된 항목은 보라색 뱃지가 붙는다. 요약 정보는 하단에 별도 KV 섹션으로 정리된다.

시퀀스 다이어그램 (sequence)

ASCII 원본의 │──── CMD ────>│ 화살표가 방향별로 색상이 다른 화살표 UI로 바뀐다. 오른쪽 방향은 주황색, 왼쪽 응답은 시안색으로 구분되어 통신 흐름이 한눈에 들어온다. 참여자 이름은 상단에 컬러 뱃지로 고정된다.

비교 다이어그램 (compare)

“여름 vs 겨울” 같은 두 컬럼 비교가 좌우 카드로 변환되고, 잉여 +82kWh ──→ 부족 -110kWh 결과는 초록/빨강 배경의 결과 박스로 표현된다. 하단의 플로우 라벨(“한전 판매/이월”)은 연결선과 함께 표시된다.

3-Column 에디터

ascii2card의 에디터는 세 개의 패널로 구성된다.

┌──────────────┬──────────────┬──────────────────┐
│  ASCII (1fr)  │  JSON (1fr)  │  Card (1.3fr)    │
│  D2Coding     │  JetBrains   │  테마별 배경      │
│  편집 가능    │  편집 가능    │  실시간 미리보기  │
└──────────────┴──────────────┴──────────────────┘

왼쪽 패널에 ASCII를 붙여넣으면, 가운데 패널에 파싱된 JSON이 자동 생성되고, 오른쪽 패널에 카드 UI가 실시간으로 렌더링된다.

양방향 편집이 가능하다는 점이 특징이다. ASCII를 수정하면 JSON과 카드가 따라 바뀌고, JSON을 직접 편집하면 카드만 갱신된다(ASCII는 유지). 내부적으로 editMode 상태가 “현재 소스가 어느 패널인지"를 추적해서, 편집 중인 패널의 데이터가 다른 패널을 덮어쓰지 않도록 한다.

상단에는 11개의 프리셋 샘플 버튼과 6개의 테마 토글이 있다. 샘플 버튼을 누르면 다양한 ASCII 다이어그램 유형을 즉시 확인할 수 있고, 테마를 전환하면 카드의 색상과 분위기가 실시간으로 바뀐다. Dark, Light, Solar, AWS, Azure, Minimal 6가지 테마를 제공한다.

다음 편 예고

이번 글에서는 ascii2card의 동기와 전체 구조를 소개했다. 생성형 AI가 만든 ASCII 다이어그램을 복사-붙여넣기 한 번으로 카드 UI로 변환할 수 있고, 중간 JSON을 통해 세밀한 커스터마이징도 가능하다.

다음 편에서는 8가지 ASCII 패턴을 자동 인식하는 파서의 구현을 다룬다. 타입 감지 우선순위, 줄 단위 파싱 흐름, 중첩 박스 처리 같은 파서 내부 로직을 상세히 풀어본다. 3편에서는 JSON을 카드 UI로 렌더링하는 과정과 테마 시스템 설계를 살펴볼 예정이다.