OverType – 단순 텍스트 영역 기반 Markdown WYSIWYG 에디터
(github.com/panphora)- OverType은 Markdown 문서를 바로 시각적으로 편집할 수 있도록 설계된 오픈소스 WYSIWYG 에디터
- 이 에디터의 가장 큰 특징은 HTML textarea만을 사용해 구현되어, 경량화되고 빠른 로딩 속도를 제공
- 설치나 추가적인 외부 라이브러리 필요 없음으로, 간단한 환경에서도 바로 사용할 수 있음
- 타 Markdown 에디터 대비 실행 환경의 제약이 적고, 코드가 가독성 있고 관리가 쉬움
- 실시간 미리보기와 사용자 중심의 직관적인 UI로 초보 개발자도 쉽게 Markdown 문서를 작성 및 수정 가능함
핵심 기능 및 장점
- 경량화: 불필요한 코드나 종속성이 없어 브라우저에서 바로 실행 가능
- 간단한 구조: 단일 textarea 기반 설계로 디버깅과 확장이 용이
- WYSIWYG 지원: 사용자가 마크다운 문법을 입력하면 즉시 시각적 미리보기 제공
- 접근성: 복잡한 설치 과정 없이 누구나 접근 가능
- 사용자 친화성: 프로젝트 구조가 직관적이라 빠른 학습과 도입 가능성 높음
비교 우위
- 일반적인 WYSIWYG 에디터에 비해 용량이 매우 작음
- 대형 프레임워크 기반 에디터에 비해 유지보수와 커스터마이즈가 쉬움
- 빠른 로딩 속도와 적은 메모리 사용량으로 저사양 환경에서도 원활히 사용 가능함
활용 방안
- 간단한 기록용 마크다운 에디터
- 내장용 문서 편집기가 필요한 서비스에 손쉽게 임베드 가능
- 교육 목적 및 프로토타입 개발 환경 등에 적합함
Hacker News 의견
- 정말 멋짐, 드롭인 방식으로 모든 게 바로 동작한다면 무척 유용할 거라고 생각함, 약간 꼬집자면 마크다운을 "렌더링"한다고 하기엔 사실상 "문법 강조"에 더 가까움, 또 다른 흥미로운 방법은 CSS Custom Highlight API를 사용하는 것임, 그러면 미리보기 div가 필요 없어지고, 헤더 등에는 비고정폭 글꼴이나 다양한 텍스트 크기도 적용 가능할 것 같음 CSS Custom Highlight API에 대한 자세한 내용
- 텍스트 영역의 내용에도 하이라이트를 적용할 수 있는지 궁금함
- 애니메이션으로 확장된 데모를 보면 굵은 글씨나 점으로 바뀐 기호 등 일반 텍스트와는 확실히 다른 방식으로 포맷팅하는 것을 확인할 수 있음
- "부모 페이지에서 상속된 CSS 때문에 마진, 패딩, 라인하이트 등이 어긋나는 혼란이 있었다"는 점에 완전 공감함, 이런 경우는 웹 컴포넌트와 그 쉐도우 DOM을 쓰면 딱 맞는 해결책임, div.editor 대신 이 컴포넌트가 textarea를 래핑해주면, 기존 textarea 경험을 점진적으로 업그레이드할 수 있음
- 정말 좋아보임, 과거에 이런 접근법을 다룬 링크들을 모아둔 게 있어서 공유함
- CSS Tricks의 에디터 예제
- code-input 라이브러리
- grugnotes.com에서도 마크다운을 이런 방식으로 처리하는 것 같음
- overtype.dev 사이트를 탐험하다가 정말 멋진 rabbit hole을 발견함, hyperclay.com이라는 싱글 HTML 앱을 추천함, 정말 재미있게 즐겼음
- 이 접근이 WWW가 처음 지향했던 방향에 아주 가깝다고 생각함, 최초의 웹 브라우저도 실제로 에디터 기능을 제공했음, Tim Berners-Lee가 NeXT에서 만든 앱은 운영체제 내장 리치 텍스트 클래스(TextView)를 감싼 형태였고(이후 NSTextView로, 지금도 Mac의 TextEdit 앱에서 사용됨), 그런데 두 가지 이유로 에디팅이 사라졌음, 첫째로 HTTP PUT이 없었기에 수정된 HTML을 로컬에만 저장 가능했고, 둘째로 Mosaic이 멀티플랫폼 브라우저를 만들었지만, 에디팅 기능까지 구현하려면 너무 복잡해서 뺐기 때문임, 결국 대부분의 사용자가 편집 기능 없는 환경에 익숙해짐
- 이런 감탄 자주 안 하는데, 이번엔 정말 충격적임, 왜 이 방식이 지금처럼 폭발적으로 인기를 얻지 못하는지 이해가 안 되며, 요즘처럼 vibe coding이 뜨는 시대에는 이런 방식이 훨씬 효율적이고 낫다고 생각함
- 2000년대 중반 웹 개발에서 시도되던 멋진 실험들을 떠올리게 함, 이런 프로젝트들이 표준과 사용자 기대 수준을 한 단계 높이는 역할을 한다고 믿음
- 완성도가 상당해 보임, IDE에서 Cursor처럼 현재 커서 앞에 실버 색상의 자동완성 텍스트를 띄우고 TAB을 누르면 .value에 반영되는 기능도 구현될 수 있는지 궁금함
- 정말 괜찮음, "투명 구문 강조기"라고 부르면 더 어울릴 것 같음, 내가 만들었던 adventure 데모에서도 비슷하게 숨겨진 <input text>를 썼는데, 붙여넣기와 선택 같은 기본 기능을 살리면서 스타일링까지 완전히 통합하기 위함이었음, contentEditable보단 기본 input 박스들이 훨씬 단순해서 더 매력적임, 여기에 진짜 마크다운을 렌더링하되 textarea를 완전히 숨긴 채 포커스만 유지하고, 렌더링된 마크업의 선택 이벤트를 textarea에 그대로 에뮬레이션하면, 텍스트박스의 안정성과 아름다운 에디터를 모두 잡을 수 있다고 봄
- 재밌는 사실 하나, github의 검색창에서 구문 강조가 이런 방식으로 추가됨, 예전에 Shortwave(이메일 클라이언트)에서도 같은 방식(투명 input 위에 뷰 얹기)으로 구현했음, 그리고 이 블로그를 참고해서 검색 UX를 한 단계 도약시킬 수 있었음
Delightful Search: More Than Meets the Eye (Superhuman 블로그)
- 재밌는 사실 하나, github의 검색창에서 구문 강조가 이런 방식으로 추가됨, 예전에 Shortwave(이메일 클라이언트)에서도 같은 방식(투명 input 위에 뷰 얹기)으로 구현했음, 그리고 이 블로그를 참고해서 검색 UX를 한 단계 도약시킬 수 있었음
- 너무 멋짐, 이런 단순함이 정말 좋음, 기존 textarea에 비해 단점이 없으면서도 더 많은 이점을 제공함, textarea를 완전 새로운 레벨로 업그레이드했다고 생각함, 예전에 비슷한 프로젝트로 contextarea.com이라는 걸 만들었는데, 여기에 overtype을 결합하면 좋을 것 같음
- 고정폭 글꼴만 쓸 수 있다는 점은 단점이라고 생각함, 개발자나 프로그래머가 아니라면 제품에선 활용도가 떨어짐, 물론 프로젝트 자체는 여전히 멋짐, 단순히 확실한 제약이 있다는 의미로 얘기함
- 이걸 웹 컴포넌트로 감싸서 div+생성자 호출 없이 바로 사용할 수 있도록 고려해봤는지 궁금함
- 만약 WYSIWYG 에디터라면 이미지 미리보기가 있어야 할 텐데, 실제로는 텍스트 영역의 구문 강조만 제공하는 것 같음, 프로젝트 자체는 좋지만, 광고 문구가 좀 오해의 소지가 있음
- 이건 용어 잘못 사용한 예시임, 진정한 WYSIWYG 에디터는 포맷팅 마크업을 아예 보여주지 않음
- 텍스트를 입력하고, 강조할 부분 표시해서 "B" 버튼 누르면 굵게 변하는데, 이미지 미리보기 제외하곤 WYSIWYG라고 할 수 있음
- 이미지 기능을 못 찾았는데 혹시 내가 놓친 게 있는지 궁금함
- 912 바이트로 동작하는 spell 데모를 공유함
- 완전 장난 아닌데, 엄청 감탄함, 마크다운에 정확히 맞진 않지만 overtype보다 훨씬 많은 기능을 제공하는 WYSIWYG처럼 보임(물론 overtype도 정말 좋은 프로젝트임), 912 바이트로 이만큼 할 수 있다니 충격임, 14kb 이하로 아주 단순한 블로그 포스트를 만들고 그 안에 댓글 기능까지 지원하면서도 엄청 빠르게 로드할 수 있을 것 같음, 표현이 부족할 정도로 감탄함