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

피그마 2018

Figma의 2018년은 단순한 디자인 도구를 넘어 플랫폼과 커뮤니티로 확장한 해였다. 웹 기반 API를 공개해 외부 서비스와 자동화 도구가 Figma에 연결될 수 있도록 했고, 실제 사업과 통합 사례도 등장했다. 동시에 전 세계 사용자 커뮤니티를 조직하고 디자인 시스템 관련 지식 공유를 확대했으며, Series B 투자로 제품·사업 확장을 뒷받침했다. ## 플랫폼과 웹 API의 공개 - Figma는 초기부터 데스크톱 소프트웨어가 아닌 웹 기반 디자인 도구를 지향했다. - 2018년에는 디자인 도구 최초의 웹 API를 공개하며 Figma Platform을 출시했다. - API를 통해 다음과 같은 확장이 가능해졌다. - 다른 디자인·개발 도구와의 연동 - 반복 작업 자동화 - 스크립트와 웹 애플리케이션을 활용한 맞춤형 워크플로 구축 - Uber와 GitHub는 공개 전부터 API를 활용해 자체 업무 프로세스를 맞춤화했다. - 클라우드 기반 구조 덕분에 기존의 폐쇄적인 데스크톱 소프트웨어로는 구현하기 어려웠던 온라인 통합이 가능해졌다. ## API를 기반으로 한 생태계와 사업 - 플랫폼 출시 7개월 만에 Figma 위에서 유료 사업을 운영하는 기업이 등장했다. - 커뮤니티와 기업이 만든 주요 통합 사례는 다음과 같다. - PDF 내보내기 - 스타일 가이드 자동 생성 - 텍스트와 레이어 이름 검색·일괄 변경 - JavaScript용 Figma API 라이브러리 - 외부 서비스와의 연동도 확대됐다. - Avocode와 Zeplin: 개발자 핸드오프 지원 - Principle: Figma 디자인에 고급 애니메이션 추가 - Relay for Figma: 디자인을 코드베이스로 직접 전달 - Pagedraw: Figma 디자인을 React 코드로 변환 - Overflow: 사용자 플로우 다이어그램 제작 - Haiku: 디자인을 프로덕션용 컴포넌트로 전환 - Figma는 파트너십과 통합 생태계를 향후 성장의 핵심 축으로 보고, 2019년에도 플랫폼 확장을 이어가겠다고 밝혔다. ## 글로벌 커뮤니티 구축 - 2018년 Figma의 관심사는 제품 자체뿐 아니라 사용자 커뮤니티로 확대됐다. - 디자인 시스템을 주제로 한 밋업을 세계 여러 도시에서 개최했다. - 초기에는 8개 도시에서 시작 - 이후 17개 국가로 활동 범위를 확장 - Bengaluru, Toronto 등지에서 디자이너들이 실제 디자인 시스템 운영 경험을 공유 - 커뮤니티의 관심이 커지자 DesignSystems.com을 개설했다. - Airbnb, GitHub, Braintree, Segment 등의 구성원이 디자인 시스템 운영 사례와 실무 조언을 공유했다. - Figma는 온라인 제품뿐 아니라 오프라인 만남과 지식 공유를 통해 사용자 간 연결을 강화하려 했다. ## 기업 확장과 투자 - Microsoft Dynamics 365 for Talent 디자인팀은 Figma API를 활용해 개발자 핸드오프를 자동화했다. - 대규모 조직이 여러 부서와 팀에서 Figma를 채택하기 시작했다. - 2018년 초 2,500만 달러 규모의 Series B 투자를 유치했다. - 투자금은 제품 개발과 사업 확장, 플랫폼 및 커뮤니티 성장에 활용됐다. ## 실용적인 시사점 Figma의 사례는 협업 도구가 자체 기능만으로 성장하는 것이 아니라 API, 외부 통합, 사용자 커뮤니티를 통해 플랫폼으로 발전할 수 있음을 보여준다. 특히 반복적인 디자인·개발 업무를 자동화하려는 팀이라면 API 기반 연동과 기존 도구와의 연결 가능성을 우선 검토할 만하다.

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

ReactFigma디자인 시스템JavaScript+3

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

소개합니다: 피그

Figma는 디자인 생태계의 개방성을 강화하기 위해 Figma 파일을 Sketch로 변환하는 API 챌린지를 발표했다. 총 1만 5천 달러의 상금과 오픈소스 제출을 통해 개발자와 디자이너의 참여를 유도하려는 목적이었다. 다만 커뮤니티의 우려가 제기되면서 챌린지는 일시 중단되었고, 2018년 11월에는 당분간 진행하지 않기로 결정되었다. ## 개방형 디자인 플랫폼을 위한 API 챌린지 - Figma는 경쟁 제품인 Sketch로 파일을 내보내는 도구를 만들도록 참가자들을 초대했다. - 이는 특정 도구에 사용자를 묶어두기보다, 다양한 디자인 도구와 작업 방식을 연결하려는 Figma의 개방형 플랫폼 전략을 보여준다. - Figma는 이미 Sketch 파일 가져오기를 지원하고 있었으며, Sketch 내보내기는 그 생태계를 확장하는 자연스러운 다음 단계로 소개됐다. - 기존 API를 활용해 커뮤니티가 만든 스타일 가이드 생성기, Alexa 연동 등 다양한 프로젝트에서 영감을 받아 챌린지를 기획했다. ## 구현 대상: Figma에서 Sketch로의 변환 - 참가자는 Figma 객체로 구성된 두 개의 파일을 Sketch로 변환하는 exporter를 개발해야 했다. - 첫 번째 파일에는 기본 수준의 객체가 포함되어 비교적 명확한 변환 결과를 기대할 수 있었다. - 두 번째 파일에는 다음과 같은 복잡한 요소가 포함됐다. - 텍스트 및 타입 - 컴포넌트 - 스타일 - 프로토타입 - Figma와 Sketch의 기능이 항상 1:1로 대응하지 않기 때문에, 복잡한 파일은 단순한 변환 정확도뿐 아니라 창의적인 매핑 방식도 평가 대상이었다. ## 평가 기준과 제출 조건 - 심사는 객관적 기준과 주관적 기준을 함께 적용했다. - 평가 요소에는 다음이 포함됐다. - 두 파일의 디자인 요소를 얼마나 정확하게 전달하는지 - exporter의 사용 편의성 - Figma와 Sketch 간 차이를 해결하는 접근 방식의 창의성 - 코드 품질과 GitHub 문서화 수준 - 전체 점수의 5%는 코드 품질과 GitHub README 문서에 배정됐다. - 제출물은 GitHub 저장소 링크와 함께 제출해야 했으며, README와 MIT 라이선스를 포함해야 했다. ## 상금과 참가 방식 - 1등 상금은 1만 달러, 2등 상금은 5천 달러로 총상금은 1만 5천 달러였다. - 최대 3명까지 팀을 구성할 수 있었다. - 대부분의 국가에서 만 21세 이상이면 참가할 수 있었지만, 일부 국가에는 예외가 적용됐다. - 챌린지 기간은 2018년 10월 2일부터 11월 16일 오후 11시 59분(PST)까지로 예정됐다. ## 심사위원 구성 - 심사위원은 디자인 경험과 커뮤니티용 플러그인·도구 제작 경험을 함께 갖춘 인물들로 구성됐다. - GitHub의 디자인 시스템 엔지니어 Emily Plumme는 디자인과 개발을 연결하는 API 및 컴포넌트 시스템 경험을 보유했다. - Google의 인터랙션 디자이너 Raph D’Amico는 행동과학과 시스템 설계 관점에서 사용자 경험을 평가할 수 있는 배경을 갖췄다. - 접근성 도구 Stark와 Lyra를 만든 Cat Noone은 디자인 접근성과 윤리적 제품 설계에 전문성이 있었다. - Sketch Runner를 만든 디자이너 Roy van Rooijen은 디자인 도구와 플러그인 생태계에 대한 경험을 제공했다. ## 커뮤니티 반응과 챌린지 중단 - 발표 이후 커뮤니티에서 챌린지의 운영 방식과 관련한 우려가 제기됐다. - Figma는 이러한 의견을 반영해 챌린지를 일시 중단하고, 몇 주 뒤 재개하는 방안을 검토한다고 밝혔다. - 이후 2018년 11월 19일 업데이트에서 어떤 형태의 챌린지도 당분간 진행하지 않기로 결정했다. - 따라서 글에서 제시된 상금, 일정, 제출 조건은 최초 계획이며 실제로는 예정대로 진행되지 않았다. Figma의 시도는 경쟁 제품과의 호환성을 지원하는 것이 장기적으로 플랫폼의 신뢰와 확장성을 높일 수 있음을 보여준다. 다만 외부 커뮤니티를 대상으로 한 API 경연은 상품 범위, 평가 기준, 참가자 권리와 운영 방식에 대한 충분한 사전 검토와 소통이 중요하다는 교훈도 남겼다.

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

React디자인 시스템오픈 소스JavaScript+4

figma·2018년 8월 15일·4분 읽기큐레이션 요약

마이크로소프트 디자이너

Microsoft 디자이너 Jackie Chui는 사내 아이콘 4,000개를 한곳에서 검색·분류·복사할 수 있는 브라우저 기반 라이브러리를 3주 만에 만들었다. 디자이너용 태그와 엔지니어용 클래스명, 아이콘을 붙여 넣어 메타데이터를 찾는 역검색 기능을 제공해 도구 간 단절을 해결했다. 이 사례는 기존 제품을 그대로 사용하는 대신 실제 사용자의 요구를 조사하고, 익숙한 기술과 단계적인 학습으로 맞춤형 도구를 만들 수 있음을 보여준다. ## 문제 발견과 기존 도구의 한계 - Jackie는 Microsoft 디자이너들의 작업 과정을 관찰하고 아이콘 관리에서 겪는 불편을 조사했다. - 기존 제품 중에서는 IconJar가 아이콘 정리와 복사·붙여넣기를 지원했지만 Microsoft의 요구에는 부족했다. - 여러 사용자가 아이콘 태그를 추가하고 공유할 수 없었다. - 브라우저 기반이 아니어서 아이콘을 클라우드에서 공동으로 사용할 수 없었다. - Mac 전용이라 Windows 중심 조직에 적합하지 않았다. - 이에 따라 특정 운영체제나 디자인 도구에 종속되지 않는 자체 도구를 만들기로 했다. ## 브라우저 기반 아이콘 라이브러리 설계 - 초기 UI는 Sketch로 설계하고 IconJar에서 아이디어를 얻되, Microsoft Fabric 디자인 언어에 맞게 스타일을 조정했다. - 브라우저에서 작동하도록 만들어 사용자가 선호하는 디자인 도구와 관계없이 접근할 수 있게 했다. - 아이콘마다 다음 정보를 연결했다. - 디자이너가 찾기 쉬운 태그와 분류명 - 엔지니어가 코드에서 사용하는 클래스명 - 실제 복사·붙여넣기에 필요한 유니코드 아이콘 문자 - 아이콘을 검색해 바로 복사할 수 있게 해, 디자이너가 자주 쓰는 아이콘 문자를 별도 파일에 보관하던 방식을 없앴다. - 아이콘을 라이브러리에 붙여 넣으면 관련 메타데이터를 역으로 찾을 수 있는 기능도 제공했다. ## 익숙한 기술로 빠르게 개발 - Jackie는 포트폴리오 제작을 통해 익힌 HTML, CSS, JavaScript 경험을 기반으로 개발을 시작했다. - 프런트엔드와 백엔드 데이터베이스를 함께 구축하기 쉬운 JavaScript 프레임워크 Meteor.js를 선택했다. - Meteor 튜토리얼의 할 일 목록 데이터베이스 예제를 아이콘 데이터베이스로 확장했다. - 새로운 기술을 완전히 습득한 뒤 시작하기보다, 해결해야 할 실제 문제를 중심으로 필요한 내용을 학습하며 개발했다. - 기획과 디자인 경험에 엔지니어링 지식을 결합해 짧은 기간 안에 작동하는 제품을 완성했다. ## 아이콘 데이터 수집과 변환 - 아이콘은 일반적으로 폰트 파일에 저장되며, 키보드로 직접 입력할 수 없는 전용 유니코드 문자를 복사해 사용한다. - Jackie는 회사의 아이콘 폰트 파일을 다운로드하고 각 아이콘의 실제 유니코드 문자를 추출했다. - Microsoft 문서에서 엔지니어가 사용하는 아이콘 이름과 클래스명 목록을 확보했다. - 아이콘 이름 목록을 Excel로 정리한 뒤 JSON으로 변환해 애플리케이션 데이터로 사용했다. - 이렇게 아이콘 문자, 표시 이름, 클래스명, 태그를 하나의 검색 가능한 시스템으로 통합했다. ## 배포와 사용자 피드백 - 약 3주간의 개인 작업 끝에 첫 버전을 완성하고 Microsoft Azure에 호스팅했다. - 처음에는 팀에 간단한 이메일과 링크만 공유했지만, 사용자들의 입소문을 통해 디자인 스튜디오 전체로 확산됐다. - 동료들은 버그를 제보하고 새 기능을 제안하며 제품 개선에 참여했다. - 도구는 빠르게 여러 디자이너의 일상적인 작업 흐름에 포함됐다. - 이후 V2에서는 버그 수정과 기능 보강을 진행하고 다른 Microsoft 팀으로 확장할 계획이었다. ## Figma 컴포넌트로의 확장 - 향후 4,000개 이상의 아이콘을 한 번에 Figma 컴포넌트로 변환하는 기능을 계획했다. - 사용자는 별도 라이브러리를 거치지 않고 Figma 안에서 아이콘을 검색하고 정리할 수 있게 된다. - 장기적으로는 아이콘 폰트 파일을 업로드하면 누구나 Figma 컴포넌트로 변환할 수 있는 도구로 발전시키려 했다. - 기존 도구를 대체하는 다음 버전을 만드는 것이 목표라는 점에서, 제품은 사용자의 작업 흐름에 맞춰 계속 진화한다. 실용적으로는 먼저 사용자의 반복적인 불편을 관찰하고, 기존 도구의 부족한 점을 명확히 정의하는 것이 중요하다. 이후 모든 기능을 완성하려 하기보다 검색·분류·복사처럼 핵심 작업만 지원하는 최소 버전을 빠르게 배포하고, 실제 사용자 피드백을 바탕으로 확장하는 접근이 효과적이다.

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

ReactFigmaJavaScriptCSS+4

figma·2018년 4월 25일·2분 읽기큐레이션 요약

소개: Figma to React | 피

Figma는 API를 활용해 Figma 디자인을 React 컴포넌트와 코드로 변환하는 도구를 만들었다. 핵심 목표는 디자인을 Figma에서 계속 관리하면서도, 개발자가 작성한 기능 코드를 보존하고 여러 디자인에 재사용할 수 있도록 분리하는 것이다. 이를 통해 디자인 변경 사항을 웹사이트에 동기화하고, 기존 기능을 새로운 디자인에 쉽게 연결하려 했다. ## Figma 디자인을 React 코드로 변환 - Figma API 출시 이후 Figma 문서를 React 컴포넌트로 자동 변환하려는 시도가 꾸준히 있었다. - Pagedraw는 Figma 연동을 지원하는 제품을 만들었고, Figma 역시 자체적인 변환기를 개발해 공개했다. - 구현 코드는 GitHub에 오픈 소스로 공개되어 누구나 동작 방식을 확인하고 실험할 수 있다. - API를 직접 사용해 보고 싶은 개발자를 위해 Figma Developers 페이지도 제공한다. ## 디자인 코드와 기능 코드의 분리 - 생성되는 컴포넌트의 시각적 디자인은 가능한 한 Figma에서 관리하도록 설계했다. - Figma에서 디자인을 수정한 뒤 버튼 한 번으로 웹사이트의 디자인 변경 사항을 동기화하는 것이 목표다. - 동기화 과정에서 개발자가 작성한 이벤트 처리, 데이터 로직 등 기능 코드를 덮어쓰지 않아야 한다. - 따라서 Figma가 생성하는 디자인 코드와 애플리케이션의 기능 코드를 서로 독립적인 영역에 두는 구조가 필요하다. ## 기능 코드의 재사용 - 새로운 디자인을 만들 때마다 기능을 처음부터 다시 구현하지 않도록 하는 것도 주요 목표다. - 예를 들어 기존에 구현한 정렬 가능한 리스트의 기능을 새로운 리스트 디자인에 연결할 수 있어야 한다. - 기능 코드를 디자인과 분리하면 React 컴포넌트를 재사용하듯, 동일한 기능을 여러 시각적 디자인에 적용할 수 있다. - 이는 디자인 변경과 기능 개발이 서로의 작업을 방해하지 않도록 만드는 기반이 된다. ## Figma에서 CSS로 변환하기 - React 변환의 첫 번째 기술적 과제는 Figma 디자인과 동일하게 보이는 React 컴포넌트를 생성하는 것이다. - 단순히 HTML 구조만 생성하는 것이 아니라, 레이아웃과 스타일을 CSS로 재현해야 변환의 실질적인 가치가 생긴다. - 글에서는 정렬 가능한 리스트 예시를 사용해 디자인을 코드로 옮기는 과정을 설명하려 한다. - 동일한 시각적 결과를 구현하는 방법은 여러 가지가 있으므로, 어떤 CSS 구조와 속성을 선택할지가 중요한 설계 문제가 된다. 실무에서는 Figma를 디자인의 원천으로 활용하되, 변환된 코드를 그대로 최종 코드로 취급하기보다 시각적 구조와 기능 로직을 분리하는 초기 코드 생성 도구로 사용하는 것이 적절하다.

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

ReactJavaScriptCSSdesign-to-code+2

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

Figma API 영감이 필요하신가

Figma는 2018년 Web API 출시 직후 커뮤니티가 만든 다양한 활용 사례를 소개한다. PDF·스타일 가이드 생성부터 음성 인터페이스, GraphQL, React 연동까지 API가 디자인 산출물 자동화와 개발자 협업에 활용될 수 있음을 보여준다. 글은 Figma API가 디자이너와 개발자의 작업 흐름을 확장하는 플랫폼이 될 가능성을 강조한다. ## Figma API 출시와 커뮤니티의 반응 - Figma는 전문 디자인 도구를 위한 첫 Web API인 Figma Platform을 공개했다. - 출시 후 며칠 만에 커뮤니티에서 다양한 프로젝트가 등장했다. - 일부 프로젝트는 오픈 소스로 공개되어 다른 개발자가 확장하거나 재사용할 수 있었다. - 소개된 통합 기능은 모두 제3자 프로젝트이므로 권한 설정과 유지보수는 Figma가 책임지지 않는다. ## 디자이너가 바로 사용할 수 있는 통합 ### PDF 내보내기 - Figma 파일에서 프레임을 선택한 뒤 파일 URL을 웹사이트에 입력하면 PDF로 변환할 수 있다. - 개발 지식이 없어도 사용할 수 있는 간단한 API 활용 사례다. - Gweltaz Calori가 만든 `Figma-To-Pdf` 프로젝트는 GitHub에 오픈 소스로 공개됐다. ### 스타일 가이드 자동 생성 - Figma 문서 URL을 입력하면 문서에 사용된 폰트, 색상, 기타 스타일 정보를 분석한다. - 분석 결과를 바탕으로 스타일 가이드 페이지를 자동으로 생성한다. - 디자인 파일을 별도로 정리하지 않아도 현재 사용 중인 디자인 시스템을 문서화할 수 있다. ### Alexa 음성 통합 - Figma 디자인에 남겨진 댓글을 Alexa가 읽어 주는 음성 기반 통합 사례다. - 실용성보다는 Figma API가 음성 인터페이스와도 연결될 수 있음을 보여주는 실험적 프로젝트다. - Airbnb의 디자인 테크놀로지스트 Jon Gold가 제작했다. ## 개발자를 위한 API 활용 기반 ### JavaScript 라이브러리와 GraphQL - Jon Gold는 Figma API를 JavaScript에서 쉽게 사용할 수 있도록 비공식 `figma-js` 라이브러리를 만들었다. - API 호출을 직접 다루는 복잡성을 줄여 JavaScript 통합 개발을 빠르게 시작할 수 있다. - Bernardo Raposo와 Sara Vieira는 이 라이브러리를 활용해 Figma API를 GraphQL 쿼리로 사용할 수 있는 오픈 소스 커넥터를 만들었다. - GraphQL을 이용하면 필요한 디자인 데이터만 질의하는 방식으로 API를 활용할 수 있다. ### Figma 디자인과 React 컴포넌트 동기화 - Figma 디자인을 React 등 다른 프레임워크의 코드로 자동 변환하려는 시도가 등장했다. - PageDraw는 Figma와 React를 연결하는 통합 기능을 제공했다. - Sara Vieira는 GraphQL 커넥터를 사용해 Figma 파일의 요소를 React 컴포넌트로 직접 렌더링하는 방식을 구현했다. - Candis의 Florian Nagel도 Figma 디자인을 React 코드로 변환하는 자체 도구를 개발하고 오픈 소스화를 추진했다. - 이러한 도구는 디자인과 실제 구현 사이의 변환 작업을 자동화해 디자이너와 개발자의 핸드오프 비용을 줄이는 것을 목표로 한다. ## 실용적인 시사점 Figma API는 단순한 파일 조회 기능을 넘어 문서화, 포맷 변환, 음성 인터페이스, GraphQL 질의, 프론트엔드 코드 생성까지 확장될 수 있다. 특히 디자인 시스템 자동 생성과 Figma-to-React 변환은 반복적인 협업 작업을 줄이는 데 직접적인 가치가 있으므로, API 래퍼나 오픈 소스 커넥터를 기반으로 팀의 디자인·개발 프로세스에 맞는 자동화 도구를 구축할 수 있다.

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

ReactJavaScriptdesign-to-codeGraphQL+2

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

18명의 디자이너가 전망

2018년 UI/UX의 중심 과제는 시각적 유행보다 사용자의 경험과 사회적 책임을 개선하는 데 있다는 전망이다. 18명의 디자이너는 접근성, 윤리, 협업, 디자인 시스템, 개발 도구의 통합을 주요 변화로 꼽았다. 동시에 표준 시스템을 무비판적으로 따르거나 효율성만 추구하는 흐름에 대한 경계도 제시한다. ## 접근성이 디자인의 우선순위가 된다 - 디자이너의 개성이나 시각적 과시보다 모든 사용자가 콘텐츠를 이해하고 사용할 수 있는지가 중요해진다. - 필수 요소에 지나치게 옅은 회색을 사용하거나, 장식적인 애니메이션을 과도하게 적용하는 관행을 줄여야 한다. - 접근성은 부가 기능이 아니라 제품 설계 초기부터 고려해야 할 기본 조건으로 제시된다. - 다만 접근성·포용적 디자인은 필요한 작업임에도 업계의 관심과 참여가 부족할 것이라는 비관적인 전망도 함께 나온다. ## 디자인 협업이 엔지니어링 방식에 가까워진다 - 디자인 팀도 개발 팀처럼 체계적인 협업과 검토 절차를 도입할 것으로 예상된다. - 코드 리뷰와 유사한 디자인 리뷰가 일반화될 수 있다. - 디자인 도구가 코드 린터처럼 일관성이나 오류를 자동으로 점검하는 방향으로 발전할 수 있다. - 오픈소스 엔지니어링 프로젝트처럼, 사용자 경험과 정보 설계를 위한 오픈소스 디자인 패턴이 늘어날 가능성이 있다. ## 디자이너의 윤리적 책임이 커진다 - UX/UI 디자인은 사용자의 행동과 선택에 직접 영향을 주므로, 디자이너는 자신의 영향력을 더 자각해야 한다. - 제품의 편의성과 전환율만이 아니라 디자인 결정이 사용자와 사회에 미치는 윤리적 결과를 고려해야 한다. - 어떤 사용자를 배제하거나 조작하는지, 정보와 선택지를 공정하게 제공하는지 검토하는 태도가 중요해진다. ## 표준 디자인 시스템의 무비판적 사용 - Material Design이나 Microsoft Fluent 같은 업계 표준 디자인 시스템에 대한 의존도가 높아질 수 있다. - 검증된 컴포넌트와 규칙은 일관성과 개발 효율을 높이지만, 모든 제품과 사용자에게 적합한 것은 아니다. - 표준을 그대로 적용하기보다 제품의 목적, 브랜드, 사용 맥락에 맞는지 비판적으로 판단해야 한다. - 디자인 시스템이 창의적 문제 해결을 대체하는 처방전처럼 사용될 위험이 있다. ## 디자인과 개발 도구의 통합 - 디자인 도구와 개발 도구가 계속 수렴하면서, 하나의 중앙화된 환경에서 디자인 시스템을 만들고 다양한 기술·플랫폼에 구현하는 흐름이 강화될 것으로 보인다. - CSS Grid와 사용자 정의 변수는 레이아웃과 스타일을 더 유연하고 효율적으로 구현하게 한다. - Vue와 React 같은 프레임워크는 디자인 결과물을 실제 제품으로 연결하는 과정을 단순화한다. - 구현 효율이 높아진 만큼 절약된 시간을 더 책임감 있고 포용적인 경험을 설계하는 데 사용해야 한다. ## 접근성과 효율성 사이의 긴장 - 업계는 생산성과 구현 속도를 높이는 기술에는 빠르게 반응하지만, 접근성과 포용적 디자인처럼 많은 조사와 세심한 작업이 필요한 분야에는 상대적으로 소극적이다. - 따라서 접근성이 중요한 트렌드로 인정받더라도 실제 프로젝트 우선순위에서 밀릴 수 있다. - 진정한 발전은 새로운 도구를 도입하는 데 그치지 않고, 효율성을 사용자 모두의 경험 개선으로 연결하는 데 달려 있다. ## 실용적인 적용 방향 디자인 팀은 접근성 검토를 초기 요구사항에 포함하고, 정기적인 디자인 리뷰와 공통 컴포넌트 검증 절차를 마련하는 것이 좋다. 또한 Material이나 Fluent 같은 표준을 그대로 복사하기보다 사용자와 제품 맥락에 맞게 조정하고, 개발 효율로 확보한 시간을 포용성·윤리성·사용성 개선에 투자해야 한다.

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

React디자인 시스템사용자 경험접근성+4

figma·2017년 4월 26일·3분 읽기큐레이션 요약

에어비앤비 존 골

에어비앤비의 디자인 테크놀로지스트 젬 골드는 디자인을 결과물이 아니라 시스템과 프로세스의 산물로 바라본다. 그가 고른 다섯 권의 책은 디자인 시스템, 인간과 컴퓨터의 협업, 집중력, 명상, 함수형 프로그래밍에 대한 관점을 형성했다. 공통적으로 작은 구성 요소를 조합하고, 인간의 창의성을 확장하는 도구와 환경을 중시한다. ## 디자인을 생성하는 시스템으로 보기 — 《Designing Programmes》 - 칼 게르스트너의 책은 레이아웃·로고·타이포그래피를 개별 결과물이 아니라 일정한 규칙과 과정이 만들어내는 산출물로 설명한다. - 디자이너가 매번 최종 결과를 직접 만드는 대신, 사람이 조정할 수 있는 디자인 파이프라인과 시스템을 설계한다는 관점을 제시한다. - UI 디자인 시스템이 등장하기 전의 책이지만, 오늘날의 디자인 시스템과 자동화된 제작 도구에도 그대로 연결된다. - 젬 골드는 이 관점을 에어비앤비의 디자인 시스템과 디자인 자동화 작업에 적용하고 있다. ## 반응을 늦추는 습관 — 《10% Happier》 - 명상은 즉각적인 감정이나 직관에 따라 반응하기보다, 문제를 관찰하고 더 나은 대응을 선택하게 해준다. - 이 책은 명상 기법 안내서라기보다, 방송 중 신경 쇠약을 겪은 저널리스트 댄 해리스의 회고록에 가깝다. - 저자는 명상에 관한 여러 주장에 회의적인 태도를 유지하며, 종교적·초월적 설명보다 실제 경험과 검증 가능성을 중시한다. - 젬 골드는 이런 현실적이고 비판적인 태도가 디자인 의사결정에도 도움이 된다고 본다. ## 인간의 지능을 확장하는 컴퓨터 — 《The Dream Machine》 - J. C. R. 리클라이더가 주창한 ‘인간-컴퓨터 공생’과 컴퓨터의 상호작용적 활용을 다룬다. - 컴퓨터를 펀치카드를 입력하고 결과를 오래 기다리는 기계가 아니라, 인간의 사고력을 증폭하고 함께 탐구하는 도구로 바라본다. - IBM 중심의 정적이고 관료적인 컴퓨팅 비전에 맞서, 사람들이 즐겁게 사용할 수 있는 인터랙티브 컴퓨팅을 추구한 연구자들의 역사를 소개한다. - 젬 골드는 기존 관습에 도전하고 인간의 능력을 확장하는 기술을 만들려는 태도를 자신의 작업에도 이어가고 있다. ## 창의성을 위한 집중력 — 《Deep Work》 - 소셜 미디어는 작업 중 주의를 끊고, 사고와 상상력을 계속 초기화해 깊은 아이디어를 형성하기 어렵게 만든다. - 젬 골드는 한 달 동안 소셜 미디어를 끊고, 창작 작업을 위한 시간을 미리 일정에 배치했다. - 초기에는 확인 충동을 참기 어렵지만, 달리기나 독서처럼 창의성을 회복시키는 활동으로 주의를 전환할 수 있다. - 집중력은 단순히 방해 요소를 제거하는 것이 아니라, 창의적인 활동으로 삶의 빈자리를 채우는 습관과 관련된다. ## 작은 단위의 조합과 확장 — 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》 - 함수형 프로그래밍은 문제를 가능한 한 작은 단위로 나눈 뒤, 이 요소들을 조합하고 재배열하는 방식이다. - 짧고 무료로 읽을 수 있어 프로그래밍 입문자에게도 비교적 접근하기 쉽다. - 젬 골드는 이 사고방식이 디자인에도 직접 적용된다고 본다. - 큰 레이아웃이나 마케팅 페이지부터 시작해 쪼개는 대신, 가장 작은 디자인 프리미티브에서 출발해 점진적으로 구성 요소를 쌓아 올린다. - 이는 디자인 시스템에서 재사용성과 일관성을 확보하는 데 특히 유용하다. ## 실무에 적용할 점 - 디자인을 개별 시안이 아니라 규칙·구성 요소·자동화 과정이 결합된 시스템으로 설계한다. - 작은 프리미티브부터 시작해 복잡한 화면과 제품으로 확장한다. - 소셜 미디어와 즉각적인 반응을 줄여 깊이 있는 작업 시간을 확보한다. - 기술을 단순한 자동화 수단이 아니라 인간의 사고와 창의성을 강화하는 협업 도구로 활용한다.

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

ReactAI디자인 시스템typography+2

figma·2017년 2월 14일·3분 읽기큐레이션 요약

Figma의 팀 라이

Figma의 Team Libraries는 여러 파일과 팀원이 동일한 컴포넌트를 공유하고 동기화하도록 해 디자인 시스템 구축을 돕는 기능이다. 기존처럼 파일마다 심볼을 복사해 수동으로 교체하는 방식의 불일치 문제를 해결하고, 컴포넌트를 게시·삽입·업데이트하는 흐름으로 단일 진실 공급원을 유지한다. 이를 통해 디자인 시스템을 더 빠르고 일관되게 확장할 수 있다. ## 기존 디자인 도구의 한계 - 전통적인 디자인 도구는 사진 편집, 일러스트 제작, 정적인 화면 구성에 초점을 맞췄다. - 실제 애플리케이션의 반응형 동작이나 플랫폼의 제약 조건을 충분히 표현하지 못했다. - 디자인 시스템을 하나의 마스터 파일에서 관리하더라도 컴포넌트를 다른 파일로 복사하면 서로 다른 버전이 된다. - 작은 변경도 여러 문서를 찾아 각 심볼과 오버라이드를 수동으로 수정해야 했다. - Facebook, Google, Airbnb 같은 기업은 이러한 한계를 보완하기 위해 자체 디자인 시스템 도구와 전담 인력을 구축했다. ## Figma가 제시한 기반 - Figma는 시각 디자인과 동적인 사용자 인터페이스 설계를 연결하는 것을 목표로 했다. - 벡터 편집, 시스템 동작에 대응하는 제약 조건, 재사용 가능한 동적 컴포넌트를 제공해 디자인 시스템의 기반을 마련했다. - Team Libraries를 통해 이 컴포넌트를 여러 파일과 팀원 사이에서 공유할 수 있게 했다. - 웹 기반 구조 덕분에 파일 간 동기화 지연이 거의 없고, 여러 기기와 플랫폼을 위한 레이아웃을 일관된 규칙으로 설계할 수 있다. ## 엔지니어링 원칙을 반영한 디자인 시스템 - React 같은 프레임워크처럼 애플리케이션을 명확히 정의된 작은 단위로 구성하는 방식을 디자인에도 적용했다. - 재사용 가능하고 유지보수하기 쉬운 구조는 제품 개발 주기 전체의 효율을 높인다. - 다만 프로그래밍 개념을 그대로 가져오기보다 디자이너가 쉽게 사용할 수 있도록 인터페이스와 작업 흐름을 단순화했다. ## 게시(Publish): 단일 진실 공급원 만들기 - 파일에서 컴포넌트를 선택하고 Inspector의 **Add to Library**를 눌러 라이브러리에 추가한다. - 여러 컴포넌트를 선택한 뒤 변경 사항을 검토하고 팀 라이브러리에 게시한다. - 라이브러리와 원본 파일을 분리해 디자인 시스템의 변경 권한을 통제할 수 있다. - 원본 파일에 편집 권한이 있는 사람만 소스 컴포넌트를 수정할 수 있다. - 원본 파일을 볼 수 있는 사람은 게시된 컴포넌트를 사용할 수 있지만 규칙 자체를 변경할 수는 없다. - 예를 들어 프로덕션 디자이너는 아이콘을, 브랜드 디자이너는 색상 문서를 관리하고 다른 팀원은 이를 재사용할 수 있다. ## 삽입(Insert): 여러 파일에서 컴포넌트 재사용 - 라이브러리에 게시된 컴포넌트는 원본 파일을 볼 권한이 있는 팀원에게 제공된다. - 각 파일의 툴바에서 컴포넌트 도구를 선택해 공유 컴포넌트를 삽입한다. - 컴포넌트 안에 다른 컴포넌트를 중첩할 수 있다. - 개별 요소로 모듈을 구성한 뒤, 이를 더 복잡한 화면과 사용자 흐름에서 재사용할 수 있다. - 깊게 중첩된 컴포넌트도 원본과 연결되므로 단일 진실 공급원을 예측 가능하게 유지할 수 있다. ## 업데이트(Update): 변경 사항의 동기화 - 브랜드 가이드나 UI 자산을 변경할 때 기존 컴포넌트를 수정하고 다시 게시한다. - 재게시 전 확인 단계를 거치며, 이전 버전과 무엇이 달라졌는지 시각적 diff로 확인할 수 있다. - 원본 파일에서 컴포넌트를 삭제한 뒤 게시하면 팀 라이브러리에서도 해당 컴포넌트가 사라진다. - 따라서 팀에는 현재 유효한 디자인 시스템 요소만 공유된다. - 공유 컴포넌트의 변경이 여러 탐색 작업에 영향을 줄 수 있으므로, 작업 손실을 막기 위한 추가 확인 절차를 둔다. ## 실용적인 결론 Team Libraries는 디자인 시스템을 복사본이 아니라 연결된 컴포넌트 구조로 관리하게 해준다. 팀에서는 원본 파일의 편집 권한을 제한하고, 색상·아이콘·버튼·복합 모듈을 라이브러리로 게시한 뒤 변경 사항을 검토하며 재게시하는 운영 방식을 마련하는 것이 좋다.

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

ReactFigma디자인 시스템사용자 인터페이스+3

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

피그마 컴포넌트

Figma의 컴포넌트는 소프트웨어 개발의 composition, inheritance, override 개념을 디자인에 적용해 복잡한 UI를 일관되고 효율적으로 설계하도록 돕는다. 원본 컴포넌트를 수정하면 모든 인스턴스에 변경 사항이 반영되지만, 각 인스턴스는 필요한 속성을 독립적으로 재정의할 수 있다. 이를 통해 반복 작업을 줄이면서도 디자인 시스템의 일관성과 창의적인 변형을 동시에 확보할 수 있다. ## 디자인에 컴포넌트를 적용하는 이유 - 복잡한 화면을 더 작은 재사용 단위로 나누어 이해하고 구성할 수 있다. - 주소록의 연락처 행처럼 반복되는 UI를 한 번만 설계한 뒤 여러 곳에서 재사용할 수 있다. - 동일한 컴포넌트를 사용하면 글자 크기, 간격, 아이콘, 그래픽 등의 시각적 일관성을 유지하기 쉽다. - 컴포넌트는 단순한 복사본이 아니라 동일한 원본을 참조하는 인스턴스이므로, 원본 변경 사항이 관련 디자인에 자동으로 반영된다. ## Figma가 지향한 컴포넌트 설계 - 초보자도 쉽게 배울 수 있어야 한다. - 고급 사용자에게 충분히 강력해야 한다. - 디자인 과정 전반에서 유연하게 활용할 수 있어야 한다. - 체계적으로 디자인하더라도 창의적인 작업을 방해하거나 불필요한 작업 절차를 늘리지 않아야 한다. - 디자인 시스템 구축이 속도와 일관성을 높이는 수단이 되어야 하며, 새로운 문제를 해결하는 데 제약이 되어서는 안 된다. ## 컴포넌트와 인스턴스의 동작 방식 - 선택한 프레임이나 객체에 “Create Component”를 적용하면 컴포넌트가 생성된다. - 컴포넌트를 복제하거나 Alt 키로 드래그하거나 복사·붙여넣기하면 일반 복사본이 아니라 인스턴스가 만들어진다. - 인스턴스는 캔버스에서 위치를 독립적으로 가질 수 있지만, 기본적으로 원본 컴포넌트의 구조와 속성을 공유한다. - 원본 컴포넌트의 변경 사항은 모든 인스턴스에 즉시 반영된다. - 인스턴스 내부의 일부 속성은 관리와 유지보수를 위해 제한될 수 있으며, 특히 내부 객체의 위치와 크기 같은 속성이 대표적이다. ## 스타일 및 속성 오버라이드 - 인스턴스에서 변경한 값은 원본을 대체하는 것이 아니라 해당 인스턴스에만 적용되는 오버라이드로 취급된다. - 예를 들어 특정 인스턴스의 채우기 색상을 진회색으로 바꾸거나, 다른 인스턴스의 선 색상과 두께를 빨간색·6px로 설정할 수 있다. - 원본 컴포넌트를 수정해도 인스턴스에서 직접 재정의한 속성은 유지된다. - 재정의하지 않은 속성은 원본 컴포넌트의 최신 상태를 계속 반영한다. - 인스턴스 내부의 하위 레이어와 그 속성도 오버라이드할 수 있어 다양한 변형을 만들 수 있다. - 변경 사항을 제거하려면 “Reset Instance”를 사용해 원본 컴포넌트의 상태로 되돌릴 수 있다. ## 중첩 컴포넌트로 복잡한 UI 구성 - 컴포넌트 안에 다른 컴포넌트의 인스턴스를 포함할 수 있다. - 여러 인스턴스를 조합해 더 복잡한 동작과 UI 구조를 만들 수 있다. - 기존 인스턴스를 포함한 객체를 다시 컴포넌트로 만들 수도 있다. - 작은 단위의 컴포넌트를 계층적으로 조합하면 대규모 디자인 시스템을 관리하기 쉬워진다. ## 제약 조건과의 결합 - 컴포넌트는 Figma의 다른 기능과 함께 사용할 때 더 큰 표현력을 갖는다. - 제약 조건을 적용하면 화면 크기나 객체 위치가 바뀔 때 내부 요소가 어떻게 반응할지 정의할 수 있다. - 따라서 단순히 같은 UI를 복제하는 것을 넘어, 다양한 크기와 상황에 대응하는 반응형 디자인을 구성할 수 있다. 실무에서는 반복되는 UI를 먼저 컴포넌트로 만들고, 인스턴스별 차이는 오버라이드로 최소한만 적용하는 방식이 적합하다. 공통 구조와 스타일은 원본에서 관리하고, 개별 화면의 예외적인 요구만 인스턴스에서 변경하면 유지보수성과 디자인 일관성을 함께 확보할 수 있다.

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

ReactFigma디자인 시스템Android+4