design-tokens

달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트 (새 탭에서 열림)

토스 디자인 시스템(TDS)은 서비스의 글로벌 확장과 다양한 플랫폼 대응을 위해 7년 만에 컬러 시스템을 전면 개편했습니다. 인지적으로 균일한 색공간인 OKLCH를 도입하여 시각적 일관성과 접근성을 확보하고, 디자이너가 직접 제어하는 자동화된 토큰 관리 체계를 구축했습니다. 이번 개편을 통해 TDS는 단순한 디자인 가이드를 넘어, 비즈니스 성장을 뒷받침하는 확장 가능한 기술 인프라로 진화했습니다. ### 기존 컬러 시스템의 한계와 부채 - **명도 불일치**: 동일한 명도 단계(예: 100)임에도 색상(Grey, Blue, Red 등)에 따라 실제 느껴지는 밝기가 달라 UI가 얼룩덜룩해 보이는 문제가 있었습니다. - **모드 간 이격**: 라이트모드와 다크모드의 명도 기준이 달라 다크모드에서 특정 색이 너무 튀거나 가독성이 떨어지는 현상이 발생했습니다. - **관리 체계의 파편화**: 웹, iOS, 안드로이드, 디자인 에디터 등 각 플랫폼에서 컬러를 개별 관리하면서 싱글 소스 오브 트루스(SSOT)가 무너지고 커뮤니케이션 비용이 증가했습니다. ### OKLCH 색공간을 통한 인지적 균일함 확보 - **지각적 평등성**: 수치상 명도와 인간이 느끼는 밝기가 다른 HSL 모델 대신, 인지적으로 균일한 OKLCH 및 HSLuv 색공간을 활용해 모든 색상의 명도를 통일했습니다. - **접근성 자동화**: 정의된 명도 체계를 바탕으로, 외부 브랜드 컬러를 입력하더라도 TDS 기준에 맞는 배경-텍스트 대비를 자동으로 추출하는 로직을 구현했습니다. - **디바이스 최적화**: RGB 환경에서 표현하기 어려운 OKLCH 색상을 위해 채도(Chroma)를 클램핑(Clamp)하여 색조와 명도를 유지하면서도 기기 호환성을 높였습니다. ### 심미성과 접근성을 위한 시각 보정 - **Dark Yellow 문제 해결**: 수치적으로만 맞춘 노란색은 탁해 보이거나 너무 진해 보일 수 있어, 노란색 계열에 한해 별도의 명도 진행 단계를 적용하는 시각 보정을 거쳤습니다. - **다크모드 시인성 강화**: 인간의 눈이 어두운 배경에서 대비를 더 낮게 인식하는 특성을 고려하여, 최신 명도대비 메트릭인 APCA를 참고해 다크모드의 대비를 더 강하게 설계했습니다. - **시맨틱 토큰 정비**: 색상의 값(Primitive)이 아닌 사용 의도(Semantic)에 집중한 토큰 체계를 정립하여 디자인 결정 시간을 단축하고 일관성을 보장했습니다. ### 디자이너 중심의 토큰 자동화 시스템 - **통합 파이프라인**: Figma 플러그인(Token Studio)과 GitHub를 연동하여 디자이너가 컬러를 수정하고 커밋하면 모든 플랫폼의 코드가 자동으로 생성되도록 구축했습니다. - **실험적 환경**: 개발자의 수동 작업 없이도 디자이너가 직접 토큰을 변경하고 빠르게 실험할 수 있는 환경을 만들어 디자인 시스템의 운영 효율을 극대화했습니다. 성공적인 디자인 시스템 개편을 위해서는 단순한 심미적 수정을 넘어, 데이터 기반의 색공간 설계와 엔지니어링 관점의 자동화가 필수적입니다. 특히 비즈니스가 확장되는 시점이라면 컬러 시스템을 개별 컴포넌트가 아닌, 모든 플랫폼을 관통하는 하나의 '코드'이자 '인프라'로 접근하는 태도가 필요합니다.

디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화 (새 탭에서 열림)

디자인 시스템과 AI의 결합은 단순한 도구의 조합을 넘어 프론트엔드(FE) 개발의 마크업 작업 방식을 근본적으로 혁신하고 있습니다. 네이버파이낸셜은 체계적으로 구축된 디자인 시스템을 기반으로 AI를 활용해 마크업 과정을 자동화함으로써 반복적인 코딩 시간을 단축하고 개발 효율성을 극대화했습니다. 다만, AI가 생성한 결과물을 실무에 즉시 투입하기 위해서는 디자인 토큰의 정교한 관리와 개발자의 세밀한 조정 작업이 반드시 병행되어야 한다는 점을 시사합니다. **네이버파이낸셜 디자인시스템의 근간: 토큰과 컴포넌트** * 디자인 시스템의 핵심인 '디자인 토큰'을 통해 색상, 간격, 폰트 등의 시각적 요소를 정의하고 디자이너와 개발자가 동일한 언어를 사용하도록 환경을 구축했습니다. * 재사용 가능한 UI 컴포넌트 단위를 명확히 정의하여, AI가 일관성 있는 코드를 생성할 수 있는 구조적 토대를 마련했습니다. * 단순한 UI 라이브러리를 넘어, 디자인 시스템 자체가 AI가 학습하고 참조할 수 있는 '신뢰할 수 있는 단일 소스(Single Source of Truth)' 역할을 수행합니다. **AI 마크업 효율을 극대화하는 Code Connect와 인스트럭션** * Figma의 'Code Connect' 기능을 활용해 디자인 도구 내의 컴포넌트와 실제 리액트(React) 코드를 직접 연결하여 AI가 맥락에 맞는 코드를 제안하도록 설계했습니다. * 디자인 시스템의 고유한 규칙과 코딩 컨벤션을 담은 상세한 '인스트럭션(Instruction)'을 AI에게 제공함으로써, 범용적인 코드가 아닌 팀의 표준에 부합하는 결과물을 얻어냈습니다. * 이 과정을 통해 개발자는 빈 화면에서 시작하는 대신, AI가 생성한 초안을 바탕으로 비즈니스 로직 구현에 더 집중할 수 있게 되었습니다. **현실적인 개발 도입 과정에서의 한계와 극복** * AI가 존재하지 않는 컴포넌트를 만들어내거나 잘못된 속성을 사용하는 '할루시네이션(환각)' 현상이 여전히 발생하여 개발자의 검토 과정이 필수적입니다. * 복잡한 레이아웃이나 고도의 인터랙션이 포함된 화면의 경우, AI가 단번에 완벽한 마크업을 생성하기 어렵다는 점을 확인했습니다. * 마크업 자동화가 성공하기 위해서는 단순히 AI 툴을 쓰는 것을 넘어, 디자인 시스템의 코드 품질과 문서화 수준이 먼저 뒷받침되어야 함을 실증했습니다. **마크업 자동화 이후의 FE 개발자 역할 변화** * 과거에 직접 태그를 입력하고 스타일을 잡던 수동적인 마크업 작업의 비중이 줄어들고, 생성된 코드를 조립하고 검증하는 '오케스트레이터'로서의 역할이 강조됩니다. * 단순 반복 작업에서 벗어나 더 복잡한 비즈니스 문제 해결과 사용자 경험(UX) 고도화에 개발 자원을 투입할 수 있는 환경이 조성되었습니다. * 결과적으로 AI는 개발자의 대체제가 아니라, 디자인 시스템이라는 약속된 규칙 위에서 함께 협업하는 강력한 동료로서 기능하게 됩니다. 성공적인 AI 기반 개발 환경을 구축하려면 디자인 시스템을 단순한 가이드가 아니라 **AI가 읽을 수 있는 데이터 구조**로 정교화하는 선행 작업이 가장 중요합니다. AI에게 맡길 영역과 개발자가 직접 제어할 영역을 명확히 구분하고, 코드 리뷰 단계를 강화하여 코드 품질을 유지하는 전략이 권장됩니다.

디자인 시스템 도입을 가로 (새 탭에서 열림)

디자인 시스템의 미래는 단순한 시각적 일관성을 넘어, 디자인 의사결정에 의미를 부여하는 '세만틱(Semantic)' 체계로 진화하고 있습니다. 이는 원시적인 값(Primitive values) 대신 역할과 의도에 기반한 토큰을 사용함으로써 디자인과 개발 사이의 간극을 좁히고 복잡한 시스템의 확장성을 확보하는 것을 골자로 합니다. 결과적으로 세만틱 디자인 시스템은 테마 전환, 멀티 브랜드 지원, 유지보수의 효율성을 극대화하는 핵심 전략이 됩니다. **원시 값에서 의미론적(Semantic) 토큰으로의 전환** * 단순히 색상이나 수치를 정의하는 '원시 토큰(예: blue-500)' 단계에서 벗어나, 해당 요소가 어디에 어떻게 쓰이는지를 정의하는 '세만틱 토큰(예: action-primary-background)'으로 추상화합니다. * 세만틱 명명법을 사용하면 디자인 의도가 명확해져, 디자이너와 개발자가 특정 색상을 왜 사용했는지 별도의 설명 없이도 이해할 수 있습니다. * 하드코딩된 값 대신 변수를 사용함으로써 시스템 전체의 스타일을 한 번에 제어할 수 있는 유연성을 제공합니다. **디자인과 공학의 가교, 디자인 토큰** * 디자인 토큰은 디자인 도구(Figma 등)와 실제 코드 사이의 '단일 진실 공급원(Single Source of Truth)' 역할을 수행합니다. * 세만틱 토큰을 통해 공통된 언어를 사용함으로써 핸드오프 과정에서의 커뮤니케이션 오류를 획기적으로 줄입니다. * JSON 기반의 토큰 관리를 통해 디자인 변경 사항이 개발 환경에 자동으로 동기화되는 워크플로우를 구축할 수 있습니다. **다중 테마 및 확장성 대응** * 세만틱 시스템은 다크 모드(Dark Mode), 고대비 모드, 혹은 여러 브랜드를 동시에 운영해야 하는 환경에서 강력한 힘을 발휘합니다. * 원시 토큰은 그대로 둔 채, 각 테마에 맞춰 세만틱 토큰이 참조하는 값만 교체함으로써 전체 UI의 분위기를 즉각적으로 전환할 수 있습니다. * 컴포넌트 수준의 토큰까지 세분화하여 관리하면, 시스템의 나머지 부분에 영향을 주지 않고 특정 요소의 스타일만 정밀하게 조정하는 것이 가능해집니다. **효율적인 유지보수와 일관성 유지** * 브랜드 개편이나 대규모 UI 수정 시, 수천 개의 컴포넌트를 일일이 수정하는 대신 토큰 정의 하나만 변경하여 전체 시스템에 반영할 수 있습니다. * 의미 기반의 시스템은 새로운 팀원이 합류했을 때 디자인 규칙을 빠르게 학습하고 적용할 수 있도록 돕는 가이드라인이 됩니다. 미래지향적인 디자인 시스템을 구축하기 위해서는 단순히 컴포넌트 라이브러리를 만드는 데 그치지 않고, 'Global - Semantic - Component'로 이어지는 다층적 토큰 구조를 설계해야 합니다. 특히 Figma Variables와 같은 최신 도구를 적극 활용하여 디자인 단계부터 세만틱 체계를 구축함으로써, 변화에 유연하고 기술적으로 견고한 제품 환경을 조성할 것을 권장합니다.

Razorpay가 개발자 워크플 (새 탭에서 열림)

인도 최대의 금융 서비스 기업인 Razorpay는 1,000만 개 이상의 비즈니스를 지원하기 위해 디자인 시스템 'Blade'를 구축하여 일관된 사용자 경험과 개발 효율성을 동시에 확보했습니다. 웹과 모바일을 아우르는 단일 API 구조를 통해 플랫폼 간 전환 비용을 최소화하고, 전용 플러그인과 Figma Dev Mode를 적극 활용해 디자이너와 개발자 간의 협업 마찰을 획기적으로 줄였습니다. 결과적으로 Blade는 단순한 가이드를 넘어 제품의 신뢰성을 높이고 시장 출시 속도를 앞당기는 핵심 동력으로 자리 잡았습니다. **크로스 플랫폼을 위한 단일 라이브러리 체계** * 웹, iOS, Android 등 다양한 플랫폼에서 동일한 API와 속성을 공유하는 단일 디자인 시스템을 운영하여 개발자가 플랫폼을 옮겨가더라도 기존 지식을 그대로 활용할 수 있게 했습니다. * 하드코딩으로 인해 발생할 수 있는 텍스트 필드의 에러 처리나 버튼 상태값 누락 등의 세부적인 오류를 방지하고, 모든 컴포넌트에 접근성(Accessibility)을 기본적으로 내장했습니다. * 디자이너와 개발자가 동일한 언어를 사용함으로써 커뮤니케이션 비용을 줄이고, 디자인에서 보는 결과물이 코드와 일치하도록 보장합니다. **지표 기반의 도입 전략과 조직 내 확산** * 새로운 기능을 개발할 때는 디자인의 70%, 기존 화면을 수정할 때는 50% 이상 Blade 컴포넌트를 사용하도록 KPI를 설정하여 디자인과 개발 팀이 공동의 목표를 추구하게 합니다. * 'Blade Coverage' 플러그인을 통해 디자이너가 시스템에서 얼마나 벗어나고 있는지 실시간으로 확인하게 함으로써, 핸드오프 단계 이전에 피드백을 주고받을 수 있는 환경을 조성했습니다. * 리더십의 지지를 바탕으로 전담 슬랙 채널 운영, 오피스 아워, 시연 영상 공유 등을 통해 내부 고객(직원)들의 채택률을 높이고 연간 NPS(순추천지수) 설문을 통해 만족도를 관리합니다. **RazorSharp와 Dev Mode를 통한 코드 자동화** * 개발자가 일일이 속성을 검사하던 비효율을 제거하기 위해 디자인을 코드로 자동 변환해주는 자체 플러그인 'RazorSharp'를 개발했습니다. * Figma의 Dev Mode를 도입하면서 기존 편집 권한이 필요했던 플러그인 제약을 극복했고, 개발자가 편집 권한 없이도 코드를 복사하고 Storybook 링크를 통해 바로 컴포넌트 환경으로 이동할 수 있게 했습니다. * VS Code 플러그인을 연동하여 개발 환경 내부에서 직접 디자인 사양을 확인하며 코드를 작성하는 워크플로우를 구축했습니다. **Variables를 활용한 토큰 관리 및 성능 최적화** * 기존의 복잡한 토큰 명명 규칙(surface/text/subtle)을 개발자 친화적인 구조(surface.text.subtle)로 변환하고, 간격(spacing) 토큰을 변수화하여 개발 편의성을 높였습니다. * 여러 테마와 라이트/다크 모드를 개별적으로 만들던 방식에서 변수(Variables) 기반 시스템으로 전환하여 메모리 소모를 대폭 줄이고 디자인 작업 속도를 개선했습니다. * 이를 통해 하나의 테마 안에서 다양한 모드를 유연하게 구현할 수 있게 되어 시스템의 복잡성을 낮추고 관리 효율을 극대화했습니다. **디자인 시스템 운영을 위한 실용적 제언** 디자인 시스템의 성공은 단순히 컴포넌트를 만드는 것에 그치지 않고, 개발자가 실제 작업 환경에서 얼마나 편리하게 코드를 추출하고 적용할 수 있느냐에 달려 있습니다. Razorpay처럼 자체 플러그인을 개발하거나 Dev Mode를 적극 활용하여 '디자인 검사'에 들어가는 시간을 줄이고, 정량적인 사용량 지표(Coverage)를 통해 팀의 성과를 객관화하는 접근 방식이 권장됩니다. 또한, 시스템의 복잡도가 커질수록 Variables 기능을 활용해 성능 저하를 방지하고 개발 생산성을 높이는 전략이 필수적입니다.

Headspace와 함께 살아 (새 탭에서 열림)

디자인 시스템의 미래는 단순히 시각적인 스타일을 정의하는 것을 넘어, 인터페이스 내에서의 역할을 규정하는 '의미(Semantic)' 중심의 설계를 향해 나아가고 있습니다. 원시적인 색상 코드나 수치 대신 의미론적 토큰을 사용함으로써 시스템의 유연성과 확장성을 획기적으로 높일 수 있으며, 이는 다크 모드나 다양한 기기 환경에 기민하게 대응하는 기반이 됩니다. 결과적으로 이러한 변화는 디자이너와 개발자가 동일한 언어로 소통하게 하여 제품 개발의 효율성을 극대화합니다. ### 시맨틱 토큰의 도입과 원시 값의 한계 - 기존 디자인 시스템에서 사용하던 'Blue-500'과 같은 원시 값(Primitive values)은 구체적인 색상은 나타내지만, 해당 색상이 UI에서 어떤 목적으로 사용되는지에 대한 정보는 담지 못합니다. - 시맨틱 토큰(예: `action-primary-background`)을 도입하면 디자인의 '의도'를 명확히 정의할 수 있어, 디자인 결정이 변경될 때 수많은 화면을 일일이 수정하지 않고 토큰의 정의만 변경하여 시스템 전체를 제어할 수 있습니다. - 이는 디자인 시스템의 유지보수성을 높일 뿐만 아니라, 디자인 가이드라인을 강제하지 않아도 자연스럽게 일관된 UI를 유지하도록 돕습니다. ### 다중 모드 및 테마 확장을 위한 유연한 구조 - 시맨틱 구조의 핵심은 라이트 모드, 다크 모드, 고대비 모드와 같은 다양한 테마를 효율적으로 관리하는 데 있습니다. - 각 테마에 따라 원시 값은 달라지지만 시맨틱 토큰명은 동일하게 유지되므로, 개발자는 테마 전환 로직을 단순화할 수 있고 디자이너는 각 모드에서의 시각적 균형을 정교하게 조정할 수 있습니다. - 색상뿐만 아니라 간격(Spacing), 모서리 곡률(Corner radius) 등에도 시맨틱 시스템을 적용하여, 컴팩트 모드나 터치 중심 인터페이스 등 물리적 환경 변화에도 유연하게 대처할 수 있는 시스템을 구축합니다. ### 피그마(Figma) 변수와 효율적인 협업 워크플로우 - 피그마의 '변수(Variables)' 기능은 이러한 시맨틱 시스템을 디자인 도구 내에서 직접 구현할 수 있게 하여 디자이너와 개발자 간의 핸드오프 프로세스를 혁신합니다. - 토큰 기반의 워크플로우는 코드와 디자인 도구 간의 명칭 불일치를 해소하며, 디자인 시스템의 변경 사항이 실제 프로덕트에 반영되는 속도를 비약적으로 높입니다. - 디자인 시스템 팀은 구성 요소(Component) 레벨의 토큰까지 확장하여 각 UI 요소가 맥락에 따라 가장 적절한 시맨틱 토큰을 참조하도록 설계함으로써 시스템의 완성도를 높일 수 있습니다. 성공적인 시맨틱 디자인 시스템 구축을 위해서는 처음부터 모든 요소를 정의하기보다, 원시 토큰과 시맨틱 토큰의 계층 구조를 명확히 하는 것부터 시작해야 합니다. 특히 피그마의 변수 기능을 활용해 명명 규칙(Naming Convention)을 표준화하고, 작은 단위의 구성 요소부터 시맨틱 토큰을 적용해 나가며 시스템의 성숙도를 점진적으로 높여가는 전략이 필요합니다.

스포티파이의 디자인 (새 탭에서 열림)

디자인 시스템의 미래는 단순한 스타일 정의를 넘어 의미 중심의 '시맨틱(Semantic)' 체계로 진화하고 있습니다. 이는 디자인 요소를 단순한 색상 코드나 수치로 관리하는 것이 아니라, 해당 요소가 UI에서 어떤 역할과 의도를 갖는지 정의함으로써 시스템의 유연성과 확장성을 극대화하는 방식입니다. 결과적으로 시맨틱 시스템은 디자인과 개발 사이의 언어를 통일하고, 복잡한 제품 환경에서 유지보수 효율을 비약적으로 높여주는 핵심 자산이 됩니다. **원시 토큰과 시맨틱 토큰의 계층화** * **원시 토큰(Primitive Tokens):** `Blue-500`이나 `Hex #2D5AFE`와 같이 색상이나 수치 그 자체를 나타내는 가장 기초적인 단위입니다. 이는 시스템의 선택지를 제한하고 일관성을 부여하는 역할을 합니다. * **시맨틱 토큰(Semantic Tokens):** `brand-primary`, `text-critical`, `bg-surface-subtle`처럼 해당 값이 어디에, 어떻게 사용되는지 '의도'를 담아 명명합니다. * **참조 구조:** 시맨틱 토큰은 원시 토큰을 참조(Aliasing)하는 구조를 취합니다. 이를 통해 브랜드 색상이 변경되더라도 시맨틱 네이밍은 유지되므로, 디자인과 코드 전체를 일일이 수정할 필요 없이 원시 값만 교체하면 됩니다. **멀티 테마 및 모드 대응의 유연성** * 시맨틱 체계를 구축하면 라이트 모드와 다크 모드, 혹은 다중 브랜드를 지원하는 '테마(Theming)' 기능 구현이 매우 쉬워집니다. * 예를 들어 `background-default`라는 시맨틱 토큰이 라이트 모드에서는 `White`를, 다크 모드에서는 `Gray-900`을 가리키도록 설정함으로써 하나의 설계로 여러 환경에 대응할 수 있습니다. * 디자이너는 모드별로 별도의 화면을 그릴 필요 없이, 시맨틱 토큰이 적용된 레이어의 '모드'만 전환하여 결과를 즉각 확인할 수 있습니다. **디자인과 개발의 언어 통합 (Handoff)** * 시맨틱 네이밍은 개발자와 디자이너 사이의 커뮤니케이션 비용을 획기적으로 줄여줍니다. 개발자는 "이 버튼에 어떤 파란색을 써야 하나요?"라고 묻는 대신, `button-primary-bg`라는 토큰명을 보고 의도를 즉각 파악합니다. * Figma Variables와 같은 도구를 활용해 디자인 시스템의 토큰을 코드(JSON, CSS Variables 등)와 직접 동기화함으로써, 디자인 변경 사항이 제품에 반영되는 과정에서의 휴먼 에러를 방지합니다. * 이는 디자인 시스템이 단순한 가이드라인을 넘어, 실시간으로 동작하는 '단일 진실 공급원(Single Source of Truth)'으로 기능하게 합니다. 성공적인 시맨틱 시스템 구축을 위해서는 초기 단계에서 네이밍 컨벤션을 명확히 정립하는 것이 가장 중요합니다. 브랜드의 복잡도가 낮다면 최소한의 시맨틱 계층부터 시작하되, 장기적으로는 비즈니스 확장성을 고려하여 원시 값과 컴포넌트 사이를 연결하는 의미 중심의 토큰 구조를 도입할 것을 권장합니다.

Config 2023 다시 보기 (새 탭에서 열림)

Figma는 Config 2023을 통해 단순한 디자인 도구를 넘어 디자인과 개발의 경계를 허물고 전체 제품 개발 팀이 함께 협업할 수 있는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 워크스페이스인 '개발 모드(Dev Mode)'와 코드의 논리를 디자인에 이식하는 '변수(Variables)', 그리고 실질적인 제품 작동 방식을 구현하는 '고급 프로토타이핑' 기능을 새롭게 도입했습니다. 이번 업데이트는 디자인 결과물이 실제 제품 코드로 전환되는 과정을 가속화하고, 팀 간의 소통 방식을 근본적으로 재정의하는 데 목적이 있습니다. ### 개발자 경험을 최적화하는 개발 모드(Dev Mode) * **개발자 전용 워크스페이스:** 무한한 캔버스 내에서 개발자가 작업에 필요한 구조와 기능을 직관적으로 파악할 수 있는 별도의 모드를 제공합니다. * **코드 번역 및 검사:** 디자인 요소를 코드로 더 빠르게 변환할 수 있으며, Jira, GitHub, Storybook과 같은 주요 개발 도구 및 코드베이스와 플러그인을 통해 직접 연결됩니다. * **VS Code 통합:** 'Figma in VS Code'를 통해 개발 환경을 벗어나지 않고도 에디터 바로 옆에서 디자인 파일을 검사하고 협업할 수 있습니다. * **배포 추적:** 어떤 디자인 요소가 프로덕션에 반영되어야 하는지 상태를 추적하여 디자인과 개발 간의 누락을 방지합니다. ### 디자인 시스템의 유연성을 극대화하는 변수(Variables) * **디자인 토큰의 코드화:** 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 저장하여 디자인 시스템을 코드의 언어와 일치시킵니다. * **모드(Modes) 지원:** 라이트 모드와 다크 모드, 혹은 다양한 테마 간의 전환을 변수 값을 통해 손쉽게 토글하며 테스트할 수 있습니다. * **확장성 있는 관리:** 에일리어싱(Aliasing) 및 스코핑(Scoping)을 지원하며, REST API와 플러그인을 통해 변수 생성 및 관리 프로세스를 자동화할 수 있습니다. ### 논리적 흐름을 구현하는 고급 프로토타이핑 * **조건부 로직 및 표현식:** "특정 변수가 X일 때 프레임 2로 이동"과 같은 조건문이나 수학적 표현식을 활용하여 실제 앱과 유사한 복잡한 상호작용을 구현할 수 있습니다. * **효율적인 프로토타입 제작:** 수많은 화면을 직접 연결할 필요 없이 변수를 활용해 동적인 변화를 줄 수 있어 프로토타입 제작 시간이 단축됩니다. * **인라인 프리뷰:** 디자인 편집 화면과 프로토타입 미리보기 화면을 동시에 띄워두고 수정한 내용을 즉각적으로 확인할 수 있어 반복 작업의 효율이 높아졌습니다. ### 워크플로우 개선을 위한 편의 기능(Quality of Life) * **오토 레이아웃 고도화:** 요소가 넘치면 다음 줄로 넘겨주는 '줄 바꿈(Wrap)' 기능과 최소/최대 너비 및 높이 설정 기능이 추가되었습니다. * **글꼴 선택기 업그레이드:** 글꼴 이름을 해당 서체로 미리 볼 수 있는 기능과 검색 및 필터링 기능이 강화되어 원하는 폰트를 더 빠르게 찾을 수 있습니다. * **파일 브라우저 업데이트:** 외부 팀과 공유된 프로젝트나 파일을 더 쉽게 찾을 수 있도록 인터페이스가 개선되었습니다. ### AI 기술을 통한 디자인의 미래 확장 * **Diagram 인수:** AI 기반 디자인 도구를 개발해온 Diagram을 인수하여 Figma 플랫폼 전반에 AI 기능을 통합할 계획입니다. * **창작 보조 및 가속:** AI가 시각적 표현을 돕고 워크플로우를 가속화하며, 누구나 수준 높은 초안을 만들 수 있도록 지원함으로써 디자인의 진입장벽을 낮추고자 합니다. Figma의 이번 업데이트는 디자이너와 개발자가 서로 다른 언어를 사용하는 문제를 해결하는 데 집중하고 있습니다. 개발 모드를 통해 개발자는 디자인 의도를 명확히 파악하고, 디자이너는 변수와 로직을 활용해 실제 제품에 가까운 설계를 할 수 있게 되었습니다. 팀의 생산성을 높이기 위해 현재 베타 버전으로 제공되는 개발 모드를 프로젝트에 적극적으로 도입하고, 기존 디자인 시스템을 변수(Variables) 기반으로 전환하여 다국어나 테마 대응 효율을 높여보시길 권장합니다.