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

datadog·2019년 6월 3일·2분 읽기큐레이션 요약

TUF 및 in-toto를 이용

제공된 내용에는 본문이 아닌 Datadog 웹사이트의 내비게이션과 링크만 포함되어 있습니다. URL과 링크 경로로 보아 글은 Datadog Agent 통합 패키지를 안전하게 배포하기 위해 TUF와 in-toto를 적용하는 방법을 다룬 것으로 보입니다. 다만 본문이 없어 구체적인 설계, 구현 과정, 성능 및 보안 효과까지는 정확히 요약할 수 없습니다. ## 글의 주제: Datadog Agent 통합 배포 보안 - Datadog Agent는 다양한 외부 서비스와 연동하기 위해 통합(integration) 패키지를 사용합니다. - 이러한 패키지의 배포 과정에서는 다음과 같은 위험이 발생할 수 있습니다. - 배포 저장소나 전송 경로의 변조 - 악성 패키지 삽입 - 오래된 버전이나 취약한 버전으로의 롤백 - 빌드 및 배포 과정에서 생성된 출처 정보의 부족 - 글의 URL은 Agent 통합 패키지의 **안전한 공개(publication)** 를 핵심 주제로 삼고 있음을 나타냅니다. ## TUF를 활용한 패키지 무결성 검증 - TUF(The Update Framework)는 소프트웨어 업데이트와 패키지 배포를 보호하기 위한 프레임워크입니다. - 일반적으로 다음 기능을 제공합니다. - 패키지 서명 및 무결성 검증 - 서명 키 탈취에 대비한 키 역할 분리 - 키 교체와 폐기 - 만료된 메타데이터 차단 - 롤백 및 특정 버전 고정 공격 방지 - 따라서 Agent가 통합 패키지를 설치하거나 업데이트할 때 패키지가 Datadog이 승인한 경로에서 제공되었는지 확인할 수 있습니다. ## in-toto를 통한 공급망 출처 추적 - in-toto는 소프트웨어 공급망의 각 단계와 생성물을 검증하는 프레임워크입니다. - 빌드, 테스트, 서명, 게시 등 단계별로 다음 정보를 기록할 수 있습니다. - 어떤 단계가 실행되었는지 - 어떤 입력 파일이 사용되었는지 - 어떤 결과물이 생성되었는지 - 각 단계가 승인된 주체에 의해 수행되었는지 - 이를 통해 최종 패키지의 해시만 확인하는 것을 넘어, 패키지가 신뢰할 수 있는 빌드 파이프라인을 거쳤는지 검증할 수 있습니다. ## TUF와 in-toto의 결합 - TUF는 주로 “다운로드한 패키지가 신뢰할 수 있고 변조되지 않았는가”를 검증합니다. - in-toto는 “그 패키지가 어떤 공급망 단계를 거쳐 만들어졌는가”를 검증합니다. - 두 기술을 함께 사용하면 다음을 방어할 수 있습니다. - 배포 중 패키지 변조 - 서명 키 탈취 - 승인되지 않은 빌드 결과물 게시 - 빌드 단계 누락 - 구버전으로의 악의적 롤백 ## 제공된 자료의 한계 - 실제 본문이 포함되지 않아 다음 내용은 확인할 수 없습니다. - Datadog의 구체적인 TUF 메타데이터 구조 - in-toto 레이아웃 또는 증명서 형식 - 키 관리 및 키 회전 방식 - CI/CD 파이프라인 통합 방법 - 기존 배포 방식과 비교한 운영상의 변화 - 구현 결과와 보안성 평가 원문 본문이나 링크의 실제 내용을 제공하면, 구현 흐름과 보안 메커니즘까지 포함해 정확한 섹션별 요약을 작성할 수 있습니다.

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

software-supply-chain-securitydatadog-agenttufin-toto+1

figma·2019년 5월 2일원문

피그마에서 프로토타 (새 탭에서 열림)

피그마를 활용한 프로토타이핑은 사용자 테스트와 이해관계자 소통의 핵심이지만, 복잡한 연결 과정이 작업 속도를 늦추기도 합니다. 이 글은 마스터 컴포넌트 활용, 스크롤 관리, 지연 효과 등을 통해 프로토타이핑 워크플로우를 획기적으로 개선하고 효율성을 높이는 다섯 가지 실무 팁을 제시합니다. 이러한 기법들을 숙달하면 더 사실적인 프로토타입을 빠르게 제작하여 협업의 질을 높일 수 있습니다. ### 마스터 컴포넌트를 활용한 자동 연결 * 탭바나 햄버거 메뉴처럼 여러 화면에 반복되는 요소를 마스터 컴포넌트로 먼저 제작합니다. * 마스터 컴포넌트 내부에서 각 메뉴 항목과 대상 프레임을 미리 연결하면, 이후 생성되는 모든 인스턴스에 연결 정보가 자동으로 상속되어 반복적인 링크 작업을 생략할 수 있습니다. * 외부 팀 라이브러리의 컴포넌트를 사용할 때는 해당 인스턴스를 다시 로컬 마스터 컴포넌트로 감싸는 방식으로 연결 정보를 유지하며 관리할 수 있습니다. ### 컴포넌트를 활용한 스크롤 영역 관리 * 상단 바나 하단 바가 고정된 긴 화면을 디자인할 때, 스크롤되는 콘텐츠 자체를 별도의 컴포넌트로 구성합니다. * 콘텐츠 컴포넌트에 'Clip content'를 적용하고 프로토타이핑 설정에서 'Overflow Behavior'를 활성화하면, 다양한 기기 사이즈에서 초기에 노출되는 영역(Viewport)을 직관적으로 확인할 수 있습니다. * 이 방식을 통해 기기별로 잘리는 콘텐츠의 위치를 파악하고, 스크롤 내용을 한 곳에서 효율적으로 수정할 수 있습니다. ### 시간 지연과 오버레이로 현실감 구현 * 사용자 상호작용이 너무 즉각적이면 부자연스러울 수 있으므로 'After delay' 트리거를 사용하여 의도적인 시간 지연을 추가합니다. * 지연 기능을 오버레이(Overlay) 및 오버레이 교체(Swap overlay) 기능과 결합하면, 버튼 클릭 후 로딩 화면이 나타났다가 성공 메시지로 바뀌는 등의 복합적인 연출이 가능합니다. * 이러한 디테일은 프로토타입에 사실성을 더해 사용자가 혼란을 느끼지 않고 자연스럽게 흐름을 따라오게 돕습니다. ### 목차 페이지를 활용한 다중 흐름 관리 * 피그마 프로토타입 URL은 페이지 단위로 생성되지만, 첫 화면을 '목차(Table of Contents)' 프레임으로 구성하여 이를 보완할 수 있습니다. * 목차의 각 항목을 동일 페이지 내의 서로 다른 사용자 흐름(User Flow) 시작점에 연결하면, 하나의 링크만으로도 여러 디자인 시나리오를 공유할 수 있습니다. * 이는 이해관계자에게 여러 옵션을 한꺼번에 제안해야 할 때 특히 유용합니다. ### 관찰 모드를 통한 원격 협업 및 테스트 * 피그마의 '관찰 모드(Observation Mode)'는 디자인 에디터뿐만 아니라 프로토타입 실행 화면에서도 지원됩니다. * 화면 우측 상단의 협업자 아바타를 클릭하면 상대방이 프로토타입의 어느 부분을 클릭하고 어떻게 이동하는지 실시간으로 추적할 수 있습니다. * 이 기능은 원격 사용자 테스트를 수행하여 사용자의 행동 패턴을 관찰하거나, 미팅에서 디자인 결과물을 시연할 때 모든 참여자가 동일한 맥락을 유지하도록 돕습니다. 효율적인 프로토타이핑은 디자인 의도를 정확하게 전달하고 피드백 루프를 단축하는 데 필수적입니다. 위에서 소개한 컴포넌트 중심의 설계와 피그마의 고급 기능을 워크플로우에 녹여낸다면, 단순 반복 작업에 드는 시간을 줄이고 사용자 경험의 본질을 다듬는 데 더 집중할 수 있을 것입니다.

Figma사용자 경험프로토타이핑interaction-design+3

figma·2019년 4월 30일·3분 읽기큐레이션 요약

Figma 워크플로우

Figma는 디자인 작업의 맥락과 팀별 상황에 따라 해답이 달라지는 문제를 사용자 간 대화로 해결할 수 있다고 보고, 온라인 포럼을 새롭게 개편했다. 개편의 핵심은 주제별 채널 구조, 명확한 커뮤니티 가이드라인, AMA와 라이브스트림 같은 참여형 콘텐츠다. 버그 신고와 기능 요청은 포럼 대신 지원 플랫폼으로 일원화해 더 신속하고 체계적으로 처리하도록 했다. ## 사용자 간 지식 공유를 강화하는 포럼 - 디자인 시스템, 개발자 핸드오프, 툴체인 구성처럼 정답이 하나로 정해지지 않은 문제는 일반적인 지원 문서만으로 해결하기 어렵다. - 사용자는 다른 디자이너의 실제 경험과 상황을 참고해 자신의 워크플로를 개선할 수 있다. - 포럼에서는 한 질문에 다양한 관점이 모이고, 그 논의가 질문자뿐 아니라 커뮤니티 전체에 유용한 지식으로 축적된다. - Figma는 오프라인 모임이나 트위터에서 자연스럽게 이뤄지던 교류를 온라인 포럼에서 더 쉽게 이어가려 했다. ## 실무 주제 중심의 새 채널 구조 - 기존 채널 일부를 보관하거나 이름을 변경하고, 실무 영역별로 대화를 집중할 수 있도록 새 채널을 추가했다. - **Design Systems** - 디자인 시스템의 모범 사례를 논의한다. - 팀별 Figma 라이브러리 구성 방식과 운영 경험을 공유한다. - 관련 자료와 리소스를 교환한다. - **Prototyping** - 프로토타이핑 기법과 활용 사례를 다룬다. - **API and Extensions** - Figma API와 확장 기능에 관한 질문과 정보를 공유한다. - **Workflow and Process** - 디자인 업무 프로세스와 협업 방식에 대해 논의한다. - **Open Design** - 진행 중인 작업물을 공개하고 피드백을 받을 수 있다. - 프로젝트에 참여할 다른 디자이너를 찾는 용도로도 활용할 수 있다. - 브라우저 기반 협업 도구라는 Figma의 특성을 커뮤니티 활동에 연결한 채널이다. - **Start Here** - 새 채널 구조, 커뮤니티 이용 가이드라인, 행동 강령 등 포럼 이용에 필요한 정보를 제공한다. ## 버그 신고와 기능 요청의 지원 플랫폼 이관 - 버그 신고와 기능 요청은 포럼에서 제거하고 Figma의 공식 지원 플랫폼으로 접수 경로를 통합했다. - 지원 채널을 이용하면 담당 팀이 사용자와 1:1로 문제를 진단할 수 있다. - 공개 포럼에서 공유하기 어려운 파일이나 계정 정보도 지원 과정에서 전달할 수 있다. - 지원팀은 접수된 버그와 요청을 적절한 담당자에게 전달하고 우선순위를 관리한다. - 지원팀은 제품팀 및 엔지니어링팀과 매주 논의하며, 사용자 피드백이 제품 개선 과정에 반영되도록 했다. ## 커뮤니티 참여형 콘텐츠 - 포럼을 단순한 질문·답변 공간이 아니라 지속적인 커뮤니티 활동의 장으로 확장하려 했다. - AMA(Ask Me Anything)를 통해 Figma 관계자나 전문가에게 직접 질문할 수 있다. - 라이브스트림 등 실시간 콘텐츠를 통해 사용자와의 소통을 강화한다. - 공식 안내와 사용자 간 자율적인 경험 공유를 함께 제공하는 구조를 지향한다. 실제로 이용할 때는 워크플로·디자인 시스템·프로토타이핑 관련 질문은 주제별 포럼에서 다른 사용자의 경험을 참고하고, 계정 정보나 파일이 필요한 버그 신고 및 기능 요청은 공식 지원 플랫폼을 이용하는 것이 가장 효율적이다.

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

Figma디자인 시스템프로토타이핑API+1

figma·2019년 4월 24일·3분 읽기큐레이션 요약

Figma의 줄 높이

Figma는 텍스트의 줄 높이를 글자 위아래에 균등하게 배분하고, 보다 현대적인 기준으로 측정하도록 변경했다. 이는 기존 파일에 자동 적용되지 않는 선택적 변경이며, 사용자가 원하는 시점에 업데이트할 수 있다. 이 글은 금속 활자부터 컴퓨터 글꼴, CSS까지 줄 높이와 수직 정렬이 발전해 온 과정을 설명하며 Figma의 변경 배경을 밝힌다. ## 금속 활자 시대의 줄 높이 - 초기 활자에서 폰트 크기는 글자 자체가 아니라 글자를 담는 납 블록의 높이를 의미했다. - 같은 16pt 폰트라도 실제 글자 크기, 기준선 위치, 위아래 여백은 서체마다 달랐다. - 조판공은 줄 사이에 얇은 납 조각을 끼워 행간을 추가했다. - 이 납 조각을 뜻하는 *leading*에서 오늘날의 줄 높이 개념이 유래했다. - 예를 들어 16pt 활자에 4pt 행간을 추가하면 전체 줄 높이는 20pt가 된다. - 당시에는 행간을 추가할 수만 있었고, 활자에 내장된 공간을 제거할 수는 없었다. ## 디지털 폰트가 가져온 자유와 혼란 - 컴퓨터에서는 폰트가 고정된 납 블록이 아니라 다양한 수치와 메트릭을 담은 파일로 바뀌었다. - Windows, Macintosh, OS/2 등 플랫폼마다 폰트 형식과 렌더링 방식이 달랐고, 버그와 호환성 문제도 발생했다. - 화면에서는 글자가 고정된 상자에 묶이지 않으므로 행간을 자유롭게 추가하거나 제거할 수 있게 됐다. - 폰트의 기본 줄 높이는 글자 크기와 무관하게 임의의 값으로 설정될 수 있었다. - 같은 글자 크기와 같은 줄 높이를 사용해도 폰트 내부의 ascent, descent, 기준선 위치가 달라 시각적 결과가 달라졌다. ## CSS와 폰트 메트릭의 복잡성 - 웹에서는 줄 높이를 단순히 글자 크기로만 결정하지 않고, 기준선과 인라인 박스를 기준으로 계산한다. - CSS의 줄 높이는 일반적으로 한 줄의 기준선에서 다음 줄 기준선까지의 거리로 이해할 수 있다. - 추가 공간인 “half-leading”을 글자 위와 아래에 나누어 배치하는 방식이 사용된다. - 그러나 폰트 파일에 들어 있는 여러 메트릭 값이 서로 다른 목적을 가져 브라우저와 운영체제마다 결과가 달라질 수 있었다. - 특히 OS/2 테이블의 ascent, descent, line gap 값은 폰트의 시각적 경계와 실제 줄 상자 크기를 일치시키지 못하는 경우가 있었다. ## Figma의 줄 높이 변경 - Figma는 추가 줄 높이를 글자 위와 아래에 분배하는 방식으로 변경했다. - 줄 높이를 글자 크기나 특정 플랫폼의 관행에만 의존하지 않고, 보다 현대적인 타이포그래피 및 웹 기준에 가깝게 측정한다. - 이를 통해 텍스트가 프레임 안에서 수직으로 배치되는 방식을 더 예측 가능하게 만들려 했다. - 변경 사항은 기존 파일에 강제로 적용되지 않는다. - 사용자는 기존 텍스트를 그대로 유지하거나, 필요할 때 새 줄 높이 동작으로 업데이트할 수 있다. ## 하나의 완벽한 기준을 만들기 어려운 이유 - Figma는 인쇄물 디자인, 웹 디자인, 제품 UI 등 서로 다른 목적에 사용된다. - 역사적인 조판 관습과 현대적인 CSS 동작이 항상 일치하지 않는다. - 폰트마다 내부 메트릭이 다르고, 같은 폰트도 플랫폼과 렌더링 엔진에 따라 다르게 보일 수 있다. - 따라서 Figma는 모든 상황에 하나의 절대적인 정답을 적용하기보다, 새로운 동작을 선택 사항으로 제공하는 방식을 택했다. 기존 디자인의 시각적 일관성이 중요하다면 파일을 즉시 변경하지 말고, 새 줄 높이 동작이 필요한 웹·제품 UI 작업부터 선택적으로 적용하는 것이 적절하다.

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

FigmaCSStypographyweb-design+2

figma·2019년 4월 21일·3분 읽기큐레이션 요약

깃허브, 협업 문화를

GitHub는 원격 협업 환경에서 디자인 시스템을 효율적으로 운영하기 위해 Figma를 도입했다. Figma와 API를 활용해 아이콘·UI 컴포넌트 제작 과정을 자동화하고, 디자이너와 개발자가 같은 파일에서 실시간으로 협업할 수 있게 했다. 그 결과 디자인 시스템은 GitHub의 일하는 방식에 핵심 요소로 자리 잡았고, 반복 작업과 협업 장벽을 줄이는 기반이 되었다. ## 디자인 시스템 전담 조직의 성장 - 2015년 당시 GitHub에는 디자인 시스템을 전담하는 직원이 없었다. - 디자이너들이 동일한 요소를 반복해서 만들고, 문서가 부족하며, 패턴이 오래된 문제가 있었다. - 이를 해결하기 위해 디자인 시스템과 문서화된 워크플로를 구축하는 풀뿌리 활동을 시작했다. - 활동 시작 6개월 만에 전담 팀이 만들어졌으며, 이후 7명 규모로 성장했다. - 전체 제품 디자인 팀 25명 중 7명이 재사용 가능하고 교체 가능한 컴포넌트를 관리하게 되었다. - 디자인 시스템은 GitHub의 디자인·개발 프로세스를 효율적이고 반복 가능하며 확장 가능하게 만드는 핵심 기반이 되었다. ## 기존 디자인 워크플로의 문제점 - 전담 팀을 구성해도 디자인 시스템을 만들고 유지하는 과정 자체가 비효율적이었다. - SVG 아이콘 라이브러리인 **Octicons**를 수정하려면 특정 소프트웨어 설치와 관련 도구에 대한 지식이 필요했다. - 이런 복잡한 설정은 기여자가 아이콘을 수정하거나 업데이트하는 일을 어렵고 혼란스럽게 만들었다. - 결과적으로 디자인 시스템에 참여하려는 사람들의 진입 장벽이 높아졌다. ## Figma와 API를 통한 기여 과정 자동화 - GitHub는 Octicons를 Figma로 이전하는 실험을 시작했다. - Figma는 별도의 소프트웨어를 다운로드하거나 설치하지 않아도 브라우저에서 작업할 수 있었다. - Figma API를 함께 사용해 아이콘 업데이트 과정을 자동화할 수 있었다. - 디자이너와 개발자는 운영체제나 도구에 관계없이 복잡한 설정 없이 디자인 시스템에 기여할 수 있게 되었다. - Octicons에서 얻은 효과를 바탕으로 UI 컴포넌트도 Figma로 이전했다. - 이후 GitHub의 디자인과 개발에 필요한 대부분의 요소를 Figma에서 이용할 수 있게 되었다. ## 원격 팀을 위한 ‘DesignHub’ - GitHub는 원래 도구에 구애받지 않는 팀이었지만, Figma 사용은 빠르게 확산되었다. - 웹 기반 협업 기능 덕분에 서로 다른 장소에서 일하는 팀원들이 같은 파일에 동시에 참여할 수 있었다. - Figma는 물리적으로 함께 모여 화이트보드 앞에서 작업하는 경험을 대체했다. - 디자이너들은 실제로 한 공간에 있는 팀처럼 아이디어를 공유하고 발전시킬 수 있었다. - 여러 디자이너가 Figma 파일에서 즉석으로 아이디어를 결합하는 ‘디자인 잼’을 진행하며 창의적인 탐색을 활성화했다. ## 프로토타이핑과 스토리텔링의 통합 - GitHub의 디자이너들은 Figma를 디자인 과정뿐 아니라 스토리텔링 전반에 활용했다. - 디자인은 사용자 경험의 이야기를 전달하는 과정이며, 프로토타입은 그 이야기를 실제 흐름으로 보여주는 수단으로 여겨졌다. - Figma에서는 다른 도구로 전환하지 않고 요소를 빠르게 배치하고 이동해 화면 흐름을 제안할 수 있었다. - 프로토타이핑의 진입 장벽이 낮아지면서 아이디어를 빠르게 표현하고 검증할 수 있었다. ## 협업 중심 문화와 도구의 결합 - GitHub는 기능과 도구가 모두 협업을 촉진해야 한다는 문화를 갖고 있다. - Figma는 디자이너와 엔지니어가 함께 작업하도록 설계된 도구라는 점에서 GitHub의 문화와 잘 맞았다. - 디자인 시스템을 단순한 결과물이나 라이브러리가 아니라 여러 직군이 함께 개선하는 협업 공간으로 발전시켰다. - 웹 기반 편집, 실시간 공동 작업, API 자동화를 조합해 원격 협업의 물리적 한계를 줄였다. GitHub 사례는 디자인 시스템의 효과를 높이려면 컴포넌트를 만드는 것뿐 아니라 누구나 쉽게 기여할 수 있는 워크플로를 함께 설계해야 한다는 점을 보여준다. 특히 웹 기반 협업 도구와 API 자동화를 결합하면 원격 팀에서도 디자인·개발 간 피드백과 반복 작업을 크게 줄일 수 있다.

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

Figma디자인 시스템프로토타이핑github+3

figma·2019년 4월 14일·2분 읽기큐레이션 요약

DesignSystems.com을

Figma는 디자인 시스템 구축과 운영에 관한 실용적인 지식 허브인 DesignSystems.com을 새롭게 개편해 다시 선보였다. 개편의 핵심은 바로 적용할 수 있는 콘텐츠를 제공하고, 초보자부터 숙련자까지 다양한 수준과 규모의 팀을 아우르며, 여러 관점을 소개하는 것이다. 사이트는 커뮤니티의 피드백을 반영해 지속적으로 콘텐츠를 업데이트하고 기여를 받을 예정이다. ## DesignSystems.com 재출시 배경 - Figma는 2018년 5월 DesignSystems.com을 처음 공개한 뒤 커뮤니티에 아이디어와 의견을 요청했다. - 디자이너, 개발자, 콘텐츠 전략가, 디자인 운영 담당자 등 다양한 직군과 대규모 브랜드부터 1인 팀까지 폭넓은 피드백을 수집했다. - 이러한 의견을 바탕으로 사이트의 목적과 콘텐츠 방향을 재정비했다. ## 실행 가능한 콘텐츠 제공 - 디자인 시스템을 만드는 사람과 운영하는 사람이 실제 업무에 적용할 수 있는 글과 자료를 제공한다. - 단순한 개념 소개보다 명확한 시사점과 실천 방법을 포함하는 것을 목표로 한다. - 샘플 코드, 디자인 파일, 가이드, 커뮤니티 사례 등을 통해 이론과 실무를 연결한다. ## 다양한 수준과 팀 규모 지원 - 디자인 시스템을 처음 시작하는 사람을 위한 입문 가이드를 제공한다. - 이미 성숙한 디자인 시스템을 운영하는 실무자를 위해 선도적인 기업의 사례와 경험도 소개한다. - Lyft, Asana, Harry’s 등 디자인 시스템 팀의 글을 통해 조직 규모와 성숙도에 따른 다양한 접근법을 보여준다. - 대기업뿐 아니라 소규모 팀이나 개인 단위의 실무자도 참고할 수 있도록 콘텐츠 범위를 넓힌다. ## 여러 관점과 사례 수집 - 디자인 시스템 문제에는 하나의 정답만 존재하지 않는다는 관점을 강조한다. - 같은 문제를 서로 다른 조직과 직군이 어떻게 해결했는지 비교할 수 있도록 다양한 목소리를 담는다. - 커뮤니티 구성원 간 경험과 지식을 공유하는 장으로 사이트를 발전시키려 한다. ## 지속적인 커뮤니티 참여 - 이번 재출시는 완성된 결과물이 아니라 지속적인 운영의 시작으로 소개된다. - 새로운 글과 자료를 정기적으로 추가할 예정이다. - 독자에게 사이트 콘텐츠에 대한 피드백과 기고 아이디어 제출을 요청한다. - 관심 있는 사람은 업데이트를 구독하거나 직접 콘텐츠 제작에 참여할 수 있다. 디자인 시스템을 도입하려는 팀은 입문 가이드로 기본 방향을 잡고, 성숙한 기업의 사례를 참고하되 자신의 조직 규모와 업무 방식에 맞게 적용하는 것이 좋다. 특히 여러 사례를 비교해 단일한 정답보다 팀에 적합한 원칙과 운영 방식을 찾는 접근이 권장된다.

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

Figma디자인 시스템component-librarydesign-ops+1

figma·2019년 4월 3일·4분 읽기큐레이션 요약

Figma UI 개편:

Figma는 기능 구조를 크게 바꾸기보다 타이포그래피, 레이아웃, 색상, 아이콘 등 UI 표면을 다듬는 방식으로 시각적 리프레시를 진행했다. 기존 UI가 제품 성장에 따라 일관성을 잃고 한계에 부딪혔기 때문에, 전사적 브레인스토밍과 이슈 통합, 정성·정량 조사를 거쳐 변경 범위를 결정했다. 핵심은 모든 사용자를 만족시키려 하기보다 문제를 체계적으로 수집하고, 중요한 개선점에 집중하는 것이었다. ## 리디자인이 필요해진 배경 - Figma의 UI는 제품과 기능이 성장하면서 점점 일관성을 잃었다. - 기존 컴포넌트로 새로운 기능을 표현하기 어려워질 때마다 팀이 임시 컴포넌트와 맞춤형 해결책을 만들었다. - 그 결과 다음과 같은 문제가 누적됐다. - 서로 다른 형태의 테이블, 버튼, 입력 컨트롤 - UI 곳곳에 흩어진 여러 색조의 회색·빨강·파랑 - 기능마다 다른 알림과 대화상자 처리 방식 - 가독성, 여백, 아이콘 체계의 불일치 - 마지막으로 UI 전체를 검토했을 때는 아직 Multiplayer나 Components 같은 핵심 기능이 없었다. - 즉, 기존 UI의 기반이 현재의 Figma를 충분히 반영하지 못하게 된 것이 리프레시의 주요 배경이었다. ## 표면적 변화에 집중한 전략 - 목표는 사용자가 큰 혼란 없이 새 UI를 받아들이도록 만드는 것이었다. - 정보 구조나 제품의 기본 동작을 재설계하기보다는 다음과 같은 시각적 요소를 중심으로 개선했다. - 타이포그래피 - 레이아웃 - 색상 - 아이콘 - 컴포넌트의 시각적 일관성 - 출시 전 수개월 동안 정성적·정량적 조사를 진행했다. - 세부 변경 사항마다 여러 팀이 깊이 논의해 최종 결과에 동의하도록 했다. - 특히 디자이너는 시각적 변화에 민감하므로, 리디자인이 모든 사람에게 동일하게 환영받을 수 없다는 점도 고려했다. ## 1단계: 제한 없이 문제 수집하기 - 전체 디자인 팀이 참여하는 2시간 브레인스토밍 세션을 열었다. - 팀원들은 실제로 Figma를 사용하면서 제품의 구석구석을 살펴봤다. - 발견한 내용을 다음 방식으로 기록했다. - UI의 문제점과 불편한 점 - 마음에 드는 부분 - 관련 스크린샷 - 특정 문제가 미치는 영향에 대한 메모 - 모든 결과물을 Figma 파일에 모아 공동으로 검토했다. - 팀원들이 강하게 반응한 문제, 즉 모두가 “이건 심각하다”고 느낀 항목을 별도로 표시했다. - 이 반응은 어떤 문제가 사용자 경험에 큰 영향을 줄 가능성이 있는지 판단하는 초기 신호로 활용됐다. - 브레인스토밍 직후 결론을 내리지 않고 며칠간 거리를 둔 것도 중요했다. 시간이 지나면서 문제의 우선순위와 구성원들의 의견이 자연스럽게 바뀌었기 때문이다. ## 2단계: 문제를 통합하고 범주화하기 - 후속 회의에서 각 문제를 다시 검토하며 처음의 판단을 재평가했다. - 일부 문제는 생각보다 중요하지 않다고 판단했고, 다른 문제는 해결 필요성을 더 강하게 주장할 수 있도록 논거를 보완했다. - 긴 문제 목록을 팀원들에게 나누어 전달하고, 각자가 이를 포스트잇 형태의 짧은 항목으로 재작성했다. - 이 과정에서는 개별적인 증상을 그대로 옮기기보다 공통된 근본 문제로 추상화했다. - 예: “특정 화면의 알림 모양이 다르다” - 통합된 표현: “제품 전체의 알림 처리 시스템이 필요하다” - 비슷한 포스트잇을 함께 묶어 반복적으로 나타나는 주제를 확인했다. - 그 결과 다음과 같은 범주가 도출됐다. - 아이콘, 타이포그래피, 가독성, 색상 - 대화상자, 툴바, 말투 - 에디터와 파일 브라우저 - 모드, 팀 페이지, 속성 사이드바 - 컴포넌트, 레이어, 히스토리 - 공유, 퍼블리싱, 내보내기 - 포스트잇의 반복은 단순한 중복이 아니라 중요한 문제가 여러 방식으로 나타나고 있다는 신호가 되었다. - 다만 범주를 다시 “시각적 문제에서 기초 구조적 문제까지”라는 축으로 정렬하려 한 것은 지나치게 복잡한 접근이었다. ## 범주화 과정에서 얻은 교훈 - 문제를 조직화할 때 지나치게 추상적인 기준을 만들면 오히려 판단이 어려워진다. - “제품의 개성”처럼 거의 모든 문제를 포함할 수 있는 범주는 유용하지 않다. - 반대로 특정 대화상자 하나처럼 지나치게 좁은 범주도 전체적인 개선 방향을 잡는 데 적합하지 않다. - 가장 좋은 범주는 서로 비슷한 문제를 묶으면서도, 실제 개선 작업으로 이어질 수 있을 만큼 구체적이어야 한다. - 완벽한 분류 체계를 만드는 것보다 중요한 문제의 신호를 잡음에서 분리하는 것이 우선이다. ## 실무에 적용할 때의 추천 - 리디자인을 시작할 때 바로 해결책을 만들기보다, 먼저 팀 전체가 제품을 직접 사용하며 문제를 폭넓게 수집한다. - 각 문제를 개별 사례가 아닌 반복되는 시스템적 문제로 재정의한다. - 브레인스토밍 직후 결론을 확정하지 말고 일정한 숙고 시간을 둔다. - 범주화는 단순하고 이해하기 쉽게 유지하며, 지나치게 추상적이거나 복잡한 분류 축은 피하는 것이 좋다.

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

Figma디자인 시스템사용자 경험사용자 인터페이스+2

figma·2019년 4월 2일·3분 읽기큐레이션 요약

#FigmaTip 모

Figma 파일과 디자인 시스템을 효율적으로 정리하려면 레이어, 파일, 컴포넌트, 페이지를 체계적으로 관리해야 한다. 이 글은 봄맞이 정리를 위한 Figma 활용법으로 일괄 이름 변경, 사용자 지정 썸네일, 파일 정렬, 라이브러리 정리, 프레임과 페이지 활용을 소개한다. 이러한 기능을 활용하면 파일을 빠르게 탐색하고 팀 협업 효율도 높일 수 있다. ### 레이어 일괄 이름 변경 - 장기간 진행한 프로젝트에서는 레이어가 복제·수정되며 이름이 뒤섞이기 쉽다. - 여러 레이어를 선택한 뒤 마우스 오른쪽 버튼의 **Rename**을 선택하거나 `Command + R`을 누르면 일괄 변경할 수 있다. - 다음과 같은 방식이 지원된다. - 모든 레이어를 동일한 이름으로 변경 - 숫자 접미사 추가 - 접두사 추가 - 기존 이름의 일부만 변경 - 정규 표현식을 이용한 고급 이름 변경 ### 사용자 지정 썸네일로 파일 구분 - 파일에 사용자 지정 썸네일을 설정하면 파일 브라우저에서 내용을 빠르게 식별할 수 있다. - 설정 방법: - 새 페이지를 만들고 페이지 목록의 가장 위로 이동 - `640x320` 크기의 프레임 하나를 생성 - 프레임 안에 제목, 설명, 이미지 등을 배치 - 프레임 배경색과 캔버스 배경색을 동일하게 설정 - 썸네일에 프로젝트 상태나 버전 정보를 표시하면 파일 탐색과 진행 상황 공유에 유용하다. ### 파일 브라우저 정렬 - 파일 브라우저의 정렬 기능을 사용하면 불필요한 파일을 쉽게 찾을 수 있다. - **File Name**으로 정렬하면 `Untitled`처럼 이름이 정리되지 않은 파일을 확인할 수 있다. - 다음 기준으로도 정렬할 수 있다. - 생성일 - 최종 수정일 ### 팀 라이브러리의 컴포넌트 정리 - 디자인 시스템을 정리할 때는 팀 라이브러리에 등록된 컴포넌트가 실제로 필요한지 검토해야 한다. - 중복되거나 더 이상 사용하지 않는 컴포넌트는 컴포넌트 탭에서 마우스 오른쪽 버튼을 클릭한 뒤 **Remove from Library**를 선택해 제거할 수 있다. - 컴포넌트 이름 앞에 `.` 또는 `_`를 붙이는 방식으로 라이브러리에서 제외할 수도 있다. - 이를 통해 팀원이 불필요한 컴포넌트를 찾느라 시간을 낭비하는 것을 줄일 수 있다. ### 프레임과 페이지로 라이브러리 구성 - 컴포넌트 라이브러리와 디자인 시스템은 프레임과 페이지를 사용해 논리적인 컬렉션으로 나누는 것이 좋다. - 이름에 슬래시(`/`)를 여러 번 사용해 계층 구조를 표현하는 대신, 프레임과 페이지로 분류하면 컴포넌트 이름을 더 단순하게 유지할 수 있다. - 체계적인 분류는 팀원이 필요한 컴포넌트를 쉽게 탐색하고 라이브러리를 이해하는 데 도움이 된다. ### 실용적인 정리 순서 - 먼저 파일 브라우저를 이름과 수정일 기준으로 정렬해 불필요한 파일을 선별한다. - 각 파일의 레이어를 일괄적으로 이름 변경해 검색과 탐색이 쉽게 만든다. - 중요한 파일에는 `640x320` 사용자 지정 썸네일을 추가한다. - 마지막으로 팀 라이브러리에서 중복·미사용 컴포넌트를 제거하고, 남은 컴포넌트를 프레임과 페이지로 분류하는 것이 좋다.

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

Figma디자인 시스템component-librariesregular-expressions+1

datadog·2019년 4월 2일원문

Datadog에서 고신뢰성 데이터 파이프라인 구축하기 (새 탭에서 열림)

데이터독(Datadog)은 매일 수조 건의 데이터를 처리하며 시스템의 신뢰성을 '정해진 시간 내에 정확한 결과물을 출력할 확률'로 정의합니다. 이들은 파이프라인의 장애를 완전히 막는 대신, 장애가 발생하더라도 데이터 전달 기한을 지킬 수 있도록 결함 허용(Fault Tolerance)과 빠른 복구에 초점을 맞춘 아키텍처를 구축했습니다. 특히 개별 작업 단위로 클러스터를 분리하고 장시간 실행되는 작업을 작게 쪼개는 전략을 통해 대규모 데이터 처리의 안정성을 확보하고 있습니다. ### 작업 격리를 위한 개별 클러스터 아키텍처 * 하나의 거대한 공유 클러스터를 사용하는 대신, 각 데이터 파이프라인 작업마다 독립적인 전용 클러스터를 할당하여 운영합니다. * 작업 간 리소스 경쟁을 원천 차단하여 특정 작업의 부하가 다른 파이프라인에 영향을 주지 않으며, 클러스터별 상태를 명확히 파악할 수 있어 모니터링이 용이합니다. * 작업의 특성에 따라 CPU 최적화 인스턴스나 메모리 최적화 인스턴스를 선택하는 등 하드웨어를 유연하게 튜닝할 수 있습니다. * 새로운 버전의 Hadoop이나 Spark를 도입할 때 전체 시스템을 중단할 필요 없이, 특정 클러스터부터 점진적으로 업그레이드하며 버그나 호환성을 테스트할 수 있습니다. ### 스팟 인스턴스 활용과 실패를 고려한 설계 * 비용 절감을 위해 AWS 스팟 인스턴스를 적극 활용하며, 이는 클러스터가 언제든 중단될 수 있다는 전제하에 파이프라인을 설계하도록 강제하는 '카오스 엔지니어링'의 효과를 줍니다. * 단일 작업의 실행 시간이 길어질수록 실패 시 손실되는 작업량과 복구 시간이 늘어나므로, 이를 방지하기 위해 작업을 수직적·수평적으로 세분화합니다. * **수직적 분할:** 데이터 변환 과정을 여러 단계의 작업으로 나누고, 단계 사이의 중간 데이터를 S3에 저장(Checkpointing)하여 실패 시 처음부터 다시 시작하지 않고 중간 지점부터 재개할 수 있게 합니다. * **수평적 분할:** 입력 데이터를 샤드(Shard) 단위로 파티셔닝하여 여러 작업이 병렬로 처리하게 함으로써 개별 작업의 규모를 작게 유지합니다. ### 롤업(Rollup) 파이프라인의 최적화 사례 * 과거 14시간 이상 소요되던 단일 메트릭 집계 작업을 '집계' 단계와 '커스텀 포맷 저장' 단계로 분리하여 관리합니다. * 첫 번째 집계 작업의 결과물을 S3에 Parquet 파일로 저장함으로써, 두 번째 단계에서 장애가 발생하더라도 집계 과정을 다시 반복할 필요가 없습니다. * Kafka 파티션 구조를 기반으로 데이터를 샤딩하여, 데이터 규모가 급증하거나 특정 샤드에 문제가 발생했을 때 해당 부분만 격리하여 리소스를 집중 투입하거나 빠르게 복구할 수 있습니다. * 이러한 구조는 작업 시작 오버헤드나 S3 쓰기 비용을 발생시키지만, 장애 복구 시간을 단축하고 전체 시스템의 데이터 가용성을 보장하는 데 결정적인 역할을 합니다. 대규모 데이터 시스템에서 신뢰성은 시스템이 절대 중단되지 않는 것이 아니라, 중단되었을 때 얼마나 빠르게 복구되어 사용자에게 제때 데이터를 전달하느냐에 달려 있습니다. 이를 위해 파이프라인을 최대한 작고 독립적인 단위로 쪼개고 중간 상태를 유지하는 설계는 복잡한 데이터 환경에서 필수적인 전략입니다.

데이터베이스 설계PostgreSQLAWSmonitoring+4

datadog·2019년 4월 2일·2분 읽기큐레이션 요약

Datadog에서 고신

Datadog이 Gartner의 2026년 Observability Platforms 매직 쿼드런트에서 Leader로 선정되었다는 홍보 내용이 중심입니다. 제공된 본문에는 선정 근거와 기술적 세부사항보다 Datadog의 제품군 및 플랫폼 구성이 주로 나열되어 있어, 데이터 파이프라인의 신뢰성에 관한 글 전체의 결론은 확인하기 어렵습니다. ### Gartner 매직 쿼드런트 리더 선정 - Datadog은 관측성 플랫폼 분야에서 Gartner가 선정한 Leader로 소개됩니다. - 관련 링크는 2026년 Observability Platforms 보고서로 연결됩니다. - 제공된 내용만으로는 평가 기준, 경쟁사 비교, Datadog의 구체적인 강점이나 한계는 확인되지 않습니다. ### 인프라 및 애플리케이션 관측성 - 인프라 모니터링, 메트릭, 컨테이너 및 Kubernetes 모니터링을 제공합니다. - 네트워크, 서버리스, GPU, 스토리지, 클라우드 비용도 관측 대상에 포함됩니다. - 애플리케이션 성능 모니터링(APM), 서비스 모니터링, 지속적 프로파일링, 동적 계측 기능을 지원합니다. - 데이터베이스와 데이터 스트림, 데이터 품질 및 작업(Job) 모니터링 기능도 포함됩니다. ### 로그 및 보안 기능 - 로그 관리, 민감 데이터 탐지, 감사 추적, 관측성 파이프라인 기능을 제공합니다. - 코드 보안, SAST·IAST, 소프트웨어 구성 분석, IaC 보안, 클라우드 보안 및 SIEM을 지원합니다. - 워크로드 보호, API 보호, 취약점 관리, 비밀정보 스캐닝 등 보안 기능이 관측성 플랫폼과 결합되어 있습니다. ### 사용자 경험과 소프트웨어 전달 - 웹·모바일 RUM, 세션 리플레이, 신세틱 모니터링, 오류 추적을 제공합니다. - 제품 분석, 실험, 모바일 앱 테스트 등 디지털 경험 분석 기능도 포함됩니다. - CI 가시성, 테스트 최적화, 지속적 테스트, 코드 커버리지, 기능 플래그를 통해 소프트웨어 전달 과정을 관찰합니다. ### 통합 플랫폼과 AI - 대시보드, 알림, SLO, 이벤트 관리, 인시던트 대응, 워크플로 자동화 기능을 제공합니다. - Watchdog과 Bits 계열 AI 에이전트를 활용한 조사·분석 및 자동화를 강조합니다. - AI 에이전트 관측성, GPU 모니터링, MCP 서버와 같은 AI 운영 기능도 제품군에 포함되어 있습니다. 제공된 자료는 실제 기술 블로그 본문이 아니라 Datadog 웹사이트의 메뉴와 홍보 문구에 가깝습니다. 데이터 파이프라인의 신뢰성, 장애 복구, 중복 처리, 모니터링 전략 등을 요약하려면 원문 본문이나 전체 URL의 콘텐츠가 추가로 필요합니다.

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

쿠버네티스datadog옵저버빌리티애플리케이션 성능 모니터링+3

figma·2019년 4월 1일·3분 읽기큐레이션 요약

디자인 시스템 전파의

디자인 시스템의 확산은 UI 키트나 컴포넌트 라이브러리를 만드는 기술적 작업만으로 이루어지지 않으며, 사람과의 협업을 통해 조직 문화로 정착되어야 한다. 특히 페어링은 다른 디자이너·엔지니어와 함께 작업하며 시스템의 문제를 발견하고, 비판을 협력으로 전환하며, 시스템의 가치를 자연스럽게 전파하는 가장 효과적인 방법이다. 디자인 시스템 팀은 “규칙을 지키라”고 요구하기보다 사용자의 일을 더 빠르고 높은 품질로 만들어 주는 파트너가 되어야 한다. ## 디자인 시스템은 기술 프로젝트가 아니라 문화 프로젝트 - UI 키트나 컴포넌트 라이브러리를 혼자 구축하는 것만으로는 조직의 불일치를 해결할 수 없다. - 디자인 시스템은 디자이너, 엔지니어, 제품 관리자, 고객 사이의 관계와 조직 문화를 반영한다. - “파란색을 쓰지 마라”, “이 컴포넌트를 왜 새로 만들었나”처럼 잘못을 지적하는 방식은 디자인 시스템 팀과 다른 팀을 대립 구도로 만들 수 있다. - Gusto는 다음과 같은 소통 장치를 마련했다. - 피드백과 질문을 위한 Slack 채널 - 디자인 시스템 팀의 오피스 아워 - 신규 구성원을 위한 UI 소개 키트 - 그러나 가장 효과적으로 시스템을 전파한 방법은 직접 함께 작업하는 페어링이었다. ## 페어링은 디자인 시스템의 사용자 조사다 - 다른 디자이너와 나란히 작업하면 실제 사용 과정에서 다음을 관찰할 수 있다. - 어떤 컴포넌트와 패턴이 혼란스러운가 - 문서나 Figma 파일에서 어떤 정보가 부족한가 - 기존 시스템에서 이상하거나 잘 작동하지 않는 부분은 무엇인가 - 팀이 사용자의 필요를 추측하는 대신, 실제 사용 데이터를 바탕으로 컴포넌트와 문서를 개선할 수 있다. - 페어링 중에는 다음과 같은 질문에 답할 수 있다. - 디자이너와 엔지니어가 컴포넌트 라이브러리의 존재를 알고 있는가 - HTML·CSS의 최신 모범 사례를 이해하고 있는가 - 특정 컴포넌트를 사용하는 것이 조직 전체에 왜 유리한지 설명하고 있는가 - 개인 작업에서 유용한 레이아웃을 공식 패턴으로 발전시킬 수 있는가 - 오피스 아워는 사용자가 언제 도움을 받아야 하는지 판단하지 못해 참여율이 낮을 수 있지만, 페어링은 실제 작업 흐름 안에서 문제를 발견한다. ## 비판을 협업으로 전환하는 페어링 - 디자인 시스템 팀과의 협업은 추가적인 디자인 리뷰가 아니라, 작업 속도를 높이고 향후 버그를 줄이는 과정처럼 느껴져야 한다. - 초기 디자인 시스템은 복잡하고 문서화가 부족한 경우가 많다. - 사용할 수 있는 색상이 제한되어 있다는 사실 - 이미 동일한 용도의 컴포넌트가 존재한다는 사실 - 특정 구현 방식이 접근성 기준을 위반한다는 사실 - 이런 규칙을 한꺼번에 강요하면 통제적으로 보일 수 있고, 엔지니어는 문서를 무시하며 디자이너는 기존 시스템과 어울리지 않는 UI를 만들 수 있다. - 페어링은 디자인 시스템 팀이 머릿속에만 보관하던 코드베이스의 제약과 조직의 지식을 직접 전달하게 한다. - 동시에 디자인 시스템 팀도 제품 디자이너가 실제로 어떤 일을 해야 하는지 이해하게 된다. - 결과적으로 디자인 시스템 팀은 현장의 요구를 파악하고, 제품 팀은 프런트엔드 컴포넌트와 패턴을 배우면서 양쪽 모두 더 빠르게 작업할 수 있다. ## 시스템의 지지자를 만드는 방법 - 페어링을 경험한 디자이너와 엔지니어는 디자인 시스템을 단순한 규칙 모음이 아니라 자신의 작업을 개선하는 도구로 이해하게 된다. - 직접 협업을 통해 얻은 지식은 각 팀으로 돌아가 자연스럽게 공유될 수 있다. - 디자인 시스템의 채택을 높이려면 규칙 준수를 감시하기보다, 시스템이 창의성을 제한하는 것이 아니라 작업에 “추진력을 더해준다”는 경험을 제공해야 한다. - 이런 경험이 축적되면 디자인 시스템 팀 외에도 시스템을 설명하고 추천하는 내부 전도자(evangelist)가 늘어난다. 실무적으로는 정기적인 페어링 세션을 실제 디자인·개발 과제와 연결하고, 세션에서 발견한 혼란과 요구를 컴포넌트·문서 개선으로 바로 반영하는 것이 좋다.

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

Figma디자인 시스템접근성CSS+4

figma·2019년 3월 31일·2분 읽기큐레이션 요약

피그마 시간 여행 | 피

Figma의 “Time Travel”은 버전 기록에서 과거의 디자인 상태로 한 번에 이동할 수 있도록 만든 만우절 기념 기능이다. 사용자는 버전 기록 화면에서 특정 연도의 시각적 분위기를 반영한 네 가지 옵션을 선택해 디자인을 과거 스타일로 되돌려 볼 수 있다. 실질적인 협업 기능이라기보다 Figma의 버전 관리 기능과 이스터 에그를 재미있게 보여주는 프로젝트다. ## 버전 기록을 활용한 시간 여행 - Figma의 **Version History**에서 과거 디자인으로 이동할 수 있다. - 새로운 시간 여행 옵션 네 가지가 추가되었으며, 각 옵션은 서로 다른 시대의 색상 팔레트를 표현한다. - 한 번의 클릭으로 디자인을 특정 역사적 시기의 분위기로 바꿔 볼 수 있도록 구성했다. - 글에서는 이를 Figma의 ‘DeLorean’에 빗대어, 영화 *백 투 더 퓨처*처럼 과거로 이동하는 경험으로 소개한다. ## 시대별 색상 팔레트와 복고풍 연출 - 1973년 스타일 등 특정 연도를 연상시키는 팔레트가 제공된다. - 낡은 회색 사무실, 기계식 키보드 같은 당시의 시각·문화적 이미지를 유머러스하게 활용했다. - 디자인 도구 안에서 역사적 스타일을 체험하도록 해, 단순한 기능 소개보다 엔터테인먼트 요소를 강조했다. ## 만우절 이스터 에그 - Figma는 2019년 4월 1일을 맞아 이 기능을 공개했다. - 일반적인 만우절 장난 대신, 실제로 사용해 볼 수 있는 작은 프로젝트를 선보였다는 점을 강조한다. - 버전 기록이라는 기존 기능에 재미있는 인터랙션을 더해 Figma의 브랜드와 제품 문화를 보여준다. - 기능 자체보다는 사용자에게 새로운 달의 시작을 즐겁게 만들어 주는 데 목적이 있다. ## 실용적인 의미 - 버전 기록 기능이 단순한 복구 도구를 넘어 디자인의 시간성과 변화를 탐색하는 공간이 될 수 있음을 보여준다. - 제품의 핵심 기능을 유머와 이스터 에그로 포장하면 사용자의 관심과 참여를 높일 수 있다. - 다만 이 글의 시간 여행 기능은 정식 디자인 워크플로보다는 Figma의 실험적·홍보성 기능에 가깝다.

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

Figmadesign-collaborationdesign-toolsversion-history

figma·2019년 3월 27일·2분 읽기큐레이션 요약

Figma 데스크톱 앱 경험 업데이트

Figma는 데스크톱 앱 사용성을 개선해 웹에서만 열리던 Figma 링크를 앱에서 직접 열 수 있도록 했다. 또한 macOS에서 sRGB 색 공간을 선택할 수 있게 하고, Windows UI를 간소화해 캔버스 작업 공간을 넓혔다. 이를 통해 브라우저 중심의 Figma 경험을 보완하고 디자인 작업의 편의성과 정확성을 높였다. ## 데스크톱 앱에서 Figma 링크 열기 - 이제 Figma URL을 클릭하면 데스크톱 앱에서 자동으로 열리도록 설정할 수 있다. - 기존에는 링크가 Chrome, Firefox, Safari 같은 브라우저에서만 열렸다. - 사용 방법: - 데스크톱 앱을 업데이트한다. - Figma 링크를 클릭한 뒤 대화상자에서 **“항상 앱에서 열기”**를 선택한다. - 설정을 바꾸려면 Figma 파일의 왼쪽 상단 메뉴에서 환경설정으로 이동해 **“데스크톱 앱에서 링크 열기”**를 해제하면 된다. - 브라우저를 기본값으로 유지하더라도 파일 메뉴의 **“데스크톱 앱에서 열기”**를 통해 수동으로 앱을 실행할 수 있다. - 이 기능은 문서, Slack, 작업 관리 티켓 등에 공유된 디자인 링크를 앱으로 바로 연결해 준다. ## macOS에서 색 공간 관리 - Mac 데스크톱 앱에서 색 공간을 직접 선택할 수 있게 됐다. - 기존에는 색 공간이 관리되지 않아 컴퓨터의 일반 디스플레이 설정을 그대로 따랐다. - 웹 기반 제품을 디자인하는 경우 브라우저의 표준 색 공간인 **sRGB**와 화면 색상이 다르게 보일 수 있었다. - 이제 다음 중 하나를 선택할 수 있다. - 기존처럼 색 공간을 관리하지 않는 방식 - sRGB 색 공간을 사용하는 방식 - 이를 통해 웹 브라우저에서 실제로 보일 색상을 더 정확하게 검토할 수 있다. - 당시에는 macOS에서 먼저 제공됐으며 Windows 지원은 추후 예정이었다. ## Windows UI 간소화 - Windows 앱의 메뉴 옵션을 통합하고 불필요한 UI 요소를 제거했다. - 화면을 차지하던 요소를 줄여 캔버스에 더 넓은 작업 공간을 확보했다. - 결과적으로 디자인 도구 자체에 집중할 수 있도록 인터페이스를 정리했다. ## 데스크톱 앱 중심 경험 강화 - Figma는 웹 도구를 중심으로 발전했지만, 브라우저 탭을 많이 사용하는 사용자에게 데스크톱 앱은 독립적인 작업 공간을 제공한다. - 이번 업데이트는 링크 연결, 색상 정확도, 화면 공간이라는 데스크톱 앱의 핵심 사용 경험을 개선했다. - 특히 링크를 앱에서 직접 여는 기능은 기존에 사용자들이 별도 메뉴 막대 앱이나 브라우저 확장 기능으로 해결하던 불편을 기본 기능으로 대체했다. 데스크톱 앱을 주로 사용한다면 링크 자동 열기 설정을 활성화하고, 웹 디자인 작업이 많다면 macOS에서 sRGB 색 공간을 선택하는 것이 좋다. Windows 사용자는 간소화된 UI 덕분에 더 넓어진 캔버스 공간을 활용할 수 있다.

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

Figmadesktop-appmacoselectron+3

figma·2019년 3월 26일·3분 읽기큐레이션 요약

Dribbble이 원격 팀

Dribbble은 완전 원격으로 일하는 디자인팀의 협업 문제를 Figma로 해결했다. 여러 도구와 파일을 오가던 방식을 하나의 온라인 파일과 실시간 공동 편집으로 통합해, 최신 디자인을 공유하고 피드백을 주고받는 과정을 단순화했다. 그 결과 디자인 페어 작업과 리뷰가 빨라졌고, 아이디어를 며칠이 아니라 수십 분 안에 구체화할 수 있었다. ## 여러 시간대에 걸친 원격 협업의 어려움 - Dribbble은 전 직원이 100% 원격으로 근무하며, 디자인팀은 제품 디자이너와 개발자 7명으로 구성되어 있다. - 원격 근무는 유연성과 인재 확보 측면에서 장점이 있지만, 사무실에서 자연스럽게 대화하는 방식의 협업은 어려웠다. - 팀은 화상회의와 여러 협업 도구를 함께 사용했지만, 작업 방식이 매끄럽게 연결되지 않았다. - 다른 디자이너의 작업 현황을 파악하기 어려웠고, 파일 관리와 다양한 피드백 흐름을 정리하는 데 시간이 소요됐다. ## Figma를 통한 단일 작업 공간 - Figma에서는 여러 사람이 동시에 하나의 파일에 접속해 회의실이나 화이트보드에서 함께 작업하는 경험을 재현할 수 있었다. - 온라인 기반이므로 최신 파일을 찾기 위해 동료에게 묻거나 여러 애플리케이션을 전환할 필요가 줄었다. - 디자인 파일, 버전 관리, 댓글, 리뷰를 한곳에서 처리해 팀의 ‘단일 진실 공급원(single source of truth)’을 마련했다. - 기존 디자인 파일 형식을 가져올 수 있어 새로운 도구로의 전환 부담도 낮췄다. - Dribbble은 기존 사용자 인터페이스를 Figma에서 다시 제작해 팀원들이 익숙한 구성 요소로 학습하도록 했다. ## 디자인 페어와 실시간 공동 작업 - Dribbble은 두 명의 디자이너가 함께 문제나 프로젝트를 해결하는 디자인 페어 방식을 활용한다. - 하나의 파일에서 동시에 작업하면서 도구 간 전환과 파일 주고받기에 드는 마찰을 제거했다. - 최신 변경 사항을 모든 팀원이 즉시 확인할 수 있어 커뮤니케이션 비용과 중복 작업이 감소했다. - 여러 사람이 스타일 가이드를 참고하거나 같은 디자인을 반복 수정해야 하는 대규모 작업에서도 일관성을 유지하기 쉬웠다. ## 더 빠른 디자인 리뷰와 피드백 - Figma의 멀티플레이어 기능을 활용해 모든 디자이너가 같은 파일에서 디자인 리뷰를 진행했다. - 팀원들은 프레임을 복제해 아이디어를 발전시키고, 댓글을 남기며, 실시간으로 수정 사항을 반영했다. - 피드백 루프가 짧아져 디자인 문제를 며칠이 아니라 몇 분 만에 해결할 수 있었다. - 한 사례에서는 화상회의 중 5명이 하나의 Figma 파일에 참여해 아이디어를 브레인스토밍하고 서로의 안을 비평했으며, 약 20분 만에 합의된 디자인을 완성했다. ## Figma와 Dribbble의 연동 - Dribbble은 Figma API를 활용해 작업물을 Figma에서 Dribbble로 직접 공유하는 통합 기능을 만들었다. - 사용자는 Figma에서 레이어를 선택한 뒤 `Integrations` ▸ `Dribbble`을 통해 Dribbble 업로드 화면으로 이동할 수 있다. - 이를 통해 디자인 제작과 게시 사이의 절차도 하나의 작업 흐름으로 연결했다. ## 실용적인 시사점 - 원격 디자인팀에는 화상회의만으로는 부족하며, 실시간 공동 편집과 최신 파일을 보장하는 중앙 작업 공간이 필요하다. - 도구를 통합하면 파일 관리와 커뮤니케이션에 쓰는 시간을 줄이고 디자인 자체에 집중할 수 있다. - 기존 자산을 가져오고 익숙한 UI를 재현하는 방식은 협업 도구 도입 시 팀의 학습 부담을 줄이는 효과적인 방법이다.

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

Figma디자인 시스템real-time-collaborationremote-collaboration+3

figma·2019년 3월 20일·3분 읽기큐레이션 요약

피그마 드래프트

Figma Drafts는 완성된 결과물을 공유하기 전, 아이디어를 자유롭게 실험하는 개인 작업 공간이다. 글쓴이는 공개 협업 환경에서 파일의 완성도나 정리 상태를 평가받을까 하는 두려움을 Drafts로 완화했고, 이를 디지털 노트처럼 활용했다. 핵심 원칙은 먼저 만들고 나중에 정리하며, 발전시킬 아이디어만 프로젝트로 옮기는 것이다. ## 공개 협업에서 생기는 부담 - 다른 사람이 작업 중인 파일을 볼 수 있으면 다음과 같은 걱정이 생길 수 있다. - 8px 그리드를 지키지 않았다는 평가 - 레이어 이름을 정리하지 않았다는 지적 - 아이콘을 만드는 과정이나 파일 구조가 미숙해 보일 가능성 - 이 부담 때문에 실제 문제 해결이나 다양한 시도보다 파일을 “보여줄 만한 상태”로 꾸미는 데 시간을 쓰게 된다. - 글쓴이는 이러한 두려움이 공개적이고 협력적인 디자인 환경에서 더 커졌다고 설명한다. ## Drafts의 역할과 장점 - Drafts는 팀이나 프로젝트와 마찬가지로 파일을 보관하는 조직 단위지만, 개인 폴더라는 점이 다르다. - 팀이나 프로젝트의 권한 및 공유 설정에 종속되지 않는다. - Drafts 전체를 다른 사람에게 공개할 수는 없고, 필요한 경우 개별 파일만 선택적으로 공유할 수 있다. - 완성품이 아니라는 의미가 이름에 내포되어 있어, 실험과 미완성 작업을 심리적으로 허용한다. - 디자이너의 블록을 극복하고 색상, 타이포그래피, 화면 흐름 등을 정하기 전에 우선 아이디어를 시각화하는 공간으로 활용할 수 있다. - 글쓴이는 Drafts를 낙서, 스케치, 미완성 목록이 섞여 있는 개인 노트의 디지털 버전으로 사용한다. ## “먼저 만들고, 나중에 정리하기” - Drafts에서는 iOS 앱 아이디어나 Figma 기능을 활용한 실험처럼 빠르게 떠오른 생각을 즉시 기록한다. - 파일 이름이 없거나, 기본 회색 도형만 있거나, 구조가 엉성해도 문제로 보지 않는다. - 중요한 원칙은 **Create first, organize second**이다. - 먼저 다양한 해결책을 시도한다. - 아이디어가 발전한 뒤 파일명, 레이어, 구성 등을 정리한다. - 초기 단계에서 정리와 완성도를 지나치게 신경 쓰면 탐색의 폭이 줄어들 수 있으므로, Drafts에서는 혼란스러운 상태를 작업 과정의 일부로 받아들인다. ## Drafts를 프로젝트로 옮기는 방법 - 아이디어가 더 발전해 팀과 공유하거나 체계적으로 관리해야 할 시점이 되면 Drafts 파일을 프로젝트로 이동한다. - 파일 브라우저에서 파일을 선택한 뒤 원하는 프로젝트로 드래그 앤 드롭하면 된다. - 파일 내부에서 파일명 왼쪽의 “Drafts” 메뉴를 클릭하고 이동할 프로젝트를 선택할 수도 있다. - 예를 들어 와이어프레임을 고해상도 화면으로 발전시키려는 경우, 전체 파일을 프로젝트로 옮기는 방식이 적절하다. ## 원본 보존과 반복 작업 - 아이디어를 여러 페이지나 파일에서 계속 발전시킬 예정이라면, 먼저 Drafts 파일을 복제한다. - 복제본은 Drafts에 남겨 초기 아이디어의 스냅샷으로 보존한다. - 복제한 파일을 프로젝트로 옮겨 팀 작업이나 정리 작업을 진행한다. - Drafts에는 정리되지 않은 원본을 유지하고, 프로젝트 파일에서는 실제 작업에 필요한 요소를 다듬는 방식이다. ## 파일 관리와 검색 - Drafts가 많아지면 파일 브라우저의 필터 기능을 활용할 수 있다. - 파일명, 생성일, 마지막 수정일 등을 기준으로 파일을 찾고 정렬할 수 있다. - 다만 정리 자체를 너무 일찍 시작하기보다, 아이디어가 충분히 발전한 뒤 필요한 파일만 프로젝트로 옮기는 흐름이 권장된다. 개인 작업에서는 Drafts를 “공개 전 검수 공간”이 아니라 자유롭게 실패하고 탐색하는 디지털 스케치북으로 사용하는 것이 좋다. 완성도와 정리는 아이디어가 검증된 뒤에 진행하고, 팀 공유가 필요해졌을 때 파일을 복제하거나 프로젝트로 이동하면 창의성과 협업을 모두 확보할 수 있다.

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

Figma디자인 시스템프로토타이핑collaborative-design+2