responsive-design

27 개의 포스트

figma

GPT-5.6이 이제 Figma Make에서 사용 가능합니다 | Figma 블로그 (새 탭에서 열림)

GPT-5.6이 Figma Make에 추가되어 프롬프트에서 프로토타입과 코드로 전환하는 속도와 첫 결과물의 품질을 높인다. 복잡한 앱도 한 번의 프롬프트로 만들고, 오류가 발생하면 모델이 원인을 찾아 스스로 수정할 수 있다. 또한 기존 Figma 디자인을 높은 충실도로 인터랙티브 프로토타입으로 변환하며, 반응형 레이아웃과 실제 동작하는 상호작용까지 구현한다. ## 빠른 프로토타이핑과 작업 흐름 유지 - GPT-5.6은 아이디어를 working build로 빠르게 전환해 한 번의 작업 세션에서 여러 방향을 탐색할 수 있도록 한다. - 복잡한 디자인에서도 첫 결과물을 빠르게 생성하며, 토큰 효율성도 높다고 소개된다. - 예시로 금융·고딕 스타일의 주식 추적 앱을 한 번의 프롬프트로 제작했다. - 어두운 배경과 앰버·네온 오렌지 텍스트 - 샘플 주가와 수익률 정보 - 스파크라인, 티커, 모듈형 그리드 - 키보드 단축키와 검색 기능 - 빌드 중 오류가 발생해도 작업을 중단하지 않고 원인을 조사해 자체적으로 수정한다. - 실제 테스트에서는 빈 화면이 나타난 원인을 GPT-5.6이 찾아 해결했다. ## 기존 디자인을 충실하게 구현 - Figma Design 파일이나 디자인 명세를 기반으로 기존 시각적 구조를 유지하면서 인터랙티브 프로토타입을 만들 수 있다. - 자연의 소리를 재생하는 오디오 플레이어 사례에서 다음 요소들이 원본 디자인과 유사하게 구현됐다. - 다중 트랙 타임라인 - 재생·일시정지·이전·다음 컨트롤 - 사운드 라이브러리와 아트워크 - 레이아웃, 시각적 계층, 간격, 비율, 스타일 - 정적인 디자인을 실제 동작하는 프로토타입으로 바꾸는 디자인-투-코드 작업을 보다 안정적으로 수행한다. - 오디오 파일 재생뿐 아니라 음악에 반응하는 셰이더 기반 이미지 왜곡 효과도 요청할 수 있다. ## 높은 완성도의 첫 결과물 - 최소한의 프롬프트만으로도 스타일이 정돈된 프로토타입을 생성하는 것이 목표다. - 책장 제품을 판매하는 콘텐츠 중심의 이커머스 페이지 사례에서는 다음 기능이 첫 결과물에 포함됐다. - 제품 설명, 치수, 관리 가이드 - 제품 정보가 채워진 드롭다운 - 책장 사진을 탐색하는 인터랙티브 이미지 갤러리 - 클릭 가능한 메뉴 - 별도의 추가 지시 없이도 화면 크기에 따라 레이아웃이 안정적으로 조정됐다. - 따라서 초기 결과물을 단순한 시안이 아니라 팀이 검토·수정·확장할 수 있는 출발점으로 활용할 수 있다. ## Figma Make에서의 사용 방법 - GPT-5.6은 Figma Make에서 제공된다. - Make의 모델 선택기에서 GPT-5.6을 선택해 사용할 수 있다. - 사용자는 거친 아이디어, 기존 Figma 디자인, 짧은 기능 설명 등을 입력해 프로토타입이나 생산 코드에 가까운 결과물을 생성할 수 있다. 실무에서는 먼저 기존 디자인이나 원하는 사용자 경험을 구체적으로 제공하고, 생성된 첫 결과물을 기반으로 세부 기능과 스타일을 반복 수정하는 방식이 효과적이다. 특히 반응형 동작, 실제 인터랙션, 오류 자동 수정 기능을 활용하면 초기 프로토타입 제작과 팀 리뷰까지의 시간을 줄일 수 있다.

discord

데스크톱 디스코드 화면 최적화: 눈이 편안해지는 디스플레이 설정 (새 탭에서 열림)

Discord 데스크톱 앱은 미디어 표시 방식, 색상 강도, HDR, 이름 스타일, UI 밀도와 글자 크기 등을 조정해 눈의 피로를 줄일 수 있다. 사용자는 이미지·영상·링크 미리보기를 필요할 때만 표시하거나, 색상과 밝기를 낮추고, 화면에 표시되는 정보량을 자신의 선호에 맞게 바꿀 수 있다. 이러한 설정은 데스크톱과 웹 앱을 중심으로 설명되지만 일부는 모바일에서도 유사하게 제공된다. ## 대화 속 미디어 표시 제어 - **이미지·영상 자동 표시 설정** - `사용자 설정 > 디스플레이 > 메시지`에서 미디어 표시 방식을 조정할 수 있다. - 링크로 게시된 이미지·영상과 Discord에 직접 업로드된 파일을 각각 필요할 때만 열도록 설정할 수 있다. - **링크 미리보기 끄기** - “임베드 및 링크 미리보기 표시”를 끄면 링크 아래에 자동으로 생성되는 미리보기를 숨길 수 있다. - **이미지 설명(Alt Text) 표시** - 작성자가 이미지 설명을 입력한 경우 Alt Text 버튼을 통해 내용을 확인할 수 있다. - 이미지 설명을 기본적으로 확인하도록 설정할 수 있다. - **스포일러 콘텐츠 표시** - 스포일러 처리된 이미지나 영상을 다음 방식으로 표시할 수 있다. - 클릭할 때만 표시 - 항상 표시 - 자신이 관리하는 서버에서만 표시 - **링크 항상 밑줄 표시** - 링크에 색상뿐 아니라 밑줄도 적용해 링크임을 쉽게 구분할 수 있다. - 색상 채도를 낮췄을 때 파란색 링크가 잘 보이지 않는 문제를 보완하는 데 유용하다. ## Discord 색상과 밝기 낮추기 - **전체 인터페이스 채도 조절** - 채도를 낮추면 버튼, 상태 표시, 클릭 가능한 링크 등 Discord UI의 색상 강도가 줄어든다. - “사용자 지정 색상에도 적용”을 활성화하면 역할 색상 등 다른 사용자가 지정한 인터페이스 색상에도 적용된다. - 아바타, 사용자 지정 이모지, 업로드된 사진·영상처럼 사용자가 만든 콘텐츠의 색상은 조정되지 않는다. - **역할 색상을 이름 옆 점으로 표시** - 역할 색상으로 전체 표시 이름을 칠하는 대신 이름 왼쪽의 작은 점으로 표시할 수 있다. - 배경색과 비슷한 역할 색상 때문에 이름이 잘 보이지 않는 문제를 줄일 수 있다. - **HDR 콘텐츠 밝기 낮추기** - HDR 모니터에서 지나치게 밝게 표시되는 이미지·영상의 강도를 낮출 수 있다. - `접근성 > 하이 다이내믹 레인지`에서 전체 동적 범위와 표준 범위 사이를 선택한다. - **표시 이름 스타일 숨기기** - Nitro 사용자가 적용한 특수 글꼴이나 색상 효과가 산만하다면 `접근성 > 텍스트 가독성`에서 “표시 이름 스타일”을 끌 수 있다. - 이 설정은 본인 화면에만 적용되며 다른 사용자에게는 영향을 주지 않는다. ## UI 밀도와 글자 크기 조정 - Discord의 UI 밀도를 조절해 한 화면에 더 많은 정보를 표시하거나, 요소 사이 간격을 넓혀 구분하기 쉽게 만들 수 있다. - 글자 크기와 화면 요소의 크기를 자신의 시력과 사용 환경에 맞게 확대·축소할 수 있다. - 데스크톱, 노트북, 웹 앱 등 사용하는 화면 크기와 목적에 따라 밀도와 텍스트 크기를 다르게 설정하면 읽기 편의성을 높일 수 있다. 눈의 피로가 크다면 먼저 이미지·영상 자동 표시와 링크 미리보기를 끄고, 채도와 HDR 범위를 낮추는 것이 효과적이다. 이후 링크 밑줄, 역할 색상 표시 방식, 이름 스타일 숨기기, UI 밀도와 글자 크기를 조합해 자신에게 가장 편안한 Discord 환경을 구성하면 된다.

figma

디자인 맥락에 관심을 (새 탭에서 열림)

디자인 파일은 단순한 시각적 결과물이 아니라 개발자와 AI 코딩 도구가 이해하는 실행 가능한 맥락이어야 한다. Figma의 Dev Mode MCP 서버가 디자인을 코드로 변환할수록, 디자인 시스템과 파일 구조를 명확히 관리하는 일이 정확하고 빠른 구현의 핵심이 된다. 따라서 디자이너는 디자인 시스템을 코드와 연결하고, 개발자가 소비하기 쉬운 형태로 파일을 구성해야 한다. ## 디자인 시스템을 코드와 연결하기 - 색상, 간격, 크기, 타이포그래피를 **컴포넌트와 변수**로 표준화하면 반복 가능한 패턴과 일관성을 확보할 수 있다. - **Code Connect**를 사용하면 Figma 컴포넌트와 실제 코드 컴포넌트를 연결할 수 있다. - Dev Mode에서 실제 코드 스니펫을 제공한다. - Figma의 컴포넌트 속성 및 변형이 코드에서 어떻게 대응되는지 문서화한다. - **변수의 code syntax**를 지정하면 색상·타이포그래피·상태 등의 값이 웹과 네이티브 코드에서 어떤 문법으로 표현되는지 명확해진다. - Dev Mode MCP 서버는 이 정보를 AI 에이전트에 전달한다. - AI가 전체 코드베이스를 검색하지 않고도 적절한 컴포넌트와 변수 정보를 가져올 수 있다. - 디자인 시스템에 연결된 카드 컴포넌트라면, 정확한 간격·색상·타이포그래피와 실제 코드 구조를 반영한 코드를 생성할 수 있다. - 이러한 맥락을 Figma 라이브러리에 구축하면 조직 전체에서 재사용할 수 있어, 새로운 UI를 만드는 사람과 AI 도구 모두 같은 기준을 활용하게 된다. ## 개발자가 이해하기 쉬운 파일 구조 만들기 - 페이지 계층, 프레임, 레이어의 이름을 의도적으로 구성하면 디자인 작업뿐 아니라 개발자와 MCP가 디자인을 해석하는 데도 도움이 된다. - 파일 구조를 정리할 때는 다음 원칙이 중요하다. - **주요 반응형 브레이크포인트별 프레임을 만든다.** - 화면 크기에 따라 시각적 변화가 큰 경우 별도 프레임으로 표현한다. - 예를 들어 데스크톱 내비게이션이 모바일에서 메뉴 아이콘으로 바뀌는 동작을 명시할 수 있다. - **Auto Layout을 적극 활용한다.** - 다양한 화면 너비, 브레이크포인트, 텍스트 길이에 따라 레이아웃이 어떻게 변하는지 구조적으로 표현할 수 있다. - 단순히 픽셀 위치를 지정하는 것보다 실제 구현 방식에 가까운 정보를 제공한다. - 프레임과 레이어에 의미 있는 이름을 부여해 각 요소의 역할과 계층을 분명히 한다. - 잘 정리된 파일은 개발자가 디자인 의도를 추측하는 시간을 줄이고, AI 에이전트가 레이아웃과 컴포넌트 관계를 오해할 가능성도 낮춘다. ## 디자인 맥락이 AI 코딩의 정확도를 좌우한다 - 에이전트형 코딩 도구가 널리 사용되면서 디자인 파일의 구조와 명확성이 과거보다 중요해졌다. - AI는 시각적 결과만 보는 것이 아니라 다음과 같은 구조화된 정보를 활용해야 정확한 코드를 만들 수 있다. - 컴포넌트와 코드의 연결 관계 - 변수의 이름과 코드 문법 - 레이아웃 규칙과 반응형 동작 - 프레임 및 레이어의 계층 구조 - 디자인 시스템과 MCP 서버를 함께 사용하면 AI가 브랜드에 맞고 재사용 가능한 코드를 생성할 가능성이 높아진다. - 결과적으로 디자이너의 역할은 화면을 설계하는 데서 끝나지 않고, 개발과 AI가 활용할 수 있는 디자인 맥락을 구축하는 것까지 확장된다. 디자인을 전달할 때는 완성된 화면만 공유하기보다 컴포넌트·변수·코드 연결·반응형 구조를 함께 관리하는 것이 좋다. 특히 공통 라이브러리에 이러한 정보를 표준화해두면 개발자와 AI 모두 더 빠르고 일관되게 프로덕션 코드를 작성할 수 있다.

figma

피그마에서 브랜드 (새 탭에서 열림)

브랜드 템플릿은 완성된 디자인을 그대로 복제하는 것이 아니라, 마케터가 다양한 콘텐츠와 형식에 맞게 안전하게 수정할 수 있도록 설계해야 한다. Figma Buzz에서는 자동 레이아웃, 모듈화된 텍스트 레이어, 비율 고정, 명확한 레이어 이름 등을 활용해 브랜드 일관성을 지키면서도 유연한 셀프서비스 템플릿을 만들 수 있다. 이를 통해 브랜드 디자이너의 검수 부담을 줄이고 마케팅 팀의 제작 속도를 높일 수 있다. ## Figma Design에서 작업 시작 - 익숙한 **Figma Design**에서 먼저 프레임을 만든 뒤 Figma Buzz로 복사한다. - Figma Design의 컴포넌트 기능을 활용해 템플릿 구조를 설계할 수 있다. - Figma Draw의 브러시, 동적 스트로크, 프로그레시브 블러 등 표현 도구를 사용해 시각적 완성도를 높인 뒤 Buzz에서 템플릿으로 다듬는다. - 디자인 표현과 템플릿 편집 기능을 분리해, 디자이너는 창의적인 작업에 집중하고 마케터는 Buzz에서 콘텐츠를 수정할 수 있다. ## Auto Layout으로 레이아웃 유연성 확보 - Auto Layout은 반응형 템플릿의 기반이다. - 버튼, 텍스트 상자, 이미지 컨테이너 사이의 간격과 정렬을 자동으로 유지한다. - 긴 제목이나 본문이 입력되어도 주변 요소가 어긋나거나 겹치는 문제를 줄일 수 있다. - 콘텐츠 길이가 달라지는 템플릿일수록 고정 좌표보다 Auto Layout을 우선 적용하는 것이 좋다. ## 텍스트 레이어를 입력 단위별로 분리 - 서로 다른 입력값은 각각 별도의 텍스트 레이어로 만든다. - 글꼴, 크기, 스타일이 다른 내용을 하나의 레이어에 섞지 않아야 한다. - Figma Buzz의 **Bulk create** 기능은 CSV 또는 XLSX의 각 데이터 필드를 디자인 레이어에 매핑하므로, 텍스트 레이어가 모듈화되어 있어야 한다. - 여러 스타일이나 입력 필드를 하나의 레이어에 결합하면 대량 생성 시 서식이 깨지거나 수정이 어려워질 수 있다. ## 이미지와 벡터의 가로세로 비율 고정 - 이미지나 벡터를 선택한 뒤 레이아웃의 너비·높이 입력란 옆에 있는 정사각형 아이콘을 눌러 비율을 고정한다. - 정사각형 소셜 게시물을 세로형 스토리나 웹 배너로 확장할 때도 로고, 인물 사진, 일러스트가 찌그러지지 않는다. - 비율을 고정하지 않으면 이미지가 늘어나거나 눌리는 문제가 발생할 수 있다. - 다양한 출력 규격을 고려하는 템플릿에서는 이미지와 벡터의 비율 설정이 특히 중요하다. ## 레이어 이름을 명확하게 지정 - 기본적으로 텍스트 레이어 이름은 캔버스에 입력된 실제 문구로 지정된다. - Command + R 단축키나 레이어 직접 편집으로 이름을 바꿀 수 있다. - 레이어가 많다면 Figma AI를 활용해 이름을 일괄적으로 정리할 수 있다. - 템플릿 게시 후 팀원은 잠금 해제된 텍스트·이미지 레이어를 Edit Content 패널에서 폼처럼 수정하므로, 레이어 이름이 입력 목적을 명확히 설명해야 한다. - 예를 들어 `제목`, `작성자명`, `제품 이미지`, `CTA 문구`처럼 실제 입력 항목을 나타내는 이름이 적합하다. - 명확한 이름은 마케터의 편집 실수를 줄이고 템플릿 사용성을 높인다. ## 템플릿을 ‘편집 경험’ 중심으로 설계 - 일반 디자인과 템플릿 디자인의 차이는 사용자가 콘텐츠를 바꿀 것을 전제로 한다는 점이다. - 긴 문구, 다양한 이미지 비율, 여러 캠페인 데이터를 입력해도 레이아웃이 유지되어야 한다. - 디자이너가 모든 결과물을 사전 검수하기 어렵기 때문에, 템플릿 자체에 브랜드 가이드와 편집상의 안전장치를 반영해야 한다. - 잠금 설정, 자동 정렬, 명확한 레이어 구조를 조합하면 마케터가 빠르게 제작하면서도 브랜드 일관성을 유지할 수 있다. 실무에서는 먼저 Figma Design에서 구조를 만들고, Auto Layout과 레이어 분리를 적용한 뒤 Figma Buzz로 옮기는 방식이 효율적이다. 이후 실제로 긴 문구와 다른 이미지 비율을 입력해 테스트하면서 레이아웃이 깨지지 않는지 확인하는 것이 좋다.

figma

두 매개변수 구조 (새 탭에서 열림)

Figma는 변수(variables)와 컴포넌트 속성(component properties)을 서로 다른 구조로 구축했지만, 두 시스템이 같은 레이어 속성에 동시에 연결될 수 있어 렌더링 불일치와 학습·유지보수의 어려움이 발생했습니다. 이를 해결하기 위해 두 기능을 하나의 파라미터 아키텍처로 통합했고, 그 결과 사용자 경험의 일관성, 개발 속도, 향후 제품 확장성을 개선했습니다. ## 파라미터 시스템의 역할 - Figma의 반응형 디자인, 타이포그래피, 애니메이션, 상태 머신 등은 값을 한 곳에서 설정하고 여러 요소에 전파하는 파라미터 개념을 기반으로 합니다. - 값이 변경되면 해당 값을 참조하는 레이어의 속성이 즉시 갱신됩니다. - 변수와 컴포넌트 속성은 모두 “한 번 설정하고 여러 곳에 적용하는” 기능이지만, 서로 다른 문제를 해결하기 위해 별도로 발전했습니다. ## 컴포넌트 속성: 범위가 제한된 파라미터 - 컴포넌트 속성은 2022년에 출시됐으며, 디자인과 코드 사이의 간극을 줄이기 위한 목적이었습니다. - 특정 컴포넌트 내부 레이어에만 적용되는 **범위 제한형 파라미터(scoped parametrization)** 를 제공합니다. - 디자인 시스템 작성자는 버튼 등의 컴포넌트에 Boolean, 텍스트, 인스턴스 교체 등의 속성을 정의할 수 있습니다. - 사용자는 컴포넌트 내부 구조를 직접 훼손하지 않고, 공개된 속성만 수정할 수 있습니다. - 코드에서 컴포넌트의 props를 사용하는 방식과 유사해 디자이너와 개발자가 동일한 mental model을 공유할 수 있게 됐습니다. - 이 구조는 Figma Sites, Figma Make, Code Connect처럼 디자인을 실제 웹·코드 결과물로 연결하는 기능의 기반이 됐습니다. ## 변수: 전역적이고 문맥을 지원하는 파라미터 - 변수는 컴포넌트 내부에 국한되지 않고 프로젝트 전반에서 사용할 수 있는 더 넓은 범위의 파라미터입니다. - 색상, 크기 등 다양한 타입을 지원하며 디자인 토큰을 표현하는 데 적합합니다. - 라이트 모드와 다크 모드처럼 하나의 변수에 여러 문맥별 값을 정의할 수 있습니다. - 예를 들어 배경색 변수 하나에 기본, 보조, 강조 값과 각 모드의 실제 색상을 연결할 수 있습니다. - 이러한 특성 덕분에 디자인 시스템의 토큰을 중앙에서 관리하고 여러 화면에 일관되게 적용할 수 있습니다. ## 두 아키텍처를 분리했을 때의 문제 - 변수와 컴포넌트 속성이 서로 다른 내부 구조를 사용하면서 기능 간 동작이 일관되지 않았습니다. - 하나의 레이어 속성에 변수와 컴포넌트 속성이 동시에 연결되는 상황이 발생할 수 있었습니다. - 이 경우 편집기에서 어떤 값이 우선하는지 예측하기 어렵고 렌더링 결과가 일치하지 않을 수 있었습니다. - 사용자 입장에서는 비슷한 기능을 서로 다른 방식으로 배워야 했습니다. - 개발팀 역시 기능을 추가할 때 두 아키텍처를 각각 수정하고 호환성을 검토해야 했습니다. - 다른 Figma 제품에 파라미터 기능을 확장하려 해도 기존의 기술적 복잡성을 함께 가져가야 했습니다. ## 단일 파라미터 아키텍처로의 통합 - Figma는 변수와 컴포넌트 속성을 공통된 내부 파라미터 모델 위에서 동작하도록 통합했습니다. - 두 기능의 사용자-facing 개념은 유지하면서도, 값의 정의·바인딩·전파를 처리하는 기반 구조를 공유하게 했습니다. - 동일한 레이어 속성에 여러 파라미터가 연결되는 경우도 일관된 규칙으로 처리할 수 있게 됐습니다. - 공통 아키텍처를 통해 편집기 내 예상치 못한 동작과 렌더링 불일치를 줄였습니다. - 새로운 파라미터 기능이나 제품을 개발할 때 기존 시스템을 각각 구현할 필요가 없어져 개발 속도도 향상됐습니다. ## 통합이 가져온 확장성 - 컴포넌트의 구조적 제어와 변수의 전역적·문맥적 제어를 하나의 기반에서 조합할 수 있습니다. - 디자인 토큰, 컴포넌트 속성, 코드 생성 기능을 더 일관된 방식으로 연결할 수 있습니다. - 향후 Figma의 다른 제품에서도 동일한 파라미터 개념과 동작 규칙을 재사용할 수 있습니다. - 이번 작업은 단순한 내부 리팩터링이 아니라, 디자인 도구 전반에서 파라미터화를 확장하기 위한 기반을 마련한 사례입니다. 실무적으로는 컴포넌트의 외부에 노출할 사용자 조정 항목에는 컴포넌트 속성을, 여러 화면과 모드에서 공유할 디자인 토큰에는 변수를 사용하는 것이 적절합니다. 두 기능이 통합된 아키텍처 위에서 동작하더라도 각 기능의 범위와 목적은 여전히 다르므로, 재사용 범위에 따라 선택하는 것이 좋습니다.

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 Make를 소개 (새 탭에서 열림)

Figma Make는 자연어 프롬프트를 이용해 정적인 디자인을 실제로 조작 가능한 앱과 프로토타입으로 바꾸는 기능이다. 기존 Figma 프레임의 구조와 메타데이터를 유지하면서 애니메이션, 데이터, 반응형 동작 등을 빠르게 실험할 수 있으며, 디자이너와 제품팀이 코드 작성 없이 아이디어를 검증하도록 돕는다. Figma는 이를 디자인을 대체하는 도구가 아니라, 디자인 의도를 보존한 채 탐색과 구현을 가속하는 도구로 설명한다. ## 디자인에서 바로 시작하는 프롬프트 기반 제작 - 사용자는 빈 화면에서 시작할 필요 없이 Figma Design의 기존 프레임을 Figma Make로 복사할 수 있다. - 복사 과정에서 디자인의 구조와 메타데이터가 보존되어 원래 의도와 컴포넌트 계층을 유지한다. - 이후 “설정 패널을 열고 닫을 때 애니메이션을 추가해줘”처럼 자연어로 원하는 동작을 설명한다. - 현재 Figma Make는 Claude 3.7 Sonnet을 사용하며, 향후 다른 모델도 도입할 예정이다. ## 정적 디자인을 인터랙티브 프로토타입으로 전환 - 버튼, 애니메이션, 실시간 피드백 등을 추가해 정적인 화면을 실제 사용 가능한 프로토타입으로 바꿀 수 있다. - 파일 업로드나 정보 시각화처럼 동적 데이터를 사용하는 기능도 시험할 수 있다. - 모바일 앱 디자인을 데스크톱 화면으로 확장하는 등 다양한 폼팩터에 맞춘 반응형 디자인을 검증할 수 있다. - 향후 서드파티 데이터베이스와 디자인 시스템 연동도 지원할 계획이다. ## 실시간 협업과 역할 장벽 제거 - Figma 플랫폼 안에 통합되어 있어 여러 팀원이 같은 파일에서 실시간으로 탐색하고 수정할 수 있다. - 디자이너, 제품 관리자 등 기술 배경이 다른 구성원도 기능 추가, 데이터 적용, 인터랙션 모델 테스트에 참여할 수 있다. - 별도의 코딩 도구나 컨텍스트 전환 없이 하나의 작업 공간에서 아이디어 정의부터 반복 개선까지 진행한다. - 이를 통해 팀의 공통 기준점인 단일 소스 오브 트루스를 유지한다. ## 포인트 앤 프롬프트 방식의 정밀한 편집 - 특정 요소를 직접 선택한 뒤 변경 내용을 자연어로 지시할 수 있다. - 예를 들어 버튼에 애니메이션을 연결하거나, 특정 요소가 스크롤에 반응하도록 만들 수 있다. - 디자인 의도와 실제 동작 구현 사이의 간극을 줄이는 것이 목표다. - 구조화된 편집 방식은 디자인 시스템과 컴포넌트 계층을 보존해 기능을 추가하면서도 시각적 충실도를 유지한다. ## 캔버스에서 코드와 게시까지 이어지는 흐름 - Figma Make는 Figma Design 및 Figma Sites와 직접 연결된다. - 초기 아이디어를 디자인하고, 인터랙티브 프로토타입으로 검증한 뒤, 게시 가능한 사이트로 발전시키는 과정을 하나의 흐름으로 통합한다. - 별도 도구로 작업물을 다시 만들거나 맥락을 전환할 필요를 줄인다. ## 디자인 가능성의 확장 - Figma Make의 목적은 디자이너의 세밀한 반복 작업을 대체하는 것이 아니다. - 더 많은 디자인 방향을 빠르게 탐색하고, 아이디어의 실현 가능성을 조기에 검증하며, 팀에 개념을 효과적으로 전달하도록 지원한다. - 결과적으로 디자이너가 사고와 제작 사이를 빠르게 오가면서도 디자인의 완성도와 의도를 유지하도록 돕는다. 실무에서는 초기 아이디어 검증, 인터랙션 테스트, 반응형 화면 탐색처럼 반복 비용이 큰 단계에 우선 활용하는 것이 효과적이다. 다만 생성 결과를 최종 제품 코드로 바로 간주하기보다는, 팀의 디자인 시스템과 기술 요구사항에 맞춰 검토·정제하는 프로토타이핑 도구로 사용하는 것이 적절하다.

discord

디스코드 업데이트: 20 (새 탭에서 열림)

2024년 11월 18일, 디스코드는 인기 애니메이션 <아케인(Arcane)>과의 대규모 협업 소식과 함께 사용자 편의성을 대폭 강화한 신규 업데이트를 공개했습니다. 이번 업데이트에는 메시지 전달 및 최근 게임 플레이 기록 관리와 같은 실용적인 기능이 대거 포함되어 사용자 간의 공유와 개인 정보 관리가 더욱 용이해졌습니다. 또한 모바일 환경의 멀티태스킹 최적화와 외부 미디어 연동 강화를 통해 기기에 상관없이 더욱 매끄러운 커뮤니케이션 환경을 제공하는 데 주력했습니다. ### 아케인(Arcane) 콜라보레이션 및 상점 업데이트 * 애니메이션 <아케인>의 마지막 시즌을 기념하여 징크스, 바이, 에코 등 주요 캐릭터 테마의 특별 컬렉션을 상점에 출시했습니다. * 사용자는 아케인의 상징적인 기술과 무기를 모티프로 한 아바타 꾸미기 아이템과 프로필 효과를 통해 자신의 프로필을 개성 있게 꾸밀 수 있습니다. ### 메시지 전달 및 게임 활동 관리 기능 * 새롭게 도입된 '전달(Forward)' 버튼을 사용하면 번거롭게 스크린샷을 찍지 않고도 메시지를 다른 채팅방으로 즉시 공유할 수 있어 기기 저장 공간을 절약할 수 있습니다. * 데스크톱 프로필에서 최근에 플레이한 게임 목록을 확인할 수 있는 기능이 추가되었습니다. * 사용자의 프라이버시를 위해 특정 게임의 플레이 기록을 선택적으로 삭제할 수 있는 관리 옵션을 함께 제공합니다. ### 미디어 재생 및 신규 액티비티 추가 * 데스크톱 버전에서 틱톡(TikTok) 링크 공유 시 앱을 별도로 설치하지 않아도 디스코드 내부 임베드 플레이어를 통해 영상을 즉시 시청할 수 있습니다. * 앱 디렉토리에 '퀴즈 플래닛(Quiz Planet)' 액티비티가 추가되어, 음성 채널이나 채팅에서 친구들과 함께 실시간으로 상식 퀴즈 게임을 즐길 수 있습니다. ### 모바일 최적화 및 사용자 경험 개선 * 모바일 앱의 리사이징(Resizing) 성능을 대폭 개선하여, 스마트폰이나 태블릿에서 다른 앱과 함께 사용하는 멀티태스킹 환경에서도 UI가 유연하게 반응합니다. * 메시지 반응(Reaction) 시 사용자가 가장 자주 사용하는 상위 3개의 이모지를 자동으로 제안하여 더욱 빠르고 간편한 소통을 지원합니다. 이번 업데이트는 단순한 시각적 재미를 넘어 실질적인 사용성 개선에 초점을 맞추고 있습니다. 특히 협업 툴로서의 기능을 강화하는 '메시지 전달' 기능과 모바일 사용자들을 위한 멀티태스킹 최적화는 다양한 기기에서 디스코드를 사용하는 유저들에게 높은 편의성을 제공할 것으로 기대됩니다.

figma

피그마 2024 (새 탭에서 열림)

2024년 피그마(Figma)는 전 세계 커뮤니티의 피드백을 바탕으로 180회 이상의 업데이트를 진행하며 디자인 도구를 넘어 협업 플랫폼으로서의 완성도를 높였습니다. UI3로 불리는 대대적인 인터페이스 개편부터 AI를 활용한 워크플로우 효율화, 그리고 새로운 프레젠테이션 도구인 '피그마 슬라이즈(Figma Slides)' 도입까지, 사용자의 제작 과정을 더 빠르고 정교하게 만드는 데 집중했습니다. 결과적으로 피그마는 단순히 화면을 그리는 도구에서 아이디어 구상부터 개발 전달까지 전 과정을 아우르는 에코시스템으로 진화했습니다. **사용자 피드백으로 완성된 UI3와 인터페이스 혁신** * 2019년 이후 가장 큰 규모의 디자인 개편인 UI3를 출시했으며, 베타 기간 중 접수된 피드백을 반영해 플로팅 패널 대신 고정 및 크기 조절이 가능한 패널 시스템으로 최종 조정했습니다. * 디자인 캔버스의 공간 확보를 위해 레이어 패널을 숨길 수 있게 개선하고, 타이포그래피 및 아이콘 시스템을 현대적으로 일신했습니다. * 스포이드 도구를 개선하여 스타일과 변수(Variables)를 쉽게 재사용하고 여러 컬러 포맷을 탭으로 전환하며 빠르게 관리할 수 있도록 했습니다. **핵심 기능 고도화 및 성능 최적화** * **멀티 에디트(Multi-edit):** 여러 프레임에 걸친 디자인 요소를 한 번에 편집할 수 있는 기능을 도입하여 반복 작업 시간을 획기적으로 단축했습니다. * **고급 타이포그래피:** 텍스트 스타일 내에서 기울임꼴, 굵게, 밑줄 등을 개별적으로 재정의(Override)할 수 있으며, 단일 텍스트 노드 내에서 혼합 단락 간격을 설정할 수 있습니다. * **성능 향상:** 대규모 파일을 효율적으로 관리하기 위해 동적 페이지 로딩(Dynamic page loading)과 메모리 최적화 시스템을 도입했으며, 유럽 지역 로컬 파일 호스팅을 통해 인프라 안정성을 강화했습니다. * **오토 레이아웃 제안:** 복잡한 디자인을 반응형으로 더 쉽게 변환할 수 있도록 오토 레이아웃 추천 기능을 강화했습니다. **워크플로우의 마찰을 줄이는 AI 기능** * **비주얼 및 에셋 검색:** 이미지 업로드나 영역 선택을 통해 필요한 컴포넌트를 찾고, 이름이 일치하지 않아도 맥락에 맞는 에셋을 찾아주는 AI 검색 기능을 도입했습니다. * **콘텐츠 생성 및 편집:** 더미 데이터를 채워주는 텍스트 생성, 다국어 번역, 이미지 배경 제거 기능을 캔버스 내에서 즉시 실행할 수 있습니다. * **First Draft:** 기존의 'Make Designs'를 개선한 기능으로, 아이디어를 시각화하는 첫 단계에서 디자인 초안을 빠르게 생성하여 디자이너의 초기 탐색 과정을 돕습니다. * **레이어 정리:** AI가 레이어 이름을 자동으로 정리해주는 기능을 통해 파일 관리의 번거로움을 줄였습니다. **협업의 확장: 개발 생산성과 프레젠테이션** * **데브 모드(Dev Mode):** 코드 커넥트(Code Connect)를 통해 디자인 시스템의 컴포넌트를 실제 코드와 연결하여 개발자가 문맥 전환 없이 디자인을 구현할 수 있도록 지원합니다. * **피그마 슬라이즈(Figma Slides):** 디자인과 프레젠테이션의 경계를 허물어, 피그마의 정교한 디자인 툴을 그대로 활용하면서 고품질의 발표 자료를 제작하고 공유할 수 있게 했습니다. 실무 디자이너와 팀은 새롭게 도입된 AI 기반 검색과 레이어 정리 기능을 활용해 관리 리소스를 줄이고, 코드 커넥트를 도입해 개발자와의 협업 효율을 극대화하는 것을 권장합니다. 특히 UI3의 변경된 패널 시스템에 익숙해진다면 더 넓은 작업 영역에서 창의적인 업무에 몰입할 수 있을 것입니다.

figma

기능 비하인드: (새 탭에서 열림)

Figma는 프로토타입을 실제 기기에서 사용하는 경험에 가깝게 만들기 위해 모바일·태블릿·워치용 **인라인 디바이스 프레임**을 에디터 안에 도입했다. 사용자는 프레젠테이션 화면으로 이동하지 않고도 디자인 옆에서 기기 프레임을 배치·이동·크기 조절하며 프로토타입을 확인할 수 있다. 이 기능은 다양한 기기 형태를 반영하면서도 자연스러운 상호작용과 협업 중심의 디자인 프로세스를 유지하는 것을 목표로 개발됐다. ## 프로토타이핑을 현실에 가깝게 만드는 이유 - 실제 기기를 손에 들고 화면과 플로우를 확인하면 제품이 실제로 어떻게 작동하는지 더 잘 이해할 수 있다. - 프로토타입은 개발 전에 사용성 문제, 설계의 빈틈, 개선 기회를 발견하게 해준다. - Figma는 2023년 Config에서 실시간으로 프로토타입을 확인하는 **인라인 프리뷰**를 선보였고, 이후 기기 프레임까지 에디터 내부로 확장했다. - 프레젠테이션 뷰로 이동하지 않아도 디자인 작업과 실제 기기 맥락 확인을 동시에 할 수 있게 된 것이 핵심이다. ## 협업을 기반으로 한 기능 설계 - Figma는 기존 프레젠테이션 뷰에서 제공하던 다양한 기기 프리셋이 인기가 높다는 점에 주목했다. - 이를 에디터 안으로 가져와 디자인 옆에서 휴대폰, 태블릿, 워치 프레임을 사용할 수 있도록 했다. - 제품 디자이너, 엔지니어, 제품 관리자, 마케팅 담당자와 사용자 커뮤니티의 의견을 함께 반영했다. - 개발 과정에서 세운 핵심 원칙은 다음과 같다. - 디자인 작업 흐름에 자연스럽게 통합할 것 - 다양한 실제 기기를 현실적으로 표현할 것 - 기기의 상호작용 영역을 직관적으로 설계할 것 - 목표는 단순한 정적 이미지가 아니라, 사용자가 잡고 이동하고 크기를 조절할 수 있는 반응형 기기를 에디터 안에 구현하는 것이었다. ## 다양한 기기 형태의 표현 - 인라인 프리뷰 공간의 제약 때문에 초기 대상은 개인용 컴퓨터보다 상대적으로 작은 모바일, 태블릿, 워치로 한정했다. - 기기마다 화면 비율과 외형이 다르므로 하나의 고정된 프레임으로는 다양한 사용 환경을 표현하기 어렵다. - 스마트폰의 카메라와 센서를 수용하기 위해 화면 일부가 파인 **노치(notch)** 같은 요소도 고려해야 했다. - 화면뿐 아니라 기기 외곽, 모서리, 센서 영역 등 실제 사용 경험을 구성하는 시각적 요소를 함께 재현해야 했다. ## 자연스러운 크기 조절과 상호작용 - 인라인 디바이스 프레임은 디자인 요소처럼 에디터 안에서 이동하고 크기를 조절할 수 있어야 했다. - 특히 워치처럼 외형이 작고 복잡한 기기는 어느 영역을 드래그하거나 조작할 수 있게 할지 결정하기 어려웠다. - 프레임의 상호작용 가능한 영역, 즉 **히트 타깃**을 명확하고 직관적으로 설계하는 것이 중요한 과제였다. - 기기마다 형태가 다르더라도 사용자가 별도의 학습 없이 동일한 방식으로 조작할 수 있도록 상호작용 규칙을 정리해야 했다. ## 프로토타이핑 기능 전반의 개선 - 인라인 디바이스 프레임과 함께 여러 프로토타이핑 개선 사항도 제공됐다. - 연결선을 복사·붙여넣기해 인터랙션을 빠르게 복제할 수 있다. - 플로우를 빠르게 삭제하는 기능이 추가됐다. - 로컬 변수가 포함된 요소를 새 파일로 쉽게 가져올 수 있는 고급 기능도 제공됐다. - 주요 사용 사례에서 로딩 스피너가 나타나는 시간이 22% 줄어 성능도 개선됐다. 실무에서는 모바일·태블릿·워치 화면을 설계할 때 인라인 디바이스 프레임을 활용해 디자인과 실제 사용 맥락을 동시에 검토하는 것이 유용하다. 특히 기기별 화면 비율, 노치, 워치의 작은 터치 영역처럼 실제 환경에서 발생하는 문제를 개발 전에 확인하는 데 적합하다.

figma

변수에 관한 모든 궁금증 해결 (새 탭에서 열림)

Figma의 변수(Variables)는 단순한 디자인 토큰을 넘어 여러 상태와 플랫폼에 따라 디자인 값을 동적으로 바꾸고, 디자인과 코드를 더 밀접하게 연결하는 기능이다. 이번 업데이트로 효과, 선 두께, 투명도, 레이아웃 그리드, 모서리 반경, 중첩된 컴포넌트 인스턴스까지 변수로 제어할 수 있게 되어 반응형·다중 플랫폼 디자인의 유연성이 크게 향상됐다. Figma는 앞으로 타이포그래피 영역까지 변수 활용을 확장할 계획이다. ## 변수의 확장된 활용 - 변수는 색상이나 간격 같은 고정된 토큰을 대체하는 데 그치지 않고, 모드에 따라 값이 달라지는 유연한 설계 단위로 사용된다. - 데스크톱·모바일, 라이트·다크 모드, 브랜드별 테마 등 서로 다른 조건에 맞춰 디자인을 한 번에 조정할 수 있다. - Headspace처럼 디자인 시스템의 일관성을 유지하면서도 다양한 제품 상황과 협업 요구에 대응하는 데 활용할 수 있다. - 변수의 개방적인 구조 덕분에 일반적인 디자인 시스템뿐 아니라 Figma 안에서 게임과 인터랙티브 작품을 만드는 등 창의적인 용도로도 사용된다. ## 효과와 시각적 속성의 반응형 제어 - 블러 크기, 드롭 섀도의 색상, 오프셋 거리 등 효과의 다양한 속성에 변수를 바인딩할 수 있다. - 모드가 바뀌면 효과 값도 함께 변경되므로, 플랫폼이나 테마에 맞는 시각적 표현을 자동으로 적용할 수 있다. - 레이어의 불투명도 역시 변수로 제어할 수 있으며, 불투명도 필드를 마우스 오른쪽 버튼으로 클릭해 변수를 연결한다. - 개별 모서리 반경을 변수에 연결해 네 모서리를 동일하게 처리하지 않고 각각 세밀하게 조정할 수 있다. ## 플랫폼별 반응형 디자인 - 선 두께를 변수로 관리해 데스크톱과 모바일 등 플랫폼별로 다른 스트로크 값을 적용할 수 있다. - 레이아웃 그리드도 변수와 모드에 따라 변경할 수 있어 화면 크기나 기기별 레이아웃을 더욱 정밀하게 설계할 수 있다. - 동일한 컴포넌트 구조를 유지하면서 모드만 전환해 픽셀 단위로 최적화된 디자인을 만들 수 있다. ## 중첩된 컴포넌트 인스턴스 제어 - 컴포넌트 내부에 포함된 다른 컴포넌트 인스턴스의 변형(variant)에도 변수를 연결할 수 있다. - 이를 통해 복잡한 컴포넌트 구조에서도 내부 요소의 상태와 속성을 상위 시스템에서 유연하게 제어할 수 있다. - 여러 단계로 중첩된 디자인 시스템을 구성할 때 반복적인 수동 수정이 줄어든다. ## 변수와 스타일의 관계 - 스타일은 특정 색상, 텍스트, 효과 등을 재사용하는 데 적합한 반면, 변수는 조건이나 모드에 따라 값이 바뀌는 동적 상황에 더 적합하다. - 변수는 기존 스타일을 대체하기보다는 스타일과 함께 사용해 디자인 시스템을 확장하는 방식으로 이해할 수 있다. - 변수의 활용 범위가 넓어지면서 디자인 파일의 값과 실제 코드에서 사용하는 토큰 사이의 연결도 더 자연스러워진다. ## 디자인과 코드의 연결 강화 - 변수 기반으로 디자인 값을 관리하면 개발자가 사용하는 플랫폼별 토큰 및 테마 값과 디자인 시스템을 맞추기 쉬워진다. - 모드와 변수 구조를 코드의 상태값이나 디자인 토큰 구조에 대응시킬 수 있어 핸드오프 과정의 불일치를 줄일 수 있다. - Figma는 이러한 연계를 앞으로 타이포그래피까지 확장하려 하며, 글꼴 크기·행간·문자 간격 등도 더 유연하게 관리할 가능성을 제시한다. 실무에서는 먼저 색상과 간격처럼 반복 사용이 많은 값을 변수화한 뒤, 라이트·다크 모드나 모바일·데스크톱 모드를 구성하는 것이 좋다. 이후 효과, 투명도, 그리드, 컴포넌트 상태로 범위를 넓히면 디자인 시스템의 일관성과 반응형 설계 효율을 함께 높일 수 있다.

figma

Config 202 (새 탭에서 열림)

Figma는 커뮤니티 중심의 컨퍼런스인 Config 2024를 더 많은 참여와 원활한 경험을 제공하는 행사로 발전시키겠다고 밝혔다. 2024년 6월 26~27일 샌프란시스코에서 열리며, 디자인·AI·개발·디자인 시스템 등을 주제로 75명 이상의 연사가 참여한다. 참가자 피드백을 반영해 세션 예약제, 개발자 콘텐츠 확대, 교류 시간 확보, 다국어 지원 등을 도입한다. ## 커뮤니티 중심의 컨퍼런스 - Config는 단순한 제품 발표회가 아니라 다음을 위한 행사로 소개된다. - 커뮤니티 구성원 간의 교류 - 실무 중심의 학습과 아이디어 공유 - 제품을 만드는 사람들의 작업과 전문성에 대한 축하 - 2020년 첫 오프라인 행사에서 약 1,000명의 Figma 사용자를 모은 이후, Figma와 커뮤니티의 성장에 맞춰 행사의 규모와 범위를 확장해 왔다. - 팬데믹 이후 첫 대규모 오프라인 Config에서 얻은 경험을 2024년 행사 운영에 반영한다. ## 세션 예약제로 좌석 보장 - 참가자는 원하는 브레이크아웃 세션을 사전에 예약할 수 있다. - 예약한 세션에 제시간에 도착하면 좌석을 보장받는다. - 매우 얼리버드 티켓 구매자는 다른 참가자보다 24시간 먼저 세션을 예약할 수 있다. - 인기 세션의 긴 대기 줄과 좌석 부족 문제를 줄이려는 개선이다. ## 개발자를 위한 프로그램 확대 - 제품 제작에 참여하는 모든 직군을 지원하기 위해 개발자 대상 콘텐츠를 늘린다. - 구체적인 세부 프로그램은 추후 공개될 예정이지만, 기존 디자인 중심 구성에서 개발 관련 트랙을 강화하는 방향이다. - 디자인 시스템, 개발, AI 등 여러 분야를 아우르는 발표가 예정되어 있다. ## 교류와 현장 경험 개선 - 참가자들이 네트워킹하거나 휴식할 수 있도록 일정에 더 많은 여유 시간을 배치한다. - 행사 공간을 확장해 다음과 같은 현장 문제를 개선한다. - 대기 줄 단축 - 이동 및 좌석 공간 확대 - 참가자 동선 개선 - 전반적인 행사 운영의 원활함 향상 - 강연을 연속해서 듣는 데 그치지 않고 커뮤니티와 직접 교류할 수 있는 경험을 강화한다. ## 글로벌 참가자를 위한 다국어 지원 - 온라인 참가자에게 영어, 프랑스어, 독일어, 일본어, 한국어, 스페인어 자막을 제공한다. - 오프라인 참가자를 위해 동시통역과 번역을 지원한다. - 향후 더 많은 언어를 행사에 추가해 글로벌 커뮤니티의 접근성을 높일 계획이다. ## 리더십 트랙 확대 - 전년도 긍정적인 반응을 바탕으로 임원 및 리더 대상 프로그램인 Leadership Collective를 확대한다. - 새로운 임원 브리핑 센터를 마련한다. - 리더를 위한 콘텐츠와 네트워킹 기회를 늘린다. - 등록 과정에서 초대 전용 트랙에 지원할 수 있다. ## 참가 및 발표자 모집 - 얼리버드 티켓은 수량이 제한되어 있으며, 자격 요건을 충족하는 참가자를 위한 장학금도 제공한다. - 참가자 의견과 발표자 제안을 이메일이나 소셜미디어로 받고 있다. - 발표 또는 세션 진행을 원하는 사람은 2023년 12월 31일까지 발표자 모집에 지원할 수 있었다. - 행사는 2024년 6월 26~27일 샌프란시스코에서 개최될 예정이었다. Config 2024는 규모만 키우는 대신 좌석 예약, 개발자 콘텐츠, 다국어 지원, 네트워킹 시간처럼 참가자의 실제 불편을 해결하는 방향으로 설계된 행사다. 비슷한 컨퍼런스를 기획한다면 참가자 피드백을 운영 방식에 직접 반영하고, 학습·교류·접근성을 균형 있게 강화하는 것이 핵심이다.

figma

디자인과 창의성의 미래 (새 탭에서 열림)

피그마와 어도비는 15개월에 걸친 규제 검토 끝에, 당국의 승인을 얻을 수 있는 현실적인 경로가 없다는 판단하에 인수 합병 계약을 공식적으로 종료하기로 합의했습니다. 이번 결정은 양사의 기술적 결합이 가져올 혁신적인 디자인 생태계에 대한 비전을 뒤로한 채 각자의 길을 걷게 됨을 의미합니다. 비록 합병은 무산되었으나, 피그마는 실시간 협업과 생성형 AI, 그리고 도구 간의 심리스한 연결성이 주도할 미래 디자인 워크플로우의 청사진을 제시하며 창의성의 미래를 향한 의지를 밝혔습니다. **합병 중단 배경과 규제 환경** * 2023년 12월 18일, 피그마와 어도비는 시장 독점 및 경쟁 저해를 우려하는 규제 당국의 높은 벽을 넘지 못하고 인수 포기를 선언함. * 양사는 장기간의 검토 과정 끝에 더 이상 승인 가능성이 없다는 점에 상호 동의하며 15개월간의 인수 절차를 마무리함. **멀티플레이어 협업 기술의 확장** * 피그마의 강점인 실시간 멀티플레이어 환경을 어도비의 전문 저작 도구(예: 3D 디자인)에 이식하여 협업 효율 극대화 추진. * 한 디자이너가 3D 모델을 구축하는 동안 다른 디자이너가 실시간으로 조명이나 텍스처를 조정하는 동시 작업 환경 구상. * 전문 툴 학습 시 숙련자가 초보자와 같은 파일 내에서 실시간 가이드를 제공하는 교육적 효과 기대. **심리스한 에셋 연동과 디자인 시스템 통합** * Adobe Substance 3D에서 제작한 에셋을 피그마 목업에 배치하고, 원본 수정 시 피그마 내 에셋도 자동으로 최신화되는 실시간 동기화 기술. * 피그마의 제품 디자인과 어도비 에셋 간의 디자인 시스템(컬러 팔레트, 폰트 등) 공유 및 Adobe Fonts의 피그마 내 직접 활용. * 완성된 피그마 프로토타입을 마케팅 영상에 직접 삽입하여, 제품 디자인 변경이 영상 소스에 즉각 반영되는 워크플로우 구축. **생성형 AI '파이어플라이'와의 기술적 융합** * 어도비의 생성형 AI 모델인 '파이어플라이(Firefly)'를 피그마 워크플로우에 통합하여 UI 컨셉에 맞는 배경을 즉석에서 생성. * 반응형 디자인 대응을 위해 이미지를 자연스럽게 확장하는 '제너레이티브 필(Generative Fill)' 기능의 피그마 내 구현. * 브레인스토밍 단계의 스티키 노트를 지능적으로 분석하여 순식간에 시각화된 스토리보드로 전환하는 자동화 기능 구상. 기업 간의 물리적 합병은 멈추었으나, 피그마가 제시한 '도구 간의 경계 없는 연결'과 '실시간 협업의 확장'이라는 방향성은 향후 디자인 도구 시장의 중요한 표준이 될 것입니다. 디자이너들은 개별 툴의 숙련도를 넘어, AI와 실시간 협업 기능을 활용해 아이디어에서 프로토타입까지의 도달 시간을 단축하는 효율적인 워크플로우 구축에 주목해야 합니다.

figma

Tailwind UI 공식 피그 (새 탭에서 열림)

Tailwind Labs는 Tailwind UI의 코드 컴포넌트를 디자이너와 개발자가 함께 사용할 수 있는 공식 Figma 키트로 재구성했다. 약 1,400개의 컴포넌트와 10,000개의 요소를 제작하면서, 최종 코드 구조를 디자인 파일의 기준으로 삼고 레이어 이름·구조·변형을 체계화했다. 핵심 결론은 디자인 시스템을 실제 제품처럼 배포하려면 시각적 완성도뿐 아니라 일관된 구조와 사용성까지 세밀하게 설계해야 한다는 것이다. ## Tailwind UI Figma 키트 제작 배경 - Tailwind UI는 Tailwind CSS 기반의 반응형 HTML 컴포넌트 모음이다. - 고객들의 Figma 파일 요청이 지속적으로 늘어나 공식 Figma 키트를 제작하게 됐다. - 400개가 넘는 코드 컴포넌트를 바탕으로 1,400개 이상의 Figma 컴포넌트와 10,000개의 개별 요소를 구축했다. - 일반적인 작업용 디자인 파일과 달리, 상용 디자인 키트는 파일 자체가 최종 제품이므로 모든 세부 요소가 사용자 경험에 영향을 준다. ## 디자인 파일을 코드의 구조에 맞추기 - 최종 HTML 코드가 디자인 파일이 따라야 할 픽셀 단위 기준이 되도록 했다. - Figma의 오토 레이아웃, 레이아웃 그리드, 레이아웃 제약 조건을 활용해 HTML 마크업과 유사한 레이어 구조를 만들었다. - 디자인과 코드가 비슷한 구조를 가지면 디자이너와 개발자가 레이아웃 가능성을 공통으로 이해할 수 있다. - 반복되는 반응형 패딩이나 중앙 정렬된 최대 너비 컨테이너 같은 패턴을 디자인 파일에서 발견하고, 이를 개발자가 재사용 가능한 컨테이너 구조로 구현할 수 있었다. ## 일관된 레이어 이름 - 모든 레이어에 일관된 명명 규칙을 적용했다. - 예를 들어 버튼의 텍스트 레이어를 항상 `Text`로 지정하면, 버튼 크기나 변형을 바꿔도 사용자가 입력한 텍스트가 그대로 유지된다. - 복잡한 컴포넌트에서도 아이콘, 제목, 본문, 링크 등의 사용자 지정 내용이 다른 인스턴스나 변형으로 교체할 때 보존된다. - 일관된 레이어 이름은 단순한 정리 규칙이 아니라 Figma의 오버라이드 동작을 안정적으로 만드는 기반이다. ## 변형으로 컴포넌트 수 줄이기 - 여러 개의 유사한 컴포넌트를 개별적으로 관리하는 대신, 하나의 컴포넌트에 다양한 변형을 정의했다. - 예를 들어 80개의 배지 컴포넌트를 따로 만드는 대신 `type`, `size`, `theme`, 보조 요소 등의 속성을 가진 하나의 Badge 컴포넌트를 구성했다. - 코드 컴포넌트에서 사용하는 속성과 Figma의 변형 속성에 동일한 이름과 개념을 사용해 디자인과 개발 사이의 대응 관계를 명확히 했다. - 여러 컴포넌트에서 반복적으로 사용할 수 있는 변형 이름은 다음과 같다. - `type` - `size` - `theme` - `position` - `breakpoint` - `state` - 변형 패널 자체가 컴포넌트의 가능한 상태와 옵션을 설명하는 문서 역할을 한다. - 최종 키트에는 평균 7개의 변형을 가진 1,430개 컴포넌트가 포함됐다. - 변형을 사용하지 않았다면 컴포넌트 수가 10,000개를 넘었겠지만, 변형 덕분에 실제 코드 컴포넌트 수인 약 400개에 가까운 수준으로 관리할 수 있었다. ## 실용적인 결론 상용 Figma 키트를 만들 때는 화면을 예쁘게 복제하는 것보다 코드와 디자인의 구조를 일치시키는 일이 중요하다. 레이어 이름과 변형 속성을 처음부터 표준화하고, 반복되는 레이아웃 규칙을 컴포넌트 구조에 반영하면 사용자는 더 쉽게 커스터마이즈할 수 있고 디자인·개발 간 협업도 효율적으로 유지할 수 있다.

figma

기능 비하인드: 새로운 (새 탭에서 열림)

Figma의 새 Auto Layout은 수동으로 요소 크기와 간격을 조정하던 작업을 자동화하면서도, CSS Flexbox의 강력함을 그대로 복잡하게 노출하지 않는 방향으로 설계됐다. 핵심 원칙은 “Flexbox의 신중한 부분집합”으로, 코드와 디자인의 정렬을 돕되 누구나 쉽게 이해하고 사용할 수 있게 만드는 것이었다. 새 버전은 사용자 피드백을 바탕으로 유연성과 기능을 확장한 결과다. ## 수동 리사이징 문제에서 출발한 Auto Layout - Auto Layout 출시 전에는 버튼의 텍스트가 길어지면 다음 작업을 직접 해야 했다. - 버튼 크기 조정 - 주변 버튼 위치 이동 - 대화상자 컨테이너 크기 조정 - 패딩과 간격 재조정 - 이런 수작업은 단순히 번거로운 것을 넘어 반응형 디자인 시스템 구축의 장애물이 됐다. - Figma 초기 설계에도 프레임 내부 객체를 자동으로 배치하는 아이디어가 있었지만, 제품 출시 당시에는 구현되지 않았다. - 2018년 Maker Week에서 제품 디렉터 Sho가 초기 아이디어를 다시 프로토타입으로 발전시켰고, 이후 전담 팀이 Auto Layout을 실제 기능으로 구현하기 시작했다. ## Flexbox를 참고하되 단순하게 설계 - 팀은 웹 기술인 CSS Flexbox의 강력함과 범용성에서 영감을 얻었다. - 디자인과 코드 사이의 개념적 일치를 높이려면 Flexbox와 유사한 모델이 유리했다. - 그러나 사용자가 브라우저와 CSS를 깊이 이해해야 한다면 Figma의 접근성이 떨어질 수 있었다. - 이에 따라 “Auto Layout은 Flexbox의 신중한 부분집합이어야 한다”는 설계 원칙을 세웠다. - 이 원칙은 기능을 추가하면서도 설정 항목과 동작 규칙을 불필요하게 복잡하게 만들지 않도록 팀의 의사결정을 이끌었다. ## 첫 번째 Auto Layout의 핵심 개념 - 프레임에 Auto Layout을 적용하면 내부 요소를 수직 또는 수평으로 배치할 수 있다. - 요소 사이의 수직·수평 간격을 지정할 수 있다. - Auto Layout 프레임은 기본적으로 주축 방향에서 내부 컴포넌트 크기에 맞춰 늘어나거나 줄어든다. - 반대축 방향도 고정 너비 또는 내부 콘텐츠에 맞추는 방식으로 설정할 수 있다. - 프레임 내부의 각 컴포넌트는 컨테이너 기준으로 개별 정렬할 수 있다. - 수직 레이아웃에서는 좌·중앙·우 정렬 - 수평 레이아웃에서는 상·중앙·하 정렬 ## HTML 프로토타입과 초기 검증 - Auto Layout 디자이너 Marcin은 처음부터 HTML로 프로토타입을 제작했다. - 실제 웹 환경과 유사한 프로토타입을 통해 기능의 사용감과 동작을 조기에 확인할 수 있었다. - 이 과정에서 다음과 같은 세부 동작을 구체화했다. - 프레임 핸들의 시각적 장식 - 객체를 드래그할 때의 동작 - Auto Layout 프레임의 외곽선 표시 - 초기 프로토타입은 기능 목록을 정하는 데 그치지 않고, 편집기에서 사용자가 기능을 어떻게 인식하고 조작할지 검증하는 역할을 했다. ## 기능 확장과 사용성 사이의 균형 - 초기 Auto Layout은 접근성과 직관성을 우선해 설계됐다. - 이후 사용자 피드백을 반영하면서 더 강력하고 유연한 레이아웃 기능을 추가했다. - 다만 유연성을 높일수록 설정과 예외 상황이 늘어나 사용성이 떨어질 수 있으므로, 기능의 범위를 의도적으로 제한했다. - 새 버전은 단순한 UI 변경이 아니라, 초기의 단순한 모델을 유지하면서 더 다양한 반응형 레이아웃 요구를 수용하려는 설계 개선이다. Auto Layout을 설계할 때는 Flexbox처럼 검증된 레이아웃 모델을 참고하되, 사용자가 모든 내부 규칙을 학습하지 않아도 되도록 핵심 개념만 제공하는 것이 중요하다. 또한 실제 편집 환경을 반영한 프로토타입과 사용자 피드백을 통해 기능의 유연성과 조작의 직관성을 함께 검증해야 한다.