생산성 도구 · 크롬 확장 프로그램

Meeting Memo Overlay — 웹페이지 메모

웹사이트를 검토하며 사진·제목·버튼을 클릭하면 번호 핀과 메모가 붙고, 핀마다 그 자리 캡처가 자동 저장되는 크롬 확장 프로그램입니다. 회의가 끝나면 메모 전체를 편집 가능한 PPT 기획서(.pptx)로 한 번에 내보냅니다. 크롬 웹 스토어에 출시했습니다(무료 · Pro 월 US$1).

실제 서비스 열기 · memo.rayai.ai ↗

홍보영상 · 30초 · 소리 있음

30초 영어 홍보영상 — 실제 확장 프로그램 UI 캡처로 만든 모션그래픽입니다. HTML 타임라인을 프레임 단위로 렌더링해 ffmpeg로 인코딩했고, 내레이션과 배경음악이 들어 있습니다(소리 있음). 데스크톱은 16:9, 휴대폰은 9:16 세로판이 재생됩니다. 화면 속 데모 페이지는 로이스바인 사이트입니다.

문제

웹사이트를 함께 검토하는 회의의 피드백은 채팅방 스크린샷, 손으로 그린 빨간 동그라미, 긴 메시지로 흩어지기 쉽습니다. 어느 페이지의 어느 요소를 두고 한 말인지가 메모와 따로 놀아, 회의가 끝나면 다시 짝지어 정리해야 합니다.

접근

툴바 아이콘을 누른 탭에서만 켜지는 오버레이로 만들었습니다. 메모 모드(Insert 키)에서 요소를 클릭하면 번호 핀과 메모 창이 열리고(핀을 찍는 동안 링크는 열리지 않음), 핀은 화면 좌표가 아니라 요소에 붙어 레이아웃이나 창 크기가 바뀌어도 따라갑니다. 핀마다 그 위치를 잘라낸 캡처를 핀 번호와 함께 저장하고, 한 패널에서 페이지별 메모를 모아 본 뒤 PPT 기획서 등으로 내보냅니다. 메모·첨부·캡처는 사용자 브라우저에만 저장하고, 밖으로 나가는 통신은 Pro 라이선스 확인뿐입니다. 코드는 AI가 쓰고, 기능 범위·데이터 경계·요금 구조를 정하고 실동작으로 검증하는 건 제가 했습니다.

결과

크롬 웹 스토어에 출시해 판매 중인 제품입니다. 무료로 메모 10개·PPT 기획서 3회까지 모든 기능을 쓰고, Pro(월 US$1)는 무제한입니다. 한국어/영어 UI와 실제 UI 캡처로 만든 30초 영어 홍보영상(16:9·9:16)까지 갖췄습니다.

Architecture

어떻게 동작하는가

사용자 브라우저 안 — 메모를 받는 서버 없음

  1. 01
    켠 탭에만 오버레이Chrome MV3 · activeTab · scripting

    툴바 아이콘을 누른 탭에만 넣습니다. 다른 탭·사이트에는 아무것도 넣지 않습니다.

  2. 02
    요소에 번호 핀 + 메모

    메모 모드에서 클릭한 요소에 핀을 붙입니다. 화면 좌표가 아니라 요소 기준이라 레이아웃·창 크기가 바뀌어도 따라갑니다.

  3. 03
    핀 자리 자동 캡처

    핀을 찍는 순간 보이는 화면을 찍어 요소 주변만 잘라, 핀 번호와 함께 저장합니다. 언제든 다시 캡처합니다.

  4. 04
    브라우저에만 저장chrome.storage.local

    메모·첨부·캡처를 사용자 브라우저(확장 저장소)에 둡니다. 입력하는 동안 자동 임시저장합니다.

  5. 05
    공유 · 내보내기텍스트 · JSON · .pptx

    파일은 사용자 기기에서 만들어지고, 누구에게 보낼지는 사용자가 정합니다. JSON은 같은 페이지에서 핀을 그대로 재현합니다.

경계 밖

  1. 06
    Pro 라이선스 확인Lemon Squeezy License API

    밖으로 나가는 유일한 통신입니다 — 라이선스 키와 인스턴스 ID만 보내고, 메모·캡처·첨부는 보내지 않습니다.

켜기 → 핀·메모 → 자동 캡처 → 브라우저 저장 → 내보내기. Pro 라이선스 확인만 브라우저 밖(Lemon Squeezy License API)으로 나갑니다.

Decisions · 4

왜 이렇게 설계했는가

기술 선택의 근거와 트레이드오프 — 코드 대신 의사결정으로 설계를 설명합니다.

  • ?메모를 어디에 저장할까 — 자체 서버 vs 사용자 브라우저?

    선택
    메모·첨부·캡처를 사용자 브라우저(chrome.storage.local)에만 저장 — 메모를 받는 서버를 두지 않음
    근거
    메모에는 검토 중인 사이트의 화면 캡처와 첨부가 그대로 담깁니다 — 이 내용을 사용자 기기 안에만 두려고 메모를 받는 서버를 운영하지 않고, 분석 도구·광고·추적도 쓰지 않습니다(개인정보 처리방침에 명시).
    트레이드오프
    메모·첨부·캡처는 기기·브라우저 사이에 자동으로 옮겨지지 않습니다. 다른 사람이나 다른 컴퓨터로 넘길 때는 JSON 파일로 내보내고 받는 쪽이 가져옵니다.

  • ?핀을 화면 좌표에 찍을까, 요소에 붙일까?

    선택
    클릭한 요소 자체에 핀을 붙임(요소 라벨·핀 위치를 함께 저장)
    근거
    반응형 사이트는 창 너비마다 배치가 바뀝니다 — 좌표 핀은 창 크기만 달라져도 엉뚱한 곳을 가리킵니다. 요소에 붙이면 레이아웃이 바뀌거나 창 크기를 바꿔도 핀이 따라가고, JSON을 받은 사람이 같은 페이지에서 불러와도 핀이 그대로 다시 나타납니다.
    트레이드오프
    핀이 요소에 기대는 만큼, 고친 페이지에서 그 요소가 빠지면 핀이 가리킬 곳도 없어집니다. iframe 안 내용과 크롬 자체 페이지(chrome://·웹 스토어)에는 핀을 찍을 수 없습니다.

  • ?결과 공유: 호스팅 링크 vs 내보낸 파일?

    선택
    텍스트 복사·파일 저장·JSON(핀 재현)·편집 가능한 PPT 기획서(.pptx) — 전부 사용자 기기에서 생성
    근거
    피드백을 받는 고객·개발자는 확장 프로그램이 없어도 읽을 수 있어야 합니다 — 회의 뒤엔 표지·요약·메모별 캡처 슬라이드가 담긴 PPT를 바로 고쳐 보내고, 같은 확장을 쓰는 사람에겐 JSON으로 핀을 그대로 넘깁니다.
    트레이드오프
    링크 하나로 함께 보는 방식이 아니라 파일을 주고받아야 합니다. 대신 서버 없이 동작하고, 파일을 누구에게 보낼지는 사용자가 정합니다.

  • ?가격·결제: 직접 결제 구현 vs 판매 대행(Merchant of Record)?

    선택
    무료(메모 10개·PPT 3회, 그 밖의 기능 전부) + Pro 월 US$1 — 결제·세금은 Lemon Squeezy가 판매 대행
    근거
    모든 기능을 무료로 먼저 써 보고(메모 10개·PPT 3회), 더 필요할 때만 월 US$1로 구독하게 했습니다. 판매 대행사가 결제·부가세·영수증(해지 링크 포함)을 처리해, 결제·세금 처리를 직접 만들지 않습니다.
    트레이드오프
    구독 확인을 외부 서비스에 기대고, 그 때문에 이 확장의 유일한 외부 통신(라이선스 키·인스턴스 ID 확인)이 생깁니다 — 메모·캡처는 여기에도 실리지 않습니다.

Gallery · 6

실제 화면

  • 메모 모드에서 사진을 클릭해 생긴 1번 핀과 메모 입력창 — 자동 캡처 미리보기, 메모, 참고 URL, 첨부·삭제·저장 버튼
    01핀 + 메모 — 메모 모드에서 사진을 클릭하면 1번 핀과 입력창이 열립니다. 위쪽은 핀을 찍는 순간 자동 저장된 캡처(핀 번호 표시, 다시 캡처 가능)이고, 아래에 메모·참고 URL을 적고 예시 이미지·파일을 첨부합니다. (영어 UI 화면 · 데모 페이지는 로이스바인 사이트)
  • 페이지에 찍힌 번호 핀 3개 — 사진(1), 제목(2), 빈 영역(3) + 우하단 픽셀 자·메모 목록·메모 모드 버튼
    02핀은 화면 좌표가 아니라 클릭한 요소에 붙어 레이아웃이나 창 크기가 바뀌어도 따라갑니다. 사진(1)·제목(2)뿐 아니라 3번처럼 빈 곳에도 핀을 찍을 수 있습니다. 우하단 버튼으로 픽셀 자·메모 목록·메모 모드(Insert 키)를 켭니다.
  • 오른쪽 메모 목록 패널 — 페이지별 메모와 캡처 미리보기, 전체 복사·파일로 저장·JSON 내보내기/가져오기·PPT 기획서 버튼, 무료 한도 사용량
    03메모 목록 패널 — 페이지별로 묶인 메모를 캡처 미리보기와 함께 한곳에서 봅니다. 전체 복사, 파일로 저장, JSON 내보내기·가져오기(같은 페이지에서 핀 재현), PPT 기획서 내보내기가 모두 여기 있고, 아래에 무료 한도 사용량이 보입니다.
  • 내보낸 PowerPoint 슬라이드 — 왼쪽에 1번 핀 캡처, 오른쪽에 메모 내용과 참고 링크
    04PPT 기획서 — 클릭 한 번으로 표지·요약·메모별 슬라이드가 담긴 편집 가능한 .pptx를 만듭니다. 메모 슬라이드는 왼쪽에 핀 캡처, 오른쪽에 메모와 참고 링크입니다.
  • 픽셀 자 — 두 사진 카드 사이 간격을 드래그로 재어 39 px로 표시, 하단 읽기창과 복사 버튼
    05픽셀 자 — 요소에 마우스를 올리면 크기를, 드래그하면 거리를 px로 보여 줍니다. '카드 간격을 줄여 주세요' 같은 메모에 실제 수치(여기선 39 px)를 붙여 말할 수 있습니다.
  • 요금 안내 창 — 무료는 메모 10개·PowerPoint 3회, 월 US$1 구독 버튼, 구매 이메일로 받은 라이선스 키 입력란
    06요금 · 라이선스 — 무료로 메모 10개·PPT 기획서 3회까지 쓰고, 구독(월 US$1)하면 한도가 없어집니다. 결제는 Lemon Squeezy가 처리하고, 이메일로 받은 라이선스 키를 이 창에 넣으면 Pro가 켜집니다.

Tech · 6

사용 기술

구현: AI (Claude 등) · 구조 결정과 검증: Ray Moon

  • Chrome Extension (MV3)
  • activeTab · scripting
  • chrome.storage.local
  • PowerPoint(.pptx) 내보내기
  • Lemon Squeezy
  • EN/KO i18n

다른 케이스도 같은 (문제 → 접근 → 결과 → 의사결정) 구조로 정리되어 있습니다.

← 케이스 목록 보기

Next

이 케이스에 대해 이야기 나누고 싶다면

채용·협업 어느 쪽이든 편하게 연락 주세요. 1영업일 안에 회신드립니다.

연락하기 →실제 서비스 열기 ↗

doctordog1221@gmail.com