✨ Vibe Editor
VS Code에서 코드/디렉토리/로그 스냅샷을 찍고, AI의 도움으로 기술 블로그 초안을 생성해 Notion에 바로 게시할 수 있는 확장 프로그램입니다.
🛠️ 설치 방법
🧭 전체 사용 흐름 (Step by Step)
로그인
- Google, GitHub, SSAFY 계정으로 로그인합니다.
Notion 데이터베이스 연결
- 설정 페이지에서
Notion API 통합 토큰 등록을 통해 토큰을 입력합니다.
- Notion에서 API 통합 생성 → 새 페이지 생성 → 빈 데이터베이스 추가 → API 통합 연결
- 설정 페이지의
Notion 데이터베이스 섹션에서 + 버튼 클릭 후 이름과 ID 입력
에픽 만들기
- 에픽 목록에서
+ 버튼을 눌러 새 에픽을 생성합니다.
포스트 종류 선택
- 에픽 내부에서 스토리를 작성할 수 있습니다. 이후, CS 개념 또는 트러블 슈팅 중 하나를 선택합니다.
스냅샷 추가 (코드 / 디렉토리 / 로그)
- 코드 스냅샷: 코드 에디터에서 원하는 영역을 드래그한 뒤
코드 스냅샷 촬영을 실행합니다. 코드, 경로, 라인 정보가 자동으로 저장됩니다.
- 디렉토리 구조: VS Code 탐색기에서 폴더를 우클릭하고
디렉토리 구조 내보내기를 선택하면 해당 구조가 스냅샷으로 저장됩니다.
- 로그 스냅샷: 터미널에서 로그를 드래그하거나 복사한 뒤
복사한 로그 스냅샷 촬영하기를 실행하면 시간과 함께 저장됩니다.
설명 작성
- 스토리에서 각 코드 스냅샷에 대해 설명을 작성합니다.
프롬프트 추가
- AI에게 원하는 글 생성 방향을 안내할 수 있는 프롬프트를 입력합니다.
포스트 생성 및 Notion 업로드
- 모든 입력을 마치면
포스트 생성 버튼을 누릅니다.
- 생성된 포스트에서
Notion에 게시 버튼을 클릭하면 글이 자동으로 업로드됩니다.
🚀 주요 기능 요약
| 기능 |
설명 |
| ✅ 코드, 디렉토리, 로그 스냅샷 |
클릭 한 번으로 내용과 메타정보를 정리하여 사이드바에 저장 |
| ✍️ AI 글 생성 |
스냅샷을 기반으로 기술 블로그 초안 자동 작성 |
| 🧠 말투 & 이모지 설정 |
친근한 말투부터 문어체까지 다양하게 선택 가능 |
| 🔗 Notion 연동 |
원하는 워크스페이스 및 DB에 클릭 한 번으로 게시 |
| 🤖 AI와 채팅 |
스냅샷을 AI에게 보내며 실시간 대화 가능 |
🔐 로그인
- Google 또는 GitHub 계정으로 로그인할 수 있습니다.
- 로그인 상태는 자동 유지되며, 로그아웃이 필요할 경우 설정 페이지 하단의
로그아웃 버튼을 클릭하면 됩니다.
📸 코드 스냅샷 찍기
- 코드 에디터에서 원하는 코드를 드래그하세요.
- 우클릭 후
코드 스냅샷 촬영 명령어를 실행하세요.
- 선택한 코드, 파일 경로, 라인 번호가 함께 저장됩니다.
- 사이드바의
코드 스냅샷 뷰에서 확인하고 클릭하면 코드만 깔끔하게 보여줍니다.
🌳 디렉토리 구조 내보내기
- VS Code 탐색기에서 폴더를 우클릭합니다.
디렉토리 구조 내보내기 명령어를 실행합니다.- 해당 폴더 및 하위 폴더/파일 구조가 자동으로 정리되어 스냅샷으로 저장됩니다.
- 사이드바
디렉토리 구조 시각화 뷰에서 확인할 수 있습니다.
🧾 로그 스냅샷 찍기
- 터미널에서 원하는 로그를 드래그하거나 복사합니다.
- 우클릭 후
복사한 로그 스냅샷 촬영하기 명령어를 실행합니다.
- 선택한 로그와 함께 시간이 기록되어 저장됩니다.
- 사이드바
로그 스냅샷 뷰에서 확인하세요.
✍️ 글 쓰기 (코드 기반 블로그 생성)
- 스냅샷 뷰에서 원하는 코드, 로그, 디렉토리 중 하나를 선택합니다.
코드 기반 글 작성 명령어를 실행하면 AI가 자동으로 초안을 생성합니다.- 말투, 이모지 사용 여부, 스토리 등을 설정할 수 있습니다.
🔗 Notion 연동
Vibe Editor를 통해 Notion에 글을 게시하려면 아래 순서를 따라 설정해주세요.
Notion API 통합 생성
+ 새 API 통합 버튼을 클릭해 새로운 통합을 생성합니다.- 생성 후 발급된 API 통합 시크릿을 복사해둡니다.
Notion에서 빈 데이터베이스 생성
- 새 페이지를 만든 후, 하단
시작하기에서 데이터베이스 → 빈 데이터베이스를 클릭합니다.
- 오른쪽 상단
... 클릭 → 연결 → 1단계에서 만든 Integration을 선택해 연결합니다.
Vibe Editor에 API 키 등록
- 설정 페이지에서
Notion API 통합 토큰 등록 버튼 클릭하거나,
- 명령어 팔레트(
Ctrl + Shift + P)에서 Notion API 통합 토큰 등록을 실행해 토큰을 붙여넣습니다.
Notion 데이터베이스 등록
게시하기
- 설정이 완료되면, 원하는 포스트를 선택한 뒤
Notion에 게시 버튼을 눌러 글을 바로 업로드할 수 있습니다.
🤖 AI와 채팅
- Claude, ChatGPT를 IDE 내에서 한 번에! 사용자가 기본설정으로 저장한 AI와 연결해 직접 AI와 대화할 수 있습니다.
- 스냅샷 전송 가능! 미리 저장해두었던 스냅 샷을 AI에게 보낼 수 있습니다.
- 내게 개인화된 나만의 AI! 사용자의 대화 내용을 기억해 모든 대화에 반영합니다.
🧠 License
MIT License
| |
