피그마(Figma) 변수 활용: 한국어 시안을 영어·일본어로 1초 만에 전환하는 설계법

글로벌 서비스를 지향하는 프로덕트 팀에게 '다국어 대응'은 피할 수 없는 숙명이다. 과거에는 한국어 시안을 완성한 뒤, 영문과 일문 텍스트를 일일이 복사해서 붙여넣고, 길어진 문장 때문에 깨진 레이아웃을 하나하나 수정하는 노가다를 반복했다. 하지만 2026년 현재, 여전히 이런 방식을 고수하고 있다면 당신의 업무 시간 절반은 허공에 뿌려지고 있는 셈이다.

피그마(Figma)의 Variables(변수)​와 String Modes(문자열 모드) 기능은 단순히 값을 저장하는 도구를 넘어, 디자인 시스템의 '지능'을 결정하는 핵심 요소가 되었다. 특히 2026년 업데이트된 AI 번역 엔진과의 연동은 디자이너가 번역가 없이도 완벽한 다국어 시안을 검수할 수 있는 환경을 제공한다. 수석 에디터이자 파워 유저로서, 시안 전체의 언어를 1초 만에 스위칭하는 것은 물론, 언어별 특성에 따른 레이아웃 대응 전략까지 바닥까지 파헤쳐 본다.

왜 여전히 '복사-붙여넣기'에 머물러 있는가?

많은 디자이너가 변수 기능을 알고 있음에도 불구하고 다국어 대응에 이를 적극적으로 활용하지 못하는 이유는 '초기 세팅의 귀찮음' 때문이다. 하지만 이 귀찮음은 단 한 번뿐이며, 그 대가는 프로젝트 내내 이어지는 평온함이다.

단순히 텍스트를 바꾸는 것이 목적이라면 플러그인을 써도 된다. 하지만 변수를 사용해야 하는 진짜 이유는 '데이터의 일관성'​과 '레이아웃 자동 검수'​에 있다. 독일어처럼 문장이 길어지는 언어나, 일본어처럼 행간 제어가 중요한 언어를 다룰 때, 변수 모드를 전환하는 것만으로도 디자인이 어떻게 망가지는지 즉각 확인하고 대응할 수 있다.

Photo by Dharmik Moradiya on Unsplash

1단계: 다국어 변수(Variable) 컬렉션 설계하기

가장 먼저 할 일은 프로젝트의 모든 텍스트를 담을 'Localization' 컬렉션을 만드는 것이다.

1. 컬렉션 생성: Local Variables 패널에서 Localization이라는 이름의 새로운 컬렉션을 생성한다.
2. ​그룹화(Naming Convention): 단순히 텍스트를 나열하지 말고, Category/Key 구조를 활용한다. 예컨대 Button/Label/Confirm, Onboarding/Step1/Title 식으로 명명한다. 이는 나중에 수백 개의 텍스트를 관리할 때 필수적이다.
3. ​모드 추가: 컬렉션 우측 상단의 '+' 버튼을 눌러 모드를 추가한다. 'KR', 'EN', 'JP' 등으로 이름을 지정한다.
4. ​값 입력: 각 모드에 해당하는 번역 데이터를 입력한다. 2026년 기준 피그마에서는 구글 시트나 AI 번역 툴과의 실시간 동기화를 지원하므로, 이를 연결하면 직접 입력하는 수고를 덜 수 있다.

2단계: 문자열 모드(String Modes)의 마법

변수 설정이 끝났다면, 이제 디자인 시안의 텍스트 레이어에 이 변수를 바인딩(Binding)할 차례다.

텍스트 레이어를 선택하고 우측 디자인 패널의 Text 섹션에서 'Variable' 아이콘을 클릭한다. 앞서 만든 Localization 컬렉션의 해당 키 값을 선택한다. 이제 이 레이어는 특정 텍스트가 아닌 '변수'를 보여주게 된다.

이 방식의 핵심은 '섹션(Section)' 혹은 '프레임(Frame)' 단위의 모드 전환​이다.

• 시안 전체를 감싸는 섹션을 선택한다.
• 우측 패널의 'Layer' 섹션에 있는 변수 아이콘을 클릭한다.
• Localization 컬렉션에서 원하는 언어(예: EN)를 선택한다.
• 순식간에 해당 섹션 안의 모든 텍스트가 영어로 바뀐다.

이것이 바로 "1초 만에 전환하는 설계법"의 실체다. 페이지 전체를 복사해서 하나는 한국어, 하나는 영어로 두는 비효율적인 방식은 이제 끝났다. 하나의 마스터 시안에서 모드만 바꿔가며 검수하면 된다.

3단계: 레이아웃 깨짐 방지를 위한 '반응형' 설계

단순히 글자만 바뀐다고 끝이 아니다. "Confirm"이라는 7글자 한국어(확인)가 독일어로 바뀌어 "Bestätigen"이 되는 순간, 버튼의 너비를 넘치게 된다. 이를 방지하기 위한 파워 유저의 팁은 다음과 같다.

오토 레이아웃 5.0과 Min/Max Width 활용

2026년 피그마의 오토 레이아웃은 더욱 정교해졌다. 다국어 대응 시에는 반드시 텍스트 컨테이너에 'Minimum Width'​와 'Maximum Width'​를 설정해야 한다.

• Min Width: 일본어나 중국어처럼 짧은 단어가 올 때 버튼이 너무 작아지는 것을 방지한다.
• ​Max Width: 영문이나 독문이 길어질 때 텍스트가 말줄임표(...) 처리가 되거나 다음 줄로 넘어가도록 제어한다.

텍스트 크기 변수화

언어별로 가독성이 좋은 폰트 크기가 다르다. 예를 들어 한글은 14px로도 충분하지만, 획이 복잡한 한자는 15px 이상이 되어야 가독성이 확보되는 경우가 많다. 이 역시 'Number Variable'을 사용해 언어 모드에 따라 폰트 사이즈와 행간(Line Height)이 자동으로 바뀌도록 설계할 수 있다.

Photo by Hal Gatewood on Unsplash

전문가의 비판적 시선: 피그마 변수의 한계와 우회법

물론 이 방식이 완벽한 것은 아니다. 실제 실무에서 부딪히는 몇 가지 한계점과 필자가 찾아낸 우회법(Workaround)을 공유한다.

1. ​모드 개수의 제한: Professional 플랜에서는 모드 개수가 4개로 제한된다. 10개국 이상의 다국어를 지원해야 한다면 Enterprise 플랜이 강제된다는 점은 명백한 단점이다.
   • Tip: 핵심 국가(KR, EN, JP, CN)만 모드로 관리하고, 나머지는 외부 플러그인을 병행하는 하이브리드 방식을 추천한다.
2. 이미지/아이콘의 다국어 대응: 텍스트는 변수로 해결되지만, 국가별로 다른 이미지를 보여줘야 할 때는 String Variable만으로는 부족하다.
   • Tip: 이미지 변수(Image Variable) 기능을 활용하거나, 컴포넌트의 'Property'와 'Variable'을 결합하여 모드 전환 시 인스턴스가 바뀌도록 설계해야 한다.
3. 문맥에 따른 번역 차이: 같은 "Search"라도 명사(검색 결과)와 동사(검색하기)로 쓰일 때 번역이 달라질 수 있다.
   • Tip: 변수 이름을 단순히 단어 위주가 아닌 Component/Search_Button처럼 목적 위주로 설정하여 혼선을 방지해야 한다.

피그마 요금제별 변수 기능 비교

다국어 대응 자동화를 위해 어떤 플랜을 써야 할지 고민되는 이들을 위해 정리했다.

2026년 기준 요금이며, 글로벌 팀이라면 최소 Organization 이상의 플랜을 권장한다.

결론: 당신의 시안은 '살아있는 데이터'인가?

과거의 시안이 단순히 '그림'이었다면, 2026년의 시안은 '살아있는 데이터의 집합'이어야 한다. 변수와 모드를 활용한 다국어 설계는 단순히 작업을 편하게 해주는 도구가 아니라, 프로덕트의 완성도를 결정짓는 필수 역량이다.

지금 당장 시작해야 할 사람:

• 글로벌 서비스를 개발 중이며 매주 번역 수정 요청에 시달리는 디자이너.
• 디자인 시스템을 구축하고 있으며, 확장성 있는 구조를 고민하는 시스템 디자이너.
• 개발자에게 "번역 데이터 어디서 봐요?"라는 질문을 하루에 3번 이상 듣는 기획자.

​굳이 안 써도 되는 사람:

• 국내 전용 단일 언어 서비스만 운영하는 경우.
• 페이지 수가 5장 미만인 소규모 랜딩 페이지 작업자.

피그마의 변수 기능을 정복하는 것은 단순히 툴을 잘 다루는 것을 넘어, 협업의 언어를 바꾸는 일이다. 오늘 소개한 워크플로우를 팀의 표준으로 삼아보길 바란다. 1초 만에 언어가 바뀌는 시안을 본 동료들의 눈빛이 달라질 것이다.

​Editor's Note: TEEP은 도구의 기능을 나열하는 것을 넘어, 그 기능이 사용자의 삶과 업무를 어떻게 혁신하는지에 집중합니다. 피그마 변수 활용에 대해 더 깊은 기술적 질문이 있다면 댓글로 남겨주시기 바랍니다.