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

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

작지만 큰 업데이트: 디자인

Figma는 디자인·협업 과정의 작은 불편을 줄이기 위해 2022년 8월 20개 이상의 업데이트를 공개했다. Figma와 FigJam의 편집 기능을 다듬고, 단축키·탐색·모바일 사용성·커뮤니티 검색을 개선해 작업 흐름을 더 빠르고 자연스럽게 만드는 데 초점을 맞췄다. 이러한 개선은 완전히 새로운 기능보다 반복 작업과 협업 중 발생하는 마찰을 줄이는 데 의미가 있다. ## Figma 디자인 편집 기능 개선 - 연필로 작성한 주석이 잘리거나 프레임의 오토 레이아웃을 방해하지 않도록 개선했다. - 그라디언트 스톱을 더블클릭하면 스톱 사이의 간격을 균등하게 배치할 수 있다. - 최상위 프레임을 선택한 상태에서 이후에 등록된 최상위 프레임도 연속해서 선택할 수 있다. - 객체를 그룹화하고 정렬한 뒤 다시 해제하는 과정 없이, `Shift` 키를 누른 채 정렬 버튼을 사용하면 임시 그룹처럼 객체를 정렬할 수 있다. - 텍스트 노드 사이에 붙여넣을 때 글머리 기호와 텍스트 스타일 등 기존 서식을 유지한다. - 텍스트 상자 내부에서 작업할 때도 텍스트 정렬 단축키를 사용할 수 있다. - 댓글의 링크를 클릭할 때 중간 안내 화면 없이 바로 링크로 이동한다. ## FigJam 도형과 다이어그램 작업 개선 - 도형과 스티키 주변의 위·아래·왼쪽·오른쪽에 표시되는 자동 생성 프롬프트를 이용해 빠르게 요소를 추가할 수 있다. - Connector 도구의 `X` 모드가 기본적으로 유지되어 다이어그램 작업을 연속해서 진행할 수 있다. `Esc` 또는 `V`를 누르면 Move 도구로 돌아간다. - 새로운 가이드라인을 통해 도형의 너비와 높이를 다른 도형과 동일하게 맞출 수 있다. - 스티키에 붙은 스탬프 위에 마우스를 올리면 누가 추가했는지 확인할 수 있다. - 스티커를 마우스 오른쪽 버튼으로 클릭하면 해당 스티커가 속한 상위 라이브러리로 이동할 수 있다. - 이미지 채우기를 복사·붙여넣기로 빠르게 교체할 수 있다. - 객체가 중앙 정렬된 것처럼 보이면 커넥터가 자동으로 직선화되어 비뚤어진 연결선을 줄인다. ## 데스크톱·모바일 앱 기능 - 데스크톱 앱의 메뉴 막대에 알림 벨이 추가되어 앱을 사용하는 중에도 알림을 확인할 수 있다. 해당 기능은 최신 베타 앱에서 제공된다. - iPad용 FigJam 앱에서 Apple Pencil의 반응성을 개선했다. - iPad에서 다음 제스처로 실행 취소·다시 실행을 빠르게 사용할 수 있다. - 두 손가락 탭: 실행 취소 - 세 손가락 탭: 다시 실행 - 세 손가락 좌우 스와이프: 실행 취소·다시 실행 - iPad 앱에서도 Observation mode와 Spotlight를 이용해 다른 사용자의 작업을 관찰하거나 협업할 수 있다. ## 검색·탐색과 협업 개선 - 검색 미리보기에 최근 검색 기록이 표시된다. - 파일 목록 보기에서 파일 소유자를 확인할 수 있다. - 키보드의 위·아래 방향키와 이름 입력을 이용해 파일의 모든 협업자를 더 빠르게 탐색할 수 있다. - 댓글 모달 안에서 `Tab`과 `Shift + Tab`으로 항목을 이동할 수 있다. ## Figma Community 개편 - Figma Community의 화면을 새롭게 디자인했다. - 콘텐츠를 더 쉽게 찾을 수 있도록 카테고리와 검색 필터를 개선했다. 이번 업데이트는 대규모 기능 추가보다는 편집, 탐색, 협업에서 반복적으로 발생하는 작은 불편을 줄이는 데 초점이 있다. 따라서 Figma와 FigJam을 자주 사용하는 팀이라면 단축키, 임시 정렬, 자동 커넥터, iPad 제스처 같은 기능을 익혀 작업 시간을 줄이는 것이 유용하다.

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

Figmafigjamcollaborative-designauto-layout+2

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

Figma의 새로운 소식:

2022년 7월 Figma는 협업 연구 결과를 공개하고, 일본 시장 현지화를 완료했으며, Figma Community의 리소스 탐색 기능을 개선했다. 이번 업데이트의 중심에는 팀 협업을 강화하고 전 세계 사용자가 Figma 생태계의 자료를 더 쉽게 찾도록 지원하려는 방향이 있다. ## 협업 성과를 높이는 다섯 가지 행동 - 100개 이상의 디자이너, PM, 엔지니어, 리서처, 라이터 팀을 대상으로 협업 방식을 조사했다. - 연구 보고서 **“What Makes Collaboration Click?”**을 발표했다. - 제품 성과를 높이는 핵심 행동으로 다음 다섯 가지를 제시했다. - 공동 창작(Co-creation) - 신뢰와 유대감 형성(Rapport) - 역할 명확화(Role clarity) - 피드백(Feedback) - 회고와 성찰(Reflection) - 전체 연구 결과는 별도 보고서와 라이브스트림을 통해 공유하도록 했다. ## 일본 시장 현지화와 지역 지원 강화 - Figma 제품 인터페이스 전체를 일본어로 번역하고 현지화했다. - 웹사이트와 도움말 센터도 일본어를 지원하도록 개편했다. - 일본 사용자와 Figma Community를 지원하기 위해 도쿄 사무소를 개설하고 현지 리더십을 채용했다. - 미국 외 지역 사용자가 전체 사용자의 약 80%를 차지하는 만큼, 글로벌 디자인 커뮤니티와의 연결을 강화하려는 전략이다. - 일본 관련 업데이트는 별도 공식 계정인 **@FigmaJapan**을 통해 제공한다. ## Figma Community 탐색 경험 개선 - 수천 개의 리소스 중 원하는 자료를 찾기 어렵다는 문제를 해결하기 위해 탐색 화면을 개편했다. - 리소스를 다음과 같은 유형으로 구분해 살펴볼 수 있도록 했다. - 위젯 - 파일 - 템플릿 - 플러그인 - 랜딩 페이지를 새롭게 구성해 다음 범주를 구분하고 발견하기 쉽게 만들었다. - 제품: Figma 또는 FigJam - 사용 사례: 디자인 시스템 등 - 리소스: 위젯, 플러그인 등 - 검색 기능에 필터와 정렬 옵션을 추가했다. - 검색 결과를 다음 기준으로 정렬할 수 있다. - 인기 급상승(Trending) - 가장 인기 있음(Most popular) - 최신순(Most recent) - 매일 추가되는 파일, 플러그인, 위젯을 더 빠르게 발견할 수 있고, 제작자가 만든 콘텐츠의 노출 가능성도 높아졌다. Figma의 7월 업데이트는 단순한 기능 추가보다 **협업 방식에 대한 연구, 지역별 지원, 커뮤니티 검색성 개선**에 초점을 맞췄다. 팀은 협업 행동을 점검하고, 일본 사용자는 현지화된 제품과 지원 채널을 활용하며, 모든 사용자는 개선된 Community 검색과 정렬 기능을 이용하면 된다.

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

Figma디자인 시스템figjamcollaborative-design+2

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

다크 모드 밝히

Figma의 다크 모드는 색상만 어둡게 바꾸는 단순한 프런트엔드 작업이 아니라, 제품 전반의 UI 상태와 접근성, 향후 테마 확장성을 함께 해결해야 하는 시스템 구축 프로젝트였다. Figma는 사용자 요청에 대응하는 동시에 시각적 접근성을 높이고, 새로운 기능이 처음부터 다크 모드를 지원하도록 만드는 것을 목표로 했다. 이를 위해 전체 UI를 조사하고 여러 팀의 공통 컴포넌트를 체계적으로 refactoring하는 방식을 택했다. ## 다크 모드가 필요했던 이유 - 다크 모드는 Figma 사용자들이 가장 많이 요청한 기능 중 하나였다. - 야간 작업 시 밝은 화면으로 인한 불편을 줄일 수 있었다. - 시각 장애나 특정 시각적 질환이 있는 사용자에게 다크 모드가 더 읽기 쉬울 수 있었다. - 색상 대비는 WCAG 접근성 지침의 핵심 요소이므로, 다크 모드는 Figma의 “디자인을 모두에게 accessible하게 만든다”는 목표와도 연결됐다. - 일반적으로는 라이트 모드가 시각적 수행 능력에 유리하지만, 백내장 등 특정 질환이 있는 사람은 다크 모드에서 더 나은 성능을 보일 수 있다. ## 단순한 색상 교체가 아니었던 이유 - 처음에는 모든 밝은 색을 어두운 색으로 바꾸면 된다고 생각했지만, 실제로는 UI의 상태와 맥락을 함께 고려해야 했다. - 다크 모드 전환 시 다음 요소를 결정해야 했다. - 밝은 편집기 패널을 어둡게 바꾸고 아이콘과 텍스트를 밝게 할지 - 라이트 모드에서도 이미 어두운 툴바와 메뉴를 그대로 유지할지 - 캔버스 배경처럼 사용자가 만든 콘텐츠까지 테마에 따라 변경할지 - C++ 렌더링 엔진이 그리는 투명도 격자 등의 색상도 변경할지 - Figma 전체가 아니라 편집기 등 특정 영역만 지원할지에 대한 제품 범위 결정도 필요했다. ## 전체 UI 감사와 범위 설정 - 개발에 앞서 각 팀원이 Figma 앱의 UI 표면을 조사하고, 다크 모드로 재구성하기 어려운 부분을 파악했다. - 프로젝트 시작 당시 Figma에는 10개의 제품 엔지니어링 팀이 있었고, 각 팀이 모달, 패널, 툴바 등 주요 UI 영역을 담당했다. - 하나의 UI 요소도 여러 상태와 복잡한 예외 상황을 포함할 수 있었다. - 특정 조건에서만 나타나는 상태 - 여러 뷰와 화면 - 숨겨진 서브모달과 드롭다운 - 따라서 표면적으로 보이는 화면뿐 아니라 모든 상태와 엣지 케이스까지 다크 모드 범위에 포함해야 했다. ## 확장 가능한 테마 시스템의 목표 - 목표는 현재 다크 모드만 구현하는 것이 아니었다. - 두 가지 장기 목표를 세웠다. - 개발자가 새로운 기능을 다크 모드 지원과 함께 바로 만들 수 있도록 하기 - 향후 Figma와 FigJam에 새로운 테마를 쉽게 추가할 수 있도록 하기 - 공통 UI 컴포넌트는 다크 모드를 지원해야 하지만, 다크 모드가 적용되지 않는 화면에서는 기존 동작과 외관을 유지해야 했다. - 구현 과정에서 기존 기능을 깨뜨리지 않는 회귀 방지(regression-proof) 구조가 중요했다. - 새로운 엔지니어의 온보딩과 향후 예측하지 못한 요구사항 대응까지 고려해, 적용과 유지보수가 쉬운 방식이 필요했다. ## 프로젝트 규모가 만든 엔지니어링 과제 - Figma의 UI가 여러 팀에 분산되어 있어 소수의 엔지니어만으로 전체를 처리하기 어려웠다. - 각 팀이 소유한 컴포넌트와 화면을 공통 원칙에 맞게 바꿔야 했다. - 단순히 색상 값을 교체하는 것이 아니라, 컴포넌트가 어떤 표면과 상태에서 사용되는지까지 체계적으로 분리해야 했다. - 이 경험은 개별 기능을 추가하는 방식보다, 제품 전체에서 재사용할 수 있는 디자인·엔지니어링 시스템을 구축하는 접근이 필요하다는 점을 보여준다. 다크 모드처럼 겉보기에는 간단한 기능도 실제로는 UI 상태, 접근성, 팀 간 소유권, 공통 컴포넌트, 향후 확장성을 함께 설계해야 한다. 유사한 기능을 구현할 때는 특정 화면의 색상부터 바꾸기보다 전체 범위를 먼저 감사하고, 테마 토큰과 공통 컴포넌트를 중심으로 회귀를 방지할 수 있는 구조를 마련하는 것이 바람직하다.

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

디자인 시스템사용자 인터페이스접근성wcag+2

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

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

미국 노동통계국(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의 디자인 방법론 확산 등은 비디자이너도 문제 해결 과정에 참여하게 만들었다. - 이런 접근은 디자인 업무에 대한 조직 내 저항을 줄이고, 제품·마케팅·개발·경영진 간 협업을 촉진했다. - 결과적으로 디자이너는 화면을 만드는 역할을 넘어 문제를 정의하고, 사용자 행동을 이해하며, 사업 방향에 영향을 주는 역할로 확대되고 있다. 디지털 디자인은 더 이상 부수적인 제작 업무가 아니라 제품 경쟁력과 고객 유지율을 좌우하는 핵심 기능이다. 기업은 디자이너 채용뿐 아니라 전 구성원의 디자인 리터러시와 빠른 협업 체계를 함께 강화하는 것이 바람직하다.

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

Figma사용자 경험웹 개발design-thinking+1

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

Figma의 새로운 소식

Figma의 2022년 6월 업데이트는 디자인 협업과 확장성을 강화하는 데 초점을 맞췄다. 여러 사용자가 캔버스에서 함께 조작할 수 있는 위젯을 도입하고, 플러그인·위젯 탐색과 설치 과정을 간소화했다. 또한 개발자용 API 문서를 개선하고 Google과 협력해 학생들이 Chromebook에서 Figma와 FigJam을 사용할 수 있도록 접근성을 넓혔다. ## 여러 사람이 함께 사용하는 Figma 위젯 - 위젯은 Figma 캔버스에 배치되는 대화형 객체다. - 한 사용자가 단독으로 자동화하는 플러그인과 달리, 팀원 모두가 캔버스에서 동시에 상호작용할 수 있다. - 투표, 작업 관리, 타이머, 주석, 상태 표시 등 협업 중심의 기능을 구현할 수 있다. - 대표적인 위젯 사례: - **Asana**: Figma를 떠나지 않고 팀 작업을 논의하고 후속 작업을 Asana에 등록 - **Jira**: 디자인 화면에서 바로 개발 작업 생성 - **RAG Status**: 디자인 상태를 빨강·노랑·초록으로 표시 - **Navigate**: 내비게이션 버튼으로 이해관계자를 디자인 화면의 주요 영역으로 안내 ## 확장 기능을 더 쉽게 찾고 설치하기 - 기존에는 신규 사용자가 Figma의 플러그인과 Community 리소스를 찾기 어려웠다. - 업데이트 이후 Figma 툴바에서 플러그인과 위젯을 직접 검색하고 설치할 수 있게 됐다. - Figma Community에서 확장 기능을 시험해보는 방식도 개선됐다. - 결과적으로 사용자와 확장 기능 개발자 사이의 접근성이 높아지고, Figma 생태계 활용이 쉬워졌다. ## 새롭게 개편된 API 문서 - Figma 플랫폼 위에서 플러그인과 연동 도구를 개발하기 쉽도록 개발자 문서를 전면 개선했다. - 주요 변경 사항: - 새로운 탐색 구조 - 리소스 분류 및 구성 개선 - 복사할 수 있는 코드 블록 - 새로운 코드 예제와 단계별 가이드 - 문서 탐색 시간을 줄이고, 개발자가 실제 API 사용법을 빠르게 이해하도록 돕는 데 목적이 있다. ## Chromebook을 통한 교육 접근성 확대 - Figma는 Google for Education과 협력해 Chromebook에서 Figma와 FigJam을 사용할 수 있도록 했다. - Chromebook은 학생들이 널리 사용하는 기기이므로, 별도 고성능 장비 없이도 디자인과 협업 학습이 가능해진다. - 학교 구역은 Google Admin Console에서 Figma Organization 라이선스를 배포하고 관리할 수 있다. - 미국의 수천만 명 학생이 산업 표준 디자인 도구를 접할 수 있도록 무료 제공을 추진했으며, 학교는 베타 프로그램에 신청할 수 있게 됐다. Figma는 이번 업데이트를 통해 단순한 디자인 편집기를 넘어, 협업 위젯·개발자 생태계·교육 인프라가 결합된 확장 가능한 플랫폼으로 발전하려는 방향을 보여준다. 팀 작업에서는 위젯을 활용하고, 자동화나 연동이 필요하다면 개선된 API 문서와 Community 확장 기능을 함께 검토하는 것이 실용적이다.

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

FigmafigjamAPIplugins+4

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

피그마가 스프링

Figma는 베지어 곡선 대신 물리 법칙을 기반으로 한 스프링 애니메이션을 도입해 더 자연스럽고 직관적인 움직임을 구현했다. 질량, 강성, 감쇠라는 물리적 매개변수로 움직임을 계산하면 오버슈트와 감속을 자연스럽게 표현할 수 있다. 다만 디자이너가 물리 상수를 직접 조정하기는 어렵기 때문에, 실제 제품에서는 이 값을 UI 속도·탄성·오버슈트 같은 직관적인 개념으로 다루는 것이 중요하다. ## 스프링 애니메이션이 필요한 이유 - 기존 Figma의 주요 방식은 베지어 애니메이션이었다. - 베지어 곡선은 시작과 종료 시점의 움직임을 세밀하게 지정할 수 있지만 다음 문제가 발생할 수 있다. - 물체가 갑자기 가속하는 것처럼 보임 - 이동 방향이 부자연스럽게 바뀜 - 속도가 아무 이유 없이 증가하는 느낌을 줌 - 정지 시점이 어색해짐 - 스프링 애니메이션은 이동 경로를 직접 그리는 대신, 물리적 속성을 지정하고 그 결과로 움직임을 계산한다. - 이를 통해 다음과 같은 자연스러운 효과를 만들 수 있다. - 무게감 있는 UI 요소의 움직임 - 적절한 오버슈트가 있는 팝업 - 부드럽게 감속하는 화면 전환 - FigJam의 이모트나 하이파이브처럼 생동감 있는 인터랙션 ## 질량·강성·감쇠로 움직임 정의하기 스프링 애니메이션은 세 가지 주요 변수로 구성된다. - **질량(Mass, m)** - 물체가 무거울수록 같은 힘으로 가속하기 어렵다. - 뉴턴의 운동 법칙으로 `F = m × a`로 표현된다. - 질량을 높이면 일반적으로 애니메이션이 더 느리고 묵직해진다. - **강성(Stiffness, k)** - 스프링이 원래 위치로 돌아가려는 힘의 정도다. - 스프링을 많이 당길수록 더 강하게 저항한다. - 훅의 법칙은 `F = -k × x`로 표현된다. - 강성이 높으면 목표 위치로 빠르게 복귀하고, 움직임이 더 민첩해진다. - **감쇠(Damping, b)** - 마찰처럼 움직임을 줄여 물체가 멈추도록 만드는 저항이다. - 속도가 빠를수록 더 큰 저항을 받으며 `F = -b × v`로 표현된다. - 감쇠가 높으면 흔들림과 오버슈트가 줄어들고 더 차분하게 멈춘다. - 세 변수의 조합에 따라 애니메이션은 부드럽거나, 빠르거나, 튀거나, 느린 형태로 달라진다. ## 물리 공식에서 코드로 - 스프링 애니메이션은 이미 정립된 물리 공식을 활용하므로, 이론을 코드로 옮기는 과정 자체는 안정적이다. - Figma는 개발 과정에서 **WebKit SpringSolver**를 활용했다. - 이 솔버에 질량, 강성, 감쇠 값을 입력하면 특정 시간의 위치 값 `x`를 계산할 수 있다. - 결과적으로 시간에 따른 위치를 구해 UI 요소를 애니메이션할 수 있다. ## 물리 매개변수와 디자이너의 언어 사이의 간극 - 질량·강성·감쇠는 정확한 물리 모델이지만, 디자이너가 애니메이션을 조정할 때 사용하는 표현과는 다르다. - 디자이너는 보통 다음과 같이 생각한다. - 더 빠르게 - 더 느리게 - 더 탄력 있게 - 더 많이 튀게 - 오버슈트를 줄이게 - 예를 들어 애니메이션을 느리게 만들 때 질량을 높일 수 있지만, 강성과 감쇠도 속도에 영향을 주므로 단순히 한 변수만 바꾸면 원하는 결과가 나오지 않을 수 있다. - 따라서 세 물리 변수 사이의 상호작용을 고려해 조정해야 한다. - Figma는 디자이너가 물리 공식을 직접 이해하지 않아도 자연스러운 결과를 만들 수 있도록, 세 변수를 한곳에서 조정하는 전용 도구를 개발하려 했다. ## 실용적인 결론 스프링 애니메이션은 이동 경로를 수작업으로 설계하기보다 물리적 규칙을 적용해 자연스러운 움직임을 얻는 방식이다. 구현 시에는 WebKit SpringSolver 같은 검증된 솔버를 활용하고, 사용자 인터페이스에서는 질량·강성·감쇠 대신 속도·탄성·오버슈트처럼 이해하기 쉬운 추상화를 제공하는 것이 효과적이다.

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

Figma사용자 인터페이스animationspring-animations+2

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

포스트모템: 20

Figma의 2022년 6월 서비스 장애는 Cluster-Mode Enabled(CME) ElastiCache Redis 노드의 Engine CPU가 100%에 도달하면서 발생했다. AWS는 CME 클러스터에서 높은 Redis Publish/Subscribe 부하를 처리할 때 발생하는 드문 버그를 원인으로 확인했으며, 트래픽을 새 ElastiCache 클러스터로 전환해 서비스를 복구했다. 장애는 총 네 차례 발생했지만 데이터 손실은 없었다. ## 장애 범위와 사용자 영향 - 장애 시간은 2022년 6월 6일 오후 11시 34분부터 7일 오전 10시 43분까지였다. - 총 네 차례의 서비스 중단이 발생했으며, 각 장애는 7분에서 최대 1시간 20분 동안 지속됐다. - 이미 열려 있던 파일은 계속 편집할 수 있었지만 다음 기능을 사용할 수 없었다. - 새 파일 열기 - 다른 사용자와 협업 - 일부 웹 API 기능 - 오프라인 상태에서 변경한 내용은 로컬에 저장됐고, 서비스가 회복될 때 서버에도 저장되어 데이터 손실은 발생하지 않았다. ## ElastiCache와 Redis 구성 - Figma는 AWS의 관리형 Redis 서비스인 ElastiCache를 다음 용도로 사용했다. - 자주 조회되는 데이터의 빠른 처리 - 서비스 간 메시지 전달 - 당시 두 종류의 ElastiCache 인스턴스를 운영했다. - **Cluster-Mode Disabled(CMD)**: 단일 Redis 클러스터 구조 - **Cluster-Mode Enabled(CME)**: 노드를 추가해 수평 확장 가능 - 장애가 발생하기 몇 주 전, Figma는 Redis Publish/Subscribe 트래픽을 CMD에서 CME 인스턴스로 이전했다. - 이전 후 몇 주 동안은 문제가 없었고, 장애 직전 트래픽이나 Redis 사용량에도 뚜렷한 변화가 없었다. ## CPU 100%를 유발한 CME 버그 - 장애의 직접적인 징후는 CME ElastiCache 노드 하나의 Engine CPU 사용률이 100%에 도달한 것이었다. - AWS 조사 결과, CME 클러스터에서 높은 Publish/Subscribe 부하가 발생할 때 Redis 내부의 드문 버그가 이 포화 상태를 유발한 것으로 확인됐다. - ElastiCache 기반 시스템에서는 하부 머신의 CPU 프로파일을 직접 확인할 수 없었기 때문에, 어떤 작업이 CPU를 소모하는지 즉시 파악하기 어려웠다. - Figma는 수년간 Publish/Subscribe를 사용했지만, CME로 이전하기 전까지는 같은 문제가 발생하지 않았다. ## 초기 대응과 클러스터 확장 - Figma는 원인을 용량 부족 또는 장애 난 하드웨어로 추정했다. - 대응을 위해 다음 조치를 동시에 수행했다. - 문제가 있는 노드의 failover 시작 - 더 큰 노드 타입과 더 많은 노드로 구성된 새 ElastiCache 인스턴스 생성 - 기존 노드의 failover가 예상보다 오래 걸리자, 새 클러스터인 V2로 트래픽을 전환해 서비스를 복구했다. - 그러나 이후 같은 CPU 포화 문제가 V2에서도 재발했다. - 결과적으로 클러스터 규모를 키우는 것이 이 버그를 해결하지 못했고, 오히려 상황을 악화시킬 수 있다는 사실이 드러났다. ## 원인 조사 과정 - Figma는 다음과 같은 가능성을 차례로 검토했다. - 정기 백업이나 예기치 않은 스냅샷이 노드를 일시적으로 과부하시켰을 가능성 - Redis 명령어 사용량이 갑자기 증가했을 가능성 - 느린 명령어, 대형 키 등 비정상적인 Redis 사용 - 장애 직전에 실행된 백그라운드 작업 - 백업이나 스냅샷과 관련된 징후는 발견되지 않았다. - Redis 명령어 사용량도 이전 몇 주와 비슷하고 안정적이었다. - 장애가 시작된 뒤에는 많은 명령어의 처리 시간이 길어졌지만, 이는 CPU가 이미 포화된 결과로 판단됐다. - 처리 시간이 긴 Redis 요청을 일부 차단했지만 문제를 해결하지 못했다. - 장애가 트래픽이 감소하던 시점에도 재발했기 때문에, 단순한 피크 트래픽이나 용량 부족만으로는 설명할 수 없었다. ## Failover를 통한 일시적 복구 - 두 번째 장애에서는 문제가 있는 노드의 failover가 정상적으로 완료되어 더 빠르게 서비스를 복구할 수 있었다. - 장애가 반복되는 동안 Figma는 Redis 요청, 백그라운드 작업, 클러스터 구성 등을 계속 비교하며 공통 패턴을 찾았다. - 최종적으로 AWS의 ElastiCache 서비스 팀이 CME 환경의 높은 Publish/Subscribe 부하와 관련된 Redis 버그를 확인했다. - AWS는 이후 CME 클러스터에서 Redis Publish/Subscribe 성능을 개선하는 작업을 진행했다. ## 실용적인 결론 Redis의 Publish/Subscribe를 CME ElastiCache로 이전할 때는 단순히 노드 수나 인스턴스 크기를 늘리는 것만으로 안정성이 보장되지 않는다. 관리형 서비스에서는 하부 시스템의 프로파일링이 제한되므로, CPU 포화·failover 지연·트래픽 우회 전략을 사전에 검증하고, 장애 시 다른 클러스터로 즉시 전환할 수 있는 구조를 마련하는 것이 중요하다.

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

redisincident-responseaws-elasticachepublish-subscribe+1

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

Figma와 크롬북

Figma는 Google for Education과 협력해 학생들이 학교용 Chromebook에서 Figma와 FigJam을 무료로 사용할 수 있도록 함으로써 디자인 교육의 진입장벽을 낮추려 한다. 이 글은 값비싼 장비나 전문 학위 없이도 모든 학생이 디자인·협업·문제 해결 역량을 익혀야 하며, 클라우드 기반 도구가 이를 가능하게 한다고 주장한다. 특히 팬데믹 이후 디지털 전환이 가속화된 만큼, 디자인 교육은 디자이너뿐 아니라 모든 직업에 필요한 기본 역량이라는 것이 결론이다. ### Chromebook과 Figma의 교육 협력 - Figma는 Google for Education과 협력해 Figma와 FigJam을 Chromebook에서 제공한다. - 학교 구역은 Google Admin Console을 통해 Figma Organization 라이선스를 배포하고 관리할 수 있다. - 미국의 수천만 명 학생이 개인 학교 기기에서 업계 표준 디자인 도구를 사용할 수 있도록 하는 것이 목표다. - 학교 컴퓨터실에서 일주일에 한 번 정도만 소프트웨어를 사용하던 방식에서 벗어나, 학생들이 언제 어디서나 디자인하고 협업할 수 있게 된다. - 학교는 베타 프로그램에 신청해 참여할 수 있다. ### 디자인 교육의 접근성 확대 - 전문 학위, 고가의 컴퓨터, 비싼 소프트웨어가 디자인 학습의 장벽이 되어서는 안 된다는 것이 Figma의 교육 철학이다. - 대부분의 학생은 고가의 창작 도구를 구매하기 어렵기 때문에 학교에 무료로 도구를 제공하는 것이 중요하다. - Figma 공동 창업자 Dylan Field는 대학 시절 Flipboard에서 엔지니어링 인턴과 디자인 인턴을 경험하며 디자인에 관심을 갖게 됐다. - 이러한 경험을 바탕으로 Figma를 처음부터 무료로 제공해야 한다고 판단했으며, 학생들이 도구와 새로운 기회에 접근할 수 있어야 한다고 강조한다. ### 디지털 시대에 필요한 디자인 역량 - 코로나19 팬데믹은 물리적 활동이 디지털 환경으로 이동하는 속도를 크게 높였다. - 디자인은 시각적 의사소통뿐 아니라 복잡한 문제 해결, 협업, 창의적 표현을 훈련하는 수단이다. - 디자인 중심 기업이 동종 업계 기업보다 높은 성과를 낸다는 연구를 인용하며, 디자인 역량은 디자이너만의 능력이 아니라고 설명한다. - 미래의 기회를 소수의 명문대 졸업자나 전문가에게만 한정하기보다, 모든 학생이 디자인과 소프트웨어 분야에 접근할 수 있어야 한다고 주장한다. ### 교실과 일상에서의 활용 - 교사들은 Figma 도입 후 학생들의 수업 참여도와 흥미가 높아졌다고 전한다. - 디자인을 접해보지 못했던 학생들이 졸업 후 디자인 전공을 고려하기도 한다. - 학생들은 과제뿐 아니라 집에서 개인 프로젝트를 진행하며 창의적 활동을 즐기고 있다. - FigJam은 아이스브레이커, 협동 활동, 학급 토론 등 수업 내 공동 작업 공간으로 활용된다. - 클라우드 기반 협업 환경은 학생들이 함께 만들고 의견을 나누는 경험을 자연스럽게 제공한다. ### 프로젝트 기반 학습과 디자인 과정 - 학생들이 디자인을 잘 배우려면 단순한 이론 교육보다 놀이, 직접 체험, 프로젝트 기반 학습이 중요하다. - Dylan Field는 자신이 다닌 Technology High School의 과학·공학 통합형 프로젝트 수업을 긍정적인 사례로 제시한다. - 학습 과정은 다음과 같은 디자인 사고 흐름과 연결된다. - 다양한 가능성을 폭넓게 탐색한다. - 아이디어를 좁히고 하나의 방향을 선택한다. - 선택한 방향을 실제 프로젝트로 구현한다. - 이런 과정은 학생들이 지식을 암기하는 데 그치지 않고, 문제를 정의하고 해결책을 만들어보도록 돕는다. Figma와 Chromebook의 결합은 단순히 소프트웨어를 무료로 제공하는 것을 넘어, 학생들이 일상적인 기기에서 디자인과 협업을 경험하게 하는 교육 모델이다. 학교는 도구 접근성을 높이는 동시에 프로젝트 기반 수업과 자유로운 창작 활동을 병행할 때 더 큰 교육 효과를 얻을 수 있다.

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

Figmafigjam클라우드 컴퓨팅digital-design+3

datadog·2022년 6월 6일원문

엔지니어링 스포트라이트: 테이 니시무라 (새 탭에서 열림)

데이터독(Datadog)의 인프라 엔지니어 테이 니시무라(Tay Nishimura)의 커리어 여정은 자신만의 사고방식에 적합한 직무를 찾는 과정의 중요성을 보여줍니다. 수학 전공자이자 시각적 사고를 선호하는 그녀는 일반적인 소프트웨어 개발 속도 경쟁에서 어려움을 겪었으나, 네트워크 시뮬레이터 'ToyNet' 개발을 통해 자신의 강점을 증명하며 SRE(Site Reliability Engineering)로 성공적으로 전향했습니다. 이 글은 전형적인 엔지니어의 틀에 갇히지 않고 자신의 고유한 특성을 기술적 자산으로 승화시킨 과정을 다룹니다. **학계와 실무 사이의 괴리와 시각적 사고** * 수학 전공자로서 증명 위주의 엄격한 사고에 익숙했던 테이는 효율과 속도를 중시하는 애자일 개발 환경에서 초기에 성능 피드백 문제로 어려움을 겪었습니다. * 코드를 바로 작성하기보다 코드를 그림으로 변환하여 논리를 검증한 뒤 다시 코드로 옮기는 '시각적 사고' 방식을 고수했는데, 이는 신중함을 더해주었지만 작업 속도를 늦추는 요인이 되기도 했습니다. * 일반적인 개발 직무에서는 속도 저하로 평가받았던 그녀의 신중함과 모든 실패 모드를 고려하는 태도가, 오히려 시스템의 안정성을 책임지는 SRE 직무에는 핵심적인 역량이 될 수 있음을 깨달았습니다. **ToyNet 개발과 SRE로의 전환** * 팬데믹 기간 중 해고를 겪었으나 이를 계기 삼아 평소 관심 있던 네트워크 기술을 공부하며, 수감자와 베테랑을 위한 교육 프로그램 'Project Reclass'를 시작했습니다. * 인터넷 사용이 제한된 교도소 환경에서도 네트워크 실습이 가능하도록 React, Flask, Mininet을 활용해 컨테이너 기반 네트워크 에뮬레이션 플랫폼인 'ToyNet'을 설계했습니다. * ToyNet은 테이의 클라우드 배포 역량과 기술적 깊이를 증명하는 강력한 포트폴리오가 되었으며, 이는 데이터독에 SRE로 합류하는 결정적인 발판이 되었습니다. **데이터독에서의 적응과 시각적 분석의 힘** * 데이터독 합류 후 Kubernetes, 카오스 엔지니어링, Go 언어 등 생소한 기술 스택을 빠르게 습득하며 인프라 엔지니어로서 전문성을 쌓았습니다. * 데이터독의 카오스 자동화 도구인 'Chaos Controller'를 오픈소스화하는 과정에서, 복잡한 코드베이스를 상자와 화살표로 시각화하여 구조를 파악하는 자신만의 분석 방식을 적극적으로 활용했습니다. * 과거에는 약점으로 치부되었던 '꼼꼼하고 신중한 속도'가 이제는 대규모 시스템의 신뢰성을 보장하고 복잡한 기술 문제를 해결하는 강력한 무기가 되었습니다. 자신이 업계의 전형적인 틀(Cookie-cutter shape)에 맞지 않는다고 느낄 때, 포기하기보다는 자신의 독특한 사고방식이 빛을 발할 수 있는 세부 분야를 찾는 것이 중요합니다. 테이 니시무라의 사례처럼 사이드 프로젝트를 통해 실질적인 기술력을 증명하고 이를 직무 전환의 교두보로 활용하는 전략은 커리어 고민을 겪는 엔지니어들에게 실질적인 영감을 줍니다.

쿠버네티스오픈 소스React클라우드 컴퓨팅+4

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

엔지니어링 스포트라이

Datadog은 Gartner의 2026년 Observability Platforms 매직 쿼드런트에서 ‘Leader’로 선정되었다고 소개한다. 제공된 내용은 이 발표 문구와 Datadog 제품 메뉴 중심으로 구성되어 있어, 선정 근거와 평가 세부 사항은 확인할 수 없다. 다만 Datadog이 인프라·애플리케이션·로그·보안·디지털 경험·소프트웨어 제공을 아우르는 통합 관측성 플랫폼을 제공한다는 점을 강조한다. ### Gartner 매직 쿼드런트 리더 선정 - Datadog은 Gartner의 **Observability Platforms 2026** 보고서에서 Leader로 평가되었다고 알린다. - 링크와 제목을 통해 이번 발표가 Datadog의 관측성 플랫폼 경쟁력과 관련된 공식 홍보 자료임을 확인할 수 있다. - 제공된 본문에는 Gartner의 평가 기준, 경쟁사 비교, Datadog의 강점·약점, 점수나 그래프는 포함되어 있지 않다. ### 통합 인프라 관측성 - 인프라 모니터링과 메트릭 수집을 제공한다. - 호스트 맵, 컨테이너 모니터링, Kubernetes 오토스케일링을 지원한다. - 네트워크, 서버리스 환경, GPU, 스토리지 및 클라우드 비용을 함께 관리할 수 있도록 제품군을 구성한다. - Cloudcraft를 통해 클라우드 인프라의 시각화와 설계를 지원한다. ### 애플리케이션 및 데이터 모니터링 - APM으로 애플리케이션 성능과 서비스 간 호출을 분석한다. - Universal Service Monitoring, Continuous Profiler, Dynamic Instrumentation 등을 통해 서비스 동작과 코드 수준의 성능 문제를 진단한다. - 데이터베이스, 데이터 스트림, 데이터 품질, 작업 실행 상태를 모니터링한다. - AI 에이전트의 동작을 관찰하는 Agent Observability도 제품군에 포함한다. ### 로그 및 보안 통합 - Log Management와 Observability Pipelines를 통해 로그 수집·처리·전송을 관리한다. - Sensitive Data Scanner로 민감 정보 노출을 탐지한다. - Cloud SIEM, 클라우드 보안, 취약점 관리, 워크로드 보호, 애플리케이션·API 보호를 제공한다. - SAST, IAST, SCA, IaC 보안 및 Secret Scanning 등 개발 생명주기 전반의 보안 기능도 포함한다. ### 디지털 경험과 소프트웨어 제공 - 브라우저·모바일 RUM으로 실제 사용자 경험을 측정한다. - Session Replay, Synthetic Monitoring, Error Tracking, Product Analytics 등을 제공한다. - CI Visibility, 테스트 최적화, 지속적 테스트, 코드 커버리지로 소프트웨어 전달 과정을 관찰한다. - Feature Flags와 내부 개발자 포털을 통해 배포 및 개발자 경험도 관리한다. ### 서비스 관리와 AI 기능 - 이벤트 관리, 인시던트 대응, SLO, 서비스 카탈로그, 워크플로 자동화를 지원한다. - Watchdog과 Bits 계열 AI 기능을 활용해 이상 징후 탐지와 장애 조사를 자동화한다. - Bits Chat, AI 에이전트, MCP Server 등을 통해 관측성 데이터에 대한 자연어 질의와 자동화된 분석을 제공한다. 실제로 플랫폼을 선택할 때는 ‘Leader’라는 평가만으로 결정하기보다, 필요한 텔레메트리 범위, 데이터 보존 비용, 기존 클라우드·개발 도구와의 연동성, 보안 및 접근 제어, AI 기능의 정확성을 별도로 검증하는 것이 좋다.

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

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

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

lli Type으로 본격적인

가변 폰트는 하나의 파일로 다양한 굵기·기울기·광학 크기 등을 조정할 수 있어, 타이포그래피의 정밀도와 표현력을 높이는 표준 기술이다. Grilli Type의 Thierry Blancpain은 가변 폰트가 디자이너와 개발자의 협업을 단순화하고, 웹을 더 역동적이고 읽기 쉬운 경험으로 만드는 핵심 도구라고 설명한다. 특히 디자인 도구에서 가변 폰트를 직접 지원해야 실제 구현 과정의 간극과 불필요한 우회 작업을 줄일 수 있다고 강조한다. ## 폰트 크기 변화와 가독성의 문제 - 명함에서 광고판으로, 모바일에서 데스크톱으로 글자 크기가 커지면 글자 사이의 공간감과 비율도 달라진다. - 특정 크기에서 읽기 쉬웠던 문장이 다른 크기에서는 형태가 무너지고 가독성이 떨어질 수 있다. - 크기와 가독성을 유지하려면 다음 요소를 세밀하게 조정해야 한다. - **커닝(kerning):** 개별 글자 사이의 간격 - **트래킹(tracking):** 글자 묶음 전체의 간격 - 굵기와 스타일별로 별도 파일을 사용하면 에셋과 코드가 늘어나고, 다운로드 용량·관리 복잡성·오류 가능성이 커진다. ## 하나의 파일로 여러 표현을 만드는 가변 폰트 - 가변 폰트는 여러 스타일을 각각 저장하는 대신, 하나의 폰트 파일 안에 다양한 표현 범위를 담는다. - 디자이너는 축(axis)을 조절해 다음과 같은 속성을 연속적으로 변경할 수 있다. - 굵기(weight) - 기울기나 경사(slant) - 광학 크기(optical size) - 그 밖의 폰트 제작자가 정의한 형태적 특성 - 굵기와 광학 크기를 동시에 조절하는 등 기존 정적 폰트보다 정밀한 타이포그래피 설계가 가능하다. - 하나의 파일을 여러 도구와 환경에서 사용할 수 있어, 애플리케이션별 폰트 버전을 따로 준비해야 하는 문제도 줄어든다. ## 현대적인 디자인 표준과 도구 지원 - Blancpain은 가변 폰트가 새로운 표준 형식이므로, Figma 같은 주요 디자인 도구가 이를 지원하는 것이 중요하다고 말한다. - 도구가 표준 형식을 지원하지 않으면 디자이너와 개발자는 별도 변환이나 우회 방법을 찾아야 한다. - Grilli Type은 과거 Figma에서 가변 폰트를 사용할 수 없을 때도 가변 폰트 기반 웹사이트를 제작했지만, 디자이너와 개발자가 분리된 조직에서는 이런 방식이 현실적으로 어렵다고 설명한다. - Figma에서 디자인 단계부터 가변 폰트를 사용하면 최종 코드 구현까지 동일한 타이포그래피 의도를 유지하기 쉬워진다. ## 디자이너와 개발자의 협업 개선 - 개발자에게는 폰트 패밀리 전체를 하나의 파일로 관리할 수 있다는 점이 큰 장점이다. - 파일 업데이트가 단순해진다. - 코드와 에셋 관리가 깔끔해진다. - 여러 폰트 파일을 조합할 때 생기는 관리 오류가 줄어든다. - 디자이너는 원하는 굵기나 광학 크기를 세밀하게 선택할 수 있다. - 가변 폰트는 디자이너에게 표현의 자유를, 개발자에게는 구현과 유지보수의 효율성을 제공한다. - 따라서 두 직군이 서로 다른 도구와 파일을 사용하며 생기는 간극을 줄여준다. ## 웹 타이포그래피의 동적 표현 - 가변 폰트는 웹에서 글자를 단순한 정보 전달 수단이 아니라 시각적 표현 요소로 활용하게 한다. - 예를 들어 마우스 오버 시 일반 굵기에서 굵은 글씨로 자연스럽게 전환하는 효과를 만들 수 있다. - `GT Maru Mega`처럼 매우 개성적인 서체도 작은 크기에서 사용할 수 있도록 형태와 광학 특성을 조정할 수 있다. - 폰트 축을 애니메이션과 결합하면 정적인 웹사이트보다 더 생동감 있고 상호작용적인 경험을 제공할 수 있다. - Blancpain은 웹 경험이 점점 더 움직임을 포함하는 방향으로 발전할 것이라고 전망한다. ## 실용적인 결론 가변 폰트는 파일 수를 줄이는 기술을 넘어, 반응형 화면에 맞는 가독성과 정밀한 타이포그래피, 인터랙션까지 함께 구현하는 방법이다. 디자이너와 개발자는 가능한 한 디자인 단계부터 동일한 가변 폰트를 사용하고, 굵기·광학 크기·기울기 축을 화면 크기와 사용자 상호작용에 맞춰 활용하는 것이 좋다.

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

Figma사용자 경험접근성typography+3

figma·2022년 5월 23일·3분 읽기큐레이션 요약

Config 2022 되돌

Config 2022는 전 세계 디자이너와 제품 관계자가 모여 디자인의 범위와 영향력을 확장한 행사였다. 24시간 동안 100명 이상의 연사가 Web3, 사용자 조사, 디자인 시스템, 다문화 제품 설계 등을 다뤘으며, 핵심 메시지는 지역과 직무에 상관없이 더 크고 긴급한 변화를 시도하자는 것이었다. 특히 기존 디지털 사용자뿐 아니라 중국의 모바일 중심 사용자와 인도의 신규 인터넷 사용자까지 고려하는 포용적 디자인이 강조됐다. ## 더 많은 사용자를 고려하는 디자인 - 디자이너는 익숙한 사용자 집단만을 기준으로 제품을 설계해서는 안 되며, 서로 다른 기술 경험과 문화적 배경을 가진 사람들을 함께 고려해야 한다. - 현대 UX 관행은 디지털 환경에 새롭게 진입하는 사람들의 요구를 놓치는 경우가 많다. - 사용자 집단의 규모와 성장 가능성을 고려하면, 포용적인 설계는 윤리적 과제인 동시에 중요한 비즈니스 기회가 된다. ## 중국 사용자와 모바일 중심 UX Shopify의 Yuan Qing Lim은 중국 사용자를 이해하기 위해 중국의 독특한 디지털 발전 경로를 살펴봐야 한다고 설명했다. - 중국의 많은 사용자는 PC 시대를 거치지 않고 모바일 인터넷 환경으로 직접 진입했다. - 중국의 약 10억 인터넷 사용자를 대상으로 하려면 서구권의 미니멀한 UX 관습만 적용해서는 부족하다. - 주요 특징은 다음 세 가지로 정리된다. - **More is More**: 정보와 기능이 풍부하고 시각적으로도 과감한, 중국의 맥시멀리스트 디지털 취향을 반영한다. - **Super Apps**: 하나의 앱 안에서 결제, 쇼핑, 커뮤니케이션 등 여러 서비스를 이용하는 통합 경험을 제공한다. - **Community**: 개인 중심이 아니라 커뮤니티와 사회적 상호작용을 제품 경험의 중요한 요소로 다룬다. - 지역별 사용자의 문화와 행동 방식을 이해하지 않고 보편적인 UX를 적용하면 제품의 접근성과 매력도가 떨어질 수 있다. ## 신규 인터넷 사용자를 위한 설계 인도에서 활동하는 제품 디자이너 Rahul Goradia는 디지털 환경에 처음 진입하는 사용자를 위한 UX의 필요성을 강조했다. - 인도처럼 향후 인터넷 사용자가 크게 증가할 지역에서는 신규 사용자를 고려하지 않은 설계가 큰 문제로 이어질 수 있다. - 기존 UX 패턴과 전문 용어는 숙련된 사용자에게는 편리하지만, 초보자에게는 진입 장벽이 될 수 있다. - 특히 전자상거래 서비스는 상품 탐색, 비교, 결제 등 각 단계가 명확하고 이해하기 쉬워야 한다. - 실제 신규 사용자를 대상으로 사용성 테스트를 진행해 다음과 같은 문제를 확인해야 한다. - 사용자가 기능의 의미를 이해하는가 - 구매 절차를 끝까지 수행할 수 있는가 - 인터페이스의 용어와 아이콘을 혼동하지 않는가 - 변화하는 온라인 이용 습관에 제품이 맞춰지고 있는가 - 팬데믹 이후 사용자 행동이 변화하고 있으므로, 과거의 가정에 의존하지 않고 지속적으로 검증해야 한다. ## 다양한 주제로 확장된 디자인 논의 Config 2022에서는 사용자 다양성뿐 아니라 제품 개발 전반의 협업과 시스템화도 다뤄졌다. - UX 리서치 결과를 실행 가능한 전략과 디자인으로 전환하는 방법 - UX 라이터와 디자이너가 디자인 시스템 안에서 협업하는 방식 - 디자인 시스템의 한계와 개선 방향 - 디자인 토큰을 활용한 협업 - 다크 모드와 멀티플랫폼 디자인 시스템 구축 - 제품 카피를 체계화하고 콘텐츠를 디자인 요소로 다루는 방법 - Web3 환경에서 디자인을 분산화하는 가능성 ## 지역과 직무를 넘어 행동하기 - Config의 공통된 방향은 디자인을 단순한 화면 제작이 아니라 사회와 제품을 변화시키는 실천으로 보는 것이다. - Figma 공동 창업자이자 CEO인 Dylan Field는 지역적 또는 세계적 변화를 원한다면 이를 시작하는 데 막을 것이 없다고 강조했다. - 디자이너는 자신의 업무 범위를 넘어 사용자, 커뮤니티, 조직과 사회에 미치는 영향을 고민해야 한다. 실무에서는 먼저 제품의 주요 사용자 정의에 빠져 있는 집단이 없는지 점검하고, 서로 다른 디지털 숙련도와 문화적 배경을 가진 사용자를 대상으로 사용성 테스트를 진행하는 것이 좋다. 지역별 사용자 행동을 일반화하지 않고 실제 데이터와 피드백을 바탕으로 제품 경험을 조정해야 한다.

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

Figma디자인 시스템사용자 경험디자인 토큰+4

figma·2022년 5월 18일·3분 읽기큐레이션 요약

접근성 향상을 위한

Figma는 디자인을 모든 사람이 참여할 수 있게 만드는 것을 목표로 하며, 이를 위해 시각장애·저시력 사용자를 위한 프로토타입 스크린 리더 베타를 발표했다. Figma 디자인은 일반 HTML이 아니어서 기존 스크린 리더가 내용을 읽기 어려웠지만, 프로토타입을 스크린 리더 전용 HTML로 변환하는 방식으로 문제를 해결했다. 이는 중요한 진전이지만, ARIA 역할·탭 순서·대체 텍스트 설정 등 접근성 지원을 확대하기 위한 추가 과제가 남아 있다. ## 프로토타입 스크린 리더 베타 - 기존에는 시각장애 사용자가 Figma 프로토타입을 열어도 스크린 리더에 “빈 캔버스” 레이블만 표시됐다. - 텍스트, 이미지, 버튼 등 프로토타입의 핵심 콘텐츠를 스크린 리더가 인식하지 못하는 문제가 있었다. - 베타 기능은 다음을 지원한다. - 텍스트 노트 읽기 - 이미지 대체 텍스트(alt text) 읽기 - 버튼과 키보드 동작을 통한 프로토타입 탐색 - Tab 키 등을 이용한 키보드 내비게이션 - 2022년 8월 업데이트를 통해 이 기능은 모든 사용자가 이용할 수 있는 오픈 베타로 전환됐다. ## Figma 디자인을 HTML로 변환하는 방식 - Figma는 웹 기반 애플리케이션이지만 디자인 결과물이 일반적인 HTML 요소로 그려지지 않는다. - 따라서 대부분의 스크린 리더가 Figma 캔버스의 텍스트와 인터페이스 구조를 직접 해석할 수 없었다. - Figma는 프로토타입을 스크린 리더 전용 HTML 표현으로 변환해 보조공학 기술에 제공하는 구조를 구현했다. - 이 변환 계층을 통해 스크린 리더가 화면에 표시된 콘텐츠와 상호작용 요소를 읽고 탐색할 수 있게 됐다. ## 함께 진행된 접근성 개선 - 다크 모드와 색상 대비 개선을 통해 다양한 시각적 요구를 지원했다. - WCAG 3.0 초안 기준에 부합하도록 색상 대비 준수를 강화했다. - Figma 데스크톱 앱과 Pro·Org·Enterprise 요금제에서 오디오 채팅 실시간 자막 기능을 오픈 베타로 제공했다. - Deque의 플랫폼 전반 접근성 평가를 받아 다음과 같은 개선 영역을 확인했다. - 키보드만으로 기능을 사용할 수 있도록 개선 - ARIA 레이블을 모범 사례에 맞게 적용 - Adee, Deque, Stark 등의 플러그인과 커뮤니티 파일을 통해 색상 대비 검사 등 접근성 도구 생태계도 확대되고 있다. ## 개발 프로세스에 접근성을 내재화 - Figma는 팀이 접근성을 고려하도록 권장하는 수준을 넘어, 제품을 설계·개발할 때 접근성을 필수적으로 반영하도록 하고 있다. - 키보드 전용 사용자와 스크린 리더 사용자를 지원하는 재사용 가능한 UI 컴포넌트를 제작하고 있다. - 새 기능과 코드가 접근성 모범 사례를 따르는지 확인할 수 있는 내부 도구도 개발 중이다. - 알파·베타 테스트에 접근성 사용자를 조기에 참여시켜 실제 사용 경험을 설계 과정에 반영하고 있다. ## 남은 과제 - 사용자가 디자인 요소에 직접 대체 텍스트를 지정할 수 있도록 해야 한다. - 컴포넌트에 ARIA 역할을 설정하는 기능이 필요하다. - 프로토타입 요소의 키보드 탭 순서를 지정할 수 있어야 한다. - 스크린 리더 지원은 시작 단계이며, 커뮤니티와 지속적으로 테스트하고 피드백을 받아 개선해야 한다. 실용적으로는 Figma에서 프로토타입을 제작할 때 이미지에 의미 있는 대체 텍스트를 제공하고, 키보드만으로 탐색 가능한 흐름과 충분한 색상 대비를 함께 검토하는 것이 권장된다.

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

접근성HTMLwcagkeyboard-navigation+3

datadog·2022년 5월 17일·2분 읽기큐레이션 요약

Datadog의 3세대 이벤트

Datadog은 2026년 Gartner® 매직 쿼드런트™ Observability Platforms 부문에서 Leader로 선정되었다고 소개한다. 제공된 내용은 이 발표와 Datadog 제품 메뉴를 중심으로 구성되어 있어, 선정 근거와 경쟁사 비교, Gartner의 세부 평가 점수는 확인할 수 없다. ## Gartner 매직 쿼드런트 리더 선정 - Datadog이 Observability Platforms 부문에서 Leader로 평가받았다는 내용이다. - 링크는 Datadog의 공식 발표 자료이며, 제품 홍보 성격의 콘텐츠로 보인다. - 제공된 본문에는 다음과 같은 세부 정보가 포함되어 있지 않다. - Gartner의 평가 기준 - Datadog의 강점과 약점 - 경쟁 업체와의 비교 - 실행력(Ability to Execute)과 비전 완성도(Completeness of Vision) 점수 ## 통합 옵저버빌리티 플랫폼 범위 제품 목록은 Datadog이 인프라부터 애플리케이션, 로그, 보안, 사용자 경험, 소프트웨어 전달까지 폭넓은 영역을 하나의 플랫폼에서 제공한다는 점을 보여준다. - **인프라 모니터링** - 호스트, 메트릭, 컨테이너, Kubernetes, 네트워크, 서버리스 환경 모니터링 - 클라우드 비용, 스토리지, GPU 모니터링 지원 - **애플리케이션 성능 관리** - APM, 서비스 모니터링, 지속적 프로파일링, 동적 계측 - AI 에이전트 관찰 기능 제공 - **데이터와 로그 관리** - 데이터베이스 및 데이터 스트림 모니터링 - 로그 관리, 민감 데이터 탐지, 감사 추적, 관측성 파이프라인 - **보안** - 코드 보안, SAST, IAST, 소프트웨어 구성 분석 - 클라우드 보안, CSPM, CIEM, 취약점 관리, Cloud SIEM - 워크로드 및 애플리케이션·API 보호 - **디지털 경험** - 브라우저·모바일 RUM - 세션 리플레이, 신세틱 모니터링, 오류 추적 - 제품 분석과 모바일 앱 테스트 - **소프트웨어 개발·운영** - CI 가시성, 테스트 최적화, 지속적 테스트, 코드 커버리지 - 내부 개발자 포털, 기능 플래그, IDE 플러그인 - **서비스 관리** - 이벤트 관리, 서비스 카탈로그, SLO, 사고 대응 - 케이스 관리와 워크플로 자동화 - **AI 기능** - Bits AI Agents, Bits Chat, Bits Investigation 등 - MCP Server, 에이전트 디렉터리, AI 통합 기능 ## 제공된 글의 한계 - 실제 기사 본문이나 Gartner 보고서의 평가 내용은 제공되지 않고, Datadog 웹사이트의 내비게이션 정보가 대부분이다. - 따라서 “Leader” 선정의 구체적인 이유나 기술적 우수성을 이 자료만으로 검증하기는 어렵다. - 도입을 검토한다면 Gartner 원문과 함께 가격, 데이터 보관 비용, 지원 범위, 기존 도구와의 연동성, 벤더 종속성 등을 별도로 확인해야 한다. Datadog은 인프라·애플리케이션·로그·보안·사용자 경험을 통합하려는 조직에 적합한 후보로 볼 수 있다. 다만 Leader 선정 자체는 제품 도입의 충분조건이 아니므로, 실제 워크로드와 비용 구조를 기준으로 검증하는 것이 바람직하다.

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

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

datadog·2022년 5월 17일원문

Datadog의 3세대 이벤트 스토어, Husky를 소개합니다 (새 탭에서 열림)

데이터독(Datadog)은 폭발적인 데이터 증가와 다양한 제품군의 요구사항을 충족하기 위해 새로운 이벤트 저장 시스템인 '허스키(Husky)'를 구축했습니다. 기존 시스템은 대규모 멀티테넌트 환경에서 발생하는 성능 간섭과 고비용 구조, 데이터 삭제의 어려움이라는 한계에 봉착했으며, 이를 해결하기 위해 저장소와 클러스터링을 분리하고 효율성을 극대화한 새로운 아키텍처가 필요했습니다. 결과적으로 허스키는 로그, RUM, 보안 데이터 등 다양한 고카디널리티(High-cardinality) 이벤트를 경제적이고 안정적으로 처리할 수 있는 기반이 되었습니다. ### 메트릭과 로그의 기술적 차이 * **메트릭의 효율성:** 메트릭 시스템은 데이터를 `<timeseries_id, timestamp, float64>` 형태의 튜플로 사전 집계하여 저장합니다. '델타-오브-델타(delta-of-delta)' 인코딩을 통해 16바이트 데이터를 2바이트 미만으로 압축할 수 있어 매우 효율적이지만, 태그 카디널리티에 제한이 있습니다. * **로그의 복잡성:** 로그는 이벤트당 킬로바이트(KB) 단위의 크기를 가지며, UUID나 스택 트래적(stack traces)과 같은 고카디널리티 데이터를 포함해야 합니다. 로그 시스템은 모든 문맥(context)을 보존하면서 쿼리 시점에 임의의 차원으로 집계할 수 있는 능력이 필수적입니다. ### 초기 아키텍처의 한계와 클러스터링 개선 * **초기 버전의 문제:** 멀티테넌트 클러스터 내에서 단일 노드의 장애나 특정 테넌트의 과부하가 전체 클러스터의 가용성을 떨어뜨리는 '노이즈 네이버(Noisy Neighbor)' 문제가 빈번했습니다. * **저장소와 클러스터링 분리:** 두 번째 버전에서는 저장 엔진과 클러스터링 로직을 분리했습니다. '샤드 라우터(Shard Router)'가 카프카(Kafka)를 통해 데이터를 샤드 단위로 정리하고, 각 노드는 독립적인 유닛으로 동작하게 하여 장애 전파를 차단했습니다. * **커스텀 쿼리 엔진:** 여러 샤드에 분산된 데이터를 쿼리하고 부분 집계 결과를 병합하는 전용 엔진을 도입하여 신뢰성을 높였습니다. ### 플랫폼 급성장과 새로운 요구사항의 등장 * **제품군의 확장:** 로그뿐만 아니라 네트워크 성능 모니터링(NPM), 실제 사용자 모니터링(RUM), 프로파일러 등 다양한 제품이 출시되면서 저장해야 할 이벤트의 양과 종류가 급증했습니다. * **장기 보관 비용 문제:** 가끔 쿼리하지만 장기간 보관이 필요한 데이터를 기존 아키텍처에서 운영하는 것은 비용 효율성이 낮았습니다. * **데이터 관리 편의성:** GDPR 대응을 위한 특정 데이터의 정밀한 삭제 기능과 테넌트 간의 완전한 자원 격리에 대한 요구가 강해졌습니다. ### 허스키(Husky)의 설계 방향 * **범용 이벤트 저장소:** 로그와 유사한 구조를 가진 모든 유형의 데이터를 수용할 수 있는 유연한 스키마 구조를 지향합니다. * **비용 효율적인 확장:** 스토리지 계층화를 통해 자주 사용되지 않는 데이터는 저렴한 저장소에 보관하면서도 즉시 쿼리가 가능한 구조를 구축했습니다. * **격리 및 제어권 강화:** 특정 테넌트의 트래픽 급증이 다른 테넌트의 쿼리 성능에 영향을 주지 않도록 정교한 할당량(Quota) 관리와 격리 메커니즘을 포함했습니다. 시스템을 설계할 때 단순히 현재의 성능 개선에만 집중하는 것이 아니라, 향후 데이터의 기하급수적인 증가와 다양한 제품 요구사항(비용, 삭제, 격리)을 수용할 수 있는 아키텍처 유연성을 확보하는 것이 중요합니다. 특히 대규모 멀티테넌트 환경에서는 '폭포수 장애'를 방지하기 위해 각 구성 요소를 최대한 독립적으로 격리하는 설계가 필수적입니다.

데이터베이스 설계datadogApache Kafkametrics+4