Claude Code + Figma MCP로 UX 라이팅 리소스 50% 절감한 에이전시 실전 사례 (id.news.hada.io)

한줄 요약

Claude Code와 Figma MCP를 연결해 UX 라이팅 반복 업무를 50% 자동화한 에이전시 실전 구현기.

어떤 상황에서 필요한가?

UX 라이팅은 서비스 전체 텍스트를 검토하고 일관된 톤으로 교정하는 작업이다. 문제는 이 일이 생각보다 훨씬 많은 리소스를 잡아먹는다는 점이다. 가이드북을 뒤적이고, 유사 사례를 찾아 비교하고, Figma에서 수동으로 텍스트를 수정하고 변경 지점을 표시하는 과정은 반복적이지만 판단이 필요한 작업처럼 느껴져 자동화 시도조차 꺼리게 된다.

실제로 "친근하게 써주세요"라는 지시는 사람마다 다르게 해석된다. AI도 마찬가지다. 이런 환경에서는 AI를 써도 결과물이 들쭉날쭉하고 검수 비용이 줄어들지 않는다. 이 문제를 정면으로 해결한 사례가 GeekNews에 공유됐다. 에이전시 규모에서 전체 서비스 텍스트 검토를 AI로 시스템화한 경험이다.

핵심 구현 방법

1. '측정 가능한 톤 스펙트럼'으로 주관성을 제거한다

"친근하게"가 아니라 온보딩부터 경고 메시지까지 5단계 톤을 정의한다. 각 단계에는 예시 문장과 사용 맥락이 붙는다. AI는 상황에 따라 어떤 단계의 톤을 적용해야 하는지 스스로 판단할 수 있게 된다. 주관적 지시를 스펙으로 변환하는 이 과정이 자동화 품질의 출발점이다.

2. 글로서리 관리가 품질의 70%를 결정한다

이 사례에서 강조하는 포인트 중 하나가 용어 사전(glossary)이다. 서비스 내 고유 용어, 금지 표현, 권장 표현을 체계적으로 정리해두면 AI가 일관된 결과를 낸다. 역으로 말하면, 글로서리가 엉성하면 프롬프트를 아무리 정교하게 써도 결과물이 흔들린다.

3. Claude Code CLI + Markdown 폴더 구조

모든 규칙을 하나의 프롬프트에 욱여넣는 대신, 원칙·예시·세션 기록을 별도의 Markdown 파일 구조로 관리한다. CLI 환경에서 AI는 필요할 때만 해당 파일 인덱스를 읽는다. 불필요한 컨텍스트 로딩을 줄여 토큰 낭비를 막고 응답 정확도를 높이는 방식이다. 대형 언어 모델을 쓸 때 컨텍스트 윈도우를 어떻게 관리하느냐가 실제 품질에 직결된다는 점을 잘 보여준다.

4. Figma MCP 연결로 디자인 워크플로우 자동화

이 구현의 가장 인상적인 부분이다. 디자이너가 시안 링크를 공유하면 AI가 직접 Figma에 접근한다. 이후 원본 버전 복제 → TOBE 버전 생성 → 텍스트 교체 → 변경 지점 분홍색 표시까지 자동으로 처리된다. 수동으로 Figma를 열고 텍스트를 하나씩 교체하고 주석을 다는 작업이 통째로 사라진다.

5. 세션 기록 → 공식 원칙 승격 구조

팀원과의 대화에서 축적된 세션 요약에서 반복 패턴을 발견하면, 이를 공식 Docs로 격상한다. 봇이 단순 도구에 머물지 않고 조직의 라이팅 자산과 함께 성장하는 구조를 만드는 것이다. AI를 일회성 도구가 아니라 누적 학습 시스템으로 설계한다는 관점이 실용적이다.

실전에서 주의할 점

이 구조를 도입할 때 가장 먼저 투자해야 할 부분은 도구 세팅이 아니라 기준 정의다. 톤 스펙트럼과 글로서리가 없는 상태에서 Claude Code와 Figma MCP를 연결해봤자 자동화되는 건 실수뿐이다.

Figma MCP 연동은 현재 API 접근 권한 설정과 버전 관리 방식에 따라 팀마다 구현 난이도가 다를 수 있다. 특히 대형 Figma 파일에서 컴포넌트 구조가 복잡할수록 텍스트 레이어 식별 정확도 문제가 생길 가능성이 있다. 초기에는 소규모 화면 단위로 테스트하고 점진적으로 범위를 넓히는 게 안전하다.

최종 판단은 여전히 사람이 해야 한다. 이 사례도 명시적으로 그 점을 강조한다. AI가 반복 루틴을 처리하는 동안 사람은 컨텍스트와 사용자 경험이라는 더 높은 층위의 판단에 집중하는 구조다. 자동화의 목적이 사람을 빼는 게 아니라 사람의 판단을 더 가치 있는 곳에 쓰는 것임을 기억해야 한다.