안녕하세요! 업무 자동화 생산성 도구를 만드는 AI Workmate입니다.
매일 반복되는 웹 서핑과 데이터 수집 업무를 처리할 때, 브라우저 창을 여러 개 띄워두고 탭을 왔다 갔다 하느라 피로감을 느낀 적이 있으신가요?
구글이 Chrome 114 버전부터 도입한 Chrome Side Panel API를 활용하면 브라우저 우측에 지속 상주하는 강력한 나만의 맞춤형 사이드바 앱을 쉽게 구축할 수 있습니다.
💡 생산성 향상을 위한 AI 모델 선택 및 툴 비교 가이드
* ChatGPT (GPT-5): 크롬 확장프로그램 전체 구조 설계 및 Manifest V3 규격 검증에 최적화되어 있습니다.
* Claude 3.6 Sonnet: Chrome Side Panel API의 이벤트 리스너와 백그라운드 스크립트 디버깅에 최고 성능을 발휘합니다.
* Gemini 3.6 Pro: 구글 공식 크롬 개발자 문서 분석 및 최신 웹 규격 요약에 가장 효율적입니다.
🔗 추천 인공지능 공식 웹사이트 바로가기
• 챗GPT(ChatGPT) 공식 사이트 바로가기 ↗
• 클로드(Claude) 공식 사이트 바로가기 ↗
기존 Popup 방식과 Side Panel API 비교
기존 크롬 확장프로그램의 popup UI는 마우스 클릭 한 번만 밖으로 벗어나도 창이 닫혀버리는 큰 단점이 있었습니다.
반면 Side Panel API는 사용자가 탭을 전환하더라도 UI 상태를 유지하며 지속적인 작업 공간을 제공합니다.
| 기능 및 특징 | 기존 Action Popup | 최신 Side Panel API |
|---|---|---|
| 지속성 | 다른 곳 클릭 시 자동 닫힘 | 탭 이동 후에도 상주 유지 |
| 화면 레이아웃 | 레이어 형태로 떠 있음 | 브라우저 화면 분할 영역 차지 |
| 주요 유스케이스 | 단발성 설정, 빠른 입력 | 메모장, AI 챗봇, 데이터 스크래핑 |
| 멀티 탭 제어 | 제한적 | 탭 변경 이벤트와 실시간 연동 |
1단계: manifest.json 환경 설정하기
사이드바 앱을 구현하기 위해 가장 먼저 확장프로그램의 메타데이터인 manifest.json 파일을 작성해야 합니다.
반드시 permissions 항목에 sidePanel 권한을 추가해야 API를 정상 호출할 수 있습니다.
{
"manifest_version": 3,
"name": "나만의 모니터링 사이드바",
"version": "1.0.0",
"permissions": [
"sidePanel",
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"side_panel": {
"default_path": "sidepanel.html"
},
"action": {
"default_title": "사이드바 열기"
}
}
2단계: 백그라운드 서비스 워커 구성
확장프로그램 아이콘을 클릭했을 때 사이드바가 부드럽게 열리도록 서비스 워커를 설정합니다.
background.js 파일에 클릭 이벤트 리스너를 등록하고 사이드바 오픈 동작을 지정해 줍니다.
chrome.action.onClicked.addListener((tab) => {
chrome.sidePanel.open({ windowId: tab.windowId });
});
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
.catch((error) => console.error('사이드바 설정 오류:', error));
실무 현장에서 겪은 시행착오와 해결 방법
제가 실제 프로젝트에 적용하면서 발생했던 대표적인 이슈는 탭 전환 시 데이터 유실 문제였습니다.
처음에는 단순히 HTML DOM에 데이터를 저장했다가 사용자가 탭을 바꿀 때마다 사이드바 리로드 현상이 발생해 입력 중이던 데이터가 모두 날아갔습니다.
이 문제를 해결하기 위해 chrome.storage.local API를 결합하여 작성 중인 상태를 실시간 동기화하도록 로직을 수정했습니다.
// sidepanel.js: 입력 데이터 자동 저장 예시
const noteInput = document.getElementById('my-note');
noteInput.addEventListener('input', () => {
chrome.storage.local.set({ savedNote: noteInput.value });
});
document.addEventListener('DOMContentLoaded', async () => {
const data = await chrome.storage.local.get('savedNote');
if (data.savedNote) noteInput.value = data.savedNote;
});
결론 및 나만의 생산성 도구 확장하기
Chrome Side Panel API는 단순한 UI 추가를 넘어 브라우저 기반의 업무 환경을 획기적으로 개선해 줍니다.
여기에 AI API(Claude, OpenAI)를 연동하면 현재 보고 있는 웹페이지의 요약 및 번역을 즉시 수행하는 나만의 나이트호스트 AI 비서로 탈바꿈할 수 있습니다.
오늘 안내해 드린 기본 구조를 바탕으로 여러분만의 맞춤형 업무 자동화 사이드바를 만드셔서 생산성을 크게 높여보세요!
