블로그_10_Study Tree 기능 추가

크리스마스인데....

크리스마슨데 집구석에서 코딩이나 했다.
이게 뭐 하는 짓인가 싶어 조금 처량했는데, 완성된 결과물을 보니 꽤나 뿌듯했다.

왜 만들었냐면....

블로그에 글이 쌓이다 보니, 이 글들이 서로 어떻게 연결되는지 시각적으로 보고 싶었다.
단순한 리스트가 아니라, 내가 학습한 지식들이 어떤 구조로 뻗어나가는지를 보여주고 싶었다.
그래서 한 번 시각화를 도입하기로 했다.
하는 김에 AI를 여러 파이프라인으로 붙이는 경험도 해보고,
발전시켜서 이런 종류의 서비스나 라이브러리 자체도 좀 공유해보면 어떨까 싶기도 했다.

주요 기능

1. 지식 그래프 시각화

react-force-graph 같은 라이브러리를 쓸까 하다가, 커스터마이징을 위해 직접 구현하거나 가벼운 라이브러리를 활용하는 쪽으로 방향을 잡았다.
그러다가 결국 AI까지 붙였다.

일단 AI가 모든 포스트를 기반으로 키워드를 추출한다.
그리고 이렇게 추출한 키워드를 기반으로 여러 작업을 수행한다.
핵심은 포스트 간의 의미론적 연결(Semantic Linking)이다. 단순한 링크가 아니라, AI가 추출된 내용을 분석해 "선후 관계(Prerequisite)"와 "연관 관계(Related)"를 구분한다.

• 노드(Node): 각 포스트에서 추출한 핵심 개념
• 엣지(Edge): AI가 분석한 학습 의존성 및 연관성

2. AI 파이프라인

가장 공을 들인 부분이다. 단순히 글을 연결하는 게 아니라, 7단계의 파이프라인을 거쳐 지식 그래프를 생성한다.
모델은 비용과 성능을 고려해 GPT-5 Nano와 GPT-5 Mini를 섞어서 사용했다.

1. Node Extraction: GPT-5 Nano가 글을 읽고 핵심 역량과 레벨(1~5)을 추출한다.(속도/비용 최적화)
2. Normalization: AI로 추출하다 보니 유사 카테고리가 여러 이름으로 추출된다.(Network나 Networking 같은) 이런 유사 카테고리를 하나로 통합하는 정규화 과정을 거친다.
3. Group Extraction: 정규화된 카테고리 내에서 기술을 그룹별로 체계적으로 분류하고 정리한다.
4. Relation Analysis: GPT-5 Mini가 그룹 간의 관계를 분석해 먼저 배워야 하는 내용(Prerequisite)이나 관련도를 판단한다.
5. Edge Generation: 분석된 관계를 방향성이 있는 그래프 엣지로 변환해 일종의 스킬 트리 같은 모양을 만든다.
6. Gap Analysis: 현재 학습하지 않았지만 다음에 배우면 좋은 학습의 빈 구멍(Gap)을 찾아 추천 노드나 그룹을 생성한다.
7. Final Merge: 생성된 노드, 엣지, 추천 항목을 모두 합쳐 하나의 json으로 저장한다.

3. AI 학습 분석

첫 번째 패널에서 트리 패널의 노드와 그룹, 카테고리 등 여러 데이터를 바탕으로 최근 학습에 대한 멘토링을 제공한다. 일종의 AI 멘토링이다. AI가 가장 최근 노트를 분석하여 잘 학습했는지, 부족한 부분이 있다면 안내한다.
또 트리 그래프에서 생성된 그룹과 노드의 연결 관계를 기반으로 다음으로 무엇을 학습하면 좋을지 안내한다.
두 번째 패널에서는 설정된 카테고리를 기반으로 다음 학습 노드를 추천한다.
세 번째 패널은 그냥 허전해서 넣었는데, RSS를 제공하는 기술 뉴스를 몇 개 보여주도록 했다.

4. UI/UX 디테일

디자인도 그럴듯하게 만들고, 트리 패널과 인사이트 패널을 분리해서 사용자 경험을 생각했다.

• AI 분석 버튼: 눈에 띄게 배치하고 안내 말풍선도 넣었다. 어차피 이걸 클릭하지 않으면 우측 패널은 활성화되지 않는다.
• 포커스 효과: 제시된 노드 링크들을 클릭하면 트리 패널에서 해당 노드로 포커싱된다.

마무리

AI 파이프라인 구축 시에 토큰 낭비나, 엄청 오래 걸리는 문제나, 프롬프팅 문제 등등
골치아프고 복잡해서 크리스마스고 뭐고 스트레스만 이빠이 받았다.
아무튼 파이프라인은 잘 구축되었으니 내일은 진짜 구조 개선 좀 해야겠다.
코드도 너무 지저분해졌고, 여러 가지로 성능을 올리거나, 토큰을 절약하거나 하는 작업이 필요하다.