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

Figma의 3C:

Figma 입문자는 개별 기능을 순서대로 외우기보다 **생성(Creation), 사용자화(Customization), 협업(Collaboration)**이라는 세 가지 관점으로 학습하는 것이 효과적이다. 기본 요소를 만들고, 다양한 상황에 맞게 유연하게 개선한 뒤, 팀원들이 재사용할 수 있도록 공유하는 단계적 접근이 Figma 활용 능력과 협업 역량을 함께 높여준다. 명확한 목표와 일정, 그리고 직접 시도하고 질문하는 학습 태도도 중요하다. ## 목표·일정·학습 태도 설정 - 학습을 시작하기 전에 무엇을 배우고 어떻게 활용할지 목표를 적어 둔다. - 예시 목표: - Figma와 자신의 디자인 프로세스에 필요한 기본 도구 익히기 - 효율적으로 협업하는 팀원 되기 - 예시 일정: - **30일:** 기본 도구, 협업 방식, 파일 정리와 관리 습관 이해 - **60일:** 몇 가지 프로젝트에 적용해 부족한 부분 파악 - **90일:** 고급 기능을 실제 업무 흐름에 도입 - 권장 학습 태도: - 직접 만들고, 망가뜨리고, 다시 만들며 기능을 실험한다. - 작업물을 공유하고 Slack, 소셜 미디어, Figma Community Forum 등에서 질문한다. - 새로운 도구와 프로세스에 익숙해지는 데 시간이 걸리므로 필요할 때 휴식한다. ## 세 가지 C로 배우는 Figma - **Creation(생성)** - 기본적인 디자인 요소를 직접 만든다. - 에디터의 핵심 조작과 기본 도구 사용법을 익히는 단계다. - **Customization(사용자화)** - 만든 요소를 더 유연하고 재사용 가능하게 만든다. - 다양한 사용 사례에 대응하도록 고급 기능을 적용한다. - **Collaboration(협업)** - 완성한 디자인을 팀원과 공유한다. - 다른 사람이 자신의 파일에서 사용할 수 있도록 컴포넌트와 문서를 제공한다. - 세 단계는 사다리의 각 발판처럼 연결된다. 먼저 요소를 만들고, 이를 확장·정리한 뒤, 팀의 공동 자산으로 공유해야 효과적인 협업이 가능하다. ## 버튼 제작으로 이해하는 학습 과정 - 글은 버튼을 만드는 과정을 세 가지 C의 사례로 제시한다. - 버튼을 직접 만든다: **생성** - 버튼을 컴포넌트로 전환한다: **사용자화** - 다른 사람이 사용할 수 있도록 게시한다: **협업** - 최종적으로는 하나의 버튼이 아니라 여러 상황에서 재사용할 수 있는 버튼 세트를 구축하는 방향으로 발전한다. - 이 과정을 통해 Figma 기능 자체보다 실제 업무 흐름에 기능이 어떻게 연결되는지 이해할 수 있다. ## 학습에 활용할 자료 - Figma Help Center에서 기능별 상세 설명을 확인할 수 있다. - Figma YouTube 채널에서는 튜토리얼, 라이브 방송 녹화본, 기능 출시 영상을 제공한다. - 정기적인 온라인 이벤트와 Figma Community의 플레이그라운드 파일을 통해 실습할 수 있다. - 특히 기능을 따로 암기하기보다 하나의 디자인 요소를 완성해 가며 세 가지 C를 순서대로 적용하는 방식이 효과적이다. 처음부터 모든 기능을 익히려 하기보다 작은 요소 하나를 만들고, 재사용 가능한 컴포넌트로 발전시킨 뒤, 팀과 공유하는 실습부터 시작하는 것이 좋다.

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

Figma디자인 시스템프로토타이핑사용자 인터페이스+2

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

HP, 개발자 모드로 디자인

HP는 100개가 넘는 제품군과 여러 사업부가 각기 다른 방식으로 디지털 경험을 만들던 문제를 해결하기 위해 디자인 시스템 Veneer와 Figma Dev Mode를 도입했다. Veneer는 디자인 언어, 컴포넌트, 문서화, 거버넌스를 통합하고, Dev Mode는 디자인과 개발 사이의 전달 과정을 간소화했다. 그 결과 HP는 디자인 일관성을 높이고 일부 프로젝트의 개발 시간을 50% 줄였으며, 대규모 조직에서 디자인 시스템의 채택 효과를 정량적으로 측정할 수 있었다. ## 복잡한 제품 생태계를 위한 다층 디자인 시스템 - HP는 프린터, 노트북, 게이밍 시스템 등 100개 이상의 다양한 제품군을 운영한다. - 각 제품과 사업부가 독립적으로 움직이면서 디지털 경험의 시각적·사용자 경험적 일관성을 유지하기 어려웠다. - 초기에는 단순한 프런트엔드 컴포넌트 라이브러리였던 Veneer가 다음 요소를 포함하는 종합 디자인 시스템으로 발전했다. - HP 브랜드에 기반한 디자인 언어 - 디자인 및 개발용 컴포넌트와 패턴 - 사용 지침, 원칙, 모범 사례, 코드 표준, 코드 스니펫 - 디자이너와 개발자의 피드백을 반영하는 커뮤니티와 거버넌스 - HP의 여러 서브 브랜드를 하나의 획일적인 시스템으로 지원하기는 어렵기 때문에, Veneer는 공통 기반을 유지하면서도 브랜드별 차이를 수용할 수 있는 다층 구조로 설계됐다. ## 채택률과 효율성 측정 - HP는 Veneer의 효과를 사용량 같은 정량 지표와 구성원 피드백 같은 정성 지표를 함께 활용해 평가한다. - 아이콘 라이브러리의 경우: - 320개 팀이 사용 - 915개의 아이콘 컴포넌트 제공 - 주당 평균 8만 5천 회 삽입 - 디자인 시스템을 활용하면 처음부터 구현하는 것보다 개발 속도가 크게 향상된다. 글에서는 IBM 연구의 단순 폼 개발 속도 47% 향상 사례도 언급한다. - 2023년 1월부터 12월까지 Veneer를 통해 프로젝트가 절약한 시간이 시스템 제작에 투입된 시간보다 500% 많았다. - HP 엔지니어링 리더십에 따르면 일부 프로젝트에서는 개발 시간이 50% 단축됐다. - 다만 디자이너들은 자신이 담당하는 제품과 사용자 경험에 강한 책임감을 갖고 있어, 외부 시스템의 도입을 제품의 창의성을 제한하는 일로 받아들일 수 있었다. - HP는 Veneer가 반복적인 작업을 줄이고 디자이너가 제품 고유의 문제와 창의적인 부분에 집중하도록 돕는다는 점을 보여주며 채택을 유도했다. ## Dev Mode로 디자인과 개발 연결 - Dev Mode는 개발자가 Figma 안에서 디자인 사양을 직접 확인하도록 해 디자인 핸드오프를 간소화했다. - 이로 인해 사양을 확인하기 위한 회의와 디자이너·개발자 간의 반복적인 질의응답이 줄었다. - HP가 특히 유용하게 활용한 기능은 다음과 같다. - **변경 사항 비교**: 기존 제품을 업데이트할 때 디자인 버전 간 변경점을 빠르게 확인할 수 있다. - **개발 준비 완료 표시**: 디자이너가 구현할 영역을 명시해 개발자가 작업 범위를 명확히 파악할 수 있다. - **변수**: 프리미티브 토큰이나 시맨틱 토큰과 연결된 변수를 활용해 여러 테마와 모드에 대응하고 디자인 시스템을 확장할 수 있다. - Dev Mode는 단순히 디자인 파일을 개발자에게 전달하는 도구가 아니라, Veneer의 컴포넌트와 토큰을 실제 코드 구현으로 연결하는 협업 환경으로 활용됐다. HP의 사례는 대규모 조직에서 디자인 시스템을 성공적으로 운영하려면 공통 컴포넌트만 제공하는 것보다 브랜드별 유연성, 명확한 문서화, 거버넌스, 채택 지표가 함께 필요하다는 점을 보여준다. 또한 Dev Mode처럼 디자인 변경 사항과 구현 정보를 같은 작업 흐름에서 제공하면 핸드오프 비용을 줄이고 개발 생산성을 높일 수 있다.

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

Figma디자인 시스템디자인 토큰dev-mode+2

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일·4분 읽기큐레이션 요약

AI 시대의 좋은 디자인이란 무엇

AI가 제품 개발을 대중화할수록 제품을 차별화하는 요소는 디자인이 된다. 모바일 시대에 데스크톱 경험을 작은 화면에 그대로 옮겼던 것처럼, 초기 AI 제품도 단순한 챗봇과 템플릿에 머물고 있지만 새로운 상호작용 패턴을 발견할 가능성이 크다. 따라서 AI 시대의 좋은 디자인은 기술 자체를 좇기보다 공감, 창의성, 실제 사용자 문제 해결이라는 변하지 않는 원칙을 바탕으로 AI와 디자이너의 역할을 재정의하는 것이다. ## AI 시대에 디자인이 더 중요해지는 이유 - AI는 간단한 프롬프트만으로 코드, 디자인, 애플리케이션 전체를 생성할 수 있어 아이디어에서 구현까지의 속도를 크게 높인다. - 더 많은 사람이 제품 제작 과정에 참여할 수 있게 되지만, 결과적으로 비슷한 제품이 빠르게 양산될 가능성도 커진다. - 제품의 차별화는 기능 구현보다 다음과 같은 디자인 경험에서 나타날 수 있다. - 풍부한 상호작용 - 직관적인 제스처 - AI라는 매체에 적합한 새로운 사용 패턴 - 2007년 아이폰 등장 직후 많은 기업이 기존 데스크톱 화면을 모바일에 단순히 축소했던 것처럼, 현재의 단순 챗봇과 템플릿형 AI 제품도 새로운 기술에 적응하는 초기 단계로 볼 수 있다. - 새로운 기술의 잠재력을 실현하려면 충분한 시간과 반복적인 실험이 필요하다. ## 좋은 디자인의 원칙을 AI가 이해하도록 만들기 - Figma는 디자인 시스템을 활용해 UI의 첫 시안을 생성하는 AI 기능을 개발하면서, 먼저 “좋은 디자인”이 무엇인지 정의해야 했다. - LLM은 본질적으로 텍스트 기반 모델이므로 글쓰기나 코딩에는 강하지만, 시각적·구조적 판단이 필요한 UI 디자인을 생성하는 일은 더 어렵다. - 모든 디자인 규칙을 AI에 전달하는 방식은 현실적이지 않다. - 좋은 디자인의 모든 세부 사항을 유한한 규칙으로 정의하기 어렵다. - 방대한 규칙을 하나의 프롬프트에 넣으면 토큰 제한에 걸린다. - 상황에 따라 달라지는 디자인 판단까지 규칙화하기도 어렵다. - 이에 따라 어떤 UI에도 대체로 적용할 수 있는 작지만 강력한 원칙으로 디자인 지식을 압축해야 한다. - 디자인을 가르치는 과정처럼, 디자이너의 직관을 다른 사람이 실행할 수 있는 명확한 원칙으로 분해하는 작업이 중요하다. - 좋은 원칙은 다음 조건을 갖춰야 한다. - 명확할 것 - 구체적일 것 - 실제 제작 과정에서 적용 가능할 것 - 다양한 UI 상황에 일반화될 것 ## 디자인에서 코드까지의 순환 고리 단축 - AI는 디자인 결과물을 코드로 옮기는 시간을 줄여 제품 제작 주기를 단축할 수 있다. - 디자인과 개발 사이의 간극이 줄어들면 더 많은 시안을 빠르게 구현하고 검증할 수 있다. - 중요한 것은 단순히 코드를 자동 생성하는 것이 아니라, 디자인 의도와 사용자 경험이 구현 단계에서도 유지되도록 하는 것이다. - 빠른 생성 능력은 한 번에 정답을 얻는 수단이라기보다 실험과 반복을 늘리는 수단으로 활용해야 한다. ## 실용주의와 반복적인 실험 - AI 기술이 빠르게 변하는 상황에서는 완벽한 미래상을 기다리기보다 현재 가능한 도구로 실제 문제를 해결하는 접근이 필요하다. - 기술을 사용하기 위한 기능보다 사용자에게 실질적인 가치를 주는 경험을 우선해야 한다. - 초기 AI 제품의 어색함은 실패라기보다 새로운 상호작용 방식을 발견하기 위한 실험의 일부다. - 디자이너는 생성된 결과를 그대로 받아들이기보다 사용자 맥락에 맞는지 검토하고, 반복적인 수정과 검증을 통해 품질을 높여야 한다. ## 디자이너와 AI의 공동 창작 - AI는 디자이너를 단순히 대체하는 자동화 도구가 아니라 아이디어를 확장하고 제작 속도를 높이는 협업 파트너가 될 수 있다. - AI가 초안과 반복 작업을 담당하면 디자이너는 문제 정의, 사용자 공감, 우선순위 설정, 창의적 판단에 더 집중할 수 있다. - 공동 창작 모델에서는 인간과 AI의 강점을 결합하는 작업 분담이 중요하다. - AI: 빠른 생성, 변형, 탐색, 반복 작업 - 디자이너: 목적 설정, 맥락 이해, 품질 판단, 사용자 관점의 의사결정 - AI가 발전할수록 디자이너의 역할이 사라지는 것이 아니라, 무엇을 만들고 왜 만들어야 하는지 결정하는 능력이 더욱 중요해진다. AI를 도입할 때는 생성 속도 자체보다 사용자 문제와 디자인 원칙을 먼저 정의하는 것이 좋다. 작은 원칙을 명확히 정리하고, AI로 여러 시안을 빠르게 만든 뒤 사람의 판단과 사용자 검증을 통해 반복 개선하는 방식이 가장 현실적인 접근이다.

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

FigmaAI디자인 시스템대규모 언어 모델+2

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에서 점검하는 방식으로 활용하면 효과적이다.

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

Figma사용자 경험figjamdesign-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는 프리랜서와 소규모 에이전시가 여러 고객과 협업할 때 발생하는 라이선스·프로젝트 이전·좌석 과금 문제를 해결하기 위한 billing 및 아키텍처 개선을 추진한다. 핵심 방향은 고객사와의 연결된 워크스페이스 제공, 플랜 간 프로젝트 이전 간소화, 유료 좌석 관리와 과금 알림 강화다. 이를 통해 여러 플랜의 라이선스를 따로 구매하거나 관리자가 프로젝트 종료 후 좌석을 수동으로 정리해야 하는 부담을 줄이려 한다. ## 프리랜서와 에이전시가 겪던 문제 - 기존 Figma 요금제는 한 조직 내부에서 협업하는 팀을 중심으로 설계됐다. - 프리랜서와 에이전시는 고객사마다 다른 Figma 계정과 플랜을 사용해야 했다. - 그 결과 다음과 같은 운영 부담이 발생했다. - 여러 플랜에서 라이선스를 중복으로 확보 - 고객 목록과 사용자 권한을 지속적으로 관리 - 프로젝트 종료 후 사용하지 않는 유료 좌석을 직접 다운그레이드 - 고객과 파일을 공유하거나 작업을 인수인계할 때 협업 마찰 발생 ## 외부 협업을 위한 연결된 워크스페이스 - Figma 계정 간에 연결된 워크스페이스를 만들 수 있는 기능을 개발 중이다. - 프리랜서·에이전시와 고객이 각자의 기존 Figma 좌석을 사용하면서 같은 공간에서 파일을 생성하고 공동 편집할 수 있게 된다. - 고객사마다 별도의 라이선스를 추가로 구매해야 하는 문제를 줄이는 것이 목적이다. - 글 작성 시점에는 다음 해 초 출시를 목표로 하고 있었다. ## 플랜 간 프로젝트 이전 개선 - 기존에는 Organization 또는 Enterprise 플랜 고객에게만 프로젝트를 이전할 수 있었다. - 향후에는 Professional, Organization, Enterprise 등 서로 다른 플랜 간에도 작업을 이전할 수 있도록 개선한다. - 주요 개선 사항은 다음과 같다. - 원본 프로젝트를 유지한 채 복사본만 고객에게 이전 - 이전 과정에서 협업자를 제거해 의도하지 않은 유료 좌석 업그레이드 방지 - 고객의 플랜 유형과 관계없이 작업 이전 가능 - 이 기능 개선은 2024년 8월 20일 기준으로 적용되었다. ## 과금 알림과 좌석 관리 강화 Figma는 협업을 쉽게 만들기 위해 파일을 공유받은 사용자가 즉시 편집할 수 있도록 했지만, 이 방식은 프로젝트가 끝난 뒤 유료 좌석을 정리해야 하는 책임을 관리자에게 남겼다. - 기존에는 청구서 발행 며칠 전에 예정된 요금을 이메일로 안내했다. - 관리자는 추가로 일일·주간·월간 좌석 업그레이드 알림을 받을 수 있다. - 알림에는 다음 정보가 포함된다. - 어떤 사용자가 유료 좌석으로 업그레이드됐는지 - 어떤 작업으로 업그레이드가 발생했는지 - Figma Design 및 FigJam에서 발생한 좌석 변경 내역 - 신규 계정은 플랜에 따라 알림이 기본 활성화된다. - Professional: 주간 알림 - Organization·Enterprise: 월간 알림 - 기존 고객도 설정에서 알림을 직접 활성화할 수 있다. ## 관리자 승인 기반 좌석 업그레이드 - 계정에 새로 참여하는 사용자의 기본 역할을 `viewer-restricted`로 지정할 수 있다. - 이 설정을 사용하면 사용자가 자동으로 유료 좌석으로 승격되지 않는다. - 유료 좌석 업그레이드에는 관리자의 명시적인 승인이 필요하다. - 프로젝트성 협업이 많고 외부 사용자가 자주 추가되는 조직에서 예상치 못한 과금을 통제하는 데 유용하다. ## 향후 과금 아키텍처 개선 - Figma는 현재의 알림과 승인 기능 외에도 근본적인 billing 아키텍처를 개선하는 작업을 진행 중이다. - 단기적으로는 관리자에게 더 많은 가시성과 통제권을 제공하고, 장기적으로는 프리랜서와 에이전시의 협업 방식에 맞는 요금 구조를 마련하는 것이 목표다. - 이번 발표는 완성된 요금제 개편보다는 향후 로드맵과 임시 관리 기능을 제시한 성격이 강하다. 프리랜서와 에이전시는 당장 `viewer-restricted` 기본 좌석과 정기적인 좌석 업그레이드 알림을 활성화하는 것이 좋다. 프로젝트 이전 시에는 원본 보존과 협업자 제거 옵션을 활용해 불필요한 권한과 과금이 발생하지 않도록 관리해야 한다.

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

Figmafigjamcollaborationfigma-design+1

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

요점 정리: 제5호

아이디어를 현실로 만드는 여정에는 동료, 멘토, 커뮤니티와의 연결이 필수적이라는 글이다. Figma는 Config 2024를 앞두고 창작 도구, 제품의 완성도, AI, 커뮤니티가 서로 영향을 주는 사례들을 소개한다. 온라인과 오프라인을 막론하고 함께 배우고 교류하는 것이 창작과 혁신을 지속시키는 힘이라고 강조한다. ## 사람과 커뮤니티가 만드는 진전 - 예상치 못한 이메일, 멘토의 조언, 동료와의 대화가 아이디어를 구체화하고 다음 단계로 나아가게 한다. - 개인의 성취처럼 보이는 결과도 실제로는 주변 사람들과의 연결과 협업에서 비롯되는 경우가 많다. - Figma는 Config를 통해 창작자, 개발자, 제품 담당자, 디자이너가 서로의 경험을 공유하도록 장려한다. - 직접 만나는 방식뿐 아니라 온라인 커뮤니티와 URL을 통한 연결도 중요한 관계 형성 수단으로 본다. ## 개발자 도구를 ‘마법처럼’ 만드는 제품 설계 - Snap AR의 Lens Studio를 만든 제품 관리자 Charmaine Lee의 경험을 소개한다. - 좋은 창작 도구는 기획자나 관리자만 설계하는 것이 아니라, 팀 전체가 실제 파일과 제품을 직접 사용하며 만들어야 한다. - 개발자와 창작자의 작업 방식에 깊이 참여하는 ‘all-hands-on-deck’ 접근이 도구의 사용성과 즐거움을 높인다. - 사용자가 도구를 배우는 데 드는 부담을 줄이고, 아이디어를 즉시 실험할 수 있게 하는 것이 핵심이다. ## 형태와 기능을 결합하는 완성도 - Stripe의 Katie Dill, Linear의 Karri Saarinen, Figma의 Yukhi Yamashita가 제품의 ‘craft and beauty’를 논의한다. - 아름다운 시각적 표현은 기능과 분리된 장식이 아니라 제품 경험의 일부다. - 완성도와 품질은 단순한 미적 평가를 넘어 사용자 만족도, 신뢰, 제품 성장과 연결된다. - 형태와 기능을 함께 다듬는 투자가 장기적으로 비즈니스 성과와 제품 경쟁력에 영향을 준다고 설명한다. ## Figma를 활용한 퀼트 제작 - 전직 제품 디자이너 Nicole Boettcher는 익숙한 디자인 도구인 Figma로 퀼트를 설계하고 제작한다. - Figma에서 도형을 배치하고 패턴을 계획하는 방식이 실제 천 조각의 구성과 배치에도 활용된다. - 디지털 디자인 도구는 화면 속 UI 제작을 넘어 공예와 물리적 제작 과정에도 적용될 수 있다. - “사각형을 움직이는 일”이라는 디자이너의 작업 방식이 새로운 창작 분야에서도 이어진다는 점을 보여준다. ## AI 시대에 필요한 학습과 협업 - Replit의 David Hoang은 AI가 창작 도구와 제품 설계·개발 workflow를 크게 바꿀 것으로 전망한다. - AI의 변화에 대응하려면 개인이 혼자 학습하기보다 동료 집단과 함께 실험하고 배우는 환경이 필요하다. - 구성원 간의 책임감과 즐거움이 공존하는 커뮤니티가 지속적인 학습 동기를 만든다. - 기술 변화가 클수록 서로의 경험을 공유하고 함께 적응하는 코호트와 커뮤니티의 역할이 커진다. ## Config 2024와 참여 방법 - 2024년 Config의 현장 티켓은 매진됐지만 온라인 참가와 지역별 watch party 참여가 가능하다고 안내한다. - 행사 기간에는 라이브 블로그를 통해 발표 내용, 연사 하이라이트, 참가자 관련 소식을 확인할 수 있다. - 이번 호의 일러스트와 Config 관련 굿즈는 일러스트레이터 Thomas Colligan이 제작했다. - 뉴스레터 구독을 통해 관련 콘텐츠를 지속적으로 받아볼 수 있다. 창작 도구와 기술의 발전을 따라가려면 도구 자체뿐 아니라 이를 사용하는 사람들과 적극적으로 연결하는 것이 좋다. 특히 새로운 AI 도구를 학습하거나 제품을 개선할 때는 혼자 완성하려 하기보다 동료와 실험하고 피드백을 나누는 환경을 만드는 것이 실용적인 접근이다.

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

FigmaAI프로덕트 디자인developer-tools+3

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

초안 작동 방식 업데이트 | Figma

Figma는 Starter·Professional 플랜의 Drafts를 팀과 분리된 개인 공간에서 팀 내부의 전용 Drafts 공간으로 이전한다. 이를 통해 파일 소유권과 권한을 명확히 하고, 팀 플랜 기능과 향후 결제·라이선스 관리 개선의 기반을 마련하려는 것이다. Drafts는 계속 비공개로 유지되며 무료로 생성·편집할 수 있지만, 팀으로 이동할 때 일부 협업자의 편집 권한이 변경될 수 있다. ## Drafts 이전의 배경 - 기존 Drafts는 팀에 속하지 않아 파일 소유권과 팀 연계가 불명확했다. - Starter·Professional과 Organization·Enterprise의 Drafts 구조가 달라 제품 개선이 복잡했다. - 팀과 연결되지 않은 Drafts에서는 고급 프로토타이핑, 비밀번호 보호, Dev Mode 같은 유료 기능을 사용할 수 없었다. - 개인 작업과 업무용 작업이 분리되지 않아 파일 권한, 보안, 지식재산권 관리에 문제가 생길 가능성이 있었다. ## Drafts의 새로운 구조 - 모든 Drafts는 이제 하나의 팀에 연결되어야 한다. - 사용자는 자신이 속한 각 팀 안에 개인 전용 Drafts 공간을 갖는다. - Professional 팀의 Drafts에서는 편집자에게 Professional 기능이 제공된다. - Starter 팀이 하나뿐인 사용자는 Drafts가 해당 팀의 새 Drafts 공간으로 자동 이전될 수 있다. - 팀 목록은 새 드롭다운 메뉴를 통해 확인하고 선택할 수 있다. ## 협업 권한과 요금 변화 - 팀으로 Draft를 옮겨도 파일은 기본적으로 계속 비공개다. - Draft의 기존 편집자가 해당 팀의 정식 멤버가 아니면, 예상치 못한 유료 좌석 발생을 막기 위해 자동으로 뷰어로 변경된다. - 필요한 경우 사용자 또는 관리자가 다시 편집 권한을 부여해야 한다. - Starter 팀에서는 무제한 뷰어를 초대할 수 있고, 최대 3개의 협업 파일에는 무제한 편집자를 둘 수 있다. - 개인 Drafts를 팀에 소속시키더라도 자신의 Draft를 계속 무료로 생성·편집할 수 있다. ## Drafts를 팀으로 이동하는 방법 - “Drafts to move” 공간으로 이동하면 원하는 팀의 Drafts 공간을 선택해 파일을 옮길 수 있다. - 특정 팀과 관련 없는 개인 작업은 무료 Starter 팀을 만든 뒤 그 팀으로 이동할 수 있다. - 이전 작업이 진행 중인 동안에도 기존 협업자와 Draft를 계속 편집할 수 있다. - 다만 새로운 협업자를 초대하려면 먼저 파일을 팀으로 이동해야 한다. - 현재 고정된 마감일은 없으며, 향후 이동하지 않은 Drafts는 무료 Starter 플랜으로 이전될 예정이다. 이전 전에는 별도 안내가 제공된다. ## 앞으로의 개선 방향 - 사용자가 유료 편집자 좌석으로 전환되는 시점을 더 명확히 안내할 예정이다. - 프리랜서의 프로젝트 인계와 여러 팀에 속한 사용자의 업무를 지원할 계획이다. - 관리자 대시보드와 게스트 관리 등 라이선스 관리 기능을 개선할 예정이다. - Figma의 결제 관련 사용자 경험도 전반적으로 재설계하고 있다. ## 실용적인 대응 현재 Drafts를 검토해 업무용·개인용 파일을 적절한 팀으로 분류하고, 이동 후 편집 권한이 필요한 협업자가 해당 팀의 정식 멤버인지 확인하는 것이 좋다. 어느 팀에도 속하지 않는 개인 작업은 별도의 무료 Starter 팀으로 분리하면 관리와 권한 설정이 수월하다.

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

Figma프로토타이핑dev-modeaccess-control+2

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

Code Connect의 잠재력 활용

디자인과 개발의 간극을 줄이려면 두 팀이 공유할 수 있는 언어와 단일한 작업 흐름이 필요하다. Figma의 Code Connect는 디자인 시스템의 컴포넌트 구현 정보와 문서를 Dev Mode에서 직접 제공해 개발자가 맥락을 바꾸지 않고 올바른 코드를 사용할 수 있도록 돕는다. 패널 참가자들은 작은 컴포넌트부터 시작해 점진적으로 도입하고, 디자이너와 개발자의 전문성을 서로 존중해야 한다고 강조한다. ## 디자인과 개발이 함께 쓰는 언어 만들기 - 디자이너와 개발자는 컴포넌트 이름, 속성, 구현 방식에 대해 서로 다른 용어와 기대를 가질 수 있다. - 이 차이는 다음과 같은 문제로 이어진다. - 일관되지 않은 네이밍 - 디자인과 코드의 속성 불일치 - 팀 간 요구사항과 구현 결과의 불일치 - 디자인 시스템은 공통 컴포넌트, 패턴, 용어를 정의해 두 분야를 연결하는 “제3의 언어” 역할을 한다. - 단순히 규칙을 문서화하는 것뿐 아니라, 구성원이 쉽게 찾고 실제로 적용할 수 있게 만드는 것도 중요하다. ## 단일한 기준과 개발자 워크플로 연결 - Bumble의 Raul Menezes는 디자인과 코드에서 서로 다른 기준 문서가 사용되는 것이 일관성 저하의 주요 원인이라고 설명한다. - 같은 UI 패턴을 반복해서 직접 구현하면 다음 문제가 발생한다. - 중복 코드 증가 - 커스텀 구현 확산 - 유지보수 어려움 - 디자인 시스템과 실제 제품 간의 불일치 - 디자이너는 디자인 시스템 문서를 참고하지만, 개발자는 별도의 코드 저장소나 문서를 기준으로 삼는 경우가 많다. - Code Connect는 디자인 시스템의 코드 예시와 구현 정보를 Dev Mode 안에서 제공해 개발자가 기존 코드 편집 및 개발 흐름에서 바로 참고하도록 설계됐다. ## 도입 장벽을 낮추고 작은 규모로 시작하기 - 디자인 시스템을 구축했다고 해서 자동으로 팀 전체가 사용하는 것은 아니다. 개발자가 기존 작업 방식을 크게 바꿔야 한다면 adoption이 느려질 수 있다. - 기존에는 개발자가 디자인 구현 방식을 확인하기 위해 별도의 디자인 시스템 웹사이트로 이동해야 했다. - Code Connect를 사용하면 Dev Mode에서 특정 디자인이 코드로 구현되어 있는지, 어떤 방식으로 구현하는지 확인할 수 있어 컨텍스트 전환을 줄인다. - 처음부터 모든 컴포넌트를 연결하기보다 영향도가 높고 구조가 단순한 컴포넌트부터 시작하는 것이 권장된다. - 예: 토글 같은 작은 컴포넌트 - 디자인 속성과 코드 속성을 어떻게 매핑하는지 먼저 검증 - 팀이 도구의 효과와 운영 방식을 익힌 뒤 범위 확대 - Code Connect는 완성된 최종 해법이라기보다 더 큰 디자인-코드 통합을 위한 첫 단계로 제시된다. ## 서로의 전문성 존중하기 - 디자인과 개발의 간극을 줄인다는 것은 한쪽의 방식을 다른 쪽에 강요하는 것이 아니다. - 디자이너는 사용자 경험, 시각적 일관성, 패턴 설계에 강점을 가진다. - 개발자는 컴포넌트 구조, 재사용성, 기술적 제약, 유지보수성에 전문성이 있다. - 효과적인 디자인 시스템 운영을 위해서는 두 팀이 각자의 전문성을 인정하고, 공통 언어와 도구를 통해 협업해야 한다. - Code Connect는 디자인 시스템의 의도와 실제 코드 구현을 연결해 양쪽의 지식을 공유하는 매개 역할을 한다. ## 실용적인 적용 방법 - 디자인 시스템에서 자주 사용되고 영향도가 큰 컴포넌트를 우선 선정한다. - 디자인의 컴포넌트 속성과 코드의 props·API가 어떻게 대응하는지 정의한다. - Dev Mode에서 개발자가 별도 문서 검색 없이 구현 예시를 확인할 수 있도록 연결한다. - 초기 도입 후 다음을 점검한다. - 개발자가 실제로 재사용 컴포넌트를 선택하는지 - 중복·커스텀 구현이 줄었는지 - 디자인과 코드의 명명 및 속성이 일치하는지 - 검증된 운영 방식을 바탕으로 점차 복잡한 컴포넌트와 더 넓은 제품 영역으로 확대하는 것이 바람직하다.

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

Figma디자인 시스템design-to-codedev-mode+2

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

파일 로드 속도 개선:

Figma는 파일 전체를 한꺼번에 불러오는 대신 사용자가 현재 보고 있는 페이지만 동적으로 로드해 파일 로딩 속도를 개선했다. 파일이 커져도 실제 사용자가 접근하는 콘텐츠의 복잡도에 비례해 로드하도록 설계한 결과, 가장 느린 5%의 페이지 로드 시간이 33% 감소했다. 핵심 과제는 페이지 간 컴포넌트·스타일·변수 참조 같은 의존성을 정확히 추적하면서 필요한 데이터만 전송하는 것이었다. ## 사용자 체감 복잡도에 맞춘 로딩 - Figma 파일은 여러 페이지, 컴포넌트, 라이브러리, 프로토타입 화면을 포함해 매우 커질 수 있다. - 하지만 사용자는 한 세션에서 파일의 모든 페이지를 탐색하지 않는 경우가 많다. - 따라서 파일 크기 전체가 아니라 현재 열어 본 페이지의 복잡도에 따라 로딩 시간이 결정되어야 한다. - 선택한 페이지만 먼저 표시하고, 다른 페이지는 사용자가 접근할 때 불러오면 초기 로딩 시간과 메모리 사용량을 줄일 수 있다. - Figma는 파일이 계속 커지더라도 로딩 성능은 지속적으로 개선되는 것을 목표로 삼았다. ## 페이지 간 읽기 의존성 - Figma 파일은 각 레이어와 속성을 가진 노드들의 트리 구조로 구성된다. - 노드는 다른 페이지에 있는 노드를 참조할 수 있으며, 이를 **읽기 의존성(read dependency)**이라고 부른다. - 예를 들어 인스턴스는 다른 페이지에 있는 원본 컴포넌트를 가리키므로, 올바르게 렌더링하려면 해당 컴포넌트 노드도 먼저 받아야 한다. - 스타일 역시 내부적으로 노드로 구현된다. - 특정 프레임이 `BrandPrimary` 색상 스타일을 사용하면 해당 스타일 노드를 로드해야 실제 색상값을 해석할 수 있다. - 변수도 같은 방식으로 동작한다. - 텍스트 크기에 `text-subheader` 변수를 적용했다면, 클라이언트는 변수 노드를 조회해 실제 값인 `16` 같은 원시 값을 확인해야 한다. - 따라서 단순히 현재 페이지만 로드해서는 부족하며, 렌더링에 필요한 다른 페이지의 참조 데이터까지 함께 찾아야 한다. ## QueryGraph 기반 동적 로딩 - Figma는 읽기 의존성을 메모리 내 그래프로 관리하는 **QueryGraph**를 구축했다. - QueryGraph는 의존 노드 간 연결을 추적하고, Figma의 멀티플레이어 시스템이 클라이언트에 어떤 데이터를 전송할지 결정하는 기반이 됐다. - 이 구조는 기존에 보기 전용 파일과 프로토타입의 동적 로딩을 구현하는 데 활용됐다. - 동적으로 불러오는 단위는 콘텐츠 유형에 따라 달라진다. - **Figma 캔버스:** 선택한 페이지를 먼저 로드하고, 추가 페이지는 필요할 때 요청한다. - **프로토타입 뷰어:** 한 번에 하나의 프레임을 표시하고, 사용자가 이동할 가능성이 있는 인접 프레임을 미리 로드한다. - 페이지를 로드할 때는 해당 페이지 자체뿐 아니라 다른 페이지에 존재하는 필수 컴포넌트·스타일·변수 노드도 QueryGraph를 통해 함께 전송한다. ## 동적 로딩의 효과 - 모든 페이지와 노드를 초기화하는 방식보다 불필요한 데이터 전송을 줄일 수 있다. - 사용자가 실제로 접근하지 않는 페이지를 메모리에 올리지 않아 메모리 사용량도 감소한다. - 큰 파일이라도 현재 작업 중인 페이지가 단순하다면 빠르게 캔버스를 표시할 수 있다. - 가장 느린 5%의 페이지 로드 시간이 33% 줄어드는 성과를 거뒀다. ## 실용적인 시사점 대규모 웹 애플리케이션에서는 전체 데이터를 일괄 로드하기보다 사용자의 현재 화면과 실제 접근 경로를 기준으로 로딩 단위를 정하는 것이 효과적이다. 다만 페이지 단위 지연 로딩을 적용할 때는 컴포넌트, 스타일, 변수처럼 화면 밖에 존재하는 참조 데이터까지 의존성 그래프로 추적해야 하며, 필요한 의존성만 정확히 함께 로드하는 설계가 중요하다.

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

Figma성능 최적화dependency-graphdynamic-loading+1

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