techlist.io
KREN

Figma/사용자 경험

140 개의 포스트

figma3분 읽기큐레이션 요약

새로운 Principle 연동 기능

Figma가 프로토타이핑 도구 Principle과 연동되어, Figma에서 만든 정적 디자인에 고급 애니메이션과 인터랙션을 추가할 수 있게 되었다. 사용자는 코딩 없이 스크롤, 스와이프, 버튼 상태 변화, 스프링·이징·선형 전환 등을 구현해 실제 모바일 앱과 유사한 프로토타입을 만들 수 있다. 또한 Figma에서 디자인을 수정하면 Principle이 변경 사항을 감지해 기존 애니메이션을 유지한 채 동기화한다. ## Figma와 Principle의 통합 - Principle에서 Figma를 가져오기 소스로 인증하면 Figma 디자인을 Principle로 불러올 수 있다. - Figma의 화면과 객체를 기반으로 Principle에서 인터랙션과 모션을 설정한다. - 정적인 UI 시안을 실제 앱처럼 동작하는 프로토타입으로 발전시킬 수 있다. - 이 통합은 Figma의 웹 기반 API를 활용해 구축되었다. ## 구현할 수 있는 인터랙션과 애니메이션 - 페이지에 스크롤 동작 추가 - 이미지 카드 사이의 스와이프 전환 구현 - 사용자의 상호작용에 따른 버튼 상태 변화 설정 - 객체 간 전환 애니메이션 적용 - 스프링(spring) - ease in - ease out - 선형(linear) 전환 - 별도의 코딩 없이 모바일 앱에 가까운 동작과 화면 전환 표현 ## 코딩 없이 사용하는 시각적 프로토타이핑 - Principle은 인터페이스 디자이너에게 익숙한 시각적 UI를 제공한다. - 디자인과 엔지니어링 작업을 오가는 대신, 디자이너가 시각적·창의적 사고에 집중할 수 있도록 설계되었다. - 초보자도 비교적 쉽게 사용할 수 있으며, 복잡한 프로토타입을 만들면서도 코드를 배울 필요가 없다. - 단순한 사용성과 강력한 애니메이션 기능의 균형이 Principle의 장점으로 소개된다. ## Figma 수정 사항의 동기화 - 이미 Principle로 가져온 디자인을 Figma에서 수정해도 두 도구 사이의 동기화가 가능하다. - Principle은 Figma의 변경 사항을 자동으로 인식하고 기존 작업에 병합한다. - 예를 들어 Figma에서 버튼 크기를 변경하면 Principle에서도 버튼 크기가 자동으로 조정된다. - 이때 Principle에서 설정한 기존 애니메이션은 유지된다. - 따라서 디자인 수정 때마다 프로토타입의 인터랙션을 처음부터 다시 설정할 필요가 없다. ## 개발자를 위한 Figma API 활용 - Principle 제작자는 Figma의 API 문서와 도구를 활용해 연동 기능을 개발했다. - Figma의 API Explorer에서는 특정 Figma 파일 ID를 입력해 API 호출 결과를 확인할 수 있다. - 개발자는 API의 기본 구성 요소와 파일 데이터 구조를 직접 테스트하며 연동 방식을 이해할 수 있다. - 이는 디자인 도구를 외부 서비스와 연결하려는 개발자에게 실용적인 검증 환경을 제공한다. ## 활용과 의의 - Figma는 화면 설계에, Principle은 모션과 인터랙션 구현에 특화된 역할을 맡는다. - 두 도구를 함께 사용하면 디자인 단계에서 사용자 경험을 더 현실적으로 검증할 수 있다. - 디자이너는 개발에 넘기기 전에 전환 효과와 인터랙션의 완성도를 확인할 수 있다. - 통합 기능은 Figma 사용자들의 지속적인 요청에 대한 대응으로 제공되었다. 실무에서는 Figma에서 레이아웃과 시각 디자인을 관리하고, Principle에서 핵심 사용자 흐름과 애니메이션을 빠르게 검증하는 방식이 효과적이다. 특히 디자인 변경 후에도 애니메이션이 유지되므로, 반복적인 프로토타입 수정 작업을 줄일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로토타이핑motion-design+2
figma3분 읽기큐레이션 요약

구글의 AR 디자인 가이드

Google의 AR 디자인 가이드라인은 Apple보다 범위가 넓고 실용적이지만, 두 가이드 모두 단순한 단일 장면과 객체 배치에 지나치게 집중한다. 따라서 복잡한 상호작용, 다중 장면, 애니메이션, 협업 환경 등 실제 3D UX 설계에 필요한 문제를 충분히 다루지 못한다. 결국 AR 디자인의 발전은 공식 문서보다 디자이너와 업계가 직접 새로운 관행과 도구를 만들어가는 과정에 달려 있다. ## 모바일 AR의 대중화와 새로운 설계 과제 - Google의 ARCore와 Apple의 ARKit 등장으로 3D UX가 VR 헤드셋 중심에서 모바일로 이동했다. - 모바일 개발자라면 수억 명의 Android·iOS 사용자에게 AR 경험을 제공할 수 있게 되었다. - 그러나 기존 2D 앱 디자인과 달리 3D에서는 공간, 깊이, 물리, 장면 전환 등을 고려해야 한다. - 게임·영화·건축 등 서로 다른 분야에서 가져온 도구와 복잡한 작업 흐름 때문에 디자이너가 쉽게 접근하기 어려웠다. ## Apple과 Google 가이드라인의 범위 - Apple은 Human Interface Guidelines의 AR 항목에서 비교적 제한적인 내용을 제공한다. - Apple의 설명은 주로 ARKit의 평면 인식과 그 위에 객체를 배치하는 기본 사용 사례에 집중한다. - Google의 AR Design Guidelines는 AR Stickers와 Just a Line 같은 실제 제품 경험을 바탕으로 더 폭넓은 주제를 다룬다. - Google은 다음과 같은 객체 배치 방식을 제시한다. - 탭해서 배치 - 드래그해서 배치 - 자유 배치 - 객체 배치의 현실감을 높이기 위해 물리 효과를 활용하는 방법도 간략히 설명한다. - 이후 UI 컴포넌트와 온보딩을 포함한 “경험 설계” 관련 내용도 추가되며 지속적으로 확장되고 있다. ## 복잡한 AR 상호작용을 다루지 못하는 문제 두 가이드라인은 단순한 객체 배치나 스티커형 기능을 넘어서는 설계를 거의 다루지 않는다. - 객체 선택 및 선택 상태 관리 - 다른 객체에 가려진 객체 선택 - 조건에 따른 동작 변화 - 사용자의 행동에 따른 분기형 장면 흐름과 스토리보드 - 텔레포테이션을 통한 장면 이동 - 포털과 공간 간 연결 - 물리적 제스처 기반 상호작용 - 시간 또는 사용자 행동에 의해 실행되는 애니메이션 - 여러 장면 사이의 상태 변화와 개인화 - 원격 사용자와 함께 AR 프로토타입을 확인하고 피드백하는 실시간 협업 특히 다중 장면 사용 사례가 빠져 있어, 복잡한 전환과 조건부 동작을 설계하기 어렵다. 이는 더 깊고 몰입감 있는 AR 경험을 만들려는 디자이너의 요구와 맞지 않는다. ## 객체 배치 방식에 대한 한계 - Google은 사용자가 손을 뻗어 닿을 수 있는 거리 안에 객체를 배치하는 것이 최적이라는 전제를 둔다. - 그러나 실제로는 객체를 던지거나, 멀리 있는 대상을 가리키거나, 잡아당기는 방식도 가능하다. - 따라서 특정 거리나 방식만을 최적의 규칙으로 고정하기보다, 다양한 상호작용을 실험할 여지가 필요하다. - Apple이 평면 감지 기반 배치만 설명하는 것과 비교하면 Google의 접근은 훨씬 구체적이지만, 여전히 복잡한 공간 상호작용까지는 확장되지 않았다. ## 업계가 직접 만드는 3D UX 관행 - 공식 가이드라인은 빠르게 변화하는 AR 기술과 수많은 창의적 실험을 모두 따라가기 어렵다. - 디자이너들은 기존 도구를 조합해 새로운 프로토타이핑 및 제작 프로세스를 구축하고 있다. - Unity의 Bushra Mahmood처럼 개인이 독자적인 AR 디자인 가이드라인을 만들기도 한다. - Marino Software 같은 팀은 기존 도구를 혼합해 작동하는 AR 앱과 새로운 작업 방식을 실험하고 있다. - 이러한 풀뿌리 활동은 3D UX의 실제 모범 사례를 형성하는 데 중요한 역할을 한다. ## 실용적인 결론 현재 AR 프로젝트를 시작한다면 Google의 가이드라인을 기본 출발점으로 활용하되, 이를 완성된 설계 규칙으로 받아들여서는 안 된다. 다중 장면, 상태 변화, 애니메이션, 제스처, 협업 같은 요구사항을 별도로 정의하고, 실제 기기에서 반복적으로 프로토타이핑하며 프로젝트에 맞는 3D UX 원칙을 직접 구축하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
사용자 경험프로토타이핑augmented-realityunity+4
figma3분 읽기큐레이션 요약

멀티플레이어, 현실 세계에서

Figma는 온라인 협업을 넘어 지역 기반의 오프라인 커뮤니티를 구축해 사용자들이 직접 교류하고 배우도록 하겠다고 발표했다. 디자인 시스템 밋업에서 얻은 호응을 바탕으로 20개 이상의 도시에서 Figma Local Communities를 시작했으며, 지역별 Designer Advocate가 커뮤니티 활동을 지원한다. 핵심은 제품 사용법뿐 아니라 디자인 조직 운영, 비평, 채용 등 실무 경험까지 공유하는 지속적인 네트워크를 만드는 것이다. ## 오프라인 밋업에서 확인한 커뮤니티 수요 - Figma는 4개 대륙, 8개 도시에서 Design System Meetup을 개최했다. - 참가자들은 단순한 기능 팁을 넘어 다음과 같은 주제를 논의했다. - 효과적인 디자인 크리틱 운영 방식 - 오픈 디자인 문화의 장단점 - 디자인 조직 간 협업과 파트너십 - 이러한 만남을 통해 사용자들이 온라인 협업뿐 아니라 직접 만나 경험과 문제를 공유하려는 수요가 크다는 점을 확인했다. ## Figma Local Communities 출범 - Figma는 전 세계 20개 이상의 도시에서 지역 커뮤니티를 시작했다. - 초기 대상 도시에는 아크라, 암스테르담, 베를린, 보스턴, 코펜하겐, 라고스, 런던, 뉴욕, 샌프란시스코, 시애틀, 텔아비브 등이 포함됐다. - 도시 선정에는 다음 요소를 함께 고려했다. - 이미 Figma 관련 밋업을 주도하는 지역 활동가의 존재 - 해당 지역의 Figma 사용자 집중도 - 다양한 지역과 국가를 아우르는 지리적 분포 - 커뮤니티는 Figma 사용법과 워크플로뿐 아니라 디자이너들이 실제로 겪는 성공과 어려움까지 공유하는 지원 공간을 목표로 한다. ## 지역 커뮤니티의 운영 방식 - 사용자는 다음 활동에 참여하거나 직접 제안할 수 있다. - 자신의 도시에 Figma 그룹 개설 - 지역 커뮤니티에서 다루고 싶은 주제 제안 - 워크숍, 밋업, 네트워킹 등 구체적인 행사 기획 - Figma는 각 지역의 요구를 본사가 일방적으로 정하기보다, 현지 사용자들이 무엇이 필요한지 직접 결정하도록 하려 한다. - 예시로는 다양한 배경의 디자인 팀을 채용하는 방법에 대한 워크숍, 프리랜서와 조직을 연결하는 스피드 네트워킹 등이 제시됐다. ## 지역별 Designer Advocate 팀 Figma는 커뮤니티의 의견을 수집하고 활동을 지원하기 위해 서로 다른 지역과 시간대에서 활동하는 Designer Advocate를 배치했다. - **Tom Lowry — 북미** - OpenText의 시니어 UX 디자이너 출신 - Figma 입문, 컴포넌트 구조화, 유연한 컴포넌트 설계 관련 교육 콘텐츠 제작 - Figma Material Design 리소스 키트와 디자인 포트폴리오 강의에도 참여 - **Zach Grosser — 유럽** - Square의 커뮤니케이션 디자이너 출신 - 2013년부터 Square 디자인 팀에 Figma를 도입한 초기 사용자 - 제품 기능 테스트와 디자인 교육에 적극적으로 참여 - 암스테르담으로 이주한 뒤 Figma에 합류 - **Namnso Ukpanah — 아프리카** - 라고스에서 Figma 디자인 시스템 밋업을 제안하고 300명 이상의 참가자를 이끌었다. - 11개 도시, 7개 국가에서 21명의 Figma 앰배서더를 온보딩했다. - 지역 디자이너와 개발자를 연결하는 현장 중심의 역할을 맡는다. ## 사용자 참여를 중심으로 한 확장 전략 - Designer Advocate는 지역 커뮤니티의 “현장 담당자” 역할을 하지만, 활동의 방향은 사용자 피드백에 따라 정해진다. - Figma는 각 도시의 구성원이 지역 상황에 맞는 행사와 주제를 제안하기를 기대한다. - 따라서 커뮤니티는 Figma가 일방적으로 제공하는 교육 채널이라기보다, 사용자들이 직접 운영하고 Figma가 지원하는 공동체에 가깝다. 실용적으로는 Figma를 배우는 데 그치지 않고, 지역 커뮤니티에 참여해 디자인 리뷰, 채용, 조직 운영 같은 실무 주제를 교류하는 것이 가장 큰 가치다. 거주 지역에 커뮤니티가 없다면 직접 그룹이나 행사를 제안하는 방식으로 네트워크를 확장할 수 있다.

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

피그마 기능 하이라이트

Figma의 Sketch Import 기능은 Sketch 사용자가 기존 작업물을 잃지 않고 Figma로 전환하도록 돕는 기능이다. Sketch 파일의 페이지, 크기 조정 제약, 벡터, 심볼 등을 높은 정확도로 보존하며, 여러 운영체제와 협업 환경을 연결한다. 글은 이 기능이 단순한 마이그레이션 도구를 넘어 Sketch와 Figma를 오가며 협업할 수 있게 하는 핵심 기능이라고 강조한다. ## Sketch Import이 필요한 이유 - **Figma로의 초기 전환 지원** - Sketch에서 Figma로 옮기는 사용자가 기존 디자인을 처음부터 다시 만들 필요가 없다. - 과거 Photoshop에서 Sketch로 전환할 때와 같은 큰 작업 부담을 줄여준다. - 기존 파일을 안정적으로 가져올 수 있어 새로운 도구를 시험하기 쉽다. - **운영체제가 다른 팀의 협업** - Sketch는 Mac 전용이지만 Figma는 다양한 운영체제에서 사용할 수 있다. - Windows나 Linux를 사용하는 개발자도 Sketch 파일을 Figma로 가져와 디자인 사양을 확인할 수 있다. - 서로 다른 디자인 도구를 사용하는 팀원들이 동일한 작업물을 기준으로 협업할 수 있다. - **Sketch와 Figma를 병행하는 작업 방식** - 디자이너가 Sketch에서 작업한 뒤 Figma로 파일을 옮겨 디자인 리뷰나 원격 협업을 진행할 수 있다. - Figma의 댓글 기능을 활용해 팀원 및 외부 이해관계자와 의견을 주고받을 수 있다. - 한 가지 도구만 강제하지 않고 작업 목적에 따라 도구를 선택할 수 있다. ## 높은 변환 정확도 - Sketch Import은 Sketch 파일의 구조와 시각적 요소를 최대한 보존하도록 설계되었다. - 다음과 같은 요소를 가져올 수 있다. - 페이지 구조 - 크기 조정 제약 조건 - 벡터 데이터 - Sketch의 심볼 - Sketch의 심볼은 Figma에서 **컴포넌트**로 변환된다. - 따라서 디자인 시스템을 구축하거나 유지하는 조직도 기존 컴포넌트 구조를 활용할 수 있다. - 글에서는 실제 사용자가 Angle 파일을 가져온 사례를 통해 벡터와 컴포넌트가 거의 완벽하게 유지된다고 소개한다. - 변환 과정에서 문제가 발생하면 Figma 앱 내부의 지원 위젯을 통해 문의할 수 있다. ## Sketch 파일을 가져오는 방법 - Figma 파일 공간에 Sketch 파일을 **드래그 앤 드롭**한다. - Figma 툴바의 가져오기 기능을 사용한다. - 단축키를 사용한다. - macOS: `Command + Shift + K` - Windows: `Control + Shift + K` - 가져오기가 완료되면 가져온 이미지와 디자인 요소가 포함된 새로운 Figma 파일이 자동으로 생성된다. ## 커뮤니티 중심의 기능 소개 - Figma는 새 기능 출시 소식이나 릴리스 노트가 쉽게 묻힐 수 있다는 점을 언급하며, 이미 출시된 유용한 기능을 다시 소개한다. - Sketch Import은 2015년 6월에 출시됐지만 이후에도 사용자들이 계속 새롭게 발견하는 기능으로 소개된다. - 다음에 어떤 기능을 다룰지는 Figma 커뮤니티의 의견을 바탕으로 결정하려 했다. Sketch Import은 기존 Sketch 자산을 Figma로 옮겨야 하는 개인과 팀에게 유용한 마이그레이션 수단이다. 특히 디자인 시스템, 운영체제가 다른 협업 환경, 원격 리뷰가 필요한 프로젝트라면 파일을 가져온 뒤 페이지와 컴포넌트가 제대로 변환되는지 확인하고 적극적으로 활용하는 것이 좋다.

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

런던 예술 대학교의 디자인 시스템

UAL은 6개 단과대학의 독립적인 정체성 때문에 디지털 경험이 일관되지 않았지만, 웹사이트 개편 과정에서 협업 도구를 Figma로 전환하며 자연스럽게 디자인 시스템을 구축했다. 실시간 공동 편집과 중앙화된 라이브러리는 디자인·개발·외부 에이전시 간의 소통을 개선했고, 결과적으로 웹사이트를 더 빠르고 일관되게 제작할 수 있게 했다. 디자인 시스템은 단순한 컴포넌트 모음이 아니라 여러 채널과 대학 조직을 연결하는 공통 언어로 발전했다. ## 조직 구조가 만든 디자인 일관성 문제 - UAL은 2004년 공식 연합체가 되었으며, 현재 6개 대학으로 구성되어 있다. - 각 대학은 오랜 역사와 고유한 브랜드 정체성을 가지고 있어, 웹사이트마다 서로 다른 스타일을 적용하려는 경향이 있었다. - 그 결과 UAL의 디지털 경험은 채널과 대학별로 분리되고 일관성이 부족했다. - 2017년부터 UX 팀은 디지털 트랜스포메이션 프로그램의 일환으로 사용자 중심의 핵심 디지털 경험을 재설계했다. ## Sketch 협업의 한계와 Figma 전환 - 기존 Sketch 기반 작업에서는 여러 사람이 같은 파일에서 원활하게 협업하기 어려웠다. - 14개 캠퍼스에 흩어진 내부 구성원과 외부 에이전시가 함께 일하면서 다음 문제가 발생했다. - 파일 버전 관리 혼란 - 파일 동기화에 소요되는 시간 - 반복적인 커뮤니케이션과 확인 절차 - 디자인 팀과 개발 팀 사이의 단절 - Figma는 브라우저만 있으면 어디서든 접근할 수 있고, 실시간 공동 편집을 지원했다. - Sketch 파일을 간단히 가져올 수 있어 웹사이트 프로젝트 중간에도 도구를 전환할 수 있었다. - 모든 이해관계자가 하나의 중앙 파일을 기준으로 작업하면서 투명성이 높아지고, 디자인과 개발 간 협업이 개선되었다. ## 웹사이트 개편에서 디자인 시스템으로 확장 - 팀은 웹사이트를 처음부터 구축해야 했기 때문에, 반복 작업을 줄이기 위해 디자인 시스템을 우선적으로 만들기로 했다. - Figma의 컴포넌트와 협업 기능 덕분에 디자인 시스템 구축이 별도의 대형 프로젝트가 아니라 웹사이트 제작 과정에서 자연스럽게 진행되었다. - 디자인 시스템은 웹사이트용 컴포넌트뿐 아니라 여러 채널에 동일한 스타일과 기능을 적용하기 위한 기반으로 정의되었다. - 목표는 대학별로 달랐던 컴포넌트를 조화시키고 제작 프로세스를 표준화하는 것이었다. ## 워크숍을 통한 요구사항과 불일치 파악 - UX 팀은 학생과 비즈니스 파트너를 대상으로 워크숍을 진행했다. - 워크숍의 목적은 다음과 같았다. - 디자인 시스템에 필요한 핵심 기능 파악 - 사용 중인 모든 UI 컴포넌트 목록화 - 대학과 채널별 디자인 차이 및 불일치 발견 - 기존 스타일 가이드를 실제 디지털 자산과 재사용 가능한 컴포넌트로 변환했다. ## 유연한 브랜드 시스템 구축 - UAL의 복잡한 브랜드 구조 때문에 디자인 시스템은 하나의 고정된 스타일만 강제할 수 없었다. - 서로 다른 색상, 타이포그래피, 브랜드 개성을 수용할 수 있도록 유연하게 설계했다. - Figma 팀 라이브러리를 활용해 모든 구성원이 기기나 위치에 관계없이 최신 브랜드 가이드와 자산을 사용할 수 있게 했다. - Figma Styles를 사용하면 색상, 텍스트, 효과 스타일을 분리해 관리할 수 있어 브랜드 변형을 더 유연하게 적용할 수 있었다. - 결과적으로 디자인 시스템은 정적인 문서가 아니라 지속적으로 업데이트되는 ‘살아 있는’ 브랜드 가이드가 되었다. ## 컴포넌트 기반의 빠른 개발 - 디자인 시스템의 컴포넌트를 조합해 기본 페이지를 템플릿으로 만들었다. - 개발 팀은 이 템플릿을 활용해 새로운 페이지를 빠르게 생성할 수 있었다. - Figma에서 디자인과 컴포넌트 구조를 함께 확인할 수 있어, 개발자는 디자인이 코드로 어떻게 구현될지 즉시 파악할 수 있었다. - 디자이너와 개발자가 동일한 시스템을 기준으로 작업하면서 구현 속도와 협업 효율이 높아졌다. ## 실용적인 시사점 - 디자인 시스템은 처음부터 별도의 거대한 프로젝트로 계획하지 않아도, 반복되는 문제를 해결하는 과정에서 자연스럽게 시작할 수 있다. - 여러 조직이나 브랜드가 공존하는 환경에서는 일관성만 강제하기보다 공통 기반과 개별 표현의 유연성을 함께 설계해야 한다. - 최신 컴포넌트와 스타일을 중앙 라이브러리로 관리하고 디자인·개발·이해관계자가 함께 사용하면, 제작 속도와 결과물의 일관성을 동시에 높일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템웹 개발+2
figma2분 읽기큐레이션 요약

#FigmaTip 라운드업

Figma의 10번째 팁 모음은 디자이너 Charli Marie의 리뷰에서 소개된, 작업 속도와 파일 정리 효율을 높이는 기능들을 정리한 글이다. 핵심은 레이어 단축키, 빈 그룹 자동 삭제, 속성별 복사, 이미지 fill 설정, 벡터 네트워크 등을 활용하면 Sketch나 Illustrator를 열지 않고도 더 빠르고 깔끔하게 작업할 수 있다는 것이다. ## 레이어 순서 조정 단축키 - `Command + [` 및 `Command + ]`로 선택한 레이어를 앞뒤로 이동할 수 있다. - 레이어 패널에서 직접 드래그하지 않아도 되므로 디자인 중 요소의 순서를 빠르게 바꿀 수 있다. - 메뉴에 단축키가 표시되어 있어 잊어버렸을 때 확인하기 쉽다. - Photoshop과 유사한 방식이라 기존 사용자도 쉽게 익힐 수 있다. ## 빈 그룹 자동 삭제 - 그룹 안의 모든 요소를 삭제하면 해당 그룹도 자동으로 사라진다. - 내용이 없는 그룹을 수동으로 찾아 삭제할 필요가 없다. - 요소를 다른 곳으로 옮긴 뒤 빈 그룹이 남아 파일이 지저분해지는 문제를 줄여준다. - 결과적으로 레이어 패널을 더 깔끔하게 유지할 수 있다. ## 개별 속성만 복사하기 - 한 도형의 속성을 다른 도형에 복사할 때 전체 속성 또는 일부 속성만 선택할 수 있다. - 복사 가능한 예시는 다음과 같다. - Fill - Font - Stroke - 기존 디자인에서 잘 설정된 특정 속성만 다른 요소에 적용할 수 있다. - 전체 스타일을 덮어쓰지 않고 필요한 부분만 재사용할 수 있어 반복 작업이 빨라진다. ## 마스크 대신 이미지 Fill 활용 - Figma에 이미지를 삽입하면 이미지가 독립적인 이미지 객체가 아니라, 이미지가 Fill로 적용된 사각형 형태로 생성된다. - Fill 설정에서 이미지를 조정할 수 있다. - Crop - Tile - 이미지 표시 방식과 위치 - 이미지 크롭을 위해 여러 마스크를 만들 필요가 줄어든다. - 처음에는 기존 그래픽 도구와 달라 혼란스러울 수 있지만, 이미지 배치와 편집을 단순화하는 방식이다. ## 벡터 네트워크로 복잡한 도형 만들기 - Figma의 벡터 네트워크에서는 하나의 점이 두 개 이상의 선과 연결될 수 있다. - 일반적인 벡터 편집 도구의 경로 구조보다 자유로운 형태의 도형을 만들 수 있다. - 복잡한 벡터를 제작할 때 Illustrator로 파일을 옮겨야 하는 상황을 줄여준다. - 기존 벡터 편집 방식과 달라 적응이 필요하지만, 익숙해지면 Figma 안에서 대부분의 작업을 처리할 수 있다. ## 실용적인 활용 Figma 작업 속도를 높이려면 레이어 이동 단축키를 우선 익히고, 반복되는 스타일은 필요한 속성만 복사하는 것이 좋다. 이미지 작업에서는 마스크를 무조건 사용하는 대신 Fill 설정을 확인하고, 복잡한 아이콘이나 도형은 벡터 네트워크를 활용하면 파일 구조를 단순하게 유지하면서 효율적으로 제작할 수 있다.

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

디자이너 Q&A:

Camellia Neri는 창의성의 원천이 어린 시절의 경험과 향수에서 비롯된다고 말한다. 디즈니랜드의 세밀함, 예측 불가능한 유머, 자연사 박물관의 장면 구성, 작가와 일러스트레이터의 협업, 도시의 숨은 역사에서 영감을 얻으며 이를 일러스트 작업에 적용한다. 결국 좋은 창작은 세심한 조사와 의도, 개성 있는 디테일, 그리고 협업을 통해 익숙한 이야기를 새롭게 보여주는 데서 나온다. ## 어린 시절의 경험과 향수 - 영감의 상당 부분은 어린 시절 경험한 장소와 작품에서 비롯된다. - 과거의 감정과 분위기를 현재의 작업 속에서 재현하려고 한다. - 일러스트레이터에게 향수는 단순한 추억이 아니라, 관객이 공감할 수 있는 세계를 만드는 재료가 된다. ## 디즈니랜드 메인 스트리트의 세밀함 - 어린 시절 디즈니랜드 퍼레이드를 보며 가짜 상점과 건물의 정교한 장식에 깊은 인상을 받았다. - 금박 장식과 상품을 보여주는 창문 등, 작은 요소들이 실제 세계처럼 느껴지도록 구성되어 있었다. - 새로운 일러스트를 시작할 때도 충분한 조사와 의도를 바탕으로 이야기를 설계한다. - 세부 요소를 공들여 쌓아 올릴수록 작품의 세계관이 더 진정성 있게 전달된다고 본다. ## 《Pee-Wee’s Playhouse》의 예측 불가능성 - 코미디, 인형극, 기묘한 분위기, 교훈, 독특한 미술이 결합된 프로그램에서 영감을 받았다. - Ric Heitzman, Gary Panter, Wayne White 등의 시각적 작업을 특히 높이 평가한다. - 작품 곳곳에 부모도 발견할 수 있는 이스터에그가 숨겨져 있어 예상 밖의 즐거움을 제공했다. - 성공적인 일러스트레이션은 작가만의 작은 장난과 의외의 순간을 삽입해 개성과 독창성을 드러낸다. ## 자연사 박물관의 디오라마 구성 - 로스앤젤레스 자연사 박물관의 박제 디오라마를 거대한 2D 일러스트처럼 바라본다. - 동물의 위치, 행동, 배경 풍경이 하나의 서사적 장면을 구성한다. - 생태계에 맞춘 색상 팔레트와 조명, 캐릭터 배치가 완성도 높은 경험을 만든다. - 이러한 원리는 스토리텔링이 뛰어난 랜딩 페이지에도 적용된다. - 명확한 시각적 구성 - 효과적인 색상과 조명 - 장면 속 요소들의 관계 - 전체 경험을 하나로 묶는 서사 ## 쿠엔틴 블레이크와 로알드 달의 협업 - 로알드 달의 이야기와 쿠엔틴 블레이크의 일러스트가 결합해 작품의 매력을 완성했다고 평가한다. - 《제임스와 거대한 복숭아》, 《마틸다》, 《찰리와 초콜릿 공장》, 《마녀를 잡아라》 등이 대표적인 사례다. - 작가와 일러스트레이터의 관계는 영화감독과 반복적으로 함께 작업하는 배우의 관계처럼 공동의 비전을 만들어낸다. - 좋은 글쓰기 파트너를 선택하고, 잘 맞는 협업 관계를 지속적으로 발전시키는 것이 중요하다. ## 샌프란시스코의 숨은 역사 - 샌프란시스코의 골드러시와 도시 개발에 얽힌 잘 알려지지 않은 역사적 사실을 창작의 소재로 삼는다. - 숨은 이야기를 조사하고 이를 일러스트로 재구성하는 별도의 Medium 프로젝트도 운영한다. - 도시의 묻힌 배와 같은 역사적 사건은 눈에 보이지 않는 세계를 시각화하는 일러스트레이터의 역할을 보여준다. - Figma를 활용해 여러 일러스트가 하나의 일관된 브랜드처럼 보이도록 관리한다. 작업에 영감을 얻고 싶다면 자신의 어린 시절 기억뿐 아니라 자주 방문한 장소, 좋아했던 대중문화, 박물관의 전시, 협업 경험, 지역의 역사까지 관찰해보는 것이 좋다. 특히 세밀한 조사와 예상 밖의 디테일을 더하면 개인적인 기억이 독창적인 시각 언어로 발전할 수 있다.

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

길 위에서: 두 명

클라우드 기반 Figma와 적절한 모바일 장비를 활용하면 고가의 노트북 없이도 사용자 조사, 디자인 리뷰, 팀 협업, 간단한 편집까지 수행할 수 있다. Josh Goodwin과 Tyrale Bloomfield는 삼성 스마트폰·태블릿, 외부 디스플레이, 블루투스 입력 장치를 조합해 이동 중에도 업무를 이어갔다. 다만 화면 출력 방식과 마우스 입력을 제대로 인식하는 하드웨어·브라우저 조합을 선택하는 것이 중요하다. ## 노트북 없이 구성하는 이동형 디자인 환경 - 권장 장비: - Samsung Galaxy S8/S8+/S9/S9+ 또는 Samsung Tab 2 태블릿 - Samsung DeX Dock 또는 Chromecast - 블루투스 키보드와 마우스 - 스마트폰의 Chrome에서 Figma를 열고, 모니터나 TV로 화면을 출력한다. - 큰 화면에서는 Figma 프레임을 확인하고, 스마트폰에서는 키보드와 마우스로 조작할 수 있다. - 외부 모니터가 없으면 태블릿만으로도 Figma 파일 확인, 댓글 작성, 간단한 편집이 가능하다. ## 의료 현장 사용자 조사에 활용 - Josh Goodwin은 의료기기 회사에서 일하며 의사들이 실제로 사용하는 컴퓨터와 태블릿에서 디자인을 테스트해야 했다. - 과거에는 Sketch나 Adobe 프로그램이 설치된 노트북과 태블릿을 여러 대 운반해야 했다. - Figma 도입 후에는: - 스마트폰에서 Figma 프로토타입을 실행하고 - 병원에 있는 모니터에 DeX Dock 또는 Chromecast로 연결하며 - 의사들에게 프로토타입 URL을 공유해 각자의 브라우저에서 확인하게 했다. - 피드백을 받는 즉시 디자인을 수정하고, 큰 화면에서 변경 결과를 확인할 수 있어 개발팀이 디자이너를 기다리는 시간도 줄어들었다. ## 저렴해지는 디자인 진입 장벽 - 스마트폰 한 대와 약 100달러 수준의 TV만으로도 기본적인 디자인 작업 환경을 구성할 수 있다. - 고가의 MacBook이나 전문 디자인 장비가 없어도 브라우저와 인터넷에 접근할 수 있으면 Figma를 사용할 수 있다. - 특히 신입 디자이너나 개발도상국의 디자이너처럼 장비 구매 예산이 제한된 사용자에게 유용하다. - 디자인 도구의 중심이 특정 컴퓨터가 아니라 클라우드와 브라우저로 이동한다는 점을 보여준다. ## 태블릿만으로 수행하는 크리에이티브 디렉션 - Tyrale Bloomfield는 Samsung Tab 2와 블루투스 마우스만으로 Figma 파일 사이를 오가며 업무를 처리했다. - 여행 중에는 마우스 없이 손가락으로 댓글을 작성하거나 디자인을 확인하기도 했다. - 노트북을 무릎 위에 불안정하게 올려두거나 야외 화면 반사를 걱정할 필요가 없다는 장점이 있다. - 단순한 검토와 피드백뿐 아니라 일정 수준의 디자인 편집도 모바일에서 가능하다고 설명한다. ## 하드웨어와 입력 방식의 호환성 - 모든 스마트폰과 태블릿이 동일하게 작동하지는 않는다. - 삼성 기기는 휴대폰 화면을 외부 디스플레이로 출력할 때 DPI를 조정해 큰 화면에 맞는 시각적 공간을 제공한다. - iPad 등 일부 기기는 화면에 닿는 모든 입력을 손가락 터치로 해석할 수 있다. - Figma가 입력을 손가락 터치로만 인식하면: - 객체 이동은 가능하지만 - 크기 조절 - 바운딩 박스 사용 - 클릭 앤 드래그 작업 등이 제한될 수 있다. - Josh와 Tyrale은 약 30개의 브라우저와 다양한 휴대폰·태블릿을 테스트한 끝에, 마우스 클릭과 손가락 터치를 구분해 Figma에 전달하는 조합을 찾았다. ## 이동성과 업무 연속성 - 이 방식의 핵심은 특정 장소나 개인 노트북에 의존하지 않는 것이다. - 브라우저와 화면 출력 장치, 입력 장치만 있으면 다른 사람의 컴퓨터나 현장 장비에서도 업무를 이어갈 수 있다. - 사용자 조사, 디자인 검토, 댓글 작성, 프로토타입 시연처럼 협업 중심의 업무에 특히 적합하다. 실제로 구성하려면 먼저 사용하는 휴대폰이 외부 화면 출력과 마우스 입력을 지원하는지 확인하고, Figma에서 객체 선택·크기 조절·드래그가 정상 작동하는지 테스트하는 것이 좋다. 모바일 환경은 고급 편집보다는 현장 테스트와 협업, 간단한 수정에 가장 효과적이다.

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

무료 온라인 Skillshare 클래스로

디자인 포트폴리오는 첫 제품 디자이너 직무를 얻기 위해 자신의 역량과 가능성을 보여주는 가장 중요한 수단이다. 좋은 포트폴리오는 완성된 결과물만 나열하지 않고, 프로젝트의 과정·배운 점·성과와 지원자의 성장 가능성까지 전달해야 한다. 글은 Figma와 Skillshare의 무료 강의를 통해 포트폴리오 제작부터 면접 발표, 피드백과 개선까지 익힐 수 있다고 소개한다. ## 포트폴리오가 중요한 이유 - 제품 디자이너 채용에서는 다양한 역할과 전문 분야를 이해하고 자신의 강점을 표현해야 한다. - 제품 디자인은 다음과 같은 영역이 결합된 분야다. - 사용자 리서치 - UX 설계 - 프로토타이핑 - 사용자 테스트 - 비주얼 디자인 - 소규모 기업이나 스타트업에서는 디자이너가 여러 역할을 동시에 수행할 수 있다. - 대기업에서는 리서치, UX, UI 등 전문 역할이 분리될 수 있으므로 자신의 관심 분야와 강점을 파악하는 것이 중요하다. ## 완성도보다 과정과 성장 가능성 강조 - 신입 디자이너는 경험 부족이나 자신감 결여 때문에 스스로를 낮게 평가하기 쉽다. - 하지만 변화가 빠른 디자인 업계에서는 새로운 도구와 방법을 배우고 적응하는 능력도 중요한 역량이다. - 포트폴리오에는 단순히 polished된 최종 결과물만 보여주기보다 다음 내용을 포함해야 한다. - 문제를 어떻게 정의했는가 - 어떤 조사와 의사결정을 거쳤는가 - 어떤 시도와 반복을 했는가 - 무엇을 배웠는가 - 프로젝트가 어떤 결과를 냈는가 - 이를 통해 현재의 기술뿐 아니라 배우고 성장하려는 태도까지 전달할 수 있다. ## Skillshare 강의에서 다루는 내용 - 포트폴리오에 포함해야 할 정보와 프로젝트를 선정하는 방법 - 지원자의 역량을 효과적으로 보여주는 시각적 구성 방법 - 프로젝트를 사례 연구(case study) 형식으로 정리하고 발표하는 방법 - 온라인 활동부터 실제 면접까지 지원 과정 전체에서 일관된 이야기를 전달하는 방법 - Figma를 활용해 포트폴리오를 반복 수정하고 동료 또는 멘토와 협업하는 방법 - Figma 프로젝트 링크를 공유해 커뮤니티에서 실제 피드백을 받는 방법 ## 포트폴리오를 개선하는 협업 방식 - Figma에서는 멘토를 프로젝트에 초대해 포트폴리오 구성과 디자인에 대한 피드백을 받을 수 있다. - 다른 수강생들과 작업물을 공유하면 실제 지원자 관점에서 개선점을 확인할 수 있다. - 피드백을 반영해 포트폴리오를 반복적으로 수정하는 과정 자체가 디자인 프로세스의 좋은 사례가 된다. ## 실용적인 적용 방법 포트폴리오를 만들 때는 최종 화면보다 문제 해결 과정과 의사결정의 근거를 중심에 두는 것이 좋다. 각 프로젝트를 문제, 역할, 과정, 결과, 배운 점의 순서로 정리하고, Figma에서 멘토나 동료의 피드백을 받아 여러 차례 개선하면 신입 디자이너로서의 실력과 성장 가능성을 더 설득력 있게 보여줄 수 있다.

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

Figma의 디자인 사전을 소개

디자인 업계는 예술·인쇄·출판의 역사에서 비롯된 전문 용어가 많아, 디자이너뿐 아니라 엔지니어·기획자·카피라이터·이해관계자에게도 협업 장벽이 될 수 있다. Figma는 구성원 간 원활한 소통을 돕기 위해 70개 용어로 시작한 오픈소스 **Design Dictionary**를 공개했다. 이 사전은 업계 변화에 맞춰 계속 확장되며, 커뮤니티의 제안으로 더욱 포괄적인 자료가 되는 것을 목표로 한다. ## 디자인 용어가 협업을 어렵게 만드는 이유 - 전문 산업에는 각 분야만의 고유한 언어가 있으며, 이는 전문가에게는 정밀한 소통 수단이 된다. - 반면 업계에 새로 들어온 사람에게는 전문 용어가 위압적이고 혼란스럽게 느껴질 수 있다. - 디자인은 사용성, 타이포그래피, 시각 요소 등 세부 개념이 많아 특히 복잡한 어휘 체계를 갖고 있다. - 디지털 인터페이스 제작에서는 조직의 여러 직군이 디자인에 관여한다. - 엔지니어는 디자인을 실제 코드로 구현한다. - 카피라이터나 편집자는 화면에 문구를 추가한다. - 제품 관리자는 전체 작업을 조율한다. - 이해관계자는 디자인을 검토하고 승인한다. - 이들이 같은 용어를 서로 다르게 이해하면 요구사항 전달과 의사결정이 어려워진다. ## Figma Design Dictionary의 목적 - 디자인 관련 기본 용어와 개념을 쉽게 찾아볼 수 있는 용어집이다. - 디자인을 처음 배우는 사람뿐 아니라 디자이너와 협업하는 비디자이너를 대상으로 한다. - Figma가 다양한 배경의 인재를 채용하면서 실제로 겪은 커뮤니케이션 문제에서 출발했다. - 비즈니스, 데이터 분석, 고객 지원, 엔지니어링 등 디자인 비전공자도 디자인 업무에 참여하면서 공통 언어의 필요성이 커졌다. - 용어를 통일해 직군 간 협업과 디자인 관련 논의를 더 명확하게 만드는 것이 핵심 목표다. ## 오픈소스와 커뮤니티 기반 확장 - 사전은 처음 70개 용어로 공개됐으며, 완성된 결과물이 아니라 지속적으로 발전하는 작업으로 소개됐다. - 디자인 업계의 변화와 새로운 개념에 맞춰 항목을 계속 추가할 계획이다. - Figma는 더 포괄적인 자료를 만들기 위해 커뮤니티의 참여를 요청했다. - 특히 다음과 같은 용어와 사용 사례에 대한 의견을 받으려 했다. - White Space - Stroke - Lorem Ipsum - 팀 내 협업을 방해하거나 자주 오해되는 표현 - 디자인 용어가 잘못 사용되는 상황 - 이용자는 사전 하단의 제안 링크를 통해 새로운 항목이나 수정 의견을 제출할 수 있다. ## 실용적인 활용 방법 - 디자인 협업을 시작할 때 팀에서 자주 사용하는 용어를 사전으로 확인하고 정의를 맞추는 것이 좋다. - 회의나 문서에서 모호한 용어가 나오면 개인의 해석에 의존하지 말고 공통 정의를 확인해야 한다. - 비디자이너 구성원의 온보딩 자료나 직군 간 협업 가이드에 용어집을 포함하면 커뮤니케이션 비용을 줄일 수 있다. - 조직에서 자주 혼동하는 표현은 자체 용어집에 추가하고, Figma처럼 지속적으로 갱신하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템오픈 소스+2
figma2분 읽기큐레이션 요약

#FigmaTip 모

이 글은 Figma 커뮤니티에서 공유된 작지만 유용한 작업 팁을 모은 8번째 #FigmaTip 모음이다. 프로젝트를 시각적으로 정리하는 방법과 레이어·객체를 키보드로 빠르게 탐색하는 단축키를 소개해, Figma 작업 흐름을 더 빠르고 직관적으로 만드는 데 초점을 둔다. ## 프로젝트 썸네일을 직접 디자인하기 - 프로젝트의 첫 페이지에 프레임 하나만 배치한다. - 프레임 크기를 `620×320`으로 설정한다. - 큰 텍스트와 시각적으로 눈에 띄는 디자인을 넣어 프로젝트 대표 이미지를 만든다. - 캔버스 색상과 프레임 색상을 동일하게 설정하면, 프로젝트 목록에서 하나의 완성된 썸네일처럼 보인다. - 프로젝트가 많을 때 목록에서 작업물을 빠르게 식별할 수 있고, 단순한 기본 썸네일보다 개성을 부여할 수 있다. ## 레이어 패널을 빠르게 탐색하기 - 글에는 레이어 패널을 확대·탐색하는 단축키 팁을 소개하는 섹션이 포함되어 있다. - 다만 제공된 본문에서는 해당 Twitter 게시물의 내용이 로드되지 않아 구체적인 단축키 목록은 확인되지 않는다. - 이 팁의 목적은 마우스로 레이어를 일일이 찾기보다 키보드 중심으로 레이어 구조를 빠르게 이동하는 데 있다. ## 선택과 레이어 순서를 단축키로 제어하기 - `Tab` / `Shift + Tab` - 같은 계층에 있는 형제 레이어를 앞뒤로 선택한다. - `Return` / `Shift + Return` - 선택한 그룹이나 프레임 안으로 들어가거나 빠져나온다. - `Cmd + ]` / `Cmd + [` - 선택한 레이어를 한 단계 위·아래로 이동한다. - `Option + Cmd + ]` / `Option + Cmd + [` - 선택한 레이어를 레이어 목록의 맨 위 또는 맨 아래로 이동한다. - 이러한 단축키를 익히면 레이어 패널을 계속 클릭하지 않고도 객체 선택, 그룹 탐색, 앞뒤 순서 변경을 빠르게 처리할 수 있다. Figma를 자주 사용한다면 먼저 레이어 선택과 순서 변경 단축키를 익히고, 프로젝트마다 대표 썸네일용 프레임을 만들어 보길 권한다. 작은 시각적 정리와 키보드 중심의 조작만으로도 파일 탐색성과 편집 속도를 함께 개선할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma사용자 인터페이스keyboard-shortcuts
figma3분 읽기큐레이션 요약

웹사이트 제작, 무엇이 먼저

웹사이트 제작에서 카피와 디자인은 어느 하나가 먼저 완성되는 작업이 아니라, 서로 영향을 주고받으며 함께 발전해야 한다. 기존에는 Google Docs와 Sketch처럼 도구가 분리되어 반복적인 수정과 전달이 발생했지만, Figma 같은 클라우드 기반 협업 도구를 사용하면 카피 작성자와 디자이너가 동시에 작업할 수 있다. 그 결과 제작 기간과 회의, 커뮤니케이션 비용을 줄이고 더 효율적으로 웹 페이지를 완성할 수 있다는 것이 글의 결론이다. ## 카피와 디자인이 충돌하는 이유 - 카피의 길이와 내용은 디자인의 레이아웃과 직접 연결된다. - 카피 작성자는 문서를 작성하고, 디자이너는 별도 도구에서 화면을 설계하는 방식이 일반적이었다. - 디자인에 카피를 넣은 뒤 텍스트가 너무 길거나 짧다는 사실을 발견하면서 수정 작업이 반복된다. - 디자인 리뷰, 카피 리뷰, 추가 이해관계자의 의견이 순차적으로 개입해 작업이 여러 차례 되돌아간다. - 도구와 파일이 분리되어 있어 프로젝트 관리자조차 최신 상태를 파악하기 어려운 ‘블랙박스’ 같은 과정이 된다. ## 반복되는 협업과 커뮤니케이션의 문제 - 작성자는 Google Docs에서 카피를 만들고, 디자이너는 Sketch에서 별도로 작업한다. - 카피가 디자인에 맞지 않으면 양쪽이 다시 수정하고, 이후 리뷰 결과에 따라 전체 작업을 재조정해야 한다. - 원격 디자이너와 협업할 때는 파일을 주고받는 과정이 더욱 복잡해진다. - 글에서는 과거에 디자인을 출력해 펜으로 수정한 뒤 스캔해서 공유하기까지 했던 사례를 소개한다. - 이러한 반복적인 ‘핑퐁’ 과정은 프로젝트를 불필요하게 지연시키고 참여자의 피로를 높인다. ## Figma를 활용한 동시 작업 방식 - 마케팅 담당자는 각 페이지에서 전달할 핵심 카피를 하나의 Google Docs에 정리한다. - 디자인팀은 Figma 프로젝트 안에 웹사이트 페이지별 프레임을 만든다. - 이후 고해상도 와이어프레임부터 최종 디자인까지 카피와 디자인을 함께 수정한다. - 카피 작성자는 디자인 문맥 안에서 텍스트가 너무 길거나 짧은지 즉시 확인할 수 있다. - 디자이너는 카피 전달과 파일 관리에 시간을 쓰기보다 실제 시각 설계에 집중할 수 있다. - 카피 수정 때마다 디자인팀에 별도 요청하거나 디자인 파일을 내보낼 필요가 줄어든다. ## 하나의 작업 공간이 제공하는 효과 - 프로젝트 URL 하나로 최신 디자인과 카피를 모든 이해관계자가 확인할 수 있다. - 참여자는 같은 화면에 댓글을 남기고 피드백을 주고받을 수 있다. - 버전 기록을 통해 변경 사항과 이전 작업 상태를 확인할 수 있다. - 디자인을 이메일로 내보내거나 회의 직전에 수정본을 다시 취합하는 일이 줄어든다. - 동일한 URL을 사용자 테스트에도 활용해, 내부 관계자들이 고객 피드백까지 함께 확인할 수 있다. - 회의 자체를 완전히 없애지는 않지만, 회의 횟수와 비효율적인 논의가 줄어든다. ## 실용적인 적용 방향 웹사이트 프로젝트에서는 카피를 모두 확정한 뒤 디자인을 시작하기보다, 초기 핵심 메시지를 정리한 후 카피와 디자인을 병렬적으로 발전시키는 방식이 효과적이다. 이를 위해 공유 가능한 디자인 파일, 실시간 댓글, 버전 관리, 사용자 테스트 결과를 한곳에 통합하면 수정 주기를 줄이고 협업 효율을 높일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmaweb-designsketch+4
figma2분 읽기큐레이션 요약

피그마 스타일 베타: 텍

Figma Styles 베타는 텍스트와 레이어 속성을 독립적인 스타일로 관리해 디자인 전반의 일관성과 유지보수성을 높이려는 기능이다. 텍스트 형식·색상·정렬 등을 분리해 조합할 수 있으며, 팀 라이브러리를 통해 최신 스타일을 공유하고 변경 사항을 동기화한다. 또한 하나의 텍스트 필드 안에서도 일부 문장에 서로 다른 스타일을 적용하면서 원본 스타일과의 연결을 유지하는 것이 핵심이다. ## 스타일 속성의 모듈화 - 기존 디자인 도구에서는 텍스트 스타일에 글꼴, 색상, 정렬 등이 함께 묶였다. - 예를 들어 제목·부제목·본문 3종에 색상 3개를 적용하면 최소 9개의 스타일이 필요했다. - Figma Styles는 다음 속성을 개별적으로 설정하고 조합할 수 있게 한다. - 텍스트 형식 - 채우기 및 색상 - 정렬 - 레이아웃 그리드 - 효과 - 선(stroke) - 링크 색상처럼 특정 색상만 바뀌는 경우, 해당 채우기 스타일 하나만 수정하면 이를 사용하는 모든 디자인에 변경 사항이 전파된다. ## 팀 라이브러리를 통한 일관성 관리 - 스타일은 팀 라이브러리에서 공유할 수 있다. - 팀원 모두가 최신 버전의 디자인 시스템을 사용할 수 있다. - 팀이 스타일을 활성화하면 변경 사항에 대한 알림을 받을 수 있다. - 개인 작업뿐 아니라 여러 디자이너가 참여하는 대규모 디자인 시스템 관리에도 적합하다. ## 텍스트 필드 내부의 부분 스타일 적용 - 기존 도구에서는 하나의 텍스트 필드에 단일 스타일만 적용되는 경우가 많았다. - 문장 일부를 링크로 만들거나, 특정 부분을 소제목처럼 표시하면 원래 텍스트 스타일과의 연결이 깨질 수 있었다. - Figma에서는 텍스트 일부를 선택해 서로 다른 텍스트 스타일이나 채우기 스타일을 적용할 수 있다. - 한 텍스트 필드 안에서 다음과 같은 구성이 가능하다. - 본문 중 일부를 링크 색상으로 표시 - 문장 일부를 소제목으로 지정 - 특정 구간에 별도의 서식 적용 - 부분적으로 다른 스타일을 적용해도 관련 스타일과의 연결이 유지되므로, 스타일 변경 시 해당 부분도 함께 업데이트된다. ## 베타 도입 방식과 기대 효과 - 이 기능은 2018년 5월 비공개 베타로 공개됐다. - 작은 팀부터 큰 팀 순서로 마이그레이션하며, 한 번 진행하면 되돌릴 수 없는 방식이었다. - 새로운 스타일 관리 방식에 적응이 필요하지만, 반복적인 수동 수정과 스타일 중복을 줄이는 것이 목적이다. - 개인 디자이너에게는 일상적인 편집 작업을 단순화하고, 팀에는 확장 가능한 디자인 시스템 운영을 제공한다. Figma Styles의 핵심 장점은 스타일을 세부 속성 단위로 분리하고, 그 연결 관계를 유지한다는 점이다. 디자인 시스템을 운영한다면 색상·타이포그래피·효과를 독립적으로 관리하고 팀 라이브러리에서 공유하는 방식이 변경 대응과 일관성 유지에 유리하다.

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

UI/UX 디지털 노마드로 떠

디지털 노마드로 UI/UX 일을 하려면 여행보다 먼저 안정적인 고객, 사업 기반, 인터넷 환경을 준비해야 한다. 원격 근무의 핵심은 시간대와 거리의 불편을 정기적인 소통과 투명한 업무 공유로 보완해 고객의 신뢰를 유지하는 것이다. 또한 현지 커뮤니티에 참여하면 새로운 고객과 동료를 만나면서 고립감도 줄일 수 있다. ## 출발 전 고객과 수입원 확보 - 일방적으로 여행을 떠나기 전에 기존 직장이나 고객을 확보하는 것이 좋다. - 출발 전에는 고객과 같은 시간대에 있고 재정적 압박도 적기 때문에 계약을 성사시키기 쉽다. - 가능하면 고객을 여러 번 직접 만나 커뮤니케이션 방식과 비즈니스 요구사항을 파악해야 이후의 오해를 줄일 수 있다. - 고객을 찾는 방법: - 디자인 밋업과 기술 행사에 참석해 프리랜서임을 알리고 포트폴리오 링크를 공유한다. - Craigslist 같은 구인·서비스 플랫폼에 서비스를 등록한다. - 잠재 고객에게 처음부터 해외 체류 계획을 강조하기보다, 먼저 한두 개의 프로젝트를 성공적으로 수행해 신뢰를 쌓는다. - 기존 전문 네트워크에 지속적으로 신규 고객을 받고 있음을 알린다. ## 프리랜서 사업 운영 기반 마련 - 해외에 나간 뒤에는 자국에서 처리해야 할 행정 업무가 훨씬 어려워질 수 있으므로 출국 전에 사업 구조를 갖춰야 한다. - 고려할 사항: - 세금 공제를 위해 LLC 등 사업체를 설립한다. - 프리랜서 수입과 지출을 관리할 별도 사업용 은행 계좌를 만든다. - 포트폴리오와 연락처가 포함된 웹사이트를 준비한다. - 해외에서 만난 사람에게 건넬 명함 등 홍보물을 제작한다. - 세무사를 통해 세금과 프리랜서 재정을 사전에 관리한다. - 사업자명을 등록한다. ## 안정적인 인터넷 환경 확보 - UI/UX 디자이너는 화상회의, 이메일, 디자인 파일 작업을 위해 안정적인 인터넷이 필수적이다. - 숙소를 예약하기 전에 Wi-Fi 제공 여부뿐 아니라 실제 속도와 이용자 리뷰를 확인해야 한다. - 필요하다면 숙소 호스트에게 속도 테스트 결과를 요청한다. - 연결 상태가 불확실한 경우 고객에게 미리 연락이 어려울 수 있음을 알리고 기대치를 조정해야 한다. - 인터넷 장애에 대비해 예비 SIM 카드를 준비하는 방법도 유용하다. - Figma처럼 링크로 파일을 공유하고 실시간 댓글을 받을 수 있는 도구를 사용하면 최신 파일을 반복해서 내보내거나 이메일로 전달할 필요가 줄어든다. - 인터넷이 끊기기 전에 파일을 열어 둔 경우, 오프라인에서도 Figma 파일 작업을 이어갈 수 있다. ## 현지 커뮤니티와 디지털 동료 찾기 - 여러 도시를 이동하면 외로움을 느끼기 쉬우므로 도착 직후 디지털 노마드 커뮤니티에 참여하는 것이 좋다. - Facebook의 디지털 노마드 그룹이나 여성 디지털 노마드 전용 커뮤니티를 활용할 수 있다. - 하노이, 치앙마이, 우붓은 양호한 Wi-Fi, 비교적 높은 생활 수준, 코워킹 스페이스와 카페가 많아 디지털 노마드에게 적합한 도시로 소개된다. - Roam이나 Remote Year처럼 전문가를 위한 체계적인 장기 체류 프로그램을 이용하는 방법도 있다. ## 시간대가 다른 고객과 신뢰 유지 - 고객과 지리적으로 멀어질수록 업무 진행 상황을 더 투명하게 공유해야 한다. - 한 사례에서는 매일 업무 내용을 이메일로 보고하고, 이틀에 한 번씩 정기 통화를 진행했다. - 정기적인 업데이트는 고객의 질문을 빠르게 해결하고, 디자이너가 팀의 중요한 구성원이라는 인식을 유지하는 데 도움이 된다. - 여행의 자유를 누리기 위해 시작한 원격 근무가 과도한 업무로 변하지 않도록 일과 여행의 균형도 지켜야 한다. 장기적으로 성공하려면 출국 전에 고객·재정·사업 등록·통신 환경을 준비하고, 여행 중에는 정기적인 보고와 명확한 기대치 조율을 습관화하는 것이 가장 중요하다.

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

피그마 프로토타이

Figma는 프로토타입에 **디졸브, 슬라이드, 푸시 전환 효과**를 추가해 디자인의 움직임과 사용감을 더 현실적으로 표현할 수 있게 했다. 이를 통해 디자이너와 개발자·마케터·고객 등 이해관계자가 정적인 화면뿐 아니라 앱의 실제 흐름과 감각까지 더 정확히 공유할 수 있다. 전환 시간과 이징을 조절하고 미리보기로 결과를 확인할 수 있어, 반복적인 커뮤니케이션과 수정도 줄일 수 있다는 것이 글의 결론이다. ## 전환 효과로 프로토타입의 완성도 향상 - 프레임 사이에 다음과 같은 전환 효과를 적용할 수 있다. - **Dissolve**: 한 화면이 다른 화면으로 자연스럽게 녹아드는 효과 - **Slide**: 한 프레임이 특정 방향으로 밀려나며 다음 프레임이 나타나는 효과 - **Push**: 다음 화면이 이전 화면을 밀어내며 전환되는 효과 - 애니메이션 지속 시간을 밀리초 단위로 설정할 수 있다. - 전환의 이징을 조절해 애니메이션이 시작이나 끝에서 더 빠르거나 느려지도록 만들 수 있다. - 툴바의 미리보기 상자에서 프레임 간 전환을 즉시 확인할 수 있다. - iOS 앱과 같은 자연스러운 화면 이동을 재현해 제품의 사용감을 더 잘 전달할 수 있다. ## 프로토타입이 필요한 이유 - 오늘날 제품 디자인은 디자이너만의 작업이 아니라 개발자, 마케터, 프로젝트 관리자 등 여러 역할의 협업으로 완성된다. - 고충실도 프로토타입은 제품이 개발되기 전에 화면과 사용자 흐름을 공유하는 공통 언어 역할을 한다. - 화면 사이의 애니메이션은 앱의 인상을 크게 바꾸므로, 이를 생략하면 이해관계자 사이에 반복적인 설명과 수정이 발생할 수 있다. - 전환 효과를 포함하면 정적인 목업만으로는 전달하기 어려운 제품의 분위기와 상호작용을 구체적으로 보여줄 수 있다. ## Figma 프로토타이핑의 장점 - **실시간으로 동기화되는 디자인** - 웹 기반 플랫폼이므로 디자인 프레임을 수정하면 프로토타입에도 자동으로 반영된다. - 디자인을 다시 내보내거나 프로토타입을 별도로 갱신할 필요가 없다. - **모바일 프레젠테이션** - Android와 iOS 스마트폰의 웹 브라우저에서 프로토타입을 탐색할 수 있다. - 고객 미팅에서 휴대폰으로 발표를 진행하거나, 참석자들이 각자의 노트북에서 디자인 흐름을 따라갈 수 있다. - 관찰 모드에서는 이해관계자가 발표자의 프로토타입을 함께 확인할 수 있다. - **컴포넌트와 프로토타이핑의 결합** - 컴포넌트에 한 번 내비게이션을 설정하면 모든 인스턴스에 해당 동작이 적용된다. - 예를 들어 공통 홈 버튼에 홈 화면 이동을 연결하면 여러 화면에서 동일한 동작을 반복 설정하지 않아도 된다. - 반복 요소가 많은 프로토타입을 빠르게 제작하고 수정할 수 있다. ## 사용자 피드백을 반영한 기능 확장 - 전환 기능은 Figma 2.0에서 프로토타이핑이 처음 공개된 이후 커뮤니티가 지속적으로 요청한 기능이었다. - Spectrum과 Twitter 등을 통한 사용자 피드백이 기능 개발에 반영되었다. - Figma는 앞으로도 소프트웨어 개발 과정에 참여하는 다양한 사람들의 요구를 충족하도록 프로토타이핑 기능을 확장하겠다고 밝혔다. 실무에서는 화면 연결만 구현하는 데 그치지 말고, 실제 제품의 전환 방향·속도·이징까지 함께 설정하는 것이 좋다. 특히 컴포넌트와 전환 효과를 조합하면 반복 작업을 줄이면서도 개발 전에 제품의 인터랙션을 더 정확하게 검증할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로토타이핑사용자 인터페이스+2