모노드로우: Mac용 ASCII 아트 편집기

 (monodraw.helftone.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Monodraw는 다이어그램·흐름도·데이터 구조를 일반 텍스트로 그려 기술 문서와 코드 안에서 바로 읽히게 만드는 Mac용 ASCII 아트 편집기임
  • 결과물이 텍스트라 복사해 붙여넣기 쉽고, 필요할 때는 PNG·SVG 내보내기로 이미지 형태도 만들 수 있음
  • 마인드맵, ER 다이어그램, 배너 제작까지 지원해 단순 텍스트 편집보다 문서화용 시각화에 초점을 둠
  • FIGlet과 기본 148개 폰트, 선·사각형·정렬 가이드·그룹·단축키 등 반복적인 텍스트 아트 작업을 줄이는 기능을 제공함
  • macOS 11 Big Sur 이상이 필요하며, 명령줄 도구는 웹사이트에서 직접 다운로드하고 스토어에서 구매한 버전에만 포함됨

텍스트로 그리는 Mac용 시각화 도구

  • Monodraw는 Mac에서 ASCII 아트를 만들기 위한 편집기임
  • 다이어그램, 레이아웃, 흐름도 같은 구조를 텍스트 기반으로 작성할 수 있음
  • 알고리듬, 데이터 구조, 바이너리 포맷처럼 코드만으로 파악하기 어려운 대상을 시각적으로 정리하는 데 쓰임
  • 결과물이 일반 텍스트라 문서, 코드, 명세 안에 거의 그대로 삽입할 수 있음
  • 이미지가 필요할 때는 PNG와 SVG로 내보낼 수 있음

기술 문서와 데이터 모델 표현

  • 코드와 명세에 들어가는 텍스트 다이어그램은 구조를 빠르게 이해하도록 돕는 용도임
  • 데이터 구조, 알고리듬, 데이터 포맷의 시각화는 읽는 사람이 관계와 흐름을 파악하는 데 중요함
  • 코드는 작성하는 시간보다 읽는 시간이 더 많기 때문에, 텍스트 다이어그램은 유지보수와 리뷰 과정에서 도움이 될 수 있음

  • 마인드맵

    • 일반 텍스트의 단순함과 마인드맵 방식을 결합함
    • 무한 캔버스 위에서 텍스트를 원하는 위치로 옮길 수 있음
    • 텍스트 파일의 선형 구조에 묶이지 않음

  • ER 다이어그램

    • 데이터 모델을 단순한 엔터티-관계 다이어그램으로 시각화함
    • Crow’s Foot 표기법을 3가지 변형으로 지원함

텍스트 아트 제작 기능

  • 배너는 한 번의 클릭으로 만들 수 있음
  • FIGlet이 내장되어 있으며, 기본으로 148개 폰트가 포함됨
    • 사용자 지정 폰트도 지원함
    • 텍스트 박스 크기 조절, 폰트 변경, 정렬 조정을 터미널 없이 인터랙티브하게 처리할 수 있음
  • 텍스트 도구는 CoreText 기반 커스텀 텍스트 엔진으로 동작함
    • 정렬, 위치, 줄 진행 방향, 줄 이동을 조정할 수 있음
    • 클릭 한 번으로 텍스트 주변에 테두리를 추가할 수 있음
  • 선 도구는 도형 연결을 쉽게 만들며, 직교선과 계단식 선을 지원함
    • 선의 대시 패턴을 설정할 수 있음
    • 연결점으로 선을 다른 도형에 동적으로 붙일 수 있어, 도형 이동 후 다시 배치하는 수고가 줄어듦
  • 사각형 도구는 텍스트 아트에서 자주 쓰이는 박스를 만드는 기능임
    • 테두리와 배경을 몇 번의 클릭으로 지정할 수 있음
    • 그림자를 추가할 수 있음
    • 사용자 지정 연결점으로 선을 정확한 위치에 붙일 수 있음

캔버스 작업을 줄이는 보조 기능

  • 기본 드로잉 도구로 Pencil, Eraser, Bucket Fill, Picker를 제공함
    • 이미지를 캔버스 위에 오버레이해 트레이싱 용도로 사용할 수 있음
  • 그룹 기능은 여러 도형을 하나로 묶어 복제와 이동을 쉽게 만듦
  • 정렬 가이드는 콘텐츠 배치와 크기 조정 때 문자 수를 직접 세지 않아도 되게 해줌
  • 포커스 기능은 캔버스의 특정 부분에 집중할 때 나머지 도형을 잠그거나 숨길 수 있음
    • 현재 보이는 요소에 집중하도록 확대할 수 있음
  • 모든 기능은 단축키로 접근 가능함
    • 도구는 보조키 없이 단일 키 입력으로 빠르게 선택할 수 있음

macOS 지원과 명령줄 도구 조건

  • Monodraw는 텍스트 레이아웃 엔진부터 인터페이스까지 macOS용 네이티브 앱으로 설계됨
  • 텍스트 아트는 복사해 원하는 텍스트 편집기에 붙여넣는 방식으로 내보낼 수 있음
  • 시스템 요구사항은 macOS 11 Big Sur 이상임
    • 더 오래된 macOS에서는 Monodraw v1.3을 사용할 수 있으며 macOS 10.10 Yosemite 이상이 필요함
    • Monodraw v1.5는 macOS 10.14 Mojave 이상이 필요함
  • 명령줄 인터페이스는 직접 다운로드 버전에만 포함됨
    • 웹사이트에서 직접 다운로드하고 스토어에서 구매한 버전에 포함됨
    • Mac App Store 버전에는 App Sandbox 제한 때문에 명령줄 도구를 포함할 수 없음
    • 버전 관리 훅을 활용해 커밋 시 문서를 자동 생성하는 식으로 사용할 수 있음
    • JSON 출력도 지원해 프로그램에서 다루기 쉬움
  • Monodraw는 데이터를 전혀 수집하지 않는다고 밝힘

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 결국 항상 Monodraw로 돌아오게 됨
    다른 앱들은 기능과 스타일 선택지가 너무 많아서 정작 내용에 집중하기 어렵지만, Monodraw는 산만해지지 않음
    그래도 충분한 기능이 있어서 꽤 많은 걸 만들 수 있고, 특히 앵커가 마음에 듦: https://tamasruss.com/articles/monodraw-anchors

    • 다른 앱은 내용에 집중하지 못하게 한다고 하면서, Monodraw에서 반응형 구분선과 앵커 포인트를 만지는 건 괜찮다는 게 살짝 아이러니함
      그래도 기법 자체는 깔끔함
    • 클래스용 UML 박스가 정말 유용하고, 튜토리얼도 좋음

  • 이 도구는 정말 좋아하는 앱 중 하나이고, 출시됐을 때 바로 결제했음
    이런 문서 작성에 여러 번 사용함: https://github.com/ivank/potygen/blob/main/packages/potygen/...
    ASCII는 워낙 다재다능해서, 예상치 못한 곳에 보기 좋은 그림을 넣어 이해를 쉽게 만들어줌

    • 저 모서리들은 Unicode 블록 문자처럼 보임
    • 이 예시는 소프트웨어의 매력을 바로 보여주는 훌륭한 그림이라, 직접 살펴보고 싶어짐
    • 656번째 줄의 "With Expression" 다이어그램은 emacs에서는 괜찮아 보이는데, 실제 링크를 chrome에서 열면 오른쪽이 전부 깨져 보임
      문자는 정상인데, github의 글꼴 선택이 확장 부분의 “의미 있는 공백”을 잘 처리하지 못하는 듯함
    • 보여주고 싶은 줄을 선택해서 그 위치로 링크하는 편이 좋겠음

  • 웹 기반 텍스트-다이어그램 도구 목록을 관리하고 있음: https://xosh.org/text-to-diagram/
    이런 ASCII 드로잉 도구의 웹 대안으로는 https://fsymbols.com/draw/, https://textik.com/, https://asciiflow.com/#/, https://web.archive.org/web/20210503172024/https://fatiherik..., https://app.monosketch.io 등이 있음

    • 목록에 Pikchr도 고려할 만함
      SQLite 제작자가 만든 도구임: https://pikchr.org/home/doc/trunk/doc/userman.md
    • 최근 손으로 만든 다이어그램 기준으로는 이 목록의 도구들이 원하는 기능을 다 갖추지 못했음
      목록 중 대각선을 처리하는 건 https://textik.com/ 하나뿐처럼 보이고, 그것도 채우기 기능은 없는 듯함
      그리고 그리려던 다이어그램은 이런 형태였음: https://pastebin.com/NPXFS1Fi
      textik.com에서 박스와 삼각형은 만들었지만, 모서리 여러 곳을 수동으로 고치고 내부도 직접 채워야 했음
      Monodraw가 10달러뿐이어도 Mac 전용 네이티브 앱이라 결제할지 모르겠음
      웹에서 작업을 많이 하고 여러 기기를 쓰며, 다이어그램은 1년에 몇 번만 그리니 웹 기반이나 VSCode 플러그인이 더 나아 보임
    • https://fmhy.net의 목록들도 확인해볼 만함
      흥미로운 도구가 있을 수 있음
    • 목록에 넣을 만한 도구로 https://mbarkhau.github.io/asciigrid도 있음
    • 몇 년 전에 간단한 도구를 만들었고 아직 https://letterbrush.com에서 호스팅 중임

  • 이 도구가 정말 마음에 듦
    Mapless 다이어그램 작성에 사용했음: https://sebastianconcept.github.io/Mapless/guides/2024/01/28...
    그리고 Pharo VM Plugin 빌더 설정 문서화에도 썼음: https://github.com/sebastianconcept/PharoPluginBuilder

    • ASCII 드로잉 도구로 텍스트 다이어그램을 만든 뒤, 그걸 스크린샷으로 찍어 웹사이트에 올린 셈인가?
      사각형 몇 개 그리기엔 너무 돌아가는 방식처럼 보이는데, 더 쉬운 방법은 없을까?
    • 소스 코드 문서화에 쓰고 있고, 코드 안에서 버퍼나 구조체 레이아웃을 시각화할 수 있어서 매우 좋음

  • 이게 크로스 플랫폼이면 정말 좋겠음
    Linux에서도 쓰고 싶음
    완성도 높은 앱을 만드는 데 드는 노고는 이해하지만, 데스크톱 앱 도구들이 Linux, Windows, Mac을 더 잘 겨냥했으면 좋겠음
    웹 기반 앱이 늘어나는 큰 이유도 아마 이것일 듯함

    • 데스크톱 애플리케이션에 Qt를 더 많이 쓰지 않는 게 좀 의외임
      이런 종류의 앱에 정말 잘 맞음

  • 멋진 도구임
    웹 버전 대안으로 친구가 Kotlin으로 만든 https://github.com/tuanchauict/MonoSketch가 있음
    나도 Rust로 덜 완성된 버전을 만들어둠: https://github.com/huytd/ascii-d

  • 좋아 보임
    https://asciiflow.com/는 웹 기반 대안이고, 10년 동안 주로 써온 도구임

    • ASCIIFlow를 항상 쓰고 있음
      다만 브라우저에서 고정폭 글꼴을 제대로 렌더링하게 만드는 법은 아직 못 알아냈음
      이 페이지의 예시 다이어그램을 보면 됨: http://uggly.bytester.net/#how-it-works
    • 이런 다이어그램의 텍스트는 스크린 리더가 읽지 못하는 것처럼 보임

  • 이 도구는 가끔만 쓰더라도 사서 계속 보관하게 되는 종류의 앱임

    • 오래전부터 써온 건지, 아니면 좋아할 만한 소프트웨어 유형이라고 추측하는 건지 궁금함
      직접 써봤다면 생성한 다이어그램을 어떻게 활용했는지도 듣고 싶음
      다이어그램 스크린샷은 상상되지만, 원본 텍스트는 터미널 같은 곳에 넣기엔 너무 클 것 같음
    • 웹사이트 디자인도 깔끔함

  • 이 앱은 2018년에 유지보수 모드로 들어갔는데, 그 이후 바뀐 게 있나? https://blog.helftone.com/monodraw-maintenance-mode/

    • Monodraw 개발자임
      앱에 대한 좋은 반응에 감사함
      시간이 극도로 부족해서 업데이트를 더 많이 내지 못하고 있음
      많이 요청받은 기능 몇 가지를 작업 중이지만, 언제 공개될지는 약속할 수 없음
      보통 휴가 때 조금씩 진전시킴
      그래도 OS 업그레이드로 생기는 고장은 계속 고치고, 제품이 계속 동작하도록 유지할 생각임
    • https://x.com/Monodraw를 보면 실제로 업데이트가 있었던 것 같음
    • FAQ 하단의 답변이 좀 이상함
      오픈소스 프로젝트를 유지하는 일이 큰 부담이고, 완제품을 오픈소스로 공개하면 모르는 고객에게 클론이 판매되는 일이 생긴다는 이유를 들고 있음
      하지만 오픈소스로 공개하면 기여자가 일부 작업을 맡을 수 있고, 특정 라이선스는 그런 클론 판매를 막을 수 있음

  • 예전에 써봤고 좋았음
    기억상 한 가지 불만은 앵커나 크기 조절 가능한 박스 같은 멋진 기능을 유지하려면 자체 내장 파일 형식을 써야 한다는 점이었음
    Markdown 문서 안의 ASCII 그림을 바로 가리킨다고 해서 모든 기능이 자동으로 생기지는 않음
    정말 원한다면 영리한 알고리즘과 LLM으로 어느 정도 해결할 수도 있을 것 같고, 실제로 LLM을 ASCII 다이어그램 초안 작성에 많이 써서 어느 정도 성공했음
    하지만 유지보수성, 즉 박스를 박스로 다루고 이동하면 연결선도 따라오는 특성과, 이식성, 즉 모든 것이 순수 텍스트라는 특성 사이에서 좋은 균형은 아직 못 찾았음
    최신 Monodraw가 다르거나 다른 도구가 이를 해결한다면 꼭 알고 싶음
    적어도 Emacs의 artist mode보다는 Monodraw가 더 잘 맞았음

    • 흥미로운 관점임
      관리하고 싶은 기존 다이어그램이 많이 있는지 궁금함
      처음부터 만든다면 이런 추상 파일 형식이 있는 게 오히려 기대되고, PSD 같은 원본과 PNG 같은 렌더링 결과물의 관계처럼 보고 싶음
      또는 소스 코드와 바이너리의 관계와도 비슷함
      출력 산출물을 다시 의미 있는 추상 형태로 파싱하는 건 완벽하게 하기가 어렵다고 봄
답변달기