- Period
- 26.07 - Present
- Scope
- Personal
- Stack
- TypeScript · Cloudflare Workers · D1 · R2 · Queues · Workers AI · Images · Media Binding · Browser Binding · Telegram Bot API · Llama 3.2 11B Vision
Background
이 작업은 디자인 레퍼런스를 더 빠르게 찾고, 나중에 쉽게 다시 활용할 수 있는 방법을 만들고 싶다는 문제의식에서 출발했습니다.
AI는 여전히 디자인 작업에서 한계가 있고, 원하는 결과에 가까운 산출물을 얻으려면 명확한 레퍼런스가 필요합니다. 하지만 실제 레퍼런스는 X, Pinterest, Dribbble처럼 여러 플랫폼에 흩어져 있어 찾고 분류하고 저장하는 과정이 반복됩니다. 저장한 뒤에도 다시 참고하려면 각 플랫폼을 일일이 찾아야 했습니다.
이 문제를 해결하기 위해 여러 플랫폼의 레퍼런스를 한곳에서 관리하고, 사용자가 직접 분류하지 않아도 되는 시스템을 만들었습니다. 마음에 드는 레퍼런스를 봇에게 전달하면 콘텐츠를 자동으로 분석·분류·저장합니다. 핵심은 레퍼런스를 모으는 데 그치지 않고, 탐색 이후의 정리와 재사용까지 하나의 흐름으로 연결하는 것입니다.
현재는 웹 서비스가 없지만, 앞으로는 여러 사용자가 양질의 레퍼런스를 공유하고 탐색하는 플랫폼으로 확장할 수 있습니다. 데이터가 충분히 쌓이면 사용자의 취향과 비슷한 레퍼런스를 자동으로 추천하거나, AI가 먼저 레퍼런스를 수집하고 제안하는 구조로 발전시킬 수 있습니다.
Architecture
아키텍처와 기술 스택은 Cloudflare Agents Week에서 영감을 받아 설계했습니다. 별도 Express/Hono 서버 없이 fetch()와 queue() 핸들러를 사용합니다. D1에는 레퍼런스 메타데이터, 처리 상태, 분석 기록, 사용자 수정 내용을 저장하고, R2에는 최적화된 이미지와 영상을 저장합니다. Queues는 X 수집, 미디어 변환, AI 분석을 비동기로 처리하며, Workers AI는 제목, 요약, publisher, asset kind, category, styles, tags를 생성합니다.
이미지는 Cloudflare Images로 WebP로 변환하고, 영상은 Media Binding으로 MP4 변환과 포스터 이미지 추출을 처리합니다. oEmbed와 일반 HTTP 수집이 실패하면 Browser Binding으로 X 페이지를 렌더링합니다. Telegram Bot API는 webhook 입력과 진행·검토 메시지, inline keyboard를 처리합니다.
flowchart LR
User["사용자<br/>Telegram"] -->|"1. X 링크 전송"| TG["Telegram Bot API"]
TG -->|"2. Webhook POST"| Worker["Cloudflare Worker<br/>fetch handler"]
Worker -->|"3. 초안 생성·중복 확인"| D1["Cloudflare D1<br/>상태·메타데이터"]
Worker -->|"4. AnalysisJob 등록"| Queue["Cloudflare Queue"]
Worker -->|"5. 접수 응답"| TG
Queue -->|"6. 비동기 작업 실행"| Consumer["Worker queue handler"]
Consumer -->|"7. X 콘텐츠 수집"| X["X 수집 계층"]
X -->|"8. 1차: oEmbed"| OEmbed["X oEmbed API"]
X -->|"9. 2차: HTTP metadata"| HTTP["X 페이지 HTTP 요청"]
X -->|"10. 3차 fallback"| Browser["Browser Binding"]
Consumer -->|"11. 미디어 처리 요청"| Media["미디어 처리 계층"]
Media -->|"12. 이미지 변환"| Images["Images Binding"]
Media -->|"13. 영상 변환·포스터 추출"| MediaAPI["Media Binding"]
Media -->|"14. draft 미디어 저장"| R2["Cloudflare R2<br/>draft/"]
Consumer -->|"15. 분석 prompt 전달"| AI["Workers AI"]
AI -->|"16. JSON 분석 결과 반환"| Consumer
Consumer -->|"17. 분석 결과·미디어 메타데이터 저장"| D1
Consumer -->|"18. 검토 메시지 전송"| TG
TG -->|"19. 승인·수정·재분석·취소"| Worker
Worker -->|"20. 버튼 동작에 따른 상태 변경"| D1
Worker -->|"21. 승인 시 draft → approved"| R2
Worker -->|"22. 승인된 결과를 기억으로 저장"| Memory["curation_memories<br/>D1"]
전체 흐름은 Telegram에 X 링크를 보내면 Worker가 Queue에 분석 작업을 등록하고, X 게시물과 미디어를 수집한 뒤 최적화·분석하는 방식입니다. 사용자는 Telegram에서 결과를 검토하고, 승인하면 D1과 R2에 최종 저장됩니다. 수정·재분석·취소를 선택하면 해당 작업을 재처리합니다.