컴백부터 K-뷰티까지 — K-컬쳐의 모든 것을 메일로 받아보세요메일로 받아보기

METAL MEDIA

0toshigami/orbis-pictus

★ 9TypeScriptMIT

웹페이지 대신 클릭할 때마다 AI가 그림을 그려주는 '무한 브라우저'

Orbis Pictus는 HTML이나 링크 없이, 화면에 보이는 모든 페이지가 AI가 그때그때 생성한 이미지인 실험적 브라우저다. 아무 단어나 검색하면 그 내용을 그린 그림이 나오고, 그림 속 아무 곳이나 클릭하면 그 대상에 대한 새 그림이 다시 그려진다. flipbook.page라는 서비스에서 영감을 받아 만든 오픈소스 오마주 프로젝트다.

무엇을 하는 레포인가

  1. 검색어를 입력하면 AI가 그 내용을 담은 이미지 한 장을 그려서 '페이지'로 보여준다.
  2. 그림 속 아무 지점이나 클릭하면, 클릭 좌표를 표시한 이미지를 비전 AI에게 보내 무엇을 클릭했는지 이름을 알아내고, 그 이름으로 새 페이지를 그린다.
  3. 클릭 API가 따로 없어서 클릭 지점에 빨간 점을 그려 넣은 이미지 전체를 서버로 보내는 방식('탭 트릭')으로 원본 사이트의 동작을 재현했다.
  4. 페이지 내용(글자·구성)을 정하는 AI와 그림 스타일(재질감·색감)을 정하는 파일을 분리해, 스타일 파일 하나만 바꾸면 앱 전체 분위기가 바뀐다.
  5. 같은 위치를 반복 클릭하거나 같은 주제를 다시 찾을 때는 이전 결과를 재사용하는 3단계 캐시로 비용과 대기 시간을 줄였다.

왜 중요한가

이 프로젝트는 텍스트와 링크로 이루어진 전통적 웹 대신, 모든 화면을 AI가 실시간으로 생성하는 새로운 UI 패러다임의 가능성과 한계(비용, 텍스트 왜곡, 캐싱 전략)를 구체적인 코드로 보여준다. 생성형 이미지·비디오 모델을 실제 제품 흐름에 엮는 방법(프롬프트 분리, 캐시 계층, 페이지 버전 관리)을 참고할 수 있는 사례다.

이 레포의 용어

  • SSE(Server-Sent Events) · 서버가 클라이언트에게 실시간으로 이벤트를 계속 흘려보내는 통신 방식
  • VLM(비전 언어 모델) · 이미지를 보고 그 내용을 이해해 설명하거나 이름 붙일 수 있는 AI 모델
  • 프롬프트 · AI에게 무엇을 만들지 지시하는 입력 문장
  • 탭 디듑(TAP_DEDUP) · 같은 지점을 반복 클릭했을 때 새로 그리지 않고 이전 결과를 재사용하는 설정
  • 페이지 버전 · 같은 페이지를 편집해서 나온 여러 결과물을 하나의 그룹으로 묶어 전환할 수 있게 한 것

레포 원문 소개 (영문)

type anything, click anything inside, and it draws a new page about what you clicked. No links, no markup, every pixel made on demand. An open-source homage to flipbook.page.

GitHub에서 보기

관련 기사

주목받는 레포

레포 전체 보기 →

METAL MEDIA 최신 기사