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

Config 202

Figma는 커뮤니티 중심의 컨퍼런스인 Config 2024를 더 많은 참여와 원활한 경험을 제공하는 행사로 발전시키겠다고 밝혔다. 2024년 6월 26~27일 샌프란시스코에서 열리며, 디자인·AI·개발·디자인 시스템 등을 주제로 75명 이상의 연사가 참여한다. 참가자 피드백을 반영해 세션 예약제, 개발자 콘텐츠 확대, 교류 시간 확보, 다국어 지원 등을 도입한다. ## 커뮤니티 중심의 컨퍼런스 - Config는 단순한 제품 발표회가 아니라 다음을 위한 행사로 소개된다. - 커뮤니티 구성원 간의 교류 - 실무 중심의 학습과 아이디어 공유 - 제품을 만드는 사람들의 작업과 전문성에 대한 축하 - 2020년 첫 오프라인 행사에서 약 1,000명의 Figma 사용자를 모은 이후, Figma와 커뮤니티의 성장에 맞춰 행사의 규모와 범위를 확장해 왔다. - 팬데믹 이후 첫 대규모 오프라인 Config에서 얻은 경험을 2024년 행사 운영에 반영한다. ## 세션 예약제로 좌석 보장 - 참가자는 원하는 브레이크아웃 세션을 사전에 예약할 수 있다. - 예약한 세션에 제시간에 도착하면 좌석을 보장받는다. - 매우 얼리버드 티켓 구매자는 다른 참가자보다 24시간 먼저 세션을 예약할 수 있다. - 인기 세션의 긴 대기 줄과 좌석 부족 문제를 줄이려는 개선이다. ## 개발자를 위한 프로그램 확대 - 제품 제작에 참여하는 모든 직군을 지원하기 위해 개발자 대상 콘텐츠를 늘린다. - 구체적인 세부 프로그램은 추후 공개될 예정이지만, 기존 디자인 중심 구성에서 개발 관련 트랙을 강화하는 방향이다. - 디자인 시스템, 개발, AI 등 여러 분야를 아우르는 발표가 예정되어 있다. ## 교류와 현장 경험 개선 - 참가자들이 네트워킹하거나 휴식할 수 있도록 일정에 더 많은 여유 시간을 배치한다. - 행사 공간을 확장해 다음과 같은 현장 문제를 개선한다. - 대기 줄 단축 - 이동 및 좌석 공간 확대 - 참가자 동선 개선 - 전반적인 행사 운영의 원활함 향상 - 강연을 연속해서 듣는 데 그치지 않고 커뮤니티와 직접 교류할 수 있는 경험을 강화한다. ## 글로벌 참가자를 위한 다국어 지원 - 온라인 참가자에게 영어, 프랑스어, 독일어, 일본어, 한국어, 스페인어 자막을 제공한다. - 오프라인 참가자를 위해 동시통역과 번역을 지원한다. - 향후 더 많은 언어를 행사에 추가해 글로벌 커뮤니티의 접근성을 높일 계획이다. ## 리더십 트랙 확대 - 전년도 긍정적인 반응을 바탕으로 임원 및 리더 대상 프로그램인 Leadership Collective를 확대한다. - 새로운 임원 브리핑 센터를 마련한다. - 리더를 위한 콘텐츠와 네트워킹 기회를 늘린다. - 등록 과정에서 초대 전용 트랙에 지원할 수 있다. ## 참가 및 발표자 모집 - 얼리버드 티켓은 수량이 제한되어 있으며, 자격 요건을 충족하는 참가자를 위한 장학금도 제공한다. - 참가자 의견과 발표자 제안을 이메일이나 소셜미디어로 받고 있다. - 발표 또는 세션 진행을 원하는 사람은 2023년 12월 31일까지 발표자 모집에 지원할 수 있었다. - 행사는 2024년 6월 26~27일 샌프란시스코에서 개최될 예정이었다. Config 2024는 규모만 키우는 대신 좌석 예약, 개발자 콘텐츠, 다국어 지원, 네트워킹 시간처럼 참가자의 실제 불편을 해결하는 방향으로 설계된 행사다. 비슷한 컨퍼런스를 기획한다면 참가자 피드백을 운영 방식에 직접 반영하고, 학습·교류·접근성을 균형 있게 강화하는 것이 핵심이다.

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

디자인 시스템FigmaAIsoftware-development+1

figma·2023년 10월 25일원문

디자인과 창의성의 미래 (새 탭에서 열림)

피그마와 어도비는 15개월에 걸친 규제 검토 끝에, 당국의 승인을 얻을 수 있는 현실적인 경로가 없다는 판단하에 인수 합병 계약을 공식적으로 종료하기로 합의했습니다. 이번 결정은 양사의 기술적 결합이 가져올 혁신적인 디자인 생태계에 대한 비전을 뒤로한 채 각자의 길을 걷게 됨을 의미합니다. 비록 합병은 무산되었으나, 피그마는 실시간 협업과 생성형 AI, 그리고 도구 간의 심리스한 연결성이 주도할 미래 디자인 워크플로우의 청사진을 제시하며 창의성의 미래를 향한 의지를 밝혔습니다. **합병 중단 배경과 규제 환경** * 2023년 12월 18일, 피그마와 어도비는 시장 독점 및 경쟁 저해를 우려하는 규제 당국의 높은 벽을 넘지 못하고 인수 포기를 선언함. * 양사는 장기간의 검토 과정 끝에 더 이상 승인 가능성이 없다는 점에 상호 동의하며 15개월간의 인수 절차를 마무리함. **멀티플레이어 협업 기술의 확장** * 피그마의 강점인 실시간 멀티플레이어 환경을 어도비의 전문 저작 도구(예: 3D 디자인)에 이식하여 협업 효율 극대화 추진. * 한 디자이너가 3D 모델을 구축하는 동안 다른 디자이너가 실시간으로 조명이나 텍스처를 조정하는 동시 작업 환경 구상. * 전문 툴 학습 시 숙련자가 초보자와 같은 파일 내에서 실시간 가이드를 제공하는 교육적 효과 기대. **심리스한 에셋 연동과 디자인 시스템 통합** * Adobe Substance 3D에서 제작한 에셋을 피그마 목업에 배치하고, 원본 수정 시 피그마 내 에셋도 자동으로 최신화되는 실시간 동기화 기술. * 피그마의 제품 디자인과 어도비 에셋 간의 디자인 시스템(컬러 팔레트, 폰트 등) 공유 및 Adobe Fonts의 피그마 내 직접 활용. * 완성된 피그마 프로토타입을 마케팅 영상에 직접 삽입하여, 제품 디자인 변경이 영상 소스에 즉각 반영되는 워크플로우 구축. **생성형 AI '파이어플라이'와의 기술적 융합** * 어도비의 생성형 AI 모델인 '파이어플라이(Firefly)'를 피그마 워크플로우에 통합하여 UI 컨셉에 맞는 배경을 즉석에서 생성. * 반응형 디자인 대응을 위해 이미지를 자연스럽게 확장하는 '제너레이티브 필(Generative Fill)' 기능의 피그마 내 구현. * 브레인스토밍 단계의 스티키 노트를 지능적으로 분석하여 순식간에 시각화된 스토리보드로 전환하는 자동화 기능 구상. 기업 간의 물리적 합병은 멈추었으나, 피그마가 제시한 '도구 간의 경계 없는 연결'과 '실시간 협업의 확장'이라는 방향성은 향후 디자인 도구 시장의 중요한 표준이 될 것입니다. 디자이너들은 개별 툴의 숙련도를 넘어, AI와 실시간 협업 기능을 활용해 아이디어에서 프로토타입까지의 도달 시간을 단축하는 효율적인 워크플로우 구축에 주목해야 합니다.

디자인 시스템Figma프로토타이핑생성형 AI+4

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

가치 있는 디자인 커리어를 위한

Dan Mall은 25년간 디자이너, 창업가, 교육자, 작가로 활동하며 얻은 경험을 바탕으로 지속 가능한 디자인 커리어의 원칙을 제시한다. 글의 중심 메시지는 모든 선택을 하나의 ‘베팅’으로 보고, 가치 있는 목표를 설정한 뒤 자신의 강점을 활용해 실행하라는 것이다. 또한 시작하기 전에 원하는 최종 결과를 분명히 해야 복잡한 커리어 결정을 효과적으로 이끌 수 있다고 강조한다. ## 다양한 역할을 통한 지속적인 성장 - Mall은 1998년 교회 웹사이트를 만들며 디자인을 시작한 뒤 에이전시, 스타트업, 교육, 저술 등 여러 영역을 경험했다. - 직접 에이전시를 운영하고 두 개의 스타트업을 공동 창업했으며, 견습 프로그램을 운영하고 수천 명의 학생을 가르쳤다. - 이러한 경험을 통해 디자인 역량은 최신 도구나 트렌드를 따라가는 것만이 아니라, 문제를 새롭게 해결하고 지속적으로 성장하는 과정에서 확장된다고 설명한다. - 디자인 시스템 교육 기관인 Design System University를 통해 대규모 조직이 디자인을 체계적으로 운영하도록 돕고 있다. ## 가치 있는 목표를 선택하기 - 새로운 일을 시작하기 전, 다음과 같은 질문을 던진다. - 이 일의 최종 목적은 무엇인가? - 결과적으로 지금보다 더 나은 상태에 도달할 수 있는가? - 목표는 흥미롭고, 중요하며, 동시에 도전적이어야 한다는 Michael Bungay Stanier의 기준을 소개한다. - Mall은 특히 ‘흥미로운가’를 중요하게 여긴다. 자신을 움직일 만큼 설레지 않는 일은 대체로 추진하지 않는다. - 가족과 더 많은 시간을 보내기 위해 기존의 꿈의 직장을 떠나 자신의 에이전시를 만든 사례를 들며, 개인의 가치와 목표가 커리어 선택의 출발점이 될 수 있다고 설명한다. ## 자신의 불공정한 강점에 베팅하기 - 모든 의사결정은 다른 선택지를 포기한다는 점에서 일종의 베팅이다. - 직업 선택, 이직과 이주, 계약과 영업, 주택 구매 같은 결정뿐 아니라 일상적인 선택도 기회비용을 수반한다. - 성공 가능성을 높이려면 누구나 가진 일반적인 조건이 아니라 자신만의 ‘불공정한 강점’을 활용해야 한다. - 전문 지식과 경험 - 업계 평판과 네트워크 - 자금과 자원 - 특정 분야에 대한 독특한 통찰 - 유리한 위치나 교육 배경 - Mall은 이러한 요소를 MILES 프레임워크로 정리한다. - **Money**: 자금 - **Intelligence & Insight**: 지능과 통찰 - **Location & Luck**: 위치와 운 - **Education & Expertise**: 교육과 전문성 - **Status**: 평판과 지위 - 자신의 에이전시를 시작할 때 이미 보유한 에이전시 경험, 좋은 평판, 안정적인 고객 흐름이 성공 확률을 높이는 강점으로 작용했다. - Design System University 역시 10년간 디자인 시스템과 대규모 디자인을 다뤄온 경험, 해당 분야의 문제와 패턴에 대한 깊은 이해가 기반이 되었다. - 강점은 성공을 보장하지 않지만, 같은 목표를 향한 베팅의 확률을 높여준다. ## 최종 결과를 먼저 정하고 시작하기 - Stephen Covey의 원칙인 “끝을 염두에 두고 시작하라”를 커리어와 프로젝트에 적용한다. - 시작 전에 명확하고 달성 가능한 최종 목표를 정하면 어떤 활동에 집중할지 판단하기 쉬워진다. - Mall은 컨퍼런스 발표를 시작할 때, 자신이 존경하던 웹 디자인 행사인 An Event Apart의 연사가 되는 것을 장기 목표로 삼았다. - 목표를 구체적으로 설정하면 막연한 희망이 아니라 필요한 역량, 평판, 작업물을 역산해 준비할 수 있다. - 따라서 프로젝트나 커리어 결정을 내릴 때 “무엇을 하고 싶은가”뿐 아니라 “어떤 결과에 도달하고 싶은가”를 먼저 정의하는 것이 중요하다. ## 실용적인 적용 새로운 커리어 기회를 검토할 때는 먼저 그 목표가 자신에게 흥미롭고 중요한지 확인하고, 현재 가진 전문성·네트워크·평판이 어떻게 성공 가능성을 높이는지 점검하는 것이 좋다. 이후 원하는 최종 상태를 구체적으로 정한 뒤, 그 결과에서 거꾸로 필요한 경험과 실행 단계를 설계하면 더 현실적이고 지속 가능한 선택을 할 수 있다.

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

디자인 시스템Figma사용자 경험web-design+2

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

코드 생성이 (진짜)

코드 생성(codegen)은 디자인-개발 과정을 완전히 자동화하기보다, 개발자가 더 빠르고 정확하게 작업하도록 돕는 확장 도구로 활용할 때 가장 효과적이다. 특히 AI 코드 생성 결과는 정확성과 유용성에 한계가 있으므로, 개발자를 대체하기보다 적절한 컴포넌트·속성·코드 패턴을 제안해 초기 작업을 앞당기는 방향이 현실적이다. Figma는 이를 “0에서 1”이 아닌 “0에서 0.5”로 빠르게 이동시키는 도구로 설명한다. ### 코드 생성의 범위와 현실 - 코드 생성은 정해진 규칙이나 명세를 바탕으로 코드를 자동 생성하는 과정이다. - 범위가 넓으며 다음과 같은 형태를 포함한다. - IDE의 자동 완성 기능 - 반복적인 코드 패턴을 위한 스니펫과 템플릿 - Bubble 같은 비주얼 프로그래밍·노코드 도구 - GitHub Copilot, Replit Ghostwriter 같은 AI 기반 코드 생성 도구 - Stack Overflow 2023 조사에서 개발자의 82%가 AI 도구를 사용해 코드를 작성한다고 답했다. - 반면 AI 도구의 정확성을 매우 신뢰한다고 답한 비율은 3%에 불과했다. - 따라서 코드가 생성된다는 사실보다, 실제 프로젝트의 프레임워크와 코드베이스에 맞고 개발자가 유용하게 사용할 수 있는지가 더 중요하다. ### 디자인을 코드로 그대로 변환하기 어려운 이유 - Figma는 Dev Mode를 처음 개발할 때 디자인을 코드로 자동 변환하는 것을 목표로 했다. - 초기 결과는 가능성을 보였지만, 다양한 개발자의 요구와 프레임워크를 모두 만족하는 코드를 만들기는 어려웠다. - 자동 생성된 코드가 문법적으로 맞더라도 팀의 컴포넌트 구조, 네이밍 규칙, 상태 관리 방식과 맞지 않으면 실무에서는 유용하지 않을 수 있다. - 이에 따라 Figma는 디자인을 코드로 직역하는 방식보다, 디자인과 개발 사이의 해석과 협업을 보조하는 방식으로 방향을 전환했다. ### 개발자를 대체하는 도구가 아닌 지능 증폭 도구 - 코드 생성은 개발자를 대신하는 자동화 시스템보다 개발자의 능력을 확장하는 도구로 보는 편이 적절하다. - 글은 이를 **지능 증폭(Intelligence Amplification, IA)**으로 설명한다. - 복잡한 문제를 이해하고 - 필요한 정보를 빠르게 찾으며 - 해결책을 도출하는 인간의 능력을 강화하는 접근이다. - AI가 기술이 주도하는 미래를 상징한다면, IA는 사람이 주도권을 유지한 채 기술의 도움을 받는 방식이다. - 개발자는 최종 구조와 구현 방식을 결정하고, codegen은 탐색·반복·초기 작성에 드는 시간을 줄인다. ### “0에서 0.5”까지 빠르게 이동하기 - 디자인 시스템과 컴포넌트 라이브러리를 사용하는 제품에서는 codegen이 핸드오프 과정의 추측을 줄일 수 있다. - 디자인 요소에 대응하는 컴포넌트 이름이나 속성 값을 제안해 개발자가 어떤 도구를 사용할지 빠르게 판단하도록 돕는다. - 디자인 시스템을 공구 상자에 비유하면, codegen은 상황에 맞는 공구와 사용법을 추천하는 역할을 한다. - 완성된 코드를 제공하기보다는 빈 화면에서 작업을 시작할 수 있는 출발점을 만들어 준다. - 즉, “0에서 1”까지 완성하는 자동화보다 “0에서 0.5”까지 빠르게 진입하게 하는 보조 기능에 더 큰 가치가 있다. ### 팀과 코드베이스에 맞춘 구체적인 활용 - codegen의 효과는 일반적인 자동화 도구보다 특정 팀·회사·워크플로에 맞게 적용할 때 커진다. - 디자인 시스템과 컴포넌트 라이브러리가 이미 Figma에 있다면 별도의 완전 자동화 디자인-코드 변환 앱이 반드시 필요하지 않다. - 대신 다음 기능을 활용하는 편이 실용적이다. - 디자인 토큰과 변수 참조 - 컴포넌트 및 속성 문서 확인 - 팀 전용 codegen 플러그인 구축 - 프로젝트 규칙에 맞춘 사용자 정의 코드 스니펫 생성 - 이러한 정보와 힌트는 개발자가 디자인을 빠르게 해석하고 직접 코드를 작성하도록 돕는다. ### 실용적인 결론 codegen은 생성된 코드를 그대로 채택하는 자동화 수단이 아니라, 팀의 디자인 시스템과 개발 규칙을 이해한 상태에서 적절한 컴포넌트와 구현 방향을 제안하는 보조 수단으로 사용하는 것이 좋다. 특히 토큰, 문서, 컴포넌트 메타데이터, 사용자 정의 스니펫을 코드베이스와 연결하면 개발자의 판단을 유지하면서 반복 작업과 초기 탐색 시간을 크게 줄일 수 있다.

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

디자인 시스템Figmadesign-to-codecomponent-library+4

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

스포티파이의 디자인

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의 사례는 디자인 시스템을 플랫폼별 컴포넌트 모음으로 관리하기보다, 공통 기반·재사용 계층·플랫폼별 특화를 연결하는 구조로 설계해야 한다는 점을 보여준다. 실무에서는 플랫폼 팀을 초기 설계 단계부터 참여시키고, 공통 토큰과 컴포넌트의 범위를 명확히 정하는 방식이 효과적이다.

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

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

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

디자인 시스템의 미래

디자인 시스템의 미래는 단순히 색상·간격 같은 값을 표준화하는 데서 나아가, 그 값의 의미와 사용 목적을 중심으로 설계하는 시맨틱 방식에 있다. 디자인 토큰과 Figma 변수는 디자인 결정을 여러 플랫폼과 코드에 일관되게 전달하고, 테마 변경과 동적 프로토타이핑까지 가능하게 한다. 따라서 변수는 디자인 시스템을 기록하는 도구를 넘어 디자인과 개발을 연결하는 핵심 기반으로 발전하고 있다. ## 디자인 시스템의 복잡성과 토큰의 필요성 - 시간이 지나면 제품 안에 동일한 목적의 색상·간격·타이포그래피 값이 중복되면서 디자인 시스템이 복잡해진다. - Google Maps는 제품에 700개가 넘는 색상이 사용되고 있음을 발견한 뒤, 이를 25개의 색조로 정리했다. - 축소된 색상 체계가 다시 무질서하게 늘어나지 않도록 디자인 토큰을 사용해 색상 팔레트를 문서화하고 배포했다. - 토큰은 색상, 숫자, 문자열, 테두리 반경, 크기, 글꼴 등 반복되는 디자인 결정을 표현하는 데이터다. - 특정 컴포넌트나 구현 방식에서 디자인 속성을 분리하므로 플랫폼에 종속되지 않고 여러 제품과 환경에서 재사용할 수 있다. - 예를 들어 모든 “나무” 요소의 색상을 변경해야 한다면, 개별 요소를 수정하지 않고 하나의 토큰만 바꿔 전체에 반영할 수 있다. ## 디자인 토큰에서 시맨틱 시스템으로 - 토큰은 디자인 결정을 코드나 특정 컴포넌트가 아닌 독립적인 값으로 관리해 일관성과 유지보수성을 높인다. - Salesforce는 2014년부터 여러 플랫폼과 소프트웨어에 동일한 디자인 원칙을 적용하기 위해 토큰을 활용한 사례로 자주 언급된다. - 토큰의 진정한 가치는 값 자체보다 값이 제품 안에서 어떤 역할을 하는지 표현하는 데 있다. - 예를 들어 단순히 `blue-500`처럼 색상 자체를 지정하기보다, `button-background-primary`처럼 사용 목적과 의미를 나타내면 테마나 브랜드가 바뀌어도 구조를 유지하기 쉽다. - 이런 시맨틱 접근은 디자인 시스템을 시각적 스타일 모음이 아니라 제품의 의도와 규칙을 표현하는 체계로 확장한다. ## Figma 변수의 역할 - Figma 변수는 디자인 속성과 프로토타이핑 동작에 재사용 가능한 값을 저장한다. - 색상, 숫자, 문자열 등 다양한 값을 한 곳에서 관리하고 여러 디자인 요소에 적용할 수 있다. - 기존 토큰의 사용 사례를 충족하면서도 값이 실제로 “변할 수 있다”는 점을 강조한다. - 변수는 디자인 시스템의 값을 중앙에서 관리해 반복 작업을 줄이고, 변경 사항을 여러 화면에 일관되게 적용한다. - 단순한 디자인 결정의 기록을 넘어 다음과 같은 기능을 지원한다. - 라이트·다크 모드와 같은 디자인 테마 전환 - 조건에 따른 프로토타이핑 로직 - 여러 플랫폼에 공유할 수 있는 재사용 가능한 값 관리 - 디자인과 코드 사이의 연결 강화 ## 디자인과 개발을 연결하는 기반 - Config 2023에서 Figma는 Dev Mode, 변수, 고급 프로토타이핑 기능 등을 공개하며 디자인에서 구현으로 이어지는 흐름을 강화했다. - 변수는 디자인 시스템이 디자인 파일 안에만 머무르지 않고 코드와 동일한 개념과 값을 공유하도록 돕는다. - 이후 공개된 Code Connect는 개발자가 실제 코드 컴포넌트와 디자인 컴포넌트를 연결하는 방향을 더욱 강화한다. - typography 및 gradient 변수, Library Analytics API 같은 기능은 디자인 시스템의 적용 범위를 넓히고 조직 전체의 사용 현황과 도입을 관리할 수 있게 한다. - 결과적으로 디자인 시스템은 디자이너만 관리하는 라이브러리가 아니라 디자인·개발·제품팀이 함께 사용하는 공통 언어가 된다. ## 실용적인 적용 방향 - 색상이나 간격 값을 무작정 늘리기보다 먼저 제품에서 각 값이 수행하는 역할을 정의한다. - 원시 값과 의미 기반 값을 구분해 관리한다. 예를 들어 `blue-500`과 `text-color-error`를 별도 계층으로 둘 수 있다. - 테마 변경 가능성을 고려해 컴포넌트에 구체적인 색상값을 직접 넣지 않는다. - 디자인 토큰을 코드와 공유할 수 있는 형식으로 관리하고, Figma 변수와 실제 구현 값의 동기화 방식을 마련한다. - 디자인 시스템의 성공 여부를 라이브러리의 크기보다 재사용성, 일관성, 코드와의 연결성, 조직 내 adoption으로 평가하는 것이 바람직하다.

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

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

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

프롭스의 공유 언어 |

컴포넌트와 props는 디자인과 코드 양쪽에서 사용되지만, 환경에 따라 의미와 목적이 달라질 수 있다. 같은 이름의 컴포넌트라도 디자이너는 시각적 일관성과 표현 방식을, 개발자는 렌더링·상호작용·데이터 처리를 중심으로 생각한다. 따라서 디자인과 개발의 협업을 개선하려면 용어를 단순히 통일하기보다 각 환경의 맥락과 차이를 함께 이해해야 한다. ## 디자인과 개발에서 달라지는 언어 - 컴포넌트는 재사용 가능한 요소이며, props는 컴포넌트가 표현될 수 있는 방식과 규칙을 정의한다. - 컴포넌트의 인스턴스는 원본 컴포넌트를 실제로 사용한 결과이며, props 값을 변경해 다양한 상태와 모양을 표현한다. - 디자인과 개발 모두 `boolean` 같은 개념을 사용하지만, 디자이너는 이를 주로 시각적 차이를 표현하는 수단으로 접한다. - Figma의 대표적인 prop 유형은 다음과 같다. - Variant: 컴포넌트의 변형 - Boolean: 표시 여부나 켜짐/꺼짐 상태 - Instance swap: 내부 인스턴스 교체 - Text: 텍스트 값 변경 - 개발자는 이러한 시각적 props 외에도 이벤트 핸들러, 데이터, 동작 제어 등 비시각적 속성을 함께 다룬다. - 같은 단어를 사용하더라도 서로 다른 의미를 떠올릴 수 있으므로, 용어의 일치만으로 공통 이해가 형성되지는 않는다. ## 버튼 사례에서 드러나는 차이 - Figma의 버튼은 시각적 일관성과 디자인 파일 안에서의 구현 방식이 중요하다. - 코드의 버튼은 시각적 표현뿐 아니라 렌더링 방식, 사용자 상호작용, 접근성, 이벤트 처리까지 포함한다. - 따라서 Figma의 `Button`과 코드베이스의 `Button`은 이름과 기본 개념은 같아도 실제 책임과 props 구성이 다를 수 있다. - 글의 사례에서는 Figma에 `Button`과 `IconButton` 두 컴포넌트가 있었지만, 코드베이스에는 버튼 관련 컴포넌트가 다섯 개 존재했다. - Figma의 두 컴포넌트는 코드베이스처럼 공통 primitive를 상속하지 않았다. - Figma에서는 코드와 같은 방식의 컴포넌트 상속이 존재하지 않는다. - 디자인 관점에서 모델링하기에 두 컴포넌트를 분리하는 편이 더 적절했다. - 크기와 색상 같은 props가 중복되었지만, 동기화가 어렵지 않고 일관성을 해치지 않아 허용할 수 있었다. - 반면 코드베이스의 버튼 컴포넌트는 더 많은 props와 기능을 제공했으며, Figma 컴포넌트에는 그중 일부만 반영되어 있었다. - 이는 디자이너와 개발자가 컴포넌트를 최적화하는 기준이 다르다는 점을 보여준다. - 디자이너: 시각적 표현, 디자인 시스템 내 일관성, 파일에서의 사용성 - 개발자: 구현 편의성, 재사용 구조, 상호작용, 데이터와 접근성 ## 공통 어휘를 만들 때 필요한 관점 - 디자인과 코드의 컴포넌트를 무조건 동일한 구조로 맞추기보다, 각각의 환경에서 컴포넌트가 수행하는 역할을 먼저 구분해야 한다. - 같은 이름을 사용하는 컴포넌트라도 실제 목적과 지원하는 props가 다르면 그 차이를 명시적으로 설명해야 한다. - 협업에서는 “이 prop이 존재하는가”보다 다음 질문이 중요하다. - 어떤 시각적 또는 기능적 문제를 해결하는가? - 디자인에서의 변화가 코드에서는 어떤 prop이나 상태에 대응하는가? - 코드의 비시각적 기능을 디자인 시스템에서는 어떻게 표현하거나 문서화할 것인가? - 서로 다른 용어를 사용하는 사실 자체는 문제가 아니다. 문제는 동일한 의미라고 가정한 채 대화하는 것이다. 디자인 시스템을 운영할 때는 Figma와 코드 컴포넌트의 이름을 가능한 한 연결하되, props 목록과 의미가 완전히 같다고 가정하지 않는 것이 좋다. 각 prop의 목적과 대응 관계를 문서화하고, 시각적 속성과 동작·데이터 속성을 구분하면 디자이너와 개발자 사이의 오해를 줄일 수 있다.

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

디자인 시스템FigmaReactTypeScript+3

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년 6월 20일원문

Figma의 새로운 개발자 모드를 (새 탭에서 열림)

피그마가 디자이너와 개발자 간의 간극을 좁히고 제품 개발 효율성을 극대화하기 위해 개발자 전용 공간인 'Dev Mode'를 출시했습니다. 브라우저 인스펙터와 유사한 인터페이스를 통해 개발자가 디자인 사양을 직관적으로 확인하고 코드로 변환할 수 있도록 지원하는 것이 핵심입니다. 이를 통해 개발팀은 디자인 도구 내에서 고유한 워크플로우를 유지하며 더 빠르고 정확하게 결과물을 구현할 수 있게 되었습니다. ### 개발자 중심의 작업 환경, Dev Mode * 디자인 파일을 브라우저의 '개발자 도구(Inspector)'와 유사한 방식으로 탐색할 수 있는 전용 워크스페이스를 제공합니다. * 디자인 요소(레이어, 그룹 등)를 개발 개념(코드, 아이콘, 토큰)과 밀접하게 연결하여 필요한 정보를 즉각적으로 추출할 수 있습니다. * 디자인 시스템의 맥락을 유지하면서 치수, 스펙, 에셋 등을 손쉽게 확인하고 내보낼 수 있는 환경을 구축했습니다. ### 코드 구현 속도를 높이는 최적화 기능 * 언어별로 맞춤 설정이 가능한 코드 스니펫 기능을 제공하며, 단순히 코드를 나열하는 것이 아니라 개발의 시작점으로 활용할 수 있게 설계되었습니다. * CSS 박스 모델, 트리 뷰(Tree View) 형태의 현대적 구문, 코드베이스에 맞춘 단위 토글 기능을 통해 코드 가독성을 높였습니다. * 디자인 시스템의 변수(Variables)를 디자인 토큰으로 활용하여 코드와 디자인 간의 일관성을 강화합니다. ### 워크플로우 통합과 강력한 플러그인 생태계 * GitHub, Jira, Linear와 같은 프로젝트 관리 도구를 연동하여 피그마 내에서 이슈와 풀 리퀘스트(PR) 상태를 바로 확인할 수 있습니다. * Storybook 플러그인을 통해 코드베이스에 실제 구현된 컴포넌트의 상태를 디자인 파일 안에서 참조할 수 있습니다. * AWS Amplify Studio, Google Relay, Anima 등의 코드 생성 플러그인을 활용하거나 팀 고유의 워크플로우에 맞는 커스텀 플러그인을 구축할 수 있습니다. ### IDE에서 직접 확인하는 VS Code 확장 프로그램 * 개발자가 코드 에디터를 벗어나지 않고도 디자인을 검토하고, 변경 사항 및 댓글 알림을 확인할 수 있는 VS Code용 확장 프로그램을 지원합니다. * 디자인 사양에 기반한 코드 자동 완성(Autocomplete) 기능을 제공하여 코딩 속도를 획기적으로 향상시킵니다. * 디자인 파일과 코드 편집기 사이를 오가는 컨텍스트 스위칭 비용을 줄여 개발 집중도를 높입니다. 단순히 디자인을 보는 것을 넘어, 실제 구현 단계에서의 생산성을 높이고 싶다면 Dev Mode와 VS Code 확장 프로그램을 워크플로우에 적극 도입해 보시기 바랍니다. 디자인 시스템의 토큰 관리와 에디터 내 자동 완성 기능을 결합하면 디자인과 코드 사이의 정렬(Alignment)을 훨씬 수월하게 유지할 수 있습니다.

디자인 시스템FigmagithubCSS+4

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

AI: 디자인의 새로운

AI는 디자인 도구의 한 기능이 아니라 제품 개발 전반을 바꾸는 플랫폼이라는 것이 글의 핵심 주장이다. Figma는 Diagram을 인수하고 AI 역량을 강화해 아이디어 발굴부터 디자인, 개발 코드 생성까지 팀의 작업을 가속하려 한다. AI가 디자이너를 대체하기보다는 반복 작업을 줄이고 문제 해결과 창의적 판단에 더 집중하게 만들 것이라는 전망을 제시한다. ## Figma의 Diagram 인수와 AI 전략 - Figma는 GPT-3 기반 디자인 생성 플러그인 **Designer**를 만든 Jordan Singer의 팀 Diagram을 인수했다. - Diagram의 Jordan Singer, Siddarth, Andrew, Marco, Vincent가 Figma에 합류했다. - Figma는 이미 머신러닝 전담 팀을 운영하고 AI 플랫폼 개발에 투자해 왔다. - Figma의 오픈 API를 활용해 커뮤니티가 만든 AI 플러그인도 약 100개에 이른다. - AI를 단일 기능이 아니라 제품 개발 프로세스 전체를 지원하는 핵심 플랫폼으로 보고 있다. ## 제품 개발 전 과정의 AI 활용 - **발견 단계** - 간단한 프롬프트로 초기 아이디어를 생성한다. - 여러 아이디어를 요약하고 종합한다. - **디자인 단계** - 기존 디자인과 디자인 시스템을 분석한다. - 적절한 컴포넌트나 디자인 방향을 추천한다. - 더 빠르게 첫 시안을 만들 수 있도록 지원한다. - **개발 단계** - 디자인의 맥락을 개발자에게 더 빠르게 전달한다. - 제품 요구사항과 디자인을 바탕으로 더 나은 프로덕션 코드를 생성한다. - 결과적으로 AI는 반복 작업을 줄이고 팀이 더 빠르게 문제 해결과 제품 완성도 향상에 집중하도록 돕는다. ## 기술 발전과 디자인의 변화 - 인쇄기, 스마트폰, 협업 도구, 하이브리드 근무처럼 디자인은 기술 변화에 따라 계속 진화해 왔다. - 새로운 기술이 등장해도 사려 깊은 디자인의 필요성이 사라진 것은 아니었다. - AI 역시 디자인을 없애기보다 디자이너의 작업 방식과 역할을 변화시킬 것으로 본다. ## 픽셀에서 패턴으로: 더 높은 수준의 설계 - 디자인 시스템은 모서리 반경이나 버튼 같은 반복적인 세부 작업을 줄이고, 디자이너가 콘셉트와 방향성에 집중하게 했다. - 원자적 요소인 픽셀이 컴포넌트와 같은 더 큰 구조로 결합되면서 작업 속도와 일관성이 향상됐다. - AI는 디자인 시스템보다 더 높은 수준의 구조와 패턴을 제안할 수 있다. - 예를 들어 로그인 화면의 이메일 입력창과 비밀번호 입력창을 만드는 데 그치지 않고, 이메일·전화번호·Touch ID를 대체할 새로운 로그인 방식을 제안할 수 있다. - 프로젝트의 감정적 분위기나 주제에 맞는 색상 팔레트를 자동으로 추천하는 것도 가능하다. - 디자인은 개별 픽셀을 조정하는 작업에서 벗어나 더 직관적이고 인간적인 경험을 설계하는 방향으로 이동한다. ## 새로운 디지털 경험의 등장 - ChatGPT와 같은 AI는 웹사이트와 앱을 탐색하는 기존 방식에서 벗어나 질문하고 답을 받는 인터페이스를 강화한다. - AI는 사용자의 의도와 실제 행동 사이의 간극을 줄일 수 있다. - 예를 들어 사용자가 차량 호출 앱에서 위치와 옵션을 여러 단계로 입력하는 대신, “JFK 공항으로 데려다줘”라고 말하면 AI가 필요한 절차를 처리할 수 있다. - 제품 설계자는 기능과 화면 수를 늘리는 대신, 사용자의 목적을 더 적은 클릭과 판단으로 달성하게 할 방법을 고민해야 한다. ## 디자이너와 제품 역할의 변화 - 글은 AI 시대에 제품 역할과 협업 방식도 변화할 것이라고 예고한다. - 반복적인 제작 업무가 자동화되면 디자이너는 결과물을 직접 만드는 일뿐 아니라 AI가 제안한 결과를 선택하고 다듬는 큐레이터 역할을 더 많이 맡게 될 가능성이 있다. - 디자인의 핵심 가치는 여전히 문제를 정의하고, 적절한 방향을 판단하며, 사람에게 의미 있는 경험을 만드는 데 있다. AI를 도입할 때는 단순히 디자인 산출물을 자동 생성하는 데 그치지 말고, 아이디어 정리·패턴 탐색·프로토타이핑·개발 전달 등 전체 흐름에서 반복 작업을 줄이는 방향을 고려하는 것이 실용적이다. 최종 품질과 사용자 경험을 결정하는 문제 정의와 판단은 여전히 사람의 중요한 역할로 남는다.

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

디자인 시스템AI머신러닝생성형 AI+4

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

Shortcut 편집장의 편지를 소개

Figma는 새로운 블로그 **Shortcut**을 통해 제품 기능뿐 아니라, 아이디어가 만들어지고 발전하는 과정에 참여한 사람들의 이야기를 전하려 한다. 이 블로그는 Figma의 핵심 철학인 멀티플레이어 협업과 사용자·팀·커뮤니티의 상호작용을 콘텐츠 경험에도 적용해, 정적인 정보 전달을 넘어 발견과 영감을 유도하는 공간을 목표로 한다. ## Shortcut의 탄생 배경 - 모든 제품에는 이야기가 있으며, Shortcut은 새로운 아이디어가 현실화되는 과정에서 사람들이 겪는 우선순위 변화, 계획 수정, 시행착오를 다룬다. - Figma는 처음부터 웹 기반이자 멀티플레이어 제품으로 설계되었다. - 2015년에는 실시간 공동 편집이 오히려 디자이너들의 반감을 살 수 있다는 우려가 있었지만, 사용자들의 행동과 요구가 Figma의 발전 방향을 결정했다. - 따라서 Figma는 제품 자체뿐 아니라 사용자와 팀이 협업하고 문제를 해결하는 과정도 브랜드의 핵심 이야기로 본다. ## 게임과 ‘하우스 룰’에서 얻은 영감 - 글은 놀이가 사람을 이해하고 협력하는 지름길이 될 수 있다는 관점에서 Shortcut이라는 이름의 의미를 설명한다. - 사람들은 같은 게임도 서로 다른 방식으로 즐기며, 경험을 개선하기 위해 규칙을 수정하거나 새로운 ‘하우스 룰’을 만든다. - Figma 역시 사용자의 취향, 행동 방식, 필요에 따라 제품이 계속 변하고 확장된다는 점에서 이런 놀이의 특성과 닮아 있다. - 한 사람의 아이디어가 다른 사람의 수정과 참여를 거쳐 발전하는 과정이 Figma의 멀티플레이어 철학과 연결된다. ## 정적인 블로그에서 몰입형 경험으로 - 기존 블로그가 정적이고 일방향적인 콘텐츠 경험에 가까웠다면, 새 블로그는 더 생생하고 몰입감 있게 redesigned되었다. - Figma가 정적인 디자인 파일을 협업 가능한 캔버스로 바꾼 것처럼, 블로그도 독자가 탐색하고 발견할 수 있는 공간으로 바꾸려 했다. - 콘텐츠에는 글뿐 아니라 일러스트레이션, 모션 스터디, 영상 등 다양한 시각적 요소가 활용된다. - 이를 통해 독자가 단순히 글을 읽는 데 그치지 않고, Figma가 추구하는 창의성과 가능성을 직접 느끼도록 한다. ## 주제별 탐색과 새로운 콘텐츠 구성 - 독자는 디자인 시스템, 엔지니어링 등 주제별 카테고리로 글을 분류해 볼 수 있다. - 특정 주제를 묶은 큐레이션 컬렉션도 제공한다. - 주요 콘텐츠 유형은 다음과 같다. - 디자인 시스템의 미래를 다루는 기획 시리즈 - 제품 디자인과 개발의 역할 변화를 논하는 오피니언 - Figma의 기능과 제작 과정을 설명하는 비하인드 스토리 - 게임 산업에서 영감을 얻은 백엔드 엔지니어링 등 기술 심층 분석 - Figma를 활용한 음악가와 창작자의 실제 사례 - 외부 일러스트레이터와 작가들의 참여를 통해 다양한 관점과 표현 방식을 담았다. ## 입력이 출력으로 이어지는 커뮤니티 - Shortcut은 “하나의 아이디어가 또 다른 아이디어를 낳는” 양방향 영감의 구조를 지향한다. - 독자가 콘텐츠를 통해 새로운 시도를 하도록 자극하는 동시에, Figma 내부의 작가·디자이너·엔지니어·제품팀도 더 적극적으로 아이디어를 공유하기를 기대한다. - Figma의 가능성을 기능 설명만으로 전달하지 않고, 실제 사람과 팀의 작업 방식 및 창작 과정을 통해 보여주려 한다. - 궁극적으로 Shortcut은 읽는 공간을 넘어, 발견하고 영감을 얻고 함께 만들어가는 커뮤니티 경험을 목표로 한다. 실용적으로는 제품 사용법만 찾기보다 Shortcut의 사례·기술 글·큐레이션을 함께 살펴보면, Figma를 도구가 아닌 협업과 아이디어 발전을 위한 작업 방식으로 이해하는 데 도움이 된다.

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

디자인 시스템Figma프로덕트 디자인multiplayer-collaboration+2

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·2023년 5월 8일·3분 읽기큐레이션 요약

디자인 시스템의 미래는 접근

디자인 시스템은 접근성을 제품 전반에 일관되게 적용할 수 있는 가장 강력한 기반이다. 공통 컴포넌트와 가이드에 접근성 기준을 내장하면 색상, 구조, 상호작용 등의 품질을 규모 있게 관리하고 변경 사항도 전체 제품에 전파할 수 있다. 앞으로는 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는 반복적인 탐지·생성 작업에 활용하되 최종 판단은 전문가와 실제 사용자 검증을 거친다. - 접근성을 디자인 시스템의 부가 기능이 아니라 모든 컴포넌트의 필수 품질 기준으로 관리해야 한다.

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

디자인 시스템AI접근성wcag+2

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

디자인 시스템의 미래는

플러그인, 위젯, AI 기반 도구의 발전으로 디자인 시스템은 단순한 컴포넌트 모음에서 반복 작업을 자동화하고 디자인 의사결정을 보조하는 실행 환경으로 진화하고 있다. 이러한 자동화는 디자이너와 개발자의 역할을 없애기보다, 생산성을 높이고 더 높은 수준의 문제 정의·판단·창의적 작업에 집중하게 만들 가능성이 크다. 다만 자동 생성 결과를 검토하고 맥락에 맞게 조정하는 인간의 역할은 여전히 중요하다. ## 플러그인과 위젯의 등장 - 플러그인은 기존 소프트웨어의 기능을 확장하는 추가 도구이며, 디자인 소프트웨어와 함께 발전해 왔다. - 초기 플러그인은 텍스트 편집기와 출판 프로그램에서 효과, 브러시, 스타일 등을 추가하는 방식으로 사용됐다. - 오늘날에는 커뮤니티와 앱 마켓플레이스를 통해 사용자가 직접 만든 도구를 공유하고, 팀의 작업 방식에 맞게 Figma를 확장한다. - 디자인 시스템 관련 플러그인은 크게 두 유형으로 나뉜다. - 기존 작업 흐름을 자동화하는 도구 - 분석, 테스트, 접근성 개선 등 새로운 기능을 추가하는 도구 ## 반복 작업을 자동화하는 플러그인 - 여러 화면에 동일한 변경 사항을 적용하거나, 레이어와 컴포넌트를 정리하는 반복 업무를 자동화한다. - 디자인 토큰, 컴포넌트, 스타일을 일관되게 적용해 수작업에서 발생하는 누락과 실수를 줄인다. - 콘텐츠 삽입, 레이아웃 정리, 이름 변경, 문서화와 같은 작업도 자동화 대상이 될 수 있다. - 디자이너는 단순한 실행 업무보다 사용자 경험과 제품 문제를 정의하는 일에 더 많은 시간을 쓸 수 있다. ## 기능을 확장하는 플러그인 - 플러그인은 디자인 시스템의 사용 현황과 품질을 점검하는 기능을 제공한다. - 어떤 컴포넌트가 얼마나 사용되는지, 디자인 시스템이 실제 파일에서 제대로 활용되는지 분석할 수 있다. - 접근성 검사, 디자인 테스트, 개발 handoff, 코드 생성 등 기존 디자인 도구가 직접 제공하지 않던 기능도 보완한다. - 결과적으로 디자인 시스템은 정적인 라이브러리가 아니라 측정·검증·개선이 가능한 운영 체계가 된다. ## 정보를 시각화하고 정리하는 위젯 - 위젯은 캔버스 안에서 실행되는 상호작용형 도구로, 디자인 파일에 정보와 기능을 직접 배치할 수 있다. - 팀의 작업 현황, 의사결정, 일정, 피드백 등을 시각적으로 공유하는 데 활용된다. - 디자인 시스템의 규칙이나 컴포넌트 정보를 작업 공간 가까이에서 확인하게 해 협업과 커뮤니케이션을 돕는다. - 디자인 파일이 단순히 결과물을 보여주는 공간을 넘어, 팀이 함께 사고하고 정리하는 협업 공간으로 확장된다. ## AI가 강화하는 디자인 도구 - 2017년부터 저해상도 와이어프레임을 바탕으로 디자인 시스템과 코드를 자동 생성하려는 실험이 진행됐다. - 당시에는 가능성을 보여주는 프로토타입에 가까웠지만, 생성형 AI 기술의 발전으로 실제 제품화 가능성이 커졌다. - Diagram의 Genius와 같은 도구는 Figma 파일을 분석하고, 기존 디자인 시스템의 컴포넌트를 활용한 디자인 제안을 생성한다. - AI는 다음과 같은 작업을 보조할 수 있다. - 자연어를 기반으로 한 디자인 생성 - 기존 컴포넌트와 패턴 추천 - 디자인 파일 분석 및 개선안 제시 - 디자인에서 코드로의 변환 - AI가 디자인 시스템의 규칙을 학습할수록, 조직의 브랜드와 패턴에 맞는 결과를 더 빠르게 만들 수 있다. ## 자동화에 뒤처지지 않기 위한 변화 - 도구가 발전하면 디자인 시스템 팀은 새로운 플러그인과 AI 기능을 단순히 도입하는 것을 넘어, 조직의 작업 흐름에 어떻게 연결할지 고민해야 한다. - 자동화의 효과를 높이려면 컴포넌트, 스타일, 변수, 명명 규칙이 체계적으로 정리되어 있어야 한다. - 디자인 시스템이 일관되지 않거나 문서화가 부족하면 AI와 자동화 도구도 부정확한 결과를 낼 수 있다. - 따라서 자동화는 잘 정립된 시스템을 대체하기보다, 품질 높은 시스템을 더 넓고 빠르게 활용하도록 돕는 방식으로 작동한다. ## 인간 디자이너의 역할 - 자동화가 작업의 일부를 대신하더라도 문제의 맥락을 이해하고 우선순위를 정하는 일은 여전히 인간에게 요구된다. - AI는 여러 결과를 빠르게 생성할 수 있지만, 어떤 결과가 사용자와 비즈니스에 적합한지 판단하지는 못한다. - 디자이너의 역할은 픽셀을 직접 배치하는 일에서 다음과 같은 업무로 확장될 수 있다. - 올바른 문제 정의 - 사용자 요구와 비즈니스 목표의 조율 - 생성 결과의 평가와 수정 - 디자인 시스템의 원칙과 품질 관리 - 새로운 도구와 협업 방식의 설계 - 자동화는 디자이너를 없애기보다, 디자이너가 더 전략적이고 창의적인 역할을 수행하도록 업무의 성격을 바꿀 가능성이 크다. 실무에서는 반복 작업부터 플러그인으로 자동화하되, 컴포넌트와 디자인 토큰을 먼저 정비하는 것이 좋다. AI가 생성한 결과는 초안으로 활용하고, 접근성·일관성·사용자 맥락을 사람이 반드시 검토해야 한다.

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

디자인 시스템FigmaAI머신러닝+4