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

피그마의 피드백 선물

피드백은 단순한 지적이 아니라 상황과 관계에 맞게 전달해야 하는 ‘선물’이다. 효과적인 피드백을 위해서는 프로젝트 단계, 팀의 협업 문화, 상대방의 시간대와 업무 방식 등을 고려해야 하며, 의도와 전달 방식이 어긋나면 관계가 악화되고 프로젝트가 불필요한 반복 논의에 빠질 수 있다. 특히 디자인의 완성도에 맞춰 피드백의 범위와 깊이를 조절하는 것이 중요하다. ## 피드백을 전달할 적절한 시점 - 좋은 피드백은 내용뿐 아니라 **언제 전달하느냐**에 따라 효과가 달라진다. - 회사, 팀, 프로젝트, 개인마다 일정과 제약이 다르므로 가장 건설적으로 받아들여질 시점을 선택해야 한다. - 프로젝트 단계에 따라 피드백의 목적을 명확히 해야 한다. - **브레인스토밍**: 다양한 가능성을 확장하는 단계이므로 너무 일찍 범위를 좁히는 피드백은 피한다. - **초기 콘셉트**: 리서치와 데이터를 활용해 선택지를 합리적으로 좁힌다. - **제품 리뷰**: 결과물이 제품 및 비즈니스 목표와 일치하는지 확인한다. - **디자인 크리틱**: 구체적인 UX·비주얼 개선 의견과 제품 간 일관성을 논의한다. - **프로토타입**: 사용성 및 애니메이션에 초점을 맞춘다. - **고해상도 디자인**: 세부 요소를 꼼꼼히 검토해 디자이너가 놓친 부분을 보완한다. - **최종 디자인**: 모든 주요 플로우와 사용 사례가 다뤄졌는지 확인한다. - 피드백을 요청할 때 어떤 종류의 의견이 필요한지 미리 설명하면 참여자들이 논의의 초점을 맞출 수 있다. ## 팀의 피드백 문화에 맞추기 - 협업 중심의 문화는 하루아침에 만들어지지 않으며, 조직의 변화에는 수년이 걸릴 수 있다. - 팀이 피드백 문화를 구축하는 초기 단계라면: - 피드백의 목적과 프로젝트 맥락을 충분히 설명한다. - 중요한 논의를 초기에, 그리고 자주 진행한다. - 피드백을 주고받는 방식은 실제 협업 과정에서 조정될 수 있으며 처음부터 완벽하지 않아도 된다. - 이미 피드백 문화가 정착된 팀이라면: - 검증된 채널과 절차를 활용해 보다 직접적으로 의견을 전달한다. - 팀원들이 익숙한 협업 방식과 커뮤니케이션 규칙을 존중한다. - 팀의 문화 수준에 맞지 않는 방식으로 피드백하면 좋은 의도라도 부담이나 저항으로 받아들여질 수 있다. ## 시간대와 업무 리듬 존중하기 - 다른 시간대에서 일하는 동료에게 이른 아침이나 늦은 밤에 갑작스럽게 메시지를 보내는 일을 피한다. - 팀원마다 근무 시간과 집중이 잘되는 시간이 다르므로 일정과 개인 선호를 파악해야 한다. - 상대방의 시간과 에너지를 존중하고, 자신의 업무 방식과 응답 가능 시간도 명확히 공유한다. - 작은 일정 조율과 기대치 설정만으로도 협업 과정의 마찰을 크게 줄일 수 있다. ## 실용적인 적용 방법 - 피드백 전에 “지금 이 단계에서 어떤 결정을 내려야 하는가?”를 먼저 확인한다. - 의견을 전달할 때 원하는 피드백의 범위와 우선순위를 구체적으로 제시한다. - 초기 단계에서는 가능성을 열어 두고, 후반 단계로 갈수록 실행 가능성·세부 품질·누락된 사용 사례를 집중적으로 검토한다. - 팀의 협업 성숙도와 상대방의 일정에 맞춰 채널, 표현, 전달 시점을 조정한다.

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

사용자 경험Figma프로토타이핑프로덕트 디자인+2

datadog·2022년 9월 29일원문

Datadog을 구동하는 디자인 시스템, DRUIDS (새 탭에서 열림)

데이터독(Datadog)은 제품군이 급격히 확장됨에 따라 사용자에게 일관된 경험을 제공하고 개발 효율성을 높이기 위해 자체 디자인 시스템인 **DRUIDS**(Datadog Reusable User Interface Design System)를 구축했습니다. DRUIDS는 단순히 디자인 가이드를 제공하는 것에 그치지 않고, 수백 명의 디자이너와 엔지니어가 시스템을 쉽게 이해하고 구현하며 직접 기여할 수 있는 선순환 구조를 만드는 데 집중합니다. 결과적으로 이 시스템은 데이터독의 다양한 제품들이 하나의 통합된 플랫폼처럼 느껴지게 만드는 핵심적인 역할을 수행하고 있습니다. ### 직관적인 탐색과 맥락 파악을 돕는 도구 * **Cmd+K 퀵 내비게이션**: 플랫폼 전반에서 사용되는 퀵 내비 패턴을 문서 사이트에도 적용하여, 사용자가 원하는 컴포넌트, 아이콘, 로고 등을 검색을 통해 즉시 찾을 수 있도록 지원합니다. * **DRUIDS Loupe**: 실제 데이터독 페이지 위에서 단축키를 통해 실행되는 검사 도구로, 화면에 사용된 컴포넌트가 무엇인지 확인하고 해당 소스 코드, 피그마(Figma) 디자인, 문서 페이지로 즉시 이동할 수 있는 링크를 제공합니다. * **개발 환경과의 유기적 연결**: VS Code용 JSDoc 주석을 통해 코드 레벨에서 문서 링크를 제공하며, 소스 코드와 디자인 도구 간의 양방향 연결을 강화하여 정보의 파편화를 방지합니다. ### 코드 중심의 구현 편의성 제공 * **실시간 플레이그라운드**: 디자인 도구만으로는 표현하기 힘든 복잡한 상태와 기능을 확인하기 위해 React, TypeScript, CSS 코드를 기반으로 한 편집 가능한 예제를 제공합니다. 개발자는 여기서 속성(Props)을 변경해보고 실제 운영 환경에 적용할 코드를 즉시 복사할 수 있습니다. * **코드 샌드박스**: 개별 컴포넌트를 조합하여 라이브 프리뷰를 생성하고, 상태값이 포함된 URL을 통해 동료와 공유하거나 버그를 리포트하는 용도로 활용합니다. * **자동 생성되는 API 테이블**: 150개 이상의 컴포넌트 속성이 문서와 불일치하는 것을 방지하기 위해, 소스 코드에서 직접 속성 리스트와 설명을 추출하여 API 테이블을 자동으로 생성함으로써 신뢰할 수 있는 단일 소스(Single Source of Truth)를 유지합니다. ### 표준화된 기여 프로세스와 자동화 * **명확한 기여 가이드라인**: 성능, 접근성, 테스트, 명명 규칙 등 핵심 고려 사항을 포함한 가이드라인을 제공하여, 전사 엔지니어가 베스트 프랙티스를 유지하며 시스템을 발전시킬 수 있도록 돕습니다. * **CLI 툴링을 통한 보일러플레이트 제거**: `yarn component [name]`과 같은 명령어를 통해 유닛 테스트, 문서 예제 등 컴포넌트 생성에 필요한 기본 파일 구조를 자동으로 생성해 줍니다. 이를 통해 기여자는 단순 반복 작업 대신 설계와 성능 개선에 더 집중할 수 있습니다. 데이터독은 최근 비공개였던 DRUIDS 문서 사이트를 외부에 공개하며 자사의 UX 패턴을 공유하기 시작했습니다. 대규모 엔터프라이즈 환경에서 디자인 시스템의 성공은 단순히 아름다운 컴포넌트를 만드는 것이 아니라, 개발자와 디자이너가 시스템을 신뢰하고 손쉽게 사용할 수 있는 도구와 문화를 구축하는 데 있음을 잘 보여줍니다.

사용자 경험FigmaReactTypeScript+4

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년 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년 3월 23일·3분 읽기큐레이션 요약

모션의 예술과 영향력

디지털 제품의 모션은 장식이 아니라 사용자의 이해를 돕고, 상태와 피드백을 전달하며, 물리적 세계와 유사한 정신 모델을 형성하게 하는 중요한 설계 도구다. 좋은 애니메이션은 실용성과 개성을 함께 갖추되 사용자의 시간을 존중하고 방해하지 않아야 한다. 특히 접근성을 해치거나 불필요하게 산만한 모션은 제품 경험과 브랜드 인상을 악화시킬 수 있다. ## 물리적 세계를 디지털 경험으로 번역하는 모션 - 인간은 3차원적이고 움직임이 존재하는 물리적 환경에 적응해 왔기 때문에, 움직임을 통해 많은 의미를 직관적으로 해석한다. - 디지털 인터페이스에 모션을 추가하면 사용자가 별도의 설명 없이도 공간과 기능을 이해하는 데 도움이 된다. - 예를 들어 메뉴가 서랍처럼 열리고 닫히는 애니메이션은 다음과 같은 정신 모델을 전달한다. - 콘텐츠 상자가 열리고 닫힌다. - 다시 열어도 이전과 같은 내용이 있다. - 사용자가 인터페이스의 상태 변화를 예측할 수 있다. - 모션은 디지털 공간에서 “무엇이 일어나고 있는지”를 시각적으로 설명하는 역할을 한다. ## 상태와 피드백을 전달하는 움직임 - 로딩 바는 작업이 진행 중이며 곧 완료될 것이라는 정보를 제공한다. - 잘못된 비밀번호 입력 시 입력창이 흔들리는 효과는 고개를 젓는 동작처럼 오류를 직관적으로 전달한다. - 새로고침 후 차트나 그래프가 재배치되는 애니메이션은 데이터가 갱신되었다는 사실을 보여준다. - FigJam 타이머의 종료 시 흔들리는 축하 애니메이션처럼, 모션은 단순한 상태 전달을 넘어 감정과 분위기도 만들 수 있다. - Figma의 커서 채팅에서는 입력 중인 대화 말풍선이 커지며, 즉흥적이고 자연스러운 대화감을 형성한다. ## 마이크로애니메이션은 목적 중심으로 설계해야 한다 - 마이크로애니메이션은 짧은 시간 동안 UI를 활성화하거나 사용자의 흐름을 안내하는 움직임이다. - 아이콘을 의미 없이 추가하지 않듯, 애니메이션도 “움직임을 넣기 위해” 넣어서는 안 된다. - 각각의 애니메이션은 구체적인 사용자 문제를 해결해야 한다. - 오래된 백엔드 시스템 때문에 발생하는 처리 지연을 1~2초의 전환 애니메이션으로 자연스럽게 감출 수 있다. - 이때 애니메이션은 실제 처리 속도를 높이지 않더라도 제품이 더 빠르고 덜 끊기는 것처럼 느끼게 한다. ## 실용성과 개성을 함께 갖춘 좋은 모션 - 좋은 모션은 기능적 목적과 제품의 개성을 균형 있게 결합한다. - 사용자의 시간을 존중하고, 주의를 빼앗거나 작업을 지연시키지 않아야 한다. - 애플의 창 최소화 애니메이션은 창이 독의 아이콘 속으로 빨려 들어가는 듯한 효과를 보여준다. - 이 효과는 짧고 미묘하지만 다음 정보를 동시에 전달한다. - 창이 어디로 이동했는지 - 창을 다시 열려면 어떤 아이콘을 눌러야 하는지 - 창이 사라진 것이 아니라 보관되었다는 사실 - 다시 창을 열 때는 아이콘에서 창이 자라나는 듯한 역방향 애니메이션을 사용해 상태 변화의 연속성을 보여준다. ## 과도한 모션과 접근성 문제 - 애니메이션이 없어도 핵심 기능을 사용할 수 있도록 설계해야 한다. - 특정 움직임은 간질 환자 등 일부 사용자에게 발작을 유발할 수 있으므로 접근성을 고려해야 한다. - 모션은 다음과 같은 부작용을 일으킬 수 있다. - 화면을 복잡하고 산만하게 만든다. - 사용자의 작업을 중단시킨다. - 불필요한 단계를 추가한다. - 사용자를 혼란스럽게 하거나 불편하게 한다. - 반복되면서 브랜드에 대한 호감도를 서서히 떨어뜨린다. - 화면 곳곳에서 빠르고 과장된 움직임이 반복되면 사용자는 정확한 원인을 의식하지 못하더라도 제품을 피곤하고 성가시게 느낄 수 있다. - 따라서 각 애니메이션은 가장 우아하고 절제된 방식으로 사용자 문제를 해결하는지 검토해야 한다. 모션은 기능을 이해시키고 상태 변화를 설명하는 경우에 우선 적용하는 것이 좋다. 구현 전에는 “이 움직임이 어떤 정보를 전달하는가”, “없어도 사용 가능한가”, “접근성 설정이나 모션 감소 환경에서도 문제가 없는가”를 확인해야 한다.

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

사용자 경험Figma접근성motion-design+2

datadog·2022년 2월 22일원문

Datadog이 Datadog을 사용해 Datadog 사용자 경험에 대한 가시성을 확보하는 방법 (새 탭에서 열림)

Datadog은 정성적인 사용자 인터뷰를 보완하기 위해 자사의 모니터링 도구인 RUM(Real User Monitoring)과 로그를 직접 활용하여 디자인 의사결정에 필요한 정량적 데이터를 확보합니다. 이른바 '개밥 먹기(Dogfooding)' 전략을 통해 디자이너들은 실제 사용자의 행동 패턴을 정밀하게 분석하고, 이를 바탕으로 UI/UX의 복잡성을 줄이거나 기능을 고도화합니다. 결과적으로 자사 제품을 디자인 도구로 활용함으로써 데이터에 기반한 효율적인 개선과 팀 간의 원활한 협업을 이끌어내고 있습니다. ## 고정폭 글꼴(Monospace Font) 최적화 로그, 소스 코드 등 구조화된 데이터를 표시할 때 글자 폭이 일정한 고정폭 글꼴은 가독성과 레이아웃 예측 가능성 측면에서 매우 중요합니다. * 기존에는 사용자의 시스템 폰트에 의존했으나, 복잡한 테이블 구조에서 레이아웃 깨짐을 방지하기 위해 표준 폰트 도입이 필요했습니다. * Web API의 `Document.font` 인터페이스와 CSS Font Loading API를 활용하여 사용자의 브라우저에 실제로 로드된 폰트 데이터를 RUM으로 수집했습니다. * 수집된 데이터를 분석하여 가장 많은 사용자가 보고 있는 폰트와 유사한 시각적 크기를 가진 'Roboto Mono'를 최종 선정했습니다. * 배포 후에도 RUM 대시보드를 통해 모든 사용자에게 의도한 폰트가 정상적으로 적용되는지 검증했습니다. ## 사용자 상호작용 데이터를 통한 DraggablePane 단순화 패널 크기를 조절하는 DraggablePane 컴포넌트의 핸들은 크기가 작음에도 불구하고 너무 많은 제어 기능이 포함되어 사용자에게 혼란을 줄 우려가 있었습니다. * 어떤 기능이 실제로 유용한지 판단하기 위해 컴포넌트 내부에 커스텀 로거를 설치하여 개별 클릭 이벤트를 추적했습니다. * 데이터 분석 결과, 핸들에 위치한 최소화 및 최대화 버튼의 사용률이 극히 저조하다는 사실을 발견했습니다. * 시각적 노이즈를 줄이기 위해 해당 버튼들을 제거하는 대신, 핸들을 더블 클릭하면 동일한 기능이 수행되도록 상호작용 방식을 개선했습니다. ## 입력 오류 분석을 통한 시간 범위 구문 확장 사용자가 직접 텍스트를 입력해 시간 범위를 설정하는 기능에서, 시스템이 해석하지 못하는 구문을 파악하여 사용자 편의성을 높이고자 했습니다. * Datadog Logs를 사용하여 사용자가 입력한 구문 중 시스템이 해석에 실패한 '유효하지 않은 입력' 데이터를 전수 조사했습니다. * 데이터 분석을 통해 많은 사용자가 당시 지원되지 않던 "weeks" 키워드(예: last 1 week)를 빈번하게 입력하고 있음을 식별했습니다. * 분석된 패턴을 바탕으로 구문 해석 로직을 업데이트한 결과, 기능 출시 초기 약 10%에 달했던 입력 오류율을 5~6% 수준으로 즉시 낮추는 성과를 거두었습니다. 실제 사용자 데이터를 기반으로 한 디자인은 추측이 아닌 확신을 제공합니다. 디자이너가 직접 모니터링 도구를 활용해 사용자 피드백의 빈틈을 정량적으로 메우고, 이를 대시보드로 공유하여 엔지니어와 소통하는 프로세스는 제품의 완성도를 높이는 가장 강력한 방법 중 하나입니다.

사용자 경험데이터베이스 설계datadogreal-user-monitoring+4

datadog·2022년 2월 22일원문

Datadog이 Dat (새 탭에서 열림)

Datadog의 프로덕트 디자이너들은 사용자 경험을 개선하기 위해 인터뷰와 같은 정성적 조사뿐만 아니라, 자사 도구를 직접 활용하는 '도그푸딩(Dogfooding)'을 통해 정량적 데이터를 수집합니다. RUM(Real User Monitoring)과 로그 분석을 통해 실제 사용자의 행동 패턴을 파악함으로써, 디자인 가설을 검증하고 데이터에 기반한 의사결정을 내리고 있습니다. 이러한 접근 방식은 사용자 입장에서 제품을 이해하고 협업 효율을 높이는 데 큰 기여를 합니다. ## 데이터 기반의 고정폭 글꼴(Monospace Font) 선정 * 로그, 스택 트레이스, 소스 코드 등 정보 밀도가 높은 데이터를 일관되게 보여주기 위해 특정 고정폭 글꼴을 도입할 필요성이 제기되었습니다. * 기존에는 시스템 폰트에 의존했기 때문에, 새로운 폰트 도입 시 발생할 수 있는 레이아웃의 시각적 변화를 최소화하고자 사용자들이 현재 가장 많이 보고 있는 폰트가 무엇인지 파악해야 했습니다. * CSS Font Loading API와 Datadog RUM을 결합하여 사용자의 브라우저에 실제 로드된 폰트 정보를 수집하고 대시보드화했습니다. * 분석 결과 'Roboto Mono'를 최종 후보로 선정하여 앱 전체에 적용했으며, 배포 후에도 RUM을 통해 의도한 대로 폰트가 출력되는지 성공적으로 검증했습니다. ## 사용자 인터랙션 분석을 통한 컴포넌트 간소화 * 패널 크기를 조절하는 'DraggablePane' 컴포넌트의 핸들이 너무 좁아 다양한 기능을 담기에 UI가 복잡해지는 문제가 있었습니다. * 어떤 기능이 실제로 사용되는지 확인하기 위해 커스텀 로거를 심어 각 버튼(최소화, 최대화 등)의 클릭 빈도를 추적했습니다. * 로그 분석 결과 최소화 및 최대화 버튼의 사용량이 거의 없다는 사실을 발견하고, 해당 버튼들을 제거하는 대신 핸들 더블 클릭 이벤트로 기능을 대체하여 UI를 간소화했습니다. ## 입력 오류 데이터 분석을 통한 구문 지원 확장 * 사용자가 자유롭게 시간 범위를 텍스트로 입력할 수 있는 'DateRangePicker'를 개발했으나, 초기에는 지원하는 구문이 한정적이어서 사용자 의도를 정확히 파악하지 못하는 경우가 많았습니다. * 시스템이 해석하지 못한 '잘못된 입력(invalid input)' 데이터와 해당 입력이 발생한 페이지, 국가 등의 정보를 로그로 수집하여 패턴을 분석했습니다. * 분석 결과 다수의 사용자가 'weeks'라는 키워드를 포함한 구문(예: last 1 week)을 입력하고 있음을 확인했습니다. * 해당 키워드를 지원하도록 구문 분석 로직을 업데이트한 결과, 입력 에러율이 기존 10%에서 5~6%로 즉각 감소하는 성과를 거두었습니다. 사용자 경험(UX) 디자인 과정에서 데이터 모니터링 도구를 활용하는 것은 단순히 수치를 확인하는 것을 넘어, 디자이너가 개발자와 같은 언어로 소통하고 객관적인 근거로 제품을 개선할 수 있게 해줍니다. 특히 실시간 로그와 에러 데이터를 추적하는 환경을 구축하면 사용자 피드백을 기다리지 않고도 제품의 미비점을 선제적으로 발견하여 수정할 수 있습니다.

사용자 경험데이터베이스 설계datadogreal-user-monitoring+4

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

FigJam과 함께한 시간: 베타

FigJam은 원격 근무 확산으로 커진 협업·소통 수요에 대응해 탄생했으며, Figma는 완벽한 제품을 한 번에 만들기보다 베타 출시 후 사용자 피드백을 바탕으로 발전시키는 방식을 택했다. 제품의 방향과 우선순위는 내부 여러 팀과 실제 사용자들의 지속적인 의견을 통해 결정됐다. 그 결과 FigJam은 장기 비전을 유지하면서도 빠르게 개선되는 협업 제품으로 정식 출시 단계(GA)에 도달했다. ## 원격 근무가 만든 온라인 화이트보드의 필요성 - Figma는 원격 근무를 시작하며 사람들이 온라인 공간에서 더 많은 시간을 보내는 상황을 경험했다. - 사용자들은 Figma를 디자인 작업뿐 아니라 사람들과 연결되고 소통하는 공간으로도 활용했다. - 브레인스토밍, 팀 아이스브레이커, 사교 활동 등 비업무적 협업 수요도 커졌다. - Figma 내부에서도 함께 모일 수 있는 디지털 공간이 필요했기 때문에 FigJam 개발에 전사적인 추진력이 붙었다. ## 협업을 촉진하는 제품 관리 방식 - Figma에서는 좋은 아이디어와 결정이 특정 직책의 사람에게서만 나온다고 보지 않는다. - 제품 관리자의 역할을 최종 결정자라기보다, 여러 직군이 더 나은 결정을 내리도록 돕는 촉진자로 정의한다. - PM, 디자이너, 엔지니어뿐 아니라 지원, 영업, 마케팅 팀도 제품 아이디어와 우선순위 결정에 참여한다. - “혼자서는 위대한 제품을 만들 수 없다”는 원칙에 따라 제품 개발 자체를 협업 과정으로 운영했다. ## 베타 출시로 완벽주의를 극복하다 - FigJam은 Figma의 두 번째 제품이었기 때문에 기존 제품과 같은 수준의 완성도와 유지보수성을 확보해야 한다는 부담이 있었다. - 모든 것을 완벽하게 결정하려다 출시가 늦어질 위험이 있었다. - 이를 해결하기 위해 베타로 먼저 출시하고, 실제 사용자 반응을 바탕으로 제품을 반복 개선했다. - 베타는 단순한 시험판이 아니라 장기적인 제품 비전을 유지하면서도 변화하는 요구에 빠르게 대응하는 방법으로 활용됐다. ## 결정적인 문제부터 해결한 우선순위 설정 - 모든 세부 사항을 오래 논의하기보다, 다음 단계의 결정을 막는 핵심 문제를 먼저 해결했다. - 초기에는 Figma와 FigJam의 관계, 두 제품을 통합할지 별도 애플리케이션으로 만들지 등이 중요한 쟁점이었다. - 결정이 필요한 사안은 우선 판단한 뒤 이해관계자와 사용자에게 피드백을 받아 조정했다. - 알파 테스트에서 수집한 요청은 다음과 같이 분류했다. - 최초 출시 전에 반드시 해결해야 할 문제 - 초기 출시 이후 빠르게 추가할 기능 - 예를 들어 스티키 노트 작성자 표시 기능은 출시 필수 항목으로 분류했고, 타이머 기능은 후속 개선 항목으로 미뤘다. ## 알파 테스터와 지속적인 사용자 피드백 - 개발팀은 수백 명의 알파 테스터가 참여한 공동 Slack 공간을 운영했다. - 테스터들은 사용 중 발견한 문제와 개선 아이디어를 지속적으로 공유했다. - 출시 후에도 신규 기능을 먼저 사용하는 사용자 패널을 두고 적극적으로 의견을 수집했다. - 사용자 피드백은 Slack, 고객 지원 채널, Twitter 등 다양한 경로에서 얻었다. - 제품 결정의 기준은 기능 자체가 아니라 실제 FigJam 사용자가 필요로 하는 문제를 해결하는지 여부였다. ## FigJam 개발에서 얻은 방식 - 회사 차원의 명확한 목표가 있으면 새로운 제품도 짧은 기간 안에 여러 팀의 역량을 결집해 개발할 수 있다. - 초기부터 모든 답을 확정하기보다, 중요한 구조적 문제를 먼저 결정하고 나머지는 사용자의 반응을 보며 조정하는 것이 효과적이다. - 베타 출시는 불완전함을 감수하는 전략이 아니라, 실제 사용 환경에서 제품을 학습시키는 개발 과정이 될 수 있다. - 다양한 직군과 사용자로부터 아이디어를 얻고, 이를 출시 필수 기능과 후속 기능으로 구분하면 속도와 품질을 함께 관리할 수 있다. 실무적으로는 제품의 장기 방향은 분명히 유지하되, 초기에는 핵심 가설을 검증할 수 있는 수준으로 출시하고 실제 사용자 피드백을 우선순위 결정에 직접 반영하는 접근이 유용하다.

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

사용자 경험Figmafigjamslack+3

figma·2021년 11월 15일·2분 읽기큐레이션 요약

개편된 댓글 기능으로 작업 흐

Figma는 댓글 기능을 개선해 팀이 피드백을 더 쉽게 남기고, 이해하고, 반영할 수 있도록 했다. 댓글 접근성을 높이고, 짧고 구체적인 피드백을 유도하며, 디자이너가 작업 흐름을 유지한 채 댓글을 관리할 수 있게 만든 것이 핵심이다. 이를 통해 더 많은 협업자가 디자인 과정에 참여하면서도 피드백 과부하를 줄이는 것이 목표다. ## 댓글 접근성 향상 - 파일을 열어 보는 사람과 프로토타입 프레젠테이션 모드의 사용자가 댓글 사이드바를 쉽게 찾을 수 있도록 개선했다. - Figma에 익숙하지 않은 협업자도 댓글을 남기고 기존 피드백을 확인할 위치를 명확히 알 수 있게 했다. - 별도 도구를 사용하거나 피드백 자체를 생략하는 문제를 줄이고, 더 많은 구성원의 의견을 디자인 맥락 안에서 받을 수 있도록 했다. ## 더 구체적이고 이해하기 쉬운 피드백 - 댓글 작성창을 작게 만들어 한 댓글에 여러 질문을 섞기보다 짧고 명확한 의견을 남기도록 유도했다. - 리액션 기능을 추가해 간단한 동의나 감정을 빠르게 표현할 수 있게 했다. - 리액션은 댓글 스레드를 불필요하게 길게 만들지 않고, 다른 사람도 부담 없이 의견을 보탤 수 있도록 돕는다. - 여러 디자인이나 스티키 그룹처럼 넓은 범위에 대한 개념적 피드백은 캔버스 영역을 지정해 댓글로 남길 수 있다. - 특정 디자인 세부 사항부터 넓은 영역에 대한 의견까지, 피드백을 관련된 위치와 함께 확인할 수 있다. ## 작업 흐름을 유지하는 댓글 관리 - 댓글 핀이 기본적으로 표시되어 중요한 피드백을 놓치기 어렵게 했다. - 디자인을 수정하는 동안에도 관련 댓글을 열어 둔 채 작업할 수 있도록 개선했다. - 댓글 핀에는 작성자의 아바타와 댓글 미리보기가 표시되어, 누가 어떤 의견을 남겼는지 빠르게 파악할 수 있다. - 같은 영역에 댓글이 여러 개 있으면 클러스터로 묶어 캔버스가 댓글로 과도하게 복잡해지는 것을 방지한다. - 단순화된 화면 구성을 통해 피드백이 집중된 영역을 한눈에 확인할 수 있다. ## 많은 댓글을 빠르게 정리하는 기능 - 키워드나 작성자 이름으로 댓글을 검색할 수 있다. - 날짜를 기준으로 댓글을 정렬할 수 있다. - 즉시 답변하기 어려운 댓글은 ‘읽지 않음’으로 표시해 나중에 다시 확인할 수 있다. - 이러한 기능은 사일런트 크리틱, 디자인 스프린트 등 댓글이 많이 발생하는 협업 상황에서 피드백을 체계적으로 처리하도록 돕는다. 실무에서는 한 댓글에 여러 요청을 몰아넣기보다 질문과 요구사항을 나누고, 가능한 경우 관련 캔버스 영역에 댓글을 남기는 것이 좋다. 디자이너는 검색·정렬·읽지 않음 표시를 활용해 피드백을 우선순위별로 처리하면 작업 흐름을 유지하면서도 협업 의견을 놓치지 않을 수 있다.

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

사용자 경험Figma프로토타이핑figjam+2

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

학생 및 교육자를 위한

Figma는 학생과 교육자가 무료로 협업하며 수업, 피드백, 과제를 하나의 작업 공간에서 운영할 수 있도록 지원한다. 교육자는 대면·원격·비동기 수업을 유연하게 결합하고, 학생은 실제 업무에 가까운 협업 방식과 포트폴리오 제작 경험을 쌓을 수 있다. 글은 Figma를 단순한 디자인 도구가 아니라 가상 교실이자 커뮤니티 공간으로 활용하자고 제안한다. ## 교육자를 위한 가상 교실 - Figma Education 플랜은 학생과 교육자가 Professional 기능과 무제한 협업을 무료로 이용할 수 있도록 한다. - 실시간 협업과 비동기 작업을 모두 지원해 대면 수업, 원격 수업, 하이브리드 수업에 대응할 수 있다. - 하나의 Figma 파일에 강의 자료, 여러 페이지의 과제, 디자인 활동, 비평 내용을 모으면 수업의 단일 기준점이 된다. - 학생은 결석한 수업이나 이전 피드백을 파일에서 직접 확인할 수 있고, 교사는 과제와 대화를 한곳에서 추적할 수 있다. - 여러 명이 같은 파일에서 아이디어를 발전시키고 반복 작업을 수행하면서 수업 참여도가 높아진다. - 시각 중심의 참여 방식은 말로 발표하는 데 익숙하지 않은 학생이나 청각장애·난청 학생에게도 보다 평등한 참여 기회를 제공한다. - Figma 파일을 공동체 공간으로 활용할 수도 있다. 예를 들어 학생들이 자기소개, 사진, 댓글, 스티커를 추가하는 디지털 졸업앨범을 만들고 PDF로 내보낼 수 있다. ## 학생의 실무 역량과 포트폴리오 개발 - 실제 디자인 업무처럼 협업하고 작업 과정을 공개하는 경험을 제공한다. - 디자인이 선형적인 개인 작업에서 벗어나 다양한 직군과 함께 반복·수정하는 방식으로 변화하고 있다는 점을 수업에서 체험하게 한다. - 최종 결과물뿐 아니라 조사, 초기 아이디어, 여러 버전과 수정 과정까지 기록할 수 있어 포트폴리오 리뷰에 유리하다. - 채용 면접에서 결과물의 완성도뿐 아니라 문제를 어떻게 정의하고 해결했는지 설명할 수 있는 근거가 된다. - Figma Community에서 다른 사람의 파일을 복제하고 수정하거나 리믹스하면서 다양한 작업 방식을 배울 수 있다. ## 커뮤니티와 네트워킹 - Friends of Figma 학생 그룹에 참여하면 다른 디자이너와 교류하고 경험을 공유할 수 있다. - Figma Hackathon Program 같은 활동은 협업, 아이디어 구체화, 결과물 제작 경험을 제공한다. - Community 파일을 분석하고 재구성하는 과정은 독학과 실험을 위한 실용적인 학습 방법이다. - Figma는 학생 대상 뉴스레터를 통해 채용 시즌 준비, 포트폴리오 리뷰, 인턴십 활용법 등의 정보를 제공한다. ## 교육 프로그램의 접근성 개선 - Figma는 온라인 강좌, 부트캠프, 학교가 주관하는 해커톤까지 교육 프로그램의 범위를 확대해 왔다. - 2021년 새 학기를 앞두고 교실용 온보딩 절차를 단순화해 수업에서 더 쉽게 도입할 수 있도록 했다. - 교육자는 수업 템플릿과 활용 사례를 공유하고, 그룹 데모를 통해 Figma 기반 수업 운영 방법을 배울 수 있다. 학생과 교육자는 Figma를 과제 제출 도구로만 사용하기보다 강의 자료, 협업, 피드백, 커뮤니티 활동, 포트폴리오를 연결하는 통합 공간으로 활용하는 것이 좋다. 특히 학생은 작업 과정과 반복 기록을 꾸준히 남기고, 교육자는 하나의 파일 구조와 명확한 참여 규칙을 설계하면 학습 효과를 높일 수 있다.

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

사용자 경험Figma사용자 인터페이스design-collaboration+2

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

피그마 인사이드: 더 협

Figma는 초기 아이디어 단계의 협업을 Figma 디자인 파일보다 FigJam에 맡기면서 더 개방적이고 포용적인 디자인 프로세스를 만들었다. FigJam은 완성도 높은 결과물보다 아이디어 발산, 비동기 피드백, 디자이너·PM·엔지니어 간 공동 설계에 집중하게 한다. 그 결과 팀은 기술적 제약과 사용자 경험을 함께 검토하며 더 빠르게 기능을 구체화할 수 있었다. ## 초기 단계의 완성도 집착 줄이기 - Figma는 세밀한 디자인과 빠른 반복에 강하지만, 아이디어를 발산해야 하는 초기 단계에는 지나친 픽셀 단위 수정으로 이어질 수 있다. - FigJam은 시각적 결과물을 쉽게 만들되 완성도에 얽매이지 않도록 해, 팀이 디자인보다 아이디어와 사용자 반응에 집중하게 한다. - FigJam 기능을 기획할 때 디자이너 Jenny Wen은 트윗과 Slack 메시지 형태의 컴포넌트를 준비했다. - 팀원들은 컴포넌트를 복제해 기능 출시 후 사용자가 보일 법한 반응을 자유롭게 작성했다. - 구체적인 문구보다 사용자가 느낄 감정과 긍정적인 반응을 탐색하는 데 초점을 맞췄다. - 워크숍의 범위를 제한한 덕분에 세부 사항에 빠지지 않고 더 많은 아이디어를 빠르게 수집할 수 있었다. - 이후 반응이 좋은 아이디어를 Figma 파일로 옮겨 실제 디자인으로 발전시켰다. ## 비동기 방식으로 의견과 의사결정 정리하기 - FigJam의 스티키 노트에 작성자 이름을 표시하는 기능을 설계하면서 다음과 같은 여러 문제가 생겼다. - 사용자가 자신의 이름을 수정할 수 있는가 - 다른 사람이 스티키 노트를 수정하면 이름은 어떻게 바뀌는가 - 스티키 노트를 복사·붙여넣기하면 작성자 정보는 어떻게 처리되는가 - Jenny는 알파 사용자와 팀원에게 받은 피드백을 FigJam에 시각적으로 모아 분류했다. - 분류된 의견을 바탕으로 의사결정 트리를 만들고, 제안한 해결책을 Slack으로 공유했다. - 협업자들은 회의에 참석하거나 별도의 문서를 읽지 않고도: - 설계자의 사고 과정을 따라가고 - 의견을 추가하며 - 스탬프로 선호하는 방안에 투표할 수 있었다. - FigJam은 단순한 브레인스토밍 도구가 아니라, 복잡한 상호작용 문제를 공유하고 합의하는 문서 역할도 했다. ## 디자이너와 엔지니어의 공동 설계 - 디자이너 Keeyen Yeo는 FigJam의 하이파이브 기능을 설계하며 실제 사람들의 하이파이브 동작을 기본 도형과 연결선으로 표현했다. - 이전에는 종이에 아이디어를 스케치했기 때문에 팀원들이 과정에 참여하기 어려웠지만, FigJam에서는 같은 파일에서 여러 탐색안을 함께 수정할 수 있었다. - 디자이너와 제품 파트너는 상호작용 흐름을 반복적으로 검토하며 기능을 공동 설계했다. - 엔지니어 Willy Wu는 하이파이브 모드가 활성화되는 조건과 커서 감지 로직 등 기술적 측면을 다이어그램으로 정리했다. - 한 공간에서 사용자 경험과 구현 가능성을 동시에 논의함으로써: - 기술적으로 실현 가능한 범위를 파악하고 - 사용자에게 자연스러운 상호작용을 찾으며 - 여러 차례의 반복을 통해 최종 흐름을 완성할 수 있었다. ## 실용적인 시사점 초기 디자인 협업에서는 완성도 높은 화면보다 아이디어를 쉽게 표현하고 수정할 수 있는 환경이 중요하다. 팀의 참여를 넓히려면 범위를 제한한 워크숍, 시각적인 의사결정 기록, 비동기 투표와 피드백을 활용하고, 아이디어가 구체화된 뒤에 Figma와 같은 고정밀 도구로 전환하는 방식이 효과적이다.

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

사용자 경험Figma프로토타이핑figjam+2

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

In the file: Config

Config 2021의 Coda와 Stripe 사례는 디자인팀이 불확실성과 단기 요구를 다루면서도 장기적인 제품 방향과 확장성을 확보하는 방법을 보여준다. Coda는 사용자 데이터가 없는 0→1 단계에서 경쟁사 분석과 팀의 직관으로 관점을 세웠고, Stripe는 장기적 관점·튼튼한 기반·엄격한 품질 기준을 통해 복잡한 결제 경험을 단순화했다. 두 사례 모두 명확한 비전과 이를 공유하는 프로세스가 팀 정렬과 좋은 제품 결정의 핵심이라고 강조한다. ## 0→1 제품에서 맥락 만들기 - Coda의 Helena Jaramillo는 기존 제품을 개선하는 대신, 새로운 퍼블리싱 플랫폼을 처음부터 구축하는 과제를 맡았다. - 초기 제품에는 기존 사용자의 행동 데이터나 인터뷰할 사용자 자체가 없었기 때문에 일반적인 리서치 인사이트를 활용하기 어려웠다. - 이를 보완하기 위해 경쟁 제품과 인접 분야의 서비스를 조사했다. - 조사 결과를 Figma 파일에 스크린샷과 주석으로 정리해 다음을 공유했다. - 어떤 접근 방식이 효과적인지 - 어떤 방식은 Coda에 적합하지 않은지 - 경쟁 제품에서 참고할 만한 패턴은 무엇인지 - 데이터가 부족한 초기 단계에서는 외부 사례를 체계적으로 분석해 팀이 논의할 수 있는 공통 맥락을 만드는 것이 중요하다. ## 강한 제품 관점과 비전 수립 - Coda는 사람들이 왜 Coda에서 콘텐츠를 발행해야 하는지, Coda만의 차별점이 무엇인지부터 질문했다. - 퍼블리싱 경험이 다음 중 무엇에 가까워야 하는지 검토했다. - 블로그 글을 발행하는 경험 - 노코드 앱을 만드는 경험 - 웹사이트를 제작하는 경험 - Helena 자신의 퍼블리셔 경험과 팀 토론을 바탕으로 두 가지 우선순위를 도출했다. - 발행 과정을 쉽게 만들 것 - 발행자가 자신의 결과물을 자랑스럽게 느끼게 할 것 - 이 관점은 구체적인 제품 결정으로 이어졌다. - 인터랙티브 문서를 쉽게 발행할 수 있는 흐름 - 사진, 부제목, 작성자 정보를 추가할 수 있는 기능 - 사용자 인사이트가 부족하더라도 팀이 함께 명확한 관점을 세우면 일관된 제품 방향을 결정할 수 있다. ## 복잡한 아이디어를 이야기로 전달하기 - Helena는 기능 목록만 설명하는 대신 제품이 만들고자 하는 경험을 하나의 이야기로 전달했다. - 이를 위해 Figma에 “tl;dr 페이지”를 만들고 다음을 포함했다. - 핵심 사용자 흐름 - 소수의 대표 목업 - 팀이 만들려는 경험의 전체적인 서사 - 이 페이지는 세부 기능을 모두 설명하기보다, 협업자가 짧은 시간 안에 제품의 방향을 이해하도록 돕는 역할을 했다. - 크로스펑셔널 팀을 설득할 때는 상세한 사양보다 문제, 사용자 경험, 제품의 의도를 한눈에 보여주는 자료가 효과적이다. ## 단기 요구와 장기 확장성의 균형 - Stripe 디자인팀은 기업과 최종 사용자가 겪는 복잡한 프로세스를 최대한 단순하고 쉽게 만드는 것을 목표로 한다. - 이를 위해 당장의 요구를 해결하는 동시에 장기적으로 확장 가능한 시스템과 프로세스를 구축한다. - Connie Yang은 이를 “도시 계획가의 사고방식”에 비유했다. - 개별 건물이나 차량만 설계하지 않는다. - 도로의 폭과 교통 흐름을 고려한다. - 시스템 간 연결 관계를 설계한다. - 화재나 재난 같은 미래의 예외 상황에도 대비한다. - 팀은 현재의 속도를 유지하면서도 “2030년까지 작동할 구조인가”를 질문한다. ## 튼튼한 기반과 확장 가능한 시스템 - 장기적 관점은 인프라와 디자인 시스템에 대한 투자로 구체화된다. - Stripe가 말하는 견고한 기반에는 다음이 포함된다. - 빠르고 접근성 높은 제품과 플랫폼 구축 - 임시방편보다 확장 가능한 시스템 개발 - 반복적으로 활용할 수 있는 공통 규칙과 구조 마련 - Stripe 디자인 시스템의 색상 테이블에는 색상 대비와 접근성 평가 정보가 내장되어 있다. - 디자이너가 매번 접근성을 별도로 확인하지 않아도 되며, 시스템 자체가 더 나은 결정을 유도한다. - 이런 기반은 팀의 생산성을 높이는 동시에 최종 사용자의 경험과 접근성도 개선한다. ## 엄격한 품질 기준과 사용자 신뢰 - Stripe에서는 “디테일이 중요하다”는 원칙을 중시한다. - Stripe는 결제 승인과 대금 지급처럼 신뢰가 핵심인 업무를 다루므로, 작은 UI 요소도 사용자 경험과 신뢰에 영향을 준다. - 때로는 구현이 더 어렵거나 시간이 오래 걸리더라도, 최종적으로 더 안전하고 명확한 경험을 제공하는 방식을 선택한다. - 단기적으로 빠른 해결책을 택하기보다 품질, 정확성, 접근성을 높이는 선택이 장기적인 제품 신뢰로 이어진다. ## 실무에 적용할 때의 시사점 - 데이터가 부족한 초기 제품이라면 경쟁사와 인접 분야를 조사해 팀의 공통 맥락을 만든다. - 팀의 직관을 막연한 의견으로 두지 말고, 명확한 제품 원칙과 우선순위로 정리한다. - 세부 기능보다 사용자 흐름과 제품의 핵심 이야기를 먼저 공유한다. - 단기 요구를 해결할 때도 디자인 시스템, 접근성, 성능처럼 미래에 반복될 기반을 함께 설계한다. - 빠른 실행과 장기적 품질 사이에서 균형을 잡되, 사용자 신뢰가 중요한 영역에서는 품질 기준을 낮추지 않는 것이 좋다.

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

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

figma·2021년 4월 6일원문

렙솔(Repsol) (새 탭에서 열림)

스페인 최대 에너지 기업인 렙솔(Repsol)은 2050년 탄소 중립 달성을 목표로, 난해한 에너지 개념을 소비자가 친숙하게 느낄 수 있도록 디자인 중심의 디지털 전환을 추진하고 있습니다. 이를 위해 렙솔은 디자인 에이전시 및 피그마(Figma)와 협력하여 전사 통합 디자인 시스템인 '옥시젠(Oxygen)'을 구축하고 분산되어 있던 사용자 경험을 하나로 통합했습니다. 결과적으로 디자인은 단순한 시각적 개선을 넘어 제품 구현에 필요한 리소스를 30% 절감하고, 기업의 비즈니스 가치를 측정 가능한 수치로 증명하는 핵심 전략으로 자리 잡았습니다. **에너지 경험의 재정의와 시각화** * **인간 중심의 에너지:** 에너지를 '필요악'이 아닌 사용자가 주도적으로 관리할 수 있는 대상으로 변화시키기 위해 디자인을 활용합니다. * **실시간 가시성 제공:** 단순히 요금 고지서를 발행하는 것에 그치지 않고, 현재 날씨에 맞춰 실시간으로 가동되는 태양광 패널이나 풍력 발전기의 정보를 앱 내에서 시각적으로 보여줌으로써 에너지 사용에 대한 실감을 높였습니다. * **행동 변화 유도:** 전기차 공유 서비스 앱을 통해 주행 중 에너지 소비량을 보여주고 효율성에 따른 등급을 부여하여, 사용자가 더 효율적으로 에너지를 소비하도록 독려합니다. **Oxygen 디자인 시스템을 통한 통합** * **일관된 상호작용 언어:** 과거 10개의 제품이 각기 다른 방식으로 사용자와 소통하던 문제를 해결하기 위해, 모든 디지털 제품에 적용되는 공통의 패턴, 컴포넌트, 가이드를 구축했습니다. * **커뮤니케이션 허브로서의 피그마:** 피그마를 중심 도구로 채택하여 실무 디자이너부터 경영진까지 실시간으로 의견을 공유하고 아이디어를 반복 수정할 수 있는 환경을 조성했습니다. * **워크플로우 최적화:** 기존에 사용하던 Sketch, Invision, PowerPoint 등의 도구를 피그마 하나로 대체하여 15개 이상의 프로젝트를 동시에 일관성 있게 관리할 수 있게 되었습니다. **디자인 성과 측정과 효율성 증대** * **전용 플러그인 활용:** 피그메트릭스(Figmetrics)와 MSVM 플러그인을 개발하여 컴포넌트 활용도와 팀 간 정렬 상태를 추적하고 디자인의 투자 대비 효율(ROI)을 데이터로 입증했습니다. * **운영 효율성 개선:** 새로운 디자인 시스템 도입 이후 제품 구현에 드는 작업량을 기존 대비 30% 절감하는 성과를 거두었습니다. * **단일 진실 공급원(Single Source of Truth):** 디자인, 제품 관리, 비즈니스, 기술 팀이 동일한 기준 아래 협업함으로써 의사결정 프로세스를 단순화했습니다. 에너지 산업과 같이 복잡하고 보이지 않는 가치를 다루는 기업일수록 디자인 시스템은 단순한 도구를 넘어 비즈니스의 효율성과 사용자 신뢰를 구축하는 강력한 기반이 됩니다. 렙솔의 사례처럼 디자인 시스템을 통해 확보한 여유 자원을 기업의 본질적인 미션인 탄소 중립과 혁신에 재투자하는 선순환 구조를 구축할 것을 권장합니다.

사용자 경험Figma디자인 시스템product-development+3

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

Variants로 디자인과 코드의

Figma의 Variants는 하나의 컴포넌트에 존재하는 여러 변형을 하나의 컴포넌트 세트로 묶어 디자인 시스템과 코드의 구조를 가깝게 연결한다. 디자이너는 관련 변형을 쉽게 탐색·관리하고, 개발자는 상태·스타일·크기 같은 속성을 코드의 컴포넌트처럼 이해할 수 있다. Figma는 사용자 관찰과 6주간 4차례의 사용성 테스트를 통해 기능 구조와 UI, 명칭을 다듬었다. ## 디자인과 코드의 사고방식 맞추기 - 개발은 재사용성과 확장성을 중시하고, 디자인은 자유로운 반복과 탐색을 중시한다. - 기존 Figma 컴포넌트는 관련 변형을 찾거나 전환하기 어려웠고, 인스턴스 교체 메뉴가 지나치게 복잡해지는 문제가 있었다. - 디자인 시스템이 커지면서 팀들은 `default/primary/large/icon` 같은 슬래시 기반 이름 규칙을 사용해 상태와 속성을 표현했다. - Variants는 이를 `state="hover"`, `style="secondary"`처럼 **속성명:값** 구조로 발전시킨다. - 상태뿐 아니라 `type`, `color`, `size` 등 여러 차원의 속성을 지원해 코드의 컴포넌트 모델과 더 유사하게 구성할 수 있다. ## 변형을 한곳에 모으는 컴포넌트 세트 - Figma는 디자인 시스템 관리자가 변형들을 그리드에 배치하고 나란히 비교한다는 점을 관찰했다. - 이에 따라 하나의 컴포넌트에 속한 여러 Variants를 캔버스에 side-by-side로 배치할 수 있도록 설계했다. - 이 방식은 다음 작업에 유용하다. - 변형 간 시각적 비교 - 디자인 반복 작업 - 라이브러리 유지보수 - 전체 디자인 시스템 구조 파악 - 기존 컴포넌트 변형들을 모두 선택한 뒤 **Combine Variants**를 클릭하면 하나의 컴포넌트 세트로 쉽게 전환할 수 있다. ## 사용성 테스트로 다듬은 UI - Figma는 작동하는 프로토타입을 제작하고 6주 동안 네 차례 사용성 테스트를 진행했다. - 초기 UI는 모든 속성값을 pill 형태로 표시했다. - 하지만 pill은 일반적으로 여러 태그를 동시에 표시하는 요소로 인식되기 때문에, 사용자는 특정 변형의 속성을 조정하는 UI로 이해하기 어려워했다. - 최종적으로는 다음과 같이 변경했다. - 특정 Variant를 선택했을 때는 각 속성을 간단한 입력 필드와 드롭다운으로 표시 - 전체 컴포넌트 세트의 속성과 값을 한눈에 볼 때는 pill UI 유지 - 기본 속성명도 `State`, `Style`처럼 미리 정해진 용어보다 `Property 1`, `Property 2`를 사용했다. - 사용자가 이를 `Type`, `Size` 등 자신의 디자인 시스템에 맞는 이름으로 직접 커스터마이즈하도록 한 것이다. ## 기능 이름을 ‘States’에서 ‘Variants’로 변경 - 초기에는 주요 사용 사례가 버튼의 hover, active, disabled 같은 인터랙션 상태였기 때문에 기능명을 **States**로 정했다. - 그러나 사용자들은 이 이름이 기능을 상태 관리에만 한정하는 것처럼 보인다고 지적했다. - Variants는 상태뿐 아니라 색상, 크기, 유형 등 다양한 속성 조합을 표현할 수 있다. - Fidelity Investments의 피드백을 계기로 기능의 전체 범위를 더 잘 드러내는 **Variants**라는 이름을 채택했다. - 이후 사용성 테스트에서도 Variants가 기능의 목적과 확장성을 더 직관적으로 전달하는 것으로 검증됐다. ## 디자인-개발 협업을 위한 확장 - Variants는 컴포넌트의 구조를 코드와 유사하게 만들어 디자이너와 개발자가 같은 개념으로 대화하도록 돕는다. - Auto Layout 업데이트와 Inspect 패널 개선도 함께 제공되어 디자인을 구현으로 전달하는 과정이 간결해진다. - 단순한 상태 관리부터 여러 속성을 조합한 복잡한 디자인 시스템까지 동일한 방식으로 관리할 수 있다. 실무에서는 버튼, 입력창, 카드처럼 상태·크기·스타일 변형이 많은 컴포넌트부터 Variants로 통합하는 것이 효과적이다. 속성명은 팀의 코드 규칙과 일치시키고, 변형을 체계적인 속성-값 조합으로 정의하면 디자인 시스템 유지보수와 개발 협업을 모두 개선할 수 있다.

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

사용자 경험Figma디자인 시스템auto-layout+2