figma2026년 1월 6일

제14호: 소프트웨어는 (새 탭에서 열림)

소프트웨어는 기능을 제공하는 도구를 넘어 사람들이 생각하고 말하고 관계 맺고 문화를 형성하는 방식에 영향을 준다. AI가 소프트웨어 제작의 동료로 발전하면서, 소프트웨어는 인간의 필요와 문화적 맥락에 더욱 밀착될 전망이다. 이 글은 디자인, 언어, 게임, 음식, 제조 사례를 통해 소프트웨어와 문화가 서로를 어떻게 변화시키는지 보여준다. ## 소프트웨어와 문화의 결합 - 배달 주문, 인간관계 형성, 의미 추구 등 소프트웨어는 일상생활의 거의 모든 영역에 관여한다. - AI는 단순한 도구를 넘어 소프트웨어 제작 과정의 협업자 또는 동료로 자리 잡고 있다. - 기술을 만드는 사람뿐 아니라 사회 전체가 소프트웨어의 문화적 영향력을 이해해야 한다는 문제의식을 제시한다. ## 디자인은 문화다 - 핀치 투 줌, 무한 스크롤, 좋아요 탭과 같은 상호작용은 오늘날 자연스럽지만, 처음에는 낯선 새로운 동작이었다. - 이러한 인터랙션은 단순한 사용성 개선을 넘어 한 세대의 사고방식과 감정, 디지털 습관을 형성했다. - 과거의 대표적인 인터페이스 10가지를 돌아보며, 앞으로 등장할 디자인 역시 문화적 행동 양식을 바꿀 수 있음을 강조한다. ## 언어는 문화다 - “6-7”, “aura”, “rizz” 같은 표현은 소셜 미디어를 통해 빠르게 확산된 신조어의 사례다. - 알고리즘은 어떤 표현이 더 많이 노출되고 유행하는지를 결정하면서 사람들이 사용하는 언어에도 영향을 미친다. - 언어는 단순히 소통 수단에 그치지 않고, 사람들이 세상을 이해하고 서로 관계 맺는 방식까지 바꾼다. - 언어학자 애덤 알렉식은 이러한 현상을 ‘알고스피크(algospeak)’와 연결해 설명한다. ## 게임은 문화다 - 비디오게임은 단순한 오락을 넘어 1,840억 달러 규모의 복잡한 산업으로 성장했다. - 다양한 게임 모드, 캐릭터, 사이드 퀘스트를 제공하면서도 플레이어는 여전히 몇 개의 버튼으로 구성된 컨트롤러를 사용한다. - 제한된 입력 장치가 복잡한 가상 세계를 탐색하게 만드는 방식은 인터페이스 설계의 중요한 원리를 보여준다. - 에픽게임즈 디자이너 아슈레이 샤르마는 게임 컨트롤러의 발전이 차세대 소프트웨어 인터페이스에 줄 수 있는 시사점을 설명한다. ## 음식과 소프트웨어의 결합 - 캐나다 브리티시컬럼비아에서는 매주 한 명꼴로 농부가 사업을 접할 정도로 소규모 농가가 어려움을 겪고 있다. - 창업자 애런 베일은 지역 농부와 식당을 연결하는 마켓플레이스 앱을 구상했다. - 전통적인 방식이라면 MVP 제작을 위해 개발팀을 구성해야 했지만, Figma Make를 활용해 프롬프트 중심으로 앱을 만들었다. - 그 결과 3주 이내에 실제 작동하는 서비스 형태를 구현하며, AI 기반 제작 도구가 사회적 문제 해결의 진입장벽을 낮출 수 있음을 보여준다. ## 제조와 디지털 디자인의 연결 - 디자이너 켈시 페어허스트는 손으로 직접 만드는 작업에 매력을 느낀 뒤 금속 가공 기술을 연구했다. - 브루클린의 스튜디오와 클리블랜드의 제작 공장을 오가며 ‘소프트라인 브루탈리스트’ 스타일의 스테인리스 식기를 개발했다. - 프로젝트 ‘Forks Plus’는 디지털 디자인 도구와 물리적 제작 과정이 결합된 사례다. - 소프트웨어는 화면 속 결과물만 만드는 도구가 아니라, 실제 제품과 제작 문화를 실현하는 기반이 될 수 있다. 소프트웨어를 설계할 때는 기능과 효율성만이 아니라 사용자의 언어, 습관, 감정, 사회적 맥락까지 고려해야 한다. 특히 AI 제작 도구가 확산될수록 누구나 문화와 사회에 영향을 주는 제품을 만들 수 있으므로, 빠른 구현만큼 그 영향과 책임을 함께 검토하는 것이 중요하다.

user-interface-designfigmaaiversion-control+4

figma2025년 10월 20일

디자인 시스템: 기초부터 앞으로 (새 탭에서 열림)

디자인 시스템은 대규모 제품에서 시각적 일관성을 유지할 뿐 아니라 디자인과 개발 사이의 간극을 줄이는 공통 기반이다. AI로 작업 속도와 아이디어 확장이 빨라질수록, 원칙과 구성 요소를 체계화한 디자인 시스템의 중요성은 더욱 커진다. 성공적인 시스템을 위해서는 명확한 문서화와 지속적인 성과 측정이 필수적이다. ## 디자인 시스템의 기원과 발전 - 디자인 시스템은 초기 그래픽 디자인과 인쇄 매체의 스타일 가이드, 타이포그래피 표준에서 출발했다. - 20세기 중반 기업 브랜드의 중요성이 커지면서 일관된 브랜드 정체성을 위한 종합 가이드라인이 발전했다. - 디지털 전환 이후 IBM, Microsoft, Apple, Google 등은 이러한 원칙을 디지털 인터페이스로 확장했다. - 오늘날의 디자인 시스템은 운영체제 규칙과 UI 패턴을 표준화하고, 내부 팀과 외부 개발자가 일관된 제품 경험을 만들도록 돕는다. - 기존 인쇄 디자인 시스템을 디지털 인터페이스로 전환한 미국 국립공원관리청 사례처럼, 오래된 디자인 원칙도 디지털 환경에 맞게 재해석할 수 있다. ## 문서화를 통한 도입 확대 - 문서화는 추상적인 디자인 원칙을 실제 작업 지침으로 바꾸는 역할을 한다. - 디자이너와 개발자가 시스템을 어떻게 사용해야 하는지 알 수 있는 공통 참고점이 되어 사용에 대한 자신감을 높인다. - Alaska Airlines의 디자인 시스템 Auro는 도입 과정에서 문서화를 우선시했다. - Figma의 오토 레이아웃 사용법 - 브랜치 병합 방법 - 주요 기능을 작업에 적용하는 방법 - 문서화만으로 adoption이 보장되지는 않는다. - 역할에 따라 필요한 정보가 다르므로 문서는 다음과 같이 다양하게 제공되어야 한다. - 개발자에게 필요한 상세 사양 - 디자이너를 위한 사용 지침 - 전체 팀이 이해할 수 있는 고수준 원칙 - 시각적 예시와 맥락 설명 - 디자인 과정에 참여하는 직군이 늘어날수록 문서는 명확하고 쉽게 접근할 수 있어야 한다. ## 디자인 시스템의 ROI 측정 - 디자인 시스템의 비즈니스 효과는 정량적 지표로 추적할 수 있다. - 활용 가능한 주요 지표는 다음과 같다. - 구성 요소와 기능의 사용량 - 팀과 프로젝트의 도입률 - 디자인 일관성 점수 - athenahealth는 일관성 점수를 분석하는 과정에서 특정 컨테이너 컴포넌트의 detach 증가를 발견했다. - 컴포넌트가 분리되는 현상은 다음 문제를 나타낼 수 있다. - 컴포넌트의 버그 - 현재 기능으로 충족되지 않는 개선 요구 - 기존 요소를 예상하지 못한 방식으로 조합하는 사용 패턴 - 따라서 지표는 단순히 성공 여부를 판단하는 수단이 아니라, 시스템의 결함과 사용자 요구를 발견하는 피드백 수단으로 활용해야 한다. ## 디자인 시스템이 맡는 역할 - 디자인과 개발 간의 커뮤니케이션 비용을 줄인다. - 반복적인 UI 제작을 표준화해 작업 효율을 높인다. - 여러 팀과 제품에 걸쳐 일관된 사용자 경험을 유지한다. - AI가 생성한 결과물을 검토하고 조정할 수 있는 기준과 제약을 제공한다. - 조직이 커질수록 개인의 경험이나 구두 지식에 의존하지 않고, 공유된 규칙과 문서에 기반해 협업하도록 만든다. 실무에서는 처음부터 거대한 시스템을 만들기보다 핵심 컴포넌트와 사용 규칙부터 정의하고, 역할별 문서와 사용 데이터를 함께 구축하는 것이 좋다. 특히 detach, 미사용 컴포넌트, 도입률 같은 신호를 정기적으로 분석하면 디자인 시스템을 실제 팀의 필요에 맞게 개선할 수 있다.

user-interface-designfigmaaidesign-systems+3

figma2025년 8월 24일

버전 관리: Figma Make가 (새 탭에서 열림)

Figma Buzz의 영상 재생 기능은 단순한 재생 버튼 배치만으로 해결하기 어려웠다. Figma의 프로덕트 디자이너 Natasha Tenggoro는 Figma Make를 활용해 영상 위치와 가시성에 따른 재생 UI 동작을 빠르게 프로토타이핑했고, 이를 통해 디자인 의도를 엔지니어링 팀과 구체적으로 공유했다. 처음에는 단일 영상 지원으로 시작했지만, 다중 영상 지원이 가능해지면서 기존 재생 경험을 다시 설계하게 됐다. ## 영상 재생 UI가 어려웠던 이유 - Figma Buzz에서는 영상 위에 로고, 텍스트, 이미지 등 여러 요소를 겹쳐 배치할 수 있다. - 따라서 영상 중앙에 고정된 일반적인 재생 버튼은 다른 디자인 요소를 가리거나 작업을 방해할 수 있었다. - 사용자가 영상을 캔버스 안팎으로 자유롭게 이동할 수 있어 다음과 같은 상태를 고려해야 했다. - 영상이 프레임 안에 완전히 있을 때 - 일부만 프레임 밖으로 나갔을 때 - 영상 대부분 또는 전체가 프레임 밖에 있을 때 - 영상 크기를 크게 확대하면 재생 컨트롤이 영상과 떨어져 캔버스의 엉뚱한 위치에 표시될 수 있었다. - 여러 자산을 동시에 보는 그리드 뷰에서는 재생 컨트롤이 다른 자산과 겹칠 가능성도 있었다. ## Figma Make를 이용한 빠른 프로토타이핑 - 기존 Figma Design 프레임을 Figma Make에 가져와 이미 구성된 UI를 기반으로 프로토타입을 만들었다. - 핵심 프롬프트는 다음과 같았다. - 고정된 부모 프레임 안팎으로 미디어 프레임을 드래그 - 부모 영역 밖으로 나간 영상 부분은 잘라내지 않고 20% 불투명도로 표시 - 재생 UI 배지는 영상의 오른쪽 위에 고정 - 배지가 부모 프레임 밖으로 나가면 보이도록 위치 조정 - 영상의 20% 미만만 보이면 배지를 페이드아웃 - 영상이 다시 보이면 배지를 페이드인 - 실제 동작하는 코드와 인터랙션을 보여줌으로써 엔지니어가 기능의 범위와 구현 가능성을 빠르게 판단할 수 있었다. - 그 결과 추상적인 디자인 설명이 우선순위가 있는 기능 논의로 전환됐고, 디자인 의도와 개발 비용 사이의 간극을 줄일 수 있었다. ## 버전 1: 단일 영상 재생 - 대부분의 마케팅 자산이 영상 하나만 포함한다는 점과 촉박한 일정 때문에 초기에는 단일 영상 지원을 선택했다. - 재생 UI를 캔버스 중앙이 아니라 영상 자체에 연결해 다른 요소를 가리지 않도록 했다. - 영상의 위치와 부모 프레임과의 관계에 따라 재생 배지의 위치와 표시 여부가 바뀌도록 설계했다. - 이 접근 방식은 단일 영상에는 적합했지만, 다중 영상 지원이 추가되면서 한계가 드러났다. ## 다중 영상 지원으로 인한 재설계 - 기술 검토 결과, 출시 일정 안에 하나의 Figma Buzz 자산에서 여러 영상을 지원할 가능성이 생겼다. - 영상 콜라주처럼 여러 영상이 포함된 자산에서는 두 가지 선택지가 있었다. - 각 영상을 개별적으로 클릭해 재생 - 하나의 버튼으로 모든 영상을 동시에 미리보기 - 팀은 UI가 여러 영상 위에 반복적으로 나타나 디자인을 가리는 문제를 피하기 위해 전체 재생 컨트롤 하나를 선택했다. - 이 방식은 화면을 더 깔끔하게 유지하면서 자산 전체의 움직임을 한 번에 확인할 수 있는 통합적인 미리보기 경험을 제공한다. - 다중 영상 지원은 기존의 “영상별 재생 UI” 가정을 바꾸고, 재생 경험을 개별 객체 중심에서 전체 자산 중심으로 전환하게 만들었다. ## 실용적인 결론 복잡한 인터랙션은 정적인 화면이나 말로 설명하기보다 실제로 작동하는 프로토타입으로 보여주는 편이 효과적이다. 특히 영상 위치, 가시성, 겹침, 다중 객체 재생처럼 상태가 많은 기능에서는 Figma Make를 사용해 초기 단계부터 엣지 케이스를 검증하면 디자인과 개발 간 커뮤니케이션을 빠르게 개선할 수 있다.

user-interface-designprototypingfigma-makeinteraction-design+2

figma2025년 7월 30일

피그마의 IPO: (새 탭에서 열림)

Figma의 IPO는 단순한 자금 조달이 아니라, “상상과 현실 사이의 간극을 없앤다”는 창업 비전을 장기적으로 실현하기 위한 전환점이다. 딜런 필드는 디자인이 더 이상 일부 전문가의 영역이 아니라 제품과 기업의 성패를 좌우하는 모두의 업무가 되었다고 강조한다. Figma는 단기 수익성보다 AI와 플랫폼, 인수합병 등에 대한 장기 투자를 우선하며 수십 년 단위의 성장을 추구할 계획이다. ## IPO를 선택한 이유 - 기업 공개의 일반적인 장점으로 다음을 제시한다. - 기업 운영의 투명성과 건전성 강화 - 브랜드 인지도 확대 - 기존 주주와 임직원의 유동성 확보 - 주식이라는 더 강력한 인수·보상 수단 확보 - 자본시장 접근성 확대 - 가장 중요한 이유는 Figma 커뮤니티가 회사의 소유권을 함께 나누도록 하기 위해서다. - 다만 IPO가 주가 상승을 보장하는 것은 아니며, 시장은 변동할 수 있다고 명확히 선을 긋는다. ## 효율성보다 장기 성장에 집중 - Figma의 최우선 목표는 단기적인 운영 효율성이 아니라 디자이너의 변화하는 요구를 지원하며 장기 성장하는 것이다. - 성장 과정에서 플랫폼 투자와 대규모 인수합병에 과감하게 나설 수 있다. - 일부 결정은 단기적으로 비합리적으로 보일 수 있고, 잘못된 판단도 발생할 수 있음을 인정한다. - 분기별 주가 상승보다 수십 년에 걸친 장기적인 복리 성장을 우선하겠다는 투자 철학을 제시한다. ## AI가 바꾸는 디자인과 Figma의 투자 - Figma는 AI에 이미 대규모로 투자하고 있으며 앞으로 투자를 더욱 확대할 예정이다. - AI 관련 지출은 몇 년 동안 효율성을 떨어뜨릴 수 있지만, 향후 디자인 워크플로의 핵심 요소가 될 것으로 본다. - Figma Make와 기존 AI 기능은 시작에 불과하며, AI가 다음과 같은 역할을 할 가능성을 제시한다. - 디자이너의 아이디어 구체화 지원 - 더 많은 사람의 디자인 프로세스 참여 - 디자인 작업의 자동화와 협업 강화 - AI를 단순한 기능 추가가 아니라 Figma 플랫폼의 미래를 결정할 핵심 기반으로 보고 있다. ## 디자인은 모두의 업무가 된다 - 과거에는 최소기능제품(MVP)을 먼저 만들고 디자인을 나중에 보완하는 경우가 많았다. - 이제는 제품을 쉽게 만드는 것보다, 어떤 관점과 완성도로 설계하느냐가 성공을 좌우한다. - 디자인은 단순히 외형이나 기능을 정리하는 작업이 아니라 다음을 결정하는 요소가 된다. - 사용자가 제품을 선택하는 이유 - 기업과 제품의 차별성 - 시장에서의 성공과 실패 - 디자인과 장인정신, 명확한 관점이 핵심 경쟁력이 되면서 디자이너뿐 아니라 다양한 직군과 사용자 페르소나가 디자인 과정에 참여하게 될 것으로 전망한다. ## 접근성과 전문성의 균형 - 새로운 사용자가 디자인 프로세스에 참여하려면 Figma는 접근하기 쉬워야 한다. - 동시에 전문 디자이너와 대규모 조직이 활용할 수 있는 강력한 기능도 유지해야 한다. - 따라서 Figma는 다음 두 목표 사이의 균형을 맞춰야 한다. - 비전문가도 쉽게 아이디어를 표현할 수 있는 접근성 - 전문가와 조직이 복잡한 작업을 수행할 수 있는 확장성과 제어력 - 조직이 함께 협업하고 대규모로 의사결정할 수 있는 포용적인 환경도 중요하다고 강조한다. ## AI 인터페이스의 진화 - 현재의 AI는 프롬프트가 사실상 사용자 인터페이스인 ‘MS-DOS 시대’에 가깝다고 설명한다. - 앞으로는 사용자가 긴 명령어를 직접 입력하지 않아도 AI의 능력을 활용할 수 있는 새로운 디자인 패턴이 등장할 것으로 전망한다. - 컴퓨터의 기능을 대중에게 전달했던 GUI처럼, AI의 복잡한 능력을 직관적으로 보여주는 도메인별 인터페이스가 확산될 수 있다. - 이 과정에서 뛰어난 디자인은 AI의 기능을 이해하고 실제 업무에 적용하게 만드는 핵심 수단이 된다. ## Figma가 지향하는 공간 - 기술 발전이 빠르고 미래가 불확실해지더라도, 변화는 창의적이고 즐거운 가능성을 제공한다고 본다. - 세상을 바꾸는 것은 도구 자체가 아니라 도구를 사용하는 사람이라고 강조한다. - Figma는 개인과 팀이 아이디어를 키우고 협력할 수 있는 ‘평화로운 정원’ 같은 플랫폼이 되기를 희망한다. - 궁극적으로 사용자가 Figma를 활용해 세상을 조금 더 나은 방향으로 바꾸는 것이 회사의 지향점이다. Figma의 전략은 단기 수익 극대화보다 AI와 디자인 생태계의 변화에 선제적으로 투자하는 데 있다. 따라서 이 글은 Figma를 평가할 때 현재의 효율성보다 디자인의 대중화, AI 기반 워크플로, 장기적인 플랫폼 확장 가능성을 중심으로 보아야 한다는 메시지를 전달한다.

user-interface-designfigmaaigen-ai+2

figma2024년 3월 5일

기능 비하인드: 멀 (새 탭에서 열림)

Figma의 **멀티 편집(multi-edit)**은 여러 프레임이나 컴포넌트 세트에 속한 객체를 한 번에 선택하고 수정할 수 있게 해 반복 작업을 줄이는 기능이다. 이 아이디어는 2019년 variants 기능을 설계하던 중 시작됐지만, 선택 방식과 편집 동작을 새롭게 정의해야 해 오랜 기간 다듬어졌다. Figma는 멀티 편집처럼 사용자가 별도 학습 없이 자연스럽게 쓰는 기능을 만드는 일을 제품 개발의 중요한 목표로 본다. ## 멀티 편집의 출발점: variants의 반복 작업 - 2019년 variants 기능을 설계하던 중, 여러 변형에 같은 수정 작업을 반복해야 하는 문제가 드러났다. - Figma 팀은 이 문제를 해결하기 위해 이틀간 디자인 서밋을 열고 다양한 접근법을 논의했다. - 핵심 아이디어는 특정 모드에 들어가면 한 객체에 한 수정이 모든 variants에 동시에 적용되도록 하는 것이었다. - 이후 이 방식은 variants뿐 아니라 여러 디자인 객체를 한꺼번에 편집해야 하는 다양한 상황에도 유용하다고 판단됐다. - 팀은 화이트보드에 아이디어를 그린 뒤 이를 “multi-edit”라고 이름 붙였다. ## 기존 다중 선택 방식의 한계 - Figma는 이미 여러 객체를 선택해 일부 속성을 동시에 수정할 수 있었지만, 실용성에는 한계가 있었다. - 사용자가 실제로 수정하려는 객체만 정확히 선택하기 어려웠다. - 여러 객체를 선택한 뒤에도 편집 종류에 따라 결과가 제대로 작동하지 않았다. - 여러 객체의 색상 변경은 비교적 쉬웠지만, 크기 조정은 어려웠다. - 여러 텍스트 노드의 글꼴이나 글자 크기는 바꿀 수 있지만, 텍스트 내용 자체를 동시에 수정하기는 어려웠다. - 따라서 단순히 “여러 개를 선택하는 기능”이 아니라, 선택과 편집 동작 전체를 재설계해야 했다. ## 아이디어의 긴 숙성 기간 - 초기에는 멀티 편집을 고급 텍스트 편집기의 다중 커서처럼 강력한 별도 편집 모드로 구상했다. - 그러나 실제 구현을 검토하면서 Figma의 기존 선택 모델과 어떻게 결합할지 해결해야 했다. - 어떤 객체를 같은 대상으로 간주할지, 선택된 객체에 어떤 편집을 허용할지 등 핵심 원칙이 명확하지 않았다. - 이러한 문제를 정리하는 데 시간이 필요해 아이디어는 곧바로 개발되지 못하고 오랫동안 “동면” 상태에 머물렀다. - 글은 멀티 편집이 처음부터 완성된 기능이 아니라, 반복적인 시행착오와 세부 조정을 거쳐 출시됐음을 강조한다. ## 현재 제공되는 멀티 편집 사용법 - `⌘ Command + ⌥ Option + A`: 조건에 맞는 동일한 객체를 모두 선택한다. - `Shift`를 누른 채 드래그: 원하는 동일 객체만 직접 선택한다. - 여러 텍스트 객체를 선택한 뒤 `Enter`: 텍스트 멀티 편집 모드로 들어간다. - 컴포넌트 세트를 선택한 뒤 `Q`: variants 멀티 편집 모드로 전환한다. - 멀티 편집을 사용하면 여러 프레임과 컴포넌트 세트에 걸친 객체를 몇 번의 동작만으로 동시에 수정할 수 있다. ## 실용적인 결론 반복적으로 여러 화면이나 variants를 수정해야 한다면 멀티 편집을 우선 활용하는 것이 좋다. 특히 동일한 텍스트를 수정하거나 여러 컴포넌트의 공통 속성을 변경할 때 기존 객체를 하나씩 편집하는 것보다 훨씬 효율적이다.

user-interface-designfigmadesign-toolscomponent-variants+1

figma2024년 2월 26일

기능 비하인드: (새 탭에서 열림)

Figma는 프로토타입을 실제 기기에서 사용하는 경험에 가깝게 만들기 위해 모바일·태블릿·워치용 **인라인 디바이스 프레임**을 에디터 안에 도입했다. 사용자는 프레젠테이션 화면으로 이동하지 않고도 디자인 옆에서 기기 프레임을 배치·이동·크기 조절하며 프로토타입을 확인할 수 있다. 이 기능은 다양한 기기 형태를 반영하면서도 자연스러운 상호작용과 협업 중심의 디자인 프로세스를 유지하는 것을 목표로 개발됐다. ## 프로토타이핑을 현실에 가깝게 만드는 이유 - 실제 기기를 손에 들고 화면과 플로우를 확인하면 제품이 실제로 어떻게 작동하는지 더 잘 이해할 수 있다. - 프로토타입은 개발 전에 사용성 문제, 설계의 빈틈, 개선 기회를 발견하게 해준다. - Figma는 2023년 Config에서 실시간으로 프로토타입을 확인하는 **인라인 프리뷰**를 선보였고, 이후 기기 프레임까지 에디터 내부로 확장했다. - 프레젠테이션 뷰로 이동하지 않아도 디자인 작업과 실제 기기 맥락 확인을 동시에 할 수 있게 된 것이 핵심이다. ## 협업을 기반으로 한 기능 설계 - Figma는 기존 프레젠테이션 뷰에서 제공하던 다양한 기기 프리셋이 인기가 높다는 점에 주목했다. - 이를 에디터 안으로 가져와 디자인 옆에서 휴대폰, 태블릿, 워치 프레임을 사용할 수 있도록 했다. - 제품 디자이너, 엔지니어, 제품 관리자, 마케팅 담당자와 사용자 커뮤니티의 의견을 함께 반영했다. - 개발 과정에서 세운 핵심 원칙은 다음과 같다. - 디자인 작업 흐름에 자연스럽게 통합할 것 - 다양한 실제 기기를 현실적으로 표현할 것 - 기기의 상호작용 영역을 직관적으로 설계할 것 - 목표는 단순한 정적 이미지가 아니라, 사용자가 잡고 이동하고 크기를 조절할 수 있는 반응형 기기를 에디터 안에 구현하는 것이었다. ## 다양한 기기 형태의 표현 - 인라인 프리뷰 공간의 제약 때문에 초기 대상은 개인용 컴퓨터보다 상대적으로 작은 모바일, 태블릿, 워치로 한정했다. - 기기마다 화면 비율과 외형이 다르므로 하나의 고정된 프레임으로는 다양한 사용 환경을 표현하기 어렵다. - 스마트폰의 카메라와 센서를 수용하기 위해 화면 일부가 파인 **노치(notch)** 같은 요소도 고려해야 했다. - 화면뿐 아니라 기기 외곽, 모서리, 센서 영역 등 실제 사용 경험을 구성하는 시각적 요소를 함께 재현해야 했다. ## 자연스러운 크기 조절과 상호작용 - 인라인 디바이스 프레임은 디자인 요소처럼 에디터 안에서 이동하고 크기를 조절할 수 있어야 했다. - 특히 워치처럼 외형이 작고 복잡한 기기는 어느 영역을 드래그하거나 조작할 수 있게 할지 결정하기 어려웠다. - 프레임의 상호작용 가능한 영역, 즉 **히트 타깃**을 명확하고 직관적으로 설계하는 것이 중요한 과제였다. - 기기마다 형태가 다르더라도 사용자가 별도의 학습 없이 동일한 방식으로 조작할 수 있도록 상호작용 규칙을 정리해야 했다. ## 프로토타이핑 기능 전반의 개선 - 인라인 디바이스 프레임과 함께 여러 프로토타이핑 개선 사항도 제공됐다. - 연결선을 복사·붙여넣기해 인터랙션을 빠르게 복제할 수 있다. - 플로우를 빠르게 삭제하는 기능이 추가됐다. - 로컬 변수가 포함된 요소를 새 파일로 쉽게 가져올 수 있는 고급 기능도 제공됐다. - 주요 사용 사례에서 로딩 스피너가 나타나는 시간이 22% 줄어 성능도 개선됐다. 실무에서는 모바일·태블릿·워치 화면을 설계할 때 인라인 디바이스 프레임을 활용해 디자인과 실제 사용 맥락을 동시에 검토하는 것이 유용하다. 특히 기기별 화면 비율, 노치, 워치의 작은 터치 영역처럼 실제 환경에서 발생하는 문제를 개발 전에 확인하는 데 적합하다.

user-interface-designfigmaprototypingresponsive-design+2

figma2024년 1월 25일

디자인 시스템 도입을 가로 (새 탭에서 열림)

디자인 시스템은 대기업만을 위한 복잡한 도구가 아니라, 팀 규모와 관계없이 효율성·일관성·협업을 높이는 실용적인 체계다. 최신 유행이나 Material Design을 그대로 따르기보다 조직의 목표, 브랜드, 사용자에 맞춰 설계해야 한다. 또한 처음부터 모든 것을 직접 만들 필요 없이 공개된 리소스를 활용해 현실적인 범위에서 시작할 수 있다. ## 디자인 시스템은 대기업만을 위한 것이 아니다 - 규모가 작은 팀도 디자인 시스템을 통해 반복 작업을 줄이고 결과물의 일관성을 높일 수 있다. - 디자인 시스템의 형태는 조직마다 다를 수 있지만, 핵심 목적은 공통적이다. - 업무 효율 향상 - 제품 경험의 일관성 확보 - 디자이너와 개발자 간 협업 촉진 - 사례로 소개된 Mixpanel은 디자인 시스템을 개편해 비용을 절감하고, 일관성을 개선하며, 전사적으로 데이터 분석 접근성을 높였다. ## 최신 디자인 기법을 모두 적용해야 한다는 오해 - 디자인 트렌드는 계속 변하며, 모든 조직에 통하는 유일한 정답은 없다. - 다른 팀의 사례와 업계 동향은 참고할 수 있지만 그대로 복제할 필요는 없다. - “완벽하고 최신인 시스템”을 만드는 데 집중하면 실제 해결하려던 문제와 목표를 놓칠 수 있다. - 디자인 시스템은 유행을 보여주는 전시물이 아니라 다음을 지원해야 한다. - 조직의 구체적인 목표 - 실제 사용자 요구 - 팀의 업무 방식 - 지속 가능한 운영 ## Material Design이 모든 조직에 맞는 것은 아니다 - Google의 Material Design은 널리 알려진 표준이지만, 모든 제품에 그대로 적용할 수 있는 만능 해법은 아니다. - 조직의 디자인 시스템은 다음 요소를 반영해야 한다. - 브랜드의 고유한 정체성 - 제품 사용자의 needs - 조직의 비즈니스 목표 - 현재 조직이 처한 상황과 우선순위 - 업계 표준을 참고하되, 조직에 가장 적합한 방식과 균형을 찾아야 한다. - 글에서는 Uber Base, Google Material 3, Spotify Backstage, Pipedrive, Microsoft Teams, Salesforce Lightning 등의 디자인 시스템과 UI 키트를 비교 사례로 제시한다. ## 디자인 시스템을 처음부터 직접 만들어야 한다는 오해 - 글은 디자인 시스템을 반드시 처음부터 자체 제작해야 한다는 생각에 의문을 제기한다. - 공개된 오픈소스 디자인 시스템과 UI 리소스를 활용하면 초기 구축 비용과 시간을 줄일 수 있다. - 이미 검증된 리소스를 기반으로 시작한 뒤, 조직의 브랜드와 제품 요구에 맞게 수정하는 방식이 현실적이다. - 제공된 본문은 이 신화에 대한 설명 중간에서 끝나므로, 이후 네 번째부터 여섯 번째 신화의 전체 내용은 확인할 수 없다. 작게 시작하되 팀의 반복 문제와 실제 사용자 요구를 우선 해결하는 것이 좋다. 기존 오픈소스와 업계 사례는 출발점으로 활용하고, 최종 디자인 시스템은 조직의 브랜드·제품·업무 방식에 맞게 점진적으로 발전시키는 것이 바람직하다.

user-interface-designdesign-systemsopen-sourcedesign-thinking+3

figma2023년 11월 15일

피그마 + 어도비 (새 탭에서 열림)

2022년 발표된 Figma의 Adobe 인수합병은 협업형 디지털 제품 개발 도구와 Adobe의 창작 도구가 결합해 소비자에게 더 큰 혜택을 줄 수 있다는 취지로 설명됐다. Figma는 자신이 그래픽·마케팅 디자인 도구가 아니라 앱과 웹사이트를 팀 단위로 설계·개발하는 플랫폼이며, 경쟁 시장도 매우 역동적이라고 강조했다. 다만 규제 당국의 승인을 받지 못해 2023년 12월 양사는 인수합병을 포기했다. ## Figma가 해결하는 문제 - Figma는 디지털 제품을 만드는 팀을 위한 웹 기반 디자인 도구다. - 주요 사용자는 디자이너뿐 아니라 개발자, 제품 관리자 등 제품 개발에 참여하는 모든 구성원이다. - 제품 개발 과정 전체를 지원한다. - **FigJam**: 아이디어 발상과 브레인스토밍 - **Figma**: UI 설계와 프로토타이핑 - **Dev Mode**: 디자인과 프로토타입을 개발자가 코드로 구현하도록 지원 - 규제 당국이 Figma의 사업과 시장 위치를 잘 이해하지 못했기 때문에, 회사는 이를 설명하는 데 수천 시간을 들였다고 밝혔다. ## 그래픽 디자인과 디지털 제품 개발의 차이 - 전통적인 그래픽 디자인은 광고, 포스터, 일러스트처럼 시각적 결과물을 만드는 데 초점을 둔다. - Figma의 고객은 상호작용하는 앱과 웹사이트를 구축한다. - 디지털 제품 개발에는 디자인뿐 아니라 개발, 기획, 프로토타이핑 등 다양한 역할과 도구가 필요하다. - 따라서 Figma는 단순한 이미지 제작 도구가 아니라 여러 직군이 함께 제품을 설계하는 협업 플랫폼으로 포지셔닝됐다. ## 경쟁 시장의 확대 - 제품 개발 도구 시장에는 여러 유형의 경쟁자가 존재한다. - 종합 디자인 도구: Sketch, Figma, Penpot - 특화 도구: Miro, Flinto, Anima, ProtoPie, Zeplin - 로우코드 플랫폼: Salesforce 등 - 앱과 웹사이트가 기업과 사용자에게 필수 요소가 되면서 관련 도구 시장도 크게 성장했다. - AI 발전으로 제품 개발 도구의 혁신 속도도 빨라지고 있다. - 새로운 스타트업과 서비스가 지속적으로 등장해 경쟁 구도가 빠르게 변하며, 규제 당국에 제시한 경쟁사 목록조차 몇 주 만에 outdated될 정도라고 설명한다. ## Adobe와 Figma의 차이 - Adobe는 과거 Figma와 경쟁하려고 Adobe XD를 운영했지만, 새로운 기능 개발을 중단하고 유지보수 모드로 전환했다. - Photoshop과 Illustrator는 사진 편집과 고급 일러스트레이션에 강점을 가진다. - 반면 Figma는 팀 협업, 웹·앱 UI 설계, 프로토타이핑과 개발 연계에 특화돼 있어 두 회사의 핵심 제품과 사용 목적이 다르다고 주장했다. ## 인수합병의 기대 효과 - Figma는 협업형 제품 디자인과 개발에 집중한다. - Adobe는 전 세계 수억 명이 사용하는 창작 도구와 기술을 보유하고 있다. - 양사의 강점이 상호보완적이므로 결합하면 다음과 같은 효과가 가능하다고 설명했다. - 디자인과 창작 도구 간 연결 강화 - 더 많은 사용자를 위한 제품 개발·창작 기능 제공 - AI와 Adobe의 기술을 활용한 새로운 디자인 경험 - 디지털 제품 제작과 시각적 창작 영역의 통합 - 그러나 이러한 기대는 규제 승인이라는 전제에 달려 있었고, 결국 15개월간의 심사 끝에 승인 가능성이 없다고 판단해 거래가 종료됐다. 실질적으로 이 글은 인수합병의 장점을 설명하는 Figma의 입장을 담은 FAQ이지만, 최종적으로는 거래가 무산됐다는 후속 결과까지 함께 고려해야 한다.

user-interface-designfigmaaiprototyping+4

figma2022년 10월 5일

기능 비하인드: 찾 (새 탭에서 열림)

Figma의 ‘찾기 및 바꾸기’는 단순한 검색창 추가가 아니라, 캔버스 구조에 맞는 결과 정렬과 탐색 경험을 설계해야 하는 복합적인 기능이었다. 팀은 기존 플러그인 경험과 프로토타입을 바탕으로 FigJam에서 핵심 검색 경험을 먼저 검증한 뒤, 섹션과 공간적 근접성을 활용해 자연스러운 결과 순서를 구현했다. 이 과정에서 실험, 실제 파일 사용, 사내 피드백을 반복하며 기능을 다듬었다. ## 직관적인 검색 경험을 설계하기 - 기능 범위를 정하기 전 디자인 팀과 브레인스토밍을 진행했다. - 엔지니어링, 제품 관리, UX 라이팅, 제품 마케팅이 참여하는 협업 그룹을 구성했다. - 다른 도구의 검색 경험을 분석해 다음 원칙을 세웠다. - 빠르고 가벼울 것 - 캔버스를 이동할 때도 매끄러울 것 - 브라우저 등 익숙한 검색 방식과 유사할 것 - 실제 파일에서 사용해 보기 전에는 검색 경험을 정확히 평가하기 어려웠기 때문에, 디자이너가 기존 플러그인 개발 경험을 활용해 초기 프로토타입을 제작했다. - 이후 엔지니어링 팀이 디자인과 구현을 함께 반복했고, Figma 구성원들이 일상 업무에서 사용하며 피드백과 버그 탐색에 참여했다. ## FigJam에서 핵심 경험부터 검증하기 - 팀은 복잡한 Figma 파일보다 FigJam에서 먼저 기능을 구현했다. - 초기 목표는 다음 두 가지로 제한했다. - 파일 안의 텍스트 찾기 - 검색 결과 사이를 순서대로 이동하기 - 이를 통해 다양한 객체 유형과 복잡한 파일 구조를 지원하기 전에 검색의 기본 동작과 사용성을 검증했다. ## 캔버스에 맞는 검색 결과 정렬 - 웹페이지나 문서와 달리 Figma와 FigJam의 콘텐츠는 위에서 아래로 흐르지 않는다. - 객체가 캔버스의 여러 방향에 흩어져 있고, 사용자가 만든 공간적 구조도 파일마다 다르다. - 따라서 검색 결과의 순서가 예측 가능하면서도 캔버스의 시각적 구조와 어울려야 했다. - 정렬이 부자연스러우면 검색 결과를 따라갈 때 화면이 갑자기 멀리 이동해 탐색 경험이 끊길 수 있었다. ### 기존 행 단위 정렬의 한계 - 첫 구현에서는 프로토타이핑 엔진이 사용하던 행 단위 정렬 로직을 재활용했다. - 슬라이드처럼 객체가 규칙적으로 배치된 문서에서는 이 방식이 효과적이었다. - 하지만 FigJam처럼 스티키 노트와 도형이 캔버스 곳곳에 흩어진 경우에는 논리적인 그룹을 반영하지 못했다. - 단순히 좌우·상하 위치만 기준으로 삼으면 사용자가 인식하는 주제별 묶음과 검색 순서가 달라질 수 있었다. ## 섹션과 공간적 근접성 활용 - FigJam에 섹션 기능이 도입되면서 캔버스 콘텐츠를 더 명확하게 구조화할 수 있게 됐다. - 검색 결과를 섹션별로 정렬하면 사용자가 시각적으로 묶어 둔 그룹을 따라 자연스럽게 탐색할 수 있었다. - 실제 팀 사용 패턴을 분석한 결과, 브레인스토밍에서는 다음과 같은 구조가 자주 나타났다. - 관련 스티키를 한곳에 모아 핵심 주제를 도출함 - 답변이나 후속 의견을 겹쳐 배치해 대화의 흐름을 표현함 - 섹션에 속하지 않은 객체를 위해 공간적 정렬 알고리즘도 도입했다. - 이 알고리즘은 객체 사이의 거리를 기준으로 가까운 요소를 그룹화해, 흩어진 스티키에서도 논리적인 검색 결과 묶음을 만들었다. ## 휴리스틱을 통한 정렬 방향 결정 - 섹션의 위치와 형태가 검색 결과의 진행 방향에 어떤 영향을 주는지 분석했다. - 다양한 캔버스 배치와 실제 사용 사례를 테스트하며 정렬 규칙을 휴리스틱으로 정리했다. - 즉, 하나의 고정된 정렬 알고리즘만 적용하기보다 섹션 구조, 객체의 위치, 주변 요소와의 거리 등을 종합해 결과 순서를 결정하려 했다. - 이 접근은 Figma와 FigJam처럼 사용자가 자유롭게 구조를 만드는 캔버스 제품에서 검색 결과를 예측 가능하게 만드는 데 초점을 둔다. ## 실용적인 시사점 캔버스 기반 제품의 검색 기능은 텍스트 매칭만으로 완성되지 않는다. 검색 결과를 어떤 순서로 보여주고 화면을 어떻게 이동시킬지가 핵심이므로, 제품의 공간적 구조와 사용자의 그룹화 습관을 반영해야 한다. 특히 초기에는 제한된 환경에서 핵심 경험을 검증하고, 프로토타입과 실제 사용자 피드백을 반복적으로 결합하는 방식이 효과적이다.

user-interface-designfigmafigjamfind-and-replace+2

figma2022년 5월 10일

피그마 커뮤 (새 탭에서 열림)

피그마(Figma)는 2022년 처음으로 개최된 '피그마 커뮤니티 어워즈(Figma Community Awards)'의 최종 우승작들을 발표하며 전 세계 디자인 생태계의 혁신을 공유했습니다. 이 어워즈는 전 세계 디자이너들이 매일 1,600개 이상 업로드하는 UI 키트, 플러그인, 위젯 등의 리소스 중 커뮤니티의 투표를 통해 가장 가치 있는 도구들을 선정하는 행사입니다. 이를 통해 피그마는 제작자들의 공로를 기리는 동시에, 협업 디자인의 미래를 이끌어갈 우수한 리소스들을 공식적으로 조명했습니다. #### 생산성을 극대화하는 플러그인과 위젯 * **Similayer (Dave Williames):** 다양한 레이어 속성을 기준으로 유사한 레이어를 한꺼번에 선택할 수 있게 해주어 복잡한 편집 작업을 비약적으로 단축합니다. * **Content Reel (Microsoft/Eugene Gavriloff):** 텍스트 스트링, 이미지, 아이콘 등 디자인에 필요한 더미 데이터를 한데 모아 실시간으로 적용할 수 있는 유틸리티를 제공합니다. * **FigJenda (PG Gonni):** 피그잼(FigJam) 타이머와 연동되는 인터랙티브 아젠다 위젯으로, 워크숍이나 회의의 흐름을 효율적으로 관리할 수 있도록 돕습니다. * **Rock Paper Scissors (Alex Einarsson):** 팀원 간의 간단한 의사결정을 돕는 가위바위보 게임 위젯으로, 협업 과정에 재미 요소를 더했습니다. #### 디자인 자산 및 시스템 리소스 * **Ant Design Open Source (Mr Biscuit/Vinh Bui):** 유연한 인스턴스 활용과 구조적 단순함을 갖춘 대규모 오픈소스 디자인 시스템으로, 완성도 높은 UI 구축을 지원합니다. * **css.gg (Lona/Astrit):** 순수 CSS, SVG 및 피그마용 UI 아이콘 700여 개를 포함한 방대한 아이콘 세트입니다. * **Sketch Elements Brushes Set (Streamline):** 추상적인 요소와 스케치 주석 테마를 제공하여 그래픽 디자인의 디테일을 살려주는 리소스입니다. #### 협업 및 교육용 템플릿 * **Remote Design Sprint (Miranda Mazzara 외):** 사전 경험이 없는 팀도 5일간의 디자인 스프린트를 원활하게 진행할 수 있도록 설계된 피그잼 전용 템플릿입니다. * **Customer Journey Map (Fuad Aslan):** 고객의 경험을 심도 있게 분석하고 시각화할 수 있는 프레임워크를 제공합니다. * **Micro interactions - Prototyping (Rusmir Arnautovic):** 피그마의 프로토타이핑 기능을 활용해 정교한 마이크로 인터랙션을 구현하는 방법을 보여주는 교육 자료입니다. #### 커뮤니티 어워즈의 운영 방식과 의의 * **사용자 참여 기반 선정:** 피그마 커뮤니티 프로필을 보유한 사용자들이 직접 후보를 추천하고 최종 후보군에 대해 투표를 진행하여 투명성을 확보했습니다. * **창작자 지원 및 보상:** 최종 우승자에게는 피그마 컨퍼런스인 'Config'에서 수상의 영예와 함께 데스크톱에 전시할 수 있는 실물 트로피, 특별 굿즈가 제공됩니다. * **공유 생태계 장려:** 누구나 자신의 작업을 퍼블리싱하여 후보가 될 수 있도록 장려함으로써 디자인 지식의 공유와 개방성을 강조합니다. 이번 어워즈에서 선정된 도구들은 피그마 전문가들이 검증한 최상의 리소스들입니다. 업무 효율을 높이고 싶거나 팀의 협업 프로세스를 개선하고자 한다면, 위에서 언급된 플러그인과 템플릿들을 커뮤니티에서 검색하여 실무에 직접 활용해 보시는 것을 적극 추천합니다.

user-interface-designfigmadesign-systemsprototyping+4

figma2021년 5월 26일

댄틀리 데이비스와의 Q (새 탭에서 열림)

Dantley Davis는 디자인을 형식과 기능을 통한 문제 해결로 보고, 의도적인 창작과 데이터 기반 판단을 강조한다. 그는 좋은 팀이 되려면 호기심, 피드백, 상호 신뢰, 낮은 자아가 필요하며, 디자인 리더는 다양한 분야를 이해하고 포용적인 팀을 만들어야 한다고 말한다. 개인적으로는 창의성을 유지할 시간과 부수 프로젝트가 중요하며, 역경을 영향력으로 전환하는 태도를 보여준다. ## 디자인 철학과 창작 과정 - 창작 과정의 핵심은 **“의도적(intentional)”**인 접근이다. - 좋은 디자인은 사용자가 필요성을 인식하지 못했던 문제를 해결해, 해결된 뒤에는 없이는 살 수 없게 만드는 디자인이다. - 디자인은 **형식과 기능을 통한 문제 해결**이다. - 가장 큰 디자인의 두려움은 작업물이 사람들에게 아무런 반응도 일으키지 못하는 것이다. - 자기 자신만을 기준으로 디자인하는 것을 가장 큰 문제점으로 꼽았다. - 업무 외에 개인 시간을 갖고 사이드 프로젝트를 진행할 때 가장 창의적이고 최고의 상태가 된다고 설명했다. ## 데이터와 인접 분야의 중요성 - 디자인 업계에서 ‘사상적 리더(thought leader)’라는 지위는 과대평가되어 있다고 본다. - 반대로 데이터를 활용해 디자인 결정을 뒷받침하는 일은 과소평가되어 있다고 말한다. - 젊은 디자이너에게는 비즈니스, 엔지니어링, 금융 등 인접 분야를 공부하라고 조언한다. - 다양한 분야에 대한 이해는 디자이너를 더 균형 잡힌 사고를 하는 사람으로 만든다. - 최근 출시한 제품이나 기능이 사용자에게 실질적인 가치를 주지 못했다면, 오래 유지하기보다 빠르게 제거하는 판단도 필요하다고 지적했다. ## 신뢰와 피드백을 기반으로 한 팀 - 좋은 협업자는 호기심이 많고 자아가 강하지 않은 사람이다. - 팀이 진정한 팀처럼 느껴지려면 다음 조건이 필요하다. - 서로를 신뢰하고, 팀과 개인을 개선하기 위해 적극적으로 피드백을 요청한다. - 구성원들이 자신의 작업이나 관점으로 서로에게 영감을 준다. - 개인의 자아나 지위가 협업을 방해하지 않는다. - Davis가 경력에서 가장 자랑스럽게 생각하는 성과는 **기술 업계에서 가장 다양한 팀을 만든 것**이다. - 디자인 리더십은 개인의 결과물뿐 아니라 팀의 구성과 문화까지 책임지는 역할로 확장된다. ## 디자인의 사회적·문화적 영향 - Davis는 Design Twitter 커뮤니티에서 멘토 역할을 하려 한다. - 기술 업계에서 디자이너이자 리더로 일하며 얻은 경험을 다른 디자이너들과 공유하려고 한다. - Roblox를 훌륭하지만 주목받지 못한 디자인 사례로 꼽았다. - 아이들이 게임을 즐기는 데 그치지 않고, 서로 소통하고 직접 무언가를 만들 수 있다. - 단순 소비에 집중하는 많은 앱과 달리 참여와 창작을 가능하게 한다. - Afrotech의 가상 콘퍼런스도 인상적인 사례로 언급했다. - 사용자가 아바타를 만들고 가상 세계를 이동할 수 있었다. - 온라인 행사에 물리적 현장감과 존재감을 더했다. ## 개인적 취향과 관심 분야 - 선호하는 UI 글꼴은 Montserrat이며, 좋아하는 서체는 Akzidenz-Grotesk다. - 색상 표기 방식으로는 Hex를 선호하고, 대표 색상으로 `#000000`을 제시했다. - 1990년대 웹의 시각적 스타일을 다시 가져오고 싶다고 답했다. - Porsche의 자동차와 브랜드 생태계를 디자인하고 싶어 한다. - 실제 주행 경험부터 모바일 앱까지 연결된 전체 경험을 포함한다. - 오랫동안 자동차 인터페이스를 디자인하고 싶어 했으며, 이동 경험과 디지털 제품의 결합에 관심을 보였다. - Figma 기능 중에서는 다른 사람의 작업을 관찰할 수 있는 **Observation Mode**를 가장 좋아한다고 밝혔다. ## 디자인 리더에게 필요한 태도 - 디자인 리더는 작업 결과뿐 아니라 팀의 다양성, 문화, 협업 방식을 함께 설계해야 한다. - 업계의 명성이나 ‘리더’라는 호칭보다 실제 문제 해결과 사용자에게 미치는 영향이 중요하다. - 자신이 만든 결과물에 애착을 갖더라도, 사용자에게 의미 있는 혜택을 주지 못한다면 제거할 수 있어야 한다. - 자신의 전문 영역에만 머물지 않고 비즈니스와 기술 등 주변 분야를 이해해야 더 큰 영향력을 발휘할 수 있다. 실무적으로는 디자인 과정에 데이터를 적극 활용하고, 팀 내 피드백을 일상화하며, 사용자의 실제 가치가 낮은 기능은 과감히 개선하거나 제거하는 것이 Davis의 조언을 적용하는 방법이다.

user-interface-designfigmadesign-systemsweb-design+2

figma2019년 12월 17일

Made in Figma, 201 (새 탭에서 열림)

2019년 Figma 사용 데이터를 보면 디자인은 더 개방적이고 협업적인 활동으로 발전했으며, 디자인 작업을 정량적으로 분석하려는 흐름도 커졌다. 사용자들은 차가운 계열의 색상과 Google Fonts를 선호했고, 데스크톱·모바일 등 다양한 화면 크기를 기준으로 작업했다. 또한 하나의 디자인 파일에 여러 직군이 참여하며, 파일은 개인 작업에서 협업 작업으로 확장되는 양상을 보였다. ## 분석의 배경과 방법 - Figma는 2019년 사용자들의 디자인 경향을 파악하기 위해 익명화된 제품 데이터를 분석했다. - 분석 대상에는 다음과 같은 항목이 포함됐다. - 자주 사용된 색상과 폰트 - 텍스트 스타일과 굵기 - 가장 많이 선택된 프레임 크기 - 하나의 파일에서 협업한 사용자 수와 작업 흐름 - 디자인 시스템 분석 기능의 등장으로 디자인 작업의 가치와 활용도를 수치로 평가할 가능성도 커졌다. ## 차가운 계열 색상의 선호 - 회색 계열을 제외하면 녹색과 파란색이 가장 많이 사용됐다. - 가장 많이 사용된 비회색 색상은 `#009688`이었다. - 그 뒤를 짙은 파란색인 `#455A64`, `#263238`이 이었다. - 이는 2019년 Pantone 올해의 색상인 Living Coral(`#FF6F61`)과는 대조적인 결과였다. ## Google Fonts 중심의 폰트 사용 - 가장 많이 사용된 폰트는 다음과 같았다. - Montserrat - Open Sans - Lato - 상위 10개 폰트 중 6개가 Google Fonts였다. - SF Pro Text, SF Pro Display, Proxima Nova처럼 기본 제공 폰트가 아닌 글꼴도 상위권에 포함됐다. - 시스템 폰트 중에서는 Helvetica보다 Arial의 사용량이 많았다. - Figma의 기본 폰트인 Roboto는 순위에서 제외됐지만, 이를 포함하면 상위 11개 폰트가 전체 폰트 사용량의 90%를 차지했다. - Font Awesome은 아이콘 폰트임에도 31위를 기록했다. - Times New Roman은 55위였고, 첫 번째 세리프 폰트인 Playfair Display는 22위에 올랐다. ## 굵은 글꼴과 텍스트 스타일 - 사용자는 이탤릭체보다 글꼴 굵기를 조정하는 경향이 훨씬 강했다. - 글꼴을 굵게 조정하는 작업은 이탤릭체 적용보다 13배 더 자주 발생했다. - Figma 파일의 약 3분의 1은 bold 또는 heavy 스타일을 사용했다. - 이는 가독성뿐 아니라 시각적 위계와 강조를 위해 굵은 글꼴이 널리 활용됐음을 보여준다. ## 프레임과 화면 크기 선택 - Figma는 디자인 시작점으로 사용할 수 있는 36개의 사전 정의 프레임을 제공했다. - 전체 파일의 33%가 이 프리셋 프레임 중 하나로 시작됐다. - 가장 인기 있는 프레임은 `1440 × 1024` 데스크톱 화면이었다. - 그 뒤를 iPhone X와 iPhone 8 프레임이 따랐다. - Windows 사용자가 macOS 사용자보다 훨씬 많다는 점을 고려하면, 실제 운영체제 점유율과 디자인 대상 기기의 우선순위가 반드시 일치하지는 않았다. ## 개인 작업에서 팀 협업으로의 확장 - Figma는 디자인을 더 개방적이고 협력적인 활동으로 만들겠다는 방향을 제품에 반영했다. - 대규모 조직의 파일을 기준으로 하면 파일당 평균 협업자 수는 6명이었다. - 협업자는 디자이너뿐 아니라 다음과 같은 직군을 포함할 수 있었다. - 개발자 - 제품 관리자 - 라이터 - 조직 내 다른 이해관계자 - 일반적인 파일은 처음에 한 명의 사용자가 독립적으로 작업하며 시작됐다. - 평균 19일이 지나면 첫 번째 협업자가 초대됐다. - 초대된 협업자는 리뷰, 댓글 작성, 공동 디자인 등의 방식으로 파일에 참여했다. ## 실용적인 시사점 - 디자인 시스템과 협업의 효과를 평가할 때 사용 빈도, 참여자 수, 파일의 변화 과정 같은 데이터를 활용할 수 있다. - 폰트와 색상 선택에서는 유행보다 브랜드 맥락과 가독성을 우선하되, 사용자가 익숙하게 접근할 수 있는 표준 리소스도 고려할 만하다. - 파일을 개인 작업물로 끝내지 않고 개발·기획·콘텐츠 담당자와 공유하면 디자인 의사결정 과정이 더 투명해질 수 있다.

user-interface-designfigmadesign-systemsprototyping+2

figma2019년 11월 21일

일터에서의 인간미: Gust (새 탭에서 열림)

Gusto는 기존 브랜드가 고객에게 제공하는 인간적인 경험을 충분히 반영하지 못한다고 판단해 전사적인 리브랜딩을 추진했습니다. 이 과정에서 Figma를 디자인 도구를 넘어 마케팅·콘텐츠·제품·브랜드 팀이 함께 사용하는 협업 플랫폼으로 활용했습니다. 그 결과 브랜드 철학을 로고와 캠페인뿐 아니라 제품 UI와 고객 경험 전반에 일관되게 적용하고, 여러 제품으로 확장 가능한 디자인 시스템을 구축했습니다. ## 사람 중심의 리브랜딩 - Gusto는 2012년 ZenPayroll로 시작해 10만 개 이상의 소규모 사업체에 급여, 복지, 인사 업무 자동화 서비스를 제공했습니다. - 고객들은 플랫폼을 긍정적으로 평가했지만, 기존 브랜드가 Gusto가 제공하는 인간적인 경험을 제대로 보여주지 못한다고 판단했습니다. - 리브랜딩의 목표는 로고만 바꾸는 것이 아니라 다음 요소를 하나의 브랜드 철학으로 통합하는 것이었습니다. - 브랜드 인지도 - 제품 개발 - 고객 경험 - 마케팅과 커뮤니케이션 - Gusto의 브랜드 책임자는 브랜드를 마케팅 부서나 브랜드 디자인 팀만의 소유물이 아니라, 사용자가 회사와 접촉하며 경험하는 모든 것의 총합으로 정의했습니다. ## 전사적 동의를 만드는 과정 - 리브랜딩의 가장 큰 과제는 약 1,000명의 구성원이 새 브랜드를 이해하고 실제 업무에 적용하도록 만드는 것이었습니다. - 이를 위해 모든 팀이 같은 도구를 사용하며 다음 활동을 할 수 있어야 했습니다. - 진행 중인 디자인을 실시간으로 확인 - 아이디어 공유 - 디자인에 대한 의견 교환 - 결과물에 대한 공동 소유 의식 형성 - Figma는 디자인팀뿐 아니라 콘텐츠, 제품 마케팅, 고객 확보팀 등 다양한 조직이 프로젝트에 참여할 수 있게 했습니다. - 디자인 과정이 공개되면서 비디자이너도 디자인이 만들어지는 방식과 의사결정 과정을 이해할 수 있었고, 디자인의 가치에 대한 공감대도 높아졌습니다. ## 비디자이너를 디자인 과정에 참여시키기 - Gusto는 Figma를 다음과 같은 리브랜딩 작업 전반에 활용했습니다. - 무드보드 - 타이포그래피 - UI 디자인 - 광고판과 같은 오프라인 캠페인 - 브랜드 적용 예시 - 실시간 협업 기능을 통해 관련자들이 동일한 파일을 보며 작업 상황을 확인했습니다. - 댓글 기능을 사용해 이메일이나 Slack처럼 분리된 대화가 아니라 디자인 파일 안에서 직접 의견을 주고받았습니다. - 이러한 방식은 피드백의 맥락을 보존하고, 디자이너와 다른 직군 사이의 커뮤니케이션 비용을 줄였습니다. ## 브랜드팀과 제품팀의 공동 작업 - Gusto는 제품 디자인팀과 브랜드 디자인팀을 리브랜딩의 동등한 참여자로 구성했습니다. - 두 팀은 공동 브레인스토밍과 워크숍을 열어 다음 요소를 함께 결정했습니다. - 색상 팔레트 - 타이포그래피 - 제품에 적용할 브랜드 스타터 템플릿 - Figma에서 여러 사람이 동시에 작업하면서 새 브랜드 요소를 제품의 다양한 영역에 적용해 볼 수 있었습니다. - 제품팀은 브랜드 가이드라인과 워크숍 결과를 바탕으로 새로운 UI 키트를 제작했습니다. - 목표는 단순히 제품 전체에 브랜드를 반복 적용하는 것이 아니라, 특정 화면과 순간에 브랜드를 더욱 인상적이고 영감을 주는 방식으로 드러내는 것이었습니다. - 초기 단계부터 브랜드와 제품팀이 함께했기 때문에 브랜드를 제품 경험 전체로 확장하는 과정이 자연스럽게 이어졌습니다. ## 여러 제품으로 확장 가능한 디자인 시스템 - 리브랜딩은 시각적 결과물뿐 아니라 디자이너들이 협업하는 방식과 시스템을 정립하는 계기이기도 했습니다. - Gusto는 제품이 어떤 모습이어야 하는지에 대한 단일 기준, 즉 “시스템 오브 레코드”가 필요했습니다. - 이를 위해 제품 디자인팀은 Figma의 다음 기능을 활용해 UI 키트를 구축했습니다. - 공유 라이브러리 - 재사용 가능한 컴포넌트 - 브랜드 가이드라인을 반영한 UI 요소 - 이 시스템은 각 제품과 화면에서 일관된 디자인을 유지하고, 새로운 브랜드를 회사 규모에 맞게 확장하는 기반이 되었습니다. ## 실용적인 시사점 - 리브랜딩은 브랜드팀만의 프로젝트가 아니라 제품, 마케팅, 콘텐츠, 개발 등 고객 경험에 관여하는 모든 팀의 공동 작업이어야 합니다. - 디자인 파일을 협업의 중심에 두고 실시간 확인과 댓글을 활성화하면 비디자이너의 참여와 이해를 높일 수 있습니다. - 브랜드 가이드라인을 실제 UI 키트, 라이브러리, 컴포넌트로 연결해야 브랜드가 제품 경험에 일관되게 적용되고 장기적으로 확장됩니다.

user-interface-designfigmadesign-systemscollaborative-design+2

figma2019년 1월 10일

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

Figma의 **Smart Selection 2D**는 여러 요소를 일일이 재배치하는 번거로움을 줄이고, 목록과 격자 형태의 레이아웃을 빠르게 정돈하는 기능이다. 기존 Smart Selection이 가로 또는 세로 목록 정리에 유용했다면, 2D 버전은 가로·세로 방향을 모두 지원해 사진 갤러리, 프레젠테이션 슬라이드, 카드 그리드 등을 효율적으로 배열할 수 있다. 이를 통해 디자이너는 레이아웃 조정보다 콘텐츠 작업에 더 집중할 수 있다. ### Smart Selection의 목적 - 여러 디자인 요소의 위치와 간격을 수작업으로 맞추는 반복 작업을 자동화한다. - 요소들을 선택한 뒤 **Tidy Up**을 실행하면 일정한 간격과 정렬을 기준으로 자동 배치한다. - 기존 기능은 특히 가로 또는 세로로 나열된 목록을 정리하는 데 효과적이었다. - Figma는 이 기능이 디자이너의 작업 시간을 크게 줄여 주었다는 사용자 반응을 바탕으로 기능을 확장했다. ### 가로·세로 목록을 함께 정리하는 Smart Selection 2D - Smart Selection 2D는 요소를 수평 방향뿐 아니라 수직 방향으로도 정리한다. - 행과 열이 있는 2차원 격자 구조를 지원한다. - 여러 요소를 선택한 후 정돈하면 각 요소의 위치와 간격을 일관되게 맞출 수 있다. - 목록뿐 아니라 이미지나 카드처럼 반복되는 콘텐츠를 그리드 형태로 배치할 때도 활용할 수 있다. ### 간격 조정과 레이아웃 관리 - Smart Selection 2D에서는 목록과 그리드의 간격을 조정할 수 있다. - 요소를 직접 하나씩 이동하지 않고도 전체 레이아웃의 간격을 균일하게 유지할 수 있다. - 요소를 추가하거나 순서를 바꾼 뒤에도 전체 배열을 다시 정돈하기 쉽다. - 레이아웃 구성에 소요되는 시간을 줄여 콘텐츠 제작과 디자인 의사결정에 집중하도록 돕는다. ### 대표적인 활용 사례 - **사진 갤러리** - 여러 이미지를 행과 열로 빠르게 재배열할 수 있다. - 이미지 순서를 바꾸거나 갤러리의 간격을 조정할 때 유용하다. - **프레젠테이션 슬라이드** - 슬라이드 썸네일을 일렬 또는 격자 형태로 정리할 수 있다. - 슬라이드 순서를 쉽게 바꾸면서도 일정한 배치를 유지할 수 있다. - **반복적인 카드·콘텐츠 목록** - 카드, 아이콘, 상품 이미지 등 반복 요소를 규칙적인 그리드로 배치할 수 있다. - 여러 요소를 동시에 조정해야 하는 화면 설계에 적합하다. ### 기능 확장의 의미 - Smart Selection 2D는 단순한 정렬 도구를 넘어 반복적인 레이아웃 편집을 자동화한다. - Figma는 사진 갤러리와 슬라이드 배열 같은 구체적인 예시를 통해 기능의 활용 가능성을 소개했다. - 핵심은 디자인 요소를 정돈하는 시간을 줄이고, 디자이너가 실제 콘텐츠와 구성에 더 많은 시간을 쓰게 하는 것이다. 반복 요소가 있는 화면을 작업한다면 요소를 개별적으로 이동하기보다 Smart Selection 2D로 전체를 선택한 뒤 **Tidy Up**과 간격 조정을 활용하는 것이 효율적이다. 특히 사진 갤러리, 카드 그리드, 슬라이드 목록처럼 행과 열 구조가 분명한 레이아웃에서 효과가 크다.

user-interface-designfigmasmart-selectionlayout-design+1

figma2018년 10월 9일

Figma의 새로운 핑거 (새 탭에서 열림)

Figma는 키보드 단축키를 익히는 일이 마우스 조작보다 어렵지만, 숙련되면 손의 운동기억을 통해 작업 속도와 몰입을 크게 높일 수 있다고 설명합니다. Douglas Engelbart의 마우스·키셋 시연에서 영감을 받아, 사용자의 작업 흐름에 맞는 단축키를 쉽게 발견하고 연습하도록 새로운 키보드 단축키 패널을 도입했습니다. 이 패널은 작업 유형별 단축키를 보여주고, 사용자가 누른 단축키를 강조해 학습을 돕습니다. ## 엥겔바트의 시연과 양손 입력 - 1968년 Douglas Engelbart는 문서 작성, 그래픽 추가, 문서 간 링크, 원격 협업과 채팅을 한 자리에서 보여주는 획기적인 컴퓨터 시연을 진행했습니다. - 오른손에는 마우스, 왼손에는 키셋을 사용했습니다. - 마우스로 단어를 가리키는 동시에 왼손으로 `DW(Delete Word)`를 입력해 단어를 삭제하는 방식이 핵심 장면으로 소개됩니다. - 마우스가 “무엇을 선택할지” 지정한다면, 키셋은 “선택한 대상에 무엇을 할지” 명령하는 역할을 했습니다. - 반복적인 손동작이 운동기억에 저장되면 피아노 연주나 춤처럼 의식적으로 동작을 계산하지 않고도 작업할 수 있습니다. ## Figma 작업과 키보드 단축키 - 숙련된 Figma 사용자는 캔버스를 이동하고, 객체 스타일을 바꾸고, 디자인을 생성하는 과정을 손을 보지 않고 빠르게 수행합니다. - 이는 Engelbart의 방식처럼 한 손은 마우스에, 다른 손은 키보드에 두는 입력 방식과 유사합니다. - 마우스는 초보자도 쉽게 익힐 수 있지만, 키보드 단축키는 탐색과 반복 연습을 통해 운동기억에 정착시켜야 합니다. - 단축키가 익숙해지면 도구 자체보다 해결하려는 디자인 문제에 집중하는 ‘몰입 상태’에 가까워질 수 있습니다. ## 기존 단축키 패널의 문제 - 기존 패널은 정보를 한눈에 파악하기 어려웠습니다. - 화면 전체를 차지해 단축키를 실제로 사용하면서 학습하기도 불편했습니다. - 단축키가 어떤 작업과 연관되는지 쉽게 탐색하기 어려웠습니다. ## 작업 중심의 새로운 단축키 패널 - 새 패널은 캔버스 아래쪽에 표시되어 작업 화면을 과도하게 가리지 않습니다. - 화면 오른쪽 아래의 물음표 메뉴에서 **Keyboard Shortcuts**를 선택하거나 `Ctrl+Shift+?`로 열 수 있습니다. - 작업 유형별 카테고리를 제공해 현재 작업에 필요한 단축키를 바로 찾아볼 수 있습니다. - 벡터 작업: 도형 편집, 구부리기 등 - 타이포그래피 작업: 글꼴 관련 단축키 - 양손 사용이 필요한 유용한 조합을 별도 탭에서 소개합니다. - 예: `Alt`를 누른 채 마우스를 움직이면 객체 간 거리나 크기를 쉽게 측정할 수 있습니다. - 초보자를 위한 기본 단축키 탭도 제공합니다. - 예: `⌘+\`를 사용하면 화면의 부가 UI를 숨기고 작업에 집중할 수 있습니다. - 작성자는 `Shift+2`가 선택 항목을 화면에 맞게 보여주는 기능을 제공한다는 점도 새롭게 발견했다고 설명합니다. ## 사용 행동을 반영하는 학습 방식 - 패널은 사용자가 실제로 누른 단축키를 감지하고 해당 항목을 강조합니다. - 사용자가 어떤 단축키를 사용했는지 기억해 이후 학습에 활용할 수 있도록 설계되었습니다. - 단축키 목록을 단순히 읽는 대신, 자신의 작업 패턴을 돌아보고 사용하지 않던 관련 단축키를 발견하도록 돕는 것이 목적입니다. Figma의 접근 방식은 단축키를 별도의 암기 과제가 아니라 실제 작업 흐름 속에서 익히도록 만드는 데 초점이 있습니다. 자주 수행하는 작업의 카테고리부터 선택해 단축키를 반복 사용하고, 마우스와 키보드의 조합을 운동기억으로 정착시키는 것이 가장 실용적인 활용법입니다.

user-interface-designfigmakeyboard-shortcutsinput-devices+2