## Intro - AI agent를 엄청나게 잘 써서 Harness를 멋지게 걸면 정말 '딸깍'🖱️ 한 번으로 서비스가 마술처럼 다 만들어질까? 적어도 26년에는 그 레벨까지는 힘들 것 같다. 조금이라도 UI/UX에 관심이 있는 사람이라면 '이거 여기로 옮겨줘' 정도의 피드백을 하기 마련이다. - 오늘 소개할 Agentation은 그것을 위한 서비스다. 개인적으로 Agentation을 쓰기 전과 후로 Frontend 작업의 효율이 많이 좋아졌다는 것이 체감되고있다.🤗
## 1. Agentation?🧐 - [Agentation](https://www.agentation.com/)은 개발자가 아니라, 디자이너인 Benji Taylor라는 분이 만든 툴로 React 18+ 이상의 웹페이지에서 Frontend 수정 작업을 Agent에게 쉽게 명령하기 위해 만든 서비스다. 즉, React만 18+를 사용하고 있으면 Next.js에서도 사용할 수 있다. - 홈페이지에 들어가보면 알겠지만, 본업이 디자이너셔서 그런지.. 너무 디자인도 심플하지만 감각적이다.. 특히 들어가면 보이는 ascii code로 만들어진 토끼가 움직이는 애니메이션은 미쳤다..(추구미 저격 당함..🎯) ![화면 기록 2026-03-17 오후 8.22.56 (1)](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/bs3cvm7pnh-------------2026-03-17------8.22.56--1-.gif)
## 2. 설치 방법 📍 - 사용하고자 하는 Project 경로에서 아래 명령어로 설치! ```bash npm install agentation-mcp # or pnpm add agentation-mcp ``` - 그 다음, Terminal에서 `npx add-mcp "npx -y agentation-mcp server"`를 시전해주자. 그러면 사용하고 있는 agent를 선택해서 설치할 수 있다. - 이 때 Space Bar를 누르면 여러 agent를 선택 가능하다. 그 다음 Enter! - `npx agentation-mcp doctor`를 입력해서 아래와 같이 나오면 설치 완료!✔️ ![스크린샷 2026-03-17 오후 9.03.16|600](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/e1yk3y8s9qu------------2026-03-17------9.03.16.webp)
## 3. Settings 🍽️ - 내가 사용하는 프로젝트에 한 번만 세팅해주면 된다. :) 정말 간단하다! - 먼저, 아래와 같이 내가 사용하고자 하는 React / Next.js의 RootLayout에 개발 모드일 경우에만 Agentation을 실행할 수 있게 코드를 넣어주자. Next.js의 경우 RootLayout에 해당하는 `layout.tsx` 파일, React라면 `main.tsx` 상단에 Agentation을 import 해주고, ~~~ import { Agentation } from "agentation"; ~~~ - RootLayout에 아래와 같이 넣어주기! ![스크린샷 2026-03-17 오후 9.19.19](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/5a971b0m9ri------------2026-03-17------9.19.19.webp) - React Vite라면 아래와 같이 넣어주면 된다.😉 - import.meta.env.MODE === "development" 대신에 `import.meta.env.DEV`만 써도 된다. ![스크린샷 2026-03-18 오전 10.17.56](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/wmlt4qxtuvd------------2026-03-18-------10.17.56.webp) - 그리고 나서 `npm run dev / pnpm dev / vite dev`를 하면 개발모드에서 자동으로 Agentation을 만나볼 수 있다.🤗
## 4. 기본 사용법 🖱️ - 이제 개발을 시작하고 localhost로 들어가 보면 우측 하단에 동그란 친구를 만날 수 있다. ![image](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/vwfj1e01jk-image.webp) 1. 아래와 같이 동그라미를 누르고 2. 수정하고 싶은 영역에 마우스를 가져가면 자동으로 Component를 인식하고 Annotation을 달 수 있다!😮 3. 그리고 빈 영역도 드래그 해서 Annotation을 남길 수 있다. 👍 4. Annotation을 남겼으면 'Copy Feedback' 버튼을 누르거나 영자판으로 C를 눌러서 복사할 수 있다.✨ ![export-1773810924092|600](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/coegu6a88lf-export-1773810924092.gif) 5. 복사한 Annotation은 내가 사용하는 Agent로 가져가서 붙여넣기만 하면 끝! - 붙여넣기를 해보면, 아래와 같이 내가 만든 Annotation들이 실제 Agent가 이해하기 쉽도록 구조화되어 위치를 알려주고 있는 것을 볼 수가 있다.🫢 ![스크린샷 2026-03-18 오후 2.29.57](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/jf1bcd929uk------------2026-03-18------2.29.57.webp) - 작업이 아주 잘된다! ![스크린샷 2026-03-18 오후 2.31.25](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/z31oytj4x5p------------2026-03-18------2.31.25.webp) ### `💡 TIP` - 복사 붙여넣기를 했는데 다시 돌아오면 화면에 이전에 남긴 Annotation이 남아있어 귀찮을 수 있다. 이럴 때는 복사하면 바로 Annotation이 자동으로 삭제가 되도록 설정⚙️에서 `Clear on copy/send`에 체크를 해주자. ![image](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/oojls7ca5cq-image.webp)
## 5. Hands-Free Mode 🌴 - 이렇게 복붙으로 Agent와 대화할 수 있다는 것만해도 사실 감사한 것인데.. 이마저도 좀 귀찮다고 느껴지는 나. 아니나 다를까 이런 나를 위해(?) Hands-Free Mode가 있다!🫢 - 이제 Annotation을 적고 엔터만 쳐도 자동으로 피드백을 가져가서 수정이 가능해졌다! 😮 #### 1. CLAUDE.md / AGENTS.md - 아래와 같이 에이전트에게 내가 `'watch mode'`라고 하면 실시간으로 수정할 것을 자동으로 MCP로 받아와서 수정하게 하는 Prompt를 `CLAUDE.md`/`AGENTS.md`에 넣어주자. ~~~ ## Agentation Integration When I say "watch mode", call agentation_watch_annotations in a loop. For each annotation: acknowledge it, make the fix, then resolve it with a summary. Continue watching until I say stop or timeout is reached. ~~~ #### 2. Local MCP 서버 실행하기 - 아래 명령어를 Terminal을 열어서 실행해주자. 포트는 4747말고 8080이나 다른걸로 변경해도 된다. > npx agentation-mcp server --port 4747 - 이제 로컬 MCP Server 주소를 Frontend에도 알려줘야한다! 아래와 같이 endpoint prop을 추가해서 알려주자! ![image](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/73sey64pg6p-image.webp) - 다시 Front 화면 agentation 설정⚙️을 보면 이전과는 다르게 MCP 부분에 초록불이 들어와 있는 것이 보인다면 설정이 아주 잘 된 것이다.🥳
![image](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/bmul6crocnr-image.webp) - Claude Code를 다시 껏다 켜서 확인해보니 Local agentation MCP를 잘 인식하고 있다. ![image](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/namkkne486o-image.webp) #### 3. 신나게 지적질하기 🫵 - 자, 이제 Hands-free Mode를 즐겨보자.😎 Claude Code에게 'watch mode'라고 하니, 아래와 같이 대기를 한다!
![image](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/9v93syx6wjk-image.webp) - 그럼 아래와 같이 신나게 수정을 진행하면, 내가 지적만 하면, > 1. Web Front Agentation이 MCP Server로 Annotation이 달렸다고 알려줌. > 2. MCP Server를 바라보고 있던 Agent는 Server로 부터 Annotation을 가져감. > 3. 수정을 끝내고 해당 Annotation을 Resolve하라고 MCP Server 👉 Front 순으로 전달! 😆 최고다 정말.. ![export-1773821332104](https://pub-08bdc1f395e14377951ac0c9c22ba795.r2.dev/posts/user_38T3Ty5uKeRndW9PUwTFHGYZxwP/q0m29fly2ae-export-1773821332104.gif)
## 마무리 🍳 - 정말 개발하기 좋은 계절이다.🥹
✨HAPPY BUILDING!👷‍♂️ ### References - [Agentation](https://www.agentation.com/)

Web Front 지적하기! 🫵 (feat. Agentation)

0 comments

Web Front 지적하기! 🫵 (feat. Agentation)

0 comments