figma2025년 9월 18일

Intercom AI 서밋의 (새 탭에서 열림)

Intercom의 AI 서밋 ‘Pioneer’ 브랜딩은 AI의 발전을 씨앗이 꽃피는 과정에 비유한 ‘외계적 슈퍼블룸’ 콘셉트로 제작됐다. Intercom Creative Studio는 꽃, 꽃가루 입자, 점묘 스타일, 3D 모션을 결합해 웹·영상·무대·인쇄물·굿즈까지 확장 가능한 시각 언어를 구축했다. 제작 전 과정을 Figma에서 협업하며 아이디어 탐색부터 프로토타이핑과 QA까지 하나의 작업 공간에서 진행한 점이 핵심이다. ## 인터콤의 브랜드를 확장하는 디자인 시스템 - Intercom의 Creative Studio는 일반적인 브랜드 가이드라인을 넘어, Intercom과 AI 고객 서비스 에이전트 Fin, 캠페인, 제품 출시, 웹사이트, 이벤트별 하위 디자인 시스템을 구축한다. - 약 30명으로 구성된 글로벌 팀은 Figma를 디자인 시스템과 협업의 중심, 즉 ‘핵심 허브’로 사용한다. - Pioneer 2025의 브랜드는 웹사이트와 디지털 캠페인뿐 아니라 다음 행사 요소에도 적용되어야 했다. - 무대 디자인 - 대형 디지털 스크린 - 안내 표지와 동선 표시 - 기념품 - 정적 이미지와 모션 콘텐츠 - 전년도 Pioneer의 ‘잠망경’ 콘셉트가 AI의 미래를 바라보는 시선을 표현했다면, 올해는 지난 아이디어가 성장하고 새로운 가능성으로 피어나는 모습을 표현하는 방향으로 전환했다. ## 폭넓은 크리에이티브 영역 탐색 - 팀은 Figma Design에서 다양한 무드보드를 제작하며 여러 시각적 방향을 폭넓게 실험했다. - 무드보드에는 다음 자료를 함께 배치했다. - 모션 에셋 - 정지 이미지 - 벡터 파일 - 로고 - 영상 레퍼런스 - 모션 디자이너, 브랜드 디자이너, 카피라이터가 같은 작업 공간에서 이미지 편집, 드로잉, 콜라주를 즉시 주고받았다. - 영상 임베드 기능을 활용해 초기 단계부터 모션 원칙을 검토했다. - 영상 위에 로고 스케치를 얹어 실제 커뮤니케이션에서 어떻게 보이는지 확인 - 메시지와 움직임이 함께 작동하는지 조기에 테스트 - 최종적으로 ‘AI 슈퍼블룸’이라는 콘셉트가 선택됐다. - 지난해 뿌린 씨앗이 올해 꽃으로 피어난다는 서사 - 꽃을 AI 발전과 새로운 아이디어의 상징으로 활용 - 꽃가루 입자를 연상시키는 점묘 스타일로 발표자 초상과 이미지를 표현 - 이해관계자에게 콘셉트를 공유할 때는 긴 아트보드에 설명과 시안을 배치했다. - 발표 슬라이드처럼 넘기지 않고 스크롤하며 탐색 가능 - 각 보드에 직접 댓글 작성 가능 - 피드백 단계별로 별도 페이지를 만들어 검토 과정과 결과물을 체계적으로 관리 ## 꽃과 꽃가루를 활용한 모션 언어 - 추상적인 콘셉트를 구체화하기 위해 3D 꽃 렌더링을 제작했다. - 꽃은 현실적인 식물보다는 다음과 같은 ‘외계적’ 특성을 갖도록 디자인됐다. - 비현실적인 크기 - 과장된 개화 속도 - 낯설고 변형되는 형태 - 이는 빠르게 변화하는 AI 기술의 성격과 연결된다. - 팀은 사실적인 표현 대신 꽃가루 입자에 집중해 차별화된 시각 언어를 만들었다. - 입자 밀도와 움직임을 조절해 풍부한 화면 구성 구현 - Pioneer 로고와 정적 이미지에도 입자 기반 스타일 적용 - 모션에서는 역동적으로, 인쇄물에서는 절제된 형태로 활용 가능 - 외부 스튜디오 Colors and the Kids와 협업해 꽃의 종류와 개화 애니메이션을 탐색했다. - Figma Draw로 영상의 특정 프레임 위에 직접 주석과 드로잉을 추가했다. - 움직임의 방향과 속도 표시 - 꽃잎 형태가 어떻게 바뀌어야 하는지 설명 - 별도 프로그램으로 파일을 옮기지 않고 반복 수정 ## Figma에서 진행한 웹 경험 프로토타이핑 - Pioneer 웹사이트의 디자인, 프로토타입 제작, QA를 모두 Figma 안에서 진행했다. - 플랫폼을 오가며 작업할 필요가 없어 디자인과 검수 과정이 단순해졌다. - 실시간 댓글 기능을 통해 디자이너와 협업자가 수정 중인 화면에 바로 의견을 남겼다. - Slack 등 별도 커뮤니케이션 도구로 맥락을 옮길 필요 감소 - 변경 사항과 피드백을 같은 화면에서 확인 - 개발자와 디자이너가 인터랙션을 조기에 검증 - 웹사이트 프로토타입은 브랜드가 정적인 그래픽에 머물지 않고 실제 사용자 경험으로 어떻게 작동하는지 확인하는 수단이 됐다. ## 실용적인 시사점 - 대규모 브랜딩 프로젝트에서는 초기 탐색, 모션 실험, 이해관계자 피드백, 웹 프로토타이핑을 하나의 협업 환경에 연결하면 작업 속도와 일관성을 높일 수 있다. - 콘셉트를 꽃이나 입자처럼 명확한 시각적 요소로 정의하되, 모션·인쇄·웹·공간 디자인에 모두 적용할 수 있도록 밀도와 움직임을 조절 가능한 시스템으로 설계하는 것이 중요하다. - 특히 초기 단계부터 정적 이미지와 모션을 함께 검토하면 최종 결과물에서 브랜드 경험이 매체별로 분리되는 문제를 줄일 수 있다.

web-designfigmaaidesign-systems+3

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 기반 워크플로, 장기적인 플랫폼 확장 가능성을 중심으로 보아야 한다는 메시지를 전달한다.

web-designfigmaaigen-ai+2

figma2025년 1월 8일

핸드메이드 웹을 위한 자리 (새 탭에서 열림)

작은 개인 웹사이트가 획일화·상업화된 인터넷에 새로운 가능성을 열고 있다. 저자는 웹사이트를 이력서나 포트폴리오처럼 완성된 목적지로 만들기보다, 개인의 취향과 상상력이 담긴 변화하는 공간으로 바라보자고 주장한다. 직접 웹사이트를 만드는 행위 자체가 더 개인적이고 표현적인 인터넷을 되살리는 방법이라는 결론이다. ### 상업화 이전의 개인적인 웹 - 1990년대 웹은 개인이 자신만의 디지털 공간을 소유하고 가꾸는 문화가 강했다. - GeoCities는 1994년 누구나 2MB 규모의 웹 공간을 만들 수 있게 했고, 한때 약 3,800만 개의 웹페이지를 호스팅했다. - 사이트들은 와인·음식, 기술 등 관심사별 “동네”로 묶였으며, 세련되지 않아도 개인의 개성과 공동체성이 드러났다. - 웹사이트는 단순한 정보 전달 수단이 아니라 자신을 표현하고 다른 사람과 연결하는 공간이었다. ### 효율성과 플랫폼이 만든 획일화 - 오늘날 웹사이트 수는 크게 늘었지만, 인터넷은 오히려 더 제한적이고 비슷해졌다. - 웹 제작 도구의 대중화는 접근성을 높였지만, 효율성과 표준화 중심의 디자인으로 손으로 만든 듯한 불완전함을 약화시켰다. - 소셜 미디어 플랫폼이 개인 홈페이지를 대신하면서 사용자는 정해진 형식과 알고리즘에 맞춰 자신을 표현하게 됐다. - 공개적인 자기표현에 대한 평가와 검열의 두려움 때문에 진솔한 표현이 사라지는 ‘인터넷의 어두운 숲’ 현상도 나타난다. ### 핸드메이드 웹의 부활 - Neocities는 GeoCities의 웹사이트를 보존하기 위해 시작했으며, 현재는 약 100만 개의 사이트를 호스팅하는 플랫폼으로 성장했다. - Rhizome, Center for Net Art, School for Poetic Computation 등은 인터넷 예술 전시와 워크숍을 지원한다. - DWeb 운동은 Internet Archive 등의 지원을 받아 더 분산되고 이용자가 소유하는 인터넷을 추구한다. - 이처럼 개인적이고 실험적인 웹은 사라진 것이 아니라 특정 커뮤니티와 프로젝트 안에서 계속 이어지고 있다. ### 웹사이트는 ‘홈페이지’가 아니라 변화하는 공간 - 웹사이트가 이력서, 포트폴리오, 블로그처럼 여러 기능을 동시에 수행해야 한다고 생각하면 제작 자체가 부담스러워진다. - 사이트는 반드시 실용적이거나 완성된 자기소개서일 필요가 없으며, 만든 사람의 소유와 취향을 담는 것만으로 충분하다. - 고정된 ‘집’이나 목적지보다 시간이 지나며 변하고 성장하는 공간으로 웹사이트를 바라볼 수 있다. - 짧은 기간 운영하거나, 한 가지 주제만 다루거나, 특정 한 사람에게만 공개하는 등 형식과 목적은 자유롭다. ### 시간의 제약을 가진 웹사이트 - 온라인 공간도 현실의 장소처럼 특정 시간에만 열리거나 사라질 수 있다. - B&H 카메라 매장은 종교적 휴일에 오프라인 매장과 웹사이트를 함께 닫는다. - `Cloudwatching`과 `Stargazing`은 각각 낮과 밤에만 접근할 수 있다. - `Internet Stoop`처럼 12시간만 존재하는 사이트나, 5일 만에 종료된 Reddit의 `The Button`처럼 일시적인 웹 경험도 가능하다. - 도메인 갱신과 유지보수에는 한계가 있으므로, 모든 웹사이트가 영원히 존재해야 한다는 생각도 재고할 수 있다. ### 찾기 어려운 웹사이트 - 검색엔진과 소셜 플랫폼의 최적화 경쟁에 반대해, 일부러 발견하기 어렵게 만드는 방식도 하나의 배포 전략이 된다. - `Black Room`은 알아보기 어려운 URL을 사용하고, `Default Filename TV`는 파일명을 바꾸지 않은 홈비디오를 모아 보여준다. - 이런 사이트는 검색 결과보다 링크를 따라 이동하는 ‘웹 서핑’ 과정에서 우연히 발견된다. - 쉽게 소비되는 콘텐츠가 아니라, 적절한 방문자가 직접 찾아냈을 때 의미가 생기는 인터넷 경험을 제공한다. ### 소유자와 작가가 사라진 웹 - 웹사이트를 만든 사람이나 원래 목적에서 분리해, 방문자가 의미를 투영하도록 만들 수도 있다. - JODI의 웹사이트는 ASCII 이미지와 미로 같은 구조를 통해 방문자가 오랫동안 탐험하게 한다. - SCP Foundation은 수천 명이 공동으로 fictional 세계관을 작성하며, 실제 조직처럼 보이는 허구의 웹사이트를 구축한다. - 웹사이트가 명확한 저자나 기능을 갖지 않아도, 미스터리와 상상력을 유발하는 도구가 될 수 있다. ### 직접 만드는 행위의 의미 - 핸드메이드 웹에 참여하는 가장 간단한 방법은 자신의 웹사이트를 직접 만드는 것이다. - 사이트의 규모나 완성도보다 개인적인 관점, 실험성, 지속 방식이 중요하다. - 수십 년 동안 가꿀 수도 있고 며칠 만에 끝낼 수도 있으며, 기술적·시적·공동체적 목적 모두 가능하다. - 하나의 플랫폼이 수많은 사람에게 맞춰지는 대신, 각자가 만든 수많은 웹사이트가 공존하는 인터넷을 상상할 수 있다. 자신만의 작은 웹 공간을 만들 때는 완벽한 홈페이지를 목표로 하기보다, 한 가지 관심사나 실험에서 시작하는 것이 좋다. 운영 시간, 접근 방식, 수명, 디자인을 일부러 제한하면 더 독창적이고 개인적인 웹 경험을 만들 수 있다.

web-designhtmldigital-arthandmade-web+2

figma2024년 11월 12일

새로운 시대를 위한 웹 (새 탭에서 열림)

Figma는 2024년 브랜드 리프레시를 계기로 figma.com의 웹 디자인 시스템을 전면 점검했다. 기존 시스템은 유사한 컴포넌트가 지나치게 많고, 색상과 타이포그래피가 확장된 브랜드와 다양한 콘텐츠를 충분히 지원하지 못했다. 사용 현황을 데이터로 분석해 컴포넌트를 단순화하고, 일관된 디자인 원칙과 재사용 가능한 템플릿을 마련함으로써 더 유연하고 미래 지향적인 웹 시스템을 구축했다. ## 브랜드와 웹 시스템을 함께 재정비한 배경 - 2020년의 figma.com은 새로운 디자인 도구를 소개하는 데 초점이 맞춰져 있었다. - 2024년의 Figma는 여러 제품 팀을 위한 플랫폼으로 확장되었고, 웹사이트 역시 제품 생태계와 다양한 사용자 요구를 보여줘야 했다. - 기존 시스템에는 다음과 같은 문제가 있었다. - 서로 조금씩만 다른 컴포넌트가 많아 적절한 컴포넌트를 선택하기 어려움 - 변화하는 브랜드 색상 팔레트를 수용할 만큼 색상 체계가 유연하지 않음 - 다양한 콘텐츠 유형을 지원하기에 타이포그래피 체계가 충분히 최적화되지 않음 - Figma Sans와 새로운 색상·일러스트레이션 스타일을 도입한 브랜드 리프레시는 웹 디자인 시스템을 재설계하는 계기가 되었다. ## 컴포넌트 사용 현황을 데이터로 감사 - Web Experience 팀은 스크립트를 작성해 컴포넌트가 다음과 같이 어떻게 사용되는지 분석했다. - 어떤 컴포넌트가 사용되는가 - 각 컴포넌트가 얼마나 자주 사용되는가 - 어떤 페이지에서 사용되는가 - 이 분석을 통해 실제 사용량과 필요성을 기준으로 컴포넌트 구조를 단순화할 수 있었다. - 디자인 시스템을 직관이나 선호만으로 관리하지 않고, 실제 페이지와 팀의 사용 패턴을 근거로 개선한 점이 핵심이다. ## Flex 컴포넌트의 48개 변형을 24개로 축소 - 가장 널리 사용되던 기본 구성 요소인 ‘Flex’ 컴포넌트는 옵션이 추가되면서 48개 변형까지 늘어나 있었다. - 사용 사례를 조사한 결과, 기능을 유지하면서도 변형 수를 24개로 줄일 수 있었다. - 중복되거나 활용도가 낮은 선택지를 제거해 속성 패널을 더 집중된 형태로 만들었다. - 예를 들어 가운데 정렬 텍스트 옵션을 없애고, 웹 시스템 전체에서 왼쪽 정렬을 기본값으로 정했다. - 그 결과: - 디자이너와 콘텐츠 제작자가 선택해야 할 옵션이 줄어듦 - 컴포넌트 사용법이 쉬워짐 - 웹페이지 전반의 시각적 일관성이 높아짐 - 새로운 브랜드 언어와도 더 잘 맞게 됨 ## 템플릿과 조합 가능한 빌딩 블록 - 단순히 기존 컴포넌트를 줄이는 데 그치지 않고, 자주 쓰는 페이지 레이아웃을 템플릿으로 만들었다. - 여러 방식으로 조합할 수 있는 “building block” 컴포넌트 세트도 구축했다. - 이를 통해 팀은: - 일반적인 페이지 구조를 더 빠르게 만들고 - 필요한 구성 요소를 조합해 다양한 페이지를 제작하며 - 별도의 커스텀 작업 없이도 Figma 브랜드에 맞는 결과물을 만들 수 있게 되었다. - 컴포넌트 선택지를 무작정 늘리는 대신, 검증된 핵심 요소와 조합 방식을 제공하는 접근이다. ## 실용적인 시사점 - 디자인 시스템을 정기적으로 감사하고 실제 사용 데이터를 확인해야 한다. - 유사한 변형이 계속 늘어난다면 기능을 유지하면서 옵션을 통합할 수 있는지 검토할 필요가 있다. - 명확한 기본값과 일관된 원칙을 정하면 사용자의 선택 부담을 줄일 수 있다. - 공통 레이아웃 템플릿과 조합형 컴포넌트를 함께 제공하면 확장성과 제작 속도를 모두 높일 수 있다.

web-designfigmadesign-systemstypography+1

figma2023년 10월 4일

가치 있는 디자인 커리어를 위한 (새 탭에서 열림)

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의 연사가 되는 것을 장기 목표로 삼았다. - 목표를 구체적으로 설정하면 막연한 희망이 아니라 필요한 역량, 평판, 작업물을 역산해 준비할 수 있다. - 따라서 프로젝트나 커리어 결정을 내릴 때 “무엇을 하고 싶은가”뿐 아니라 “어떤 결과에 도달하고 싶은가”를 먼저 정의하는 것이 중요하다. ## 실용적인 적용 새로운 커리어 기회를 검토할 때는 먼저 그 목표가 자신에게 흥미롭고 중요한지 확인하고, 현재 가진 전문성·네트워크·평판이 어떻게 성공 가능성을 높이는지 점검하는 것이 좋다. 이후 원하는 최종 상태를 구체적으로 정한 뒤, 그 결과에서 거꾸로 필요한 경험과 실행 단계를 설계하면 더 현실적이고 지속 가능한 선택을 할 수 있다.

web-designfigmadesign-systemsux-design+2

figma2022년 5월 26일

lli Type으로 본격적인 (새 탭에서 열림)

가변 폰트는 하나의 파일로 다양한 굵기·기울기·광학 크기 등을 조정할 수 있어, 타이포그래피의 정밀도와 표현력을 높이는 표준 기술이다. Grilli Type의 Thierry Blancpain은 가변 폰트가 디자이너와 개발자의 협업을 단순화하고, 웹을 더 역동적이고 읽기 쉬운 경험으로 만드는 핵심 도구라고 설명한다. 특히 디자인 도구에서 가변 폰트를 직접 지원해야 실제 구현 과정의 간극과 불필요한 우회 작업을 줄일 수 있다고 강조한다. ## 폰트 크기 변화와 가독성의 문제 - 명함에서 광고판으로, 모바일에서 데스크톱으로 글자 크기가 커지면 글자 사이의 공간감과 비율도 달라진다. - 특정 크기에서 읽기 쉬웠던 문장이 다른 크기에서는 형태가 무너지고 가독성이 떨어질 수 있다. - 크기와 가독성을 유지하려면 다음 요소를 세밀하게 조정해야 한다. - **커닝(kerning):** 개별 글자 사이의 간격 - **트래킹(tracking):** 글자 묶음 전체의 간격 - 굵기와 스타일별로 별도 파일을 사용하면 에셋과 코드가 늘어나고, 다운로드 용량·관리 복잡성·오류 가능성이 커진다. ## 하나의 파일로 여러 표현을 만드는 가변 폰트 - 가변 폰트는 여러 스타일을 각각 저장하는 대신, 하나의 폰트 파일 안에 다양한 표현 범위를 담는다. - 디자이너는 축(axis)을 조절해 다음과 같은 속성을 연속적으로 변경할 수 있다. - 굵기(weight) - 기울기나 경사(slant) - 광학 크기(optical size) - 그 밖의 폰트 제작자가 정의한 형태적 특성 - 굵기와 광학 크기를 동시에 조절하는 등 기존 정적 폰트보다 정밀한 타이포그래피 설계가 가능하다. - 하나의 파일을 여러 도구와 환경에서 사용할 수 있어, 애플리케이션별 폰트 버전을 따로 준비해야 하는 문제도 줄어든다. ## 현대적인 디자인 표준과 도구 지원 - Blancpain은 가변 폰트가 새로운 표준 형식이므로, Figma 같은 주요 디자인 도구가 이를 지원하는 것이 중요하다고 말한다. - 도구가 표준 형식을 지원하지 않으면 디자이너와 개발자는 별도 변환이나 우회 방법을 찾아야 한다. - Grilli Type은 과거 Figma에서 가변 폰트를 사용할 수 없을 때도 가변 폰트 기반 웹사이트를 제작했지만, 디자이너와 개발자가 분리된 조직에서는 이런 방식이 현실적으로 어렵다고 설명한다. - Figma에서 디자인 단계부터 가변 폰트를 사용하면 최종 코드 구현까지 동일한 타이포그래피 의도를 유지하기 쉬워진다. ## 디자이너와 개발자의 협업 개선 - 개발자에게는 폰트 패밀리 전체를 하나의 파일로 관리할 수 있다는 점이 큰 장점이다. - 파일 업데이트가 단순해진다. - 코드와 에셋 관리가 깔끔해진다. - 여러 폰트 파일을 조합할 때 생기는 관리 오류가 줄어든다. - 디자이너는 원하는 굵기나 광학 크기를 세밀하게 선택할 수 있다. - 가변 폰트는 디자이너에게 표현의 자유를, 개발자에게는 구현과 유지보수의 효율성을 제공한다. - 따라서 두 직군이 서로 다른 도구와 파일을 사용하며 생기는 간극을 줄여준다. ## 웹 타이포그래피의 동적 표현 - 가변 폰트는 웹에서 글자를 단순한 정보 전달 수단이 아니라 시각적 표현 요소로 활용하게 한다. - 예를 들어 마우스 오버 시 일반 굵기에서 굵은 글씨로 자연스럽게 전환하는 효과를 만들 수 있다. - `GT Maru Mega`처럼 매우 개성적인 서체도 작은 크기에서 사용할 수 있도록 형태와 광학 특성을 조정할 수 있다. - 폰트 축을 애니메이션과 결합하면 정적인 웹사이트보다 더 생동감 있고 상호작용적인 경험을 제공할 수 있다. - Blancpain은 웹 경험이 점점 더 움직임을 포함하는 방향으로 발전할 것이라고 전망한다. ## 실용적인 결론 가변 폰트는 파일 수를 줄이는 기술을 넘어, 반응형 화면에 맞는 가독성과 정밀한 타이포그래피, 인터랙션까지 함께 구현하는 방법이다. 디자이너와 개발자는 가능한 한 디자인 단계부터 동일한 가변 폰트를 사용하고, 굵기·광학 크기·기울기 축을 화면 크기와 사용자 상호작용에 맞춰 활용하는 것이 좋다.

web-designfigmaaccessibilityux+3

figma2022년 3월 8일

우크라이나 사태에 대한 (새 탭에서 열림)

Figma는 러시아의 우크라이나 침공을 민주적 가치에 대한 공격으로 규정하고, 우크라이나 커뮤니티에 대한 연대와 지원을 약속했다. 임직원의 인도적 기부에 매칭 기부를 제공하고, 지원을 요청하는 기존 우크라이나 고객에게 유료 기능을 한시적으로 계속 제공한다. 동시에 미국·EU의 대러 제재를 준수하며 러시아 내 신규 판매를 중단한다고 밝혔다. ## 우크라이나에 대한 연대 - Figma의 비전인 “모두가 디자인에 접근할 수 있도록 하는 것”이 민주적 가치와 맞닿아 있다고 설명했다. - 국제적으로 구성된 Figma 직원과 커뮤니티 안에서 우크라이나 구성원들이 겪는 고통을 인식하고 있다고 밝혔다. - 회사 차원에서 전쟁과 침공에 반대하고 우크라이나 커뮤니티의 안전을 기원했다. ## 인도적 지원과 기부 매칭 - Figma 직원들은 우크라이나 난민 지원 및 인도적 구호 단체에 자발적으로 기부하고 있다. - 회사는 기부 매칭 프로그램을 통해 직원들의 기부금에 대응하는 금액을 추가로 기부한다. - 이를 통해 임직원의 개인적 참여를 조직적인 지원으로 확대하려 했다. ## 우크라이나 고객 지원 - 지원을 요청하는 기존 우크라이나 고객에게 향후 몇 달 동안 Figma의 유료 기능을 계속 이용할 수 있도록 제공한다. - 전쟁으로 인해 업무와 서비스 비용에 어려움을 겪는 고객들이 디자인 협업을 이어갈 수 있도록 한 조치다. ## 러시아 관련 제재와 판매 중단 - Figma는 미국과 유럽연합의 러시아 제재 요건을 전면 준수한다고 밝혔다. - 러시아에서 모든 신규 판매 활동을 중단한다. - 기존 고객에 대한 지원과 신규 영업 중단을 구분해, 제재 준수와 사업적 대응을 함께 추진했다. 이번 발표는 기업이 국제적 위기 상황에서 가치 표명, 임직원 기부 지원, 피해 지역 고객 지원, 제재 준수를 병행한 사례다. 기업 차원에서는 관련 법규를 정확히 따르면서도, 피해 커뮤니티에 대한 재정적·운영적 지원 방안을 구체적으로 마련하는 것이 실질적인 대응이 될 수 있다.

web-designfigmacollaborative-designdesign-tools

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의 조언을 적용하는 방법이다.

web-designfigmadesign-systemsuser-interface-design+2

figma2021년 5월 5일

로빈 캐너와의 Q (새 탭에서 열림)

Robyn Kanner의 인터뷰는 디자인을 특정 직함이나 완벽한 결과물로 한정하지 말고, 끊임없이 만들고 협업하며 현재의 문제를 해결하는 태도를 강조한다. 그녀는 Biden-Harris 캠페인의 크리에이티브 디렉터로서 JoeBiden.com부터 캠페인 전용기까지 모든 작업을 하나의 Figma 파일에서 제작한 경험을 소개했다. 디자인의 성취는 개인의 명성보다 공동의 목표를 이루는 데 있으며, 그녀에게 가장 큰 성과는 Joe Biden의 당선을 도운 것이다. ## Biden-Harris 캠페인과 대규모 협업 - 2020년 미국 대선에서 Biden-Harris 디자인팀의 크리에이티브 디렉터로 활동했다. - 웹사이트인 JoeBiden.com부터 캠페인 전용기 디자인까지 다양한 결과물을 제작했다. - 캠페인 전체 작업을 하나의 Figma 파일에서 진행하며 협업과 통합된 디자인 작업 방식을 보여줬다. - 그녀가 꼽은 커리어 최대 성취는 “Joe Biden의 당선을 도운 것”이었다. - 좋은 팀은 어려운 일을 함께 겪으며 서로를 지지할 때 만들어진다고 설명했다. - 좋은 협업자는 주변 사람들이 기여할 수 있도록 공간을 만들어주는 사람이라고 답했다. ## 디자인을 대하는 태도 - 창작 과정을 한 단어로 표현하면 “끈질김(Relentless)”이라고 답했다. - 완벽한 디자인은 없으며, 디자인 자체를 두려워할 필요도 없다고 말했다. - 다른 사람의 디자인을 부러워하거나 대신 만들고 싶어 하기보다 각자의 경로를 존중해야 한다고 강조했다. - 디자인은 과거의 평가보다 지금 필요한 것을 만드는 행위이며, 이를 “NOW”라고 표현했다. - 젊은 디자이너에게 특정 직함에 자신을 가두지 말고, 단순히 무언가를 만들라고 조언했다. ## 도구보다 중요한 사회적 관점 - 디자인 업계에서 과대평가된 것으로 “코드”를, 과소평가된 것으로 “사회학”을 꼽았다. - 이는 디자인을 구현 기술만의 문제가 아니라 사람과 사회, 맥락을 이해하는 활동으로 본다는 의미다. - 가장 좋은 디자인은 색상이나 형식만으로 결정되지 않고, 그것이 사용되는 환경과 사람들의 행동을 고려해야 한다. - 그녀가 선호하는 UI 폰트는 Decimal과 Mercury이며, 색상 표현 방식은 Hex·RGB·HSL 모두를 사용한다고 답했다. - 디자인에서 타이포그래피와 색상 중 하나만 고르기보다 둘 다 중요하게 본다. ## 제약을 넘어서는 창작 - 최근 작업에서 Safari의 애니메이션 처리 방식 때문에 제약을 느꼈다고 말했다. - 도구가 애니메이션 구현을 제한하는 상황을 아쉬워하며, 창작자가 기술적 환경에 의해 제한되지 않기를 바라는 태도를 드러냈다. - 언젠가 화성에 그라디언트를 적용해보고 싶다는 답변은 현실적 제약을 넘어서는 상상력을 상징한다. - 가장 좋아하는 Figma 기능으로는 “모두”를 꼽았으며, 특히 Shift+H 단축키를 언급했다. - Figma가 창작 방식을 혁신했다고 평가하며, 기능 자체보다 자유롭게 만들고 협업할 수 있는 환경을 중요하게 봤다. ## 개인적 취향과 창작자의 인간적인 면 - 1990년대의 미학을 되살릴 수 있다면 웹이나 Apple 디자인보다 음악가 Jeff Buckley를 선택하겠다고 답했다. - 최상의 창작 상태는 이른 아침이나 늦은 밤이라고 말했다. - 디자인 비평에 초대하고 싶은 사람으로 농구선수 Michael Jordan을 꼽았다. - 캠페인 기간 동안 긴 하루를 마친 뒤 긴장을 풀기 위해 게임 *Madden*을 즐겼다고 소개했다. - 최근 인터넷에서 좋아한 콘텐츠로 BROCKHAMPTON의 “BUZZCUT”을 언급했다. - 디자인 관련 소셜미디어 담론, 특히 Design Twitter에는 큰 관심이 없다고 선을 그었다. ## 실용적인 시사점 디자이너는 직함이나 특정 도구에 자신을 한정하기보다 문제를 해결하기 위해 직접 만들고, 협업 과정에서 다른 사람의 참여 공간을 확보해야 한다. 또한 시각적 완성도뿐 아니라 사회적 맥락과 사용자의 현실을 이해하고, 기술적 제약을 비판적으로 바라보는 태도가 중요하다.

web-designfigmaui-designdesign-collaboration+4

figma2020년 10월 19일

킴벌리클라크가 사랑 (새 탭에서 열림)

Kimberly-Clark은 변화하는 소비자 선호와 경쟁 심화에 대응하기 위해 디지털 경험과 디자인 업무 방식을 혁신했다. Figma를 단일 협업 플랫폼으로 도입하면서 디자이너, 마케팅, 브랜드, 개발자 간 협업이 빨라졌고, 실제로 한 웹사이트의 가입률을 71% 높였다. 이 사례는 디자인 도구 통합과 실시간 협업이 제품 출시 속도와 사용자 경험을 동시에 개선할 수 있음을 보여준다. ## 디지털 중심 성장 전략 - Kleenex, Scott, Huggies 등을 보유한 Kimberly-Clark은 전 세계 175개국에서 사업을 운영한다. - 400개 이상의 소비자 대상 웹사이트와 다양한 디지털 제품을 관리하고 있다. - 소비자 취향 변화, 경쟁 심화, 생산비 증가로 성장세가 둔화되자 2022년 창립 150주년을 목표로 성장 가속화 전략을 추진했다. - 가격 책정, 제조, 유통, 진열, 영업, 인사 등 거의 모든 업무 과정에 디지털 요소가 포함되어 있었다. - 코로나19 이후에는 수요 변화에 맞춰 생산량과 재고를 재배분했으며, 해당 분기 매출은 46억 1천만 달러를 기록했다. ## 기존 디자인 프로세스의 비효율 - 디자이너들이 독점적인 Mac 기반 애플리케이션에서 혼자 수주일 동안 작업했다. - 완성한 파일을 별도의 클라우드 프로토타이핑 도구에 업로드한 뒤 이해관계자의 피드백을 기다려야 했다. - 수정이 발생하면 같은 과정을 반복해야 했다. - 개발 단계에서는 Mac을 사용하지 않는 개발자에게 디자인 파일을 전달하는 과정에서 추가적인 문제가 생겼다. - 여러 브랜드와 국가에 맞춰 디자인을 현지화해야 했기 때문에, 이러한 단절이 제품 출시 속도를 더욱 늦췄다. ## Figma를 통한 실시간 협업 - Figma를 도입해 디자인, 프로토타이핑, 피드백 과정을 하나의 웹 기반 플랫폼으로 통합했다. - 파일을 로컬에 저장할 필요가 없고, 초대받은 사람이 쉽게 파일을 열어 보고 편집할 수 있었다. - Figma를 모든 팀이 참조하는 단일 정보원으로 활용하면서 파일 버전 관리와 전달 과정이 단순해졌다. - 피드백 회의가 일방적인 검토 자리가 아니라 브랜드·마케팅·디자인·기타 이해관계자가 함께 작업하는 실시간 협업 세션으로 바뀌었다. - 참여자들이 디자인 변경 사항을 즉시 확인하고 제작 과정에 직접 참여할 수 있게 되었다. ## 데이터로 검증한 디자인 개선 - 팀은 디자인 효율성뿐 아니라 실제 사용자 경험의 개선 여부도 측정했다. - 주요 지표로 이탈률, 재방문자, 사이트 체류 시간, 쿠폰·뉴스레터·보상 프로그램 가입률 등을 추적했다. - 한 웹사이트의 가입 양식에는 마케팅 목적으로 13개의 입력 필드가 포함되어 있었다. - 브랜드, 마케팅, 디자인 팀이 Figma에서 함께 논의해 입력 필드를 5개로 줄였다. - 양식 변경 후 가입률이 71% 증가했다. - 회의에서 장시간 논쟁하기보다 문제를 함께 시각화하고 즉시 수정한 것이 성과 향상에 기여했다. ## 다음 단계: 디자인 시스템과 개발 연계 - Kimberly-Clark은 Figma에서 Storybook과 코드 저장소까지 연결되는 새로운 디자인 시스템을 계획했다. - 이를 통해 디자인 요소와 개발 구현 사이의 일관성을 높이고, 여러 브랜드와 지역에 적용 가능한 재사용 체계를 구축하려 했다. - 디자인을 단순한 산출물 제작 과정이 아니라 비즈니스 성과와 제품 출시 속도를 높이는 핵심 업무로 자리매김하려는 방향이다. 실무적으로는 디자인 도구를 많이 사용하는 것보다, 하나의 공유 환경에서 관련 팀이 함께 문제를 해결하고 결과를 사용자 지표로 검증하는 것이 중요하다. 특히 입력 단계 축소처럼 작은 디자인 변경도 데이터로 효과를 확인하면 빠른 개선과 조직 내 합의를 동시에 이끌어낼 수 있다.

web-designfigmadesign-systemsprototyping+3

figma2020년 9월 6일

피그마의 새로운 EMEA 본 (새 탭에서 열림)

Figma는 EMEA 지역 사용자를 더 잘 지원하기 위해 런던에 지역 본부(HQ)를 열기로 했다. 이 사무실은 단순한 물리적 공간이 아니라, 현지 사용자와 같은 시간대를 공유하고 다양한 인재를 확보하며 지역별 디자인 커뮤니티를 이해하기 위한 거점이다. 코로나19로 대면 업무가 지연된 상황에서도 하이브리드 근무와 온라인 행사로 지역 협력을 이어가겠다는 것이 글의 결론이다. ## 런던 EMEA 본부 설립 배경 - Figma는 미국 외 지역의 사용자가 매우 많은 글로벌 서비스다. - 2020년 기준 주간 활성 사용자의 **81%가 미국 외 지역**에 있었다. - 기존의 미국 중심 시간대 운영만으로는 EMEA 지역 사용자에게 충분한 지원을 제공하기 어려웠다. - 이에 따라 유럽·중동·아프리카 지역을 전담하는 런던 허브 오피스를 설립하기로 했다. ## 사무실 이상의 역할 - 런던 오피스는 단순히 직원이 출근하는 공간이 아니라 지역 사업과 커뮤니티를 연결하는 거점이다. - 주요 목적은 다음과 같다. - EMEA 사용자와 더 많은 시간을 공유해 지원 대응력을 높임 - 현지의 다양한 인재를 채용 - 지역별 업무 문화와 사용자 요구를 직접 이해 - 각국의 디자인 커뮤니티 및 기업 고객과 긴밀히 협력 - Figma는 하이브리드 근무를 추진하고 있어, 원격 근무와 대면 근무를 함께 지원하는 허브 형태를 지향했다. ## 글로벌 사용자와 현지 커뮤니티의 중요성 - 창업자는 Figma 출시 이후 여러 국가의 사용자와 커뮤니티를 직접 만나며 제품에 대한 통찰을 얻었다. - 런던, 파리, 헬싱키, 키이우, 모스크바, 자카르타, 싱가포르 등 다양한 도시의 고객을 방문했다. - Deliveroo, Zalando, Spotify, Booking.com과 같은 기업 고객과 협력하며 EMEA 지역의 성장 가능성을 확인했다. - 사용자와 직접 교류하는 과정은 제품 개선뿐 아니라 지역별 요구와 디자인 생태계를 파악하는 데 중요한 역할을 했다. ## 유럽 지역 팀 확장 - Figma는 2019년 초 암스테르담에 제품 전문가 팀을 채용하며 유럽 내 지원을 강화했다. - 이후 런던 지역 팀을 별도로 구축하기로 결정했다. - 발표 당시 런던 지역에는 **14명의 팀원**이 원격으로 근무하고 있었다. - 향후 런던 팀과 본부를 중심으로 EMEA 사용자 및 기업 고객과의 협력을 확대할 계획이었다. ## 코로나19와 온라인 전환 - 코로나19로 인해 새 사무실을 즉시 대면 업무에 활용하거나 개장 행사를 열 수 없었다. - Figma는 안전하게 대면 근무를 재개할 수 있을 때 공식적으로 오피스를 열 예정이라고 밝혔다. - 그동안에는 온라인 방식으로 지역 커뮤니티와의 연결을 유지하기 위해 첫 가상 사용자 콘퍼런스인 **Config Europe**을 개최하기로 했다. - 이는 물리적 사무실이 준비되지 않은 상황에서도 지식 공유와 커뮤니티 형성을 이어가는 대안이었다. 지역 확장을 추진하는 기업이라면 사무실 개설 자체보다 시간대 지원, 현지 인재 채용, 고객과의 직접 교류, 온라인 커뮤니티 운영을 함께 설계해야 한다. Figma의 사례는 하이브리드 근무 환경에서도 지역별 거점을 활용해 글로벌 사용자 지원을 강화할 수 있음을 보여준다.

web-designfigmacollaborationdesign-tools+2

figma2020년 4월 29일

Figma의 시리즈 D 라운드 (새 탭에서 열림)

Figma는 2020년 4월, a16z의 피터 레빈과 마크 앤드리슨이 주도한 5,000만 달러 규모의 Series D 투자를 유치했다고 발표했다. 코로나19로 재택근무가 확산되면서 Figma는 인터페이스 디자인을 넘어 화이트보딩, 다이어그램, 슬라이드 제작 등 다양한 협업 도구로 활용되고 있었다. 확보한 자금은 핵심 디자인·프로토타이핑 플랫폼의 성능과 안정성을 강화하고, 시각적 커뮤니케이션과 창작을 위한 새로운 제품을 개발하는 데 사용될 예정이다. ## Series D 투자 유치 - Figma는 총 5,000만 달러의 Series D 투자를 유치했다. - 투자는 a16z의 피터 레빈과 마크 앤드리슨이 주도했다. - 기존 투자자인 Index, Greylock, KPCB, Sequoia, Founders Fund도 참여했다. - Durable Capital의 헨리 엘렌보겐과 여러 엔젤 투자자도 새롭게 투자자로 합류했다. ## 코로나19와 Figma 사용 확대 - 재택근무로 집과 직장의 경계가 흐려지면서 Figma의 사용량이 크게 증가했다. - 기존의 인터페이스 디자인과 프로토타이핑 외에도 다음과 같은 작업에 활용됐다. - 시각적 화이트보딩 - 다이어그램 작성 - 프레젠테이션 제작 - 온라인 환경에 맞춘 새로운 활용 사례도 등장했다. - 가상 디자인 스프린트 - 도시 설계 및 시각화 - Minecraft 스킨 제작 - 이는 Figma가 전문 디자이너만을 위한 도구가 아니라, 다양한 사용자가 시각적으로 생각하고 협업하는 플랫폼으로 확장되고 있음을 보여준다. ## 투자금의 활용 방향 - 핵심 디자인 및 프로토타이핑 플랫폼에 대한 투자를 확대한다. - 팀이 함께 작업할 수 있는 환경의 성능과 신뢰성을 강화한다. - Figma를 더욱 강력하고 안정적인 협업 도구로 발전시킨다. - 디자이너뿐 아니라 비디자이너까지 포함한 전 세계 커뮤니티를 지원한다. - 시각적 커뮤니케이션과 창작을 위한 새로운 용도의 전용 제품을 개발한다. ## Figma의 장기 비전 - Figma의 비전은 디자인을 모든 사람이 이용할 수 있도록 만드는 것이다. - 웹 기반 디자인 도구를 바탕으로 협업과 접근성을 확대하려 한다. - 디자인을 특정 직군의 전문 업무가 아니라, 아이디어를 표현하고 공유하는 보편적인 커뮤니케이션 방식으로 확장하려는 방향이 드러난다. - 회사는 이러한 목표를 추진하기 위해 추가 인재를 채용한다고 밝혔다. 이번 발표는 Figma가 단순한 디자인 소프트웨어를 넘어, 원격 협업과 시각적 사고를 지원하는 범용 창작 플랫폼으로 성장하려는 전략을 보여준다. 사용자라면 디자인 작업뿐 아니라 브레인스토밍, 문서 시각화, 발표 자료 제작 등 다양한 협업 용도로 Figma를 활용해볼 수 있다.

web-designfigmaprototypingcollaborative-design+2

figma2019년 7월 23일

플러그인 비하인드 (새 탭에서 열림)

티파니 첸은 Microsoft의 접근성과 포용성 팀에서 일하며, Figma 플러그인으로 접근성 주석 작성 과정을 자동화하고 있다. 그녀는 플러그인이 디자이너가 필요한 기능을 직접 만들 수 있게 해 주며, 접근성 향상과 디자인 진입 장벽 완화에 기여한다고 본다. 또한 다양한 전공과 배경을 가진 사람들이 디자인에 참여할수록 더 풍부하고 포용적인 결과를 만들 수 있다고 강조한다. ## 접근성 주석 작업을 자동화하는 플러그인 - 티파니가 개발 중인 플러그인은 **접근성 중심의 주석(annotation) 도구**다. - 디자인에 접근성 관련 정보를 표시하는 수작업을 자동화해 반복적인 작업을 줄이는 것을 목표로 한다. - Microsoft의 내부·외부 접근성 강화 노력과 맞닿아 있으며, 포용적인 제품 경험에 대한 인식을 높이려는 목적이 있다. - 이 프로젝트는 티파니가 처음 만든 Figma 디자인 플러그인이기도 하다. ## Figma 플러그인을 선택한 이유 - 새로운 플러그인 시스템과 Figma API가 사용하기 쉬워 설정이나 디버깅보다 실제 제작에 더 많은 시간을 쓸 수 있었다. - 기존 디자인 도구가 모든 디자이너의 요구를 충족할 수는 없지만, 플러그인을 통해 필요한 기능을 직접 만들 수 있다. - 다른 개발자가 기능을 추가해 주기를 기다리는 대신, 자신과 커뮤니티에 필요한 도구를 직접 제안하고 구현할 수 있다. - Figma 커뮤니티가 친절하고 협력적이라는 점도 개발 동기가 됐다. ## 다양한 배경이 디자인에 주는 가치 - 티파니는 심리학, 인류학, 국제관계, 컴퓨터과학 등 비전통적인 배경을 가진 사람들이 디자인에 진입하는 것을 돕고 싶어 한다. - 다양한 경험과 지식은 디자인 커뮤니티에 새로운 관점과 문제 해결 방식을 제공한다. - 컴퓨터과학 배경 덕분에 디자인을 평가하고 구현할 때 **기술적 실현 가능성**과 **새로운 시도** 사이에서 균형을 잡는 편이라고 설명한다. - 디자인이 특정 전공자만의 영역이 되지 않도록 진입 장벽을 낮추는 것이 중요하다고 본다. ## 기술과 창작을 결합한 작업 - 가장 자랑스러운 프로젝트로 사람들에게 “어릴 때 어떤 거짓말을 들었나요?” 같은 질문을 던지고, 그 답변을 이야기와 일러스트로 발전시킨 작업을 꼽았다. - 참여자들의 경험을 시각화해 아트 디렉션 웹사이트로 제작했다. - 레이어링과 패럴랙스 효과를 활용해 이야기를 입체적으로 표현했다. - 이 프로젝트를 통해 기술적 역량과 창의적 작업을 결합하는 데 흥미를 느끼게 됐다. ## 사회적 영향을 고려하는 기업관 - 티파니는 B Corporation의 원칙에 관심을 보였다. - B Corp 인증 기업은 의사결정 시 노동자, 고객, 공급업체, 환경에 미치는 영향을 함께 고려한다. - Ben & Jerry’s, Kickstarter, Patagonia 등이 대표적인 B Corp 사례로 언급된다. - 이는 제품과 기업 활동이 수익뿐 아니라 사회와 환경에 미치는 영향까지 책임져야 한다는 관점과 연결된다. ## 더 포용적인 디자인 생태계 - 디자인 업계에는 모든 사람을 포괄하는 제품과 경험에 대한 인식이 더 필요하다. - 동시에 디자이너가 되려는 사람들의 진입 장벽도 낮아져야 한다. - 온라인에 공개된 학습 자료가 늘면서 이러한 장벽은 점차 낮아지고 있다. - 단순하면서도 강력한 도구인 Figma와 플러그인 생태계가 이 변화를 더욱 빠르게 만들 수 있다고 기대한다. 접근성을 별도의 사후 작업으로 다루기보다 디자인 과정에 자연스럽게 통합하려면, 반복적인 접근성 검토를 자동화하는 도구를 적극 활용하는 것이 좋다. 또한 디자인 팀은 다양한 전공과 배경의 구성원이 참여할 수 있도록 학습 자료와 제작 도구를 개방하는 방향을 고려할 필요가 있다.

web-designfigmaux-designaccessibility+3

figma2019년 4월 24일

Figma의 줄 높이 (새 탭에서 열림)

Figma는 텍스트의 줄 높이를 글자 위아래에 균등하게 배분하고, 보다 현대적인 기준으로 측정하도록 변경했다. 이는 기존 파일에 자동 적용되지 않는 선택적 변경이며, 사용자가 원하는 시점에 업데이트할 수 있다. 이 글은 금속 활자부터 컴퓨터 글꼴, CSS까지 줄 높이와 수직 정렬이 발전해 온 과정을 설명하며 Figma의 변경 배경을 밝힌다. ## 금속 활자 시대의 줄 높이 - 초기 활자에서 폰트 크기는 글자 자체가 아니라 글자를 담는 납 블록의 높이를 의미했다. - 같은 16pt 폰트라도 실제 글자 크기, 기준선 위치, 위아래 여백은 서체마다 달랐다. - 조판공은 줄 사이에 얇은 납 조각을 끼워 행간을 추가했다. - 이 납 조각을 뜻하는 *leading*에서 오늘날의 줄 높이 개념이 유래했다. - 예를 들어 16pt 활자에 4pt 행간을 추가하면 전체 줄 높이는 20pt가 된다. - 당시에는 행간을 추가할 수만 있었고, 활자에 내장된 공간을 제거할 수는 없었다. ## 디지털 폰트가 가져온 자유와 혼란 - 컴퓨터에서는 폰트가 고정된 납 블록이 아니라 다양한 수치와 메트릭을 담은 파일로 바뀌었다. - Windows, Macintosh, OS/2 등 플랫폼마다 폰트 형식과 렌더링 방식이 달랐고, 버그와 호환성 문제도 발생했다. - 화면에서는 글자가 고정된 상자에 묶이지 않으므로 행간을 자유롭게 추가하거나 제거할 수 있게 됐다. - 폰트의 기본 줄 높이는 글자 크기와 무관하게 임의의 값으로 설정될 수 있었다. - 같은 글자 크기와 같은 줄 높이를 사용해도 폰트 내부의 ascent, descent, 기준선 위치가 달라 시각적 결과가 달라졌다. ## CSS와 폰트 메트릭의 복잡성 - 웹에서는 줄 높이를 단순히 글자 크기로만 결정하지 않고, 기준선과 인라인 박스를 기준으로 계산한다. - CSS의 줄 높이는 일반적으로 한 줄의 기준선에서 다음 줄 기준선까지의 거리로 이해할 수 있다. - 추가 공간인 “half-leading”을 글자 위와 아래에 나누어 배치하는 방식이 사용된다. - 그러나 폰트 파일에 들어 있는 여러 메트릭 값이 서로 다른 목적을 가져 브라우저와 운영체제마다 결과가 달라질 수 있었다. - 특히 OS/2 테이블의 ascent, descent, line gap 값은 폰트의 시각적 경계와 실제 줄 상자 크기를 일치시키지 못하는 경우가 있었다. ## Figma의 줄 높이 변경 - Figma는 추가 줄 높이를 글자 위와 아래에 분배하는 방식으로 변경했다. - 줄 높이를 글자 크기나 특정 플랫폼의 관행에만 의존하지 않고, 보다 현대적인 타이포그래피 및 웹 기준에 가깝게 측정한다. - 이를 통해 텍스트가 프레임 안에서 수직으로 배치되는 방식을 더 예측 가능하게 만들려 했다. - 변경 사항은 기존 파일에 강제로 적용되지 않는다. - 사용자는 기존 텍스트를 그대로 유지하거나, 필요할 때 새 줄 높이 동작으로 업데이트할 수 있다. ## 하나의 완벽한 기준을 만들기 어려운 이유 - Figma는 인쇄물 디자인, 웹 디자인, 제품 UI 등 서로 다른 목적에 사용된다. - 역사적인 조판 관습과 현대적인 CSS 동작이 항상 일치하지 않는다. - 폰트마다 내부 메트릭이 다르고, 같은 폰트도 플랫폼과 렌더링 엔진에 따라 다르게 보일 수 있다. - 따라서 Figma는 모든 상황에 하나의 절대적인 정답을 적용하기보다, 새로운 동작을 선택 사항으로 제공하는 방식을 택했다. 기존 디자인의 시각적 일관성이 중요하다면 파일을 즉시 변경하지 말고, 새 줄 높이 동작이 필요한 웹·제품 UI 작업부터 선택적으로 적용하는 것이 적절하다.

web-designfigmacsstypography+2

figma2018년 6월 4일

웹사이트 제작, 무엇이 먼저 (새 탭에서 열림)

웹사이트 제작에서 카피와 디자인은 어느 하나가 먼저 완성되는 작업이 아니라, 서로 영향을 주고받으며 함께 발전해야 한다. 기존에는 Google Docs와 Sketch처럼 도구가 분리되어 반복적인 수정과 전달이 발생했지만, Figma 같은 클라우드 기반 협업 도구를 사용하면 카피 작성자와 디자이너가 동시에 작업할 수 있다. 그 결과 제작 기간과 회의, 커뮤니케이션 비용을 줄이고 더 효율적으로 웹 페이지를 완성할 수 있다는 것이 글의 결론이다. ## 카피와 디자인이 충돌하는 이유 - 카피의 길이와 내용은 디자인의 레이아웃과 직접 연결된다. - 카피 작성자는 문서를 작성하고, 디자이너는 별도 도구에서 화면을 설계하는 방식이 일반적이었다. - 디자인에 카피를 넣은 뒤 텍스트가 너무 길거나 짧다는 사실을 발견하면서 수정 작업이 반복된다. - 디자인 리뷰, 카피 리뷰, 추가 이해관계자의 의견이 순차적으로 개입해 작업이 여러 차례 되돌아간다. - 도구와 파일이 분리되어 있어 프로젝트 관리자조차 최신 상태를 파악하기 어려운 ‘블랙박스’ 같은 과정이 된다. ## 반복되는 협업과 커뮤니케이션의 문제 - 작성자는 Google Docs에서 카피를 만들고, 디자이너는 Sketch에서 별도로 작업한다. - 카피가 디자인에 맞지 않으면 양쪽이 다시 수정하고, 이후 리뷰 결과에 따라 전체 작업을 재조정해야 한다. - 원격 디자이너와 협업할 때는 파일을 주고받는 과정이 더욱 복잡해진다. - 글에서는 과거에 디자인을 출력해 펜으로 수정한 뒤 스캔해서 공유하기까지 했던 사례를 소개한다. - 이러한 반복적인 ‘핑퐁’ 과정은 프로젝트를 불필요하게 지연시키고 참여자의 피로를 높인다. ## Figma를 활용한 동시 작업 방식 - 마케팅 담당자는 각 페이지에서 전달할 핵심 카피를 하나의 Google Docs에 정리한다. - 디자인팀은 Figma 프로젝트 안에 웹사이트 페이지별 프레임을 만든다. - 이후 고해상도 와이어프레임부터 최종 디자인까지 카피와 디자인을 함께 수정한다. - 카피 작성자는 디자인 문맥 안에서 텍스트가 너무 길거나 짧은지 즉시 확인할 수 있다. - 디자이너는 카피 전달과 파일 관리에 시간을 쓰기보다 실제 시각 설계에 집중할 수 있다. - 카피 수정 때마다 디자인팀에 별도 요청하거나 디자인 파일을 내보낼 필요가 줄어든다. ## 하나의 작업 공간이 제공하는 효과 - 프로젝트 URL 하나로 최신 디자인과 카피를 모든 이해관계자가 확인할 수 있다. - 참여자는 같은 화면에 댓글을 남기고 피드백을 주고받을 수 있다. - 버전 기록을 통해 변경 사항과 이전 작업 상태를 확인할 수 있다. - 디자인을 이메일로 내보내거나 회의 직전에 수정본을 다시 취합하는 일이 줄어든다. - 동일한 URL을 사용자 테스트에도 활용해, 내부 관계자들이 고객 피드백까지 함께 확인할 수 있다. - 회의 자체를 완전히 없애지는 않지만, 회의 횟수와 비효율적인 논의가 줄어든다. ## 실용적인 적용 방향 웹사이트 프로젝트에서는 카피를 모두 확정한 뒤 디자인을 시작하기보다, 초기 핵심 메시지를 정리한 후 카피와 디자인을 병렬적으로 발전시키는 방식이 효과적이다. 이를 위해 공유 가능한 디자인 파일, 실시간 댓글, 버전 관리, 사용자 테스트 결과를 한곳에 통합하면 수정 주기를 줄이고 협업 효율을 높일 수 있다.

web-designfigmaui-ux-designsketch+4