코드를 타이핑하면, URL이 바뀝니다.
저장 버튼도, 서버도, 데이터베이스도 없습니다.
코드를 입력하는 순간 브라우저 주소창이 실시간으로 업데이트되고, 그 URL을 복사해서 공유하면 끝.
링크를 받은 사람은 열자마자 바로 수정해서 새 URL을 던질 수 있는 코드 핑퐁 도구입니다.
| 기능 | 설명 | |
|---|---|---|
| 🚀 | Zero Friction | 저장·공유 버튼이 없습니다. 타이핑 = 완성 |
| 🏓 | Instant Ping-pong | 뷰어와 에디터의 구분이 없습니다. 열고, 고치고, 링크 던지기 |
| ♾️ | Eternal Architecture | 서버·DB 0Byte. 브라우저만으로 영구 동작 |
| 🔍 | Auto Language Detection | 코드 내용을 분석해 13개 언어 자동 감지 |
| 📋 | One-Click Copy | URL 복사 버튼 한 번으로 공유 준비 완료 |
No Build, No npm, No Framework
- Frontend: 순수 HTML + CSS + Vanilla JavaScript (ES Modules)
- Syntax Highlighting: Prism.js (CDN)
- Compression: lz-string (CDN)
┌────────────┐ lz-string ┌────────────┐ Base64 ┌──────────────┐
│ Code Input │ ──────────> │ Compressed │ ───────> │ URL Hash (#) │
└────────────┘ compress └────────────┘ encode └──────────────┘
┌──────────────┐ Base64 ┌────────────┐ lz-string ┌──────────────┐
│ URL Access # │ ───────> │ Compressed │ ───────────> │ Code Restore │
└──────────────┘ decode └────────────┘ decompress └──────────────┘
- 에디터에 코드를 입력하면 300ms 디바운스 후
lz-string으로 압축 - 압축된 데이터를 URL-safe Base64로 인코딩하여
URL#hash에 삽입 history.replaceState로 브라우저 히스토리 오염 없이 URL 갱신- 링크를 받은 사람이 접속하면 역순으로 복원 → 에디터에 즉시 렌더링
code2url/
├── index.html # 진입점 — CDN 로드 + 시맨틱 HTML 셸
├── css/
│ └── style.css # 다크 테마 (Catppuccin Mocha) + 에디터 레이아웃
├── js/
│ ├── encoder.js # lz-string 압축/해제 + URL 해시 동기화
│ ├── editor.js # 코드 에디터 (textarea + Prism.js 오버레이)
│ └── app.js # 메인 오케스트레이터 (init, 이벤트 바인딩)
├── assets/
│ └── favicon.png # 파비콘
└── README.md # 리드미 문서
Auto 모드에서 자동 감지되며, 수동 선택도 가능합니다.
C · C++ · C# · Go · Java · JavaScript · Kotlin · Python · Ruby · Rust · Swift · TypeScript
- URL 길이 제한: 메신저(카카오톡, 디스코드 등)의 URL 파싱 한계는 통상 2,000자 내외
- 대응: 에디터에서 3,000자 입력 제한을 강제하여 메신저에서 링크가 끊기는 현상을 원천 차단
- 알고리즘 코드(통상 100줄 이내)는
lz-string압축 시 안전선 내에 충분히 들어옵니다