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

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25326](https://news.hada.io/topic?id=25326)
- GeekNews Markdown: [https://news.hada.io/topic/25326.md](https://news.hada.io/topic/25326.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-25T16:32:34+09:00
- Updated: 2025-12-25T16:32:34+09:00
- Original source: [github.com/antonmedv](https://github.com/antonmedv/textarea)
- Points: 3
- Comments: 1

## Topic Body

- 브라우저 내에서 동작하며 **모든 텍스트를 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](https://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 공유만으로 문서 저장과 전달이 가능한 독특한 접근 방식**을 제공함  
- 개발자나 디자이너가 **간단한 아이디어 기록, 코드 메모, 테스트 문서 작성**에 활용하기 적합한 도구임

## Comments



### Comment 48235

- Author: neo
- Created: 2025-12-25T16:32:35+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46378554) 
- 재미있게도 나도 거의 똑같은 걸 만들었음, 다만 **지도용**으로 만들었음  
  지도 위에 그림을 그리고, 상대방이 자신의 위치를 볼 수 있게 링크를 공유할 방법이 필요했음  
  스크린샷에 주석을 다는 건 첫 번째 문제는 해결하지만 두 번째는 안 됨  
  그래서 **Vibe 엔지니어링** 느낌으로 직접 구현했음. 특정 목적을 위한 ‘즉석 앱’ 같은 개념임  
  백엔드 없이도 저렴하게 호스팅할 수 있어서 무료로 배포 가능함  
  [MapDraw 데모 링크](https://nyman.re/mapdraw/#l=60.172108%2C24.941458&z=16&d=LU8...)  
  - 완전 멋짐! 지금 여행 계획 세우는 데 쓰고 있음  
    텍스트 주석도 추가할 수 있을까? 그리고 삭제 버튼이 전체 초기화 대신 마지막 도형만 지우거나 선택 삭제가 되면 좋겠음  
  - “Vibe engineered”라는 표현이 너무 웃김. **vibe coding**은 좋지만, 그걸 엔지니어링이라 부르는 게 재밌음 :D  
  - 페이지의 **반응성**이 지금까지 써본 어떤 지도 앱보다 훨씬 좋음  
  - 정말 멋짐! 버그 리포트 하나 하자면, 지도를 이동할 때는 그림이 부드럽게 따라오는데, 확대/축소할 때는 애니메이션이 끝난 뒤에야 그림이 움직임  
  - 진짜 멋진 프로젝트임  

- 오늘 아침에 비슷한 걸 만들고 있었음  
  base64 문자열에서 replace를 쓰지 않고 `.toBase64({ alphabet: "base64url" })`과 `fromBase64({ alphabet: "base64url" })`을 쓰면 더 깔끔함  
  [MDN 문서 참고](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/fromBase64#alphabet)  

- 스펙에 따르면 URL은 최소 **8,000자**까지 가능함  
  주요 브라우저는 64,000자 이상, Chrome은 **2MB**까지 지원함  
  [RFC9110 섹션 4.1-5](https://www.rfc-editor.org/rfc/rfc9110#section-4.1-5), [StackOverflow 참고](https://stackoverflow.com/a/417184/), [Chromium 문서](https://chromium.googlesource.com/chromium/src/+/HEAD/docs/security/url_display_guidelines/url_display_guidelines.md#url-length)  
  - Chrome은 2MB, Firefox는 1MB, WebKit은 제한 없음  
    참고로 [Crime and Punishment 전체 텍스트 링크](https://medv.io/goto/crime-and-punishment-by-fyodor-dostoevsky.html)도 URL로 가능함  
  - 감시 산업이 **utm-tracker**나 캠페인 ID 같은 걸 더 넣기 위해 URL을 점점 길게 만드는 것 같음  
    인스타그램이나 유튜브 공유 링크 보면 수백 자짜리 추적 파라미터가 붙어 있음  
  - 참고로 문자(character)와 옥텟(octet)은 다름. URI-safe ASCII로 변환되지 않았다면 1문자=1바이트가 아님을 기억해야 함  

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

- 예전에 스프레드시트로 비슷한 걸 만든 적 있음  
  입력창에서 탭을 이동하고 새로고침해야 작동했음  
  [예시 링크](https://gabrielsroka.github.io/webpages/calc.htm#a1:=Rate=3.875;a2:=Years=30;a3:=NPer=Years*12;a4:=PV=644000;a5:=Pmt=Math.round(Math.pmt(Rate/12/100,NPer,PV)*100+1)/100;rows:5;cols:1)  
  전체 코드는 약 130줄 정도였음  
  [더 많은 예시](https://gabrielsroka.github.io/webpages/)  

- 이런 **URL 기반 공유** 방식을 쉽게 구현할 수 있는 작은 JS 프레임워크를 만들었음  
  [lost.js GitHub 링크](https://github.com/grothkopp/lost.js)  

- **프라이버시 관점**에서 이런 접근이 마음에 듦  
  그래서 내 [kraa.io](https://kraa.io) 에디터에도 URL 저장 옵션을 추가할까 생각 중임  
  - 다만 privacy 측면에서 `textarea.my`는 추적 스크립트를 포함하고 있음  
    Cloudflare beacon 코드가 삽입되어 있어서 주의가 필요함  
  - 그렇다면 로컬 네이티브 텍스트 에디터를 쓰는 것보다 프라이버시 측면에서 나은 점이 있을까?  

- 예전에 **기타 탭 악보용**으로 비슷한 걸 만들었음  
  [tabviewer.app](https://tabviewer.app/) 참고  
  URL이 너무 길어지는 문제는 단축 URL 서비스를 써서 해결했음  
  - 나도 같은 용도로 탭 에디터를 만들었음  
    [GitHub 저장소](https://github.com/planbnet/guitartabs)  

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

- 홍보 좀 하자면, 나도 비슷한 걸 만들었는데 아무도 관심 없었음  
  [Buffertab GitHub 링크](https://github.com/AlexW00/Buffertab)  
  - **음성 입력** 기능이 흥미로움. OpenAI API 대신 **Whisper wasm**을 써볼 생각은 없었는지 궁금함