▲

MonoSketch - ASCII 기반 다이어그램 제작 도구

 (monosketch.io)
5P by GN⁺ 23시간전 | ★ favorite | 댓글 1개
  • 텍스트만으로 아이디어를 시각적 설계로 변환할 수 있는 클라이언트-온리 웹 애플리케이션
  • Kotlin으로 작성된 후 JS로 컴파일된 오픈소스. SASS/Tailwind 사용
  • 사각형, 선, 텍스트 박스 등 기본 도형 블록을 조합해 복잡한 구조나 시스템 다이어그램을 표현 가능
  • 형식 지정 기능을 통해 단순한 ASCII 문자를 다양한 스타일의 시각적 요소로 변환
  • PowerPoint나 Google Slides 없이도 프레젠테이션 제작과 시각적 설명을 가능하게 하는 도구

개요

  • MonoSketch는 ASCII 스케치 및 다이어그램 제작 앱으로, 아이디어를 시각적으로 표현할 수 있는 도구
    • 텍스트 기반 인터페이스를 통해 복잡한 회로도, 시스템 구조, 네트워크 흐름 등을 ASCII 문자로 구성
    • “Unleash your ideas with ASCII”라는 슬로건 아래, 단순한 텍스트로도 시각적 설계를 가능하게 함

기본 구성 요소

  • Rectangle, Line, Text box 등 기본 그리기 기능 제공
    • 다양한 테두리 스타일, 채우기 문자, 화살표 장식 지원
    • 둥근 모서리 처리로 시각적 완성도 향상
  • 편집 기능 중심의 인터랙티브 환경
    • 무한 캔버스로 자유로운 스크롤과 확대/축소 지원
    • 자동 저장 및 다중 프로젝트 관리 기능 제공
    • 복사, 잘라내기, 붙여넣기, 중복 등 표준 편집 명령 지원
    • 레이어 관리와 스마트 스냅핑으로 정밀한 도형 정렬 가능
    • 다크 모드 지원
  • 내보내기 기능
    • 선택 영역 또는 전체 다이어그램을 텍스트로 즉시 복사
    • 단축키 지원: macOS Cmd + Shift + C, Windows/Linux Ctrl + Shift + C
  • 향후 로드맵
    • 그룹화 기능으로 복잡한 구조의 도형 관리
    • 페인트 도구를 통한 자유 곡선 및 문자 기반 드로잉
    • GitHub Gist 공유 및 URL 불러오기 등 협업 기능 확장 예정

애플리케이션 및 UI

  • app.monosketch.io 를 통해 웹에서 이용 가능
    • 검색창, 버튼, 워크스페이스, 패널 등 UI 요소를 ASCII로 표현한 목업 포함
    • 로그인 화면, 회원가입 폼 등도 ASCII 형태로 시각화
  • 프레젠테이션 제작 기능을 통해 PowerPoint나 Google Slides 없이도 발표 자료 구성 가능

기술 스택 및 라이선스

  • Kotlin/JS 기반으로 전체 애플리케이션 구현 (Kotlin 으로 개발 후 JS로 컴파일)
  • SASS 및 Tailwind CSS를 활용한 스타일링
  • Gradle 빌드 시스템 사용 (핫 리로드 개발 모드 지원)
  • Python 3.11+ 및 Pipenv를 통한 대체 개발 서버 옵션 제공
  • Apache License 2.0 오픈소스
▲
GN⁺ 23시간전  [-]
Hacker News 의견들

  • 나는 Monodraw을 사용 중임
    지금까지 한 가장 만족스러운 구매였음

    • 나도 Monodraw를 쓰는데, 한 가지 아쉬운 점이 있음
      텍스트 편집 팝업을 ESC 키로 닫는 기능이 아직도 없음
      매번 ESC를 누르게 되는데 반응이 없어서 답답함
      직접 바이너리를 패치하려 했지만 업데이트 메커니즘이 깨져서 포기했음
    • Mac에서 Windows로 옮긴 뒤 가장 그리운 앱이 Monodraw였음
      하지만 이번에 새로 나온 이 도구가 꽤 괜찮은 대체품처럼 보여서 꼭 써볼 생각임
    • 도식이나 낙서, 혹은 설정 파일 헤더를 꾸밀 때 fig와 박스, 그림자 등을 조합해 쓰기 정말 편리했음
    • Mac을 버리고 나서도 여전히 그리운 앱 중 하나임
    • 예전엔 Mac에서 Monodraw를 정말 좋아했음
      지금은 Linux를 메인으로 쓰고 있어서 대체 앱을 찾고 있었는데, 이번에 본 이 도구가 지금까지 본 것 중 가장 근접한 대안 같음

  • 비슷한 도구로는 TextPaint, Archetype (archive), Textik, Asciiflow, Fsymbols Draw 등이 있음

    • 그리고 JavE도 잊지 말아야 함

  • 헤더의 회로도는 너무 엉성해서 마치 AI가 잘못 생성한 회로도처럼 보임
    심볼 스타일이 제각각이고, 핀 라벨도 없고, 왼쪽 위의 커패시터는 단락되어 있음

    • 문제는 전문가들이 이런 오류를 바로 알아보는 게 아니라, 초보자들이 잘못 배운다는 점임
      이런 상태로 배우면 미래의 전문가들이 잘못된 기반 위에서 성장하게 됨
    • 나는 커패시터가 단락된 건 못 봤는데, 오히려 짧은 선(보통 음극)을 “+”로 표시하고 GND에 바로 연결한 걸 보고 놀랐음

  • ‘ASCII’라는 단어를 쓰는 사람들에게 한마디 하고 싶음
    Monosketch는 실제로는 ASCII만 쓰지 않음
    예를 들어 “◎”(U+25CE) 같은 유니코드 문자를 사용함

    • 그런데도 랜딩 페이지에는 “Unleash your ideas with ASCII”라고 대문짝만하게 써 있어서 좀 웃겼음 :-)
    • 역사적으로 보면, 선이나 박스 그리기 문자는 IBM PC 시절의 Code page 437에서 추가된 것이고, 진짜 ASCII는 아님
      진정한 ASCII로 박스를 그리려면 |와 -만 써야 함

  • Emacs를 쓴다면 uniline 패키지가 꽤 유용함

  • Markdeep도 ASCII 아트로 다이어그램을 그릴 수 있음
    꽤 완성도 높은 도구임

  • HTML에서 spellcheck 속성을 false로 설정하는 걸 추천함
    그렇지 않으면 “GND”, “uF” 같은 라벨마다 빨간 밑줄이 생겨서 보기 불편함

  • Graph-Easy는 기본적으로 ASCII를 생성하지만, 박스 문자, SVG, PNG 등 다양한 출력 형식을 지원함
    WYSIWYG 방식은 아니고, 다이어그램을 텍스트로 기술하면 결과를 생성해주는 구조임

  • 방금 이 도구로 간단한 다이어그램 몇 개를 만들어봤는데, 사용이 쉽고 내보내기 품질도 좋았음
    다만 개선되면 좋을 점이 있음

    1. 작은 사각형을 옮길 때 확대 대신 이동이 되도록 UI 피드백이 더 명확했으면 함
    2. 다른 탭에서 Monosketch를 열면 새 다이어그램을 동시에 만들 수 없음 — 탭 간 컨텍스트가 공유되는 듯함

  • macOS용 네이티브 앱으로는 Monodraw도 있음

    • 하지만 Monodraw는 현재 유지보수 모드이고 유료임
      이름으로 봐서는 Monosketch가 그 명확한 대체품인 듯함
답변달기