샤메인 리의 개발자 (새 탭에서 열림)

피터 양(Peter Yang)은 고객이 진정으로 사랑하는 제품을 만들기 위해서는 단순한 기능의 나열이 아닌, 사용자의 고통을 해결하는 본질적인 가치에 집중해야 한다고 강조합니다. 제품 제작자가 자신의 해결책에 매몰되기보다 문제 자체를 깊이 이해하고, '무엇을' 만들기 전에 '왜' 만들어야 하는지를 명확히 하는 것이 성공의 핵심입니다. 결국 데이터와 직관의 균형을 유지하며 사용자와의 끊임없는 소통을 통해 '최소한의 사랑받을 수 있는 제품(MLP)'을 빠르게 출시하고 반복 개선하는 것이 지속 가능한 성장의 결론입니다. ### 문제 정의와 본질에 대한 집착 * **해결책이 아닌 문제와 사랑에 빠지기:** 기술적 구현이나 특정 기능에 집착하기보다, 사용자가 겪고 있는 실제 고통(Pain point)이 무엇인지 이해하는 데 더 많은 시간을 할애해야 합니다. * **'왜(Why)'에서 시작하는 사고:** 기능을 정의하기 전에 이 제품이 존재해야 하는 이유와 그것이 사용자에게 줄 가치를 명확히 규정해야 팀 전체가 올바른 방향으로 나아갈 수 있습니다. ### 좁은 타겟팅과 감성적 완성도 * **니치 마켓(Niche) 공략:** 처음부터 모든 사람을 만족시키려 하기보다는, 특정 소수의 문제를 완벽하게 해결해 주는 것에서 시작하여 점차 영역을 확장해야 합니다. * **MLP(Minimum Lovable Product) 지향:** 단순히 작동만 하는 MVP(최소 기능 제품)를 넘어, 사용자가 첫눈에 매력을 느끼고 애착을 가질 수 있는 수준의 완성도를 갖춘 제품을 선보여야 합니다. ### 데이터 활용과 사용자 피드백의 균형 * **지속적인 사용자 인터뷰:** 정량적인 지표 뒤에 숨겨진 맥락을 파악하기 위해 실제 사용자와 직접 대화하며 그들의 언어와 감정을 읽어내야 합니다. * **데이터는 신호일 뿐 답은 아니다:** 데이터는 의사결정을 돕는 보조 지표로 활용하되, 제품의 장기적인 비전과 직관을 데이터 수치에만 의존해 결정해서는 안 됩니다. ### 실행 속도와 우선순위 관리 * **가차 없는 우선순위 선정:** 제품의 핵심 가치와 직접적인 관련이 없는 수많은 요청에 대해 기꺼이 '아니오'라고 말할 수 있어야 제품의 단순함을 유지할 수 있습니다. * **빠른 출시와 반복 개선:** 완벽을 기하며 출시를 늦추기보다, 빠르게 시장에 내놓고 실제 사용자의 피드백을 받아 제품을 개선하는 속도 자체가 경쟁 우위가 됩니다. ### 지속 가능한 성장과 커뮤니티 * **획득보다 유지(Retention)에 집중:** 새로운 고객을 데려오는 마케팅보다 이미 들어온 사용자가 이탈하지 않고 꾸준히 사용하는 환경을 만드는 것이 제품 성장의 펀더멘털입니다. * **커뮤니티 형성:** 제품을 단순한 도구로 소비하는 고객을 넘어, 제품의 비전에 공감하고 함께 목소리를 내는 강력한 팬덤과 커뮤니티를 구축해야 장기적인 생존이 가능합니다. 제품 개발 과정에서 팀이 기술적 복잡함에 빠질 때마다 "이것이 사용자의 어떤 문제를 해결하는가?"라는 질문으로 돌아가야 합니다. 기능을 추가하는 것보다 덜어내는 것에 집중하고, 수치상의 트래픽보다는 한 명의 사용자가 느끼는 감동의 크기를 측정하는 태도가 훌륭한 제품을 만드는 첫걸음입니다.

초안 작동 방식 업데이트 | Figma (새 탭에서 열림)

Figma의 'Drafts(초안)' 업데이트는 개인의 아이디어 스케치 공간이었던 드래프트를 팀 및 조직의 영역으로 통합하여 협업의 연속성과 데이터 보안을 강화하는 데 목적을 두고 있습니다. 이제 드래프트는 단순한 개인 저장소를 넘어 팀 라이브러리와 원활하게 연결되며, 작업자가 조직을 떠나더라도 작업물이 유실되지 않도록 관리 체계 안에 머물게 됩니다. 이를 통해 디자이너는 초기 탐색의 자유로움을 유지하면서도, 조직 차원에서는 디자인 자산의 가시성과 거버넌스를 확보할 수 있게 되었습니다. **드래프트 위치의 변화와 협업 구조의 개선** - 과거 드래프트는 사용자의 개인 계정에 종속된 별도의 공간이었으나, 이제는 특정 팀이나 조직 내에 위치하게 됩니다. - 작업자가 퇴사하거나 팀을 옮기더라도 해당 드래프트 파일이 조직의 관리 하에 유지되어 지적 재산권 유실을 방지합니다. - '공유 전용 드래프트'와 같은 개념을 통해, 정식 프로젝트로 이동하기 전에도 팀원들과 더욱 빠르고 안전하게 아이디어를 공유할 수 있는 환경을 제공합니다. **팀 컨텍스트와의 결합 및 워크플로우 효율화** - 드래프트가 팀 공간 내에 존재하게 되면서, 해당 팀의 유료 기능이나 팀 라이브러리에 훨씬 더 쉽게 접근할 수 있습니다. - 개인 공간과 팀 공간 사이를 오가는 불필요한 맥락 전환(Context Switching)이 줄어들어 작업 속도가 향상됩니다. - 드래프트 단계에서 프로젝트 폴더로 파일을 이동하는 과정이 직관적으로 변하여, 아이디어가 구체화되었을 때 정식 자산으로 전환하는 허들이 낮아졌습니다. **관리자 통제권 및 보안 거버넌스 강화** - 조직의 관리자는 이제 드래프트 내에 존재하는 파일들을 가시적으로 파악하고, 전사적인 보안 정책을 일관되게 적용할 수 있습니다. - 외부 공유 링크 관리나 콘텐츠 복제 제한 등의 보안 설정이 드래프트 단계부터 적용되어 데이터 유출 리스크를 최소화합니다. - 조직 전체의 스토리지 사용량을 더 정확하게 파악할 수 있으며, 불필요한 파일들을 체계적으로 정리할 수 있는 기반을 마련했습니다. 이러한 변화는 디자인 작업의 '시작' 단계부터 협업의 가능성을 열어두는 전략적 선택입니다. 디자이너는 여전히 혼자만의 실험 공간을 가질 수 있지만, 그 공간이 조직의 인프라 안에서 보호받고 지원받음으로써 결과적으로 더 견고한 디자인 시스템을 구축하는 밑거름이 됩니다. 따라서 개인 작업물을 정기적으로 팀 드래프트에 동기화하고, 프로젝트 성숙도에 따라 폴더 구조를 적극적으로 활용하는 방식의 업무 습관을 권장합니다.

리니어 방식: 주 (새 탭에서 열림)

듀오링고는 협업을 단순한 선택 사항이 아닌 조직의 핵심 원칙으로 정의하며, 제품 관리(PM), 엔지니어링, 디자인 조직이 유기적으로 결합된 구조를 통해 성장을 이끌어냅니다. 이들은 모든 구성원이 비즈니스 지표와 기술적 완성도에 공통된 책임을 지는 '트라이어드(Triad)' 모델을 운영하며, 이를 통해 사일로 현상을 방지하고 사용자 경험을 최적화합니다. 결과적으로 이러한 긴밀한 협업 문화는 빠른 실험과 견고한 프로덕트 개발을 동시에 가능하게 하는 듀오링고만의 경쟁력이 됩니다. **트라이어드(Triad) 협업 모델** * 각 팀은 제품 관리자(PM), 엔지니어링 매니저(EM), 프로덕트 디자이너(PD) 세 명의 리더로 구성된 '트라이어드' 체제로 운영됩니다. * 이들은 기획 초기 단계부터 최종 출시까지 모든 의사결정을 함께 내리며, 각 직군이 서로의 영역에 깊이 관여할 수 있는 구조를 만듭니다. * 엔지니어는 단순히 코드만 작성하는 것이 아니라 제품의 목표와 사용자 가치를 이해하고, PM은 기술적 부채와 인프라의 중요성을 인정하며 우선순위를 조정합니다. **지표 중심의 공동 책임제** * 듀오링고의 모든 팀원은 특정 직군에 국한되지 않고 일일 활성 사용자 수(DAU), 리텐션 등 비즈니스 핵심 지표를 공유합니다. * 엔지니어도 제품 실험 데이터와 사용자 피드백을 직접 분석하며, 이를 바탕으로 기능 개선 제안을 자유롭게 수행합니다. * 분기별 OKR(Objectives and Key Results) 수립 시 하향식 전달이 아닌, 팀원 전체가 참여하는 상향식 논의를 통해 목표를 설정하여 실행력을 높입니다. **개발 생산성을 높이는 기술적 토대** * 협업의 마찰을 줄이기 위해 '골든 패스(Golden Path)'라고 불리는 표준화된 개발 환경과 문서를 구축하여 누구나 쉽게 시스템을 이해하고 기여할 수 있게 합니다. * 코드 리뷰와 RFC(Request for Comments) 과정을 통해 설계 단계에서부터 타 직군 및 팀원들의 피드백을 수렴하여 기술적 오류를 최소화합니다. * 자동화된 테스트와 지속적 통합/배포(CI/CD) 환경을 강화하여, 개발자가 협업 과정에서 발생하는 오버헤드 없이 제품의 가치를 높이는 데 집중할 수 있도록 지원합니다. **효율적인 커뮤니케이션과 문서화** * 회의 지상주의를 지양하고, PRD(Product Requirements Document)와 기술 설계 문서를 중심으로 비동기 소통을 활성화합니다. * 모든 실험 결과와 배운 점을 전사적으로 공유하는 문화를 통해 중복된 실수를 방지하고 조직 전체의 학습 속도를 가속화합니다. * 갈등이 발생할 경우 직급이나 권위가 아닌, 데이터와 사용자 가치를 기준으로 의사결정을 내리는 투명한 소통 방식을 고수합니다. 성공적인 협업은 단순히 사이좋게 지내는 것이 아니라, 서로의 전문성을 존중하면서도 하나의 목표(Metric)를 향해 정렬되는 구조를 만드는 데서 시작됩니다. 듀오링고처럼 직군 간의 벽을 허물고 기술과 비즈니스의 언어를 통합하는 조직 문화를 구축한다면, 대규모 조직에서도 스타트업과 같은 빠른 실행력을 유지할 수 있을 것입니다.

마이크로소프트에서 접근성을 (새 탭에서 열림)

마이크로소프트는 '세계 접근성 인식의 날(GAAD)'을 맞아 모든 개발자가 장애 여부와 상관없이 누구나 기술을 누릴 수 있도록 돕는 접근성 도구와 방법론을 제안합니다. 개발자는 복잡한 전문 지식 없이도 'Accessibility Insights'와 'Visual Studio'의 통합 도구를 활용해 개발 수명 주기 내에서 접근성 테스트를 손쉽게 수행할 수 있습니다. 궁극적으로 이러한 도구들은 단순히 규정을 준수하는 것을 넘어, 모든 사용자에게 공평하고 만족스러운 디지털 경험을 제공하는 것을 목표로 합니다. **FastPass를 통한 신속한 고부하 이슈 탐지** * Accessibility Insights for Web의 'FastPass' 기능을 활용하면 5분 이내에 사용자 경험에 큰 영향을 미치는 핵심 접근성 문제를 식별할 수 있습니다. * 오픈소스 엔진인 axe-core를 기반으로 한 자동화 체크를 통해 UI 코드를 작성하는 과정에서 즉각적인 피드백을 제공합니다. * 탭 정지(Tab Stops)와 같은 키보드 내비게이션 테스트를 포함하여, 스크린 리더나 확대 도구 사용자에게 혼란을 줄 수 있는 잘못된 포커스 순서를 바로잡도록 돕습니다. **Visual Studio 통합 접근성 검사기 활용** * Visual Studio 2022(버전 17.5 이상)에 내장된 접근성 검사기를 통해 별도의 도구 이동 없이 IDE 내에서 직접 문제를 발견하고 수정할 수 있습니다. * Accessibility Insights for Windows와 동일한 'Axe-Windows' 엔진을 사용하여 데스크톱 애플리케이션의 일반적인 접근성 오류를 정밀하게 감지합니다. * 개발 흐름을 유지하면서 동시에 접근성 스캐닝을 병행할 수 있어 개발 생산성과 포용성을 동시에 확보할 수 있습니다. **Quick Assess를 통한 정밀한 보조 테스트** * 자동화 도구로 감지하기 어려운 심층적인 이슈를 해결하기 위해 30분 이내로 수행 가능한 10가지 보조 테스트(Assisted tests)를 제공합니다. * 최근 업데이트를 통해 최신 웹 접근성 표준인 WCAG 2.2 기준에 대한 테스트 지원 및 안내 가이드를 도입했습니다. * 헤딩 레벨(Heading Levels) 검사 등 각 테스트 항목마다 해당 이슈가 왜 중요한지(Why It Matters)에 대한 설명과 함께 구체적인 수정 사례 및 리소스를 연결해 줍니다. 접근성 개선은 단순히 체크리스트의 항목을 지우는 작업이 아니라, 기술을 통해 모든 사람에게 평등한 기회를 제공하는 혁신의 과정입니다. 지금 바로 Accessibility Insights와 Visual Studio의 최신 기능을 개발 프로세스에 도입하여, 작은 단계부터 사용자 경험의 질을 높여보시길 권장합니다.

Copy-on-Write 성능 및 디 (새 탭에서 열림)

Windows 11의 Dev Drive와 Copy-on-Write(CoW) 링크 기능은 대규모 코드베이스의 빌드 성능을 최대 43%까지 향상시키며, 특히 프로젝트 간 종속성이 깊은 C# 환경에서 탁월한 효율을 발휘합니다. 이 기술은 파일 데이터를 물리적으로 복제하는 대신 동일한 디스크 블록을 참조하는 방식을 통해 I/O 부하를 획기적으로 줄이며, Windows Server 2025 및 Windows 11 24H2에 기본 기능으로 탑재될 예정입니다. 개발자는 전용 도구를 통해 CoW 링크 상태를 모니터링하고 참조 누수를 관리함으로써 최적의 개발 성능을 유지할 수 있습니다. **레포지토리 빌드 성능 테스트 결과** - **C# 및 마이크로서비스 이점:** 프로젝트 간 종속성이 깊어 어셈블리 복사가 빈번한 C# 프로젝트나, 빌드 출력 시 대규모 마이크로서비스 레이아웃을 구성하는 환경에서 최소 10%에서 최대 43%의 빌드 시간 단축 효과가 확인되었습니다. - **언어별 차이:** C++ 프로젝트는 상대적으로 적은 수의 대용량 파일을 생성하고 복사 빈도가 낮아 C#에 비해 성능 향상 폭이 적었으나, 파일 복사 과정이 포함된 경우에는 여전히 이득을 보였습니다. - **병렬성 영향:** 빌드 초기 단계의 병렬 처리는 빨라지지만, 마지막 단계에서 거대 프로젝트들이 선형적으로 빌드되는 구조의 레포지토리는 전체 빌드 시간 단축 효과가 희석될 수 있습니다. **CoW 링크 및 블록 클론 식별 방법** - **참조 상태 확인:** `fsutil file queryExtentsAndRefCounts` 명령어를 사용하여 특정 파일이 CoW 링크인지, 즉 블록 클론(Block Clone) 상태인지 확인할 수 있습니다. - **Ref 카운트의 의미:** 출력 결과 중 `Ref: 0x4`와 같은 값은 해당 디스크 볼륨 내에서 4개의 파일 엔트리가 동일한 물리적 데이터 블록을 공유하고 있음을 나타냅니다. - **메타데이터 관리:** 각 클론된 파일은 참조 추적을 위해 최소 하나 이상의 클러스터를 별도로 사용하여 메타데이터를 관리합니다. **분석 도구(ProcMon, Xperf) 사용을 위한 필터 설정** - **필터 드라이버 허용:** Dev Drive는 보안과 성능을 위해 필터 드라이버 연결을 제한하므로, `fsutil devdrv setfiltersallowed` 명령을 통해 분석 도구 전용 필터를 허용 목록에 추가해야 합니다. - **Xperf 사용 시 주의사항:** 성능 측정을 위해 `FileInfo` 필터를 허용한 경우, 측정이 끝난 후에는 반드시 목록에서 제거하고 드라이브를 재마운트해야 합니다. 이를 방치하면 드라이브 성능이 지속적으로 저하될 수 있습니다. - **상시 허용:** ProcMon 필터와 같은 도구는 실제 분석 도구가 실행 중일 때만 부하를 주므로, 필요에 따라 허용 목록에 상시 유지해도 무방합니다. **참조 누수(Leaked References) 탐지 및 복구** - **클론 한계치:** Dev Drive의 기반인 ReFS는 데이터 블록당 최대 8,176개의 클론을 허용하며, 이를 초과할 경우 복사 오류(`STATUS_BLOCK_TOO_MANY_REFERENCES`)가 발생할 수 있습니다. - **관리 도구 활용:** 장기간 빌드를 반복하여 고립된 참조나 누수가 의심될 경우, 관리자 권한으로 `refsutil leak <드라이브명> /s` 명령을 실행하여 누수된 클러스터를 스캔하고 복구할 수 있습니다. - **사전 감지:** `/d` 파라미터를 사용하면 실제 수정 없이 누수 여부만 미리 파악할 수 있어 시스템 안정성을 점검하는 데 용이합니다. **실용적인 결론 및 제언** 대규모 프로젝트를 운영하는 팀은 Dev Drive 도입 시 NuGet 패키지 캐시를 소스 코드와 동일한 파티션에 배치하여 CoW 이득을 극대화해야 합니다. 또한, 빌드 성능 분석을 위해 필터 드라이버 설정을 변경했다면 성능 유지를 위해 분석 완료 후 불필요한 필터를 반드시 정리하는 습관이 필요합니다.

장인정신과 아름다움 (새 탭에서 열림)

Linear는 서비스 마비 수준의 DDoS 공격을 단순한 보안 위협이 아닌, 시스템 전반의 기술 부채를 해결하고 성능을 극한으로 끌어올리는 기회로 삼았습니다. 공격자가 악용한 비효율적인 쿼리와 아키텍처의 약점을 근본적으로 개선함으로써, 사건 종료 후 Linear는 공격 전보다 훨씬 더 빠르고 안정적인 서비스로 거듭났습니다. 이는 보안 대응이 단순히 방어벽을 세우는 것을 넘어 시스템의 기초 체력을 강화하는 과정임을 시사합니다. ### DDoS 공격의 양상과 초기 대응의 한계 * 단순한 네트워크 트래픽 과부하가 아니라, 데이터베이스에 과부하를 주는 고비용 API 호출을 집중적으로 노린 정교한 애플리케이션 계층(L7) 공격이었습니다. * IP 차단이나 속도 제한(Rate Limiting) 같은 전통적인 방어 수단은 공격자가 패턴을 지속적으로 변경함에 따라 '두더지 잡기'식의 한계에 부딪혔습니다. * 공격이 지속되는 동안 시스템의 가장 느린 부분들이 병목 현상을 일으키며 전체 서비스 중단으로 이어지는 과정을 목격했습니다. ### 데이터베이스 성능 최적화와 쿼리 개선 * 공격자가 검색 및 필터링 기능을 악용한다는 점에 착안하여, 실행 계획(Query Plan) 분석을 통해 인덱스가 제대로 작동하지 않던 지점들을 대대적으로 수정했습니다. * 특히 '소프트 삭제(Soft Delete)' 처리를 위한 필터 조건이 쿼리 성능을 저하시키는 주요 원인임을 파악하고, 이를 최적화하여 데이터 조회 속도를 획기적으로 높였습니다. * Postgres 데이터베이스의 불필요한 Full Table Scan을 제거하고, 가장 빈번하게 호출되는 엔드포인트의 응답 시간을 밀리초 단위로 단축했습니다. ### 동기화 엔진 및 아키텍처 재설계 * Linear의 핵심인 오프라인 우선(Offline-first) 동기화 아키텍처에서 발생하는 오버헤드를 줄이기 위해 동기화 로직을 전면 재검토했습니다. * 클라이언트와 서버 간의 데이터 상태 비교 프로세스를 효율화하여, 동일한 작업을 수행할 때 발생하는 CPU 및 메모리 점유율을 대폭 낮췄습니다. * 결과적으로 인프라를 증설하지 않고도 이전보다 몇 배나 많은 동시 요청을 처리할 수 있는 구조적 회복 탄력성을 확보했습니다. 보안 사고는 시스템의 가장 취약한 고리를 드러내는 가혹한 테스트 베드가 될 수 있습니다. Linear의 사례처럼 공격에 단순히 방어적으로 대응하기보다 시스템 내부의 효율성을 높여 '공격의 가성비'를 떨어뜨리는 전략은, 보안과 성능이라는 두 마리 토끼를 잡을 수 있는 탁월한 접근 방식입니다. 성능 최적화가 곧 최선의 보안 대책이 될 수 있다는 점을 시사합니다.

피그마의 TypeScript (새 탭에서 열림)

피그마(Figma)는 자사의 모바일 렌더링 엔진의 핵심 언어였던 자체 개발 언어 'Skew'를 산업 표준인 TypeScript로 완전히 전환하는 데 성공했습니다. 과거 성능 최적화를 위해 도입했던 Skew가 팀 규모 확장에 따라 생산성 저해와 생태계 부재라는 한계에 부딪히자, 피그마는 일상적인 개발 흐름을 방해하지 않으면서도 자동화된 마이그레이션을 완수했습니다. 결과적으로 피그마는 성능 손실 없이 더 나은 개발 환경과 최신 JavaScript 생태계의 이점을 누릴 수 있게 되었습니다. ### 자체 개발 언어 Skew의 도입과 한계 * **성능 중심의 탄생:** 초기 피그마는 웹과 모바일 모두에서 프로토타입 뷰어를 구현하기 위해 Skew를 개발했습니다. 당시 Skew는 정적 타이핑과 더불어 상수 폴딩(constant folding), 가상 함수 호출 최적화(devirtualization) 등 고급 컴파일러 최적화를 통해 JavaScript보다 뛰어난 성능을 제공했습니다. * **확장의 걸림돌:** 하지만 팀이 커지면서 Skew는 신규 입사자의 적응을 어렵게 만들고, 린터(linter)나 정적 분석기 같은 현대적인 개발 도구 생태계를 활용할 수 없다는 단점이 부각되었습니다. * **기능의 부재:** async/await와 같은 현대적인 JavaScript 기능이 부족했고, 피그마 내부의 다른 코드베이스와 통합하는 데에도 높은 비용이 발생했습니다. ### TypeScript 전환이 가능해진 기술적 배경 * **WebAssembly(Wasm)의 보편화:** 2018년 이후 모바일 브라우저에서 WebAssembly 지원이 확대되었고, 2020년경에는 모바일에서도 안정적인 성능을 발휘하게 되었습니다. * **C++ 엔진으로의 교체:** Skew로 작성되었던 파일 로딩 등 핵심 성능 경로를 WebAssembly로 컴파일되는 C++ 엔진으로 대체함으로써, 나머지 로직을 TypeScript로 전환하더라도 전체 성능에 미치는 영향이 미미해졌습니다. * **팀 규모의 성장:** 개발 경험(DX) 개선에 전념할 수 있는 리소스를 확보할 만큼 팀이 성장하면서 자동화된 마이그레이션 도구 개발이 가능해졌습니다. ### 안전한 전환을 위한 3단계 자동화 프로세스 * **1단계 (Skew 작성, Skew 빌드):** 기존 빌드 프로세스를 유지하면서 Skew 코드를 TypeScript로 변환하는 트랜스파일러를 개발했습니다. 변환된 TypeScript 코드를 깃허브에 체크인하여 개발자들이 미래의 코드 모습을 확인할 수 있게 했습니다. * **2단계 (Skew 작성, TypeScript 빌드):** 개발자는 여전히 Skew로 코드를 짜지만, 실제 프로덕션 빌드는 트랜스파일러를 거친 TypeScript 코드로 진행했습니다. 이 과정에서 유닛 테스트를 통과시키고 타입 오류를 점진적으로 수정하며 안정성을 확보했습니다. * **3단계 (TypeScript 작성, TypeScript 빌드):** 특정 시점에 Skew 코드 생성을 중단하고 모든 Skew 소스 파일을 삭제했습니다. 이후 모든 개발자는 TypeScript를 직접 작성하게 되었으며, CI/CD 파이프라인도 TypeScript 기반으로 완전히 전환되었습니다. ### 실용적인 결론 및 시사점 피그마의 사례는 서비스 초기 성능을 위해 도입한 커스텀 기술이 성숙기에는 오히려 부채가 될 수 있음을 보여줍니다. 특히 대규모 코드베이스를 전환할 때는 **'점진적인 롤아웃'**과 **'자동화된 트랜스파일링'**이 핵심입니다. Skew와 TypeScript 간의 시맨틱 차이(예: 네임스페이스 초기화 순서 등)로 발생할 수 있는 런타임 오류를 방지하기 위해, 자체 컴파일러를 수정하여 제어권을 확보한 점은 기술적 난관을 극복한 훌륭한 전략으로 평가됩니다.

C++ 빌드 시간 단축하기 (새 탭에서 열림)

피그마(Figma)는 C++ 코드베이스가 10% 증가할 때 빌드 시간이 50%나 급증하는 문제를 해결하기 위해, 컴파일러로 전송되는 데이터 양(바이트)을 줄이는 전략을 채택했습니다. 하드웨어 업그레이드나 캐싱만으로는 한계가 있음을 깨닫고, 불필요한 헤더 포함을 자동으로 찾아내고 방지하는 자체 도구인 'DIWYDU'와 'includes.py'를 개발하여 빌드 시간을 절반으로 단축했습니다. 결과적으로 빌드 시간의 핵심 지표가 전처리 후의 바이트 수에 비례한다는 점을 입증하며 대규모 개발 환경에서의 생산성을 확보했습니다. ### 헤더 포함 방식과 빌드 속도의 상관관계 * C++ 컴파일 과정에서 전처리기(Pre-processor)는 소스 파일에 포함된 모든 헤더 파일을 하나의 거대한 파일로 합치며, 이는 전이적 의존성(Transitive dependency)을 포함해 컴파일러가 처리해야 할 바이트 수를 기하급수적으로 늘립니다. * 피그마의 분석 결과, 실제 추가된 코드량보다 전처리 후 컴파일러로 전달되는 바이트 수의 증가 폭이 훨씬 컸으며, 이것이 빌드 시간 지연의 주요 원인으로 파악되었습니다. * 대형 파일에서 불필요한 헤더를 수동으로 제거하는 실험을 진행한 결과, 컴파일 바이트는 31%, 콜드 빌드 시간은 25% 감소하며 가설이 증명되었습니다. ### DIWYDU: 불필요한 헤더 제거 자동화 * 구글의 IWYU(Include What You Use)가 너무 엄격하여 적용이 어렵자, 피그마는 더 유연한 자체 도구인 DIWYDU(Don’t Include What You Don’t Use)를 개발했습니다. * 이 도구는 `libclang`의 파이썬 바인딩을 사용하여 추상 구문 트리(AST)를 분석하며, 특정 파일이 포함한 헤더에서 함수, 타입, 변수 등을 직접적으로 사용하는지 확인합니다. * 직접적인 의존성이 없는 헤더를 찾아내어 삭제하도록 플래그를 표시함으로써 모든 기능 브랜치에서 빌드 속도 저하를 방지합니다. * 다만, STL(표준 템플릿 라이브러리)의 프라이빗 헤더 구조나 `libclang` 파이썬 바인딩의 AST 노드 접근 제한(UNEXPOSED_EXPR 등)과 같은 기술적 한계는 존재합니다. ### includes.py를 통한 회귀 방지 및 측정 * 헤더를 실제로 사용하더라도 파일 크기가 너무 커서 빌드 속도를 늦추는 경우를 대비해, 전이적 바이트 수를 측정하는 `includes.py`를 구축했습니다. * Clang을 사용하지 않고 순수 파이썬으로 작성되어 실행 속도가 매우 빠르며(수 초 내외), CI(지속적 통합) 시스템에서 각 PR이 빌드 시간에 미치는 영향을 바이트 단위로 측정합니다. * 특정 PR이 컴파일 바이트 수를 과도하게 늘릴 경우 경고를 발생시켜 개발자가 전방 선언(Forward Declaration)을 사용하거나 헤더를 분리하도록 유도합니다. * 표준 라이브러리는 피그마 내부의 래퍼(Wrapper) 디렉토리를 통해 관리되므로, 표준 헤더의 바이트는 계산에서 제외하여 효율성을 높였습니다. C++ 프로젝트의 빌드 속도를 유지하기 위해서는 단순한 캐싱을 넘어 컴파일러가 처리하는 데이터의 총량을 관리해야 합니다. 불필요한 헤더 의존성을 제거하는 자동화 도구를 CI 파이프라인에 통합하고, '컴파일 바이트 수'를 성능 지표로 모니터링하는 것이 대규모 코드베이스의 개발 효율을 높이는 실질적인 방안이 될 수 있습니다.

카바나가 일관성과 확장성을 (새 탭에서 열림)

Headspace는 브랜드 특유의 정체성을 유지하면서도 글로벌 확장에 대응하기 위해, 제품 전반에 걸쳐 유연하게 적용되는 'Great Outdoors' 디자인 시스템을 구축했습니다. 이 시스템은 단순한 컴포넌트 모음이 아니라 디자인과 엔지니어링 사이의 소통 방식을 표준화하여 제품 개발의 효율성과 일관성을 동시에 확보하는 것을 목표로 합니다. 결과적으로 Headspace는 디자인 토큰과 체계적인 구조를 통해 브랜드의 감성을 모든 접점에서 조화롭게 전달할 수 있는 기반을 마련했습니다. ### 시스템적 일관성과 브랜드 가치의 결합 * 파편화되어 있던 기존의 UI 요소들을 통합하여, 사용자가 어느 화면에서나 Headspace만의 차분하고 따뜻한 브랜드 경험을 느낄 수 있도록 재설계했습니다. * 디자인 시스템을 고정된 규칙이 아닌 제품과 함께 진화하는 생태계로 정의하고, 디자이너와 엔지니어가 동일한 철학을 공유하며 협업할 수 있는 환경을 조성했습니다. * 단순한 시각적 일관성을 넘어, '마음챙김(Mindfulness)'이라는 서비스 가치가 기술적으로도 부드럽게 구현될 수 있도록 컴포넌트의 동작과 애니메이션 가이드를 구체화했습니다. ### 디자인 토큰을 통한 유연한 테마 시스템 구현 * 색상, 타이포그래피, 간격 등의 수치를 의미론적 이름(Semantic Naming)을 가진 디자인 토큰으로 관리하여, 코드와 디자인 파일 간의 불일치를 해소했습니다. * Figma의 변수(Variables) 기능을 적극 활용해 라이트 모드, 다크 모드뿐만 아니라 다양한 브랜드 테마를 즉각적으로 전환할 수 있는 구조를 만들었습니다. * 토큰 기반 시스템을 통해 플랫폼(iOS, Android, Web)별로 최적화된 값을 동적으로 할당함으로써 유지보수 비용을 획기적으로 낮췄습니다. ### 접근성과 포용성을 고려한 컴포넌트 설계 * 다양한 신체적, 인지적 조건을 가진 사용자들이 장벽 없이 서비스를 이용할 수 있도록 WCAG(Web Content Accessibility Guidelines) 기준을 엄격히 준수했습니다. * 컴포넌트 설계 단계부터 스크린 리더 지원, 고대비 모드, 글자 크기 조절 대응 등을 기본 사양으로 포함했습니다. * 글로벌 서비스로서 다양한 언어의 특성(텍스트 길이 변화 등)을 수용할 수 있는 유연한 레이아웃 컴포넌트를 개발하여 시각적 깨짐 현상을 방지했습니다. ### 디자인 시스템의 운영과 확산 전략 * 문서화 도구를 활용해 각 컴포넌트의 사용 목적, 코드 예시, 디자인 시 주의사항을 한곳에서 확인할 수 있는 중앙 집중형 라이브러리를 구축했습니다. * 디자인 시스템 전담 팀을 구성하여 구성원들의 피드백을 수렴하고, 새로운 요구사항을 시스템에 반영하는 지속적인 거버넌스 프로세스를 수립했습니다. * 시스템 도입 초기부터 엔지니어링 팀과의 긴밀한 협력을 통해, 디자인 시스템이 실제 제품 코드에 적용되는 과정을 자동화하고 워크플로우를 최적화했습니다. Headspace의 사례는 디자인 시스템이 단순히 UI를 정리하는 도구를 넘어, 브랜드의 철학을 기술적인 언어로 번역하는 핵심 전략임을 잘 보여줍니다. 특히 확장성을 고려한 디자인 토큰의 명명 규칙과 접근성에 대한 깊은 고민은 대규모 글로벌 서비스를 운영하는 조직이 반드시 참고해야 할 지점입니다. 효율적인 제품 개발을 꿈꾼다면 초기부터 디자인과 엔지니어링이 공유할 수 있는 표준화된 시스템 구축에 투자하는 것이 장기적으로 가장 경제적인 선택이 될 것입니다.

알래스카 항공, 변 (새 탭에서 열림)

Razorpay는 다양한 플랫폼과 제품군 전반에서 일관되고 직관적인 사용자 경험을 유지하기 위해 'Blade'라는 디자인 시스템을 구축했습니다. Blade는 디자인과 엔지니어링 사이의 간극을 메워 개발 워크플로우를 최적화하며, 복잡한 핀테크 제품의 UI 개발 속도를 대폭 향상하는 것을 목표로 합니다. 결과적으로 이를 통해 개발자는 반복적인 스타일 작업에서 벗어나 핵심 비즈니스 로직에 더욱 집중할 수 있게 되었습니다. **크로스 플랫폼 일관성을 위한 Blade 시스템 구축** * 웹과 모바일(Android, iOS) 환경 모두를 지원하기 위해 React와 React Native를 기반으로 한 통합 컴포넌트 라이브러리를 운영합니다. * 제품별로 파편화되어 있던 UI 요소를 표준화하여, 어떤 서비스에서도 사용자가 동일한 브랜드 경험을 느낄 수 있도록 설계했습니다. * 디자인 토큰(Design Tokens)을 활용하여 색상, 타이포그래피, 간격 등의 스타일 요소를 코드화하고 이를 중앙에서 관리함으로써 변경 사항을 실시간으로 전체 플랫폼에 반영합니다. **개발자 경험(DX) 향상과 워크플로우 자동화** * Blade CLI와 같은 자체 도구를 개발하여 컴포넌트 생성 및 설정 과정을 자동화하고, 개발자가 수동으로 수행하던 반복 작업을 최소화했습니다. * 포괄적인 문서화와 실시간 프리뷰 기능을 제공하는 스토리북(Storybook)을 통해 개발자가 컴포넌트의 사양과 사용법을 즉각적으로 파악할 수 있도록 지원합니다. * 자동화된 린팅(Linting) 및 테스트 스크립트를 워크플로우에 통합하여, 코드 작성 단계에서부터 디자인 시스템 준수 여부를 검증합니다. **접근성(A11y) 및 품질 보증 내재화** * 모든 기본 컴포넌트에 WCAG(웹 콘텐츠 접근성 지침) 표준을 내장하여, 별도의 추가 작업 없이도 접근성이 보장된 제품을 개발할 수 있는 환경을 제공합니다. * 컴포넌트 단위의 엄격한 유닛 테스트와 시각적 회귀 테스트(Visual Regression Testing)를 통해 시스템 업데이트 시 발생할 수 있는 의도치 않은 UI 오류를 사전에 방지합니다. * 디자인 시스템 전담 팀이 정기적으로 피드백을 수렴하고 라이브러리를 고도화하여 최신 기술 트렌드와 비즈니스 요구사항을 즉각 반영합니다. 대규모 조직에서 제품의 확장성을 확보하려면 단순한 가이드를 넘어 도구화된 디자인 시스템이 필수적입니다. Razorpay의 사례처럼 디자인 시스템을 라이브러리 형태를 넘어 개발 프로세스 자체에 통합하는 방식은 개발 효율성과 제품 품질을 동시에 잡을 수 있는 가장 실무적인 전략입니다.

디자인 시스템을 위한 올바 (새 탭에서 열림)

Figma는 'Framework' 이벤트를 통해 디자인 시스템의 운영 효율성을 극대화하고 디자이너와 엔지니어 간의 협업 간극을 좁히는 혁신적인 기능들을 공개했습니다. 이번 업데이트의 핵심은 반복적인 수정 작업을 자동화하고, 디자인 자산이 실제 코드와 일치하도록 보장하는 도구를 제공하여 대규모 조직의 제품 개발 속도를 가속화하는 데 있습니다. 결과적으로 팀은 단순 운영 업무에서 벗어나 더 수준 높은 사용자 경험을 설계하는 데 집중할 수 있는 환경을 갖추게 되었습니다. **멀티 에딧(Multi-edit)을 통한 작업 효율성 극대화** - 여러 프레임에 흩어져 있는 동일한 객체를 한 번에 선택하고 수정할 수 있는 'Multi-edit' 기능이 도입되었습니다. - 특정 레이어를 선택한 후 'Select matching layers' 기능을 사용하면 캔버스 전체에서 구조가 일치하는 요소를 즉시 찾아내어 위치, 크기, 스타일을 동시에 변경할 수 있습니다. - 텍스트 레이어 수정 시에도 여러 화면의 문구나 속성을 일괄 변경할 수 있어, 반복적인 디자인 수정에 소요되는 시간을 획기적으로 단축했습니다. **디자인 시스템 고도화 및 변수(Variables) 기능 확장** - 디자인 시스템의 핵심인 변수(Variables) 기능에 타이포그래피(Typography) 지원이 추가되어 글꼴 크기, 두께, 행간 등을 변수로 관리할 수 있게 되었습니다. - 이를 통해 다국어 대응이나 반응형 디자인 적용 시 타이포그래피 속성을 한 곳에서 제어하고 유연하게 변경할 수 있습니다. - 라이브러리 분석 도구(Library Analytics)가 강화되어, 어떤 컴포넌트가 실제 프로젝트에서 어떻게 활용되고 있는지에 대한 정밀한 데이터를 제공하여 시스템 개선의 근거를 마련해 줍니다. **엔지니어링 협업을 위한 코드 커넥트(Code Connect)** - 디자인 시스템의 컴포넌트와 실제 개발에 사용되는 코드(React, iOS, Android 등)를 직접 연결하는 'Code Connect' 기능이 강화되었습니다. - 개발자는 Figma 내에서 디자인 의도가 반영된 실제 코드 스니펫을 바로 확인하고 복사할 수 있어 구현의 정확성을 높일 수 있습니다. - Dev Mode를 통해 디자이너가 정의한 변수와 속성값이 코드 레벨에서 어떻게 매핑되는지 명확히 시각화하여 핸드오프 과정의 오해를 최소화합니다. **논리적 프로토타이핑과 인터랙션 개선** - 복잡한 상태 변화를 다수의 프레임 없이도 구현할 수 있도록 변수와 조건부 로직(Conditional Logic) 사용성이 개선되었습니다. - 실제 제품의 작동 방식과 유사한 고수준의 프로토타입을 더 적은 수의 레이어로 제작할 수 있어 성능 최적화와 관리 편의성을 동시에 잡았습니다. - 프로토타이핑 내에서의 상태 관리 및 인터랙션 흐름이 직관적으로 변하면서 테스트 및 피드백 주기가 빨라졌습니다. 이번 업데이트의 핵심인 타이포그래피 변수와 멀티 에딧 기능을 즉시 실무에 도입해 보시길 권장합니다. 특히 디자인 시스템이 실제 코드와 괴리되지 않도록 'Code Connect'를 활용해 엔지니어링 팀과의 워크플로우를 재정비한다면, 제품의 일관성을 유지하면서도 배포 속도를 크게 높일 수 있을 것입니다.