generative-design

3 개의 포스트

figma3분 읽기큐레이션 요약

디지털 도구, 인간의 표현: Config 2026의 시각적 아이덴티티 | Figma 블로그

Config 2026의 시각적 정체성은 AI 시대의 강력한 디지털 도구와 인간의 창의적·불완전한 표현을 함께 보여주는 데 초점을 맞췄다. Figma Brand Studio는 아이디어가 변형되고 확장되는 과정을 글리프, 생성형 텍스처, 동적인 구성으로 표현했다. 그 결과 디지털 화면부터 샌프란시스코 Moscone Center의 대형 조형물과 공간 연출까지 일관되면서도 인간적인 브랜드 경험을 만들었다. ## 인간과 AI의 협업을 표현한 세 가지 원칙 - **진화(Evolution)** - 아이디어를 그대로 완성하는 대신 remix, reinterpret, reinvent 과정을 거쳐 새로운 결과를 만든다는 개념이다. - 하나의 형태가 변형되고 증식하는 모습을 시각 시스템에 반영했다. - **유동성(Fluidity)** - 디자인, 코드, 프로토타입 사이를 오가며 다양한 지점에서 작업을 시작하는 현대적 제작 방식을 나타낸다. - 고정된 순서보다 반복과 순환을 강조한다. - **조화(Harmony)** - 생성형 도구로 빠르게 탐색하더라도 최종 판단에는 인간의 관점과 감각이 필요하다는 의미다. - AI의 정교함과 사람의 의도적인 불완전성을 함께 유지했다. ## 글리프로 아이디어의 변형과 확장을 시각화 - Config의 핵심 시각 요소는 스케치처럼 보이거나, 생성형 이미지처럼 유기적이거나, 선명한 기하학 형태를 가진 **글리프**였다. - 입자 형태의 글리프는 아이디어가 계속 생성되고 퍼지는 과정을 상징했다. - 반대로 깔끔한 직사각형은 충분히 정리되고 완성된 아이디어를 나타냈다. - 글리프는 약 14피트 높이의 폼 조형물로 제작되어 Moscone Center 외부와 행사 공간의 장면을 구성했다. - 결과물은 다소 엉뚱하고 개성 있어 보이면서도 프로그램으로 생성된 듯한 디지털 특성을 동시에 지녔다. ## AI로 만든 불완전한 텍스처 - 팀은 Figma Make로 원하는 로파이 효과를 도구화하고, 다음 세 가지 핵심 텍스처를 제작했다. - 낙서 같은 선화 - 흐릿한 그라디언트 - 타원형 입자 - 이미지를 도구에 입력해 예측하기 어렵고 손으로 그린 듯한 구성을 생성했다. - 완벽하고 자동화된 시각물 대신 작은 오류와 불규칙성을 남겨 인간적인 느낌을 강조했다. - 수백 명의 발표자 사진에는 디더링 도구를 적용했다. - 모든 사진에 일관된 스타일을 빠르게 적용했다. - 미세한 점묘 효과가 디지털 코드처럼 보이면서도 손으로 만든 질감을 더했다. - 흐릿한 형태와 거친 점 텍스처는 키노트 무대, 영상, 행사장 애니메이션 등 여러 접점에서 활용됐다. ## 정적인 디자인과 모션의 병행 제작 - 팀은 정적 그래픽을 먼저 완성한 뒤 애니메이션으로 넘기는 방식 대신, 정적 자산과 모션 자산을 동시에 개발했다. - 디자인과 모션이 서로 영향을 주는 반복적인 협업 구조를 취했다. - 초기 글리프가 실제로 움직이는 모습을 확인하면서 형태의 가능성을 새롭게 발견하는 등, 애니메이션 자체가 디자인 탐색의 도구로 기능했다. - 이를 통해 Config의 그래픽은 단순한 장식이 아니라 아이디어가 살아 움직이고 변형되는 과정을 보여주는 시스템이 됐다. ## 실용적인 시사점 AI를 활용한 브랜드 디자인에서도 결과물을 지나치게 매끈하게 만드는 것보다, 의도적인 불완전성과 인간의 판단을 남기는 것이 차별화에 도움이 된다. 또한 글리프·텍스처·모션처럼 재사용 가능한 시각 요소를 시스템화하면 디지털 콘텐츠와 오프라인 공간 전반에 일관된 경험을 효율적으로 확장할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

플러그인 뒷이야기:

Figma 플러그인은 디자이너가 반복적이고 번거로운 작업을 자동화해 더 의미 있는 디자인 작업에 집중하도록 돕는다. Cloudflare의 UX Engineer Sam Mason de Caires는 번역, 데이터 교체, 테마 생성, 그래프, 색각 이상 대응 등 다양한 플러그인을 만들며 디자인과 개발의 결합 가능성을 보여준다. 그는 앞으로 디자인 도구가 데이터를 바탕으로 여러 디자인 변형을 생성하고, 디자이너가 그중 최선의 결과를 선택하는 방향으로 발전할 것이라고 전망한다. ## 플러그인 생태계의 출발 - Figma는 2019년 플러그인 베타를 시작했고, 첫 고객들이 다양한 도구를 제작했다. - 플러그인의 활용 사례로 데이터 시각화, 콘텐츠 가져오기, 접근성 도구 등이 소개된다. - Figma는 플러그인 제작자들의 동기와 작업물을 소개하는 5부작 인터뷰 시리즈를 진행했다. - Sam Mason de Caires는 Figma 커뮤니티를 위한 초기 플러그인 제작자 중 한 명이다. ## 디자인과 개발의 결합 - Sam은 무언가를 처음부터 만들어 사람들이 실제로 사용하는 모습을 보는 데 매력을 느껴 개발자가 되었다. - 동시에 디자인에도 관심이 있었으며, 디자인과 개발 사이에 큰 교차점이 있다고 보았다. - Cloudflare에서는 개발 역량을 활용해 디자인 프로젝트에 실질적으로 기여하고 있다. - 플러그인 API는 디자인 도구 내부의 코드와 데이터에 접근할 수 있게 해, 개발자가 디자이너를 위한 생산성 도구를 만들 수 있도록 한다. ## 제작 중인 Figma 플러그인 - 번역 플러그인: 디자인 콘텐츠를 여러 언어로 변환하는 작업을 지원한다. - 데이터 교체 플러그인: 화면에 들어간 데이터를 빠르게 다른 값으로 바꿀 수 있다. - 테마 UI 생성기: 테마에 맞는 사용자 인터페이스 요소를 자동으로 생성한다. - 그래프 플러그인: 데이터를 시각적인 그래프로 표현한다. - 색상 참고 플러그인: 색각 이상 사용자가 색상을 어떻게 인식하는지 확인해 접근성을 개선한다. - 이 도구들은 디자이너가 수작업으로 반복하던 작업을 줄이고, 더 빠르고 자신 있게 디자인하도록 돕는 것을 목표로 한다. ## 자동화가 디자이너에게 주는 가치 - 반복 작업을 자동화하면 디자이너가 실제 문제 해결과 시각적 의사결정에 더 많은 시간을 사용할 수 있다. - 플러그인은 단순한 편의 기능을 넘어 디자인 프로세스 자체를 확장하는 수단이 된다. - 개발자는 디자인 도구의 내부 구조와 API를 활용해 디자이너가 직접 만들기 어려운 기능을 제공할 수 있다. - Sam은 개발자의 기술이 커뮤니티에 직접 도움이 되지 않을 것이라고 생각했지만, 플러그인을 만들면서 디자인 생산성과 신뢰도를 높일 수 있음을 깨달았다. ## 생성형 디자인의 미래 - Sam은 향후 5년 동안 생성형 디자인이 크게 발전할 것으로 예상한다. - 디자이너가 가능한 모든 상태를 하나씩 만드는 대신, 원하는 결과를 설명하는 데이터와 조건을 입력하면 도구가 여러 변형을 자동으로 생성한다. - 디자이너의 역할은 모든 결과를 직접 제작하는 것에서 벗어나, 생성된 결과 중 적절한 요소를 선택하고 다듬는 방향으로 이동할 수 있다. - 이는 디자인 도구가 정적인 편집기를 넘어 데이터 기반의 결과 생성 시스템으로 발전할 가능성을 의미한다. ## 커뮤니티에 대한 장기적 기여 - Sam은 디자이너가 더 빠르고 정확하게 작업할 수 있도록 돕는 도구와 프로세스를 계속 만들고 싶다고 밝혔다. - 그는 디자인 커뮤니티의 발전에 개발자도 중요한 방식으로 기여할 수 있다고 본다. - 특히 자동화, 접근성, 콘텐츠 관리처럼 여러 프로젝트에서 반복되는 문제를 플러그인으로 해결할 수 있다. - Sam의 플러그인은 2019년 8월 1일부터 Figma 커뮤니티에 공개될 예정이었다. 플러그인을 활용하면 반복 작업을 줄이고 디자인 품질과 접근성을 함께 높일 수 있다. 디자이너와 개발자는 Figma API를 활용해 팀의 업무 방식에 맞는 자동화 도구를 직접 만들고, 생성된 여러 결과를 사람이 검토·선택하는 협업 방식을 실험해볼 만하다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma의 새로운 기능 요

Figma는 2019년 봄, 디자인 시스템 확장에 초점을 맞춰 Components를 개선하고 플러그인 API 공개 베타를 시작했다. 여러 컴포넌트를 한 번에 생성하거나 인스턴스와 마스터 간 이동·동기화를 쉽게 만드는 기능으로 반복 작업을 줄였으며, 플러그인을 통해 커뮤니티가 Figma 기능을 확장할 수 있는 기반을 마련했다. 또한 Smart Selection 등 일상적인 기능 개선과 버그 수정도 함께 진행했다. ## 디자인 시스템 확장을 위한 컴포넌트 개선 - 여러 객체를 선택한 뒤 한 번의 클릭으로 각각의 Component로 변환할 수 있다. - 인스턴스를 우클릭하면 Context Menu에서 관련 Component를 바로 확인할 수 있다. - 다른 인스턴스로 빠르게 교체할 때 유용하다. - **Return to Instance** 기능을 사용하면 현재 인스턴스의 Master Component로 이동해 참고하거나 수정한 뒤, 작업 중이던 인스턴스로 돌아올 수 있다. - 로컬 컴포넌트에서는 인스턴스에 적용한 변경 사항과 오버라이드를 Master Component에 반영할 수 있다. - 기존 컴포넌트를 실제 사용 사례에 맞게 조정하고 업데이트할 때 효율적이다. - 이러한 기능들은 재사용 가능한 UI 요소를 관리하고, 팀 단위 디자인 시스템을 확장하는 작업을 단순화한다. ## Figma 플러그인 API 공개 베타 - Figma는 오랫동안 준비한 플러그인 API의 공개 베타를 출시했다. - 플러그인을 통해 사용자가 Figma 내부 기능을 직접 확장하고 반복적인 디자인 작업을 자동화할 수 있게 됐다. - 초기 제작 사례로 다음과 같은 플러그인이 소개됐다. - 텍스트 요소를 방사형으로 반복 배치하는 생성형 디자인 플러그인 - 선택한 이미지에서 주요 색상 팔레트를 추출하는 플러그인 - 공개 직후부터 커뮤니티와 고객들이 다양한 실험적 도구를 만들며 생태계의 가능성을 보여줬다. ## 지속적인 사용성 개선과 품질 향상 - Components와 Smart Selection처럼 매일 사용하는 기능을 빠르게 개선했다. - 사용자가 요청해 온 기능을 추가하는 동시에, 반복 작업에 드는 시간을 줄이는 데 초점을 맞췄다. - 별도의 품질 개선 기간을 운영해 다수의 버그를 수정했다. - 이번 업데이트는 대규모 신기능뿐 아니라 기존 기능의 안정성과 작업 흐름 개선도 중요하게 다뤘다. ## 실용적인 활용 방향 - 반복되는 UI 요소는 Component로 만들고, 여러 객체를 한 번에 변환해 초기 구축 시간을 줄이는 것이 좋다. - 인스턴스에서 발견한 개선 사항은 로컬 컴포넌트의 Master에 반영해 디자인 시스템을 최신 상태로 유지할 수 있다. - 이미지 색상 추출이나 생성형 배치처럼 반복적이거나 계산이 필요한 작업은 플러그인으로 자동화할 수 있다.

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