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

Inneract Project가 유

기술 인턴십의 가치는 높은 급여나 무료 식사보다 실제 제품을 만들고, 사용자 테스트를 수행하며, 숙련된 디자이너의 피드백을 받는 데서 나온다. 이 글은 Figma 사용자들이 추천한 UI/UX 인턴십 사례를 소개하며, 멘토링, 실무 프로젝트, 협업 환경, 성장 기회를 중요한 기준으로 제시한다. 특히 Shopify, Spotify처럼 인턴에게 전담 멘토를 배정하는 기업이 긍정적인 평가를 받는다. ## 좋은 UI/UX 인턴십의 조건 - 인턴을 단순 보조 인력이 아니라 정규 직원처럼 대한다. - 실제 배포 가능한 제품과 기능을 설계하게 한다. - 사용자 조사와 테스트를 직접 경험하게 한다. - 숙련된 디자이너나 관리자가 지속적으로 멘토링한다. - 디자인뿐 아니라 엔지니어링·제품·비즈니스 팀과 협업하게 한다. - 급여와 복지도 중요하지만, 응답자들은 실무 경험과 학습 기회를 더 높게 평가했다. ## Shopify: 부서 간 협업과 멘토링 - 인턴을 여러 부서가 함께 일하는 팀에 배치한다. - 아이디어 구상부터 실행까지 다양한 직군과 소통하는 방법을 배울 수 있다. - Timeline처럼 실제 배포 가능한 프로젝트에 참여한다. - 모든 디자인 인턴에게 담당 직원을 배정해 멘토링을 제공한다. - 인턴의 약 80%가 Shopify에 재입사하거나 정규직으로 전환된다고 소개된다. ## Hotels.ng: 원격·유급 인턴십 - 나이지리아 호텔 예약 서비스로, 현지 주민을 대상으로 원격 유급 UI/UX 인턴십을 운영한다. - 누구나 지원할 수 있지만, 과제를 통과하지 못하면 프로그램에서 탈락한다. - 3개월 과정을 끝까지 완료한 인턴은 Hotels.ng 또는 다른 현지 기업에 정규직으로 채용되는 경우가 많다. - 지역 인재에게 원격으로 실무 경험을 제공한다는 점이 특징이다. ## Facebook: 높은 보상과 정규직 수준의 책임 - 당시 월평균 약 5,600달러의 높은 인턴 급여가 언급된다. - 인턴도 정규직 직원과 비슷한 존중과 책임을 받는다. - 대규모 조직의 제품 개발 과정과 기업 문화를 가까이서 경험할 수 있다. - 캠퍼스 같은 복지와 업무 환경도 주요 장점으로 소개된다. ## Spotify: 스프린트 기반의 디자인 중심 문화 - 10주 인턴십 동안 소규모 스쿼드에 소속된다. - 2주 단위 스프린트로 업무를 진행하며 제품 개발 리듬을 경험한다. - 전담 멘토 또는 관리자가 프로그램 전체를 지원한다. - 시각적 완성도와 디자인 역량을 중요하게 평가하는 디자인 중심 조직이다. - 무료 식사 등 풍부한 복지도 제공된다. ## Salesforce: 의미 있는 프로젝트와 디자인 시스템 학습 - Futureforce라는 인턴십 프로그램을 운영한다. - 인턴이 실제로 의미 있는 프로젝트를 맡도록 구성되어 있다. - 업무 외 행사에서 임원과 교류하거나 스포츠 경기에 참여할 수 있다. - 최대 7일의 자원봉사 휴가(VTO)를 제공한다. - 디자인 시스템을 배우기 좋은 기업이라는 평가가 소개된다. ## Uber: 높은 접근성과 강도 높은 실무 경험 - 건강보험, 무제한 휴가, Uber 이용 크레딧 등 다양한 복지를 제공한다. - 업무 강도는 높지만 보람 있는 문화로 묘사된다. - 인턴도 고위 임원에게 직접 접근할 기회가 많다. - 20세 인턴의 의견도 경영진이 실제로 듣고 반영했다는 경험담이 제시된다. ## IBM: 여러 디자인 전문 분야와 감성 지능 - 오스틴에서 약 15명의 젊은 디자이너를 대상으로 Maelstrom 프로그램을 운영한다. - 디자인 리서치, 비주얼 디자인, UX 디자인, 프론트엔드 개발의 네 가지 트랙으로 나뉜다. - 전문 분야를 선택해 체계적으로 경험할 수 있다. - 프로그램의 성공 요인으로 감성 지능과 사람을 이해하는 능력을 강조한다. ## Airbnb: 조직 전반에 퍼진 디자인 문화 - 디자인을 중시하는 기업 문화가 사무실, 제품, 창업자 배경 전반에 나타난다. - 진보적이고 혁신적이며 긴밀한 조직 문화가 장점으로 언급된다. - 인턴에게 여행 크레딧을 제공한다. - 다양한 복지와 세심한 근무 환경 때문에 이후 다른 회사에 적응하기 어렵다는 평가도 있다. ## Square: 관심사에 따른 문제 탐색 - 인턴이 자신의 관심사에 따라 다양한 문제를 탐색할 수 있도록 비교적 큰 재량을 준다. - 단순한 UI 제작을 넘어 예술적·창의적 작업을 경험할 수 있다. - 기술 업계의 성별 격차를 완화하려는 노력으로도 알려져 있다. - UI 디자이너를 넘어 폭넓은 창작자로 성장할 수 있는 환경을 제공한다. ## Palantir: 장식보다 문제 해결에 집중 - 제품 디자인 인턴이 버튼이나 스타일시트를 반복적으로 개선하는 데 그치지 않는다. - 복잡한 실제 문제를 해결하는 데 디자인 역량을 집중하게 한다. - 오픈소스 스타일 가이드인 Blueprint를 활용해 기본 디자인 시스템을 재발명하는 시간을 줄인다. - 시각적 세부 작업보다 문제 정의와 제품 설계 역량을 키우는 인턴십으로 소개된다. 인턴십을 선택할 때는 급여와 복지뿐 아니라 실제 출시 프로젝트 참여 여부, 전담 멘토의 존재, 사용자 조사 기회, 협업 범위, 정규직 전환 가능성을 함께 확인하는 것이 좋다. 최고의 프로그램은 인턴에게 책임을 주되, 실수에서 배우고 성장할 수 있도록 충분한 피드백과 지원을 제공한다.

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

디자인 시스템Figma사용자 경험user-testing+3

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

이번 트위터 논란은

디자인 시스템은 아직 업계에서 하나의 고정된 정의로 합의되지 않은 개념이다. Airbnb의 Karri Saarinen은 이를 제품 전체의 디자인을 규정하는 “공유되고 통합된 원칙과 패턴의 집합”으로 설명하며, 규모가 큰 장기 프로젝트일수록 일관성과 제약이 필요하다고 주장한다. 글은 Saarinen의 트위터 논쟁을 통해 디자인 시스템의 의미와 범위가 여러 디자이너의 관점 속에서 형성되고 있음을 보여준다. ## 디자인 시스템 정의가 분명하지 않은 이유 - 디자이너마다 디자인 시스템을 다르게 이해한다. - UI 컴포넌트와 스타일 가이드의 모음으로 보는 관점 - 제품의 디자인 원칙과 패턴을 포함하는 체계로 보는 관점 - 조직 전체의 협업 방식과 의사결정 기준까지 포함하는 관점 - 2017년 당시에도 디자인 시스템은 비교적 새로운 개념이었으며, 업계 리더들조차 범위와 핵심 요소를 계속 정립하는 단계였다. - 따라서 디자인 시스템은 단순한 시각적 규칙집이라기보다, 제품을 일관되게 설계하기 위한 여러 원칙과 패턴의 통합된 체계로 논의되고 있다. ## 규모가 커질수록 필요한 제약과 일관성 - Saarinen은 대규모·장기 프로젝트가 성공하려면 디자인 시스템이 필요하다고 설명했다. - 여러 팀과 플랫폼이 동시에 제품을 개발할 때 디자인 시스템은 다음을 돕는다. - 화면과 기능 간 시각적 일관성 유지 - 반복적인 디자인 의사결정 감소 - 팀 간 협업 기준 통일 - 제품이 확장될 때 디자인 품질 유지 - 여기서 제약은 창의성을 제한하기 위한 것이 아니라, 팀이 매번 기본 요소를 새로 결정하지 않고 중요한 문제에 집중하게 하는 장치로 볼 수 있다. ## Airbnb의 디자인 시스템 구축 방향 - Saarinen은 Airbnb의 디자인 시스템을 만들면서 제품의 전반적인 경험을 하나의 언어로 통합하려 했다. - 그가 제시한 주요 원칙은 다음과 같다. - **Unified**: 제품 경험이 서로 연결되고 통일되어야 함 - **Universal**: 다양한 상황과 사용자에게 적용될 수 있어야 함 - **Iconic**: Airbnb만의 분명하고 기억에 남는 정체성을 가져야 함 - **Conversational**: 사용자와 자연스럽게 소통하는 경험을 제공해야 함 - 이 접근은 디자인 시스템을 색상, 버튼, 아이콘 같은 시각 요소의 목록으로 한정하지 않고, 제품이 사용자에게 전달하는 태도와 경험까지 포함한다. ## 트위터 논쟁이 보여준 관점의 다양성 - Saarinen이 자신의 최신 정의를 공개하면서 다른 디자인 리더들과 공개적인 논의가 시작됐다. - 그의 정의는 디자인 시스템을 다음과 같이 본다. - 제품 전체 디자인을 규정하는 원칙과 패턴 - 여러 팀이 공유하고 함께 사용하는 통합된 기준 - 개별 화면이 아니라 제품 전반의 경험을 다루는 구조 - Facebook의 제품 디자이너 Sean Blanton을 비롯한 업계 인사들의 반응은 디자인 시스템의 범위를 둘러싼 의견 차이를 드러냈다. - 글은 이 논쟁을 통해 정답 하나를 제시하기보다, 디자인 시스템의 핵심이 무엇인지 업계가 실시간으로 조정하고 구체화하는 과정을 보여준다. ## 디자인 시스템은 완성된 산출물이 아닌 evolving한 체계 - 디자인 시스템은 한 번 만들어 배포하면 끝나는 문서나 라이브러리가 아니다. - 제품, 조직, 플랫폼이 변하면 원칙과 패턴도 함께 조정되어야 한다. - 중요한 것은 특정 구성 요소의 개수보다 다음과 같은 통합성이다. - 디자인 원칙과 실제 UI 패턴의 연결 - 디자이너와 개발자가 공유하는 언어 - 여러 제품 영역에 걸친 일관된 사용자 경험 - 조직이 성장해도 유지되는 의사결정 기준 실무에서는 디자인 시스템을 단순한 컴포넌트 라이브러리로 시작하되, 색상·타이포그래피·레이아웃 같은 시각 규칙뿐 아니라 제품 원칙과 사용자 경험의 방향까지 함께 정의하는 것이 좋다. 또한 조직과 제품의 규모에 맞춰 범위를 정하고, 실제 팀의 사용과 피드백을 반영하며 지속적으로 발전시켜야 한다.

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

디자인 시스템프로덕트 디자인사용자 인터페이스design-patterns+4

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

팀 라이브러리 1

Figma의 Team Library 1.0은 팀이 컴포넌트를 공유·사용·관리하며 일관된 디자인 시스템을 구축하도록 돕는 기능이다. 중앙화된 온라인 환경을 기반으로 컴포넌트와 변경 사항을 실시간으로 공유하고, 각 팀원이 업데이트를 적용할지 선택할 수 있게 했다. 베타 버전의 사용성 문제를 개선해 탐색, 문서화, 분류 기능을 강화한 것이 핵심이다. ## 중앙화된 디자인 시스템과 단일 진실 공급원 - 버튼, 아이콘, 다이얼로그 같은 컴포넌트를 여러 파일과 팀원 사이에서 공유할 수 있다. - Figma의 온라인·중앙화 구조 덕분에 별도의 내보내기, 동기화, 파일 공유가 필요 없다. - 공유 컴포넌트를 게시하거나 수정하면 팀 라이브러리에 즉시 반영된다. - 다른 파일에서 컴포넌트가 변경되면 알림을 받고, 자신의 인스턴스에 변경 사항을 적용할지 결정할 수 있다. - 이를 통해 팀별로 분산된 도구나 클라우드 동기화 작업 없이 일관된 디자인을 유지할 수 있다. ## 라이브러리 탐색 UI 개선 - 베타에서는 컴포넌트를 찾을 때마다 캔버스를 가리는 팝업을 열어야 했다. - 1.0에서는 왼쪽 사이드바에 Team Library 전용 탭을 제공한다. - 작업 화면을 벗어나지 않고 팀 컴포넌트를 탐색할 수 있다. - 원하는 컴포넌트를 사이드바에서 디자인 캔버스로 드래그해 인스턴스를 생성한다. - 왼쪽 사이드바 탭은 `Alt+1` 단축키로 빠르게 전환할 수 있다. - 별도의 로컬 컴포넌트 탭도 제공해, 라이브러리에 게시될 컴포넌트를 미리 확인하고 관리할 수 있다. ## 컴포넌트에 연결된 문서화 - 베타 버전에서는 컴포넌트의 사용 목적이나 동작 방식에 대한 설명을 저장할 공간이 없었다. - 그 결과 관련 정보가 Slack이나 Google Docs에 흩어졌다. - 1.0에서는 오른쪽 속성 패널에서 선택한 컴포넌트에 설명을 추가할 수 있다. - 팀원은 Team Library에서 컴포넌트를 탐색하면서 해당 문서를 함께 확인할 수 있다. - 문서가 컴포넌트 자체에 연결되므로 사용 시점에 필요한 지침을 바로 확인할 수 있다. ## 그룹과 프레임을 활용한 컴포넌트 분류 - 베타에서는 파일 단위로만 컴포넌트를 분류할 수 있어 라이브러리가 쉽게 복잡해졌다. - 1.0에서는 파일뿐 아니라 그룹과 프레임 기준으로도 컴포넌트를 정리할 수 있다. - 예를 들어 버튼 컴포넌트를 “Buttons”라는 그룹에 모으면 Components 탭과 Team Library 탭에서 함께 표시된다. - 그룹과 프레임을 활용하면 규모가 큰 라이브러리에서도 원하는 컴포넌트를 쉽게 찾을 수 있다. - 공유 컴포넌트를 담은 프레임의 배경색을 변경해 라이브러리에서 표시되는 배경을 설정할 수도 있다. ## 베타 피드백을 반영한 제품 발전 - Figma는 2017년 2월 Team Library 베타를 출시한 뒤 수백 명의 사용자와 실제 활용 방식을 논의했다. - 초기 기능은 사용자의 요구를 파악하기 위한 최소한의 형태였지만, 실제 디자인 시스템을 운영하는 팀에는 부족했다. - 사용자 피드백을 바탕으로 탐색 UI, 문서화, 분류 기능을 확장해 1.0 버전을 완성했다. - 목표는 단순한 컴포넌트 저장소가 아니라 팀이 함께 유지·발전시키는 “살아 있는” 디자인 시스템을 만드는 것이었다. 팀에서 디자인 시스템을 운영한다면 컴포넌트를 파일별로 분산시키기보다 Team Library를 단일 관리 지점으로 활용하는 것이 효과적이다. 특히 컴포넌트 설명과 그룹 구조를 함께 정리하면 재사용성과 팀 간 커뮤니케이션을 동시에 높일 수 있다.

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

디자인 시스템Figmacollaborative-designcomponent-library+1

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

Combine이 디자인 벤처 캐피

Combine은 기존 VC처럼 홍보와 사고 리더십을 앞세우기보다, 뛰어난 디자이너가 초기 스타트업에 직접 참여하는 새로운 투자 모델을 제시한다. Facebook과 Airbnb에서 디자인 문화를 구축한 Soleio Cuervo와 Adam Michela는 초기 단계 투자와 디자인 스튜디오를 결합해 소수의 포트폴리오 기업을 깊이 지원하려 한다. 이 모델의 핵심은 자본뿐 아니라 브랜딩, 사용자 조사, 채용 등 제품 성장에 필요한 디자인 역량을 함께 제공하는 데 있다. ## 조용한 출발을 택한 Combine - 2017년 출범한 시드 단계 VC인 Combine은 일반적인 벤처펀드와 달리 대대적인 발표나 Medium 글을 공개하지 않았다. - 창고형 사무실 사진을 올린 몇 개의 암호 같은 트윗만으로 출발했지만, 실리콘밸리의 관련 업계 사람들은 이미 몇 달 전부터 이들의 움직임을 주목하고 있었다. - 창업자들은 “무엇을 할 것인지”보다 “무엇을 해왔는지”로 평판을 쌓아야 한다는 태도를 갖고 있으며, 과도한 자기 홍보를 경계한다. ## Facebook과 Airbnb에서 검증된 두 창업자 - Soleio Cuervo는 Facebook의 두 번째 디자이너로 합류해 초기 디자인 문화와 주요 제품을 만드는 데 기여했다. - Facebook Messenger - Groups - 초기 Facebook Like 버튼 - Adam Michela는 Soleio가 떠난 뒤 Facebook에 합류해 회사 최초의 디자인 시스템을 구축했다. - 이후 Airbnb에서도 디자인 시스템을 만드는 일을 담당했다. - 두 사람은 서로 다른 강점을 보완한다. - Soleio: 감정적이고 사람을 연결하는 역할, 비전과 관계 형성에 강함 - Adam: 조용하고 체계적인 운영자, 실행과 구조화에 강함 - 공통적으로 디자인과 사람에 대한 관심이 크며, 자신의 성과를 과하게 내세우지 않는 성향을 지녔다. ## 투자사와 디자인 스튜디오의 결합 - Combine은 초기 단계 투자사이면서 동시에 포트폴리오 기업을 지원하는 디자인 스튜디오를 지향한다. - 첫 번째 펀드로 1,200만 달러 이상을 조달했다. - 대규모 조직 대신 소수의 뛰어난 디자인 파트너를 채용해 소수의 기업에 집중할 계획이다. - 지원 범위는 단순한 화면 설계를 넘어선다. - 브랜드 전략과 정체성 - 마케팅 - 사용자 조사 - 제품 경험 설계 - 핵심 인재 채용 - 기존의 “서비스를 제공하는 VC” 모델을 극단적으로 확장한 형태로, Andreessen Horowitz처럼 운영 지원을 제공하되 디자인에 훨씬 더 집중하고 포트폴리오 규모는 작게 유지한다. ## 디자인이 스타트업의 경쟁력이 된 배경 - AWS 등으로 소프트웨어를 만드는 비용과 진입장벽이 낮아지면서, 기능 자체만으로는 경쟁 우위를 확보하기 어려워졌다. - 소비자는 수많은 서비스 중에서 선택할 수 있으므로, 기업은 사용자 경험을 통해 차별화하고 장기적인 진입장벽을 만들어야 한다. - 오늘날 사용자가 제품을 이해하지 못하면 자신의 실수라고 생각하기보다 서비스의 문제로 받아들인다. - 따라서 직관적인 인터페이스와 일관된 제품 경험은 부가 요소가 아니라 스타트업의 생존과 성장에 직접 연결되는 핵심 역량이다. ## 실용적인 시사점 - 초기 스타트업은 투자금을 받는 것뿐 아니라 제품·브랜드·채용을 함께 개선할 수 있는 투자자를 선택할 필요가 있다. - 디자인은 시각적 완성도에 국한되지 않고 사용자 조사, 조직 운영, 채용, 마케팅까지 포함하는 사업 전략으로 다뤄야 한다. - 다만 이 모델은 소수 기업에 깊이 관여하는 방식이므로, 모든 스타트업에 적용하기보다는 디자인이 핵심 경쟁력인 초기 기업에 특히 적합하다.

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

디자인 시스템Figma사용자 경험프로덕트 디자인+1

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

한 디자이너가 내

Pivotal의 디자이너와 개발자 간 인수인계는 디자인 파일을 이미지로 내보내고 프로젝트 카드에 반복 업로드하는 방식이라 비효율과 오류가 많았다. Figma를 도입한 뒤에는 최신 디자인을 링크 하나로 공유하고 디자인 위에 직접 댓글을 남길 수 있어, Colby는 프로젝트마다 약 이틀의 문서 관리 시간을 절약했다. 또한 맥락이 포함된 실시간 리뷰가 가능해져 협업과 결과물의 품질에도 긍정적인 영향을 주었다. ### 반복적인 이미지 내보내기와 업로드의 문제 - Colby는 디자인 프레임을 이미지로 export한 뒤 Pivotal Tracker의 개발 카드에 업로드했다. - 프로젝트마다 이 작업을 15~20회 반복해야 했다. - 프로젝트 하나에 수백 개의 카드가 있어 최신 카드를 찾는 데도 많은 시간이 들었다. - 이미지를 업데이트하지 않고 잊어버리면 개발자가 오래된 디자인을 기준으로 작업할 수 있었다. - 이 과정은 디자이너뿐 아니라 개발자의 시간도 낭비하고, 잘못된 구현으로 이어질 위험이 있었다. ### 브라우저 기반 디자인 공유 - Figma 파일은 브라우저에서 관리되므로 별도 프로그램 설치 없이 접근할 수 있었다. - 링크를 공유하면 모든 협업자가 동일한 최신 파일을 확인할 수 있었다. - 디자인이 변경되어도 개발 카드를 매번 이미지로 갱신할 필요가 없었다. - Colby는 카드를 처음 만들 때 Figma 링크만 추가하면 되었고, 프로젝트마다 약 이틀의 작업 시간을 절약했다. - Figma는 단순한 디자인 제작 도구를 넘어 파일 공유와 변경 관리까지 지원하는 “디자인 관리 도구”로 활용되었다. ### 디자인 위에 남기는 맥락 있는 댓글 - 기존 디자인 리뷰에서는 엔지니어들이 포스트잇에 의견을 적고 차례로 구두 공유했다. - 포스트잇은 어떤 디자인 요소에 대한 의견인지 맥락이 분리되어 이해하기 어려웠다. - Figma에서는 댓글을 특정 프레임이나 디자인 영역에 직접 연결할 수 있었다. - 리뷰 참여자는 의견이 적용되는 위치를 즉시 확인할 수 있어 피드백이 더 명확해졌다. - 결과적으로 주간 디자인 리뷰가 더 짧고 효율적으로 진행되었다. ### 실시간 협업과 리뷰 조정 - 엔지니어가 파일을 검토하는 동안 Colby는 각자의 커서와 활동을 실시간으로 확인할 수 있었다. - 특정 컴포넌트처럼 이미 스타일 가이드로 정해진 부분에 리뷰가 집중되면, Colby가 피드백 방향을 조정할 수 있었다. - 리뷰를 받는 디자이너가 어떤 영역에 피드백을 원하는지 직접 안내할 수 있었다. - 디자이너와 개발자가 같은 파일을 보며 의견을 주고받아 정보 전달의 누락을 줄였다. ### 협업 품질 향상 - Figma는 디자인에서 개발로 넘어가는 인수인계 과정의 반복적인 관리 작업을 줄였다. - 팀은 파일 버전과 피드백을 추적하는 데 쓰던 시간을 제품의 완성도에 더 투자할 수 있었다. - Pivotal은 개발자와 디자이너를 포함한 다양한 구성원의 의견이 더 나은 제품을 만든다고 보았고, Figma가 이를 지원한다고 평가했다. 실무에서는 디자인 파일을 이미지로 복사해 전달하기보다 최신 원본 링크를 단일 기준으로 삼고, 피드백은 해당 디자인 요소에 직접 남기는 방식이 효과적이다. 이를 위해 프로젝트 관리 카드에 Figma 링크와 버전 규칙을 명확히 기록하면 오래된 시안으로 작업하는 문제를 줄일 수 있다.

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

디자인 시스템Figma사용자 인터페이스design-collaboration+2

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

피그마의 첫

Figma는 브라우저에서 복잡한 그래픽을 빠르게 처리하면서도 여러 사용자가 동시에 작업할 수 있는 디자인 도구를 만들겠다는 목표로 첫해를 보냈다. 초기에는 “장난감”이라는 평가와 기술적 한계에 대한 의심이 있었지만, 멀티플레이어 편집과 컴포넌트·디자인 시스템 기능을 통해 협업 도구로서의 가치를 입증했다. 또한 성능 개선과 Sketch 가져오기 기능을 강화하며 기존 디자인 워크플로에 쉽게 편입되는 제품으로 발전했다. ## 브라우저 기반 디자인 도구의 도전 - 웹 브라우저에서 복잡한 그래픽을 렌더링하면서도 높은 성능을 유지해야 했다. - 기존 디자인 도구에 익숙한 디자이너들이 새로운 협업 방식을 신뢰하도록 설득해야 했다. - 초기에는 Figma를 실제 업무용 도구가 아닌 “장난감”으로 보는 시선이 있었다. - Figma는 디자이너, 엔지니어, 제품 관리자와 대화하며 규모가 커지는 팀의 요구를 파악했다. ## 빠른 제품 개선과 성능 투자 - 출시 후 작업 흐름을 단순화하고 제품 완성도를 높이기 위해 수많은 기능과 업데이트를 배포했다. - 파일 로딩과 그래픽 렌더링 속도를 높이는 데 상당한 엔지니어링 자원을 투입했다. - Sketch 파일을 Figma로 가져오는 기능을 지속적으로 개선해 사용자가 기존 작업물을 처음부터 다시 만들지 않도록 했다. - 업데이트가 매우 빠르게 진행되어 사용자가 모든 변화를 따라가기 어려울 정도였으며, 첫해를 기념해 주요 발전 사항을 한곳에 정리했다. ## 실시간 협업과 단일 진실 공급원 - 2016년 9월 28일 멀티플레이어 편집 기능을 공개했다. - 디자인 도구에서 여러 사람이 동시에 편집하는 방식은 당시 새로운 개념이었고, 디자이너들 사이에서도 찬반 논쟁이 있었다. - 실제 사용 사례로는 다음과 같은 협업이 가능해졌다. - 촉박한 일정 안에서 여러 디자이너가 함께 제품을 완성 - 세계 각지의 예비 디자이너 멘토링 - 더욱 효율적인 디자인 리뷰와 비평 - 멀티플레이어의 가장 큰 장점은 단순한 동시 편집이 아니라 팀의 **단일 진실 공급원(single source of truth)** 을 제공하는 데 있다. - 하나의 URL로 디자인을 공유할 수 있고, 파일이 수정되어도 URL은 유지된다. - 이에 따라 파일을 복사하거나 최신 버전을 확인하고 디자인 자산을 동기화하는 복잡한 과정이 줄어든다. - 카피라이터는 디자인 안에서 문구를 직접 시험할 수 있고, 개발자는 디자인 속성을 확인해 코드로 옮길 수 있으며, 제품 관리자는 별도 메시지 없이 프로젝트 상태를 파악할 수 있다. - 여러 사람이 오래된 파일을 사용하거나 서로의 작업을 덮어쓰는 문제도 줄어든다. ## 컴포넌트와 확장 가능한 디자인 시스템 - 2016년 12월 8일 컴포넌트 기능을 출시했다. - 제품이 커질수록 상태 표시줄, 내비게이션 메뉴, 아이콘처럼 반복되는 UI 요소를 여러 파일과 팀원 사이에서 일관되게 관리해야 한다. - 컴포넌트를 사용하면 기본 요소를 수정했을 때 관련 디자인에 변경 사항을 일관되게 반영할 수 있다. - 디자이너가 모든 화면을 수동으로 찾아 업데이트해야 하는 부담을 줄여 준다. - **컴포넌트 오버라이드**를 통해 개별 인스턴스의 색상이나 텍스트 폰트 등 특정 속성만 바꿀 수 있다. - 개별 화면에 필요한 차이를 허용하면서도 전체 디자인 시스템과의 연결은 유지할 수 있다. - 2017년 2월 15일에는 여러 파일과 팀에서 컴포넌트를 공유하기 위한 Team Library 베타를 공개했다. ## 실용적인 결론 Figma의 첫해 성장은 단순히 기능을 많이 추가한 결과가 아니라, 디자인 파일을 팀 전체가 함께 사용하는 중앙 작업 공간으로 바꾼 데서 비롯됐다. 협업이 중요한 팀이라면 실시간 편집뿐 아니라 공유 URL, 최신 버전 유지, 컴포넌트 재사용, 기존 Sketch 자산의 이전 가능성까지 함께 고려하는 것이 Figma식 워크플로의 핵심이다.

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

디자인 시스템Figmacollaborative-designmultiplayer-editing+2

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

에어비앤비 존 골

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

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

디자인 시스템AIReacttypography+2

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

피그마의 새로운 아이

Figma의 새 아이콘은 단순한 로고 변경이 아니라, 회사의 디자인 철학과 제품 정체성을 시각화한 결과다. 아이콘은 디자인의 기본 요소를 기념하고, 놀이와 실험을 장려하며, 재사용 가능한 모듈과 시스템으로서의 디자인을 표현한다. Figma는 이를 통해 복잡한 결과물도 단순한 요소와 규칙의 조합에서 출발한다는 메시지를 전달한다. ## 디자인의 기본 요소를 기념 - 모든 디자인은 점, 선, 도형 같은 기본 요소에서 시작한다. - 복잡한 디자인도 필수적인 구성 요소들의 조합으로 단순화할 수 있다. - Figma는 많은 도구를 제공하기보다, 벡터 네트워크나 프레임처럼 적은 수의 강력한 기능이 서로 잘 결합되는 방식을 중시한다. - 기본 도형과 원색을 활용하는 디자인 철학은 바우하우스 등에서 강조되어 왔으며, 오랜 디자인 전통과 연결된다. - 새 아이콘은 모든 디자인 프로젝트의 출발점인 단순한 형태와 구성 요소를 상징한다. ## 놀이와 실험을 장려 - 기존 문제에 대한 새로운 해결책은 개방적인 태도와 실험, 때로는 구조화된 놀이를 통해 발견할 수 있다. - 아이들이 가지고 노는 블록에서 영감을 받아, 아이콘에 밝은 색상과 단순한 형태를 적용했다. - 놀이를 통해 정답에 얽매이지 않고 더 흥미로운 결과를 탐색할 수 있다는 믿음이 반영됐다. - 브루노 무나리, 앤 랜드와 폴 랜드처럼 주요 디자이너들이 어린이 책 작업을 통해 창의성과 놀이의 가치를 다룬 사례도 언급된다. - 아이콘은 Figma가 사용자에게 개방적이고 즐거운 디자인 경험을 제공하고자 한다는 점을 표현한다. ## 시스템으로서의 디자인 - 디지털 제품은 다양한 화면 크기, 운영체제, 모니터, 네트워크 환경에 대응해야 하므로 일회성 결과물보다 모듈형 시스템이 적합하다. - Figma는 디자인을 개별 아티팩트가 아니라 레시피나 청사진처럼 재사용 가능한 규칙과 구성 요소의 체계로 본다. - 픽셀 기반 디자인은 특정 환경을 벗어나면 쉽게 깨질 수 있지만, 벡터와 규칙 기반 디자인은 다양한 환경에 맞게 확장할 수 있다. - 새 아이콘은 세 가지 단순한 도형과 모듈형 그리드로 구성되어, 시스템 기반 디자인이라는 개념을 직접 보여준다. - 팀 라이브러리 같은 Figma의 기능 역시 여러 사람이 일관된 디자인 시스템을 구축하도록 돕는다는 철학에서 출발한다. Figma의 새 아이콘은 단순한 시각적 표식이 아니라, 기본 요소를 조합하고 자유롭게 실험하며 재사용 가능한 시스템을 만드는 디자인 관점을 압축한 상징이다. 디자인 작업에서는 복잡한 결과물을 처음부터 만들기보다, 단순한 구성 요소와 명확한 규칙을 조합하는 방식이 확장성과 창의성을 함께 높일 수 있다.

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

디자인 시스템Figma반응형 디자인vector-design+2

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

Figma의 팀 라이

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

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

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

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

피그마 컴포넌트

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

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

디자인 시스템FigmaReactAndroid+4

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

가구에서 스크린까지

가구는 완성 후 실수를 고치기 어렵지만, 디지털 제품은 매일 개선할 수 있다는 차이에서 출발한다. Figma는 가구처럼 사용자의 작업을 돕되 스스로는 눈에 띄지 않는 도구를 지향하며, 가구 디자인의 원칙을 도구·조작감·색상 설계에 적용했다. 궁극적으로 좋은 디자인 도구는 사용자가 도구 자체가 아니라 자신의 아이디어에 집중하게 해야 한다. ## 사용자의 삶을 돕고 사라지는 제품 - 가구의 목적은 빈 공간을 채우는 것이 아니라 그 안에서 이루어지는 생활을 지원하는 데 있다. - Figma 역시 제품 자체가 주인공이 아니라, 사용자가 다른 제품과 아이디어를 만들어내도록 돕는 기반이 되어야 한다. - 따라서 인터페이스는 기능을 제공하면서도 사용자의 창작 활동을 방해하지 않고 배경으로 물러나야 한다. ## 최소한이지만 강력한 도구 - 기본 도구 수를 줄이되, 단순한 작업부터 복잡한 작업까지 대응할 수 있도록 설계했다. - 망치 하나로 작은 수납장부터 집 전체를 만들 수 있듯이, 핵심 도구는 다양한 결과물을 만들어낼 만큼 유연해야 한다. - Figma의 펜 도구는 물리적인 펜처럼 느껴지도록 재구성했다. - 벡터 객체를 전통적인 경로가 아니라 점들의 네트워크로 구성해, 임의의 점을 서로 연결할 수 있게 했다. - 이 방식은 정해진 절차를 따라가는 대신 결과물을 자연스럽게 만들어가는 데 집중하게 한다. - 편집기는 필요한 도구가 잘 정리된 작업대처럼 느껴져야 하며, 도구의 배치와 접근성은 작업의 기본 조건이다. ## 손에 잡히는 조작감과 사용자 제어 - 물리적 도구를 사용할 때의 촉각적 익숙함은 디지털 도구에서도 통제감을 높인다. - 키보드 단축키는 사용자가 작업을 빠르고 직접적으로 제어하게 만드는 대표적인 수단이다. - Figma의 `Command` 키와 드래그 조합은 중첩된 요소를 선택할 때의 불편을 해결한다. - `Command`를 누른 채 드래그하면 컨테이너와 내부 요소를 구분하는 휴리스틱이 작동해, 컨테이너 자체가 아니라 포함된 요소만 선택한다. - 예를 들어 툴바 배경은 제외하고 그 안의 아이콘만 한 번에 박스 선택할 수 있다. - 사용자는 레이어 계층 구조를 일일이 생각하지 않고 화면 속 요소를 직접 조작할 수 있다. ## 눈에 띄지 않되 의미를 전달하는 색상 - 초기 Figma는 거의 단색에 가까운 ‘무스킨’ 스타일을 사용해 UI가 디자인을 방해하지 않도록 했다. - 그러나 기능이 늘어나면서 단색 UI만으로는 서로 다른 구성 요소를 명확히 구분하기 어려워졌다. - 해결책은 UI를 완전히 사라지게 하는 것이 아니라, 사용자가 의식하지 않아도 의미를 파악할 수 있도록 만드는 것이었다. - 현재의 색상 체계는 색을 시각적 장식이 아니라 의미의 추가 계층으로 활용한다. - 초록색: 실행이나 행동 - 파란색: 선택 상태 - 이러한 색상 그룹은 화면을 한눈에 이해하게 하고, 사용자가 “어떻게 도구를 쓰는가”보다 “무엇을 그리고 있는가”에 집중하도록 돕는다. ## 분야를 넘나드는 디자인 원칙 - 디자인 도구를 발전시키려면 현재 업계의 관습과 기준을 계속 재검토해야 한다. - 유용한 해결책은 과거의 디자인뿐 아니라 다른 분야에서도 발견될 수 있다. - 가구 디자인처럼 분야를 초월하는 원칙—기능 지원, 사용성, 절제, 재료와 도구의 이해—을 디지털 제품에 적용할 수 있다. - 디자이너는 자신의 전문 영역에만 머무르지 않고 역사와 타 분야를 폭넓게 참고해야 혁신적인 도구를 만들 수 있다. Figma를 설계할 때는 기능을 늘리는 것보다 사용자의 작업을 얼마나 자연스럽게 지원하는지에 초점을 두는 것이 중요하다. 최소한의 유연한 도구, 직관적인 조작, 의미를 전달하는 시각 체계를 갖추면 제품은 사용자의 창작을 돕면서도 전면에 나서지 않을 수 있다.

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

디자인 시스템Figma사용자 경험사용자 인터페이스+2

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

스크린 디자인을 위한 그리드

스위스 타이포그래피에서 발전한 그리드 시스템은 화면 디자인에서도 여전히 일관성과 질서를 만드는 핵심 원리다. 고정된 인쇄물과 달리 화면은 기기 크기와 밀도가 달라지므로, 디지털 디자인에는 유연한 그리드와 이를 제어할 도구가 필요하다. Figma는 제약 조건, 레이아웃 그리드, 중첩 프레임을 결합해 다양한 화면 크기에서도 구조가 유지되는 디자인을 제안한다. ## 고정된 페이지에서 유동적인 화면으로 - 1950년대 스위스 디자이너들은 정보를 체계적으로 배치하기 위해 그리드 디자인을 발전시켰다. - Joseph Müller-Brockmann, Karl Gerstner 등의 작업은 합리적인 구조와 시각적 아름다움을 함께 보여주었다. - 인쇄 디자인은 페이지 크기, 글자 크기, 행간, 여백을 정밀하게 통제할 수 있다는 전제를 가진다. - 반면 화면 디자인은 브라우저와 기기마다 크기와 화면 밀도가 달라 동일한 고정 레이아웃을 그대로 적용하기 어렵다. - 따라서 문제는 그리드 철학 자체가 아니라, 유동적인 캔버스를 다룰 수 있는 디지털 도구가 부족했다는 데 있다. ## 기존 화면 디자인 도구의 한계 - 초기 디지털 디자인에서는 기술적 제약 때문에 인쇄 디자인의 많은 원칙이 버려졌다. - 오늘날에는 타이포그래피와 레이아웃 제어 기능이 발전했지만, 도구는 여전히 고정된 아트보드 중심인 경우가 많다. - 디자이너는 여러 화면 크기의 아트보드를 반복해서 복사·수정하거나, 개발 단계에서 반응형 동작을 추측해야 했다. - iPad처럼 화면의 가장자리와 페이지 개념을 제공하는 기기가 등장했지만, 기기 종류가 늘면서 디지털 페이지는 어떤 크기와 형태도 가질 수 있게 되었다. - 중요한 과제는 유연성을 확보하면서도 정밀한 정렬과 통제를 유지하는 것이다. ## 제약 조건: 크기 변화에 대응하는 규칙 - 제약 조건은 프레임의 크기가 바뀔 때 내부 객체가 어떻게 반응할지 지정한다. - 객체를 프레임의 왼쪽이나 오른쪽에 고정하거나, 중앙에 배치하거나, 남은 공간을 채우도록 늘릴 수 있다. - 이를 통해 단순히 요소를 특정 좌표에 고정하는 대신, 화면 크기 변화에 따른 동작을 설계할 수 있다. - 제약 조건만으로도 가장자리 고정, 중앙 정렬, 영역 확장과 같은 기본적인 반응형 레이아웃을 구현할 수 있다. ## 레이아웃 그리드: 정밀한 반응형 정렬 - 복잡한 디자인에서는 단순한 좌우 고정이나 중앙 정렬만으로 충분하지 않기 때문에 그리드가 필요하다. - Figma의 그리드는 제약 조건이 작동하는 기준을 세밀하게 정의한다. - 예를 들어 어떤 박스가 두 개의 그리드 열을 차지하도록 설정하면, 화면이 커지거나 작아질 때 박스도 그 열의 경계에 맞춰 함께 늘어나거나 줄어든다. - 열 그리드는 웹페이지의 텍스트 흐름뿐 아니라 아이콘, 툴바, 버튼 등 다양한 요소를 정렬하는 데 사용할 수 있다. - 그리드는 열과 행, 여백, 모듈 등의 구조를 통해 디자인 전체에 일관된 시각적 리듬을 부여한다. ## 중첩 프레임: 복잡한 구조를 구성하는 방법 - 하나의 화면 안에서도 영역마다 다른 레이아웃 규칙이 필요할 수 있다. - 프레임 안에 또 다른 프레임을 배치하면 각 영역에 독립적인 그리드와 제약 조건을 적용할 수 있다. - 예를 들어 전체 화면은 큰 2열 그리드를 사용하고, 툴바나 카드 내부에는 별도의 그리드를 적용할 수 있다. - 이러한 구조는 HTML의 중첩된 `<div>`와 유사하며, 실제 개발 구조로 옮기기에도 적합하다. - Figma가 ‘아트보드’ 대신 ‘프레임’이라는 용어를 사용하는 이유도 단순한 캔버스를 넘어 계층적 레이아웃 시스템을 제공하기 때문이다. ## 현대적인 디자인 도구의 방향 - 정적인 화면을 그리는 것만으로는 다양한 디바이스 환경을 충분히 다룰 수 없다. - 디자인 도구는 과거의 인쇄 디자인 원칙을 버리기보다, 이를 유동적인 화면 환경에 맞게 재해석해야 한다. - 제약 조건, 그리드, 중첩 프레임은 각각 독립적으로도 사용할 수 있지만 함께 사용할 때 복잡한 반응형 디자인 시스템을 구축할 수 있다. - 좋은 도구는 결과물뿐 아니라 화면 크기 변화에 따른 디자인의 동작과 규칙까지 표현할 수 있어야 한다. 실무에서는 먼저 전체 화면의 그리드를 정의한 뒤, 주요 요소에 제약 조건을 설정하고, 카드·툴바·콘텐츠 영역을 중첩 프레임으로 분리하는 방식이 효과적이다. 이렇게 하면 여러 화면 크기별 시안을 일일이 복제하지 않고도 일관성과 반응성을 함께 관리할 수 있다.

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

디자인 시스템FigmaHTML반응형 디자인+3