TREEDI

개요

React 기반 웹 애플리케이션과 Electron 위젯, Supabase 저장 구조, OpenAI 연동을 함께 실험한 제품입니다. 483개 커밋이 축적되었습니다.

클라이언트 과제

AI를 학습 보조 도구로 쓰는 사용자는 한 답변을 읽는 순간 여러 갈래의 추가 질문이 생깁니다. 그러나 일반적인 채팅 인터페이스에서는 새 질문을 기존 맥락 위에 이어 붙여야 하므로 서로 다른 탐색 흐름이 한 대화에 뒤섞이며 컨텍스트 오염이 발생합니다. 이 문제는 답변 정확도뿐 아니라 사용자의 인지 부담으로도 이어집니다. 인터뷰 20명 중 18명이 이 문제에 공감했고, 100명 관찰 중 82명이 실제로 AI를 학습에 활용하고 있다는 점도 확인되었습니다.

솔루션

각 질문과 답변을 트리 노드로 취급하고, 하나의 응답에서 파생되는 여러 궁금증을 별도 브랜치로 분기할 수 있도록 설계했습니다. 한 주제를 깊게 파고드는 동시에 다른 방향의 탐구를 독립된 컨텍스트로 유지할 수 있습니다. 제품 경험은 웹 버전과 Electron 위젯 버전으로 병행 실험되었습니다. 웹에서는 트리 탐색과 콘텐츠 읽기 경험을 다듬고, Electron 위젯에서는 다른 작업 화면 위에서 단축키로 즉시 호출하는 사용 패턴을 검증했습니다. 기술적으로는 D3 기반 트리 시각화·OpenAI 연동·저장 구조·렌더링 레이어를 조합해 질문 생성·분기·복귀·재탐색이 하나의 흐름으로 이어지게 만들었습니다.

아키텍처

리포지토리는 `src/`·`electron/`·`server/`·`supabase/`·`api/`·`prompts/`를 중심으로 구성됩니다. `src/` 내부에는 `features/`·`domain/`·`infrastructure/`·`views/`·`components/`·`shared/`·`theme/`가 분리되어 있어 UI 레이어와 도메인 로직·공통 인프라를 한 파일에 몰아넣지 않고 역할별로 나눕니다. `electron/`은 메인 프로세스·프리로드·서비스·트레이·접근성 보조 기능을 담당하며 데스크톱 위젯 레이어를 구성합니다.

핵심 구현 하이라이트

• D3 트리 시각화로 질문과 답변의 분기 구조를 화면에서 바로 탐색
• 하나의 응답에서 여러 후속 질문을 독립 브랜치로 확장해 컨텍스트 오염 문제를 구조적으로 완화
• Electron 위젯 형태를 함께 실험해 다른 작업 중에도 단축키로 호출 가능한 사용 시나리오 검증
• 웹 버전과 데스크톱 버전 병행 운영으로 학습 도구로서의 접근성과 몰입감 테스트
• Markdown·수식·코드 하이라이트 렌더링으로 설명형 학습 콘텐츠 소비 경험 강화
• 빠른 프로토타이핑 이후 도메인·인프라·기능 단위로 구조를 나누며 유지보수 가능한 형태로 정리

성과 지표

개발 기간 기준 커밋	483 commits
핵심 문제 정의	컨텍스트 오염 해결
사용자 인터뷰	20명 중 18명 공감
사용 패턴 관찰	100명 중 82명 AI 학습 활용
핵심 인터페이스	D3 트리 시각화
확장 실험	Electron 위젯 병행

기술 스택

역량 태그

React · D3.js · Electron · AI UX · Learning Tools · Supabase · Information Architecture · Prototyping