기능 비하인드: 새로운 (새 탭에서 열림)
Embracing the tension between code and design Inside Figma Events News
데이터 지향 서비스 메시를 (새 탭에서 열림)
에어비앤비가 도입한 '바이아덕트(Viaduct)'는 거대해진 마이크로서비스 아키텍처(SOA)의 복잡성을 해결하기 위해 제안된 데이터 지향 서비스 메시입니다. 기존의 서비스 메시가 단순히 서비스 간의 원격 프로시저 호출(RPC)을 라우팅하는 데 집중했다면, 바이아덕트는 GraphQL 스키마를 중심에 두어 데이터 소비자가 하위 서비스의 구조를 몰라도 필요한 데이터를 효율적으로 가져올 수 있게 합니다. 이를 통해 서비스 간 의존성 그래프를 단순화하고 시스템 전반의 모듈성과 데이터 민첩성을 획기적으로 향상시켰습니다. **기존 SOA의 복잡성과 데이터 지향 설계의 필요성** - 마이크로서비스의 수가 수천 개로 늘어나면서 서비스 간 의존 관계가 '스파게티 코드'처럼 얽히는 문제가 발생했습니다. - 현재의 SOA는 1970년대 스타일의 프로시저 지향 설계에 머물러 있어, 각 서비스가 단순한 엔드포인트의 집합으로 취급됩니다. - 에어비앤비는 1980년대 객체 지향 언어들이 데이터를 중심으로 로직을 캡슐화했던 것처럼, SOA도 데이터 중심으로 진화해야 한다고 판단했습니다. **GraphQL 기반의 데이터 지향 서비스 메시, Viaduct** - 바이아덕트는 서비스 메시의 핵심을 데이터 중심의 GraphQL 스키마(Type, Query, Mutation)로 정의합니다. - 데이터 소비자(Consumer)는 특정 서비스의 엔드포인트를 직접 호출하는 대신, 필요한 데이터 필드를 쿼리하기만 하면 됩니다. - 서비스 메시는 어떤 서비스가 특정 데이터 요소를 제공하는지 알고 있으며, 소비자를 대신해 이를 결합(Orchestration)하여 전달함으로써 서비스 간 직접적인 의존성을 제거합니다. **중앙 집중형 스키마를 통한 데이터 민첩성 확보** - 바이아덕트는 단일화된 '중앙 스키마(Central Schema)'를 통해 여러 팀이 협업할 수 있는 구조를 제공합니다. - 데이터베이스 스키마 변경이 여러 계층의 마이크로서비스 API에 수동으로 반영되어야 했던 과거와 달리, 중앙 스키마 업데이트만으로 클라이언트까지 변경 사항을 즉시 전파할 수 있습니다. - 이는 대규모 SOA 환경에서 데이터 구조 변경에 소요되는 수 주간의 조율 과정을 획기적으로 단축합니다. **서버리스 기능을 활용한 서비스 단순화** - 클라이언트 요구에 맞춰 데이터를 가공하는 'BFF(Backend-for-Frontend)'나 상태 없는 변환 서비스들을 서버리스 클라우드 함수로 대체합니다. - 바이아덕트 내에서 '파생 필드(Derived fields)' 계산 로직을 서버리스로 실행함으로써, 복잡한 서비스 계층을 줄이고 그래프 구조를 깔끔하게 유지합니다. - 이를 통해 서비스의 개수와 복잡도를 낮추면서도 클라이언트에게 최적화된 데이터를 제공할 수 있습니다. **기술적 특징 및 관찰 가능성** - 바이아덕트는 `graphql-java`를 기반으로 구축되었으며, 세밀한 필드 선택 기능을 지원합니다. - 시스템 안정성을 위해 서킷 브레이킹(Short-circuiting), 소프트 의존성(Soft dependencies), 요청 내 캐싱(Intra-request cache) 등의 기술을 적용했습니다. - 필드 단위의 데이터 관찰 가능성(Data observability)을 제공하여, 어떤 서비스가 어떤 데이터를 소비하는지 정확하게 파악하고 관리할 수 있습니다. 이처럼 거대해진 마이크로서비스 환경에서 운영 효율을 높이려면, 개별 서비스의 엔드포인트 관리에서 벗어나 데이터 중심의 추상화 계층을 구축하는 것이 중요합니다. 에어비앤비의 사례는 GraphQL을 단순한 API 게이트웨이를 넘어 시스템 전체의 의존성을 관리하는 서비스 메시로 확장함으로써 복잡성을 제어할 수 있음을 보여줍니다.
Variants로 디자인과 코드의 (새 탭에서 열림)
Embracing the tension between code and design Inside Figma Events News
기능 비하인드: (새 탭에서 열림)
피그마(Figma)는 디자인의 디테일을 높여주는 '그림자 확산(Shadow Spread)' 기능을 구현하기 위해 렌더링 엔진 수준에서의 수학적 최적화와 성능 문제를 해결했습니다. 단순해 보이는 기능임에도 불구하고, 다양한 브라우저 환경과 복잡한 벡터 도형 위에서 일관되고 빠른 성능을 보장하기 위해 부호 거리 함수(SDF)와 미팹(Mipmap) 기반의 근사 기법을 도입했습니다. 결과적으로 피그마는 CSS 표준과 일치하면서도 GPU 부하를 최소화하는 고성능 그림자 렌더링 시스템을 구축하는 데 성공했습니다. ### 그림자 확산의 정의와 기술적 난제 * 그림자 확산은 단순히 그림자를 키우는 것이 아니라, 원본 도형의 형태를 유지하면서 외곽선을 팽창(Dilation)시킨 후 흐림(Blur) 효과를 적용하는 작업입니다. * CSS의 `box-shadow` 속성에는 이미 존재하지만, 이를 벡터 그래픽 엔진에서 실시간으로 구현하는 것은 계산량이 매우 많아 성능 저하를 유발하기 쉽습니다. * 특히 단순한 사각형이 아닌 복잡한 패스(Path)나 불리언 연산이 적용된 도형에 대해서는 모든 픽셀에서 거리를 계산해야 하는 비용 문제가 발생합니다. ### 수학적 모델링: SDF와 해석적 접근 * 피그마의 자체 렌더링 엔진인 'Medley'는 둥근 모서리를 가진 사각형과 같은 정형화된 도형에 대해 **부호 거리 함수(Signed Distance Fields, SDF)**를 사용합니다. * SDF를 활용하면 픽셀과 도형 사이의 최단 거리를 수학적으로 즉시 계산할 수 있어, 별도의 텍스처 생성 없이 셰이더(Shader) 내에서 한 번의 패스로 확산과 흐림 효과를 동시에 처리할 수 있습니다. * 이 방식은 메모리 사용량을 줄일 뿐만 아니라, 확대/축소 시에도 계단 현상 없이 매끄러운 고해상도 결과를 보장합니다. ### 복잡한 도형을 위한 미팹(Mipmap) 기반 최적화 * 정형화되지 않은 복잡한 벡터 도형의 경우 SDF를 직접 계산하기 어렵기 때문에, 피그마 엔지니어들은 **최대치 필터(Maximum Filter)**와 가우시안 블러의 관계를 이용했습니다. * 매우 큰 확산 값을 처리할 때 발생하는 GPU 성능 병목을 해결하기 위해 이미지의 해상도를 단계별로 낮춘 **미팹(Mipmap)**을 생성하여 넓은 범위를 빠르게 샘플링하는 기법을 도입했습니다. * 이 근사 기법은 정확도를 크게 손상시키지 않으면서도 연산량을 기하급수적으로 줄여, 복잡한 레이어가 겹쳐진 상황에서도 부드러운 캔버스 조작을 가능하게 합니다. ### CSS 표준과의 일치 및 렌더링 정밀도 * 디자이너가 피그마에서 만든 결과물이 실제 웹 브라우저에서 동일하게 보여야 하므로, 브라우저 엔진(Chrome의 Skia 등)이 그림자를 처리하는 방식과 수치적으로 일치하도록 세밀하게 조정되었습니다. * 특히 모서리 반경(Corner Radius)이 확산 값에 따라 어떻게 변하는지에 대한 복잡한 로직을 물리적으로 올바르게 구현하여, 확산이 적용되어도 도형의 일관성이 유지되도록 설계했습니다. 이 기능의 도입은 단순한 UI 업데이트를 넘어, 고성능 그래픽 엔진이 복잡한 수학적 모델을 어떻게 실용적인 디자인 도구로 녹여내는지를 보여줍니다. 개발자는 피그마의 그림자 수치를 CSS에 그대로 복사하여 사용할 수 있게 되었으며, 디자이너는 성능 걱정 없이 더욱 깊이감 있는 디자인 시스템을 구축할 수 있게 되었습니다.
킴벌리클라크가 사랑 (새 탭에서 열림)
Clearstep은 환자들이 복잡한 의료 시스템 속에서 적절한 진료를 신속하게 찾을 수 있도록 돕는 AI 기반 증상 체크 및 진료 라우팅 솔루션을 제공합니다. 이들은 다양한 의료 기관의 요구사항을 충족하기 위해 Figma를 활용한 효율적인 '화이트라벨(White-label)' 디자인 시스템을 구축하여 개인화된 사용자 경험을 구현했습니다. 결과적으로 디자인과 개발 프로세스를 동기화함으로써 복잡한 의료 여정을 단순화하고 환자의 신뢰를 확보하는 데 성공했습니다. ### 효율적인 화이트라벨링을 위한 변수(Variables) 활용 * Clearstep은 다양한 의료 파트너(HCA Healthcare, CVS Health 등)의 개별 브랜딩을 반영하기 위해 Figma의 **Variables(변수)** 기능을 적극적으로 활용합니다. * 색상, 타이포그래피, 테두리 반경 등의 디자인 토큰을 변수로 관리하여, 한 번의 설정 변경만으로 수많은 파트너사별 UI 테마를 즉각적으로 전환할 수 있는 구조를 갖췄습니다. * 이를 통해 각 파트너사의 브랜드 가이드라인을 엄격히 준수하면서도, 핵심적인 UX 로직은 공통으로 유지하여 유지보수 효율을 극대화했습니다. ### 환자 신뢰 구축을 위한 프로토타이핑과 UX 설계 * 의료 서비스 특성상 환자의 불안감을 줄이고 신뢰를 주는 것이 중요하므로, Figma의 고도화된 **프로토타이핑** 기능을 사용해 실제 제품과 유사한 사용자 흐름을 사전에 검증합니다. * 복잡한 임상 알고리즘에 따른 분기 로직을 시각화하여, 환자가 자신의 증상에 맞는 정확한 진료 단계(응급실, 원격 진료, 전문의 예약 등)로 안내받는 과정을 최적화했습니다. * 사용자 테스트를 반복하며 텍스트 톤앤매너와 인터렉션의 세부 사항을 조정해, 환자가 AI의 권장 사항을 믿고 따를 수 있는 심리적 안정감을 제공합니다. ### 디자인 시스템을 통한 협업 생산성 향상 * 디자이너와 개발자 간의 간극을 줄이기 위해 Figma를 **단일 진실 공급원(Single Source of Truth)**으로 운영하며, 컴포넌트 라이브러리를 코드베이스와 밀접하게 동기화했습니다. * 컴포넌트의 상태(State)와 속성을 명확히 정의하여 개발자가 별도의 추가 설명 없이도 의도된 UI를 정확히 구현할 수 있도록 핸드오프 과정을 단순화했습니다. * 이러한 시스템화된 접근 방식은 새로운 파트너사를 온보딩하거나 기능을 확장할 때 발생하는 리소스를 획기적으로 절감해 줍니다. 의료와 같이 복잡하고 규제가 까다로운 도메인일수록, 디자인 시스템의 유연성과 프로토타이핑을 통한 검증이 제품의 성패를 좌우합니다. Clearstep의 사례처럼 Figma의 최신 기능인 변수와 고도화된 컴포넌트 관리를 활용한다면, 확장성 있는 화이트라벨 솔루션을 구축하려는 엔터프라이즈 기업들에게 훌륭한 벤치마킹 모델이 될 것입니다.
피그마의 첫 번째 학생 (새 탭에서 열림)
제시해주신 Figma의 교육 분야 확장 관련 소식을 바탕으로 정리한 요약입니다. Figma는 차세대 창의적 인재 양성을 위해 교육용 플랫폼으로서의 입지를 대폭 확장하고 있습니다. 구글과의 파트너십을 통해 크롬북(Chromebook) 환경에서 최적화된 사용 경험을 제공하며, 초·중·고(K-12) 및 고등 교육 기관에 전문 디자인 도구와 협업 리소스를 무료로 지원합니다. 이를 통해 학생들이 실무급 도구를 조기에 경험하고 협업 중심의 디자인 사고를 체득하도록 돕는 것이 이번 발표의 핵심입니다. **교육 현장을 위한 플랫폼 접근성 강화** * 구글과의 파트너십을 통해 전 세계 수백만 명의 학생이 사용하는 크롬북에 Figma와 FigJam을 최적화하여 보급합니다. * 웹 기반 도구의 강점을 활용해 저사양 하드웨어에서도 매끄러운 디자인 및 프로토타이핑 환경을 구현하여 하드웨어 격차에 따른 교육 불평등을 해소합니다. * 학교 관리자가 대규모 인원에게 도구를 쉽게 배포할 수 있도록 통합 인증 및 관리 기능을 강화하여 교육 현장의 운영 부담을 줄였습니다. **FigJam을 활용한 협업 및 능동적 학습** * 온라인 화이트보드 도구인 FigJam을 통해 브레인스토밍, 마인드맵 제작, 프로젝트 기획 등 디자인 너머의 창의적 활동 전반을 지원합니다. * 실시간 동시 편집 기능을 활용해 원격 및 대면 수업 모두에서 학생들 간의 상호작용과 팀 프로젝트 수행 능력을 극대화합니다. * 교사들이 즉시 수업에 활용할 수 있는 다양한 교육용 템플릿과 위젯을 제공하여 디지털 도구 도입의 진입장벽을 낮췄습니다. **실무 준비를 위한 전문 교육 생태계 구축** * 학생들이 UI/UX 디자인의 기초부터 고급 프로토타이핑까지 업계 표준 도구를 직접 사용하며 실무 역량을 쌓을 수 있는 환경을 조성합니다. * 교육자들을 위한 전용 커뮤니티와 전문성 개발 프로그램을 운영하여, 기술 교육의 질을 높이고 최신 디자인 트렌드를 수업에 반영할 수 있도록 돕습니다. * 학습 과정과 실제 산업 현장의 워크플로우를 연결하는 리소스를 제공하여 학생들이 졸업 후 바로 경쟁력을 가질 수 있도록 지원합니다. Figma의 교육용 확장은 단순한 소프트웨어 보급을 넘어 미래의 디자이너와 기획자들이 협업의 가치를 배우는 기반이 됩니다. 교육 기관에서는 FigJam의 직관적인 인터페이스를 먼저 도입하여 학생들의 참여를 유도하고, 점진적으로 Figma를 활용한 시각적 소통 및 프로토타이핑 교육으로 심화해 나가는 접근 방식을 권장합니다.
Figma의 에이전시 파 (새 탭에서 열림)
제공해주신 내용을 바탕으로 Figma의 프리랜서 및 대행사를 위한 빌링 모델 개선 방향을 요약해 드립니다. Figma는 프리랜서와 대행사가 여러 클라이언트와 협업하며 겪는 복잡한 결제 구조를 개선하기 위해 새로운 서비스 운영 및 빌링 로드맵을 공개했습니다. 기존의 불투명한 시트 관리와 의도치 않은 추가 과금 문제를 해결하여, 독립적인 작업자들이 보다 유연하고 투명하게 비용을 관리할 수 있는 환경을 구축하는 것이 이번 업데이트의 핵심 결론입니다. **프리랜서 및 대행사의 고충 해결** * 여러 팀과 프로젝트를 오가며 작업하는 작업자들이 겪는 중복 결제 및 관리의 복잡성을 주요 개선 과제로 설정했습니다. * 클라이언트 프로젝트에 초대받을 때 발생하는 시트 할당 프로세스를 최적화하여 작업자와 고용주 사이의 비용 갈등을 줄이고자 합니다. **빌링 모델의 투명성 및 제어권 강화** * 팀 관리자가 유료 시트 추가 여부를 더 명확하게 인지하고 제어할 수 있도록 인터페이스와 알림 시스템을 개선합니다. * 예상치 못한 과금을 방지하기 위해 사용자 추가 시 비용 발생 시점을 사전에 명확히 고지하여 예산 예측 가능성을 높입니다. **워크플로우 최적화를 위한 로드맵** * Config 등 주요 업데이트를 통해 프리랜서와 대행사가 자신의 작업 환경을 독립적으로 유지하면서도 클라이언트와 효율적으로 연결될 수 있는 구조적 변화를 예고했습니다. * 독립 작업자들이 Figma 내에서 자신의 전문성을 더 잘 드러내고 비즈니스를 운영할 수 있도록 돕는 기능적 지원을 확대할 예정입니다. **실용적인 제언** Figma를 사용하는 대행사나 프리랜서는 향후 변경될 시트 관리 정책을 주기적으로 확인해야 합니다. 특히 클라이언트 팀에 '게스트'로 참여할 때와 '유료 멤버'로 참여할 때의 비용 주체 설정을 명확히 점검하여 불필요한 지출을 방지할 것을 권장합니다.
연결의 순간 만들기 | Figma (새 탭에서 열림)
Embracing the tension between code and design Inside Figma Events News
개방적이고 포용 (새 탭에서 열림)
피그마(Figma) 디자인 팀은 자신들이 만든 도구를 직접 활용하여 협업의 투명성을 극대화하고, 제품 기획부터 실행까지의 간극을 혁신적으로 좁히는 방식을 지향합니다. 이들은 운영 효율성(Design Ops)과 디자인 시스템을 근간으로 삼아, 단순한 기능 개발을 넘어 전 세계 디자이너들이 참고할 수 있는 표준적인 워크플로우를 구축하는 데 집중합니다. 결과적으로 피그마 디자인 팀의 방식은 도구의 기능을 증명하는 동시에, 현대적인 제품 디자인 조직이 나아가야 할 방향성을 제시합니다. ### 효율적인 조직 운영과 시스템 구축 (Operations) * **디자인 시스템(Design Systems)의 내재화:** 피그마의 디자인 시스템인 'Base'를 통해 일관된 UI/UX를 유지하며, 디자이너들이 반복적인 작업 대신 문제 해결의 본질에 집중할 수 있는 환경을 조성합니다. * **Design Ops의 역할:** 디자인 팀이 원활하게 작동할 수 있도록 프로세스를 설계하고, 채용, 도구 관리, 팀 문화 조성을 전담하여 디자이너의 생산성을 극대화합니다. * **사용자 연구의 통합:** 연구(Research) 단계를 별도의 과정으로 분리하지 않고 디자인 과정 전반에 내재시켜, 사용자 피드백이 실시간으로 제품 설계에 반영되도록 합니다. ### 품질과 창의성을 높이는 디자인 프로세스 * **디자인 크리틱(Critique):** 정기적인 공유 세션을 통해 팀원 간의 피드백을 주고받으며, 개방적인 소통을 통해 시각적 품질과 사용자 경험의 완성도를 높입니다. * **디자인 페어링(Design Pairing):** 개발의 '페어 프로그래밍'처럼 두 명의 디자이너가 하나의 파일에서 실시간으로 협업하며 복잡한 문제를 함께 해결하고 지식을 공유합니다. * **고충실도 프로토타이핑:** 단순히 정적인 화면을 만드는 것이 아니라, 실제 제품과 유사하게 작동하는 프로토타입을 제작하여 사용자 인터랙션과 감성적인 세부 사항까지 세밀하게 검증합니다. ### 경계 없는 다각적 협업 방식 * **핸드오프(Handoff) 없는 협업:** 개발자와 디자이너가 초기 단계부터 피그마 파일 내에서 함께 소통하며, 정적인 결과물을 전달하는 방식이 아닌 지속적인 대화를 통해 제품을 완성합니다. * **멀티플레이어 작업 환경:** PM, 개발자 등 모든 이해관계자가 실시간으로 디자인 과정에 참여함으로써 의사결정 속도를 획기적으로 높이고 정보의 불균형을 해소합니다. * **공유의 문화:** 작업 중인 미완성 결과물도 숨기지 않고 공유하여, 팀 전체가 제품의 방향성을 상시 파악할 수 있도록 '급진적인 투명성'을 유지합니다. ### 커뮤니티와 지식 리더십 (Thought Leadership) * **경험의 자산화:** 팀 내부에서 겪은 시행착오와 성공 사례를 블로그와 커뮤니티에 공개하여 전 세계 디자인 생태계의 성장에 기여합니다. * **도구를 통한 실험:** 피그마의 새로운 기능을 가장 먼저 적용하고 테스트하며, 이를 통해 얻은 인사이트를 다시 제품 기능 개선에 반영하는 선순환 구조를 만듭니다. 피그마 디자인 팀의 핵심은 **"자신들이 만드는 도구를 가장 적극적으로 사용하는 사용자(Dogfooding)"**가 됨으로써 사용자의 페인 포인트를 즉각적으로 이해하는 데 있습니다. 이를 위해 조직 구조를 유연하게 유지하고 디자인 시스템과 운영 프로세스를 탄탄하게 구축하는 것이 생산적인 디자인 팀을 만드는 가장 확실한 방법입니다.
폰트가 깨질 때 (새 탭에서 열림)
피그마는 웹 브라우저의 텍스트 렌더링 방식과 디자인 도구 간의 차이를 줄이기 위해 줄 높이(Line height) 산정 방식을 CSS 표준에 맞춰 재설계했습니다. 과거의 디자인 도구들이 텍스트를 단순히 위에서 아래로 쌓는 방식을 취했다면, 피그마는 글자를 행 높이의 중앙에 배치하는 '수직 중앙 정렬(Leading)' 방식을 채택하여 디자인과 실제 구현 결과물 간의 간극을 최소화했습니다. 이를 통해 디자이너는 개발자가 CSS로 구현했을 때와 동일한 시각적 결과를 피그마 환경에서 미리 확인할 수 있게 되었습니다. **브라우저 방식과 일치된 수직 정렬 시스템** * 피그마는 CSS의 줄 높이 계산 방식과 동일하게, 설정된 `line-height` 값에서 글자의 크기를 뺀 나머지 공간(Leading)을 글자의 위아래에 균등하게 배분합니다. * 이 방식은 텍스트 박스 내에서 글자가 수직으로 중앙에 위치하게 만들어, 버튼이나 내비게이션 바와 같은 UI 요소 내에서 텍스트를 배치할 때 개발 단계에서의 오차를 줄여줍니다. * 전통적인 디자인 도구들이 텍스트 상단에 기준점을 두었던 것과 달리, 피그마는 행의 전체 높이를 기준으로 정렬을 처리하여 웹 표준과의 호환성을 극대화했습니다. **타이포그래피의 정밀도를 높이는 수직 다듬기(Vertical Trim)** * 글꼴마다 고유하게 가지고 있는 상단과 하단의 여백(Leading) 때문에 발생하는 불필요한 공간을 제거할 수 있는 'Vertical Trim' 기능을 도입했습니다. * 이 기능은 텍스트의 기준선을 대문자 높이(Cap height)나 베이스라인(Baseline)에 맞추어 잘라냄으로써, 아이콘이나 다른 그래픽 요소와 텍스트를 픽셀 단위로 정확하게 정렬할 수 있게 돕습니다. * 수직 다듬기를 적용하면 텍스트 박스의 크기가 실제 글자 크기에 딱 맞게 조절되어, 레이아웃 설계 시 시각적인 정렬과 수치상의 정렬을 일치시킬 수 있습니다. **자동(Auto) 줄 높이와 글꼴 메트릭의 이해** * 피그마의 'Auto' 줄 높이는 글꼴 제작자가 폰트 파일 내에 정의해둔 메트릭(Ascender, Descender 등)을 기반으로 결정됩니다. * 서로 다른 글꼴은 동일한 폰트 크기에서도 서로 다른 'Auto' 줄 높이 값을 가질 수 있으며, 이는 각 폰트 디자이너가 의도한 가독성을 반영한 결과입니다. * 사용자가 직접 숫자 값을 입력하면 피그마는 해당 값을 고정된 행 높이로 사용하며, 이때 글자는 설정된 높이의 중앙에 위치하게 됩니다. 디자인과 개발의 효율성을 높이기 위해서는 피그마의 줄 높이 설정을 단순히 시각적인 간격으로만 보지 말고, CSS의 `line-height` 속성과 동일하게 취급해야 합니다. 특히 버튼이나 헤더처럼 정밀한 수직 중앙 정렬이 필요한 요소에는 'Vertical Trim' 기능을 적극 활용하여 개발자가 추가적인 패딩 조정 없이도 디자인을 그대로 구현할 수 있도록 가이드를 제공하는 것이 권장됩니다.
제품 팀의 Figma 협업 (새 탭에서 열림)
피그마(Figma)는 디자인 프로세스가 디자인 도구 안에만 머물지 않고 팀의 전체 워크플로우에 녹아들 수 있도록 '라이브 임베드(Live Embed)' 기능을 강화하고 다양한 협업 도구와의 통합을 확장하고 있습니다. 이 기능은 디자인 수정 사항을 실시간으로 반영하여 문서나 협업 툴 내에서 항상 최신 버전의 디자인을 확인할 수 있게 해줍니다. 결과적으로 팀원 간의 컨텍스트 스위칭을 줄이고, 디자인이 프로젝트의 모든 단계에서 '단일 진실 공급원(Single Source of Truth)' 역할을 하도록 돕습니다. **실시간 동기화 기반의 워크플로우 효율화** - 정적인 스크린샷 대신 실시간으로 업데이트되는 라이브 캔버스를 외부 도구에 삽입할 수 있습니다. - 피그마에서 디자인을 수정하면 임베드된 화면에도 즉시 반영되어, 팀원들이 오래된 스크린샷을 보고 작업하는 실수를 방지합니다. - 디자인 파일 전체뿐만 아니라 특정 프레임(Frame)이나 페이지를 선택해 임베드할 수 있어 필요한 맥락만 정확히 공유 가능합니다. **주요 협업 도구와의 네이티브 통합** - Notion, Jira, Trello, Dropbox Paper 등 팀들이 주로 사용하는 생산성 도구들과 파트너십을 통해 매끄러운 임베드 환경을 제공합니다. - 특히 Slack과의 통합을 통해 디자인 변경 사항에 대한 실시간 알림을 받고, 공유된 링크만으로도 디자인의 미리보기를 명확하게 확인할 수 있습니다. - 개발자나 기획자가 디자인 툴에 직접 접속하지 않더라도 자신이 익숙한 환경(Jira 티켓 등)에서 디자인 의도를 파악할 수 있도록 진입 장벽을 낮췄습니다. **개발자를 위한 Live Embed API** - 피그마는 표준 기술인 `iframe`과 `oEmbed` 프로토콜을 기반으로 API를 구축하여 개발자가 자신의 웹 서비스에 피그마 디자인을 쉽게 통합할 수 있게 했습니다. - 간단한 URL 복사-붙여넣기만으로 임베드가 가능하며, API를 통해 커스텀 대시보드나 사내 위키 등에 디자인 데이터를 동적으로 표시할 수 있습니다. - 보안이 중요한 경우에도 권한 설정을 통해 허가된 사용자만 임베드된 내용을 볼 수 있도록 안전하게 관리됩니다. **실용적인 권장 사항** 협업 효율을 극대화하려면 문서화 단계에서 정적 이미지를 사용하는 습관을 버리고 피그마 링크를 직접 임베드하는 방식을 도입해 보세요. 특히 요구사항 명세서(PRD)나 Jira 티켓에 라이브 임베드를 활용하면, 기획-디자인-개발 간의 정보 불일치를 획기적으로 줄일 수 있습니다.
피그마 내부 이야기: 신입 (새 탭에서 열림)
Figma에서의 원격 인턴십은 단순한 업무 경험을 넘어, 협업 도구 자체를 개발하는 팀이 원격 환경에서 어떻게 효율적으로 일하는지에 대한 깊은 통찰을 제공합니다. 이 글은 제품 관리자(PM)의 역할을 팀의 의사결정을 돕는 '촉진자'로 정의하며, 기술적 복잡성 속에서도 사용자 중심의 가치를 유지하는 방법을 강조합니다. 결론적으로, 원격 근무의 물리적 거리는 투명한 공유 문화와 강력한 협업 도구를 통해 충분히 극복될 수 있으며, 이것이 곧 제품의 혁신으로 이어진다는 점을 시사합니다. **Figma 제품 관리(PM)의 본질과 역할** * PM은 단순히 기능을 정의하는 사람이 아니라, 디자이너와 엔지니어 사이의 '접착제' 역할을 하며 팀이 올바른 방향으로 나아갈 수 있도록 맥락(Context)을 제공합니다. * 제품의 비전을 설정할 때 '왜(Why)'에 집중하며, 사용자 데이터와 정성적 피드백을 결합해 기능의 우선순위를 정밀하게 조정합니다. * 복잡한 기술적 요구사항을 이해하기 쉬운 사용자 가치로 치환하여 이해관계자들을 설득하고 정렬하는 과정을 거칩니다. **원격 환경을 극복하는 '공개적 구축' 문화** * 작업의 중간 과정을 가감 없이 공유하는 'Building in the open' 방식을 통해 원격 환경에서도 팀원 간의 신뢰와 피드백 루프를 강화합니다. * FigJam과 같은 시각적 협업 도구를 활용하여 비동기적 소통의 한계를 극복하고, 아이디어 브레인스토밍부터 사후 분석까지 투명하게 기록합니다. * 물리적 사무실이 없더라도 슬랙(Slack)이나 가상 커피 타임 등을 통해 심리적 안전감을 구축하고, 신규 입사자가 조직에 빠르게 적응할 수 있는 온보딩 체계를 운영합니다. **UI/UX 디자인과 엔지니어링의 정밀한 정렬** * Figma의 디자인 시스템을 직접 활용하며 UI의 일관성을 유지하는 동시에, 실제 구현 단계에서 발생할 수 있는 기술적 제약 사항을 엔지니어와 긴밀히 논의합니다. * 사용자의 워크플로우를 깊이 있게 분석하여, 단일 기능의 추가가 전체 프로덕트 경험에 미치는 영향을 다각도로 검토합니다. * 프로토타이핑 단계를 세분화하여 실제 출시 전 사용자 테스트를 반복하고, 이를 통해 발견된 UX 결함을 즉각적으로 수정하는 민첩성을 유지합니다. **커리어 성장을 위한 교육적 통찰** * 실수를 성장의 발판으로 삼는 문화를 통해 인턴에게도 실질적인 제품 소유권(Ownership)을 부여하고, 결과물에 대한 책임을 공유합니다. * 멘토와의 정기적인 1:1 면담을 통해 실무 역량뿐만 아니라, 제품 전략가로서의 거시적인 시야를 확보하는 교육 과정을 거칩니다. * 기술적인 숙련도만큼이나 중요한 것은 협업 능력과 명확한 문서화 역량임을 깨닫고, 이를 커리어 전반의 핵심 자산으로 삼습니다. 성공적인 제품 개발을 위해서는 기술적 도구의 활용 능력보다, 팀 전체가 동일한 목표를 공유하고 투명하게 소통하는 문화를 정착시키는 것이 우선되어야 합니다. 원격 근무 환경에서 커리어를 쌓고자 한다면 자신의 작업 과정을 적극적으로 시각화하고, 동료들에게 끊임없이 맥락을 공유하는 습관을 기르는 것이 중요합니다.
디자인에서 신뢰의 다양한 차 (새 탭에서 열림)
Embracing the tension between code and design Inside Figma Events News
코드와 디자인 사이의 긴 (새 탭에서 열림)
Reflections on Config, our first user conference Inside Figma Config Events News