Claude Code + Figma MCP — UX 라이팅 리소스 50% 절감 실전기

UX 라이팅 팀이 Claude Code와 Figma MCP를 연결했더니 리소스가 50% 줄었다. 단순히 AI에게 글쓰기를 맡긴 게 아니다. 반복 작업의 구조를 바꾼 것이다.

기존 UX 라이팅 워크플로우의 문제

디자이너가 시안을 보내면, UX 라이터는 이렇게 움직인다.

1. 가이드북에서 관련 원칙 검색
2. 유사 사례 찾아서 참고
3. 피그마에서 원본 복제 후 TOBE 버전 만들기
4. 텍스트 교체
5. 변경 부분 마킹
6. 교정 근거 문서화

이 중에서 1~5번이 전부 반복 작업이다. 내용을 판단하는 6번이 진짜 UX 라이터가 해야 하는 일인데, 시간의 대부분이 기계적인 앞선 단계에서 소진된다.

핵심 변화 1: 주관적 지침을 수치로 바꾼다

AI에게 "친절하게 써줘"라고 하면 제각각의 결과가 나온다. "친절함"의 기준이 없기 때문이다.

해결 방법은 5단계 톤 스펙트럼이다.

[💡 잠깐! 이 용어는?] 톤 스펙트럼: 커뮤니케이션 상황별 어조를 단계적으로 정의한 기준. 주관적 지시("친절하게")를 객관적 스펙으로 변환하여 AI가 일관된 출력을 생성하도록 한다.

이제 AI에게 "온보딩 화면, 1단계 톤으로 에러 메시지 작성"이라고 지시할 수 있다. 결과가 일관성을 가진다.

핵심 변화 2: 프롬프트에 모든 걸 담지 않는다

UX 라이팅 원칙, 사례, 세션 기록을 하나의 거대한 프롬프트에 넣으면 토큰이 폭발한다. 매 요청마다 전체 맥락을 다시 읽는 건 낭비다.

대신 마크다운 파일 시스템으로 관리한다.

ux-writing/
├── principles/        # 핵심 원칙 파일들
│   ├── tone-spectrum.md
│   ├── voice-guidelines.md
│   └── product-terms.md
├── examples/          # 케이스별 사례
│   ├── onboarding.md
│   ├── error-messages.md
│   └── confirmations.md
└── sessions/          # 진행 중인 작업 세션
    └── current.md

Claude Code는 필요한 파일만 읽어서 컨텍스트를 구성한다. 불필요한 내용을 토큰으로 낭비하지 않으면서도, 일관된 판단 기준을 유지한다.

핵심 변화 3: Figma MCP 자동화

가장 시간을 많이 잡아먹는 부분이 피그마 작업이었다. 디자이너의 시안 링크가 오면 UX 라이터가 직접 피그마에 들어가서 수동으로 작업해야 했다.

Figma MCP를 연결하면 Claude Code가 직접 피그마에 접속한다.

# .mcp.json 설정
{
  "servers": {
    "figma": {
      "command": "npx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_TOKEN": "your-figma-token"
      }
    }
  }
}

시안 링크를 던져주면 다음 작업이 자동으로 진행된다.

1. 원본 프레임 복제 → "TOBE" 버전 생성
2. 기존 텍스트 분석 및 문제점 파악
3. 톤 스펙트럼 기준으로 새 텍스트 생성
4. 피그마 텍스트 레이어 직접 교체
5. 변경된 레이어에 마킹 주석 추가
6. 교정 근거 자동 생성

비유하면 UX 라이터가 직접 피그마 도구를 쓰는 게 아니라, AI가 피그마 도구를 대신 쥐고 있는 것과 같다.

실제 워크플로우 변화

이전 워크플로우 (2시간 소요):

디자이너 시안 공유
→ UX 라이터 가이드북 검색 (30분)
→ 유사 사례 검색 (20분)
→ 피그마 작업 (30분)
→ 교정 근거 작성 (20분)
→ 검토 및 수정 (20분)

새 워크플로우 (1시간 소요):

디자이너 시안 공유
→ Claude Code + Figma MCP 자동 처리 (10분)
→ UX 라이터 맥락 검토 + 미세 조정 (30분)
→ 최종 확인 (20분)

가이드북 검색, 유사 사례 검색, 피그마 수동 작업이 모두 사라졌다. 남은 건 실제로 판단이 필요한 작업뿐이다.

용어집이 품질의 70%를 결정한다

이 시스템을 운영하면서 발견한 것이 있다. 아무리 워크플로우가 좋아도 용어집이 부실하면 결과물의 일관성이 무너진다.

제품 내에서 같은 개념을 부르는 이름이 화면마다 다르면 사용자는 혼란을 느낀다. AI도 마찬가지다. 용어집이 없으면 화면마다 다른 단어를 쓰게 된다.

## 핵심 용어집
 
| 사용 | 금지 | 설명 |
|------|------|------|
| 계정 | 아이디, 프로필 | 사용자 식별 단위 |
| 저장 | 등록, 추가 | 데이터 보존 행위 |
| 삭제 | 제거, 취소 | 영구 제거 |
| 취소 | 중단, 멈춤 | 진행 중인 작업 중지 |

이 용어집을 Claude Code가 참조하게 만들면 화면 간 일관성이 자동으로 유지된다.

마무리

• 주관적 지침("친절하게")을 수치화된 톤 스펙트럼으로 대체한다
• 프롬프트에 모든 규칙을 담지 말고, 파일 시스템으로 분리해서 관리한다
• Figma MCP로 반복적인 피그마 작업을 자동화한다
• 용어집 관리가 품질의 70%를 결정한다

리소스 50% 절감이라는 수치보다 중요한 변화가 있다. 팀이 "마킹 어디에 할까"가 아니라 "이 맥락에서 사용자가 어떤 감정일까"를 고민하는 시간이 늘어났다는 것이다. 그게 본래 UX 라이팅이 해야 할 일이다.

참고:

• 원문: https://news.hada.io/topic?id=28869