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

폴라로이드가 다음 혁

폴라로이드는 디지털 사진 시대에 대응하기 위해 즉석카메라·포토프린터·모바일 앱으로 사업을 확장하고, 디자인·개발 프로세스도 현대화하고 있다. Figma를 중심으로 디자인 시스템을 구축해 브랜드 일관성과 협업 효율을 높였으며, 고도화된 프로토타입과 사용자 테스트로 제품의 완성도를 개선했다. 그 결과 폴라로이드는 전통적인 아날로그 감성을 유지하면서도 새로운 세대의 디지털 경험을 제공하고 있다. ## 아날로그 유산을 디지털 시대로 확장 - 폴라로이드는 1937년 에드윈 랜드가 설립한 뒤 1948년 즉석카메라를 선보이며 사진 문화를 바꿨다. - 앤디 워홀, 안셀 아담스, 데이비드 호크니 등 예술가들이 폴라로이드 카메라와 필름을 활용하면서 브랜드는 문화적 아이콘으로 자리 잡았다. - 디지털 사진의 확산으로 2008년 네덜란드의 마지막 필름 공장 폐쇄를 발표하는 등 존립 위기를 겪었다. - 이후 열성적인 즉석사진 애호가들이 설립한 임파서블 프로젝트가 공장을 인수하고 필름 화학식을 재개발해 필름 생산을 이어갔다. - 현재는 즉석카메라뿐 아니라 사진 프린터와 모바일 앱을 통해 디지털 시대에 맞는 제품군을 구축하고 있다. ## Figma를 통한 단일 디자인 기준 구축 - Figma 도입 전에는 디자이너들이 각자 별도의 파일과 도구를 사용해 중복 작업과 비효율이 발생했다. - 중앙화된 디자인 시스템과 재사용 가능한 컴포넌트가 없어 수정과 반복 작업이 느렸다. - 이런 제약 때문에 폴라로이드는 iOS 앱만 설계하고 Android 지원은 충분히 확장하지 못했다. - Figma의 클라우드 기반 환경을 통해 디자이너, 개발자, 다른 부서 구성원이 작업 과정 전반에 참여할 수 있게 됐다. - 원격 근무 환경에서도 디자인 파일과 논의를 공유할 수 있어 부서 간 투명성과 협업이 향상됐다. ## 디자인 토큰과 변수로 플랫폼·테마 확장 - 디자인 토큰과 변수를 활용해 색상, 글꼴, 컴포넌트 등의 규칙을 체계적으로 관리했다. - 라이트 모드와 다크 모드를 지원하고, iOS와 Android에 맞춰 기본 글꼴을 다르게 적용했다. - 카메라 연결 화면에서는 사용자가 보유한 기기만 표시하도록 사용자 경험을 단순화했다. - 앱 테마가 연결된 카메라의 색상 구성과 자동으로 맞춰지도록 개선했다. - Figma UI 키트를 초기 설계의 출발점으로 활용하고, Autoflow 플러그인으로 사용자 여정을 시각화해 설계 전에 흐름을 점검했다. ## 더 빠르고 현실적인 프로토타이핑 - Figma 프로토타입을 통해 디자인 초기 단계에서 사용자의 불편과 문제점을 발견할 수 있게 됐다. - 기존 방식보다 사용자가 설정을 변경하거나 화면을 자유롭게 이동하는 등 실제 제품에 가까운 상호작용을 테스트할 수 있었다. - 사용자 테스트를 통해 추측이 아니라 실제 행동을 바탕으로 제품을 검증했다. - 더 많은 프로토타입을 짧은 시간에 높은 품질로 제작할 수 있게 됐다. - 개발 후반에 발생할 수 있는 대규모 수정과 비용을 줄이고, 제품 완성도와 개발 효율을 함께 높였다. ## 실용적인 시사점 폴라로이드의 사례는 브랜드의 역사적 정체성을 유지하면서도 디자인 시스템, 변수, 재사용 컴포넌트, 프로토타이핑을 통해 디지털 제품을 확장한 사례다. 여러 플랫폼과 팀이 함께 제품을 만드는 조직이라면 Figma 같은 중앙화된 작업 환경과 조기 사용자 테스트를 도입하는 것이 일관성, 속도, 비용 절감에 효과적이다.

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

Figma디자인 시스템사용자 경험프로토타이핑+4

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

Figma가 Figma

Figma는 초보자가 도구를 익히는 과정을 돕기 위해 문서, 영상, 실습 파일, 커뮤니티를 결합한 교육 생태계를 운영한다. 학습자의 피드백을 반영해 실습과 실제 사례를 강화한 새 입문 과정을 공개했으며, 포트폴리오 웹사이트 제작까지 이어지도록 구성했다. Figma는 작은 프로젝트를 꾸준히 시도하고 다른 사람의 작업을 참고하며 실수를 통해 배우는 것이 실력을 키우는 가장 effective한 방법이라고 강조한다. ## 다양한 학습 방식을 지원하는 교육 생태계 - **Help Center** - 기능 설명, 사용 방법, 문제 해결 가이드를 제공하는 기본 학습 공간이다. - **YouTube 튜토리얼** - 기능을 실제 사례와 함께 영상으로 설명해 개념을 시각적으로 이해할 수 있다. - **플레이그라운드 파일** - 완성된 실습 파일을 직접 조작하고 변형하며 안전하게 기능을 실험할 수 있다. - **Figma Design for beginners** - 초보자가 직접 포트폴리오 웹사이트를 제작하며 Figma의 주요 기능을 익히는 실습 중심 과정이다. - 학생과 교사는 자격을 확인하면 Professional 플랜의 제품과 기능을 무료로 이용할 수 있다. ## 학습자 피드백을 반영한 입문 과정 개편 - 2020년 첫 초보자 과정 이후 약 300만 명이 영상을 시청했다. - Figma는 학습자 의견을 통해 다음과 같은 요구를 확인했다. - 직접 손으로 따라 해볼 수 있는 실습 확대 - 복잡한 기능에 대한 더 명확한 설명 - 학습 내용을 실제 작업과 연결하는 사례 제공 - 누구나 참여할 수 있도록 무료 기능 중심으로 구성 - 개편된 과정에는 다음 요소가 포함된다. - 어려운 기능을 자세히 설명하는 feature deep dive - 창의성을 발휘할 수 있는 단계별 탐색 활동 - Figma 전문가의 팁과 활용법 - 실제로 사용할 수 있는 포트폴리오 웹사이트 템플릿 ## 지식을 실제 기술로 전환하기 - 강의를 끝내는 것보다 직접 파일을 만들고 수정하는 과정이 중요하다. - 막연히 큰 웹사이트를 만들기보다 작은 UI 요소부터 시작하는 것이 좋다. - 인터랙티브 버튼 제작 - 로딩 애니메이션 구현 - 간단한 화면이나 컴포넌트 재현 - 작은 과제는 핵심 기능을 반복 연습하면서도 초보자가 느끼는 부담을 줄여준다. ## 꾸준한 연습과 커뮤니티 활용 - 매주 학습 목표를 정하고 관심 있는 튜토리얼을 선택해 규칙적으로 연습한다. - 반복 학습은 기능 숙련도와 작업 속도, 단축키 활용 능력을 높인다. - Figma Community에서 다른 디자이너의 작업을 살펴보고 파일을 복제해 직접 재현해볼 수 있다. - 다른 사람의 디자인을 분석하면 효과적인 구성 방식을 이해하고 자신만의 취향과 스타일을 발전시키는 데 도움이 된다. - Figma Forum에서는 질문을 올리고 조언을 얻거나 다른 사용자와 함께 작업할 수 있다. ## 실수와 반복을 학습의 일부로 받아들이기 - 빈 캔버스를 완벽하게 채우려 하기보다 다양한 시도를 하며 결과를 비교해야 한다. - 잘못된 작업을 되돌아보는 과정에서 기능의 작동 방식과 문제 해결 방법을 배울 수 있다. - `Cmd/Ctrl + Z`로 언제든 작업을 되돌릴 수 있으므로 실험을 두려워할 필요가 없다. - 새로운 도구를 익히는 데는 시간이 걸리므로 작은 성취를 인정하고 필요할 때 휴식하는 태도도 중요하다. 처음 시작한다면 입문 과정을 따라가며 작은 UI 요소를 직접 구현하고, 매주 정해진 시간에 반복 연습하는 방법이 가장 현실적이다. 이후 Figma Community의 파일을 분석하고 변형해보면 학습 내용을 실제 디자인 역량으로 발전시킬 수 있다.

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

Figma프로토타이핑사용자 인터페이스interaction-design+1

figma·2025년 4월 23일원문

Figma의 202 (새 탭에서 열림)

Figma의 2025년 AI 보고서는 인공지능이 단순한 기술적 기대를 넘어 실제 제품 개발 단계로 깊숙이 침투했음을 보여줍니다. 현재 제품 제작자의 3명 중 1명이 AI 기반 기능을 출시하고 있으며, 특히 스스로 판단하고 다단계 과업을 수행하는 '에이전트형 AI'가 핵심 트렌드로 부상했습니다. 보고서는 AI가 업무 효율을 크게 높였음에도 불구하고 결과물의 신뢰성 확보와 직군별 활용 격차 해소가 향후 성공의 관건이 될 것이라고 결론짓습니다. ### 에이전트형 AI(Agentic AI)의 급부상 * 단순한 텍스트나 이미지 생성을 넘어 스스로 추론하고 다단계 프로세스를 완수하는 에이전트형 AI가 가장 빠르게 성장하는 카테고리로 조사되었습니다. * AI 제품을 개발 중인 Figma 사용자의 51%가 에이전트를 구축하고 있으며, 이는 전년(21%) 대비 두 배 이상 증가한 수치입니다. * 에이전트 설계 시에는 AI가 사용자에게 확인을 요청하는 시점, 정보 공유의 양, 채팅 vs 버튼 기반 인터페이스 중 최적의 UI를 선택하는 등 고도의 기획력이 요구됩니다. ### 성공을 결정짓는 반복 설계와 인적 역량 * 성공적인 AI 제품을 출시한 팀의 60%는 여러 가지 디자인 및 기술적 접근 방식을 탐색한 반면, 실패한 팀은 39%만이 이러한 반복 과정을 거쳤습니다. * 빌더의 52%는 AI 제품에서 디자인이 기존 제품보다 더 중요하다고 답했으며, 95%는 최소한 동일한 수준의 중요성을 갖는다고 평가했습니다. * 기술이 빠르게 변하는 상황에서 신속한 프로토타이핑과 긴밀한 협업 루프 등 전통적인 제품 설계 원칙을 유연하게 적용하는 능력이 차별화 요소로 작용합니다. ### 소규모 기업의 공격적인 투자와 실험 * 직원 10인 이하 소규모 기업의 61%가 AI를 시장 점유율 확보를 위한 핵심 요소로 인식하고 있으며, 이는 대기업보다 훨씬 높은 비중입니다. * 규모가 작은 기업일수록 의사결정이 빨라 AI 기술을 실험하고 업무 프로세스에 통합하는 속도가 더 민첩한 것으로 나타났습니다. * AI가 소규모 조직의 비즈니스 성장을 가속화할 수 있다는 믿음이 깊어지면서, 이들의 AI 기반 제품 개발 비중은 작년 대비 두 배로 증가했습니다. ### 개발자와 디자이너 간의 활용도 및 만족도 격차 * 개발자의 82%가 AI 도구에 만족하고 68%가 업무 품질 개선을 경험했다고 답한 반면, 디자이너는 각각 69%와 54%로 상대적으로 낮은 수치를 보였습니다. * 이러한 차이는 핵심 업무 활용 방식에서 기인합니다. 개발자의 59%는 코드 생성 등 핵심 업무에 AI를 쓰지만, 디자이너는 31%만이 에셋 생성 등 핵심 업무에 AI를 활용합니다. * 개발 현장에서는 AI가 생성한 코드에 대한 만족도가 높지만, 디자인 분야에서는 AI 도구가 디자이너의 워크플로우에 어떻게 최적으로 녹아들지 여전히 탐색 단계에 있습니다. ### 효율성 향상과 결과물 신뢰성 사이의 과제 * 조사 대상자의 78%가 AI가 업무 효율성을 크게 높인다는 점에 동의했지만, AI의 출력물을 전적으로 신뢰할 수 있다는 응답은 32%에 불과했습니다. * 단순히 작업을 빠르게 수행하는 것을 넘어, AI가 어떻게 인간의 전문성을 강화하고 실제 업무에 유용한 결과물을 지속적으로 낼 수 있게 할 것인지가 향후 과제입니다. AI를 성공적으로 도입하기 위해서는 '속도'보다는 '품질과 신뢰'에 집중해야 합니다. 개발 단계에서 다양한 프로토타입을 반복적으로 테스트하고, AI의 자율성과 인간의 통제권 사이에서 적절한 균형을 찾는 디자인 전략이 뒷받침될 때 비로소 시장에서 경쟁력 있는 AI 제품을 완성할 수 있습니다.

FigmaAI 에이전트프로토타이핑생성형 AI+3

figma·2025년 4월 22일원문

아트 디렉션의 기술 | (새 탭에서 열림)

피그마(Figma)의 브랜드 스튜디오 팀은 아트 디렉션을 브랜드의 개성과 디렉터의 취향, 그리고 협업자의 스타일 사이에서 정교한 균형을 잡는 소통의 기술로 정의합니다. 이들은 단순히 시각적 결과물을 통제하는 것이 아니라, 창작자에 대한 깊은 신뢰를 바탕으로 복잡한 기술적 개념을 신선하고 추상적인 시각적 메타포로 변환하는 과정을 중시합니다. 결국 훌륭한 아트 디렉션은 디렉터가 최종 결과물을 미리 단정 짓기보다, 협업자가 창의적인 역량을 최대한 발휘할 수 있도록 유도하고 그 과정에서 발생하는 의외성을 수용하는 데서 완성됩니다. **아트 디렉션의 숙련과 감각의 훈련** * 아트 디렉션에서의 숙련도는 발레 무용수가 반복 연습을 통해 무대 위에서 자유를 얻듯, 수많은 반복과 시도를 통해 도구를 능숙하게 다루는 과정에서 시작됩니다. * 디렉터의 핵심 역량은 세상을 바라보는 눈을 훈련하는 것이며, 주변의 수많은 요소 중 자신과 브랜드에 공명을 일으키는 것을 선별하고 편집하는 능력이 곧 의사결정의 근간이 됩니다. * 아트 디렉션은 본질적으로 언어와 소통에 기반한 협업의 과정이며, 프로젝트의 시작점을 올바르게 설정하고 끝까지 이끌어가는 능력이 중요합니다. **적합한 협업자 선정과 창의적 신뢰** * 일러스트레이터를 선정하는 과정은 영화의 캐스팅 디렉터와 유사하며, 자신의 스타일이 확고하면서도 메시지를 예상치 못한 방식으로 전달할 수 있는 작가를 찾는 데 집중합니다. * 기초적인 아이디어가 확립된 후에는 협업자의 작업에 과도하게 개입하지 않고 신뢰를 보내는 것이 중요하며, 창작자가 개인적으로 몰입할 때 가장 흥미로운 결과물이 나옵니다. * 때로는 특정 분야의 경험이 없는 작가에게 새로운 시도를 맡겨 제약 조건 속에서 의외의 도약을 이끌어내는 '드라마틱한 긴장감'을 활용하기도 합니다. **추상적 메타포를 통한 기술적 개념의 시각화** * 엔지니어링과 같은 복잡하고 기술적인 주제를 다룰 때, 이를 문자 그대로 설명하기보다 서사 중심의 작가를 섭외하여 추상적인 비주얼로 풀어내는 방식을 선호합니다. * 복잡한 개념을 간결한 메타포로 응축하는 과정이 핵심이며, 추상적인 접근 방식은 관찰자에게 해석의 여지를 남겨 더 깊은 울림을 줍니다. * 예를 들어, 엔지니어링 피드백 문화를 '정원 가꾸기'로 시각화하거나 컨퍼런스의 주요 내용을 기이한 형태의 토마토 모델링으로 표현함으로써 단순한 설명을 넘어선 미적 경험을 제공합니다. **창작자 경험이 아트 디렉션에 미치는 영향** * 아트 디렉터 본인이 일러스트레이터나 애니메이터로서 실무 경험을 갖추면, 창작 과정의 고충과 필요한 시간을 깊이 이해하게 되어 더 높은 공감대와 신뢰를 형성할 수 있습니다. * 실무 경험은 협업자에게 현실적이고 구체적인 피드백을 줄 수 있는 기반이 되며, 이는 작가가 자신의 작업을 한 단계 더 발전시키도록 자극하는 역할을 합니다. * 경험이 쌓일수록 디렉터는 초기 단계에서 결과물을 미리 상상하며 통제하려는 습관을 버리고, 협업자가 이끄는 창의적인 여정 자체를 신뢰하며 즐기게 됩니다. 성공적인 아트 디렉션을 위해서는 결과물을 완벽히 통제하려는 욕심을 내려놓고, 협업 작가가 프로젝트에 개인적인 열정을 투여할 수 있는 환경을 조성해야 합니다. 기술적인 주제일수록 정교한 메타포를 활용해 시각적 여백을 만들어내고, 디렉터와 작가 사이의 긴밀한 소통을 통해 예상치 못한 창의적 결과물을 수용하는 유연함이 필요합니다.

Figmavisual-designanimationillustration+3

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

놀이의 힘 | 피그마 블로그

디자인은 효율과 완성도만 추구하는 작업이 아니라, 예상 밖의 시도와 놀이를 통해 창의성을 확장하는 과정이기도 하다. Laura Fehre는 Figma 안에 디지털 네일 살롱 ‘Mani Mansion’을 만들며 완벽주의를 내려놓고, 문제를 놀이의 기회로 재해석했다. 결국 체계와 구조는 창의성을 제한하는 것이 아니라, 오히려 자유로운 실험을 가능하게 하는 기반이 되었다. ## 일상에서 발견한 영감 - 어린 시절 즐겼던 게임 **Barbie Nail Designer**와 실제 네일숍 방문 경험에서 프로젝트의 아이디어를 얻었다. - 효율적인 업무 도구가 아니라, 사용자가 시간을 잊고 즐길 수 있는 경험을 만들고자 했다. - 주변 네일숍을 직접 관찰하며 다음과 같은 감각적 요소를 수집했다. - 네일 드릴 소리와 사람들의 대화 - 아몬드 향 네일 클렌저 - 푹신한 좌석, 네온사인, 광택 있는 카운터 - 1990년대풍의 분위기 - 스케치북에 수집한 인상을 기록하고, 이를 디지털 공간의 질감·소리·분위기·인터랙션으로 번역했다. ## 무질서한 창작과 구조의 필요성 - 실제 네일처럼 모든 손톱 모양을 서로 다르게 만들기 위해 Figma 벡터 도구로 각각의 형태를 직접 제작했다. - 그러나 모든 요소가 고유하면 레이어링과 조합이 어려워지고, 동일한 요소의 중복이 끝없이 늘어나는 문제가 생겼다. - 처음에는 디자인 시스템과 반대되는 자유롭고 무질서한 결과물을 만들려 했지만, 프로젝트를 진행할수록 일정한 구조가 필요하다는 사실을 깨달았다. - 즉, 구조는 창의성을 억누르는 장벽이 아니라 요소를 쉽게 조합하고 반복 실험할 수 있게 하는 기반이 되었다. ## 완벽주의에서 놀이로의 전환 - 기대했던 화려한 일러스트와 완성도 높은 네일 살롱을 빠르게 구현하지 못하자, 자신의 디자인 역량이 부족해졌다고 느꼈다. - 동료 디자이너 애드버킷 Miggi Cardona와 함께 네일 형태와 패턴을 실험하며 막힌 상태를 돌파했다. - 두 사람은 결과물의 실용성이나 타인의 평가보다, 작업 과정 자체를 즐기는 데 집중했다. - 실패와 예상 밖의 결과를 결함이 아니라 성장과 실험의 기회로 바라보면서 창작의 즐거움을 되찾았다. - 다른 사람을 감탄시키려는 목표보다, 자신을 기쁘게 하는 결과물을 만드는 것이 중요하다는 점을 깨달았다. ## 무드보드와 체계적인 조합 - 실제 네일 디자인을 만들기 전, Figma 파일 안에 무드보드를 구성했다. - 디스코 볼의 반짝임, 1980년대 베르사체 스타일, 강렬한 ‘baddie’ 분위기, 검정색, 발렌타인데이의 하트 등을 시각적 재료로 모았다. - 네일 스테이션에서는 색상과 형태를 조합하고, 각각의 손톱에 서로 다른 디자인을 적용했다. - 처음 시도했던 완전히 독창적인 손톱 형태 대신, 일정한 시스템 안에서 다양한 요소를 조합하는 방식을 선택했다. - 이 체계적인 접근 덕분에 오히려 더 빠르고 자유롭게 창의적인 디자인을 실험할 수 있었다. - 완성한 디자인은 네일 테크니션에게 그대로 복사해 달라고 전달한 것이 아니라, 새로운 창작을 위한 영감으로 활용하도록 공유했다. 디자인 작업에서는 구조와 자유 중 하나만 선택할 필요가 없다. 반복 가능한 시스템을 먼저 마련하면 실험 비용을 줄이면서 더 과감하게 놀 수 있으므로, 완벽한 결과를 서두르기보다 호기심을 따라 작은 시도를 반복하는 것이 실용적이다.

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

Figma디자인 시스템graphic-designvector-design+1

figma·2025년 4월 16일·4분 읽기큐레이션 요약

버전 관리: UX 라이터

Figma의 UX Writer Henry Freedland는 프로토타입 오프라인 기능의 메뉴 문구를 다듬으며, 단어 하나가 사용자의 기대와 실제 시스템 동작 사이의 신뢰를 좌우한다고 설명합니다. 기술적으로 정확한 표현보다 사용자가 무엇을 하려는지, 클릭 후 어떤 결과를 기대하는지를 명확히 연결하는 표현이 중요합니다. 결국 UX 글쓰기는 단순한 문구 수정이 아니라 제품의 동작과 사용자 경험을 정렬하는 작업입니다. ## UX 글쓰기가 드러내는 제품의 본질 - Figma는 인터넷 없이도 프로토타입을 안정적으로 발표할 수 있도록 오프라인 기능을 개발했습니다. - 기능 구현이 거의 끝난 시점에 메뉴 문구를 정하려 했지만, 어떤 단어를 선택할지 논의하는 과정에서 제품이 실제로 무엇을 하는지에 대한 근본적인 질문이 드러났습니다. - UX 문구는 사용자가 시스템의 동작 방식을 이해하고 예측하도록 돕는 일종의 안내 규칙입니다. - 동작 자체가 명확하지 않다면, 아무리 짧고 자연스러운 문구라도 사용자 기대와 실제 결과 사이에 혼란이 생깁니다. ## 1차 시도: “Preload prototype”의 기술적 정확성 - 초기 문구는 **“Preload prototype”**이었습니다. - 프로토타입을 화면을 이동할 때마다 불러오는 대신, 필요한 리소스를 미리 모두 로드한다는 기술적 동작을 정확히 표현합니다. - 하지만 “pre-”라는 접두사는 보통 어떤 일이 일어나기 전에 수행되는 작업을 뜻합니다. - 예: 오븐을 미리 데우는 “preheat” - 사용자는 이미 프로토타입을 로드한 뒤 이 옵션을 보게 되므로, 무엇을 “미리” 로드한다는 것인지 직관적으로 이해하기 어렵습니다. - 기술 배경이 있는 사람에게는 익숙하지만, 일반 사용자에게는 다음과 같은 추가 설명이 필요합니다. - 현재 무엇이 이미 로드되었는가? - 무엇을 추가로 로드하는가? - 언제 오프라인 상태로 전환되는가? ## “Load full prototype”이 해결하지 못한 신뢰 문제 - 더 익숙한 동사인 **“load”**를 사용해 다음과 같은 표현도 검토했습니다. - “Load full prototype” - “Load all screens” - “Load all assets” - 그러나 사용자는 이미 프로토타입을 열었기 때문에, “전체 프로토타입을 로드한다”는 표현이 현재 상태와 충돌할 수 있습니다. - 컴퓨터가 “로드 중”이라고 알려주면 사용자는 그 과정을 신뢰하지만, 로딩이 끝난 뒤에는 모든 것이 준비되었다고 믿게 됩니다. - 따라서 “Load full prototype”은 현재 화면이 사실은 완전히 준비된 상태가 아니라는 인상을 주며, 프로그램과 사용자 사이의 신뢰를 약화시킬 수 있습니다. - 기술적으로 정확한 명칭이라도 사용자의 현재 상황과 맞지 않으면 좋은 UX 문구가 되지 않습니다. ## 2차 시도: 사용자의 목적을 직접 표현하기 - 기능의 목적은 인터넷이 없어도 프로토타입을 안정적으로 발표하는 것이므로 다음 표현도 제안되었습니다. - “Present prototype offline” - “Prepare to present offline” - 소프트웨어 문구는 사용자가 왜 어떤 행동을 하는지부터 고려해야 합니다. - Terry Winograd의 표현처럼 사람은 언어를 통해 행동하므로, 메뉴 문구는 사용자의 의도와 컴퓨터의 실행 동작을 연결해야 합니다. - **“Present prototype offline”**은 실제로 클릭하는 순간 발표가 시작되지 않는다는 점에서 문제가 있습니다. - 사용자는 즉시 발표 화면이 나타날 것이라고 기대할 수 있습니다. - **“Prepare to present offline”**은 준비의 의미가 모호합니다. - 무엇을 준비하는가? - 얼마나 일찍 눌러야 하는가? - 준비가 끝났다는 것을 어떻게 알 수 있는가? - 이 표현들은 사용자를 위한 단계별 안내나 후속 화면이 있다면 사용할 수 있지만, 단순한 토글 메뉴에는 지나치게 무겁고 불명확합니다. ## 문구 선택 기준: 생각·언어·시스템 동작의 일치 - 좋은 UX 문구는 다음 세 가지를 일치시켜야 합니다. - 사용자가 머릿속으로 생각하는 목표 - 메뉴에 표시된 언어 - 실제 시스템이 수행하는 동작 - 세 요소 사이의 간격이 크면 사용자는 클릭 결과를 예측하기 어렵습니다. - 기술 용어를 그대로 노출하면 구현 방식은 설명할 수 있지만 사용자의 목적을 놓칠 수 있습니다. - 반대로 사용자의 목표만 강조하면 시스템이 실제로 무엇을 하는지 알 수 없게 될 수 있습니다. - 특히 토글 메뉴에서는 문구만 보고도 현재 옵션의 의미와 활성화 후 결과를 이해할 수 있어야 합니다. ## 실용적인 결론 오프라인 기능처럼 내부적으로는 복잡한 동작을 수행하는 기능일수록, 기술적 구현명보다 사용자의 기대와 실제 결과를 정확히 연결하는 문구를 선택해야 합니다. 메뉴 문구를 정할 때는 “무엇을 하는가”뿐 아니라 “사용자는 왜 이 기능을 켜는가”, “클릭 직후 무엇이 일어날 것이라고 기대하는가”를 함께 검토하는 것이 좋습니다.

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

Figma사용자 경험프로토타이핑web-performance+2

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

버전 관리: 피그마

Figma의 Layers 패널에 가로 스크롤을 추가하는 일은 단순한 UI 개선이 아니었다. 계층 구조, 접기·펼치기와 잠금·숨김 상태, 가상화 렌더링, 다양한 텍스트 길이와 다중 스크롤 방향이 서로 얽혀 있었기 때문이다. Figma 팀은 세 가지 프로토타입을 시험하며 사용자의 계층 구조 인식과 작업 맥락을 해치지 않는 방향을 탐색했다. ## 가로 스크롤이 어려웠던 이유 - Layers 패널은 자주 사용되고 신뢰성이 중요해 작은 동작 변화도 신중해야 했다. - 레이어는 정적인 목록이 아니라 다음과 같은 상태를 가진다. - 숨김·잠금 - 계층 접기·펼치기 - 부모·자식 관계 - 성능을 위해 현재 화면에 보이는 레이어만 렌더링하는 **가상화**가 적용되어 있었다. - 세로로 스크롤하면 새 레이어가 렌더링되고, 레이어 이름 길이가 달라져 가로 스크롤 영역과 정렬이 복잡해졌다. - 핵심 목표는 단순히 콘텐츠를 옮기는 것이 아니라 사용자가 현재 계층상의 위치와 “더 볼 내용이 있음”을 계속 이해하도록 하는 것이었다. - 디자이너 Giorgio Caviglia는 JavaScript, HTML, CSS, React로 직접 프로토타입을 만들어 수천 개 레이어와 다양한 상호작용을 실제로 검증했다. ## 첫 번째 시도: 화면 왼쪽의 보이지 않는 레이어 표시 - 레이어가 패널의 왼쪽 위나 오른쪽 아래 경계를 벗어나면 해당 위치에 아이콘을 표시하는 대칭형 UI를 실험했다. - 아이콘을 패널 가장자리에 고정하는 것은 쉬웠지만, 레이어 이름이 스크롤될 때 배경이 일부 요소 아래로 지나가고 다른 텍스트는 가려야 했다. - 컴포넌트가 위에 놓인 요소의 정확한 위치를 알지 못해 다음 문제가 발생했다. - 배경이 텍스트를 제대로 덮지 못함 - 레이어 행 구조와 불투명 배경 처리가 충돌함 - 스크롤 상태에 따라 시각적 가림 처리가 달라짐 - 디자인 측면에서도 왼쪽 상단에 레이어 이름의 끝부분이 들쭉날쭉하게 남아 시각적으로 어색했다. - 결과적으로 대칭성을 유지하려던 해결책이 새로운 문제를 만들었고, 패널 상단의 빈 공간을 어떻게 다룰지 재검토하게 됐다. ## 두 번째 시도: 선택한 레이어로 자동 스크롤 - 캔버스에서 선택한 레이어가 Layers 패널에 보이지 않으면 해당 레이어가 패널 중앙에 오도록 자동으로 가로 스크롤하는 방식을 실험했다. - 이론적으로는 편리했지만, 실제 사용에서는 가로와 세로 스크롤이 동시에 발생해 사용자가 현재 위치를 잃었다. - 특히 깊게 중첩된 레이어를 선택하면 부모 레이어가 화면에서 사라져 계층 구조를 파악하기 어려웠다. - 사용자는 작업 대상의 이름뿐 아니라 다음 정보도 함께 확인해야 한다. - 어떤 부모 아래에 있는지 - 계층상 어디에 위치하는지 - 특정 컴포넌트의 일부인지 - 화면을 갑자기 다른 위치로 이동시키는 동작은 Google Maps가 주행 중 지도를 갑자기 다른 장소로 옮기는 것과 비슷한 혼란을 유발했다. - 도구가 사용자를 돕기보다 현재 작업에 대한 정신적 모델을 깨뜨리는 결과가 되어 채택되지 않았다. ## 세 번째 시도: 레이어 이름 변경 중 스크롤 - 가로 스크롤 도입으로 레이어 이름을 편집하는 동안 다른 레이어로 스크롤할 때의 동작도 새롭게 정의해야 했다. - 사용자가 이름 입력 중 다른 레이어를 보기 위해 스크롤하면, 입력 중인 텍스트를 자동으로 새 이름으로 확정하는 방안을 검토했다. - 그러나 스크롤은 이름 변경을 확정했다는 충분히 강한 신호가 아니었다. - 이 동작을 채택하면 사용자가 의도하지 않게 레이어 이름을 변경할 위험이 있었다. - 따라서 스크롤과 편집 확정의 관계를 별도로 설계해야 한다는 점이 드러났다. ## 실용적인 시사점 - 복잡한 UI에서는 정적인 화면 설계만으로 모든 상태를 예측하기 어렵기 때문에 실제 코드 기반 프로토타이핑이 유용하다. - 자동 이동은 편리함보다 사용자의 공간적·계층적 맥락 보존을 우선해야 한다. - 스크롤, 선택, 편집처럼 서로 다른 의도를 가진 동작을 하나의 암묵적 신호로 처리하면 오작동과 혼란이 발생한다. - 특히 가상화된 계층형 UI에서는 렌더링 구조, 텍스트 가림, 상태 변화까지 함께 고려해야 한다.

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

Figma사용자 인터페이스ReactJavaScript+4

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

피그마, SEC에

Figma는 미국 증권거래위원회(SEC)에 기업공개(IPO)를 위한 S-1 등록신고서 초안을 비공개로 제출했다고 발표했습니다. 이는 SEC 심사를 거쳐 향후 상장할 수 있는 선택지를 확보했다는 의미이며, 아직 실제 IPO 일정이나 상장 여부가 확정된 것은 아닙니다. 공모 주식 수와 가격 범위도 결정되지 않았습니다. ### 비공개 S-1 제출 - Figma는 2025년 4월 15일 SEC에 **Class A 보통주 공모를 위한 S-1 초안**을 confidential submission 방식으로 제출했습니다. - 비공개 제출은 SEC의 사전 검토를 먼저 받을 수 있도록 하는 절차로, 기업이 공식 상장을 준비하면서도 초기 단계의 정보를 즉시 모두 공개하지 않을 수 있게 합니다. - Figma의 발표는 상장을 확정했다기보다, SEC 심사 결과에 따라 기업공개를 추진할 수 있는 기반을 마련했다는 의미입니다. ### IPO 세부 사항은 미정 - 공모 예정 주식 수는 아직 정해지지 않았습니다. - 주식 공모 가격 범위 역시 발표되지 않았습니다. - SEC의 심사가 완료되기 전까지 상장 시점, 공모 규모, 기업가치 등 핵심 조건은 확정되지 않습니다. - 따라서 이번 발표만으로 Figma의 상장 일정이나 예상 시가총액을 판단할 수는 없습니다. ### 법적 고지와 투자 권유 아님 - Figma는 이번 게시물이 미국 증권법의 **Rule 135**에 따른 사전 공지라고 밝혔습니다. - 이 발표는 주식 매도 제안이나 매수 권유가 아닙니다. - 실제 주식의 청약, 권유 또는 매각은 SEC 심사 완료 후 증권법상 등록 요건에 따라 진행될 예정입니다. 결국 이번 발표는 Figma가 IPO를 위한 공식 절차에 진입했다는 신호이지만, 투자자가 판단할 수 있는 재무 정보나 공모 조건은 아직 공개되지 않은 초기 단계의 소식입니다. 향후 SEC 심사 이후 공개될 정식 S-1 문서에서 매출, 수익성, 위험 요인, 공모 규모 등을 확인해야 합니다.

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

FigmaAI사용자 경험collaborative-design

figma·2025년 4월 14일원문

피그마, 한국 시장 (새 탭에서 열림)

피그마(Figma)가 한국 시장을 위한 제품 현지화 및 지원 서비스의 오픈 베타 출시를 발표했습니다. 이번 한국어 지원은 일본어와 스페인어에 이은 세 번째 현지화 사례로, 한국 사용자들에게 더욱 직관적인 디자인 환경을 제공하고 디자인의 접근성을 전 세계로 확장하려는 피그마의 비전을 담고 있습니다. 이를 통해 국내 디자이너뿐만 아니라 개발자와 기획자 등 다양한 직군 간의 협업 효율이 극대화될 것으로 기대됩니다. **한국 시장 맞춤형 현지화 및 지원 확대** * 제품 인터페이스 전반에 걸친 완전한 한국어 번역과 한국 문화에 적합하도록 조정된 사용자 경험(UI)을 제공합니다. * 한국어 사용자를 위한 전담 고객 지원 체계를 구축하여 서비스 이용 중 발생하는 문제에 신속하게 대응합니다. * 이번 한국어 버전은 4월 16일부터 순차적으로 공개되는 오픈 베타를 통해 직접 체험할 수 있습니다. **국내 주요 기업의 활용 사례와 성과** * 카카오뱅크, 우아한형제들, 당근, 강남언니 등 국내 유수의 IT 기업들이 이미 피그마를 통해 제품을 개발하고 있습니다. * 카카오뱅크는 피그마 도입 이후 직원들의 업무 생산성이 약 30% 향상되었으며, 한국어 지원을 통해 언어 장벽 없이 핵심 프로젝트에 집중할 수 있게 되었다고 밝혔습니다. * 우아한형제들 또한 한국어 작업 환경이 비디자이너들의 디자인 프로세스 참여를 유도하여 협업의 질을 높였다고 평가했습니다. **데이터로 증명된 한국 내 피그마 생태계** * 한국 코스피 200 기업 중 약 3분의 1이 피그마를 사용하고 있으며, 국내 사용자들의 활발한 커뮤니티인 'Friends of Figma(FoF) 서울' 지부 멤버는 1,000명을 넘어섰습니다. * 지난 한 해 동안 한국에서 생성된 피그마 파일은 400만 개 이상이며, 매일 평균 75,000개 이상의 파일이 수정되고 있습니다. * 피그마의 글로벌 매출 50%가 미국 외 시장에서 발생하고 월간 활성 사용자(MAU)의 85%가 해외 거주자인 만큼, 한국은 피그마의 글로벌 확장 전략에서 핵심적인 위치를 차지합니다. **전체 제품 개발 공정을 아우르는 도구로의 진화** * 피그마는 단순한 디자인 도구를 넘어 화이트보드 협업 도구인 '피그잼(FigJam)', 개발자와의 원활한 소통을 돕는 '데브 모드(Dev Mode)', 프레젠테이션 제작을 위한 '피그마 슬라이드(Figma Slides)' 등 제품 개발의 전 과정을 지원합니다. * 2024년에는 AI 기능을 도입하여 팀의 창의적인 아이디어를 실제 제품으로 구현하는 속도를 한층 더 높였습니다. * 특히 월간 활성 사용자의 약 30%가 개발자인 만큼, 이번 현지화는 디자인과 개발 사이의 언어적 간극을 메우는 중요한 계기가 될 것입니다. 이번 한국어 현지화는 단순한 언어 번역을 넘어 국내 기업들이 디자인 중심의 제품 개발 문화를 구축하는 데 강력한 촉매제가 될 것으로 보입니다. 특히 디자인 비전공자나 개발자와의 협업이 잦은 팀이라면, 이번 오픈 베타 기간을 활용해 한국어 환경에서의 워크플로우를 최적화하고 팀 내 협업 장벽을 낮추는 기회로 삼기를 권장합니다.

Figma사용자 경험figjamdesign-to-code+4

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

요점 정리: 제10호

Figma의 「Skill share」는 Config 2025를 앞두고 디자인·개발·제품 제작에 도움이 되는 실무 지식과 관련 글을 모은 큐레이션이다. 핵심 메시지는 좋은 제품을 만들려면 속도만 좇기보다 품질과 장인정신, 원활한 협업, 명확한 글쓰기, 장기적 관점이 필요하다는 것이다. 각 글은 제품 제작자가 자신의 역량을 넓히고 다른 직군과 더 효과적으로 협력하는 방법을 다룬다. ## 기술과 제품의 품질을 높이는 10가지 원칙 - Linear의 공동 창업자 겸 CEO Karri Saarinen이 제품을 돋보이게 만드는 장인정신을 소개한다. - “빠르게 움직이고 깨뜨리자”는 접근만으로는 오늘날의 디자인 중심 시장에서 차별화하기 어렵다고 지적한다. - 조직의 모든 단계에서 품질과 세부 완성도를 중시하는 문화를 구축하는 것이 중요하다. - 제품 개발 속도보다 일관된 품질, 사용 경험, 완성도를 우선하는 관점을 다룬다. - 관련 글은 Config 2025에서 진행될 Karri Saarinen의 키노트와도 연결된다. ## 디자이너와 개발자를 위한 핸드오프 - 디자인 결과물을 실제 제품으로 구현하는 과정에서 디자이너와 개발자의 협업이 성패를 좌우한다고 설명한다. - 디자인에서 개발로 넘어갈 때 각 직군의 목표와 전문성이 충돌할 수 있음을 문제로 제시한다. - 효과적인 핸드오프를 위해 다음 세 가지 원칙을 강조한다. - **호기심을 키우기:** 상대 직군의 업무 방식과 제약을 이해하려는 태도 - **소통을 개방하기:** 작업이 끝난 뒤 전달하는 방식보다 과정 중 지속적으로 논의하기 - **‘좋은 결과’의 기준 맞추기:** 시각적 완성도, 기술적 실현 가능성, 사용자 경험에 대한 기대치를 사전에 합의하기 - 단순히 디자인 파일을 전달하는 절차가 아니라, 공동으로 문제를 해결하는 협업 과정으로 핸드오프를 바라본다. ## 글쓰기가 제품 제작에 중요한 이유 - 제품 제작자는 기능과 기술뿐 아니라 자신의 아이디어와 비전을 설득력 있게 설명해야 한다. - 기술 아키텍처, 신규 기능, 제품 로드맵을 설명하거나 발표할 때 명확한 글쓰기가 성공에 직접 영향을 준다. - 좋은 제품과 디자인은 이를 만든 사람이 자신의 의도를 분명히 표현할 때 더 쉽게 이해되고 확산된다. - 특정 직무에 관계없이 누구나 스토리텔러가 될 수 있으며, 글쓰기는 아이디어를 구체화하고 사람들을 같은 방향으로 이끄는 도구로 제시된다. - 단순한 문장 작성 능력보다 문제의 맥락과 제품의 비전을 구조적으로 전달하는 능력을 강조한다. ## 장기적인 제품 개발과 AI 시대의 장인정신 - AI 도구가 빠르게 발전하면서 제품 제작자의 관심은 “작동하는가”에서 “잘 작동하는가”로 이동하고 있다. - Figma의 공동 창업자 겸 CEO Dylan Field와 Y Combinator의 Garry Tan의 대화를 통해 제품 개발의 방향을 논의한다. - 실험과 놀이가 새로운 아이디어를 발견하고 제품의 가능성을 확장하는 중요한 과정이라고 설명한다. - AI를 활용한 이른바 ‘바이브 코딩’이 개발 속도를 높이더라도, 결과물의 품질과 세부적인 완성도를 직접 검토해야 한다. - 모델이 많은 작업을 대신하더라도 제품의 본질을 이해하고, 장기적인 사용자 가치와 제작 역량을 보존해야 한다. - 창업자와 제품 제작자는 다양한 가능성을 탐색하는 ‘아이디어 미로’를 거치며 충분히 실험하고 방향을 선택해야 한다. ## 지식 공유와 Config 2025 - 이 글은 하나의 기술 튜토리얼이라기보다 디자인과 개발에 관한 Figma의 기존 콘텐츠를 묶은 큐레이션이다. - Config 2025를 앞두고 제품 제작자들이 기술, 도구, 전략을 공유한다는 취지로 구성되었다. - 독자는 장인정신, 협업, 글쓰기, AI 시대의 제품 개발 등 자신의 업무와 관련된 주제를 선택해 추가로 읽을 수 있다. - 온라인 무료 등록을 통해 Config에 참여할 수 있다는 안내도 함께 제공한다. - 글 후반부의 “Rabbit hole” 영역은 추가 읽을거리로 보이지만, 제공된 본문에는 해당 항목의 상세 설명이 포함되어 있지 않다. 제품을 만들 때는 빠른 구현만 목표로 삼기보다 품질 기준을 먼저 합의하고, 디자이너와 개발자가 과정 중 계속 소통하는 것이 좋다. 또한 글쓰기로 제품의 의도를 명확히 설명하고, AI 도구를 활용하더라도 실험·검토·세부 조정 같은 인간의 판단을 유지해야 장기적으로 경쟁력 있는 결과물을 만들 수 있다.

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

FigmaAIsoftware-developmentdeveloper-handoff+2

figma·2025년 4월 9일원문

FigPals를 위한 영원한 (새 탭에서 열림)

Figma는 디자이너의 고독한 작업 환경에 즐거움을 더하기 위해 커서를 따라다니는 디지털 컴패니언인 'FigPals'를 기간 한정으로 도입했습니다. 90년대 다마고치와 네오펫에서 영감을 받은 이 프로젝트는 사내 해커톤인 '메이커 위크'를 통해 탄생했으며, 단순한 장식 요소를 넘어 사용자와 정서적 교감을 나누는 인터랙티브 요소로 기능했습니다. 짧은 운영 기간에도 불구하고 150만 개 이상의 캐릭터가 생성되는 등 폭발적인 반응을 얻었으며, Figma는 커뮤니티의 요청에 부응해 이를 영구적으로 간직할 수 있는 스티커 팩을 출시하며 프로젝트를 마무리했습니다. ### FigPals의 탄생 배경과 노스탤지어 * 디자이너들이 Figma 파일 내에서 느끼는 반복적이고 고독한 작업 경험을 개선하기 위해 기획된 커서 추적형 디지털 동반자입니다. * 70년대의 '펫 락(Pet Rock)'과 90년대의 '다마고치' 같은 복고풍 장난감 문화에서 영감을 받아, 업무 도구에 장난기 가득한 요소를 결합했습니다. * 9,000가지 이상의 조합(색상, 형태, 액세서리 등)을 제공하여 사용자가 자신만의 개성 있는 캐릭터를 만들고 이름을 붙일 수 있도록 설계했습니다. ### '메이커 위크'를 통한 창의적 실험과 구현 * Figma의 연례 사내 행사인 '메이커 위크(Maker Week)'에서 인턴의 아이디어로 시작된 'Figmagotchi'가 프로젝트의 모태가 되었습니다. * 엔지니어링, 제품, 디자인 팀이 협업하여 캐릭터가 레이어나 노드를 '먹이'로 섭취하거나, 컴포넌트를 해제할 때 놀라는 반응을 보이는 등 다양한 이스터 에그와 상호작용 기능을 구현했습니다. * 업무용 소프트웨어에서도 '놀이(Play)'라는 핵심 가치를 실현할 수 있음을 증명하며, 개발 과정에서 엔지니어들조차 캐릭터에 정서적 애착을 느낄 만큼 몰입도 높은 경험을 구축했습니다. ### 커뮤니티의 열광적인 반응과 데이터 * 출시 일주일 만에 150만 개 이상의 FigPal이 생성되었으며, 사용자들이 캐릭터에게 먹이를 준 횟수만 25만 회를 상회했습니다. * 사용자들은 자신의 실제 반려동물을 모델로 FigPal을 제작하거나, 서비스 종료를 앞두고 영구 도입을 촉구하는 서명 운동(2,000명 이상 참여)을 벌이는 등 강력한 유대감을 보여주었습니다. * 단순한 픽셀의 조합을 넘어 사용자의 업무 공간에 활력을 불어넣는 정서적 매개체로서의 가치를 입증했습니다. 현재 FigPals의 인터랙티브 기능은 종료되었지만, Figma 커뮤니티에서 제공하는 **'FigPal 스티커 팩'**을 활용하면 작업 파일에 이들을 영구적으로 배치하고 추억할 수 있습니다. 또한, 다가오는 Figma의 컨퍼런스 'Config'에서 FigPal과 관련된 추가적인 소식이 있을 예정이므로 관련 업데이트를 주목해 보시기 바랍니다.

Figma사용자 경험figjam프로덕트 디자인+3

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

Figma에서 디자인 시스템 워

Figma의 디자인 시스템 구축은 색상·타이포그래피·간격·문서화·개발 전달을 반복해야 해 시간이 많이 걸리지만, 최신 기능과 커뮤니티 플러그인을 조합하면 작업을 크게 단축할 수 있다. 특히 모드와 컬렉션을 안전하게 재정렬하고, 변수·스타일·컴포넌트 관리를 자동화함으로써 디자인 시스템을 개념 설계부터 코드 변환까지 효율적으로 연결하는 것이 글의 핵심이다. ## 모드와 컬렉션을 안전하게 재정렬 - 라이브러리의 모드와 컬렉션을 드래그 앤 드롭으로 재배치할 수 있다. - 삭제 후 재생성할 필요가 없어 디자인이 다른 모드와 동기화되지 않는 문제를 줄인다. - 재정렬해도 모드 ID와 연결 정보가 유지된다. - 기본 모드도 간단히 변경할 수 있다. - 자주 사용하는 컬렉션을 위로 올리거나, 관련 모드를 그룹화하거나, 제품 라인 변경에 활용할 수 있다. ## 작업 흐름을 개선하는 9가지 업데이트 - 메인 컴포넌트로 바로 이동하는 단축키가 추가됐다. - 스타일을 복제하거나 복사해 반복 작업을 줄일 수 있다. - 변수 페인트를 숨기거나 다시 표시해 작업 공간을 정리할 수 있다. - 컴포넌트 설명 UI가 개선되어 내용을 빠르게 확인할 수 있다. - 변수 모달의 헤더 전체를 드래그할 수 있다. - 변수 변경 사항이 자동 저장된다. - 컴포넌트 이름에 마우스를 올리면 툴팁으로 추가 정보를 볼 수 있다. - 편집 버튼 정렬이 개선됐다. - 스타일 창에서 긴 이름이 잘리지 않도록 텍스트 오버플로 처리가 개선됐다. ## 색상 팔레트와 색상 토큰 만들기 - **CSS color-mix()** - CSS의 `color-mix()`를 활용해 색상 팔레트와 그라디언트를 생성한다. - **Colorbox** - 전체 색상 램프를 빠르게 만든다. - **The Genome Color Tool** - WCAG 접근성 기준을 만족하는 색상 스케일을 구축한다. - 색상 시스템을 수작업으로 하나씩 조정하는 대신, 다양한 명도 단계와 조합을 빠르게 실험할 수 있다. - 접근성 기준을 초기 단계부터 반영해 후속 수정 비용을 줄일 수 있다. ## 타이포그래피와 변수 문서화 - **Peppercorn** - 디자인 시스템 전체의 타입 시스템을 설정하는 데 사용된다. - **Print Variables** - 변수 컬렉션을 스티커 시트 형태로 캔버스에 출력한다. - **Auto Documentation** - 모든 변수를 시각적인 스티커 시트로 만들어 문서화한다. - **Variables and Styles List** - 변수와 스타일 목록을 캔버스 위젯으로 생성해 팀이 한눈에 확인하도록 돕는다. - 이러한 도구는 색상, 글꼴, 크기, 간격 등 토큰의 이름과 값을 시각적으로 검토하는 데 유용하다. ## 컴포넌트 구조와 스펙 정리 - **Propstar** - 컴포넌트의 프로퍼티와 가능한 변형 조합을 시각적으로 정리한다. - **Specs** - 컴포넌트 사양을 생성해 디자인 의도와 구현 정보를 전달한다. - **Similayer** - 특정 레이어나 속성을 기준으로 요소를 필터링한다. - **Style Finder** - 여러 페이지에 흩어진 스타일을 찾아 관리할 수 있게 한다. - 컴포넌트 변형이 많아질수록 어떤 조합을 지원하는지 파악하고 중복 또는 누락을 발견하는 데 도움이 된다. ## 변수와 디자인 토큰을 코드로 연결 - **CTRL Var** - 변수를 일괄적으로 이름 변경할 수 있다. - **Export Import Variables** - Figma 안팎으로 변수를 가져오고 내보낸다. - **Handoff** - CSS 변수를 즉시 복사해 개발 전달을 단순화한다. - **Variables Converter** - Figma 변수를 코드 형식으로 변환한다. - **Shaper** - 토큰 아키텍처를 관리하고 CSS 코드를 생성한다. - 디자인 토큰을 Figma에만 고립시키지 않고 개발 환경의 변수와 연결할 수 있다. ## 디자인 시스템 구축 단계별 접근 - **기초 설계** - 색상 팔레트, 색상 램프, 타이포그래피 스케일, 변수 컬렉션을 구성한다. - **문서화** - 변수와 스타일을 스티커 시트나 목록으로 정리해 팀이 쉽게 탐색하도록 만든다. - **구현과 핸드오프** - 컴포넌트 사양을 생성하고, 변수와 토큰을 CSS 등 코드로 변환한다. - Figma의 기본 기능과 플러그인을 각 단계에 맞게 조합하면 디자인 시스템을 처음부터 코드 전달까지 일관되게 관리할 수 있다. 실무에서는 먼저 모드·컬렉션 구조와 변수 명명 규칙을 정한 뒤, 색상·타이포그래피 플러그인으로 토큰을 만들고, 문서화 및 코드 변환 도구를 선택적으로 도입하는 방식이 효과적이다.

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

Figma디자인 시스템디자인 토큰CSS+4

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

더블 클릭: 그냥 하면 됩니다—

AI 도구의 폭발적 확산은 누구나 글쓰기·디자인·리서치 같은 일을 직접 실행할 수 있다는 감각을 강화하고 있다. “You can just do things”라는 구호는 높은 실행력과 창작의 자유를 상징하지만, 도구와 결과물이 지나치게 많아지면 흥분이 피로와 압박으로 바뀔 수 있다. 글은 AI 시대의 가능성을 즐기되, 무조건 실행하기보다 무엇을 할지 선택하고 에너지를 조절해야 한다는 문제를 제기한다. ## “You can just do things”라는 AI 시대의 구호 - AI 도구가 소프트웨어의 능력과 창작에 참여할 수 있는 사람의 범위를 빠르게 넓히고 있다. - 글쓰기 보조, 디자인 생성, 리서치 플랫폼 등 다양한 도구가 매일 등장하면서 누구나 아이디어를 실제 결과물로 만들 수 있다는 감각이 커졌다. - 이 문구는 단순한 유행어가 아니라 다음과 같은 실행 중심의 태도와 연결된다. - 허락을 기다리지 말고 시작하기 - 빠르게 만들고 실험하기 - 실패를 감수하며 직접 부딪히기 - 높은 주도성과 자신감을 갖기 - 틱톡 창작자부터 스티브 잡스까지 여러 인물이 비슷한 행동 방식을 강조해 왔지만, AI 도구의 보급으로 이 태도가 이전보다 훨씬 현실적인 선택지가 되었다. ## AI 도구가 되살린 발견의 즐거움 - 초기 앱스토어 시대에 인스타그램이나 우버 같은 새로운 서비스를 처음 발견했을 때의 짜릿함이 AI 분야에서 다시 나타나고 있다. - Lightspeed Venture Partners의 마이클 미냐노는 기술 업계 종사자뿐 아니라 기술과 무관한 지인들에게서도 매일 새로운 AI 제품과 앱을 추천받는다고 설명한다. - 이는 AI가 개발자와 스타트업 내부에만 머무르지 않고 일반 사용자 사이에서도 빠르게 확산되고 있음을 보여준다. - 새로운 제품을 직접 발견하고 활용하는 과정은 창작과 생산성 향상에 대한 기대감을 높인다. ## 가능성의 확대와 피로의 위험 - 도구가 많아질수록 “무엇이든 할 수 있다”는 자유가 커지는 동시에, 계속 새로운 것을 시도해야 한다는 압박도 커질 수 있다. - AI의 발전은 창작의 황금기를 열 수 있지만, 모든 도구를 익히고 모든 아이디어를 실행하려 하면 사용자는 쉽게 소진될 수 있다. - 따라서 중요한 질문은 “할 수 있는가?”만이 아니라 다음과 같다. - 이 일을 실제로 해야 하는가? - 어떤 도구가 목적에 가장 적합한가? - 결과물의 품질과 영향은 충분히 검토했는가? - 새로운 시도가 나의 시간과 에너지를 감당할 만한가? ## 실용적인 시사점 - AI를 활용해 실행 장벽을 낮추되, 도구 자체의 신기함보다 해결하려는 문제를 먼저 정하는 것이 좋다. - 모든 신제품을 따라가기보다 자신의 업무와 창작 과정에 지속적으로 가치를 주는 도구를 선별해야 한다. - “그냥 할 수 있다”는 태도는 출발점으로 활용하고, 실행할 일과 하지 않을 일을 판단하는 선택 능력을 함께 길러야 한다.

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

FigmaAI생성형 AI프로덕트 디자인+2

figma·2025년 3월 31일·3분 읽기큐레이션 요약

개발자 핸드오프

디자이너와 개발자의 핸드오프는 디자인을 전달하는 마지막 단계가 아니라, 제품의 방향과 구현 방식을 함께 조율하는 협업 과정이다. 개발자는 성능·안정성·기술적 제약을, 디자이너는 일관성과 사용 경험을 중시하므로, 초기부터 소통하고 공통의 언어를 만들어야 한다. 특히 아이디어가 유연한 초기에 개발자를 참여시키는 것이 시행착오와 구현 비용을 줄이는 핵심이다. ## 협업의 기본 원칙 - 디자인은 “원하는 것(what we want)”, 개발은 “실제로 가진 것(what we have)”에 가깝다. - 두 직군의 간극을 줄이려면 다음이 필요하다. - 서로의 관점에 대한 호기심 - 지속적이고 열린 커뮤니케이션 - 좋은 결과물의 기준에 대한 공통된 관점 - 글은 효과적인 핸드오프를 위해 다음 네 가지 영역을 제시한다. 1. 무엇을 만들지 합의하기 2. 어떻게 만들지 결정하기 3. 공통 언어 만들기 4. 개발자 경험을 고려해 의도 명확히 하기 ## 무엇을 만들지 먼저 합의하기 - 초기 와이어프레임 단계부터 개발자를 참여시킨다. - 개발자는 다음과 같은 기술적 문제를 조기에 발견할 수 있다. - 단순해 보이는 디자인이 실제로는 복잡한 기술 로직을 요구하는 경우 - 데이터 계층에서 발생하는 제약이나 처리 비용 - 기존 기능을 재사용하거나 확장해 더 적은 개발 노력으로 해결할 수 있는 기회 - 아이디어가 아직 바뀔 수 있는 단계에서 피드백을 받을수록 수정 비용이 낮다. - 초기 협업의 목표는 다음과 같다. - 프로젝트 범위 정렬 - 기술적 제약 이해 - 잠재적 문제와 새로운 기회 식별 ## 와이어프레임으로 사용자 흐름 구체화하기 - Figma나 FigJam에서 화면 흐름을 와이어프레임으로 표현하면 추상적인 아이디어를 구체화할 수 있다. - Figma는 보다 구체적인 시각 자료를 만들 때 적합하다. - FigJam은 다음과 같은 상황에 유용하다. - 아이디어를 자유롭고 개략적으로 표현할 때 - 외부 협업자에게 중립적인 피드백 공간을 제공할 때 - 완성도 높은 비주얼을 일부러 배제하면 색상이나 스타일보다 전체 흐름과 핵심 문제에 집중할 수 있다. - 개발자는 화면 순서에서 빠진 상태나 예외 흐름을 발견하고, 디자이너는 이를 반영해 요구사항을 보완할 수 있다. ## 개발자에게 구체적인 질문하기 - 개발자는 질문을 받지 않으면 디자이너가 놓친 부분을 알기 어렵기 때문에, 의도적인 질문이 필요하다. - 다음 내용을 질문하면 협업의 깊이를 높일 수 있다. - 구현상의 제약은 무엇인가? - 데이터 계층에서 복잡성을 높이는 요소가 있는가? - 현재 화면 흐름에서 빠진 상태나 예외 상황은 무엇인가? - 제품의 다른 영역에서 재사용할 수 있는 패턴이나 기능이 있는가? - 이러한 질문은 중복 작업을 줄이고, 기존 기능과 디자인 시스템을 활용하게 해준다. - 개발자는 단순히 디자인을 구현하는 역할을 넘어, 기능 구조와 제품 경험을 개선할 기회를 제안할 수 있다. ## 개발자의 작업 방식에 맞춰 협업하기 - 개발자는 여러 작업 사이를 오가며 집중 상태를 유지해야 하므로, 개발자의 실제 워크플로에 맞추는 것이 신뢰 형성에 도움이 된다. - 필요한 정보와 피드백을 개발자가 사용하는 도구와 흐름 안에서 제공하면 커뮤니케이션 비용을 줄일 수 있다. - GitHub 사례처럼 FigJam의 코드 블록을 활용해 디자인 시스템 문서에서 컴포넌트 API를 함께 정의하는 방식도 가능하다. - 디자인과 코드의 연결 지점을 명확히 하면 컴포넌트의 동작, 재사용성, 구현 의도를 더 쉽게 공유할 수 있다. ## 실용적인 적용 방법 - 프로젝트 초기에 개발자를 리뷰에 초대한다. - 화면 디자인 전에 사용자 흐름과 주요 상태를 와이어프레임으로 정리한다. - “구현 가능한가?”보다 구체적으로 “어떤 제약이 있는가?”, “재사용할 수 있는 기능은 무엇인가?”라고 질문한다. - 정상 상태뿐 아니라 로딩, 오류, 빈 상태, 권한 제한 등 모든 화면 상태를 함께 검토한다. - Figma·FigJam·코드 문서 등 양쪽 팀이 실제로 사용하는 도구에서 정보를 관리한다. - 핸드오프를 일회성 전달이 아니라 설계와 구현이 반복적으로 조정되는 협업 과정으로 운영하는 것이 바람직하다.

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

Figma디자인 시스템figjamwireframing+2

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

디자이너와 개발자를 직장에서

디자이너와 개발자의 직장 만족도는 조직 내 디자인의 위상, 하이브리드 근무 정책, 리더십, 협업과 커뮤니케이션에 크게 좌우된다. 설문 응답자의 41%는 전년보다 직장 만족도가 높아졌으며, 명확한 근무 제도와 자율성, 디자인·개발 간 긴밀한 협업이 긍정적인 업무 경험을 만든다. 특히 디자인을 단순한 지원 기능이 아니라 전략적 파트너로 대우하는 조직일수록 구성원의 만족도가 높아진다는 것이 글의 결론이다. ## 조사 개요와 전반적인 만족도 - Figma는 디자이너와 개발자 943명을 대상으로 제품 개발 방식과 업무 경험을 조사했다. - 응답자의 41%가 전년보다 직장 만족도가 높아졌다고 답했다. - 글은 업무 만족도에 영향을 주는 다섯 가지 요인을 소개하며, 조직·관리자·개인이 각각 어떤 환경을 만들어야 하는지 설명한다. - 제공된 본문에는 네 번째 요인까지 수록되어 있으며, 다섯 번째 요인의 내용은 포함되어 있지 않다. ## 디자인의 조직 내 위상 - 디자인을 단순히 요청받은 결과물을 제공하는 서비스 조직이 아니라 전략적 파트너로 인정하면 디자이너의 만족도가 높아진다. - 디자인이 전략 수립에 참여하면 고객 중심성을 강화하고, 디자이너가 제품과 사업에 실질적인 영향을 미칠 수 있다. - 디자이너는 탐색과 실행 사이의 균형을 보여 주어야 한다. - Wise는 다음과 같은 “현재·다음·미래” 원칙을 제시한다. - 현재 제공할 결과물에 70%의 시간 사용 - 다음 단계의 과제에 20% 사용 - 장기적인 미래 탐색에 10% 사용 - 탐색 단계가 지나치게 길어지면 실행력이 부족하다는 인상을 줄 수 있으므로, 창의적인 발견과 구체적인 납품 일정을 함께 관리해야 한다. ## 하이브리드 근무 정책 - 응답자의 97%는 적어도 일부 기간 원격으로 근무하며, 절반 이상은 대부분 또는 완전히 원격으로 일한다. - 어디서 일하는지가 업무 자체만큼 직장 만족도에 중요한 요소가 됐다. - 모든 조직에 동일한 하이브리드 정책을 적용하는 방식은 효과적이지 않을 수 있다. - 출근 요일과 장소가 불명확하면 특정 요일에만 사무실이 붐비고 좌석이나 회의실이 부족해지는 문제가 발생한다. - 완전 원격, 완전 출근, 유연한 하이브리드 중 어떤 방식을 선택하든 다음 사항을 명확히 해야 한다. - 출근이 필요한 상황 - 협업을 위한 공통 시간대 - 사무실 이용 방식 - 성과를 평가하는 기준 ## 리더의 자율성 부여와 지원 - 관리자는 팀의 실제 업무 상황을 파악하고 필요한 지원과 의사결정을 제공해야 한다. - 좋은 리더는 구성원마다 필요한 지원 방식이 다르다는 점을 이해한다. - 근무 시간이나 장소를 일률적으로 통제하기보다 결과물의 품질과 영향력을 중심으로 평가하는 접근이 효과적이다. - 리더는 팀이 최선의 결과를 내도록 지원하는 동시에, 좋은 성과가 적절히 인정되고 보상되도록 해야 한다. - 자율성을 주되 목표와 기대 수준은 분명히 제시해야 한다. ## 디자인·개발 협업과 커뮤니케이션 - 직장 만족도가 높은 디자이너 중 69%는 개발자와의 협업이 효과적이거나 매우 효과적이라고 평가했다. - 만족도가 높은 개발자일수록 디자이너와 더 자주 협업하는 경향이 있다. - 디자이너의 84%는 개발자와 최소 주 1회 협업한다. - 화이트보드와 협업형 디자인 도구는 여러 사람이 동시에 아이디어를 공유하고 작업할 수 있게 해 협업을 촉진한다. - 그러나 개발자의 91%, 디자이너의 92%는 협업 프로세스에 여전히 개선의 여지가 있다고 답했다. - 협업 불일치의 원인으로 개발자 중 47%는 디자이너가 엔지니어링의 제약과 관점을 충분히 이해하지 못하는 점을 지적했다. - 따라서 효과적인 협업을 위해서는 단순한 도구 도입을 넘어 다음이 필요하다. - 초기 단계부터 디자이너와 개발자가 함께 논의하기 - 기술적 제약과 사용자 요구를 상호 공유하기 - 정기적인 피드백과 의사결정 과정 마련하기 - 결과물보다 문제 정의와 목표를 먼저 합의하기 조직은 디자인을 전략적 의사결정에 참여시키고, 근무 방식과 성과 기준을 명확히 하며, 디자이너와 개발자가 자주 협업할 수 있는 환경을 만들어야 한다. 개인과 팀 차원에서는 탐색과 실행의 균형을 유지하고, 도구뿐 아니라 서로의 업무 맥락과 제약을 이해하는 데 집중하는 것이 실용적인 개선책이다.

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

Figmacollaborative-designmultiplayer-collaborationwhiteboarding+1