PS-Blogself

코드가 바뀐 과정을 풀이 블로그로 정리하는 VS Code 확장입니다. 수정 기록에서 파일을 고르면 AI가 글에 사용할 구간과 설명을 준비하고, 사용자는 내용을 확인한 뒤 글을 만들고 편집할 수 있습니다.

사용하기

처음 실행하면 Welcome 탭이 열립니다. 로그인·샘플·수정 기록·설정으로 바로 이동할 수 있으며, 명령 팔레트의 **PS-Blogself: 시작하기 (Welcome)**에서 다시 열 수 있습니다.

VS Code에 확장을 설치하고 PS-Blogself 사이드바를 엽니다.
로그인에서 브라우저 인증을 완료합니다.
C·C++·Python 파일을 수정하고 저장합니다. 기록이 없다면 샘플로 시작으로 사용 흐름을 확인할 수 있습니다.
수정 기록을 열어 AI가 준비한 구간과 설명을 확인합니다. 설명은 바로 수정할 수 있습니다.
글쓰기 열기 → 이대로 글쓰기로 초안을 생성합니다. 완성된 글은 VS Code 안에서 편집하고 내보냅니다.

파일을 저장하기만 할 때는 AI를 호출하지 않습니다. 로그인한 상태에서 수정 기록을 검토하면 글쓰기 밑작업을 준비하며, 같은 이력에 대한 준비 결과는 재사용합니다. 자동 준비는 설정에서 끌 수 있습니다. 사용자가 편집한 설명과 본문은 새 AI 결과로 자동 덮어쓰지 않습니다.

수정 기록과 설정

파일 행을 클릭하면 파일 열기 / 수정 기록 보기를 선택할 수 있고, 더블클릭하면 파일이 열립니다.
최근 변경 기록은 처음 20개를 표시하고 스크롤하면 이전 기록을 이어서 불러옵니다.
제목 옆 검색 버튼으로 전체 기록의 파일명을 검색합니다. 검색어에 / 또는 \가 있으면 경로도 검색합니다. 검색어를 지우면 최근 20개부터 다시 표시합니다.
사이드바 제목 오른쪽 설정에서 활성 경로, 대상 확장자, 기록 여부, 글쓰기 미리 준비를 변경합니다.

활성 경로의 기본값은 현재 열려있는 모든 파일입니다. 이 상태에서는 워크스페이스 밖에서 연 파일도 대상 확장자에 맞으면 기록합니다. 폴더를 지정하면 해당 경로 안의 파일만 기록하고, 재설정 버튼을 누르면 기본값으로 돌아갑니다.

활성 경로·대상 확장자·기록 여부는 워크스페이스별로 저장합니다. 같은 워크스페이스를 연 창끼리는 설정을 동기화하고, 검색어와 스크롤 위치는 각 창에서 유지합니다.

글쓰기와 내보내기

글 구성은 수정 과정 중심, 풀이 해설 중심, 알고리즘 설명 중심 중에서 선택합니다. 문체는 했다/이다체, 합니다체, 해요체, 간결한 메모체 또는 사용자 지정으로 설정할 수 있습니다. 선택만으로 AI 작업을 시작하지 않으며 다음 준비·작성 요청에 반영합니다.

Lexical 기반 블록 편집기에서 제목·목록·인용·코드·표·이미지를 편집합니다. + 또는 빈 문단의 **/**로 블록을 넣고 왼쪽 핸들로 이동합니다. 이미지 파일 선택·붙여넣기·드롭과 캡션 편집을 지원합니다. 목차로 제목 사이를 이동하거나 Markdown으로 원문을 편집할 수 있습니다.

내보내기에서 다음 기능을 제공합니다.

Markdown 복사 또는 파일 저장. 로컬 이미지는 문서 옆의 이미지 폴더에 함께 저장합니다.
HTML 파일 저장. 로컬 이미지를 포함하므로 브라우저에서 바로 열 수 있습니다.
Ghost 연결 및 초안 저장. 공개 게시는 별도 확인을 거치며 이후에는 같은 글을 갱신합니다. Ghost에서 수정한 글은 자동으로 덮어쓰지 않습니다.

Ghost 연결에는 해당 사이트의 Admin API 키가 필요하며 키는 VS Code SecretStorage에 저장합니다. 표·체크 목록은 Ghost HTML 카드로 변환합니다. 자세한 지원 범위는 편집기와 Ghost 내보내기를 참고하세요.

설정 탭의 내보내기 → 추가할 태그에 알고리즘, PS, segment tree처럼 쉼표로 구분해 입력하고 적용을 누르세요. Ghost에는 기존 태그를 유지하며 추가하고, Markdown 저장·복사에는 tags 메타데이터, HTML에는 키워드로 포함합니다. 태그 안의 공백은 유지하며 중복과 빈 항목은 정리합니다. 비워두면 태그를 추가하지 않습니다.

문의와 크레딧 충전 요청은 hsjang635@gmail.com으로 보내주세요.

설정의 Ghost 자동 업로드를 켜면 글 생성 완료 시 연결된 Ghost에 올립니다. Draft는 비공개 초안 저장, Publish는 별도 확인 없이 공개 게시입니다. 기본값은 꺼짐·Draft이며, Ghost 연결 / 변경에서 연결할 수 있습니다. 자동 업로드 설정은 이 클라이언트에 저장됩니다. 생성 중 편집해 보류된 결과는 새 결과 적용을 누른 뒤 업로드합니다. Draft 모드에서는 이미 공개된 글을 자동으로 수정하거나 비공개로 바꾸지 않습니다.

저장과 복원

수정 기록과 편집 초안은 로컬에 저장합니다. 이전 글은 최대 20개 버전을 보관하며 내용이 같거나 줄 끝 공백만 다른 경우에는 버전을 추가하지 않습니다.

같은 VS Code 프로필·실행 환경의 창들은 기록과 초안을 공유합니다. 같은 글은 한 창에서 편집하고 다른 창에서는 읽기 전용으로 확인합니다. 이 창에서 편집으로 편집권을 옮길 수 있습니다.

시작한 AI 작업은 창을 닫아도 계속됩니다. 다시 열면 기존 작업 ID로 결과를 조회하며, 연결 실패만으로 새 생성 요청을 자동 제출하지 않습니다. 서비스에 연결할 수 없어도 설치된 확장의 기존 기록 열람과 로컬 초안 편집은 가능합니다.

코드 파일은 UTF-8 기준 512KiB까지 기록합니다. 큰 파일의 새 기록은 중지하되 기존 이력은 유지하며, 긴 이력은 AI 요청에 들어갈 범위를 줄여 처리합니다.

계정·크레딧·전송 데이터

전체 공지와 본인 대상 공지는 사이드바 맨 위에 표시합니다. 보이는 사이드바는 활성 창에서 30초마다 갱신하고, 다시 열거나 창으로 돌아오면 바로 확인합니다. 제목을 눌러 펼치고 닫을 수 있으며 로그인 상태의 닫기는 계정에 저장됩니다. 로그인 전에는 전체 공지만 표시하고 닫기를 로컬에 저장합니다. 공지 조회에는 AI 호출이나 크레딧 소모가 없습니다.

사이드바의 무료 사용량·한도·유료 잔액은 계정의 크레딧 정보를 표시합니다. 계정이나 사용량 버튼에서 세부 내용을 확인할 수 있습니다. 조회에 실패하면 사용량 확인 불가로 표시합니다.

글을 준비하거나 생성할 때 선택한 코드·변경 내용·설명·작성 요청이 글쓰기 서비스와 AI 서비스에 전송됩니다. 로그인 토큰은 VS Code SecretStorage에 저장합니다. Ghost로 내보낼 때는 선택한 글과 필요한 이미지를 해당 Ghost 사이트로 전송합니다.

개발하기

Node.js 24, pnpm 11, VS Code 1.108.1 이상을 기준으로 개발합니다.

git clone https://github.com/molla11/ps-blogself.git
cd ps-blogself
pnpm install --frozen-lockfile
code .

F5 → Run Extension으로 Extension Development Host를 엽니다. 터미널에서는 pnpm dev /path/to/problem-folder를 사용할 수 있습니다.

소스 변경은 자동 빌드하며, 확장 코드는 Developer: Reload Window로 다시 적용합니다. 개발 환경 변수는 .env.example을 참고해 확장 저장소 루트의 .env에 지정합니다. .env는 Git과 설치 패키지에서 제외됩니다.

Windows·WSL·macOS에서 같은 방식으로 실행합니다.

검증

클라이언트의 타입·저장 로직·화면 동작은 다음 명령으로 검사합니다. 이 검사들은 실제 AI 작업을 실행하지 않습니다.

pnpm compile
pnpm test:unit
pnpm exec playwright install chromium
pnpm test:ui

pnpm test:host

통합 테스트는 기록·자동 준비·스트리밍·초안 복원·사용량과 Ghost 내보내기를 확인합니다. Linux에서는 GUI 디스플레이가 필요하며 VSCODE_EXECUTABLE로 VS Code 실행 파일을 지정할 수 있습니다.

설치 패키지 만들기

pnpm package:vsix
code --install-extension dist/ps-blogself.vsix

VS Code의 **Extensions: Install from VSIX…**에서도 설치할 수 있습니다. 설치 후 서비스에 로그인해 사용합니다.

ps-blogself

Jang Hyeonsu