ux-engineering

디자인 시스템 다시 생각해보기 (새 탭에서 열림)

디자인 시스템은 성장에 따라 경직되기 마련이며, 시스템이 제품 팀의 변화하는 요구사항을 제때 수용하지 못할 경우 팀은 시스템을 우회하거나 파편화된 코드를 생성하게 됩니다. 토스의 디자인 시스템(TDS)은 디자인 시스템을 통제 수단이 아닌 '하나의 제품'으로 정의하고, 수요자의 니즈에 따라 유연하게 대응할 수 있는 설계 구조를 지향합니다. 이를 위해 단순함과 유연함을 동시에 잡을 수 있는 하이브리드 API 전략을 도입하여 일관성과 생산성을 모두 확보하는 해결책을 제시합니다. ### 시스템의 경직성과 파편화 문제 * 조직이 커지고 제품이 다양해지면 기존 시스템의 제약 내에서 해결할 수 없는 UI 요구사항이 빈번하게 발생합니다. * 제품 팀은 빠른 해결을 위해 피그마 컴포넌트를 해제(detach)하거나 라이브러리 코드를 복제(fork)하여 로컬에서 수정해 사용하게 됩니다. * 이러한 우회 방식은 시스템 업데이트와의 연결을 끊어버려 UI 불일치를 초래하고, 장기적으로 디자인 시스템의 핵심 가치를 무너뜨립니다. * 결국 디자인 시스템이 팀의 속도를 늦추는 장애물이 되지 않으려면, 강력한 규칙보다 '우회할 이유를 줄이는 유연한 설계'가 필요합니다. ### 확장성을 고려한 컴포넌트 API 패턴 비교 * **Flat 패턴**: 내부 구조를 숨기고 모든 변형을 props로 처리하는 방식입니다. 사용이 직관적이고 간결하지만, 예외적인 요구사항이 늘어날수록 props가 기하급수적으로 증가하여 유지보수가 어려워집니다. * **Compound 패턴**: 하위 컴포넌트(Header, Body, Footer 등)를 제공하여 사용자가 직접 조합하는 방식입니다. 시스템이 예측하지 못한 레이아웃도 유연하게 구현할 수 있으나, 코드량이 늘어나고 구조에 대한 학습 비용이 발생한다는 단점이 있습니다. * 두 패턴은 상충하는 장단점을 가지고 있으므로, 단순히 하나의 패턴을 강요하는 것은 사용자의 이탈을 막기에 부족합니다. ### TDS의 하이브리드 전략과 Primitive 레이어 * TDS는 단순하고 빈번한 케이스를 위한 **Flat API**와 복잡한 커스텀을 위한 **Compound API**를 동시에 제공합니다. * 사용자는 별도의 커스텀이 필요 없을 때는 간결한 Flat 형식을 선택하고, 세밀한 제어가 필요할 때는 Compound 형식을 선택하여 시스템 내부에서 문제를 해결할 수 있습니다. * 디자인 시스템 팀은 관리 효율을 위해 **Primitive(기초 단위)** 레이어를 먼저 구축합니다. * 내부적으로는 동일한 Primitive 컴포넌트를 공유하면서 외부로 드러나는 API만 두 가지 형태로 노출함으로써, 유지보수 부담을 최소화하면서도 사용자 경험을 극대화합니다. 디자인 시스템은 팀을 가두는 울타리가 아니라 안전하게 안내하는 가드레일이 되어야 합니다. 중앙에서 모든 것을 통제하려 하기보다, 규칙에서 벗어난 예외 상황까지 시스템 안에서 지원할 수 있는 유연한 설계를 갖출 때 진정한 일관성을 유지할 수 있습니다.

igma Blog": "피 (새 탭에서 열림)

Cloudflare의 UX 엔지니어인 Sam Mason de Caires는 디자인과 개발의 가교 역할을 수행하며, 접근성(Accessibility)을 디자인 프로세스에 자연스럽게 통합하는 도구 개발에 집중하고 있습니다. 그는 특히 Figma 플러그인 'Contrast'를 개발하여 디자이너가 WCAG 표준을 실시간으로 준수할 수 있는 환경을 구축했으며, 이를 통해 포용적인 디지털 제품 제작의 중요성을 강조합니다. 기술적으로는 웹 표준 기술을 디자인 도구에 이식하여 워크플로우의 효율성을 극대화하는 것이 그의 핵심 접근 방식입니다. **디자인 접근성 도구 'Contrast'의 개발 배경** - 웹 콘텐츠 접근성 가이드라인(WCAG) 준수를 자동화하기 위해, 디자인 과정에서 실시간으로 색상 대비를 확인할 수 있는 Figma 플러그인을 개발했습니다. - 디자이너가 별도의 외부 도구를 사용하지 않고도 작업 중인 레이어의 가독성을 즉각적으로 판단할 수 있도록 워크플로우 최적화에 중점을 두었습니다. - 단순한 수치 제공을 넘어, 특정 색상이 기준을 통과하지 못할 때 대안이 될 수 있는 색상을 추천하는 기능을 포함하여 실질적인 해결책을 제시합니다. **성능 최적화와 기술적 도전** - 수만 개의 레이어가 포함된 대규모 디자인 파일에서도 플러그인이 멈추지 않고 실시간으로 동작할 수 있도록 비동기 처리 및 레이어 스캔 알고리즘을 최적화했습니다. - 배경색과 전경색을 정확히 추출하기 위해 불투명도(Opacity), 블렌딩 모드(Blending modes), 그라데이션 등이 복합적으로 적용된 레이어의 최종 렌더링 색상을 계산하는 로직을 구현했습니다. - Figma 플러그인 API와 웹 기술(HTML, CSS, JavaScript) 간의 통신 구조를 효율화하여 UI 반응 속도를 개선했습니다. **UX 엔지니어링과 도구화(Tooling)의 가치** - UX 엔지니어는 디자인 시스템의 일관성을 유지하기 위해 코드와 디자인 사이의 간극을 메우는 도구를 직접 제작해야 함을 강조합니다. - 접근성은 프로젝트의 마지막 단계에서 점검하는 요소가 아니라, 도구화를 통해 디자인 시작 단계부터 강제되고 시스템화되어야 한다는 철학을 공유합니다. - 반복적인 수동 작업을 자동화하는 플러그인을 통해 팀 전체의 생산성을 높이고, 디자이너가 창의적인 문제 해결에 더 집중할 수 있는 환경을 조성합니다. 성공적인 디자인 시스템 운영을 위해서는 'Contrast'와 같은 자동화 도구를 적극 도입하여 접근성 준수와 같은 필수 요구사항을 디자이너의 일상적인 작업 흐름 속에 내재화해야 합니다. 기술적 숙련도가 있는 UX 엔지니어라면 직접 필요한 도구를 제작하여 팀의 기술적 부채를 줄이고 제품의 품질을 상향 평준화하는 전략이 필요합니다.

플러그인 비하인드 (새 탭에서 열림)

Cloudflare의 UX 엔지니어 Sam Mason de Caires는 디자인과 엔지니어링 사이의 간극을 메우기 위해 커스텀 플러그인과 내부 도구를 활용하는 방법론을 제시합니다. 그는 도구가 단순히 보조적인 역할을 넘어, 디자인 시스템의 일관성을 유지하고 반복적인 수작업을 제거함으로써 전체 팀의 생산성을 극대화하는 핵심 자산임을 강조합니다. 결과적으로 잘 설계된 내부 도구는 엔지니어와 디자이너가 본질적인 창의적 문제 해결에 집중할 수 있는 환경을 조성합니다. ### 디자인과 엔지니어링의 가교, UX 엔지니어링 * UX 엔지니어는 디자인의 시각적 언어와 엔지니어링의 기술적 구현 사이를 연결하는 인터페이스 역할을 수행합니다. * 단순히 화면을 구현하는 것에 그치지 않고, 디자인 시스템이 실제 제품 개발 워크플로우에 자연스럽게 녹아들 수 있도록 코드 기반의 솔루션을 구축합니다. * 디자이너와 개발자가 서로의 제약 사항을 이해하고 공통된 도구 모음을 사용할 수 있도록 협업 프로세스를 최적화합니다. ### Figma 플러그인을 통한 워크플로우 자동화 * Figma를 단순한 디자인 툴이 아닌 확장 가능한 플랫폼으로 취급하여, API를 활용한 맞춤형 플러그인을 개발합니다. * 색상 대비 검사, 레이어 명명 규칙 적용, 디자인 토큰 동기화 등 수동으로 진행할 때 실수가 잦고 반복적인 작업들을 자동화합니다. * Cloudflare 내부 디자인 가이드라인이 실시간으로 반영되는 플러그인을 통해 디자이너가 별도의 문서를 찾아보지 않고도 규격에 맞는 결과물을 내놓을 수 있도록 지원합니다. ### 실용적인 도구 개발 철학과 접근 방식 * 도구 제작의 시작점은 항상 '팀이 현재 겪고 있는 가장 큰 고통 지점(Pain Point)'이 무엇인지 파악하는 데서 출발합니다. * 처음부터 거대한 시스템을 구축하기보다, 특정 문제를 해결하는 작은 기능부터 개발하여 실제 사용자 피드백을 바탕으로 기능을 확장하는 반복적(Iterative) 방식을 선호합니다. * 기술적 정교함보다는 사용자가 도구를 사용할 때 느끼는 마찰을 최소화하고 직관적인 경험을 제공하는 데 우선순위를 둡니다. 내부 도구와 플러그인 제작은 단기적으로는 추가적인 리소스가 투입되는 작업처럼 보일 수 있지만, 장기적으로는 팀의 운영 효율성을 비약적으로 높이고 휴먼 에러를 방지하는 가장 확실한 투자입니다. 디자인 시스템을 운영하거나 협업 효율을 높이고 싶은 팀이라면, Figma API와 같은 플랫폼 확장성을 적극적으로 활용하여 반복되는 업무를 하나씩 자동화해 나가는 것을 추천합니다.

플러그인 비하인드 (새 탭에서 열림)

Cloudflare의 UX 엔지니어인 Sam Mason de Caires는 디자인과 엔지니어링 사이의 간극을 줄이기 위해 Figmotion과 같은 도구를 개발하며 겪은 경험과 철학을 공유합니다. 그는 기술적 한계를 극복하고 사용자 워크플로우에 자연스럽게 녹아드는 도구를 만드는 것이 디자이너와 개발자 간의 협업 효율을 극대화하는 핵심이라고 강조합니다. 결과적으로, 훌륭한 플러그인은 단순히 기능을 추가하는 것을 넘어 제품 개발 프로세스 전체의 언어를 통일하는 역할을 수행해야 합니다. **디자인과 개발의 경계를 허무는 Figmotion 개발** - Figma 내에서 직접 애니메이션을 구현하고 이를 개발 환경으로 전달하기 위해 Figmotion 플러그인을 구축했습니다. - 단순히 시각적인 애니메이션을 만드는 것에 그치지 않고, 이를 CSS나 JSON(Lottie) 형태의 코드로 내보낼 수 있도록 설계하여 디자인 가이드가 실제 제품에 정확히 반영되도록 했습니다. - 디자이너가 복잡한 코드 없이도 타임라인 기반의 인터페이스를 통해 애니메이션 로직을 제어할 수 있도록 사용자 경험을 최적화했습니다. **Cloudflare에서의 UX 엔지니어링과 시스템 구축** - Cloudflare의 대규모 UI 시스템을 관리하며, 수많은 엔지니어가 일관된 디자인 언어를 사용할 수 있도록 내부 도구와 컴포넌트 라이브러리를 개발합니다. - 복잡한 네트워크 설정이나 보안 대시보드를 직관적으로 제어할 수 있는 인터페이스를 구축하기 위해 TypeScript와 같은 강력한 기술 스택을 활용합니다. - 디자인 시스템이 단순한 가이드에 머물지 않고 실제 코드 베이스와 동기화되어 유지될 수 있도록 자동화된 워크플로우를 지향합니다. **플러그인 개발의 철학과 기술적 도전** - 플러그인은 창의적인 작업 흐름을 방해하지 않는 '보이지 않는 조력자'가 되어야 하며, 사용자가 학습의 부담 없이 즉시 사용할 수 있어야 합니다. - Figma 플러그인 API의 제약 사항을 극복하기 위해 React와 같은 현대적인 웹 기술을 플러그인 UI 개발에 적극적으로 도입했습니다. - 실제 사용자의 피드백을 지속적으로 반영하여 도구가 사용자의 실제 고충(Pain points)을 해결하고 있는지 끊임없이 검증하는 루프를 중요하게 여깁니다. 도구를 개발할 때는 기술적인 완결성만큼이나 "이 도구가 디자이너와 개발자의 대화 방식을 어떻게 개선하는가"를 고민해야 합니다. 특히 수동적인 작업이나 반복적인 코드 변환 과정을 자동화하는 도구는 팀 전체의 생산성을 비약적으로 높여줄 수 있습니다.