AI agentation

agentation.dev

AI에게 “이 버튼 색만 바꿔줘”, “이 컴포넌트 레이아웃만 수정해줘” 같은 요청을 했는데, 의도한 부분과 전혀 다른 결과가 나왔던 경험이 한 번쯤은 있을 것이다.

보통 이런 상황에서는 수정하고 싶은 화면을 캡처해서 AI에게 설명하는 방식을 사용한다. 하지만 이 과정은 번거롭고, 정확한 요소를 다시 설명해야 하다 보니 AI가 개발자의 의도를 완전히 이해하지 못하는 경우도 자주 발생한다.

이런 문제를 해결하기 위해 등장한 것이 바로 Agentation이다. Agentation은 개발자가 직접 수정하고 싶은 UI 요소를 지정하고, 그 선택된 요소를 기준으로 AI에게 수정 요청을 할 수 있도록 도와주는 라이브러리다. 덕분에 “어디를 고쳐야 하는지”를 설명하는 데 드는 비용을 크게 줄일 수 있다.

이번 사이드 프로젝트에서는 여러 AI 기능을 실제 서비스에 적용해보는 경험 중 하나로,
Agentation 라이브러리를 도입해 개발 생산성을 높여보고자 한다.

설치

npm install agentation -D
yarn add agentation --dev

//app/_components/AgentationClient.tsx
"use client";

import { Agentation } from "agentation";

export default function AgentationClient() {
  // 개발환경에서만 노출 (프로덕션 제외)
  if (process.env.NODE_ENV !== "development") return null;

  return <Agentation />;
}

// app/layout.tsx에 추가하기

사용 방법

페이지에 오른쪽 하단에 agentation 툴바가 생기고, 맥북에서는 Cmd + Shift + F를 통해 활성화/비활성화할 수 있습니다.

원하는 곳을 드래그를 한 뒤 내용을 작성합니다.

그 후 agentation 팝업에서 Copy탭을 눌러 복사한 뒤 생성된 내용을  AI에게 그대로 붙여넣으면 됩니다.

## Page Feedback: /
**Viewport:** 1109×859

### 1. 2 elements: input " ", "캐릭터명"
**Location:** multi-select
**Feedback:** 포커스 됐을 때 더욱 더 강조해줘

### 2. 1 elements: button "초기화"
**Location:** multi-select
**Feedback:** 초기화 버튼을 빨간색으로 바꿔줘

// 컴포넌트 코드 붙여넣기