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

Figma on Figma:

Figma UI3는 작업물을 화면의 중심에 두고 사용자의 작업 흐름을 방해하지 않는 것을 목표로 2년 넘게 설계·개선된 인터페이스다. 초기에는 탐색·속성 패널을 플로팅 방식으로 바꿨지만, 실제 사용 데이터와 피드백을 통해 캔버스 공간과 작업 속도를 해친다는 점을 확인하고 고정 패널로 되돌렸다. Figma는 명확한 미래 비전을 세우되, 사용자 피드백과 성능 지표에 따라 과감하게 설계를 수정하는 접근을 강조한다. ## 작업 중심 인터페이스를 위한 UI3 - UI3의 핵심 목표는 캔버스와 디자이너의 작업을 중심에 두고 불필요한 방해 요소를 줄이는 것이다. - 팀은 2년 이상 다양한 인터페이스를 반복적으로 실험했으며, 출시 이후에도 기존의 핵심 설계 결정을 되돌렸다. - “완성도와 작업 흐름”처럼 직접 측정하기 어려운 요소는 정량 지표만으로 판단하기 어렵기 때문에 사용자 의견을 수집하고 신중하게 해석했다. - UI3는 2024년 10월 10일 모든 사용자에게 제공될 예정이었다. ## 도킹 패널과 플로팅 패널 실험 - 탐색 패널과 속성 패널은 Figma 인터페이스의 핵심 요소였기 때문에 다양한 실험이 진행됐다. - 마우스를 올릴 때만 나타나는 패널 - 캔버스 위에 떠 있는 패널 - 제품 전반에 일관되게 적용되는 플로팅 UI - 최종적으로 초기 UI3에서는 패널을 플로팅 방식으로 제공했다. - 플로팅 패널의 장점은 단순하고 친근한 인터페이스를 만들며, 제품 생태계 전체에 일관된 경험을 제공할 수 있다는 점이었다. - 그러나 오픈 베타 이후 실제 사용 데이터를 분석한 결과 다음 문제가 드러났다. - 작은 화면에서 캔버스 공간을 과도하게 차지함 - 디자인이 패널 뒤에서 일부 가려져 시각적으로 산만함 - 눈금자가 디자인에서 멀어져 활용성이 떨어짐 - 장시간 Figma를 사용하는 사용자들의 작업 속도를 저하시킴 - Figma는 “속도는 기능”이라는 판단 아래, 정식 출시에서는 탐색·속성 패널을 다시 고정했다. - 다만 패널 크기는 조절할 수 있도록 해 사용자가 작업 환경에 맞게 유연하게 배치할 수 있게 했다. - 플로팅 UI 자체가 완전히 사라지는 것은 아니다. - Figma Design의 Minimize UI 상태 - Figma Slides의 그리드 보기 - FigJam의 기본 인터페이스 - 모든 Figma 제품의 하단 툴바 에서는 플로팅 요소가 유지된다. ## Minimize UI와 작업 집중 - 기존의 Hide UI 기능은 작업물을 전면에 보여주지만, UI를 숨기거나 다시 표시하는 방식이 다소 극단적이고 제한적이었다. - UI3의 Minimize UI는 측면 패널을 접어 캔버스를 넓히면서도 필요할 때 도구에 쉽게 접근할 수 있도록 설계됐다. - 특히 다음 환경에서 유용하도록 개선됐다. - 작은 화면 - 분할 화면 - 원격·하이브리드 근무 환경 - Figma는 UI가 항상 많이 표시되어야 한다는 전제 대신, “작업이 캔버스의 중심이어야 한다”는 원칙을 장기적인 기준으로 삼았다. ## 확장성을 고려한 정보 구조 - UI3에서는 기능을 단순히 재배치하는 데 그치지 않고, 앞으로 추가될 기능을 수용할 수 있는 구조를 만들려 했다. - 기존 인터페이스는 새로운 기능을 넣을 때마다 화면에 요소를 억지로 끼워 넣는 방식에 가까웠다. - 새 탐색 패널은 다음과 같은 논리적 순서로 정보를 배치한다. - 파일 이름 - 브랜치 이름 - 프로젝트 이름 - 페이지 - 레이어 - 향후 파일 이동이나 탐색 방식이 추가되더라도 기존 구조를 크게 훼손하지 않고 확장할 수 있도록 설계했다. - 이는 현재의 편의성뿐 아니라 아직 구현되지 않은 미래의 기능까지 고려한 정보 구조다. ## 변화하는 인터페이스 관습과 블렌드 모드 - Figma는 UI3에서 과거 인터페이스의 일부 관습을 그대로 유지하기보다, 현재 사용자가 익숙하게 받아들이는 패턴을 재검토했다. - 예를 들어 다음과 같은 방식은 기술적으로는 다소 비직관적일 수 있지만 널리 정착됐다. - Shift 키를 사용하는 명령 단축키 - 화면에 거의 드러나지 않는 스크롤바 - 블렌드 모드 역시 과거의 사용 방식과 새로운 인터페이스 관습 사이의 균형을 맞추는 대상으로 다뤄졌다. - 제공된 글 내용은 블렌드 모드 섹션 초반에서 끝나므로, 구체적인 변경 사항은 확인할 수 없다. UI3의 가장 실용적인 교훈은 큰 폭의 redesign도 가설로 시작하되 실제 사용성 검증을 거쳐 수정해야 한다는 점이다. 새로운 UI를 도입할 때는 시각적 새로움보다 캔버스 공간, 작업 속도, 화면 크기별 사용성, 장시간 사용자의 효율을 우선적으로 측정하는 것이 바람직하다.

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

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

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

디자이너를 위한 더 나은

Figma는 디자이너가 아이디어를 실제 화면으로 옮기는 초기 단계를 돕기 위해 AI 기능인 **First Draft**를 재출시했다. 이 기능은 사용자의 프롬프트와 Figma 디자인 시스템을 바탕으로 여러 컴포넌트를 조합해 초안을 만들며, 완성품보다 탐색과 논의의 출발점을 제공하는 데 초점을 둔다. 기존 Make Designs는 다른 앱과 지나치게 유사한 결과가 생성되는 문제로 중단됐지만, 디자인 라이브러리와 생성 방식을 개선해 제한적 베타로 돌아왔다. ## 아이디어를 초안으로 옮기는 장벽 - 좋은 디자인 아이디어가 있어도 첫 화면을 만들기까지 반복적인 작업과 여러 장애물이 발생한다. - 초기 초안은 완성도 높은 결과물보다 다음 목적에 중요하다. - 아이디어를 빠르게 시각화 - 팀 논의 시작 - 다양한 디자인 방향 탐색 - 제품 아이디어를 실제 작업으로 발전 - Figma는 AI가 사용자의 머릿속 아이디어를 새로운 방식으로 표현하고, 초기 탐색 과정을 매끄럽게 만들 수 있다고 본다. ## First Draft의 작동 방식 - First Draft는 고객 콘텐츠를 학습 데이터로 사용하지 않는다. - OpenAI의 GPT-4, Amazon Titan과 같은 범용 AI 모델을 활용한다. - 생성 과정은 세 요소로 구성된다. - **모델**: 결과를 생성하는 AI 모델 - **컨텍스트**: Figma가 제공하는 모바일·데스크톱 디자인 시스템, 컴포넌트, 조합 사례 - **프롬프트**: 사용자가 입력하는 디자인 목표와 요구사항 - AI는 프롬프트를 해석한 뒤 적절한 디자인 시스템 컴포넌트를 선택하고 배치·수정해 초기 디자인을 만든다. - 따라서 빈 캔버스에서 시작하는 대신, 사용자가 편집하고 발전시킬 수 있는 출발점을 제공한다. ## Make Designs의 문제와 재출시 - Figma는 Config 2024에서 Make Designs를 포함한 10개 이상의 Figma AI 기능을 제한적 베타로 공개했다. - Make Designs는 간단한 프롬프트만으로 기본 디자인 초안을 생성하는 기능이었다. - 그러나 내부 디자인 시스템의 문제로 인해 생성 결과가 기존 앱과 지나치게 비슷해지는 문제가 발견됐다. - Figma는 기능을 일시적으로 비활성화하고 분석, 반복 개선, 테스트를 진행했다. - 재출시하면서 이름을 **First Draft**로 변경했다. - 완성된 디자인을 만드는 기능이 아니라 - 디자이너가 아이디어를 시작할 수 있는 “출발점”이라는 목적을 더 정확히 표현하기 위해서다. ## 네 가지 디자인 라이브러리 - 사용자는 필요에 따라 네 가지 라이브러리 중 하나를 선택할 수 있다. - 라이브러리는 낮은 충실도의 와이어프레임부터 시각적으로 구체적인 사이트·앱 디자인까지 범위가 다양하다. - 주요 활용 방식은 다음과 같다. - **로파이 와이어프레임**: 특정 스타일에 덜 구애받고 구조와 흐름을 탐색 - **하이파이 라이브러리**: 더 풍부한 시각 표현과 구체적인 UI 패턴 실험 - 이는 기존 파일이나 컴포넌트를 정확히 찾는 **Visual Search**와 구별된다. - Visual Search: 이미 존재하는 디자인 자산 검색 - First Draft: 아직 정해지지 않은 아이디어와 선택지 탐색 ## 향후 확장 방향 - Figma는 조직이 자체 디자인 라이브러리를 First Draft에 연결할 수 있도록 확장할 계획이다. - 향후 팀은 수백 개의 컴포넌트를 직접 찾지 않고도 회사 고유의 디자인 언어를 반영한 초안을 만들 수 있다. - Google Material 3 같은 표준 디자인 시스템을 활용한 개념 증명도 진행 중이다. - 코드와 연결된 강력한 컴포넌트를 사용하면 디자이너와 개발자가 동일한 디자인 시스템을 기반으로 더 긴밀하게 반복 작업을 할 수 있다. - 궁극적으로 First Draft는 기존 디자인 도구를 대체하기보다 다음을 지원하는 확장 도구로 제시된다. - 정확한 시작점 찾기 - 더 넓은 디자인 선택지 탐색 - 팀의 디자인 언어를 반영한 빠른 반복 ## 현재 상태 - 글의 편집자 주에 따르면 First Draft는 현재 독립 기능이 아니라 **Figma 디자인 에이전트**의 기능으로 통합됐다. - 디자인 에이전트는 기존 First Draft 기능에 다음 능력을 더한다. - 프롬프트 재입력 - 더 깊은 반복 작업 - 여러 요소의 일괄 수정 - 화면 흐름과 디자인에 대한 실시간 피드백 실무에서는 AI가 만든 초안을 최종 디자인으로 받아들이기보다, 빠른 구조 탐색과 팀 논의를 위한 출발점으로 활용하는 것이 적절하다. 특히 조직의 디자인 시스템을 연결할 수 있다면 브랜드 일관성을 유지하면서 초기 아이디어를 더 빠르게 검증할 수 있다.

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

사용자 경험디자인 시스템생성형 AIfigma-ai+2

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

입문하기: 첫 프로덕트

제품 디자인의 첫 직무를 얻으려면 포트폴리오를 통해 실력뿐 아니라 문제 해결 과정과 제품 사고를 보여줘야 한다. 특히 결과물 자체보다 “왜 그렇게 결정했는가”를 설명하고, 제약·트레이드오프·배운 점까지 설득력 있게 전달하는 것이 중요하다. Figma는 인턴과 신입 디자이너에게 관찰자가 아닌 제품에 기여하는 구성원으로서의 창의성과 새로운 관점을 기대한다. ## Figma의 초기 커리어 기회 - Figma는 매년 인턴과 신입 졸업생을 제품 디자인 팀에 영입한다. - 초기 경력 디자이너도 단순히 업무를 관찰하는 데 그치지 않고 제품에 새로운 아이디어와 에너지를 더한다. - 글은 Figma의 채용 기준과 초기 커리어 지원 방법, 인터뷰 과정 등을 안내한다. - 인터뷰에는 Figma 제품 디자이너인 Chia Amisola, Julia Han, Keeyen Yeo, Kelly Hu, Tammy Taabassum의 경험과 조언이 담겼다. ## 포트폴리오의 기본 원칙 - 포트폴리오는 첫인상을 결정하므로 자신의 역량, 창의성, 디자인 프로세스, 결과의 영향력을 가장 잘 보여주는 작업을 앞에 배치해야 한다. - 사이트 제작 도구, 프로젝트 개수, 시각적 스타일보다 다음 요소가 더 중요하다. - 최고의 작업을 선별했는가 - 프로젝트를 이해하기 쉬운 이야기로 구성했는가 - 방문자가 콘텐츠를 쉽게 탐색할 수 있는가 - 포트폴리오가 자신의 관점과 개성을 드러내는가 - 포트폴리오의 형식은 개인적일 수 있으며, 정해진 템플릿을 따르기보다 자신과 작업을 잘 표현하는 방식을 선택하면 된다. ## 가장 강한 프로젝트를 앞에 배치하기 - 첫 번째 프로젝트는 전체 포트폴리오의 기준을 설정하므로 가장 종합적으로 자신의 능력을 보여주는 작업을 선택해야 한다. - 어떤 프로젝트를 앞에 둘지 고민된다면, 가장 자연스럽게 설명할 수 있고 설득력 있는 이야기를 들려줄 수 있는 작업을 고르는 것이 좋다. - 좋은 프로젝트 사례에는 다음 내용이 포함된다. - 명확한 문제 정의 - 프로젝트의 주요 단계와 마일스톤 - 결과에 대한 해석과 결론 - 성과를 측정한 지표 - 진행 과정에서 얻은 교훈 - 다시 한다면 바꾸고 싶은 점 - 프로젝트가 큰 성공을 거두지 못했더라도 실패 원인과 배운 점을 설명할 수 있다면 충분히 강력한 사례가 될 수 있다. ## 결과보다 디자인 의사결정이 중요한 이유 - 제품 디자인 포트폴리오에서는 최종 화면보다 각 선택의 이유를 설명하는 능력이 중요하다. - 색상, 컴포넌트, 스타일, 문구 등 모든 요소는 의도적인 결정으로 다뤄야 한다. - 설명할 때 다음 내용을 구체적으로 제시해야 한다. - 어떤 문제를 해결하려 했는가 - 고려한 대안은 무엇이었는가 - 각 대안의 장단점은 무엇이었는가 - 시간·기술·비즈니스 등 어떤 제약이 있었는가 - 최종 선택으로 인해 발생한 트레이드오프는 무엇인가 - 이러한 설명은 단순히 화면을 제작하는 능력을 넘어, 제품의 맥락과 다양한 선택의 영향을 이해하고 있음을 보여준다. ## 포트폴리오 제작에 활용할 수 있는 자료 - Figma는 포트폴리오 발표 구성과 제작을 돕는 커뮤니티 템플릿을 제공한다. - 활용 가능한 자료에는 다음이 포함된다. - 제품 디자이너 포트폴리오 발표 가이드 및 템플릿 - 여러 기기 화면을 보여주는 디바이스 목업 - 15페이지 분량의 제품 디자인 포트폴리오 발표 템플릿 - HTML 포트폴리오 템플릿 - UI·UX 디자이너용 개인 포트폴리오 템플릿 - 템플릿은 완성된 정답이라기보다 작업의 구조를 잡고 빠르게 시작하기 위한 도구로 활용하는 것이 적절하다. 프로젝트를 많이 넣기보다 가장 잘 설명할 수 있는 작업을 선별하고, 화면보다 문제 정의·과정·의사결정·성과·배움을 중심으로 구성하는 것이 효과적이다. 포트폴리오를 완성한 뒤에는 각 선택의 “왜”를 말로 설명하는 연습을 해보는 것이 좋다.

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

사용자 경험Figma생성형 AI프로덕트 디자인+3

figma·2024년 8월 19일원문

크런치롤이 개발자 (새 탭에서 열림)

글로벌 애니메이션 스트리밍 서비스인 크런치롤(Crunchyroll)은 15개의 플랫폼과 12개의 언어를 지원하는 복잡한 환경 속에서 디자인 일관성을 유지하기 위해 '유니버설 디자인 시스템(Universal Design System)'과 피그마의 '개발 모드(Dev Mode)'를 적극 도입했습니다. 과거 인수합병 과정에서 쌓인 파편화된 워크플로우와 기술 부채를 정리함으로써, 디자이너와 엔지니어 간의 협업 효율을 극대화하고 사용자에게 통일된 브랜드 경험을 제공하게 되었습니다. 이번 전환은 단순히 도구를 바꾼 것을 넘어, 복잡한 다중 플랫폼 환경에서 제품의 출시 속도와 품질을 동시에 잡는 전략적 선택이었습니다. **다중 플랫폼 환경에서의 복잡성과 레거시 문제** * 크런치롤은 웹, 모바일뿐만 아니라 게임 콘솔, 스마트 TV 등 9개의 거실용 기기를 포함해 총 15개의 플랫폼을 지원하며, 1,500만 명 이상의 글로벌 팬들에게 서비스를 제공합니다. * 과거에는 각 플랫폼별로 개별적인 디자인 시스템(iOS, Android, tvOS 등)을 운영했으며, 이는 협업 과정에서 심각한 불일치와 혼선을 초래했습니다. * 기존 워크플로우는 Jira 트리거와 Zeplin에 의존했으나, 아트보드 로딩에만 4~5분이 소요되거나 시차 문제로 인해 최신 디자인 사양을 실시간으로 공유하기 어려운 구조였습니다. **디자인 시스템을 통한 효율성 극대화: "식재료 준비(Meal Prepping)"** * 디자인 시스템을 '식재료 미리 준비하기'에 비유하여, 매번 새로운 기능을 만들 때마다 처음부터 설계하는 것이 아니라 준비된 컴포넌트를 재사용하여 리소스를 절약합니다. * 엔지니어링의 DRY(Don't Repeat Yourself) 원칙을 디자인에도 적용하여 중복 컴포넌트를 제거하고 일관된 타이포그래피, 그리드, 간격 시스템을 구축했습니다. * 이러한 표준화는 사용자의 인지 부하를 줄여 구독 전환율을 높이는 동시에, 제품 관리자가 아이디어를 빠르게 검증할 수 있는 속도 경쟁력을 제공합니다. **개발 모드(Dev Mode)를 활용한 협업 프로세스의 혁신** * 개발자가 피그마 링크를 통해 '개발 준비 완료(Ready for development)' 페이지에 접속하면, 수많은 아이데이션 과정은 생략하고 오직 구현에 필요한 최신 스펙과 코드 값만 바로 확인할 수 있습니다. * 기존에 5분씩 걸리던 데이터 파싱 속도가 획기적으로 개선되어, 엔지니어가 특정 결제 플로우나 컴포넌트의 상세 정보를 찾는 데 드는 시간을 대폭 단축했습니다. * 코드 커넥트(Code Connect) 베타 버전을 통합하여 디자인 시스템의 컴포넌트와 실제 코드를 더 밀접하게 연결함으로써 디자인과 코드 간의 괴리를 좁히고 있습니다. **디자인 시스템 운영의 철학과 변화 관리** * 디자인 시스템은 팀을 지원하기 위한 도구일 뿐, 프로세스의 포로가 되어서는 안 된다는 철학 아래 지속적인 교육과 온보딩 워크숍을 진행했습니다. * 과거의 복잡한 QA 단계나 불필요한 태그 시스템을 과감히 삭제하고, 개발자가 필요한 정보에 직접 접근할 수 있는 자율적인 환경을 조성했습니다. * 전문화된 디자인 원칙(계층 구조, 그리드 등)을 준수하는 '좋아 보이는 디자인'과 엣지 케이스까지 고려한 '잘 작동하는 디자인'을 디자인 성공의 핵심 지표로 삼고 있습니다. 디자인 시스템은 한 번 구축하고 끝나는 것이 아니라 팀의 성장에 맞춰 계속 진화해야 합니다. 크런치롤의 사례처럼 도구의 기능을 활용해 불필요한 단계를 제거하고, 개발자와 디자이너가 동일한 언어로 소통할 수 있는 환경을 만드는 것이 복잡한 글로벌 서비스를 운영하는 핵심 전략입니다.

사용자 경험Figma디자인 시스템design-to-code+4

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

Config 2024의

Config 2024의 시각 아이덴티티는 Figma의 제품 경험을 행사 공간과 디지털 접점 전체로 확장하는 데 초점을 맞췄다. Figma의 캔버스, Figma Slides, 다양한 제작 모드를 바탕으로 기본 도형이 변형·확장되는 형태 언어를 만들었으며, 이를 통해 독립적인 행사 정체성과 Figma 브랜드의 일관성을 동시에 확보했다. 1만 명 이상의 현장 참가자와 온라인 참가자를 고려해 미적 요소뿐 아니라 안내와 동선까지 아우르는 모듈형 디자인 시스템으로 구현한 것이 핵심이다. ## Figma 기능에서 출발한 형태 언어 - 브레인스토밍 단계에서 새롭게 개편된 Figma와 Figma Slides의 핵심 경험을 시각적 출발점으로 삼았다. - 작업 생성, 공유, 발표 등 서로 다른 제작 모드를 전환하는 경험에서 영감을 얻었다. - Figma 캔버스와 Figma Slides의 새로운 캔버스를 시각적으로 해석해, 형태가 확대·이동·변형되며 예상하지 못한 관점을 보여주는 시스템을 구상했다. - 주요 테마는 다음과 같다. - 작업과 맥락 사이를 이동하는 움직임 - 캔버스를 비우거나 작업을 보여주며 창작 의도를 증폭하는 것 - 협업을 통해 다양한 관점이 만나는 것 - 여러 제작 방식을 포용하는 것 ## 형태와 기능의 결합 - 행사 디자인을 단순한 장식이 아니라 사용자 경험 설계의 문제로 접근했다. - 등록부터 원하는 발표 세션의 좌석 확보까지, 참가자가 마주하는 다양한 상황을 시각 언어로 지원해야 했다. - 정교한 비주얼과 일관된 안내 체계를 결합해 복잡한 행사 경험을 이해하기 쉽게 만들었다. - 기본적인 원시 도형을 조합해 더 복잡한 대형 그래픽과 공간 요소를 제작했다. ## 공간 전체로 확장된 슈퍼그래픽 - 샌프란시스코 Moscone Center의 넓은 규모에 맞춰 건물 외벽과 다양한 표면에 그래픽을 적용했다. - 행사장 중앙에는 서로 다른 형태의 대형 물리적 슈퍼그래픽 세 개를 설치했다. - 참가자들은 이 구조물을 좌석, 사진 촬영 배경, 만남의 장소로 활용했다. - 그래픽을 평면 이미지에 머물게 하지 않고 참가자가 직접 상호작용하는 공간 경험으로 확장했다. ## 기본 도형을 활용한 모듈형 시스템 - Config 브랜드의 지속적인 모티프인 도형을 Figma 툴바의 기본 도형에서 가져왔다. - 사각형 - 원 - 다각형 - 누구나 Figma에서 디자인을 시작할 때 사용하는 단순한 도형을 복잡한 슈퍼그래픽의 구성 요소로 발전시켰다. - 동일한 브랜드를 유지하면서도 수많은 행사 자산이 반복적으로 보이지 않도록 모듈형 구조를 설계했다. - Figma 안에 슈퍼그래픽 컴포넌트 라이브러리를 구축하고, 각 그래픽마다 세 가지 변형을 제공해 서로 다른 각도와 구성을 표현했다. - 이 방식으로 행사장, 디지털 화면, 인쇄물 등 다양한 접점에서 일관성과 변주를 동시에 확보했다. ## 대규모 행사에 대응하는 디자인 시스템 - Config에는 현장 참가자 1만 명 이상과 더 많은 온라인 참가자가 참여하므로, 작은 접점까지 포함한 전체 경험 설계가 필요했다. - 키노트나 건물 외벽처럼 눈에 띄는 요소뿐 아니라 다음 항목에도 동일한 시각 언어를 적용했다. - 디지털 화면 - 안내물 - 기념품과 스웨그 백 - 행사장 내 각종 접점 - 행사 아이덴티티가 특정 장면에만 존재하는 것이 아니라 참가자의 모든 상호작용에서 이어지도록 설계했다. ## 실용적인 시사점 대규모 브랜드 경험을 만들 때는 먼저 브랜드의 핵심 기능이나 사용자 경험에서 반복 가능한 시각 원리를 추출하는 것이 효과적이다. 이후 기본 도형과 컴포넌트처럼 재사용 가능한 단위로 시스템화하면, 수많은 채널에 빠르게 적용하면서도 일관성·확장성·변주를 함께 유지할 수 있다.

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

사용자 경험Figma디자인 시스템component-library+1

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

에코 체임버를

The Browser Company는 브라우저를 기존 기술의 반복이 아니라, 다양한 문화와 개인의 경험을 결합해 새롭게 설계할 수 있는 큰 창작의 캔버스로 본다. Arc의 차별화된 인터페이스와 AI 기능은 기술 업계 안의 관습만 따르지 않고 책, 영화, 자연 같은 외부 영감에서 출발한다. 특히 AI는 눈에 띄는 장식이 아니라 일상적인 브라우징에 자연스럽게 스며들어 실제로 도움을 주는 경험이어야 한다고 강조한다. ## 기술 바깥에서 영감 얻기 - Head of Storytelling Nashilu Mouen은 Zadie Smith와 Toni Morrison 같은 문학 작품에서 영감을 얻는다고 말한다. - 중요한 질문은 “기술에 속하지 않으면서 기술 안에 존재하려면 어떻게 해야 하는가”이다. - 업계의 기존 제품과 경쟁사의 관행만 바라보면 새로운 것을 만들기 어렵다. - 다양한 분야의 관점과 팀원 개개인의 경험을 제품에 반영해야 기존 브라우저와 다른 결과를 만들 수 있다. ## 브라우저를 새로운 창작의 캔버스로 보기 - 브라우저는 사람들이 매일 사용하는 도구이지만, 쿠키 동의와 복잡한 웹 경험 등 개선할 여지가 많다. - The Browser Company는 “왜 안 되는가?”보다 “왜 안 되는가?”라는 태도로 기존 관습에 도전한다. - 탭을 화면 위쪽이 아닌 측면에 배치한 Arc의 구조처럼, 익숙한 인터페이스도 근본적으로 다시 생각할 수 있다. - 브라우저를 만든다는 대담한 시도 자체가 제품의 가능성을 넓힌다. ## 여러 목소리가 만드는 브랜드 - Arc의 브랜드는 한 사람의 관점이 아니라 다양한 구성원이 함께 만든 “여러 목소리”의 결과로 설명된다. - 팀원들의 배경과 관심사가 제품의 표현 방식과 사용자 경험에 직접 영향을 준다. - 예를 들어 Arc의 언박싱 경험은 A24 영화의 타이틀 시퀀스, 영화 시작 장면의 분위기, 태양 흑점에서 영감을 얻었다. - 제품이 실제로 다르다면 기능뿐 아니라 사용자가 처음 접하는 순간에도 그 차이가 느껴져야 한다. ## AI를 일상에 자연스럽게 심기 - 소프트웨어마다 AI 기능이 추가되면서 사용자는 “이 기능이 실제로 나에게 어떤 도움을 주는가?”를 묻게 됐다. - Arc는 AI를 과장된 시각 효과나 장식적인 “반짝임”으로 보여주기보다, 브라우징 흐름에 자연스럽게 통합하려 한다. - 꽃이 피는 계절적 경험에서 영감을 얻어, AI 기능을 방해되지 않는 방식으로 심고 사용자 경험을 특별하게 만드는 방향을 모색한다. - AI 역시 성장과 변화의 계절을 거치므로, 모든 기능이 항상 성공할 것이라고 가정하지 않고 빠르게 실험하고 검증한다. - 팀은 짧은 기간에도 30개가 넘는 AI 활용 방식을 탐색할 만큼 신속하게 프로토타이핑한다. (제공된 글은 이 대목에서 중단되어 이후 내용은 확인할 수 없다.) ## 실용적인 시사점 새로운 제품을 만들 때는 같은 업계의 성공 사례만 분석하기보다 문학, 영화, 자연 등 전혀 다른 분야에서 영감을 찾아야 한다. AI 기능도 유행을 따라 추가하기보다 사용자의 일상 흐름을 개선하는지 검토하고, 작게 빠르게 실험하면서 가장 자연스러운 형태를 찾아가는 접근이 유효하다.

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

사용자 경험AI프로덕트 디자인web-browsers+1

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

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

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

새로워진 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

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

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

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

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

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

샤메인 리의 개발자

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

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

사용자 경험developer-toolsaugmented-realityunity+3

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

장인정신과 아름다움

아름다움과 세밀한 완성도는 단순한 장식이 아니라 사용성, 전환율, 매출을 높이는 제품 경쟁력이다. 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

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

알래스카 항공, 변

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

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

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

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

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

디자인 시스템 구축 방법

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

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

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