Text.js: console.log 안에 렌더링되는 풀스택 React 앱 만들기

요약

React 앱을 브라우저 콘솔의 console.log 출력으로 그려 주는 프레임워크 Text.js가 나왔습니다.

코딩 에이전트 OpenCode를 만든 어노멀리가 공개했습니다. 작성자는 거창한 소개 페이지가 전부 풍자라고 밝혔습니다. 다만 프레임워크 자체는 실제로 동작합니다.

왜 중요한가

같은 앱을 터미널에서도 그릴 수 있어, React로 TUI(터미널 화면 앱)를 만드는 도구로도 쓸 수 있습니다.
코딩 에이전트가 text mcp로 화면을 텍스트로 읽고 키를 눌러 앱을 직접 확인할 수 있습니다.

핵심 내용

화면이 바뀔 때마다 한 프레임을 console.log 한 번으로 찍고, %c 스타일 구간으로 색을 입힙니다.
React 19 커스텀 리컨실러(화면 갱신 엔진)와 Yoga 레이아웃을 거쳐 바뀐 줄만 다시 그립니다.
바뀐 칸이 없는 프레임은 아예 출력하지 않고, 프레임 사이 간격은 최소 66밀리초로 둡니다.
콘솔을 지우고 다시 찍으면 화면이 깜빡여서, 지우지 않고 아래에 이어 붙이는 방식을 택했습니다.
폴더 기반 라우팅, 서버 렌더링, 캐싱, 버셀·클라우드플레어 배포 어댑터까지 갖췄습니다.

HN 반응

어디에 쓰느냐는 질문이 이어지자 작성자는 재미로 만들었다고 답했고, 진짜 쓸모는 터미널 렌더링이라는 의견도 나왔습니다.
콘솔에서 Doom을 돌려 보라는 농담에 작성자가 Doom 데모를 내놓았지만, Firefox·Safari에서는 데모가 안 보였다는 보고도 있었습니다.

30개 표시 · 전체 51개

hmokiguess1일 전 HN

어디에 쓸 수 있을지 계속 생각해 봤는데 하나도 떠오르지 않네요. 좀 멋지긴 한데, 이게 대체 누구를 위한 건지 알려 주셨으면 해요. 왜 이런 게 필요하거나 갖고 싶어질까요?
adamdotdev1일 전 HN

안녕하세요, 만든 사람입니다! 그냥 재미로 만든 거예요 :). 풍자를 너무 세게 넣었는지 다들 재미 말고 다른 무언가로 받아들이셨는데, 정말 그냥 재미있자고 한 겁니다.
thayne1일 전 HN

풍자를 못 알아보는 사람은 언제나 있기 마련이죠.
peesem1일 전 HN

LLM 시대에는 풍자와 쓰레기(slop) 사이의 경계가 점점 얇아지네요.
antonvs1일 전 HN

이미 늦었어요. 저는 이걸 쓰는 스타트업을 바이브코딩으로 벌써 만들었거든요. 말하자면 퍼리(furry)들을 위한 우버예요. 기업 가치는 20억 달러고요.
hnlmorg1일 전 HN

그냥 재미로 만든 거라고 봅니다. 재미야말로 뭔가를 할 가장 좋은 이유 중 하나이고요.
hmokiguess1일 전 HN

아, 그건 저도 알겠어요 ㅎㅎ 그래서 마음에 들었고요. 다만 그 너머에 뭔가 더 있는지 궁금해서 생각해 본 거예요.
brap1일 전 HN

핵심 가치는 페이지 깊숙한 곳에 묻혀 있다고 봅니다. 터미널에서도 렌더링할 수 있다는 점이요. 그러니까 TUI 앱을 위한 React 같은 건가요? 그리고 OpenCode를 이걸로 만들었다고요?

그런데 왜 console.log를 대표 셀링 포인트로 내세운 거죠?
moritzwarhier1일 전 HN

JS/Node에서 console.log는 stdout과 별반 다르지 않아서 그런 게 아닐까 싶네요.
sixtram1일 전 HN

Doom을 console.log로 옮겨서 libghostty-vt로 렌더링하는 걸 보기 전까진 감흥이 없습니다.
adamdotdev1일 전 HN

https://textjs.org/doom

벌써 저만치 앞서 있다고요, 형님!
sixtram11시간 전 HN

좋아요, 인정합니다. 감탄했어요.
yipinwong1일 전 HN

소리가 어디서 나는 건지 한참 궁금했는데,
개발자 도구를 여는 걸 깜빡했네요 :)
ctippett1일 전 HN

OpenCode를 만든 그 팀인 anomalyco[1]에서 개발했습니다. 마케팅 사이트 중 어디까지가 풍자인지는 모르겠지만, 재미있어 보이네요.

[1] https://github.com/anomalyco
adamdotdev1일 전 HN

마케팅 사이트는 전부 풍자예요 :). 하지만 프레임워크는 실제로 동작하고, 콘솔에서 앱을 렌더링하고 싶으시면 도움이 될 자료도 많이 있습니다.
devilsdata1일 전 HN

데모가 있나 싶어서 콘솔을 열어 봤는데, 아쉽게도 없더군요.
adamdotdev1일 전 HN

네? 진짜요? 많이 있어야 하는데요!

Izkata12시간 전 HN

Firefox에서는 이런 오류가 잔뜩 나옵니다.

  Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self' 'sha256-0bE0Rzxw6+Rr0Vb1I3B7EN5JZ+NZ9jT+5FiVc5111kE=' 'sha256-5nr3sDO484a+ptnrxPqZmGq9mlgPZRDXnzoSNeOMyJg=' 'sha256-D3lWSzWAu/enrsttp78qOMc3fjgP0Dy4HxDkiZURtVE=' 'sha256-esHsHg/IaqocU5CUjFnT9EU/fiPT0+n92knv+GpsddU=' 'sha256-mKenitUjAI3FLQd3kfGh5iwQOrIytahc0/R5FoT6JKw=' 'wasm-unsafe-eval' https://static.cloudflareinsights.com”

Content-Security-Policy: The page’s settings blocked a JavaScript eval (script-src) from being executed because it violates the following directive: “script-src 'self' 'sha256-0bE0Rzxw6+Rr0Vb1I3B7EN5JZ+NZ9jT+5FiVc5111kE=' 'sha256-5nr3sDO484a+ptnrxPqZmGq9mlgPZRDXnzoSNeOMyJg=' 'sha256-D3lWSzWAu/enrsttp78qOMc3fjgP0Dy4HxDkiZURtVE=' 'sha256-esHsHg/IaqocU5CUjFnT9EU/fiPT0+n92knv+GpsddU=' 'sha256-mKenitUjAI3FLQd3kfGh5iwQOrIytahc0/R5FoT6JKw=' 'wasm-unsafe-eval' https://static.cloudflareinsights.com” (Missing 'unsafe-eval')
  Source: HTMLElement.prototype.focus = ((realFocu… textjs.org

devilsdata1일 전 HN

저는 Safari인데 오류는 안 보였어요. 제 환경에 문제가 있었을 수도 있고요.
cluckindan1일 전 HN

이제 그 안에 브라우저를 만들어 보세요.
adamdotdev1일 전 HN

누가 만들었어요! webcontainers 같은 걸로요. 그런데 그 트윗을 지금은 못 찾겠네요.
aogaili1일 전 HN

ㅋㅋㅋㅋ
mulhoon1일 전 HN

놀랍네요! 그런데 왜요? 확실히 재미있는 발상이에요.
baron8161일 전 HN

그런데 왜요?

자폐는 정말 대단한 약이라니까요.
adamdotdev1일 전 HN

제가 만들었고, 저는 자폐인이에요. 확인해 드립니다!
slj1일 전 HN

우리 같은 사람이 수조 명이죠.
baron8161일 전 HN

당신의 그 별난 집착이 없었다면 세상은 무너졌을 거예요.
grimgrin1일 전 HN

저는 이걸 '왜?'라고 물을 이유가 없는 새로운 능력으로 봅니다.

하나의 능력이니까, 상상력을 발휘해 보세요.

응원합니다. 멋진 아이디어예요.
andsoitis1일 전 HN

멋지네요. 별다른 설정 없이 일반 터미널 앱을 만드는 데도 쓸 수 있나요?
CMLewis1일 전 HN

stdout은 어차피 다 console.log와 비슷하니 가능하지 않을까 싶어요.

Hacker News에서 보기 ↗