Figma

532 개의 포스트

figma2분 읽기큐레이션 요약

AI 시대에 갈고닦아야 할 5가지 디자인 기술 | 피그마 블로그

AI는 제품 제작을 가속하고 디자인 참여자의 범위를 넓히고 있으며, 이에 따라 디자이너에게 요구되는 역량도 변화하고 있다. Figma의 「State of the Designer 2026」 조사에 따르면 AI 활용 능력은 선택 사항이 아니라 디자이너와 비디자이너 모두에게 중요한 기본 역량이 되고 있다. 특히 명확한 프롬프트를 작성하고 AI를 반복 가능한 디자인 워크플로에 통합하는 능력이 핵심이다. ## AI 도구 활용 능력과 프롬프트 역량 - AI 활용 능력은 이제 디자이너 채용에서 필수에 가까운 기술로 자리 잡고 있다. - 디자이너의 91%는 AI가 더 나은 디자인을 만드는 데 도움이 된다고 답했고, 89%는 업무 속도가 빨라졌다고 답했다. - 채용 담당자의 54%는 AI를 활용한 디자인을 디자이너에게 가장 중요한 수요 기술 중 하나로 꼽았다. - AI 디자인 역량은 디자이너에게만 요구되지 않는다. - 채용 담당자의 57%는 PM, 개발자, 마케터 등 비디자인 직군에도 AI 활용 능력이 중요하다고 답했다. - 활용 사례는 다음과 같이 다양하다. - 기존 이미지의 세부 요소를 AI로 수정하기 - 코드를 직접 작성하기보다 AI로 앱 프로토타입 만들기 - 제품 요구사항 문서(PRD)보다 먼저 작동하는 프로토타입을 제작해 아이디어 검증하기 ## 프로토타입 중심의 협업 - AI 도구가 보편화되면서 역할 간 경계가 흐려지고, 다양한 직군이 직접 디자인과 프로토타이핑에 참여하고 있다. - 특히 제품 관리자는 문서로 요구사항을 설명하기보다 프로토타입을 만들어 가정을 빠르게 검증할 수 있다. - 구체적인 결과물을 조기에 공유하면 팀의 이해를 높이고, 의사결정을 빠르게 하며, 프로젝트 추진력을 확보할 수 있다. ## 구조화된 프롬프트 작성 - AI 결과물의 품질은 프롬프트의 명확성과 구조에 크게 좌우된다. - 효과적인 프롬프트는 다음 요소를 포함할 수 있다. - **작업(Task):** AI가 수행해야 할 구체적인 작업 - **맥락(Context):** 제품, 사용자, 사용 목적 등 배경 정보 - **요소(Elements):** 포함해야 할 화면·콘텐츠·기능 - **동작(Behavior):** 인터랙션과 상태 변화 - **제약 조건(Constraints):** 플랫폼, 스타일, 기술적 제한, 브랜드 규칙 - 좋은 프롬프트는 일회성 지시가 아니라 반복 가능한 작업 구조로 설계해야 한다. - 이를 통해 AI를 단순한 아이디어 생성기가 아니라 지속적인 디자인 협업 도구로 활용할 수 있다. ## 실용적인 적용 방향 AI 도구를 익힐 때는 단순히 다양한 기능을 시험하기보다, 작업 목적과 맥락·제약 조건을 포함한 프롬프트 템플릿을 먼저 만드는 것이 좋다. 또한 문서 작성 전에 프로토타입을 제작해 가정을 검증하고, AI가 만든 결과물을 디자이너의 판단과 검토를 거쳐 개선하는 방식이 효과적이다.

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

슬롯(Slots)으로

Figma의 ‘슬롯(slots)’은 컴포넌트의 구조와 연결 상태는 유지하면서 내부 콘텐츠를 자유롭게 바꾸는 기능이다. 이를 통해 디자이너는 컴포넌트를 분리(detach)하지 않고도 다양한 콘텐츠를 구성할 수 있으며, 디자인 시스템 관리자는 과도한 variants와 유지보수 부담을 줄일 수 있다. 글은 초기 사용자들의 사례를 바탕으로 슬롯을 효과적으로 도입하는 방법을 소개한다. ## 슬롯이 해결하는 디자인 시스템의 문제 - 디자인 시스템이 커질수록 일관성을 위한 제약이 표현의 자유를 제한할 수 있다. - 디자이너들은 이를 해결하기 위해 다음과 같은 우회 방법을 사용한다. - 컴포넌트 variants를 계속 추가 - 모든 가능한 상태를 고려해 숨겨진 레이어를 미리 포함 - 컴포넌트를 detach해 개별 수정 - 그 결과 라이브러리가 비대해지고, 디자인과 실제 코드 구현 사이의 연결도 약해진다. - 슬롯은 안정적인 컴포넌트 구조 안에 콘텐츠를 동적으로 삽입한다는 점에서 코드의 컴포넌트 구성 방식과 유사하다. ## 팀별 기대 효과 - **디자인 시스템 관리자** - variants 수와 유지보수 작업 감소 - 실제 제품 구조와 더 밀접하게 연결 - **디자이너** - 시스템 밖으로 나가지 않고도 콘텐츠와 표현을 자유롭게 조정 - 컴포넌트를 detach하지 않고 맞춤 구성 가능 - **개발자** - 코드로 구현되는 구조와 유사한 예측 가능한 디자인 전달 - 핸드오프와 구현 과정 단순화 - 슬롯은 자동화와 AI가 디자인 구조를 해석하는 데에도 유리한 형태를 제공한다. - Figma는 Schema 2025에서 슬롯을 공개했으며, 글 작성 시점에는 오픈 베타로 제공하고 있다. ## 1. 사용 빈도가 높은 컴포넌트부터 시작하기 - 슬롯 도입 효과가 가장 큰 대상은 이미 많은 사용자가 detach하고 있는 컴포넌트다. - 초기 사용자들이 우선 적용한 대표 컴포넌트는 다음과 같다. - 대화상자(dialog) - 메뉴와 드롭다운 - 모달 - 카드 - 패널 - 특히 다음 조건을 만족하는 컴포넌트를 우선순위로 삼는 것이 좋다. - 여러 화면에서 반복적으로 사용됨 - 시스템 안에서 중복되어 있음 - variants가 지나치게 많음 - 다양한 유형의 콘텐츠를 수용해야 함 ### 반복 요소가 있는 컴포넌트 - 메뉴와 리스트는 가능한 항목 수를 처리하기 위해 숨겨진 레이어를 다수 포함하는 경우가 많다. - 예를 들어 기본 리스트에 3개 항목을 표시하면서 7개 항목을 숨겨둘 수 있지만, 11번째 항목이 필요하면 결국 컴포넌트를 detach하게 된다. - 슬롯을 사용하면 필요한 항목만 추가할 수 있다. - 기본 컴포넌트가 불필요하게 커지지 않음 - 콘텐츠가 늘어나도 원래 컴포넌트와의 연결 유지 - 모든 가능한 항목 수를 variants로 미리 만들 필요 없음 ### variants가 급증하는 컴포넌트 - 모달과 카드는 제목, 설명, 미디어, 버튼 조합에 따라 수많은 variants가 생기기 쉽다. - 슬롯을 사용하면 구조는 그대로 유지하면서 필요한 콘텐츠만 교체하거나 삽입할 수 있다. - 따라서 구조는 일정하지만 콘텐츠가 자주 달라지는 컴포넌트에 특히 효과적이다. ## 2. 미리 채운 슬롯과 빈 슬롯을 목적에 맞게 사용하기 - 슬롯을 만들 때 기본 콘텐츠를 넣을지 비워둘지 결정해야 한다. - **미리 채운 슬롯** - 컴포넌트가 어떻게 사용되는지 보여주는 맥락을 제공한다. - 대부분의 사용자가 수정하지 않아도 되는 기본 상태를 표현할 수 있다. - 예를 들어 카드 오른쪽 위에 항상 아이콘이 있다면 매번 아이콘을 삽입하게 만들 필요가 없다. - **빈 슬롯** - 디자이너가 반드시 콘텐츠를 추가해야 한다는 점을 명확히 전달한다. - 사용자의 다음 행동을 유도하는 자리 표시자 역할을 한다. - 기존에 인스턴스 교체(instance swap)로 흉내 내던 패턴을 더 직접적으로 표현할 수 있다. - 기본 콘텐츠가 예측 가능한 경우에는 미리 채운 슬롯을, 콘텐츠 입력이 필수인 경우에는 빈 슬롯을 사용하는 것이 적절하다. ## 도입 시 고려할 기준 - 모든 컴포넌트에 한꺼번에 슬롯을 적용하기보다, 실제 우회 사용이 많이 발생하는 소수의 고빈도 컴포넌트부터 시작한다. - 구조는 유지되지만 콘텐츠가 자주 바뀌는 영역을 우선 찾는다. - 슬롯의 기본 콘텐츠가 사용자에게 충분한 맥락을 주는지, 혹은 빈 상태가 명확한 행동을 유도하는지 검토한다. - 이를 통해 디자인 시스템의 통제력은 유지하면서도 실제 제품에 필요한 유연성을 확보할 수 있다.

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

워크플로우 랩: Figma의

Trivet 팀은 추천 프로그램의 클릭과 가입을 늘리기 위해 기존 배너를 모달, 인피드 카드, 전체 화면 오버레이로 확장해 비교한다. 각 방향은 노출 강도뿐 아니라 이미지 처리와 시각적 톤을 다르게 설계하며, Figma의 AI 이미지 편집과 벡터화 기능을 활용해 빠르게 실험한다. 핵심 결론은 레이아웃을 만드는 데 그치지 않고, 사용자의 관심을 얼마나 끌면서도 경험을 방해하지 않을지 시각적 긴장감과 전환율을 함께 검증해야 한다는 것이다. ## 문제 정의: 더 많은 관심과 덜한 방해 사이 - Trivet의 추천 프로그램 배너는 기대만큼 클릭과 가입을 유도하지 못했다. - 팀은 배너가 너무 눈에 띄지 않는지, 반대로 팝업이 사용자 흐름을 지나치게 방해하는지 검토한다. - 세 가지 UX 방향을 비교한다. - **모달**: 사용자의 흐름을 잠시 중단시키는 방식 - **인피드 카드**: 피드 안에 자연스럽게 통합되는 방식 - **전체 화면 오버레이**: 가장 높은 가시성을 제공하는 방식 - 목표는 관심도를 높이되 사용자 경험을 훼손하지 않는 것이다. ## 방향 1: 유리 효과로 호기심 유발 - Trivet 디자인 시스템의 레시피 행 컴포넌트를 기반으로 몰입감 있는 모달을 구성한다. - “독점 레시피 잠금 해제”라는 문구에 맞춰, 레시피 이미지를 완전히 보여주지 않고 살짝 흐리게 처리한다. - Figma의 다음 효과를 사용한다. - **Glass 효과**: 반투명하고 서리 낀 표면 표현 - **Refraction**: 깊이감과 굴절감 추가 - **Progressive blur**: 가장자리를 부드럽게 흐림 처리 - 사용자가 보상을 바로 얻을 수는 없지만 눈앞에 있다는 느낌을 주어, 모달을 띄우는 불편함을 시각적 보상으로 상쇄한다. ## 방향 2: 인피드 카드에 개성 추가 - 사용자의 흐름을 끊지 않도록 추천 프로그램을 피드 내부 카드로 배치한다. - 제한된 공간에 맞춰 사진보다 가볍고 유연한 손그림 일러스트를 사용한다. - **Remove background**로 불필요한 배경을 제거한 뒤, **Vectorize**로 래스터 이미지를 편집 가능한 벡터로 변환한다. - 벡터화한 케이크 스케치를 다음과 같이 다듬는다. - Fill 패널의 변수 검색으로 브랜드 색상을 적용 - **Cut tool**로 경계를 정리하면서 기존 패스를 유지 - **Bounding box**를 활용해 앵커 포인트를 회전하고 세부 형태를 조정 - 결과적으로 손그림의 질감은 유지하면서도 색상과 크기를 자유롭게 조절할 수 있는 재사용 가능한 브랜드 자산을 만든다. ## 방향 3: 전체 화면 오버레이로 우선순위 강조 - 전체 화면 오버레이는 사용자 경험을 명확하게 중단시키며 추천 프로그램의 중요도를 강하게 전달한다. - 넓은 화면을 채우려면 사진 자체가 충분히 강한 시각적 존재감을 가져야 한다. - 선택한 사진은 품질은 좋았지만 레이아웃 비율이 맞지 않았고, 숟가락이 음식보다 눈에 띄는 문제가 있었다. - 대체 이미지를 찾거나 레이아웃을 억지로 조정하는 대신, Figma의 정밀 이미지 편집 기능으로 이미지를 디자인에 맞게 수정한다. - **Erase object**로 시선을 분산시키는 요소 제거 - **Expand image**로 필요한 비율과 구도에 맞게 이미지 확장 - 이 방식은 이미지 소스를 다시 찾는 시간을 줄이고, 디자인 의도에 맞춰 기존 자산을 즉시 변형할 수 있게 한다. ## 도구와 팀을 연결하는 워크플로 - 이 워크플로는 Figma Design, Figma Make, FigJam을 함께 사용한다. - 디자이너, 콘텐츠 디자이너, 제품 관리자, 성장 분석가, 엔지니어가 같은 문제를 중심으로 협업한다. - 이미지 편집, 벡터화, 변수 적용, 프로토타이핑을 별도 도구로 분리하지 않고 하나의 흐름에서 연결한다. - 아이디어를 시각화한 뒤 인터랙티브 프로토타입으로 검토하고, 팀 피드백과 실험 결과를 바탕으로 빠르게 완성하는 접근을 보여준다. 추천 프로그램처럼 전환율이 중요한 UI에서는 하나의 시안을 정답으로 가정하기보다, 노출 강도가 다른 여러 방향을 동시에 설계하는 것이 효과적이다. 특히 Figma의 이미지 편집·벡터화 기능을 활용하면 기존 자산을 재사용하면서도 모달, 카드, 오버레이에 맞는 시각적 변형을 빠르게 검증할 수 있다.

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

Codex와 Figma로 프론트

Codex와 Figma MCP 서버를 연결하면 디자인과 실행 중인 프론트엔드 UI를 양방향으로 오갈 수 있다. Figma의 디자인 정보를 Codex에 전달해 코드를 생성하고, 구현된 UI를 다시 편집 가능한 Figma 프레임으로 가져와 검토·협업·개선한 뒤 변경 사항을 코드에 반영하는 방식이다. 이를 통해 초기 디자인이나 코드에 고정되지 않고, 탐색과 구현을 반복하며 더 나은 제품을 만들 수 있다. ## Figma 디자인에서 앱 시작하기 - Figma MCP 서버는 **Figma Design, Figma Make, FigJam** 파일의 정보를 Codex에 전달한다. - 구현할 Figma 파일에서 원하는 프레임이나 노드를 우클릭한 뒤 **“Copy as → Copy link to selection”**을 선택한다. - 복사한 선택 URL은 단일 요소, 컴포넌트 묶음 등 특정 캔버스 영역을 가리키며, 에이전트가 코드 생성에 사용할 원본 데이터가 된다. - Codex에서 새 프로젝트나 기존 프로젝트를 선택하고 다음과 같은 방식으로 요청한다. - “이 Figma 디자인을 코드로 구현하고, 기존 디자인 시스템 컴포넌트를 최대한 활용해줘.” - Codex는 Figma MCP 서버의 `get_design_context` 도구를 호출해 다음 정보를 추출한다. - 레이아웃 구조 - 스타일 - 컴포넌트 정보 - 기타 디자인 관련 컨텍스트 - 이 정보를 바탕으로 Codex가 디자인에 맞는 UI 코드를 생성한다. ## 코드에서 Figma 캔버스로 가져오기 - 코드에서 UI를 구현하고 반복 수정한 뒤, 실행 중인 화면을 Figma로 가져와 시각적으로 비교하고 대안을 탐색할 수 있다. - 앱은 로컬 환경이나 공개 웹 서버에서 렌더링할 수 있다. - Codex에 새 Figma Design 파일을 생성하도록 요청하면 다음 과정을 안내한다. 1. 새 파일 또는 기존 파일 선택 2. 파일을 저장할 워크스페이스 선택 3. UI 캡처를 위한 애플리케이션 설정 4. 브라우저에서 앱 세션 열기 - Figma MCP 서버의 `generate_figma_design` 도구는 실행 중인 인터페이스를 편집 가능한 Figma 프레임으로 변환한다. ## UI 캡처 기능 앱이 다시 로드되면 화면 상단에 캡처 도구 모음이 표시된다. - **Entire screen**: 현재 표시된 전체 화면을 Figma 파일로 캡처 - **Select element**: 페이지에서 특정 컴포넌트나 요소만 선택해 캡처 - **Open file**: 생성된 디자인 레이어를 Figma에서 확인 캡처가 끝나면 Figma 파일을 바로 열거나 Codex로 돌아갈 수 있으며, Codex에는 해당 Figma 파일 URL이 전달된다. ## 캔버스에서 UI 개선하기 Figma로 가져온 실행 UI는 단순 이미지가 아니라 추가 편집과 협업이 가능한 디자인 자료로 활용된다. - 디자인 시스템 컴포넌트 추가 - 스타일, 글꼴, 색상을 변수로 전환 - 레이아웃 조정 및 주석 작성 - 인터랙션과 빈 상태 화면 설계 - 여러 UI 변형안과 탐색안 비교 - 팀원과 캔버스에서 공동 검토 수정이 끝나면 처음과 동일하게 프레임 또는 노드의 선택 URL을 복사해 Codex에 전달하고, Figma MCP 서버를 통해 변경된 디자인을 애플리케이션 코드에 반영할 수 있다. ## 디자인과 코드의 왕복 workflow - 디자인에서 시작해 Codex로 구현한다. - 실행 중인 UI를 Figma로 가져와 실제 결과를 검토한다. - Figma 캔버스에서 스타일, 컴포넌트, 레이아웃, 상태를 개선한다. - 변경된 디자인 컨텍스트를 다시 Codex로 보내 코드에 반영한다. - 이 과정을 반복하면서 속도를 유지한 채 프로토타입부터 실제 서비스 UI까지 발전시킬 수 있다. 실무에서는 먼저 Figma에 디자인 시스템과 핵심 화면을 정리한 뒤 Codex에 전달하고, 생성된 UI를 `generate_figma_design`으로 다시 캔버스에 가져와 시각적 차이를 검토하는 방식을 추천한다. 이를 통해 코드 구현과 디자인 의사결정을 분리하지 않고 하나의 반복 가능한 작업 흐름으로 통합할 수 있다.

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

디자인의 미래는 코드와

AI 시대의 디자인은 코드와 캔버스 중 하나를 선택하는 것이 아니라, 두 방식을 오가며 가능성을 탐색하는 방향으로 발전한다. Figma는 Claude Code와의 MCP 연동을 통해 코드로 만든 결과물을 편집 가능한 Figma 레이어로 변환하고, 디자인 수정 사항을 다시 코드에 반영하는 워크플로를 제시한다. 이를 통해 개발 과정에서 첫 번째 결과물에 매몰되지 않고 여러 대안을 시각적으로 비교·검토할 수 있다는 것이 글의 결론이다. ## 코드와 캔버스의 결합 - 제품을 만드는 방식은 코드, 프롬프트, 시각적 UI, 손그림 등 어디에서든 시작할 수 있다. - 중요한 것은 특정 도구를 고집하는 것이 아니라, 아이디어를 발전시키는 데 적합한 도구를 선택하는 것이다. - 코드는 빠르게 실행 가능한 결과물을 만들고, 캔버스는 다양한 가능성을 시각적으로 탐색하고 비교하는 데 강점이 있다. - 따라서 디자인과 개발은 경쟁 관계가 아니라 서로의 장점을 보완하는 관계가 된다. ## Claude Code와 Figma MCP 연동 - Figma MCP를 설치하면 Claude Code에서 “Send this to Figma”와 같은 명령으로 작업물을 Figma로 보낼 수 있다. - 브라우저에 렌더링된 현재 상태를 분석해 Figma의 편집 가능한 레이어로 자동 변환한다. - 코드로 구현된 화면을 단순 이미지로 가져오는 것이 아니라, Figma 안에서 요소를 개별적으로 수정할 수 있다. - Figma에서 다듬은 디자인 변경 사항은 다시 MCP를 통해 코드베이스에 반영할 수 있다. - Claude Code는 Figma MCP와 연결되는 여러 에이전트 도구 중 하나로 소개된다. ## 캔버스가 제공하는 탐색 능력 - IDE나 프롬프트 환경에서는 하나의 구현 방향을 빠르게 밀어붙이기 쉽다. - Figma 캔버스에서는 여러 디자인 시안을 나란히 배치해 차이점을 비교할 수 있다. - 전체 화면의 구조와 사용자 경험을 한눈에 파악하면서 세부 요소는 직접 조작해 수정할 수 있다. - AI가 표현 가능한 수많은 결과물을 만들어낼수록, 최종적으로 좋은 방향을 선택하는 디자인 감각과 관점이 더 중요해진다. ## 선형적 개발 프로세스의 변화 - 과거에는 일반적으로 아이디어 구상 → 디자인 → 코딩 순서로 작업이 진행됐다. - 이제는 터미널에서 구현을 시작한 뒤 디자인 도구로 이동하거나, Figma에서 시작해 코드로 넘어가는 등 순서가 고정되지 않는다. - 작업은 “어디서 시작하느냐”보다 “지금 올바른 방향으로 만들고 있는가”를 지속적으로 점검하는 것이 중요하다. - 첫 번째 구현물이 관성 때문에 최종 버전으로 굳어지는 ‘터널 비전’을 피해야 한다. ## 실용적인 적용 방향 - AI로 빠르게 만든 초기 구현물을 Figma로 가져와 여러 변형안을 비교한다. - 캔버스에서 레이아웃, 시각적 계층, 인터랙션 방향을 검토한 뒤 세부 디자인을 다듬는다. - 확정된 디자인 변경 사항을 MCP를 통해 코드에 다시 반영한다. - 코드와 디자인을 순차적으로 분리하기보다, 탐색 단계에서는 반복적으로 양쪽을 오가며 검증하는 것이 효과적이다.

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

Claude Code에서 Figma로: 프로덕

Claude Code에서 실행 중인 UI를 Figma로 가져와 편집 가능한 프레임으로 변환할 수 있게 되었다. 이를 통해 코드의 빠른 프로토타이핑과 Figma 캔버스의 협업·탐색 기능을 연결하고, 개발자·디자이너·PM이 동일한 결과물을 바탕으로 더 이른 시점에 의견을 나눌 수 있다. 핵심은 코드를 최종 결과로 고정하지 않고, Figma에서 여러 방향을 비교·발전시키는 것이다. ## 코드에서 캔버스로 확장하는 이유 - Claude Code를 사용하면 실제 데이터와 상호작용을 포함한 UI를 빠르게 구축하고 테스트할 수 있다. - 코드 기반 작업은 한 번에 하나의 상태를 구현하고 확인하는 데 강하다. - 반면 Figma 캔버스는 전체 흐름과 여러 대안을 한눈에 배치하고, 팀과 함께 논의하는 데 유리하다. - 따라서 코드는 아이디어를 빠르게 수렴시키고, 캔버스는 아이디어를 다시 확장하고 탐색하는 공간이 된다. ## 브라우저 화면을 편집 가능한 Figma 프레임으로 변환 - 프로덕션, 스테이징, 로컬호스트에서 실행 중인 UI를 캡처할 수 있다. - 캡처한 화면은 클립보드로 복사하거나 Figma 파일로 전송할 수 있다. - Figma에 붙여넣은 결과는 단순한 이미지가 아니라 정리·복제·수정 가능한 프레임으로 변환된다. - 여러 화면을 한 세션에서 캡처하면 화면 간 순서와 흐름도 함께 보존할 수 있다. ## 혼자 만드는 프로토타입에서 팀 협업으로 - 코드 우선 작업은 초기에는 빠르지만, 화면과 상태가 늘어나면 한 사람이 브랜치·개발 서버·전체 맥락을 모두 관리해야 한다. - 기존에는 피드백을 받기 위해 스크린샷이나 녹화 영상을 공유하거나, 다른 사람이 직접 로컬에서 빌드를 실행해야 했다. - Figma로 가져오면 팀원들이 같은 캔버스에서 직접 주석을 달고, 불명확한 부분을 표시하며, 개선 방향을 제안할 수 있다. - 다른 사람이 코드 환경으로 전환하거나 여러 파일을 수정하지 않아도 대안을 논의할 수 있다. ## 첫 번째 아이디어가 아닌 최선의 아이디어 찾기 - AI로 작동하는 프로토타입을 빠르게 만들 수 있게 되면서, 논의의 초점은 “어떻게 만들까”에서 “어떤 버전을 발전시킬까”로 이동했다. - Figma Make의 결과물을 캔버스로 가져오는 방식과 마찬가지로, Claude Code의 구현 결과도 편집 가능한 디자인 산출물로 전환된다. - 출발점이 Figma Make인지 Claude Code인지와 관계없이, 구체적인 결과물을 먼저 만든 뒤 반복적으로 발전시키는 것이 목표다. ## Figma에서 가능한 네 가지 탐색 - **전체 시스템을 시각적으로 확인** - 여러 화면과 단계별 흐름을 나란히 배치할 수 있다. - 반복되는 패턴, 누락된 단계, 디자인 불일치, 트레이드오프를 쉽게 발견할 수 있다. - **코드를 다시 작성하지 않고 변형 실험** - 프레임을 복제하고 순서를 재배치하며 구조적 대안을 비교할 수 있다. - 단순한 아이디어 검증을 위해 코드를 다시 구현할 필요가 없다. - 폐기한 대안도 남겨둘 수 있어 이후 재검토가 가능하다. - **더 이른 시점에 의사결정** - 디자이너, 엔지니어, PM이 동일한 맥락과 완성도의 결과물을 함께 검토한다. - 정답이 명확하지 않은 문제도 초기에 질문과 쟁점을 드러낼 수 있다. - 변경 비용이 낮을 때 방향을 조정할 수 있다. - **구현된 UI를 팀의 방향성으로 전환** - 실제로 작동하는 UI를 개인의 코드 환경에만 머무는 결과물이 아니라 공유 가능한 디자인 자산으로 만든다. - 팀은 구현 결과를 기준으로 제품의 사용감, 사용자 안내 방식, 가치 전달 방법을 함께 논의할 수 있다. ## 실용적인 결론 Claude Code는 빠른 구현과 실제 동작 검증에 사용하고, 방향을 비교하거나 팀의 피드백을 모을 때는 결과물을 Figma로 가져오는 방식이 효과적이다. 특히 여러 화면으로 구성된 사용자 흐름이나 대안 비교가 필요한 작업에서는 코드와 캔버스를 오가는 과정이 초기 의사결정과 협업을 크게 단순화할 수 있다.

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

디자이너의 현주소 2026: 디자이너들은 복잡한 중간 지대에 뛰어들고 있다 | Figma 블로그

디자인 업계는 AI로 인해 빠르게 변하고 있지만, 디자이너들은 불확실성을 피하기보다 AI를 실무에 통합하며 새로운 기회로 전환하고 있다. 조사에 따르면 AI는 작업 속도와 협업뿐 아니라 디자인 품질도 높이며, 인간 고유의 세심한 완성도와 창의적 판단인 ‘크래프트’의 중요성은 오히려 커지고 있다. 조직이 디자인의 우수성을 중시할수록 디자이너의 만족도와 기업 성과도 함께 높아진다는 것이 글의 결론이다. ## 조사 배경과 디자이너들이 처한 변화 - Figma는 NewtonX와 함께 북미, APAC, 유럽, LATAM, 중동의 디지털 디자이너 906명을 조사했다. - 설문은 영어, 스페인어, 프랑스어, 이탈리아어, 포르투갈어, 일본어, 한국어로 진행됐다. - 디자이너들은 AI 도입으로 업무 방식이 흔들리고 있지만, 단순히 산출물의 양만 늘리는 것이 아니라 더 빠르고 높은 품질의 결과물을 만들고 있다고 응답했다. - 글은 이러한 불확실성과 낙관이 공존하는 상태를 디자이너들이 변화의 ‘어수선한 중간 단계(messy middle)’를 지나고 있는 상황으로 묘사한다. ## AI가 작업 속도와 품질을 함께 높이다 - 91%의 디자이너가 AI 도구가 디자인을 개선한다고 답했다. - 89%는 AI 덕분에 더 빠르게 일할 수 있다고 응답했다. - 80%는 협업이 개선됐다고 답했으며, 대부분은 AI 도구가 업무를 늦춘다고 생각하지 않았다. - AI는 반복 작업과 워크플로 최적화를 지원해 디자이너가 더 많은 결과물을 출시하고, 영향력이 큰 아이디어에 시간을 쓸 수 있게 한다. - AI를 적극 활용하는 디자이너는 그렇지 않은 디자이너보다 직업 만족도가 25% 높았다. - 이들은 자신의 업무가 비즈니스 성과와 기업 성장에 기여한다고 느낄 가능성도 더 높았다. - 따라서 AI는 디자이너의 역할을 대체하는 도구라기보다, 디자이너가 더 빠르게 실험하고 중요한 판단에 집중하도록 돕는 도구로 제시된다. ## 크래프트는 인간적인 차별점이다 - 누구나 AI로 프롬프트를 작성해 프로토타입을 만들 수 있는 환경에서는 제품을 구별하는 요소로 디자인의 완성도와 의도성이 중요해진다. - 조사에서 디자이너들이 생각하는 크래프트의 의미는 다음과 같았다. - 시각적 완성도: 58% - 사려 깊은 문제 해결: 47% - 명확하고 직관적인 UX: 36% - 감정과 즐거움을 주는 경험: 35% - 제품 전반의 일관성: 15% - 한 응답자는 크래프트를 “기술, 디테일, 의도적인 노력이며, 배려와 정밀함, 예술성을 담아 만드는 것”이라고 설명했다. - 시각적 완성도나 감정적 경험처럼 결과물에서 바로 드러나는 요소는 리더나 사용자에게 인정받기 쉽다. - 반면 어려운 문제를 해결하거나 복잡한 트레이드오프를 조정하는 전술적 작업은 중요하더라도 외부의 인정을 덜 받을 수 있다. ## 조직의 디자인 투자와 성과 - 경영진이 디자인의 우수성을 중시하는 조직의 디자이너는 그렇지 않은 조직보다 자신의 일에 만족할 가능성이 약 2배 높았다. - 크래프트를 중요하게 여기는 팀은 더 높은 사기, 빠른 비즈니스 성장, 명확한 추진력을 보고했다. - 디자인에 대한 지원과 투자가 늘어난 조직일수록 성장 속도와 디자이너의 낙관적 전망이 함께 높아졌다. - 효과적인 투자는 다음을 포함한다. - 리더십 차원의 디자인 품질 지원 - 디자이너의 역량 개발 기회 제공 - 좋은 작업에 대한 공식적 인정과 보상 - 이는 개인의 창의성만으로 품질을 유지하기보다, 조직 차원에서 높은 기준을 뒷받침해야 한다는 점을 보여준다. AI를 도입할 때는 단순히 생산량을 늘리는 데 집중하기보다 반복 작업을 자동화하고, 디자이너가 문제 정의·사용자 경험·감정적 완성도·최종 품질 판단에 더 많은 시간을 쓰도록 설계하는 것이 바람직하다. 또한 디자인 품질을 평가하고 인정하는 조직 문화를 함께 구축해야 AI의 속도와 인간의 크래프트를 모두 살릴 수 있다.

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

디자이너 수요가 증가하는 이유 | Figma 블로그

AI 시대에 기업의 디자이너 수요는 감소하기보다 오히려 다시 증가하고 있다. Figma의 조사에서 82%의 디자인 리더가 디자이너 수요가 증가했거나 유지됐다고 답했으며, AI 도구 활용과 AI 제품 설계 역량이 채용의 중요한 기준으로 떠올랐다. 특히 빠르게 성장하는 기업일수록 디자인을 제품 차별화와 매출 성장을 이끄는 전략적 기능으로 보고 더 적극적으로 채용하고 있다. ## 기술 산업을 넘어 증가하는 디자인 채용 - 조사 대상 리더의 **82%**는 조직의 디자이너 수요가 증가했거나 현재 수준을 유지하고 있다고 답했다. - 약 **47%**는 수요가 증가했다고 응답했다. - 수요가 증가한 기업 중 다수는 최소 **10% 이상** 증가했다고 답했으며, 25% 이상 증가한 기업도 상당수였다. - 기술 기업이 채용을 주도하지만, 디자인 수요는 다양한 산업으로 확산되고 있다. - 북미의 비기술 기업도 디자인 인력을 적극적으로 채용하는 편이다. - 유통, 출판, 항공 등은 디지털 접점을 강화하고 고객 경험을 개선하기 위해 디자이너를 필요로 한다. - 기업 성장률이 높을수록 디자인 채용 의향도 높았다. - 업계 평균보다 빠르게 성장하는 기업의 **46%**가 향후 6개월 내 채용 확대를 계획했다. - 평균 성장 기업은 **40%**, 성장 속도가 느린 기업은 **33%**였다. - 고성장 기업은 디자인을 단순한 시각적 완성도가 아니라 다음과 같은 전략적 수단으로 인식한다. - 아이디어를 더 빠르게 검증 - 전략을 실제 제품으로 전환 - 경쟁사와 차별화 - 고객 기대에 대응하고 매출 창출 - 채용 시장에 대한 체감은 아직 낙관적이지 않다. - 전체 채용 환경이 개선되고 있다고 보는 채용 관리자는 **20%**에 그쳤다. - 그러나 2025년 디자인 직무 채용 공고는 일부 디자인 중심 벤처캐피털 포트폴리오에서 전년 대비 약 **60% 증가**했다. - 향후 6개월 내 추가 인력을 채용하려는 관리자는 **40%**였다. ## AI가 디자이너 수요를 촉진하는 이유 - AI 모델과 도구가 빠르게 발전하면서 기업은 새로운 업무 방식에 즉시 적응할 수 있는 디자이너를 찾고 있다. - 기업이 요구하는 역량은 두 방향으로 확대되고 있다. - AI 도구를 디자인 업무에 활용하는 능력 - AI 기반 제품과 서비스를 설계하는 능력 - 채용 관리자의 **73%**는 AI 도구 숙련도에 대한 수요가 증가했다고 답했다. - **79%**는 AI 제품을 설계할 수 있는 지식의 중요성이 커졌다고 응답했다. - AI 역량은 더 이상 선택적인 우대 조건이 아니라 필수 요건에 가까워지고 있다. - 특히 기업은 다음 역량을 결합한 인재를 선호한다. - 기술적 이해도 - 전략적 사고 - 창의적이고 틀을 벗어난 문제 해결 - 인간이 개입하는 human-in-the-loop 방식에 대한 이해 - 인간의 판단을 보완하는 human-augmented AI 활용 능력 - 따라서 AI 시대의 디자이너는 AI 제품의 사용자 경험을 설계하는 동시에, 자신의 디자인 프로세스에도 AI를 효과적으로 통합해야 한다. ## 기업이 시니어 디자이너를 우선하는 배경 - 글은 다음 섹션에서 기업들이 **시니어 인재를 우선적으로 채용하는 현상**을 다룬다. - 공개된 내용에 따르면, 빠른 실행이 요구되는 환경에서 기업은 단순한 제작 능력보다 다음과 같은 역량을 갖춘 디자이너를 중시하고 있다. - 높은 수준의 판단력 - 복잡한 문제를 해결하는 경험 - 빠르게 변화하는 프로젝트를 주도하는 능력 - 다만 제공된 글은 이 섹션의 문장이 중간에서 끝나 있어, 시니어 인재에 대한 구체적인 조사 수치와 세부 근거는 확인할 수 없다. 디자이너는 시각 디자인 툴 숙련도만 강화하기보다 AI 도구를 실제 업무에 적용하고, AI 제품의 작동 방식과 사용자 경험을 함께 이해하는 역량을 갖추는 것이 유리하다. 또한 빠르게 성장하는 조직이 요구하는 전략적 사고와 제품 개발 전반의 판단력을 함께 키우는 것이 향후 채용 경쟁력을 높이는 방법이다.

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

장인 정신을 담아: Figma

Figma의 **Vectorize**는 래스터 이미지를 편집 가능한 벡터로 변환하는 AI 이미지 편집 도구다. 손그림, 사진으로 찍은 질감, 손글씨 등을 Figma 안에서 바로 벡터화해 크기·형태·색상·구성을 수정할 수 있어, 별도 도구로 재작업하거나 처음부터 다시 그리는 과정을 줄여준다. 이를 통해 원본의 개성을 유지하면서도 다양한 디자인에 재사용 가능한 자산으로 발전시킬 수 있다. ## 래스터 그림을 편집 가능한 벡터로 변환 - Figma Design 또는 Figma Draw에 이미지 파일을 드래그 앤 드롭한 뒤 **Vectorize**를 실행한다. - 연필 스케치나 손으로 그린 일러스트가 편집 가능한 벡터 일러스트로 변환된다. - 변환 후 크기, 형태, 배치, 전체 구성을 Figma 캔버스에서 직접 조정할 수 있다. - **Recolor** 슬라이더를 사용하면 색상과 도형을 단순화해 관리하기 쉬운 결과물을 만들 수 있다. - Figma의 **색상 변수(Color variables)**를 적용해 브랜드 색상이나 여러 디자인 테마에 맞게 팔레트를 일괄 변경할 수 있다. - 결과물은 일회성 이미지가 아니라, 여러 디자인에서 계속 수정하고 재사용할 수 있는 살아 있는 디자인 자산이 된다. ## 손글씨와 레터링을 로고로 발전시키기 - 종이에 쓴 글씨, 캘리그래피, 콜라주로 만든 문자를 사진이나 스캔 이미지로 Figma에 가져온다. - Vectorize를 실행하면 글자의 선과 곡선이 편집 가능한 벡터 형태로 변환된다. - 변환된 각 글자의 앵커 포인트를 조정해 획의 모양, 곡선, 글자 간격을 세밀하게 다듬을 수 있다. - **Remove background**로 불필요한 배경을 제거할 수 있다. - 바운딩 박스를 사용해 개별 글자를 이동하거나 크기를 조절하고, 색상을 변경해 로고나 타이포그래픽으로 발전시킬 수 있다. - 완성된 레터링은 커버 아트, 인터페이스, 브랜드 그래픽 등 다양한 맥락에 맞게 확대·변형해 사용할 수 있다. ## 기존 AI 이미지 편집 도구와의 연계 - Vectorize는 Figma의 기존 AI 이미지 편집 도구군에 추가된 기능이다. - 함께 소개된 기능으로는 **배경 제거(Remove background)**, **객체 지우기(Erase object)**, **이미지 확장(Expand image)**이 있다. - 이미지를 벡터화한 뒤 배경을 제거하거나 색상을 바꾸는 식으로 여러 편집 기능을 연속해서 적용할 수 있다. - 별도의 그래픽 편집 프로그램으로 파일을 옮기지 않고 Figma 안에서 작업을 이어갈 수 있다는 점이 핵심이다. ## 창작 과정의 개성을 유지하는 작업 방식 - 초기 아이디어가 노트의 스케치나 휴대폰으로 찍은 이미지처럼 비정형적인 형태로 시작해도 그대로 디지털 작업에 활용할 수 있다. - 기존 방식처럼 이미지를 다시 그리거나 여러 도구 사이를 오갈 필요가 줄어든다. - 원본의 손맛과 표현을 유지하면서도 벡터의 확장성, 편집성, 재사용성을 확보할 수 있다. - 한 번 변환한 결과물을 브랜드 시스템이나 여러 화면 디자인에 맞게 지속적으로 발전시킬 수 있다. 실무에서는 손그림이나 손글씨를 먼저 자연스럽게 만든 뒤 Vectorize로 변환하고, 불필요한 배경 제거와 색상 변수 적용을 거쳐 브랜드 자산으로 정리하는 방식이 유용하다.

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

피그마, C (새 탭에서 열림)

피그마(Figma)는 독일 연방정보보안청(BSI)이 제정한 클라우드 컴퓨팅 준수 기준인 C5 인증을 획득하며 DACH 지역(독일, 오스트리아, 스위스)의 보안 및 규정 준수 역량을 강화했습니다. 이번 인증은 피그마의 정보 보안, 리스크 관리, 운영 투명성이 엄격한 요구 사항을 충족함을 독립적으로 입증한 결과입니다. 이를 통해 규제가 까다로운 공공 및 금융 부문 기업들이 피그마의 클라우드 서비스를 더욱 신뢰하고 협업 도구로 채택할 수 있는 토대를 마련했습니다. ### C5 인증의 의미와 보안 표준 * C5(Cloud Computing Compliance Criteria Catalogue)는 클라우드 서비스의 보안성, 가용성, 기밀성을 평가하기 위해 BSI가 개발한 공신력 있는 표준입니다. * 피그마는 이제 BSI C5 레지스트리에 등재되어, 고객이 피그마의 보안 제어 및 운영 관행을 직접 확인하고 가시성을 확보할 수 있게 되었습니다. * 이번 인증 획득은 피그마가 단순한 디자인 도구를 넘어 정보 보안과 리스크 관리에 있어 글로벌 수준의 엄격한 기준을 준수하고 있음을 의미합니다. ### DACH 지역 및 규제 산업으로의 확장 * 현재 독일 DAX 40 기업의 약 90%가 피그마를 사용 중이며, 이번 인증을 통해 이들 기업과의 파트너십이 더욱 공고해질 것으로 기대됩니다. * 특히 엄격한 규제가 적용되는 정부 기관, 공공 부문, 금융 산업의 조직들이 내부 보안성 검토 및 승인 절차를 이전보다 훨씬 수월하게 진행할 수 있게 되었습니다. * 피그마는 이를 위해 독일어 현지화 서비스를 완비했으며, 엔터프라이즈 고객이 데이터를 유럽 연합(EU) 내에 로컬로 저장할 수 있는 옵션을 제공하는 등 지역 특화 투자를 지속하고 있습니다. 보안 요구 사항이 높은 유럽 시장이나 이와 유사한 글로벌 보안 표준을 준수해야 하는 기업은 피그마의 C5 인증을 보안 검토의 핵심 지표로 활용할 수 있습니다. 데이터 주권과 운영 투명성을 중시하는 엔터프라이즈 환경에서 피그마는 더욱 안전하고 신뢰할 수 있는 클라우드 협업 선택지가 될 것입니다.

figma4분 읽기큐레이션 요약

디자인 시스템을 위한 새로운

디자인 시스템은 더 이상 단순한 UI 컴포넌트 라이브러리가 아니라 매출 성장, 고객 충성도, 글로벌 확장, 제품 전략을 지원하는 비즈니스 자산이다. DXC 연구에 따르면 그 가치는 작업 효율뿐 아니라 고객 만족도·유지율·브랜드 경험·시장 확장성과 같은 경영 지표로도 측정할 수 있다. 따라서 디자인 시스템 팀은 재작업 감소보다 고객과 사업에 미친 구체적인 영향을 중심으로 투자 가치를 설명해야 한다. ## 생산성 중심에서 사업 성과 중심으로 - 기존에는 디자인 시스템의 ROI를 다음과 같은 운영 효율로 설명하는 경우가 많았다. - 재작업 감소 - 디자인·개발 핸드오프 단축 - 제품 제작 속도 향상 - 여러 팀 간 일관성 유지 - 그러나 현재 기업들은 디자인 시스템을 다음과 같은 전략적 목표에 활용한다. - 제품 포트폴리오 확장 - 고객 유지율과 충성도 개선 - 글로벌 시장 진출 - 제품 완성도와 브랜드 경험 향상 - 경우에 따라 매출 성장 측정 - 핵심은 디자인 시스템의 활동 자체가 아니라, 그 결과가 사업 지표에 어떤 변화를 만들었는지 연결하는 것이다. ## 고객 성과와 디자인 시스템의 연결 - 기업이 이미 관리하는 고객 지표를 디자인 시스템의 성과 측정 기준으로 활용할 수 있다. - 제품 도입률 - 유지율 - 참여도 - 고객 만족도 - 작업 완료율과 문제 해결 시간 - Freshworks는 새로운 디자인 시스템 도입 이후 고객 서비스 비용을 28% 줄이고 지원 티켓의 해결 시간을 개선했다고 설명한다. - SAP는 앱 내 설문을 통해 사용자 데이터 100만 건 이상을 수집하고, 이를 디자인 시스템 개선에 반영한다. - Freshworks는 온보딩 과정에서 사용자가 어디서 시작해야 할지 어려워한다는 피드백을 바탕으로 새로운 개선 작업을 추진했다. - 고객 경험 개선을 위해 다음 데이터를 활용한다. - CSAT 점수 - A/B 테스트 - 전환 퍼널 분석 - 온보딩 과정의 마찰 지점 - 이런 방식은 디자인 시스템이 단순히 컴포넌트를 제공하는 조직이 아니라, 고객의 불편을 발견하고 제품 경험을 개선하는 체계가 되도록 한다. ## 기업 가치와 제품 품질의 확장 - 디자인 시스템은 기업이 만든 브랜드와 제품 원칙을 여러 팀과 제품에 확산하는 수단이다. - Linear는 디자인 시스템을 통해 ‘완성도 높은 제품을 만든다’는 기업 가치를 규모가 커진 조직에서도 유지하고 있다. - Linear의 접근 방식은 엄격한 규칙과 수치만을 따르기보다 제품이 의도적으로 설계된 것처럼 느껴지는지를 중요하게 본다. - 이를 위해 디자인 시스템을 고정된 규격집이 아닌 살아 있는 시스템으로 운영한다. - 필요에 따라 컴포넌트를 업데이트 - 다양한 상황에 대응할 수 있도록 유연성 확보 - 품질 기준은 유지하되 제품 맥락에 따른 예외 허용 - 결과적으로 높은 제품 완성도는 사용자 경험을 차별화하고, 고객 충성도와 순매출 유지율에 영향을 줄 수 있다. ## 글로벌 확장을 지원하는 설계 기반 - 글로벌 확장에서 디자인 시스템의 역할은 제작 속도를 높이는 것에 그치지 않는다. - 여러 지역에서 일관된 브랜드 경험 제공 - 각 시장의 문화와 언어에 맞는 인터페이스 구현 - 다양한 하드웨어와 화면 크기 지원 - 브랜드별 고유성 유지 - 현대자동차그룹은 현대·기아·제네시스 3개 브랜드의 30개 이상 차량 모델을 하나의 일관된 기반으로 확장하면서도 각 브랜드의 정체성을 유지하려 한다. - Grammarly는 초기부터 현지화를 디자인 시스템 전략에 포함했다. - 사내 언어 전문가를 채용해 문화적 뉘앙스 반영 - 오른쪽에서 왼쪽으로 읽는 언어의 가독성 고려 - 언어별 레이아웃과 표현 차이를 시스템 입력값으로 관리 - 북미, 한국, 폴란드에 분산된 팀은 공통 디자인 시스템을 기반으로 지역별 차이를 조정한다. - 현대자동차그룹의 42dot은 다국어 UX를 검증하기 위해 맞춤형 Figma 플러그인도 활용한다. ## 디자인 시스템의 성과를 입증하는 방법 - 경영진이 중요하게 여기는 기존 비즈니스 지표와 디자인 시스템의 활동을 직접 연결해야 한다. - 예를 들어 다음과 같이 측정할 수 있다. - 디자인 변경 후 고객 만족도 변화 - 온보딩 퍼널의 이탈률 감소 - 지원 문의와 고객 서비스 비용 감소 - 기능 출시 기간 단축 - 글로벌 출시 시 지역별 일관성 및 현지화 품질 - 고객 유지율과 순매출 유지율 변화 - 정성적 사례와 정량적 데이터를 함께 제시하면 디자인 시스템의 기여도를 더 설득력 있게 설명할 수 있다. - 단순히 “컴포넌트를 몇 개 만들었는가”보다 “고객의 문제를 얼마나 줄였고 사업 결과를 어떻게 개선했는가”가 중요한 평가 기준이다. 디자인 시스템 팀은 운영 효율을 기본 성과로 제시하되, 고객 만족도·유지율·비용·매출·글로벌 확장성과 연결된 지표를 함께 관리하는 것이 좋다. 또한 시스템을 경직된 규칙 모음이 아니라 브랜드 가치와 사용자 피드백을 지속적으로 반영하는 살아 있는 제품으로 운영해야 한다.

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

제14호: 소프트웨어는

소프트웨어는 기능을 제공하는 도구를 넘어 사람들이 생각하고 말하고 관계 맺고 문화를 형성하는 방식에 영향을 준다. AI가 소프트웨어 제작의 동료로 발전하면서, 소프트웨어는 인간의 필요와 문화적 맥락에 더욱 밀착될 전망이다. 이 글은 디자인, 언어, 게임, 음식, 제조 사례를 통해 소프트웨어와 문화가 서로를 어떻게 변화시키는지 보여준다. ## 소프트웨어와 문화의 결합 - 배달 주문, 인간관계 형성, 의미 추구 등 소프트웨어는 일상생활의 거의 모든 영역에 관여한다. - AI는 단순한 도구를 넘어 소프트웨어 제작 과정의 협업자 또는 동료로 자리 잡고 있다. - 기술을 만드는 사람뿐 아니라 사회 전체가 소프트웨어의 문화적 영향력을 이해해야 한다는 문제의식을 제시한다. ## 디자인은 문화다 - 핀치 투 줌, 무한 스크롤, 좋아요 탭과 같은 상호작용은 오늘날 자연스럽지만, 처음에는 낯선 새로운 동작이었다. - 이러한 인터랙션은 단순한 사용성 개선을 넘어 한 세대의 사고방식과 감정, 디지털 습관을 형성했다. - 과거의 대표적인 인터페이스 10가지를 돌아보며, 앞으로 등장할 디자인 역시 문화적 행동 양식을 바꿀 수 있음을 강조한다. ## 언어는 문화다 - “6-7”, “aura”, “rizz” 같은 표현은 소셜 미디어를 통해 빠르게 확산된 신조어의 사례다. - 알고리즘은 어떤 표현이 더 많이 노출되고 유행하는지를 결정하면서 사람들이 사용하는 언어에도 영향을 미친다. - 언어는 단순히 소통 수단에 그치지 않고, 사람들이 세상을 이해하고 서로 관계 맺는 방식까지 바꾼다. - 언어학자 애덤 알렉식은 이러한 현상을 ‘알고스피크(algospeak)’와 연결해 설명한다. ## 게임은 문화다 - 비디오게임은 단순한 오락을 넘어 1,840억 달러 규모의 복잡한 산업으로 성장했다. - 다양한 게임 모드, 캐릭터, 사이드 퀘스트를 제공하면서도 플레이어는 여전히 몇 개의 버튼으로 구성된 컨트롤러를 사용한다. - 제한된 입력 장치가 복잡한 가상 세계를 탐색하게 만드는 방식은 인터페이스 설계의 중요한 원리를 보여준다. - 에픽게임즈 디자이너 아슈레이 샤르마는 게임 컨트롤러의 발전이 차세대 소프트웨어 인터페이스에 줄 수 있는 시사점을 설명한다. ## 음식과 소프트웨어의 결합 - 캐나다 브리티시컬럼비아에서는 매주 한 명꼴로 농부가 사업을 접할 정도로 소규모 농가가 어려움을 겪고 있다. - 창업자 애런 베일은 지역 농부와 식당을 연결하는 마켓플레이스 앱을 구상했다. - 전통적인 방식이라면 MVP 제작을 위해 개발팀을 구성해야 했지만, Figma Make를 활용해 프롬프트 중심으로 앱을 만들었다. - 그 결과 3주 이내에 실제 작동하는 서비스 형태를 구현하며, AI 기반 제작 도구가 사회적 문제 해결의 진입장벽을 낮출 수 있음을 보여준다. ## 제조와 디지털 디자인의 연결 - 디자이너 켈시 페어허스트는 손으로 직접 만드는 작업에 매력을 느낀 뒤 금속 가공 기술을 연구했다. - 브루클린의 스튜디오와 클리블랜드의 제작 공장을 오가며 ‘소프트라인 브루탈리스트’ 스타일의 스테인리스 식기를 개발했다. - 프로젝트 ‘Forks Plus’는 디지털 디자인 도구와 물리적 제작 과정이 결합된 사례다. - 소프트웨어는 화면 속 결과물만 만드는 도구가 아니라, 실제 제품과 제작 문화를 실현하는 기반이 될 수 있다. 소프트웨어를 설계할 때는 기능과 효율성만이 아니라 사용자의 언어, 습관, 감정, 사회적 맥락까지 고려해야 한다. 특히 AI 제작 도구가 확산될수록 누구나 문화와 사회에 영향을 주는 제품을 만들 수 있으므로, 빠른 구현만큼 그 영향과 책임을 함께 검토하는 것이 중요하다.

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

메이커를 만나다:

Kelsey Fairhurst는 기차 여행 중 직접 만든 아크릴 포크를 계기로, 조각적 형태와 과장된 하드웨어를 특징으로 하는 스테인리스 스틸 식기 브랜드 Forks Plus를 시작했다. 그녀는 CNC 가공, 레이저 커팅, 유압 프레스, 분체도장 등 다양한 제조 공정을 직접 익히고 지역 제조업체와 협업하며 소규모 생산 체계를 구축했다. 초기에는 포크 하나의 일부 공정에만 46분이 걸렸지만, 반복적인 실험과 공정 개선을 통해 현재는 하루에 손잡이 250개를 가공하고 포크 한 개를 약 30분 만에 완성한다. ## 여행용 포크에서 브랜드로 - 2019년 브루클린에서 뉴헤이븐으로 이동하던 중, 덮개를 분리할 수 있는 여행용 포크가 필요해졌다. - 귀가 후 메이커스페이스에서 보라색 아크릴판을 레이저 커팅해 포크를 만들면서 제품 제작에 몰입하게 됐다. - 기존에 운영하던 빈티지 식기 큐레이션 활동과 비스트로 스타일 식기에 대한 관심이 Forks Plus로 확장됐다. - 브랜드는 ‘소프트라인 브루털리즘’을 지향하며, 조각적인 실루엣과 두꺼운 하드웨어, 선명한 색상의 손잡이를 결합한다. ## 소규모 제조를 위한 학습과 협업 - 미국 내 플랫웨어 제조업체가 사실상 한 곳만 남은 상황에서, 대량생산이 아닌 소규모 생산 방식을 스스로 개척해야 했다. - 약 1년 동안 인터넷 검색으로 가공 기술과 제조업체를 조사하고, 기계공·분체도장 공장 등에 직접 콜드 이메일을 보냈다. - 오하이오의 Servo Products를 운영하는 Garry Yarowski를 만나 CNC 장비 운용과 제조 기술을 배웠다. - Garry가 제작한 벤치톱 CNC 머신을 반복적으로 배우며 생산에 필요한 장비와 공정을 마련했다. ## CNC와 G-code를 활용한 정밀 가공 - CNC 머신은 사전 입력된 소프트웨어 명령에 따라 소재를 자르고 성형하는 장비다. - G-code는 CNC와 레이저 커터의 이동 거리, 방향, 속도를 지정하는 기계 제어 언어다. - 손잡이에 리벳이 표면과 flush하게 들어가도록 약 0.05인치 깊이의 카운터보어를 가공해야 했다. - 초기에는 잘못된 코드나 각도 때문에 300달러짜리 카바이드 공구가 깨지는 등 비용이 큰 시행착오를 겪었다. - 리벳 구멍 두 개를 가공하는 데 46분이 걸렸지만, 2년 반의 개선 끝에 1분 이내로 단축됐다. - 현재는 하루에 손잡이 250개를 처리할 수 있다. ## 레이저 커팅부터 조립까지의 생산 공정 - 공장에서 스테인리스 스틸 원판을 레이저로 절단하면, 브루클린 스튜디오에서 후가공을 진행한다. - 벨트 그라인더로 절단 과정에서 생긴 탭과 돌출부를 제거하고 거친 모서리를 다듬는다. - 20톤 수동 유압 프레스로 포크와 스푼의 사용 부분을 금형 성형한다. - 금형은 파트너 Bryant Wells가 3D CAD 프로그램으로 설계했다. - 스페인산 장비로 나이프의 톱니 모양 날을 가공한다. - 손잡이 분체도장과 광택 작업처럼 특수 장비가 필요한 공정은 지역 전문 업체에 맡긴다. - 초기에는 일부 공정만으로도 오랜 시간이 걸렸지만, 현재 고급 포크 한 개의 전체 제작 시간은 약 30분이다. ## 물리적 제작 방식과 디지털 디자인의 연결 - Kelsey는 제조뿐 아니라 웹사이트, 이메일, 소셜 미디어 마케팅 자료도 Figma로 직접 디자인한다. - 그녀는 Figma가 다른 프로그램보다 손으로 직접 만지는 듯한 작업감을 제공한다고 설명한다. - Bryant Wells는 3D CAD를 이용해 생산용 금형을 설계했으며 Forks Plus 웹사이트도 제작했다. - 이 사례는 제품의 물리적 형태를 만드는 제조 과정과 브랜드의 디지털 표현을 하나의 창작 흐름으로 연결한다. 작은 제조 브랜드를 시작할 때는 모든 공정을 직접 수행하기보다, 핵심 기술은 반복적으로 개선하고 분체도장·연마처럼 전문 장비가 필요한 작업은 지역 파트너와 분담하는 방식이 현실적이다. Forks Plus의 사례는 값비싼 장비와 긴 시행착오도 정밀한 기록과 공정 개선을 통해 소규모 생산 체계로 전환할 수 있음을 보여준다.

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

프로토타입은

제품 관리자는 정적인 PRD를 작성해 검토받는 대신, 초기 아이디어를 인터랙티브한 프로토타입으로 구현하며 문제를 더 빠르게 이해하고 팀의 합의를 이끌어낼 수 있다. Figma는 Figma Make를 활용하면 불확실한 문제를 탐색하고 여러 해결책을 비교하며, 실제 디자인 시스템에 가까운 결과물로 가설을 검증할 수 있다고 설명한다. 따라서 프로토타입은 단순한 시각 자료를 넘어 의도와 동작을 보여주는 새로운 형태의 PRD로 자리 잡고 있다. ## 제품 관리자의 역할 변화 - 기존에는 PM이 요구사항 문서와 정적인 자료를 작성해 디자인·엔지니어링 팀의 검토를 받는 방식이 일반적이었다. - 이제는 팀과 함께 프롬프트를 작성하고 직접 프로토타입을 만들며, 아이디어를 구체적인 형태로 발전시키는 역할이 중요해지고 있다. - 문서만으로는 제품의 동작과 미묘한 사용 경험을 충분히 전달하기 어렵지만, 프로토타입은 “설명하는 것” 대신 “보여주는 것”을 가능하게 한다. - 작동하는 예시는 논의를 촉진하고, 팀이 같은 대상을 보며 빠르게 의견을 조율하도록 돕는다. ## 탐색: 불확실한 문제를 구체화하기 ### 문제 공간 정의 - 초기 단계에는 문제와 제약 조건이 명확하지 않아, 정답에 해당하는 해결책을 바로 정하기 어렵다. - Figma PM Tara Nadella는 문제 공간을 충분히 이해하지 못했을 때 Figma Make로 직접 여러 흐름과 상호작용을 실험했다. - 이를 통해 팀에 다시 가져갈 질문을 정리하고, 플러그인 사용 방식이나 전체 경험을 더 직관적으로 만드는 디자인 변경점에 대해 의견을 형성할 수 있었다. - 프로토타이핑은 해결책을 확정하기 전에 PM이 문제를 이해하고 자신의 관점을 세우는 수단으로 활용된다. ### 초기 아이디어를 여러 방향으로 발전시키기 - Figma Make는 빈 캔버스에서 시작하는 부담을 줄이고, 짧은 시간 안에 여러 접근 방식을 생성하게 해준다. - 손그림이나 텍스트 설명만으로 아이디어를 전달하는 대신, 실제로 반응하는 화면을 보고 어느 방향을 발전시킬지 판단할 수 있다. - Make kits를 사용하면 실제 제품의 디자인 라이브러리와 컴포넌트를 기반으로 프로토타입을 만들 수 있어, 일반적인 목업보다 출시 가능한 결과물에 가깝다. - Figma Design의 **Copy design** 기능으로 Figma Make 프리뷰를 편집 가능한 디자인 레이어로 변환할 수 있다. - 여러 시안을 빠르게 파생할 수 있다. - 디자이너가 시각적 완성도를 수동으로 보완할 수 있다. - 수정한 디자인을 다시 Figma Make에 연결해 프로토타입을 업데이트할 수 있다. - Figma Slides의 브랜드 색상 자동 적용 사례에서는 기존 템플릿을 복제하고, 프롬프트에 포함된 단서에 따라 색상 팔레트를 바꾸는 동작을 시뮬레이션했다. - 이처럼 프로토타입은 아이디어를 글로 설명하는 것보다 접근 방식에 대한 확신을 높이고, 실제 동작을 팀에 시연하는 데 유리하다. - Figma Make의 AI 이미지 기능을 이용하면 배경 제거, 객체 분리, 이미지 재구성 등 시각적 탐색도 캔버스에서 빠르게 수행할 수 있다. ## 디자인 시스템과 템플릿으로 탐색의 품질 유지하기 - 프로토타입을 실제 제품과 동떨어진 일반적인 목업으로 만들지 않으려면 디자인 시스템을 연결해야 한다. - Make kits에 팀의 디자인 라이브러리를 연결하면 생성 결과가 실제 제품의 UI와 컴포넌트에 기반하도록 만들 수 있다. - 프롬프트를 작성할 때는 기본 UI를 먼저 설정하고 관련 라이브러리를 첨부하는 것이 권장된다. - 완성도 높은 프로토타입은 Make 템플릿으로 게시할 수 있다. - 팀원이 수정할 수 있는 범위를 가이드로 제한할 수 있다. - 모든 사람이 동일한 기반에서 탐색할 수 있다. - 브랜드와 제품 경험의 일관성을 유지할 수 있다. - 장시간 프로토타이핑한 뒤 잠시 떠났다가 다시 검토하면, 처음에는 놓쳤던 세부적인 불일치나 사용성 문제를 발견하기 쉽다. ## 검증: 투자할 아이디어를 선별하기 - 아이디어를 자유롭게 생성하는 단계에서 실제로 자원을 투입할 대상을 검증하는 단계로 넘어가려면, 내부 이해관계자의 동의와 사용자 피드백이 필요하다. - 프로토타입은 정적인 설명 자료보다 실제 경험에 가까운 형태로 의견을 받을 수 있게 한다. - 사용자는 문서의 의도를 추측할 필요 없이 화면의 흐름과 동작을 직접 경험할 수 있으므로, 오해에 기반한 피드백을 줄이고 방향이 타당한지 확인하는 데 도움이 된다. 실무적으로는 문제를 충분히 이해하지 못한 상태에서 PRD부터 완성하려 하기보다, 실제 디자인 시스템을 연결한 낮은 비용의 프로토타입을 먼저 만들어 여러 방향을 비교하는 방식이 효과적이다. 이후 프로토타입을 내부 검토와 사용자 피드백의 기준점으로 활용하면, 문서만으로 합의하는 것보다 빠르게 실행 가능한 방향을 정할 수 있다.

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

달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트 (새 탭에서 열림)

토스 디자인 시스템(TDS)은 서비스의 글로벌 확장과 다양한 플랫폼 대응을 위해 7년 만에 컬러 시스템을 전면 개편했습니다. 인지적으로 균일한 색공간인 OKLCH를 도입하여 시각적 일관성과 접근성을 확보하고, 디자이너가 직접 제어하는 자동화된 토큰 관리 체계를 구축했습니다. 이번 개편을 통해 TDS는 단순한 디자인 가이드를 넘어, 비즈니스 성장을 뒷받침하는 확장 가능한 기술 인프라로 진화했습니다. ### 기존 컬러 시스템의 한계와 부채 - **명도 불일치**: 동일한 명도 단계(예: 100)임에도 색상(Grey, Blue, Red 등)에 따라 실제 느껴지는 밝기가 달라 UI가 얼룩덜룩해 보이는 문제가 있었습니다. - **모드 간 이격**: 라이트모드와 다크모드의 명도 기준이 달라 다크모드에서 특정 색이 너무 튀거나 가독성이 떨어지는 현상이 발생했습니다. - **관리 체계의 파편화**: 웹, iOS, 안드로이드, 디자인 에디터 등 각 플랫폼에서 컬러를 개별 관리하면서 싱글 소스 오브 트루스(SSOT)가 무너지고 커뮤니케이션 비용이 증가했습니다. ### OKLCH 색공간을 통한 인지적 균일함 확보 - **지각적 평등성**: 수치상 명도와 인간이 느끼는 밝기가 다른 HSL 모델 대신, 인지적으로 균일한 OKLCH 및 HSLuv 색공간을 활용해 모든 색상의 명도를 통일했습니다. - **접근성 자동화**: 정의된 명도 체계를 바탕으로, 외부 브랜드 컬러를 입력하더라도 TDS 기준에 맞는 배경-텍스트 대비를 자동으로 추출하는 로직을 구현했습니다. - **디바이스 최적화**: RGB 환경에서 표현하기 어려운 OKLCH 색상을 위해 채도(Chroma)를 클램핑(Clamp)하여 색조와 명도를 유지하면서도 기기 호환성을 높였습니다. ### 심미성과 접근성을 위한 시각 보정 - **Dark Yellow 문제 해결**: 수치적으로만 맞춘 노란색은 탁해 보이거나 너무 진해 보일 수 있어, 노란색 계열에 한해 별도의 명도 진행 단계를 적용하는 시각 보정을 거쳤습니다. - **다크모드 시인성 강화**: 인간의 눈이 어두운 배경에서 대비를 더 낮게 인식하는 특성을 고려하여, 최신 명도대비 메트릭인 APCA를 참고해 다크모드의 대비를 더 강하게 설계했습니다. - **시맨틱 토큰 정비**: 색상의 값(Primitive)이 아닌 사용 의도(Semantic)에 집중한 토큰 체계를 정립하여 디자인 결정 시간을 단축하고 일관성을 보장했습니다. ### 디자이너 중심의 토큰 자동화 시스템 - **통합 파이프라인**: Figma 플러그인(Token Studio)과 GitHub를 연동하여 디자이너가 컬러를 수정하고 커밋하면 모든 플랫폼의 코드가 자동으로 생성되도록 구축했습니다. - **실험적 환경**: 개발자의 수동 작업 없이도 디자이너가 직접 토큰을 변경하고 빠르게 실험할 수 있는 환경을 만들어 디자인 시스템의 운영 효율을 극대화했습니다. 성공적인 디자인 시스템 개편을 위해서는 단순한 심미적 수정을 넘어, 데이터 기반의 색공간 설계와 엔지니어링 관점의 자동화가 필수적입니다. 특히 비즈니스가 확장되는 시점이라면 컬러 시스템을 개별 컴포넌트가 아닌, 모든 플랫폼을 관통하는 하나의 '코드'이자 '인프라'로 접근하는 태도가 필요합니다.