1. 개요: 왜 만들게 되었는가?
요즘 Velog에 꾸준히 게시글을 올리려고 노력 중이다. 하지만 그동안 썸네일 없이 글을 올리다 보니, 나중에 목록을 확인할 때 해당 글이 어떤 내용을 담고 있는지 시각적으로 한눈에 들어오지 않았다.
AI시대이니 이를 활용해 게시글의 내용을 요약하고 썸네일까지 자동으로 생성해 주는 도구가 있다면 편리하겠다는 생각이 들었다. 그래서 크롬 확장 프로그램 형태로 직접 제작해 보았다.
2. 사용 방법
현재는 개인적인 용도로만 사용하기 위해 크롬 웹 스토어에 출시하지 않고, 로컬에서 확장 프로그램을 직접 로드하여 사용 중이다. 사용자의 API Key를 다루는 만큼 보안상의 이유로 스토어 등록은 지양했다.
확장 프로그램을 등록한 뒤, 글을 작성하는 중간에 썸네일 생성기를 실행한다. 비용 부담을 줄이기 위해 무료 모델인 Gemini AI API Key를 사용하도록 구성했다.
사용자가 직접 API Key를 등록하고 '요약하기' 버튼을 누르면 본문 내용을 바탕으로 요약 및 썸네일 생성이 진행된다.
3. 보안 및 데이터 저장 방식
API Key 저장에는 chrome.storage.local(Chrome 확장 프로그램 전용 로컬 스토리지)을 활용했다. 브라우저의 일반적인 localStorage와 사용법이 유사하며, 다음과 같은 방식으로 데이터를 가져온다.
chrome.storage.local.get('geminiApiKey', ({ geminiApiKey }) => {
// API Key를 활용하여 Gemini API 호출
console.log('Key retrieved');
});보안성 평가
현재 방식은 다음과 같은 장점이 있다.
- 소스 코드 내에 API Key가 하드코딩되지 않는다.
type="password"필드를 사용하여 입력 시 노출을 방지한다.- 웹 페이지에서 접근할 수 없으며 오직 해당 확장 프로그램만 접근 가능하다.
반면, 다음과 같은 취약점도 존재한다.
chrome.storage.local은 암호화되지 않은 평문으로 저장된다.- 누군가 내 컴퓨터에 직접 접근하여 파일 시스템을 뒤지면 키 추출이 가능하다.
- DevTools의 Application 탭에서 평문으로 확인이 가능하다.
결론적으로, 개인 사용 목적이라면 현재의 방식도 일반적인 관행 수준에서는 충분히 안전하다. 다만 보안성을 더 높이려면 브라우저 종료 시 데이터가 삭제되는 chrome.storage.session을 사용하거나, 매번 입력을 받는 방식을 고려해 볼 수 있다.
4. 보완한 점: 작성 중인 글 추출하기
기존에는 이미 발행된 게시글의 og 메타태그를 활용해 제목과 설명을 가져왔다. 하지만 썸네일은 글을 올리기 직전, 즉 작성 단계에서 필요한 경우가 많다. 작성 중에는 메타태그가 존재하지 않으므로 기존 방식으로는 내용을 읽어올 수 없었다.
Velog 에디터의 DOM 구조를 분석한 결과, CodeMirror-code 클래스 하위의 pre 태그들이 본문 내용을 담고 있음을 확인했다. 이를 활용해 실시간으로 텍스트를 수집하고 요약 정보를 뽑아내도록 로직을 개선했다.
const cmCodeEl = document.querySelectorAll('.CodeMirror-code');
const lines = Array.from(cmCodeEl.querySelectorAll('pre'))
.map((pre) => pre.innerText)
.join('\n');
data.bodyText = lines.replace(/\s+/g, ' ').trim();이 방식을 통해 글을 작성하는 도중에도 현재까지 작성된 내용을 바탕으로 최적의 썸네일을 생성할 수 있게 되었다.
5. 마치며
게시글 업데이트 이후뿐만 아니라, 글을 작성하는 시점에도 AI를 통해 썸네일을 생성할 수 있게 되어 작업 효율이 크게 좋아졌다.
단순히 도구를 만드는 것에 그치지 않고, 개발자로서 겪는 사소한 불편함을 직접 코드로 해결하며 보안과 DOM 분석 등 기술적인 고민을 해볼 수 있었던 유익한 프로젝트였다.
