피그마 안에서 끝내는 UX 라이팅

화면에서 마지막까지 손이 가는 것은 늘 문구입니다. 버튼에 들어갈 한 줄을 고르고, 같은 말을 여러 언어로 옮기고, 브랜드 말투로 다듬고, 너무 길지는 않은지 다시 읽습니다. 하나하나는 몇 분이지만 화면이 서른 장이면 그것이 서른 번입니다. 그리고 그 서른 번이 서로 다른 목소리로 나오지 않게 하는 일은 따로 또 어렵습니다.

아이파트너즈는 웹사이트와 앱을 기획 · 디자인 · 개발하는 웹에이전시입니다. 이 일은 우리 디자이너가 매일 하는 일이라, 남의 도구를 기다리지 않고 직접 만들었습니다. 피그마 밖으로 들고 나가지 않는 것이 조건이었습니다 — 외부 도구에 문장을 붙여 넣고 결과를 다시 가져오는 왕복이 문제의 절반이었기 때문입니다. 텍스트 레이어를 고르는 것이 입력의 전부고, AI가 낸 결과는 그 레이어에 바로 들어갑니다.

무엇을 하는 도구인가

NX AI 서버에 붙는 피그마 플러그인입니다. 창은 400×640 — 작업 화면 옆에 세워 두는 크기입니다. 피그마가 라이트인지 다크인지에 따라 같이 바뀝니다. 위에서 텍스트 레이어를 고르면 네 탭이 각자의 방식으로 그 텍스트를 받습니다. 결과마다 적용과 복사 버튼이 붙어 있어, 마음에 드는 안을 한 번 눌러 레이어에 넣거나 따로 가져갑니다.

네 개의 탭, 네 가지 일

• Copy — 고른 레이어를 참고해 카피 후보를 여러 개 냅니다. 콘텐츠 타입 여덟(CTA 버튼 · 헤드라인 · 바디카피 · 플레이스홀더 · 에러 메시지 · 툴팁 · 레이블 · 메뉴/네비)과 톤 다섯(친근 · 전문 · 강렬 · 부드러운 · 격식체)을 고르고, 화면 설명을 한 줄 적으면 됩니다
• Translate — 여섯 언어(한 · 영 · 일 · 중 · 프 · 독)로 옮깁니다. 원문이 무슨 언어인지는 알아서 가립니다
• Refine — 지시대로 고칩니다. 프리셋 다섯(간결하게 · 자연스럽게 · 격식 · 친근 · 임팩트)을 누르거나 “영문 혼용 제거”처럼 직접 적습니다. 결과는 스트리밍으로 차례로 찍힙니다
• Readability — 읽기 어려운 곳을 짚습니다. 너무 길거나 어려운 표현이 어디인지 말해 줍니다. 이것도 스트리밍입니다

안쪽 — 레이어에 넣는다는 말을 지키려고 한 것

네 개의 탭으로 구성했습니다. 그런데 “레이어에 바로 넣는다”는 한 줄을 매번 지키려면 안쪽에 몇 가지가 필요했습니다.

• 무엇을 골랐는지 안다 — selectionchange를 듣고 있다가 TEXT 노드가 잡히면 id · 이름 · 내용을 UI로 넘깁니다. 다른 레이어를 누르면 대상이 그때그때 바뀝니다
• 폰트 때문에 멈추지 않는다 — 넣기 전에 그 노드가 쓰는 폰트를 전부 불러옵니다. 못 부르면 이름에서 'Variable'을 떼고 한 번 더 시도하고, 그래도 안 되면 폰트 에러를 띄우되 클립보드에 복사해 둡니다. 손으로 붙여 넣는 길은 남겨 두는 것입니다
• 다시 열어도 로그인이 살아 있다 — 토큰과 서버 주소를 clientStorage에 둡니다

카피 생성기와 갈라지는 자리 — 브랜드 톤

카피를 내는 도구는 이미 많습니다. 이 플러그인이 그것들과 다른 점은 두 가지입니다.

• 계정이 있다 — NX AI 계정으로 로그인합니다. 요청마다 Bearer 토큰이 붙고, 401이 오면 그 자리에서 로그아웃됩니다
• 브랜드를 고른다(RAG) — 설정에서 대상 브랜드를 고르면 헤더에 "Agentic RAG · {브랜드}" 표시가 붙고, 이후 카피는 그 브랜드의 결로 나옵니다. 같은 요청이 브랜드마다 다른 문장이 됩니다

이 자리가 마케팅 AI와 맞닿는 곳입니다. 아이파트너즈가 구축한 사이트는 오픈 뒤에도 캠페인 랜딩, 프로모션 배너, 안내 문구가 계속 바뀝니다. 그 문구를 매번 처음부터 쓰지 않고 브랜드 가이드와 자료를 참고하는 에이전트가 초안을 내면, 마케팅 담당자는 고르고 검증하는 일에 시간을 씁니다. 운영 단계의 마케팅 AI는 거창한 것이 아니라 이런 되풀이를 받아 주는 도구에서 시작합니다.

다음

지금은 레이어 하나가 단위입니다. 다음은 단위를 넓히고, 브랜드 지식을 더 깊이 붙이는 일입니다.

• 한 번에 여러 개 — 레이어 하나가 아니라 프레임 · 컴포넌트 단위로 생성 · 번역 · 다듬기
• 우리 브랜드로 — 지원 브랜드를 늘리고, 팀의 톤 가이드와 용어집을 등록해 활용하도록
• 되돌리기와 비교 — 생성 · 적용 이력을 남겨 이전 안으로 돌아가고, A/B 안을 나란히 보게
• 언어와 접근성 — 언어를 늘리고, 가독성 분석에 문장 길이 · 난이도 같은 접근성 기준을 더하기

어느 쪽으로 가든 지킬 것은 하나입니다. 디자이너가 보던 화면을 떠나지 않게 한다. 좋은 문구를 고르는 시간은 사람에게 남기고, 되풀이되는 손질과 톤 맞추기는 도구가 받습니다.

웹에이전시 AI라는 말을 우리가 쓰는 방식

AI 에이전시라는 말은 흔해졌습니다. 아이파트너즈가 그 말을 쓰는 기준은 하나입니다 — 우리 실무에 먼저 넣어 보고, 돌아가는 것만 고객사에 제안한다. 이 플러그인은 그 기준으로 만든 첫 도구입니다. 웹에이전시 AI는 카피를 쓰는 AI가 아니라, 기획 · 디자인 · 개발 · 운영의 되풀이되는 자리마다 이런 도구가 하나씩 들어가 있는 상태를 말합니다.

• 디자인 — 이 플러그인. 카피 · 번역 · 다듬기 · 가독성을 피그마 안에서
• 운영 · 마케팅 — 같은 브랜드 RAG를 캠페인 문구와 리포트 초안에
• 개발 — 코딩 에이전트와 자동 검증. 이 사이트가 그렇게 만들어졌습니다

왜 별도 도구가 아니라 플러그인인가

문구는 디자인 밖에서 판단할 수 없기 때문입니다. 버튼 폭, 줄 수, 옆에 놓인 것과의 균형을 같이 봐야 맞는 문장인지 압니다. 다른 창에서 쓴 카피는 화면에 올려 보고 다시 고치게 됩니다. 결과를 레이어에 바로 넣도록 만든 것은 그 판단을 화면 안에서 하게 하려는 것이었습니다.

짧은 문구가 경험을 좌우합니다. 버튼 라벨, 빈 화면의 안내, 에러 메시지의 말투에서 사용자는 브랜드의 태도를 읽습니다. 그래서 이 도구의 목표는 빨리 쓰는 것이 아니라 서비스 전체가 한 목소리로 말하게 하는 것이고, 브랜드 톤을 굳이 붙인 이유도 거기에 있습니다.