JIHYEONJEONG
Projects

Agentic Coding으로 처음 크롬 익스텐션을 5일간 만들어본 후기

2026년 3월 16일

Agentic Coding 기법을 사용해 크롬 익스텐션 Monkmode를 만든 경험에 대해 공유합니다.

Chrome
Agentic coding
retrospective
project

30일 간 몽크 모드를 체험해본 경험을 통해 집중력을 개선하는 노력을 하던 중, Agentic Coding을 본격적으로 배우면서 프롬프트가 완료될 시간 동안 소셜 미디어를 확인하거나 다른 일을 하는 나 자신을 깨닫게 되었다. 최대한 Context Switching을 줄여 집중하는 시간을 늘리게 된다면 훨씬 좋지 않을까?

그래서 Claude code를 끼얹어 보는 개발 - multistep form에서 에이전트를 통한 개발팀을 구성해 회원가입 폼을 구현해본 것에 이어 Agentic 코딩을 통해 간단한 크롬 익스텐션을 제작했다. 이 팔로우업 문서는 기존 브라우저 ai 클라이언트에서 Cursor를 거쳐 Claude Code를 통한 Agentic 코딩으로 크롬 익스텐션을 실제로 만들어 보고, 느낀 점과 개선해 나갈 점을 기록한다.

Monkmode

몽크 모드 - 심사중Reddit Monk mode 에서 영감을 얻어 만들어 본 가장 간단한 형태의 포모도로 타이머 + 사이트 블록리스트 기능을 가진 생산성 크롬 익스텐션이다.

여기서는 5일의 시간을 두고 Claude에서 제시한 Agentic Workflow를 최대한 충실하게 따르려고 했다. 완벽하게 앱의 스펙을 파악하고 인간은 계획과 프롬프트, AI는 해당 계획을 구체화하고 실제로 구현하며 테스트까지를 진행하는 구조를 생각했다.

정리하면 다음과 같다:

  • 인간: 코드 리뷰를 위한 크롬 익스텐션 기본 구조 확인, AI가 만든 룰 파일 작성 / 감독 및 코드 리뷰
  • AI: 인간의 플래닝을 통한 상세 룰 파일 생성, 실제 구현 및 테스트, git flow 관리

잘 된 것

  • 핵심 기능 및 권한 설정이 대부분 문제 없이 작성되었다.
  • 간단한 기본 지침으로 크게 복잡하지 않은 룰 파일을 만들어낼 수 있었다.
  • Layout Line Art 를 지시사항에 추가한 것이 큰 도움이 되었다. 물론 아주 간단한 ui였지만, 적어도 이번 프로젝트에서 ui가 잘못 표시되거나 하는 일은 없었다.
# docs/agents/ui-spec.md

## Popup — Timer View (대기 중)


┌─────────────────────────┐

│        🧘 Monk Mode      │

├─────────────────────────┤

│                         │

│   [ 1h ] [ 2h ] [ 3h ] [ 4h ]  │

│                         │

│        04:00:00         │

│                         │

│      [  ▶ Start  ]      │

│                         │

├─────────────────────────┤

│ [Timer] [Blocklist] [📊]│

└─────────────────────────┘

...

잘 되지 않은 것

  • Claude가 CLAUDE.md의 지시사항을 따르지 않는 일이 왕왕 있었다. 구현 후 확인을 끝내면 체크리스트를 업데이트 하거나, 테스트를 통해 통과하는지 확인하거나 하는 지시사항들이 무시되는 경우가 있었다.
  • 해당 부분은 '일반적으로' CLAUDE.md의 내용이 긴 경우, 무시당하는 상황이 많거나, 혹은 이유 없이 일어나는 경우가 있다고 한다. 여기에 대해서는 더 케이스를 확인할 필요가 있다.
  • Context poisoning - Pomodoro라는 어떻게 보면 헷갈릴 수 있는 용어로 설명해 지금 앱에서 필요하지 않다고 생각한 기능들:세션 후 휴식 시간, 타이머 일시정지와 같은 부분들이 알아서 추가되었다.
  • Git flow. 접근을 잘못했다고 생각한다. feat 브랜치 별로 나누어서 개발하는 것이 좋을 것 같다고 생각했지만, Claude는 실제 개발처럼 A를 개발하고 보니 B는 나누어져 있는 기능이 아니네? 라고 여기고 붙여버리거나, 브랜치를 따로 나눠버리거나 해 여기에 인간이 개입하다보니 오히려 더 혼란스러워졌다.

시도해볼 것

배운 것

이전 몽크모드 체험기에서도 느꼈듯이, 먼저 무엇이 필요한지를 이해하고 정리한 뒤 접근하는 것이 가장 큰 효과가 있었다. AI도 마찬가지라고 생각한다. 인간이 이해한 바를 제대로 전달하는 것이 최고의 활용 수단이다.

너무 많은 것을 한 번에 담으려 해 시행착오도 겪었지만 Claude를 비롯한 LLM 툴들은 계속해서 진화하고 있으니, 그에 따라 나에게 가장 맞는 개발 방법을 찾는 것이 중요하다고 생각한다.

References

Chrome extension tutorial

크롬 익스텐션을 Agentic Coding으로 개발한 다른 분의 블로그

On this page