AI가 만든 관계도를 클릭 한 번으로 다룰 수 있도록

AI에게 관계도를 만들게 한다.

복사한다.

북마크릿 (Bookmarklet)을 누른다.

그것만으로, 브라우저에서 관계도를 다룰 수 있도록 만들었습니다.

AI 출력
↓
Open in FlowLite（북마크릿）
...

무엇을 할 수 있는가

예를 들어 AI에게 이렇게 부탁합니다.

드래곤볼의 인물 관계도를 FlowLite 형식으로 작성해 주세요.
가족, 사제, 라이벌, 적대 관계를 포함해 주세요.

AI가 FlowLite 형식의 텍스트를 출력합니다.

그것을 복사해서,

Open in FlowLite（북마크릿） 을 누른다.

관계도로서 열립니다.

테스트해 볼 수 있습니다

북마크릿 배포 페이지는 여기입니다.

현재 테스트 버전 FlowLite는 여기입니다.

FlowLite란

FlowLite는 평문(Plaintext)으로부터 관계도를 만드는 HTML 도구입니다.

예를 들어 다음과 같이 작성합니다.

title: Dragon Ball Map
direction: Cluster
#nodes
...

이것을 열면, 브라우저 상에서 움직일 수 있는 관계도가 됩니다.

노드를 움직인다.

관계를 편집한다.

태그나 색상으로 정리한다.

그런 것들이 가능합니다.

무엇이 불편했는가

FlowLite는 AI와 궁합이 좋습니다.

AI는 구조를 쓰는 것에 능숙합니다.

인물 관계.

신화.

논문의 영향 관계.

소프트웨어 구성.

프로젝트 구조.

상당히 많이 만들 수 있습니다.

하지만, 매번 이 흐름이었습니다.

AI에게 부탁한다
↓
FlowLite 형식이 나온다
...

한 번이라면 괜찮습니다.

하지만, 몇 번이고 수정하려면 번거롭습니다.

인물을 늘리고
사제 관계를 추가하고
적대 관계를 정리하고
...

그때마다 붙여넣는 것이 귀찮았습니다.

그래서 북마크릿으로 만들었습니다

하고 싶었던 것은 단순합니다.

AI가 출력한 FlowLite 텍스트를,
그대로 열고 싶다

그래서 북마크릿을 만들었습니다.

지금은 이렇습니다.

이것으로 끝입니다.

북마크릿 배포 페이지

배포 페이지에는 최소한으로 필요한 것들을 두었습니다.

할 수 있는 것은 이것입니다.

북마크릿 복사
AI 의뢰용 사양서 복사
테스트용 FlowLite 텍스트 복사
...

FlowLite를 자주 사용한다면, 여기서 북마크릿을 등록해 두면 편리합니다.

원리

내용은 심플합니다.

북마크릿
↓
클립보드 또는 선택된 텍스트를 읽음
...

긴 텍스트를 URL에 담는 방식이 아닙니다.

브라우저 내부에서 전달합니다.

도식화하면 다음과 같습니다

┌─────────────────────┐
│ ChatGPT / AI Output │
│ FlowLite plaintext │
...

포인트는 FlowLite 본문을 URL에 담지 않는 것입니다.

북마크릿이 FlowLite 페이지를 열고,

그 페이지로 postMessage를 통해

평문을 전달합니다.

왜 postMessage로 했는가

처음에는 URL에 전부 넣는 방법도 생각했습니다.

작은 도라면 이것으로도 작동합니다.

하지만, 관계도는 금방 길어집니다.

드래곤볼의 인물 관계도 정도만 되어도, 수천~1만 자 정도가 됩니다.

URL에 담으면 다루기 어렵습니다.

그래서 북마크릿에서 연 페이지로 postMessage를 통해 전달하는 형태로 만들었습니다.

이 방식이 긴 FlowLite 평문이라도 다루기 쉽습니다.

오작동 방지

일반 문장을 실수로 읽어들이지 않도록 하고 있습니다.

다음과 같은 FlowLite 서식이 있을 때만 읽어들입니다.

title:
direction:
#nodes
...

이것이 하나도 없다면, 임포트(Import)하지 않습니다.

즉, 일반 문장을 복사하고 있는 상태에서 눌러도, FlowLite 본문으로는 읽어들이지 않습니다.

Pages 측에서는 무엇을 하고 있는가

GitHub Pages 측에는 수신 가능한 FlowLite를 배치해 두었습니다.

이 페이지는 북마크릿으로부터 보내진 메시지를 받습니다.

대략적으로 말하면, 다음과 같은 역할입니다.

메시지(message)를 수신
↓
FlowLite 형식의 본문을 취득
...

북마크릿 측은 ACK가 돌아오면 송신을 멈춥니다.

이로써 로딩 타이밍의 차이에 대응할 수 있게 되었습니다.

GitHub Pages의 전송량에 대하여

이 방식에서는 FlowLite 본문 그 자체를 GitHub Pages에 업로드하는 것이 아닙니다.

GitHub Pages가 배포하는 것은 기본적으로 FlowLite의 HTML입니다.

FlowLite 본문은 브라우저 내에서 postMessage로 전달될 뿐입니다.

따라서 그림이 커지더라도 Pages의 전송량에 직접적인 영향을 미치지는 않습니다.

먼저 문제가 되는 것은 아마도 전송량보다는 브라우저 측의 렌더링 성능일 것입니다.

요약

이전에는 이랬습니다.

AI 출력
↓
복사
...

지금은 이렇습니다.

AI의 출력이 읽는 것에서,

그대로 여는 것이 되었습니다.

작은 개선이지만, 경험은 상당히 달라졌습니다.

FlowLite는 여기 있습니다.

북마크릿(Bookmarklet)은 여기 있습니다.

Discussion