Entry Browser Relay
⚠️ 실험용 프로젝트입니다. 아래 먼저 읽어 주세요를 꼭 읽고 사용하세요.
소개 · 다운로드: https://smilepark2013-lang.github.io/entry-browser/ ·
엔트리 작품 ·
Releases · MIT License
엔트리(playentry.org) 블록으로 만든 텍스트 브라우저와, 그것을 진짜 인터넷과 이어 주는
중계 앱입니다. 이 저장소에 둘 다 들어 있습니다.
| 무엇 | 어디 |
|---|
| Entry Browser | 엔트리 작품. 블록 JSON 코드젠으로 만든다 | entry/ → entry/build/entry-browser.ent |
| Relay | 화면을 캡처해 요청을 읽고, 페이지를 가져와 클립보드에 넣는 Electron 앱 | src/ |
같은 중계 앱이 엔트리 OS(별도 작품)의 www 명령과도 동작합니다 (형식이 같습니다).
엔트리 작품은 인터넷에 직접 닿을 수 없습니다. 그래서 이 앱은 화면과 클립보드를
통신선으로 씁니다.
Entry Browser ──(무대 왼쪽 띠에 색 격자로 요청을 그림)──▶ 중계 앱이 화면을 캡처해 읽음
│ 페이지를 가져와 줄 목록으로 배치
Entry Browser ◀──(사용자가 Ctrl+V 로 붙여넣음)─────────── 클립보드에 base64 응답
진짜 브라우저가 아닙니다. 중계 앱이 페이지를 위에서 아래로 흐르는 문서로 다시 배치해 보내고,
엔트리는 제목(3단계)·본문·작은 글·코드·표·인용·목록·구분선을 크기와 색을 달리해 그립니다.
양식도 됩니다 — 검색칸에 쳐서 보내기, 체크박스·라디오·선택 상자, 끌어서 움직이는 슬라이더.
펼치기(<details>/<summary>) 는 ▶ 요약 줄을 누르면 엔트리 안에서 바로 펴고 접습니다 (다시 요청하지 않습니다).
(GET 양식만 보냅니다. 비밀번호·로그인·파일 올리기는 하지 않습니다)
그림과 가로 배치(열·격자)는 버립니다 (휴대폰의 '읽기 모드' 에 가깝습니다).
실제 사이트 모양으로 보고 싶다면 렌더 모드 아래의 레이아웃 모드(실험 기능)를 켭니다.
자바스크립트는 기본으로 실행하지 않습니다. 설정에서 렌더 모드를 켜면 중계 앱 안의
보이지 않는 Chromium 창이 페이지를 진짜로 열고(스크립트 실행·스크립트 리다이렉트 포함),
그려진 결과를 같은 방식으로 보냅니다. 구글 검색 결과나 playentry.org 처럼 스크립트로 그리는
사이트가 이때 보이고, 사이트의 CSS(글자색·바탕색·글꼴 크기·정렬) 도 옮겨 옵니다.
(→ 렌더 모드)
형식은 PROTOCOL.md 에 있습니다.
⚠️ 먼저 읽어 주세요
- 이 프로그램은 실험 목적으로 만든 개인 프로젝트입니다. 엔트리·네이버 커넥트재단과
관련이 없습니다.
- 화면을 캡처합니다. 고른 창 하나를 0.6초마다 찍어 엔트리 작품(Entry Browser · 엔트리 OS)이 그린 색 격자를
찾습니다. 찍은 화면은 메모리에서만 다루고, 파일로 남기거나 어디로도 보내지 않습니다.
- 요청대로 인터넷에 접속합니다. 격자에 적힌 주소를 이 컴퓨터에서 가져옵니다.
엔트리 작품은 누구나 만들 수 있으므로 악의적인 작품이 원치 않는 주소를 요청할 수
있습니다. 엔트리의 샌드박스는 작품을 가두지만, 이 앱은 그 바깥에서 돕니다.
- 클립보드를 덮어씁니다. 응답이 준비될 때마다 클립보드 내용이 바뀝니다.
- 보호 장치가 있지만 모든 위험을 막지는 못합니다.
- 내부망·루프백·링크로컬 주소 차단 (리다이렉트마다 다시 검사, 실제 접속하는 IP 를 검사)
- 쿠키를 보내지도 저장하지도 않음, 스크립트 실행 안 함 (렌더 모드를 켜지 않았을 때)
- 처음 보는 사이트는 가져오기 전에 물어봄 (설정에서 끌 수 있음)
- 형식 표시·체크섬·요청 번호가 맞는 격자에만 반응
- 격리된 환경에서 쓰기를 권장합니다.
- Windows 11 Pro/Enterprise: Windows Sandbox
- Windows Home: VirtualBox 나 Hyper-V 같은 가상 머신
- 믿을 수 없는 작품과 함께 쓰지 마세요. 사용에 따른 책임은 사용자에게 있습니다.
가져오는 사이트의 이용 약관을 지켜 주세요.
사용법
- 중계 앱을 실행하고 고지문에 동의합니다.
- 엔트리 작품이 열린 브라우저 창을 고르고
캡처 시작.
- 엔트리에서 Entry Browser 작품을 엽니다
(또는
entry-browser.ent 를 [작품 불러오기]). 엔트리의 시작 단추를 누르면 시작 페이지가 뜹니다.
- 파란 줄을 누르면 그 링크로 갑니다. 툴바의 ← → ↻ ⌂, 주소창을 눌러 주소 입력
- 키보드도 됩니다: ↑↓ 스크롤,
Backspace 뒤로, g 주소, r 다시 받기, h 처음
- 엔트리 OS 라면 터미널에서
www https://ko.wikipedia.org/wiki/엔트리
- 웹 링크를 누르면 무대 왼쪽 띠에 색 격자가 뜨고 곧바로 입력창이 열립니다.
(한 줄에 링크가 여럿이면 누른 자리의 링크로 갑니다)
앱이 격자를 읽어 페이지를 가져와 클립보드에 넣습니다 (알림이 뜹니다).
- 입력창에
Ctrl+V → Enter. 빈 칸으로 Enter 면 취소입니다.
(엔트리 OS 는 격자가 무대 전체라 Enter 를 한 번 눌러 입력창을 엽니다)
격자가 읽히지 않으면
- 엔트리 화면(무대)을 가리는 것이 없는지, 브라우저 확대가 100% 인지 봅니다.
- 다크 모드 확장 프로그램이나 색 필터(야간 모드 포함)를 끕니다. 색이 바뀌면 못 읽습니다.
- 무대가 너무 작으면(셀이 2px 아래) 못 읽습니다. 창을 키우거나 전체 화면으로 봅니다.
설치
빌드본 받기
Releases 에서 받습니다 (Windows 10/11, 64비트).
| 파일 | |
|---|
EntryBrowserRelay-Setup.exe | 설치판 |
EntryBrowserRelay-Portable.exe | 설치 없이 바로 실행 (격리 환경에 알맞음) |
entry-browser.ent | 엔트리 작품 — 엔트리에서 [작품 불러오기] |
SHA256SUMS.txt | 체크섬 |
직접 빌드하기
빌드본을 믿기 어렵다면 소스를 직접 읽고 빌드하세요. 코드가 짧고 의존성은 세 개뿐입니다
(electron, jsdom, @mozilla/readability).
준비물: Node.js 22 이상 (LTS 권장), Git
git clone https://github.com/smilepark2013-lang/entry-browser.git
cd entry-browser
npm install
바로 실행해 보기 (빌드 없이):
npm start
실행 파일 만들기:
npm run dist
dist/ 폴더에 설치판과 portable 판이 생깁니다. 폴더 형태로만 빠르게 보려면
npm run dist:dir 후 dist/win-unpacked/Entry Browser Relay.exe 를 실행합니다.
릴리스와 같은 묶음(엔트리 작품 빌드 → 시뮬레이터 검사 → 앱 빌드 → 체크섬)을 한 번에:
npm run release
읽어 볼 곳 (보안이 걱정된다면 이 셋만 보면 됩니다)
렌더 모드
기본 꺼짐. 설정에서 켜면 경고를 한 번 더 보여 줍니다.
무엇이 달라지나 — 텍스트 모드는 받은 HTML 을 그대로 읽습니다. 렌더 모드는 페이지를
보이지 않는 Chromium 창에서 열고, 로딩과 네트워크가 잠잠해질 때까지(보통 1~7초, 최대 15초)
기다린 뒤 화면에 보이는 요소만 담은 DOM 을 뽑아 같은 배치 엔진에 넘깁니다.
CSS 도 옮깁니다. 요소마다 계산이 끝난 스타일(getComputedStyle)을 적어 보내고, 배치 엔진이
엔트리가 그릴 수 있는 말로 바꿉니다 (src/lib/css.mjs).
| 옮기는 것 | 어떻게 |
|---|
| 글자색 | 줄마다 한 색 — 그 줄에서 글자를 가장 많이 차지한 색. 사이트의 링크 색도 그대로 |
| 바탕색 | 칠한 블록(머리 띠·버튼·카드)은 줄 바탕으로. 같은 색 줄 사이는 띄우지 않아 한 덩어리로 보인다 |
| 페이지 바탕 | 본문 뒤의 큰 상자를 칠한다 (어두운 사이트는 어둡게) |
| 글꼴 크기·굵기 | 등급으로 — 28px 이상 h1 · 21px h2 · 17.5px(또는 굵고 짧은 줄) h3 · 13px 이하 작은 글 |
| 정렬 | 가운데·오른쪽 정렬을 앞 공백으로 |
| 대문자(text-transform) | 글자를 바꿔 보낸다 |
| 반투명 바탕 | 아래 바탕과 섞은 색으로 |
색은 페이지마다 최대 62가지(기본 색 포함)입니다. 그림 위에 쓴 흰 글씨처럼 그림 없이는 안 읽히는 색은
바탕과의 대비가 3:1 이 되도록 고칩니다. 못 옮기는 것 — 한 줄 안의 여러 색, 글꼴 종류, 테두리·그림자·
둥근 모서리, 가로 배치(열·격자·나란한 메뉴), 배경 그림.
| 사이트 (실측) | 텍스트 모드 | 렌더 모드 |
|---|
| playentry.org | 64줄 — 메뉴만 | 스태프 선정 작품·인기 작품까지, 2.4~3.4초 |
| google.com/search | "JavaScript 를 켜세요" 안내 | 검색 결과·AI 개요, 7초 |
| github.com | 흰 바탕 글 | 어두운 바탕·가운데 정렬 큰 제목, 1.4~2.3초 |
| news.ycombinator.com | 기본 색 | 미색 바탕·주황 머리 띠, 1.5초 |
미리보기로 확인하려면 받은 줄 목록을 entry/tools/shot.mjs 로 그려 봅니다 (엔트리 시뮬레이터).
⚠ 더 위험합니다. 방문하는 사이트의 코드를 이 컴퓨터에서 실행하기 때문입니다. 가두는 방법:
- 모든 요청이 앱 안의 프록시를 지납니다 (
src/lib/proxy.mjs).
문서뿐 아니라 CSS·fetch()·웹소켓까지 텍스트 모드와 같은 내부망 차단(실제 접속 IP 검사)을
받습니다. 루프백 예외도 지워서 localhost 요청도 여기서 막힙니다.
- 메모리에만 있는 별도 세션 — 쿠키·저장소는 앱을 끄면 사라집니다.
- 샌드박스·contextIsolation, Node 없음. 권한(카메라·위치·알림…)·다운로드·팝업·대화상자·
file:// 은 모두 거절. WebRTC 는 프록시 밖 UDP 를 못 씁니다. 그림·WebGL 은 받지 않습니다.
- 창은 페이지 하나마다 새로 만들고 바로 닫습니다.
레이아웃 모드 (실제 사이트 모양) — ⚠ 불안정한 실험 기능
사이트에 따라 글이 겹치거나 자리가 어긋납니다. 엔트리 글상자는 크기 단계가 정해져 있고 글꼴도 맑은 고딕
하나라, 웹 페이지의 배치를 완전히 옮길 수 없습니다. 읽기 어려우면 끄고 줄 목록(기본)으로 보세요.
깨지는 사이트는 이슈로 알려 주시면 고칩니다.
설정에서 렌더 모드와 함께 켭니다 (Entry Browser 전용). 줄 목록처럼 페이지를 위에서 아래로 다시 짜지 않고,
Chromium 이 실제로 놓은 자리를 그대로 옮깁니다 — 가로 메뉴, 여러 열, 버튼, 카드, 정보 상자가 원래 자리에 나오고
그림도 저해상도 칸으로 나옵니다.
- 중계 앱이 페이지를 폭 600px(엔트리 본문 366px 의 0.61배)로 열고 글꼴을 맑은 고딕으로 맞춘 뒤,
상자(칠한 바탕·테두리) · 글 조각(줄마다) · 그림 자리를 잽니다. 그림은 화면을 한 번 캡처해 칸(최대 48×40)으로 줄입니다.
- 엔트리는 스크롤하지 않고 쪽을 넘깁니다 (↑↓ · PageUp/Down · 화살표 단추 · 스크롤 막대). 쪽을 넘길 때만
화가 오브젝트가 붓으로 상자·그림을 그리고, 글 크기 단계마다 하나씩 둔 원본 글상자가 자신을 복제해 글 조각을 찍습니다.
- 그림은 설정에서 고릅니다: 저해상도 칸(기본) 또는 대체 글만(회색 상자 +
[그림] 설명). 대체 글 모드는
화면 캡처를 건너뛰고 엔트리도 그림 칸을 그리지 않아 더 빠르고 가볍습니다 (네이버 8.0KB → 6.7KB).
- 링크·버튼·입력 칸을 원래 자리에서 누릅니다 (0.1.1). 링크는 글뿐 아니라 링크 상자 전체, 글 칸은 입력창,
체크박스·라디오는 □■○●, 선택 상자는 누를 때마다 다음 선택지, 보내기 단추는 GET 으로 보냅니다
(검색 칸 하나뿐인 POST 양식은 GET 으로 바꿈 · 비밀번호 칸은 받지 않음). 스크립트로만 움직이는 단추는 동작하지 않습니다.
펼치기·문단 속 링크 색 같은 줄 목록 기능은 이 모드에 없습니다.
- 한계: 글꼴 크기는 몇 단계(7~28px)로 내림, 그림자·둥근 모서리·그라데이션 없음, 페이지는 9000px(CSS)까지,
쪽마다 글 조각 300 · 상자 400개까지. 실측(깃허브 27쪽 4.9KB, 위키백과 16쪽 25KB, 해커뉴스 5쪽 18KB).
그래도 Chromium 자체의 취약점은 막지 못합니다. 렌더 모드는 특히 가상 머신이나
Windows Sandbox 에서 쓰고, 앱을 최신 Electron 으로 유지하세요 (직접 빌드한다면 npm update electron).
HTML 이 아닌 문서(글자 파일 등)는 텍스트 모드로 가져오고, 렌더가 실패하면 텍스트 모드로
한 번 더 시도합니다 (내부망이라 막힌 경우는 다시 시도하지 않습니다).
구조
src/ ── 중계 앱 (Electron)
main.mjs 메인 프로세스 — 설정, 캡처 권한, 요청 → 가져오기 → 클립보드
render.mjs 렌더 모드 — 보이지 않는 Chromium 창으로 열고 그려진 DOM 을 뽑는다
render-preload.cjs 렌더 창의 alert()·confirm()·print() 를 조용히 만든다
(render.mjs 가 계산된 CSS 를 data-eb 속성으로 적어 넘긴다)
preload.cjs 렌더러에 열어 주는 함수 목록
lib/
guard.mjs 주소 검사, 리다이렉트, 압축 해제, 글자 인코딩
proxy.mjs 렌더 모드의 모든 요청이 지나는 검문소 (같은 내부망 차단)
css.mjs 계산된 CSS → 스타일·색 번호·페이지 색표 (렌더 모드)
fontwidth.mjs 실측 글자 폭 표 — 맑은 고딕 · 나눔고딕 (만든 파일 — entry/tools/fontwidth.mjs)
layout.mjs HTML → 줄 목록 (Entry Browser 의 배치 엔진. 본문 추출: Readability)
pager.mjs 레이아웃 모드 — Chromium 이 놓은 상자·글·그림·누를 자리 → 쪽별 줄
display.mjs 줄 목록 형식 · 스타일 · 운반 글자 표 — 엔트리 쪽도 이 파일을 쓴다
simplify.mjs HTML → 간단한 HTML (엔트리 OS 의 www) · 글자 정리
payload.mjs WEB1 요청 해석, EBR1 응답 포장 (Adler-32 + base64)
snapcodec.mjs 격자 코덱 (바이트·색 규칙) — entry-os 와 같은 파일
stripcodec.mjs 왼쪽 띠 격자 (Entry Browser) — 엔트리 쪽도 이 파일을 쓴다
renderer/
index.html, style.css 화면
renderer.js 소스 고르기, 0.6초마다 프레임 캡처
capture-worker.mjs 프레임에서 격자를 찾아 읽기 (저장하지 않음)
entry/ ── Entry Browser (엔트리 작품, 블록 JSON 코드젠)
src/
program.mjs 오브젝트 배치 (겹치는 순서), 시작
theme.mjs 색·좌표의 정본 (무대 배치 그림이 맨 위에 있다)
icons.mjs SVG — 툴바 아이콘, 주소창, 본문 카드, 왼쪽 띠
page.mjs 줄 목록 받기 · 보이는 줄을 글상자 풀에 배정 · 뒤로/앞으로 · 마우스·키
web.mjs 요청(WEB2) → 입력창 → base64·UTF-8 해독(넓힌 글자 표) → 체크섬
form.mjs 양식 — 칸 받기 · 누르기 · 주소 만들어 보내기 · 슬라이더 끌기
lay.mjs 레이아웃 모드 — 쪽 넘김 · 붓으로 상자·그림 · 글 조각 복제 · 누르기 · 칸 덧그림
grid.mjs 문자열 → 왼쪽 띠 색 격자 (붓)
syll.mjs 한글 음절표 (chr()/ord() 대신)
pages/ 작품 안에 박히는 로컬 페이지 (빌드할 때 같은 배치 엔진으로 줄 목록이 된다)
tools/
build.mjs → entry/build/entry-browser.ent + preview.html
preview.mjs 엔트리 없이 화면 보기 (블록을 시뮬레이터로 돌린 결과)
test_web.mjs 시뮬레이터 검사 — 그리기 자리·마우스(빈 줄 포함)·링크 구간·요청 격자·응답·스크롤·캐시·속도
fixtures/sample.html 예시 문서 (미리보기·테스트용, 직접 쓴 내용)
dsl.mjs, blockdefs.json, simulate.mjs, tar.mjs entry-ppt 에서 가져온 코드젠 도구
(SVG 그림·마우스 블록이 실기 확인된 판)
scripts/
sync-codec.mjs entry-os 에서 코덱을 다시 복사
release-files.mjs 릴리스 파일을 dist/ 에 모으고 SHA256SUMS.txt 를 쓴다
docs-grids.mjs 소개 페이지 미니 브라우저의 진짜 요청 격자 → docs/grids.js
assets/icon.svg, icon.png 앱 아이콘
docs/ 소개 페이지 (GitHub Pages — https://smilepark2013-lang.github.io/entry-browser/)
index.html · effects.js 페이지 · 움직임 (미니 브라우저 시연, 흐름도, 복사 단추, 테마 전환)
grids.js 미니 브라우저의 요청 격자 (만든 파일 — 실제 코덱이라 중계 앱이 읽는다)
.github/workflows/release.yml 태그(v*)를 올리면 빌드·검사·릴리스
PROTOCOL.md 통신 형식
DEPLOY.md 배포 순서 (저장소 → Pages → 릴리스 → 엔트리 작품)
Entry Browser 빌드
의존성 없이 Node 만 있으면 됩니다.
npm run build:entry # entry/build/entry-browser.ent + preview.html
npm run test:entry # 시뮬레이터로 왕복 검사
entry/build/preview.html 을 브라우저로 열면 엔트리 없이 화면(시작 전 · 페이지 · 요청 중)을
볼 수 있습니다. 손으로 그린 시안이 아니라 만들어진 블록을 돌린 결과입니다.
엔트리에서 [작품 불러오기] 로 .ent 를 열면 블록이 이미 들어 있습니다.
시작 페이지를 바꾸려면 entry/pages/ 의 HTML 을 고치고 다시 빌드합니다
(소문자 태그, h1-3 p ul li pre a b i br hr 만).
글자 폭 표
엔트리에는 글 폭을 재는 블록이 없어서 중계 앱이 줄을 접고 링크 자리를 계산합니다. 그 폭의 근거가
src/lib/fontwidth.mjs — Chrome 캔버스로 잰 맑은 고딕(과 비교용 Nanum Gothic)의 글자 폭입니다.
node entry/tools/fontwidth.mjs
(Chrome 과 인터넷이 필요합니다. Windows 에서는 맑은 고딕 표도 함께 잽니다.) 엔트리 안에서 맞는지는
Entry Browser 주소창에 ruler.html 을 쳐서 글자 폭 확인 페이지로 봅니다 — 위 줄 끝의 | 와
나란한 줄('나눔' / '맑은')이 엔트리가 실제로 쓰는 글꼴입니다.
🔴 실기(2026-10-24, Windows): 글꼴 이름을 '나눔고딕' 으로 적으면 엔트리는 그런 글꼴을 못 찾아
맑은 고딕으로 그립니다 (확인 페이지의 폭이 0.2% 안에서 맞았습니다). Nanum Gothic · NanumGothic
이름으로 바꿔도(f 키) 나눔고딕은 불러와지지 않았습니다. 그래서 줄 접기·들여쓰기·정렬·링크 구간은
맑은 고딕 표로 계산합니다 (여유 3%). Windows 밖에서는 대체 글꼴이 달라 조금 어긋날 수 있지만,
맑은 고딕이 넓은 편이라 넘치기보다 줄 끝이 남는 쪽입니다.
격자 코덱은 한 벌이어야 합니다
src/lib/snapcodec.mjs 는 엔트리 OS 저장소의 tools/snapcodec.mjs 와 같은 파일
이어야 합니다 (엔트리 OS 의 www 도 이 앱으로 읽기 때문입니다). 엔트리 OS 쪽 코덱을 고쳤다면:
npm run sync-codec -- ..\entry-os
엔트리 OS 쪽 코드는 엔트리 OS 저장소의 src/web.mjs 에 있습니다.
할 수 없는 것 (지금은)
- 동영상, 소리. 그림은 줄 목록에서
[그림: 대체 글] 로 보이고, 레이아웃 모드에서만 저해상도 칸(최대 48×40)으로 나옵니다.
- 로그인, POST 양식, 파일 올리기 —
GET 양식만 보냅니다 (검색창은 됩니다).
- 자바스크립트로 내용을 그리는 사이트 — 텍스트 모드에서는 빈 페이지로 보입니다. 렌더 모드를 켜면
보이지만, 그린 결과를 한 번 찍어 올 뿐이라 버튼·탭·"더 보기" 처럼 누르면 스크립트가 바꾸는 것은
아직 동작하지 않습니다 (다음 단계: 클릭을 살아 있는 페이지에 전달).
- 글자 — 엔트리에
chr() 이 없어 표를 심은 글자만 됩니다: ASCII · 한글 · 라틴 확장 · 그리스 · 키릴 ·
구두점 · 통화 · 수학 기호 · ①② · ☆✓ · 《》「」 · 일본 가나 · ㈜㎡ · 한자(KS X 1001 4,888자).
전각 글자(（）～￦)는 보통 글자로 바꿔 보냅니다. 실제 페이지 15곳 조사에서 ? 로 바뀌는 글자가
1.3% → 0.4% 로 줄었습니다. 남는 것: 이모지, 일본 신자체·중국 간체 한자(区 国 学), 아랍·히브리,
인도·동남아 문자 (글자를 조합하는 문자라 표로는 제대로 안 그려집니다).
- 1500줄(본문 12만 바이트)을 넘는 페이지는 잘립니다.
- 문단 속 링크는 여분 글상자(본문 30개 · 작은 글 16개)를 줄 위에 얹어 파랗게 칠합니다. 한 화면에
링크가 아주 많아 여분이 모자라면, 아래쪽 줄은 예전처럼 한 색으로 그립니다 (글은 비지 않습니다).
링크가 아닌 색(CSS 의 한 줄 안 여러 색), 줄 안의 굵게·바탕색은 아직 못 옮깁니다.
라이선스
MIT © 2026 smilepark2013. 엔트리(playentry.org) · 네이버 커넥트재단과 관련이 없는 개인 실험 프로젝트입니다.
entry/tools/ 의 코드젠 도구(dsl · simulate · tar · blockdefs)는 같은 저자의 entry-ppt 프로젝트에서 가져왔습니다.
