피그마, 세쿼이아 (새 탭에서 열림)

2018년은 피그마가 단순한 브라우저 기반 디자인 도구를 넘어, 팀과 조직을 위한 강력한 디자인 플랫폼으로 도약하며 업계의 표준으로 자리 잡기 시작한 해입니다. 이 해에 피그마는 디자인 시스템의 핵심인 스타일(Styles) 기능을 도입하고 프로토타이핑 기능을 대폭 강화하여 제품 디자인의 워크플로우를 혁신했습니다. 특히 웹 API를 공개하며 개방형 플랫폼으로서의 초석을 다졌고, 이를 통해 디자인 데이터를 외부 도구와 연결하려는 비전을 구체화했습니다. ### 디자인 시스템의 체계화: 스타일 및 컴포넌트 업데이트 * **스타일(Styles) 기능 도입:** 컬러, 텍스트, 이펙트, 그리드 등을 전역 스타일로 정의하고 관리할 수 있게 되어 디자인 일관성을 유지하기가 훨씬 쉬워졌습니다. * **컴포넌트 고도화:** 인스턴스에서 원본 컴포넌트의 속성을 유지하면서도 필요한 부분만 재정의(Override)하는 기능이 개선되어 복잡한 UI 대응력이 높아졌습니다. * **자산 라이브러리:** 팀 간에 디자인 자산을 실시간으로 공유하고 업데이트할 수 있는 라이브러리 시스템이 더욱 견고해졌습니다. ### 생동감 넘치는 사용자 경험: 프로토타이핑 혁신 * **오버레이(Overlays) 지원:** 모달 창, 드롭다운 메뉴, 툴팁 등을 별도의 프레임 이동 없이도 자연스럽게 구현할 수 있는 오버레이 기능이 추가되었습니다. * **고정 요소(Fixed elements):** 스크롤 시에도 상단 바나 하단 버튼이 고정되도록 설정하는 기능이 추가되어 실제 앱과 유사한 환경에서 테스트가 가능해졌습니다. * **스마트한 전환 효과:** 슬라이드 인/아웃 등 다양한 화면 전환 효과를 통해 정적인 디자인에 생명력을 불어넣었습니다. ### 개방형 플랫폼으로의 확장: 플러그인과 도구화 * **Figma Web API 공개:** 개발자들이 피그마 파일의 데이터에 접근할 수 있는 API를 공개하여, 자동화 도구나 커스텀 워크플로우를 구축할 수 있는 환경을 마련했습니다. * **외부 도구 연동:** Jira, Trello, Dropbox 등 협업 도구와의 통합을 강화하여 디자인이 단순히 캔버스에 머무르지 않고 비즈니스 프로세스 전반으로 확장되도록 지원했습니다. ### 조직의 성장을 지원하는 엔터프라이즈 환경 * **조직(Organization) 플랜 출시:** 대규모 기업을 위한 관리자 제어 기능, 보안 강화, 중앙 집중식 라이브러리 관리 기능을 도입했습니다. * **디자인 데이터 인사이트:** 팀 내에서 디자인 자산이 어떻게 활용되고 있는지 파악할 수 있는 기초적인 분석 환경을 제공하기 시작했습니다. --- 2018년 피그마의 성취는 "디자인은 혼자 하는 것이 아니라 함께 하는 것"이라는 가치를 기술적으로 증명했습니다. 현재 디자인 시스템을 구축 중인 팀이라면, 피그마가 이때 정립한 스타일과 컴포넌트 관리 원칙을 다시 한번 검토하여 효율적인 라이브러리 운영의 기초로 삼는 것을 추천합니다.

Figma Organization을 소개 (새 탭에서 열림)

Figma 3.0 (!) Inside Figma Product updates Design News

피그마의 엔지니어 (새 탭에서 열림)

Figma 디자인 팀은 단순히 시각적인 요소를 만드는 조직을 넘어, 제품의 근본적인 문제를 해결하는 파트너로서 팀을 구축해 왔습니다. 초기에는 광범위한 역량을 가진 제너럴리스트를 중심으로 팀의 기틀을 다졌으며, 성장에 따라 전문성을 더하면서도 '장인 정신(Craftsmanship)'과 '협업'이라는 핵심 가치를 유지하는 데 집중했습니다. 이러한 전략적 팀 빌딩은 Figma가 디자이너를 위한 도구를 넘어 전사적 협업 플랫폼으로 진화하는 결정적인 토대가 되었습니다. **초기 채용 전략: 풀스택 제품 디자이너의 영입** * 팀의 초기 단계에서는 디자인의 전 과정을 주도할 수 있는 제너럴리스트(Generalist) 채용에 집중했습니다. * 단순히 UI를 그리는 수준을 넘어 제품 사고(Product Thinking), 사용자 리서치, 그리고 엔지니어링에 대한 깊은 이해도를 갖춘 디자이너를 선발했습니다. * 이러한 '풀스택' 디자이너들은 엔지니어와 직접 소통하며 기술적 제약 안에서 최선의 사용자 경험을 도출하는 역할을 수행했습니다. **디자인 프로세스의 도구화: 내부 시스템 구축** * Figma 팀은 자신들이 직접 사용하는 도구를 만든다는 특수성을 활용해, 내부 디자인 워크플로우를 제품에 적극적으로 반영했습니다. * 디자인 시스템(Design System)을 조기에 구축하여 제품 전반의 일관성을 유지하고, 반복적인 작업 시간을 줄여 창의적인 문제 해결에 더 집중할 수 있는 환경을 만들었습니다. * 내부적으로 사용하는 라이브러리와 컴포넌트를 실제 사용자들과 동일한 환경에서 테스트하며 제품의 완성도를 높였습니다. **문화적 기둥: Critique 세션과 투명한 공유** * 'Critique(비평)'라 불리는 정기적인 피드백 세션을 통해 결과물뿐만 아니라 디자인 의도와 과정을 투명하게 공유하는 문화를 정착시켰습니다. * 비평은 비난이 아닌 '더 나은 제품을 위한 협력'이라는 인식을 심어주어, 디자이너들이 자신의 작업물을 초기에 공개하고 피드백을 받는 것을 주저하지 않게 했습니다. * 슬랙(Slack)이나 Figma 파일 내 댓글 등을 통해 비동기적인 소통을 활성화하여 전사적인 투명성을 확보했습니다. **조직 구조의 진화: 제품 중심의 자율성 부여** * 팀이 확장됨에 따라 디자인 조직을 기능별로 쪼개기보다, 특정 제품 영역(Squad)에 임베드되는 형태를 취했습니다. * 각 디자이너는 자신이 담당하는 제품 기능에 대해 오너십을 갖고, 기획 단계부터 출시까지 PM 및 엔지니어와 원팀으로 움직였습니다. * 동시에 '디자인 챕터' 활동을 통해 다른 팀의 디자이너들과 정기적으로 교류하며, 전체적인 디자인 정체성이 파편화되지 않도록 관리했습니다. 디자인 팀이 성장할수록 중요한 것은 뛰어난 개인의 역량보다 팀 전체가 공유하는 '품질에 대한 기준'입니다. 채용 단계에서부터 제품 중심적 사고를 가진 인재를 선별하고, 이들이 기술적 제약 없이 창의성을 발휘할 수 있도록 내부 시스템과 피드백 문화를 견고히 다지는 과정이 강력한 제품을 만드는 지름길입니다.

스마트 셀렉션 2D (새 탭에서 열림)

Introducing Smart Selection Inside Figma Product updates Figma Design News

코인베이스에서 개방 (새 탭에서 열림)

우버(Uber)의 디자인 팀은 전 세계 금융 소외 계층(unbanked)을 위한 포용적인 서비스를 구축하는 과정에서 피그마(Figma)를 핵심적인 협업 도구로 활용하고 있습니다. 피그마의 실시간 공유 기능을 통해 전 세계에 흩어져 있는 디자이너와 이해관계자들은 현지의 복잡한 결제 환경과 사용자 요구사항을 즉각적으로 디자인에 반영합니다. 결과적으로 우버는 이를 통해 현금 기반 경제권의 사용자들에게도 일관되고 접근성 높은 모빌리티 경험을 제공할 수 있게 되었습니다. **현금 기반 경제를 고려한 사용자 경험 설계** * 은행 계좌나 신용카드가 없는 사용자들을 위해 현금 결제 프로세스를 디자인의 중심에 두고, 각 지역의 특수한 금융 상황을 UI/UX에 녹여냈습니다. * 현지 리서치에서 얻은 인사이트를 바탕으로 저사양 기기나 불안정한 네트워크 환경에서도 오류 없이 작동하는 최적화된 디자인을 구현했습니다. * 다양한 언어와 문화적 맥락을 고려하여, 기술적 숙련도가 낮은 사용자도 직관적으로 이용할 수 있는 인터페이스를 개발하는 데 집중했습니다. **디자인 시스템의 체계화와 협업 효율성** * 피그마를 "잘 정리된 책꽂이"처럼 활용하여, 방대한 디자인 컴포넌트와 자산을 누구나 필요할 때 즉시 찾아 쓸 수 있도록 체계적인 라이브러리를 구축했습니다. * 전 세계 여러 시간대에 흩어진 디자인 팀이 하나의 캔버스 위에서 동시에 작업함으로써, 물리적 거리로 인한 소통의 공백을 최소화하고 의사결정 속도를 높였습니다. * 디자이너뿐만 아니라 개발자, 기획자와의 긴밀한 협업 환경을 조성하여 디자인 의도가 실제 제품 구현 단계까지 왜곡 없이 전달되도록 관리합니다. **실제 맥락을 반영한 프로토타이핑과 리서치 통합** * 단순한 정적 화면 구성을 넘어 실제 사용자의 여정을 시뮬레이션할 수 있는 고충실도 프로토타입을 제작하여 현지 테스트의 정확도를 극대화했습니다. * 사용자 리서치 결과와 프로토타입을 피그마 내에서 유기적으로 연결하여, 팀원 전체가 디자인의 배경이 된 사용자 페인 포인트(Pain Point)를 깊이 있게 이해하도록 돕습니다. * 반복적인 피드백 루프를 통해 프로토타입을 빠르게 개선함으로써, 실제 서비스 출시 전 잠재적인 사용성 문제를 선제적으로 해결했습니다. 우버의 사례는 디자인 도구가 단순한 제작 수단을 넘어 글로벌 협업과 포용적 가치 실현의 허브가 될 수 있음을 보여줍니다. 전 세계 다양한 환경의 사용자를 대상으로 하는 서비스를 설계할 때는 디자인 자산의 체계적인 관리와 함께, 현장 리서치 데이터가 디자인 시스템과 즉각적으로 상호작용할 수 있는 환경을 구축하는 것이 무엇보다 중요합니다.

디자인 시스템 현황 (새 탭에서 열림)

Material Design 3와 Figma의 결합은 디자인 시스템을 실제 제품 개발로 연결하는 워크플로우를 혁신적으로 단순화합니다. Figma Styles를 활용해 Material You의 핵심인 동적 색상 체계를 자동화하고, 디자인 토큰을 통해 디자인과 코드 간의 일관성을 유지하는 데 중점을 둡니다. 이를 통해 디자이너는 복잡한 테마 관리 작업에서 벗어나 사용자 경험 본연의 설계에 더 집중할 수 있는 환경을 구축할 수 있습니다. **Material Theme Builder를 통한 워크플로우 효율화** * Figma 플러그인인 'Material Theme Builder'는 사용자 지정 테마와 라이트/다크 모드 구성을 즉각적으로 생성하여 디자인 수작업을 최소화합니다. * 이미지에서 색상을 추출해 테마를 만드는 Material You의 동적 색상(Dynamic Color) 기능을 Figma 내에서 실시간으로 구현하고 테스트할 수 있습니다. * 생성된 색상 팔레트는 Figma의 스타일 라이브러리로 자동 등록되어, 프로젝트 전체의 컴포넌트에 일관된 테마를 즉시 적용할 수 있습니다. **디자인 토큰 기반의 시맨틱 스타일 시스템** * 단순한 색상 값을 넘어 'on-primary', 'surface-variant'와 같은 시맨틱(Semantic) 명명 규칙을 Figma 스타일에 적용하여 디자인의 의도를 개발자에게 명확히 전달합니다. * 토큰화된 스타일은 플랫폼(Android, iOS, Web)에 구애받지 않는 범용적인 디자인 언어로 기능하며, 스타일 변경 시 연결된 모든 컴포넌트가 동시에 업데이트됩니다. * 타이포그래피와 색상 계층 구조가 시스템적으로 연결되어 있어, 대규모 프로젝트에서도 디자인 일관성을 잃지 않고 복잡성을 효과적으로 관리할 수 있습니다. **디자인과 코드의 간극을 좁히는 툴링** * Figma에서 정의된 스타일은 JSON 형식 등으로 내보낼 수 있어 Jetpack Compose, Flutter 등 실제 개발 환경에서 토큰 값을 즉시 활용할 수 있습니다. * 디자이너가 Figma에서 스타일을 수정하면 개발자는 업데이트된 토큰 데이터를 통해 코드를 수동으로 수정하는 번거로움 없이 시스템을 동기화할 수 있습니다. * 이는 '단일 진실 공급원(Single Source of Truth)'을 구축하여 디자인과 개발 협업 과정에서 발생하는 커뮤니케이션 오류를 획기적으로 줄여줍니다. Material Design 3를 도입하려는 팀은 Material Theme Builder 플러그인을 활용해 디자인 토큰 기반의 워크플로우를 우선적으로 구축하는 것이 좋습니다. 이는 특히 다양한 테마와 기기 환경을 지원해야 하는 현대적인 제품 설계에서 유지보수 효율성을 극대화하고 제품의 완성도를 높이는 핵심 전략이 될 것입니다.

딜리버루, 피그마 (새 탭에서 열림)

우버(Uber) 디자인 팀은 전 세계의 금융 소외 계층(Unbanked)에게 최적화된 모빌리티 서비스를 제공하기 위해 피그마(Figma)를 핵심 협업 도구로 활용하고 있습니다. 이들은 복잡한 현지 결제 수단과 저사양 기기 환경을 고려한 디자인 시스템을 구축하여, 물리적 거리에 상관없이 전 세계 디자이너들이 실시간으로 협력할 수 있는 환경을 만들었습니다. 결과적으로 피그마는 단순한 디자인 툴을 넘어, 글로벌 스탠다드와 지역별 특수성을 동시에 충족시키는 우버의 서비스 확장 전략에서 중추적인 역할을 수행하고 있습니다. **금융 소외 계층을 위한 디자인의 복잡성 해결** * 브라질, 인도 등 신용카드나 은행 계좌가 없는 'Unbanked' 사용자들이 많은 시장을 겨냥하여 현금 결제 및 지역별 디지털 지갑 시스템을 디자인 프로세스에 녹여냈습니다. * 네트워크 연결이 불안정하거나 하드웨어 성능이 낮은 저사양 스마트폰 환경에서도 원활하게 작동할 수 있는 가벼우면서도 직관적인 UI를 설계하는 데 집중했습니다. * 각 국가별로 상이한 결제 흐름과 법적 요구사항을 시각화하고, 이를 하나의 서비스 흐름으로 통합하는 과정에서 발생하는 복잡성을 관리했습니다. **단일 진실 공급원(Single Source of Truth)으로서의 라이브러리** * 우버의 디자인 시스템인 'Base'를 피그마 내 라이브러리로 구축하여, 샌프란시스코부터 암스테르담, 인도에 이르는 전 세계 디자이너들이 동일한 자산(Asset)을 사용하도록 했습니다. * 공통 컴포넌트를 통해 일관성을 유지하면서도, 각 지역의 언어 및 문화적 특성에 맞는 '로컬라이제이션(현지화)' 작업을 효율적으로 병행할 수 있는 워크플로우를 마련했습니다. * 실시간 동시 편집 기능을 활용해 시차에 구애받지 않고 팀원 간의 피드백 루프를 단축시켰으며, 이는 제품 출시 속도를 높이는 결과로 이어졌습니다. **사용자 리서치와 프로토타이핑을 통한 가치 검증** * 피그마의 고충실도(High-fidelity) 프로토타이핑 기능을 활용해 실제 앱과 유사한 사용자 경험을 구현하고, 이를 현지 사용자 리서치에 투입하여 실질적인 페인 포인트를 발굴했습니다. * 디지털 결제에 익숙하지 않은 사용자들이 현금 결제 옵션을 선택하고 완료하는 과정을 단계별로 시뮬레이션하여 인지 부하를 최소화하는 설계를 도출했습니다. * 리서치 결과를 디자인 수정에 즉각 반영하고 다시 테스트하는 반복(Iteration) 과정을 가속화하여 사용자 중심의 설계를 강화했습니다. **개발 효율성을 높이는 디자인 핸드오프** * 오토 레이아웃(Auto Layout)과 컴포넌트 속성 기능을 적극적으로 사용하여 개발자가 디자인의 의도를 정확하게 파악하고 코드로 구현할 수 있도록 지원했습니다. * 디자이너와 개발자가 피그마 내에서 직접 소통하며 디자인 사양(Spec)에 대한 모호함을 제거함으로써, 최종 제품의 구현 품질을 높였습니다. * 디자인 시스템의 구성 요소가 코드 베이스와 긴밀하게 연결될 수 있도록 구조화하여 제품의 유지보수 효율성을 극대화했습니다. 글로벌 서비스를 지향하는 디자인 팀이라면 우버의 사례처럼 디자인 시스템을 정립하고 피그마를 통해 협업의 투명성을 높이는 것이 필수적입니다. 특히 사용자의 기술적 환경이나 금융 인프라가 다른 시장에 진출할 때, 도구의 통합은 단순히 디자인 속도를 높이는 것을 넘어 전 세계 사용자에게 평등한 서비스 경험을 제공하는 핵심 자산이 됩니다.

Figma 디자인 팀을 구축한 방법 (새 탭에서 열림)

18 designers predict UI/UX trends for 2018 Insights UI/UX Thought leadership

피그마의 PDF 내보 (새 탭에서 열림)

피그마는 최근 SVG 내보내기(Export) 엔진을 재설계하여 시각적 품질은 그대로 유지하면서 코드의 양을 획기적으로 줄이는 업데이트를 진행했습니다. 불필요한 메타데이터와 중복된 패스 데이터를 제거함으로써 파일 크기를 최적화하고 웹 성능을 개선하는 데 중점을 두었습니다. 이번 개편의 핵심은 별도의 최적화 도구 없이도 개발자가 바로 실무에 사용할 수 있는 깨끗하고 효율적인 SVG 결과물을 제공하는 것입니다. **불필요한 메타데이터 및 구조 정리** * 피그마 전용 네임스페이스(`xmlns:figma`)와 같은 비표준 속성을 제거하여 표준 SVG 문법에만 집중하도록 코드를 정제했습니다. * 기본값과 동일한 속성(예: `fill="none"`)이나 렌더링에 영향을 주지 않는 불필요한 그룹(`<g>`) 태그를 삭제하여 코드 구조를 단순화했습니다. * 레이어 이름이나 편집용 데이터 등 브라우저 렌더링에 필요 없는 정보를 과감히 생략하여 파일 용량을 줄였습니다. **패스 데이터 최적화와 정밀도 제어** * 좌표값의 소수점 자릿수를 지능적으로 제한하여 데이터 길이를 줄이면서도 시각적 왜곡이 발생하지 않도록 정밀도를 조정했습니다. * 절대 좌표를 상황에 따라 상대 좌표로 변환하거나, 중복된 선분 및 곡선 명령어를 결합하는 방식으로 패스(`d`) 속성 내의 문자열을 최적화했습니다. * 연속된 직선을 하나의 명령어로 합치는 등 수학적 계산을 통해 패스 데이터를 재작성하여 가독성과 성능을 동시에 높였습니다. **트랜스폼 베이킹과 클리핑 효율화** * `transform` 속성을 별도로 사용하는 대신, 회전이나 크기 조절 값을 좌표 데이터에 직접 반영(Baking)하여 브라우저의 렌더링 계산 부하를 줄였습니다. * 복잡하게 중첩된 클립 패스(Clip-path)와 마스크 구조를 논리적으로 결합하거나 단순화하여 불필요한 레이어 계층을 제거했습니다. * `viewBox` 설정을 최적화하여 아이콘이나 그래픽 요소가 의도한 크기대로 정확하고 효율적으로 렌더링되도록 개선했습니다. 이번 업데이트를 통해 피그마에서 내보낸 SVG는 외부 최적화 도구(예: SVGO)를 거치지 않고도 즉시 프로덕션 환경에 적용하기 적합한 수준이 되었습니다. 개발자는 더 가볍고 읽기 쉬운 코드를 다룰 수 있게 되었으며, 웹 서비스의 에셋 로딩 속도를 향상시키는 데 기여할 것으로 보입니다. 가급적 최신 버전의 피그마에서 SVG를 다시 내보내어 기존 프로젝트의 에셋을 경량화하는 것을 권장합니다.

오버레이를 소개합니다 | (새 탭에서 열림)

피그마(Figma)는 기존의 단순한 화면 전환 방식을 넘어, 실제 애플리케이션과 유사하게 동작하는 복잡한 프로토타이핑을 구현하기 위해 내부 엔진을 근본적으로 재설계했습니다. 이번 업데이트의 핵심은 트리거와 액션을 분리하고 변수(Variables)와 조건부 로직을 처리할 수 있는 독립적인 상호작용 엔진을 구축한 것입니다. 이를 통해 디자이너는 수많은 프레임을 복제하지 않고도 고도화된 인터랙션을 효율적으로 관리할 수 있게 되었습니다. ### 상태 머신에서 동적 상호작용 엔진으로의 전환 * 과거의 프로토타이핑은 프레임과 프레임을 1:1로 연결하는 유한 상태 머신(Finite State Machine) 방식에 의존하여, 복잡한 로직을 구현하려면 수백 개의 프레임이 필요했습니다. * 새로운 엔진은 변수와 표현식을 실시간으로 계산하는 방식으로 동작하며, 고정된 경로가 아닌 현재 데이터 상태에 따라 동적으로 다음 화면을 결정합니다. * 이러한 변화는 프로토타입의 유지보수성을 극적으로 높여주며, 디자인 수정 시 발생하던 연쇄적인 링크 끊김 문제를 해결합니다. ### 트리거와 액션의 구조적 분리 * 상호작용을 '트리거(Trigger, 언제 일어나는가)'와 '액션(Action, 무엇이 일어나는가)'으로 완전히 분리하여 설계했습니다. * 하나의 트리거에 여러 개의 액션을 쌓을 수 있는 '다중 액션(Multiple Actions)' 기능을 도입하여, 클릭 한 번으로 변수를 설정하고 화면을 이동하며 알림을 띄우는 복합적인 동작이 가능해졌습니다. * 액션 실행 시 순차적 연산을 보장하여, 이전 액션에서 변경된 변수 값이 다음 조건문(Conditional)에 즉시 반영되도록 로직의 정교함을 더했습니다. ### 표현식 평가와 성능 최적화 * 수학적 연산과 불리언(Boolean) 로직을 처리하기 위해 경량화된 표현식 평가 엔진을 구축했습니다. * 변수 값이 변경될 때 전체 화면을 다시 그리는 대신, 해당 변수를 참조하는 요소들만 선택적으로 업데이트하는 반응형 렌더링 방식을 채택했습니다. * 이를 통해 복잡한 수식이 포함된 프로토타입에서도 초당 60프레임(FPS)의 매끄러운 성능을 유지하며 사용자 경험을 저해하지 않도록 설계했습니다. ### 효율적인 프로토타이핑을 위한 제언 고급 프로토타이핑 기능을 활용할 때는 모든 상태를 프레임으로 만드려는 습관에서 벗어나야 합니다. 변수와 조건부 로직을 적극적으로 사용하여 프레임 개수를 최소화하고, 하나의 트리거에 여러 액션을 조합하여 실제 제품의 로직을 모사하는 것이 설계 효율성과 성능 측면에서 모두 유리합니다.

Zoom, Figma로 디자인 워크 (새 탭에서 열림)

우버(Uber) 디자인 팀은 금융 소외 계층인 '언뱅크드(Unbanked)' 사용자들을 위한 서비스를 구축하기 위해 피그마(Figma)를 적극적으로 활용하고 있습니다. 피그마의 체계적인 자산 관리 능력과 협업 기능을 통해 전 세계 다양한 사용자들의 금융 환경을 반영한 포용적인 디자인을 구현합니다. 결과적으로 피그마는 단순한 디자인 도구를 넘어, 복잡한 연구 데이터와 프로토타입을 연결하여 실질적인 사회적 문제를 해결하는 플랫폼 역할을 수행하고 있습니다. **체계적인 디자인 에코시스템 구축** * 피그마를 '잘 정리된 책꽂이'에 비유하며, 필요한 자산을 필요할 때 즉시 찾을 수 있는 높은 접근성을 강조합니다. * 방대한 디자인 컴포넌트와 리소스를 효율적으로 관리함으로써 대규모 글로벌 프로젝트에서도 일관성을 유지합니다. * 디자인 시스템의 가시성을 높여 디자이너뿐만 아니라 프로젝트 참여자 모두가 작업 흐름을 명확히 이해할 수 있도록 돕습니다. **연구 기반의 프로토타이핑과 사례 연구** * 현지 사용자들의 행동 패턴과 금융 습관을 반영하기 위해 실제 사례 연구(Case study)와 연구(Research) 데이터를 디자인 프로세스에 결합합니다. * 피그마의 프로토타이핑 기능을 활용해 현금 결제 비중이 높은 사용자들의 시나리오를 가상으로 구현하고 테스트합니다. * 제작자 스토리(Maker Stories)를 통해 디자인 결정 과정의 맥락을 공유하며, 사용자 경험의 깊이를 더합니다. **실시간 협업을 통한 문제 해결** * 디자이너, 연구원, 제작자가 한 공간에서 실시간으로 소통하며 피드백 루프를 단축합니다. * 물리적으로 떨어져 있는 팀들이 동일한 화면을 보며 협업함으로써 전 세계 다양한 지역의 특수성을 디자인에 빠르게 반영합니다. * 복잡한 금융 프로세스를 시각화하고 단순화하는 과정에서 협업 도구로서의 피그마가 중추적인 역할을 합니다. 글로벌 금융 포용성을 목표로 하는 서비스라면, 디자인 도구 선택 시 단순한 그래픽 기능을 넘어 연구 데이터의 통합 관리와 실시간 협업의 효율성을 우선순위에 두어야 합니다. 피그마와 같이 높은 조직화 능력을 갖춘 툴은 복잡한 사용자 환경을 탐색하고 실질적인 해결책을 도출하는 데 강력한 조력자가 될 것입니다.

2018 Unsplash (새 탭에서 열림)

제시해주신 내용은 Vercel의 디자인 블로그(Vercel Design)의 헤더와 카테고리 구성으로 보입니다. 이 내용은 Vercel이 지향하는 **"인터넷을 위한 디자인"**이라는 철학을 바탕으로, 디자인과 엔지니어링의 경계를 허물고 성능 중심의 웹 경험을 구축하겠다는 의지를 담고 있습니다. 이를 바탕으로 Vercel의 디자인 철학을 요약하면 다음과 같습니다. Vercel의 디자인 시스템은 단순한 시각적 가이드를 넘어, 실제 브라우저에서 구동되는 기술적 구현과 사용자 경험의 조화를 추구합니다. 정적인 캔버스 위에서의 설계를 탈피하여 인터넷의 역동적인 특

Figma에서 페이지를 (새 탭에서 열림)

디자인 제약 조건(Constraints)은 단순히 레이어의 위치를 고정하는 도구를 넘어, 다양한 화면 크기에서도 UI가 의도대로 작동하게 만드는 반응형 설계의 핵심입니다. 이를 적절히 활용하면 디자이너는 모든 해상도에 대응하는 개별 시안을 일일이 만들지 않아도 되며 개발자와의 협업 효율을 극대화할 수 있습니다. 피그마(Figma)와 같은 툴에서 제약 조건을 전략적으로 사용하는 다섯 가지 필수 방법은 다음과 같습니다. ### 반응형 레이아웃을 위한 스트레칭 설정 * **Left & Right / Top & Bottom 활용:** 레이어의 양쪽 끝을 부모 프레임에 고정하면, 프레임 크기가 변할 때 요소의 너비나 높이가 그에 맞춰 자동으로 늘어나거나 줄어듭니다. * **가변 컴포넌트 설계:** 입력창(Input field), 구분선(Divider), 버튼 바와 같이 화면 너비에 따라 확장되어야 하는 요소에 필수적으로 적용됩니다. * **여백 유지:** 부모 프레임의 가장자리로부터 설정된 일정한 여백(Padding)을 유지하면서 내부 콘텐츠만 유연하게 조절할 수 있습니다. ### 특정 모서리에 요소 고정 * **상하단 내비게이션 관리:** 상단 바(Header)는 'Top'에, 하단 탭 바(Bottom Navigation)는 'Bottom'에 고정하여 화면이 길어져도 해당 위치를 유지하게 합니다. * **플로팅 버튼(FAB) 배치:** 화면의 우측 하단 등에 고정되어야 하는 인터랙티브 요소에 'Right'와 'Bottom' 제약 조건을 결합하여 사용자의 시선이 머무는 곳에 요소를 안정적으로 배치합니다. ### 중앙 정렬 유지와 비율 최적화 * **Center 제약 조건:** 로고, 모달 창, 또는 로딩 스피너와 같은 요소를 'Center'로 설정하면 부모 프레임의 크기 변화와 상관없이 항상 정중앙에 위치하게 됩니다. * **시각적 균형 확보:** 복잡한 배경 그래픽이나 아이콘 묶음이 화면 크기에 상관없이 항상 레이아웃의 중심을 잡아야 할 때 유용합니다. ### 비례적 크기 조정을 위한 Scale 적용 * **비율 유지:** 요소의 절대적인 픽셀 값이 아니라, 부모 프레임 대비 차지하는 비율(%)을 유지하며 크기가 변하도록 설정합니다. * **이미지 및 카드 레이아웃:** 특정 비율을 유지해야 하는 배경 이미지나 그리드 시스템 내의 카드 UI를 설계할 때, 화면이 커지는 만큼 요소도 일정 비율로 커지게 만들어 시각적 일관성을 유지합니다. ### 중첩된 프레임에서의 계층적 제약 조건 * **다층 구조 설계:** 복잡한 UI는 프레임 안에 또 다른 프레임이 중첩된 구조를 가집니다. 이때 각 계층(Level)마다 독립적인 제약 조건을 부여하여 정밀한 제어가 가능합니다. * **컴포넌트 내 무결성:** 예를 들어 카드 컴포넌트 내부에서 아이콘은 좌측에 고정하고(Left), 제목 텍스트는 좌우로 늘어나게(Left & Right) 설정함으로써, 전체 카드의 크기가 변하더라도 내부 요소들이 겹치거나 깨지지 않도록 방어적인 디자인을 할 수 있습니다. 디자인 제약 조건을 효과적으로 사용하기 위해서는 디자인 시작 단계부터 레이아웃 그리드와 함께 고려하는 것이 좋습니다. 모든 요소를 단순히 고정하기보다는, 어떤 요소가 가변적이고 어떤 요소가 고정되어야 하는지를 명확히 구분하여 설정할 때 진정으로 견고하고 유연한 디자인 시스템을 구축할 수 있습니다.

Figma에서 아토믹 디자인 시스템 (새 탭에서 열림)

18 designers predict UI/UX trends for 2018 Insights UI/UX Thought leadership

Figma에서 제약 조건과 매 (새 탭에서 열림)

피그마에서 아토믹 디자인(Atomic Design) 시스템을 구축하는 것은 UI를 가장 작은 단위로 세분화하여 일관성 있고 확장 가능한 디자인 라이브러리를 만드는 핵심 전략입니다. 이 방법론은 구성 요소를 원자, 분자, 유기체 단위로 계층화함으로써 디자인 수정 시 발생하는 중복 작업을 줄이고 개발팀과의 효율적인 협업을 지원합니다. 결과적으로 아토믹 컴포넌트 구조는 복잡한 제품 설계 과정에서도 높은 유지보수성과 시각적 통일성을 유지할 수 있는 강력한 기반이 됩니다. **원자(Atoms) 단위의 정의와 구축** - 디자인 시스템의 가장 기초가 되는 최소 단위로 아이콘, 버튼, 입력창, 타이포그래피 스타일, 컬러 토큰 등을 포함합니다. - 원자 그 자체로는 복잡한 기능을 수행하지 않지만, 모든 상위 컴포넌트의 구성 요소로서 일관된 디자인 언어를 형성합니다. - 피그마의 'Styles'와 'Variables'를 활용하여 색상, 간격, 폰트 등의 근본적인 속성을 원자 단위에서 엄격하게 관리합니다. **분자(Molecules) 및 유기체(Organisms)로의 확장** - 분자: 여러 원자가 결합하여 하나의 특정 기능을 수행하는 단위입니다. 예를 들어 '라벨', '입력 필드', '버튼'이 결합하여 하나의 '검색창' 분자가 됩니다. - 유기체: 분자와 원자들이 모여 인터페이스의 독립적인 섹션을 형성합니다. 제품의 헤더, 사이드바, 카드 리스트 등이 이에 해당합니다. - 하위 계층(원자)에서 변경이 일어나면 상위 계층(유기체)까지 즉시 반영되는 상속 구조를 통해 대규모 디자인 수정을 효율적으로 처리합니다. **피그마 최신 기능을 활용한 컴포넌트 최적화** - **Component Properties**: Boolean, Text, Instance Swap 속성을 사용하여 레이어 구조를 단순화하고, 불필요한 변형(Variants)의 개수를 획기적으로 줄입니다. - **Auto Layout**: 컴포넌트 내부의 콘텐츠 크기나 가시성 변화에 따라 레이아웃이 유연하게 반응하도록 설계하여 반응형 디자인 대응력을 높입니다. - **Slot Component**: 컴포넌트 내부에 '교체 가능한 영역(Slot)'을 두어, 기본 구조는 유지하면서 상세 내용은 상황에 맞게 커스텀할 수 있는 유연성을 확보합니다. **디자인 시스템의 유지보수와 협업** - 모든 아토믹 컴포넌트는 직관적인 네이밍 규칙을 따라야 하며, 피그마의 'Description' 기능을 활용해 사용 방법과 제약 사항을 문서화합니다. - 컴포넌트 라이브러리를 'Publish' 하여 팀원들이 최신 버전의 자산을 실시간으로 공유받고 프로젝트 전체에 동일한 기준을 적용하게 합니다. 성공적인 디자인 시스템 구축을 위해서는 처음부터 모든 요소를 완벽하게 설계하기보다, 실제 UI 작업 중 반복되는 패턴을 발견하고 이를 역으로 시스템화하는 '상향식(Bottom-up)' 접근을 권장합니다. 특히 개발자와의 초기 소통을 통해 컴포넌트의 속성 명칭을 코드와 일치시키면 디자인 핸드오프 과정에서의 혼선을 최소화할 수 있습니다.