techlist.io
KREN

Techlist.io - 한국 테크 블로그 큐레이터

figma3분 읽기큐레이션 요약

마이크로소프트, 피

Microsoft Dynamics 365 for Talent 디자인팀은 Figma API와 웹훅을 활용해 디자인-개발 핸드오프를 자동화했다. 디자이너가 파일의 새 버전을 저장하면 자동으로 Pull Request가 생성되고, 디자인·개발팀의 검토와 승인 후 변경 사항이 제품에 반영된다. 그 결과 기존 업무 흐름을 약 70% 줄이고, 디자이너와 엔지니어가 각자의 핵심 업무에 더 집중할 수 있게 됐다. ## 대규모 조직에서 발생한 디자인 핸드오프 문제 - Microsoft는 사내 해커톤인 **OneWeek**를 매년 개최하며, 직원들이 기존 업무에서 벗어나 업무 개선 아이디어를 실험하도록 지원한다. - Dynamics 365 for Talent 팀은 Fluent Design System을 확장하면서 새로운 기능보다 시각적 디자인 요소를 확장하고 정교화하는 데 집중했다. - 디자이너와 엔지니어 비율을 약 **1:10**으로 유지하려 했지만, 디자인 변경 사항을 개발에 전달하는 과정이 병목이 됐다. - 디자이너는 작은 변경 사항을 반영하기 위해 요청을 설명하고 우선순위를 확보해야 했고, 엔지니어는 대규모 기업 업무 속에서 각 요청의 처리 순서를 조정해야 했다. - 이 때문에 단일 디자인 요소를 실제 제품에 배포하는 데 **최대 일주일 이상**이 걸리기도 했다. ## Figma API를 활용한 OneWeek 프로젝트 - 팀은 Figma를 적극적으로 사용하고 있었기 때문에, Figma의 웹 기반 API가 핸드오프 문제를 해결할 수 있다고 판단했다. - OneWeek 기간 동안 디자인 파일의 변경을 개발 워크플로와 연결하는 자동화 시스템을 구축했다. - 핵심은 Figma 파일의 변경을 감지하는 **Figma 웹훅(webhook)** 이었다. - 디자이너가 파일의 새 버전을 저장하면 웹훅이 이를 감지하고 후속 개발 프로세스를 자동으로 시작한다. ## 변경 사항을 Pull Request로 자동 전환 - 새 디자인 버전이 저장되면 자동으로 디자인·개발팀의 검토를 위한 **Pull Request**가 생성된다. - 양 팀은 Pull Request를 통해 변경 내용을 확인하고 승인할 수 있다. - 승인된 변경 사항은 엔지니어가 커밋하고 제품에 반영한다. - 기존처럼 디자이너가 개별 요청을 전달하고 엔지니어가 수동으로 우선순위를 정하는 대신, 디자인 변경이 코드 협업 흐름에 직접 연결된다. - 디자인 파일의 버전 관리와 코드 리뷰 프로세스를 결합해 책임과 승인 절차도 명확해졌다. ## 자동화가 가져온 효과 - 팀에 따르면 새로운 프로세스는 전체 업무 흐름을 **약 70% 단축**할 수 있었다. - 디자이너는 반복적인 설명과 요청 조율보다 디자인 작업에 더 많은 시간을 쓸 수 있게 됐다. - 엔지니어는 단순한 핸드오프 처리에서 벗어나 개발과 기술적 문제 해결에 집중할 수 있었다. - 디자인 변경 사항의 배포 속도가 빨라져, 조직 규모가 큰 환경에서도 디자인 시스템을 효율적으로 확장할 수 있는 기반이 마련됐다. 디자인과 개발 사이의 반복적인 전달 업무가 병목이라면, 디자인 도구의 API·웹훅을 코드 저장소 및 Pull Request 흐름과 연동하는 방식을 고려할 만하다. 특히 자동화만 도입하기보다 버전 저장, 검토, 승인, 커밋까지의 책임과 절차를 함께 정의해야 효과를 안정적으로 유지할 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템pull-requestsfigma-apiwebhooks+2
figma3분 읽기큐레이션 요약

월풀을 담당하는 에이전

Aisle Rocket Studios(ARS)는 여러 사무실과 원격 인력으로 구성된 환경에서 분산된 디자인 파일과 협업 단절 문제를 Figma로 해결했다. Whirlpool 계정 팀은 Figma를 단일 작업 공간이자 협업의 기준점으로 삼아 기획·카피·디자인·개발·고객 검토를 브라우저 안에서 진행했고, 결과적으로 더 빠르고 창의적인 프로세스를 구축했다. 이 방식은 이후 ARS 전체의 표준 협업 방식으로 확산됐다. ## 분산된 팀의 파일 관리 문제 - ARS는 Whirlpool, Maytag, Sears 등 25개 이상의 브랜드를 담당하며 4개 사무실과 원격 인력으로 운영됐다. - Whirlpool 프로젝트에 긴급 투입된 크리에이티브 디렉터 Matt Carson은 Sketch, Photoshop 등 서로 다른 형식의 파일을 전달받았다. - 파일이 여러 도구와 장소에 흩어져 있어 중앙화된 작업 방식이나 일관된 프로세스가 없었다. - ARS는 디자이너와 개발자를 분리된 역할이 아니라, 서로 다른 기술을 가진 하나의 크리에이티브 팀으로 보려 했다. ## Figma를 단일 협업 공간으로 도입 - Whirlpool 계정 팀은 Figma를 새로운 ‘단일 정보 출처(source of truth)’로 정하고 기존 작업 도구와 워크플로를 빠르게 통합했다. - 실시간 멀티플레이어 기능을 이용해 서로 다른 시간대와 지역의 구성원이 같은 파일에서 동시에 작업했다. - 팀 내부 회의, 아이디어 구상, 피드백 수집, 프로토타입 공유까지 하나의 파일 안에서 진행했다. - 고객도 별도 로그인이나 개발 작업 없이 작동이 시뮬레이션된 디지털 콘셉트를 확인하고 공유할 수 있었다. - 에이전시와 고객이 실시간으로 수정 사항을 확인하면서 검토와 승인 과정이 짧아졌다. ## 협업이 창의성을 높이는 방식 - 작가, 디자이너, 개발자가 서로 다른 프로그램과 공간에서 작업하지 않고 동일한 환경에서 의견을 주고받게 됐다. - 아이디어를 함께 브레인스토밍하고 즉시 수정할 수 있어 반복 작업의 속도와 창의성이 향상됐다. - Figma는 단순한 디자인 제작 도구가 아니라 기획부터 검토까지 연결하는 협업 플랫폼으로 활용됐다. - ARS는 크리에이티브 프로세스의 80%를 브라우저에서 수행한다는 원칙을 실현할 수 있었다. ## 카피라이터와 개발자를 포함한 포용적 디자인 - 카피라이터는 완성된 디자인에 문구를 나중에 삽입하는 대신, 초기 디자인 단계부터 직접 카피를 수정하고 논의했다. - 카피가 디자인의 부수적인 요소가 아니라 독립적인 디자인 요소로 다뤄졌다. - 개발자는 정적인 디자인 파일을 전달받은 뒤 뒤늦게 문제를 발견하는 대신, 초기 단계부터 파일을 열람할 수 있었다. - 개발 가능성을 초기에 검토할 수 있어 디자인과 코드 사이의 반복적인 수정과 커뮤니케이션이 줄었다. - 역할별 참여 장벽이 낮아지면서 디자인 프로세스가 더 민주적이고 포괄적으로 바뀌었다. ## 소규모 팀에서 전사 표준으로 확산 - Whirlpool 팀은 도구를 통합하고 복잡한 업무 흐름과 파일을 중앙화하면서 더 빠르고 효율적으로 일했다. - 고객 측에서도 협업으로 시간과 비용을 절감하면서 창의성을 유지할 수 있었다. - 성과를 본 다른 ARS 구성원들이 이 방식을 도입하기 시작했고, Figma는 조직 전체의 표준으로 자리 잡았다. - ARS는 개방적인 협업 디자인을 기본 방식으로 삼고 전 디자인팀의 Figma 전환을 추진했다. ## 디자인 시스템으로의 확장 - Whirlpool 팀은 디지털 브랜드 전반의 일관성을 높이기 위해 디자인 시스템 구축을 다음 과제로 삼았다. - 원자적 디자인(Atomic Design) 원칙에 따라 기본 구성 요소를 Figma에서 규격화할 계획이다. - 완성된 요소는 팀 라이브러리에 저장해 브랜드 디자인의 단일 기준으로 활용하려 했다. - 이를 통해 프로젝트마다 디자인 요소를 새로 만들지 않고 재사용성과 일관성을 높일 수 있다. 분산된 팀이라면 파일 형식과 도구를 먼저 통합하고, 기획자·카피라이터·디자이너·개발자가 초기 단계부터 같은 작업 공간에서 협업하도록 구성하는 것이 효과적이다. 이후 반복적으로 사용하는 UI 요소를 디자인 시스템과 공유 라이브러리로 관리하면 협업 속도와 결과물의 일관성을 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
Figma디자인 시스템프로토타이핑sketch+3
figma2분 읽기큐레이션 요약

피그마 기능 하이라이트

Figma의 컴포넌트 오버라이드는 디자인 시스템의 일관성을 유지하면서도 각 인스턴스를 상황에 맞게 수정할 수 있게 해준다. 인스턴스를 분리하지 않고 색상, 텍스트, 스타일 등을 변경할 수 있으며, 원본 컴포넌트가 업데이트되면 수정되지 않은 속성은 계속 상속된다. 따라서 반복되는 UI를 효율적으로 관리하면서도 다양한 상태와 콘텐츠를 표현할 수 있다. ## 디자인 시스템에서 유연성과 일관성의 균형 - 리스트, 아바타, 상태 표시줄처럼 여러 곳에서 반복되는 기본 컴포넌트는 일관된 디자인을 유지해야 한다. - 동시에 리스트의 텍스트, 상태 표시줄의 색상처럼 사용 맥락에 따라 달라지는 부분도 필요하다. - 모든 변형을 처음부터 새로 만들면 작업량이 늘고 디자인 시스템과의 연결도 끊어진다. - 오버라이드는 원본 컴포넌트의 구조는 유지하면서 인스턴스별 차이만 적용하는 방식이다. ## 컴포넌트 오버라이드의 작동 방식 - 인스턴스를 원본 컴포넌트에서 분리하지 않고 속성을 재정의할 수 있다. - 원본 컴포넌트를 수정하면 각 인스턴스는 오버라이드되지 않은 변경 사항을 계속 상속한다. - 인스턴스별로 변경 가능한 속성에는 다음이 포함된다. - 색상과 채우기 - 텍스트와 텍스트 정렬 - 글꼴 및 스타일 - 선의 추가, 삭제, 수정 - 불투명도와 블렌드 모드 - 그림자와 블러 같은 효과 - 요소의 표시·숨김 상태 ## 실제 활용 사례 - **정보 목록 만들기** - 하나의 셀 컴포넌트를 만든 뒤 각 인스턴스의 텍스트를 오버라이드한다. - 할 일 목록이나 대시보드 테이블처럼 서로 다른 데이터를 일관된 형태로 표현할 수 있다. - **버튼 상태 표현하기** - 하나의 버튼 컴포넌트를 기반으로 기본, 호버, 클릭, 비활성 상태를 만든다. - 배경색, 텍스트 불투명도, 그림자 등을 상태별로 변경할 수 있다. - **주소록 아바타 구성하기** - 원형 컴포넌트의 채우기를 각 인물의 사진으로 교체한다. - 아바타의 공통 형태는 유지하면서 이미지 콘텐츠만 다르게 적용할 수 있다. ## 오버라이드를 활용한 케일리도스코프 - 하나의 일러스트를 프레임에 그리고 컴포넌트로 변환한다. - 인스턴스를 복제해 오른쪽에 배치한 뒤 수평 반전한다. - 다시 복제해 아래쪽에 배치하고 수직 반전한다. - 남은 공간에 인스턴스를 하나 더 배치해 2×2 형태를 만든다. - 왼쪽 위의 원본 컴포넌트 안에서 그림을 수정하면 연결된 인스턴스들이 함께 바뀌며 대칭 패턴이 만들어진다. 컴포넌트 오버라이드는 공통 구조와 스타일은 원본에 맡기고, 콘텐츠와 상태처럼 달라져야 하는 부분만 인스턴스에서 수정하는 데 적합하다. 반복 UI를 컴포넌트로 만든 뒤 필요한 속성만 오버라이드하면, 유지보수성과 디자인의 다양성을 함께 확보할 수 있다.

원문 읽기(새 탭에서 열림)
Figma디자인 시스템프로토타이핑사용자 인터페이스+1
figma3분 읽기큐레이션 요약

피그마 기능 하이라이트

Figma의 Sketch Import 기능은 Sketch 사용자가 기존 작업물을 잃지 않고 Figma로 전환하도록 돕는 기능이다. Sketch 파일의 페이지, 크기 조정 제약, 벡터, 심볼 등을 높은 정확도로 보존하며, 여러 운영체제와 협업 환경을 연결한다. 글은 이 기능이 단순한 마이그레이션 도구를 넘어 Sketch와 Figma를 오가며 협업할 수 있게 하는 핵심 기능이라고 강조한다. ## Sketch Import이 필요한 이유 - **Figma로의 초기 전환 지원** - Sketch에서 Figma로 옮기는 사용자가 기존 디자인을 처음부터 다시 만들 필요가 없다. - 과거 Photoshop에서 Sketch로 전환할 때와 같은 큰 작업 부담을 줄여준다. - 기존 파일을 안정적으로 가져올 수 있어 새로운 도구를 시험하기 쉽다. - **운영체제가 다른 팀의 협업** - Sketch는 Mac 전용이지만 Figma는 다양한 운영체제에서 사용할 수 있다. - Windows나 Linux를 사용하는 개발자도 Sketch 파일을 Figma로 가져와 디자인 사양을 확인할 수 있다. - 서로 다른 디자인 도구를 사용하는 팀원들이 동일한 작업물을 기준으로 협업할 수 있다. - **Sketch와 Figma를 병행하는 작업 방식** - 디자이너가 Sketch에서 작업한 뒤 Figma로 파일을 옮겨 디자인 리뷰나 원격 협업을 진행할 수 있다. - Figma의 댓글 기능을 활용해 팀원 및 외부 이해관계자와 의견을 주고받을 수 있다. - 한 가지 도구만 강제하지 않고 작업 목적에 따라 도구를 선택할 수 있다. ## 높은 변환 정확도 - Sketch Import은 Sketch 파일의 구조와 시각적 요소를 최대한 보존하도록 설계되었다. - 다음과 같은 요소를 가져올 수 있다. - 페이지 구조 - 크기 조정 제약 조건 - 벡터 데이터 - Sketch의 심볼 - Sketch의 심볼은 Figma에서 **컴포넌트**로 변환된다. - 따라서 디자인 시스템을 구축하거나 유지하는 조직도 기존 컴포넌트 구조를 활용할 수 있다. - 글에서는 실제 사용자가 Angle 파일을 가져온 사례를 통해 벡터와 컴포넌트가 거의 완벽하게 유지된다고 소개한다. - 변환 과정에서 문제가 발생하면 Figma 앱 내부의 지원 위젯을 통해 문의할 수 있다. ## Sketch 파일을 가져오는 방법 - Figma 파일 공간에 Sketch 파일을 **드래그 앤 드롭**한다. - Figma 툴바의 가져오기 기능을 사용한다. - 단축키를 사용한다. - macOS: `Command + Shift + K` - Windows: `Control + Shift + K` - 가져오기가 완료되면 가져온 이미지와 디자인 요소가 포함된 새로운 Figma 파일이 자동으로 생성된다. ## 커뮤니티 중심의 기능 소개 - Figma는 새 기능 출시 소식이나 릴리스 노트가 쉽게 묻힐 수 있다는 점을 언급하며, 이미 출시된 유용한 기능을 다시 소개한다. - Sketch Import은 2015년 6월에 출시됐지만 이후에도 사용자들이 계속 새롭게 발견하는 기능으로 소개된다. - 다음에 어떤 기능을 다룰지는 Figma 커뮤니티의 의견을 바탕으로 결정하려 했다. Sketch Import은 기존 Sketch 자산을 Figma로 옮겨야 하는 개인과 팀에게 유용한 마이그레이션 수단이다. 특히 디자인 시스템, 운영체제가 다른 협업 환경, 원격 리뷰가 필요한 프로젝트라면 파일을 가져온 뒤 페이지와 컴포넌트가 제대로 변환되는지 확인하고 적극적으로 활용하는 것이 좋다.

원문 읽기(새 탭에서 열림)
Figma디자인 시스템사용자 경험sketch+2
figma4분 읽기큐레이션 요약

런던 예술 대학교의 디자인 시스템

UAL은 6개 단과대학의 독립적인 정체성 때문에 디지털 경험이 일관되지 않았지만, 웹사이트 개편 과정에서 협업 도구를 Figma로 전환하며 자연스럽게 디자인 시스템을 구축했다. 실시간 공동 편집과 중앙화된 라이브러리는 디자인·개발·외부 에이전시 간의 소통을 개선했고, 결과적으로 웹사이트를 더 빠르고 일관되게 제작할 수 있게 했다. 디자인 시스템은 단순한 컴포넌트 모음이 아니라 여러 채널과 대학 조직을 연결하는 공통 언어로 발전했다. ## 조직 구조가 만든 디자인 일관성 문제 - UAL은 2004년 공식 연합체가 되었으며, 현재 6개 대학으로 구성되어 있다. - 각 대학은 오랜 역사와 고유한 브랜드 정체성을 가지고 있어, 웹사이트마다 서로 다른 스타일을 적용하려는 경향이 있었다. - 그 결과 UAL의 디지털 경험은 채널과 대학별로 분리되고 일관성이 부족했다. - 2017년부터 UX 팀은 디지털 트랜스포메이션 프로그램의 일환으로 사용자 중심의 핵심 디지털 경험을 재설계했다. ## Sketch 협업의 한계와 Figma 전환 - 기존 Sketch 기반 작업에서는 여러 사람이 같은 파일에서 원활하게 협업하기 어려웠다. - 14개 캠퍼스에 흩어진 내부 구성원과 외부 에이전시가 함께 일하면서 다음 문제가 발생했다. - 파일 버전 관리 혼란 - 파일 동기화에 소요되는 시간 - 반복적인 커뮤니케이션과 확인 절차 - 디자인 팀과 개발 팀 사이의 단절 - Figma는 브라우저만 있으면 어디서든 접근할 수 있고, 실시간 공동 편집을 지원했다. - Sketch 파일을 간단히 가져올 수 있어 웹사이트 프로젝트 중간에도 도구를 전환할 수 있었다. - 모든 이해관계자가 하나의 중앙 파일을 기준으로 작업하면서 투명성이 높아지고, 디자인과 개발 간 협업이 개선되었다. ## 웹사이트 개편에서 디자인 시스템으로 확장 - 팀은 웹사이트를 처음부터 구축해야 했기 때문에, 반복 작업을 줄이기 위해 디자인 시스템을 우선적으로 만들기로 했다. - Figma의 컴포넌트와 협업 기능 덕분에 디자인 시스템 구축이 별도의 대형 프로젝트가 아니라 웹사이트 제작 과정에서 자연스럽게 진행되었다. - 디자인 시스템은 웹사이트용 컴포넌트뿐 아니라 여러 채널에 동일한 스타일과 기능을 적용하기 위한 기반으로 정의되었다. - 목표는 대학별로 달랐던 컴포넌트를 조화시키고 제작 프로세스를 표준화하는 것이었다. ## 워크숍을 통한 요구사항과 불일치 파악 - UX 팀은 학생과 비즈니스 파트너를 대상으로 워크숍을 진행했다. - 워크숍의 목적은 다음과 같았다. - 디자인 시스템에 필요한 핵심 기능 파악 - 사용 중인 모든 UI 컴포넌트 목록화 - 대학과 채널별 디자인 차이 및 불일치 발견 - 기존 스타일 가이드를 실제 디지털 자산과 재사용 가능한 컴포넌트로 변환했다. ## 유연한 브랜드 시스템 구축 - UAL의 복잡한 브랜드 구조 때문에 디자인 시스템은 하나의 고정된 스타일만 강제할 수 없었다. - 서로 다른 색상, 타이포그래피, 브랜드 개성을 수용할 수 있도록 유연하게 설계했다. - Figma 팀 라이브러리를 활용해 모든 구성원이 기기나 위치에 관계없이 최신 브랜드 가이드와 자산을 사용할 수 있게 했다. - Figma Styles를 사용하면 색상, 텍스트, 효과 스타일을 분리해 관리할 수 있어 브랜드 변형을 더 유연하게 적용할 수 있었다. - 결과적으로 디자인 시스템은 정적인 문서가 아니라 지속적으로 업데이트되는 ‘살아 있는’ 브랜드 가이드가 되었다. ## 컴포넌트 기반의 빠른 개발 - 디자인 시스템의 컴포넌트를 조합해 기본 페이지를 템플릿으로 만들었다. - 개발 팀은 이 템플릿을 활용해 새로운 페이지를 빠르게 생성할 수 있었다. - Figma에서 디자인과 컴포넌트 구조를 함께 확인할 수 있어, 개발자는 디자인이 코드로 어떻게 구현될지 즉시 파악할 수 있었다. - 디자이너와 개발자가 동일한 시스템을 기준으로 작업하면서 구현 속도와 협업 효율이 높아졌다. ## 실용적인 시사점 - 디자인 시스템은 처음부터 별도의 거대한 프로젝트로 계획하지 않아도, 반복되는 문제를 해결하는 과정에서 자연스럽게 시작할 수 있다. - 여러 조직이나 브랜드가 공존하는 환경에서는 일관성만 강제하기보다 공통 기반과 개별 표현의 유연성을 함께 설계해야 한다. - 최신 컴포넌트와 스타일을 중앙 라이브러리로 관리하고 디자인·개발·이해관계자가 함께 사용하면, 제작 속도와 결과물의 일관성을 동시에 높일 수 있다.

원문 읽기(새 탭에서 열림)
Figma디자인 시스템사용자 경험웹 개발+2
figma3분 읽기큐레이션 요약

프로토타이핑 위크의

Figma는 프로토타입이 실제 제품처럼 반응하도록 다양한 사용자 입력 기반의 **Interactions** 기능을 공개했다. 클릭·호버·누르기뿐 아니라 마우스 진입/이탈과 누름·해제, 일정 시간 후 전환까지 지원해 사용자 테스트의 현실성을 높인다. 또한 Prototyping Week 동안 가로형 디바이스 프레임, 외부 URL 연결, 뒤로 가기 전환도 함께 출시했다. ## 사용자 입력에 반응하는 Interactions - Figma에서 지원하는 상호작용은 다음과 같다. - **On Click**: 클릭 시 화면이나 상태 전환 - **While Hovering**: 마우스를 올리고 있는 동안 상태 변경 - **While Pressing**: 누르고 있는 동안 눌림 상태 표시 - **Mouse Enter / Mouse Leave**: 마우스가 영역에 들어오거나 나갈 때 동작 - **Mouse Down / Mouse Up**: 마우스 버튼을 누르는 순간과 놓는 순간의 동작 - **After Delay**: 지정한 시간이 지나면 자동 전환 - 디바이스 프레임을 선택한 경우 일부 상호작용은 모바일 환경에 맞춰 **On Tap, Touch Down, Touch Up**으로 표시된다. ## 버튼 상태와 메뉴 동작 구현 - **On Click**, **While Hovering**, **While Pressing**은 버튼이나 목록 항목의 상태를 표현하는 데 유용하다. - 예를 들어 메뉴 항목에 마우스를 올리면 배경색을 바꾸어 실제 웹 UI의 호버 상태를 재현할 수 있다. - **Mouse Enter**와 **Mouse Leave**를 사용하면 드롭다운 메뉴처럼 더 세밀한 동작을 구현할 수 있다. - Mouse Enter로 메뉴를 열면 사용자가 다른 상호작용을 수행할 때까지 메뉴가 열린 상태를 유지하도록 만들 수 있다. - 이러한 기능은 단순한 화면 연결을 넘어, 실제 제품의 입력 피드백과 상태 변화를 프로토타입에 반영한다. ## After Delay를 활용한 자동 전환 - **After Delay**는 특정 시간이 지나면 자동으로 다음 화면으로 이동시킨다. - 알림 표시, 자동 리디렉션, 일정 시간이 지난 뒤 나타나는 화면 등을 표현할 수 있다. - 이 전환은 특정 하위 레이어가 아니라 프레임 전체와 연결되므로, 한 화면에서 다른 화면으로만 설정할 수 있다. ## Prototyping Week의 추가 출시 기능 ### 가로형 디바이스 프레임 - 기존 발표용 디바이스 프레임 기능을 가로 방향 화면에도 적용할 수 있게 했다. - 모바일 가로 화면이나 태블릿처럼 sideways로 보는 디자인을 실제 기기 형태에 가깝게 보여준다. ### Clickable URLs - 프로토타입 프레임에서 외부 웹사이트나 다른 Figma 파일로 연결되는 링크를 만들 수 있다. - 예를 들어 발표 자료 마지막 화면에서 개인 웹사이트나 포트폴리오로 바로 이동시킬 수 있다. ### Back Transitions - 사용자가 이전 화면으로 돌아갈 수 있는 뒤로 가기 전환을 제공한다. - 하나의 화면이 여러 경로에서 접근되더라도 화면을 복제하거나 경로별 전환을 따로 만들 필요가 없다. - 현재 프레임으로 이동할 때 애니메이션 전환을 사용했다면, 뒤로 갈 때 해당 애니메이션이 역방향으로 재생된다. ## 향후 방향 - Figma 팀은 추가 프로토타이핑 기능을 개발 중이며, 당시 커뮤니티에서는 특히 **오버레이(Overlays)** 기능에 대한 요구가 많았다. - Figma는 사용자 의견과 리서치를 바탕으로 프로토타이핑 기능의 우선순위와 형태를 발전시키고자 했다. 실무에서는 기본 화면 이동만 연결하기보다 호버·눌림·드롭다운·자동 전환을 함께 구성하는 것이 좋다. 이를 통해 실제 사용 흐름에 가까운 프로토타입을 만들고, 개발 전에 인터랙션과 사용자 경험을 더 정확하게 검증할 수 있다.

원문 읽기(새 탭에서 열림)
Figma프로토타이핑interaction-designuser-interface-design+2
figma2분 읽기큐레이션 요약

#FigmaTip 라운드업

Figma의 10번째 팁 모음은 디자이너 Charli Marie의 리뷰에서 소개된, 작업 속도와 파일 정리 효율을 높이는 기능들을 정리한 글이다. 핵심은 레이어 단축키, 빈 그룹 자동 삭제, 속성별 복사, 이미지 fill 설정, 벡터 네트워크 등을 활용하면 Sketch나 Illustrator를 열지 않고도 더 빠르고 깔끔하게 작업할 수 있다는 것이다. ## 레이어 순서 조정 단축키 - `Command + [` 및 `Command + ]`로 선택한 레이어를 앞뒤로 이동할 수 있다. - 레이어 패널에서 직접 드래그하지 않아도 되므로 디자인 중 요소의 순서를 빠르게 바꿀 수 있다. - 메뉴에 단축키가 표시되어 있어 잊어버렸을 때 확인하기 쉽다. - Photoshop과 유사한 방식이라 기존 사용자도 쉽게 익힐 수 있다. ## 빈 그룹 자동 삭제 - 그룹 안의 모든 요소를 삭제하면 해당 그룹도 자동으로 사라진다. - 내용이 없는 그룹을 수동으로 찾아 삭제할 필요가 없다. - 요소를 다른 곳으로 옮긴 뒤 빈 그룹이 남아 파일이 지저분해지는 문제를 줄여준다. - 결과적으로 레이어 패널을 더 깔끔하게 유지할 수 있다. ## 개별 속성만 복사하기 - 한 도형의 속성을 다른 도형에 복사할 때 전체 속성 또는 일부 속성만 선택할 수 있다. - 복사 가능한 예시는 다음과 같다. - Fill - Font - Stroke - 기존 디자인에서 잘 설정된 특정 속성만 다른 요소에 적용할 수 있다. - 전체 스타일을 덮어쓰지 않고 필요한 부분만 재사용할 수 있어 반복 작업이 빨라진다. ## 마스크 대신 이미지 Fill 활용 - Figma에 이미지를 삽입하면 이미지가 독립적인 이미지 객체가 아니라, 이미지가 Fill로 적용된 사각형 형태로 생성된다. - Fill 설정에서 이미지를 조정할 수 있다. - Crop - Tile - 이미지 표시 방식과 위치 - 이미지 크롭을 위해 여러 마스크를 만들 필요가 줄어든다. - 처음에는 기존 그래픽 도구와 달라 혼란스러울 수 있지만, 이미지 배치와 편집을 단순화하는 방식이다. ## 벡터 네트워크로 복잡한 도형 만들기 - Figma의 벡터 네트워크에서는 하나의 점이 두 개 이상의 선과 연결될 수 있다. - 일반적인 벡터 편집 도구의 경로 구조보다 자유로운 형태의 도형을 만들 수 있다. - 복잡한 벡터를 제작할 때 Illustrator로 파일을 옮겨야 하는 상황을 줄여준다. - 기존 벡터 편집 방식과 달라 적응이 필요하지만, 익숙해지면 Figma 안에서 대부분의 작업을 처리할 수 있다. ## 실용적인 활용 Figma 작업 속도를 높이려면 레이어 이동 단축키를 우선 익히고, 반복되는 스타일은 필요한 속성만 복사하는 것이 좋다. 이미지 작업에서는 마스크를 무조건 사용하는 대신 Fill 설정을 확인하고, 복잡한 아이콘이나 도형은 벡터 네트워크를 활용하면 파일 구조를 단순하게 유지하면서 효율적으로 제작할 수 있다.

원문 읽기(새 탭에서 열림)
Figma사용자 경험sketchvector-graphics+2
figma4분 읽기큐레이션 요약

마이크로소프트 디자이너

Microsoft 디자이너 Jackie Chui는 사내 아이콘 4,000개를 한곳에서 검색·분류·복사할 수 있는 브라우저 기반 라이브러리를 3주 만에 만들었다. 디자이너용 태그와 엔지니어용 클래스명, 아이콘을 붙여 넣어 메타데이터를 찾는 역검색 기능을 제공해 도구 간 단절을 해결했다. 이 사례는 기존 제품을 그대로 사용하는 대신 실제 사용자의 요구를 조사하고, 익숙한 기술과 단계적인 학습으로 맞춤형 도구를 만들 수 있음을 보여준다. ## 문제 발견과 기존 도구의 한계 - Jackie는 Microsoft 디자이너들의 작업 과정을 관찰하고 아이콘 관리에서 겪는 불편을 조사했다. - 기존 제품 중에서는 IconJar가 아이콘 정리와 복사·붙여넣기를 지원했지만 Microsoft의 요구에는 부족했다. - 여러 사용자가 아이콘 태그를 추가하고 공유할 수 없었다. - 브라우저 기반이 아니어서 아이콘을 클라우드에서 공동으로 사용할 수 없었다. - Mac 전용이라 Windows 중심 조직에 적합하지 않았다. - 이에 따라 특정 운영체제나 디자인 도구에 종속되지 않는 자체 도구를 만들기로 했다. ## 브라우저 기반 아이콘 라이브러리 설계 - 초기 UI는 Sketch로 설계하고 IconJar에서 아이디어를 얻되, Microsoft Fabric 디자인 언어에 맞게 스타일을 조정했다. - 브라우저에서 작동하도록 만들어 사용자가 선호하는 디자인 도구와 관계없이 접근할 수 있게 했다. - 아이콘마다 다음 정보를 연결했다. - 디자이너가 찾기 쉬운 태그와 분류명 - 엔지니어가 코드에서 사용하는 클래스명 - 실제 복사·붙여넣기에 필요한 유니코드 아이콘 문자 - 아이콘을 검색해 바로 복사할 수 있게 해, 디자이너가 자주 쓰는 아이콘 문자를 별도 파일에 보관하던 방식을 없앴다. - 아이콘을 라이브러리에 붙여 넣으면 관련 메타데이터를 역으로 찾을 수 있는 기능도 제공했다. ## 익숙한 기술로 빠르게 개발 - Jackie는 포트폴리오 제작을 통해 익힌 HTML, CSS, JavaScript 경험을 기반으로 개발을 시작했다. - 프런트엔드와 백엔드 데이터베이스를 함께 구축하기 쉬운 JavaScript 프레임워크 Meteor.js를 선택했다. - Meteor 튜토리얼의 할 일 목록 데이터베이스 예제를 아이콘 데이터베이스로 확장했다. - 새로운 기술을 완전히 습득한 뒤 시작하기보다, 해결해야 할 실제 문제를 중심으로 필요한 내용을 학습하며 개발했다. - 기획과 디자인 경험에 엔지니어링 지식을 결합해 짧은 기간 안에 작동하는 제품을 완성했다. ## 아이콘 데이터 수집과 변환 - 아이콘은 일반적으로 폰트 파일에 저장되며, 키보드로 직접 입력할 수 없는 전용 유니코드 문자를 복사해 사용한다. - Jackie는 회사의 아이콘 폰트 파일을 다운로드하고 각 아이콘의 실제 유니코드 문자를 추출했다. - Microsoft 문서에서 엔지니어가 사용하는 아이콘 이름과 클래스명 목록을 확보했다. - 아이콘 이름 목록을 Excel로 정리한 뒤 JSON으로 변환해 애플리케이션 데이터로 사용했다. - 이렇게 아이콘 문자, 표시 이름, 클래스명, 태그를 하나의 검색 가능한 시스템으로 통합했다. ## 배포와 사용자 피드백 - 약 3주간의 개인 작업 끝에 첫 버전을 완성하고 Microsoft Azure에 호스팅했다. - 처음에는 팀에 간단한 이메일과 링크만 공유했지만, 사용자들의 입소문을 통해 디자인 스튜디오 전체로 확산됐다. - 동료들은 버그를 제보하고 새 기능을 제안하며 제품 개선에 참여했다. - 도구는 빠르게 여러 디자이너의 일상적인 작업 흐름에 포함됐다. - 이후 V2에서는 버그 수정과 기능 보강을 진행하고 다른 Microsoft 팀으로 확장할 계획이었다. ## Figma 컴포넌트로의 확장 - 향후 4,000개 이상의 아이콘을 한 번에 Figma 컴포넌트로 변환하는 기능을 계획했다. - 사용자는 별도 라이브러리를 거치지 않고 Figma 안에서 아이콘을 검색하고 정리할 수 있게 된다. - 장기적으로는 아이콘 폰트 파일을 업로드하면 누구나 Figma 컴포넌트로 변환할 수 있는 도구로 발전시키려 했다. - 기존 도구를 대체하는 다음 버전을 만드는 것이 목표라는 점에서, 제품은 사용자의 작업 흐름에 맞춰 계속 진화한다. 실용적으로는 먼저 사용자의 반복적인 불편을 관찰하고, 기존 도구의 부족한 점을 명확히 정의하는 것이 중요하다. 이후 모든 기능을 완성하려 하기보다 검색·분류·복사처럼 핵심 작업만 지원하는 최소 버전을 빠르게 배포하고, 실제 사용자 피드백을 바탕으로 확장하는 접근이 효과적이다.

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

피그마의 새로운 SVG 내

Figma는 SVG에 정보를 최대한 많이 담는 방식보다, 단순하고 작은 마크업이 다양한 도구와 더 잘 호환된다는 결론에 도달했다. 새 SVG Exporter는 불필요한 구조와 중복을 제거하고, 기본 도형과 간결한 경로를 사용해 파일 크기와 가독성, 호환성을 개선했다. 특히 Android Studio처럼 SVG 일부 기능만 지원하는 도구에서도 더 안정적으로 가져올 수 있도록 설계했다. ## SVG가 도구마다 다르게 렌더링되는 이유 - SVG는 JPG·PNG와 달리 픽셀 이미지가 아니라 화면에 이미지를 그리는 명령어로 구성된 벡터 형식이다. - 확대해도 선명하기 때문에 로고, 아이콘, 반응형 웹 자산에 적합하다. - 하지만 SVG 마크업을 픽셀로 변환하는 표준 렌더링 방식은 없다. - 각 디자인 도구와 개발 도구가 자체 SVG 파서와 렌더러를 사용하며, SVG 사양 전체가 복잡해 많은 도구가 일부 기능만 지원한다. - 예를 들어 `defs`에 정의한 요소를 `use`로 재사용하는 기능은 Android Studio에서 대부분 제대로 지원되지 않는다. - Figma의 기존 SVG는 복잡한 그룹, 마스크, 클리핑 패스, 중복 참조 때문에 파일이 크고 사람이 읽기 어려웠다. - 사용자들은 SVGO, svgito 같은 후처리 도구를 사용하거나 SVG를 직접 정리해야 했다. ## “모든 정보를 보존하자”는 기존 접근의 한계 - Figma는 디자인 도구 간 SVG 교환이 보편적인 데이터 형식이 되기를 기대했다. - 그래서 다른 도구가 디자인을 정확하게 가져갈 수 있도록 SVG에 가능한 한 많은 구조적 정보를 포함했다. - 그러나 실제 생태계에서는 도구마다 지원 범위와 구현 품질이 달랐다. - 결과적으로 더 많은 정보가 정확성을 보장하기보다, 일부 도구에서는 import 실패와 파일 비대화의 원인이 됐다. - 새 Exporter는 이상적인 상호 운용성보다 실제 사용 환경에서의 호환성과 단순성을 우선한다. ## 기본 도형을 SVG 프리미티브로 표현 - 단순한 사각형과 원을 복잡한 `path` 명령어로 표현하지 않고 SVG의 기본 도형 요소를 사용한다. - 기존 방식: ```xml <path d="M0 100V0H100V100H0Z"/> ``` - 변경된 방식: ```xml <rect width="100" height="100"/> ``` - `rect`, `circle` 같은 요소는 의미가 명확해 사람이 읽고 수정하기 쉽다. - 마크업 길이도 줄어들어 파일 크기와 처리 부담을 낮춘다. ## 내부선과 외부선 처리 방식 개선 - SVG의 기본 stroke는 도형 경계의 중앙에만 그려진다. - 디자인 도구에서 지원하는 내부선(inside stroke)이나 외부선(outside stroke)을 표현하려면 별도 우회가 필요하다. - 기존 Figma 방식은 stroke 폭을 두 배로 늘린 뒤 `mask`로 불필요한 절반을 숨겼다. - 이 방식은 `mask`, 중복 경로, 추가 참조를 만들어 SVG를 복잡하게 만들었다. - 새 방식은 도형의 좌표 자체를 조정한다. - 내부선은 도형의 경계를 안쪽으로 이동한 뒤 원래 stroke 폭을 사용한다. - 외부선도 시각적 결과에 맞도록 경로 위치를 조정한다. - 따라서 마스크 없이도 유사한 시각적 결과를 얻고 마크업을 크게 줄일 수 있다. ## 불필요한 마크업 제거 - 렌더링에 직접 영향을 주지 않는 요소와 속성을 제거한다. - `title` - `desc` - 불필요한 `g` - `id` - `version` - 클리핑도 항상 출력하지 않고 실제로 필요할 때만 생성한다. - 기존에는 클리핑 여부와 관계없이 프레임에 `clipPath`를 넣었지만, 새 방식은 효과가 없는 마크업을 생략한다. - `defs`에 요소를 정의하고 `use`로 참조하던 구조도 가능한 경우 인라인 요소로 바꾼다. - 중복 제거 효과는 일부 포기하지만, 여러 SVG importer가 더 안정적으로 처리할 수 있고 구조가 훨씬 단순해진다. ## 최종 결과 - 작은 검은색 사각형과 회색 내부선을 표현하는 기존 SVG는 여러 단계의 그룹, 클리핑 패스, 마스크, `use` 참조로 구성됐다. - 새 SVG는 다음처럼 단일 `rect` 요소와 속성만으로 표현된다. ```xml <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="15" y="15" width="70" height="70" fill="black" stroke="#CCCCCC" stroke-width="10"/> </svg> ``` - 결과적으로 SVG가 더 작고, 읽기 쉽고, 직접 수정하기 쉬워졌다. - Android Studio 같은 제한적인 SVG 지원 환경과의 호환성도 개선됐다. Figma의 사례는 SVG를 생성할 때 정보와 추상화를 무조건 많이 보존하기보다, 실제 소비 도구가 안정적으로 이해할 수 있는 최소한의 마크업을 사용하는 것이 실용적임을 보여준다. SVG를 배포할 때는 기본 도형, 단순한 경로, 필요한 경우에만 사용하는 마스크·클리핑을 우선하고, SVGO 같은 최적화 도구로 후처리하는 것도 유용하다.

원문 읽기(새 탭에서 열림)
Figmavector-graphicssvgandroid-studio+2
datadog2분 읽기큐레이션 요약

Kafka-Kit 소개: Kafka

Datadog이 Gartner의 ‘Observability Platforms’ 매직 쿼드런트에서 리더로 선정됐다는 홍보 문구와 관련 링크가 제시되어 있습니다. 그러나 제공된 내용 대부분은 Datadog 웹사이트의 내비게이션 메뉴이며, 선정 근거·평가 기준·기술적 분석 같은 본문은 포함되어 있지 않습니다. 따라서 이 자료만으로는 실제 블로그 글의 주장이나 결론을 구체적으로 요약하기 어렵습니다. ### Gartner 매직 쿼드런트 리더 선정 - 제목과 링크를 통해 Datadog이 Gartner의 Observability Platforms 부문에서 ‘Leader’로 평가됐음을 알립니다. - 다만 다음과 같은 핵심 정보는 제공되지 않았습니다. - 평가 대상 플랫폼과 비교 업체 - Gartner의 평가 기준 - Datadog의 실행력 및 비전 점수 - 리더로 선정된 구체적인 이유 - 보고서의 한계나 Gartner의 공식 면책 문구 ### Datadog의 관측성 제품 구성 제공된 메뉴는 Datadog이 단일 모니터링 도구가 아니라 여러 운영 영역을 포괄하는 플랫폼임을 보여줍니다. - **인프라** - 인프라·컨테이너·네트워크 모니터링 - 메트릭, 서버리스, GPU, 클라우드 비용 관리 - Kubernetes 오토스케일링 및 스토리지 관리 - **애플리케이션** - APM, 서비스 모니터링, 지속적 프로파일링 - 동적 계측 및 AI 에이전트 관측성 - **데이터와 로그** - 데이터베이스·데이터 스트림 모니터링 - 로그 관리, 민감 데이터 탐지, 감사 추적 - 관측성 파이프라인 - **보안** - 클라우드 보안, SIEM, 취약점 관리 - 코드·구성·런타임 보안 - 워크로드 및 애플리케이션/API 보호 - **디지털 경험** - 브라우저·모바일 RUM - 세션 리플레이, 신세틱 모니터링, 오류 추적 - **소프트웨어 공급망과 서비스 관리** - CI 가시성, 테스트 최적화, 코드 커버리지 - 인시던트 대응, SLO, 이벤트 관리, 워크플로 자동화 - **AI** - AI 에이전트 관측성, GPU 모니터링 - AI 에이전트, 조사, 보안 분석 기능 ### Kafka Kit 관련 링크 - 메뉴 상단에는 “scaling Kafka를 위한 Kafka Kit 도구 소개”라는 엔지니어링 블로그 링크가 포함되어 있습니다. - 하지만 Kafka Kit의 구성 요소, 확장 방식, 운영 문제 해결 방법 등 본문 내용은 제공되지 않았습니다. - 따라서 해당 글이 Gartner 선정 글과 직접 관련이 있는지, 별도의 링크가 단순히 페이지에 포함된 것인지는 판단할 수 없습니다. 실제 기술적 요약이 필요하다면 Gartner 평가 보고서 또는 블로그 본문 전체를 제공해야 합니다. 현재 자료만으로는 Datadog이 폭넓은 관측성·보안·개발 운영 기능을 제공하며 Gartner 리더 선정을 홍보한다는 정도만 확인할 수 있습니다.

원문 읽기(새 탭에서 열림)
쿠버네티스datadog옵저버빌리티애플리케이션 성능 모니터링+4
datadog원문

Kafka-Kit 소개: Kafka 확장을 위한 도구들 (새 탭에서 열림)

데이터독(Datadog)은 매일 수조 개의 데이터 포인트를 처리하기 위해 대규모 카프카(Kafka) 클러스터를 운영하며, 이 과정에서 발생하는 대규모 데이터 이동과 스케일링 문제를 해결하기 위해 **'Kafka-Kit'**을 개발하여 공개했습니다. 이 툴킷은 기존 카프카 표준 도구들의 제약을 넘어 파티션 재배치, 장애 브로커 교체, 저장 용량 기반의 리밸런싱 등을 자동화하고 최적화합니다. 결과적으로 데이터독은 복잡한 카프카 운영 업무를 보다 안정적이고 예측 가능한 방식으로 관리할 수 있게 되었습니다. ### Kafka-Kit의 구성과 목적 * **핵심 도구:** `topicmappr`와 `autothrottle`이라는 두 가지 주요 도구로 구성됩니다. * **주요 기능:** 브로커와 파티션 간의 매핑 관리, 장애 브로커 발생 시 자동 교체, 저장 용량 기반의 파티션 리밸런싱, 복제 속도 자동 제한(Throttling) 기능을 제공합니다. * **개발 배경:** 시스템이 커짐에 따라 데이터 이동 빈도와 크기가 기하급수적으로 늘어나는데, 카프카 기본 도구만으로는 고도의 운영 유연성을 확보하기 어렵다는 점을 해결하기 위해 구축되었습니다. ### 효율적인 데이터 배치를 위한 topicmappr * **결정론적 출력:** 동일한 입력에 대해 항상 동일한 파티션 맵을 생성하여 운영의 예측 가능성을 높입니다. * **최소 이동 브로커 교체:** 브로커 교체 시 전체 맵을 새로 짜는 대신, 문제가 생긴 브로커의 빈자리만 채우는 방식으로 데이터 이동을 최소화합니다. 기본적으로 ISR(In-Sync Replicas) 상태가 정상인 파티션은 건드리지 않습니다. * **랙(Rack) 및 저장 공간 인지:** 카프카의 `broker.rack` 태그와 주키퍼(ZooKeeper) 메타데이터를 활용하여 물리적 위치와 저장 용량(Bin-packing)을 고려한 안전한 배치를 수행합니다. * **복제 계수(RF) 조정:** 운영 중인 토픽의 복제 계수를 실시간으로 쉽고 빠르게 변경할 수 있습니다. * **실행 요약 제공:** 파티션 맵을 실제로 적용하기 전, 브로커 분포 변화와 예상 결과를 요약하여 사용자에게 미리 보여줍니다. ### 파티션 배치 전략: Count 전략 * **리더십 최적화:** 브로커 간의 리더 파티션 분포를 극대화하고, 각 브로커가 보유하는 파티션 수를 균등하게 유지합니다. * **균등한 데이터 흐름:** 모든 파티션에서 일정한 데이터 흐름이 예상될 때 유용하며, 메트릭 데이터 없이도 빠르게 맵을 생성할 수 있습니다. * **브로커 관계 다양화:** 단순히 파티션 수만 맞추는 것이 아니라, 특정 브로커들끼리만 복제본을 공유하는 '클러스터링' 현상을 방지하기 위해 브로커 간의 복제 관계를 최대한 분산시킵니다. ### 기술적 구현 및 운영 이점 * `topicmappr`는 Go 언어로 작성되어 실행 파일 형태로 어디서든 쉽게 구동할 수 있으며, 주키퍼 클러스터와 통신하여 실시간 메타데이터를 확인합니다. * 지정된 모든 브로커의 활성 상태를 검증하고, 파티션 맵을 생성하기에 충분한 브로커가 있는지 사전에 체크하여 운영 실수를 방지합니다. * 표준 `kafka-reassign-partitions.sh`와 호환되는 입력 파일을 생성하므로 기존 워크플로우에 쉽게 통합할 수 있습니다. 대규모 카프카 환경에서 데이터 불균형이나 브로커 장애 대응으로 고민하고 있다면, 단순한 파티션 분산을 넘어 저장 용량과 물리적 인프라 구조를 모두 고려하는 Kafka-Kit 도입을 검토해 볼 가치가 있습니다.

데이터베이스 설계Apache Kafkazookeeperkafka-kit+4
figma3분 읽기큐레이션 요약

파일 로딩, 드래

Figma는 디자인 도구가 사용자의 사고와 손동작을 즉시 따라가려면 성능이 핵심이라고 강조한다. 문서 렌더러 재구성, WebAssembly 최적화 등을 통해 대용량 파일 로딩과 줌·드래그 성능을 최대 3배 개선했으며, 실제 사용자 문서와 프레임 시간 지표를 기반으로 효과를 측정했다. 특히 단순한 평균 속도뿐 아니라 화면 피드백의 끊김까지 함께 줄이는 것을 목표로 삼았다. ## 성능이 창작 경험을 좌우하는 이유 - 디자인 도구의 지연은 사용자의 사고와 화면 조작 사이에 간극을 만든다. - Figma는 제품이 사용자의 창의적 사고와 신체 움직임을 자연스럽게 확장해야 한다고 본다. - 따라서 기능을 추가하는 것뿐 아니라, 실제 사용 문서에서 성능 병목을 지속적으로 찾아 개선하는 과정이 필요하다. - 이번 작업에서는 문서 렌더러 구조를 재설계하고 WebAssembly 관련 문제를 해결해 큰 폭의 성능 향상을 얻었다. ## WebAssembly와 렌더러 최적화로 파일 로딩 개선 - 대규모 조직에서는 여러 겹으로 중첩된 컴포넌트와 다양한 상태를 하나의 복잡한 문서에 담는다. - Microsoft Fluent Design 팀은 Windows 기본 컨트롤의 모든 상태와 조합을 하나의 Figma 파일에 구성해 로딩 성능의 한계를 시험했다. - 실제 대형 문서의 로딩 시간이 **29초에서 8초 이하**로 감소했다. - WebAssembly 최적화와 여러 렌더링 관련 변경 사항이 약 두 달 동안 적용됐다. - WebAssembly는 macOS·Windows의 데스크톱 앱과 Chrome, Firefox, Safari 등 주요 환경에 활성화됐다. - 결과적으로 복잡한 파일의 로딩뿐 아니라 전반적인 문서 처리 성능도 향상됐다. ## 줌과 드래그의 연속적인 상호작용 - 파일을 연 뒤에도 줌인·줌아웃과 레이어 드래그처럼 반복적으로 수행하는 작업의 반응성이 중요하다. - Figma는 화면이 순간적으로 멈추는 ‘hitch’를 줄이는 데 집중했다. - 줌 성능과 드래그 성능이 모두 최대 **3배** 개선됐다. - 이미지가 많이 포함된 복잡한 파일을 사용하는 N3TWORK는 새 렌더러 적용 후 컴포넌트 게시와 파일 로딩 속도의 변화를 즉시 체감했다. - 이 사례는 일반적인 벤치마크뿐 아니라 특정 사용자의 실제 문서와 작업 방식에 맞춘 최적화도 큰 효과를 낼 수 있음을 보여준다. ## 평균 프레임 시간과 최대 프레임 시간을 함께 측정하는 이유 - 연속적인 조작에서는 작업이 끝나는 총 시간보다 조작 중 화면이 얼마나 부드럽게 갱신되는지가 중요하다. - 같은 500ms가 걸리는 작업이라도 매 순간 화면을 보여주는 경우와 끝날 때까지 아무 피드백이 없는 경우의 체감 품질은 크게 다르다. - Figma는 직접 조작감을 중시하기 때문에 다음 두 지표를 함께 추적한다. - **평균 프레임 시간**: 전반적인 화면 갱신 속도와 부드러움을 나타낸다. - **최대 프레임 시간**: 특정 순간에 발생하는 긴 지연과 끊김을 나타낸다. - 최대 프레임 시간이 커지면 드래그 중 갑자기 멈추는 듯한 ‘걸림’이 발생한다. - 평균 프레임 시간이 커지면 화면 전체가 낮은 프레임 레이트로 동작해 지속적으로 버벅거린다. - 예를 들어 평균 프레임 레이트가 같아도 일부 프레임만 200ms 또는 367ms 지연되면 움직임이 불규칙하게 끊긴다. - 반대로 최대 지연 시간이 같더라도 긴 프레임 지연이 자주 발생하면 전체 화면이 더 심하게 끊겨 보인다. - 이상적으로는 항상 60fps 이상을 유지해야 하지만, 현실적인 개선 과정에서는 두 지표를 시간에 따라 추적하는 것이 유용하다. ## 실제 사용자 문서를 기준으로 한 성능 개선 - Figma는 인위적인 테스트 파일만이 아니라 사용자가 공유한 실제 문서를 분석해 최적화 대상을 찾았다. - 문서의 컴포넌트 중첩 수준, 비트맵 이미지 수, 디자인 시스템의 복잡도 등 현실적인 조건을 반영했다. - 사용자와 직접 문제를 진단하고 새 렌더러를 적용해 즉각적인 성능 변화를 확인하는 방식도 활용했다. - 이는 성능 최적화가 단일 벤치마크 수치를 높이는 작업이 아니라, 실제 작업 흐름에서 지연과 불연속적인 피드백을 제거하는 과정임을 보여준다. 복잡한 디자인 문서를 주로 다룬다면 파일 크기 자체보다 컴포넌트 중첩, 이미지 밀도, 렌더링 구조가 성능에 미치는 영향을 살펴보는 것이 중요하다. 성능을 평가할 때도 평균 속도만 보지 말고, 순간적인 프레임 지연과 사용자 조작 중 발생하는 끊김을 함께 측정해야 한다.

원문 읽기(새 탭에서 열림)
Figma성능 최적화webassemblyrendering+1
figma3분 읽기큐레이션 요약

디자이너 Q&A:

Camellia Neri는 창의성의 원천이 어린 시절의 경험과 향수에서 비롯된다고 말한다. 디즈니랜드의 세밀함, 예측 불가능한 유머, 자연사 박물관의 장면 구성, 작가와 일러스트레이터의 협업, 도시의 숨은 역사에서 영감을 얻으며 이를 일러스트 작업에 적용한다. 결국 좋은 창작은 세심한 조사와 의도, 개성 있는 디테일, 그리고 협업을 통해 익숙한 이야기를 새롭게 보여주는 데서 나온다. ## 어린 시절의 경험과 향수 - 영감의 상당 부분은 어린 시절 경험한 장소와 작품에서 비롯된다. - 과거의 감정과 분위기를 현재의 작업 속에서 재현하려고 한다. - 일러스트레이터에게 향수는 단순한 추억이 아니라, 관객이 공감할 수 있는 세계를 만드는 재료가 된다. ## 디즈니랜드 메인 스트리트의 세밀함 - 어린 시절 디즈니랜드 퍼레이드를 보며 가짜 상점과 건물의 정교한 장식에 깊은 인상을 받았다. - 금박 장식과 상품을 보여주는 창문 등, 작은 요소들이 실제 세계처럼 느껴지도록 구성되어 있었다. - 새로운 일러스트를 시작할 때도 충분한 조사와 의도를 바탕으로 이야기를 설계한다. - 세부 요소를 공들여 쌓아 올릴수록 작품의 세계관이 더 진정성 있게 전달된다고 본다. ## 《Pee-Wee’s Playhouse》의 예측 불가능성 - 코미디, 인형극, 기묘한 분위기, 교훈, 독특한 미술이 결합된 프로그램에서 영감을 받았다. - Ric Heitzman, Gary Panter, Wayne White 등의 시각적 작업을 특히 높이 평가한다. - 작품 곳곳에 부모도 발견할 수 있는 이스터에그가 숨겨져 있어 예상 밖의 즐거움을 제공했다. - 성공적인 일러스트레이션은 작가만의 작은 장난과 의외의 순간을 삽입해 개성과 독창성을 드러낸다. ## 자연사 박물관의 디오라마 구성 - 로스앤젤레스 자연사 박물관의 박제 디오라마를 거대한 2D 일러스트처럼 바라본다. - 동물의 위치, 행동, 배경 풍경이 하나의 서사적 장면을 구성한다. - 생태계에 맞춘 색상 팔레트와 조명, 캐릭터 배치가 완성도 높은 경험을 만든다. - 이러한 원리는 스토리텔링이 뛰어난 랜딩 페이지에도 적용된다. - 명확한 시각적 구성 - 효과적인 색상과 조명 - 장면 속 요소들의 관계 - 전체 경험을 하나로 묶는 서사 ## 쿠엔틴 블레이크와 로알드 달의 협업 - 로알드 달의 이야기와 쿠엔틴 블레이크의 일러스트가 결합해 작품의 매력을 완성했다고 평가한다. - 《제임스와 거대한 복숭아》, 《마틸다》, 《찰리와 초콜릿 공장》, 《마녀를 잡아라》 등이 대표적인 사례다. - 작가와 일러스트레이터의 관계는 영화감독과 반복적으로 함께 작업하는 배우의 관계처럼 공동의 비전을 만들어낸다. - 좋은 글쓰기 파트너를 선택하고, 잘 맞는 협업 관계를 지속적으로 발전시키는 것이 중요하다. ## 샌프란시스코의 숨은 역사 - 샌프란시스코의 골드러시와 도시 개발에 얽힌 잘 알려지지 않은 역사적 사실을 창작의 소재로 삼는다. - 숨은 이야기를 조사하고 이를 일러스트로 재구성하는 별도의 Medium 프로젝트도 운영한다. - 도시의 묻힌 배와 같은 역사적 사건은 눈에 보이지 않는 세계를 시각화하는 일러스트레이터의 역할을 보여준다. - Figma를 활용해 여러 일러스트가 하나의 일관된 브랜드처럼 보이도록 관리한다. 작업에 영감을 얻고 싶다면 자신의 어린 시절 기억뿐 아니라 자주 방문한 장소, 좋아했던 대중문화, 박물관의 전시, 협업 경험, 지역의 역사까지 관찰해보는 것이 좋다. 특히 세밀한 조사와 예상 밖의 디테일을 더하면 개인적인 기억이 독창적인 시각 언어로 발전할 수 있다.

원문 읽기(새 탭에서 열림)
Figma사용자 경험graphic-designillustration+2
figma4분 읽기큐레이션 요약

투명하고 개방적인 디자인이

Citrusbyte는 완성된 시안만 공개하는 대신, 작업 중인 디자인 파일을 클라이언트와 실시간으로 공유하는 ‘투명한 오픈 디자인’을 실천한다. Figma의 클라우드·실시간 협업 기능 덕분에 피드백 과정이 빨라지고 불필요한 파일 전달과 커뮤니케이션이 줄어들었다. 그 결과 프로젝트 이해도와 고객 참여가 높아졌으며, 디자이너의 작업 시간과 리뷰 주기도 크게 단축됐다. ## 전통적인 비공개 디자인 프로세스의 한계 - 디자이너는 완성도가 충분히 높아질 때까지 작업물을 외부에 공개하지 않는 경우가 많다. - 기존에는 Sketch나 Photoshop 파일을 내보내 이메일로 보내거나, Dropbox·Google Drive에 동기화해야 했다. - 클라이언트가 프로젝트의 진행 상황을 지속적으로 확인하기 어렵고, 최신 파일이 무엇인지 혼란이 생겼다. - PNG·PDF 이미지로 피드백을 주고받으면 클라이언트가 어느 부분을 지칭하는지 명확하지 않아 불필요한 대화가 반복됐다. - InVision 같은 프로토타이핑 도구를 사용할 때도 디자인을 평면 파일로 저장한 뒤 새 버전을 다시 업로드해야 했다. ## 클라이언트에게 작업 과정을 공개하는 이유 - Citrusbyte는 초기 단계부터 클라이언트가 프로젝트의 발전 과정을 볼 수 있어야 한다고 판단했다. - Figma에서는 하나의 링크로 항상 최신 디자인 파일에 접근할 수 있다. - 여러 사람이 같은 파일에 동시에 들어와 실시간으로 변경 사항을 확인할 수 있다. - 클라이언트는 완성된 결과물만 받는 것이 아니라, 디자인이 만들어지는 과정 자체에 참여한다. - 작업 상황을 직접 볼 수 있어 프로젝트가 ‘블랙박스’처럼 느껴지지 않고 심리적 안정감이 커진다. - 프로젝트에 직접 참여한 클라이언트는 현재 진행 상황과 의사결정의 맥락을 더 잘 이해하므로 결과물에 대한 공감대와 참여도가 높아진다. ## 미완성 작업을 공개할 때의 위험과 대응 - 작업 중인 파일은 구조가 복잡하거나 시각적으로 정리되지 않아 클라이언트가 결과물을 오해할 수 있다. - 디자이너 입장에서는 미완성 결과물을 보여주는 것이 부담스럽고, 창작 과정이 평가받는 것처럼 느껴질 수 있다. - Citrusbyte는 이를 커뮤니케이션과 기대치 관리로 해결한다. - Pablo Franco는 “자전거를 원하더라도 작업 중인 나를 보면 체인을 조립하고 있는 모습을 보게 된다”는 비유를 사용해, 현재 보이는 화면이 최종 결과물이 아님을 설명한다. - 공개의 목적이 완성품 평가가 아니라 진행 상황 공유와 협업이라는 점을 사전에 합의한다. ## 실시간 피드백으로 빨라지는 협업 - 클라이언트는 디자인 파일에서 직접 변경 사항을 확인하고, 필요한 경우 일부 요소를 스스로 실험할 수 있다. - 예를 들어 헤드라인 문구를 바꿔 어떤 표현이 더 적절한지 직접 비교할 수 있다. - 간단한 문구 수정 때문에 긴 이메일 대화를 주고받는 일이 줄어든다. - 디자이너는 반복적인 수정 요청을 처리하는 대신 핵심적인 디자인 작업에 집중할 수 있다. - 디자인과 프로토타입이 같은 최신 파일에 연결되어 있어 변경 후 별도의 재업로드가 필요 없다. ## Figma 기능이 제거한 불필요한 작업 - Figma의 웹 기반 환경은 파일 버전 관리와 공유 과정을 단순화한다. - 정기적인 클라이언트 리뷰에서는 발표자가 자신의 아바타를 클릭한 사용자가 화면을 따라오도록 하는 ‘관찰 모드’를 활용할 수 있다. - 발표자는 별도의 프레젠테이션용 파일이나 복잡한 플로우 연결 화면을 준비하지 않고, 실제 디자인 파일을 이동하며 설명하면 된다. - 이러한 작은 기능들이 파일 내보내기, 업로드, 발표용 화면 구성 같은 반복 작업을 없앴다. - Citrusbyte의 디자이너 Sam Small은 이전 방식과 비교해 Figma 사용으로 작업 시간이 약 30~50% 절약된다고 평가했다. ## 생산성과 고객 만족도 향상 - 작업 과정이 투명해지면서 클라이언트가 프로젝트에 더 많이 참여하고 결과물에 대한 이해도도 높아졌다. - 피드백 전달 위치가 명확해져 커뮤니케이션 왕복 횟수가 감소했다. - 리뷰 준비에 들던 시간이 줄어들어 공격적인 일정의 프로젝트도 수행하기 쉬워졌다. - Citrusbyte는 절약된 시간만큼 더 많은 프로젝트를 맡을 수 있었다. - 고객사 SundaySky는 Figma를 사용한 프로젝트에서 리뷰 주기가 절반으로 줄어든 점을 긍정적으로 평가했다. - Citrusbyte는 스타트업 중심의 고객 기반에서 Apple, Sony, Intel, AT&T 등 Fortune 1000 기업으로 사업을 확장했으며, 투명한 협업 방식이 이러한 성장과도 연결된다고 설명한다. ## 실용적인 적용 방법 - 프로젝트 시작 전에 클라이언트에게 작업 중인 화면이 미완성 상태일 수 있음을 명확히 알린다. - 하나의 최신 Figma 파일을 프로젝트의 기준점으로 삼고, 이메일 첨부 파일이나 중복된 버전 생성을 줄인다. - 클라이언트가 직접 확인하고 의견을 남길 수 있도록 적절한 접근 권한을 제공한다. - 정기 리뷰에서는 관찰 모드와 실시간 화면 공유를 활용해 별도 발표 자료 제작을 최소화한다. - 투명성은 단순히 파일을 공개하는 것이 아니라, 진행 과정·피드백 방식·기대 결과를 함께 합의하는 협업 문화로 운영해야 한다.

원문 읽기(새 탭에서 열림)
Figma프로토타이핑collaborative-designreal-time-collaboration+1
figma3분 읽기큐레이션 요약

길 위에서: 두 명

클라우드 기반 Figma와 적절한 모바일 장비를 활용하면 고가의 노트북 없이도 사용자 조사, 디자인 리뷰, 팀 협업, 간단한 편집까지 수행할 수 있다. Josh Goodwin과 Tyrale Bloomfield는 삼성 스마트폰·태블릿, 외부 디스플레이, 블루투스 입력 장치를 조합해 이동 중에도 업무를 이어갔다. 다만 화면 출력 방식과 마우스 입력을 제대로 인식하는 하드웨어·브라우저 조합을 선택하는 것이 중요하다. ## 노트북 없이 구성하는 이동형 디자인 환경 - 권장 장비: - Samsung Galaxy S8/S8+/S9/S9+ 또는 Samsung Tab 2 태블릿 - Samsung DeX Dock 또는 Chromecast - 블루투스 키보드와 마우스 - 스마트폰의 Chrome에서 Figma를 열고, 모니터나 TV로 화면을 출력한다. - 큰 화면에서는 Figma 프레임을 확인하고, 스마트폰에서는 키보드와 마우스로 조작할 수 있다. - 외부 모니터가 없으면 태블릿만으로도 Figma 파일 확인, 댓글 작성, 간단한 편집이 가능하다. ## 의료 현장 사용자 조사에 활용 - Josh Goodwin은 의료기기 회사에서 일하며 의사들이 실제로 사용하는 컴퓨터와 태블릿에서 디자인을 테스트해야 했다. - 과거에는 Sketch나 Adobe 프로그램이 설치된 노트북과 태블릿을 여러 대 운반해야 했다. - Figma 도입 후에는: - 스마트폰에서 Figma 프로토타입을 실행하고 - 병원에 있는 모니터에 DeX Dock 또는 Chromecast로 연결하며 - 의사들에게 프로토타입 URL을 공유해 각자의 브라우저에서 확인하게 했다. - 피드백을 받는 즉시 디자인을 수정하고, 큰 화면에서 변경 결과를 확인할 수 있어 개발팀이 디자이너를 기다리는 시간도 줄어들었다. ## 저렴해지는 디자인 진입 장벽 - 스마트폰 한 대와 약 100달러 수준의 TV만으로도 기본적인 디자인 작업 환경을 구성할 수 있다. - 고가의 MacBook이나 전문 디자인 장비가 없어도 브라우저와 인터넷에 접근할 수 있으면 Figma를 사용할 수 있다. - 특히 신입 디자이너나 개발도상국의 디자이너처럼 장비 구매 예산이 제한된 사용자에게 유용하다. - 디자인 도구의 중심이 특정 컴퓨터가 아니라 클라우드와 브라우저로 이동한다는 점을 보여준다. ## 태블릿만으로 수행하는 크리에이티브 디렉션 - Tyrale Bloomfield는 Samsung Tab 2와 블루투스 마우스만으로 Figma 파일 사이를 오가며 업무를 처리했다. - 여행 중에는 마우스 없이 손가락으로 댓글을 작성하거나 디자인을 확인하기도 했다. - 노트북을 무릎 위에 불안정하게 올려두거나 야외 화면 반사를 걱정할 필요가 없다는 장점이 있다. - 단순한 검토와 피드백뿐 아니라 일정 수준의 디자인 편집도 모바일에서 가능하다고 설명한다. ## 하드웨어와 입력 방식의 호환성 - 모든 스마트폰과 태블릿이 동일하게 작동하지는 않는다. - 삼성 기기는 휴대폰 화면을 외부 디스플레이로 출력할 때 DPI를 조정해 큰 화면에 맞는 시각적 공간을 제공한다. - iPad 등 일부 기기는 화면에 닿는 모든 입력을 손가락 터치로 해석할 수 있다. - Figma가 입력을 손가락 터치로만 인식하면: - 객체 이동은 가능하지만 - 크기 조절 - 바운딩 박스 사용 - 클릭 앤 드래그 작업 등이 제한될 수 있다. - Josh와 Tyrale은 약 30개의 브라우저와 다양한 휴대폰·태블릿을 테스트한 끝에, 마우스 클릭과 손가락 터치를 구분해 Figma에 전달하는 조합을 찾았다. ## 이동성과 업무 연속성 - 이 방식의 핵심은 특정 장소나 개인 노트북에 의존하지 않는 것이다. - 브라우저와 화면 출력 장치, 입력 장치만 있으면 다른 사람의 컴퓨터나 현장 장비에서도 업무를 이어갈 수 있다. - 사용자 조사, 디자인 검토, 댓글 작성, 프로토타입 시연처럼 협업 중심의 업무에 특히 적합하다. 실제로 구성하려면 먼저 사용하는 휴대폰이 외부 화면 출력과 마우스 입력을 지원하는지 확인하고, Figma에서 객체 선택·크기 조절·드래그가 정상 작동하는지 테스트하는 것이 좋다. 모바일 환경은 고급 편집보다는 현장 테스트와 협업, 간단한 수정에 가장 효과적이다.

원문 읽기(새 탭에서 열림)
Figma사용자 경험Androiduser-research+3