브라우저에서 실행되고 URL에 모든 내용을 저장하는 미니멀리스트 텍스트 에디터

 (github.com/antonmedv)
3P by GN⁺ | ★ favorite | 댓글 1개
  • 브라우저 내에서 동작하며 모든 텍스트를 URL 해시로 저장하는 경량 텍스트 편집기
  • 입력 내용은 deflate 압축을 통해 URL 길이를 줄이고, 백엔드 서버 없이 완전한 클라이언트 측에서 작동
  • 자동 저장(500ms 지연) , 다크 모드, 모바일 대응 등 기본 편의 기능을 포함
  • 문서 제목을 # Title로 지정하거나, <article> 태그에 스타일 속성을 추가해 URL에 함께 저장 가능
  • URL 공유만으로 문서 전달이 가능해, 간단한 메모나 코드 스니펫 공유에 유용함

개요

  • textarea.my는 브라우저에서 완전히 실행되는 미니멀리스트 텍스트 에디터
    • 모든 데이터는 URL 해시에 저장되어 별도의 서버나 데이터베이스가 필요 없음
    • JavaScript로 제작되어 설치 과정 없이 즉시 사용 가능

주요 기능

  • 텍스트 압축(Compression magic)

    • 입력된 텍스트를 deflate 알고리듬으로 압축해 URL 길이를 최소화
    • 약 500자 내외의 URL로 긴 노트를 공유 가능

  • URL 기반 저장 및 공유

    • 작성된 내용이 URL 해시에 포함되어, 해당 링크를 복사해 공유 가능
    • 서버 저장 없이도 링크만으로 문서 복원 가능

  • 자동 저장 및 다크 모드

    • 입력 후 500ms 지연된 자동 저장 기능 제공
    • 시스템의 색상 모드 설정을 인식해 다크 모드 자동 적용

  • 모바일 친화적 인터페이스

    • 스마트폰에서도 동일한 기능으로 문서 작성 가능
    • 반응형 디자인으로 이동 중 사용에 적합

  • 백엔드 없는 구조

    • “Zero servers were harmed”라는 문구처럼 완전한 클라이언트 기반 앱
    • 서버 부하나 개인정보 저장 문제 없음

사용 방법

  • textarea.my 접속 후 바로 입력 가능
  • 입력할수록 URL이 길어지는 것을 확인 가능
  • URL을 복사해 다른 사람과 공유 가능

고급 팁(Pro tips)

  • 문서 첫 줄에 # Title을 입력하면 페이지 제목으로 설정
  • 데이터는 localStorage와 URL 양쪽에 저장되어 이중 보존
  • 개발자 도구에서 <article> 태그에 style 속성을 추가하면, 해당 스타일도 URL에 함께 저장

예시 링크

  • Fyodor Dostoevsky의 Crime and Punishment 예시 문서 제공
  • ChatGPT가 작성한 An Ode to Comic Sans 예시 문서 제공

기술적 특징

  • JavaScript 기반으로 제작
  • 서버 요청 없이 URL 해시와 localStorage만으로 데이터 관리
  • 단순한 구조로 보안 위험 최소화 및 빠른 로딩 속도 확보

결론

  • textarea.my는 서버리스 환경에서 동작하는 초경량 텍스트 편집기로,
    URL 공유만으로 문서 저장과 전달이 가능한 독특한 접근 방식을 제공함
  • 개발자나 디자이너가 간단한 아이디어 기록, 코드 메모, 테스트 문서 작성에 활용하기 적합한 도구임

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 재미있게도 나도 거의 똑같은 걸 만들었음, 다만 지도용으로 만들었음
    지도 위에 그림을 그리고, 상대방이 자신의 위치를 볼 수 있게 링크를 공유할 방법이 필요했음
    스크린샷에 주석을 다는 건 첫 번째 문제는 해결하지만 두 번째는 안 됨
    그래서 Vibe 엔지니어링 느낌으로 직접 구현했음. 특정 목적을 위한 ‘즉석 앱’ 같은 개념임
    백엔드 없이도 저렴하게 호스팅할 수 있어서 무료로 배포 가능함
    MapDraw 데모 링크

    • 완전 멋짐! 지금 여행 계획 세우는 데 쓰고 있음
      텍스트 주석도 추가할 수 있을까? 그리고 삭제 버튼이 전체 초기화 대신 마지막 도형만 지우거나 선택 삭제가 되면 좋겠음
    • “Vibe engineered”라는 표현이 너무 웃김. vibe coding은 좋지만, 그걸 엔지니어링이라 부르는 게 재밌음 :D
    • 페이지의 반응성이 지금까지 써본 어떤 지도 앱보다 훨씬 좋음
    • 정말 멋짐! 버그 리포트 하나 하자면, 지도를 이동할 때는 그림이 부드럽게 따라오는데, 확대/축소할 때는 애니메이션이 끝난 뒤에야 그림이 움직임
    • 진짜 멋진 프로젝트임

  • 오늘 아침에 비슷한 걸 만들고 있었음
    base64 문자열에서 replace를 쓰지 않고 .toBase64({ alphabet: "base64url" })과 fromBase64({ alphabet: "base64url" })을 쓰면 더 깔끔함
    MDN 문서 참고

  • 스펙에 따르면 URL은 최소 8,000자까지 가능함
    주요 브라우저는 64,000자 이상, Chrome은 2MB까지 지원함
    RFC9110 섹션 4.1-5, StackOverflow 참고, Chromium 문서

    • Chrome은 2MB, Firefox는 1MB, WebKit은 제한 없음
      참고로 Crime and Punishment 전체 텍스트 링크도 URL로 가능함
    • 감시 산업이 utm-tracker나 캠페인 ID 같은 걸 더 넣기 위해 URL을 점점 길게 만드는 것 같음
      인스타그램이나 유튜브 공유 링크 보면 수백 자짜리 추적 파라미터가 붙어 있음
    • 참고로 문자(character)와 옥텟(octet)은 다름. URI-safe ASCII로 변환되지 않았다면 1문자=1바이트가 아님을 기억해야 함

  • 왜 데이터를 URL에 저장해서 부풀리는지 모르겠음. localStorage에 저장하면 충분하지 않음?

  • 예전에 스프레드시트로 비슷한 걸 만든 적 있음
    입력창에서 탭을 이동하고 새로고침해야 작동했음
    예시 링크
    전체 코드는 약 130줄 정도였음
    더 많은 예시

  • 이런 URL 기반 공유 방식을 쉽게 구현할 수 있는 작은 JS 프레임워크를 만들었음
    lost.js GitHub 링크

  • 프라이버시 관점에서 이런 접근이 마음에 듦
    그래서 내 kraa.io 에디터에도 URL 저장 옵션을 추가할까 생각 중임

    • 다만 privacy 측면에서 textarea.my는 추적 스크립트를 포함하고 있음
      Cloudflare beacon 코드가 삽입되어 있어서 주의가 필요함
    • 그렇다면 로컬 네이티브 텍스트 에디터를 쓰는 것보다 프라이버시 측면에서 나은 점이 있을까?

  • 예전에 기타 탭 악보용으로 비슷한 걸 만들었음
    tabviewer.app 참고
    URL이 너무 길어지는 문제는 단축 URL 서비스를 써서 해결했음

  • 멋진 프로젝트지만, “Crime and Punishment”를 불러오니 내 모바일 브라우저가 크래시났음
    URL이 그 정도 ‘벌’을 견디도록 설계된 건 아닌 듯함

  • 홍보 좀 하자면, 나도 비슷한 걸 만들었는데 아무도 관심 없었음
    Buffertab GitHub 링크

    • 음성 입력 기능이 흥미로움. OpenAI API 대신 Whisper wasm을 써볼 생각은 없었는지 궁금함
답변달기