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

> Clean Markdown view of GeekNews topic #26675. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26675](https://news.hada.io/topic?id=26675)
- GeekNews Markdown: [https://news.hada.io/topic/26675.md](https://news.hada.io/topic/26675.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-02-14T09:35:24+09:00
- Updated: 2026-02-14T09:35:24+09:00
- Original source: [monosketch.io](https://monosketch.io/)
- Points: 17
- Comments: 1

## Summary

**MonoSketch**는 텍스트만으로 다이어그램을 설계할 수 있는 **클라이언트-온리 웹 애플리케이션**입니다. Kotlin으로 작성되어 JS로 컴파일되며, 사각형·선·텍스트 박스 같은 기본 도형을 조합해 복잡한 시스템 구조를 ASCII 형태로 표현합니다. 형식 지정 기능을 통해 단순한 문자를 시각적 요소로 변환하고, PowerPoint 없이도 프레젠테이션 제작이 가능합니다.

## Topic Body

- 텍스트만으로 아이디어를 시각적 설계로 변환할 수 있는 **클라이언트-온리 웹 애플리케이션**  
- **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](https://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** 오픈소스

## Comments



### Comment 51146

- Author: neo
- Created: 2026-02-14T09:35:24+09:00
- Points: 1

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

- 비슷한 도구로는 [TextPaint](https://textpaint.com/), [Archetype (archive)](https://web.archive.org/web/20210503172024/https://fatiherikli.github.io/archetype/), [Textik](https://textik.com/), [Asciiflow](https://asciiflow.com/#/), [Fsymbols Draw](https://fsymbols.com/draw/) 등이 있음  
  - 그리고 [**JavE**](http://www.jave.de/)도 잊지 말아야 함  

- 헤더의 회로도는 너무 엉성해서 마치 **AI가 잘못 생성한 회로도**처럼 보임  
  심볼 스타일이 제각각이고, 핀 라벨도 없고, 왼쪽 위의 커패시터는 단락되어 있음  
  - 문제는 전문가들이 이런 오류를 바로 알아보는 게 아니라, **초보자들이 잘못 배운다는 점**임  
    이런 상태로 배우면 미래의 전문가들이 잘못된 기반 위에서 성장하게 됨  
  - 나는 커패시터가 단락된 건 못 봤는데, 오히려 짧은 선(보통 음극)을 “+”로 표시하고 GND에 바로 연결한 걸 보고 놀랐음  

- ‘ASCII’라는 단어를 쓰는 사람들에게 한마디 하고 싶음  
  Monosketch는 실제로는 ASCII만 쓰지 않음  
  예를 들어 “◎”(U+25CE) 같은 **유니코드 문자**를 사용함  
  - 그런데도 랜딩 페이지에는 “Unleash your ideas with ASCII”라고 대문짝만하게 써 있어서 좀 웃겼음 :-)  
  - 역사적으로 보면, 선이나 박스 그리기 문자는 IBM PC 시절의 **Code page 437**에서 추가된 것이고, 진짜 ASCII는 아님  
    진정한 ASCII로 박스를 그리려면 `|`와 `-`만 써야 함  

- **Emacs**를 쓴다면 [uniline 패키지](https://github.com/tbanel/uniline)가 꽤 유용함  

- [**Markdeep**](https://casual-effects.com/markdeep/)도 ASCII 아트로 다이어그램을 그릴 수 있음  
  꽤 **완성도 높은 도구**임  

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

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

- 방금 이 도구로 간단한 다이어그램 몇 개를 만들어봤는데, 사용이 쉽고 **내보내기 품질**도 좋았음  
  다만 개선되면 좋을 점이 있음  
  1. 작은 사각형을 옮길 때 확대 대신 이동이 되도록 UI 피드백이 더 명확했으면 함  
  2. 다른 탭에서 Monosketch를 열면 **새 다이어그램을 동시에 만들 수 없음** — 탭 간 컨텍스트가 공유되는 듯함  

- macOS용 네이티브 앱으로는 [Monodraw](https://monodraw.helftone.com)도 있음  
  - 하지만 Monodraw는 현재 **유지보수 모드**이고 유료임  
    이름으로 봐서는 Monosketch가 그 **명확한 대체품**인 듯함