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

figma·2017년 7월 19일·2분 읽기큐레이션 요약

터가 피그마

Figma는 2017년 이미지 조정 기능을 도입해 별도의 Photoshop 없이 캔버스에서 사진을 빠르게 보정할 수 있도록 했다. 노출, 대비, 채도, 색온도, 색조, 하이라이트, 그림자 등을 조절할 수 있으며, 전문 이미지 편집기를 대체하기보다는 디자이너의 간단한 수정 작업을 줄이는 데 목적이 있다. ## Photoshop 경쟁자로 시작한 Figma - Figma는 2012년 Photoshop의 대안으로 시작했다. - 공동 창업자이자 CTO인 Evan Wallace는 브라우저 기술을 활용해 사진 필터와 마스크 기능을 실험했다. - 새 이미지 조정 기능은 이러한 초기 방향성과 브라우저 기반 이미지 편집이라는 Figma의 뿌리를 다시 연결한다. ## Figma의 이미지 조정 기능 - 이미지에 다음과 같은 조정 효과를 적용할 수 있다. - 노출(Exposure) - 대비(Contrast) - 채도(Saturation) - 색온도(Temperature) - 색조(Tint) - 하이라이트(Highlights) - 그림자(Shadows) - 이미지를 Figma 캔버스에 드래그한 뒤, 오른쪽 속성 패널의 **Fill** 영역에서 필터 옵션을 선택하면 사용할 수 있다. - 별도 프로그램에서 이미지를 수정한 뒤 다시 내보내거나, Figma 내부에서 비공식적인 우회 방법을 사용할 필요가 줄어든다. ## 빠른 보정에 맞춘 조정 범위 - Figma 팀은 각 조정값의 범위를 신중하게 조정해 실용적인 결과를 내도록 설계했다. - 예를 들어 노출값을 높은 수준으로 올려도 이미지가 지나치게 하얗게 날아가는 현상을 방지하려고 했다. - 따라서 전문적인 색보정 도구보다는 UI 시안 제작 중 밝기, 색감, 대비를 빠르게 맞추는 용도에 적합하다. ## 전문 이미지 편집기를 대체하지 않는 기능 - 이 기능은 Photoshop 같은 전문 이미지 편집 도구를 완전히 대체하려는 목적이 아니다. - 복잡한 리터칭, 정교한 색보정, 고급 마스킹 작업보다는 디자인 작업 중 발생하는 간단한 이미지 수정에 초점을 둔다. - 디자이너가 작업 흐름을 벗어나지 않고 Figma 안에서 즉시 결과를 확인할 수 있다는 점이 가장 큰 장점이다. 간단한 이미지 보정이 필요한 UI·UX 작업에서는 Figma의 조정 기능을 우선 활용하고, 정밀한 편집이나 전문적인 색보정이 필요할 때만 Photoshop 등 별도 도구를 사용하는 방식이 효율적이다.

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

Figmaimage-processingphotoshopphoto-filters+1

datadog·2017년 7월 11일원문

구간별 회귀: 하나의 직선만으로는 부족할 때 (새 탭에서 열림)

데이터독(Datadog)은 단일 선형 회귀로 설명하기 어려운 복잡한 시계열 데이터를 효과적으로 모델링하기 위해 자동화된 분절 회귀(Piecewise Regression) 알고리즘을 도입했습니다. 이 알고리즘은 수동 개입 없이 데이터의 추세가 변하는 분절점(Breakpoint)과 최적의 구간 개수를 스스로 찾아내며, 수많은 시계열 데이터를 초당 수백 건씩 처리할 수 있는 효율성을 갖추고 있습니다. 결과적으로 모델의 오차를 최소화하면서도 불필요하게 많은 구간을 생성하지 않는 균형 잡힌 데이터 해석을 가능하게 합니다. **자동화된 분절 회귀의 목표** * **분절점 및 구간 개수 자동 탐색:** 사람이 직접 추세가 변하는 지점을 지정할 수 없으므로, 알고리즘이 스스로 최적의 분절 위치와 데이터에 적합한 구간의 개수(1개부터 n개까지)를 결정해야 합니다. * **연속성 제약 배제:** 각 구간의 끝점과 다음 구간의 시작점이 반드시 연결되어야 한다는 제약을 두지 않음으로써 모델링의 유연성을 확보했습니다. * **확장성 확보:** 대규모 시계열 데이터 세트에서 실시간에 가까운 속도로 회귀 분석을 수행할 수 있어야 합니다. **최적 모델 탐색의 과제** * **탐색 공간의 복잡성:** 시계열을 구간으로 나누는 모든 경우의 수를 계산하는 것은 지수 함수적으로 비용이 증가하며, 동적 계획법(Dynamic Programming)조차 실무에서는 너무 느릴 수 있습니다. * **오차와 단순함의 균형:** 구간이 많아질수록 오차는 줄어들지만 과적합(Overfitting) 위험이 커지며, 구간이 너무 적으면 데이터의 유의미한 변화를 포착하지 못하는 상충 관계를 해결해야 합니다. **그리디(Greedy) 알고리즘 기반의 해결책** * **초기 상태 설정:** 먼저 전체 데이터 포인트($n$)를 $n/2$개의 아주 작은 구간으로 나누어 최소자승법(OLS) 회귀를 수행합니다. 이 단계는 오차는 거의 없지만 극도로 과적합된 상태에서 시작합니다. * **반복적 병합:** 인접한 두 구간을 하나로 합쳤을 때 전체 오차 증가량이 가장 적은 쌍을 찾아 하나로 병합합니다. 이 과정을 데이터가 단 하나의 구간이 될 때까지 반복합니다. * **상태 저장:** 병합 과정 중 특정 '중단 기준'을 만족하기 직전의 상태들을 기록해 두었다가, 최종적으로 가장 적절하다고 판단되는 시점의 모델을 선택합니다. **중단 기준(Stopping Criteria) 및 최적화** * **상대적 오차 증가량 감시:** 현재 병합으로 인한 오차 증가량이 이전의 어떤 병합보다도 클 때를 잠재적인 중단 시점으로 고려합니다. * **3% 임계값 적용:** 데이터가 원래 하나의 직선에 가까운 경우 너무 일찍 병합을 멈추는 것을 방지하기 위해, 병합으로 인한 오차 증가가 전체 단일 회귀 오차의 3% 미만일 때는 병합을 계속 진행하도록 설계되었습니다. * **최종 모델 선택:** 위 기준들을 바탕으로 급격한 오차 상승이 발생하기 직전, 즉 데이터의 특징을 가장 잘 설명하면서도 일반화된 상태의 구간 구조를 최종 결과물로 반환합니다. 이러한 탐욕적 병합 방식은 계산 복잡도를 낮추면서도 실무에서 신뢰할 수 있는 수준의 시계열 추세 분석을 제공하며, 특히 데이터의 급격한 변화나 패턴 전환을 자동으로 감지해야 하는 모니터링 시스템에 매우 적합합니다.

data-modelingdynamic-programmingpiecewise-regressiontimeseries-data+4

datadog·2017년 7월 11일·1분 읽기큐레이션 요약

조각별 회귀: 선

제공된 내용에는 기술 블로그 본문이 포함되어 있지 않고, Datadog 웹사이트의 내비게이션과 링크 목록만 대부분 담겨 있습니다. 확인 가능한 핵심은 Datadog이 Gartner의 2026년 Observability Platforms 매직 쿼드런트에서 Leader로 선정되었다는 홍보 문구와, `piecewise-regression`이라는 엔지니어링 글 링크입니다. 따라서 회귀 분석의 원리나 구현 방식 등 기술적 내용은 현재 자료만으로 요약할 수 없습니다. ### 확인 가능한 글의 맥락 - Datadog은 다음과 같은 관측성 영역을 포괄하는 플랫폼으로 소개됩니다. - 인프라 및 컨테이너 모니터링 - 애플리케이션 성능 모니터링(APM) - 로그 및 데이터베이스 모니터링 - 보안 및 클라우드 보안 - RUM, 세션 리플레이, 신서틱 모니터링 - CI/CD와 서비스 관리 - AI 에이전트 및 GPU 모니터링 - 링크 경로에 `engineering/piecewise-regression`이 포함되어 있어, 실제 기술 글의 주제는 **구간별 선형 회귀(piecewise regression)**로 보입니다. - 그러나 제공된 텍스트에는 해당 글의 본문, 알고리즘 설명, 코드, 실험 결과가 포함되어 있지 않습니다. 원문 본문이나 글 전문을 제공하면 구간별 회귀의 개념, 분할점 탐색, 구현 방법, 성능 비교까지 형식에 맞춰 정확히 요약할 수 있습니다.

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

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

figma·2017년 6월 28일·3분 읽기큐레이션 요약

Electron용 BrowserView 소개 | Figma 블

Figma는 Electron에서 원격 웹 앱을 임베드할 때 사용하던 `<webview>`의 성능·안정성 문제를 해결하기 위해 `BrowserView`를 개발했다. `BrowserView`는 DOM 계층이 아닌 운영체제 창 계층에서 웹 콘텐츠를 관리해 Chrome 탭에 가까운 성능과 안정성을 제공한다. 다만 HTML/CSS 기반의 자동 배치와 레이어링을 사용할 수 없어 위치와 겹침을 직접 관리해야 하며, Figma는 이를 데스크톱 앱 2.0에 적용했다. ## Electron과 Figma의 웹 기반 데스크톱 전략 - Figma는 접근성이 뛰어난 웹을 주요 플랫폼으로 선택했다. - 파일 공유가 링크 하나로 가능하다는 점이 큰 장점이다. - 웹 앱의 성능을 네이티브 애플리케이션 수준으로 끌어올리기 위해 다음 기술을 활용했다. - WebGL 기반 캔버스 렌더링 - WebAssembly를 통한 앱 로딩 시간 개선 - 데스크톱 앱에는 웹 기술로 크로스플랫폼 애플리케이션을 만들 수 있는 Electron을 사용했다. - Figma는 Electron의 성능과 버그를 개선하기 위해 Chromium 및 Electron 프로젝트에도 지속적으로 기여했다. ## `<webview>` 기반 임베딩의 한계 - Electron 창에서 원격 웹 앱을 삽입하는 기존 표준 방식은 `<webview>`였다. - `<webview>`는 `<iframe>`과 유사하지만, 콘텐츠를 별도 프로세스에서 렌더링한다. - 일반 iframe보다 성능, 보안, 안정성 측면에서 유리하다. - 그러나 Figma가 실제 사용 과정에서 다음 문제를 겪었다. - 드래그 앤 드롭 같은 기본 기능의 버그 - Chrome에 미치지 못하는 전반적인 성능 - 시간이 지날수록 증가하는 호환성과 안정성 문제 - `<webview>`는 Chromium 내부에서 구현되므로 Electron 측에서 직접 근본 문제를 해결하기 어려웠다. - Chromium을 크게 수정하는 것은 현실적으로 부담이 크기 때문에, Electron 팀과 Figma는 `<webview>`를 우회하는 대안을 선택했다. ## `BrowserView`의 구조와 장점 - `BrowserView`는 웹 콘텐츠를 DOM 계층에 포함하지 않고 운영체제의 창 계층에 배치한다. - 구조적으로 Chrome이 브라우저 탭을 관리하는 방식과 유사하다. - 이 방식의 장점은 다음과 같다. - `<webview>`에 특화된 버그를 상당 부분 피할 수 있다. - Chrome 탭과 동일한 렌더링 경로를 활용해 웹 앱이 Chrome 수준의 속도로 동작한다. - Chrome에서 중요하게 취급되는 창·탭 관련 문제를 더 빠르게 수정할 수 있다. - 결과적으로 Electron 앱 안에서 원격 웹 앱을 더 빠르고 안정적으로 실행할 수 있다. ## 레이아웃과 레이어링의 trade-off - `BrowserView`는 DOM 요소가 아니므로 일반적인 HTML/CSS 레이아웃 기능을 사용할 수 없다. - CSS의 위치 지정 - DOM 기반의 자동 크기 조정 - 요소 간 z-index 및 레이어링 - 애플리케이션이 직접 다음 작업을 처리해야 한다. - 각 `BrowserView`의 위치와 크기 계산 - 여러 뷰의 겹침 순서 관리 - 창 크기 변경에 따른 수동 레이아웃 갱신 - 복잡한 위치 배치나 레이어 구성이 핵심인 애플리케이션에서는 이 제약이 큰 단점이 될 수 있다. - 반면 Figma처럼 구조가 비교적 명확한 앱에서는 전환 작업이 충분히 실용적이었다. ## 출시와 향후 계획 - `BrowserView`는 당시 최신 Electron 베타 버전에 실험적 API로 포함됐다. - Figma는 이를 적용한 Figma Desktop 2.0을 출시했다. - Figma는 Electron과 BrowserView가 아직 완벽하지 않지만 빠르게 발전하고 있다고 평가했다. - 다른 기업과 개발자들도 Electron 개선에 참여하고 있으며, Figma는 더 많은 앱이 BrowserView로 이전하기를 기대했다. 실용적으로는 원격 웹 앱을 Electron에 임베드하면서 `<webview>`의 성능이나 버그가 문제가 된다면 `BrowserView`를 검토할 수 있다. 다만 도입 전 수동 레이아웃과 레이어링 구현 부담, 당시 실험적 API라는 안정성 문제를 함께 평가해야 한다.

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

webassemblyelectronwebglchromium+3

figma·2017년 6월 25일·2분 읽기큐레이션 요약

피그마 가이드 출시 |

Figma는 사용자 요청이 많았던 Guides 기능을 도입해 디자인 요소를 정렬하고 배치할 수 있도록 했다. Guides는 자를 기준으로 빠르게 생성·이동할 수 있으며, 프레임 단위로 관리하거나 픽셀 단위로 조정할 수 있다. Layout Grids보다 간편하게 사용할 수 있는 보조선이라는 점이 핵심이다. ## Guides의 목적과 특징 - Guides는 디자인 요소의 위치를 맞추기 위한 가로·세로 기준선이다. - Layout Grids보다 생성과 조작이 빠르다. - 2017년 출시 당시 6개월 동안 약 100건의 사용자 요청이 접수될 정도로 수요가 높았다. - Figma는 이 기능을 인턴 Shirley Miao와 엔지니어 Kenrick Rilee가 함께 개발했다고 소개한다. ## Guides 표시와 생성 - 메인 메뉴에서 **View → Show rulers**를 선택해 자를 표시한다. - 캔버스 상단의 가로 자 또는 왼쪽의 세로 자 위에 마우스를 올리면 오프셋 값이 표시된다. - 원하는 위치의 자를 클릭하면 해당 위치에 Guide가 생성된다. - 자의 여러 위치를 클릭해 여러 개의 Guides를 한 번에 만들 수 있다. ## Guides 이동과 삭제 - 생성된 Guide는 얇은 빨간 선으로 표시된다. - Guide를 드래그해 다른 오프셋으로 이동할 수 있다. - 삭제하려면 Guide를 선택한 뒤 Delete 키를 누르거나 화면 바깥으로 드래그한다. - 자 보기 기능을 끄면 Guides도 화면에서 사라진다. - 실수로 위치를 변경한 경우 `Command + Z`로 되돌릴 수 있다. - 화살표 키를 사용하면 Guide를 픽셀 단위로 미세 조정할 수 있다. ## 프레임 수준의 Guides - Guide를 프레임 안으로 드래그하면 해당 프레임에 종속된 프레임 수준 Guide가 된다. - 이를 활용하면 전체 캔버스에 Guides가 과도하게 표시되는 것을 줄일 수 있다. - 프레임 수준 Guides는 최상위 프레임에서만 작동한다. - Guides가 포함된 프레임을 다른 프레임 안으로 이동하면 해당 Guides는 사라진다. ## 실용적인 활용 - 자를 켠 뒤 주요 콘텐츠의 좌우 여백이나 상하 정렬 기준을 Guide로 표시하면 배치를 일관되게 유지할 수 있다. - 여러 화면이나 컴포넌트의 공통 정렬선을 빠르게 확인할 때 유용하다. - 세밀한 간격 조정에는 화살표 키와 실행 취소 기능을 함께 활용하는 것이 좋다. - 복잡한 캔버스에서는 프레임 수준 Guides를 사용해 화면별 기준선을 관리하는 것을 추천한다.

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

Figma사용자 인터페이스layout-gridsdesign-editor+1

figma·2017년 6월 19일·3분 읽기큐레이션 요약

Combine이 디자인 벤처 캐피

Combine은 기존 VC처럼 홍보와 사고 리더십을 앞세우기보다, 뛰어난 디자이너가 초기 스타트업에 직접 참여하는 새로운 투자 모델을 제시한다. Facebook과 Airbnb에서 디자인 문화를 구축한 Soleio Cuervo와 Adam Michela는 초기 단계 투자와 디자인 스튜디오를 결합해 소수의 포트폴리오 기업을 깊이 지원하려 한다. 이 모델의 핵심은 자본뿐 아니라 브랜딩, 사용자 조사, 채용 등 제품 성장에 필요한 디자인 역량을 함께 제공하는 데 있다. ## 조용한 출발을 택한 Combine - 2017년 출범한 시드 단계 VC인 Combine은 일반적인 벤처펀드와 달리 대대적인 발표나 Medium 글을 공개하지 않았다. - 창고형 사무실 사진을 올린 몇 개의 암호 같은 트윗만으로 출발했지만, 실리콘밸리의 관련 업계 사람들은 이미 몇 달 전부터 이들의 움직임을 주목하고 있었다. - 창업자들은 “무엇을 할 것인지”보다 “무엇을 해왔는지”로 평판을 쌓아야 한다는 태도를 갖고 있으며, 과도한 자기 홍보를 경계한다. ## Facebook과 Airbnb에서 검증된 두 창업자 - Soleio Cuervo는 Facebook의 두 번째 디자이너로 합류해 초기 디자인 문화와 주요 제품을 만드는 데 기여했다. - Facebook Messenger - Groups - 초기 Facebook Like 버튼 - Adam Michela는 Soleio가 떠난 뒤 Facebook에 합류해 회사 최초의 디자인 시스템을 구축했다. - 이후 Airbnb에서도 디자인 시스템을 만드는 일을 담당했다. - 두 사람은 서로 다른 강점을 보완한다. - Soleio: 감정적이고 사람을 연결하는 역할, 비전과 관계 형성에 강함 - Adam: 조용하고 체계적인 운영자, 실행과 구조화에 강함 - 공통적으로 디자인과 사람에 대한 관심이 크며, 자신의 성과를 과하게 내세우지 않는 성향을 지녔다. ## 투자사와 디자인 스튜디오의 결합 - Combine은 초기 단계 투자사이면서 동시에 포트폴리오 기업을 지원하는 디자인 스튜디오를 지향한다. - 첫 번째 펀드로 1,200만 달러 이상을 조달했다. - 대규모 조직 대신 소수의 뛰어난 디자인 파트너를 채용해 소수의 기업에 집중할 계획이다. - 지원 범위는 단순한 화면 설계를 넘어선다. - 브랜드 전략과 정체성 - 마케팅 - 사용자 조사 - 제품 경험 설계 - 핵심 인재 채용 - 기존의 “서비스를 제공하는 VC” 모델을 극단적으로 확장한 형태로, Andreessen Horowitz처럼 운영 지원을 제공하되 디자인에 훨씬 더 집중하고 포트폴리오 규모는 작게 유지한다. ## 디자인이 스타트업의 경쟁력이 된 배경 - AWS 등으로 소프트웨어를 만드는 비용과 진입장벽이 낮아지면서, 기능 자체만으로는 경쟁 우위를 확보하기 어려워졌다. - 소비자는 수많은 서비스 중에서 선택할 수 있으므로, 기업은 사용자 경험을 통해 차별화하고 장기적인 진입장벽을 만들어야 한다. - 오늘날 사용자가 제품을 이해하지 못하면 자신의 실수라고 생각하기보다 서비스의 문제로 받아들인다. - 따라서 직관적인 인터페이스와 일관된 제품 경험은 부가 요소가 아니라 스타트업의 생존과 성장에 직접 연결되는 핵심 역량이다. ## 실용적인 시사점 - 초기 스타트업은 투자금을 받는 것뿐 아니라 제품·브랜드·채용을 함께 개선할 수 있는 투자자를 선택할 필요가 있다. - 디자인은 시각적 완성도에 국한되지 않고 사용자 조사, 조직 운영, 채용, 마케팅까지 포함하는 사업 전략으로 다뤄야 한다. - 다만 이 모델은 소수 기업에 깊이 관여하는 방식이므로, 모든 스타트업에 적용하기보다는 디자인이 핵심 경쟁력인 초기 기업에 특히 적합하다.

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

Figma디자인 시스템사용자 경험프로덕트 디자인+1

datadog·2017년 6월 15일원문

해커톤 프로젝트: 마인크래프트에서 Datadog 메트릭 보기 (새 탭에서 열림)

Datadog의 엔지니어들은 사내 해커톤을 통해 시스템 모니터링 대시보드를 마인크래프트 게임 내부에서 구현하는 실험적인 프로젝트를 진행했습니다. 파이썬과 Datadog API를 활용해 실시간 인프라 메트릭을 게임 내 블록 형태로 시각화했으며, 이를 통해 온콜(on-call) 업무 중인 엔지니어가 게임을 즐기면서도 시스템 상태를 직관적으로 확인할 수 있는 환경을 구축했습니다. 이 프로젝트는 기술적인 재미와 더불어 대용량 데이터를 게임 환경에 효율적으로 렌더링하기 위한 성능 최적화 과정을 잘 보여줍니다. ### 마인크래프트 제어와 데이터 연동 * 파이썬의 익숙함과 풍부한 라이브러리를 활용하기 위해 `py3minepi`와 Raspberry Juice API를 사용하여 마인크래프트 환경을 제어했습니다. * `mc.setBlock(x, y, z, block_id)`와 같은 간단한 함수 호출을 통해 게임 내 특정 좌표에 블록을 생성하거나 제거하며 시각화의 기초를 마련했습니다. * Datadog 파이썬 라이브러리를 통해 API 및 애플리케이션 키로 인증한 뒤, `Metric.query` 기능을 사용하여 CPU 사용량과 같은 실시간 데이터를 스트리밍했습니다. ### 설정 기반의 대시보드 및 모니터 구현 * 그래프의 위치, 크기, 방향, 색상 및 투명도와 같은 시각적 요소를 코드와 분리하기 위해 YAML 설정 파일을 도입했습니다. * 실시간 데이터를 기반으로 모니터링 상태를 반영하여, 시스템에 경고가 발생하면 빨간색 블록이 켜지고 정상 상태가 되면 초록색으로 돌아오는 시각적 알람 기능을 구현했습니다. * 단순한 그래프를 넘어 여러 메트릭을 동시에 확인할 수 있는 복합 대시보드 레이아웃을 구성하여 게임 내에서도 실제 모니터링 도구와 유사한 경험을 제공했습니다. ### 영속성 관리와 성능 최적화 과제 * **블록 영속성 문제:** 마인크래프트 블록은 한 번 생성되면 계속 유지되므로, 데이터가 갱신될 때마다 이전 블록을 지워주는 '진공(vacuum)' 함수를 작성하여 화면을 정제했습니다. * **대역폭 및 렌더링 최적화:** 웹 기반의 대시보드와 달리 JS나 CSS를 사용할 수 없으므로 데이터를 행 단위로 단순화하여 시각화했습니다. * **캐싱 도입:** 대규모 그래프를 출력할 때 데이터 파이프라인에 과부하가 걸리는 문제를 해결하기 위해, 실제 업무에서 사용하는 것과 유사한 캐싱 메커니즘을 적용하여 성능을 개선했습니다. 이 프로젝트는 엔지니어링의 본질적인 즐거움인 '해킹'을 통해 익숙한 도구를 전혀 새로운 환경에 이식한 사례입니다. 단순히 재미를 넘어 실시간 데이터 처리와 렌더링 최적화라는 기술적 도전을 담고 있으며, 관련 소스 코드는 GitHub에 공개되어 있어 누구나 자신의 메트릭을 마인크래프트 세상에 구현해 볼 수 있습니다.

데이터베이스 설계datadogPythonAPI+3

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

해커톤 프로젝트: 마인크

Datadog이 Gartner의 **2026년 Observability Platforms 매직 쿼드런트에서 리더(Leader)**로 선정되었다는 내용입니다. 다만 제공된 본문에는 선정 근거, 평가 기준, 경쟁사 비교와 같은 상세 내용은 포함되지 않고, Datadog 제품 메뉴와 링크 목록이 대부분을 차지합니다. ### Gartner 매직 쿼드런트 선정 - Datadog은 관측성 플랫폼 분야에서 Gartner가 선정한 리더로 소개됩니다. - 관측성 플랫폼은 인프라, 애플리케이션, 로그, 사용자 경험, 보안 등의 데이터를 통합해 시스템 상태를 파악하는 솔루션을 의미합니다. - 제공된 내용만으로는 Gartner의 구체적인 평가 점수나 리더 선정 사유를 확인할 수 없습니다. ### Datadog의 관측성 제품 범위 - **인프라 모니터링** - 메트릭, 컨테이너, Kubernetes 오토스케일링, 네트워크, 서버리스 모니터링 - 클라우드 비용, 스토리지, GPU 모니터링 - **애플리케이션 성능 관리** - APM, 서비스 모니터링, 지속적 프로파일링 - 동적 계측과 AI 에이전트 관측성 - **로그 및 데이터 관측성** - 로그 관리, 민감 데이터 탐지, 감사 추적 - 데이터베이스, 데이터 스트림, 데이터 품질 및 작업 모니터링 - **디지털 경험** - 브라우저·모바일 RUM - 세션 리플레이, 합성 모니터링, 오류 추적, 제품 분석 - **보안** - 코드 보안, SAST, SCA, 클라우드 보안 - SIEM, 워크로드 보호, 취약점 및 민감 데이터 관리 - **서비스 관리와 자동화** - 이벤트 관리, SLO, 인시던트 대응, 워크플로 자동화 - 서비스 카탈로그와 케이스 관리 - **AI 관련 기능** - AI 에이전트 관측성 - Bits AI 에이전트, 조사 기능, MCP 서버, GPU 모니터링 ### 제공된 글의 한계 - 본문에는 실제 블로그 설명이나 Gartner 평가 내용보다 Datadog 웹사이트의 제품 내비게이션이 주로 포함되어 있습니다. - 따라서 리더 선정의 배경, Datadog의 강점과 약점, Gartner의 평가 방법론은 이 자료만으로 구체적으로 요약하기 어렵습니다. Datadog 도입을 검토한다면 Gartner 선정 사실만으로 판단하기보다, 필요한 기능—예를 들어 로그 비용 관리, OpenTelemetry 호환성, Kubernetes 모니터링, 보안 통합, 데이터 보존 정책—을 기준으로 실제 운영 환경에서 비교 평가하는 것이 좋습니다.

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

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

figma·2017년 6월 8일·3분 읽기큐레이션 요약

디자인 컨퍼런스 Vectors,

Vectors는 기존 기술·디자인 콘퍼런스와 달리 취약성, 무의식적 편견, 다양한 관점 같은 주제를 다루며 이틀 만에 300석이 매진됐다. 주최자 Gabriel Valdivia는 다양성을 특정 집단만의 의제로 한정하지 않고, 기존의 다수 집단도 참여시켜 다른 관점의 가치를 체감하게 해야 한다고 주장한다. 개인의 문화적 배경과 경험은 제품과 디자인에 반영되며, 작은 배려가 새로운 사용자층과 사업적 가치를 만들어낼 수 있다는 것이 글의 결론이다. ### 기존 콘퍼런스와 다른 Vectors의 방향 - Vectors는 샌프란시스코 디자인 위크의 새로운 디자인 콘퍼런스다. - 일반적인 기술 콘퍼런스의 유행하는 비즈니스·마케팅 주제 대신 다음과 같은 내용을 다룬다. - 취약성을 드러내고 활용하는 방법 - 무의식적 편견을 고려한 디자인 - 서로 다른 배경과 관점이 제품에 미치는 영향 - 300장의 티켓이 이틀 만에 판매됐고, 150명이 대기 명단에 오를 만큼 다양성에 대한 수요가 컸다. ### 다양성을 별도의 구호로 내세우지 않은 이유 - 주최자 Gabriel Valdivia와 Julio Martinez는 멕시코계·쿠바계 배경을 바탕으로 다양성에 관한 대화를 시작했다. - 그러나 콘퍼런스 웹사이트에서 ‘다양성’이라는 단어를 전면에 내세우지는 않았다. - 기업의 다양성 프로그램이 종종 여성이나 소수 인종처럼 이미 문제의식이 있는 사람들만 참여하는 구조가 된다는 문제의식 때문이다. - 다양성에 무관심한 백인 남성도 행사에 참여해 자신이 가진 특권으로 다른 관점을 초대하고, 그 가치에 대해 직접 깨닫기를 기대했다. ### 소수자 경험을 디자인 자산으로 보는 관점 - Valdivia는 소수자라는 위치가 차별 때문에 불리할 수 있다는 점을 인정하면서도, 다양한 어려움을 견디며 얻은 회복력과 경험이 강점이 될 수 있다고 말한다. - 그는 이민 후 가족과 함께 자동차 판매점을 청소했고, 이후 웨이터와 콜센터 직원으로도 일했다. - 이런 경험은 업계 권력자들이 접하기 어려운 현실을 이해하게 하며, 사용자 문제를 더 넓은 시야에서 바라보게 만든다. - 단, 이는 차별이나 구조적 불이익을 부정하는 주장이 아니라, 소수자 경험에서 파생되는 능력과 관점에도 주목하자는 의미다. ### 배경과 관점이 제품에 반영되는 방식 - 사람이 만드는 모든 제품에는 제작자의 경험과 관점이 어느 정도 담긴다. - 많은 제품이 백인 남성 중심의 관점을 강하게 반영해 왔으며, 그 관점 자체가 틀렸다는 뜻은 아니지만 다른 사용자 경험이 배제될 수 있다. - 서로 다른 배경의 디자이너가 참여하면 기존 팀이 놓치기 쉬운 요구사항을 자연스럽게 발견할 수 있다. - Valdivia는 과거 스타트업 Automatic에서 스페인어 자막을 제품 영상에 추가한 사례를 들었다. - 구현 자체는 작은 작업이었지만 스페인어 사용자가 제품을 이해하는 데 큰 도움이 됐다. - 이처럼 세부적인 현지화와 접근성 개선이 누적되면 더 넓은 시장과 사용자에게 가치를 제공할 수 있다. ### 실용적인 시사점 디자인 조직은 다양성을 채용 지표나 캠페인 문구에만 머물게 하지 말고, 제품 의사결정 과정에 실제로 반영해야 한다. 특히 팀 외부의 사용자와 다른 배경을 가진 동료를 초기 단계부터 참여시키고, 언어·문화·접근성 차이에서 비롯되는 작은 불편을 점검하는 것이 효과적인 출발점이다.

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

Figma프로덕트 디자인localizationinclusive-design+2

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

Python에서 Protobuf 파싱하기

Datadog이 Gartner의 2026년 Observability Platforms Magic Quadrant에서 Leader로 선정되었다는 내용이 중심입니다. Datadog은 인프라·애플리케이션·로그·보안·디지털 경험·소프트웨어 배포·AI까지 폭넓은 기능을 하나의 관측성 플랫폼으로 제공한다고 소개합니다. 다만 제공된 본문에는 선정 근거와 평가 세부 내용보다 제품 메뉴와 링크 목록이 대부분 포함되어 있습니다. ## Gartner Magic Quadrant 리더 선정 - Datadog이 Gartner의 **Observability Platforms 부문 Leader**로 이름을 올렸다는 발표입니다. - 링크에는 2026년 Gartner Magic Quadrant 보고서 자료로 연결되는 리소스가 포함되어 있습니다. - 제공된 내용만으로는 Gartner가 평가한 구체적인 점수, 경쟁사 비교, 선정 기준은 확인할 수 없습니다. ## 통합 인프라 모니터링 - 인프라 영역에서 다음 기능을 제공합니다. - 호스트 및 인프라 모니터링 - 메트릭 수집·분석 - 컨테이너와 Kubernetes 모니터링 - 네트워크 및 서버리스 모니터링 - 클라우드 비용, 스토리지, GPU 모니터링 - Kubernetes 오토스케일링과 Cloudcraft를 통해 운영 상태뿐 아니라 클라우드 구조와 비용까지 관리할 수 있도록 구성되어 있습니다. ## 애플리케이션 성능 관찰 - 애플리케이션 영역에는 다음 기능이 포함됩니다. - APM(Application Performance Monitoring) - 서비스 간 의존성 및 범용 서비스 모니터링 - 지속적 프로파일링 - 동적 계측 - AI 에이전트 관측성 - 애플리케이션 추적, 성능 병목 분석, 코드 수준 프로파일링을 하나의 플랫폼에서 수행하는 방향을 제시합니다. ## 로그·데이터 관측성과 보안 - 로그 관리, 민감 데이터 탐지, 감사 추적, Observability Pipelines를 제공합니다. - 데이터베이스, 데이터 스트림, 데이터 품질, 배치 작업도 관찰할 수 있습니다. - 보안 영역에서는 다음 기능을 폭넓게 포함합니다. - 코드 보안 및 SAST - 소프트웨어 구성 분석과 취약점 관리 - 클라우드 보안 형상 관리 - Cloud SIEM - 워크로드 및 애플리케이션·API 보호 - 비밀정보 탐지와 컴플라이언스 ## 디지털 경험과 소프트웨어 전달 - 브라우저·모바일 RUM, 세션 리플레이, 신세틱 모니터링으로 사용자 경험을 측정합니다. - 에러 추적, 제품 분석, 실험 기능을 통해 사용자 행동과 애플리케이션 오류를 함께 분석할 수 있습니다. - CI Visibility, 테스트 최적화, 지속적 테스트, 코드 커버리지, 기능 플래그 등 소프트웨어 개발·배포 과정도 관측 대상에 포함합니다. ## AI 기반 운영과 서비스 관리 - Bits AI Agents, Bits Chat, Bits Investigation 등 AI 기반 조사·자동화 기능을 제공합니다. - GPU 모니터링과 AI 에이전트 관측성을 통해 AI 인프라 및 AI 애플리케이션 운영을 지원합니다. - 이벤트 관리, 인시던트 대응, SLO, 워크플로 자동화, 서비스 카탈로그 등의 기능으로 장애 대응과 운영 프로세스를 연결합니다. - 대시보드, 알림, 노트북, 접근 제어, 거버넌스 콘솔을 통해 플랫폼 전반의 운영 관리도 지원합니다. ## 참고할 점 - 제공된 자료에는 제목과 Datadog 제품 카테고리 목록이 주로 담겨 있으며, 본문 기술 내용이나 Gartner 평가의 상세 근거는 포함되어 있지 않습니다. - URL 경로에 `protobuf-parsing-in-python`이 포함되어 있지만, 해당 Python Protocol Buffers 파싱 글의 본문은 제공되지 않아 기술적 내용은 요약할 수 없습니다. 실제로 도입을 검토한다면 Gartner 보고서 원문에서 평가 기준과 경쟁 제품 비교를 확인하고, Datadog의 수집 비용·데이터 보존 정책·기존 OpenTelemetry 및 로그 파이프라인과의 통합성을 함께 검증하는 것이 좋습니다.

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

Pythonserializationprotobufparsing

datadog·2017년 6월 8일원문

Python에서 Protobuf 파싱하기 (새 탭에서 열림)

Datadog은 Kubernetes 메트릭 수집 효율을 높이기 위해 kube-state-metrics의 프로토콜 버퍼(Protobuf) 지원 기능을 도입하고 그 성능을 검증했습니다. 이 글은 텍스트 형식 대비 Protobuf의 효율성을 정량적으로 확인하기 위한 과정과, 특히 파이썬 환경에서 다중 메시지 스트리밍을 처리하는 구체적인 기술적 구현 방법을 다룹니다. 결론적으로 대규모 데이터 통신에서 이진 포맷이 제공하는 속도와 자원 효율성 이점을 실무에 어떻게 적용할 수 있는지에 대한 가이드를 제공합니다. ## 프로토콜 버퍼의 기초와 데이터 직렬화 * 프로토콜 버퍼(Protobuf)는 구조화된 데이터를 빠르고 효율적으로 이진 스트림으로 직렬화하는 방식으로, 머신 간 통신 및 RPC(원격 프로시저 호출)에 최적화되어 있습니다. * 데이터의 구조를 정의하는 `.proto` 파일을 작성한 후, `protoc` 컴파일러를 통해 파이썬 등 다양한 언어에 맞는 소스 코드를 생성하여 사용할 수 있습니다. * 텍스트 기반 형식과 달리 엄격한 타입 정의를 통해 데이터의 일관성을 보장하며, 페이로드 크기를 획기적으로 줄여 HTTP API 성능을 개선합니다. ## 다중 메시지 스트리밍의 기술적 과제 * Protobuf는 자체 구분자(Self-delimiting)가 없는 설계 특성상, 여러 개의 메시지를 하나의 파일이나 소켓 스트림에 연속적으로 담을 때 각 메시지의 경계를 식별하기 어렵습니다. * 이 문제를 해결하기 위해 각 메시지를 직렬화하기 전, 해당 메시지의 크기(Size) 정보를 머리말(Prefix)로 추가하는 방식이 권장됩니다. * Java 구현체는 `parseDelimitedFrom`과 같은 내장 메서드를 통해 이를 지원하지만, 파이썬 표준 라이브러리는 이러한 기능을 기본적으로 제공하지 않아 별도의 구현이 필요합니다. ## 파이썬에서의 Varint 기반 스트리밍 구현 * 메시지 크기를 기록할 때는 작은 정수에 더 적은 바이트를 사용하는 가변 길이 정수 인코딩 방식인 'Varint'를 사용하며, 이는 효율적인 이진 통신을 가능하게 합니다. * 파이썬에서는 `google.protobuf.internal` 패키지에 포함된 내부 함수인 `_VarintBytes`(인코딩용)와 `_DecodeVarint32`(디코딩용)를 활용하여 Java와 호환되는 스트리밍 구조를 만들 수 있습니다. * 직렬화 시에는 메시지의 `ByteSize()`를 측정해 Varint로 먼저 쓰고 데이터를 기록하며, 역직렬화 시에는 버퍼에서 Varint를 읽어 메시지 길이를 파악한 후 해당 바이트만큼 데이터를 추출하여 파싱합니다. 데이터 전송 효율이 중요한 대규모 Kubernetes 모니터링 환경에서는 텍스트 포맷보다 Protobuf를 사용하는 것이 성능상 매우 유리합니다. 특히 파이썬 환경에서 다수의 메트릭을 스트리밍할 때는 표준 라이브러리 내부의 Varint 유틸리티를 활용하여 데이터 경계를 구분함으로써, Java 시스템과 완벽히 호환되면서도 고성능인 데이터 처리 파이프라인을 구축할 것을 권장합니다.

쿠버네티스datadogPythonmetrics+4

figma·2017년 6월 7일·3분 읽기큐레이션 요약

피그마는 웹어

WebAssembly 도입으로 Figma는 애플리케이션 초기화, 디자인 파일 다운로드, 첫 렌더링을 포함한 전체 로드 시간을 약 3배 단축했다. 특히 C++ 기반 코드를 브라우저에서 실행할 때 asm.js보다 전송·파싱·네이티브 코드 변환·캐싱 측면에서 유리했다. 다만 압축 후 다운로드 크기 감소 효과는 작았고, 당시에는 브라우저별 구현 및 캐싱 지원 차이로 적용 범위가 제한됐다. ## WebAssembly의 특징과 asm.js와의 차이 - WebAssembly는 브라우저 실행을 위해 설계된 바이너리 형식의 머신 코드다. - 기존에는 C++ 코드를 asm.js라는 JavaScript 부분집합으로 변환해 실행했다. - 숫자와 포인터만 사용할 수 있으며, 포인터는 숫자 배열의 인덱스로 표현된다. - DOM 조작이나 네트워크 연결 등 브라우저 기능은 JavaScript를 호출해야 한다. - WebAssembly도 asm.js와 동일한 제약과 브라우저 샌드박스를 공유하지만, 실행 형식이 더 효율적이다. - C++처럼 이미 LLVM으로 최적화된 코드는 브라우저가 별도 최적화를 많이 수행하지 않고 네이티브 코드로 변환할 수 있다. ## WebAssembly가 빠른 이유 - **작은 바이너리 형식** - 동일한 코드의 JavaScript보다 네트워크 전송에 유리하다. - 다만 압축하면 asm.js와 WebAssembly의 크기 차이는 크게 줄어든다. - **빠른 파싱** - 사람이 작성하는 JavaScript에는 문법과 중복 정보가 많다. - WebAssembly는 브라우저가 빠르게 해석하도록 설계되어 asm.js보다 약 20배 빠르게 파싱된다. - **효율적인 네이티브 코드 변환** - LLVM이 사전에 C++ 코드를 최적화하므로 브라우저의 런타임 최적화 부담이 작다. - **변환 결과 캐싱** - 브라우저가 WebAssembly 모듈의 네이티브 코드 변환 결과를 쉽게 캐시할 수 있다. - 같은 애플리케이션을 다시 열 때 변환 시간이 거의 사라질 수 있다. - **64비트 정수 지원** - WebAssembly는 64비트 정수를 직접 지원한다. - JavaScript는 정수 정밀도가 53비트로 제한되어 64비트 정수를 에뮬레이션해야 한다. ## Figma에서의 적용과 성능 개선 - Figma는 C++로 작성된 대규모 2D WebGL 렌더링 엔진을 사용한다. - 측정한 로드 시간에는 다음 과정이 모두 포함됐다. - 애플리케이션 초기화 - 디자인 파일 다운로드 - 디자인의 최초 전체 렌더링 - WebAssembly로 전환한 뒤 문서 크기와 관계없이 로드 시간이 3배 이상 개선됐다. - 큰 디자인 문서를 자주 만들고 전환하는 Figma 사용자에게 특히 큰 효과가 있었다. - 앱을 한 번 실행한 뒤에는 WebAssembly의 네이티브 변환 결과가 캐시되므로, 이후 로드 시간은 애플리케이션 코드 크기에 덜 영향을 받는다. ## 다운로드 크기와 실제 개선의 차이 - WebAssembly로 전환하면 전송 크기도 크게 줄어들 것으로 예상했지만 실제 감소 폭은 작았다. - asm.js 코드도 압축하면 WebAssembly와 비슷한 크기까지 줄어들기 때문이다. - 따라서 Figma에서 가장 큰 이점은 파일 크기 감소가 아니라 파싱, 코드 변환, 캐싱에 따른 실행 및 로드 시간 단축이었다. ## 브라우저 지원의 한계 - 당시 WebAssembly는 Firefox와 Chrome에서 기본 활성화되어 있었다. - Edge와 Safari는 아직 구현 중이어서 브라우저별 지원 상황을 확인해야 했다. - Figma는 Chrome에서도 WebAssembly를 사용할 수 있었지만, 구현상의 문제 때문에 실제로는 Firefox에서만 활성화했다. - 특히 Chrome의 네이티브 변환 코드 캐싱 방식이 Firefox와 달라 페이지를 열 때마다 애플리케이션 전체를 다시 변환해야 하는 문제가 있었다. WebAssembly는 대규모 C/C++ 코드베이스를 웹으로 옮길 때 특히 효과적이다. 단순히 다운로드 용량을 줄이는 기술이라기보다, 빠른 파싱과 네이티브 코드 변환, 실행 결과 캐싱을 통해 초기 로드 시간을 줄이는 기술로 보는 것이 적절하다.

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

JavaScriptwebassemblywebglc-plus-plus+3

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

한 디자이너가 내

Pivotal의 디자이너와 개발자 간 인수인계는 디자인 파일을 이미지로 내보내고 프로젝트 카드에 반복 업로드하는 방식이라 비효율과 오류가 많았다. Figma를 도입한 뒤에는 최신 디자인을 링크 하나로 공유하고 디자인 위에 직접 댓글을 남길 수 있어, Colby는 프로젝트마다 약 이틀의 문서 관리 시간을 절약했다. 또한 맥락이 포함된 실시간 리뷰가 가능해져 협업과 결과물의 품질에도 긍정적인 영향을 주었다. ### 반복적인 이미지 내보내기와 업로드의 문제 - Colby는 디자인 프레임을 이미지로 export한 뒤 Pivotal Tracker의 개발 카드에 업로드했다. - 프로젝트마다 이 작업을 15~20회 반복해야 했다. - 프로젝트 하나에 수백 개의 카드가 있어 최신 카드를 찾는 데도 많은 시간이 들었다. - 이미지를 업데이트하지 않고 잊어버리면 개발자가 오래된 디자인을 기준으로 작업할 수 있었다. - 이 과정은 디자이너뿐 아니라 개발자의 시간도 낭비하고, 잘못된 구현으로 이어질 위험이 있었다. ### 브라우저 기반 디자인 공유 - Figma 파일은 브라우저에서 관리되므로 별도 프로그램 설치 없이 접근할 수 있었다. - 링크를 공유하면 모든 협업자가 동일한 최신 파일을 확인할 수 있었다. - 디자인이 변경되어도 개발 카드를 매번 이미지로 갱신할 필요가 없었다. - Colby는 카드를 처음 만들 때 Figma 링크만 추가하면 되었고, 프로젝트마다 약 이틀의 작업 시간을 절약했다. - Figma는 단순한 디자인 제작 도구를 넘어 파일 공유와 변경 관리까지 지원하는 “디자인 관리 도구”로 활용되었다. ### 디자인 위에 남기는 맥락 있는 댓글 - 기존 디자인 리뷰에서는 엔지니어들이 포스트잇에 의견을 적고 차례로 구두 공유했다. - 포스트잇은 어떤 디자인 요소에 대한 의견인지 맥락이 분리되어 이해하기 어려웠다. - Figma에서는 댓글을 특정 프레임이나 디자인 영역에 직접 연결할 수 있었다. - 리뷰 참여자는 의견이 적용되는 위치를 즉시 확인할 수 있어 피드백이 더 명확해졌다. - 결과적으로 주간 디자인 리뷰가 더 짧고 효율적으로 진행되었다. ### 실시간 협업과 리뷰 조정 - 엔지니어가 파일을 검토하는 동안 Colby는 각자의 커서와 활동을 실시간으로 확인할 수 있었다. - 특정 컴포넌트처럼 이미 스타일 가이드로 정해진 부분에 리뷰가 집중되면, Colby가 피드백 방향을 조정할 수 있었다. - 리뷰를 받는 디자이너가 어떤 영역에 피드백을 원하는지 직접 안내할 수 있었다. - 디자이너와 개발자가 같은 파일을 보며 의견을 주고받아 정보 전달의 누락을 줄였다. ### 협업 품질 향상 - Figma는 디자인에서 개발로 넘어가는 인수인계 과정의 반복적인 관리 작업을 줄였다. - 팀은 파일 버전과 피드백을 추적하는 데 쓰던 시간을 제품의 완성도에 더 투자할 수 있었다. - Pivotal은 개발자와 디자이너를 포함한 다양한 구성원의 의견이 더 나은 제품을 만든다고 보았고, Figma가 이를 지원한다고 평가했다. 실무에서는 디자인 파일을 이미지로 복사해 전달하기보다 최신 원본 링크를 단일 기준으로 삼고, 피드백은 해당 디자인 요소에 직접 남기는 방식이 효과적이다. 이를 위해 프로젝트 관리 카드에 Figma 링크와 버전 규칙을 명확히 기록하면 오래된 시안으로 작업하는 문제를 줄일 수 있다.

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

Figma디자인 시스템사용자 인터페이스design-collaboration+2

figma·2017년 5월 25일원문

워크플로에서 컨스트레인 (새 탭에서 열림)

Figma의 '제약 사항(Constraints)' 기능은 다양한 화면 크기에 대응해야 하는 현대 디자이너들의 작업을 효율적으로 만들어주는 강력한 도구입니다. 이 기능을 활용하면 요소가 상위 프레임의 크기 변화에 따라 어떻게 반응할지 정의할 수 있어, 반복적인 수작업 없이도 유연한 반응형 디자인을 완성할 수 있습니다. 결과적으로 디자이너는 한 번의 설계로 PC부터 모바일까지 모든 해상도에서 의도한 레이아웃을 유지하는 견고한 인터페이스를 구축할 수 있습니다. **버튼의 고정 위치 설정** * 모바일 UI에서 자주 쓰이는 '플로팅 액션 버튼(FAB)'과 같은 요소를 프레임의 특정 위치에 고정할 수 있습니다. * 제약 사항을 'Bottom'과 'Right'로 설정하면 화면 크기가 늘어나거나 줄어들더라도 버튼이 지정된 구석 위치를 이탈하지 않고 유지됩니다. **컴포넌트와 제약 사항의 결합** * Figma의 컴포넌트(반복되는 디자인 단위) 기능과 제약 사항을 함께 사용하면 디자인 시스템 운영 효율이 극대화됩니다. * 주요 요소에 제약 사항을 설정한 뒤 이를 컴포넌트로 만들고 다양한 기기 크기의 프레임에 복제하면, 원본의 색상이나 텍스트 스타일을 한 번만 수정해도 모든 해상도의 인스턴스에 즉시 반영됩니다. **그리드와 연동한 반응형 레이아웃** * 제약 사항을 'Stretch(늘리기)' 타입의 레이아웃 그리드와 결합하면 하단 내비게이션 바와 같은 복잡한 요소도 정교하게 제어할 수 있습니다. * 내비게이션 바 프레임에 'Left & Right' 및 'Bottom' 제약을 설정하고, 각 아이콘을 그리드 열 내부에 배치한 뒤 'Center'로 설정하면 화면 너비 변화에 맞춰 아이콘 간격이 자동으로 균등하게 조절됩니다. **유연한 테이블 셀 설계** * 텍스트와 아바타가 포함된 그룹은 'Center-Left'로, 우측의 버튼 그룹은 'Center-Right'로 제약 사항을 다르게 부여하여 테이블 셀을 구성합니다. * 이렇게 설계된 셀은 프레임 너비가 어떻게 변하든 각 정보가 좌우 끝단에 밀착되어 정돈된 형태를 유지하므로, 정보 밀도가 높은 목록형 UI를 설계할 때 매우 유용합니다. **일러스트레이션의 창의적 활용** * 제약 사항은 UI 요소뿐만 아니라 일러스트레이션이나 드로잉에도 적용하여 재미있는 시각 효과를 줄 수 있습니다. * 수평 또는 수직 제약을 활용해 이미지를 의도적으로 늘리거나 줄임으로써, 프레임 크기 변화에 따라 캐릭터의 형태가 변하는 위트 있는 디자인을 연출할 수 있습니다. 효율적인 워크플로우를 위해 단순히 요소를 배치하는 것에 그치지 말고, 초기 설계 단계부터 제약 사항을 고려하는 습관을 들이는 것이 좋습니다. 특히 컴포넌트와 레이아웃 그리드를 제약 사항과 유기적으로 연결하여 사용한다면, 복잡한 디자인 시스템도 훨씬 유연하고 일관성 있게 관리할 수 있습니다.

Figma사용자 인터페이스반응형 디자인components+3

figma·2017년 5월 21일·2분 읽기큐레이션 요약

Braintree가 디자인 크리틱 시간을

Braintree는 정적인 디자인 리뷰를 실시간 공동 작업으로 바꾸면서 디자인 크리틱에 드는 시간을 약 50% 줄였다. 디자이너들이 같은 파일에서 직접 수정하고 아이디어를 발전시키자 피드백 오해와 반복 회의가 감소했으며, 개발자와의 핸드오프도 링크 하나로 단순해졌다. ## 기존 디자인 크리틱의 비효율 - 디자이너가 작업물을 발표하고, 여러 리뷰어에게 한꺼번에 피드백을 받는 방식이었다. - 디자이너는 회의 후 혼자 피드백을 적용해야 했고, 리뷰어의 의도를 정확히 이해하지 못하는 경우가 많았다. - 수정본을 다시 검토하는 회의에서 문제가 재발견되거나 새로운 문제가 생겨 반복 작업이 발생했다. - PayPal의 Braintree 인수 이후 여러 디자인 팀, 서로 다른 스타일 가이드, 다양한 서비스와 개발 팀이 얽히며 커뮤니케이션 복잡성이 커졌다. ## Figma 도입과 실시간 리뷰 - Braintree의 Developer Experience 디자인 팀은 새로운 피드백 방식을 시험하며 Figma를 도입했다. - 디자이너들은 대면 회의 대신 Slack 음성 통화와 Figma 파일을 함께 사용했다. - 브라우저 링크로 같은 파일에 접속하고, 관찰 모드로 상대방의 화면과 작업 위치를 실시간으로 확인했다. - 별도의 운영체제나 설치 환경에 크게 구애받지 않고 온라인에서 협업할 수 있다는 점도 장점으로 작용했다. ## 정적 리뷰에서 창의적 공동 작업으로 - 리뷰어는 말로 설명하는 대신 디자이너의 아트보드를 복제하고 직접 수정해 의도를 보여줄 수 있었다. - 피드백을 메모한 뒤 나중에 해석하고 적용할 필요가 줄어들었다. - 두 디자이너가 같은 파일에서 각자의 시안을 발전시키고, 서로의 작업을 참고하며 아이디어를 조합했다. - 여러 시안의 장점을 결합한 새로운 버전을 즉석에서 만들 수 있었다. - Craig은 이 방식으로 디자인 크리틱 시간이 약 50% 감소했다고 추정했다. ## 개발자 핸드오프 간소화 - 기존에는 디자인 변경 때마다 파일을 다시 내보내고, 개발자에게 수많은 메시지를 보내야 했다. - Figma 링크 하나를 공유하면 디자이너와 개발자가 최신 디자인을 함께 확인할 수 있었다. - 특정 버튼이나 기능의 동작을 질문받으면, 디자이너가 파일 안에서 직접 복제·수정하며 설명할 수 있었다. - 디자인의 동작 방식을 설명하기 위한 별도 회의와 반복적인 파일 전달이 줄어들었다. ## 실용적인 적용 방법 - 디자인 리뷰를 발표와 질의응답에만 한정하지 말고, 공동 편집 세션으로 운영한다. - 피드백은 말이나 문서로만 전달하지 말고, 가능한 경우 리뷰어가 직접 시안을 수정해 보여주게 한다. - 디자이너와 개발자가 동일한 최신 파일을 기준으로 대화하도록 공유 링크와 실시간 협업 도구를 활용한다. - 팀 규모가 커질수록 정기 회의보다 실시간 작업 공간을 중심으로 커뮤니케이션 구조를 설계하는 것이 효과적이다.

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

Figma사용자 경험slackreal-time-collaboration+2