vector-editing

4 개의 포스트

figma

리듬을 타고: 음악이 Figma (새 탭에서 열림)

Figma는 Figma Draw에 점묘와 음영 표현에 적합한 산란 브러시(scatter brush) 10종을 추가했다. 이 브러시들은 반복되는 획의 패턴이 음악의 비트와 닮았다는 발상에서 출발해, Doo-wop·Vaporwave·Screamo 등 음악 장르의 분위기를 시각적 질감으로 구현했다. 디자이너 Rogie King은 99개의 시안을 제작한 뒤 팀 투표를 거쳐 가장 유연하고 표현력 있는 브러시를 선정했다. ## 음악을 브러시의 출발점으로 삼은 이유 - 산란 브러시는 작은 형태가 반복적으로 흩뿌려지는 방식으로 선을 만든다. - 획의 간격(gap), 흔들림(wiggle), 무작위성(jitter)을 조절할 수 있어 음악의 템포·질감·볼륨을 조정하는 과정과 비슷하다. - UX Writer Molly Rosen Marriner는 `Every Noise At Once`와 Figma 직원들의 추천을 참고해 시각적으로 연상하기 쉬운 장르를 수집했다. - Electroclash, Drone, Witch house처럼 전자음악의 반복적이고 깨진 듯한 분위기를 브러시 디자인에 적용하기 좋았고, Nu metal·Italo disco·Samba 등 다양한 장르도 후보에 포함됐다. ## 장르의 분위기를 시각적 질감으로 변환 - 먼저 점묘(stippling)처럼 사용자가 바로 활용할 만한 기본적인 산란 표현부터 설계했다. - 이후 특정 장르의 대표 음악을 듣고, 해당 장르의 패션·문화·시각적 특징을 조사하며 브러시의 성격을 구체화했다. - Screamo 브러시는 AFI의 곡과 2000년대 초반의 검은 후드티, 진한 아이라이너, 모시 핏에서 영감을 받아 거칠고 혼란스러운 느낌으로 제작됐다. - Shoegaze처럼 디자이너가 직접 이해하기 어려운 장르는 해당 음악을 잘 아는 가족이나 주변 사람에게 추천을 받아 시각적 방향을 잡았다. ## 99개 시안에서 10개 브러시로 - Rogie King은 다양한 장르를 탐색하며 총 99개의 산란 브러시 디자인을 만들었다. - 팀원들은 각 시안을 검토하고 캔버스에서의 활용도와 표현력을 기준으로 선호하는 디자인에 투표했다. - 최종 브러시는 다음 10개 장르의 이름을 갖게 됐다. - Bubblegum - Witch house - Shoegaze - Honky-tonk - Screamo - Drone - Doo-wop - Spoken word - Vaporwave - Oi! - 일부 디자인은 장르와 직관적으로 연결됐지만, 어떤 브러시는 결과물에 맞춰 새로운 장르 이름을 찾아야 할 정도로 해석의 여지가 컸다. ## 전문 지식 없이도 예술 표현을 확장 - 산란 브러시는 점묘와 음영뿐 아니라 안개, 얼룩, 반복되는 기호 등 다양한 감정과 스타일을 표현할 수 있다. - Figma Draw의 기존 스트레치 브러시가 캘리그래피나 목탄처럼 선의 형태를 강조했다면, 산란 브러시는 작업에 질감·깊이·움직임을 더한다. - 브러시 이름을 `플랫 브러시`, `과슈 브러시` 같은 전통적인 미술 용어 대신 음악 장르로 정한 것은 미술 교육을 받지 않은 사람도 부담 없이 접근하도록 하기 위한 선택이다. - 이름 자체가 브러시의 분위기를 상상하게 하며, 정식 미술 교육이나 물리적 도구 경험이 없어도 예술가처럼 창작할 수 있다는 메시지를 전달한다. Figma Draw의 새 산란 브러시는 단순한 장식 도구라기보다 반복·무작위성·질감을 조합해 작업의 분위기를 빠르게 바꾸는 표현 도구다. 점묘, 음영, 배경 질감, 감정적 효과가 필요한 작업에서 브러시 이름의 음악적 이미지를 참고해 다양한 스타일을 실험해볼 수 있다.

figma

Config 2025의 비 (새 탭에서 열림)

Figma는 Config 2025의 브랜드를 고정된 스타일이 아니라 다양한 매체와 상황에 유연하게 적용되는 시각 시스템으로 설계했다. 기본 도형에서 출발한 애니메이션 글리프와 컴포넌트 라이브러리를 활용해 컨퍼런스의 주제인 창작, 표현, 변화, 적응성을 표현했다. 그 결과 무대 화면부터 공간 장식, 소셜 콘텐츠, 배지와 굿즈까지 일관되면서도 확장 가능한 몰입형 경험을 구축했다. ## 대규모 행사를 위한 유연한 브랜드 시스템 - Config는 샌프란시스코와 런던에서 1만 명 이상이 참석하고, 온라인으로 수만 명이 시청하는 대형 사용자 컨퍼런스다. - Brand Studio 팀은 행사 시작 약 10개월 전부터 시각 아이덴티티 개발에 착수했다. - 브랜드 작업 범위는 다음과 같이 넓었다. - 메인 스테이지 화면 - 디지털 콘텐츠와 소셜 미디어 - 행사장 공간 경험 - 참석자 배지 - 굿즈와 각종 인쇄물 - 행사가 진행되며 요구사항과 제약이 달라질 수 있으므로, 처음부터 여러 환경에 대응할 수 있는 시스템을 만드는 것이 중요했다. ## 기본 도형에서 출발한 글리프 콘셉트 - Figma 브랜드의 핵심인 형태, 글리프, 프리미티브를 Config의 시각 언어로 확장했다. - 초기 단계에서는 무드보드나 구체적인 스타일보다 콘셉트 자체를 먼저 탐색했다. - 실행 방식을 지나치게 일찍 제한하면 결과물이 뻔하고 평면적으로 보일 수 있기 때문에, 콘셉트는 명확히 하되 표현 방식은 열어두었다. - 시각 콘셉트는 소셜 게시물, 대형 디지털 스크린, 실제 공간 설치물 등 서로 다른 크기와 매체에 적용될 수 있어야 했다. ## ‘늘어나고 흔들리는’ 글리프의 구조 - 각 글리프는 내부 요소와 외부 요소로 구성되며, 두 요소가 서로 반응하도록 설계됐다. - 글리프와 구성 요소의 변화는 창작 과정에서 나타나는 역동성, 변화, 적응성을 상징한다. - 정적인 그래픽에 그치지 않고 움직임을 통해 시각적 에너지를 강화했다. - 하나의 글리프가 움직이면 주변에 파동을 일으킨다. - 파동은 전체 구성을 변화시키며 연쇄적인 움직임을 만든다. - 이 구조 덕분에 같은 시각 언어를 사용하면서도 각 화면과 공간에서 서로 다른 조합과 움직임을 구현할 수 있었다. ## 컴포넌트 기반의 협업과 확장 - 팀은 Figma 안에서 글리프 라이브러리를 만들었다. - 글리프를 컴포넌트로 제작해 파트너와 외부 제작업체가 쉽게 재사용하고 수정할 수 있도록 했다. - 컴포넌트 기반 시스템의 장점은 다음과 같다. - 여러 표면과 매체에 빠르게 적용 가능 - 구성 요소를 교체하거나 커스터마이즈하기 쉬움 - 행사 전체의 시각적 일관성 유지 - 새로운 요구사항이 생겨도 기존 시스템 안에서 대응 가능 ## 제품 출시와 연결된 창작의 메시지 - Config 2025에서는 Figma Draw와 Figma Sites 등 사용자의 창의적 표현을 확장하는 제품 출시가 예정되어 있었다. - 이에 따라 시각 콘셉트도 단순한 장식보다 “더 자유롭고 예상 밖의 방식으로 자신을 표현한다”는 메시지에 초점을 맞췄다. - 글리프의 유기적인 움직임과 다양한 조합은 제품이 사용자의 창작 가능성을 넓힌다는 의미와 연결됐다. ## 새 Figma 브랜드 요소의 적용 - Config 2025는 Figma가 최근 진행한 브랜드 리프레시의 색상 체계와 새 서체인 Figma Sans를 활용할 수 있는 시점에 진행됐다. - 기존 브랜드 요소를 그대로 복사한 것이 아니라 Config의 행사 목적과 분위기에 맞게 변형해 사용했다. - 이를 통해 Config만의 표현력을 확보하면서도 Figma 전체 브랜드와의 연결성을 유지했다. Config처럼 규모가 크고 여러 채널에서 동시에 운영되는 행사는 처음부터 완성된 이미지 하나를 만드는 것보다, 재조합과 변형이 가능한 디자인 시스템을 구축하는 편이 효과적이다. 명확한 콘셉트, 컴포넌트화된 자산, 애니메이션 규칙을 함께 설계하면 행사 규모가 커져도 일관성과 창의성을 동시에 유지할 수 있다.

figma

Config 2025: (새 탭에서 열림)

피그마는 Config 2025를 통해 단순한 디자인 도구를 넘어 아이디어 구상부터 실제 제품 구현까지 전 과정을 아우르는 통합 플랫폼으로의 확장을 선언했습니다. AI 기술을 전면에 배치한 4개의 신규 제품과 강력해진 디자인 기능을 도입하여, 디자인과 개발 사이의 경계를 허물고 팀 전체의 생산성을 극대화하는 데 집중하고 있습니다. 이는 디자인이 비즈니스 차별화의 핵심이 되는 시대에 발맞추어, 모든 팀원이 제품 개발 프로세스에 더욱 깊이 기여할 수 있는 환경을 구축하려는 전략적 움직임으로 풀이됩니다. **AI 기반의 앱 및 웹 제작 솔루션** * **Figma Make**: 텍스트 프롬프트를 코드로 변환하거나 기존 디자인을 실제 작동하는 프로토타입 및 앱으로 제작해 주는 AI 도구로, 숙련도와 상관없이 아이디어를 빠르게 시각화하고 반복 수정할 수 있도록 돕습니다. * **Figma Sites**: 디자이너가 AI와 코드의 도움을 받아 역동적인 상호작용과 맞춤 설정이 가능한 웹사이트를 직접 구축하고 즉시 배포할 수 있는 환경을 제공합니다. **디자인 표현력과 브랜드 일관성 강화** * **Figma Draw**: 더욱 정교해진 벡터 편집 및 일러스트레이션 도구 세트를 통해 디자이너가 높은 수준의 공예적 완성도를 가진 시각 결과물을 만들 수 있도록 지원합니다. * **Figma Buzz**: 마케팅 및 브랜드 팀이 브랜드 가이드라인을 준수하면서도 AI를 활용해 대규모로 시각적 자산을 생성하고 관리할 수 있도록 설계된 전용 제품입니다. **개발 협업 및 AI 워크플로우 고도화** * **Grid**: 반응형 레이아웃 설정을 돕는 새로운 옵션으로, Dev Mode에서 즉시 활용 가능한 CSS 코드를 생성하여 디자인에서 개발로 이어지는 핸드오프 과정을 획기적으로 개선합니다. * **지능형 AI 기능**: 이미지 생성 및 편집 기능이 고도화되었으며, 작업 맥락을 이해해 다음 단계를 제안하는 자동 제안 기능과 FigJam 내 AI 보조 도구가 추가되어 워크플로우 속도를 높였습니다. **사용자 저변 확대와 글로벌 시장 최적화** * **사용자 구성의 변화**: 현재 피그마 사용자의 약 2/3가 비디자인 직군이며 그중 30%가 개발자인 점을 반영하여, 직군 간의 협업 효율을 높이는 도구(Dev Mode, Slides 등)를 지속적으로 강화하고 있습니다. * **글로벌 현지화**: 전체 사용자의 85%가 미국 외 지역에 거주하는 상황에 맞춰 브라질 시장을 위한 포르투갈어 전면 지원 및 UI 현지화를 진행하며 글로벌 확장세를 이어가고 있습니다. 이제 피그마는 디자이너만을 위한 도구를 넘어, 기획자, 개발자, 마케터가 하나의 캔버스에서 제품을 완성하는 '제품 개발 운영 체제'로 진화하고 있습니다. 팀 내 협업 효율을 높이고 AI를 통해 제작 단계를 단축하고자 한다면, 순차적으로 출시될 이번 신규 기능들을 워크플로우에 적극적으로 도입해 볼 것을 권장합니다.

figma

Figma Draw로 자신을 (새 탭에서 열림)

Figma Draw는 Figma Design 안에서 벡터 편집과 일러스트레이션 작업을 더 빠르고 직관적으로 수행하도록 만든 기능이다. 브러시, 동적 스트로크, 점진적 블러, 텍스처·노이즈, 경로 위 텍스트 등 표현 도구를 한곳에 제공해 다른 툴이나 플러그인으로 이동하지 않고도 작업 흐름을 유지하게 한다. 정밀한 벡터 편집 기능과 창의적인 표현 도구를 결합해 아이콘, 로고, 웹 일러스트, 소셜 미디어 그래픽 제작과 반복 작업을 효율화하는 것이 핵심이다. ## 작업 흐름을 유지하는 전용 작업 공간 - Figma Draw는 시각적 표현에 초점을 맞춘 UI를 제공해, 정밀한 제품 디자인과 자유로운 일러스트 작업 사이를 쉽게 오갈 수 있다. - **Layers 패널** - 프레임, 그룹, 도형, 벡터, 이미지의 썸네일 미리보기를 제공한다. - 여러 벡터 요소를 탐색하고 수정하기 쉽게 구성했다. - **툴바** - 펜, 브러시, 연필 도구를 전면에 배치했다. - 특수 벡터 기능에 쉽게 접근할 수 있다. - 캔버스에 그리기 전 스트로크 스타일을 미리 설정할 수 있는 별도 툴바를 제공한다. - **Properties 패널** - 슬라이더와 큰 시각적 미리보기로 값을 조정할 수 있다. - 스트로크 관련 설정을 확장했다. - 채우기, 스트로크 스타일, 효과를 사전에 선택해 작업 후 반복 조정을 줄인다. ## 정밀하고 효율적인 벡터 편집 - 벡터 작업에서 자주 필요한 선택, 정렬, 간격 조정, 패스 닫기, 핸들 수정 등을 더 직관적으로 개선했다. - 불리언 연산과 외곽선 변환 엔진을 업그레이드해 도형 결합·차감 작업을 더 자연스럽게 처리한다. - 여러 노드를 동시에 편집할 수 있다. - 여러 벡터 노드를 선택한 뒤 Enter를 누르면 한 번에 편집할 수 있다. - Shift+클릭으로 노드를 선택 영역에 추가할 수 있다. - Command+클릭으로 다른 레이어의 노드 편집으로 바로 이동할 수 있다. - **Shape Builder** 도구로 도형을 결합하고 조작해 아이콘과 로고를 만들 수 있다. - **Lasso 선택**을 사용하면 불규칙하게 배치된 벡터 객체나 복잡한 캔버스 일부를 자유롭게 선택할 수 있다. ## 일러스트레이션과 창의적 표현 도구 - Figma Draw는 기존의 정밀한 벡터 편집을 넘어 다양한 시각적 표현을 지원한다. - 주요 도구로 다음을 제시한다. - 브러시 - 동적 스트로크 - 텍스처 및 노이즈 효과 - 점진적 블러 - 경로 위 텍스트 - 브러시를 활용해 손으로 그린 듯한 표현을 추가할 수 있다. - 텍스처를 적용해 결과물에 촉각적이고 물성 있는 느낌을 더할 수 있다. - 점진적 블러를 이용해 디자인에 깊이감을 줄 수 있다. - 이러한 기능을 별도의 애플리케이션이나 플러그인으로 옮기지 않고 Figma 캔버스 안에서 실험하고 반복할 수 있다. ## 다양한 디자인 역할을 위한 통합 도구 - 제품 디자이너가 고해상도 목업에 필요한 로고나 아이콘을 빠르게 제작할 수 있다. - 브랜드 디자이너는 별도 툴을 열지 않고 일러스트와 그래픽 요소를 만들 수 있다. - 웹용 스팟 일러스트, 소셜 미디어 그래픽 등 표현 중심의 작업에도 활용할 수 있다. - Figma Draw의 방향성은 픽셀 단위의 정밀함과 자유로운 시각 표현이 더 이상 분리된 작업이 아니라는 점에 있다. 실무에서는 아이콘·로고처럼 정밀한 벡터 작업과 텍스처·브러시 기반의 표현 작업을 함께 수행해야 할 때 Figma Draw를 활용하면 좋다. 특히 여러 도구 사이를 오가며 생기는 작업 중단을 줄이고, 캔버스 안에서 빠르게 시도하고 수정하는 워크플로를 구축하는 데 적합하다.