크롬 익스텐션 개발하기 #1
페이지 정보
본문
나만의 브라우저 기능을 직접 만들어보자
웹 브라우저는 우리가 매일 수십 번 이상 접하는 작업 환경입니다.
특히 크롬(Chrome)은 전 세계에서 가장 많이 사용되는 브라우저이며, 사용자 경험을 확장할 수 있는 익스텐션(Extension) 생태계가 매우 잘 갖추어져 있습니다.
이번 글에서는 크롬 익스텐션이 무엇인지, 그리고 실제 웹 사이트 경험에서 영감을 받아 직접 기능을 개발해본 과정을 공유하고자 합니다.
1. 크롬 익스텐션이란?
크롬 익스텐션(Chrome Extension)은 브라우저에서 동작하는 확장 프로그램입니다.
기본 브라우저 기능에 추가적인 편의 기능, UI 개선, 자동화 기능 등을 더해주는 작은 애플리케이션이라고 볼 수 있습니다.
예를 들어 익스텐션으로 할 수 있는 일들:
기능 |
예시 |
하이라이팅, 메모 |
Liner |
광고차단 |
adblock |
생산성 도구 |
Notion Web Cliper |
즉,"웹을 사용할 때 조금이라도 불편하거나 반복되는 작업이 있다면, 익스텐션으로 해결할 수 있다."
2. 개발 아이디어는 어디서 오는가?
저는 최근 Eopla(이오플라) 사이트를 자주 사용하고 있었습니다. https://eopla.net/
이 사이트는 콘텐츠를 스크롤하며 읽는 과정에서 화면 상단에 좌→우 방향으로 진행 상황을 보여주는 바(Progress Bar) 를 제공합니다.
이 기능이 꽤 직관적이었습니다.
-
페이지를 얼마나 읽었는지 한눈에 알 수 있고
-
다음 콘텐츠로 넘어갈 타이밍도 쉽게 감지할 수 있고
-
읽는 흐름이 시각적으로 유지됩니다
하지만 문제는…
이 기능이 Eopla 사이트에서만 동작한다는 점이었습니다.
“유튜브 글 읽기, 블로그 리딩, 위키, 개발 문서 등… 모든 사이트에서 쓰면 더 좋지 않을까?”
그래서 저는 이 기능을 어디서든 쓸 수 있도록 ‘크롬 익스텐션’으로 만들어보기로 했습니다.
3. AI로 개발해보기: AI 에게 개발을 시켜보자
처음부터 직접 코드를 쓰기보다, AI에게 페르소나(역할)를 부여하여 설계부터 구현까지 함께 진행해보았습니다.
진행 방식
-
이오플라의 진행 바 기능을 설명하고 분석 요청
-
AI에게 “너는 지금 크롬 익스텐션 개발자야” 라고 역할 지정
-
해당 기능을 구현하는 최소 버전(MVP) 코드 요청
-
동작 확인 후 색깔, 굵기, 애니메이션 등 스타일 옵션 추가
-
UI Panel 또는 설정 페이지까지 확장
즉, 처음엔 기능 복제, 이후 커스터마이즈 확장으로 발전시킨 과정입니다.
그리고 실제로 브라우저에서 바로 테스트해볼 수 있었죠.
4. 사용 가능한 Chrome Extension API 참고
개발 중 참고한 공식 문서는 아래입니다:
https://developer.chrome.com/docs/extensions/reference/api
익스텐션 개발에서 자주 활용하는 핵심 요소는 다음과 같습니다.
“AI는 설계 → 코드 생성 → 개선 아이디어 제안까지 모두 수행할 수 있다.”
개발자는 더 의사결정과 품질 조정에만 집중하면 됩니다.
https://chromewebstore.google.com/detail/hmidepipmbkhajibghffpeibbbkglbnp