크롬 확장 프로그램으로 불편한 건 그냥 만들어 보기

소개

지난 번 빨간머리앤의 타이머를 만들고 난 후, 팝업이 자꾸 사라져서 별도 팝업창 구조로 만들기, 구글 시트와 연동, 법제처 정보 api로 알고 싶은 법령 정보 가져오기 시도해 봄

강의 중 타이머는 따로 떠있어야 한다 — 크롬 확장 3개 다시 만든 이유

📝 한줄 요약

강사용 크롬 확장 3개(타이머·환율 계산기·링크 보관함)를 만들다가, 일반 팝업이 다른 탭 클릭하면 사라지는 한계에 부딪혀 → 별도 팝업창 구조로 다시 짰습니다. 덤으로 링크 보관함은 구글 시트(Apps Script) 와 연동해서
노션 없이도 무료 DB로 씁니다. 도구도 중간에 Claude Code → openclaw 에이전트로 갈아탔어요.

바쁘시면 이것만 읽어도 돼요:

• 크롬 확장 UI에는 두 가지 길 — 일반 팝업 vs 별도 팝업창. 두 번째 길이 정답인 도구가 의외로 많음

• 강의·작업 중 계속 봐야 하는 도구(타이머 등)는 무조건 별도 팝업창

• chrome.windows.create 한 줄 차이로 사용 경험이 완전히 달라짐

• 구글 시트 + Apps Script로 무료 DB 구축 가능 (노션·Airtable 유료 불필요)

• 도구 전환: Claude Code CLI(질문 多, 신중) → openclaw 에이전트(직진형, 곧장 결과)

😫 문제 상황 (Before)

🕐 강의 중 어느 순간

"자, 지금부터 25분간 실습입니다. 타이머 켤게요." 도로시J 타이머(6/2에 만든 빨간머리 앤 캐릭터 확장)를
켰어요. 귀엽게 캐릭터가 뛰어다닙니다.

그런데 슬라이드를 다음 장으로 넘기려고 PPT 창을 클릭하는 순간 — 타이머 팝업이 사라졌어요.
다시 확장 아이콘 누르면? 다행히 시간은 유지된 채로 다시 뜨긴 합니다. 클릭 → 확인 → 다시 클릭하면 사라짐.

📌 추가로 평소 답답했던 것 2가지

• 환율·코인 계산: 항상 모바일로 업비트에서 체크하는 데 귀찮음

• 참고 링크 관리: 강의 자료 만들면서 본 좋은 글을 대부분 메모장, 노션, 카톡, 옵시디언에 URL 복붙 →
  굳이 그렇게 하지 않아도 되는 잠시 테스트용도 있고 . 좀 빨리 관리하는 메모+사이트 저장툴

이 셋을 하루에 같이 해결하기로 했습니다. 결과적으로는 작업 시간때문에 클코+오픈클로로 진행

최종 결과물

클래스타이머

암호화폐 실시간 가격 조회

메모 정보 DB 관리

ALT

한국어 수업 타이머 - 스크린샷

ALT

Quick Risk 앱의 스크린샷

ALT

링크 볼트 - Google 시트 동기화

기본 구성

법령 조회 결과

ALT

한국 법률 찾기 - 스크린샷

ALT

한국어 웹사이트의 스크린샷

🛠️ 사용한 도구

왜 전환했나? Claude Code CLI는 제가 신중한 작업(보안·배포·복잡한 리팩터)엔 좋지만, 강사가 한두 시간 안에 결과물 보고 싶을 땐 흐름이 자꾸 끊겨요. openclaw 에이전트로 옮기니 곧장 전체 파일 세트(manifest + HTML + CSS + JS + README)를 출력해줘서 매끄러웠습니다.

🔧 작업 과정

🪙 1탄: 환율 계산기 (crypto-quick-converter) — Claude Code (CLI)

원화를 달러·비트코인·이더리움으로 변환하고, 손익(1%/3%/5%/10%) 시뮬레이션도 보여주는 확장입니다. Upbit·환율 API에서 실시간 시세를 가져오고, 페이지에서 숫자 드래그하면 자동 입력까지.

강의 중 환율·코인 가격 빠르게 확인할 수 있는 크롬 확장 프로그램 만들어줘

디자인도 바우하우스 영감 받아서 깔끔하게 나왔습니다. 그런데 사용해보니 묘하게 불편한 거예요. 계산기 띄워놓고 환율 페이지를 한 번 확인하려고 클릭하면 → 팝업이 사라짐. 다시 아이콘 클릭 → 다시 띄움.

🔖 2탄: 링크 보관함 (link-vault v1) — Claude Code (CLI)

이번엔 강의 자료 링크를 태그·메모와 함께 저장하는 확장.

강의 자료·참고 링크 모아두는 확장도 만들어줘. 태그·메모 가능하게

크롬 확장의 기본 UI 패턴 선택 문제다. AI는 시키는 대로 만들어줬지만, 어떤 UI 패턴을 골라야 하는지는 내가 알았어야 했어요.

여기서 두 가지를 동시에 바꿨어요.

첫째, 팝업 방식 자체를 바꿔야 한다. 검색해보니 manifest 설정만 다르면 됩니다.

코드 한 줄 차이가 아니라 manifest 구조 자체가 다른 두 패러다임이었어요.

둘째, 작업 도구도 바꾸기로 했어요. Claude Code CLI가 좋은 도구지만, 매번 권한·파일 위치·옵션을 확인하면서 진행하니까 흐름이 자꾸 끊겼거든요. openclaw 에이전트로 옮겼더니 — 응답 스타일이 더 직진형이라 — 별도 팝업창 패턴을 적용한 두 개를 연달아 빠르게 만들 수 있었습니다.

🔖 3탄: 링크 보관함 v2 (link-vault-v2) — 별도 창 + 구글 시트 연동 (openclaw 에이전트)

다른 탭 누르면 사라지는 게 너무 불편해. 창을 따로 띄울 수는 없어?
저장한 링크를 구글 시트에도 자동으로 쌓이게 하고 싶어 — 노션 같은 유료 DB 말고

별도 창 적용은 깔끔하게 해결. 그리고 보너스 한 가지. 링크가 쌓이다 보면 결국 어디 백업하고 검색·공유할 데가 필요한데, 노션 유료 플랜이나 Airtable 안 쓰고도 가능합니다. 구글 시트 + Apps Script 조합으로요.

3단계 세팅:

1. 구글 시트 하나 만들고 헤더 행 입력

2. 확장 > Apps Script에서 doPost 함수 10줄짜리 코드 붙여넣기

3. "웹 앱"으로 배포해서 URL 받기 → 그 URL을 크롬 확장에 저장

실제로 시트에 저장되는 모양:

크롬 확장에 그 URL만 저장하면, 새 링크 저장할 때마다 시트에 자동으로 행이 추가됩니다. 인터넷 끊겨도 로컬에 저장되고, 나중에 "미전송 재시도" 버튼으로 일괄 동기화. 무료 사용자도 사실상 클라우드 DB를 갖게 되는 거죠.

⏱️ 4탄 (메인): Class Break Timer — 별도 창 방식 적용 (openclaw 에이전트)

이제 메인 결과물입니다. 위에서 검증한 별도 팝업창 패턴을 그대로 타이머에 적용했어요.

6/2에 만든 도로시J 타이머는 강의용으로 너무 화려해.
범용으로 쓸 수 있게 심플하고, 다른 탭 눌러도 안 사라지는 타이머로 다시 만들어줘
수업 모드 / 쉬는 시간 모드도 구분되게

핵심 기능만 추렸습니다:

• 수업 모드 / 쉬는 시간 모드 토글 — 색상·메시지 자동 전환

• 빠른 프리셋: 수업 25분 / 수업 50분 / 쉬는 시간 10분

• 시간 추가: +1분 / +5분 / +10분 (누적)

• 진행 바 + 종료 사운드 + 브라우저 알림

• 권한 1개만 (notifications). storage·alarms·scripting 같은 거 다 빼서 신뢰도 확보

가장 중요한 건 manifest 구조: default_popup을 아예 빼고, 백그라운드 스크립트에서 아이콘 클릭 이벤트를 받아 별도 윈도우를 띄우는 방식. 이미 열려있으면 새로 띄우지 않고 포커스만 가져옵니다(중복 방지).

결과: 강의 화면 옆에 타이머 창을 작게 띄워놓고 → 슬라이드·자료를 자유롭게 오가도 → 타이머는 그대로 떠 있음. 처음부터 이렇게 만들었어야 했죠.

✅ 결과 (After)

Before vs After

결과물

• 🪙 crypto-quick-converter — 환율·코인 빠른 변환 (일반 팝업 방식, 참고용으로 보존)

• 🔖 link-vault-v2 — 별도 창 + 구글 시트 자동 동기화

• ⏱️ Class Break Timer — 별도 창 수업 타이머 (현재 수업에서 실사용 중)

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 첫 결과에 만족 안 하고 실사용 — 결과물을 받자마자 실제 사용 시나리오(여러 탭 오가기)에서 한계를 발견하면, AI는 곧바로 더 나은 패턴을 제안해줍니다. "잘 만들어줬어요, 고마워요"로 끝내지 마세요.

2. "왜 안 되는지" 그대로 말하기 — "다른 탭 누르면 사라지는 게 불편해" 같은 현상 그대로 설명하면 AI가 원인(기술 용어: default_popup vs windows.create)을 알아서 찾아줍니다. 비개발자가 굳이 용어 외울 필요 X.

3. 검증된 패턴 재사용 — link-vault-v2에서 만든 별도-창 코드 구조를 class-timer에 그대로 적용하니 두 번째 작업은 훨씬 빨랐어요. 첫 번째 작업은 "패턴 발견"용, 두 번째 작업부터 "패턴 적용"용.

4. 흐름 끊기면 에이전트를 바꿔라 — AI 에이전트마다 응답 스타일이 다릅니다. 확인 질문이 많은 Claude Code CLI는 신중한 작업에, 곧장 결과 출력 openclaw 에이전트는 빠른 프로토타이핑에. 한 도구에 묶이지 말고, 작업 성격에 맞춰 갈아타세요.

5. 권한을 의식적으로 뺀다 — AI는 안전을 위해 권한을 넉넉히 넣어주는데, 사용자 입장에선 권한이 많을수록 의심스럽습니다. "이 권한 진짜 필요해?"를 한 번 더 물어보세요.

🚀 앞으로의 계획

강의 자료화

• "팝업 함정 → 별도 창 전환" 사례를 비개발자 크롬 확장 강의 Day 2 심화 모듈로 정리

• "Claude Code CLI vs openclaw 에이전트 — 응답 스타일이 다른 두 AI 도구 선택법" 사례를 AI 도구 활용 강의 케이스 스터디로 추가

• "구글 시트 = 무료 DB" 패턴을 1인 사업자용 AI 자동화 강의에 포함

• 법제처 api 활용한 앱 제작(현재 작업중)