figma·2023년 7월 12일·3분 읽기큐레이션 요약

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와 토큰으로 내려가도록 설계한다. 따라서 디자인 시스템을 만들 때는 단일 추상화 계층에 모든 요구를 담기보다, **일반적인 사용 사례를 위한 높은 계층과 예외적인 요구를 위한 낮은 계층을 함께 제공하는 구조**가 효과적이다.

원문 읽기(새 탭에서 열림)

디자인 토큰디자인 시스템React접근성+3

figma·2023년 6월 20일원문

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) 기반으로 전환하여 다국어나 테마 대응 효율을 높여보시길 권장합니다.

디자인 토큰Figma디자인 시스템프로토타이핑+4

figma·2023년 5월 17일·3분 읽기큐레이션 요약

4년이 지난 지금, Config가

Config 2023 발표 제안 1,000여 건을 분석한 결과, 디자인 업계는 어려운 환경 속에서도 예상보다 낙관적인 태도를 보였다. 디자인 시스템은 창의성을 제한하기보다 반복 작업을 줄이고 새로운 아이디어를 위한 여유를 만드는 도구로 받아들여지고 있다. 다만 이 분석은 Config 제출작의 경향을 바탕으로 하므로 업계 전체를 대표하는 조사라기보다는 커뮤니티의 관심사를 보여주는 지표에 가깝다. ## Config 제안 수 증가와 분석 방식 - 발표 제안 수는 2021년 420건에서 2022년 520건, 2023년 1,000건 이상으로 크게 늘었다. - Figma는 제안서의 주제와 표현을 전년 대비 분석해 디자인·기술·제품 개발 분야의 관심 변화를 파악했다. - 제안 주제는 AI를 활용한 미래 구상, 디자인 시스템, 접근성, 협업 등 폭넓은 영역을 포함했다. - 많은 사람이 발표를 제안했다는 사실 자체가 커뮤니티의 참여 의욕과 관심이 높다는 신호로 해석됐다. ## 예상 밖의 낙관적 분위기 - 긍정적인 내용의 제안 비율은 2021년 63%에서 2023년 72%로 증가했다. - “지금이야말로 더 나은 시기다”, “이 방법 덕분에 성장할 수 있었다”와 같은 표현이 많이 등장했다. - 반대로 낡고 일관성 없는 디자인이나 해결되지 않는 문제를 비판하는 표현은 상대적으로 줄었다. - 팬데믹 관련 언급은 2021년의 6분의 1 수준으로 감소했다. - “remote”라는 단어의 등장도 2021년보다 약 20% 줄어들어, 업계 대화의 중심이 팬데믹과 원격근무의 충격에서 점차 이동했음을 보여준다. - 지난 몇 년의 혼란이 완전히 사라진 것은 아니지만, 사람들은 새로운 환경에 적응하며 문제보다 가능성에 더 집중하기 시작했다. ## 디자인 시스템과 창의성의 결합 - 디자인 시스템을 중시하는 사람과 자유로운 창작을 중시하는 사람 사이의 경계가 점차 약해지고 있다. - 디자인 시스템은 창의성을 억누르는 규칙이 아니라 반복적이고 소모적인 작업을 줄여 창작에 더 많은 시간을 쓰게 하는 기반으로 인식된다. - 디자인 토큰을 비롯한 시스템 자산을 축적하면 팀이 빠른 속도와 큰 규모로 작업하면서도 일관성을 유지할 수 있다. - 2021년 제안서는 디자인 시스템의 구축, 감사, 확장성 같은 기본 운영 문제를 주로 다뤘다. - 2023년에는 디자인 시스템과 함께 `art`, `transition`, `color`, `creating`처럼 표현적이고 시각적인 언어가 더 자주 등장했다. - 이는 디자인 시스템이 단순한 관리·표준화 도구를 넘어 새로운 아이디어를 생산하는 창의적 자산으로 발전하고 있음을 의미한다. ## 실용적인 시사점 디자인 조직은 시스템을 창의성의 반대편에 두기보다, 반복 업무를 자동화하고 일관성을 확보해 디자이너가 더 중요한 문제와 새로운 표현에 집중하도록 만드는 기반으로 활용할 수 있다. 또한 업계의 분위기를 판단할 때는 문제의 규모만 보기보다, 사람들이 어떤 해결책을 제안하고 어떤 가능성을 이야기하는지도 함께 살펴볼 필요가 있다.

원문 읽기(새 탭에서 열림)

디자인 토큰FigmaAI디자인 시스템+3

figma·2022년 11월 9일·2분 읽기큐레이션 요약

코드에서 영감 얻기 | Figma

디자인 시스템이 복잡성과 규모를 감당하려면 코드의 설계 원칙에서 배울 필요가 있다. 특히 고정된 컴포넌트와 과도한 변형 조합 대신 구성(composition), 구조와 표현의 분리, 체계적인 변경 관리가 중요하다. 궁극적으로 디자인 시스템은 창의성을 제한하는 규칙 모음이 아니라, 유연성과 일관성을 함께 제공하는 제품처럼 운영되어야 한다. ### 디자인의 복잡성과 코드에서 얻는 교훈 - 과거에는 디자인 파일이 개인 컴퓨터에 저장되어 협업이나 파일 간 의존성을 크게 신경 쓰지 않아도 됐다. - 오늘날에는 여러 팀과 기여자가 서로 연결된 시스템을 동시에 다루므로 일관성, 품질, 확장성을 관리해야 한다. - 디자인 시스템은 복잡성을 줄이는 데 도움을 주지만, 구조가 지나치게 강해지면 자유로운 탐색과 표현을 방해할 수 있다. - Figma는 이러한 문제에 대응하기 위해 디자인이 코드의 엔지니어링 프레임워크를 차용하고 있다고 설명한다. ### 중첩 컴포넌트로 유연한 레이아웃 구성 - 단순한 시스템에서는 하나의 컴포넌트에 몇 가지 변형(variant)만 정의하면 된다. - 카드처럼 가로형·세로형 등 레이아웃이 다양해지면 모든 경우를 variant로 만드는 방식은 유지보수가 어려워진다. - 컴포넌트 속성으로 이미지, 인용문 등 선택적 요소를 제어할 수 있지만, 구조 자체가 크게 다른 레이아웃에는 한계가 있다. - 작은 하위 컴포넌트를 만든 뒤 이를 큰 컴포넌트 안에 중첩하는 **구성(composition)** 방식을 사용할 수 있다. - 이미지, 제목, 가격, 버튼 같은 하위 컴포넌트를 다양한 방식으로 조합하면 시스템 관리자가 미리 예상하지 못한 레이아웃도 유연하게 만들 수 있다. - 이는 코드에서 재사용 가능한 모듈을 조합해 여러 기능을 구현하는 방식과 유사하다. ### 구조와 표현의 분리 - 초기 디자인 시스템은 컴포넌트에 특정 색상을 직접 지정하는 단순한 형태로 시작하는 경우가 많다. - 이후 다크 모드가 필요해지고, 제품·브랜드별 색상까지 추가되면서 테마 관리가 복잡해진다. - 제품과 하위 브랜드가 늘어날수록 각 컴포넌트에 색상과 스타일을 직접 넣는 방식은 조직의 관리 부담을 키운다. - 이러한 문제를 해결하려면 컴포넌트의 구조와 시각적 표현을 분리하는 새로운 아키텍처가 필요하다. - 글에서는 그 대안으로 **헤드리스 디자인 시스템(headless design system)**을 소개하려 하지만, 제공된 본문은 해당 설명 중간에서 끝난다. ### 실용적인 결론 컴포넌트의 모든 경우를 미리 variant로 만들기보다, 재사용 가능한 하위 컴포넌트를 조합하는 구조를 우선 고려하는 것이 좋다. 또한 색상·테마 같은 표현 요소를 구조와 분리하면 다크 모드, 멀티브랜드, 하위 제품 확장에 더 효과적으로 대응할 수 있다.

원문 읽기(새 탭에서 열림)

디자인 토큰디자인 시스템component-architecturetheming+2

figma·2022년 10월 3일·3분 읽기큐레이션 요약

Schema 2022 미리 보기

Figma의 연례 디자인 시스템 콘퍼런스 Schema 2022는 디자인 시스템의 구체적인 과제와 기회를 깊이 다루기 위해 뉴욕, 런던, 도쿄 및 온라인에서 개최된다. 글은 행사 일정뿐 아니라 디자인·개발 협업, 디자인 토큰, 플러그인과 통합 등 주요 관심사를 소개하며, 다양한 수준의 참가자가 배울 수 있도록 프로그램을 구성했다고 설명한다. 행사의 발표 영상은 이후 DesignSystems.com에 공개되었다. ### 도시 순회 및 온라인 행사 - Schema 2022는 다음 방식으로 진행된다. - 뉴욕, 런던, 도쿄에서 오프라인 행사 개최 - 장소와 관계없이 참여할 수 있는 온라인 행사 제공 - 각 도시 행사는 해당 지역과 연사에 맞춘 개별 프로그램으로 구성된다. - 오프라인 행사는 초청제로 운영되지만 참가 신청이 가능하다. - 각 도시에서는 지역 디자인 커뮤니티를 위한 밋업도 열린다. - 온라인 콘퍼런스는 오프라인 참석이 어려운 사람도 참여할 수 있도록 공개된다. ### 디자인 시스템에 집중한 전문 콘퍼런스 - Config가 디자인 전반을 다룬다면, Schema는 디자인 시스템에 초점을 맞춘 보다 전문적인 행사다. - 디자인 시스템의 고유한 기회와 문제를 깊이 탐구할 수 있다는 점이 Schema의 특징이다. - 주제가 구체적이기 때문에 연사와 참가자가 다음과 같은 논의에 집중할 수 있다. - 디자인 시스템 구축과 운영 - 조직 내 협업 방식 - 디자인 시스템의 확장과 활용 - 동시에 디자인 시스템을 처음 접하는 사람과 숙련된 실무자 모두에게 의미 있는 발표를 제공하는 것이 프로그램 구성의 과제다. - 발표 내용은 새롭고 혁신적이어야 하면서도, 디자인 시스템의 기본 개념을 배우려는 사람도 이해할 수 있어야 한다. ### 디자이너와 개발자의 창의적 교류 - 디자인 시스템은 디자인뿐 아니라 개발, 도구 제작, 조직 협업 등 다양한 역량을 필요로 한다. - Schema는 디자이너와 개발자가 서로의 작업과 아이디어를 공유하는 공간으로 기능한다. - 디자이너는 다음과 같은 주제에 대해 아이디어를 나눌 수 있다. - 플러그인 - 확장 기능 - 외부 서비스 및 도구와의 통합 - 개발자는 자신들이 구축한 도구와 시스템을 소개하며 디자인 분야와 연결점을 찾는다. - 이러한 상호작용을 통해 디자인 시스템이 단순한 시각 요소 모음이 아니라, 여러 직군이 함께 발전시키는 기술·프로세스라는 점이 드러난다. ### W3C 디자인 토큰 커뮤니티 그룹 - 디자인 토큰은 특정 도구나 플랫폼에 종속되지 않고 디자인 스타일을 관리·공유하기 위한 방법론이다. - 디자인 토큰은 여러 도구, 디바이스, 플랫폼에서 디자인을 확장하는 데 활용될 수 있다. - W3C Design Tokens Community Group은 다음을 목표로 한다. - 디자인 시스템의 스타일 정보를 도구 간에 공유할 수 있는 표준 마련 - 제품과 디자인 도구가 대규모로 디자인 토큰을 활용할 수 있는 기반 제공 - 디자인 토큰은 디자이너와 개발자가 공통의 언어로 시스템을 다루게 하는 연결 고리로 소개된다. - 표준화 논의에서는 특히 다음과 같은 주제를 장기적으로 고려한다. - 국제화 - 접근성 - 다양한 플랫폼과 환경에서의 일관성 ### 실무적 시사점 디자인 시스템을 도입하거나 확장하려는 팀이라면 시각 디자인 요소뿐 아니라 개발자 핸드오프, 도구 간 통합, 디자인 토큰의 표준화까지 함께 고려해야 한다. 특히 디자이너와 개발자가 초기부터 공통 언어와 공유 가능한 토큰 체계를 마련하면 여러 제품과 플랫폼으로 시스템을 확장하기 쉬워진다.

원문 읽기(새 탭에서 열림)

디자인 토큰Figma디자인 시스템접근성+2

figma·2022년 5월 23일·3분 읽기큐레이션 요약

Config 2022 되돌

Config 2022는 전 세계 디자이너와 제품 관계자가 모여 디자인의 범위와 영향력을 확장한 행사였다. 24시간 동안 100명 이상의 연사가 Web3, 사용자 조사, 디자인 시스템, 다문화 제품 설계 등을 다뤘으며, 핵심 메시지는 지역과 직무에 상관없이 더 크고 긴급한 변화를 시도하자는 것이었다. 특히 기존 디지털 사용자뿐 아니라 중국의 모바일 중심 사용자와 인도의 신규 인터넷 사용자까지 고려하는 포용적 디자인이 강조됐다. ## 더 많은 사용자를 고려하는 디자인 - 디자이너는 익숙한 사용자 집단만을 기준으로 제품을 설계해서는 안 되며, 서로 다른 기술 경험과 문화적 배경을 가진 사람들을 함께 고려해야 한다. - 현대 UX 관행은 디지털 환경에 새롭게 진입하는 사람들의 요구를 놓치는 경우가 많다. - 사용자 집단의 규모와 성장 가능성을 고려하면, 포용적인 설계는 윤리적 과제인 동시에 중요한 비즈니스 기회가 된다. ## 중국 사용자와 모바일 중심 UX Shopify의 Yuan Qing Lim은 중국 사용자를 이해하기 위해 중국의 독특한 디지털 발전 경로를 살펴봐야 한다고 설명했다. - 중국의 많은 사용자는 PC 시대를 거치지 않고 모바일 인터넷 환경으로 직접 진입했다. - 중국의 약 10억 인터넷 사용자를 대상으로 하려면 서구권의 미니멀한 UX 관습만 적용해서는 부족하다. - 주요 특징은 다음 세 가지로 정리된다. - **More is More**: 정보와 기능이 풍부하고 시각적으로도 과감한, 중국의 맥시멀리스트 디지털 취향을 반영한다. - **Super Apps**: 하나의 앱 안에서 결제, 쇼핑, 커뮤니케이션 등 여러 서비스를 이용하는 통합 경험을 제공한다. - **Community**: 개인 중심이 아니라 커뮤니티와 사회적 상호작용을 제품 경험의 중요한 요소로 다룬다. - 지역별 사용자의 문화와 행동 방식을 이해하지 않고 보편적인 UX를 적용하면 제품의 접근성과 매력도가 떨어질 수 있다. ## 신규 인터넷 사용자를 위한 설계 인도에서 활동하는 제품 디자이너 Rahul Goradia는 디지털 환경에 처음 진입하는 사용자를 위한 UX의 필요성을 강조했다. - 인도처럼 향후 인터넷 사용자가 크게 증가할 지역에서는 신규 사용자를 고려하지 않은 설계가 큰 문제로 이어질 수 있다. - 기존 UX 패턴과 전문 용어는 숙련된 사용자에게는 편리하지만, 초보자에게는 진입 장벽이 될 수 있다. - 특히 전자상거래 서비스는 상품 탐색, 비교, 결제 등 각 단계가 명확하고 이해하기 쉬워야 한다. - 실제 신규 사용자를 대상으로 사용성 테스트를 진행해 다음과 같은 문제를 확인해야 한다. - 사용자가 기능의 의미를 이해하는가 - 구매 절차를 끝까지 수행할 수 있는가 - 인터페이스의 용어와 아이콘을 혼동하지 않는가 - 변화하는 온라인 이용 습관에 제품이 맞춰지고 있는가 - 팬데믹 이후 사용자 행동이 변화하고 있으므로, 과거의 가정에 의존하지 않고 지속적으로 검증해야 한다. ## 다양한 주제로 확장된 디자인 논의 Config 2022에서는 사용자 다양성뿐 아니라 제품 개발 전반의 협업과 시스템화도 다뤄졌다. - UX 리서치 결과를 실행 가능한 전략과 디자인으로 전환하는 방법 - UX 라이터와 디자이너가 디자인 시스템 안에서 협업하는 방식 - 디자인 시스템의 한계와 개선 방향 - 디자인 토큰을 활용한 협업 - 다크 모드와 멀티플랫폼 디자인 시스템 구축 - 제품 카피를 체계화하고 콘텐츠를 디자인 요소로 다루는 방법 - Web3 환경에서 디자인을 분산화하는 가능성 ## 지역과 직무를 넘어 행동하기 - Config의 공통된 방향은 디자인을 단순한 화면 제작이 아니라 사회와 제품을 변화시키는 실천으로 보는 것이다. - Figma 공동 창업자이자 CEO인 Dylan Field는 지역적 또는 세계적 변화를 원한다면 이를 시작하는 데 막을 것이 없다고 강조했다. - 디자이너는 자신의 업무 범위를 넘어 사용자, 커뮤니티, 조직과 사회에 미치는 영향을 고민해야 한다. 실무에서는 먼저 제품의 주요 사용자 정의에 빠져 있는 집단이 없는지 점검하고, 서로 다른 디지털 숙련도와 문화적 배경을 가진 사용자를 대상으로 사용성 테스트를 진행하는 것이 좋다. 지역별 사용자 행동을 일반화하지 않고 실제 데이터와 피드백을 바탕으로 제품 경험을 조정해야 한다.

원문 읽기(새 탭에서 열림)

디자인 토큰Figma디자인 시스템사용자 경험+4

figma·2020년 9월 1일·3분 읽기큐레이션 요약

멀티 브랜드 디자인 시스템 구축

멀티 브랜드 디자인 시스템은 일관성과 효율성을 제공하되, 엄격한 규칙보다 유연성을 중심으로 설계해야 한다. 기본 컴포넌트와 브랜드별 토큰, 코드 연계를 통해 다양한 요구를 수용하고 빠르게 확장할 수 있다. 또한 디자인 시스템은 완성된 산출물이 아니라 실제 사용 데이터를 관찰하며 계속 발전시키는 살아 있는 시스템이어야 한다. ## 유연성을 우선하는 설계 - 디자인 시스템을 지나치게 규정적으로 운영하면 디자이너의 창의성을 제한하고, 결국 시스템 밖에서 작업하게 만들 수 있다. - Harry’s는 복잡도와 유연성이 서로 다른 여러 계층으로 시스템을 구성했다. - 기본 컴포넌트: 단순하고 표준화된 구성 - 스타터 키트: 더 복잡하고 유연한 구성 - 대부분의 프로젝트는 단순한 계층으로 해결하되, 특수한 요구에는 커스텀 구성을 허용한다. - 기본값은 단순하게 유지하면서도 예외를 수용하면 효율성과 창의성을 동시에 확보할 수 있다. ## 토큰을 활용한 멀티 브랜드 확장 - Condé Nast처럼 여러 브랜드를 운영하는 조직에서는 브랜드마다 다른 시각적 특성을 수용해야 한다. - 모듈화된 컴포넌트와 디자인 토큰을 사용하면 동일한 구조를 유지하면서 브랜드별 값을 적용할 수 있다. - 하나의 토큰이 브랜드마다 다른 값을 가질 수 있다. - 예: `prominent text`라는 토큰에 Vogue, The New Yorker, Bon Appétit별 폰트를 각각 지정 - 이런 방식은 컴포넌트를 브랜드별로 별도 제작하지 않고도 시스템을 확장하게 해준다. ## 계속 진화하는 디자인 시스템 - 시스템을 구축한 뒤에도 실제 사용 과정에서 무엇이 잘 작동하고 실패하는지 관찰해야 한다. - Shopify는 디자인 시스템을 “휘어지지만 부러지지 않는” 기반으로 만든다는 방향을 취한다. - 디자인 시스템을 박물관의 전시물처럼 보존하려 하면 변화하는 요구사항을 반영할 수 없다. - 디자이너뿐 아니라 최종 사용자도 관찰해야 한다. - Shopify의 경우 상점 운영자인 머천트가 시스템의 실제 사용자인 만큼, 사용 중 어디서 문제가 발생하는지 확인한다. - 컴포넌트 사용량, 라이브러리 활용 추세 등의 데이터를 분석하면 개선 우선순위를 정할 수 있다. - 시스템이 어떻게 실패하는지 확인하고 이를 바탕으로 다시 설계하는 과정이 중요하다. ## 디자인과 코드의 연결 - 디자인 컴포넌트를 코드로 연결하면 디자인과 개발 간의 전달 비용을 줄이고 구현 속도를 높일 수 있다. - Condé Nast는 JavaScript 기반 사이트에서 JSON으로 토큰을 정의한다. - 커스텀 플러그인을 통해 토큰 값을 JSON으로 가져오거나 내보내 디자인과 코드의 변경 사항을 동기화한다. - 토큰 기반 구조는 새로운 시장이나 브랜드를 빠르게 구축하고 디자이너와 엔지니어 간의 핸드오프를 원활하게 한다. - 멀티 브랜드 환경이 아니더라도 색상이나 타이포그래피에 목적과 값을 연결하는 것부터 시작할 수 있다. - 예: 특정 색상을 직접 `#000000`으로 부르기보다 `text-primary`처럼 용도 중심으로 명명 - 목적과 값을 분리하면 시스템의 복잡도와 불필요한 세분화를 파악하기 쉬워진다. ## 조직에 맞는 시스템 구축 - 모든 조직에 동일하게 적용되는 디자인 시스템은 없다. - 팀 규모, 조직 구조, 브랜드 수, 개발 환경, 업무 우선순위에 맞춰 범위와 복잡도를 결정해야 한다. - 처음부터 거대한 시스템을 만들기보다 현재 반복적으로 사용되는 패턴과 컴포넌트부터 정리하는 것이 현실적이다. - 시스템의 규칙보다 실제 팀이 쉽게 사용하고 변경할 수 있는 프로세스를 만드는 것이 더 중요하다. 실무에서는 기본 컴포넌트와 목적 기반 토큰부터 시작하고, 브랜드별 차이는 토큰 값으로 관리하는 방식을 추천한다. 이후 사용 데이터와 사용자 피드백을 바탕으로 시스템을 지속적으로 수정하되, 예외와 실험을 허용해 시스템 밖으로 이탈할 필요가 없도록 해야 한다.

원문 읽기(새 탭에서 열림)

디자인 토큰디자인 시스템JavaScript웹 개발+2

figma·2018년 5월 9일·3분 읽기큐레이션 요약

머티리얼 디자인 +

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의 일관성과 사용성을 유지하면서도 브랜드별 테마를 빠르게 적용하고, 팀 전체의 디자인 시스템을 효율적으로 관리할 수 있다.

원문 읽기(새 탭에서 열림)

디자인 토큰Figma디자인 시스템반응형 디자인+2