stripe2025년 12월 4일

SaaS 플랫폼이 결제 및 금융 (새 탭에서 열림)

Stripe Connect의 임베디드 컴포넌트는 도입 1년 만에 사용자 수가 3배 이상 증가하며, 단순한 UI 도구를 넘어 플랫폼 비즈니스의 핵심 성장 동력으로 자리 잡았습니다. 특히 대규모 플랫폼과 오프라인 중심의 산업군에서 복잡한 금융 워크플로우를 효율화하고 제품 출시 기간을 획기적으로 단축하기 위해 이 솔루션을 적극적으로 채택하고 있습니다. 결과적으로 기업들은 직접 개발의 부담을 줄이면서도 브랜드 일관성을 유지하며 글로벌 시장에 빠르게 대응하고 있습니다. **대규모 플랫폼의 복잡성 해결과 확장성 확보** - 대기업(직원 1,000명 이상 또는 매출 10억 달러 이상)은 스타트업보다 임베디드 컴포넌트를 도입할 확률이 3배 더 높으며, 평균 3개 이상의 컴포넌트를 통합하여 사용합니다. - 글로벌 확장에 따른 국가별 규제 준수 및 현지화 문제를 직접 개발하지 않고도 해결할 수 있다는 점이 주요 채택 요인입니다. - 예시로 FreshBooks는 160개국 이상의 온보딩 프로세스를 자동화했으며, Kajabi는 회계 통합 기능을 기존 6~12개월에서 6주로 대폭 단축하여 출시했습니다. **오프라인 중심 산업에서의 강력한 도입 흐름** - 자동차 수리, 이용원, 숙박업 등 대면 서비스 기반 플랫폼의 도입 속도가 온라인 전용 비즈니스보다 2배 이상 빠릅니다. - 마진이 낮고 운영비가 높은 오프라인 업체들에게 통합된 결제 대시보드와 간소화된 온보딩 경험은 운영 효율성을 크게 높여줍니다. - Cloudbeds는 호텔 온보딩 기간을 수 주에서 수 시간으로 줄였고, 서비스 업체를 위한 소프트웨어 Jobber는 컴포넌트 도입 후 자본 조달(Capital) 실행액이 100% 증가하는 성과를 거두었습니다. **브랜드 신뢰도를 높이는 커스터마이징** - 전체 도입 플랫폼의 71%가 Stripe의 테마 기능을 활용하여 자사의 디자인 시스템과 컴포넌트의 시각적 언어를 일치시키고 있습니다. - 대부분의 플랫폼이 기본 설정을 넘어 브랜드 고유의 색상 팔레트를 적용함으로써, 사용자가 결제나 신원 확인 같은 민감한 작업을 수행할 때 이질감 없는 신뢰를 느낄 수 있도록 구성합니다. **금융 기능 확장을 위한 신규 컴포넌트 활용** - 새롭게 추가된 '마케팅 컴포넌트'를 통해 플랫폼 대시보드 내에서 즉시 지급(Instant Payouts)이나 자본 조달(Capital) 같은 금융 상품을 직접 홍보하고 새로운 수익원을 창출할 수 있습니다. - '분쟁 관리 컴포넌트'는 사용자가 결제 분쟁을 직접 관리할 수 있는 권한을 부여하여, 플랫폼 운영자의 업무 부하를 줄여주는 기술적 편의를 제공합니다. 성공적인 플랫폼 구축을 위해서는 복잡한 결제 및 금융 로직을 직접 구현하기보다, 이미 검증된 임베디드 컴포넌트를 활용해 핵심 비즈니스 로직에 집중하고 제품 출시 속도(Time-to-market)를 높이는 전략이 권장됩니다. 특히 글로벌 확장이나 오프라인 시장 진출을 계획 중인 플랫폼이라면 이러한 모듈형 UI가 운영 복잡성을 낮추는 실질적인 대안이 될 것입니다.

ui-componentssaasfintechembedded-components+3

figma2024년 11월 20일

피그마 패턴 라이브 (새 탭에서 열림)

UI3 개편은 Figma 내부 디자인 시스템이 오랜 성장 과정에서 파편화되었다는 문제를 드러냈고, 이를 해결하기 위해 Figma Pattern Library(FPL)를 처음부터 다시 구축하게 만들었습니다. 디자이너와 엔지니어가 페어 프로그래밍에 가까운 방식으로 협업해 디자인 의도와 코드 구현을 연결하고, 변수·REST API·테마 모드를 기반으로 일관되고 접근성 높은 제품 개발의 기반을 마련했습니다. FPL은 단순한 컴포넌트 모음이 아니라 조직 전체의 공통 언어이자 UI3를 확장하기 위한 단일 진실 공급원으로 설계되었습니다. ## UI3가 드러낸 내부 디자인 시스템의 문제 - Figma는 다른 팀의 디자인 시스템 구축을 돕는 제품을 만들고 있었지만, 내부 시스템은 오랜 기간의 급속한 성장과 제품 확장으로 분리되어 있었습니다. - 동일해야 할 컴포넌트가 서로 조금씩 달랐고, 연결이 끊긴 컴포넌트 인스턴스가 누적되었습니다. - UI3를 모든 Figma 제품에 적용하려면 새로운 화면 디자인만으로는 부족했습니다. - 여러 팀이 일관되고 효율적으로 작업할 수 있는 견고한 기반 시스템이 필요했습니다. ## 디자이너와 엔지니어의 페어 협업 - Wayne Sun과 Tom Williams는 디자이너와 엔지니어로 구성된 5명의 소규모 팀을 만들었습니다. - 개발에서 한 사람이 코드를 작성하고 다른 사람이 실시간 검토하는 페어 프로그래밍처럼, 디자이너와 엔지니어가 긴밀하게 짝을 이루어 작업했습니다. - 디자이너는 시각적·사용자 경험 의도를 전달하고, 엔지니어는 이를 실제 컴포넌트와 토큰 시스템으로 구현했습니다. - 이 방식은 디자인 파일과 제품 코드 사이의 간극을 줄이고, 양쪽이 공유할 수 있는 시스템 언어를 만드는 데 목적이 있었습니다. - 그 결과 새로운 내부 디자인 시스템인 Figma Pattern Library(FPL)가 탄생했습니다. ## 스타일과 스프레드시트에서 변수 중심 구조로 전환 - 기존 시스템은 Figma의 변수 기능이 등장하기 전에 만들어졌습니다. - 디자이너는 Figma 스타일을 사용했지만, 엔지니어는 별도의 Google Sheets에서 색상 토큰을 관리했습니다. - 스프레드시트가 제품 변경 사항을 즉시 반영하지 못하면서 디자인 파일과 실제 코드의 색상이 달라지는 문제가 발생했습니다. - 팀은 Figma 변수와 REST API를 활용해 디자인과 코드가 자동으로 동기화될 수 있는 구조를 만들었습니다. - 타이포그래피 변수를 새로 만들고, 기존 타이포그래피 스타일이 이 변수들을 별칭으로 참조하도록 구성했습니다. - 색상 스타일은 중앙 관리가 가능한 색상 변수로 마이그레이션했습니다. - 색상 변수에 CSS 정의도 추가해 Dev Mode의 검사 패널에서 개발자가 올바른 변수명과 코드 표현을 확인할 수 있게 했습니다. ## Primitive와 Semantic 변수로 색상 체계 정리 - 색상은 밝기와 어두움이 체계적으로 이어지는 **color ramp**를 기반으로 구성했습니다. - 기본 색상 단위인 **Primitive 변수**는 색상 계열별로 정리하고, 100부터 1000까지 단계적으로 구분했습니다. - 실제 UI 용도를 나타내는 **Semantic 변수**는 Primitive 변수를 별칭으로 참조합니다. - 예를 들어 특정 색상값을 직접 사용하는 대신 배경, 텍스트, 테두리 같은 의미 기반 변수로 연결할 수 있습니다. - Semantic 변수는 다음과 같은 테마와 제품별 모드를 지원하도록 설계되었습니다. - 라이트 모드와 다크 모드 - Figma Design - FigJam - Slides - Dev Mode - 이 구조 덕분에 하나의 공통 컴포넌트가 제품이나 테마에 따라 색상만 자연스럽게 바꿀 수 있습니다. - Primitive 변수의 값을 수정하면 이를 참조하는 Semantic 변수와 컴포넌트에 변경 사항을 일괄 적용할 수 있습니다. ## FPL의 역할 - FPL은 UI3의 시각적 스타일을 정의하는 동시에, 이를 실제 제품에 일관되게 구현하기 위한 기술적 기반입니다. - 디자인과 엔지니어링을 분리된 단계로 처리하지 않고, 초기 설계부터 함께 검증하는 협업 모델을 채택했습니다. - 변수와 모드 기반의 구조는 여러 제품과 테마를 지원하면서도 공통된 사용자 경험을 유지하도록 돕습니다. - 중앙화된 토큰과 컴포넌트는 중복 구현과 미세한 시각적 차이를 줄이고, 향후 변경 사항을 더 빠르게 확산시킬 수 있습니다. FPL 사례는 디자인 시스템을 단순한 UI 컴포넌트 저장소가 아니라 디자인 토큰, 테마, 코드 연동, 협업 방식까지 포함하는 조직의 공통 인프라로 다뤄야 한다는 점을 보여줍니다. 특히 디자인 파일과 코드가 서로 다른 토큰을 관리하지 않도록 변수와 자동 동기화를 도입하는 것이 규모가 큰 제품 조직에 실용적인 출발점입니다.

ui-componentsfigmadesign-systemsaccessibility+4

figma2024년 1월 30일

Dev Mode에 대해 알아 (새 탭에서 열림)

Figma는 디자이너와 개발자가 하나의 파일과 협업 공간에서 더 효율적으로 제품을 만들 수 있도록 Dev Mode를 개발했고, 2024년 1월 베타를 종료했습니다. Dev Mode는 개발자에게 필요한 정보와 도구를 별도 워크스페이스로 제공하면서도 디자인 맥락과 협업은 유지하는 것이 핵심입니다. Figma는 사용자 피드백을 바탕으로 주석, 변경점 비교 등 핸드오프와 구현을 지원하는 기능을 강화했습니다. ## 개발자 중심의 작업 공간이 필요한 이유 - 개발자는 Figma 주간 활성 사용자의 약 3분의 1을 차지했습니다. - 하지만 기존 Figma는 디자인 작업에 최적화되어 있어 개발자의 워크플로, 도구 체계, 선호 사항을 충분히 지원하지 못했습니다. - Figma는 프런트엔드 개발자, 디자인 시스템 엔지니어, 콘텐츠 레이아웃 및 에셋을 다루는 개발자 등 다양한 역할을 고려해 개발자 전용 경험을 만들고자 했습니다. - 핵심 방향은 개발자가 디자인 모드의 모든 상호작용을 학습하지 않아도 되도록, 개발자에게 필요한 방식으로 Figma를 맞추는 것이었습니다. ## Visly 인수와 개발자 직관 확보 - Figma는 2021년 React UI 컴포넌트 개발 도구를 만들던 Visly 팀을 인수했습니다. - 8명의 디자이너와 엔지니어로 구성된 Visly 팀은 개발자 도구에 대한 실무 경험과 연구 결과를 보유하고 있었습니다. - Figma는 개발자와 대화하는 것만으로는 부족하며, 실제 개발 환경에 몰입해 얻는 ‘개발자 직관’이 필요하다고 판단했습니다. - Visly 팀은 개발자가 Figma를 사용하는 실제 방식과 다양한 개발 환경에 대한 관점을 제공했습니다. ## 디자인과 개발을 연결하는 통합 모드 - Dev Mode의 형태를 결정하는 과정에서 디자인 파일과 개발 파일을 완전히 분리할지, 하나로 통합할지 오랜 기간 검토했습니다. - 최종적으로 Dev Mode를 Figma 안의 별도 공간으로 구현했습니다. - 개발자는 개발에 최적화된 인터페이스를 사용하면서도 디자인 파일, 변경사항, 디자이너의 의도 같은 중요한 맥락을 그대로 확인할 수 있습니다. - 별도 도구나 파일로 전환하지 않고 디자인 공간과 개발 공간을 오갈 수 있다는 점이 핵심입니다. ## 오픈 베타와 사용자 피드백 - Dev Mode는 Config 2023에서 오픈 베타로 공개되었습니다. - 베타 기간 동안 고객 요청을 적극적으로 수집했고, 처음 두 달 동안 가장 많이 요청된 업데이트와 수정 사항 200개 이상을 배포했습니다. - 사용자 피드백은 Dev Mode의 기능 우선순위와 제품 결정에 직접 반영되었습니다. - 이후 Dev Mode는 베타를 종료하고 정식 제품 단계로 이동했습니다. ## 디자인 의도를 명확히 전달하는 주석 - 기존에는 디자이너가 개발자에게 필요한 치수와 설명을 수동으로 만들고 디자인을 별도로 정리해야 했습니다. - Dev Mode의 주석 기능은 디자인에 직접 연결된 설명, 사양, 측정값을 제공합니다. - 디자인이 변경되면 주석도 실시간으로 업데이트되어 최신 상태를 유지할 수 있습니다. - 캔버스를 복잡하게 만들지 않으면서 중요한 세부사항을 강조할 수 있습니다. - 플러그인을 이용해 주석을 자동화하거나 사용자 지정할 수 있습니다. - 클릭하고 드래그하는 방식으로 요소 간 거리를 측정할 수 있습니다. ## 개발 준비 상태와 변경점 비교 - 디자이너는 섹션을 “개발 준비 완료(ready for development)”로 표시하고 별도의 페이지나 파일 없이 개발자에게 전달할 수 있습니다. - 변경점 비교(diff) 기능을 사용하면 서로 다른 버전의 프레임을 비교할 수 있습니다. - 이를 통해 디자인 변경 사항을 확인하고, 개발자가 최신 디자인을 기준으로 작업하도록 지원합니다. - 목적은 디자인 핸드오프 과정에서 누락되는 설명이나 변경사항을 줄이고 구현 정확도를 높이는 것입니다. Dev Mode를 효과적으로 활용하려면 디자인과 개발을 별도 도구로 분리하기보다, 디자인 파일 안에서 주석·측정값·준비 상태·변경 이력을 일관되게 관리하는 것이 좋습니다. 특히 개발 전달 전에 “개발 준비 완료” 상태와 변경점을 명확히 표시하면 커뮤니케이션 비용을 줄일 수 있습니다.

ui-componentsfigmadesign-systemsreact+3

figma2023년 8월 30일

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

Spotify는 45개 플랫폼과 2,000종 이상의 기기에서 일관된 브랜드 경험을 제공하기 위해 디자인 시스템 Encore를 플랫폼별 체계에서 크로스플랫폼 체계로 확장했다. 초기에는 모바일과 웹 시스템이 분리되어 유연성을 얻었지만, 시간이 지나며 컴포넌트의 불일치와 중복이 커졌다. 이에 공통 기반과 재사용 가능한 중간 계층을 마련하고, 컴포넌트를 처음부터 여러 플랫폼이 함께 설계하는 방식으로 전환했다. ## 일관된 경험이 필요해진 배경 - Spotify는 TV, 자동차, 모바일, 컴퓨터 등 다양한 환경에서 오디오 콘텐츠를 제공하게 됐다. - 2019년 기준 45개 플랫폼, 2000종 이상의 기기, 200개 브랜드에 걸쳐 서비스를 제공해야 했다. - 목표는 모든 플랫폼을 단순히 지원하는 것이 아니라, 어떤 기기에서도 사용자가 “Spotify답다”고 느끼는 일관된 경험을 만드는 것이었다. - 디자인 시스템의 컴포넌트가 플랫폼 간 경험을 통합하는 핵심 수단으로 강조됐다. ## Encore의 초기 구조와 한계 - Encore는 2019년 두 개의 하위 시스템으로 출발했다. - **Encore Consumer Mobile**: 모바일 중심 경험을 위한 유연한 UI 컴포넌트 카탈로그 - **Encore Web**: 다양한 웹 제품을 위한 시스템 - 색상과 타이포그래피 같은 기본 디자인 결정에는 디자인 토큰을 사용했다. - 그러나 각 하위 시스템이 독립적으로 발전하면서 버튼의 크기, 타이포그래피, 상태 표현 등에서 차이가 생겼다. - 제품팀의 요구가 커지면서 컴포넌트가 지나치게 유연해졌고, 플랫폼 간 공통성이 약해졌다. ## 공통 기반과 재사용 계층의 도입 - 2022년 Spotify는 유연성에 치우친 구조를 재조정할 필요가 있다고 판단했다. - Encore Mobile을 위한 재사용 가능한 컴포넌트 제작 전담 팀을 구성했다. - 이 새로운 계층은 공통 기반과 Consumer Mobile 사이에 위치했다. - 이를 통해: - Consumer Mobile이 모든 컴포넌트를 직접 제공해야 하는 부담을 줄이고 - Web과 Mobile 사이의 플랫폼 대응성을 높이며 - 제품별로 중복 구현되는 컴포넌트를 줄일 수 있었다. - Web 팀과 협력해 크로스플랫폼 컴포넌트를 나중에 맞추는 대신, 처음부터 함께 개발하기 시작했다. ## 크로스플랫폼 컴포넌트 설계 방식 - 기존처럼 사용자 조사, 디자인, 개발로 이어지는 과정 자체는 유지했다. - 가장 큰 변화는 디자인 단계에서 특정 플랫폼 하나만을 대상으로 하지 않는 것이었다. - iOS, Android, Web 팀이 함께 각 플랫폼의 요구사항과 특성을 조사하고, 공통 경험을 조율했다. - 플랫폼별 고유성을 없애는 것이 아니라, 공통된 구조와 시각적 언어를 유지하면서 각 환경에 맞게 적용하는 것이 목표였다. - 웹, 모바일, TV는 입력 방식과 화면 크기 등 사용 맥락이 다르므로, 동일한 컴포넌트를 그대로 복제하기보다 플랫폼의 장점을 보존해야 했다. - 이를 위해 각 플랫폼 전문가가 협업하는 구조가 중요했다. 웹과 모바일 양쪽 모두에 정통한 디자이너는 드물기 때문에, 여러 분야의 전문성을 한 과정 안에서 결합해야 했다. Spotify의 사례는 디자인 시스템을 플랫폼별 컴포넌트 모음으로 관리하기보다, 공통 기반·재사용 계층·플랫폼별 특화를 연결하는 구조로 설계해야 한다는 점을 보여준다. 실무에서는 플랫폼 팀을 초기 설계 단계부터 참여시키고, 공통 토큰과 컴포넌트의 범위를 명확히 정하는 방식이 효과적이다.

ui-componentsdesign-systemsandroidios+3

figma2023년 7월 12일

Thumbtack이 디자인 (새 탭에서 열림)

Thumbtack은 디자인 시스템 **Thumbprint**를 토큰, Atomic CSS, 컴포넌트의 3계층으로 구성해 유연성과 생산성을 함께 확보한다. 하위 계층일수록 세밀한 제어와 확장성이 높고, 상위 계층일수록 접근성·일관성·개발 생산성이 높아진다. 필요한 경우 각 계층 내부에도 추가 계층을 두어, 개발자가 일반적인 상황에서는 간편한 추상화를 사용하면서도 특수한 요구에는 더 낮은 계층으로 내려갈 수 있게 했다. ## 3단계 계층 구조 - **Thumbprint Tokens** - 시스템의 가장 낮은 추상화 계층이다. - 색상, 타이포그래피, 모서리 반경, 간격, 크기, 그림자 등 세부 디자인 속성을 변수로 정의한다. - 웹과 네이티브 클라이언트 모두에서 사용된다. - 가장 세밀하고 유연하지만, 이를 직접 조합해야 하므로 개발 생산성은 상대적으로 낮다. - **Thumbprint Atomic** - Thumbprint Tokens 위에 구축된 원자적 CSS 라이브러리다. - 개발자가 별도의 커스텀 CSS를 작성하지 않고도 UI를 구성할 수 있다. - 예를 들어 `aspect ratio` 클래스를 사용하면 YouTube나 Vimeo 같은 외부 미디어의 가로세로 비율을 일정하게 유지할 수 있다. - 토큰보다 생산성이 높지만, 완전히 자유롭게 스타일을 제어하는 것보다는 유연성이 낮다. - **Thumbprint Components** - 가장 높은 추상화 계층으로, 자주 사용하는 UI 패턴을 접근성까지 고려해 미리 구현한다. - 알림, 버튼, 날짜 선택기, 별점 등 공통 컴포넌트를 제공한다. - 개발자는 반복적인 UI 구현보다 핵심 제품 기능에 집중할 수 있다. - 제공되지 않는 컴포넌트가 필요하면 Atomic CSS를 사용해 직접 구성하고, 그보다 더 낮은 수준의 제어가 필요하거나 네이티브 환경이라면 디자인 토큰을 직접 사용할 수 있다. ## 계층에 따른 트레이드오프 - 하위 계층으로 내려갈수록: - 디자인 속성을 세밀하게 제어할 수 있다. - 새로운 제품 요구사항에 유연하게 대응할 수 있다. - 대신 구현과 유지보수에 더 많은 개발 노력이 필요하다. - 상위 계층으로 올라갈수록: - 접근성, 시각적 일관성, 개발 생산성이 높아진다. - 공통 UI를 빠르고 안정적으로 구현할 수 있다. - 대신 사전에 정해진 동작과 스타일이 많아져 특수한 요구에는 덜 유연할 수 있다. ## 계층 안의 계층 - 하나의 계층도 목적에 따라 여러 하위 계층으로 나눌 수 있다. - Thumbprint의 React 모달은 다음처럼 구성된다. - `ModalCurtain`: 시각적 스타일보다 사용성·기능에 집중한 낮은 계층 컴포넌트 - `Modal`: `ModalCurtain`을 기반으로 시각적 스타일과 일반적인 모달 사용 방식을 제공하는 상위 컴포넌트 - 대부분의 개발자는 바로 사용할 수 있는 `Modal`을 사용한다. - `Modal`이 지나치게 제한적일 때는 `ModalCurtain`으로 내려가 더 자유롭게 구성할 수 있다. - 이후 반복적으로 필요한 기능은 다시 상위 `Modal`에 추가해 시스템을 발전시킬 수 있다. ## 디자인 토큰의 다단계 추상화 - 디자인 토큰도 여러 단계로 상속·추상화할 수 있다. - Adobe Spectrum의 예처럼: - `button-cta-background-color` - `cta-background-color` - `blue-400` - 토큰이 구체적인 의미에서 일반적인 색상 값으로 이어지는 구조다. - 개발자는 자신의 상황에 적용 가능한 가장 높은 수준의 토큰을 사용하는 것이 일반적이다. - 이를 통해 제품별 요구에는 대응하면서도 디자인 언어의 일관성을 유지할 수 있다. ## 실용적인 적용 방향 Thumbprint의 방식은 모든 개발자가 가장 낮은 수준의 API를 직접 다루게 하는 대신, 기본적으로는 접근성과 생산성이 높은 컴포넌트를 제공하고 필요할 때만 Atomic CSS와 토큰으로 내려가도록 설계한다. 따라서 디자인 시스템을 만들 때는 단일 추상화 계층에 모든 요구를 담기보다, **일반적인 사용 사례를 위한 높은 계층과 예외적인 요구를 위한 낮은 계층을 함께 제공하는 구조**가 효과적이다.

ui-componentsdesign-systemsreactaccessibility+3

figma2023년 5월 8일

디자인 시스템의 미래는 접근 (새 탭에서 열림)

디자인 시스템은 접근성을 제품 전반에 일관되게 적용할 수 있는 가장 강력한 기반이다. 공통 컴포넌트와 가이드에 접근성 기준을 내장하면 색상, 구조, 상호작용 등의 품질을 규모 있게 관리하고 변경 사항도 전체 제품에 전파할 수 있다. 앞으로는 WCAG 같은 표준과 AI 도구를 활용하되, 접근성을 사후 점검이 아닌 제품 개발 초기부터 우선순위로 삼아야 한다. ### 디자인 시스템과 접근성의 결합 - 전 세계 약 10억 명이 장애를 가지고 있으며, 이들의 연간 가처분소득은 약 1조 2천억 달러로 추정된다. - 접근성은 법적 의무나 체크리스트를 넘어 사용자 신뢰, 기업의 신뢰도, 성장 기회를 만드는 요소다. - 디자인 시스템에는 다음과 같은 접근성 기준을 포함할 수 있다. - 충분한 전경색·배경색 대비 - 접근성을 고려해 설계하고 테스트한 UI 컴포넌트 - 일관된 상호작용 규칙 - 구현자와 디자이너를 위한 구체적인 문서 - 공통 컴포넌트를 사용하면 한 번 수정한 접근성 개선 사항을 제품 전체의 컴포넌트 인스턴스에 확산할 수 있다. - 일관성, 문서화, 지속적인 피드백 구조가 접근성 실천을 조직 전체로 확장하는 기반이 된다. ### 접근성 확산을 돕는 디자인 시스템의 성장 - 2020년 Material Design 조사에서 기업 내부 디자인 시스템 구축은 전년 대비 22% 증가했다. - 응답자의 47%는 자신의 디자인 시스템에 접근성 가이드라인이 포함되어 있다고 답했다. - 디자인 시스템에 포함되는 대표 산출물은 다음과 같다. - 아이콘 라이브러리: 84% - UI 키트: 83% - 스타일 가이드: 75% - 컴포넌트 코드 라이브러리: 74% - WCAG 같은 표준, 접근성 도구의 발전, 법적·상업적 요구가 접근성 적용을 촉진하고 있다. - 그럼에도 2022년 기준 웹의 접근성 수준은 약 3%에 불과해, 실제 적용에는 여전히 큰 격차가 남아 있다. ### 접근성 분야의 책임 있는 AI 활용 - 디자인 시스템 팀은 AI를 활용해 접근성 문제를 더 빠르게 발견하고 개선하려 하고 있다. - 기사에서 언급하는 AI 기반 도구는 다음과 같은 작업을 자동화하는 것을 목표로 한다. - 이미지에 대체 설명 자동 생성 - 레이블이 없는 버튼에 적절한 레이블 추가 - 시맨틱 구조 도입 - 웹 접근성 문제 탐지 및 수정 - AI 도구는 접근성 검수와 반복 작업을 보조할 수 있지만, 자동화만으로 포괄적인 접근성을 보장할 수는 없다. - 생성된 설명이나 수정 결과가 실제 맥락에 적합한지 사람이 검토하고, 장애 당사자의 피드백과 표준 검사를 함께 활용해야 한다. ### 처음부터 접근 가능한 제품 만들기 - 접근성은 개발 완료 후 결함을 수정하는 단계가 아니라 디자인 시스템과 제품 설계 초기부터 포함해야 한다. - 공통 컴포넌트에 접근성 요구사항을 내장하면 개별 팀이 매번 같은 문제를 다시 해결하지 않아도 된다. - 색상, 컴포넌트 동작, 의미 구조, 문서화 등 모든 시스템 구성 요소에서 접근성을 점검해야 한다. - 접근성을 기본값으로 만들수록 제품 팀의 부담은 줄고, 전체 제품 생태계의 품질은 높아진다. ### 실용적인 적용 방향 - 디자인 토큰과 컴포넌트에 색상 대비, 키보드 탐색, 포커스 상태, 시맨틱 구조를 기본 규칙으로 포함한다. - WCAG 기준에 따라 자동 검사와 수동 테스트를 함께 운영한다. - AI는 반복적인 탐지·생성 작업에 활용하되 최종 판단은 전문가와 실제 사용자 검증을 거친다. - 접근성을 디자인 시스템의 부가 기능이 아니라 모든 컴포넌트의 필수 품질 기준으로 관리해야 한다.

ui-componentsaidesign-systemsaccessibility+2

figma2019년 10월 21일

멀티플레이어를 넘어: Figma (새 탭에서 열림)

Figma는 실시간 공동 편집을 넘어, 디자인을 공개하고 함께 배우며 재사용하는 커뮤니티 중심의 생태계를 구축하려 했다. 이를 위해 누구나 디자인 파일을 탐색·검사·리믹스할 수 있는 Figma Community 베타와, 팀 구성원이 중요한 작업을 쉽게 찾도록 개편한 workspace를 공개했다. 핵심은 디자인 과정을 더 개방적으로 만들고, 기업·교육기관·정부·개인 디자이너가 지식과 자산을 공유하도록 지원하는 것이다. ## 멀티플레이어에서 공개형 디자인 생태계로 - Figma는 4년 전 실시간 공동 편집 기능을 도입하면서 디자인이 더 개방적이고 클라우드 중심이어야 한다고 보았다. - 사용자들은 점차 다음과 같은 방식으로 디자인 프로세스를 개방했다. - 비디자이너를 작업 과정에 참여시킴 - 팀원과 동시에 파일을 편집함 - 작업물과 제작 방법을 커뮤니티에 공유함 - Figma는 이러한 변화를 확장하기 위해 두 공간을 도입했다. - **Figma Community**: 공개된 디자인 파일을 누구나 살펴보고, 리믹스하고, 학습할 수 있는 공간 - **개편된 Figma workspace**: 팀 구성원 중심으로 중요한 작업과 프로젝트를 쉽게 발견하는 공간 ## Figma Community 베타의 구조 - 사용자는 자신의 공개 프로필에 어떤 파일을 게시할지 직접 선택할 수 있다. - 초기 기본 라이선스로 **Creative Commons Attribution 4.0 International(CC BY 4.0)**을 제공했다. - 다른 사람이 파일을 사용·수정·공유할 수 있음 - 원작자 표시가 필요함 - Figma는 향후 더 제한적인 라이선스도 검토할 계획이며, 베타 기간 동안 사용자 의견을 수집하려 했다. - 여러 달 동안 베타를 운영하며 기업, 학교, 정부기관, 독립 디자이너의 요구를 확인하는 방식으로 제품을 발전시키려 했다. ## 기업이 공유하는 디자인 시스템과 리소스 - 기업은 파트너나 다른 디자이너가 활용할 수 있는 공개 디자인 자산을 배포할 수 있다. - 사례: - **Slack**: 파트너가 Slack 앱을 더 잘 만들 수 있도록 UI 키트 공개 - **Dropbox**: 디자인 관리자가 조직에서 활용할 수 있는 문화 키트 공유 - **Unsplash**: 디자인에 사용할 수 있는 아바타를 쉽게 제공 - **VMware**: 공개 디자인 시스템인 Clarity를 더 쉽게 활용하도록 지원 - Community는 기업의 디자인 시스템을 문서로만 설명하는 대신, 실제 편집 가능한 파일과 구성 요소로 배포하는 수단이 된다. ## 공공기관과 교육기관의 활용 - **시카고시**는 시민들이 자신의 정체성에 맞게 수정할 수 있는 공개 디자인 시스템을 준비했다. - **Lambda School**과 **Stanford d.school**은 무료 학습 템플릿을 공개하려 했다. - 이를 통해 Figma Community는 단순한 포트폴리오 공간을 넘어 다음 용도로 활용될 수 있다. - 교육 자료 배포 - 공공 서비스용 디자인 시스템 공유 - 시민·학생·학습자의 직접적인 수정과 실습 - 조직 간 디자인 표준 확산 ## 개인 디자이너의 포트폴리오와 튜토리얼 - 개인 디자이너는 Dribbble이나 Behance를 보완하는 공개 Figma 프로필을 만들 수 있다. - 발표 자료 디자이너 **Zach Grosser**는 인기 있는 슬라이드 템플릿을 공개하려 했다. - 디자이너 **David Kulakevich**의 사례는 Community의 학습 기능을 보여준다. - Figma로 제작한 그림을 처음에는 피드백을 받기 위해 공유 - 다른 사람들이 제작 과정을 궁금해하자 레이어별 작업 과정을 영상으로 설명 - 이후 원본 파일을 공개해 누구나 각 레이어와 제작 방식을 직접 확인할 수 있도록 함 - 완성된 이미지뿐 아니라 편집 가능한 원본을 공유함으로써 결과물 감상에서 실제 학습과 재현으로 확장된다. ## 기업 경계를 넘는 협업 - Square Crypto는 Bitcoin 생태계에 디자인과 코드를 개방적으로 기여하는 방식을 연구하고 있었다. - Figma는 이 팀과 협력해 회사 간 경계를 넘는 디자인 프로젝트에 필요한 기능을 탐색했다. - 이는 Community가 개인 파일 공유를 넘어, 여러 조직이 투명하게 공동 작업하는 기반이 될 가능성을 보여준다. - 공개성과 투명성을 중시하는 오픈소스 커뮤니티의 협업 방식에 디자인 도구를 연결하려는 시도이기도 하다. ## 워크스페이스 내부의 커뮤니티 - Figma는 공개 Community뿐 아니라 각 팀의 workspace 안에도 사람 중심의 공동 공간을 만들고자 했다. - 기존 디자인 파일은 파일 자체를 중심으로 구성되어 팀의 구성원이나 관계를 충분히 드러내지 못했다. - 개편된 workspace는 팀원이 중요한 작업과 프로젝트를 더 쉽게 발견하도록 설계되었다. - 제공된 글 내용에서는 이 내부 커뮤니티 기능의 구체적인 동작이나 세부 기능은 추가로 설명되지 않는다. ## 실용적인 결론 Figma Community는 디자인 파일을 단순히 보여주는 곳이 아니라, 편집 가능한 원본·템플릿·디자인 시스템을 공유해 다른 사람이 직접 배우고 재사용하도록 만드는 플랫폼이다. 조직은 공개 가능한 UI 키트와 시스템을 배포하고, 개인 디자이너는 작업 과정과 원본 파일을 포트폴리오 및 교육 자료로 활용할 수 있다. 다만 공개 전에는 라이선스 조건과 파일에 포함된 기밀 정보·브랜드 자산을 반드시 확인해야 한다.

ui-componentsfigmadesign-systemsreal-time-collaboration+2

figma2018년 5월 9일

머티리얼 디자인 + (새 탭에서 열림)

Material Design은 일관된 UI 경험을 제공하지만, 모든 제품이 비슷해져 브랜드 개성이 약해질 수 있다. 글은 Figma Styles와 Components를 결합하면 Material Design의 규칙은 유지하면서 색상·타이포그래피·그림자·그리드·컴포넌트 형태를 브랜드에 맞게 전역적으로 테마화할 수 있다고 설명한다. 이를 통해 대규모 UI 키트도 효율적으로 관리하고 팀 전체에서 재사용할 수 있다. ## 플랫폼 디자인 시스템의 한계 - 디자인 시스템은 일반적으로 제품 내 일관성을 위해 컴포넌트, 패턴, 가이드라인을 통제한다. - Material Design은 Google 및 Android 생태계 전반에 사용성을 높이고 일관된 경험을 제공했다. - 그러나 동일한 컴포넌트를 여러 브랜드가 사용하면 제품이 비슷해지고, 브랜드만의 독특한 인상을 전달하기 어려워진다. - Material Design의 다음 단계는 기본 시스템을 유지하면서 브랜드별 테마와 시각적 개성을 허용하는 방향이다. ## Figma Styles를 활용한 Material 테마 - Figma Styles는 전역 텍스트, 색상 채우기, 선, 효과, 그리드 스타일을 정의한다. - 스타일을 수정하면 해당 스타일을 사용하는 문서 전체에 변경 사항이 즉시 반영된다. - 스타일은 팀 라이브러리에 게시해 여러 프로젝트에서 동일하게 사용할 수 있다. - 따라서 수백 개의 컴포넌트를 개별적으로 수정하지 않고도 UI 키트 전체의 테마를 바꿀 수 있다. ## 색상과 타이포그래피의 전역 관리 - 주요 색상과 보조 색상, 텍스트의 강조 수준, 표면 색상을 Figma Fill Style로 정의했다. - 브랜드 색상을 적용하려면 스타일의 색상만 변경하면 되며, 여러 컴포넌트에 동시에 반영된다. - Material Design의 기본 색상 팔레트도 별도 페이지에서 참고할 수 있도록 구성했다. - Material의 텍스트 스타일을 기준으로 Text Style을 만들고, 기본 글꼴은 Roboto로 설정했다. - 브랜드 서체로 변경하면 시스템 전체의 텍스트가 함께 변경된다. - 다만 글꼴에 따라 글자 크기와 자간·행간을 추가로 조정해야 하며, 서체별 권장 크기를 별도로 마련할 필요가 있다. ## Elevation과 Grid 스타일 - Material Design의 각 elevation 단계에 맞춰 미리 정의된 Drop Shadow 스타일을 제공한다. - Material 그림자는 최대 세 개의 그림자를 조합하는 경우도 있지만, 스타일을 선택하는 것만으로 적용할 수 있다. - 4dp 기준선 그리드를 Figma Grid Style로 정의해 프레임이나 컴포넌트에 적용할 수 있다. - 데스크톱, 모바일, 태블릿 등 플랫폼별 그리드를 추가로 만들어 상황에 맞게 사용할 수도 있다. ## Styles와 Components의 결합 - Material Design은 브랜드 개성을 표현하기 위해 버튼, 카드 등 UI 표면의 모서리 형태를 조정할 수 있도록 한다. - 기본 도형 컴포넌트를 만든 뒤, 이를 버튼·Floating Action Button·카드 같은 상위 컴포넌트 안에 중첩했다. - 중첩 컴포넌트의 가시성을 전환하면 직각 모서리, 절삭 모서리, 다양한 둥근 모서리 스타일을 시스템 전체에 적용할 수 있다. - 변경 사항은 수백 개의 컴포넌트에 전파되며, 경우에 따라 반영까지 몇 초가 걸릴 수 있다. - 개별 인스턴스에서는 중첩 레이어를 직접 조정해 특정 화면에만 적용되는 Override도 만들 수 있다. ## 아이콘 라이브러리와 팀 공유 - Material Design에서 제공하는 다섯 가지 아이콘 스타일을 각각 별도의 Sticker Sheet 문서로 구성했다. - 각 문서에는 아이콘별 컴포넌트가 포함되어 있어 필요한 아이콘만 복사해 사용할 수 있다. - 아이콘 문서를 팀 공유 라이브러리로 게시하면 여러 프로젝트에서 일관된 아이콘을 불러올 수 있다. - 별도 문서로 분리해 전체 UI 키트의 용량을 줄이는 효과도 얻을 수 있다. ## 실용적인 적용 방향 Figma Styles에는 색상, 글꼴, 그림자, 그리드처럼 반복적으로 사용되는 디자인 토큰을 맡기고, Components에는 버튼·카드·아이콘처럼 구조와 동작이 있는 UI 요소를 맡기는 방식이 효과적이다. 이렇게 구성하면 Material Design의 일관성과 사용성을 유지하면서도 브랜드별 테마를 빠르게 적용하고, 팀 전체의 디자인 시스템을 효율적으로 관리할 수 있다.

ui-componentsfigmadesign-systemsdesign-tokens+2

datadog2016년 11월 14일

Redux-Doghouse: 스코프 지정을 통한 재사용 가능한 React-Redux 컴포넌트 만들기 (새 탭에서 열림)

Redux-Doghouse는 단일 Redux 애플리케이션 내에서 동일한 컴포넌트를 여러 번 재사용할 때 발생하는 상태 충돌 문제를 해결하기 위해 개발된 라이브러리입니다. 각 컴포넌트 인스턴스에 고유한 '스코프(Scope)'를 부여함으로써 액션과 리듀서가 특정 인스턴스에만 독립적으로 작용하도록 격리합니다. 이를 통해 개발자는 기존의 Redux 로직을 대대적으로 수정하지 않고도 복잡한 UI 구성 요소를 모듈화하고 재사용할 수 있습니다. **재사용 가능한 컴포넌트와 Redux의 충돌** * Redux는 전역 상태 관리에는 탁월하지만, 동일한 로직을 가진 컴포넌트를 한 페이지에 여러 개 배치할 경우 문제가 발생합니다. * 특정 액션 타입(예: `MY_ACTION`)이 발행되면, 해당 타입을 구독하는 모든 리듀서가 동시에 반응하기 때문에 한 인스턴스의 버튼 클릭이 모든 인스턴스에 영향을 주게 됩니다. * 이를 해결하기 위해 기존 코드를 리팩토링하는 대신, 각 인스턴스를 독립된 영역(Doghouse)에 격리하는 방식이 필요해졌습니다. **스코프 기반의 액션과 리듀서 작동 방식** * Redux-Doghouse는 `actionCreators`와 `reducers`에 고유한 스코프(식별자)를 결합합니다. * 액션이 발행될 때 메타데이터로 스코프 정보를 포함하며, 래핑된 리듀서는 자신에게 할당된 스코프와 일치하는 액션만을 처리합니다. * 이 방식의 장점은 하위 컴포넌트가 자신이 거대한 애플리케이션의 일부라는 사실을 모른 채 독립적으로 작동할 수 있다는 점입니다. * 상위 레벨에서는 여전히 모든 인스턴스의 내부 상태에 접근하거나 특정 액션에 반응할 수 있어, 상호 연결된 Redux의 장점을 그대로 유지합니다. **데이터독(Datadog)의 실제 적용 사례: 쿼리 에디터** * 데이터독의 '익스프레션 에디터(Expression Editor)'는 여러 개의 '쿼리 에디터'를 포함하며, 각 쿼리는 A, B, C 등의 식별자를 가집니다. * 각 쿼리 에디터에서 발생하는 `SET_GROUP` 액션은 해당 쿼리 인스턴스에만 영향을 주어야 하지만, 동시에 상위 에디터는 모든 쿼리의 그룹 규칙이 일치하는지 검사해야 합니다. * Redux-Doghouse를 통해 각 쿼리 에디터는 부모의 존재를 모른 채 독립적으로 동작하고, 상위 에디터는 스코프가 부여된 액션을 통해 전체적인 비즈니스 로직을 조율합니다. **모듈화와 개발 생산성 측면의 이점** * UI 구성 요소(React)와 상태 로직(Redux)을 동일한 단위로 묶어 모듈화할 수 있어 코드 관리가 용이해집니다. * 뷰(View) 코드와 모델(Model) 코드가 서로 다른 방식으로 분리되는 혼란을 방지하고, 컴포넌트 중심으로 사고할 수 있게 돕습니다. * 기존에 독립적으로 작성된 Redux 컴포넌트를 더 큰 시스템에 통합할 때 코드 수정 기능을 최소화할 수 있습니다. 복잡한 대시보드나 도구 모음처럼 동일한 UI 패턴이 한 화면에 반복적으로 나타나면서도 각각 독립적인 상태를 유지해야 하는 프로젝트라면, Redux-Doghouse는 구조적인 일관성을 지키며 확장성을 확보할 수 있는 훌륭한 대안이 될 것입니다.

ui-componentsdatabase-designreactstate-management+4