.NET Continuous Profiler: 내부 동작 원리 (새 탭에서 열림)
Datadog의 .NET 프로파일러는 운영 환경에서 24시간 내내 실행될 수 있도록 설계된 상시(continuous) 프로파일링 도구로, 애플리케이션 성능에 미치는 영향을 최소화하면서 CPU, 메모리, 잠금 경합 등 다양한 런타임 지표를 수집합니다. 이를 통해 개발자는 별도의 재현 환경을 구축하지 않고도 실제 운영 상황의 성능 병목 현상을 정밀하게 분석할 수 있으며, 수집된 데이터는 효율적인 집계와 가독성 높은 호출 스택 변환 과정을 거쳐 백엔드로 전달됩니다. ## .NET 프로파일러의 구조와 데이터 수집 * 개별 리소스(CPU, 예외, 잠금 경합 등)를 담당하는 여러 독립적인 프로파일러와 샘플러, 데이터를 노출하는 프로바이더로 구성된 모듈형 아키텍처를 가집니다. * 수집된 샘플은 호출 스택(Call Stack), 컨텍스트 정보(Labels), 수치 데이터 벡터를 포함하며, 동일한 스택과 레이블을 가진 샘플은 하나로 병합하여 데이터 크기를 최적화합니다. * 샘플 집계 및 `.pprof` 형식으로의 직렬화 로직은 성능 향상과 타 언어 프로파일러와의 공유를 위해 Rust 언어로 구현되었습니다. ## 분산 추적 연동 및 백엔드 처리 * 'Runtime ID'를 사용하여 하나의 프로세스 내에서 여러 서비스(예: IIS AppDomain)가 실행되더라도 각 서비스를 정확히 식별하고 분산 추적(Traces/Spans) 데이터와 프로파일을 정교하게 연결합니다. * 트레이서(Tracer)가 런타임 ID와 서비스 이름(DD_SERVICE)의 매핑 정보를 프로파일러에 전달함으로써, 백엔드에서 특정 서비스에 해당하는 프로파일을 정확히 찾아낼 수 있게 합니다. ## 호출 스택(Call Stack) 가독성 개선 * 닷넷 런타임 API가 제공하는 로우(raw) 데이터를 개발자가 소스 코드 수준에서 즉시 이해할 수 있도록 정제(Clean-up)하는 과정을 거칩니다. * 생성자(`.ctor`)는 실제 클래스 이름으로, 익명 메서드나 람다식은 원래 메서드명에 `_AnonymousMethod`나 `_Lambda` 접미사를 붙여 변환합니다. * 로컬 메서드나 컴파일러가 생성한 비동기 상태 머신의 `MoveNext` 메서드 등 복잡한 이름들도 소스 코드 구조를 반영하도록 가공하여 분석의 혼선을 줄입니다. ## 네이티브 구현을 통한 성능 최적화 * 프로파일러 자체의 메모리 할당이 대상 애플리케이션의 가비지 컬렉션(GC)에 압박을 주지 않도록 핵심 로직을 C#(Managed code)이 아닌 네이티브 수준에서 구현하는 방향을 선택했습니다. * 이러한 설계는 운영 환경에서 성능 저하를 무시할 수 있는 수준으로 유지하면서도 상세한 런타임 성능 데이터를 지속적으로 수집할 수 있는 기반이 됩니다. 운영 환경의 부하를 최소화하면서 실제 트래픽 상황의 성능 문제를 정확히 진단하고 싶다면, 네이티브 수준에서 최적화되고 소스 코드 가독성까지 고려된 상시 프로파일링 도구를 도입하는 것이 가장 효과적인 전략입니다.
.NET 지속적 프로 (새 탭에서 열림)
운영 환경의 복잡한 애플리케이션 성능 문제를 해결하기 위해서는 단순한 메트릭 관찰을 넘어 코드 수준의 가시성이 필요합니다. Datadog의 Continuous Profiler가 제공하는 '타임라인 뷰(Timeline View)'는 시간에 따른 CPU 사용량과 스레드 상태 변화를 코드 실행 흐름과 직접 매핑하여 성능 병목의 근본 원인을 직관적으로 제시합니다. 이를 통해 개발자는 운영 환경에 가해지는 부하를 최소화하면서도 간헐적인 지연이나 리소스 효율성 문제를 신속하게 진단하고 최적화할 수 있습니다. ### 프로파일링 가시성의 확장: 플레임 그래프에서 타임라인으로 - 기존의 플레임 그래프(Flame Graph)는 전체 실행 시간 동안의 리소스 점유율을 요약하여 보여주지만, 특정 시점에 발생한 일시적인 성능 저하나 스레드 간의 상호작용을 파악하기에는 한계가 있습니다. - 타임라인 뷰는 시간의 흐름에 따라 스레드별 활동을 시각화하여, 애플리케이션 내에서 코드가 정확히 어느 시점에 실행되고 멈췄는지를 상세히 보여줍니다. - 이 방식은 특히 마이크로서비스 환경에서 발생하는 분산된 요청이나, 주기적으로 반복되는 백그라운드 작업의 성능을 분석할 때 강력한 효과를 발휘합니다. ### 스레드 상태 분석을 통한 지연 시간 진단 - 프로파일러는 각 스레드가 'CPU 실행(Running)', '입출력 대기(I/O Waiting)', '잠금 경합(Lock Contention)' 중 어떤 상태에 있는지 실시간으로 기록합니다. - 특정 요청이 느려질 때, 그것이 복잡한 연산 때문인지(CPU Bound), 아니면 데이터베이스 응답이나 네트워크 호출을 기다리기 때문인지(Wait Time)를 즉각적으로 구분할 수 있습니다. - 가비지 컬렉션(GC) 이벤트가 애플리케이션 스레드를 중단시키는 'Stop-the-world' 구간을 타임라인상에 표시하여, 메모리 관리 효율성이 전체 응답성에 미치는 영향을 분석합니다. ### 운영 환경 최적화와 추적 데이터 결합 - Continuous Profiler는 매우 낮은 오버헤드로 설계되어 운영 환경에서 상시 작동하며, 재현하기 어려운 간헐적인 '스파이크' 현상을 놓치지 않고 포착합니다. - 분산 추적(Tracing) 시스템과 연동되어 특정 요청(Trace ID)과 관련된 프로파일링 데이터를 즉시 연결함으로써, 특정 사용자 요청이 코드의 어느 라인에서 지연되었는지 추적할 수 있습니다. - 코드 변경 전후의 타임라인을 비교하여 성능 최적화 작업이 실제 스레드 효율성이나 응답 시간 개선에 기여했는지를 객관적인 지표로 검증합니다. 운영 중인 서비스에서 원인을 알 수 없는 성능 저하가 발생한다면, 로그 분석에 의존하기보다 Continuous Profiler의 타임라인 뷰를 통해 스레드의 실제 움직임을 관찰하는 것이 좋습니다. 이를 통해 코드 최적화의 우선순위를 명확히 설정하고, 인프라 비용 절감과 사용자 경험 개선이라는 두 가지 목표를 동시에 달성할 수 있습니다.
Razorpay가 개발자 워크플 (새 탭에서 열림)
인도 최대의 금융 서비스 기업인 Razorpay는 1,000만 개 이상의 비즈니스를 지원하기 위해 디자인 시스템 'Blade'를 구축하여 일관된 사용자 경험과 개발 효율성을 동시에 확보했습니다. 웹과 모바일을 아우르는 단일 API 구조를 통해 플랫폼 간 전환 비용을 최소화하고, 전용 플러그인과 Figma Dev Mode를 적극 활용해 디자이너와 개발자 간의 협업 마찰을 획기적으로 줄였습니다. 결과적으로 Blade는 단순한 가이드를 넘어 제품의 신뢰성을 높이고 시장 출시 속도를 앞당기는 핵심 동력으로 자리 잡았습니다. **크로스 플랫폼을 위한 단일 라이브러리 체계** * 웹, iOS, Android 등 다양한 플랫폼에서 동일한 API와 속성을 공유하는 단일 디자인 시스템을 운영하여 개발자가 플랫폼을 옮겨가더라도 기존 지식을 그대로 활용할 수 있게 했습니다. * 하드코딩으로 인해 발생할 수 있는 텍스트 필드의 에러 처리나 버튼 상태값 누락 등의 세부적인 오류를 방지하고, 모든 컴포넌트에 접근성(Accessibility)을 기본적으로 내장했습니다. * 디자이너와 개발자가 동일한 언어를 사용함으로써 커뮤니케이션 비용을 줄이고, 디자인에서 보는 결과물이 코드와 일치하도록 보장합니다. **지표 기반의 도입 전략과 조직 내 확산** * 새로운 기능을 개발할 때는 디자인의 70%, 기존 화면을 수정할 때는 50% 이상 Blade 컴포넌트를 사용하도록 KPI를 설정하여 디자인과 개발 팀이 공동의 목표를 추구하게 합니다. * 'Blade Coverage' 플러그인을 통해 디자이너가 시스템에서 얼마나 벗어나고 있는지 실시간으로 확인하게 함으로써, 핸드오프 단계 이전에 피드백을 주고받을 수 있는 환경을 조성했습니다. * 리더십의 지지를 바탕으로 전담 슬랙 채널 운영, 오피스 아워, 시연 영상 공유 등을 통해 내부 고객(직원)들의 채택률을 높이고 연간 NPS(순추천지수) 설문을 통해 만족도를 관리합니다. **RazorSharp와 Dev Mode를 통한 코드 자동화** * 개발자가 일일이 속성을 검사하던 비효율을 제거하기 위해 디자인을 코드로 자동 변환해주는 자체 플러그인 'RazorSharp'를 개발했습니다. * Figma의 Dev Mode를 도입하면서 기존 편집 권한이 필요했던 플러그인 제약을 극복했고, 개발자가 편집 권한 없이도 코드를 복사하고 Storybook 링크를 통해 바로 컴포넌트 환경으로 이동할 수 있게 했습니다. * VS Code 플러그인을 연동하여 개발 환경 내부에서 직접 디자인 사양을 확인하며 코드를 작성하는 워크플로우를 구축했습니다. **Variables를 활용한 토큰 관리 및 성능 최적화** * 기존의 복잡한 토큰 명명 규칙(surface/text/subtle)을 개발자 친화적인 구조(surface.text.subtle)로 변환하고, 간격(spacing) 토큰을 변수화하여 개발 편의성을 높였습니다. * 여러 테마와 라이트/다크 모드를 개별적으로 만들던 방식에서 변수(Variables) 기반 시스템으로 전환하여 메모리 소모를 대폭 줄이고 디자인 작업 속도를 개선했습니다. * 이를 통해 하나의 테마 안에서 다양한 모드를 유연하게 구현할 수 있게 되어 시스템의 복잡성을 낮추고 관리 효율을 극대화했습니다. **디자인 시스템 운영을 위한 실용적 제언** 디자인 시스템의 성공은 단순히 컴포넌트를 만드는 것에 그치지 않고, 개발자가 실제 작업 환경에서 얼마나 편리하게 코드를 추출하고 적용할 수 있느냐에 달려 있습니다. Razorpay처럼 자체 플러그인을 개발하거나 Dev Mode를 적극 활용하여 '디자인 검사'에 들어가는 시간을 줄이고, 정량적인 사용량 지표(Coverage)를 통해 팀의 성과를 객관화하는 접근 방식이 권장됩니다. 또한, 시스템의 복잡도가 커질수록 Variables 기능을 활용해 성능 저하를 방지하고 개발 생산성을 높이는 전략이 필수적입니다.
셀프 서비스 분석 확장: 5,000명의 직원에게 힘을 실어주는 도구들 (새 탭에서 열림)
Datadog은 200명에서 5,000명 규모로 급격히 성장하는 과정에서 발생하는 데이터 병목 현상을 해결하기 위해, 모든 직원이 중앙 데이터 팀의 도움 없이 스스로 데이터를 활용할 수 있는 '셀프 서비스 분석' 체계를 구축했습니다. 오픈 소스 기술을 기반으로 데이터 수집부터 변환, 발견, 리포팅까지 이어지는 통합 툴킷을 제공함으로써 데이터 팀은 단순 운영 업무에서 벗어나 고부가가치 과제에 집중할 수 있게 되었으며, 전사적으로 데이터 기반의 의사결정 문화를 정착시키는 성과를 거두었습니다. ### 셀프 서비스 분석의 세 가지 기둥과 사용자 분류 * 셀프 서비스 분석은 모든 임직원이 중앙 팀의 개입 없이 스스로 데이터를 활용해 의사결정을 내리는 상태를 지향하며, 이는 '데이터(Data)', '도구(Tools)', '지식(Knowledge)'이라는 세 가지 핵심 요소로 뒷받침됩니다. * 사용자의 데이터 숙련도와 니즈에 따라 사용자를 세 가지 페르소나로 분류하여 맞춤형 환경을 제공합니다. * **탐험가(Explorers):** 잘 정돈된 데이터와 미리 구축된 리포트를 활용하는 일반 사용자. * **빌더(Builders):** 직접 쿼리를 작성하고 팀을 위한 대시보드를 생성하는 숙련된 사용자. * **전문가(Experts):** 새로운 데이터를 노출하고 비즈니스 로직을 유지하며 데이터 품질을 제어하는 고숙련 사용자. ### 데이터 제품화와 단일 진실 공급원(SSOT) 구축 * 엔지니어링, 마케팅, 영업, 인사 등 모든 부서가 동일한 데이터를 바라볼 수 있도록 중앙 집중화된 '단일 진실 공급원(Single Source of Truth)'을 확립했습니다. * 'Bring Your Own Data(BYOD)' 툴을 개발하여, 데이터를 생성하는 어떤 팀이든 이를 분석 환경에 직접 노출하고 공유할 수 있는 자율성을 부여했습니다. * 데이터의 신뢰성을 높이기 위해 강력한 명명 규칙(Conventions)을 적용하고, 상세한 문서화와 데이터 품질 모니터링 시스템을 통해 사용자가 데이터를 믿고 사용할 수 있는 환경을 조성했습니다. ### 기술적 셀프 서비스 툴 스택: 수집에서 발견까지 * **데이터 수집(Intake):** 내부 데이터 스토어 및 서드파티 도구와 연결되는 커넥터, 데이터 요청을 위한 유저 인터페이스, 파이프라인 가시성 및 알림 기능을 제공합니다. * **데이터 변환(Transformation):** 전사 데이터 분석가들이 dbt와 SQL을 사용해 각 부서의 비즈니스 로직을 직접 제어할 수 있는 개발 환경을 구축했습니다. 이를 통해 데이터 모델링 레이어의 일관성을 유지하면서도 부서별 자율성을 보장합니다. * **데이터 발견(Discovery):** 모든 데이터셋과 필드에 대한 검색 기능을 제공하며, 데이터 리니지(Lineage), 소유권, 민감도, 신뢰도 등 풍부한 메타데이터를 제공하여 사용자가 필요한 데이터를 쉽게 찾고 이해할 수 있게 합니다. ### 실용적인 결론 조직이 커질수록 데이터 팀의 인원을 늘리는 것만으로는 데이터 수요를 감당할 수 없습니다. Datadog의 사례처럼 데이터 자체를 하나의 '제품'으로 취급하고, 현업 담당자들이 직접 데이터를 가공하고 소비할 수 있는 인프라와 가이드라인을 제공하는 것이 확장성 있는 데이터 문화를 만드는 핵심입니다. 이를 위해서는 도구의 도입뿐만 아니라 데이터 품질에 대한 엄격한 기준 확립과 사용자 교육이 반드시 병행되어야 합니다.
피그마와 어도비, (새 탭에서 열림)
피그마(Figma)는 화이트보드 협업 툴인 피그잼(FigJam)에 생성형 AI 기능을 도입하여 팀의 아이디에이션부터 실행까지의 과정을 획기적으로 단축시켰습니다. 사용자는 간단한 텍스트 프롬프트만으로 복잡한 워크플로우 템플릿을 즉시 생성하고, 방대한 양의 스티커 메모를 자동으로 분류 및 요약함으로써 협업의 효율성을 극대화할 수 있습니다. 이번 업데이트는 단순한 기능 추가를 넘어, 팀이 준비 작업에 소요되는 시간을 줄이고 본질적인 창의적 논의에 집중하도록 돕는 데 목적이 있습니다. ### 프롬프트를 활용한 맞춤형 보드 생성 (Generate) * 사용자가 해결하고자 하는 과제나 회의의 목적(예: '팀 빌딩 아이스브레이킹', '간트 차트 작성')을 입력하면 AI가 즉시 적합한 구조의 템플릿을 생성합니다. * 생성된 보드에는 논의에 필요한 섹션, 위젯, 스티커 메모 예시가 포함되어 있어 빈 캔버스에서 시작할 때 느끼는 막막함을 해소해 줍니다. * 팀의 특정 요구사항에 맞춰 구조를 제안하므로, 회의 준비 시간을 대폭 절감하고 즉각적인 협업을 가능하게 합니다. ### 데이터 시각화 및 자동 분류 (Sort) * 브레인스토밍 과정에서 무질서하게 나열된 수많은 스티커 메모를 AI가 주제나 키워드별 유사성을 판단하여 클릭 한 번으로 자동 그룹화합니다. * 수동으로 스티커 메모를 하나씩 옮기며 분류하는 반복적이고 소모적인 작업을 대체하여 논의의 흐름이 끊기지 않도록 유지합니다. * 각 그룹에는 적절한 제목이 자동으로 부여되어, 방대한 아이디어 속에서 주요 테마를 한눈에 파악할 수 있게 돕습니다. ### 핵심 내용 요약 및 인사이트 도출 (Summarize) * 보드 위에 흩어진 복잡한 논의 내용을 분석하여 전체 흐름을 관통하는 간결한 요약본을 생성합니다. * 단순히 내용을 줄이는 것을 넘어, 회의 중 도출된 결론과 향후 실행해야 할 구체적인 액션 아이템(Action Items)을 명확하게 정리해 줍니다. * 회의에 참여하지 못한 이해관계자들에게 논의의 핵심을 빠르게 전달할 수 있어 팀 내 정보 공유의 투명성과 속도를 높입니다. 피그잼의 AI 기능은 반복적인 수작업을 자동화하여 팀원들이 더 높은 수준의 전략적 사고와 창의적인 문제 해결에 전념할 수 있는 환경을 제공합니다. 특히 대규모 브레인스토밍 세션이나 프로젝트 초기 기획 단계에서 발생하는 데이터 과부하를 관리하는 데 매우 유용하므로, 효율적인 워크플로우 구축이 필요한 팀에게 적극적인 활용을 권장합니다.
기후 행동에 대한 피 (새 탭에서 열림)
이 글은 전과 기록이 있는 사람들이 사회로 복귀할 때 마주하는 장벽을 허물기 위해 UX 디자인 교육을 제공하는 비영리 단체의 활동과 그 가치를 조명합니다. 이 프로그램은 단순한 기술 전수를 넘어 수감 경험자들이 가진 독특한 관점을 디자인 역량으로 승화시켜, 기술 산업 내 다양성을 확보하고 재범률을 낮추는 데 기여하고 있습니다. 결과적으로 참가자들은 UX 디자인이라는 전문 분야를 통해 안정적인 커리어를 구축하며 사회의 구성원으로 성공적으로 안착하게 됩니다. **사회적 장벽 해소와 경제적 자립 지원** * 과거 범죄 기록으로 인해 취업 시장에서 소외되었던 이들에게 고부가가치 산업인 IT 분야로의 진입로를 제공합니다. * 경제적 자립은 재범 방지의 가장 강력한 수단이며, UX 디자인은 창의성과 논리적 사고를 동시에 요구하므로 참가자들에게 높은 성취감과 자존감을 부여합니다. * 기술 교육을 통해 사회적 낙인을 극복하고, 전문가로서 새로운 정체성을 확립할 수 있도록 돕습니다. **실무 중심의 UX/UI 커리큘럼** * 수강생들은 사용자 경험(UX)의 기초 이론부터 디자인 사고(Design Thinking), 문제 해결 프로세스 등을 체계적으로 학습합니다. * Figma와 같은 업계 표준 디자인 도구를 능숙하게 다룰 수 있도록 훈련하며, 실제 프로젝트를 수행하며 실무에 즉시 투입 가능한 수준의 포트폴리오를 제작합니다. * 단순 이론 교육에 그치지 않고, 변화하는 기술 트렌드에 발맞춘 실전형 교육을 통해 채용 경쟁력을 높입니다. **삶의 경험을 디자인 역량으로 승화** * 수감 생활을 포함한 참가자들의 치열한 삶의 경험은 사용자에 대한 깊은 공감 능력과 회복 탄력성으로 이어집니다. * 다양한 배경을 가진 디자이너가 제품 설계에 참여함으로써, 기존의 전형적인 시각에서 벗어난 포용적이고 혁신적인 디자인 결과물을 도출할 수 있습니다. * 이들이 가진 '문제를 다르게 보는 시각'은 기업이 사용자 인터페이스의 사각지대를 발견하는 데 큰 자산이 됩니다. **지속 가능한 커리어를 위한 멘토링과 파트너십** * 교육 수료 후 실제 취업으로 연결될 수 있도록 주요 IT 기업들과 파트너십을 맺고 현업 디자이너들과의 1:1 멘토링을 지원합니다. * 기술적 역량 외에도 협업 능력, 커뮤니케이션 기술 등 기업 환경에 적응하기 위한 소프트 스킬 교육을 병행합니다. * 수강생들이 업계 내 인적 네트워크를 형성할 수 있도록 도와, 일시적인 취업이 아닌 장기적인 커리어 성장을 보장합니다. 기술 산업이 진정한 혁신을 이루기 위해서는 이와 같은 포용적인 교육 모델이 더욱 확산되어야 합니다. 소외된 계층의 잠재력을 발굴하고 전문 인력으로 양성하는 것은 기업의 사회적 책임을 다하는 동시에, 더 넓은 사용자 층을 아우르는 제품을 만드는 실질적인 동력이 될 것입니다.
요점: 제2호 | (새 탭에서 열림)
피그마는 제품의 혁신이 반드시 거대한 신기능 출시에서만 오는 것이 아니며, 오히려 작지만 세밀한 개선들이 모여 사용자 경험의 질을 결정한다고 주장합니다. 'Little Big Updates' 전략은 사용자가 일상적으로 겪는 미세한 불편함(Paper cuts)을 해결함으로써 제품에 대한 깊은 신뢰와 애착을 형성하는 데 목적이 있습니다. 결국 작고 정교한 변화에 집중하는 것이 제품 전체의 완성도를 높이는 가장 강력한 방법이라는 결론을 제시합니다. **작은 디테일이 만드는 거대한 경험의 차이** * 대규모 기능 개발에만 치중하다 보면 간과하기 쉬운 미세한 UI/UX의 결점을 찾아내고 수정하는 데 집중합니다. * 단일 업데이트는 사소해 보일 수 있지만, 이러한 개선사항들이 누적되면 사용자가 도구를 사용할 때 느끼는 마찰(Friction)이 획기적으로 줄어듭니다. * 사용자의 작업 흐름을 방해하지 않는 직관적인 인터페이스 튜닝은 전문적인 창작 도구가 갖추어야 할 핵심적인 품질 기준이 됩니다. **품질 개선을 위한 조직적인 접근 방식** * 피그마는 단순히 남는 시간에 품질을 개선하는 것이 아니라, 별도의 '품질 주간(Quality Weeks)'이나 전담 프로세스를 통해 이를 체계화합니다. * 커뮤니티 피드백뿐만 아니라 내부 엔지니어와 디자이너들이 직접 도구를 사용하며 느끼는 '작지만 짜증 나는' 지점들을 우선순위에 반영합니다. * 기술적 부채를 해결하는 것과 동시에, 사용자 인터랙션의 반응 속도와 캔버스 렌더링 성능을 미세하게 조정하여 심리적인 만족도를 높입니다. **사용자 신뢰 구축과 제품의 지속 가능성** * 사용자가 오랫동안 요청해 온 작은 기능이나 사소한 버그 수정을 반영함으로써, 개발사가 사용자의 목소리에 귀를 기울이고 있다는 강력한 메시지를 전달합니다. * 제품의 마감(Polish) 상태는 브랜드의 전문성을 상징하며, 이는 장기적인 사용자 유지(Retention)와 충성도로 이어집니다. * '작게 생각하기' 전략은 복잡해지는 소프트웨어 생태계에서 제품의 본질적인 사용성을 유지하는 핵심적인 방어 기제가 됩니다. 제품의 성장이 정체되거나 사용자의 사소한 불만이 쌓이고 있다면, 거창한 신기능 대신 기존 기능의 '마감 작업'에 집중해 보시기 바랍니다. 정기적으로 팀 내에서 '불편함 리스트'를 작성하고 이를 해결하는 짧은 스프린트를 운영하는 것만으로도 제품의 완성도를 비약적으로 높일 수 있습니다.
코드 변경 시 기기 (새 탭에서 열림)
Server-side sandboxing: An introduction Inside Figma Security Engineering
프로토타이핑 문화를 조성 (새 탭에서 열림)
피그마는 Config 2023을 통해 디자인과 개발 사이의 간극을 좁히고, 팀이 제품을 구축하는 방식을 근본적으로 재정의하고자 합니다. 단순한 디자인 도구를 넘어 개발자와 디자이너가 실시간으로 소통하며 제품을 완성해 나가는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 공간인 '데브 모드(Dev Mode)'와 디자인 시스템의 유연성을 극대화하는 '변수(Variables)' 기능을 도입하여 협업의 효율성을 극대화한 것이 이번 발표의 핵심입니다. ### 개발자를 위한 전용 공간, 데브 모드(Dev Mode) * **개발 중심 인터페이스:** 디자인 파일을 개발 언어로 해석해 주는 새로운 공간으로, 개발자가 디자인 시스템을 더 쉽게 이해하고 구현할 수 있도록 돕습니다. * **코드 검사 및 익스텐션:** CSS, iOS, Android 전용 코드를 제공하며, Jira나 GitHub, Storybook과 같은 기존 워크플로우 도구와 플러그인을 통해 연결할 수 있습니다. * **Figma for VS Code:** 디자인 파일을 보기 위해 브라우저를 오갈 필요 없이, 개발 환경인 VS Code 내에서 디자인을 확인하고 변경 사항을 즉시 반영할 수 있습니다. * **준비 상태 표시:** 디자이너가 특정 섹션을 "개발 준비 완료(Ready for dev)" 상태로 표시하여 개발자가 불필요한 커뮤니케이션 없이 작업을 시작할 수 있게 합니다. ### 디자인 시스템의 진화, 변수(Variables) * **디자인 토큰화:** 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 전반에 걸쳐 일관성을 유지하고 효율적으로 관리할 수 있습니다. * **모드(Modes) 기능:** 다크 모드, 라이트 모드, 혹은 모바일과 데스크톱 환경에 따른 수치 변화를 변수 세트로 묶어 클릭 한 번으로 전체 디자인 테마를 전환할 수 있습니다. * **고급 프로토타이핑과의 연동:** 변수와 논리 연산(if/else), 수학적 표현식을 결합하여 실제 제품과 유사하게 작동하는 고충실도(Hi-fi) 프로토타입을 제작할 수 있습니다. ### 코드의 논리를 담은 오토 레이아웃(Auto Layout) 업데이트 * **줄바꿈(Wrap) 지원:** 여러 요소를 가로로 배치하다가 공간이 부족하면 자동으로 다음 줄로 넘겨주는 기능이 추가되어 응답형 레이아웃 구현이 쉬워졌습니다. * **최소/최대 너비 및 높이 설정:** 요소의 크기가 특정 범위를 벗어나지 않도록 제한할 수 있어, 실제 개발 환경에서 CSS로 제어하는 방식과 동일한 설계가 가능해졌습니다. 피그마가 도입한 '데브 모드'와 '변수'는 단순한 편의 기능이 아니라, 디자인 산출물이 곧 코드로 이어지는 '디자인-코드 일원화'를 지향합니다. 팀의 생산성을 높이기 위해서는 디자이너가 변수 기능을 적극적으로 활용하여 시스템을 구축하고, 개발자는 VS Code 익스텐션을 통해 워크플로우를 통합하는 방식의 변화를 시도해 볼 것을 권장합니다.
올해 출시된 주요 기능 Top (새 탭에서 열림)
Figma는 Config 2023을 통해 디자이너와 개발자 사이의 장벽을 허물고, 제품 개발 전체 과정을 통합하는 플랫폼으로 거듭나겠다는 비전을 제시했습니다. 새롭게 도입된 '개발자 모드(Dev Mode)'와 '변수(Variables)' 기능은 디자인 의도를 실제 코드로 구현하는 과정을 획기적으로 단축하며 협업의 효율성을 극대화합니다. 이제 Figma는 단순한 그래픽 도구를 넘어 디자인과 엔지니어링이 공존하며 함께 제품을 빌드하는 공유 작업 공간으로 진화했습니다. ### 개발자를 위한 새로운 작업 환경, 개발자 모드(Dev Mode) * 디자인 파일의 속성을 CSS, iOS(SwiftUI), Android(Compose) 등 실제 개발 언어의 코드 형태로 즉시 확인하고 복사할 수 있는 전용 공간을 제공합니다. * Jira, GitHub, Storybook과 같은 주요 개발 도구와의 위젯 연동을 지원하여 디자인 사양 확인부터 티켓 관리까지 Figma 내에서 한 번에 수행할 수 있습니다. * '검사(Inspect)' 기능을 강화하여 변경된 사항을 시각적으로 비교해주며, '섹션 상태' 표시를 통해 개발 준비가 완료된 디자인을 명확하게 구분해 소통 비용을 줄여줍니다. * VS Code용 Figma 익스텐션을 통해 개발자가 에디터를 벗어나지 않고도 디자인 사양을 확인하고 실시간으로 소통할 수 있는 환경을 구축했습니다. ### 복잡한 디자인 시스템을 제어하는 변수(Variables) * 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 정의하여 디자인 토큰(Design Tokens)을 체계적으로 관리하고 대규모 프로젝트의 일관성을 유지할 수 있습니다. * '모드(Modes)' 기능을 통해 클릭 한 번으로 전체 디자인을 라이트 모드에서 다크 모드로 전환하거나, 한국어에서 영어로 다국어 대응 레이아웃을 즉시 확인할 수 있습니다. * 변수 기능을 오토 레이아웃과 결합하여 기기별 패딩이나 간격 값을 유연하게 조절함으로써 진정한 반응형 디자인 시스템 구현이 가능해졌습니다. ### 논리적 상호작용이 가능한 고급 프로토타이핑 * 조건문(If/Else)과 수식 연산을 프로토타이핑에 도입하여, 수십 개의 프레임을 복제하지 않고도 장바구니 수량 계산이나 로그인 로직 등 실제 앱과 유사한 인터랙션을 구현할 수 있습니다. * 변수를 프로토타입에 바인딩하여 사용자의 액션에 따라 UI가 동적으로 변화하는 고해상도의 테스트 환경을 제공합니다. * 인라인 미리보기 기능을 통해 수정 사항을 즉각적으로 테스트하며 프로토타입 제작 속도를 비약적으로 향상시켰습니다. ### CSS 로직을 닮은 오토 레이아웃(Auto Layout) 업데이트 * '줄바꿈(Wrap)' 기능이 추가되어 설정된 너비를 초과하는 요소들을 자동으로 다음 줄로 넘길 수 있어, 반응형 그리드와 태그 클라우드 구현이 쉬워졌습니다. * 요소의 '최소/최대 너비 및 높이(Min/Max Width & Height)'를 설정할 수 있게 되어 CSS의 레이아웃 제어 방식과 동일한 논리로 디자인을 구성할 수 있습니다. 이번 업데이트는 디자인 결과물을 실제 코드 구현 방식에 가깝게 정렬하여 개발 생산성을 높이는 데 핵심이 있습니다. 대규모 팀일수록 '변수' 기능을 활용해 디자인 시스템을 구조화하고, '개발자 모드'를 워크플로우에 적극 도입하여 디자인과 개발 간의 핸드오프(Hand-off) 과정을 최적화할 것을 권장합니다.