사용자 경험

165 개의 포스트

figma4분 읽기큐레이션 요약

디자인 스프린트 진행

디자인 스프린트는 복잡한 문제를 짧은 기간 안에 팀이 함께 해결하기 위한 방법론으로, 보통 5일 동안 진행된다. 이해, 정의, 스케치, 결정, 프로토타입, 검증의 여섯 단계를 거치며, 빠른 정렬과 사용자 테스트를 통해 아이디어의 실행 가능성을 확인한다. 성공적인 스프린트를 위해서는 진행 자체보다 사전 준비와 적절한 팀 구성이 중요하다. ## 디자인 스프린트의 목적과 구조 - 디자인, 프로토타이핑, 사용자 조사와 테스트를 결합해 큰 문제를 해결한다. - 제한된 기간과 명확한 목표·산출물을 설정해 팀이 공동의 방향에 빠르게 합의하도록 한다. - 일반적으로 다음 여섯 단계로 진행된다. - **Understand**: 문제와 사용자, 기존 데이터를 이해한다. - **Define**: 해결할 핵심 문제와 목표를 구체화한다. - **Sketch**: 다양한 해결 아이디어를 개별적으로 제안한다. - **Decide**: 가장 유망한 아이디어를 선택한다. - **Prototype**: 선택한 아이디어를 검증 가능한 형태로 만든다. - **Validate**: 실제 사용자에게 테스트해 가설을 확인한다. - 새 프로젝트의 시작, 일정이 촉박한 상황, 정체된 제품이나 팀을 다시 움직여야 할 때 활용할 수 있다. ## 구글에서 시작된 디자인 스프린트 - 구글은 조직 내 UX 문화와 디자인 리더십을 강화하기 위해 디자인 스프린트 방법론을 발전시켰다. - 전통적인 UX, IDEO, 스탠퍼드 d.school, 비즈니스 전략, 심리학의 사고방식과 프로세스를 바탕으로 한다. - 기본 프레임워크는 고정된 규칙이라기보다 조직의 문제와 일정에 맞게 수정할 수 있는 유연한 방법이다. ## 명확한 스프린트 브리프 작성 - 브리프에는 다음 내용을 포함해야 한다. - 해결할 문제와 목표 - 기대하는 산출물 - 일정과 진행 방식 - 프로젝트 배경 - 기존 사용자 조사와 관련 데이터 - 스프린트는 한 번에 하나의 큰 과제에 집중해야 한다. - “홈페이지를 더 구매하기 쉽게 만든다”보다 “전환율을 높이기 위해 특정 사용자 흐름을 재설계한다”처럼 답해야 할 질문을 하나로 명확히 표현하는 것이 좋다. - 이미 확보한 정보를 미리 제공하면 스프린트 중 자료를 찾느라 시간을 낭비하지 않을 수 있다. ## 적절한 팀 구성 - 참가자는 보통 5~7명으로 제한한다. - 인원이 많다면 같은 문제를 다루는 소규모 그룹으로 나누는 것이 좋다. - 스프린트 이후 실제 실행을 담당할 사람을 반드시 포함해야 한다. - 일반적으로 다음 역할이 참여한다. - UX 디자이너 - 사용자 연구자 - 제품 관리자 - 개발자 - 주요 의사결정권자 또는 리더십 구성원 - 다양한 직무의 참여는 더 많은 아이디어와 여러 형태의 프로토타입을 만드는 데 도움이 된다. ## 목적에 맞는 일정 설계 - 기본 일정은 여섯 단계의 순서를 따른다. - 팀이 이미 문제 영역을 충분히 알고 있다면 **Understand** 단계에 시간을 적게 배정하고 프로토타이핑에 더 투자할 수 있다. - 팀의 지식 수준, 목표, 전체 일정에 따라 단계별 시간을 조정해야 한다. - 스프린트 기간만큼의 준비 시간을 별도로 확보하는 것이 권장된다. 예를 들어 5일 스프린트라면 준비에도 충분한 시간을 투입해야 한다. ## 시각 자료와 사전 정보 준비 - 현재 웹사이트나 제품 화면의 스크린샷을 준비한다. - 참고할 만한 영감과 경쟁 제품 자료를 수집한다. - 데이터, 기존 사용자 조사, 제품 사용 현황과 관련된 요약 자료를 한곳에 정리한다. - 발표 자료나 보드 등 팀이 진행 중 빠르게 확인할 수 있는 시각 자료로 제공한다. - 사전에 충분한 사용자 조사를 수행하면 팀이 근거 없이 아이디어를 만드는 일을 줄일 수 있다. - 기존 데이터는 사용자가 현재 제품을 어떻게 이용하는지, 어떤 행동 변화를 유도해야 하는지 파악하는 데 활용된다. ## 전문가 발표와 라이트닝 토크 - 외부 전문가나 조직 내 관련 담당자를 초대해 새로운 관점을 제공할 수 있다. - 구글의 방식에서는 이를 **라이트닝 토크**라고 하며, 보통 10~15분의 짧은 발표로 진행한다. - 발표 주제의 예시는 다음과 같다. - 고객지원팀의 고객 조사 결과 - 분석 담당자의 경쟁사 분석 - 제품 관리자의 제품 성과 검토 - 발표자는 미리 섭외해야 하며, 직접 참석이 어렵다면 전화나 화상회의로 참여시킬 수 있다. ## 창의성을 지원하는 환경 조성 - 밝고 참가자가 공간을 자유롭게 바꿀 수 있는 장소를 선택한다. - 가구를 이동하거나 벽면 화이트보드를 활용할 수 있는 공간이 유리하다. - 일주일 내내 같은 장소에 머무르기보다 카페나 공원 등으로 장소를 바꾸는 것도 새로운 사고를 촉진할 수 있다. - 아이스브레이커를 활용하면 참가자들이 서로 편안해지고 창의적인 사고를 시작하는 데 도움이 된다. - 스프린트에 필요한 문구류와 기타 준비물을 미리 확보해야 한다. ## 실용적인 적용 방법 디자인 스프린트를 시작하기 전, 해결할 질문을 하나로 좁히고 필요한 데이터와 발표자를 먼저 준비하는 것이 좋다. 또한 아이디어를 내는 사람뿐 아니라 스프린트 결과를 실제로 구현할 담당자까지 참여시켜야 하며, 정해진 여섯 단계를 조직의 상황에 맞게 조정하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

플러그인 비하인드

재키 추이는 Microsoft의 UX 디자이너이자 Figma API와 플러그인 베타 초기 사용자로, 디자이너의 작업을 더 빠르고 효율적으로 만드는 도구를 개발해왔다. 그는 접근성 기능을 만들기 위한 해커톤에서 Figma API를 접한 뒤 플러그인 개발에 매료되었고, 개인 프로젝트를 커뮤니티용 플랫폼으로 확장했다. 이 인터뷰는 디자이너와 개발자의 경계가 가까워지는 흐름과 Figma 플러그인 생태계의 가능성을 보여준다. ## 디자이너이자 도구 제작자가 된 배경 - 어린 시절 LEGO로 무언가를 만들고 발명하는 것을 좋아했던 경험이 UX 디자인과 개발에 대한 관심으로 이어졌다. - UX 디자이너로 일하면서 코딩을 익혀 자신이 설계한 제품을 직접 구현할 수 있게 되었다. - 다른 사람들이 만든 작업을 관찰하고, 서로 다른 아이디어를 연결해 자신의 프로젝트에 적용하는 방식으로 영감을 얻는다. - 디자인과 개발을 함께 수행하며 아이디어가 실제 결과물로 완성되는 과정을 중요하게 여긴다. ## Figma API를 접한 계기 - 2018년 Microsoft OneWeek Hackathon에서 팀원들과 디자인 도구에 접근성 기능을 추가하는 프로젝트를 진행했다. - Figma가 웹 기반으로 만들어졌다는 점에 흥미를 느껴 Figma 플랫폼과 API를 탐색하기 시작했다. - API를 이용해 사용자 동작을 프로그래밍 방식으로 시뮬레이션할 수 있다는 사실을 발견하면서 본격적으로 플러그인 개발에 빠져들었다. - 기능을 하나씩 발견할 때마다 새로운 가능성이 열린다고 느꼈으며, 공식 API의 사용 편의성과 안정성을 높이 평가했다. ## 개발한 Figma 플러그인 - **Find and Replace** - Figma 커뮤니티를 위해 만든 대표적인 플러그인이다. - 디자인 파일 안의 텍스트나 요소를 찾아 일괄적으로 변경하는 작업을 지원한다. - **Paste to Fill** - 복사한 콘텐츠를 디자인 요소의 채우기 영역에 적용하는 도구다. - **Button Resizer** - 버튼의 크기를 보다 쉽게 조정할 수 있도록 돕는다. - 이외에도 Microsoft의 업무와 일반 Figma 사용자 모두에게 유용한 다양한 플러그인을 제작했다. ## Figma Plus로 확장된 개인 프로젝트 - 초기에는 브라우저에서만 동작하는 Chrome 확장 프로그램 형태로 플러그인을 만들었다. - 커뮤니티의 긍정적인 반응을 통해 Figma 데스크톱 앱에서도 사용할 수 있는 도구에 대한 수요를 확인했다. - Mirko Santangelo, Ahmad Al Haddad와 협업해 자신들이 알고 있던 Figma API 지식을 통합하는 플랫폼을 개발했다. - 작은 프로젝트로 시작했지만 다음 요소를 포함한 완전한 시스템으로 발전했다. - 자체 API - 플러그인 스토어 - 플러그인 게시 및 배포 프로세스 - Figma가 공식적으로 플러그인 베타를 시작하자 팀도 베타 프로그램에 참여했다. - 추이는 여러 플러그인 중에서도 역설적으로 이 대규모 시스템 프로젝트인 **Figma Plus**를 가장 자랑스럽게 여긴다. ## 디자인과 개발의 미래 - 앞으로 5년 동안 디자이너와 개발자는 업무 과정에서 더욱 긴밀하게 협업하게 될 것으로 전망한다. - 미래의 디자인 도구는 현재 존재하는 디자인과 개발 사이의 간극을 줄일 것이다. - 디자이너가 기본적인 코딩 역량을 갖추고 직접 도구를 제작하는 흐름이 이런 변화를 촉진할 수 있다. ## Figma 커뮤니티를 위한 개발 - Microsoft에서 Figma가 주요 디자인 도구로 자리 잡았기 때문에, 팀의 업무 흐름을 개선하는 플랫폼 위에서 개발하는 것이 자연스러운 선택이었다. - 내부 업무용 도구를 만드는 데서 멈추지 않고, 더 넓은 Figma 커뮤니티에 공개해 다른 사용자에게도 혜택을 주려 했다. - 2019년 8월 1일부터 추이의 플러그인들이 Figma 커뮤니티에 공개될 예정이었다. 디자이너가 자신의 반복 작업과 불편을 직접 관찰하고 Figma API로 해결책을 구현하면, 업무 효율을 높이는 동시에 커뮤니티 전체에 기여할 수 있다. 이 사례는 디자인 도구를 단순히 사용하는 것을 넘어, 필요한 기능을 직접 만들고 공유하는 방식이 Figma 생태계를 확장한다는 점을 보여준다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

플러그인 비하인드

티파니 첸은 Microsoft의 접근성과 포용성 팀에서 일하며, Figma 플러그인으로 접근성 주석 작성 과정을 자동화하고 있다. 그녀는 플러그인이 디자이너가 필요한 기능을 직접 만들 수 있게 해 주며, 접근성 향상과 디자인 진입 장벽 완화에 기여한다고 본다. 또한 다양한 전공과 배경을 가진 사람들이 디자인에 참여할수록 더 풍부하고 포용적인 결과를 만들 수 있다고 강조한다. ## 접근성 주석 작업을 자동화하는 플러그인 - 티파니가 개발 중인 플러그인은 **접근성 중심의 주석(annotation) 도구**다. - 디자인에 접근성 관련 정보를 표시하는 수작업을 자동화해 반복적인 작업을 줄이는 것을 목표로 한다. - Microsoft의 내부·외부 접근성 강화 노력과 맞닿아 있으며, 포용적인 제품 경험에 대한 인식을 높이려는 목적이 있다. - 이 프로젝트는 티파니가 처음 만든 Figma 디자인 플러그인이기도 하다. ## Figma 플러그인을 선택한 이유 - 새로운 플러그인 시스템과 Figma API가 사용하기 쉬워 설정이나 디버깅보다 실제 제작에 더 많은 시간을 쓸 수 있었다. - 기존 디자인 도구가 모든 디자이너의 요구를 충족할 수는 없지만, 플러그인을 통해 필요한 기능을 직접 만들 수 있다. - 다른 개발자가 기능을 추가해 주기를 기다리는 대신, 자신과 커뮤니티에 필요한 도구를 직접 제안하고 구현할 수 있다. - Figma 커뮤니티가 친절하고 협력적이라는 점도 개발 동기가 됐다. ## 다양한 배경이 디자인에 주는 가치 - 티파니는 심리학, 인류학, 국제관계, 컴퓨터과학 등 비전통적인 배경을 가진 사람들이 디자인에 진입하는 것을 돕고 싶어 한다. - 다양한 경험과 지식은 디자인 커뮤니티에 새로운 관점과 문제 해결 방식을 제공한다. - 컴퓨터과학 배경 덕분에 디자인을 평가하고 구현할 때 **기술적 실현 가능성**과 **새로운 시도** 사이에서 균형을 잡는 편이라고 설명한다. - 디자인이 특정 전공자만의 영역이 되지 않도록 진입 장벽을 낮추는 것이 중요하다고 본다. ## 기술과 창작을 결합한 작업 - 가장 자랑스러운 프로젝트로 사람들에게 “어릴 때 어떤 거짓말을 들었나요?” 같은 질문을 던지고, 그 답변을 이야기와 일러스트로 발전시킨 작업을 꼽았다. - 참여자들의 경험을 시각화해 아트 디렉션 웹사이트로 제작했다. - 레이어링과 패럴랙스 효과를 활용해 이야기를 입체적으로 표현했다. - 이 프로젝트를 통해 기술적 역량과 창의적 작업을 결합하는 데 흥미를 느끼게 됐다. ## 사회적 영향을 고려하는 기업관 - 티파니는 B Corporation의 원칙에 관심을 보였다. - B Corp 인증 기업은 의사결정 시 노동자, 고객, 공급업체, 환경에 미치는 영향을 함께 고려한다. - Ben & Jerry’s, Kickstarter, Patagonia 등이 대표적인 B Corp 사례로 언급된다. - 이는 제품과 기업 활동이 수익뿐 아니라 사회와 환경에 미치는 영향까지 책임져야 한다는 관점과 연결된다. ## 더 포용적인 디자인 생태계 - 디자인 업계에는 모든 사람을 포괄하는 제품과 경험에 대한 인식이 더 필요하다. - 동시에 디자이너가 되려는 사람들의 진입 장벽도 낮아져야 한다. - 온라인에 공개된 학습 자료가 늘면서 이러한 장벽은 점차 낮아지고 있다. - 단순하면서도 강력한 도구인 Figma와 플러그인 생태계가 이 변화를 더욱 빠르게 만들 수 있다고 기대한다. 접근성을 별도의 사후 작업으로 다루기보다 디자인 과정에 자연스럽게 통합하려면, 반복적인 접근성 검토를 자동화하는 도구를 적극 활용하는 것이 좋다. 또한 디자인 팀은 다양한 전공과 배경의 구성원이 참여할 수 있도록 학습 자료와 제작 도구를 개방하는 방향을 고려할 필요가 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma 채용 담당자가 전하는

제품 디자인 포트폴리오는 자신의 경력을 모두 보여주는 자료가 아니라, 지원하는 역할에 맞는 역량을 짧은 시간 안에 전달하는 도구다. 채용 담당자나 디자인 리더는 포트폴리오를 몇 분 또는 몇 초 만에 훑을 수 있으므로, 대상 독자의 관점에서 정보를 선별하고 구조화해야 한다. 랜딩 페이지에서는 프로젝트를 일관되게 배치하고 실제 작업까지 한 번의 클릭으로 도달하게 하며, 프로젝트는 목표 직무와 산업에 맞춰 선택하는 것이 핵심이다. ## 채용 담당자의 관점에서 목표 설정 - 포트폴리오를 주로 검토하는 사람은 디자인 매니저, 크리에이티브 디렉터, 디자인 총괄, 디자인 부문 VP 등이다. - 이들은 회의와 인터뷰 사이에 제한된 시간으로 포트폴리오를 검토한다. - 짧은 시간 안에 다음 정보를 파악하려 한다. - 어떤 유형의 디자인을 하는지 - 어떤 역량과 관심사를 가졌는지 - 지원 직무에 적합한 경험이 있는지 - 디자인 문제를 어떻게 해결하는지 - 전반적인 디자인 능력이 어떤지 - 따라서 모든 경력을 빠짐없이 보여주기보다, 지원하는 역할과 가장 관련 있는 정보를 우선적으로 노출해야 한다. ## 랜딩 페이지: 프로젝트를 쉽게 파악하게 만들기 - 프로젝트 썸네일은 일관된 시스템으로 구성해야 한다. - 회사 로고를 보여준다면 로고 크기를 동일하게 맞춘다. - 작업 화면을 보여준다면 배경색, 그림자, 이미지 스타일 등을 통일한다. - 각 프로젝트에는 회사명, 담당 역할, 작업 매체 등 핵심 정보를 일정한 형식으로 표시한다. - 동일한 크기와 정돈된 디자인의 썸네일은 채용 담당자가 포트폴리오 전체를 더 쉽게 훑도록 돕는다. - 썸네일마다 차이를 주고 싶다면 우연히 어긋난 결과가 아니라, 특정 프로젝트의 중요도 등을 반영한 의도적인 레이아웃이어야 한다. ## 작업까지의 클릭 수 줄이기 - 방문자가 ‘소개 페이지 → 작업 메뉴 → 프로젝트 선택’처럼 여러 단계를 거치지 않도록 한다. - 랜딩 페이지에서 프로젝트 개요를 바로 볼 수 있게 구성하고, 실제 작업까지 한 번의 클릭으로 접근하게 만드는 것이 좋다. - 채용 담당자가 정보를 찾아 헤매도록 만들지 말고, 첫 화면에서 작업의 범위와 성격을 즉시 이해할 수 있어야 한다. ## 지원 목표에 맞는 프로젝트 선택 - 프로젝트는 자신의 전체 경력보다 희망하는 직무와 커리어 방향을 기준으로 선별한다. - 모바일, 웹, VR 중 원하는 분야의 경험을 강조한다. - 이커머스에서 핀테크나 헬스케어로 전환하고 싶다면 관련성이 높은 작업을 앞세운다. - 모든 프로젝트를 한 포트폴리오에 담아 경력의 폭을 보여주려는 방식은 오히려 핵심 메시지를 흐릴 수 있다. - 오래된 유명 브랜드 작업은 브랜드 이름만으로 포함하지 않는다. - 현재의 자신을 잘 보여주지 못하는 작업은 이력서에서 경력의 폭을 설명하는 데 활용한다. - 다만 널리 알려진 대표 작업처럼 현재도 의미가 큰 결과물은 예외적으로 강조할 수 있다. - 희망 분야의 실무 경험이 부족하다면 사이드 프로젝트로 해당 분야의 결과물을 만든다. - 예를 들어 모바일 중심 경력으로 웹 디자인 직무를 원한다면 웹을 우선한 프로젝트를 추가한다. - 인쇄 디자인에서 UX/UI로, 비주얼 디자인에서 UX 리서치로 이동하는 경우에도 같은 전략을 적용할 수 있다. - 가장 뛰어난 작업이 지원 분야의 산업이나 매체와 다르더라도, 단순히 그 이유만으로 포트폴리오 전체를 구성해서는 안 된다. 지원 목표를 보여줄 수 있는 관련 작업을 새로 만들거나 기존 작업을 적절히 재구성하는 것이 바람직하다. ## 실용적인 적용 방법 지원 직무를 먼저 한 문장으로 정한 뒤, 랜딩 페이지에는 그 직무와 가장 관련 있는 프로젝트를 일관된 썸네일 형식으로 배치하는 것이 좋다. 각 프로젝트에는 자신의 역할과 작업 매체를 명확히 적고, 방문자가 한 번의 클릭으로 핵심 결과물에 도달하도록 구성하면 채용 담당자의 제한된 검토 시간을 효과적으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

GIF로 피그마 프로토타

Figma는 2019년부터 프로토타입에서 애니메이션 GIF를 재생할 수 있도록 지원했다. 파일에 GIF를 추가한 뒤 **Present**를 누르면 움직임이 재생되며, 모션 디자인·영상·미세한 인터랙션을 실제 제품처럼 표현할 수 있다. 편집 화면에서는 GIF가 정지 이미지로 보이지만, 원하는 프레임을 커버 이미지로 지정해 여러 GIF를 쉽게 구분할 수 있다. ## 프로토타입에서 GIF 사용하기 - Figma 파일에 GIF를 이미지처럼 추가한다. - **Present** 모드에서 GIF가 자동으로 애니메이션을 재생한다. - GIF는 편집 화면에서는 정지 이미지로 표시되고, 프로토타입에서만 움직인다. - GIF 제작 도구로 ScreenFlow, LICEcap, Principle, After Effects 등이 소개됐다. ## 커버 프레임 지정 - GIF 속성 패널의 GIF 모달을 열어 원하는 프레임으로 이동할 수 있다. - 선택한 프레임은 편집 화면에 표시되는 대표 이미지가 된다. - 첫 프레임이 비어 있거나, 비슷한 시작 화면을 가진 GIF가 여러 개일 때 유용하다. ## 모바일 프로토타입 개선 - 모바일 프로토타입에는 OS에 맞춘 관성 스크롤이 적용됐다. - 새로운 터치 커서가 추가되어 실제 모바일 기기와 비슷한 조작감을 제공한다. - GIF 기능과 함께 모바일 인터랙션의 사실성을 높이는 업데이트다. ## GIF를 활용할 수 있는 디자인 사례 - **Uber**: 애니메이션 스플래시 화면을 로딩 상태와 브랜드 인사말로 활용한다. - **Slack**: 로딩 중 제품 팁이나 재미있는 문구를 보여준다. - **Material Design**: 선형·원형 진행 표시기로 작업 상태를 단순하게 전달한다. - **Headspace**: 온보딩 과정에서 일러스트 애니메이션으로 기능과 사용 맥락을 설명한다. - **Hyperlapse**: 동영상 촬영 앱의 사용 시나리오를 온보딩 영상으로 소개한다. - **Mapbox**: 웹사이트 히어로 영역에서 위치 기술을 설명하는 반복 영상을 사용한다. - **Mailchimp**: 일러스트에 미세한 움직임을 더해 화면에 생동감과 질감을 부여한다. ## 실용적인 활용 방향 GIF는 복잡한 동영상 구현 없이도 로딩 상태, 온보딩, 진행 표시, 제품 소개, 일러스트 애니메이션을 프로토타입에 포함하는 간단한 방법이다. 다만 편집 화면에서는 정지 이미지로 보이므로 의미 있는 커버 프레임을 설정하고, 실제 사용 환경을 확인하려면 반드시 **Present** 모드에서 테스트하는 것이 좋다.

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

피그마에서 프로토타 (새 탭에서 열림)

피그마를 활용한 프로토타이핑은 사용자 테스트와 이해관계자 소통의 핵심이지만, 복잡한 연결 과정이 작업 속도를 늦추기도 합니다. 이 글은 마스터 컴포넌트 활용, 스크롤 관리, 지연 효과 등을 통해 프로토타이핑 워크플로우를 획기적으로 개선하고 효율성을 높이는 다섯 가지 실무 팁을 제시합니다. 이러한 기법들을 숙달하면 더 사실적인 프로토타입을 빠르게 제작하여 협업의 질을 높일 수 있습니다. ### 마스터 컴포넌트를 활용한 자동 연결 * 탭바나 햄버거 메뉴처럼 여러 화면에 반복되는 요소를 마스터 컴포넌트로 먼저 제작합니다. * 마스터 컴포넌트 내부에서 각 메뉴 항목과 대상 프레임을 미리 연결하면, 이후 생성되는 모든 인스턴스에 연결 정보가 자동으로 상속되어 반복적인 링크 작업을 생략할 수 있습니다. * 외부 팀 라이브러리의 컴포넌트를 사용할 때는 해당 인스턴스를 다시 로컬 마스터 컴포넌트로 감싸는 방식으로 연결 정보를 유지하며 관리할 수 있습니다. ### 컴포넌트를 활용한 스크롤 영역 관리 * 상단 바나 하단 바가 고정된 긴 화면을 디자인할 때, 스크롤되는 콘텐츠 자체를 별도의 컴포넌트로 구성합니다. * 콘텐츠 컴포넌트에 'Clip content'를 적용하고 프로토타이핑 설정에서 'Overflow Behavior'를 활성화하면, 다양한 기기 사이즈에서 초기에 노출되는 영역(Viewport)을 직관적으로 확인할 수 있습니다. * 이 방식을 통해 기기별로 잘리는 콘텐츠의 위치를 파악하고, 스크롤 내용을 한 곳에서 효율적으로 수정할 수 있습니다. ### 시간 지연과 오버레이로 현실감 구현 * 사용자 상호작용이 너무 즉각적이면 부자연스러울 수 있으므로 'After delay' 트리거를 사용하여 의도적인 시간 지연을 추가합니다. * 지연 기능을 오버레이(Overlay) 및 오버레이 교체(Swap overlay) 기능과 결합하면, 버튼 클릭 후 로딩 화면이 나타났다가 성공 메시지로 바뀌는 등의 복합적인 연출이 가능합니다. * 이러한 디테일은 프로토타입에 사실성을 더해 사용자가 혼란을 느끼지 않고 자연스럽게 흐름을 따라오게 돕습니다. ### 목차 페이지를 활용한 다중 흐름 관리 * 피그마 프로토타입 URL은 페이지 단위로 생성되지만, 첫 화면을 '목차(Table of Contents)' 프레임으로 구성하여 이를 보완할 수 있습니다. * 목차의 각 항목을 동일 페이지 내의 서로 다른 사용자 흐름(User Flow) 시작점에 연결하면, 하나의 링크만으로도 여러 디자인 시나리오를 공유할 수 있습니다. * 이는 이해관계자에게 여러 옵션을 한꺼번에 제안해야 할 때 특히 유용합니다. ### 관찰 모드를 통한 원격 협업 및 테스트 * 피그마의 '관찰 모드(Observation Mode)'는 디자인 에디터뿐만 아니라 프로토타입 실행 화면에서도 지원됩니다. * 화면 우측 상단의 협업자 아바타를 클릭하면 상대방이 프로토타입의 어느 부분을 클릭하고 어떻게 이동하는지 실시간으로 추적할 수 있습니다. * 이 기능은 원격 사용자 테스트를 수행하여 사용자의 행동 패턴을 관찰하거나, 미팅에서 디자인 결과물을 시연할 때 모든 참여자가 동일한 맥락을 유지하도록 돕습니다. 효율적인 프로토타이핑은 디자인 의도를 정확하게 전달하고 피드백 루프를 단축하는 데 필수적입니다. 위에서 소개한 컴포넌트 중심의 설계와 피그마의 고급 기능을 워크플로우에 녹여낸다면, 단순 반복 작업에 드는 시간을 줄이고 사용자 경험의 본질을 다듬는 데 더 집중할 수 있을 것입니다.

figma4분 읽기큐레이션 요약

Figma UI 개편:

Figma는 기능 구조를 크게 바꾸기보다 타이포그래피, 레이아웃, 색상, 아이콘 등 UI 표면을 다듬는 방식으로 시각적 리프레시를 진행했다. 기존 UI가 제품 성장에 따라 일관성을 잃고 한계에 부딪혔기 때문에, 전사적 브레인스토밍과 이슈 통합, 정성·정량 조사를 거쳐 변경 범위를 결정했다. 핵심은 모든 사용자를 만족시키려 하기보다 문제를 체계적으로 수집하고, 중요한 개선점에 집중하는 것이었다. ## 리디자인이 필요해진 배경 - Figma의 UI는 제품과 기능이 성장하면서 점점 일관성을 잃었다. - 기존 컴포넌트로 새로운 기능을 표현하기 어려워질 때마다 팀이 임시 컴포넌트와 맞춤형 해결책을 만들었다. - 그 결과 다음과 같은 문제가 누적됐다. - 서로 다른 형태의 테이블, 버튼, 입력 컨트롤 - UI 곳곳에 흩어진 여러 색조의 회색·빨강·파랑 - 기능마다 다른 알림과 대화상자 처리 방식 - 가독성, 여백, 아이콘 체계의 불일치 - 마지막으로 UI 전체를 검토했을 때는 아직 Multiplayer나 Components 같은 핵심 기능이 없었다. - 즉, 기존 UI의 기반이 현재의 Figma를 충분히 반영하지 못하게 된 것이 리프레시의 주요 배경이었다. ## 표면적 변화에 집중한 전략 - 목표는 사용자가 큰 혼란 없이 새 UI를 받아들이도록 만드는 것이었다. - 정보 구조나 제품의 기본 동작을 재설계하기보다는 다음과 같은 시각적 요소를 중심으로 개선했다. - 타이포그래피 - 레이아웃 - 색상 - 아이콘 - 컴포넌트의 시각적 일관성 - 출시 전 수개월 동안 정성적·정량적 조사를 진행했다. - 세부 변경 사항마다 여러 팀이 깊이 논의해 최종 결과에 동의하도록 했다. - 특히 디자이너는 시각적 변화에 민감하므로, 리디자인이 모든 사람에게 동일하게 환영받을 수 없다는 점도 고려했다. ## 1단계: 제한 없이 문제 수집하기 - 전체 디자인 팀이 참여하는 2시간 브레인스토밍 세션을 열었다. - 팀원들은 실제로 Figma를 사용하면서 제품의 구석구석을 살펴봤다. - 발견한 내용을 다음 방식으로 기록했다. - UI의 문제점과 불편한 점 - 마음에 드는 부분 - 관련 스크린샷 - 특정 문제가 미치는 영향에 대한 메모 - 모든 결과물을 Figma 파일에 모아 공동으로 검토했다. - 팀원들이 강하게 반응한 문제, 즉 모두가 “이건 심각하다”고 느낀 항목을 별도로 표시했다. - 이 반응은 어떤 문제가 사용자 경험에 큰 영향을 줄 가능성이 있는지 판단하는 초기 신호로 활용됐다. - 브레인스토밍 직후 결론을 내리지 않고 며칠간 거리를 둔 것도 중요했다. 시간이 지나면서 문제의 우선순위와 구성원들의 의견이 자연스럽게 바뀌었기 때문이다. ## 2단계: 문제를 통합하고 범주화하기 - 후속 회의에서 각 문제를 다시 검토하며 처음의 판단을 재평가했다. - 일부 문제는 생각보다 중요하지 않다고 판단했고, 다른 문제는 해결 필요성을 더 강하게 주장할 수 있도록 논거를 보완했다. - 긴 문제 목록을 팀원들에게 나누어 전달하고, 각자가 이를 포스트잇 형태의 짧은 항목으로 재작성했다. - 이 과정에서는 개별적인 증상을 그대로 옮기기보다 공통된 근본 문제로 추상화했다. - 예: “특정 화면의 알림 모양이 다르다” - 통합된 표현: “제품 전체의 알림 처리 시스템이 필요하다” - 비슷한 포스트잇을 함께 묶어 반복적으로 나타나는 주제를 확인했다. - 그 결과 다음과 같은 범주가 도출됐다. - 아이콘, 타이포그래피, 가독성, 색상 - 대화상자, 툴바, 말투 - 에디터와 파일 브라우저 - 모드, 팀 페이지, 속성 사이드바 - 컴포넌트, 레이어, 히스토리 - 공유, 퍼블리싱, 내보내기 - 포스트잇의 반복은 단순한 중복이 아니라 중요한 문제가 여러 방식으로 나타나고 있다는 신호가 되었다. - 다만 범주를 다시 “시각적 문제에서 기초 구조적 문제까지”라는 축으로 정렬하려 한 것은 지나치게 복잡한 접근이었다. ## 범주화 과정에서 얻은 교훈 - 문제를 조직화할 때 지나치게 추상적인 기준을 만들면 오히려 판단이 어려워진다. - “제품의 개성”처럼 거의 모든 문제를 포함할 수 있는 범주는 유용하지 않다. - 반대로 특정 대화상자 하나처럼 지나치게 좁은 범주도 전체적인 개선 방향을 잡는 데 적합하지 않다. - 가장 좋은 범주는 서로 비슷한 문제를 묶으면서도, 실제 개선 작업으로 이어질 수 있을 만큼 구체적이어야 한다. - 완벽한 분류 체계를 만드는 것보다 중요한 문제의 신호를 잡음에서 분리하는 것이 우선이다. ## 실무에 적용할 때의 추천 - 리디자인을 시작할 때 바로 해결책을 만들기보다, 먼저 팀 전체가 제품을 직접 사용하며 문제를 폭넓게 수집한다. - 각 문제를 개별 사례가 아닌 반복되는 시스템적 문제로 재정의한다. - 브레인스토밍 직후 결론을 확정하지 말고 일정한 숙고 시간을 둔다. - 범주화는 단순하고 이해하기 쉽게 유지하며, 지나치게 추상적이거나 복잡한 분류 축은 피하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Bulb, 디자인 시스템 Solar

Bulb는 여러 제품의 디자인·코드베이스·패턴이 서로 달랐던 문제를 해결하기 위해 Figma로 디자인 시스템 ‘Solar’를 구축했다. Figma의 브라우저 기반 협업과 팀 라이브러리를 활용해 디자이너뿐 아니라 개발자, 연구자, 콘텐츠 작성자, 이해관계자까지 디자인 과정에 참여하도록 만들었다. 핵심 전략은 제품 전반을 조사한 뒤 디자인 원칙을 세우고, 작고 단순한 컴포넌트와 패턴부터 점진적으로 표준화하는 것이었다. ## Bulb의 성장과 디자인 조직의 과제 - 영국의 친환경 에너지 기업 Bulb는 18개월 동안 2,000% 성장했다. - 디자인팀은 13명 규모로, 여러 제품 그룹에서 엔지니어·PM·리서처·콘텐츠 작성자와 협업했다. - 기존 5~6개 제품은 서로 다른 에이전시가 제작해 다음 문제가 있었다. - 제품마다 다른 코드베이스 사용 - 버튼, 체크박스, 드롭다운 등 디자인 패턴의 불일치 - 시각적 브랜드는 통일되어도 실제 사용 경험은 일관되지 않음 - 새롭게 구성된 디자인팀은 디자인 시스템과 이를 지원할 도구를 처음부터 설계할 수 있었다. ## Figma를 통한 개방적인 협업 - Bulb의 조직 문화는 사업 부문 간 협업과 투명성을 중시했으며, 디자인 도구도 이러한 문화를 지원해야 했다. - 프로젝트별 ‘팟(pod)’에 디자이너, 리서처, 콘텐츠 작성자, 개발자가 함께 참여했다. - Figma에서는 디자이너의 별도 허가 없이도 다른 직군이 파일을 열어 다음 작업을 수행할 수 있었다. - 디자인에 의견과 제안 남기기 - 최신 작업 내용 확인 - 아이디어 스케치와 브레인스토밍 - 프로토타입 제작 및 검토 - 개발자와 디자이너가 설계 과정 전반에서 함께 논의하며 가이드라인과 품질 기준을 확인할 수 있었다. - 비디자이너에게도 복잡하거나 위협적인 도구가 아니어서 사용자 리서처가 디자이너와 직접 아이디어를 발전시키기 쉬웠다. ## Solar 디자인 시스템의 구축 과정 - 목표는 여러 제품에서 일관된 디자인을 보장하는 ‘단일 진실 공급원(single source of truth)’을 만드는 것이었다. - Figma 팀 라이브러리를 활용하면 마스터 컴포넌트를 수정했을 때 이를 사용하는 여러 디자인에 변경 사항이 동기화됐다. - 모든 파일을 브라우저에서 접근할 수 있어 빠르게 움직이는 팀에 적합했다. - 구축 초기에는 Bulb의 각 제품 페이지를 스크린샷으로 수집해 Figma에 시각적 사이트맵을 만들었다. - 이 사이트맵을 통해 제품별 차이와 불일치를 한눈에 파악했다. - 여러 직군이 참여해 디자인 원칙을 정의하고, 이를 기준으로 컴포넌트와 디자인 패턴을 정리했다. - 버튼·체크박스·드롭다운처럼 여러 버전이 존재하던 요소를 검토해 더 단순하고 견고한 패턴을 선택했다. - 정리한 패턴은 8개 제품에 단계적으로 적용됐다. ## 작고 단순하게 유지하는 원칙 - 디자인 시스템은 처음부터 모든 상황을 포괄하려 하기보다 작은 범위에서 시작해야 한다. - Solar는 다음과 같이 복잡도를 의도적으로 낮췄다. - 제한된 색상 팔레트 - 적은 수의 디자인 패턴 - 관리하기 쉬운 단순한 구조 - 시스템이 복잡해질수록 유지보수와 운영이 어려워지므로, 필요한 요소만 포함하고 지속적으로 단순화하는 것이 중요하다. - 디자인 시스템을 여러 직군이 함께 만들면 실제 구현과 사용 맥락을 반영한 표준을 정립할 수 있다. Bulb의 사례는 디자인 시스템을 단순한 UI 컴포넌트 모음이 아니라, 디자인·개발·리서치·콘텐츠가 함께 일하는 협업 기반으로 구축해야 한다는 점을 보여준다. 먼저 제품 간 불일치를 시각화하고, 명확한 원칙을 정한 뒤, 작은 패턴부터 라이브러리화해 점진적으로 확장하는 접근이 실용적이다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

Figma 디자인 팀을 구축한 방법

Figma는 소규모 디자인팀을 빠르게 확장하면서도 채용 기준과 팀 문화를 체계적으로 정립하는 데 집중했다. 채용 역량을 명확히 정의하고, 인터뷰 피드백을 표준화하며, 채용 담당자를 디자인팀에 밀접하게 참여시킨 결과 1년 만에 1명 중심의 팀을 8명 규모로 성장시켰다. 글은 디자인을 공개적으로 수행한다는 Figma의 철학과 팀 구축 과정을 공유한다. ## 빠른 성장 속에서도 신중한 팀 확장 - 1년 전 Figma에는 핵심 제품 디자이너가 한 명뿐이었고, 일부 구성원이 파트타임으로 기능 개발을 지원했다. - 엔지니어 수가 늘면서 디자인 수요를 따라가기 어려웠지만, 초기 소규모 팀에서는 새 구성원 한 명이 업무 방식과 문화에 큰 영향을 미친다고 판단했다. - 1년 뒤 디자이너 8명으로 성장했고, 협업 크리틱과 명확한 목표·담당 영역을 갖춘 팀의 기반을 마련했다. - 내부 문화를 먼저 투명하게 정비한 뒤, 그 방법을 외부 디자인 커뮤니티와 공유하기로 했다. ## 채용 기준을 학습·분석·발전시키기 Figma는 Joel Califa의 디자인팀 구축 강연에서 얻은 방법을 바탕으로 채용 프로세스를 정리했다. - **Learn** - 다양한 디자인 직무 기술서를 검토한다. - 디자인팀을 구축한 리더들에게 조언을 구한다. - 팀에 필요한 기술과 태도를 폭넓게 파악한다. - **Analyze** - 필요한 역량을 종합적으로 목록화한다. - 회사 전체에 필요한 역량, 디자인팀이 책임져야 할 역량, 모든 디자이너의 기본 역량으로 세분화한다. - 실제로 필요한 기준과 있으면 좋은 기준을 구분한다. - **Evolve** - 팀에 새롭게 생긴 역량 공백과 변화한 회사 요구사항을 반영한다. - 가능하다면 외부 채용보다 내부 성장을 통해 역량을 보완한다. ## 역할 기대치와 문화적 적합성의 명문화 - 팀원들이 각자 다음 디자이너에게 원하는 조건을 작성한 뒤, Figma에서 함께 통합하며 합의점을 찾았다. - 모든 것을 잘하는 디자이너는 드물기 때문에, 반드시 필요한 역량과 타협 가능한 조건을 구분하는 데 초점을 맞췄다. - 제품 디자이너의 핵심 역량뿐 아니라 Figma의 가치인 **대담함(Be Bold), 포용성(Be Inclusive), 즐거움(Have Fun)**과 관련된 문화적 요소도 별도로 정리했다. - 팀원 스스로 같은 기준으로 평가해 보며, 자신들이 실제로 평가할 수 있는 역량만 후보자에게 요구하도록 했다. - 이 자기평가는 팀의 강점과 약점을 확인하고, 비현실적인 채용 기준을 줄이는 데 도움이 됐다. ## 구조화된 인터뷰와 편향 완화 - 초기에는 역할 기대치가 불명확했고, 면접 질문과 후보자 논의 방식도 일관되지 않았다. - 다양성과 포용성 워크숍을 통해 면접관이 무의식적으로 기존 편견에 맞춰 평가 기준을 바꿀 수 있다는 점을 인식했다. - 예를 들어 ‘좋은 디자이너는 자기주장이 강해야 한다’는 선입견이 팀의 합의된 기준보다 우선할 수 있다. - 이를 방지하기 위해 정리한 역량과 자질을 채용 도구인 **Lever**의 피드백 양식에 직접 반영했다. - 자유로운 서술만 받는 대신, 각 면접관이 합의된 기준에 근거해 구체적이고 비교 가능한 피드백을 남기도록 했다. ## 채용 담당자를 팀 안으로 참여시키기 - 명확한 기준만으로는 적합한 인재가 자동으로 찾아지지 않으므로 소싱, 추천, 네트워킹이 여전히 중요했다. - 채용 담당자 Korin을 디자인팀에 밀접하게 참여시켜 크리틱과 팀 미팅에 함께 참석하게 했다. - 이를 통해 채용 담당자가 팀의 실제 업무와 문화를 직접 이해하고, 후보자에게 업무를 더 정확하게 설명할 수 있었다. - 디자인팀과 채용팀의 긴밀한 협업이 적합한 인재를 찾는 데 큰 도움이 됐다. ## 팀 구성원의 다양한 배경 - **Lucy** - 시각 디자인과 모션 탐구가 돋보이는 포트폴리오를 통해 합류했다. - 웹사이트와 에이전시 업무부터 휴대용 CNC 기기의 인터페이스 디자인까지 다양한 영역을 경험했다. - 사물의 작동 이유를 끊임없이 질문하고 탐구하는 태도가 강점으로 소개된다. - **Marcin** - Google, Medium, Code for America에서 일한 UI 디자인 경력을 가진 베테랑으로 소개된다. - Google 기념일 로고로 Pac-Man을 재현할 만큼 구현 세부사항에 강하고, 링크 밑줄 같은 작은 인터페이스 요소까지 세심하게 다루는 인물로 묘사된다. Figma의 사례는 팀이 커질수록 채용을 개인의 감이나 인상에 맡기기보다, 필요한 역량을 명시하고 평가 기준을 표준화해야 한다는 점을 보여준다. 특히 채용 기준을 팀 내부에서 먼저 검증하고, 채용 담당자가 실제 업무 문화를 경험하게 하는 방식은 초기 스타트업과 소규모 조직에도 실용적인 접근이다.

원문 읽기(새 탭에서 열림)
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에서 핵심 사용자 흐름과 애니메이션을 빠르게 검증하는 방식이 효과적이다. 특히 디자인 변경 후에도 애니메이션이 유지되므로, 반복적인 프로토타입 수정 작업을 줄일 수 있다.

원문 읽기(새 탭에서 열림)
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 원칙을 직접 구축하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
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를 배우는 데 그치지 않고, 지역 커뮤니티에 참여해 디자인 리뷰, 채용, 조직 운영 같은 실무 주제를 교류하는 것이 가장 큰 가치다. 거주 지역에 커뮤니티가 없다면 직접 그룹이나 행사를 제안하는 방식으로 네트워크를 확장할 수 있다.

원문 읽기(새 탭에서 열림)
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로 옮겨야 하는 개인과 팀에게 유용한 마이그레이션 수단이다. 특히 디자인 시스템, 운영체제가 다른 협업 환경, 원격 리뷰가 필요한 프로젝트라면 파일을 가져온 뒤 페이지와 컴포넌트가 제대로 변환되는지 확인하고 적극적으로 활용하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

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

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

원문 읽기(새 탭에서 열림)
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 설정을 확인하고, 복잡한 아이콘이나 도형은 벡터 네트워크를 활용하면 파일 구조를 단순하게 유지하면서 효율적으로 제작할 수 있다.

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