웹 개발

30 개의 포스트

figma4분 읽기큐레이션 요약

잊지 못할 Config 발표를 준비

인상적인 컨퍼런스 발표는 정보를 전달하는 데 그치지 않고, 청중의 통념을 뒤집으며 오래 기억될 관점과 이야기를 제공해야 한다. Figma의 Config 발표 사례들은 위험을 감수한 선택, 사용자에 대한 깊은 관심, 단순하고 창의적인 문제 해결이 훌륭한 발표와 제품을 만든다는 점을 보여준다. 특히 발표자는 성공 결과보다 그 과정에서의 의외의 판단과 배움을 설득력 있게 전달해야 한다. ## 발표의 목적: 정보 전달을 넘어 기억에 남는 경험 만들기 - 좋은 발표는 단순히 지식을 나열하지 않고 청중의 기존 가정에 도전한다. - 발표 주제뿐 아니라 발표자가 어떤 문제를 발견했고, 어떤 선택을 했으며, 무엇을 배웠는지가 중요한 콘텐츠가 된다. - 글은 Config 2024 발표자들이 인상 깊게 본 세션을 소개하며, 향후 발표 제안서를 준비하는 사람에게 하나의 기준을 제시한다. - 발표의 영감은 제품 디자인, 공간 컴퓨팅, 새로운 하드웨어 등 다양한 분야에서 얻을 수 있지만, 공통적으로 강한 서사와 분명한 관점이 존재한다. ## 통념을 거스른 위험한 선택 - Josh Wardle의 발표 **“Opting for the opposite”**는 일반적인 게임 업계의 성공 공식과 반대되는 선택을 다룬다. - Wordle은 다음과 같은 방식으로 성장과 참여를 극대화하는 관행을 따르지 않았다. - 하루에 한 번만 플레이할 수 있도록 제한 - 공유된 결과에서 게임으로 바로 연결되는 링크를 제공하지 않음 - 모바일 게임처럼 반복 사용과 바이럴 확산을 적극적으로 유도하지 않음 - Wardle은 처음부터 바이럴 히트작을 만들려 한 것이 아니라, 파트너를 위한 애정 어린 선물로 게임을 제작했다. - 이 사례의 핵심은 “성공하려면 반드시 업계의 모범 사례를 따라야 한다”는 생각을 뒤집은 데 있다. - 발표에서 위험을 감수한 선택을 보여주려면 단순히 결과를 자랑하기보다 다음을 설명해야 한다. - 당시 업계의 일반적인 접근법은 무엇이었는가 - 왜 그 반대의 선택을 했는가 - 그 선택이 사용자 경험에 어떤 영향을 미쳤는가 - 예상하지 못한 결과와 배움은 무엇이었는가 ## 지표보다 사용자를 우선한 제품 철학 - Apple의 디자인 에반젤리스트 Linda Dong은 Wordle 사례가 “많은 사람이 사랑하는 제품을 만들기 위해 항상 관습을 따를 필요는 없다”는 점을 상기시킨다고 평가한다. - 수치와 성장 지표가 중심이 된 산업에서도 단순함과 창의성만으로 강력한 제품을 만들 수 있다. - Humane의 리드 프로덕트 디자이너 George Kedenburg III 역시 Wordle의 과정이 “틀린 방식”처럼 보이는 선택을 통해 훌륭한 결과를 만든 이야기라고 강조한다. - 중요한 것은 규칙을 어기는 행위 자체가 아니라, 만들고자 하는 사용자를 깊이 이해하고 그 사용자에게 필요한 경험을 끝까지 고민하는 태도다. ## 구체적인 사례와 시각적·서사적 구성 - Linda Dong과 Mike Stern의 **“An Infinite Canvas”**는 공간 컴퓨팅 디자인의 가능성을 다룬다. - George Kedenburg III와 Humane 공동창업자 Imran Chaudhri의 발표는 Ai Pin의 개발 과정과 제품 비전을 소개한다. - 발표 주제가 복잡하거나 미래지향적일수록 다음 요소가 이해를 돕는다. - 제품이 해결하려는 사용자 문제 - 개발 과정에서의 핵심 결정 - 기술이 사용자 경험을 어떻게 바꾸는지 보여주는 실제 사례 - 아름답거나 유머러스한 시각 자료 - 청중의 기억에 남는 발표는 새로운 기술을 설명하는 데서 끝나지 않고, 그 기술이 왜 필요한지와 어떤 인간적 동기에서 출발했는지까지 전달한다. ## 실용적인 발표 준비 방법 - 업계의 정답을 그대로 따르기보다, 자신이 의도적으로 다르게 선택한 지점을 찾는다. - 성공한 결과보다 실패, 망설임, 예상 밖의 전환점을 이야기의 중심에 둔다. - “무엇을 만들었는가”뿐 아니라 “누구를 위해 만들었고 왜 그렇게 만들었는가”를 설명한다. - 데이터와 성과 지표는 보조 자료로 활용하고, 사용자의 실제 경험과 제작자의 판단을 중심에 둔다. - 발표를 준비할 때 다음 질문을 점검하면 좋다. - 청중의 기존 생각을 바꿀 만한 지점이 있는가? - 나만 들려줄 수 있는 구체적인 제작 경험이 있는가? - 발표가 끝난 뒤 청중이 기억할 한 문장은 무엇인가? - 제품이나 프로젝트에 담긴 사용자에 대한 관심이 드러나는가? 결국 인상적인 발표는 완벽한 성공 공식을 제시하는 자리가 아니라, 사용자에 대한 진정성 있는 관심과 과감한 선택이 어떻게 결과로 이어졌는지를 보여주는 자리다. 발표를 준비한다면 자신의 프로젝트에서 가장 의외였던 결정과 그 이유를 중심으로 이야기를 구성하는 것이 효과적이다.

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

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

마이크로소프트는 '세계 접근성 인식의 날(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의 최신 기능을 개발 프로세스에 도입하여, 작은 단계부터 사용자 경험의 질을 높여보시길 권장합니다.

figma원문

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 기능을 활용해 성능 저하를 방지하고 개발 생산성을 높이는 전략이 필수적입니다.

datadog원문

인수 테스트를 신세틱 (새 탭에서 열림)

데이터독(Datadog)은 기존에 사용하던 Puppeteer 기반의 불안정한 인수 테스트 시스템을 자사 제품인 'Synthetic Monitoring'으로 전환함으로써 개발자 경험과 배포 효율성을 대폭 개선했습니다. 1년여에 걸친 이 마이그레이션 과정은 단순한 도구 교체를 넘어, 300명 이상의 엔지니어가 참여하는 대규모 코드베이스의 테스트 신뢰도를 높이고 유지보수 비용을 절감하는 성과를 거두었습니다. 결과적으로 팀은 더 빠른 피드백 루프를 확보하고 안정적인 지속적 통합(CI) 환경을 구축할 수 있었습니다. ### 기존 인수 테스트의 문제점과 한계 * **높은 불안정성(Flakiness):** Puppeteer와 Chromium 헤드리스 브라우저를 기반으로 한 커스텀 러너는 가상 그래픽 엔진과 네트워크 등 제어할 수 없는 외부 요인으로 인해 예기치 않은 테스트 실패가 잦았습니다. * **복잡한 구현 및 유지보수:** 버튼의 활성화 상태를 확인하고 클릭하는 등의 단순한 상호작용조차도 수동 스크립트로 일일이 작성해야 했으며, 제품 업데이트 시마다 수백 개의 테스트 파일을 직접 수정해야 하는 번거로움이 있었습니다. * **인프라 부하 및 실행 시간:** 테스트 규모가 커짐에 따라 CI 작업 시간이 35분 이상으로 늘어났고, 10만 줄 이상의 테스트 관련 코드와 인프라를 유지하기 위해 많은 리소스가 소모되었습니다. ### Synthetic Monitoring 기반의 해결책 도입 * **노코드(No-code) 방식의 테스트 생성:** 직접 스크립트를 작성하는 대신 사용자의 페이지 상호작용을 기록하는 방식을 채택하여 테스트 작성 난이도를 낮추고 직관성을 높였습니다. * **CI/CD 통합 도구 개발:** CI 환경에서 테스트를 트리거하고 결과를 수집하기 위해 `synthetics-ci`(이후 `datadog-ci`로 범용화) CLI를 개발했습니다. 이를 통해 `.synthetics.json` 설정 파일을 기반으로 테스트를 자동 실행할 수 있게 되었습니다. * **유연한 구성 관리:** API를 통해 테스트 결과 ID를 폴링하고 휴먼 리더블(human-readable)한 출력을 제공하여, 개발자가 CI 단계에서 문제를 즉각 파악할 수 있도록 설계했습니다. ### 대규모 조직을 위한 마이그레이션 전략 * **점진적 신뢰 구축:** 초기에는 테스트 실패가 배포를 막지 않는 'Non-blocking' 단계를 도입하여, 엔지니어들이 새로운 시스템에 익숙해질 수 있는 여유를 제공하고 PR 댓글로 결과만 공지했습니다. * **데이터 기반의 설문과 지원:** 분기별 엔지니어 만족도 조사를 통해 고충을 파악하고, 테스트를 가장 많이 보유한 팀들을 대상으로 직접적인 마이그레이션 지원과 교육 세미나를 진행했습니다. * **체계적인 추적과 일몰(Sunset) 전략:** 모든 마이그레이션 과정을 Jira 티켓으로 관리하며 팀별 담당자를 지정했습니다. 기존 플랫폼을 한 번에 제거하는 대신, 개별 테스트가 안정화될 때마다 단계적으로 폐쇄하여 리스크를 최소화했습니다. E2E(End-to-End) 테스트의 유지보수 비용과 불안정성으로 인해 생산성이 저하되고 있다면, 코드 기반의 무거운 테스트 프레임워크 대신 사용자 시나리오 녹화 기능과 CI 통합이 강화된 'Synthetic Monitoring' 류의 도구 도입을 검토해야 합니다. 특히 대규모 조직일수록 기술적 전환뿐만 아니라 문서화, 비차단적(Non-blocking) 테스트 운영 등을 통한 문화적 접근이 마이그레이션 성공의 핵심입니다.

figma3분 읽기큐레이션 요약

디지털 디자인은 이제 어엿한

미국 노동통계국(BLS)이 ‘웹 및 디지털 인터페이스 디자이너’를 독립 직군으로 분류한 것은 디지털 디자인이 산업의 핵심 직업으로 자리 잡았다는 신호다. 2020~2030년 관련 직군은 약 40% 성장할 것으로 전망되며, 실제로 기업의 디자인 채용과 팀 규모도 빠르게 증가하고 있다. 이는 디지털 제품과 서비스에 대한 의존도, 사용자 유지 경쟁, 신속한 개선의 필요성이 커진 결과다. ## 디지털 디자인 직군의 공식 인정 - 과거 미국 노동통계에서 디지털 디자이너는 별도로 집계되지 않거나 웹 개발자와 함께 분류됐다. - 2022년 BLS는 ‘웹 및 디지털 인터페이스 디자이너’를 독립적인 직업 범주로 추가했다. - 이는 단순한 분류 변경이 아니라 해당 직무의 수요와 규모가 충분히 커졌다는 통계적 판단을 의미한다. - BLS는 웹 개발 및 디지털 디자인 관련 직군이 2020~2030년 사이 약 40% 성장할 것으로 전망했다. - 2030년 예상 고용 규모도 기존 18만 8천 명에서 20만 7천 명, 다시 22만 5천 명으로 상향 조정됐다. ## 기업과 세계 시장에서 커지는 수요 - 디자인 채용 전문 기업 Wert&Co는 기업의 디자인 관련 문의가 최근 몇 년간 약 3배 증가했다고 밝혔다. - 기업 리더들이 디자인을 사업 성공의 핵심 요소로 인식하면서 신입부터 임원급까지 다양한 수준의 기회가 늘고 있다. - LinkedIn 조사에서도 영국, 프랑스, 독일, 폴란드, 스페인, 브라질, 사우디아라비아, 인도 등에서 디자인 및 UX 리서치 직군이 빠르게 성장했다. - Figma가 4개국 280개 대기업을 조사한 결과, 2019~2022년 기업 디자인팀 규모는 평균 31% 증가했다. - 따라서 디지털 디자인 수요는 미국에 국한되지 않고 전 세계적인 현상으로 나타난다. ## 디지털 상호작용의 증가 - 사람들은 개인 생활뿐 아니라 업무에서도 앱과 웹사이트를 통해 더 많은 일을 처리한다. - 금융 관리, 업무 수행, 치료, 콘텐츠 소비, 도서 탐색, 생애 말기 계획까지 중요한 활동이 디지털 인터페이스를 통해 이루어진다. - 디지털 접점의 수가 늘어난 것뿐 아니라 각 접점이 사용자와 기업의 의사결정에 미치는 영향도 커졌다. - 이에 따라 인터페이스의 사용성, 명확성, 신뢰성, 접근성을 설계하는 일이 기업 운영의 중요한 요소가 됐다. ## 구독 경제와 사용자 유지 경쟁 - 많은 기업이 구독 모델이나 사용자 참여에 기반해 서비스를 판매한다. - 이 구조에서는 신규 고객 확보뿐 아니라 기존 사용자를 계속 유지하는 일이 중요하다. - 사용자는 지속적인 기능 업데이트와 개선을 기대하거나 최소한 이를 자연스럽게 받아들인다. - 기업은 사용자 피드백에 빠르게 반응하고, 제품 경험을 지속적으로 개선해야 한다. - 디자인은 시각적 완성도를 높이는 업무를 넘어 사용자 유지율과 사업 성과에 직접 영향을 미치는 활동이 됐다. ## 조직 전체로 확장되는 디자인의 역할 - 디지털 제품이 기업의 핵심 사업이 되면서 디자인은 특정 팀만의 업무가 아니라 조직 운영 전반의 요소가 됐다. - Peter Levine은 기업이 제품 디자인과 디자인 리터러시에 따라 생존 여부가 결정될 것이라고 전망했다. - 디자인 씽킹, Stanford d.school의 디자인 방법론 확산 등은 비디자이너도 문제 해결 과정에 참여하게 만들었다. - 이런 접근은 디자인 업무에 대한 조직 내 저항을 줄이고, 제품·마케팅·개발·경영진 간 협업을 촉진했다. - 결과적으로 디자이너는 화면을 만드는 역할을 넘어 문제를 정의하고, 사용자 행동을 이해하며, 사업 방향에 영향을 주는 역할로 확대되고 있다. 디지털 디자인은 더 이상 부수적인 제작 업무가 아니라 제품 경쟁력과 고객 유지율을 좌우하는 핵심 기능이다. 기업은 디자이너 채용뿐 아니라 전 구성원의 디자인 리터러시와 빠른 협업 체계를 함께 강화하는 것이 바람직하다.

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

빌드 비하인드: 개발

Tekeste Kidanu는 디자이너의 생산성을 높이는 Figma·FigJam 플러그인과 위젯을 개발하며, 커뮤니티의 요구에서 제품 아이디어를 얻는 개발자다. 대표작인 SPELLL은 문서의 맞춤법과 문법 오류를 찾아 수정하도록 돕고, FigJam용 Notes·색상 선택기·투표 위젯 등으로 영역을 확장하고 있다. 그는 Figma 플러그인 API가 기존 JavaScript·웹 개발 지식만으로도 접근하기 쉽고, 공개 플랫폼 전환이 더욱 다양한 창작물을 이끌 것이라고 기대한다. ## 개발자 배경과 디자인 학습 - Tekeste Kidanu는 `tkmadeit`이라는 이름으로 활동하는 프론트엔드 개발자다. - 2016년 미국으로 이주해 컴퓨터 과학을 공부했으며, 웹 기술에 관심이 많다. - Figma 플러그인을 만들면서 디자인 자체에도 흥미를 느끼게 됐다. - 좋은 UI를 구별하는 것에서 나아가 직접 디자인하기 위해 색채 이론과 타이포그래피 같은 UI 디자인 기초를 학습하고 있다. ## SPELLL: Figma·FigJam용 맞춤법 검사기 - 대표 플러그인인 SPELLL은 Figma와 FigJam 문서의 철자 및 문법 오류를 검사한다. - Grammarly와 유사하게 오류를 찾아내고 사용자가 쉽게 수정할 수 있게 한다. - 디자이너가 파일을 수동으로 검토하는 시간을 줄이고, 발표나 공유 과정에서 오탈자로 곤란을 겪는 일을 방지하는 것이 목표다. - Figma뿐 아니라 FigJam에서도 사용할 수 있도록 확장됐다. ## 커뮤니티에서 얻는 아이디어 - 플러그인 아이디어는 Figma Forum, Designer News, Twitter 등 디자인 커뮤니티에서 주로 얻는다. - 사용자들이 요청하는 기능과 반복적으로 제기되는 불편을 관찰해 실제 수요가 있는 문제를 찾는다. - Figma 공식 계정의 트윗이나 디자이너들의 기능 요청도 중요한 영감의 원천이다. - Friends of Figma와 같은 Slack 커뮤니티에서는 실제 Figma 사용자를 만나고 요구사항을 파악할 수 있다. - 새 플러그인을 구상할 때 Twitter나 포럼에서 기능 요청을 검색해보는 방법을 추천한다. ## Figma 플러그인 API로 시작하기 - 먼저 플러그인이 어떤 방식으로 동작해야 하는지 조사한 뒤 개발에 착수했다. - Figma 플러그인 API 공식 문서를 읽으며 기능과 구조를 익혔다. - Figma Plugins Slack 워크스페이스에서 질문하고 다른 개발자들의 도움을 받았다. - 디자인 플러그인을 처음 만들었지만, 기존 JavaScript와 웹 개발 경험만으로도 시작할 수 있었다. - API가 직관적이고 진입 장벽이 낮았다는 점을 개발 과정에서 가장 놀라운 부분으로 꼽았다. ## FigJam으로의 확장 - FigJam이 플러그인을 지원한다는 소식을 듣고 기존 Figma 플러그인을 FigJam으로 이전하기 시작했다. - Figma와 FigJam의 API 및 개발 절차가 거의 비슷해 확장이 수월했다. - 이를 통해 하나의 플러그인 개발 경험을 두 협업 도구로 넓힐 수 있었다. - Figma가 기본 기능으로 제공하지 않는 기능도 플러그인 API를 통해 먼저 구현할 수 있다는 점을 활용했다. ## Notes와 색상 선택기 위젯 - Notes는 FigJam 보드 안에서 상세한 메모를 작성할 수 있는 위젯이다. - 일반 텍스트와 Markdown 형식을 지원한다. - 보드 위에 메모를 직접 배치해 화면을 복잡하게 만들지 않고 별도로 정리할 수 있도록 설계됐다. - FigJam용 색상 선택기는 사용자가 원하는 색상의 스티키와 도형을 만들도록 돕는다. ## 투표 위젯과 향후 계획 - Tekeste는 FigJam용 투표 위젯의 첫 버전을 공개했다. - 익명 투표와 실명 투표를 모두 지원한다. - 기존 기능을 계속 개선해 최고의 투표 위젯으로 발전시키는 것이 목표다. - 앞으로는 FigJam 파일 참여자들이 현재 듣고 있는 음악을 보여주는 위젯도 만들어보고 싶다고 밝혔다. ## 공개 플랫폼에 대한 기대 - Figma는 내부에서 몇 주간 위젯을 개발한 뒤 외부 개발자 커뮤니티에도 API를 개방했다. - Tekeste는 FigJam 플러그인과 위젯의 공개 출시가 다양한 실험과 창작을 촉진할 것으로 기대한다. - 특히 장난스럽고 생동감 있는 인터페이스가 인기를 얻는 흐름에 관심을 보였다. - Apple Maps의 3D 랜드마크 표현과 Honk의 playful한 iOS UI를 인상적인 사례로 언급했다. 새로운 Figma·FigJam 기능을 만들고 싶다면 사용자가 반복해서 제기하는 불편을 커뮤니티에서 찾고, 공식 API 문서와 개발자 커뮤니티를 활용해 작은 프로토타입부터 시작하는 접근이 효과적이다. Figma와 FigJam의 유사한 API 덕분에 하나의 아이디어를 두 환경으로 확장하기도 쉽다.

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

엔지니어링 스포트라이트: 마엘 니송 (새 탭에서 열림)

인도양의 작은 섬 레위니옹에서 시작해 자바스크립트 생태계의 핵심 도구인 Yarn의 메인 유지보수자가 되기까지, Maël Nison의 여정은 끊임없는 호기심과 오픈소스에 대한 열정으로 가득 차 있습니다. 그는 페이스북 부트캠프를 통해 Yarn 프로젝트에 합류한 뒤, 단순한 기여자를 넘어 프로젝트를 TypeScript 기반의 모듈형 구조로 재설계하고 커뮤니티 주도형 프로젝트로 탈바꿈시키는 데 결정적인 역할을 했습니다. 현재 Datadog의 프론트엔드 플랫폼 팀에서 근무하면서도 Yarn의 비전과 로드맵을 이끄는 그는, 기술적 해결책을 모두와 공유하는 오픈소스 정신이 개인과 공동체를 어떻게 성장시키는지 잘 보여줍니다. **Yarn의 진화와 다각적인 리더십** * 페이스북 입사 초기, 신규 입사자 교육 프로그램인 '부트캠프'를 통해 Yarn 프로젝트를 접하고 업무 시간의 상당 부분을 오픈소스 기여에 투입하기 시작했습니다. * 초기 내부 도구 성격이 강했던 Yarn을 TypeScript로 완전히 재작성하고 아키텍처를 모듈화하여, 특정 기업에 종속되지 않는 진정한 커뮤니티 오픈소스 프로젝트로 발전시켰습니다. * 프로젝트를 관리하며 개발자 역할을 넘어 제품 매니저, 팀 리드, 고객 지원, 인프라 설계, 웹 디자인 등 다방면의 역할을 수행하며 '1인 CEO'와 같은 경험을 쌓았습니다. **DarkBASIC에서 시작된 프로그래밍의 기초** * 프랑스 툴루즈의 중학교 시절, 점심시간마다 모이던 프로그래밍 클럽에서 DarkBASIC이라는 게임 제작 언어를 배우며 개발의 세계에 입문했습니다. * 화면 위에서 물고기가 움직이고 거품을 쏘는 간단한 2D 게임을 만들며, 코드를 수정하면 즉시 결과가 바뀌는 논리적인 과정에 매료되어 평생의 직업으로 삼기로 결심했습니다. * 2000년대 초반 3G 네트워크와 펜티엄 III 프로세서가 표준이던 시절부터 PHP 웹사이트를 구축하고 SQL 취약점을 직접 경험하며 실전 기술을 익혔습니다. **워크플로우 최적화와 실용적 교육** * 깃허브(GitHub)가 없던 시절, 포럼을 통해 소스 코드를 공유하며 누구나 필요한 해결책을 사용할 수 있게 하는 오픈소스의 본질을 체득했습니다. * 기존 CMS(콘텐츠 관리 시스템)들의 복잡한 관리 페이지 구조에 의문을 품고, 게시물을 클릭해 즉시 수정하는 직관적인 워크플로우를 고민하며 '사용자 경험 최적화'에 대한 철학을 세웠습니다. * 이론보다 실무 중심의 프로젝트와 동료 평가를 중시하는 프랑스의 교육 기관 EPITECH에서 수학하며, 자기 주도적 학습 역량과 실용적인 엔지니어링 기술을 연마했습니다. Maël Nison의 사례는 단순히 기술적인 숙련도를 높이는 것을 넘어, 자신이 마주한 불편함을 해결하고 그 결과물을 커뮤니티와 공유하는 습관이 어떻게 세계적인 오픈소스 리더로 성장하는 밑거름이 되는지 보여줍니다. 새로운 기술을 익힐 때 단순히 사용법을 익히는 데 그치지 않고, 오픈소스 프로젝트에 작은 기여부터 시작해 보는 것은 커리어 개발과 기술적 통찰력을 동시에 얻을 수 있는 가장 확실한 방법입니다.

figma3분 읽기큐레이션 요약

피그마 내부 이야기: 신입

Josh Shi는 대학 졸업 후 Figma에 입사한 경험을 바탕으로, 취업을 “좋은 회사의 조건을 체크하는 일”이 아니라 자신과 일의 관계를 탐구하는 과정으로 바라보자고 말한다. 특히 일과 삶을 서로 상쇄되는 두 영역으로 보지 말고, 함께 삶을 구성하며 서로 영향을 주는 요소로 이해해야 한다고 강조한다. 신입 엔지니어에게는 회사의 명성보다 자신의 관심사·성장 방식·가치관이 실제 업무 환경과 맞는지를 질문하라고 조언한다. ## 정답이 아닌 질문으로 취업을 바라보기 - 저자는 대학 졸업 당시 Figma를 선택한 이유를 완벽하게 설명할 수 없었다고 고백한다. - 면접에서 만난 사람들이 친절하고 사려 깊으며, 자신을 한 사람으로 이해하려는 태도를 보였던 점이 인상적이었다. - “흥미로운 문제”, “똑똑한 동료”, “좋은 문화” 같은 일반적인 평가 기준만으로는 개인에게 의미 있는 직장을 판단하기 어렵다. - 회사 선택에서 중요한 것은 정해진 체크리스트보다 다음과 같은 자기 성찰이다. - 어떤 종류의 일에 관심이 있는가? - 회사가 그 관심사를 발전시킬 기회를 제공하는가? - 관심사가 바뀌었을 때 업무나 역할도 변화할 수 있는가? - 어떤 기술과 전문성을 쌓을 수 있는가? - 일이 직장 밖의 다른 관심사와 삶의 방향에도 어떤 영향을 주는가? ## ‘일과 삶의 균형’이라는 단순한 프레임의 한계 - 일과 삶을 시소의 양쪽처럼 보는 전통적인 “work-life balance” 개념은 지나치게 단순하다. - 일과 비업무 시간은 서로 독립된 영역이 아니라, 합쳐져 한 사람의 삶을 구성한다. - 업무 만족도는 개인 생활의 만족도에 영향을 주고, 반대로 삶의 상태도 업무 경험에 영향을 준다. - 단순히 근무 시간을 줄이거나 일정한 시간 비율을 맞춘다고 해서 올바른 균형이 만들어지는 것은 아니다. - 사람마다 일에 자신의 정체성을 얼마나 연결할지는 다르며, 어느 한 방식이 정답은 아니다. - 저자는 일과 삶을 어떻게 배치해야 자신이 원하는 방식으로 살 수 있는지 질문해야 한다고 말한다. - 다만 모든 사람이 업무 환경을 자유롭게 선택할 수 있는 것은 아니다. 생계와 고용 안정성이 우선인 상황에서는 일을 커리어의 일부로 바라볼 여유가 제한될 수 있다. ## 신입으로서 얻은 기술적·실무적 성장 - Figma에서 새로운 기술 경험을 쌓았다. - 풀스택 개발을 경험했다. - 웹 환경에서 C++를 사용하는 업무를 접했다. - 단순히 코드를 작성하는 것을 넘어 기능을 실제로 소유하고 제품 개발 과정에 참여했다. - 다음과 같은 제품 개발 역량을 배웠다. - 기능과 제품의 범위를 현실적으로 정하기 - 모호한 목표를 구체화하기 - 아이디어를 처음부터 출시까지 발전시키기 - 제품을 신중하게 설계하고 구현하기 - 신입 개발자에게 기술 스택보다 중요한 성장 요소는 기능의 전체 생명주기를 경험하고 결과에 책임지는 것이라고 볼 수 있다. ## 멘토와 조직 환경의 영향 - 저자의 성장에는 주변 동료들의 지원과 지도가 결정적인 역할을 했다. - 동료들은 의도적으로 멘토 역할을 하지 않았더라도, 도전할 기회와 업무 소유권을 제공하며 성장을 도왔다. - 면접 당시 함께 식사했던 동료들 중 상당수가 계속 Figma에 남아 있었고, 저자는 그들의 경험과 관대함으로부터 지속적으로 도움을 받았다. - 신입이 회사를 평가할 때는 공식적인 복지나 문화 설명뿐 아니라 다음 요소도 살펴볼 필요가 있다. - 질문하고 도움을 요청하기 쉬운가 - 신입에게 실제 책임과 소유권을 주는가 - 동료들이 지식을 공유하는가 - 새로운 역할이나 기술을 시도할 수 있는가 ## 회사와 역할은 계속 변한다 - 저자가 입사한 뒤 Figma는 회사와 제품 모두 크게 성장했다. - 입사 당시와 현재의 조직 환경은 달라졌으며, 회사는 하이브리드 모델로 전환하기 시작했다. - 따라서 취업 선택은 고정된 조건을 고르는 일이 아니라, 변화하는 회사 안에서 자신의 관심과 역할이 어떻게 발전할 수 있는지를 판단하는 일이다. - 좋은 직장은 처음부터 모든 조건이 완벽한 곳이라기보다, 개인의 성장과 변화에 맞춰 역할을 확장하거나 조정할 수 있는 환경일 수 있다. 취업을 준비하는 신입 개발자는 회사의 유명세나 기술 목록만 비교하기보다, 자신이 배우고 싶은 방식과 일의 의미를 먼저 정리하는 것이 좋다. 면접에서는 업무 내용뿐 아니라 멘토링, 기능 소유권, 역할 변화 가능성, 조직의 성장 방향을 구체적으로 질문하는 것이 실용적이다.

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

멀티 브랜드 디자인 시스템 구축

멀티 브랜드 디자인 시스템은 일관성과 효율성을 제공하되, 엄격한 규칙보다 유연성을 중심으로 설계해야 한다. 기본 컴포넌트와 브랜드별 토큰, 코드 연계를 통해 다양한 요구를 수용하고 빠르게 확장할 수 있다. 또한 디자인 시스템은 완성된 산출물이 아니라 실제 사용 데이터를 관찰하며 계속 발전시키는 살아 있는 시스템이어야 한다. ## 유연성을 우선하는 설계 - 디자인 시스템을 지나치게 규정적으로 운영하면 디자이너의 창의성을 제한하고, 결국 시스템 밖에서 작업하게 만들 수 있다. - Harry’s는 복잡도와 유연성이 서로 다른 여러 계층으로 시스템을 구성했다. - 기본 컴포넌트: 단순하고 표준화된 구성 - 스타터 키트: 더 복잡하고 유연한 구성 - 대부분의 프로젝트는 단순한 계층으로 해결하되, 특수한 요구에는 커스텀 구성을 허용한다. - 기본값은 단순하게 유지하면서도 예외를 수용하면 효율성과 창의성을 동시에 확보할 수 있다. ## 토큰을 활용한 멀티 브랜드 확장 - Condé Nast처럼 여러 브랜드를 운영하는 조직에서는 브랜드마다 다른 시각적 특성을 수용해야 한다. - 모듈화된 컴포넌트와 디자인 토큰을 사용하면 동일한 구조를 유지하면서 브랜드별 값을 적용할 수 있다. - 하나의 토큰이 브랜드마다 다른 값을 가질 수 있다. - 예: `prominent text`라는 토큰에 Vogue, The New Yorker, Bon Appétit별 폰트를 각각 지정 - 이런 방식은 컴포넌트를 브랜드별로 별도 제작하지 않고도 시스템을 확장하게 해준다. ## 계속 진화하는 디자인 시스템 - 시스템을 구축한 뒤에도 실제 사용 과정에서 무엇이 잘 작동하고 실패하는지 관찰해야 한다. - Shopify는 디자인 시스템을 “휘어지지만 부러지지 않는” 기반으로 만든다는 방향을 취한다. - 디자인 시스템을 박물관의 전시물처럼 보존하려 하면 변화하는 요구사항을 반영할 수 없다. - 디자이너뿐 아니라 최종 사용자도 관찰해야 한다. - Shopify의 경우 상점 운영자인 머천트가 시스템의 실제 사용자인 만큼, 사용 중 어디서 문제가 발생하는지 확인한다. - 컴포넌트 사용량, 라이브러리 활용 추세 등의 데이터를 분석하면 개선 우선순위를 정할 수 있다. - 시스템이 어떻게 실패하는지 확인하고 이를 바탕으로 다시 설계하는 과정이 중요하다. ## 디자인과 코드의 연결 - 디자인 컴포넌트를 코드로 연결하면 디자인과 개발 간의 전달 비용을 줄이고 구현 속도를 높일 수 있다. - Condé Nast는 JavaScript 기반 사이트에서 JSON으로 토큰을 정의한다. - 커스텀 플러그인을 통해 토큰 값을 JSON으로 가져오거나 내보내 디자인과 코드의 변경 사항을 동기화한다. - 토큰 기반 구조는 새로운 시장이나 브랜드를 빠르게 구축하고 디자이너와 엔지니어 간의 핸드오프를 원활하게 한다. - 멀티 브랜드 환경이 아니더라도 색상이나 타이포그래피에 목적과 값을 연결하는 것부터 시작할 수 있다. - 예: 특정 색상을 직접 `#000000`으로 부르기보다 `text-primary`처럼 용도 중심으로 명명 - 목적과 값을 분리하면 시스템의 복잡도와 불필요한 세분화를 파악하기 쉬워진다. ## 조직에 맞는 시스템 구축 - 모든 조직에 동일하게 적용되는 디자인 시스템은 없다. - 팀 규모, 조직 구조, 브랜드 수, 개발 환경, 업무 우선순위에 맞춰 범위와 복잡도를 결정해야 한다. - 처음부터 거대한 시스템을 만들기보다 현재 반복적으로 사용되는 패턴과 컴포넌트부터 정리하는 것이 현실적이다. - 시스템의 규칙보다 실제 팀이 쉽게 사용하고 변경할 수 있는 프로세스를 만드는 것이 더 중요하다. 실무에서는 기본 컴포넌트와 목적 기반 토큰부터 시작하고, 브랜드별 차이는 토큰 값으로 관리하는 방식을 추천한다. 이후 사용 데이터와 사용자 피드백을 바탕으로 시스템을 지속적으로 수정하되, 예외와 실험을 허용해 시스템 밖으로 이탈할 필요가 없도록 해야 한다.

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

Figma + Lambda School

Lambda School은 실시간 온라인 수업에 Figma를 결합해 대면 교실의 상호작용성과 협업성을 재현하고자 했다. Figma를 통해 학생들은 수업 자료를 함께 탐색하고, 작업 과정을 공유하며, 실시간·비동기 피드백을 주고받을 수 있었다. 또한 수업 중 생성된 작업물이 포트폴리오로 축적되어 학습과 취업 준비를 자연스럽게 연결했다. ## 온라인 수업을 위한 협업형 학습 환경 - Lambda School은 선불 학비 없이 9개월 동안 진행되는 온라인 실시간 교육 프로그램이다. - 웹 개발, 모바일 개발, 데이터 과학, UX 디자인 등을 가르치며, 기술 분야 취업에 필요한 실무 역량과 지원을 제공한다. - 핵심 과제는 원격 환경에서도 대면 수업처럼 연결되고, 직접 참여하며, 함께 작업할 수 있는 교실을 만드는 것이었다. - Figma는 브라우저 기반 공동 편집 기능을 통해 이 목표를 지원했다. ## 발표 자료를 함께 탐색하는 인터랙티브 수업 - 강사가 화면을 공유하고 학생들이 수동적으로 슬라이드를 보는 방식과 달리, Figma에서는 발표 자료 자체를 함께 조작할 수 있다. - 학생들은 다음과 같은 방식으로 수업 내용을 능동적으로 탐색한다. - 화면을 확대해 세부적인 곡선이나 디자인 요소 확인 - 캔버스를 스크롤하며 특정 로고나 사례 살펴보기 - 참가자들의 포인터를 통해 강사가 설명하는 위치를 실시간으로 파악 - 발표가 일방적인 전달이 아니라 강사와 학생이 같은 자료를 함께 살펴보는 활동이 된다. ## 작업 과정을 공유하는 디자인 실습 - 학생들은 처음부터 Figma에서 직접 디자인하고, 같은 파일 안에서 결과물을 반복적으로 발전시킨다. - 디자인의 변화 과정이 그대로 남기 때문에 학생들은 다음을 수행할 수 있다. - 다른 학생의 작업 과정을 관찰 - 진행 중인 결과물에 피드백 제공 - 동료의 디자인을 리믹스해 새로운 아이디어 실험 - 이러한 방식은 단순히 완성된 결과만 평가하는 것이 아니라, 디자인이 발전하는 과정 자체를 학습 대상으로 만든다. - 여러 디자이너가 하나의 프로젝트를 함께 완성하는 실제 업무 환경에도 익숙해질 수 있다. ## 실시간 피드백과 비동기 지원 - Figma의 댓글, 브라우저 편집 기능, 실시간 공동 작업을 활용해 학생과 강사가 작업 중인 디자인에 바로 의견을 남길 수 있다. - 학생들은 서로의 디자인에 별표를 남겨 좋은 작업을 투표하거나, 작업 파일을 보며 의견을 교환한다. - 동시에 작업하더라도 각자 파일의 영역에서 독립적으로 디자인할 수 있어, 서로의 작업을 방해하지 않는다. - 즉시 피드백이 필요할 때는 강사나 동료를 불러 같은 파일에서 직접 픽셀을 수정하며 논의할 수 있다. - 반대로 집중이 필요한 경우에는 다른 사람의 작업을 관찰만 하거나, 나중에 댓글을 남기는 비동기 방식도 가능하다. - 이 구조는 참여자 모두가 아이디어를 제공하면서도 학습자의 작업 자율성을 보장한다. ## 학습 결과물을 포트폴리오로 축적 - Lambda School은 수업뿐 아니라 취업까지 지원하며, 학생들이 자신의 역량을 고용주에게 보여줄 포트폴리오를 만들도록 돕는다. - Figma에서는 학생들의 디자인이 생성, 수정, 저장되는 과정이 지속적으로 기록된다. - 따라서 학생들은 오래된 파일을 찾아 정리하지 않아도 학습 과정과 최종 결과물을 포트폴리오에 활용할 수 있다. - 동료들의 작업에도 계속 접근할 수 있어 수업이 끝난 뒤에도 서로의 디자인에서 학습할 수 있다. - 결과적으로 학습 기록, 협업 과정, 최종 산출물이 하나의 작업 공간에 함께 남는다. ## 실용적인 결론 원격 디자인 교육에서는 화상회의만 제공하는 것보다 공동 편집, 실시간 피드백, 비동기 댓글, 작업 이력 보존 기능을 함께 구성하는 것이 효과적이다. 특히 학습자가 결과물뿐 아니라 제작 과정까지 기록할 수 있는 도구를 사용하면 수업 참여와 포트폴리오 준비를 동시에 달성할 수 있다.

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

워크플로우 속도를 높여주는

플러그인은 Figma에서 반복 작업을 자동화하고 디자인 데이터를 효율적으로 다루도록 돕는다. 이 글은 플러그인 생태계 출시 직후 주목할 만한 유틸리티 플러그인 5개를 소개하며, 화면 크기 조정부터 컴포넌트 복제·텍스트 편집·유사 레이어 선택까지 다양한 작업을 간소화하는 방법을 설명한다. 또한 단축키를 활용하면 플러그인을 더 빠르게 실행할 수 있다고 강조한다. ## Viewports: 기기 화면 크기 빠르게 확인 - 프레임을 스마트폰 등 일반적인 기기 화면 크기로 변경할 수 있다. - 디자인 요소에 먼저 Figma의 **Constraints**를 설정해야 화면 크기 변경에 따른 레이아웃 변화를 제대로 확인할 수 있다. - 각 뷰포트별로 해당 기기를 사용하는 사용자의 예상 글로벌 시장 점유율을 보여준다. - 이를 통해 어떤 화면 크기를 우선 고려할지 판단할 수 있다. - 플러그인은 별도의 수동 업데이트 없이 새 기능이 배포되면 사용할 수 있다. ## Component Cloner: 컴포넌트와 인스턴스 복제 - 선택한 마스터 컴포넌트만 복제하거나, 해당 컴포넌트의 인스턴스까지 함께 복제한다. - 색상 오버라이드가 적용된 아이콘을 별도로 실험하거나 아이콘 스프라이트를 제작할 때 유용하다. - 컴포넌트와 연결된 여러 인스턴스를 일일이 다시 만들 필요가 없어 반복 작업을 줄여준다. ## Nisa Text Splitter: 텍스트를 개별 객체로 분리 - 한 텍스트 박스에 입력된 여러 줄을 줄바꿈 기준으로 각각의 텍스트 박스로 분리한다. - 분리된 텍스트 객체를 알파벳순 또는 역순으로 정렬할 수 있다. - Figma의 **Smart Selections**와 함께 사용하면 여러 객체의 순서를 편리하게 재배치할 수 있다. - 반대로 여러 텍스트 박스를 하나의 텍스트 객체로 합치는 기능도 제공한다. - 목록, 메뉴 항목, 데이터 샘플처럼 줄 단위 편집이 필요한 작업에 적합하다. ## Find and Replace: 텍스트와 레이어 이름 일괄 변경 - 문서 전체에서 텍스트를 검색하고 다른 문자열로 치환한다. - 캔버스 위의 텍스트뿐 아니라 레이어 이름도 검색·변경할 수 있다. - 대소문자 구분 여부를 설정할 수 있다. - 검색 범위를 문자열의 어느 위치에 적용할지 선택할 수 있다. - 문자열 어디에서나 일치 - 문자열의 시작 부분 - 문자열의 끝 부분 - 전체 문자열이 정확히 일치 - 대규모 문서의 문구 수정이나 카피 변경 시 특히 유용하다. ## Similayer: 조건이 같은 레이어 일괄 선택 - 기준이 될 요소를 선택한 뒤, 원하는 속성을 지정해 동일한 조건의 레이어를 찾아 선택한다. - Figma의 “같은 속성을 가진 항목 모두 선택” 기능을 확장한 방식이다. - 다음과 같은 속성을 조합할 수 있다. - 테두리 반경 - 채우기 - 선 - 그림자 - 여러 속성을 동시에 조건으로 지정할 수 있어, 복잡한 디자인 요소도 빠르게 선별할 수 있다. - 유사한 레이어를 한꺼번에 수정해야 할 때 반복 클릭을 크게 줄여준다. ## 플러그인 실행 단축키 - Mac에서는 `⌘ + /`, Windows에서는 `Ctrl + /`로 메뉴 검색을 연다. - 검색창에 플러그인 이름을 입력한 뒤 키보드만으로 실행할 수 있다. - 직전에 실행한 플러그인은 다음 단축키로 다시 실행할 수 있다. - Mac: `⌘ + ⌥ + P` - Windows: `Ctrl + Alt + P` 반복적인 화면 검증, 컴포넌트 복제, 텍스트 정리, 일괄 수정이 자주 발생한다면 이 플러그인들을 작업 흐름에 맞게 조합해 사용하는 것이 좋다. 특히 플러그인 이름을 메뉴 검색으로 실행하는 습관을 들이면 마우스 조작까지 줄일 수 있다.

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

Figma에 플러그인이 도입

Figma는 디자인 작업을 확장할 수 있는 플러그인 베타를 출시하며, 개발자들의 참여를 요청했다. 플러그인은 반복 작업 자동화, 외부 데이터 활용 등으로 디자인 워크플로를 개선할 수 있으며, 장기적으로는 커뮤니티가 만든 플러그인을 누구나 사용할 수 있도록 하는 것이 목표다. Figma는 안정성·보안·성능을 보장하기 위해 내부 API가 아닌 서드파티 전용 API를 설계했다고 강조한다. ## Figma 플랫폼에서 플러그인으로 확장 - Figma는 1년 전 HTTP 기반 Figma API를 공개해 외부 도구와의 연동을 지원했다. - 고객들은 API를 활용해 다음과 같은 워크플로를 구축했다. - Slack 명령으로 Figma 아이콘을 문서에 내보내기 - 디자인 파일 변경 사항을 개발 환경에 자동 반영하기 - SVG 아이콘 라이브러리를 효율적으로 업데이트·배포하기 - 플러그인은 기존 API 연동을 넘어 Figma 내부의 디자인 작업 과정을 직접 확장하는 다음 단계로 소개됐다. ## 플러그인으로 가능한 작업 - 반복적인 디자인 작업을 자동화할 수 있다. - 실제 데이터를 Figma 파일에 가져와 디자인에 활용할 수 있다. - 팀 구성원과 직접 만든 플러그인을 공유할 수 있다. - 웹사이트 제작 경험이 있는 개발자라면 비교적 쉽게 플러그인을 만들고 유지할 수 있도록 설계됐다. ## 안정성과 보안을 고려한 API 설계 - 플러그인이 Figma 업데이트 때마다 작동을 멈추는 문제를 방지하려 했다. - 내부 API를 그대로 공개하면 플랫폼 변경에 따라 API가 자주 바뀌고, 서드파티 개발자는 매번 코드를 수정해야 한다. - Figma는 플러그인 개발자를 위해 별도의 공식 API를 설계하고, 플러그인이 의존하는 API를 지속적으로 지원·관리하겠다고 밝혔다. - 플러그인이 Figma의 성능이나 사용자 경험을 저해하지 않도록 하는 것도 중요한 원칙으로 제시됐다. ## 플러그인 생태계의 설계 원칙 - 모든 디자이너가 쉽고 직관적으로 사용할 수 있어야 한다. - 웹사이트를 만들 수 있는 사람이라면 플러그인을 개발할 수 있어야 한다. - 인기 있는 프로그래밍 언어로 플러그인을 작성할 수 있어야 한다. - 플러그인이 Figma의 성능과 사용성을 해치지 않아야 한다. - 플러그인이 사용하는 모든 API를 Figma가 공식적으로 지원해야 한다. ## 베타 참여 대상과 운영 방식 - 기본적인 HTML과 JavaScript 지식이 있고 플러그인 아이디어가 있는 사람을 대상으로 했다. - 초기에는 참여 인원이 제한되며, 어떤 플러그인을 만들려는지에 따라 우선순위를 정했다. - 다양한 아이디어를 가진 베타 사용자가 API를 실제로 시험하고 개선 방향을 제시하도록 하는 것이 목적이었다. - 당시에는 개발자 중심의 베타였지만, 이후 코딩하지 않는 사용자도 커뮤니티 플러그인을 사용하게 될 것이라고 예고했다. 플러그인은 Figma를 단순한 디자인 도구가 아니라 개발자와 커뮤니티가 기능을 확장하는 플랫폼으로 전환하는 핵심 수단이다. 플러그인을 도입하려는 팀은 반복 업무 자동화나 실제 데이터 연동처럼 효과가 분명한 작업부터 시작하고, 공식 API의 안정성과 성능 영향을 함께 고려하는 것이 좋다.

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

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

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

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

Figma의 라이브

Figma는 웹 기반 디자인 파일과 프로토타입을 최신 상태로 유지한 채 다른 웹사이트와 협업 도구에 삽입할 수 있는 **Live Embed Kit**을 공개했다. 사용자는 iframe 코드만으로 Figma 콘텐츠를 임베드할 수 있으며, 원본 파일이 변경되면 별도 재업로드 없이 임베드된 화면도 자동으로 동기화된다. 이를 통해 팀이 이메일, 메신저, 파일 공유 서비스에 흩어진 디자인을 찾는 번거로움을 줄이고 더 빠르게 협업할 수 있다는 것이 글의 핵심 주장이다. ## iframe 기반의 간단한 임베드 - Figma 파일 우측 상단의 **Share** 메뉴에서 **Public embed**를 선택하면 iframe 코드를 얻을 수 있다. - 개발자는 이 iframe을 자신의 웹사이트나 서비스에 삽입해 Figma 디자인 또는 프로토타입을 표시할 수 있다. - 별도의 복잡한 렌더링 시스템을 구축하지 않아도 웹페이지에 Figma 콘텐츠를 통합할 수 있다. ## 항상 최신 상태로 유지되는 디자인 - 임베드된 콘텐츠는 Figma 원본 파일과 연결되어 실시간으로 동기화된다. - 디자이너가 여백, 아이콘, 레이아웃 등을 수정하면 임베드 화면에도 변경 사항이 반영된다. - 디자인을 이미지로 다시 내보내거나, 수정된 파일을 다시 업로드할 필요가 없다. - Figma가 웹에서 실행되는 디자인 도구라는 점이 이러한 지속적인 동기화의 기반이다. ## 외부 서비스와의 통합 - Live Embed Kit은 개인 웹사이트뿐 아니라 제3자 서비스가 Figma 임베드 기능을 제공하도록 설계됐다. - 글에서는 Trello, JIRA, Dropbox Paper와 같은 도구에서의 활용 사례를 언급한다. - 서비스 개발자는 자체 제품 안에서 사용자가 최신 Figma 파일을 공유하고 확인할 수 있도록 통합할 수 있다. ## 팀 협업에서의 활용 사례 - **사내 위키**: 프로젝트나 기능 문서에 최신 디자인을 삽입해 문서와 시안을 함께 관리할 수 있다. - **팀 메시징 앱**: 그룹 채팅에서 디자인 파일의 최신 버전을 공유할 수 있다. - **블로그**: 프로젝트 소개 글에 live Figma 파일을 넣어 독자가 항상 최신 디자인을 보도록 할 수 있다. - 이러한 방식은 이메일 기록, Slack 대화, 파일 공유 폴더를 뒤져 최신 디자인을 찾는 문제를 줄인다. ## Figma 플랫폼 확장의 출발점 - Figma는 Live Embed Kit을 웹 기반 플랫폼 전략의 시작으로 소개한다. - 향후 Figma 파일에서 디자인 외의 다양한 정보를 가져와 새로운 업무 흐름에 활용할 수 있는 **Figma API**를 제공할 계획도 밝혔다. - 개발자와 파트너사가 Figma 데이터를 다른 협업 도구와 연결하는 생태계를 구축하는 방향이다. 실무적으로는 사내 문서, 제품 블로그, 협업 툴에 정적인 이미지 대신 Live Embed를 사용하면 최신성 유지와 커뮤니케이션 비용을 줄일 수 있다. 다만 공개 임베드 방식인 만큼, 삽입할 파일의 접근 권한과 공개 범위를 설정할 때 보안 및 기밀성도 함께 검토해야 한다.

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

엔지니어링 스포트라이트: 마리로르 바르도네 (새 탭에서 열림)

Datadog의 새로운 기능인 'Notebooks'는 숙련된 시니어 엔지니어가 아닌, 7개월간의 인턴십을 거친 인턴의 주도로 개발되었습니다. 인턴 Marie-Laure Bardonnet는 사소한 버그 수정부터 시작해 점진적으로 업무 범위를 넓히며, 결국 최신 프론트엔드 기술을 활용해 제품의 핵심 기능을 성공적으로 구축했습니다. 이는 주니어 개발자에게 도전적인 과제와 적절한 멘토링이 주어졌을 때 얼마나 큰 성과를 낼 수 있는지를 보여주는 사례입니다. ### Notebooks 기능의 역할과 가치 * 특정 시점의 데이터 그래프를 텍스트 및 기타 정보와 함께 저장하고 공유할 수 있는 도구입니다. * 조직 내에서 장애 대응이나 분석 시 깊은 맥락(Context)을 제공하여 팀원들이 더 빠르게 상황을 파악하고 협업할 수 있도록 돕습니다. ### 단계적인 업무 확장을 통한 코드베이스 적응 * 초기에는 대시보드의 즐겨찾기 별표 표시 수정과 같은 사소한 UI 버그부터 시작하여 애플리케이션 구조에 익숙해졌습니다. * 점차 난이도가 높은 과제를 수행하며 코드베이스에 연착륙(Smooth entry)했고, 이는 단순한 '잡무(Grunt work)'를 넘어 실제 제품에 영향을 미치는 프로젝트로 이어졌습니다. ### 최신 프론트엔드 기술 스택의 실무 적용 * 단순한 기능 구현을 넘어 React, Redux(상태 관리), Redux Saga(사이드 이펙트 관리)와 같은 최신 기술을 깊이 있게 학습하고 적용했습니다. * 인턴 과정임에도 불구하고 기능 구현에 필요한 아키텍처 리팩토링 아이디어를 제안하고 이를 실무에 반영하는 등 심도 있는 엔지니어링 과정을 거쳤습니다. ### 자율성과 가이드의 균형을 맞춘 멘토링 * 팀 리드는 인턴이 스스로 해결책을 찾도록 지켜보는 것과 기술적으로 까다로운 부분에서 함께 논의하는 것 사이에서 적절한 균형을 유지했습니다. * 이러한 멘토링 덕분에 인턴은 이론적인 지식과 실무 역량의 차이를 이해하고, 개발자로서 독립적인 의사결정을 내리는 법을 체득했습니다. 기업이 우수한 엔지니어를 확보하기 위해서는 인턴을 단순 보조 인력으로 활용하기보다, 실질적인 제품 개발에 참여시키고 최신 기술을 탐구할 환경을 제공해야 합니다. 적절한 자율성과 책임감이 부여될 때 주니어 개발자는 기업의 핵심 인재로 성장하며 장기적인 기여를 할 수 있게 됩니다.