본문으로 건너뛰기
피드

프로즈미러 제작자가 새 브라우저 리치 텍스트 에디터 ‘Wordgard’를 공개

frontend 약 3분
vote
0
댓글
북마크

Wordgard는 브라우저 안에서 구조화된 리치 텍스트 에디터를 만들기 위한 오픈소스 자바스크립트 라이브러리다. 자유 HTML 편집기가 아니라, 앱이 지원할 문서 구조를 스키마로 정확히 통제하는 방향을 택했다.

  • 1

    문서 구조를 스키마로 정의하고 커스텀 문서 요소를 만들 수 있음

  • 2

    대부분 기능이 확장으로 구현돼 필요한 부분을 교체하거나 수정하기 쉬운 구조임

  • 3

    접근성, 키보드 사용, 모바일, 국제화, 오른쪽에서 왼쪽으로 쓰는 문서, 협업 편집을 지원함

  • Wordgard는 브라우저 리치 텍스트 에디터를 만들기 위한 오픈소스 자바스크립트 라이브러리임

    • 이름은 ‘단어를 기르는 정원’이라는 뜻으로 소개됨
    • 라이선스는 MIT임
    • 자유롭게 HTML을 편집하는 도구가 아니라, 앱이 허용하는 콘텐츠 구조를 정확히 통제하는 에디터 시스템에 가까움
  • 가장 큰 방향은 스키마 기반 편집임

    • 문서 구조를 정확히 정의할 수 있음
    • 커스텀 문서 요소를 만들 수 있음
    • 테이블, 중첩 리스트, 캡션이 달린 그림, 커스텀 구조 같은 구조화 콘텐츠를 다룰 수 있음
  • API 설계에 꽤 힘을 준 라이브러리로 소개됨

    • 복잡하고 요구사항 많은 커스텀 에디터의 기반으로 쓰기 좋다는 점을 내세움
    • 대부분 기능이 확장으로 구현돼 있어, 기본 동작이 제품과 안 맞으면 교체하거나 수정할 수 있음
    • 코드의 큰 부분을 함수형 스타일로 작성해 명확성과 테스트 용이성을 노렸다고 함

ℹ️참고

> 웹 리치 텍스트 에디터는 겉보기엔 입력창 하나처럼 보이지만, 실제로는 문서 모델, 선택 영역, IME, 접근성, 붙여넣기, 협업 편집이 다 얽히는 꽤 빡센 영역임.

  • 접근성과 국제화도 주요 기능으로 들어가 있음

    • 스크린 리더 사용자, 키보드만 쓰는 사용자, 모바일 기기를 지원한다고 밝힘
    • UI 국제화도 지원함
    • 오른쪽에서 왼쪽으로 쓰는 문서와 양방향 콘텐츠도 콘텐츠·인터페이스 양쪽에서 방향 인식이 들어감
  • 협업 편집도 지원 범위에 포함됨

    • 여러 사용자가 같은 문서를 동시에 편집할 수 있음
    • 동시 편집 변경을 병합하는 기능을 제공한다고 소개됨
  • 운영 방식은 조금 독특함

    • 버그 리포트는 환영하지만, 풀 리퀘스트는 받지 않는다고 명시함
    • 상업적으로 사용한다면 법적 의무는 아니지만 유지보수를 후원하길 기대한다고 적어둠
    • 즉, 오픈소스이긴 하지만 개발 방향은 제작자가 강하게 통제하는 모델임

웹 에디터를 직접 붙여본 사람이라면 ‘그냥 contenteditable 쓰면 되지’가 얼마나 위험한 말인지 안다. Wordgard는 복잡한 제품용 에디터를 만들 때 필요한 구조 통제, 확장성, 협업 편집을 정면으로 다루는 라이브러리로 보임.

댓글

댓글

댓글을 불러오는 중...

frontend

DOM을 직접 조작하는 오픈소스 웹 에이전트 SDK, dotdotduck 공개

dotdotduck은 기존 웹사이트 안에 삽입돼 DOM을 직접 보고 조작하는 AI 에이전트 SDK다. 챗봇을 구석에 붙이는 방식이 아니라, Ctrl+K 팔레트, 인라인 AI, 음성, Dwell 제스처, 번역, 분석까지 한 패키지로 제공하려는 쪽에 가깝다.

frontend

개인 웹사이트에 JSON-LD 넣는 법, 검색엔진과 크롤러가 내 사이트를 제대로 읽게 만들기

개인 웹사이트에 JSON-LD 구조화 데이터를 추가해 검색엔진과 크롤러가 사이트, 사람, 글, 프로젝트를 더 정확히 이해하게 만드는 실전 가이드야. WebSite, Person, ProfilePage, BlogPosting 같은 노드를 어떻게 연결하고 어느 페이지에 넣어야 하는지 예시 중심으로 설명해.

frontend

Deno, 웹 프로젝트를 데스크톱 앱으로 묶는 `deno desktop` 공개

Deno가 TypeScript 파일 하나부터 Next.js 앱까지 데스크톱 앱으로 패키징하는 `deno desktop`을 공개했다. 아직 안정 릴리스는 아니고 Deno v2.9.0 canary에서만 쓸 수 있지만, 운영체제 WebView 기반의 작은 바이너리, 프레임워크 자동 감지, 내장 자동 업데이트까지 한 번에 노린다.

frontend

파비콘 안에 웹사이트를 숨겨 넣은 개발자, 진짜 됨

한 개발자가 웹사이트의 파비콘 이미지를 작은 저장소처럼 사용해 HTML을 픽셀 RGB 값 안에 넣고, 브라우저에서 다시 읽어 렌더링하는 실험을 했다. 208바이트짜리 HTML payload에 4바이트 길이 헤더를 붙여 총 212바이트를 만들었고, 이를 9x9 픽셀 PNG 안에 87% 사용률로 저장했다.

frontend

스크린이 절대 못 보여주는 색은 어디에 있을까

이 글은 우리가 화면에서 보는 색이 인간이 볼 수 있는 색 전체가 아니라, sRGB와 Display-P3 같은 색역 안에 갇힌 일부라는 점을 파고든다. 특히 숲, 바닷속, 새와 나비의 구조색, 생물발광, 교통신호 LED 같은 실제 세계에는 모니터와 카메라가 제대로 담지 못하는 청록색과 녹색 계열이 꽤 많다는 얘기다. 디스플레이, 카메라, 조명, 렌더링을 다루는 개발자라면 “색상값 하나”가 생각보다 물리와 표준의 타협이라는 걸 체감하게 된다.