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

Made in Figma: 국립공

미국 국립공원관리청(NPS)은 431개 국립공원과 기념지를 하나의 앱에서 다루기 위해, 과거의 인쇄 브로슈어 디자인 시스템인 매시모 비넬리의 ‘유니그리드(Unigrid)’를 디지털 인터페이스에 적용했다. GuideOne과 Twohy Design Works는 각 공원의 다양한 데이터와 서사를 수용하면서도 일관된 사용자 경험을 제공하는 앱을 만들었다. 이 사례는 오래 지속될 공공 서비스일수록 확장 가능한 디자인 시스템, 접근성, 협업 가능한 제작 환경이 중요하다는 점을 보여준다. ## 431개 공원을 하나의 앱으로 통합하기 - NPS는 요세미티 같은 대형 국립공원부터 펜실베이니아의 한 칸짜리 기념관까지 규모와 성격이 매우 다른 431개 시설을 관리한다. - 과거에는 방문객 안내를 위해 각 공원별 인쇄 브로슈어를 제작했다. - 2016년 GuideOne이 공원별 개별 앱을 개발하기 시작했지만, 이후 하나의 통합 NPS 앱으로 방향을 전환했다. - 통합 과정에서는 다음과 같은 문제가 발생했다. - 각 공원이 자체적으로 데이터를 관리하고 콘텐츠를 작성함 - 공원마다 역사, 시설, 방문 정보, 내러티브가 다름 - 서로 다른 데이터를 하나의 구조와 시스템으로 통합해야 함 - 장기간 유지될 정부 서비스이므로 내구성과 유지보수성이 필요함 - 다양한 장애와 접근성 요구를 가진 사용자를 지원해야 함 ## 인쇄 브로슈어에서 찾은 디자인의 출발점 - NPS 브로슈어는 오랫동안 공원마다 형식과 스타일이 제각각이었다. - 1977년 NPS는 디자이너 매시모 비넬리에게 모든 인쇄물의 그래픽 요소와 제작 방식을 표준화하는 시스템을 의뢰했다. - 이때 만들어진 유니그리드는 다음을 체계화했다. - 페이지 구성과 그리드 - 이미지와 텍스트의 배치 - 타이포그래피와 시각적 위계 - 브로슈어 제작 규격과 일관된 브랜드 표현 - GuideOne과 Twohy Design Works는 이 역사적 시스템을 그대로 복제하지 않고, 디지털 제품에 적합한 원칙으로 재해석했다. ## 유니그리드를 디지털 인터페이스로 확장 - 앱은 공원별 개성을 유지하면서도 전체 서비스가 하나의 제품처럼 보이도록 설계됐다. - 브로슈어에서 사용하던 구조적 일관성을 앱의 화면과 콘텐츠 구성에 적용했다. - 공식 NPS 앱은 다음 기능을 제공한다. - 공원과 시설을 탐색하는 인터랙티브 지도 - 방문객을 위한 핵심 정보 - 셀프 가이드 투어 - 공원별 장소, 활동, 안내 콘텐츠 - 디자인 시스템은 각 공원이 독자적인 콘텐츠를 제공하더라도 공통된 사용자 경험을 유지하도록 돕는다. - 즉, 유니그리드는 특정 화면의 시각적 스타일이 아니라 다양한 콘텐츠를 하나의 체계 안에 담는 운영 방식으로 활용됐다. ## 데이터와 엔지니어링을 함께 고려한 협업 - NPS 앱은 단순한 시각 디자인 프로젝트가 아니라 콘텐츠와 데이터 통합 프로젝트이기도 했다. - NPS, GuideOne의 개발팀, 디자인팀이 Figma를 통해 작업물을 공유하고 피드백을 주고받았다. - 디자인 단계에서 다음 사항을 함께 검토할 수 있었다. - 실제 NPS 데이터로 구현 가능한 화면인지 - 공원별 콘텐츠 차이를 시스템이 수용할 수 있는지 - 개발팀이 재사용 가능한 컴포넌트로 구현할 수 있는지 - 사용자의 탐색 흐름이 복잡한 공원 구조를 잘 반영하는지 - Figma는 디자인 시안을 전달하는 도구를 넘어, 기관 담당자와 디자이너, 개발자가 제약 조건을 조율하는 공동 작업 공간으로 사용됐다. ## 공공 서비스에 필요한 접근성과 지속성 - 정부용 소프트웨어는 일반적인 단기 제품보다 훨씬 긴 수명을 전제로 한다. - 따라서 유행하는 시각 효과보다 안정적인 구조와 유지 가능한 시스템이 중요하다. - 서로 다른 접근성 요구를 가진 많은 사용자가 이용하므로 정보의 명확한 위계와 예측 가능한 인터페이스가 필요하다. - 공원별 콘텐츠가 계속 추가·변경되더라도 전체 앱의 품질이 흔들리지 않도록 공통 디자인 규칙과 컴포넌트 체계가 기반이 됐다. ## 이 사례가 보여주는 디자인 시스템의 역할 - 디자인 시스템은 브랜드를 일관되게 보이게 하는 규칙에 그치지 않고, 대규모 조직의 다양한 콘텐츠를 운영하는 기반이 될 수 있다. - 역사적 디자인 자산을 디지털 환경에 적용할 때는 외형보다 그 안의 원칙을 계승하는 것이 중요하다. - 통합 서비스에서는 모든 콘텐츠를 똑같이 만드는 것보다, 차이를 수용할 수 있는 공통 구조를 만드는 것이 효과적이다. - NPS 앱은 종이 브로슈어의 시각 언어를 지도, 검색, 투어, 방문 정보가 결합된 디지털 경험으로 전환한 사례다. 장기적으로 운영될 공공 앱을 만든다면, 먼저 조직의 기존 콘텐츠와 디자인 자산에서 검증된 원칙을 찾고, 이를 재사용 가능한 컴포넌트와 명확한 데이터 구조로 변환하는 것이 좋다. 여기에 초기 단계부터 접근성과 개발 가능성을 함께 검토해야 일관되면서도 실제 운영에 강한 제품을 만들 수 있다.

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

디자인 시스템Figma사용자 경험접근성+2

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

요점만 말하자면:

Figma의 「Building better」는 개발자 경험(DX)이 특정 팀이나 도구만의 문제가 아니라, 조직 전체의 문화·원칙·프로세스에서 결정된다고 주장한다. 글은 VS Code, Atlassian, Linear 등의 사례를 통해 개발자의 몰입을 보호하고, 개발자 만족을 측정하며, 명확한 제품 철학과 디자인·개발 협업 체계를 구축하는 방법을 소개한다. 결론적으로 더 나은 개발 환경은 도구 도입보다 조직 차원의 일관된 운영 방식에서 출발한다. ## 개발자의 몰입을 지키는 ‘이너 루프’ VS Code는 개발자가 코드 작성에 집중하는 시간을 “이너 루프”, 버그 관리·티켓 응답·회의 같은 협업 활동을 “아우터 루프”로 구분한다. - 생산성을 가장 크게 떨어뜨리는 요인은 작업 자체보다 잦은 컨텍스트 스위칭이다. - 코드 편집과 디버깅처럼 집중력이 필요한 작업을 보호해야 한다. - 협업 활동을 완전히 제거하기보다, 이너 루프와 아우터 루프 사이의 전환 횟수를 줄이는 것이 핵심이다. - 개발 도구는 개발자가 여러 업무 시스템을 오가며 흐름을 잃지 않도록 지원해야 한다. ## 개발자 경험을 넘어선 ‘개발자 기쁨’ Atlassian은 개발자 경험을 넘어 “developer joy”를 조직의 중요한 기준으로 삼는다. - 개발자 기쁨은 단순한 편의성이나 만족도보다, 좋은 소프트웨어를 만드는 과정의 완성도와 장인정신에 초점을 둔다. - 이를 추상적인 구호로 남기지 않고 조직의 가치와 업무 방식에 반영한다. - 개발자 경험 개선이 생산성, 업무 만족도, 비즈니스 성과에 어떤 영향을 주는지 측정하려 한다. - 특정 팀의 활동에 그치지 않고 조직 전체로 확장하려면 공통된 원칙과 운영 체계가 필요하다. ## 강한 의견을 반영한 소프트웨어 Linear는 모든 사용자의 요구를 수용하기보다, 제품이 지향하는 명확한 관점을 바탕으로 기본적인 업무 흐름을 설계한다. - 좋은 도구는 기능을 무작정 늘리기보다 사용자가 따라갈 수 있는 강한 기본값을 제공한다. - 제품의 철학은 인터페이스뿐 아니라 우선순위 설정, 협업 방식, 내부 프로세스에도 반영된다. - 일반적인 관행과 다르더라도 일관된 원칙이 사용자 경험을 단순하고 예측 가능하게 만들 수 있다. - 다만 독단적인 설계가 아니라, 어떤 문제를 해결하려는지에 대한 분명한 판단이 전제되어야 한다. ## Dev Mode 도입에서 얻은 10가지 교훈 Decathlon의 엔지니어링 매니저는 1년간 Dev Mode를 디자인 시스템과 개발 workflow에 적용한 경험을 공유한다. - 처음부터 조직 전체에 도입하기보다 작은 범위에서 시작하는 것이 좋다. - 빠르게 효과를 확인할 수 있는 작은 개선부터 추진한다. - 디자인과 개발 사이의 전달 과정에서 반복되는 혼선을 찾아 해결한다. - Dev Mode를 단순한 기능 도입이 아니라 디자인 시스템 운영 방식의 일부로 활용한다. - 실제 사용 경험을 바탕으로 팀에 맞는 규칙과 협업 방식을 점진적으로 정립한다. ## 대규모 제품의 복잡성 관리 Crunchyroll은 웹, 모바일, 게임 콘솔 등 15개 플랫폼과 12개 언어를 지원하기 위해 Universal Design System을 활용한다. - 플랫폼과 언어가 늘어날수록 디자인 일관성과 개발 전달 과정이 복잡해진다. - 공통 컴포넌트와 디자인 시스템을 통해 여러 접점에서 동일한 사용자 경험을 유지한다. - Dev Mode는 디자인 사양을 확인하고 개발에 필요한 정보를 전달하는 과정을 간소화한다. - 디자인 시스템의 채택률을 높이려면 문서화뿐 아니라 실제 workflow 안에서 쉽게 사용할 수 있어야 한다. - 복잡성을 줄이는 핵심은 개별 화면을 관리하는 것이 아니라 재사용 가능한 시스템을 구축하는 데 있다. ## 디자인과 코드 사이의 연결 글의 ‘Rabbit hole’에서는 Figma의 Code Connect와 Simple Design System 사례를 통해 디자인과 실제 코드의 연결을 다룬다. - Simple Design System은 실제 코드 기반을 갖춘 UI 키트로, 디자인 결과물과 구현 결과 사이의 간극을 줄이는 것을 목표로 한다. - 디자인 시스템은 시각적 컴포넌트 모음에 그치지 않고 코드에서 어떻게 사용되는지까지 연결되어야 한다. - Code Connect 같은 접근은 디자인 컴포넌트와 실제 코드 컴포넌트의 관계를 명확히 하는 데 도움을 준다. - 디자인과 개발의 연결은 단순히 협업 편의성을 높이는 것뿐 아니라 구현 품질과 일관성을 관리하는 수단이기도 하다. 조직은 새로운 도구를 도입하는 데 그치지 말고, 집중 업무 보호, 명확한 제품 원칙, 측정 가능한 개발자 만족도, 디자인 시스템과 코드의 연결을 함께 설계해야 한다. 작은 workflow 개선부터 시작해 실제 효과를 검증하고, 검증된 방식을 조직 전체의 문화와 프로세스로 확장하는 접근이 현실적이다.

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

디자인 시스템Figmadev-modecode-connect+2

figma·2024년 9월 30일·4분 읽기큐레이션 요약

Figma on Figma:

Figma UI3는 작업물을 화면의 중심에 두고 사용자의 작업 흐름을 방해하지 않는 것을 목표로 2년 넘게 설계·개선된 인터페이스다. 초기에는 탐색·속성 패널을 플로팅 방식으로 바꿨지만, 실제 사용 데이터와 피드백을 통해 캔버스 공간과 작업 속도를 해친다는 점을 확인하고 고정 패널로 되돌렸다. Figma는 명확한 미래 비전을 세우되, 사용자 피드백과 성능 지표에 따라 과감하게 설계를 수정하는 접근을 강조한다. ## 작업 중심 인터페이스를 위한 UI3 - UI3의 핵심 목표는 캔버스와 디자이너의 작업을 중심에 두고 불필요한 방해 요소를 줄이는 것이다. - 팀은 2년 이상 다양한 인터페이스를 반복적으로 실험했으며, 출시 이후에도 기존의 핵심 설계 결정을 되돌렸다. - “완성도와 작업 흐름”처럼 직접 측정하기 어려운 요소는 정량 지표만으로 판단하기 어렵기 때문에 사용자 의견을 수집하고 신중하게 해석했다. - UI3는 2024년 10월 10일 모든 사용자에게 제공될 예정이었다. ## 도킹 패널과 플로팅 패널 실험 - 탐색 패널과 속성 패널은 Figma 인터페이스의 핵심 요소였기 때문에 다양한 실험이 진행됐다. - 마우스를 올릴 때만 나타나는 패널 - 캔버스 위에 떠 있는 패널 - 제품 전반에 일관되게 적용되는 플로팅 UI - 최종적으로 초기 UI3에서는 패널을 플로팅 방식으로 제공했다. - 플로팅 패널의 장점은 단순하고 친근한 인터페이스를 만들며, 제품 생태계 전체에 일관된 경험을 제공할 수 있다는 점이었다. - 그러나 오픈 베타 이후 실제 사용 데이터를 분석한 결과 다음 문제가 드러났다. - 작은 화면에서 캔버스 공간을 과도하게 차지함 - 디자인이 패널 뒤에서 일부 가려져 시각적으로 산만함 - 눈금자가 디자인에서 멀어져 활용성이 떨어짐 - 장시간 Figma를 사용하는 사용자들의 작업 속도를 저하시킴 - Figma는 “속도는 기능”이라는 판단 아래, 정식 출시에서는 탐색·속성 패널을 다시 고정했다. - 다만 패널 크기는 조절할 수 있도록 해 사용자가 작업 환경에 맞게 유연하게 배치할 수 있게 했다. - 플로팅 UI 자체가 완전히 사라지는 것은 아니다. - Figma Design의 Minimize UI 상태 - Figma Slides의 그리드 보기 - FigJam의 기본 인터페이스 - 모든 Figma 제품의 하단 툴바 에서는 플로팅 요소가 유지된다. ## Minimize UI와 작업 집중 - 기존의 Hide UI 기능은 작업물을 전면에 보여주지만, UI를 숨기거나 다시 표시하는 방식이 다소 극단적이고 제한적이었다. - UI3의 Minimize UI는 측면 패널을 접어 캔버스를 넓히면서도 필요할 때 도구에 쉽게 접근할 수 있도록 설계됐다. - 특히 다음 환경에서 유용하도록 개선됐다. - 작은 화면 - 분할 화면 - 원격·하이브리드 근무 환경 - Figma는 UI가 항상 많이 표시되어야 한다는 전제 대신, “작업이 캔버스의 중심이어야 한다”는 원칙을 장기적인 기준으로 삼았다. ## 확장성을 고려한 정보 구조 - UI3에서는 기능을 단순히 재배치하는 데 그치지 않고, 앞으로 추가될 기능을 수용할 수 있는 구조를 만들려 했다. - 기존 인터페이스는 새로운 기능을 넣을 때마다 화면에 요소를 억지로 끼워 넣는 방식에 가까웠다. - 새 탐색 패널은 다음과 같은 논리적 순서로 정보를 배치한다. - 파일 이름 - 브랜치 이름 - 프로젝트 이름 - 페이지 - 레이어 - 향후 파일 이동이나 탐색 방식이 추가되더라도 기존 구조를 크게 훼손하지 않고 확장할 수 있도록 설계했다. - 이는 현재의 편의성뿐 아니라 아직 구현되지 않은 미래의 기능까지 고려한 정보 구조다. ## 변화하는 인터페이스 관습과 블렌드 모드 - Figma는 UI3에서 과거 인터페이스의 일부 관습을 그대로 유지하기보다, 현재 사용자가 익숙하게 받아들이는 패턴을 재검토했다. - 예를 들어 다음과 같은 방식은 기술적으로는 다소 비직관적일 수 있지만 널리 정착됐다. - Shift 키를 사용하는 명령 단축키 - 화면에 거의 드러나지 않는 스크롤바 - 블렌드 모드 역시 과거의 사용 방식과 새로운 인터페이스 관습 사이의 균형을 맞추는 대상으로 다뤄졌다. - 제공된 글 내용은 블렌드 모드 섹션 초반에서 끝나므로, 구체적인 변경 사항은 확인할 수 없다. UI3의 가장 실용적인 교훈은 큰 폭의 redesign도 가설로 시작하되 실제 사용성 검증을 거쳐 수정해야 한다는 점이다. 새로운 UI를 도입할 때는 시각적 새로움보다 캔버스 공간, 작업 속도, 화면 크기별 사용성, 장시간 사용자의 효율을 우선적으로 측정하는 것이 바람직하다.

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

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

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

디자이너를 위한 더 나은

Figma는 디자이너가 아이디어를 실제 화면으로 옮기는 초기 단계를 돕기 위해 AI 기능인 **First Draft**를 재출시했다. 이 기능은 사용자의 프롬프트와 Figma 디자인 시스템을 바탕으로 여러 컴포넌트를 조합해 초안을 만들며, 완성품보다 탐색과 논의의 출발점을 제공하는 데 초점을 둔다. 기존 Make Designs는 다른 앱과 지나치게 유사한 결과가 생성되는 문제로 중단됐지만, 디자인 라이브러리와 생성 방식을 개선해 제한적 베타로 돌아왔다. ## 아이디어를 초안으로 옮기는 장벽 - 좋은 디자인 아이디어가 있어도 첫 화면을 만들기까지 반복적인 작업과 여러 장애물이 발생한다. - 초기 초안은 완성도 높은 결과물보다 다음 목적에 중요하다. - 아이디어를 빠르게 시각화 - 팀 논의 시작 - 다양한 디자인 방향 탐색 - 제품 아이디어를 실제 작업으로 발전 - Figma는 AI가 사용자의 머릿속 아이디어를 새로운 방식으로 표현하고, 초기 탐색 과정을 매끄럽게 만들 수 있다고 본다. ## First Draft의 작동 방식 - First Draft는 고객 콘텐츠를 학습 데이터로 사용하지 않는다. - OpenAI의 GPT-4, Amazon Titan과 같은 범용 AI 모델을 활용한다. - 생성 과정은 세 요소로 구성된다. - **모델**: 결과를 생성하는 AI 모델 - **컨텍스트**: Figma가 제공하는 모바일·데스크톱 디자인 시스템, 컴포넌트, 조합 사례 - **프롬프트**: 사용자가 입력하는 디자인 목표와 요구사항 - AI는 프롬프트를 해석한 뒤 적절한 디자인 시스템 컴포넌트를 선택하고 배치·수정해 초기 디자인을 만든다. - 따라서 빈 캔버스에서 시작하는 대신, 사용자가 편집하고 발전시킬 수 있는 출발점을 제공한다. ## Make Designs의 문제와 재출시 - Figma는 Config 2024에서 Make Designs를 포함한 10개 이상의 Figma AI 기능을 제한적 베타로 공개했다. - Make Designs는 간단한 프롬프트만으로 기본 디자인 초안을 생성하는 기능이었다. - 그러나 내부 디자인 시스템의 문제로 인해 생성 결과가 기존 앱과 지나치게 비슷해지는 문제가 발견됐다. - Figma는 기능을 일시적으로 비활성화하고 분석, 반복 개선, 테스트를 진행했다. - 재출시하면서 이름을 **First Draft**로 변경했다. - 완성된 디자인을 만드는 기능이 아니라 - 디자이너가 아이디어를 시작할 수 있는 “출발점”이라는 목적을 더 정확히 표현하기 위해서다. ## 네 가지 디자인 라이브러리 - 사용자는 필요에 따라 네 가지 라이브러리 중 하나를 선택할 수 있다. - 라이브러리는 낮은 충실도의 와이어프레임부터 시각적으로 구체적인 사이트·앱 디자인까지 범위가 다양하다. - 주요 활용 방식은 다음과 같다. - **로파이 와이어프레임**: 특정 스타일에 덜 구애받고 구조와 흐름을 탐색 - **하이파이 라이브러리**: 더 풍부한 시각 표현과 구체적인 UI 패턴 실험 - 이는 기존 파일이나 컴포넌트를 정확히 찾는 **Visual Search**와 구별된다. - Visual Search: 이미 존재하는 디자인 자산 검색 - First Draft: 아직 정해지지 않은 아이디어와 선택지 탐색 ## 향후 확장 방향 - Figma는 조직이 자체 디자인 라이브러리를 First Draft에 연결할 수 있도록 확장할 계획이다. - 향후 팀은 수백 개의 컴포넌트를 직접 찾지 않고도 회사 고유의 디자인 언어를 반영한 초안을 만들 수 있다. - Google Material 3 같은 표준 디자인 시스템을 활용한 개념 증명도 진행 중이다. - 코드와 연결된 강력한 컴포넌트를 사용하면 디자이너와 개발자가 동일한 디자인 시스템을 기반으로 더 긴밀하게 반복 작업을 할 수 있다. - 궁극적으로 First Draft는 기존 디자인 도구를 대체하기보다 다음을 지원하는 확장 도구로 제시된다. - 정확한 시작점 찾기 - 더 넓은 디자인 선택지 탐색 - 팀의 디자인 언어를 반영한 빠른 반복 ## 현재 상태 - 글의 편집자 주에 따르면 First Draft는 현재 독립 기능이 아니라 **Figma 디자인 에이전트**의 기능으로 통합됐다. - 디자인 에이전트는 기존 First Draft 기능에 다음 능력을 더한다. - 프롬프트 재입력 - 더 깊은 반복 작업 - 여러 요소의 일괄 수정 - 화면 흐름과 디자인에 대한 실시간 피드백 실무에서는 AI가 만든 초안을 최종 디자인으로 받아들이기보다, 빠른 구조 탐색과 팀 논의를 위한 출발점으로 활용하는 것이 적절하다. 특히 조직의 디자인 시스템을 연결할 수 있다면 브랜드 일관성을 유지하면서 초기 아이디어를 더 빠르게 검증할 수 있다.

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

디자인 시스템사용자 경험생성형 AIfigma-ai+2

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

Figma on Figma: 최신

Figma는 디자이너 중심 도구에서 개발자·PM·제품팀 전체가 사용하는 생태계로 확장한 현실을 반영해 브랜드의 시각 언어를 재정비했다. 정적인 커서와 굵은 검은 윤곽선 중심의 기존 표현 대신, 공동 창작과 다양한 역할을 상징하는 프리미티브·색상·타이포그래피·모션을 도입했다. 새 브랜드는 누구나 아이디어를 현실로 만들 수 있는 협업 공간으로서의 Figma를 표현한다. ### 디자이너 도구에서 제품 개발 생태계로 - 지난 10년 동안 Figma는 순수한 디자인 도구에서 개발자, 제품 관리자, 전체 제품팀을 지원하는 플랫폼으로 성장했다. - 기존 브랜드는 벡터 그래픽의 문법에 가까웠다. - 정적인 마우스 커서 - 굵은 검은 외곽선 - 디자인 작업 자체에 초점을 둔 시각 표현 - 새로운 정체성은 아이디어 구상부터 개발, 협업, 완성까지 여러 사람이 참여하는 제품 제작 과정을 담는 데 초점을 맞췄다. ### 새 시각 언어를 구성하는 네 가지 기반 - **다목적 프리미티브** - 공동 창작에 참여하는 다양한 사람과 역할을 상징한다. - 특정 직군이나 작업 단계에 종속되지 않는 기본 형태로 활용된다. - **동적인 구성** - 만들고, 조정하고, 협업하는 다양한 작업 방식을 표현한다. - 정적인 결과물보다 제작 과정의 움직임과 상호작용을 강조한다. - **확장된 색상 팔레트** - 더 생생하고 폭넓은 색을 사용한다. - 색상 변수를 활용해 다양한 매체와 상황에 쉽게 적용할 수 있도록 설계했다. - **통합된 모션 원칙** - 창작 과정에서 발생하는 행동과 흐름을 애니메이션으로 표현한다. - 브랜드의 움직임이 단순 장식이 아니라 작업 과정과 연결되도록 했다. ### Figma 전용 서체 체계 - Figma는 Grilli Type과 협업해 독자적인 그로테스크 서체인 **Figma Sans**를 제작했다. - 브랜드에는 다음 네 가지 서체가 포함된다. - **Figma Sans**: 일반적인 브랜드 커뮤니케이션과 본문 - **Figma Sans Condensed**: 더 압축된 인상과 공간 효율이 필요한 표현 - **Figma Mono**: 개발, 코드, 정밀한 제작 작업을 연상시키는 표현 - **Figma Hand**: 브레인스토밍과 팀 협업처럼 인간적인 분위기를 전달 - 서로 다른 서체를 조합해 디자인, 엔지니어링, 협업 등 다양한 역할과 작업 방식을 표현한다. ### 샌드박스에서 시작한 탐색 - Figma Brand Studio는 사람들이 Figma를 사용하는 전 과정을 살펴보며 탐색을 시작했다. - 브레인스토밍 - 초기 아이디어 구상 - 요소 검사 - 최종 결과물의 세부 조정 - 팀은 여러 활동이 하나의 공유 공간에서 동시에 이루어지는 모습에 주목했다. - 이 개념은 사람들이 같은 공간에서 각자 놀고 만들며 상호작용하는 **parallel play**와 연결됐다. - Figma 캔버스를 사람들이 함께 만들고 실험하는 장소로 보고, 놀이터에서 시각적 영감을 얻었다. - Isamu Noguchi의 놀이터와 조경 작품 - Mitsuru Senda의 다채로운 패널형 놀이터 - 정교한 타일 작업과 인프라 구조 - 초기에는 놀이터의 형태를 직접적으로 차용했지만, 최종적으로는 이를 단순한 모방이 아니라 공동 창작과 실험을 상징하는 추상적 시각 언어로 발전시켰다. ### 실용적인 시사점 브랜드 리뉴얼은 로고나 색상만 바꾸는 작업이 아니라, 사용자의 역할과 제품이 지원하는 행동 범위를 다시 정의하는 과정이다. 특히 제품이 여러 직군의 협업 도구로 성장했다면, 시각 체계도 결과물뿐 아니라 아이디어 구상·소통·개발·수정 같은 전체 제작 흐름을 표현하도록 확장하는 것이 효과적이다.

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

디자인 시스템Figma디자인 토큰typography+2

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

개발 모드와 함께한

Figma Dev Mode를 1년간 도입한 Decathlon의 경험에 따르면, 이 도구는 디자인과 개발 사이의 협업을 크게 개선할 수 있다. 특히 Code Connect를 활용하면 Figma 컴포넌트와 실제 코드 간의 속성, 명명 규칙, 상태를 직접 연결할 수 있어 디자인 시스템 운영이 정교해진다. 다만 기존 업무 방식을 한 번에 바꾸기보다 작은 성공 사례부터 시작하고, 명확한 문서화와 완료 기준을 마련하는 것이 중요하다. ## 디자인과 코드의 연결: Code Connect - Dev Mode의 가장 큰 효과는 Figma 컴포넌트를 실제 컴포넌트 코드와 연결하는 **Code Connect**에서 나타났다. - 디자인과 코드에서 컴포넌트 구조가 다르더라도 다음 문제를 조정하는 데 도움이 된다. - 속성 및 프로퍼티 정렬 - 컴포넌트 이름 규칙 통일 - 상태 관리 방식 일치 - 디자인 토큰을 Figma에서 명확히 표현하면 개발자가 시각적 의사결정을 코드 수준에서 이해하기 쉬워진다. - 색상 값과 토큰 이름을 연결하면 디자인 토큰 변경 사항이 대응하는 코드 변경으로 즉시 이어진다. ## 작게 시작하고 확장하기 - 개발자에게 새로운 도구는 기존 업무 흐름을 방해할 수 있으므로, Dev Mode를 전면 도입하기보다 작은 범위에서 시작했다. - 초기에는 Figma Variables를 활용한 디자인 토큰 관리처럼 빠르게 효과를 확인할 수 있는 영역에 집중했다. - **변수 별칭(variable aliasing)**을 사용하면 원시 토큰과 의미론적 토큰 사이에 계층을 만들 수 있다. - 테마 구현이 쉬워진다. - 팀원이 토큰 체계를 이해하고 적용하기 쉬워진다. - 변수 스코핑을 설정하면 특정 변수가 적용될 수 있는 속성을 제한할 수 있다. - 배경색을 텍스트 색상에 사용하는 실수 방지 - 간격 값을 테두리 반경에 사용하는 잘못된 적용 방지 - 변수의 코드 표기법을 플랫폼별 개발자 명명 규칙에 맞게 사용자 지정할 수 있다. ## 고급 검사 기능으로 레이아웃 확인 - Dev Mode는 복잡한 UI 레이아웃과 Flexbox 기반 구조를 검사하고 구현 가능한 코드로 확인하는 데 유용하다. - 개발자는 다음 플랫폼의 구현 속성을 직접 살펴볼 수 있다. - 웹 CSS - iOS의 SwiftUI와 UIKit - Android의 XML과 Compose - 디자이너와 디자인 시스템 담당자는 컴포넌트가 요구사항에 맞게 구현될 수 있는지 구체적으로 검증할 수 있다. - Figma VS Code 확장을 이용하면 CSS, Compose, SwiftUI 코드 탐색과 자동완성을 IDE 안에서 처리할 수 있다. - 결과적으로 디자인 파일을 별도로 해석해 코드를 작성하는 부담이 줄어든다. ## 완료 기준과 문서화 통일 - 디자인 시스템 문서는 지속적으로 최신 상태를 유지하기 어렵고, 디자인 의도나 세부 요구사항이 개발 과정에서 누락되기 쉽다. - Dev Mode의 문서화 및 주석 기능을 사용하면 디자인 파일 안에 필요한 정보를 직접 남길 수 있다. - 주석에는 다음 내용을 포함할 수 있다. - 자유로운 설명 문장 - 정렬 및 크기 같은 명시적 값 - 간격과 치수를 보여주는 측정 정보 - 디자이너는 개발자에게 특정 주석을 직접 연결해 의도와 구현 조건을 명확히 전달할 수 있다. - 팀에서는 각 컴포넌트에 다음 자료를 함께 연결하는 문서화 체계를 구축했다. - GitHub 소스 코드 - README - 관련 플레이그라운드 - 이를 통해 “디자인 완료”와 “개발 완료”의 기준을 팀 전체가 같은 방식으로 이해할 수 있다. ## 적용 시 권장 방식 - Dev Mode를 도입할 때는 기존 개발 프로세스를 즉시 대체하기보다 디자인 토큰이나 변수처럼 효과가 명확한 영역부터 시작하는 것이 좋다. - 토큰 계층, 변수 스코핑, 코드 명명 규칙을 먼저 정리하면 이후 Code Connect와 컴포넌트 문서화의 효과가 커진다. - 검사 기능만 사용하는 데 그치지 말고, 주석·소스 코드·README·플레이그라운드를 연결해 디자인 시스템의 단일한 참고 지점을 만들어야 한다.

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

디자인 시스템디자인 토큰swiftuiflexbox+4

figma·2024년 8월 19일원문

크런치롤이 개발자 (새 탭에서 열림)

글로벌 애니메이션 스트리밍 서비스인 크런치롤(Crunchyroll)은 15개의 플랫폼과 12개의 언어를 지원하는 복잡한 환경 속에서 디자인 일관성을 유지하기 위해 '유니버설 디자인 시스템(Universal Design System)'과 피그마의 '개발 모드(Dev Mode)'를 적극 도입했습니다. 과거 인수합병 과정에서 쌓인 파편화된 워크플로우와 기술 부채를 정리함으로써, 디자이너와 엔지니어 간의 협업 효율을 극대화하고 사용자에게 통일된 브랜드 경험을 제공하게 되었습니다. 이번 전환은 단순히 도구를 바꾼 것을 넘어, 복잡한 다중 플랫폼 환경에서 제품의 출시 속도와 품질을 동시에 잡는 전략적 선택이었습니다. **다중 플랫폼 환경에서의 복잡성과 레거시 문제** * 크런치롤은 웹, 모바일뿐만 아니라 게임 콘솔, 스마트 TV 등 9개의 거실용 기기를 포함해 총 15개의 플랫폼을 지원하며, 1,500만 명 이상의 글로벌 팬들에게 서비스를 제공합니다. * 과거에는 각 플랫폼별로 개별적인 디자인 시스템(iOS, Android, tvOS 등)을 운영했으며, 이는 협업 과정에서 심각한 불일치와 혼선을 초래했습니다. * 기존 워크플로우는 Jira 트리거와 Zeplin에 의존했으나, 아트보드 로딩에만 4~5분이 소요되거나 시차 문제로 인해 최신 디자인 사양을 실시간으로 공유하기 어려운 구조였습니다. **디자인 시스템을 통한 효율성 극대화: "식재료 준비(Meal Prepping)"** * 디자인 시스템을 '식재료 미리 준비하기'에 비유하여, 매번 새로운 기능을 만들 때마다 처음부터 설계하는 것이 아니라 준비된 컴포넌트를 재사용하여 리소스를 절약합니다. * 엔지니어링의 DRY(Don't Repeat Yourself) 원칙을 디자인에도 적용하여 중복 컴포넌트를 제거하고 일관된 타이포그래피, 그리드, 간격 시스템을 구축했습니다. * 이러한 표준화는 사용자의 인지 부하를 줄여 구독 전환율을 높이는 동시에, 제품 관리자가 아이디어를 빠르게 검증할 수 있는 속도 경쟁력을 제공합니다. **개발 모드(Dev Mode)를 활용한 협업 프로세스의 혁신** * 개발자가 피그마 링크를 통해 '개발 준비 완료(Ready for development)' 페이지에 접속하면, 수많은 아이데이션 과정은 생략하고 오직 구현에 필요한 최신 스펙과 코드 값만 바로 확인할 수 있습니다. * 기존에 5분씩 걸리던 데이터 파싱 속도가 획기적으로 개선되어, 엔지니어가 특정 결제 플로우나 컴포넌트의 상세 정보를 찾는 데 드는 시간을 대폭 단축했습니다. * 코드 커넥트(Code Connect) 베타 버전을 통합하여 디자인 시스템의 컴포넌트와 실제 코드를 더 밀접하게 연결함으로써 디자인과 코드 간의 괴리를 좁히고 있습니다. **디자인 시스템 운영의 철학과 변화 관리** * 디자인 시스템은 팀을 지원하기 위한 도구일 뿐, 프로세스의 포로가 되어서는 안 된다는 철학 아래 지속적인 교육과 온보딩 워크숍을 진행했습니다. * 과거의 복잡한 QA 단계나 불필요한 태그 시스템을 과감히 삭제하고, 개발자가 필요한 정보에 직접 접근할 수 있는 자율적인 환경을 조성했습니다. * 전문화된 디자인 원칙(계층 구조, 그리드 등)을 준수하는 '좋아 보이는 디자인'과 엣지 케이스까지 고려한 '잘 작동하는 디자인'을 디자인 성공의 핵심 지표로 삼고 있습니다. 디자인 시스템은 한 번 구축하고 끝나는 것이 아니라 팀의 성장에 맞춰 계속 진화해야 합니다. 크런치롤의 사례처럼 도구의 기능을 활용해 불필요한 단계를 제거하고, 개발자와 디자이너가 동일한 언어로 소통할 수 있는 환경을 만드는 것이 복잡한 글로벌 서비스를 운영하는 핵심 전략입니다.

디자인 시스템Figma사용자 경험design-to-code+4

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

Figma의 3C:

Figma 입문자는 개별 기능을 순서대로 외우기보다 **생성(Creation), 사용자화(Customization), 협업(Collaboration)**이라는 세 가지 관점으로 학습하는 것이 효과적이다. 기본 요소를 만들고, 다양한 상황에 맞게 유연하게 개선한 뒤, 팀원들이 재사용할 수 있도록 공유하는 단계적 접근이 Figma 활용 능력과 협업 역량을 함께 높여준다. 명확한 목표와 일정, 그리고 직접 시도하고 질문하는 학습 태도도 중요하다. ## 목표·일정·학습 태도 설정 - 학습을 시작하기 전에 무엇을 배우고 어떻게 활용할지 목표를 적어 둔다. - 예시 목표: - Figma와 자신의 디자인 프로세스에 필요한 기본 도구 익히기 - 효율적으로 협업하는 팀원 되기 - 예시 일정: - **30일:** 기본 도구, 협업 방식, 파일 정리와 관리 습관 이해 - **60일:** 몇 가지 프로젝트에 적용해 부족한 부분 파악 - **90일:** 고급 기능을 실제 업무 흐름에 도입 - 권장 학습 태도: - 직접 만들고, 망가뜨리고, 다시 만들며 기능을 실험한다. - 작업물을 공유하고 Slack, 소셜 미디어, Figma Community Forum 등에서 질문한다. - 새로운 도구와 프로세스에 익숙해지는 데 시간이 걸리므로 필요할 때 휴식한다. ## 세 가지 C로 배우는 Figma - **Creation(생성)** - 기본적인 디자인 요소를 직접 만든다. - 에디터의 핵심 조작과 기본 도구 사용법을 익히는 단계다. - **Customization(사용자화)** - 만든 요소를 더 유연하고 재사용 가능하게 만든다. - 다양한 사용 사례에 대응하도록 고급 기능을 적용한다. - **Collaboration(협업)** - 완성한 디자인을 팀원과 공유한다. - 다른 사람이 자신의 파일에서 사용할 수 있도록 컴포넌트와 문서를 제공한다. - 세 단계는 사다리의 각 발판처럼 연결된다. 먼저 요소를 만들고, 이를 확장·정리한 뒤, 팀의 공동 자산으로 공유해야 효과적인 협업이 가능하다. ## 버튼 제작으로 이해하는 학습 과정 - 글은 버튼을 만드는 과정을 세 가지 C의 사례로 제시한다. - 버튼을 직접 만든다: **생성** - 버튼을 컴포넌트로 전환한다: **사용자화** - 다른 사람이 사용할 수 있도록 게시한다: **협업** - 최종적으로는 하나의 버튼이 아니라 여러 상황에서 재사용할 수 있는 버튼 세트를 구축하는 방향으로 발전한다. - 이 과정을 통해 Figma 기능 자체보다 실제 업무 흐름에 기능이 어떻게 연결되는지 이해할 수 있다. ## 학습에 활용할 자료 - Figma Help Center에서 기능별 상세 설명을 확인할 수 있다. - Figma YouTube 채널에서는 튜토리얼, 라이브 방송 녹화본, 기능 출시 영상을 제공한다. - 정기적인 온라인 이벤트와 Figma Community의 플레이그라운드 파일을 통해 실습할 수 있다. - 특히 기능을 따로 암기하기보다 하나의 디자인 요소를 완성해 가며 세 가지 C를 순서대로 적용하는 방식이 효과적이다. 처음부터 모든 기능을 익히려 하기보다 작은 요소 하나를 만들고, 재사용 가능한 컴포넌트로 발전시킨 뒤, 팀과 공유하는 실습부터 시작하는 것이 좋다.

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

디자인 시스템Figma프로토타이핑사용자 인터페이스+2

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

HP, 개발자 모드로 디자인

HP는 100개가 넘는 제품군과 여러 사업부가 각기 다른 방식으로 디지털 경험을 만들던 문제를 해결하기 위해 디자인 시스템 Veneer와 Figma Dev Mode를 도입했다. Veneer는 디자인 언어, 컴포넌트, 문서화, 거버넌스를 통합하고, Dev Mode는 디자인과 개발 사이의 전달 과정을 간소화했다. 그 결과 HP는 디자인 일관성을 높이고 일부 프로젝트의 개발 시간을 50% 줄였으며, 대규모 조직에서 디자인 시스템의 채택 효과를 정량적으로 측정할 수 있었다. ## 복잡한 제품 생태계를 위한 다층 디자인 시스템 - HP는 프린터, 노트북, 게이밍 시스템 등 100개 이상의 다양한 제품군을 운영한다. - 각 제품과 사업부가 독립적으로 움직이면서 디지털 경험의 시각적·사용자 경험적 일관성을 유지하기 어려웠다. - 초기에는 단순한 프런트엔드 컴포넌트 라이브러리였던 Veneer가 다음 요소를 포함하는 종합 디자인 시스템으로 발전했다. - HP 브랜드에 기반한 디자인 언어 - 디자인 및 개발용 컴포넌트와 패턴 - 사용 지침, 원칙, 모범 사례, 코드 표준, 코드 스니펫 - 디자이너와 개발자의 피드백을 반영하는 커뮤니티와 거버넌스 - HP의 여러 서브 브랜드를 하나의 획일적인 시스템으로 지원하기는 어렵기 때문에, Veneer는 공통 기반을 유지하면서도 브랜드별 차이를 수용할 수 있는 다층 구조로 설계됐다. ## 채택률과 효율성 측정 - HP는 Veneer의 효과를 사용량 같은 정량 지표와 구성원 피드백 같은 정성 지표를 함께 활용해 평가한다. - 아이콘 라이브러리의 경우: - 320개 팀이 사용 - 915개의 아이콘 컴포넌트 제공 - 주당 평균 8만 5천 회 삽입 - 디자인 시스템을 활용하면 처음부터 구현하는 것보다 개발 속도가 크게 향상된다. 글에서는 IBM 연구의 단순 폼 개발 속도 47% 향상 사례도 언급한다. - 2023년 1월부터 12월까지 Veneer를 통해 프로젝트가 절약한 시간이 시스템 제작에 투입된 시간보다 500% 많았다. - HP 엔지니어링 리더십에 따르면 일부 프로젝트에서는 개발 시간이 50% 단축됐다. - 다만 디자이너들은 자신이 담당하는 제품과 사용자 경험에 강한 책임감을 갖고 있어, 외부 시스템의 도입을 제품의 창의성을 제한하는 일로 받아들일 수 있었다. - HP는 Veneer가 반복적인 작업을 줄이고 디자이너가 제품 고유의 문제와 창의적인 부분에 집중하도록 돕는다는 점을 보여주며 채택을 유도했다. ## Dev Mode로 디자인과 개발 연결 - Dev Mode는 개발자가 Figma 안에서 디자인 사양을 직접 확인하도록 해 디자인 핸드오프를 간소화했다. - 이로 인해 사양을 확인하기 위한 회의와 디자이너·개발자 간의 반복적인 질의응답이 줄었다. - HP가 특히 유용하게 활용한 기능은 다음과 같다. - **변경 사항 비교**: 기존 제품을 업데이트할 때 디자인 버전 간 변경점을 빠르게 확인할 수 있다. - **개발 준비 완료 표시**: 디자이너가 구현할 영역을 명시해 개발자가 작업 범위를 명확히 파악할 수 있다. - **변수**: 프리미티브 토큰이나 시맨틱 토큰과 연결된 변수를 활용해 여러 테마와 모드에 대응하고 디자인 시스템을 확장할 수 있다. - Dev Mode는 단순히 디자인 파일을 개발자에게 전달하는 도구가 아니라, Veneer의 컴포넌트와 토큰을 실제 코드 구현으로 연결하는 협업 환경으로 활용됐다. HP의 사례는 대규모 조직에서 디자인 시스템을 성공적으로 운영하려면 공통 컴포넌트만 제공하는 것보다 브랜드별 유연성, 명확한 문서화, 거버넌스, 채택 지표가 함께 필요하다는 점을 보여준다. 또한 Dev Mode처럼 디자인 변경 사항과 구현 정보를 같은 작업 흐름에서 제공하면 핸드오프 비용을 줄이고 개발 생산성을 높일 수 있다.

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

디자인 시스템Figma디자인 토큰dev-mode+2

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

'디자인 제작' 기능

Figma는 AI 기능 ‘Make Designs’가 실제 앱과 유사한 디자인을 생성하는 문제를 발견해 일시적으로 중단했다. 원인은 모델 자체가 아니라, 충분히 검토되지 않은 디자인 시스템의 컴포넌트와 예시 화면이었다. Figma는 관련 자산을 제거하고 QA 절차를 개선한 뒤, 기능을 ‘First Draft’라는 이름으로 재출시했다. ## Make Designs의 작동 방식 - 사용자의 프롬프트, AI 모델, 디자인 시스템의 컴포넌트와 예시를 결합해 초기 UI 시안을 생성한다. - OpenAI의 GPT-4o와 Amazon Titan 등 상용 모델을 사용했으며, 별도 학습이나 파인튜닝은 진행하지 않았다. - 모바일·데스크톱용으로 제작한 두 개의 디자인 시스템에 수백 개의 컴포넌트와 조합 예시를 포함했다. - 모델은 버튼, 헤드라인, 이미지 등 컴포넌트를 선택·배치하고, 속성과 스타일을 설정해 완성된 화면을 구성한다. - Amazon Titan의 확산 모델이 디자인에 필요한 이미지를 생성한다. - 결과물은 완성품이 아니라 디자이너가 수정하고 발전시키기 위한 ‘첫 초안’을 목표로 했다. ## 실제 앱과 유사해진 원인 - Config 2024 직전 디자인 시스템에 새 컴포넌트와 예시 화면이 추가됐다. - 일부 자산이 실제 서비스의 UI 요소와 충분히 유사했지만, 추가된 자산을 철저히 검토하지 못했다. - 특정 프롬프트를 입력하면 해당 자산이 결과물에 포함될 수 있었다. - 한 디자이너가 날씨 앱을 생성했을 때 Apple의 기본 앱과 유사한 화면이 나온 것을 지적하면서 문제가 드러났다. - Figma는 문제의 원인이 기반 모델의 학습 데이터가 아니라 자체적으로 제공한 디자인 시스템과 예시 자산에 있다고 판단했다. ## Figma의 대응 - 문제를 확인한 즉시 관련 디자인 시스템 자산을 제거했다. - Make Designs 기능을 일시적으로 비활성화했다. - 기능 재개를 보류하고 디자인 시스템에 대한 개선된 QA 프로세스를 마련하기로 했다. - Visual Search, 레이어 이름 변경, 텍스트 번역 등 다른 Figma AI 기능은 제한적 베타로 계속 제공했다. ## 향후 방향과 디자이너의 역할 - Make Designs의 초기 이름은 ‘First Draft’였으며, 완성된 디자인보다 작업을 시작하기 위한 출발점을 의미한다. - 향후에는 기업이 자체 디자인 시스템을 연결해 컴포넌트 검색·조합·설정에 드는 시간을 줄이는 것이 목표다. - AI는 초기 아이디어와 구조를 제시할 수 있지만, 의미 있는 사용자 경험을 만들고 완성하는 일은 여전히 디자이너의 역할이다. - Figma는 제한적 베타를 통해 실제 사용 과정에서 문제를 배우고 개선하겠다고 밝혔다. - 편집자 주에 따르면 기능은 이후 개선 사항과 함께 ‘First Draft’라는 새 이름으로 재활성화됐다. AI 기반 디자인 생성 기능은 모델 성능뿐 아니라 입력되는 디자인 시스템과 예시 자산의 품질 관리가 중요하다. 따라서 자동 생성 결과를 완성품으로 신뢰하기보다, 철저한 QA와 디자이너의 검토를 거치는 초안 생성 도구로 활용하는 것이 바람직하다.

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

디자인 시스템AI생성형 AI사용자 인터페이스+3

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

Config 2024의

Config 2024의 시각 아이덴티티는 Figma의 제품 경험을 행사 공간과 디지털 접점 전체로 확장하는 데 초점을 맞췄다. Figma의 캔버스, Figma Slides, 다양한 제작 모드를 바탕으로 기본 도형이 변형·확장되는 형태 언어를 만들었으며, 이를 통해 독립적인 행사 정체성과 Figma 브랜드의 일관성을 동시에 확보했다. 1만 명 이상의 현장 참가자와 온라인 참가자를 고려해 미적 요소뿐 아니라 안내와 동선까지 아우르는 모듈형 디자인 시스템으로 구현한 것이 핵심이다. ## Figma 기능에서 출발한 형태 언어 - 브레인스토밍 단계에서 새롭게 개편된 Figma와 Figma Slides의 핵심 경험을 시각적 출발점으로 삼았다. - 작업 생성, 공유, 발표 등 서로 다른 제작 모드를 전환하는 경험에서 영감을 얻었다. - Figma 캔버스와 Figma Slides의 새로운 캔버스를 시각적으로 해석해, 형태가 확대·이동·변형되며 예상하지 못한 관점을 보여주는 시스템을 구상했다. - 주요 테마는 다음과 같다. - 작업과 맥락 사이를 이동하는 움직임 - 캔버스를 비우거나 작업을 보여주며 창작 의도를 증폭하는 것 - 협업을 통해 다양한 관점이 만나는 것 - 여러 제작 방식을 포용하는 것 ## 형태와 기능의 결합 - 행사 디자인을 단순한 장식이 아니라 사용자 경험 설계의 문제로 접근했다. - 등록부터 원하는 발표 세션의 좌석 확보까지, 참가자가 마주하는 다양한 상황을 시각 언어로 지원해야 했다. - 정교한 비주얼과 일관된 안내 체계를 결합해 복잡한 행사 경험을 이해하기 쉽게 만들었다. - 기본적인 원시 도형을 조합해 더 복잡한 대형 그래픽과 공간 요소를 제작했다. ## 공간 전체로 확장된 슈퍼그래픽 - 샌프란시스코 Moscone Center의 넓은 규모에 맞춰 건물 외벽과 다양한 표면에 그래픽을 적용했다. - 행사장 중앙에는 서로 다른 형태의 대형 물리적 슈퍼그래픽 세 개를 설치했다. - 참가자들은 이 구조물을 좌석, 사진 촬영 배경, 만남의 장소로 활용했다. - 그래픽을 평면 이미지에 머물게 하지 않고 참가자가 직접 상호작용하는 공간 경험으로 확장했다. ## 기본 도형을 활용한 모듈형 시스템 - Config 브랜드의 지속적인 모티프인 도형을 Figma 툴바의 기본 도형에서 가져왔다. - 사각형 - 원 - 다각형 - 누구나 Figma에서 디자인을 시작할 때 사용하는 단순한 도형을 복잡한 슈퍼그래픽의 구성 요소로 발전시켰다. - 동일한 브랜드를 유지하면서도 수많은 행사 자산이 반복적으로 보이지 않도록 모듈형 구조를 설계했다. - Figma 안에 슈퍼그래픽 컴포넌트 라이브러리를 구축하고, 각 그래픽마다 세 가지 변형을 제공해 서로 다른 각도와 구성을 표현했다. - 이 방식으로 행사장, 디지털 화면, 인쇄물 등 다양한 접점에서 일관성과 변주를 동시에 확보했다. ## 대규모 행사에 대응하는 디자인 시스템 - Config에는 현장 참가자 1만 명 이상과 더 많은 온라인 참가자가 참여하므로, 작은 접점까지 포함한 전체 경험 설계가 필요했다. - 키노트나 건물 외벽처럼 눈에 띄는 요소뿐 아니라 다음 항목에도 동일한 시각 언어를 적용했다. - 디지털 화면 - 안내물 - 기념품과 스웨그 백 - 행사장 내 각종 접점 - 행사 아이덴티티가 특정 장면에만 존재하는 것이 아니라 참가자의 모든 상호작용에서 이어지도록 설계했다. ## 실용적인 시사점 대규모 브랜드 경험을 만들 때는 먼저 브랜드의 핵심 기능이나 사용자 경험에서 반복 가능한 시각 원리를 추출하는 것이 효과적이다. 이후 기본 도형과 컴포넌트처럼 재사용 가능한 단위로 시스템화하면, 수많은 채널에 빠르게 적용하면서도 일관성·확장성·변주를 함께 유지할 수 있다.

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

디자인 시스템Figma사용자 경험component-library+1

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

AI 시대의 좋은 디자인이란 무엇

AI가 제품 개발을 대중화할수록 제품을 차별화하는 요소는 디자인이 된다. 모바일 시대에 데스크톱 경험을 작은 화면에 그대로 옮겼던 것처럼, 초기 AI 제품도 단순한 챗봇과 템플릿에 머물고 있지만 새로운 상호작용 패턴을 발견할 가능성이 크다. 따라서 AI 시대의 좋은 디자인은 기술 자체를 좇기보다 공감, 창의성, 실제 사용자 문제 해결이라는 변하지 않는 원칙을 바탕으로 AI와 디자이너의 역할을 재정의하는 것이다. ## AI 시대에 디자인이 더 중요해지는 이유 - AI는 간단한 프롬프트만으로 코드, 디자인, 애플리케이션 전체를 생성할 수 있어 아이디어에서 구현까지의 속도를 크게 높인다. - 더 많은 사람이 제품 제작 과정에 참여할 수 있게 되지만, 결과적으로 비슷한 제품이 빠르게 양산될 가능성도 커진다. - 제품의 차별화는 기능 구현보다 다음과 같은 디자인 경험에서 나타날 수 있다. - 풍부한 상호작용 - 직관적인 제스처 - AI라는 매체에 적합한 새로운 사용 패턴 - 2007년 아이폰 등장 직후 많은 기업이 기존 데스크톱 화면을 모바일에 단순히 축소했던 것처럼, 현재의 단순 챗봇과 템플릿형 AI 제품도 새로운 기술에 적응하는 초기 단계로 볼 수 있다. - 새로운 기술의 잠재력을 실현하려면 충분한 시간과 반복적인 실험이 필요하다. ## 좋은 디자인의 원칙을 AI가 이해하도록 만들기 - Figma는 디자인 시스템을 활용해 UI의 첫 시안을 생성하는 AI 기능을 개발하면서, 먼저 “좋은 디자인”이 무엇인지 정의해야 했다. - LLM은 본질적으로 텍스트 기반 모델이므로 글쓰기나 코딩에는 강하지만, 시각적·구조적 판단이 필요한 UI 디자인을 생성하는 일은 더 어렵다. - 모든 디자인 규칙을 AI에 전달하는 방식은 현실적이지 않다. - 좋은 디자인의 모든 세부 사항을 유한한 규칙으로 정의하기 어렵다. - 방대한 규칙을 하나의 프롬프트에 넣으면 토큰 제한에 걸린다. - 상황에 따라 달라지는 디자인 판단까지 규칙화하기도 어렵다. - 이에 따라 어떤 UI에도 대체로 적용할 수 있는 작지만 강력한 원칙으로 디자인 지식을 압축해야 한다. - 디자인을 가르치는 과정처럼, 디자이너의 직관을 다른 사람이 실행할 수 있는 명확한 원칙으로 분해하는 작업이 중요하다. - 좋은 원칙은 다음 조건을 갖춰야 한다. - 명확할 것 - 구체적일 것 - 실제 제작 과정에서 적용 가능할 것 - 다양한 UI 상황에 일반화될 것 ## 디자인에서 코드까지의 순환 고리 단축 - AI는 디자인 결과물을 코드로 옮기는 시간을 줄여 제품 제작 주기를 단축할 수 있다. - 디자인과 개발 사이의 간극이 줄어들면 더 많은 시안을 빠르게 구현하고 검증할 수 있다. - 중요한 것은 단순히 코드를 자동 생성하는 것이 아니라, 디자인 의도와 사용자 경험이 구현 단계에서도 유지되도록 하는 것이다. - 빠른 생성 능력은 한 번에 정답을 얻는 수단이라기보다 실험과 반복을 늘리는 수단으로 활용해야 한다. ## 실용주의와 반복적인 실험 - AI 기술이 빠르게 변하는 상황에서는 완벽한 미래상을 기다리기보다 현재 가능한 도구로 실제 문제를 해결하는 접근이 필요하다. - 기술을 사용하기 위한 기능보다 사용자에게 실질적인 가치를 주는 경험을 우선해야 한다. - 초기 AI 제품의 어색함은 실패라기보다 새로운 상호작용 방식을 발견하기 위한 실험의 일부다. - 디자이너는 생성된 결과를 그대로 받아들이기보다 사용자 맥락에 맞는지 검토하고, 반복적인 수정과 검증을 통해 품질을 높여야 한다. ## 디자이너와 AI의 공동 창작 - AI는 디자이너를 단순히 대체하는 자동화 도구가 아니라 아이디어를 확장하고 제작 속도를 높이는 협업 파트너가 될 수 있다. - AI가 초안과 반복 작업을 담당하면 디자이너는 문제 정의, 사용자 공감, 우선순위 설정, 창의적 판단에 더 집중할 수 있다. - 공동 창작 모델에서는 인간과 AI의 강점을 결합하는 작업 분담이 중요하다. - AI: 빠른 생성, 변형, 탐색, 반복 작업 - 디자이너: 목적 설정, 맥락 이해, 품질 판단, 사용자 관점의 의사결정 - AI가 발전할수록 디자이너의 역할이 사라지는 것이 아니라, 무엇을 만들고 왜 만들어야 하는지 결정하는 능력이 더욱 중요해진다. AI를 도입할 때는 생성 속도 자체보다 사용자 문제와 디자인 원칙을 먼저 정의하는 것이 좋다. 작은 원칙을 명확히 정리하고, AI로 여러 시안을 빠르게 만든 뒤 사람의 판단과 사용자 검증을 통해 반복 개선하는 방식이 가장 현실적인 접근이다.

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

디자인 시스템FigmaAI대규모 언어 모델+2

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

더 프롬프트에

AI가 디자인과 제작 방식을 바꿀 가능성은 크지만, 그 잠재력을 어떻게 실현할지는 아직 열려 있다. Figma의 잡지 《The Prompt》는 디자인·엔지니어링·제품 개발·건축 분야의 전문가들에게 질문을 던져 AI의 현재 가능성과 한계, 앞으로의 방향을 탐구한다. 글은 좋은 결과를 얻으려면 AI 자체보다 맥락과 의도를 담은 질문, 즉 잘 설계된 프롬프트가 중요하다고 강조한다. ## 《The Prompt》의 기획 의도 - 《The Prompt》는 Figma의 Story Studio와 Brand Studio가 만든 매거진이다. - 2024년 Config에서 인쇄판이 공개됐으며, Figma Store에서 구매할 수 있다. - 다양한 분야의 전문가 인터뷰와 에세이를 통해 AI가 복잡한 시스템을 더 이해하기 쉽게 만드는 방법을 살펴본다. - 참여자들은 AI를 활용하는 동시에, AI가 더 나은 결과를 내도록 설계하고 질문하는 방법도 탐구한다. ## 프롬프트 엔지니어링과 질문의 힘 - 프롬프트 엔지니어링은 원하는 답을 얻기 위해 올바른 질문을 설계하는 일이다. - 좋은 인터뷰어가 질문의 맥락과 방향을 조절하듯, AI에게도 다음 요소를 명확히 제공해야 한다. - 충분한 배경 정보 - 문제를 바라보는 관점과 프레임 - 결과물의 목적과 제약 - 기대하는 답변의 형태와 수준 - 창작이나 문제 해결의 출발점에는 항상 일종의 프롬프트가 있으며, 창의성은 질문을 통해 구체화된다. - LLM은 뛰어난 능력을 갖고 있어도 입력이 불명확하면 잠재력을 제대로 발휘하기 어렵다. ## AI와 좋은 디자인의 관계 매거진은 “AI 시대의 좋은 디자인이란 무엇인가”라는 질문에서 출발한다. - AI가 디자인 과정에 참여하더라도 문제 정의와 목적 설정은 여전히 중요하다. - 좋은 디자인은 단순히 빠르게 결과를 만드는 것이 아니라, 사람과 맥락에 적합한 해결책을 찾는 과정이다. - AI를 활용할수록 디자이너는 결과물을 평가하고 방향을 조정하는 역할을 더 명확히 수행해야 한다. ## 코드와 자동화의 재평가 “코드가 상품화되는 것을 왜 두려워하는가”, “디자인 시스템의 잠재력을 자동화로 끌어낼 수 있는가” 같은 질문을 통해 제작 방식의 변화를 다룬다. - 코드 작성 자체보다 어떤 문제를 해결할지 정의하는 능력이 중요해질 수 있다. - 자동화는 반복 작업을 줄이고 디자인 시스템의 일관성과 확장성을 높일 수 있다. - 그러나 자동화가 창의적 판단이나 인간의 책임을 완전히 대체하는 것은 아니다. ## 데이터와 실험의 새로운 기준 - “최소 실행 가능 데이터”라는 질문은 AI 시스템에 반드시 필요한 데이터의 범위를 고민하게 한다. - 많은 데이터를 모으는 것보다 목적에 맞는 신뢰할 수 있는 데이터를 확보하는 일이 중요하다. - “0.5에서 시작한다”는 주제는 완성된 계획을 기다리기보다 불완전한 초기 단계에서 실험하고 개선하는 태도를 시사한다. ## AI를 신뢰할 수 있게 만드는 방법 - 사람들이 원하는 AI 기능과 실제로 신뢰하는 기능 사이에는 차이가 있다. - 유용한 AI 기능은 명확한 문제를 해결하고, 결과의 근거와 한계를 이해할 수 있어야 한다. - 효율성을 높이더라도 창의적 탐색과 예상 밖의 발견을 지나치게 줄여서는 안 된다. - AI가 만든 결과를 검토하고 수정할 수 있는 인간의 통제권이 필요하다. ## 기술의 범위를 넓히는 질문 매거진은 기술 업계 내부의 관점에 머무르지 않고 사회와 물리적 환경으로 논의를 확장한다. - AI가 업계 내부의 ‘에코 챔버’를 넘어 다양한 사용자와 관점을 반영할 수 있는지 질문한다. - 제조업과 주거 건축 같은 산업에서 AI가 복잡한 문제 해결에 어떻게 기여할 수 있는지 살펴본다. - 로봇이 주택을 건설할 수 있는지, 인간형 로봇의 시대가 실제로 다가오고 있는지도 탐구한다. - AGI뿐 아니라 인간의 증강된 지능(ADI)이 어떤 의미를 갖는지도 함께 묻는다. ## 실용적인 결론 AI를 효과적으로 활용하려면 도구의 성능만 기대하기보다 문제의 맥락, 목표, 제약 조건을 구체적으로 정의해야 한다. 좋은 프롬프트를 작성하고, AI의 결과를 비판적으로 검토하며, 작은 실험을 반복하는 접근이 현재 가장 현실적인 활용법이다.

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

디자인 시스템AI대규모 언어 모델자동화+4

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

새로워진 Figma 내부

Figma의 UI3는 기능을 계속 추가하면서 복잡해진 인터페이스를 정리하고, 사용자의 작업물을 화면 중심에 두기 위한 대규모 redesign이다. 캔버스 공간을 넓히면서도 기존 사용자의 작업 습관과 전문 기능은 유지하고, 신규 사용자에게는 더 직관적인 경험을 제공하는 것이 목표다. 또한 컴포넌트, 생성형 AI, Dev Mode, Figma Slides 등 변화하는 디자인 환경에 대응할 수 있는 기반을 마련하려는 개편이다. ## UI3를 시작한 배경 - Figma는 출시 후 약 10년 동안 많은 기능과 제품을 추가했지만, 기본 레이아웃은 크게 변하지 않았다. - 기능이 누적되면서 처음에는 단순했던 인터페이스가 점점 복잡하고 부담스럽게 느껴질 수 있게 됐다. - UI3는 Figma 출시 이후 세 번째 주요 redesign으로, 단순한 시각적 변경이 아니라 워크플로와 인터랙션 방식까지 재설계한다. - 기존 사용자가 익숙한 작업 방식을 잃지 않으면서도, 새로운 사용자에게 더 접근하기 쉬운 인터페이스를 만드는 것이 중요한 과제였다. ## UI3가 해결하려는 네 가지 문제 - **UI보다 사용자의 아이디어를 중심에 두기** - 인터랙티브 컴포넌트와 AI 지원 디자인처럼 강력한 기능이 추가되면서 UI가 작업 자체보다 눈에 띌 위험이 생겼다. - 기능이 부가적으로 덧붙은 느낌을 줄이고, 캔버스와 사용자의 창작물에 집중하도록 설계 방향을 잡았다. - **신규 사용자와 전문 디자이너의 요구 균형** - 기존 인터페이스는 처음 접하는 사용자에게 복잡하고 비직관적으로 보일 수 있었다. - 기능의 범위를 줄이는 것이 아니라, 기능을 이해하고 접근하는 방식을 단순화하려 했다. - 숙련된 사용자의 익숙한 조작 감각과 작업 효율은 보존하는 것을 목표로 삼았다. - **변화하는 디자인 방식에 대응** - 오늘날 디자인은 단순히 픽셀을 배치하는 작업을 넘어, 재사용 가능한 컴포넌트와 생성형 AI를 활용하는 방식으로 확장되고 있다. - 이에 따라 디자이너가 개별 요소뿐 아니라 더 높은 수준의 추상화된 building block을 사용할 수 있어야 한다고 보았다. - **Figma의 미래를 위한 기반 마련** - Dev Mode를 통해 디자인과 코드를 연결하고, Figma AI로 작업 효율을 높이는 방향을 고려했다. - Figma Slides 같은 새로운 제품까지 포함해, 여러 도구가 일관된 제품군으로 작동할 수 있는 공통 구조를 만들고자 했다. ## 캔버스 공간을 넓히는 인터페이스 - 가장 먼저 Figma 캔버스의 사용 가능한 공간을 최대화하는 작업을 진행했다. - 초기에는 패널과 속성 영역을 거의 제거하고, 마우스를 올릴 때만 UI가 나타나는 극단적인 미니멀 디자인도 실험했다. - 사이드바가 필요할 때만 나타나는 방식도 시도했지만, 화면 구조가 지나치게 불안정해지는 문제가 있었다. - 수백 가지 시안을 제작하고 Figma 팀 내부에서 직접 사용하며 개선 방향을 검증했다. - 최종적으로 다음과 같은 방향을 선택했다. - 크기를 조절할 수 있는 패널 - 캔버스 하단의 얇은 새 툴바 - 상단 영역을 비워 더 넓고 여유로운 화면 구성 - 필요할 때 패널을 열고 닫을 수 있는 구조 - UI 전체를 숨겨 작업물에만 집중할 수 있는 기능 - 이 구조는 Figma의 여러 제품에서 공통으로 사용할 수 있어, 제품 간 전환과 확장에도 유리한 기반이 된다. ## 실용적인 의미 UI3의 핵심은 기능을 없애는 것이 아니라, 기능이 작업을 방해하지 않도록 배치와 노출 방식을 재조정하는 데 있다. 따라서 사용자는 평소에는 넓은 캔버스에 집중하고, 필요한 순간에만 패널과 도구를 불러오는 방식으로 작업할 수 있다. Figma를 사용하는 팀이라면 UI3의 패널 접기·크기 조절 기능과 캔버스 중심 작업 방식을 적극 활용하는 것이 효율 향상에 도움이 된다.

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

디자인 시스템Figma사용자 경험생성형 AI+2

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

Config 2024 결

Figma Config 2024는 AI를 중심으로 디자인에서 개발·발표까지 이어지는 작업 흐름을 확장한 업데이트를 소개한다. 주요 발표는 Figma AI, 새 UI인 UI3, 프레젠테이션 도구 Figma Slides, Dev Mode 개선이며, 반복 작업을 자동화하고 아이디어 탐색을 빠르게 하는 데 초점을 둔다. Figma는 AI가 인터페이스를 생성하는 시대에도 차별화된 제품을 만드는 핵심은 디자인이라고 강조한다. ## Figma AI: 아이디어 탐색과 반복 작업 자동화 - **Visual Search** - 스크린샷, 선택한 프레임, 이미지, 연필로 그린 스케치를 입력해 유사한 디자인을 검색할 수 있다. - 아이콘부터 전체 디자인 파일까지 팀이 접근할 수 있는 파일 안에서 비슷하거나 동일한 디자인을 찾는다. - 개선된 Asset Search는 파일명이나 에셋 이름과 검색어가 정확히 일치하지 않아도 문맥을 이해해 관련 에셋을 찾아준다. - **반복적인 디자인 작업 자동화** - 현실적인 이미지와 문구를 생성한다. - 기존 문구를 변형하거나 다시 작성하고 번역한다. - 화면 간 프로토타입 연결을 자동으로 구성한다. - 여러 레이어의 이름을 한 번에 의미 있는 이름으로 변경한다. - 디자이너가 레이어 정리나 기본 콘텐츠 작성보다 창의적인 작업에 집중하도록 돕는다. - **Make Designs** - 새 Actions 패널에서 텍스트 프롬프트로 UI 레이아웃과 컴포넌트 초안을 생성한다. - 빈 캔버스에서 시작하기 어려울 때 여러 디자인 방향을 빠르게 탐색할 수 있다. - 생성 결과는 완성품이라기보다 초기 아이디어와 작업 출발점으로 활용하는 방식이다. - **AI 기능의 개발 방향** - Figma는 단순히 AI 유행을 따르기보다 실제 사용자 요구를 기준으로 기능을 설계한다고 설명한다. - 범용 대규모 언어 모델(LLM)을 기반으로 기능을 구축하되, 디자이너의 작업 맥락에 맞게 활용하는 데 초점을 둔다. ## UI3: 새롭게 설계된 Figma 인터페이스 - 기존 Figma 인터페이스를 재설계한 UI3를 공개한다. - AI 기능과 Actions 패널을 포함해 주요 작업을 더 쉽게 찾고 실행할 수 있도록 작업 환경을 개편한다. - UI3는 Figma AI와 함께 제한적 베타로 제공되며 단계적으로 확대된다. ## Figma Slides: 디자인과 프레젠테이션의 결합 - Figma Slides를 통해 슬라이드를 만들고, 협업하고, 발표할 수 있는 기능을 추가한다. - 디자인 도구에서 사용하던 협업 방식과 시각적 편집 경험을 프레젠테이션 제작으로 확장한다. - 제품 아이디어, 디자인 결과물, 프로젝트 진행 상황을 별도 도구로 옮기지 않고 공유·발표하는 흐름을 지원한다. ## Dev Mode: 디자인 완료에서 개발 완료까지 - Dev Mode를 크게 업데이트해 디자인과 개발 사이의 전환 과정을 개선한다. - 디자이너가 전달한 결과물을 개발자가 실제 구현으로 옮기는 과정에서 필요한 정보를 더 쉽게 확인하도록 지원한다. - 이번 업데이트는 단순히 “개발 준비 완료” 상태를 표시하는 것을 넘어, 개발 작업이 완료될 때까지의 협업 흐름을 강화하는 방향이다. ## Auto Layout·UI Kit·프로토타입 등 사용성 개선 - Auto Layout을 비롯해 기존 Figma 핵심 기능의 사용성을 개선한다. - UI Kit 활용 경험을 다듬어 더 빠르게 디자인 작업을 시작할 수 있도록 한다. - 프로토타입 뷰어를 개선해 결과물을 확인하고 공유하는 과정을 편리하게 만든다. - Figma AI뿐 아니라 자주 사용하는 기능 전반을 개선해 일상적인 작업 흐름의 마찰을 줄인다. ## 베타 제공 방식 - Figma AI와 UI3는 당시 제한적 베타로 제공된다. - Figma 화면 하단의 **“?”** 메뉴에서 **“Join UI3 + AI waitlist”**를 선택해 대기 목록에 등록할 수 있다. - 기능은 한 번에 전체 사용자에게 공개되지 않고 점진적으로 확대된다. 실무에서는 Visual Search로 기존 사내 디자인 자산을 재활용하고, Make Designs와 자동 프로토타이핑으로 초기 아이디어를 빠르게 검증하는 방식이 유용하다. 다만 AI 생성 결과를 그대로 사용하기보다 디자인 시스템, 접근성, 브랜드 기준에 맞춰 검토·수정하는 과정이 필요하다.

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

디자인 시스템AI대규모 언어 모델프로토타이핑+3