AI로 UI 번역하기: 문구와 레이아웃을 함께 검토하는 방법

AI로 UI를 번역할 때는 문장만 바꾸지 말고 그 문장이 놓인 화면까지 함께 검토해야 합니다. 먼저 원본을 보존한 언어별 프레임을 만들고, 선택한 텍스트를 번역한 뒤 의미, 용어, 줄바꿈, 버튼 너비를 차례로 확인합니다. 번역과 다시쓰기를 분리하면 의미를 바꾸지 않으면서 문구를 다듬기 쉽습니다.

Pixso의 UI 디자인 작업 공간에서 AI 텍스트 작업을 활용하면 디자인 안에서 번역과 문구 수정을 진행할 수 있습니다. 완성 기준은 번역 결과가 생성되었는지가 아니라, 사용자가 같은 작업을 이해하고 수행할 수 있는 문구와 레이아웃이 되었는지입니다.

1부. 다국어 UI는 문구와 화면을 함께 검토해야 합니다

글로벌 서비스를 준비하는 팀에서는 번역을 어느 단계에서 처리할지가 중요합니다. 완성된 화면의 텍스트를 뒤늦게 교체하면 레이아웃과 동작 설명을 다시 검토해야 합니다. 주요 화면을 설계할 때부터 대상 언어를 넣어 보면 이런 문제를 더 일찍 발견할 수 있습니다.

기존 번역 흐름에서 자주 생기는 세 가지 문제

디자이너가 화면의 문구를 추출해 번역사나 번역 서비스에 전달하고, 결과를 다시 디자인 파일에 넣는 과정에서는 다음 문제가 생기기 쉽습니다. 외부 번역 방식 자체가 문제라기보다 화면 맥락과 변경 기록이 전달되지 않는 것이 원인입니다.

첫째, 텍스트가 차지하는 공간의 변화입니다. 번역 길이는 언어와 문장에 따라 달라집니다. 버튼에서 줄이 바뀌거나 내비게이션이 넘칠 수 있으므로 모든 번역이 일정 비율로 길어진다고 가정하지 말고 실제 문구를 넣어 봅니다.

둘째, 맥락의 단절입니다. ‘Close’는 창을 닫는 동작일 수도 있고 계정을 종료하는 작업의 일부일 수도 있습니다. 텍스트만 전달하면 어떤 컴포넌트에 있는지, 사용 후 무슨 일이 일어나는지 알기 어렵습니다.

셋째, 전달본의 불일치입니다. 번역표는 수정되었는데 화면에는 이전 문구가 남거나, 개발 중인 문자열이 승인된 문구와 달라질 수 있습니다. 언어, 화면, 문자열 식별자, 승인된 문구를 연결해 두어야 합니다.

캔버스 안에서 번역할 때의 장점

디자인 안에서 번역하면 버튼, 제목, 오류 메시지를 해당 화면과 함께 비교하기 편합니다. 다만 캔버스에 있다는 이유만으로 AI가 모든 컴포넌트의 업무 의미를 정확히 이해하거나 레이아웃을 보존하는 것은 아닙니다. 필요한 맥락을 직접 주고, 결과가 길어졌을 때는 줄바꿈과 컨테이너 크기를 조정합니다.

Auto Layout은 콘텐츠 변화에 따른 배치를 검토하는 데 도움이 됩니다. 잘못 번역된 동작을 바로잡거나 모든 언어의 읽기 순서를 결정하는 기능과는 구분해야 합니다.

2부. 네 가지 플랫폼은 작업 목적에 맞춰 비교하세요

Pixso, Figma, Canva, Adobe Express는 디자인 안에서 텍스트를 다루지만 주로 만드는 산출물과 번역 이후의 작업은 다릅니다. 아래에서는 UI 설계와 시각 콘텐츠 제작이라는 사용 맥락을 중심으로 살펴봅니다.

(1) Pixso: 화면과 문구를 함께 수정하기

Pixso는 선택한 텍스트나 프레임의 문구를 번역하고 다듬는 Smart Text 작업을 제공합니다. 같은 디자인 파일 안에 원문과 번역본을 나란히 두면 텍스트 길이와 상태별 문구를 비교하기 좋습니다.

(2) Figma: 기존 디자인 파일의 텍스트 작업에 연결하기

Figma는 텍스트 다시쓰기, 줄이기, 번역 기능을 제공합니다. 공식 도움말의 Translate 흐름은 텍스트 레이어를 선택하고 Actions에서 Translate to를 고른 뒤 대상 언어를 선택하는 방식입니다. 해당 독립 텍스트 도구는 유료 플랜과 파일 편집 권한을 조건으로 안내됩니다. 사용하려면 파일의 편집 권한과 사용 중인 플랜을 함께 확인합니다.

이미 Figma에서 UI를 관리한다면 기존 파일에서 문구를 비교하는 흐름을 사용할 수 있습니다. 번역 메모리, 용어 승인, 문자열 배포가 필요한 팀은 그 작업을 담당하는 별도 시스템과 어떻게 연결할지도 정해야 합니다. Figma의 공식 텍스트 AI 도움말에서 세 작업의 차이를 확인할 수 있습니다.

(3) Canva: 페이지 단위 시각 콘텐츠 번역하기

Canva의 Translate는 디자인 페이지 안의 텍스트를 다른 언어로 바꾸는 기능입니다. 앱 메뉴에서 대상 언어와 페이지를 선택하는 방식으로 안내되며, 번역 페이지 복제나 글꼴 크기 조정 옵션을 활용할 수 있습니다. 프레젠테이션이나 캠페인 이미지처럼 페이지 단위로 배포하는 콘텐츠에서 검토하기 편합니다.

UI 상태와 개발용 문자열을 관리하는 일은 페이지 번역과 별개입니다. 디자인을 번역한 뒤에도 실제 서비스의 컴포넌트, 오류 상태, 문자열 키와 대응시켜야 합니다. 기능의 범위와 사용 방식은 Canva Translate 공식 안내에 설명되어 있습니다.

(4) Adobe Express: 디자인 페이지와 글꼴 변화를 함께 보기

Adobe Express의 Translate는 파일, 템플릿, PDF의 텍스트를 번역하고 어조를 조정하는 기능입니다. 이 번역 기능은 디자인의 텍스트와 어조를 다루며, 이미지 생성 작업과 구분됩니다. 번역된 글자가 원래 영역에 들어가지 않으면 글꼴 크기나 텍스트 상자 크기가 바뀔 수 있습니다.

시각 콘텐츠를 여러 언어로 만들 때는 원래 글꼴이 대상 언어의 문자를 지원하는지, 자동으로 바뀐 글꼴과 크기가 읽기 쉬운지 살펴봅니다. Adobe의 번역 시 언어와 글꼴 동작 안내에는 대체 글꼴과 텍스트 영역 변화가 설명되어 있습니다.

3부. Pixso에서 번역과 다시쓰기를 진행하는 순서

번역은 다른 언어로 의미를 옮기는 작업이고, 다시쓰기는 같은 의도를 더 적절한 표현으로 다듬는 작업입니다. 두 작업을 한 번에 반복하기보다 원문과 비교할 수 있는 상태를 유지하면서 진행합니다.

기능 ①: 선택한 문구 번역하기

1단계: 원본을 보존하고 AI 작업 열기

언어별로 수정할 프레임을 준비하고 원본과 구분되는 이름을 붙입니다. 번역할 객체를 선택한 뒤 AI 패널에서 Smart Text 작업을 엽니다. 원문까지 덮어쓰지 않아야 결과를 비교하기 쉽습니다.

2단계: 번역할 범위 정하기

처음에는 버튼, 필드 레이블, 오류 메시지처럼 작은 묶음을 선택합니다. 같은 단어라도 동작이 다를 수 있으므로 앞뒤 화면과 역할이 분명한 범위부터 진행합니다.

3단계: 텍스트 레이어 선택하기

선택한 텍스트와 프레임의 범위가 의도한 화면인지 확인합니다. 상품명, 변수 자리표시자, URL처럼 번역하면 안 되는 부분은 요청에 명시하고 결과에서도 그대로인지 확인합니다.

4단계: 대상 언어와 맥락 전달하기

번역 작업에서 대상 언어를 지정합니다. 짧은 명령만으로 의미가 불분명하다면 ‘계정을 삭제하는 버튼이 아니라 작업 공간에서 나가는 버튼’처럼 동작을 설명합니다. 같은 제품 용어는 모든 화면에서 같은 표현을 사용하도록 요청합니다.

5단계: 번역 문구와 배치 함께 확인하기

번역이 끝나면 의미가 먼저 맞는지 살펴본 뒤 줄바꿈, 글꼴 대체, 잘린 글자, 버튼과 내비게이션 너비를 확인합니다. 중요한 의미를 삭제해서 공간에 맞추기보다 컨테이너의 너비나 높이를 조정할 수 있는지 먼저 판단합니다.

기능 ②: 뜻을 유지하면서 문구 다듬기

기존 텍스트의 어조나 길이를 바꿀 때는 다시쓰기 작업을 사용합니다. 선택한 레이어에서 Smart Text의 다듬기 작업이나 직접 입력한 지시로 원하는 방향을 설명합니다. ‘짧게’라는 요청만 주기보다 유지해야 하는 행동과 조건을 함께 지정합니다.

예를 들어 ‘작업 공간을 나가면 공유 파일에 접근할 수 없습니다’를 줄일 때는 나가는 동작과 접근 제한이라는 결과가 모두 남아야 합니다. 자연스럽게 들린다는 이유만으로 이를 ‘계정이 삭제됩니다’로 바꾸면 다른 행동을 안내하게 됩니다. 원문, 생성된 문구, 최종 문구를 비교한 뒤 채택합니다.

실전 예제: 작업 공간 설정 화면 번역하기

영어 설정 화면을 한국어로 옮긴다고 가정해 보겠습니다. 먼저 각 문구가 실행하는 작업을 구분합니다. 다음 표의 표현을 기준으로 버튼, 확인 대화상자, 완료 메시지에서 같은 의미를 유지합니다.

세 버튼을 같은 너비에 넣고 가장 긴 ‘작업 공간 나가기’가 잘리지 않는지 확인합니다. 확인 대화상자에서는 버튼보다 문장으로 결과를 설명하고, 취소하면 원래 화면과 입력값으로 돌아가도록 설계합니다. 마지막으로 해당 언어 검토자가 버튼을 누르기 전에 예상하는 결과와 실제 설계가 같은지 확인합니다.

4부. AI 번역을 실제 제품 문구로 연결하기

디자인 도구의 번역이 일반 번역기보다 항상 정확한가요?

도구 종류만으로 정확도 우열을 정할 수는 없습니다. 디자인 안에서 작업하는 장점은 화면과 문구를 가까이 놓고 검토할 수 있다는 점입니다. 원문이 모호하거나 제품 용어를 설명하지 않았다면 어느 도구에서든 의도와 다른 결과가 나올 수 있습니다.

내장 기능과 번역 플러그인은 어떻게 선택하나요?

소수 화면의 표현을 빠르게 비교할 때는 내장 텍스트 기능이 편리합니다. 용어집, 번역 메모리, 외부 번역가의 승인, 배포용 문자열 관리가 필요하면 그 흐름을 지원하는 연동을 고려합니다. 내장 여부만으로 데이터 보호나 맥락 이해가 더 우수하다고 판단하지 않습니다. 조직이 승인한 입력 범위와 실제 데이터 처리 조건을 기준으로 선택합니다.

개발자에게는 어떻게 전달하나요?

승인된 언어별 프레임과 문자열 식별자를 연결해 전달합니다. 예를 들어 workspace.leave와 workspace.delete를 구분하고, 한국어 문구와 사용 화면을 함께 기록합니다. 디자인 패널에서 문구를 확인하는 것과 애플리케이션의 언어 파일을 생성·배포하는 것은 다른 작업입니다. 팀의 문자열 관리 시스템이 있다면 화면을 바꾸면서 그 승인본도 함께 갱신합니다.

한 화면부터 의미와 배치를 함께 맞추세요

첫 작업은 모든 화면을 한꺼번에 번역하는 것보다 대표 설정 화면 하나가 좋습니다. 실제 동작이 다른 문구를 구분하고, 긴 레이블과 오류 상태를 배치한 뒤, 승인된 번역을 다음 화면에 적용합니다. Pixso에서 원문과 번역 프레임을 나란히 두면 표현을 바꿀 때 화면의 영향도 함께 볼 수 있습니다.

Pixso에서 다국어 UI 문구 비교하기 →