프로토타이핑

139 개의 포스트

google원문

InstructPipe: 인간의 지시 (새 탭에서 열림)

InstructPipe는 사용자의 자연어 명령을 기반으로 머신러닝 워크플로우를 자동 생성하는 AI 비주얼 프로그래밍 어시스턴트입니다. 두 단계의 대규모 언어 모델(LLM) 프로세스와 코드 인터프리터를 활용해 복잡한 노드 선택 및 연결 과정을 자동화하며, 초보자가 백지상태에서 파이프라인을 구축할 때 겪는 진입 장벽을 대폭 낮췄습니다. 이를 통해 기술적 숙련도와 상관없이 누구나 창의적인 아이디어를 시각적인 ML 파이프라인으로 신속하게 구현할 수 있는 환경을 제공합니다. ### 효율적인 파이프라인 표현 방식 * 기존 비주얼 블록 시스템이 사용하는 장황한 JSON 형식을 '의사코드(Pseudocode)' 형태로 압축하여 처리 효율을 극대화했습니다. * 의사코드 방식을 통해 파이프라인 표현에 필요한 토큰 수를 기존 2,800개에서 123개 수준으로 약 95% 이상 절감하여 LLM의 연산 부담을 줄였습니다. * 각 의사코드는 노드의 고유 ID, 유형, 입출력 변수명, 매개변수 정보를 포함하는 간결한 문법으로 정의되어 LLM이 구조를 정확히 파악하도록 돕습니다. ### 2단계 LLM 기반 생성 프로세스 * **노드 선택기(Node Selector):** 수많은 노드 라이브러리 중 사용자의 명령과 관련된 후보 노드들만 1차적으로 필터링합니다. 이는 마치 라이브러리 문서의 요약본을 훑어보는 것과 같아 시스템의 정확도를 높입니다. * **코드 작성기(Code Writer):** 선택된 노드들의 상세 사양(데이터 타입, 입출력 구조, 연결 예시 등)을 바탕으로 실제 작동 가능한 의사코드를 작성합니다. 상세한 컨텍스트를 제공하여 노드 간의 유효한 연결을 보장합니다. * **코드 인터프리터(Code Interpreter):** 최종 생성된 의사코드를 해석하여 비주얼 블록 에디터에서 즉시 수정 및 실행이 가능한 시각적 노드 그래프로 렌더링합니다. ### 사용자 경험 및 기술적 효용 * 초보 사용자가 적절한 노드를 찾고 수동으로 연결하는 데 드는 학습 곡선과 시간을 획기적으로 단축하여 프로토타이핑 속도를 가속화합니다. * 사용자는 단순히 명령어를 입력하는 것만으로 멀티모달 파이프라인을 구축할 수 있으며, 생성된 결과물은 사용자가 직접 세부 조정할 수 있는 유연성을 가집니다. * LLM의 추론 능력과 비주얼 프로그래밍의 직관성을 결합하여, 복잡한 ML 설계를 인간과 AI의 협업 체계로 전환했다는 점에 의의가 있습니다. InstructPipe는 복잡한 AI 모델을 조합하여 서비스 프로토타입을 빠르게 만들어야 하는 기획자나 개발자에게 강력한 도구가 될 수 있습니다. 단순히 결과를 자동 생성하는 것에 그치지 않고, 생성된 결과물을 사용자가 시각적으로 직접 편집할 수 있는 '수정 가능한 자동화' 워크플로우를 채택할 것을 권장합니다.

figma4분 읽기큐레이션 요약

버전 관리: UX 라이터

Figma의 UX Writer Henry Freedland는 프로토타입 오프라인 기능의 메뉴 문구를 다듬으며, 단어 하나가 사용자의 기대와 실제 시스템 동작 사이의 신뢰를 좌우한다고 설명합니다. 기술적으로 정확한 표현보다 사용자가 무엇을 하려는지, 클릭 후 어떤 결과를 기대하는지를 명확히 연결하는 표현이 중요합니다. 결국 UX 글쓰기는 단순한 문구 수정이 아니라 제품의 동작과 사용자 경험을 정렬하는 작업입니다. ## UX 글쓰기가 드러내는 제품의 본질 - Figma는 인터넷 없이도 프로토타입을 안정적으로 발표할 수 있도록 오프라인 기능을 개발했습니다. - 기능 구현이 거의 끝난 시점에 메뉴 문구를 정하려 했지만, 어떤 단어를 선택할지 논의하는 과정에서 제품이 실제로 무엇을 하는지에 대한 근본적인 질문이 드러났습니다. - UX 문구는 사용자가 시스템의 동작 방식을 이해하고 예측하도록 돕는 일종의 안내 규칙입니다. - 동작 자체가 명확하지 않다면, 아무리 짧고 자연스러운 문구라도 사용자 기대와 실제 결과 사이에 혼란이 생깁니다. ## 1차 시도: “Preload prototype”의 기술적 정확성 - 초기 문구는 **“Preload prototype”**이었습니다. - 프로토타입을 화면을 이동할 때마다 불러오는 대신, 필요한 리소스를 미리 모두 로드한다는 기술적 동작을 정확히 표현합니다. - 하지만 “pre-”라는 접두사는 보통 어떤 일이 일어나기 전에 수행되는 작업을 뜻합니다. - 예: 오븐을 미리 데우는 “preheat” - 사용자는 이미 프로토타입을 로드한 뒤 이 옵션을 보게 되므로, 무엇을 “미리” 로드한다는 것인지 직관적으로 이해하기 어렵습니다. - 기술 배경이 있는 사람에게는 익숙하지만, 일반 사용자에게는 다음과 같은 추가 설명이 필요합니다. - 현재 무엇이 이미 로드되었는가? - 무엇을 추가로 로드하는가? - 언제 오프라인 상태로 전환되는가? ## “Load full prototype”이 해결하지 못한 신뢰 문제 - 더 익숙한 동사인 **“load”**를 사용해 다음과 같은 표현도 검토했습니다. - “Load full prototype” - “Load all screens” - “Load all assets” - 그러나 사용자는 이미 프로토타입을 열었기 때문에, “전체 프로토타입을 로드한다”는 표현이 현재 상태와 충돌할 수 있습니다. - 컴퓨터가 “로드 중”이라고 알려주면 사용자는 그 과정을 신뢰하지만, 로딩이 끝난 뒤에는 모든 것이 준비되었다고 믿게 됩니다. - 따라서 “Load full prototype”은 현재 화면이 사실은 완전히 준비된 상태가 아니라는 인상을 주며, 프로그램과 사용자 사이의 신뢰를 약화시킬 수 있습니다. - 기술적으로 정확한 명칭이라도 사용자의 현재 상황과 맞지 않으면 좋은 UX 문구가 되지 않습니다. ## 2차 시도: 사용자의 목적을 직접 표현하기 - 기능의 목적은 인터넷이 없어도 프로토타입을 안정적으로 발표하는 것이므로 다음 표현도 제안되었습니다. - “Present prototype offline” - “Prepare to present offline” - 소프트웨어 문구는 사용자가 왜 어떤 행동을 하는지부터 고려해야 합니다. - Terry Winograd의 표현처럼 사람은 언어를 통해 행동하므로, 메뉴 문구는 사용자의 의도와 컴퓨터의 실행 동작을 연결해야 합니다. - **“Present prototype offline”**은 실제로 클릭하는 순간 발표가 시작되지 않는다는 점에서 문제가 있습니다. - 사용자는 즉시 발표 화면이 나타날 것이라고 기대할 수 있습니다. - **“Prepare to present offline”**은 준비의 의미가 모호합니다. - 무엇을 준비하는가? - 얼마나 일찍 눌러야 하는가? - 준비가 끝났다는 것을 어떻게 알 수 있는가? - 이 표현들은 사용자를 위한 단계별 안내나 후속 화면이 있다면 사용할 수 있지만, 단순한 토글 메뉴에는 지나치게 무겁고 불명확합니다. ## 문구 선택 기준: 생각·언어·시스템 동작의 일치 - 좋은 UX 문구는 다음 세 가지를 일치시켜야 합니다. - 사용자가 머릿속으로 생각하는 목표 - 메뉴에 표시된 언어 - 실제 시스템이 수행하는 동작 - 세 요소 사이의 간격이 크면 사용자는 클릭 결과를 예측하기 어렵습니다. - 기술 용어를 그대로 노출하면 구현 방식은 설명할 수 있지만 사용자의 목적을 놓칠 수 있습니다. - 반대로 사용자의 목표만 강조하면 시스템이 실제로 무엇을 하는지 알 수 없게 될 수 있습니다. - 특히 토글 메뉴에서는 문구만 보고도 현재 옵션의 의미와 활성화 후 결과를 이해할 수 있어야 합니다. ## 실용적인 결론 오프라인 기능처럼 내부적으로는 복잡한 동작을 수행하는 기능일수록, 기술적 구현명보다 사용자의 기대와 실제 결과를 정확히 연결하는 문구를 선택해야 합니다. 메뉴 문구를 정할 때는 “무엇을 하는가”뿐 아니라 “사용자는 왜 이 기능을 켜는가”, “클릭 직후 무엇이 일어날 것이라고 기대하는가”를 함께 검토하는 것이 좋습니다.

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

정부를 위한 피그마에 대해

Figma는 미국 연방정부의 보안·개인정보 기준인 FedRAMP Moderate 인증을 획득하고, 공공기관용 서비스인 Figma for Government를 제공한다. 이를 통해 연방기관은 FigJam, Figma, Dev Mode를 활용해 시민 대상 웹사이트와 애플리케이션을 안전하게 기획·설계·개발할 수 있다. 글은 부서 간 협업과 디자인 시스템을 강화해 더 일관되고 접근성 높은 디지털 공공서비스를 만드는 것이 이 서비스의 목표라고 설명한다. ## FedRAMP Moderate 인증과 Figma for Government - Figma for Government는 미국 연방정부의 엄격한 보안 및 개인정보 보호 기준을 충족하는 FedRAMP Moderate 인증을 받았다. - 제공 대상 제품은 다음과 같다. - **Figma**: 인터페이스 설계, 프로토타이핑, 디자인 리뷰 - **FigJam**: 브레인스토밍, 프로젝트 계획, 사용자 여정 맵 작성 - **Dev Mode**: 디자인과 개발 간 협업 - **Figma Slides**: 추후 제공 예정 - 인증을 통해 연방기관이 민감한 공공서비스를 설계하고 구축할 수 있는 보안 환경을 제공한다. ## 공공서비스 디지털화의 필요성 - 시민들은 의료, 정부 지원, 여권·비자 등 공공서비스를 온라인에서 쉽고 빠르게 이용하기를 기대한다. - 연방 정책에 따라 디지털 서비스는 다음 조건을 갖춰야 한다. - 간결하고 사용하기 쉬운 경험 - 접근성 - 일관된 디자인 - 적절한 도구가 없으면 디자인, 개발, 기획 업무가 조직별로 분리되어 효율성과 결과물의 사용성이 떨어질 수 있다. - 따라서 무엇을 출시하는지뿐 아니라, 여러 팀이 **어떻게 협업하고 출시하는지**도 중요하다고 강조한다. ## Figma for Government가 해결하는 문제 - 100개가 넘는 정부기관과 계약업체가 이미 Figma를 활용해 업무를 현대화하고 있다. - 아이디어 구상부터 디자인 반복 작업, 프로토타이핑, 최종 구현과 개선까지 하나의 플랫폼에서 연결할 수 있다. - 링크 하나로 조직 내 구성원이 작업물을 확인하고, 수정하고, 피드백을 남길 수 있다. - 이를 통해 부서 간 사일로를 줄이고 최신 작업물을 공유하는 단일 기준점(single source of truth)을 만든다. - 정부기관이 민간의 선도적인 조직과 유사한 협업 도구를 보안 환경에서 사용할 수 있도록 설계됐다. ## 공공기관 활용 사례 - **미국 국립공원관리청(NPS)**은 431개 국립공원과 기념물 정보를 제공하는 앱을 제작했다. - 기존 공원 안내 책자의 디자인 언어를 디지털 인터페이스에 적용했다. - **Amtrak**은 2만 명 이상의 직원과 2,800만 명의 승객을 지원하는 시스템을 효율화했다. - 미국 웹 디자인 시스템(USWDS)의 공식 Figma 디자인 키트도 제공된다. - 변수(variables)와 스마트 레이아웃을 활용한 42개 컴포넌트로 구성됐다. - 국무부의 여권·비자 시스템, 국세청의 온라인 납세 서비스, 시민권·이민 서비스국의 시민권 업무 등에도 활용되고 있다. ## FigJam을 활용한 공동 기획 - 여러 지역과 시간대에 분산된 팀이 실시간 또는 비동기 방식으로 협업할 수 있다. - FigJam에서 다음 작업을 한곳에서 진행할 수 있다. - 브레인스토밍 - 프로젝트 로드맵 작성 - 사용자 여정 맵 작성 - 전략 및 정보 공유 - 모든 구성원이 의견을 남기고 다른 사람의 생각을 확인할 수 있어 초기 아이디어를 정렬하는 데 유용하다. ## Figma를 활용한 디자인 협업과 표준화 - 최신 디자인 파일을 모든 이해관계자와 공유해 와이어프레임, 프로토타입, 리뷰, 수정 과정을 단축한다. - 디자이너뿐 아니라 개발자, 제품 관리자, 경영진 등도 디자인 과정에 참여할 수 있다. - 조직은 디자인 시스템을 만들고 관리해 다음을 달성할 수 있다. - 화면 간 일관성 유지 - 높은 품질의 인터페이스 제작 - 기관의 브랜드 정체성 강화 - 시민에게 신뢰감 있는 경험 제공 ## Dev Mode를 통한 디자인-개발 연결 - 디자인과 엔지니어링 팀 간 소통이 부족하면 디자인 의도 확인, 변경사항 비교, 디자인과 코드 연결에 불필요한 시간이 든다. - Dev Mode는 디자이너와 개발자가 같은 작업 공간에서 협업하도록 지원해 이러한 단절을 줄이는 역할을 한다. - 전체 개발 과정에서 디자인 결과물을 구현 단계로 원활하게 전달하는 것이 핵심이다. ## 실용적인 결론 공공기관은 Figma for Government를 활용해 아이디어 구상부터 개발까지의 협업 흐름을 하나로 통합하고, 디자인 시스템으로 서비스의 일관성과 접근성을 높일 수 있다. 특히 여러 부서와 지역에 걸쳐 운영되는 시민 서비스라면 FedRAMP Moderate 인증 환경, 공동 편집, 단일 작업 기준점이 업무 효율과 서비스 품질 향상에 도움이 된다.

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

UI3로의 전환:

Figma는 2025년 4월 30일부터 기존 UI2를 종료하고, 작업 영역을 넓히고 기능을 간소화한 UI3로 완전히 전환한다. UI3는 단순한 배치 변경이 아니라 변수 인식, 색상 선택, 메뉴 정리 등 실제 작업 흐름을 더 직관적이고 효율적으로 만드는 데 초점을 맞췄다. Figma는 사용자 피드백을 반영한 추가 개선을 거친 뒤, 향후에는 UI3에서만 제공되는 새로운 기능과 Properties 패널 개선에 집중할 계획이다. ## UI3 전환과 UI2 종료 - Figma는 4월 30일 기존 인터페이스인 UI2를 종료한다. - Config를 앞두고 UI3 전용 기능과 새로운 사용 경험을 제공하기 위해 전면 전환을 결정했다. - UI3의 주요 방향은 다음과 같다. - 캔버스와 작업물을 더 넓게 보여주기 - 인터페이스를 간결하게 만들기 - 반복적인 작업을 줄이고 기능 접근성을 높이기 - 향후 확장될 기능을 UI3를 기반으로 제공하기 ## 사용자 피드백을 반영한 개선 Figma는 UI3 공개 이후 사용자의 의견을 바탕으로 여러 세부 요소를 수정하고 있다. - 중복성이 있던 “Reset others” 아이콘을 교체한다. - Boolean 연산 관련 문구를 더 단순하게 정리한다. - Overflow 메뉴에서 중복으로 표시되는 액션을 제거한다. - 의미를 명확히 전달하도록 마스크 아이콘을 변경한다. - “Tidy up” 기능의 동작과 경험을 UI2에 더 가깝게 되돌린다. - 전환 이후에는 Properties 패널을 중심으로 추가 개선을 진행할 예정이다. ## 새로운 인터페이스에 대한 적응 - 기존 작업 흐름과 단축키에 익숙한 사용자는 처음에는 UI3 전환을 부담스럽게 느낄 수 있다. - 그러나 일부 사용자는 몇 시간 만에 자연스럽게 적응했다고 평가했다. - 다른 사용자는 기존의 근육 기억을 바꾸는 데 약 일주일이 걸렸지만, 이후에는 UI3를 선호하게 되었다고 전했다. - 글의 관점은 UI3가 단순히 “다른” 인터페이스가 아니라, 익숙해진 뒤에는 더 나은 작업 방식을 제공한다는 것이다. ## 스마트해진 Eyedropper 도구 UI3의 색상 추출 도구는 기존 단축키 `I`를 그대로 사용하면서 변수와 스타일을 인식하도록 개선되었다. - 캔버스를 살펴보는 동안 Eyedropper 도구가 계속 활성화된 상태로 유지된다. - `Tab` 키를 사용해 Hex, HSB, RGB 등 다양한 색상 모델 사이를 전환할 수 있다. - 단순한 색상 값뿐 아니라 다음 항목을 감지한다. - 색상 스타일 - 변수 - 특정 요소에 적용된 디자인 토큰 - 요소를 선택한 뒤 Eyedropper를 실행하고 캔버스의 색상 위에 마우스를 올리면, Figma가 해당 색상에 사용된 스타일이나 변수를 표시한다. - 작업 중인 위치에서 바로 변수를 생성할 수 있어, 색상을 확인하고 디자인 시스템에 연결하는 과정이 빨라진다. ## 실용적인 결론 UI3 전환을 앞둔 사용자는 미리 새 인터페이스에 적응하고, 특히 Eyedropper의 변수·스타일 인식 기능과 변경된 메뉴 구조를 익혀두는 것이 좋다. 기존 UI2의 위치와 동작을 그대로 찾기보다, 캔버스 중심 설계와 디자인 토큰 활용을 전제로 새로운 작업 흐름을 익히는 것이 전환에 효과적이다.

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

더블 클릭: 코딩이

AI와 대화하며 코드를 생성·수정하는 ‘바이브 코딩’은 프로그래밍을 문법 작성보다 아이디어 표현과 반복 대화에 가깝게 만든다. 덕분에 코딩 경험이 없는 사람도 빠르게 프로토타입과 사이드 프로젝트를 만들 수 있지만, 프로젝트가 복잡해지면 일관성 없는 데이터 모델과 스파게티 코드라는 한계에 부딪힌다. 따라서 바이브 코딩은 완성도 높은 소프트웨어 개발 전체를 대체하기보다, 초기 탐색과 실험을 가속하는 방식으로 보는 것이 적절하다. ## 대화형 프로그래밍으로의 변화 - 바이브 코딩은 원하는 기능을 자연어로 설명하고, AI가 코드를 작성하면 실행 결과를 확인한 뒤 다시 대화로 수정하는 개발 방식이다. - 개발자는 코드를 한 줄씩 직접 작성하기보다 “보고, 말하고, 실행하고, 복사·붙여넣는” 흐름으로 결과를 만들어 간다. - Cursor Composer, Claude Sonnet, 음성 입력 도구인 SuperWhisper 같은 LLM 기반 도구의 성능 향상이 이러한 방식을 가능하게 했다. - 어셈블리에서 C, C에서 Python으로 추상화 수준이 높아졌던 것처럼, 바이브 코딩도 프로그래밍 추상화의 또 다른 단계로 볼 수 있다는 의견이 제시된다. ## 펀치카드에서 즉시 프로토타이핑까지 - 초기 컴퓨팅에서는 명령 하나를 펀치카드에 기록하고, 실행 결과를 보기까지 수 시간 또는 수일을 기다려야 했다. - 이후 직접 코드를 입력할 수 있게 되었지만, 아이디어를 실제 인터랙티브 결과물로 바꾸는 과정은 여전히 개발자에게 큰 장벽이었다. - 바이브 코딩은 이 간극을 줄여 아이디어를 빠르게 표현하고 반복적으로 실험하게 한다. - Figma의 디자이너 Nikolas Klein은 이를 “코딩 자체보다 인터랙티브 아이디어를 더 빠르고 쉽게 표현하는 방법”으로 본다. - Val Town의 Charmaine Lee는 문서에 낙서하거나 Google Sheet를 만드는 것처럼 코드를 가볍게 실험할 수 있다는 점을 강조한다. ## 코딩을 하지 않는 사용자도 소프트웨어를 만든다 - 바이브 코딩은 전문 개발자뿐 아니라 코드를 전혀 작성하지 않는 사람에게도 소프트웨어 제작 기회를 넓힌다. - Replit CEO Amjad Masad에 따르면 Replit 고객의 75%는 코드 한 줄도 직접 작성하지 않는다. - Figma 구성원들은 SwiftUI를 몰라도 러닝 코치 앱이나 TikTok 스타일의 Wikipedia 앱 로딩 애니메이션 같은 프로젝트를 만들 수 있었다. - 특히 사이드 프로젝트, 인터랙션 실험, 디자인 프로토타입처럼 빠른 시도가 중요한 작업에서 효과가 크다. ## 복잡해질수록 드러나는 한계 - 바이브 코딩은 프로젝트 초반에는 매우 빠르고 즐겁지만, 기능과 코드 규모가 커지면 AI의 대응 품질이 떨어진다. - 처음에는 원하는 결과의 약 80%까지 빠르게 도달할 수 있지만, 나머지 20%를 완성하는 과정에서 어려움이 커진다. - AI가 생성한 코드가 기능별로는 작동해도 전체적으로 일관된 내부 데이터 모델을 갖추지 못할 수 있다. - 결과적으로 구조를 이해하기 어렵고 유지보수하기 힘든 스파게티 코드가 쌓일 위험이 있다. - 따라서 복잡한 프로젝트에서는 아키텍처 설계, 데이터 모델 검토, 테스트와 리팩터링 등 전통적인 개발 역량이 여전히 필요하다. ## 실용적인 활용 방향 - 바이브 코딩은 아이디어 검증, 초기 프로토타입, 개인 프로젝트, UI·인터랙션 실험에 적극 활용할 만하다. - 운영 환경에 배포하거나 장기 유지보수할 코드는 생성 결과를 그대로 사용하지 말고, 개발자가 구조·보안·성능·테스트를 검토해야 한다. - 가장 현실적인 접근은 AI에게 구현을 맡기되, 사람이 요구사항과 설계 방향을 통제하고 결과물을 지속적으로 정리하는 방식이다.

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

좋은 동료들과 함께

뉴스 미디어 기업들은 디지털 전환과 구독 경쟁에 대응하기 위해 앱, 서체, 브랜드를 재설계하고 있으며, 이 과정에서 Figma를 협업과 프로토타이핑의 중심 도구로 활용한다. The New York Times 사례는 여러 콘텐츠 제품을 하나의 생태계로 연결하면서도 각 섹션의 정체성을 유지한 앱을 구축한 경우다. Figma는 편집자·디자이너·엔지니어·경영진이 비동기적으로 같은 화면과 프로토타입을 검토하게 해, 저널리즘의 형식 자체를 함께 설계하도록 돕는다. ## 디지털 시대의 뉴스 디자인 과제 - 신문사들은 웹과 모바일 중심으로 사업을 전환하고 새로운 콘텐츠 형식을 실험하고 있다. - 광고 시장의 불확실성으로 구독 모델이 중요해졌지만, 온라인 뉴스 이용자는 비용을 지불하는 데 상대적으로 소극적이다. - 따라서 기존 독자뿐 아니라 새로운 독자와 관계를 형성하고, 디지털 환경에서 뉴스의 정확성·명확성·접근성을 유지해야 한다. - 앱 개편, 서체 개발, 웹사이트 출시처럼 큰 변화에는 다양한 직군의 긴밀한 협업이 필요하다. ## The New York Times의 제품 생태계 중심 앱 개편 - 2024년 10월 개편된 앱은 뉴스뿐 아니라 Games, Cooking, Audio, Wirecutter, The Athletic 등 여러 제품을 하나의 구독 생태계로 연결한다. - 사용자는 앱을 열면 최신 뉴스가 모이는 **Today** 섹션을 먼저 보게 된다. - 상단 내비게이션을 통해 다른 제품과 콘텐츠 영역으로 이동할 수 있으며, 각 영역은 독립적인 홈 화면을 제공한다. - 핵심 전략은 모든 콘텐츠를 하나의 피드에 섞는 ‘슈퍼 앱’이 아니라, 저널리즘을 중심에 두고 각 제품이 고유한 방식으로 확장되는 구조다. ## 섹션별 시각적 정체성 - 각 콘텐츠 영역은 서로 다른 편집 목적과 독자 경험에 맞춰 시각 언어를 갖는다. - Lifestyle은 이미지와 제목을 겹쳐 배치한 그리드형 구성을 사용한다. - The Times가 “poster”라고 부르는 시각 중심 컴포넌트를 활용해 콘텐츠의 주목도를 높인다. - Opinion은 일반 뉴스와 다른 스타일의 제목 표현을 사용해 의견·관점 중심 콘텐츠라는 특성을 드러낸다. - 결과적으로 앱 전체의 일관성을 유지하면서도 각 제품과 섹션의 개성을 구분했다. ## Figma를 활용한 비동기 협업 - 편집자, 엔지니어, 디자이너, 고위 경영진, 스토리텔링 그룹이 하나의 Figma 파일에서 작업했다. - 스토리텔링 그룹은 뉴스룸과 협업해 이미지·텍스트·비디오·오디오를 조합한 다양한 기사 형식을 설계한다. - 팀원들은 화상회의나 화면 공유 없이 Figma에 들어가 작업물을 확인하고 의견을 교환할 수 있었다. - 디자이너는 기존처럼 발표용 덱을 반복해서 만드는 대신, Figma 안에서 직접 프로토타입을 공유했다. - 이를 통해 제품의 화면뿐 아니라 “저널리즘을 어떤 형태로 전달할 것인가”까지 함께 탐색할 수 있었다. ## 다른 미디어 기업의 사례 - 글은 The New York Times 외에도 The Economist의 디지털 친화적 서체 개발 사례를 다룬다. - The Minnesota Star Tribune은 Figma를 활용해 브랜드를 변화시킨 사례로 소개된다. - 세 사례 모두 변화하는 미디어 환경에서 디자인 시스템, 협업, 새로운 콘텐츠 형식이 경쟁력의 핵심이라는 점을 보여준다. ## 실용적인 시사점 - 대규모 디지털 제품을 개편할 때는 콘텐츠·디자인·개발·경영진이 같은 프로토타입을 기준으로 논의하는 것이 효과적이다. - 전체 브랜드의 일관성을 유지하되, 콘텐츠 유형별로 차별화된 시각적 정체성을 설계해야 한다. - Figma 같은 협업 도구를 단순한 화면 제작 도구가 아니라 편집 구조와 콘텐츠 전달 방식을 실험하는 공동 작업 공간으로 활용할 수 있다.

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

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를 순서대로 적용하는 방식이 효과적이다. 처음부터 모든 기능을 익히려 하기보다 작은 요소 하나를 만들고, 재사용 가능한 컴포넌트로 발전시킨 뒤, 팀과 공유하는 실습부터 시작하는 것이 좋다.

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

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 생성 결과를 그대로 사용하기보다 디자인 시스템, 접근성, 브랜드 기준에 맞춰 검토·수정하는 과정이 필요하다.

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

초안 작동 방식 업데이트 | Figma

Figma는 Starter·Professional 플랜의 Drafts를 팀과 분리된 개인 공간에서 팀 내부의 전용 Drafts 공간으로 이전한다. 이를 통해 파일 소유권과 권한을 명확히 하고, 팀 플랜 기능과 향후 결제·라이선스 관리 개선의 기반을 마련하려는 것이다. Drafts는 계속 비공개로 유지되며 무료로 생성·편집할 수 있지만, 팀으로 이동할 때 일부 협업자의 편집 권한이 변경될 수 있다. ## Drafts 이전의 배경 - 기존 Drafts는 팀에 속하지 않아 파일 소유권과 팀 연계가 불명확했다. - Starter·Professional과 Organization·Enterprise의 Drafts 구조가 달라 제품 개선이 복잡했다. - 팀과 연결되지 않은 Drafts에서는 고급 프로토타이핑, 비밀번호 보호, Dev Mode 같은 유료 기능을 사용할 수 없었다. - 개인 작업과 업무용 작업이 분리되지 않아 파일 권한, 보안, 지식재산권 관리에 문제가 생길 가능성이 있었다. ## Drafts의 새로운 구조 - 모든 Drafts는 이제 하나의 팀에 연결되어야 한다. - 사용자는 자신이 속한 각 팀 안에 개인 전용 Drafts 공간을 갖는다. - Professional 팀의 Drafts에서는 편집자에게 Professional 기능이 제공된다. - Starter 팀이 하나뿐인 사용자는 Drafts가 해당 팀의 새 Drafts 공간으로 자동 이전될 수 있다. - 팀 목록은 새 드롭다운 메뉴를 통해 확인하고 선택할 수 있다. ## 협업 권한과 요금 변화 - 팀으로 Draft를 옮겨도 파일은 기본적으로 계속 비공개다. - Draft의 기존 편집자가 해당 팀의 정식 멤버가 아니면, 예상치 못한 유료 좌석 발생을 막기 위해 자동으로 뷰어로 변경된다. - 필요한 경우 사용자 또는 관리자가 다시 편집 권한을 부여해야 한다. - Starter 팀에서는 무제한 뷰어를 초대할 수 있고, 최대 3개의 협업 파일에는 무제한 편집자를 둘 수 있다. - 개인 Drafts를 팀에 소속시키더라도 자신의 Draft를 계속 무료로 생성·편집할 수 있다. ## Drafts를 팀으로 이동하는 방법 - “Drafts to move” 공간으로 이동하면 원하는 팀의 Drafts 공간을 선택해 파일을 옮길 수 있다. - 특정 팀과 관련 없는 개인 작업은 무료 Starter 팀을 만든 뒤 그 팀으로 이동할 수 있다. - 이전 작업이 진행 중인 동안에도 기존 협업자와 Draft를 계속 편집할 수 있다. - 다만 새로운 협업자를 초대하려면 먼저 파일을 팀으로 이동해야 한다. - 현재 고정된 마감일은 없으며, 향후 이동하지 않은 Drafts는 무료 Starter 플랜으로 이전될 예정이다. 이전 전에는 별도 안내가 제공된다. ## 앞으로의 개선 방향 - 사용자가 유료 편집자 좌석으로 전환되는 시점을 더 명확히 안내할 예정이다. - 프리랜서의 프로젝트 인계와 여러 팀에 속한 사용자의 업무를 지원할 계획이다. - 관리자 대시보드와 게스트 관리 등 라이선스 관리 기능을 개선할 예정이다. - Figma의 결제 관련 사용자 경험도 전반적으로 재설계하고 있다. ## 실용적인 대응 현재 Drafts를 검토해 업무용·개인용 파일을 적절한 팀으로 분류하고, 이동 후 편집 권한이 필요한 협업자가 해당 팀의 정식 멤버인지 확인하는 것이 좋다. 어느 팀에도 속하지 않는 개인 작업은 별도의 무료 Starter 팀으로 분리하면 관리와 권한 설정이 수월하다.

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

지금 바로 북마크해야 할

프로토타이핑은 제품 개발 막바지의 보조 수단이 아니라, 아이디어 검증·사용자 조사·이해관계자 피드백·프레젠테이션 등 전 과정에서 팀의 공통 비전을 만드는 핵심 도구다. 이 글은 Figma 프로토타이핑 학습을 위해 기초 강의부터 발표, 모션과 플로우, 변수, 오피스 아워까지 23개의 영상·커뮤니티 파일·콘텐츠를 단계별로 큐레이션한다. 학습자는 자신의 수준과 목적에 맞는 자료를 골라 인터랙션 구현 능력을 높이고 더 나은 제품을 설계할 수 있다. ## 프로토타이핑의 역할 - 프로토타입은 제품의 동작과 사용자 경험을 시각화해 팀이 아이디어를 공유하도록 돕는다. - 사용자 테스트와 이해관계자 피드백을 통해 문제를 조기에 발견하고 반복적으로 개선할 수 있다. - 발표 자료에도 인터랙션을 추가해 정적인 화면보다 설득력 있게 제품의 흐름과 기능을 전달할 수 있다. - Figma는 모바일·태블릿·워치 등 다양한 디바이스 화면을 고려한 프로토타이핑 기능을 강화하고 있다. ## 기초 기능 익히기 - **「Build prototypes」(8분)** - 인터랙티브 프로토타입 제작의 기본 흐름을 소개한다. - 애니메이션을 적용하고 테스트 사용자에게서 피드백을 반영하는 방법을 다룬다. - **「Prototyping playlist」(50분)** - easing curve, transition, Smart Animate, 스크롤, 디바이스 프레임 등 핵심 기능을 짧은 영상들로 학습할 수 있다. - **「Prototyping 101」(63분)** - 프레임 간 기본 내비게이션부터 인터랙티브 컴포넌트 같은 고급 기능까지 설명한다. - **제품 담당자를 위한 Figma 학습 시리즈** - 디자이너가 아닌 제품 담당자도 가벼운 프로토타입을 직접 만들 수 있도록 안내한다. - 두 번째 영상에서는 transition, Smart Animate, 스크롤 동작 등을 활용해 화면을 더 실제처럼 만드는 방법을 다룬다. - **접근 가능한 프로토타입 커뮤니티 파일** - Figma의 접근성 모드를 활용해 프로토타이핑 화면의 정보를 스크린 리더로 읽을 수 있다. - macOS의 VoiceOver와 Windows의 JAWS 같은 도구를 통한 접근성 테스트에 활용할 수 있다. ## 발표 자료를 인터랙티브하게 만들기 - **「Presenting with Figma」(70분)** - Figma 프로토타이핑 기능을 활용해 역동적인 슬라이드 프레젠테이션을 구성하는 방법을 소개한다. - **발표 팁 영상** - 슬라이드 안에 프로토타입을 중첩해 실제로 스크롤되는 모바일 화면 등 인터랙티브 요소를 넣을 수 있다. - 이 방식은 이사회 보고, 수업, 제품 소개처럼 메시지 전달이 중요한 상황에 유용하다. - **Figma 앱으로 발표하기** - 모바일 앱에서 슬라이드를 직접 클릭하며 발표하는 방법을 보여준다. ## 영상·모션·사용자 플로우 학습 - 프로토타입의 완성도를 높이려면 단순한 화면 연결뿐 아니라 전환 효과, 애니메이션, 스크롤 동작을 함께 설계해야 한다. - Smart Animate와 easing curve를 사용하면 화면 변화가 더 자연스럽고 제품의 실제 동작에 가까워진다. - 모션과 플로우를 활용하면 사용자가 어떤 순서로 기능을 경험하는지 명확하게 검증할 수 있다. ## 변수와 고급 프로토타이핑 - 변수 기능을 활용하면 하나의 프로토타입에서 상태, 값, 조건에 따른 다양한 동작을 관리할 수 있다. - 반복되는 상태나 화면을 개별 프레임으로 복제하는 대신 변수와 인터랙티브 컴포넌트로 구성해 유지보수성을 높일 수 있다. - 복잡한 사용자 플로우와 여러 상태를 표현할 때 변수 기반 설계가 특히 유용하다. ## 오피스 아워와 실습 자료 - Figma의 오피스 아워 콘텐츠는 프로토타이핑 기능과 실제 활용 사례를 보충 학습할 수 있는 자료로 제공된다. - 영상뿐 아니라 Figma 커뮤니티 파일을 직접 열어 결과물을 확인하고 따라 해볼 수 있다. - 학습 방식에 따라 짧은 영상, 장시간 강의, 실습 파일, 소셜 콘텐츠 중 적합한 자료를 선택할 수 있다. 처음 시작한다면 기초 프로토타입 제작과 프레임 간 내비게이션부터 익힌 뒤, Smart Animate·스크롤·인터랙티브 컴포넌트로 확장하는 순서가 좋다. 이후 접근성 테스트, 변수, 발표용 프로토타입을 적용하면 실무에서 검증과 커뮤니케이션을 동시에 강화할 수 있다.

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

기능 비하인드:

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

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

Figma와 Jira로 디

제품 개발의 속도와 품질을 높이려면 디자이너와 개발자가 같은 맥락을 공유하며 협업할 수 있는 도구·프로세스·의식이 필요하다. 특히 하이파이 인터랙티브 프로토타입과 Figma-Jira 연동은 디자인 의도를 코드로 옮기는 과정의 오해와 단절을 줄이고, 대면·비동기 협업 모두에서 팀의 ‘플로우’를 유지하도록 돕는다. 규모가 커지고 하이브리드 근무가 일반화될수록 지속적인 정렬과 명확한 정보 공유가 중요해진다. ## 제품 개발에서 ‘플로우’가 중요한 이유 - 플로우는 구성원이 특정 활동에 깊이 몰입해 효율적으로 작업하는 상태다. - 제품 속도는 올바른 기능을 빠르게 출시하는 능력이지만, 조직이 커질수록 유지하기 어렵다. - 속도는 저절로 생기지 않으며, 다음과 같은 기반이 필요하다. - 협업 도구 - 작업 프로세스 - 팀의 정기적인 커뮤니케이션과 의식 - 폴 그레이엄의 ‘메이커의 일정과 매니저의 일정’처럼 디자이너와 개발자는 짧은 단위의 잦은 회의보다 방해받지 않는 긴 작업 시간이 필요하다. - 하이브리드 환경에서는 알림, 일정, 변화하는 요구사항 때문에 개인과 팀 모두 플로우를 잃기 쉬우므로 협업 기반을 먼저 정비해야 한다. ## 고해상도 프로토타입으로 디자인과 개발의 언어 통일 - 회사가 커질수록 팀과 업무가 사일로로 분리되고, 원격·하이브리드 근무로 구성원 간 맥락 공유가 어려워진다. - 같은 용어도 디자이너와 개발자가 서로 다르게 이해할 수 있지만, 실제로 작동하는 프로토타입을 보면 의도를 더 정확히 공유할 수 있다. - One.com은 덴마크의 디자인 팀과 인도의 개발 팀이 정기적으로 요구사항, 장애물, 잠재적 문제를 논의한다. - 새로운 텍스트 기능을 논의할 때 Figma의 하이파이 프로토타입을 사용해 개발자들이 인터랙션 상태를 직접 확인했다. - 정적·로우파이 프로토타입이 전체적인 디자인 방향을 보여준다면, 인터랙티브 하이파이 프로토타입은 다음과 같은 구현 세부사항을 전달한다. - 사용자 플로우가 어떻게 진행되는지 - 창이나 모달이 언제 나타나는지 - 드롭다운이 어떻게 동작하는지 - 최종 제품에서 각 상태가 어떻게 연결되는지 - 여러 페이지를 복잡하게 연결해야 했던 기존 방식과 달리, 하나의 Figma 파일 안에서 전체 경험을 확인하고 검토할 수 있다는 점이 장점이다. ## 회의 이후에도 유지되는 비동기 협업 맥락 - 프로토타입은 회의 중 합의만 돕는 것이 아니라, 회의에 참석하지 못한 구성원에게도 결정의 맥락을 보존한다. - 원격·비동기 환경에서는 회의에서 무엇을 확인하고 결정했는지가 이후 작업의 효율을 좌우한다. - Condé Nast의 제품 개발 팀은 매일 스탠드업을 진행해 다음을 공유한다. - 현재 진행 상황 - 우선순위 - 예상되는 장애물 - 팀이 확인해야 할 질문 - 이러한 정기적인 정렬은 팀이 서로 다른 방향으로 작업하는 것을 방지하고, 문제를 조기에 드러내도록 한다. ## Figma와 Jira를 통한 디자인-개발 연결 - 디자인이 코드로 전환되는 과정에서는 디자인 파일, 개발 작업, 요구사항이 서로 다른 위치에 흩어지기 쉽다. - Figma for Jira는 Jira 작업 항목에 디자인 맥락을 연결해 개발자가 구현 시 필요한 정보를 더 쉽게 확인하도록 지원한다. - 글은 업데이트된 Figma for Jira 앱을 소개하면서, 제품 개발팀이 디자인과 개발 워크플로를 더 가깝게 연결하는 방법을 설명한다. - 핵심 목적은 단순히 디자인 링크를 첨부하는 것이 아니라, 개발자가 디자인의 배경과 동작 방식을 함께 이해하도록 하는 데 있다. ## 실천을 위한 시사점 - 기능 구현 전에 정적 화면보다 실제 인터랙션을 포함한 프로토타입으로 논의한다. - 디자인 리뷰에는 개발자를 참여시켜 상태 변화와 예외 흐름까지 함께 확인한다. - 회의에서 결정한 내용은 프로토타입과 작업 티켓에 남겨 비동기 작업에서도 맥락이 유지되게 한다. - Figma와 Jira를 연결해 디자인 의도, 요구사항, 개발 진행 상황을 하나의 흐름으로 관리한다.

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

피그마와 어도비,

Figma와 Adobe는 15개월간의 규제 심사 끝에 인수합병을 중단하기로 공동 결정했다. 양사는 제품과 사업, 시장의 차이를 규제 당국에 설명했지만 승인 가능성이 없다고 판단했다. Figma는 독립 기업으로 남아 AI와 협업 기능을 강화하고, 향후 Adobe와는 사용자에게 도움이 되는 방식으로 협력할 계획이다. ## 인수합병 중단과 규제 승인 불확실성 - Figma와 Adobe는 15개월 동안 전 세계 규제 당국의 심사를 받았다. - 양사는 두 기업의 사업·제품·시장 사이에 차이가 있다는 점을 수천 시간에 걸쳐 설명했다. - 그러나 제안된 인수의 규제 승인을 받을 현실적인 경로가 없다고 판단해 거래를 종료했다. - 인수합병은 양사의 사용자 커뮤니티에 더 큰 가치를 제공하려는 목적에서 시작됐지만, 최종적으로 실현되지 못했다. ## 독립 기업으로서의 Figma - Figma는 Adobe에 인수되지 않고 독립적인 기업으로 계속 운영된다. - 인수 심사 기간의 불확실성 속에서도 제품 개발과 조직 확장을 지속했다. - 향후 Adobe와 경쟁만 하는 것이 아니라 사용자에게 도움이 되는 협력 기회를 모색할 예정이다. - 영국과 아시아에 새로운 거점을 열고, 500명 이상의 직원을 추가했다. ## 지난 15개월간의 제품 발전 - **FigJam AI 기능**을 출시해 시각적 협업과 아이디어 구상에 AI를 활용할 수 있도록 했다. - **Dev Mode**를 도입해 개발자가 디자인 파일에서 필요한 정보와 도구에 더 쉽게 접근하도록 개선했다. - **Variables**와 **Advanced Prototyping**을 추가해 디자인 시스템과 프로토타이핑 기능을 확장했다. - AI 스타트업 **Diagram**을 인수해 디자인 과정에서 AI가 담당할 수 있는 영역을 넓혔다. - Config 2023 행사를 통해 디자인과 개발이 하나의 흐름으로 연결되는 제품 방향을 제시했다. ## Figma의 장기 비전 - 창업 당시의 목표는 “상상과 현실 사이의 간극을 없애는 것”이었다. - 디지털 경제의 확대와 AI 기술의 발전으로 이 목표가 더욱 중요하고 실현 가능해졌다고 설명한다. - Figma는 누구나 하나의 멀티플레이어 캔버스에서 아이디어 구상부터 디자인, 개발, 제품 출시까지 진행할 수 있도록 만드는 데 집중할 예정이다. - 디자인 도구를 넘어 디지털 제품 제작 전 과정을 지원하는 플랫폼으로 발전하려는 방향이다. 이번 결정은 대형 인수합병보다 Figma의 독립성과 제품 혁신을 유지하는 결과로 이어졌다. 사용자 입장에서는 Figma가 AI, 개발자 도구, 협업 기능을 중심으로 계속 확장되는지 지켜보는 것이 중요하다.

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

요점: 제2호 |

Figma의 뉴스레터 「Rework your work」는 기존 업무 방식을 재검토하고 더 나은 제품과 협업을 만드는 방법을 소개한다. 핵심은 거대한 기능보다 반복되는 작은 개선을 중시하고, AI·프로토타이핑·커뮤니티 도구를 활용해 제품 개발의 장벽을 낮추는 것이다. 디자이너에게는 자신의 가치를 증명하려 하기보다 결과물로 말하고, 새로운 방식으로 실험하라는 메시지를 전한다. ### 작은 개선이 만드는 큰 변화 - 사용자가 자주 수행하는 작은 행동을 개선하는 것이 거의 사용되지 않는 화려한 기능을 추가하는 것보다 더 큰 긍정적 영향을 줄 수 있다. - Figma는 품질 향상과 버그 수정, 사용자의 시간을 절약하는 변경을 제품 개발의 기본적인 습관으로 본다. - 좋은 제품 경험은 거대한 혁신보다 세부적인 배려와 사용자의 필요를 미리 파악하는 데서 만들어진다. ### FigJam과 생성형 AI의 결합 - Figma는 FigJam에 생성형 AI를 도입해 시각적 협업의 접근성을 높였다. - AI 기능은 다음과 같은 작업을 지원한다. - 맞춤형 템플릿 생성 - 다이어그램 작성 - 협업 문서 및 보드 내용 요약 - 스티키 노트 자동 분류 - 이를 통해 제품 팀이 계획을 세우고, 의견을 동기화하며, 브레인스토밍하는 과정을 더 쉽게 만들 수 있다. - 목표는 제품의 진입 장벽을 낮추는 동시에 사용자가 만들 수 있는 결과의 범위를 넓히는 것이다. ### 프로토타이핑을 조직의 문화로 만들기 - 프로토타이핑은 디자인 결과물을 보여주기 위한 마지막 단계가 아니라 제품 개발 전반에 필요한 과정이다. - 아이디어를 구체적인 형태로 만들어 동료들이 직접 탐색하고 반응하며 수정할 수 있게 한다. - 디자이너의 주도권을 강화하고, 팀 전체가 더 이른 시점에 유용한 통찰을 얻도록 돕는다. - 개발 전에 가설을 검증할 수 있어 업무 흐름을 간소화하고 효율성을 높인다. ### Creator Fund와 커뮤니티 창작자 - Figma의 Creator Fund는 커뮤니티를 위해 무료 위젯, 플러그인, 파일을 만드는 창작자를 지원하는 보조금 프로그램이다. - 소개된 프로젝트에는 다음과 같은 도구가 포함된다. - 몰입형 환경 제작 키트 - 디자인을 코드로 변환하는 플러그인 - 텍스트 애니메이션 도구 - 이러한 리소스는 Figma Community 구성원들이 별도의 복잡한 도구 없이 창작할 수 있도록 돕는다. - 첫 번째 지원 cohort의 프로젝트들은 거의 백만 명의 사용자가 Figma에서 창작하는 데 활용되었다. ### 디자이너의 태도와 업계 전망 - 디자이너는 자신의 가치를 끊임없이 증명하려 하기보다 작업 자체가 역량을 보여주도록 해야 한다. - Figma의 디자이너 보고서에 따르면 디자이너의 69%가 취업 전망이 개선되었다고 느꼈다. - 이는 디자인 직무의 가능성이 여전히 상승세에 있다는 신호로 제시된다. - 글은 디자이너들에게 기존 방식에 머무르지 말고, 실험과 결과물을 통해 새로운 업무 방식을 만들어가라고 권한다. 작은 사용성 개선을 꾸준히 실행하고, 프로토타입으로 아이디어를 조기에 검증하며, AI와 커뮤니티 도구를 적절히 활용하는 것이 실용적인 접근이다. 기술 도입 자체보다 팀의 협업과 창작 과정을 실제로 개선하는지를 기준으로 선택하는 것이 중요하다.

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

프로토타이핑 문화를 조성

프로토타이핑은 더 이상 개발 직전의 선택적 작업이 아니라, 제품 개발 전반에 통합해야 할 핵심 활동이다. 인터랙티브한 프로토타입은 정적 디자인에서 놓치기 쉬운 내비게이션과 사용자 경험 문제를 조기에 발견하고, 개발 전에 아이디어의 가치를 검증하게 한다. 조직 전체가 프로토타이핑을 일상적인 업무 방식으로 받아들이면 실험과 의사결정이 빨라지고 더 나은 제품을 만들 수 있다. ## 프로토타이핑의 역할과 가치 - 프로토타입은 제품의 형태와 동작을 미리 보여주는 모형 또는 데모다. - 인터랙션과 경험을 충분히 높은 완성도로 재현해, 실제 개발에 들어가기 전에 아이디어를 평가할 수 있다. - 정적 화면만으로는 발견하기 어려운 내비게이션 문제, 사용성 장애, 사용자 테스트상의 문제를 조기에 드러낸다. - 개발 전에 문제를 수정하므로 엔지니어링 시간과 불필요한 개발 사이클을 줄인다. - 디자인을 단순한 시각 결과물이 아니라 실제 제품 경험으로 전환한다. ## 빠른 실험과 아이디어 검증 - 여러 아이디어를 개발 리소스를 추가로 투입하지 않고 빠르게 만들고 검증할 수 있다. - 초기에는 다양한 방향으로 폭넓게 탐색한 뒤, 가능성이 높은 해법으로 좁혀 갈 수 있다. - 이러한 과정은 더 창의적이고 기존 방식에서 벗어난 사용자 경험을 만드는 데 도움이 된다. - 프로토타입은 아이디어를 상위 의사결정자에게 구체적으로 보여주는 증거가 되어, 프로젝트 승인과 설득을 앞당긴다. - 디자이너는 인터랙티브한 결과물로 자신의 의도를 효과적으로 전달하고 제품 및 비즈니스 의사결정에 영향력을 행사할 수 있다. ## 프로토타이핑 문화의 확산 - 프로토타이핑 문화는 과거 디자인 시스템이 발전한 과정과 비슷하게 확산되고 있다. - 도구 접근성이 높아지고 교육 프로그램이 생기면서 더 많은 팀이 프로토타이핑을 업무에 활용할 수 있게 됐다. - Lyft는 정적 디자인을 넘어 동영상, GIF, 인터랙티브 프로토타입을 활용하고, 사용자 피드백을 제품 리뷰에 빠르게 반영하는 사례로 소개된다. - 프로토타이핑을 중시하는 조직은 혁신과 디자인을 중요하게 여긴다는 신호를 제공하며, 우수한 디자인 인재를 끌어들이는 데도 도움이 된다. ## 조직 차원의 정착 조건 - 프로토타이핑을 익히고 실천할 수 있도록 시간과 리소스를 공식적으로 배정해야 한다. - 이를 최종 단계의 선택 사항이 아니라 디자인 프로세스에 자연스럽게 포함된 필수 단계로 바꿔야 한다. - 실무자는 프로토타이핑 역량을 발전시키고, 리더십은 효율성과 의사결정 개선에 미치는 가치를 인정해야 한다. - 리더는 팀이 프로토타이핑을 프로세스에 포함하도록 명시적으로 요구하고, 실제로 작업할 시간과 환경을 제공해야 한다. - 관심 있는 직원들을 위한 전문 프로그램을 운영하고, 습득한 지식을 교육·개발 체계와 주요 리뷰 과정에 확장할 수 있다. - 실무자와 리더 중 한쪽만 동의하면 문화로 정착하기 어렵기 때문에 조직 전반의 공감대가 필요하다. ## 제품 개발 프로세스의 변화 - 프로토타이핑을 앞단에 배치하면 제품 개발은 기존의 선형적인 순서에서 더 반복적이고 탐색적인 과정으로 바뀐다. - 잠재적 장애물을 빠르게 발견하고 여러 대안을 평가할 수 있어, 이미 알려진 문제를 피하면서 해결책에 집중할 수 있다. - 프로토타이핑 문화는 디자이너의 역할뿐 아니라 제품·엔지니어링·리더십 간 협업 방식과 의사결정 구조 전체를 변화시킨다. - 결과적으로 개발 착수 후 수정하는 비용보다, 개발 전 실험하고 학습하는 비용을 우선하게 된다. 실무적으로는 모든 기능에 높은 완성도의 프로토타입을 만들기보다, 위험이 큰 인터랙션과 사용자 경험부터 짧게 실험하는 것이 효과적이다. 이를 정기 리뷰와 교육 과정에 포함하고 리더가 시간을 보장해야 프로토타이핑이 일회성 산출물이 아니라 조직의 기본 업무 방식으로 자리 잡을 수 있다.

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