하루 만에 돌아가는 AI 기능, 그다음이 문제다
AI 기능을 React 앱에 붙이는 건 이제 어렵지 않다. dev.to에 공개된 AI Text Enhancer 구현 사례를 보면, React 업로드 UI와 FastAPI 백엔드를 연결하는 데 필요한 코드는 사실상 useState 몇 개와 fetch 한 줄이다. 파일을 드래그하고, FormData로 POST 요청을 보내고, 응답으로 받은 Blob을 URL.createObjectURL로 뿌려주면 Before/After 비교 화면이 완성된다. 기술적 장벽은 놀랍도록 낮아졌다.
그런데 이 단계에서 멈추는 팀이 많다. 동작하니까 된 거라고 넘어가는 순간, TextEnhancer 컴포넌트 하나가 파일 유효성 검사, 모델 선택 상태, API 통신, 결과 렌더링, 에러 핸들링을 전부 떠안게 된다. 기능이 늘어날수록 이 컴포넌트는 건드리기 무서운 존재가 된다.
단일 컴포넌트가 모든 걸 아는 순간 생기는 문제
velog의 컴포넌트 분리 기준 아티클은 이 상황을 정확히 짚는다. 컴포넌트 이름에 '그리고(and)'가 들어가면 위험 신호라는 것. TextEnhancer는 사실 이렇게 쪼개져야 한다.
ImageDropZone: 파일 드래그·클릭 업로드, 크기·포맷 유효성 검사ModelSelector: 텍스트 선명화 / 영수증 / 스크린샷 등 모드 선택 상태 관리EnhanceButton: 로딩 상태 표시, 비활성화 조건 처리BeforeAfterViewer: 원본·결과 이미지 비교 렌더링, 다운로드 링크useTextEnhancer(custom hook): API 호출, 에러 상태, 로딩 상태 캡슐화
분리의 기준은 간단하다. "이 상태를 알아야 하는 컴포넌트를 최소화하려면?" 모달의 열림·닫힘 상태가 부모 페이지에 있을 필요가 없듯, 로딩 상태와 resultUrl은 useTextEnhancer 훅 안에서 완결되는 게 맞다. 분리는 파일 수를 늘리기 위한 게 아니라 변경의 영향 범위를 줄이기 위한 수단이다.
프로토타입 단계에서 구조를 해치지 않는 법
여기서 현실적인 긴장이 생긴다. 빠르게 검증하려면 일단 한 파일에 다 넣고 싶다. 그런데 그렇게 하면 나중에 구조로 가져가는 비용이 커진다. 이 둘을 어떻게 조화시킬까.
요즘IT가 소개한 구글의 google/agents-cli 워크플로우에서 힌트를 얻을 수 있다. 이 도구가 흥미로운 건 기능 자체가 아니라 순서를 설계했다는 점이다. 만들기 → 평가 → 배포 → 운영을 하나의 흐름으로 엮고, 각 단계에서 "지금 내가 뭘 확인해야 하는가"를 명확히 한다. 프론트엔드 컴포넌트 설계도 같은 원리로 접근할 수 있다.
프로토타입 단계: 단일 컴포넌트로 빠르게 돌린다. 단, hook으로 API 로직만큼은 분리한다. useTextEnhancer를 처음부터 뽑아두면 나중에 UI 레이어를 갈아엎어도 비즈니스 로직은 재사용된다.
검증 단계: 사용자 반응을 확인한다. AI 결과물이 실제로 유용한지, Before/After UI가 의사결정에 충분한지.
고도화 단계: 재사용 가능성이 확인된 UI(예: ImageDropZone, BeforeAfterViewer)를 컴포넌트로 분리한다. 두 번째 사용처가 생겼을 때 분리해도 늦지 않다.
AI 결과물이 '내 제품처럼' 느껴지려면
AI 기능을 붙이는 것과 AI 결과물이 제품처럼 보이는 건 다른 문제다. 요즘IT가 소개한 Atlassian의 DESIGN.md 실험은 이 지점을 정면으로 다룬다. AI가 생성한 화면이 어디서 본 듯한 '슬롭(slop)'이 되는 이유는 간단하다. 참고할 브랜드 맥락이 없으니 학습 데이터에서 가장 무난한 평균으로 수렴한다.
AI Text Enhancer 같은 기능을 실제 제품에 얹을 때도 같은 문제가 생긴다. 드롭존 스타일, 진행 상태 표현 방식, 결과 비교 인터페이스—이것들이 기존 디자인 시스템과 따로 놀면 기능은 되는데 제품처럼 느껴지지 않는다. Atlassian의 실험 결과처럼, 프로토타입에서는 DESIGN.md 같은 맥락 파일 하나로 AI 생성 결과를 브랜드에 가깝게 끌어올 수 있다. 하지만 프로덕션에서는 컴포넌트와 디자인 토큰이 명확히 정의된 시스템 위에서 작동해야 한다. 결국 컴포넌트 분리 구조와 디자인 시스템은 AI 시대에 더 중요해진다.
실전에서 작동하는 순서
정리하면 이렇다. AI 기능을 React에 붙일 때 가장 실용적인 흐름은 세 단계다.
1단계 — 동작 검증: API 엔드포인트와 핵심 UI만으로 프로토타입을 만든다. 단, API 로직은 커스텀 훅으로 분리해 UI 레이어와 결합도를 낮춘다.
2단계 — 책임 분리: 컴포넌트 이름에 'and'가 보이거나, 조건부 렌더링이 3단 이상 중첩되거나, 상태가 두 곳 이상에 중복되면 분리 신호다. 재사용이 목적이 아니라 변경 범위 최소화가 목적이다.
3단계 — 시스템 편입: 검증된 컴포넌트를 디자인 시스템에 등록한다. ImageDropZone은 다른 AI 기능에도, BeforeAfterViewer는 다른 비교 UI에도 쓸 수 있다.
AI가 기능을 빠르게 만들어주는 속도만큼, 그 기능이 제품 안에서 오래 살아남으려면 구조가 받쳐줘야 한다. 빠른 프로토타이핑과 견고한 구조는 상충하지 않는다. 순서를 설계하면 된다.