AI 브라우저 개발 스토리: 실패한 프로젝트가 새로운 생명을 얻은 이야기

Source: Dev.to

배경

저는 회사에서 AI 이니셔티브의 프론트엔드 리드로 일하고 있습니다. 2024년 상반기에 저는 미지근한 AI 프로젝트를 유지보수하고 있었고, 많은 전문가들처럼 좋은 성과 평가를 받기 위해 눈에 띄는 작업이 필요했습니다. AI 애플리케이션 담당 제품 매니저인 동료 Tan과 저는 보다 야심찬 아이디어를 탐구하기 위해 두 달간의 탐색을 시작했습니다.

초기 컨셉

경쟁사 앱을 검토한 뒤 우리는 “Jarvis‑style” 어시스턴트에 합의했습니다:

• 사용자가 질문을 한다.
• 에이전트가 자율적으로 정보를 수집하고, 다양한 도구를 호출하며, 답변을 제공한다.

이 컨셉은 Fellou의 AI 브라우저에서 영감을 받았으며, 그 인터랙션과 UI가 인상적이었습니다.

기술적 과제

브라우저 제어

핵심 문제는 웹 작업을 자동화하기 위해 브라우저를 프로그래밍적으로 제어하는 것이었습니다. 저는 회사의 레거시 C++ 클라이언트를 급히 포기하고, 프론트엔드 배경을 살려 Electron을 사용해 데스크톱 앱을 만들기로 했습니다.

다음 도구들을 조합해 보았습니다:

• browser‑use – 브라우저 자동화를 위한 Python 서비스.
• Playwright – 별도의 자동화 엔진.

Cursor(AI 어시스턴트)에게 Electron + browser‑use + Playwright를 통합할 수 있는지 물었더니 “가능”하다고 답했지만, 여러 차례 시도 끝에 통합이 불가능함을 확인했습니다. 작업 데모를 얻지 못하고 Cursor 크레딧에 $200을 썼으며, AI는 이미 이해하고 있는 분야에서만 작업 속도를 높일 수 있다는 교훈을 얻었습니다.

대체 스택 찾기

조사 결과 Fellou 팀이 오픈소스로 공개한 Eko 프레임워크를 발견했습니다. Eko를 Electron 안에서 호환성 작업을 거쳐 실행할 수 있음을 알게 되었습니다.

로컬 프론트엔드 서비스를 임베드하기 위해 Next.js를 선택했습니다. AI 도움을 받아 여러 차례 실패한 뒤, 직접 Next.js 문서를 따라가며 커스텀 서버를 이용해 Electron에 임베드하는 데 성공했습니다—이는 오픈소스 프로젝트 bolt.diy에서 사용된 접근 방식과 유사합니다.

프로토타입 구축

• React 기본기를 학습했습니다(이전 스택은 Vue였습니다).
• Electron의 메인/렌더러 프로세스와 IPC 통신을 공부했습니다.
• 웹 페이지를 뷰 윈도우에서 제어하기 위해 Eko 프레임워크를 Electron과 호환되게 만들었습니다.

구현된 에이전트

Fellou에서 영감을 받은 화면 공유와 완전 음성 입력을 실험했지만, 두 접근 모두 큰 제한점이 있어 포기했습니다.

그 결과 세 가지 에이전트를 결합한 “프랑켄슈타인” 데모가 완성됐으며, 발표용으로 충분히 작동했습니다.

프로젝트 거절

프로토타입을 리더십에게 시연했지만, 두 달간의 작업에도 불구하고 프로젝트는 거절되었습니다. 저는 다른 회사 AI 이니셔티브로 재배치되었고, 데모는 제 하드 드라이브에 남아 있었습니다.

오픈소싱

한 달 후, 다른 사람들도 비슷한 어려움을 겪고 있지 않을까 궁금해졌습니다. Claude Code를 사용해 주말 동안 깔끔한 오픈소스 버전을 다시 만들었으며, 이번엔 기업 제약이 없습니다.

레포지토리는 이제 공개되었습니다:

👉 GitHub:

구현된 기능 (밤샘 & 주말 작업)

• 히스토리 작업 재생
• 인간과의 상호작용 기능
• 음성 입력 지원
• 다국어 국제화
• 에이전트 설정 시스템
• 예약 작업
• 툴박스 페이지

인사이트

• AI는 전능하지 않다. 익숙한 분야에서는 작업 속도를 높여 주지만, 근본 기술에 대한 탄탄한 이해를 대체할 수는 없습니다.
• Cursor에 사용한 $200은 귀중한 교훈을 주었습니다: 익숙하지 않은 기술을 다룰 때는 스스로 학습해야 한다는 점.
• 오픈소싱은 지식이 쌓여서 먼지가 되지 않게 보존하고, 다른 사람들이 같은 함정을 피하도록 도와줍니다.

향후 작업

• 🎨 테마 커스터마이징 (다크 모드)
• 🔌 플러그인 마켓플레이스 (MCP 툴 생태계)
• 📊 시각적 워크플로우 에디터
• 🌐 추가 에이전트 (Shell, Email, Notion, …)

기여

관심이 있다면:

• ⭐ 레포지토리 별점 – 가시성을 높이는 데 도움이 됩니다.
• 🐞 이슈를 등록하거나 풀 리퀘스트를 제출하세요.
• 💬 GitHub Issues/Discussions에서 토론에 참여하세요.
• 📥 도구를 다운로드하고 사용해 본 뒤 피드백을 제공하세요.

내부 성과‑중심 프로젝트가 거절된 뒤, 주말에 재구축한 오픈소스 노력으로 이 “실패” 프로젝트는 새로운 생명을 얻었습니다. 오픈소스는 단순히 코드를 공유하는 것이 아니라 경험과 아이디어를 공유하는 것입니다.