LLM을 사용하여 조사나 구현 상담을 하다 보면, 하나의 답변이 길어지는 경우가 있습니다.

긴 답변 자체는 편리하지만, 그 이후에 심층적으로 파고들다 보면 다음과 같은 문제가 발생합니다.

• 어떤 답변에 대한 질문이었는지 알 수 없게 됨
• 이전 설명을 찾기 위해 여러 번 스크롤해야 함
• 여러 주제가 하나의 채팅 이력에 섞여 버림
• 나중에 다시 볼 때, 논의의 구조를 파악하기 어려움

특히 기술 조사나 코드 설계 상담에서는 "이 설명의 두 번째 부분만 조금 더 자세히", "아까 CNN 이야기로 돌아가서"와 같이, 답변의 일부를 기점으로 대화를 이어가고 싶은 상황이 자주 발생합니다.

그래서 OpenCode에 우측 Answer Tree sidebar를 추가하여, LLM의 긴 답변과 심층 질문을 트리 구조로 관리할 수 있도록 했습니다.

리포지토리는 여기 있습니다.

OpenCode Answer Tree는 OpenCode에 「답변 트리 (Answer Tree)」를 추가하는 프로젝트입니다.

LLM의 긴 답변을 노드 (node)로 저장하고, 그 답변에 대한 추가 질문을 자식 노드 (child node)로 정리합니다.

예를 들어, 일반적인 채팅에서는 다음과 같이 시계열로 흘러가는 대화를,

Transformer について教えて (Transformer에 대해 알려줘)
Self-Attention を詳しく教えて (Self-Attention에 대해 자세히 알려줘)
Multi-Head Attention はなぜ必要？ (Multi-Head Attention은 왜 필요해?)
...

Answer Tree에서는 다음과 같은 구조로 취급합니다.

1 Transformer architecture
1.1 Self-Attention QKV
1.2 Multi-head attention
...

실제 sidebar는 다음과 같습니다.

[IMG:1]

우측에 트리가 표시되고, 좌측에는 일반적인 OpenCode 채팅이 표시됩니다.

선택한 노드를 active context로 설정하면, 그 이후의 "이 부분을 이어서 설명해줘"와 같은 추가 질문이 현재 선택 중인 답변을 전제로 처리됩니다.

현재 Version 1.0에서는 주로 다음 기능들을 구현했습니다.

• 긴 답변이나 구조화된 답변을 root node로 자동 저장
• 추가 질문에 대한 답변을 child node로 자동 저장
• 하나의 OpenCode session 내에서 여러 개의 root topic 관리
• 1, 1.1, 1.1.1과 같은 번호가 매겨진 트리 표시
• 우측 sidebar에서 selected node와 active context 표시
• sidebar의 노드를 마우스 클릭하여 좌측 채팅의 해당 답변으로 이동
• j/k로 노드 이동
• enter로 active context 전환
• space로 노드 확장/축소
• CLI 및 standalone TUI viewer
• Markdown export
• npm run validate를 통한 일괄 검증

단순히 로그를 저장하는 것뿐만 아니라, "다음 질문이 어떤 답변에 매달리는가"를 다룰 수 있게 한 점이 포인트입니다.

짧은 답변이나 너무 세세한 질문은 저장하지 않고, 나중에 다시 볼 가치가 있는 긴 답변만을 트리에 넣도록 하고 있습니다.

필요한 사항은 다음과 같습니다.

Node.js >= 20
npm
Bun

리포지토리를 clone 합니다.

git clone https://github.com/linqichenggg/opencode-answer-tree.git
cd opencode-answer-tree

최초 설정을 실행합니다.

npm run setup

이 명령은 Answer Tree 측의 의존성, 내장된 OpenCode host 측의 의존성, TypeScript build를 한꺼번에 실행합니다.

실행은 다음 명령어를 사용합니다.

npm run opencode

주의할 점으로, 글로벌에 설치된 opencode 명령어를 직접 실행하면 일반적인 OpenCode가 실행됩니다. Answer Tree sidebar를 사용하려면 이 리포지토리 내에서 npm run opencode를 실행해야 합니다.

실행 후, 먼저 긴 답변이 돌아오는 질문을 합니다.

Please explain Transformer architecture in detail

답변이 끝나면 우측에 root node가 생성됩니다.

1 Transformer architecture

그다음, 현재 답변에 대해 추가 질문을 합니다.

Continue explaining the self-attention part

추가 질문에 대한 답변이 충분히 길 경우, 자식 노드 (child node)로 저장됩니다.

1 Transformer architecture
1.1 Self-Attention explanation

다른 주제로 넘어가면, 새로운 루트 노드 (root node)가 생성됩니다.

what is CNN

1 Transformer architecture
2 CNN explanation

이와 같이, 하나의 채팅 세션 (chat session) 안에서 여러 주제를 섞이지 않게 다룰 수 있습니다.

Answer Tree 모드는 다음 키로 진입합니다.

ctrl+x z

주요 조작은 다음과 같습니다.

j/k Select previous / next node
click Select node and scroll chat to the matching answer
space Expand / collapse selected node
...

사이드바 (sidebar)의 노드는 마우스 클릭도 지원합니다. 노드를 클릭하면 선택된 노드 (selected node)가 전환되며, 왼쪽의 채팅 기록이 해당 답변으로 이동합니다.

여기서 중요한 점은 선택된 노드 (selected node)와 활성 컨텍스트 (active context)를 분리하고 있다는 것입니다.

선택된 노드 (selected node)는 사이드바 상에서 커서가 위치한 노드입니다.

활성 컨텍스트 (active context)는 다음 추가 질문에서 실제로 문맥으로 사용되는 노드입니다.

예를 들어, Transformer 이야기를 하다가 CNN 노드를 활성 컨텍스트 (active context)로 전환하면, 그 이후의 "조금 더 자세히"라는 질문은 CNN 측의 문맥으로 취급됩니다.

OpenCode 측에서는 플러그인 (plugin)과 프로젝트 레벨 스킬 (project-level skill)을 사용하고 있습니다.

대략적인 흐름은 다음과 같습니다.

사용자가 질문
↓
answer-tree-auto 스킬이 Answer Tree를 사용할지 판단
...

저장 위치는 프로젝트 내의 로컬 파일입니다.

.answer-tree/opencode-state.json

CLI용 상태 파일은 분리되어 있습니다.

.answer-tree/state.json

이는 OpenCode 플러그인 (plugin)의 실제 데이터와 CLI 데모 (demo) 데이터가 섞이지 않도록 하기 위함입니다.

Version 1.0은 연구실 내의 데모 (demo)나 개인 개발 검증에 사용할 수 있는 단계입니다.

반면, 일반 사용자에게 배포하기 위해서는 아직 다음과 같은 개선 여지가 있습니다.

• npm 패키지 (package)로서 간편하게 설치할 수 있는 형태로 만들기
• 기존 OpenCode에 자연스럽게 통합될 수 있도록 하기
• 부모 노드 (parent node) 추정을 더욱 정교하게 만들기
• 트리 편집 (tree editing) UI 강화하기
• 장기 이용 시의 세션 (session) 관리 개선하기

현 시점에서는 리포지토리 (repository)를 클론 (clone) 하여 npm run opencode로 실행하는 단일 리포지토리 (single-repository) 버전입니다.

동작 확인은 다음 명령어로 수행했습니다.

npm run validate

이 명령은 메인 프로젝트 테스트 (main project tests), CLI / TUI 스모크 테스트 (smoke test), OpenCode 호스트 타입 체크 (host typecheck)를 한꺼번에 실행합니다.

현재 Version 1.0에서는 26개의 테스트를 통과했으며, OpenCode 호스트의 타입 체크 (typecheck)도 통과했습니다.

OpenCode에 Answer Tree 사이드바 (sidebar)를 추가하여, LLM의 긴 답변과 심층 질문을 트리 (tree) 구조로 정리할 수 있도록 했습니다.

LLM과의 대화는 단순한 시계열 로그 (time-series log)로 보는 것보다, "어떤 답변으로부터 어떤 질문이 태어났는가"를 시각화하는 것이 다루기 훨씬 쉽습니다.

특히 기술 조사, 설계 상담, 논문 읽기, 코드 리뷰와 같이 하나의 답변으로부터 여러 번 심층적으로 파고드는 작업에서는 트리 구조가 매우 유효하다고 느꼈습니다.

Version 1.0에서는 OpenCode 플러그인 (plugin), 우측 사이드바 (sidebar), CLI, TUI, 마크다운 내보내기 (Markdown export), 검증 명령어까지 하나의 리포지토리 (repository)에 담았습니다.

개선안이나 수정안이 있다면, GitHub에서 fork 하여 Pull Request를 보내주시면 감사하겠습니다. 내용을 확인한 후, 반영 가능한 것들은 merge 해 나가고자 합니다.

• GitHub repository: https://github.com/linqichenggg/opencode-answer-tree
• OpenCode: https://opencode.ai/
• Qiita Markdown: https://help.qiita.com/ja/articles/qiita-markdown