AI 어시스턴트와 함께 브라우저 확장 프로그램을 만들며 깨달은 실수들
요약
AI 어시스턴트를 활용해 브라우저 확장 프로그램을 개발하며 겪은 시행착오와 실무적인 교훈을 공유합니다. 아이디어보다 구현과 배포의 중요성, AI와의 소통 방식, 그리고 대량 편집 시 발생할 수 있는 위험성을 다룹니다.
핵심 포인트
- 아이디어 자체보다 구현(Implementation)과 배포(Distribution)가 핵심 해자임
- AI에게 작업을 요청하기 전, 수행할 내용을 다시 말하게 하여 이해도를 확인해야 함
- AI의 답변은 검증되지 않은 것으로 간주하고 반드시 코드로 증명하게 할 것
- 대량 편집 시 데이터 오류가 기하급수적인 피해로 이어질 수 있으므로 주의 필요
- AI와 논쟁이 필요할 때는 상황을 격상시켜 오류를 찾아내도록 유도할 것
Claude의 브라우저 확장 프로그램과 함께한 첫 시간: 나는 우리 LLC 등록 과정을 가리켰고, 그것이 양식을 처리하고, 적절한 페이지를 찾고, 필드를 채우며 진행되는 것을 지켜보았습니다. 나는 커피를 들고 앉아 아무런 기여도 하지 않았습니다.
나는 생각했습니다: 나는 정말 많은 제품을 출시하게 될 거야.
나는 단 하나를 출시했습니다. 그 사이에 일어난 일들은 다음과 같습니다.
아래의 모든 내용은 출시 전에 발견되었습니다. 그 중 어느 것도 영리함 덕분에 발견된 것이 아닙니다. 그것은 대부분 실패를 겪은 후에 천천히 구축된 프로세스를 통해 발견되었습니다.
무엇이 잘못되었나
아이디어가 어려운 부분이 아니었습니다.
일단 찾아보니, 몇 가지 유사한 기능을 가진 여러 제품을 발견했습니다. 누구도 정확히 똑같은 조합을 가지고 있지는 않았지만, 아이디어는 결코 해자 (Moat)가 아니었습니다. 훌륭한 구현 (Implementation)과 배포 (Distribution)가 해자인 것으로 보입니다.
제품을 만들면서 제품을 설계하게 됩니다.
추천 (Referral) 동작, 세션 중간에 체험판이 만료될 때 발생하는 일, 페이지 전체에서 번역이 작동하는 방식 등, 시작할 때 내 머릿속에 있던 것은 아무것도 없었습니다. 각각은 다른 일을 하는 도중에 압박 속에서 내려진 결정이 되었습니다. 가능한 한 워크플로 (Workflow)를 먼저 최대한 많이 적어두세요.
하지 않은 일을 했다고 말합니다.
아주 자신 있게 말이죠. 나는 내가 들었던 수정 사항이 실제로는 작성되지 않았다는 것을 발견하기 위해 한 번 이상 배포했습니다. 완료되었다는 모든 주장을 검증되지 않은 것으로 취급하세요.
여기서 도출된 규칙: 당신이 무엇을 잘못했는지 이론을 제시하기 전에, 코드가 맞다는 것을 증명하게 만드세요.
문단이 아닌 불렛 포인트 (Bullet points)로 작성하세요.
긴 답변은 나의 다섯 가지 포인트 중 어떤 것이 해결되었는지 파악하기 어렵게 만들었습니다. 지침에 번호를 매기고, 답변이 동일한 번호에 매핑되도록 만들자 "3번 항목을 수행했나요?"라는 질문이 답변이 가능한 질문으로 바뀌었습니다.
그것은 먼저 당신을 탓하고, 사실로 논쟁합니다.
두 개의 랜딩 페이지 변경 사항 중 하나는 반영되었고, 하나는 반영되지 않았습니다. AI의 판결은 "배포하지 않았습니다"였습니다. 저는 한 가지 변경 사항이 라이브 상태라고 말했습니다. 이는 제가 배포했을 때만 가능한 일입니다. AI는 제가 배포하지 않았다고 반복했습니다. AI는 제가 어떤 변경 사항을 볼 수 있는지 묻지도 않았고, 버그가 있었던 자신의 코드도 다시 열어보지 않았습니다. 저는 AI에게 욕설을 퍼부었습니다. 그러자 AI는 추측을 멈추고 확인하여 오류를 찾아냈습니다. 많은 경우, 상황을 격상(escalation)시키는 것이 유일하게 효과가 있는 방법처럼 보였는데, 이는 그 자체로 불편한 교훈입니다.
무언가를 만들기 전에 작업 내용을 이해했는지 확인하세요.
AI가 수행하려는 작업을 다시 말하게 하세요. 제가 낭비한 시간의 절반은, 저는 우리가 합의했다고 가정하고 있는 동안 자신감 넘치는 어시스턴트가 제가 요청하지 않은 것을 유창하게 만들어 버린 경우였습니다.
대량 편집(Bulk edits)은 피해가 기하급수적으로 커지는 지점입니다.
AI가 데이터 파일에서 제목을 가져와 20개 페이지에 걸쳐 관련 링크(related-links) 섹션을 재구축했습니다. 하나의 레코드에 선택적 필드(optional field)가 누락되어 있었고, 그 결과 AI는 끝부분을 벗어나 내부 데이터를 가공되지 않은 상태로 가시적인 콘텐츠에 붙여넣었습니다. 모델의 검증 스크립트(verification scripts)는 통과되었습니다. 실제 출력물을 읽어본 후에야 이를 발견할 수 있었습니다.
고장 나는 것은 당신이 작업하던 것이 아닌 경우가 많습니다.
- 스토어는 확장 프로그램의 이름과 설명을 당신이 작성한 대시보드가 아니라 패키지 내부의 파일에서 가져옵니다. 저희 것은 여전히 예전 제품명과 예전 문구를 담고 있었습니다. 대시보드는 당신이 보고 있는 것이고, 패키지는 실제로 배포되는 것입니다.
- "평가하기(rate us)" 버튼의 ID가 로컬 테스트용으로 하드코딩되어 있었습니다. 스토어의 모든 사용자에게 오류가 발생했을 것입니다.
- 로그인 기능이 밤사이 조용히 작동을 멈췄습니다. 긴 유휴 시간(idle periods) 후에만 나타났기 때문에 이를 찾는 데 며칠이 걸렸습니다. 원인은 서버 측 클라이언트의 기본 설정 중 일부를 꺼야 한다는 것이었습니다.
리스팅(listing)에 적힌 단어는 성능에 대한 약속입니다.
우리는 설명을 "즉각적인 (instant)"이라고 묘사했습니다. 그러다 약 일주일 동안 모델의 속도가 너무 느려져서 "즉각적인"이라는 말이 거짓말이 되었고, 그래서 모든 리스팅(listing), 모든 스크린샷 캡션, 그리고 사이트의 문구를 "지체 없는 (immediate)"로 변경했습니다. 또한, 속도가 느린 제공업체(provider)가 작동을 멈추는 대신 성능이 저하되도록 폴백 모델 (fallback model)을 추가했습니다. 당신의 카피 (copy)는 당신이 제어할 수 없는 인프라 (infrastructure)에 대한 주장입니다.
자동화된 위험 점수 (risk scores)는 행동이 아니라 선언을 측정합니다.
하나의 확장 프로그램 디렉토리 (extension directory)는 우리의 프로그램을 고위험으로 분류합니다. 그 이유는 다음과 같습니다: 우리는 5개의 도메인에 대한 접근 권한을 선언했습니다. 즉, 우리의 백엔드 (backend), 사용자가 자신의 키를 가져올 수 있는 3개의 AI 제공업체 (AI providers), 그리고 우리 자신의 사이트입니다.
USENIX Security에서 발표된 UCL, UC Davis 및 Mediterranea University의 2025년 연구는 10개의 인기 있는 AI 브라우저 어시스턴트 (AI browser assistants)를 조사했으며, 그 결과 여러 개가 전체 페이지 콘텐츠를 서버로 전송하고, 하나는 금융 및 건강 데이터를 포함한 양식 입력값 (form inputs)을 캡처하며, 여러 개가 연령, 성별 및 소득으로 사용자를 프로파일링 (profiling)한다는 것을 발견했습니다. 점수와 연구가 서로 다른 것을 측정하고 있는 것으로 보입니다.
클릭할 수 없는 것을 테스트하세요.
할인 코드와 추천인 속성 (referral attribution)은 확인할 수 있는 인터페이스 (interface)가 없습니다. 우리는 인터페이스나 어시스턴트가 아닌 데이터에 질문함으로써, 데이터베이스 쿼리 (database queries)를 통해 이를 검증했습니다 (Claude가 쿼리를 생성했습니다).
규칙은 채팅 메시지가 아니라 문서에 넣으세요.
페이지 빌드 규칙, UI 목업 (UI mockups), 추천 방식, 트라이얼 (trials) 동작 방식, 번역 구조 등이 해당됩니다. 새로운 세션은 문서로부터 시작하거나, 아니면 아무것도 없는 상태에서 시작합니다. 매번 브리핑 (briefing)을 다시 입력하는 것은 결국 무언가를 빠뜨리게 된다는 것을 의미합니다.
코드를 위해서는 매번 현재 파일을 건네주세요.
AI가 자신이 보유한 버전을 안정적으로 업데이트하지 못하는 것처럼 보였고, 그래서 여러 번 오래된 복사본을 수정했습니다. 이는 수정 사항을 되돌리거나, 작업 내용을 덮어쓰거나, 엉망으로 만드는 결과를 초래했습니다. 새로운 규칙: 최신 파일을 붙여넣고, 해당 파일 내의 특정 변경 사항을 요청하며, 그 외의 다른 것은 변경되지 않았음을 확인하게 하세요. 여전히 직접 확인은 해야 하지만, 이 방법은 문제를 급격히 줄여주었습니다.
프롬프팅은 설정이 아니라 제품 작업입니다.
제품은 실제 세계의 비유를 사용하여 사물을 설명합니다. 테스트 중 저는 뉴스 기사에서 한 정치인의 이름을 강조 표시했습니다. 그러자 그 내용은 항상 주목받아야 하는 서커스의 가장 큰 광대와 관련된 비유를 반환했습니다. 재미있긴 합니다. 하지만 15개 언어에 걸쳐 정치적 스펙트럼의 낯선 사람들에게 뉴스를 설명하는 도구에서는 사용할 수 없습니다. 중립성은 강제 규칙이 되었고, 실제 인물, 역사적 인물, 민감한 주제에 대한 가드레일(guardrails)이 생겼습니다. 또한 캐주얼한 인터넷 말투로 사물을 설명해 주는 슬랭 모드도 있습니다. 이 정치인에게서 나온 결과물은 여기에 인쇄할 수 없습니다.
SEO 교훈은 우연히 얻었습니다.
저희는 무료 설명 페이지를 게시했습니다. 그러다 저희가 작성한 'synergies'에 대한 설명이 Google AI 답변에서 거의 그대로 인용된 것을 발견했습니다. 그것은 운이었습니다. 그 페이지들이 기계가 깔끔하게 읽을 수 있는 방식으로 구조화되어 있었기 때문입니다. 그래서 저희는 이를 의도적으로 만들었습니다. 모든 섹션에 실제 제목을 넣고, 설명 깊이를 라벨링했으며, 공식 정의를 무엇인지 명시했습니다.
어리석은 것에 일주일 예산을 책정하세요.
Google 로그인 기능이 작동했습니다. 하지만 보여준 것은 10분 전에 설치한 확장 프로그램에서 사용자가 Supabase(저희 데이터베이스 제공업체)에 로그인하도록 요청하는 무작위 문자들의 화면이었습니다. 이는 마치 해킹당한 것처럼 보입니다.
이를 수정하려면 Google을 통한 도메인 검증이 필요했고, 구글은 저희 랜딩 페이지에 도구의 목적을 설명하지 않았다는 이유로 거절했습니다. 그런데 랜딩 페이지에는 그 내용이 눈에 띄게 설명되어 있습니다. 그러자 상태 메시지에는 Google이 이메일을 보냈고 답장해야 한다는 것이었습니다. 하지만 아무 이메일도 도착하지 않았는데, 이것은 공통적인 일이라고 합니다. 개발자 포럼에 글을 올린 것이 마침내 문제를 해결했습니다.
이 모든 것이 이런 방식으로 개발하는 것에 반대하는 논거는 아닙니다. 저는 이런 방식이 아니었다면 출시할 수 없었을 무언가를 출시했습니다. 하지만 현재 제가 일하는 방식은 처음 시작했을 때와 거의 닮은 구석이 없으며, 작업의 중심이 '내가 원하는 것을 설명하는 것'에서 '내가 얻은 것을 검증하는 것'으로 옮겨갔습니다.
"AI가 당신을 먼저 탓하는" 패턴이 다른 사람들도 겪는 현상인지, 아니면 제가 단지 운이 없었던 것인지 진심으로 궁금합니다.
만약 여러분도 이와 유사한 것을 만들어 보셨다면, 어떤 부분에서 문제가 발생했는지 듣고 싶습니다: support@tryclicked.app.
이 글의 주제: Clicked는 Chrome 및 Edge용 브라우저 확장 프로그램입니다. 페이지나 PDF에서 어떤 텍스트든 하이라이트(Highlight)하면, 15개 이상의 언어로 세 가지 깊이의 설명을 즉시 제공합니다.
작동 방식 확인하기: tryclicked.app
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기