techlist.io
KREN

Figma/사용자 경험

140 개의 포스트

figma3분 읽기큐레이션 요약

Figma Slides로 승기를

Figma Slides는 Figma의 높은 시각적 완성도와 FigJam의 협업·피드백 기능을 결합한 프레젠테이션 도구로, 2024년 6월 오픈 베타로 공개됐다. 디자이너는 기존 Figma 작업 방식을 그대로 활용하고, 비디자이너는 쉽게 콘텐츠를 편집하며 함께 발표 자료를 만들 수 있다. Figma는 이를 통해 일방적인 발표 자료를 설득과 피드백이 오가는 대화형 스토리텔링 도구로 발전시키고자 한다. ## 프레젠테이션 제작의 어려움 - 발표자의 45%는 창의적인 레이아웃을 만드는 데 어려움을 겪는다. - 41%는 적절한 시각 자료를 찾고 활용하는 일을 어렵게 느낀다. - 47%는 프레젠테이션 디자인에 8시간 이상을 사용한다. - Figma 사용자들은 최근 1년 동안 약 350만 개의 프레젠테이션을 제작했지만, 실제 발표를 위해 다른 도구로 작업물을 옮기거나 프로토타입을 별도로 공유해야 했다. - Figma Slides는 이런 단절을 줄이고 디자인과 발표 준비를 한 공간에서 처리하도록 설계됐다. ## Figma의 디자인 기능을 활용한 슬라이드 제작 - 기존 슬라이드 도구에서 부족했던 **발표자 노트**와 **슬라이드 전환 효과**를 제공한다. - 기본 도구 모드에서는 텍스트, 이미지, 도형을 사용해 빠르게 발표 자료를 만들 수 있다. - **디자인 모드**를 켜면 Figma Design의 고급 기능을 사용할 수 있다. - Auto Layout - 정교한 정렬 및 배치 - 고급 속성 - 인터랙티브 컴포넌트와 상태 - Figma에서 복사한 호버 상태 등의 인터랙티브 컴포넌트는 발표 중에도 동작한다. - 이미지와 시각 자료가 메시지의 효과와 참여도를 높인다는 연구 결과를 바탕으로, 시각적 완성도를 핵심 가치로 삼는다. ## 디자인 라이브러리와 에셋의 재사용 - Figma에서 구축한 텍스트 스타일, 색상 스타일, 컴포넌트와 에셋을 Figma Slides에서도 바로 사용할 수 있다. - UI 디자인을 이미지로 하나씩 내보내야 했던 기존 작업을 없애고, Figma 제품군 전체에서 복사·붙여넣기 방식으로 재사용할 수 있다. - 디자이너가 기존 디자인 시스템을 유지하면서 발표 자료를 제작할 수 있다. ## Grid View를 통한 스토리 구성 - 슬라이드를 한 장씩 편집하는 단일 슬라이드 보기와 전체 흐름을 확인하는 **Grid View**를 제공한다. - Grid View에서는 슬라이드가 행 단위로 배치되어 발표의 전체 구조를 한눈에 볼 수 있다. - 슬라이드 순서를 쉽게 바꾸며 이야기의 흐름과 섹션 구성을 조정할 수 있다. - 단일 슬라이드 보기와 Grid View 사이를 오갈 때 변경 사항이 동기화된다. - 특히 20장 이상의 발표 자료에서 전체 내러티브를 재구성하기 어려운 문제를 해결하는 데 초점을 둔다. ## 일방적인 발표에서 협업형 대화로 - Figma는 FigJam을 통해 회의에서 여러 사람이 동시에 의견을 내는 협업 방식을 경험했고, 기존 발표 방식의 비효율을 발견했다. - 기존 프레젠테이션은 한 사람이 말하고 나머지는 듣는 구조가 되기 쉽다. - Figma Slides는 디자이너와 비디자이너가 같은 공간에서 자료를 만들고 의견을 주고받도록 설계됐다. - 제품 검토, 영업 제안, 투자 피치 등 다양한 상황에서 발표 자료를 단순한 문서가 아니라 합의를 이끌어내는 커뮤니케이션 도구로 활용하는 것이 목표다. Figma Slides는 기존 Figma 디자인 자산을 적극적으로 활용하는 팀이나, 발표 자료 제작 과정에 디자이너와 비디자이너가 함께 참여해야 하는 조직에 특히 적합하다. 발표용 슬라이드와 실제 디자인 작업 사이의 변환 과정을 줄이고, 전체 이야기 구조를 Grid View에서 점검하는 방식으로 활용하면 효과적이다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmafigjamdesign-collaboration+3
figma3분 읽기큐레이션 요약

새로워진 Figma 내부

Figma의 UI3는 기능을 계속 추가하면서 복잡해진 인터페이스를 정리하고, 사용자의 작업물을 화면 중심에 두기 위한 대규모 redesign이다. 캔버스 공간을 넓히면서도 기존 사용자의 작업 습관과 전문 기능은 유지하고, 신규 사용자에게는 더 직관적인 경험을 제공하는 것이 목표다. 또한 컴포넌트, 생성형 AI, Dev Mode, Figma Slides 등 변화하는 디자인 환경에 대응할 수 있는 기반을 마련하려는 개편이다. ## UI3를 시작한 배경 - Figma는 출시 후 약 10년 동안 많은 기능과 제품을 추가했지만, 기본 레이아웃은 크게 변하지 않았다. - 기능이 누적되면서 처음에는 단순했던 인터페이스가 점점 복잡하고 부담스럽게 느껴질 수 있게 됐다. - UI3는 Figma 출시 이후 세 번째 주요 redesign으로, 단순한 시각적 변경이 아니라 워크플로와 인터랙션 방식까지 재설계한다. - 기존 사용자가 익숙한 작업 방식을 잃지 않으면서도, 새로운 사용자에게 더 접근하기 쉬운 인터페이스를 만드는 것이 중요한 과제였다. ## UI3가 해결하려는 네 가지 문제 - **UI보다 사용자의 아이디어를 중심에 두기** - 인터랙티브 컴포넌트와 AI 지원 디자인처럼 강력한 기능이 추가되면서 UI가 작업 자체보다 눈에 띌 위험이 생겼다. - 기능이 부가적으로 덧붙은 느낌을 줄이고, 캔버스와 사용자의 창작물에 집중하도록 설계 방향을 잡았다. - **신규 사용자와 전문 디자이너의 요구 균형** - 기존 인터페이스는 처음 접하는 사용자에게 복잡하고 비직관적으로 보일 수 있었다. - 기능의 범위를 줄이는 것이 아니라, 기능을 이해하고 접근하는 방식을 단순화하려 했다. - 숙련된 사용자의 익숙한 조작 감각과 작업 효율은 보존하는 것을 목표로 삼았다. - **변화하는 디자인 방식에 대응** - 오늘날 디자인은 단순히 픽셀을 배치하는 작업을 넘어, 재사용 가능한 컴포넌트와 생성형 AI를 활용하는 방식으로 확장되고 있다. - 이에 따라 디자이너가 개별 요소뿐 아니라 더 높은 수준의 추상화된 building block을 사용할 수 있어야 한다고 보았다. - **Figma의 미래를 위한 기반 마련** - Dev Mode를 통해 디자인과 코드를 연결하고, Figma AI로 작업 효율을 높이는 방향을 고려했다. - Figma Slides 같은 새로운 제품까지 포함해, 여러 도구가 일관된 제품군으로 작동할 수 있는 공통 구조를 만들고자 했다. ## 캔버스 공간을 넓히는 인터페이스 - 가장 먼저 Figma 캔버스의 사용 가능한 공간을 최대화하는 작업을 진행했다. - 초기에는 패널과 속성 영역을 거의 제거하고, 마우스를 올릴 때만 UI가 나타나는 극단적인 미니멀 디자인도 실험했다. - 사이드바가 필요할 때만 나타나는 방식도 시도했지만, 화면 구조가 지나치게 불안정해지는 문제가 있었다. - 수백 가지 시안을 제작하고 Figma 팀 내부에서 직접 사용하며 개선 방향을 검증했다. - 최종적으로 다음과 같은 방향을 선택했다. - 크기를 조절할 수 있는 패널 - 캔버스 하단의 얇은 새 툴바 - 상단 영역을 비워 더 넓고 여유로운 화면 구성 - 필요할 때 패널을 열고 닫을 수 있는 구조 - UI 전체를 숨겨 작업물에만 집중할 수 있는 기능 - 이 구조는 Figma의 여러 제품에서 공통으로 사용할 수 있어, 제품 간 전환과 확장에도 유리한 기반이 된다. ## 실용적인 의미 UI3의 핵심은 기능을 없애는 것이 아니라, 기능이 작업을 방해하지 않도록 배치와 노출 방식을 재조정하는 데 있다. 따라서 사용자는 평소에는 넓은 캔버스에 집중하고, 필요한 순간에만 패널과 도구를 불러오는 방식으로 작업할 수 있다. Figma를 사용하는 팀이라면 UI3의 패널 접기·크기 조절 기능과 캔버스 중심 작업 방식을 적극 활용하는 것이 효율 향상에 도움이 된다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템생성형 AI+2
figma3분 읽기큐레이션 요약

Figma AI를 소개

Figma는 디자이너의 창작 정체를 해소하고 반복 작업을 줄이기 위해 Figma AI를 출시했다. 주요 기능은 이미지·영역·텍스트 기반의 Visual Search와 의미를 이해하는 AI Asset Search이며, 디자인 탐색과 재사용을 더 쉽게 만드는 것이 목표다. 베타 기간에는 무료로 제공되지만, 향후 사용량 제한과 정식 출시 후 가격 정책이 적용될 수 있다. ## Figma AI의 목표와 제공 방식 - AI를 단순한 유행이 아니라 실제 사용자 문제를 해결하는 도구로 활용한다. - 영감 탐색, 여러 디자인 방향의 실험, 반복적이고 번거로운 작업 자동화를 지원한다. - 디자인 프로세스의 어느 단계에서든 사용자가 작업을 계속 진행하도록 돕는 것을 목표로 한다. - Figma AI와 UI3는 2024년 당시 제한적 베타로 제공되며, 사용자는 Figma 화면 하단의 `?` 메뉴에서 대기자 명단에 등록할 수 있다. - 베타 기간에는 모든 사용자에게 무료로 제공되지만, 운영 비용과 사용 패턴에 따라 사용량 제한이 도입될 수 있다. - 정식 출시 시 가격 정책을 별도로 안내할 예정이다. ## 이미지와 디자인을 찾는 Visual Search - 사용자가 이미지를 업로드하거나, 캔버스의 특정 영역을 선택하거나, 텍스트 검색어를 입력하면 시각적으로 유사한 디자인을 찾아준다. - 사용자가 접근 권한을 가진 팀 내 모든 파일에서 관련 디자인을 검색한다. - 검색 결과에서 적절한 프레임을 현재 작업 중인 파일에 바로 삽입할 수 있다. - 기존 제작물이나 제품 스크린샷을 출발점으로 삼는 디자이너가 필요한 디자인을 빠르게 재사용할 수 있다. - 향후에는 Figma Community 파일까지 검색 범위를 확대할 계획이다. - 커뮤니티 리소스 검색 결과에는 원작자 표기를 제공하고, 원본 파일이나 제작자의 다른 작업으로 이동할 수 있도록 할 예정이다. ## 의미를 이해하는 AI Asset Search - Assets 패널의 기존 검색 기능을 AI 기반으로 개선했다. - 단순히 컴포넌트 이름에 검색어가 포함되는지 확인하는 대신, 검색어의 의미와 디자인 요소가 사용되는 맥락을 분석한다. - 예를 들어 `primary button`을 검색하면 실제 컴포넌트 이름이 `btn_large`처럼 되어 있어도 관련 버튼을 찾아준다. - 디자인 시스템의 명명 규칙이 일관되지 않거나 조직 규모가 커서 컴포넌트를 찾기 어려운 상황에서 유용하다. - 키워드를 정확히 기억하지 않아도 자연어에 가까운 방식으로 적절한 컴포넌트와 에셋을 탐색할 수 있게 한다. ## 디자이너의 작업 흐름을 돕는 방향 - Figma AI는 처음부터 새로 만드는 작업뿐 아니라 기존 디자인을 찾고 발전시키는 과정도 지원한다. - Visual Search는 시각적 유사성을 기반으로 영감과 재사용 가능한 결과물을 제공한다. - Asset Search는 디자인 시스템 내부의 컴포넌트를 더 직관적으로 찾도록 돕는다. - 결과적으로 탐색에 소요되는 시간을 줄이고, 디자이너가 실제 문제 해결과 창의적 의사결정에 더 집중하도록 하는 것이 제품의 방향이다. 실무에서는 팀의 디자인 시스템에 일관된 이름을 적용하는 것이 여전히 중요하지만, Figma AI의 검색 기능을 활용하면 기존 자산의 명칭이 제각각인 조직에서도 컴포넌트 탐색과 재사용 효율을 높일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험AI디자인 시스템생성형 AI+2
figma3분 읽기큐레이션 요약

Config 202

Config 2024는 전 세계 제품 제작자들이 모여 디자인, 기술, 창의성에 대해 공유한 Figma의 연례 콘퍼런스다. 글은 현장 분위기와 주요 세션을 실시간으로 전하며, 창작자가 외부 세계의 영향과 자신의 경험을 제품에 반영해야 한다는 메시지를 강조한다. 행사 이후에는 세션 영상과 출시 요약을 제공하고, 아시아·태평양 지역을 위한 Config APAC 개최 소식도 안내한다. ## Config 2024의 규모와 현장 분위기 - 전 세계 참석자, 발표자, 자원봉사자, Figma 직원이 행사를 함께 만들었다. - 샌프란시스코 Moscone 행사장과 온라인 무대에서 세션이 진행됐다. - 주요 프로그램에는 다음과 같은 세션이 포함됐다. - `Design of Everything` - 신규 기능 요약 및 Friends of Figma - Figma EDU - `Figma like the pros` - Config 2024 회고 - 참석자들은 전시장, 전시물, 굿즈 매장, Maker Space에서 교류했다. - 행사 영상은 YouTube 플레이리스트에서 다시 볼 수 있으며, 별도의 출시 요약 글도 제공됐다. ## 외부 세계에서 영감을 얻는 디자인 - The Browser Company의 Karla Mickens Cole과 Nashilu “Nash” Mouen이 `Designing for Everything` 키노트를 진행했다. - 두 발표자는 직선적이고 예측 가능한 디자인 관습을 깨고 새로운 기대를 만들어내는 방법을 이야기했다. - 제품에 창작자의 진정한 경험과 개성을 흔적으로 남기는 것을 중요한 원칙으로 제시했다. - Nash는 기술 내부의 관습만 참고해서는 새로운 제품을 만들기 어렵고, 기술 외부의 문화·이야기·브랜드에서 영감을 얻어야 한다고 강조했다. - 이는 제품 디자인이 기능 구현을 넘어 창작자의 배경과 다양한 세계관을 반영해야 한다는 메시지로 이어진다. ## AI와 디지털 아트의 가능성 - 디지털 아티스트 Refik Anadol은 Figma의 DesignOps 디렉터 Meredith Black과 대담했다. - 그의 작품 `Unsupervised`는 MoMA의 아카이브를 AI로 해석하고 변형하는 디지털 아트 작품이다. - Anadol은 이를 통해 “기계가 꿀 수 있는 가능한 꿈”을 계산했다고 설명했다. - AI가 데이터를 단순화한다는 비판에 대해서는 비평자의 관점과 의도를 함께 살펴봐야 한다고 답했다. - 대담은 AI가 예술과 데이터 해석의 방식을 바꾸는 동시에, 디지털 아트에 대한 기존 미술계의 인식에도 질문을 던진다는 점을 보여준다. ## 실패와 놀이에서 출발하는 창의성 - 발명가이자 유튜버인 Simone Giertz는 양치질 헬멧, 사람을 깨우는 알람시계, 수프를 먹여주는 로봇 등 유쾌한 발명품을 소개했다. - 스타트업을 그만둔 뒤 스스로 놀 수 있는 여유를 허용하면서 창의성이 다시 살아났다고 설명했다. - 지나치게 탁월해야 한다는 압박보다 실험과 놀이가 더 효과적일 수 있다고 말했다. - “어렵다고 해서 중요한 것은 아니다”라는 관점으로 일의 우선순위를 재고했다. - 자신의 자기비하적 태도가 능력을 약화시킬 수 있다는 점을 깨닫고, 2019년 제품 디자인 회사 Yetch를 설립했다. - 참가자들에게 벽돌 하나의 용도를 2분 동안 최대한 많이 생각하게 하는 브레인스토밍을 진행해, 엉뚱한 아이디어를 의도적으로 끌어냈다. - 그녀는 자신의 직업을 직접 발명한 것이 가장 좋아하는 발명이라고 표현했다. ## 커뮤니티와 브랜드 경험 - Figma Store에는 후디, 티셔츠 등 독특한 디자인의 굿즈를 구매하려는 긴 줄이 이어졌다. - 참가자들은 Figma의 굿즈가 브랜드의 개성과 유머를 잘 보여준다고 평가했다. - Maker Space의 Customization Station에서는 참가자가 토트백에 패치를 붙여 직접 꾸밀 수 있었다. - Aura portrait 같은 체험형 프로그램도 운영되어, 단순한 강연을 넘어 참가자가 행사 콘텐츠를 직접 만들고 공유하도록 했다. - 이러한 활동은 Figma가 소프트웨어뿐 아니라 커뮤니티와 물리적 브랜드 경험까지 함께 구축하고 있음을 보여준다. 행사의 메시지를 실무에 적용한다면, 익숙한 업계 사례만 반복해서 참고하기보다 예술·문화·개인 경험 등 다양한 외부 자극을 제품에 연결하는 것이 좋다. 또한 초기 아이디어 단계에서는 완성도보다 놀이와 실험을 우선하고, 실패하거나 엉뚱해 보이는 발상도 충분히 탐색하는 접근이 유용하다.

원문 읽기(새 탭에서 열림)
사용자 경험FigmaAI프로덕트 디자인+2
figma3분 읽기큐레이션 요약

샤메인 리의 개발자

개발자 도구가 ‘마법처럼’ 느껴지려면 세련된 UI보다 사용자가 가치를 깨닫고 스스로 창작할 수 있게 되는 과정이 중요하다. 특히 첫 사용 경험(FTUE)에 과도하게 집중하기보다, 사용자가 ‘아하’ 순간 이후 빠르게 독립적인 제작자가 되도록 돕고 개발자 커뮤니티와 진정성 있게 소통해야 한다. 글에서 소개된 원칙은 제공된 내용 기준으로 네 가지다. ## 첫 사용 경험보다 지속적인 사용에 집중 - FTUE에 제품의 모든 기능과 복잡성을 한꺼번에 담으면 사용자가 실제로 제품을 이해하고 활용하기 어려워진다. - 중요한 것은 가입이나 온보딩 완료가 아니라, 사용자가 ‘아하’ 순간 이후에도 계속 제품을 사용할 수 있게 하는 것이다. - Lens Studio 5.0 공개 베타에서는 별도의 FTUE를 제공하지 않고, 안내 없이도 직관적으로 사용할 수 있는 제품을 만드는 데 집중했다. - 전환율보다 사용자의 실질적인 이해와 자립을 목표로 삼아야 한다. ## 사용자가 ‘마법’을 경험하는 시간 단축 - 사용자가 도움말이나 안내에 의존하지 않고 직접 결과물을 만드는 순간까지의 시간을 줄여야 한다. - 팀은 FigJam에서 다운로드부터 첫 프로젝트 제출까지의 사용자 여정을 시각화하고, 총 19단계를 분석했다. - 사용자 테스트를 통해 이미 직관적인 단계는 별도의 개선 대상에서 제외하고, 불필요한 단계를 제거했다. - 그 결과 최초 경험을 핵심적인 네 단계로 축소해 사용자가 더 빠르게 제작자가 되도록 했다. - 여정 설계에서는 사용자의 즐거움을 유발하는 요소, 개선이 필요한 부분, 누락된 지원 요소를 함께 찾아야 한다. ## 사용자가 있는 곳에서 직접 소통하기 - 개발자는 컨퍼런스, 밋업, 라이브 스트리밍, 해커톤 등 다양한 커뮤니티 활동을 활발히 한다. - 제품 관리자는 이런 현장에 직접 참여하고, 관련 소셜미디어의 대화까지 꾸준히 관찰해야 한다. - 실제 사용자의 언어와 맥락을 이해하면 제품 아이디어에 대한 솔직하고 즉각적인 피드백을 얻을 수 있다. - PM의 역할은 개별 인터뷰 몇 건에 의존하는 것이 아니라, 제품과 관련된 대화와 맥락을 지속적으로 축적해 의사결정에 활용하는 것이다. ## 전통적인 마케팅 대신 개발자 관계(DevRel) 강화 - 개발자는 일반적인 광고나 과장된 마케팅보다 자신의 경험에 공감하는 진정성 있는 목소리를 선호한다. - 효과적인 커뮤니케이션에는 다음이 포함된다. - 제품을 만드는 과정에 대한 구체적인 이야기 - 실수와 한계를 인정하는 투명성 - 초보자도 이해할 수 있는 접근성과 필요한 기술 용어의 균형 - DevRel은 전담 조직만의 업무가 아니라 제품, 엔지니어링, PM을 포함한 전 구성원의 책임이어야 한다. - 팀 전체가 제품을 알리고 사용자의 요구를 대변할 때 장기적이고 충성도 높은 개발자 커뮤니티를 만들 수 있다. 개발자 도구를 설계할 때는 첫 화면의 인상이나 온보딩 전환율보다 사용자가 첫 결과물을 만들고 독립적으로 활용하기까지의 흐름을 측정하는 것이 실용적이다. 또한 개발자 커뮤니티에 직접 참여해 얻은 피드백을 제품 개선과 DevRel 활동에 지속적으로 반영해야 한다.

원문 읽기(새 탭에서 열림)
사용자 경험developer-toolsaugmented-realityunity+3
figma3분 읽기큐레이션 요약

장인정신과 아름다움

아름다움과 세밀한 완성도는 단순한 장식이 아니라 사용성, 전환율, 매출을 높이는 제품 경쟁력이다. Stripe, Linear, Figma의 리더들은 품질을 제품의 모든 접점에贯穿하는 문화로 정착해야 하며, 이를 위해 성능·명확성·직관성까지 포함한 전방위적인 노력이 필요하다고 말한다. 실제로 Stripe의 결제 제품은 평균 11.9%의 매출 증가를, 이메일 개편은 전환율 20% 향상을 이끌었다. ### 아름다움은 사용성과 전환율을 높인다 - 미적인 요소는 표면적인 꾸밈이 아니라 제품을 더 쉽게 이해하고 사용하게 만드는 기능적 요소다. - 사용자는 아름답고 명확한 제품을 더 잘 작동한다고 인식하는 경향이 있다. 이를 **미적 사용성 효과(aesthetic usability effect)**라고 한다. - 매력적이고 이해하기 쉬운 인터페이스는 사용자의 관심을 끌고, 다음 행동을 명확하게 하며, 성공적인 사용 경험으로 이어진다. - Stripe는 이메일의 문구, 시각적 계층 구조, 전체적인 사용 흐름을 개선했다. - 그 결과 해당 이메일 시리즈의 제품 전환율이 **20% 증가**했다. - Stripe Optimized Checkout Suite를 사용한 기업들은 평균적으로 **11.9% 더 높은 매출**을 기록했다. - 따라서 제품 여정의 모든 접점은 가치를 더하거나 빼는 요소가 될 수 있으며, 모든 단계에서 완성도를 관리해야 한다. ### 크래프트는 태도이고 아름다움은 결과다 - Linear의 Karri Saarinen은 두 개념을 구분한다. - **크래프트(craft)**: 결과물의 품질을 중요하게 여기는 작업 방식과 태도 - **아름다움(beauty)**: 그러한 태도가 만들어낸 사용자가 경험하는 품질과 결과 - 크래프트는 단순히 요구사항을 빨리 끝내는 것이 아니라, 결과가 충분히 좋은지 지속적으로 고민하는 자세다. - 아름다움은 외형만을 뜻하지 않는다. - 창문이 실제로 잘 열리는가 - 소음이 적은가 - 사용 과정이 자연스러운가 - 따라서 디자인의 가치는 시각적 매력뿐 아니라 기능성과 전반적인 품질을 포함한다. ### 성능과 완성도는 제품의 기본 조건이다 - Figma는 웹에서도 네이티브 애플리케이션과 같은 경험을 제공하는 것을 목표로 출발했다. - 이를 위해 프레임 레이트와 상호작용 성능 같은 기초 요소를 중요하게 다룬다. - 초당 60프레임 수준의 부드러운 상호작용이 무너지면, 그 위에 쌓이는 다른 디자인 요소도 제대로 경험할 수 없다. - 제품 품질에는 위계가 있다. - 먼저 성능과 안정성 같은 기반이 갖춰져야 한다. - 그 위에 직관성, 세심한 인터랙션, 시각적 아름다움을 쌓을 수 있다. - 최고의 완성도는 사용자가 특별히 의식하지 않아도 “모든 것이 자연스럽게 작동한다”고 느끼게 만든다. ### 크래프트는 조직 문화에서 시작된다 - 완성도는 특정 디자인팀이나 QA팀만의 책임이 아니라 회사 전체의 문화적 책임이다. - 구성원들이 품질을 중요하게 여기도록 별도의 목표나 OKR로 강제하기보다, 처음부터 품질에 관심이 있는 사람을 채용하고 육성해야 한다. - 크래프트는 사용자가 세부 사항을 자세히 보지 않더라도 경험 전반에 영향을 준다. - 성능, 문구, 시각 디자인, 인터랙션, 제품 흐름 등 여러 직군의 판단이 합쳐져 최종 품질을 만든다. ### 처음부터 끝까지 제품을 직접 점검하라 - Stripe는 문제를 발견하기 위해 **프릭션 로깅(friction logging)** 방식을 활용한다. - 엔지니어, 제품 관리자, 디자이너 등 여러 직군이 함께 실제 사용자처럼 제품을 처음부터 끝까지 사용한다. - 이러한 “매장 둘러보기(walking the store)” 방식으로 다양한 화면과 접점에서 불편함을 직접 찾는다. - 특정 팀의 화면만 개선하는 것이 아니라, 전체 사용자 여정에서 마찰과 품질 저하 지점을 확인하는 접근이다. - 제품의 모든 접점이 브랜드와 비즈니스 성과에 영향을 주므로, 엔드투엔드 관점의 검토가 필요하다. 제품의 아름다움은 장식이 아니라 성능, 명확성, 사용성, 세심함이 결합된 결과다. 따라서 기업은 단기적인 기능 출시보다 모든 팀이 품질을 당연하게 여기는 문화를 만들고, 실제 사용자 여정을 반복적으로 점검하는 방식을 도입하는 것이 좋다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로덕트 디자인stripe+2
figma3분 읽기큐레이션 요약

알래스카 항공, 변

Alaska Airlines는 Figma의 디자인 시스템과 Variables를 활용해 웹·모바일·디지털 사이니지·키오스크 전반의 경험을 일관되게 관리하고 있다. 45명 규모의 디자인 팀은 이를 통해 디자이너당 주당 평균 11시간을 절약했으며, 개발팀과의 협업과 접근성·구현 정확성도 개선했다. 특히 Auro 디자인 시스템의 재사용 컴포넌트는 긴급한 서비스 개편을 한 스프린트 안에 완료하도록 도왔다. ## 기존 도구와 단일 기준 부재의 문제 - Sketch와 InVision을 사용하던 시기의 디자인 시스템은 여러 도구가 뒤섞인 “프랑켄슈타인” 같은 상태였다. - 재사용 위젯이 직관적이지 않았고, 프로토타이핑과 실시간 협업 기능도 부족했다. - 디자인과 개발을 연결하는 단일 진실 공급원(Single Source of Truth)이 없어 다음 문제가 발생했다. - 컴포넌트와 패턴의 간격·색상 등이 몇 픽셀씩 어긋남 - 플랫폼별로 변경 사항을 수동 복사·붙여넣기 - 버튼, 체크박스, 모달, 색상, 날짜 선택기 등의 불일치 - 접근성 기준을 놓칠 가능성 증가 - 최신 파일이나 올바른 버전을 찾기 어려움 - 결과적으로 개발자는 실제 웹사이트와 맞지 않는 디자인을 전달받는 경우가 많았다. ## Auro 디자인 시스템과 Figma 도입 - Alaska Airlines는 Figma를 도입하며 디자이너와 엔지니어 모두를 위한 디자인 시스템 문서를 구축했다. - Auro는 웹 컴포넌트와 대응되는 디자인 컴포넌트를 제공해 설계와 구현 사이의 차이를 줄였다. - 컴포넌트, 색상, 패턴 등을 공통으로 참조할 수 있어 여러 인터페이스에서 일관된 사용자 경험을 유지할 수 있게 됐다. - 디자인 시스템 운영 과정에서 Auto Layout, 브랜치 및 병합 기능 등의 사용법도 문서화해 팀 내 채택률을 높였다. - 교육을 강화한 결과 디자이너의 Figma 활용도가 높아졌고, 디자이너와 엔지니어 간 충돌도 줄었다. ## 재사용 컴포넌트로 긴급 대응 속도 향상 - 심각한 폭풍으로 항공편 지연이 급증했을 때, 기존에 충분히 활용되지 않던 항공편 상태 페이지를 빠르게 개편했다. - 디자인·개발 타이거 팀은 개편에 필요한 컴포넌트의 90%를 Figma의 Auro 디자인 시스템에서 재사용했다. - Figma가 없었다면 최소 4~5개 스프린트가 필요했을 작업을 단 한 스프린트에 완료했다. - 개편 후 항공편 상태 페이지의 평균 체류 시간은 다음과 같이 증가했다. - 기존: 36초 - 변경 후: 5분 10초 - 증가율: 761% - 새 페이지에는 항공편 추적 정보와 항공기 세부 정보 등 고객에게 필요한 정보가 추가됐다. ## 디자인과 개발 간 신뢰 강화 - Figma는 처음에는 디자이너 간 협업 도구로 도입됐지만, 점차 엔지니어가 Auro의 설계 원칙을 이해하는 수단으로도 활용됐다. - 엔지니어가 실제로 사용하는 웹 컴포넌트와 유사한 디자인 컴포넌트를 참조할 수 있어 구현 가능성을 더 쉽게 판단하게 됐다. - 디자인이 구현 결과와 가까워지면서 팀 간 신뢰가 높아졌다. - 디자인 시스템 문서와 기능 교육은 디자이너가 Figma의 기능을 제대로 활용하도록 돕고, 협업 과정의 불필요한 충돌을 줄였다. ## Variables를 통한 다중 환경 대응 - Figma Variables를 활용해 23,000명 이상의 직원과 다양한 조직·파트너의 요구에 맞춰 디자인을 조정할 수 있게 됐다. - 다음과 같은 조건을 체계적으로 관리할 수 있다. - 다양한 화면 크기 - 라이트 모드와 다크 모드 - 팀별 테마 - 외부 파트너를 위한 테마 - 여러 환경에 맞는 디자인을 개별적으로 수정하는 대신, 변수 기반으로 체계화해 반복 작업을 줄였다. - 그 결과 Alaska의 디자이너들은 평균적으로 주당 11시간의 작업 시간을 절약했다. Alaska Airlines 사례는 디자인 시스템을 단순한 컴포넌트 모음이 아니라 디자인·개발·문서·교육을 연결하는 운영 체계로 구축해야 효과가 커진다는 점을 보여준다. 여러 플랫폼과 테마를 동시에 지원해야 하는 조직이라면 공통 컴포넌트와 Variables를 함께 도입하고, 이를 뒷받침할 문서화와 팀 교육까지 병행하는 것이 실용적이다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템디자인 토큰+4
figma3분 읽기큐레이션 요약

카바나가 일관성과 확장성을

Carvana는 Figma의 디자인 시스템과 변수를 활용해 빠른 성장 속에서도 제품 경험의 일관성과 확장성을 유지했다. 분산된 디자인 도구를 Figma로 통합해 단일 기준을 만들고, 변수와 테마 기능으로 디자인·개발 협업과 브랜드 확장을 효율화했다. 그 결과 반복 작업과 수정이 줄고, 새로운 사업 영역에도 기존 디자인 언어를 빠르게 적용할 수 있었다. ## 성장에 대응하는 단일 기준 마련 - Carvana는 2019년 성장세가 가속화되면서 확장 가능한 디자인 플랫폼이 필요해졌다. - 기존 디자인 시스템은 PDF 기반 UI 키트, Principle, Sketch 등 여러 도구에 흩어져 있었다. - 컴포넌트를 복사해 사용하는 방식 때문에 동일한 요소가 조금씩 변형됐고, 디자인과 개발팀이 참조할 중앙 기준이 없었다. - Figma로 디자인 시스템을 이전하면서 디자인·개발팀이 함께 참조할 수 있는 연결된 단일 소스 오브 트루스를 구축했다. - 코로나19 시기 차량 판매가 급증했을 때도 통합된 시스템 덕분에 기존 도구에서 발생하던 협업 마찰을 줄이고 수요에 대응할 수 있었다. - 약 40명의 디자인 시스템 팀이 1만 명 규모의 회사 전반에 디자인 품질을 확산시키는 역할을 담당했다. ## 변수로 디자인 일관성과 효율성 강화 - 제품 생태계가 커지면서 색상, 간격, 타이포그래피, 모서리 반경이 화면과 컴포넌트마다 달라지는 문제가 발생했다. - Figma 변수는 색상이나 수치처럼 재사용 가능한 값을 정의하고 여러 디자인 속성에 적용할 수 있게 했다. - 특히 숫자 변수를 활용해 spacing과 corner radius를 일관된 값으로 관리했다. - 변수의 값을 중앙에서 정의하면 디자이너가 픽셀 수준의 정확성을 유지하면서도 반복적인 수정 작업을 줄일 수 있다. - 초기에는 변수 설정과 학습에 비용이 들었지만, 결과적으로 디자인 완성도가 높아지고 리뷰 과정에서 되돌아오는 수정 사항이 감소했다. - 변수 기반 시스템은 장기적으로 디자이너의 반복 작업과 리비전을 줄여 효율을 높인다. ## 테마 기능으로 인수 사업 통합 - Carvana가 자동차 경매 기업 ADESA를 인수한 뒤에도 변수는 새로운 브랜드 테마를 빠르게 도입하는 데 활용됐다. - 컴포넌트의 구조와 기능은 유지하면서 변수 값만 바꾸어 ADESA 전용 색상과 스타일을 적용할 수 있었다. - 기존 방식이라면 새 스타일에 맞춰 컴포넌트 라이브러리를 다시 구축하는 데 최소 한 달이 걸렸을 작업을, 변수 기반 테마로 1주일 이내에 처리했다. - ADESA용 디자인 시안을 평소보다 약 3배 빠르게 제작할 수 있었다. - 브랜드 변경을 개별 컴포넌트의 재작업이 아니라 테마 전환으로 처리함으로써 여러 화면 너비와 제품 영역에 일관되게 적용할 수 있었다. ## 디자인과 개발 간 연결 강화 - Figma 기반 디자인 시스템은 디자이너와 개발자가 동일한 컴포넌트와 변수 기준을 참조하도록 돕는다. - 중앙화된 라이브러리와 변수는 디자인 변경 사항을 일관되게 관리하고 핸드오프 과정의 마찰을 줄이는 기반이 된다. - 글에서는 변수와 Figma REST API를 활용한 개발 연계 및 변수 마이그레이션 사례도 소개한다. Carvana 사례는 성장하는 조직일수록 디자인 시스템을 여러 파일이나 도구에 분산시키기보다 단일 기준으로 통합해야 한다는 점을 보여준다. 특히 색상·간격·브랜드 스타일을 변수와 테마로 관리하면 제품 확장이나 인수 이후의 리브랜딩도 빠르고 안정적으로 수행할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템디자인 토큰+4
figma3분 읽기큐레이션 요약

디자인 시스템 구축 방법

디자인 시스템은 제품 전반의 일관성을 높이고, 재사용 가능한 컴포넌트와 공통 언어를 통해 디자인·개발 업무를 효율화하는 기반이다. 성공적인 시스템은 정해진 정답을 따르기보다 조직의 목표와 문제에 맞춰 설계하고, 제품과 팀의 변화에 따라 지속적으로 발전해야 한다. 이를 위해 목표 설정, 기존 자산 조사, 협업자 확보, 적절한 구축 방식 선택이 선행되어야 한다. ## 디자인 시스템의 목표와 범위 정의 - 컴포넌트를 만들기 전에 디자인 시스템을 도입하려는 이유를 명확히 해야 한다. - 다음 질문에 답하면서 목표를 구체화한다. - 왜 디자인 시스템이 필요한가? - 어떤 문제를 해결할 것인가? - 문제가 해결되었는지 어떻게 측정할 것인가? - 플랫폼 간 UI 불일치, 반복적인 수동 수정, 디자인·개발팀 간 협업 문제 등이 주요 도입 계기가 될 수 있다. - 디자인 시스템은 소규모 팀의 단순한 컴포넌트 모음부터 대기업의 종합적인 표준 체계까지 다양한 규모로 구성할 수 있다. - 중요한 것은 조직의 현재 상황에 맞게 시작하고, 필요에 따라 확장 가능한 구조를 만드는 것이다. ## 기존 디자인과 코드 자산 조사 - 여러 플랫폼과 디바이스에서 제품 UI를 수집한다. - 일반 화면뿐 아니라 다음과 같은 변형도 함께 확인한다. - 호버·포커스·비활성·오류 등 인터랙션 상태 - 반응형 레이아웃 - 플랫폼별 또는 제품별 대체 버전 - 스크린샷을 모으면 반복되는 시각적 패턴과 일관된 요소를 파악하기 쉽다. - 디자인 파일만 조사해서는 안 되며, 코드베이스도 함께 점검해야 한다. - 개발자가 이미 구현한 다음 자산을 확인하면 기존 엔지니어링 작업을 재활용할 수 있다. - 반복적으로 사용되는 UI 요소 - 공통 CSS 변수 - 공유 컴포넌트 - 표준화된 구현 패턴 - 디자인과 코드 양쪽을 조사해야 서로 다른 시스템이 병렬로 만들어지는 문제를 줄일 수 있다. ## 패턴 분류와 문제점 평가 - 수집한 화면과 컴포넌트를 유형별로 분류해 현재 제품의 디자인 언어를 파악한다. - 같은 문제를 여러 방식으로 해결하고 있는지 확인한다. - 다음과 같은 문제는 디자인 시스템으로 개선할 후보가 된다. - 비슷한 UI가 제품마다 다르게 보이는 경우 - 중복 컴포넌트나 불필요한 변형이 많은 경우 - 디자인팀과 개발팀이 동일한 문제를 각자 다르게 해결하는 경우 - 사용자 경험이 화면이나 플랫폼에 따라 단절되는 경우 - 이 과정은 무엇을 새로 만들지뿐 아니라 무엇을 통합·정리·폐기할지도 결정하는 단계다. ## 조직 내 챔피언 확보 - 디자인 시스템은 한 직군만의 프로젝트가 아니라 디자인, 개발, 제품 관리가 함께 참여하는 팀 작업이다. - 일관된 제품 경험에 관심이 있는 사람을 조직 내 협력자로 확보해야 한다. - 개발자는 실제 코드 구현과 유지보수를 담당하므로 초기부터 참여시키는 것이 중요하다. - 개발자는 컴포넌트의 기술적 실현 가능성, API 설계, 유지보수 비용에 대한 현실적인 의견을 제공할 수 있다. - 성공적인 디자인 시스템이 반드시 대규모 전담 조직에서 시작되는 것은 아니며, 한 명의 담당자에서 출발할 수도 있다. ## 구축 방식 선택 - 디자인 시스템을 구축하는 방법은 크게 두 가지다. - 조직의 요구에 맞춰 처음부터 직접 구축하기 - 기존 프레임워크를 도입한 뒤 제품 상황에 맞게 조정하기 - 선택할 때는 현재 보유한 디자인·코드 자산, 팀 규모, 기술 역량, 유지보수 가능성을 함께 고려해야 한다. - 기존 시스템을 그대로 복사하기보다 조직의 목표와 제품 특성에 맞는 수준으로 조정하는 것이 중요하다. ## 이후의 구축 단계 - 글은 전체 과정을 다음 세 단계로 제시한다. - 기반 마련: 목표 정의, 기존 자산 조사, 문제 평가, 협력자 확보 - 디자인 기반 정의: 색상, 타이포그래피, 간격 등 공통 시각 규칙 수립 - Figma에서 구축: 디자인 자산과 재사용 가능한 컴포넌트를 체계적으로 구성 - 구축 후에도 시스템은 고정된 결과물이 아니라 제품과 팀의 변화에 맞춰 계속 관리하고 발전시켜야 한다. 실무에서는 모든 것을 한 번에 만들기보다 가장 반복적으로 사용되고 영향이 큰 패턴부터 시작하는 것이 좋다. 디자인과 코드를 함께 조사하고 개발자를 초기 단계부터 참여시키면 실제 제품에 적용되고 유지되는 디자인 시스템을 만들 가능성이 높아진다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템사용자 인터페이스+3
figma3분 읽기큐레이션 요약

AI + 디자인: 피

생성형 AI의 성패는 기술 자체보다 사용자가 이해하고 실제로 활용할 수 있도록 설계하는 데 달려 있다. Figma 설문에서 대부분은 AI가 기업 제품에 영향을 줄 것으로 예상했지만, 실제 제품에서 AI의 역할은 아직 제한적이며 성과와 만족도도 낮았다. 따라서 단순히 AI 기능을 추가하기보다 기존 경험과 자연스럽게 통합하고 명확한 사용자 문제를 해결하는 디자인이 중요하다는 결론이다. ## 조사 대상과 AI의 현재 위치 - Figma는 2024년 2월 26일~3월 3일, 미국·캐나다·호주·영국·일본·프랑스·독일의 사용자 1,800명 이상을 조사했다. - 응답자는 디자이너, 개발자, 임원으로 구성됐다. - 생성형 AI는 텍스트·이미지·기타 데이터를 생성 모델과 프롬프트를 통해 만들어내는 기술로 정의됐다. - AI는 인터넷, 전기, 스마트폰처럼 범용 기술로 발전할 가능성이 있지만, 초기에는 기술을 일상에서 직관적이고 유용하게 만드는 디자인 작업이 필요하다. ## 높은 기대와 실제 성과의 격차 - 응답자의 89%는 향후 12개월 안에 AI가 자사 제품이나 서비스에 어느 정도 영향을 줄 것이라고 예상했다. - 37%는 그 영향이 “상당하거나 변혁적일 것”이라고 답했다. - 특히 의사결정을 담당하는 임원층이 AI를 회사 목표에 중요하다고 보는 경향이 더 강했다. - 그러나 AI를 제품에 도입한 사람 중 72%는 AI가 제품에서 “부수적이거나 필수적이지 않은 역할”을 한다고 평가했다. - AI 도입으로 매출, 비용, 시장점유율 등의 지표가 개선됐다고 답한 사람은 약 3분의 1에 불과했다. - 출시한 AI 기능을 자랑스럽게 생각한다는 응답도 3분의 1보다 적었다. ## AI 기능 피로와 사용자 문제의 부재 - Figma 연구진은 사용자 인터뷰와 장기간 분석을 통해 “또 하나의 AI 기능”에 대한 무관심이 나타나고 있다고 설명한다. - 이를 “AI feature fatigue”, 즉 AI 기능 피로라고 부를 수 있다. - AI 제품이나 기능을 만드는 사람 중 20% 이상은 “사용자 요구나 문제를 해결하지 못하는 것”을 주요 과제로 꼽았다. - 이 문제는 특히 해당 제품을 설계하는 디자이너에게 두드러졌다. - AI 제품을 개발 중인 응답자 가운데 실제로 기능을 출시한 사람은 절반에도 못 미쳤다. - 앞으로 AI 기능이 대량으로 출시되면, 시장이 실질적 가치 없는 AI 기능에 피로감을 느낄 가능성이 있다. ## 기존 제품에 AI를 자연스럽게 통합하기 - 응답자의 3분의 1은 11개 과제 중 “AI 기능을 기존 제품에 일관성 있게 통합하는 일”을 가장 중요한 우려로 선택했다. - 새로운 기능을 추가하는 것만으로는 AI 도입의 가치가 만들어지지 않는다. - AI가 제품의 기존 사용 흐름을 방해하지 않으면서 실제 경험을 개선해야 한다. - 사용자가 현재 어떤 도구를 이용할 수 있는지, AI가 어떤 상황에서 도움이 되는지 이해하도록 안내하는 설계가 필요하다. - AI의 성능보다 사용자가 기능을 발견하고, 이해하고, 신뢰하며, 반복해서 사용할 수 있는 인터페이스가 중요하다. ## ChatGPT 사례가 보여주는 디자인의 영향 - ChatGPT가 널리 사용되기 시작한 2022년 11월 당시 기반 모델의 기능은 이미 일정 기간 제공되고 있었다. - OpenAI는 모델 자체를 새롭게 만든 것뿐 아니라, 사용자가 쉽게 접근할 수 있는 대화형 채팅 인터페이스를 제공했다. - 대화 방식, 접근성, 도움을 주려는 상호작용 구조가 기술을 인간의 목적에 더 잘 맞도록 만들었다. - 이는 강력한 기술이라도 사용자가 이해하고 활용할 수 있는 경험으로 설계되지 않으면 대중적 채택으로 이어지기 어렵다는 점을 보여준다. ## 실용적인 시사점 - AI 기능을 추가하기 전에 해결하려는 사용자 문제와 기대 효과를 먼저 정의해야 한다. - “AI를 넣는 것”보다 기존 제품 흐름에서 AI가 어떤 행동을 개선하는지 검증해야 한다. - 사용자가 기능의 한계와 활용 방법을 이해할 수 있도록 명확한 안내와 피드백을 제공해야 한다. - 기술팀과 디자인팀이 협력해 AI의 가능성을 실제 사용 사례와 유용한 경험으로 변환해야 하며, 단순한 유행성 기능은 피하는 것이 좋다.

원문 읽기(새 탭에서 열림)
사용자 경험FigmaAI생성형 AI+2
figma3분 읽기큐레이션 요약

니콜 뵈쳐의 피그

니콜 부에처는 전직 UX·제품 디자이너로서 Figma를 활용해 퀼트를 설계하고, 디지털 디자인의 반복·측정·최적화 방식을 수공예에 적용한다. 그녀는 천을 자르기 전에 퀼트의 약 80%를 Figma에서 완성하며, 색상 조합과 패턴을 빠르게 실험하고 필요한 원단 수량과 재단 순서까지 계획한다. Figma는 창의적인 퀼트 작업을 체계화하면서도, 재료와 시간을 절약하게 해주는 설계 도구가 된다. ## 손으로 만드는 취미와 디지털 설계의 결합 - 니콜은 2021년 팬데믹으로 업무 방식이 바뀌면서 손을 사용하는 새로운 공예를 찾기 시작했다. - Artsy에서 2년 반 동안 제품 디자이너로 일한 경험이 있으며, 이전에도 간단한 봉제 작업은 했지만 퀼트 제작은 미뤄두고 있었다. - 온라인 튜토리얼과 초보자용 패턴을 따라 하며 독학했고, 실력이 늘면서 더 큰 퀼트를 만들게 됐다. - 직접 패턴을 설계할 단계가 되자 익숙한 도구인 Figma를 사용하기 시작했다. ## UX 경험을 바탕으로 한 계획적 제작 - 니콜은 천을 자르기 전에 퀼트 디자인의 약 80%를 Figma에서 완성한다. - UX 디자인과 엔지니어링용 에셋 준비 경험 때문에 즉흥적으로 만들기보다 먼저 구조와 치수를 계획하는 편이다. - 퀼트 제작은 각 조각을 1/4인치 단위로 측정해야 하므로, 정확한 크기 조정이 가능한 Figma가 적합하다. - 스케치나 종이 조각을 직접 옮기는 방식보다 도형의 비율과 배치를 빠르게 수정할 수 있다. ## 색상 라이브러리와 패턴 실험 - 영감은 퀼트 관련 서적과 Instagram에서 얻으며, 전통적인 퀼트 블록을 새로운 패턴으로 변형하는 방식으로 작업을 시작한다. - 이미 가지고 있는 원단을 우선 활용하기 위해 원단 제조사의 색상 견본을 Figma에 모아 색상 라이브러리를 구축했다. - 디자인 파일에서 특정 영역을 선택해 색상이나 패턴을 한꺼번에 바꿀 수 있다. - `Random Colors Fill` 같은 Figma 플러그인을 활용하면 다양한 색상 조합을 빠르게 시험할 수 있다. - 제품 디자인처럼 하나의 퀼트에 대해 수십 가지 버전을 만든 뒤 최종안을 선택한다. ## Figma에서 퀼트 구조 설계하기 - Grid Quilt처럼 격자 구조의 디자인을 Figma에서 먼저 구성한다. - 각 행을 개별적으로 수정하는 대신 Auto Layout을 사용해 여러 행의 배치를 동시에 조정할 수 있다. - 완성된 전체 디자인을 재단과 봉제에 필요한 작은 단위 조각으로 분해한다. - 조각을 어떤 순서로 연결할지까지 시각적으로 확인해 제작 과정을 단순화한다. ## 치수 계산과 원단 낭비 줄이기 - 최종 디자인을 복제한 뒤 사각형과 직사각형 등 원자 단위의 조각으로 나눈다. - `Count Things` 플러그인으로 필요한 조각의 개수를 계산한다. - 예: 청록색 직사각형 189개, 황갈색 정사각형 378개 등 - Figma의 픽셀 크기를 실제 인치 단위와 대응시켜 재단에 필요한 치수를 산출한다. - 봉제선 여유분을 고려해 각 조각의 양쪽에 1/4인치를 추가한다. - 필요한 원단의 총 길이를 계산하고, 조각을 최대한 효율적으로 배치해 불필요한 자투리 원단을 줄인다. - 어떤 조각을 먼저 봉제할지 다시 조정해 전체 작업 단계를 최소화한다. ## 디지털 도구가 공예에 주는 의미 - Figma는 단순한 화면 디자인 도구가 아니라 실제 재료를 다루는 제작 과정의 계획 도구로 활용된다. - 반복적인 시안 제작, 정확한 치수 계산, 색상 관리, 재단 최적화를 하나의 파일 안에서 처리할 수 있다. - 디지털 설계의 효율성이 수작업의 섬세함을 대체하는 것이 아니라, 수작업에 더 많은 시간과 집중력을 투입하도록 돕는다. - 니콜의 사례는 특정 산업을 위해 만들어진 도구도 사용자의 창의적인 방식에 따라 전혀 다른 제작 분야로 확장될 수 있음을 보여준다. 실용적으로는 퀼트처럼 규격과 반복이 중요한 작업을 시작할 때 Figma에서 색상 견본, 실제 치수, 조각 수량, 조립 순서를 먼저 관리하면 시행착오와 재료 낭비를 크게 줄일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로덕트 디자인auto-layout+2
figma3분 읽기큐레이션 요약

디자인 시스템이란 무엇

디자인 시스템은 제품의 시각적 요소와 상호작용 방식을 일관되게 유지하도록 돕는 공통 언어이자 설계·개발을 위한 체계다. 색상, 아이콘, 버튼, 문구 같은 요소를 표준화하고 재사용함으로써 제작 시간을 줄이고 사용자 경험과 브랜드 정체성을 보호한다. 단순한 스타일 가이드가 아니라 원칙, 컴포넌트, 패턴, 기술 문서와 프로세스를 포괄하는 지속적으로 발전하는 기반이다. ## 디자인 시스템이란 무엇인가 - 제품과 서비스의 디자인·개발을 안내하는 **재사용 가능한 구성 요소와 표준의 집합**이다. - 복잡한 디지털 제품을 만들 때 팀이 공유할 수 있는 통일된 언어와 구조를 제공한다. - 요소를 매번 새로 설계하지 않아도 되므로 대규모 제품 개발에서 시간과 노력을 줄인다. - 디자인 시스템이 없으면 화면마다 스타일과 동작이 달라지는 **일관성 위기**가 발생할 수 있다. - 사용자가 인터페이스를 혼란스럽게 느낄 수 있다. - 브랜드 정체성이 약화될 수 있다. - 반복적인 디자인 작업과 구현 비용이 늘어난다. ## 디자인 시스템의 계층 구조 ### 1. 디자인 시스템 - 제품 생태계 전체를 아우르는 최상위 개념이다. - 다음과 같은 자원을 포함할 수 있다. - 기술 사양 - 디자인 토큰 - 컴포넌트 및 패턴 문서 - 모범 사례 - UX 설계 원칙 - 제품 개발 프로세스 - 고정된 규칙집이 아니라 제품과 조직의 변화에 따라 계속 발전하는 기반이다. ### 2. 컴포넌트 및 패턴 라이브러리 - 제품에서 반복적으로 사용하는 시각 요소와 상호작용 방식을 모아 둔 라이브러리다. - 컴포넌트의 예: - 버튼 - 입력 필드 - 기타 UI 요소 - 패턴의 예: - 내비게이션 흐름 - 데이터 표시 방식 - 레이아웃과 템플릿 - 반복되는 사용자 상호작용 - 코드 스니펫, 기술 사양, 사용 지침을 함께 제공해 디자인 의도를 실제 구현으로 연결한다. - 디자이너와 개발자가 동일한 기준을 참고하는 협업 지점 역할을 한다. - **컴포넌트 라이브러리**가 개별 UI 요소에 집중한다면, **패턴 라이브러리**는 더 넓은 문제 해결 방식과 사용자 흐름을 다룬다. ## 디자인 시스템과 스타일 가이드의 차이 - 스타일 가이드는 주로 다음과 같은 시각적 요소를 정의한다. - 색상 - 글꼴과 타이포그래피 - 이미지와 시각적 표현 - 디자인 시스템은 스타일 가이드보다 범위가 넓다. - 코딩 표준 - 사용성 원칙 - 상호작용 패턴 - 기술 문서 - 제품 개발 프로세스까지 포함할 수 있다. - 따라서 스타일 가이드는 디자인 시스템을 구성하는 일부로 볼 수 있다. ## 3. 기초 요소 - 제품의 전반적인 시각 언어와 목소리·말투를 정의한다. - 대표적인 구성 요소는 다음과 같다. - 색상 - 타이포그래피 - 아이콘 - 로고 - 일러스트레이션 - 접근성 가이드라인 - 브랜드 가이드라인 - 단순히 화면을 예쁘게 만드는 것을 넘어, 제품이 어떤 인상을 주고 어떤 방식으로 소통할지를 결정한다. ## 디자인 시스템과 UX - 디자인 시스템이 디자이너의 창의성을 제한하고 모든 화면을 똑같이 만든다는 것은 흔한 오해다. - 실제로는 반복적인 문제를 해결해 디자이너가 더 중요한 사용자 경험과 제품 문제에 집중하도록 돕는다. - 공통 요소와 기준을 재사용하면 일관성을 확보하면서도 제품 목적에 맞는 새로운 경험을 설계할 수 있다. - 색상, 아이콘, 버튼의 형태뿐 아니라 명확한 언어와 접근성까지 관리하므로 UX 전반에 영향을 준다. 디자인 시스템을 도입할 때는 단순히 UI 컴포넌트 목록을 만드는 데 그치지 말고, 디자인 원칙·접근성·코드·문서·협업 프로세스까지 함께 정의하는 것이 좋다. 또한 처음부터 모든 요소를 완성하려 하기보다 반복적으로 사용되는 핵심 요소부터 구축하고, 제품과 팀의 변화에 맞춰 지속적으로 관리해야 한다.

원문 읽기(새 탭에서 열림)
사용자 경험디자인 시스템접근성디자인 토큰+2
figma3분 읽기큐레이션 요약

기대를 현실로: AI 기능을 시장

AI 기능은 유행을 따라 추가할 것이 아니라, 사용자가 실제로 겪는 문제에서 출발해야 한다. Figma·Asana·Duolingo·LinkedIn의 제품 리더들은 AI의 적합성, 오류 허용 수준, 명확한 사용자 가치와 구체적인 문제 정의가 성공적인 출시의 핵심이라고 강조한다. 특히 AI는 기존 경험을 대체하기보다 시간을 절약하고 업무를 개선하는 방식으로 활용될 때 신뢰와 ROI를 얻을 수 있다. ## 사용자 문제에서 출발하기 - AI가 새로운 기능을 만들 수 있다는 이유만으로 도입해서는 안 된다. - 먼저 사용자가 겪는 문제를 파악한 뒤, AI가 최선의 해결 방법인지 검토해야 한다. - Figma의 Conor Woods는 “AI라는 망치로 모든 문제를 해결하려는” 접근을 경계한다. - AI 도입 여부를 판단할 때 다음 세 가지 질문을 제시한다. - **기존의 대규모 데이터셋을 활용할 수 있는 문제인가?** - GPT-4 같은 LLM은 이미 존재하는 정보를 정리하거나 요약하는 데 강하다. - 반면 완전히 새로운 경험을 창조하는 일은 프롬프트 설계만으로 해결하기 어렵다. - **일정 수준의 오류를 허용할 수 있는가?** - 현재 LLM은 부정확한 답변이나 사실과 다른 정보를 생성할 수 있다. - 따라서 100% 정확성이 필요한 의료·법률·규정 준수 등의 문제에는 신중해야 한다. - **나쁜 UX를 AI로 덮으려는 것은 아닌가?** - 근본적인 정보 구조나 제품 설계가 잘못된 상태에서 AI 검색·비서를 추가해도 문제 자체는 해결되지 않는다. - Asana는 더 단순하게 “AI가 사용자의 시간을 줄여주는가?”를 기준으로 삼는다. - Asana의 **Smart Status**는 사용자가 상태 업데이트 초안을 몇 초 만에 작성하도록 돕는다. - 기존에는 주당 약 20분이 걸리던 작업을 2분 정도로 줄일 수 있다. - 사용자가 체감하는 투자 대비 효과가 명확하다는 점이 핵심이다. ## 문제를 구체적으로 정의하기 - 생성형 AI 기능은 여러 요구를 동시에 충족할 수 있기 때문에, 기능 정의가 모호해지기 쉽다. - “텍스트를 요약한다”처럼 기능을 추상적인 문장으로만 설명하면 팀원마다 서로 다른 결과를 상상하게 된다. - 요약 기능만 해도 실제 목적은 다양할 수 있다. - 문서의 전체 내용을 빠르게 파악하기 - 실행해야 할 작업을 식별하기 - 핵심 결정 사항이나 논쟁점을 찾기 - 따라서 AI 기능을 기획할 때는 단순히 모델의 능력을 설명하기보다 다음을 구체화해야 한다. - 사용자는 누구인가? - 어떤 상황에서 이 기능을 사용하는가? - 사용자가 해결하려는 실제 과업은 무엇인가? - AI가 생성해야 하는 결과물은 어떤 형태인가? - 결과가 틀렸을 때 사용자가 감수할 수 있는 위험은 어느 정도인가? - 문제를 구체적으로 정의할수록 제품 요구사항, 사용자 인터페이스, 평가 기준을 일관되게 설계할 수 있다. ## 실용적인 적용 방향 - “AI를 어디에 넣을까?”보다 “사용자의 어떤 반복 작업을 줄일 수 있을까?”에서 시작한다. - AI를 적용하기 전 기존 UX의 구조적 문제를 먼저 해결한다. - 오류가 허용되는 영역인지 확인하고, 사용자 검토·수정 과정을 제품에 포함한다. - 기능 설명을 모델의 기술적 능력이 아니라 사용자의 구체적인 과업과 기대 결과 중심으로 작성한다. - 출시 전에는 시간 절약, 작업 완료율, 수정 횟수, 사용자 신뢰도처럼 측정 가능한 기준을 정해 AI 기능의 실제 가치를 검증한다.

원문 읽기(새 탭에서 열림)
사용자 경험AI대규모 언어 모델생성형 AI+2
figma3분 읽기큐레이션 요약

Figma x Work Louder의 새로운

Figma는 Work Louder와 협업해 창작 작업에 최적화된 맞춤형 기계식 키보드를 선보였다. 일반 키보드가 타이핑 중심이라면, 이 제품은 Figma 캔버스 탐색과 단축키 사용을 더 직관적이고 촉각적으로 만드는 보조 입력 장치에 가깝다. 12개 키와 2개의 로터리 인코더로 최대 48개 단축키를 제공해, 반복적인 디자인 작업을 빠르고 즐겁게 수행하도록 돕는 것이 핵심이다. ## 기계식 키보드가 주는 개인화와 촉각성 - 일반 노트북 키보드는 표준화와 일관성에 초점이 맞춰져 있다. - 기계식 키보드는 다음 요소를 사용자가 직접 조정할 수 있다. - 키캡과 색상 - 키 배열 - 조명 - 스위치의 촉감과 소리 - 이러한 개인화는 단순한 효율성뿐 아니라 작업 도구에 대한 애착과 즐거움을 높인다. - Figma 디자인 디렉터 Marcin Wichary는 키보드를 생산성 도구이면서도 개인의 취향과 작업 방식을 반영하는 물건으로 바라본다. ## 기존 키보드와 창작 작업의 불일치 - 표준 QWERTY 키보드는 원래 타자기와 사무용 문서 작성의 영향을 강하게 받았다. - 오늘날의 창작 소프트웨어는 수많은 단축키를 요구하지만, 기존 키보드는 이를 효율적으로 사용하도록 설계되지 않았다. - 복잡한 단축키 조합은 손가락을 무리하게 뻗게 만들고, 사용자가 명령을 기억하고 조작하는 데 부담을 준다. - Figma는 보편적인 키보드의 기능을 대체하려는 것이 아니라, 창작자가 자주 사용하는 조작에 개성과 촉각적 피드백을 더하려 했다. ## Figma와 Work Louder의 협업 - Figma는 모듈형 키보드를 제작하는 몬트리올 기반 회사 Work Louder와 협업했다. - 목표는 고가 하드웨어를 필수품으로 만들어 접근성을 제한하는 것이 아니라, 기계식 키보드를 선호하는 사용자에게 더 즐거운 작업 경험을 제공하는 것이다. - 제품은 Work Louder의 Creator Micro 키보드를 기반으로 Figma 작업에 맞게 맞춤 제작됐다. - Figma는 브라우저 기반 협업이라는 기존 방향을 유지하면서, 선택적인 생산성 도구를 추가했다. ## 타이핑보다 캔버스 탐색에 초점을 둔 설계 - Figma 사용자는 문자를 입력하기보다 마우스로 캔버스를 탐색하고 파일을 조작하는 시간이 많다. - 따라서 이 장치는 전통적인 키보드보다 대체 트랙패드에 가까운 역할을 한다. - 주요 구성은 다음과 같다. - 12개의 물리 키 - 2개의 로터리 인코더 - 총 48개의 단축키 조합 - Figma에는 150개가 넘는 단축키가 있으므로, 사용자는 자신의 작업 흐름에 맞는 명령을 선택해 배치할 수 있다. - 모든 키가 격자 형태로 배치되어 있어 단축키 위치를 머릿속으로 쉽게 매핑할 수 있다. ## 촉각 피드백과 근육 기억 - 물리 키와 다이얼은 명령이 입력됐다는 피드백을 손끝으로 전달한다. - 사용자는 화면이나 키보드를 내려다보지 않고도 조작 여부를 확인할 수 있다. - 반복 사용하면 특정 키와 명령의 위치가 근육 기억으로 자리 잡아 작업 속도가 빨라진다. - 단축키를 장시간 암기해야 하는 부담을 줄이고, 학습 과정을 더 재미있게 만드는 것이 제품의 중요한 의도다. - Figma는 창작 도구의 세부적인 사용 경험과 즐거움 자체도 좋은 디자인의 일부라고 강조한다. 반복적으로 사용하는 Figma 단축키가 많고 마우스 중심의 캔버스 조작을 더 빠르게 하고 싶다면, 이와 같은 보조 키패드가 유용할 수 있다. 다만 모든 단축키를 한 번에 익히기보다 자주 쓰는 명령 몇 개만 배치해 근육 기억을 만드는 방식이 현실적이다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmakeyboard-shortcutsmechanical-keyboards+1
figma3분 읽기큐레이션 요약

커리어 전환의 기술 | Figma

커리어 피벗은 반드시 직업을 완전히 바꾸는 극적인 전환일 필요가 없으며, 관점·역할·환경을 조정하는 작은 변화도 큰 결과를 만들 수 있다. 이 글은 제품 개발 분야의 창작자 6명이 경험한 피벗을 재구성(reframe), 복귀(boomerang), 자기 탐색(unfolding), 확장(stretch), 급격한 전환(hard left), 경험의 결합(blend)으로 나누어 설명한다. 공통적으로 피드백을 받아들이고, 낮은 위험의 실험을 거치며, 기존 경험을 새로운 방식으로 활용하는 것이 성공적인 전환의 핵심이다. ## 커리어 피벗을 바라보는 관점 - 피벗은 삶과 커리어에서 반복적으로 일어나는 방향 전환이다. - 기술 업계에서는 ‘빠르게 움직이고 과감히 바꾸는 것’이 강조되지만, 실제 커리어 변화는 점진적 조정부터 완전한 전환까지 다양한 형태를 가진다. - 피벗의 목적은 단순히 직함을 바꾸는 것이 아니라 다음을 찾는 데 있다. - 기존 기술을 더 효과적으로 활용하기 - 관심사와 직업의 접점 넓히기 - 새로운 환경에서 영향력 키우기 - 자신에게 맞는 일의 방식 발견하기 ## 관점을 바꾸는 재구성(Reframe) 재구성은 직업이나 분야를 완전히 바꾸지 않고, 문제를 바라보고 전달하는 방식을 바꾸는 피벗이다. - UX 라이터 Ry Reid는 핀테크 기업 고객지원에서 UX 라이팅으로 전환한 뒤, Pinterest와 Spotify에서 글쓰기 역량을 쌓았다. - Uber Eats에서는 문서와 글로 아이디어를 설득하려 했지만, 아이디어가 제대로 받아들여지지 않았다. - 승진에서 탈락한 뒤 디자인 매니저에게 “아이디어를 설명하지 말고 시각화해보라”는 조언을 받았다. - Ry는 펜과 종이로 대략적인 화면을 만들고, 이후 Google Slides로 시안을 제작해 Slack에 공유했다. - 디자이너와 프로덕트 매니저가 즉시 반응했고, 제안한 UX가 실제 방향으로 채택되었다. - 핵심은 라이터가 디자이너가 된 것이 아니라, 글 중심의 커뮤니케이션에 저충실도 시각화를 추가해 영향력을 확장한 것이다. - 최종적인 픽셀 단위 완성도는 전문 디자이너의 역할이지만, 좋은 아이디어를 시각적으로 제안하는 일은 누구나 시도할 수 있다. ### 재구성이 필요한 신호 - 현재 일을 좋아하지만 같은 문제에 계속 부딪히는 경우 - 승진이나 성장의 정체가 오래 지속되는 경우 - 불편하지만 동시에 기대감을 주는 조언을 받은 경우 ### 재구성을 실행하는 방법 - 승진 탈락이나 비판적인 피드백을 방어적으로만 받아들이지 않는다. - 자신의 직무와 인접한 분야의 멘토에게 조언을 구한다. - 처음부터 큰 변화를 시도하지 말고, 펜·슬라이드·간단한 프로토타입처럼 실패 비용이 낮은 방식으로 실험한다. - 익숙하지 않은 방법을 시도할 때 느끼는 불편함 자체를 변화의 신호로 받아들인다. ## 익숙한 회사에서 새로운 역할을 맡는 복귀(Boomerang) 복귀는 이미 알고 있는 회사로 돌아가거나, 익숙한 조직 안에서 완전히 다른 역할을 맡는 방식이다. - 회사와 조직문화에 대한 이해를 유지하면서 직무는 크게 바꿀 수 있다. - 새로운 분야를 처음부터 시작해야 하는 위험을 줄이고, 기존 네트워크와 신뢰를 활용할 수 있다. - 글에 소개된 Erica Simunovic은 로스앤젤레스의 애드테크 기업 Tatari에서 처음에는 피플 오퍼레이션을 이끌었다. - 이후 제품 디자인 부트캠프를 수료하고 약 5년 뒤 같은 회사로 돌아와 디자이너로 일하게 되었다. - 이 사례는 회사는 그대로 유지하되 전문 분야를 HR에서 디자인으로 전환하는 피벗을 보여준다. ## 글에서 제시하는 다른 피벗 유형 - **자기 탐색(Unfolding)**: 외부 직함보다 자신의 관심과 정체성을 깊이 탐색하며 새로운 방향을 발견하는 방식 - **확장(Stretch)**: 기존 역량을 바탕으로 새로운 기회와 책임에 도전하는 방식 - **급격한 전환(Hard left)**: 기존 경력과 전혀 다른 분야로 크게 방향을 바꾸는 방식 - **경험의 결합(Blend)**: 여러 직무 경험, 기술, 관계망을 조합해 새로운 역할이나 사업을 만드는 방식 작은 시각화 실험처럼 낮은 위험의 변화를 먼저 시도하고, 인접 분야의 사람에게 피드백을 구하는 것이 실용적인 출발점이다. 현재의 직무를 버리기 전에 기존 경험을 새로운 방식으로 재구성할 수 있는지 살펴보면, 더 안전하면서도 영향력 있는 커리어 전환을 설계할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로덕트 디자인slack+2