하향식 학습용 Claude Code 플러그인 만들어 보기

LLM과 대화하며 밟아나가는 개념을 html 지도로 한 눈에 보기

하미연4분 읽기


예전에 꽤 재밌는 아티클을 읽었던 기억이 있습니다. 학위 하나 없는 고등학교 중퇴자가 Open AI에 입사했다는 내용이었습니다. 기사의 주인공은 일반적으로 거치는 학위 과정 없이, AI와 함께 독학으로 지식을 습득했다고 합니다. AI 연구원으로서 갖춰야 하는 지식도 기초부터 공부한 게 아니라 가장 상위의 개념을 AI에게 물어보고, 이걸 이해하려면 필요한 그 하위 개념을 또 물어보고 하는 식으로, 즉 하향식 방법으로 이해했다고 합니다.

사람 선생님에서 LLM으로, 상향식 학습에서 하향식 학습으로

LLM은 '알고 있는 지식의 양'만 놓고 보면 전 세계 그 어느 석학보다도 앞섭니다. 더구나 월에 단돈 5만원 정도만 결제하면 이런 LLM을 궁금한 걸 마음껏 물어보는 선생님으로 부려먹을 수 있죠. 제가 아무리 물음표 살인마 노릇을 해도 짜증 한 번 내지 않고 끝까지 제 질문에 답해주기까지 합니다. 일하는 시간의 제한도 없습니다.

처음 기사를 읽었을 때, 그리고 LLM을 학습 도구로 쓰면서 든 생각은 "전통적인 학위 과정의 의미가 크게 퇴색될 것이다" 였습니다. 하지만 시간이 지남에 따라 생각이 조금 달라졌습니다. 학위 과정이든, 어떤 다른 방식이든 무언가를 배우는 방법 자체가 완전히 바뀔 것이라 생각합니다.

모든 학문에는 '개론'이 있고, 대학교 1학년은 이 개론 수업을 듣는 것으로 시작합니다. 개론에서 큰 틀을 익히고, 학년이 올라가면서 세부 이론을 하나씩 채워 넣는 구조입니다. 이 방법에 의심을 품었던 적은 없었습니다. 기반 지식이 없으면 심화 개념을 애초에 이해할 수 없을 거라는 예상이 깔려 있으니까요.

실제 하향식 공부를 시도해 본 경험

Attention is all you need는 지금의 생성형 AI를 만든 결정적 계기가 된 논문입니다. 당연히 AI 기술 원리를 꽤 깊이 알아야 이 논문의 내용을 이해할 수 있을 테고, 그래서 나는 읽을 수 없는 논문이라고만 생각했습니다.

LLM에게 이 논문의 제목과 함께 'Attention' 이라는 개념이 무슨 뜻인지를 물어봅니다. 그러면 초보자 관점으로 비유를 섞어 풀어 설명해 줍니다. 다만 여기서 곧바로 Attention이 무엇인지 한 번에 이해되진 않습니다. 어쩔 수 없이 개념 설명을 위해 다른 용어가 등장하기 시작합니다. 예를 들어, RNN과 CNN고 달리 Attention은 어떤 차이점을 가지고 있는지를 설명합니다. 그럼 저는 그 다음 질문으로 RNN, CNN이 어떤 기술인지 물어봅니다.

이렇게 거슬러 올라가면서 '내가 더 궁금한 게 없어질 때까지' 대화를 지속해보니, 하향식 학습이 평범한 사람에게도 충분히 유효한 방법이 될 수 있겠다는 생각이 들었습니다.

터미널 + Claude Code 조합에서 하향식 학습을 하기에 아쉬운 점

LLM이 무언가 설명할수록 길어지는 세로 스크롤

LLM과 이런 식으로 대화하다 보니 자연스레 아쉬운 점이 생겼습니다. Claude Code를 터미널로 쓰면 항상 겪는 문제인데, LLM이 작성하는 텍스트가 많아지면서 세로 스크롤이 길어집니다. 그러다 보면 제가 파악해야 하는 내용이 한눈에 안 보이게 됩니다. 브라우저로 보는 웹페이지와 달리 터미널은 스크롤이 부드럽게 오고 갈 수 없다는 점도 있습니다. 업무용으로 LLM을 쓸 때보다 공부가 목적일 때 이 불편함이 더 커집니다. 현실적으로 업무 지시는 결과만 확인하는 편이지만, 설명문은 제가 처음부터 끝까지 읽고 이해해야 하는 대상이니까요.

A와 관련해 C가 있구나. 이따 물어봐야지. -> 까먹음

특히 LLM이 기껏 후속 개념을 추천해줘도 다 써먹지 못한다는 게 아쉬웠습니다. A를 물어보면 LLM은 "이와 관련한 B, C도 알아볼까요?" 하며 추천해주곤 합니다. 한 번에 하나의 개념에 집중해보자고 B를 물어보면, 그 다음으로 D와 E를 추천해줍니다. 그리고 또 D를 물어보면 C는 제가 따로 기억해두지 않는 이상 다루지 않고 넘어가게 되죠. 앞에서 말한 역순 학습은 LLM이 던져주는 후속 개념을 따라가는 방식이 제일 편한데, 그 후속 개념이 다 살펴보기 불편했습니다.

그래서 대화를 html 학습 노트로 만들어주는 플러그인을 만들었습니다

터미널에 표시되는 한글이 잘 안 읽힌다는 문제도 있었습니다. 폰트를 손봐둔 덕에 나쁘진 않지만, 순수 text만 표시할 수 있는 화면이 가장 가독성 좋은 형태일 수는 없습니다. 여기서 이전에 올린 포스트인 markdown 대신 html을 사용하기를 적용해 보았습니다.

LLM이 저에게 알려주는 설명을 터미널이 아니라 html로 보고 여기에 '개념 지도'를 더하면 어떨까 하는 아이디어가 떠올랐습니다. 특히 이미 설명받은 개념과 아직 물어보지 않은 개념의 목록을 눈으로 구분해서 보고 싶었습니다. 이렇게 하면 '나중에 물어봐야지'하고 생각만 하다 까먹어버리는 개념의 수를 줄일 수 있을 것 같았습니다. 그렇게 만든 것이 study-on-canvas 라는 Claude Code 플러그인입니다.

1. 플러그인을 호출하면서 배우고 싶은 개념을 함께 물어봅니다

slash 명령어로 플러그인을 직접 호출할 때는 호출 명령어 뒤에 궁금한 질문을 그대로 붙여 입력하면 됩니다.

/study-on-canvas:study-on-canvas Attention is all you need라는 논문에서 Attention이 어떤 개념인지, 이 개념이 어떻게 지금의 생성형 AI를 만드는데 기여했는지 알고 싶어.

자연어로 호출할 수도 있습니다. "캔버스", "canvas", "학습 노트" 를 언급하면 슬래시 명령 없이도 플러그인이 발동합니다.

캔버스로 대화하자. Attention is all you need라는 논문에서 Attention이 어떤 개념인지, 이 개념이 어떻게 지금의 생성형 AI를 만드는데 기여했는지 알고 싶어.

2. LLM이 html 파일을 저장할 경로를 묻습니다

기본값은 플러그인을 실행한 경로에서 learning-notes 라는 폴더를 만들어 그 안에 저장하는 방식입니다. 그 외 원하는 경로가 있다면 따로 지정할 수도 있습니다.

플러그인이 html 파일 저장 경로를 묻는 화면

3. html 파일이 만들어지고 자동으로 켜집니다

html 파일이 다 만들어지면 OS 기본 브라우저로 켜집니다. 여기서 LLM이 만들어준 설명문을 볼 수 있습니다. 화면 우측에는 이 다음에 톺아보면 좋을 개념을 LLM이 추천해 주고요. 길어지는 세로 스크롤과 새어나가는 후속 개념을 한 화면에서 함께 해결하는 레이아웃으로 구성했습니다. 다음 스크린샷처럼 LLM과의 대화창(터미널)과 html 파일을 한 모니터에 모아 두면 쓰기 편합니다.

생성된 html 노트의 레이아웃. 좌측에 설명문, 우측에 추천 후속 개념 목록

4. LLM이 추천한 개념이 아니라 설명문을 보다 궁금해진 내용을 물어봐도 됩니다

추천 목록에 있는 개념만 따라가야 하는 건 아닙니다. 3번 상태에서 저는 터미널에 다음과 같은 질문을 입력했습니다.

Attention 개념을 더 깊게 들어가기 전에 RNN과 CNN의 기술적 원리를 알고 싶어.

다음 질문에 대한 LLM 작업이 끝나면 브라우저를 새로고침합니다. 그러면 새로 작성된 설명문이 탭 버튼 형태로 붙습니다. 추천 하위 개념 목록에서 설명문이 작성된 개념은 노란색으로 표시되고, 누르면 해당 설명문으로 바로 이동합니다.

후속 개념을 물어본 뒤 탭이 늘어나고, 다룬 개념이 노란색으로 표시된 화면

5. 개념 지도로 지금까지 살펴본 개념의 상하위 구조를 봅니다

html 우측 상단의 지도 아이콘을 누르면 지금까지 살펴본 개념 목록을 상/하위 구조도로 볼 수 있습니다. 여기서도 설명문이 생성된 개념은 노란색으로 표시되고 누르면 해당 설명문으로 바로 이동합니다.

개념 지도 뷰. 살펴본 개념들이 상하위 구조도로 그려져 있는 화면

6. Claude Code 사용중이라면 명령어 2줄로 설치할 수 있습니다.

다음 두 줄을 차례로 입력하면 설치됩니다.

/plugin marketplace add winter-blanket/study-on-canvas
/plugin install study-on-canvas@study-on-canvas

저장소는 github.com/winter-blanket/study-on-canvas 입니다.