figma2026년 6월 24일

움직이는 원칙 | Figma 블로그 (새 탭에서 열림)

모션 디자인은 정적인 그래픽에 시간, 리듬, 속도, 소리, 순서를 더해 의미와 감정을 전달하는 작업이다. 좋은 모션을 만들려면 물리적 움직임을 이해하고, 타이밍과 이징을 활용해 이야기를 단계적으로 보여줘야 한다. 또한 자연·영화·예술 등 다양한 분야에서 움직임의 영감을 얻고, 우연히 생기는 조화까지 열린 태도로 받아들이는 것이 중요하다. ## 그래픽 디자인과 모션 디자인의 차이 - 그래픽 디자인은 정지된 한 장면 안에서 메시지를 전달한다. - 모션 디자인은 시간의 흐름을 활용해 다음 요소를 추가한다. - 리듬과 페이싱 - 변형과 전환 - 움직임의 성격과 캐릭터 - 소리와 이미지의 동기화 - 모든 내용을 한 화면에 담기보다 여러 프레임으로 나누어 “먼저 이것, 다음에 저것”의 순서로 보여주면 이야기를 더 쉽게 이해시킬 수 있다. - 모션의 핵심은 움직임 자체보다 시간 요소를 사용해 아이디어와 감정을 전달하는 데 있다. ## 타이밍, 이징, 사운드의 역할 - 이징과 타이밍은 움직임의 감정과 의도를 결정한다. - 음악의 박자처럼 모션도 속도와 간격의 구조를 가진다. - 이미지와 소리가 결합하면 각각의 요소를 넘어선 새로운 의미와 연결이 만들어진다. - 설계자가 모든 결과를 완벽히 통제하기보다, 사운드와 이미지가 만나며 생기는 우연한 효과와 ‘행복한 실수’를 받아들이는 태도도 창작의 중요한 부분이다. ## 물리학에서 찾는 움직임의 기준 - 현실의 움직임은 모션 디자인의 기본 참고점이다. - 예를 들어 공이 튀는 움직임은 다음과 같은 물리적 특징을 가진다. - 처음에는 빠르게 움직인다. - 위로 올라갈수록 속도가 느려진다. - 다시 떨어진다. - 반복할 때마다 튀어 오르는 높이가 낮아진다. - 이런 가속·감속과 에너지의 변화를 포착해야 움직임이 자연스럽고 설득력 있게 느껴진다. - 관객은 움직임이 왜 좋은지 설명하지 못해도 현실의 경험을 바탕으로 자연스러움과 어색함을 직관적으로 판단한다. ## 다양한 분야에서 얻는 영감 - 기존 모션 디자인만 참고하면 유행하는 표현을 반복하기 쉽다. - 자연의 움직임에서는 생동감과 물리적 설득력을 얻을 수 있다. - 영화의 스토리텔링과 편집 기법에서는 장면 전환과 서사 구성 방식을 배울 수 있다. - 예술과 디자인의 제스처, 형태, 움직임은 차별화된 표현을 만드는 데 도움이 된다. - 익숙한 공이나 사각형 애니메이션을 넘어 다양한 시각적·서사적 자원을 활용해야 독창적인 결과를 만들 수 있다. ## 모션의 핵심 원칙 - **Ease in / Ease out**: 움직임이 시간에 따라 가속하거나 감속하는 방식 - **Anticipation**: 앞으로 일어날 동작을 예고하는 준비 동작 - **Overshoot**: 목표 지점을 약간 지나친 뒤 원래 위치로 돌아오는 움직임 - **Follow-through**: 주된 움직임이 끝난 뒤에도 이어지는 보조 움직임 - **Hold**: 관객이 방금 일어난 일을 인식할 수 있도록 잠시 멈추는 구간 - **Settle**: 대상이 최종 위치에 도달한 뒤 안정되는 미세한 움직임 ## 전환으로 이야기를 연결하기 - 이징은 움직임의 속도뿐 아니라 장면이 자연스럽게 정착하는 느낌까지 결정한다. - **Match cut**은 서로 다른 장면을 같은 움직임이나 형태로 연결하는 편집 방식이다. - 느림에서 빠름으로, 다시 느림으로 속도를 변화시킨 뒤 가장 빠른 순간에 장면을 전환하면 두 장면이 매끄럽게 이어질 수 있다. - 전환은 이야기의 각 박자를 연결하고 전체 흐름을 하나로 묶는 역할을 한다. 실무에서는 먼저 전달하려는 메시지와 감정을 정한 뒤, 현실의 물리 법칙을 참고해 타이밍과 이징을 설계하는 것이 좋다. 여기에 자연·영화·음악 등 다양한 분야의 움직임을 결합하면 더 자연스럽고 독창적인 모션을 만들 수 있다.

animationfigmaaimotion-design+2

figma2025년 10월 6일

6가지 뛰어난 Figma 제작 사례 (새 탭에서 열림)

Figma Make-a-thon에는 1만 명이 넘는 창작자가 참여해, 아이디어를 빠르게 인터랙티브 프로토타입으로 구현했다. 수상작들은 단순히 작업을 지시하는 데 그치지 않고 제품 구조와 상태 관리, 컴포넌트 상호작용까지 명확히 정의하며 AI와 반복적으로 협업했다. 특히 실험과 되돌리기를 적극 활용하면 코딩 경험이 부족해도 복잡한 도구를 발전시킬 수 있다는 점을 보여준다. ## Figma Make-a-thon의 목적과 규모 - Figma Make는 콘셉트와 실제 제작 사이의 간극을 줄이고, 아이디어를 빠르게 탐색·수정할 수 있도록 설계된 도구다. - Contra와 함께 글로벌 Make-a-thon을 개최했다. - 1만 명 이상의 창작자가 참여했으며, 총상금은 10만 달러, 그중 대상 상금 규모는 5만 달러였다. - 출품작에는 디자이너를 위한 *Severance* 테마 가상 방 탈출 게임, “Figma-Kart” 레이싱 게임 등이 포함됐다. - 심사 기준은 다음과 같았다. - 아이디어의 창의성과 실행력 - Figma Make를 활용한 프로토타입 제작의 혁신성 - AI 프롬프트를 설계하고 활용한 방식의 영리함 ## 작업 단위가 아니라 제품 구조를 정의하기 세바스찬 룸비의 **Frame by frame SVG animator**는 손으로 만든 애니메이션 제작 방식을 디지털 환경으로 옮긴 도구다. - Figma에서 SVG를 복사해 앱에 붙여넣으면 프레임 애니메이션을 만들 수 있다. - 완성한 애니메이션은 GIF로 내보낼 수 있다. - 화면 구조는 크게 나뉜다. - 상단: 프레임을 그리는 캔버스 - 하단: 프레임을 확인하고 새 프레임을 추가하는 영역 - 제작자는 구현 전에 다음과 같은 기술적 요소를 조사했다. - Figma Make에서 상태를 관리하는 방법 - 여러 컴포넌트가 서로 상호작용하는 방식 - 앱 구조를 어떻게 나누어야 디버깅하기 쉬운지 - 단순히 “애니메이션 앱을 만들어라”라고 요청하는 대신, 캔버스와 프레임 목록이라는 핵심 구조를 프롬프트에 포함했다. ## AI와의 반복적인 대화 및 실험 - 처음에는 구체적인 프롬프트 전략 없이 AI와 대화하듯 기능을 추가했다. - 초기 프롬프트는 두 개 정도였지만, 이후 약 80개의 프롬프트를 사용하며 계속 실험했다. - 완성된 계획을 한 번에 전달하기보다 결과를 확인하고 다음 아이디어를 추가하는 방식으로 발전시켰다. - 이런 방식은 빠른 프로토타이핑에는 유리하지만, 앱 구조를 이해하지 못하면 이후 버그 수정이 어려워질 수 있다. ## 되돌리기 기능을 안전망으로 활용하기 - Figma Make의 revert 기능은 새로운 아이디어를 부담 없이 시도하게 해준다. - 실험 결과가 좋지 않거나 앱이 충돌하면 현재 상태를 억지로 수정하기보다 이전 시점으로 돌아갈 수 있다. - 복잡한 버그를 해결할 때는 기존 코드를 계속 고치는 것보다, 문제가 발생하기 전 상태에서 다른 접근을 시도하는 편이 효과적일 수 있다. ## 비개발자에게도 필요한 기술적 이해 - 직접 코딩하지 않더라도 앱에 필요한 기본 개념을 이해하면 AI 결과를 더 잘 통제할 수 있다. - 상태 관리, 컴포넌트 간 상호작용, 화면 구조 같은 개념을 알고 있으면 프롬프트를 구체적으로 작성할 수 있다. - Figma Make가 코드를 생성하므로, 원하는 코드 구조와 동작 방식을 명확히 설명할수록 이후 디버깅이 쉬워진다. - 기술적인 판단이 어렵다면 다른 AI에게 상태 관리나 아키텍처에 대한 추천을 먼저 받아볼 수도 있다. ## 실용적인 적용 방법 - 처음부터 모든 기능을 설명하기보다 핵심 화면 구조와 사용자 흐름부터 정의한다. - AI가 생성한 결과를 실행해 본 뒤 작은 단위로 기능을 추가한다. - 상태와 컴포넌트의 관계를 프롬프트에 명시한다. - 큰 변경 전에는 되돌릴 수 있는 상태를 확보한다. - 오류가 반복되면 현재 결과를 계속 수정하기보다 이전 버전으로 돌아가 다른 구현 방향을 시도한다.

animationprototypingfigma-makesvg+2

discord2025년 6월 1일

더 높이, Plus Ultra! 나의 (새 탭에서 열림)

디스코드가 Crunchyroll과의 협업을 통해 팬들이 가장 기다려온 '나의 히어로 아카데미아' 테마의 아바타 장식과 프로필 효과 컬렉션을 출시했습니다. 이번 컬렉션은 캐릭터의 정체성인 '개성(Quirk)'과 시그니처 아이템을 정교하게 구현하여 사용자의 프로필에 생동감을 더하는 데 초점을 맞췄습니다. 팬들은 오늘부터 상점에서 총 8종의 아바타 장식과 3종의 프로필 효과를 통해 자신이 좋아하는 영웅이나 빌런의 모습을 재현할 수 있습니다. **아바타 장식: 히어로 장비와 개성의 시각화** * **디자인 핵심 요소:** 사용자의 아바타를 너무 많이 가리지 않으면서도 캐릭터를 즉각적으로 식별할 수 있도록, 각 캐릭터의 가장 상징적인 '히어로 장비(Hero Gear)'를 디자인의 중심 컨셉으로 설정했습니다. * **제작 프로세스:** 명확한 장비 컨셉을 잡은 뒤 색상을 더해 풍부한 질감을 만들고, 마지막 단계에서 애니메이션을 추가하여 캐릭터 고유의 '개성'이 움직임으로 표현되도록 제작했습니다. * **다양한 라인업:** 미도리야 이즈쿠, 바쿠고 카츠키, 우라라카 오차코, 토도로키 쇼토 등 주요 학생들부터 올마이트, 엔데버, 호크스 같은 프로 히어로, 그리고 빌런인 시가라키 토무라까지 총 8종의 장식이 포함되었습니다. **프로필 효과: 더 넓은 영역을 활용한 스토리텔링** * **스토리 중심 디자인:** 아바타 장식보다 넓은 면적을 활용하는 프로필 효과는 단순한 캐릭터 묘사를 넘어, 애니메이션 속의 강렬한 순간과 시그니처 기술을 재현하는 데 중점을 두었습니다. * **역동적인 시각 효과:** 미도리야의 '풀 카울(Full Cowling)'에서 뿜어져 나오는 전기 에너지나 바쿠고의 '클러스터(Cluster)' 폭발 효과 등 팬들이 열광하는 명장면을 프로필 전체에 담아냈습니다. * **직관적인 인상 전달:** 짧은 시간 안에 캐릭터의 능력과 세계관을 시각적으로 전달하여, 프로필을 방문하는 사람들에게 강렬한 인상을 남길 수 있도록 설계되었습니다. **상점 이용 및 컬렉션 구성** * **제공 품목:** 총 8종의 아바타 장식과 3종의 프로필 효과(풀 카울, 클러스터, 빌런 연합)로 구성되어 선택의 폭을 넓혔습니다. * **이용 방법:** '나의 히어로 아카데미아' 컬렉션은 오늘부터 데스크톱 및 모바일 디스크 앱 내 상점에서 바로 구매하여 적용할 수 있습니다. * **팬들을 위한 헌사:** 초기 탐색 단계부터 최종 애니메이션 작업까지 애니메이션에 대한 제작진의 애정을 담아 제작되었으며, Crunchyroll의 2025 애니메이션 어워즈를 기념하는 특별한 드롭입니다.

animationui-designux-designmobile-apps+3

figma2025년 4월 22일

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

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

animationfigmavisual-designillustration+3

figma2024년 3월 18일

지금 바로 북마크해야 할 (새 탭에서 열림)

프로토타이핑은 제품 개발 막바지의 보조 수단이 아니라, 아이디어 검증·사용자 조사·이해관계자 피드백·프레젠테이션 등 전 과정에서 팀의 공통 비전을 만드는 핵심 도구다. 이 글은 Figma 프로토타이핑 학습을 위해 기초 강의부터 발표, 모션과 플로우, 변수, 오피스 아워까지 23개의 영상·커뮤니티 파일·콘텐츠를 단계별로 큐레이션한다. 학습자는 자신의 수준과 목적에 맞는 자료를 골라 인터랙션 구현 능력을 높이고 더 나은 제품을 설계할 수 있다. ## 프로토타이핑의 역할 - 프로토타입은 제품의 동작과 사용자 경험을 시각화해 팀이 아이디어를 공유하도록 돕는다. - 사용자 테스트와 이해관계자 피드백을 통해 문제를 조기에 발견하고 반복적으로 개선할 수 있다. - 발표 자료에도 인터랙션을 추가해 정적인 화면보다 설득력 있게 제품의 흐름과 기능을 전달할 수 있다. - Figma는 모바일·태블릿·워치 등 다양한 디바이스 화면을 고려한 프로토타이핑 기능을 강화하고 있다. ## 기초 기능 익히기 - **「Build prototypes」(8분)** - 인터랙티브 프로토타입 제작의 기본 흐름을 소개한다. - 애니메이션을 적용하고 테스트 사용자에게서 피드백을 반영하는 방법을 다룬다. - **「Prototyping playlist」(50분)** - easing curve, transition, Smart Animate, 스크롤, 디바이스 프레임 등 핵심 기능을 짧은 영상들로 학습할 수 있다. - **「Prototyping 101」(63분)** - 프레임 간 기본 내비게이션부터 인터랙티브 컴포넌트 같은 고급 기능까지 설명한다. - **제품 담당자를 위한 Figma 학습 시리즈** - 디자이너가 아닌 제품 담당자도 가벼운 프로토타입을 직접 만들 수 있도록 안내한다. - 두 번째 영상에서는 transition, Smart Animate, 스크롤 동작 등을 활용해 화면을 더 실제처럼 만드는 방법을 다룬다. - **접근 가능한 프로토타입 커뮤니티 파일** - Figma의 접근성 모드를 활용해 프로토타이핑 화면의 정보를 스크린 리더로 읽을 수 있다. - macOS의 VoiceOver와 Windows의 JAWS 같은 도구를 통한 접근성 테스트에 활용할 수 있다. ## 발표 자료를 인터랙티브하게 만들기 - **「Presenting with Figma」(70분)** - Figma 프로토타이핑 기능을 활용해 역동적인 슬라이드 프레젠테이션을 구성하는 방법을 소개한다. - **발표 팁 영상** - 슬라이드 안에 프로토타입을 중첩해 실제로 스크롤되는 모바일 화면 등 인터랙티브 요소를 넣을 수 있다. - 이 방식은 이사회 보고, 수업, 제품 소개처럼 메시지 전달이 중요한 상황에 유용하다. - **Figma 앱으로 발표하기** - 모바일 앱에서 슬라이드를 직접 클릭하며 발표하는 방법을 보여준다. ## 영상·모션·사용자 플로우 학습 - 프로토타입의 완성도를 높이려면 단순한 화면 연결뿐 아니라 전환 효과, 애니메이션, 스크롤 동작을 함께 설계해야 한다. - Smart Animate와 easing curve를 사용하면 화면 변화가 더 자연스럽고 제품의 실제 동작에 가까워진다. - 모션과 플로우를 활용하면 사용자가 어떤 순서로 기능을 경험하는지 명확하게 검증할 수 있다. ## 변수와 고급 프로토타이핑 - 변수 기능을 활용하면 하나의 프로토타입에서 상태, 값, 조건에 따른 다양한 동작을 관리할 수 있다. - 반복되는 상태나 화면을 개별 프레임으로 복제하는 대신 변수와 인터랙티브 컴포넌트로 구성해 유지보수성을 높일 수 있다. - 복잡한 사용자 플로우와 여러 상태를 표현할 때 변수 기반 설계가 특히 유용하다. ## 오피스 아워와 실습 자료 - Figma의 오피스 아워 콘텐츠는 프로토타이핑 기능과 실제 활용 사례를 보충 학습할 수 있는 자료로 제공된다. - 영상뿐 아니라 Figma 커뮤니티 파일을 직접 열어 결과물을 확인하고 따라 해볼 수 있다. - 학습 방식에 따라 짧은 영상, 장시간 강의, 실습 파일, 소셜 콘텐츠 중 적합한 자료를 선택할 수 있다. 처음 시작한다면 기초 프로토타입 제작과 프레임 간 내비게이션부터 익힌 뒤, Smart Animate·스크롤·인터랙티브 컴포넌트로 확장하는 순서가 좋다. 이후 접근성 테스트, 변수, 발표용 프로토타입을 적용하면 실무에서 검증과 커뮤니케이션을 동시에 강화할 수 있다.

animationfigmaprototypingaccessibility+3

figma2022년 6월 15일

피그마가 스프링 (새 탭에서 열림)

Figma는 베지어 곡선 대신 물리 법칙을 기반으로 한 스프링 애니메이션을 도입해 더 자연스럽고 직관적인 움직임을 구현했다. 질량, 강성, 감쇠라는 물리적 매개변수로 움직임을 계산하면 오버슈트와 감속을 자연스럽게 표현할 수 있다. 다만 디자이너가 물리 상수를 직접 조정하기는 어렵기 때문에, 실제 제품에서는 이 값을 UI 속도·탄성·오버슈트 같은 직관적인 개념으로 다루는 것이 중요하다. ## 스프링 애니메이션이 필요한 이유 - 기존 Figma의 주요 방식은 베지어 애니메이션이었다. - 베지어 곡선은 시작과 종료 시점의 움직임을 세밀하게 지정할 수 있지만 다음 문제가 발생할 수 있다. - 물체가 갑자기 가속하는 것처럼 보임 - 이동 방향이 부자연스럽게 바뀜 - 속도가 아무 이유 없이 증가하는 느낌을 줌 - 정지 시점이 어색해짐 - 스프링 애니메이션은 이동 경로를 직접 그리는 대신, 물리적 속성을 지정하고 그 결과로 움직임을 계산한다. - 이를 통해 다음과 같은 자연스러운 효과를 만들 수 있다. - 무게감 있는 UI 요소의 움직임 - 적절한 오버슈트가 있는 팝업 - 부드럽게 감속하는 화면 전환 - FigJam의 이모트나 하이파이브처럼 생동감 있는 인터랙션 ## 질량·강성·감쇠로 움직임 정의하기 스프링 애니메이션은 세 가지 주요 변수로 구성된다. - **질량(Mass, m)** - 물체가 무거울수록 같은 힘으로 가속하기 어렵다. - 뉴턴의 운동 법칙으로 `F = m × a`로 표현된다. - 질량을 높이면 일반적으로 애니메이션이 더 느리고 묵직해진다. - **강성(Stiffness, k)** - 스프링이 원래 위치로 돌아가려는 힘의 정도다. - 스프링을 많이 당길수록 더 강하게 저항한다. - 훅의 법칙은 `F = -k × x`로 표현된다. - 강성이 높으면 목표 위치로 빠르게 복귀하고, 움직임이 더 민첩해진다. - **감쇠(Damping, b)** - 마찰처럼 움직임을 줄여 물체가 멈추도록 만드는 저항이다. - 속도가 빠를수록 더 큰 저항을 받으며 `F = -b × v`로 표현된다. - 감쇠가 높으면 흔들림과 오버슈트가 줄어들고 더 차분하게 멈춘다. - 세 변수의 조합에 따라 애니메이션은 부드럽거나, 빠르거나, 튀거나, 느린 형태로 달라진다. ## 물리 공식에서 코드로 - 스프링 애니메이션은 이미 정립된 물리 공식을 활용하므로, 이론을 코드로 옮기는 과정 자체는 안정적이다. - Figma는 개발 과정에서 **WebKit SpringSolver**를 활용했다. - 이 솔버에 질량, 강성, 감쇠 값을 입력하면 특정 시간의 위치 값 `x`를 계산할 수 있다. - 결과적으로 시간에 따른 위치를 구해 UI 요소를 애니메이션할 수 있다. ## 물리 매개변수와 디자이너의 언어 사이의 간극 - 질량·강성·감쇠는 정확한 물리 모델이지만, 디자이너가 애니메이션을 조정할 때 사용하는 표현과는 다르다. - 디자이너는 보통 다음과 같이 생각한다. - 더 빠르게 - 더 느리게 - 더 탄력 있게 - 더 많이 튀게 - 오버슈트를 줄이게 - 예를 들어 애니메이션을 느리게 만들 때 질량을 높일 수 있지만, 강성과 감쇠도 속도에 영향을 주므로 단순히 한 변수만 바꾸면 원하는 결과가 나오지 않을 수 있다. - 따라서 세 물리 변수 사이의 상호작용을 고려해 조정해야 한다. - Figma는 디자이너가 물리 공식을 직접 이해하지 않아도 자연스러운 결과를 만들 수 있도록, 세 변수를 한곳에서 조정하는 전용 도구를 개발하려 했다. ## 실용적인 결론 스프링 애니메이션은 이동 경로를 수작업으로 설계하기보다 물리적 규칙을 적용해 자연스러운 움직임을 얻는 방식이다. 구현 시에는 WebKit SpringSolver 같은 검증된 솔버를 활용하고, 사용자 인터페이스에서는 질량·강성·감쇠 대신 속도·탄성·오버슈트처럼 이해하기 쉬운 추상화를 제공하는 것이 효과적이다.

animationfigmaui-designspring-animations+2

figma2022년 3월 23일

모션의 예술과 영향력 (새 탭에서 열림)

디지털 제품의 모션은 장식이 아니라 사용자의 이해를 돕고, 상태와 피드백을 전달하며, 물리적 세계와 유사한 정신 모델을 형성하게 하는 중요한 설계 도구다. 좋은 애니메이션은 실용성과 개성을 함께 갖추되 사용자의 시간을 존중하고 방해하지 않아야 한다. 특히 접근성을 해치거나 불필요하게 산만한 모션은 제품 경험과 브랜드 인상을 악화시킬 수 있다. ## 물리적 세계를 디지털 경험으로 번역하는 모션 - 인간은 3차원적이고 움직임이 존재하는 물리적 환경에 적응해 왔기 때문에, 움직임을 통해 많은 의미를 직관적으로 해석한다. - 디지털 인터페이스에 모션을 추가하면 사용자가 별도의 설명 없이도 공간과 기능을 이해하는 데 도움이 된다. - 예를 들어 메뉴가 서랍처럼 열리고 닫히는 애니메이션은 다음과 같은 정신 모델을 전달한다. - 콘텐츠 상자가 열리고 닫힌다. - 다시 열어도 이전과 같은 내용이 있다. - 사용자가 인터페이스의 상태 변화를 예측할 수 있다. - 모션은 디지털 공간에서 “무엇이 일어나고 있는지”를 시각적으로 설명하는 역할을 한다. ## 상태와 피드백을 전달하는 움직임 - 로딩 바는 작업이 진행 중이며 곧 완료될 것이라는 정보를 제공한다. - 잘못된 비밀번호 입력 시 입력창이 흔들리는 효과는 고개를 젓는 동작처럼 오류를 직관적으로 전달한다. - 새로고침 후 차트나 그래프가 재배치되는 애니메이션은 데이터가 갱신되었다는 사실을 보여준다. - FigJam 타이머의 종료 시 흔들리는 축하 애니메이션처럼, 모션은 단순한 상태 전달을 넘어 감정과 분위기도 만들 수 있다. - Figma의 커서 채팅에서는 입력 중인 대화 말풍선이 커지며, 즉흥적이고 자연스러운 대화감을 형성한다. ## 마이크로애니메이션은 목적 중심으로 설계해야 한다 - 마이크로애니메이션은 짧은 시간 동안 UI를 활성화하거나 사용자의 흐름을 안내하는 움직임이다. - 아이콘을 의미 없이 추가하지 않듯, 애니메이션도 “움직임을 넣기 위해” 넣어서는 안 된다. - 각각의 애니메이션은 구체적인 사용자 문제를 해결해야 한다. - 오래된 백엔드 시스템 때문에 발생하는 처리 지연을 1~2초의 전환 애니메이션으로 자연스럽게 감출 수 있다. - 이때 애니메이션은 실제 처리 속도를 높이지 않더라도 제품이 더 빠르고 덜 끊기는 것처럼 느끼게 한다. ## 실용성과 개성을 함께 갖춘 좋은 모션 - 좋은 모션은 기능적 목적과 제품의 개성을 균형 있게 결합한다. - 사용자의 시간을 존중하고, 주의를 빼앗거나 작업을 지연시키지 않아야 한다. - 애플의 창 최소화 애니메이션은 창이 독의 아이콘 속으로 빨려 들어가는 듯한 효과를 보여준다. - 이 효과는 짧고 미묘하지만 다음 정보를 동시에 전달한다. - 창이 어디로 이동했는지 - 창을 다시 열려면 어떤 아이콘을 눌러야 하는지 - 창이 사라진 것이 아니라 보관되었다는 사실 - 다시 창을 열 때는 아이콘에서 창이 자라나는 듯한 역방향 애니메이션을 사용해 상태 변화의 연속성을 보여준다. ## 과도한 모션과 접근성 문제 - 애니메이션이 없어도 핵심 기능을 사용할 수 있도록 설계해야 한다. - 특정 움직임은 간질 환자 등 일부 사용자에게 발작을 유발할 수 있으므로 접근성을 고려해야 한다. - 모션은 다음과 같은 부작용을 일으킬 수 있다. - 화면을 복잡하고 산만하게 만든다. - 사용자의 작업을 중단시킨다. - 불필요한 단계를 추가한다. - 사용자를 혼란스럽게 하거나 불편하게 한다. - 반복되면서 브랜드에 대한 호감도를 서서히 떨어뜨린다. - 화면 곳곳에서 빠르고 과장된 움직임이 반복되면 사용자는 정확한 원인을 의식하지 못하더라도 제품을 피곤하고 성가시게 느낄 수 있다. - 따라서 각 애니메이션은 가장 우아하고 절제된 방식으로 사용자 문제를 해결하는지 검토해야 한다. 모션은 기능을 이해시키고 상태 변화를 설명하는 경우에 우선 적용하는 것이 좋다. 구현 전에는 “이 움직임이 어떤 정보를 전달하는가”, “없어도 사용 가능한가”, “접근성 설정이나 모션 감소 환경에서도 문제가 없는가”를 확인해야 한다.

animationfigmaaccessibilityux+3

figma2021년 5월 5일

로빈 캐너와의 Q (새 탭에서 열림)

Robyn Kanner의 인터뷰는 디자인을 특정 직함이나 완벽한 결과물로 한정하지 말고, 끊임없이 만들고 협업하며 현재의 문제를 해결하는 태도를 강조한다. 그녀는 Biden-Harris 캠페인의 크리에이티브 디렉터로서 JoeBiden.com부터 캠페인 전용기까지 모든 작업을 하나의 Figma 파일에서 제작한 경험을 소개했다. 디자인의 성취는 개인의 명성보다 공동의 목표를 이루는 데 있으며, 그녀에게 가장 큰 성과는 Joe Biden의 당선을 도운 것이다. ## Biden-Harris 캠페인과 대규모 협업 - 2020년 미국 대선에서 Biden-Harris 디자인팀의 크리에이티브 디렉터로 활동했다. - 웹사이트인 JoeBiden.com부터 캠페인 전용기 디자인까지 다양한 결과물을 제작했다. - 캠페인 전체 작업을 하나의 Figma 파일에서 진행하며 협업과 통합된 디자인 작업 방식을 보여줬다. - 그녀가 꼽은 커리어 최대 성취는 “Joe Biden의 당선을 도운 것”이었다. - 좋은 팀은 어려운 일을 함께 겪으며 서로를 지지할 때 만들어진다고 설명했다. - 좋은 협업자는 주변 사람들이 기여할 수 있도록 공간을 만들어주는 사람이라고 답했다. ## 디자인을 대하는 태도 - 창작 과정을 한 단어로 표현하면 “끈질김(Relentless)”이라고 답했다. - 완벽한 디자인은 없으며, 디자인 자체를 두려워할 필요도 없다고 말했다. - 다른 사람의 디자인을 부러워하거나 대신 만들고 싶어 하기보다 각자의 경로를 존중해야 한다고 강조했다. - 디자인은 과거의 평가보다 지금 필요한 것을 만드는 행위이며, 이를 “NOW”라고 표현했다. - 젊은 디자이너에게 특정 직함에 자신을 가두지 말고, 단순히 무언가를 만들라고 조언했다. ## 도구보다 중요한 사회적 관점 - 디자인 업계에서 과대평가된 것으로 “코드”를, 과소평가된 것으로 “사회학”을 꼽았다. - 이는 디자인을 구현 기술만의 문제가 아니라 사람과 사회, 맥락을 이해하는 활동으로 본다는 의미다. - 가장 좋은 디자인은 색상이나 형식만으로 결정되지 않고, 그것이 사용되는 환경과 사람들의 행동을 고려해야 한다. - 그녀가 선호하는 UI 폰트는 Decimal과 Mercury이며, 색상 표현 방식은 Hex·RGB·HSL 모두를 사용한다고 답했다. - 디자인에서 타이포그래피와 색상 중 하나만 고르기보다 둘 다 중요하게 본다. ## 제약을 넘어서는 창작 - 최근 작업에서 Safari의 애니메이션 처리 방식 때문에 제약을 느꼈다고 말했다. - 도구가 애니메이션 구현을 제한하는 상황을 아쉬워하며, 창작자가 기술적 환경에 의해 제한되지 않기를 바라는 태도를 드러냈다. - 언젠가 화성에 그라디언트를 적용해보고 싶다는 답변은 현실적 제약을 넘어서는 상상력을 상징한다. - 가장 좋아하는 Figma 기능으로는 “모두”를 꼽았으며, 특히 Shift+H 단축키를 언급했다. - Figma가 창작 방식을 혁신했다고 평가하며, 기능 자체보다 자유롭게 만들고 협업할 수 있는 환경을 중요하게 봤다. ## 개인적 취향과 창작자의 인간적인 면 - 1990년대의 미학을 되살릴 수 있다면 웹이나 Apple 디자인보다 음악가 Jeff Buckley를 선택하겠다고 답했다. - 최상의 창작 상태는 이른 아침이나 늦은 밤이라고 말했다. - 디자인 비평에 초대하고 싶은 사람으로 농구선수 Michael Jordan을 꼽았다. - 캠페인 기간 동안 긴 하루를 마친 뒤 긴장을 풀기 위해 게임 *Madden*을 즐겼다고 소개했다. - 최근 인터넷에서 좋아한 콘텐츠로 BROCKHAMPTON의 “BUZZCUT”을 언급했다. - 디자인 관련 소셜미디어 담론, 특히 Design Twitter에는 큰 관심이 없다고 선을 그었다. ## 실용적인 시사점 디자이너는 직함이나 특정 도구에 자신을 한정하기보다 문제를 해결하기 위해 직접 만들고, 협업 과정에서 다른 사람의 참여 공간을 확보해야 한다. 또한 시각적 완성도뿐 아니라 사회적 맥락과 사용자의 현실을 이해하고, 기술적 제약을 비판적으로 바라보는 태도가 중요하다.

animationfigmaui-designdesign-collaboration+4

figma2018년 2월 26일

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

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

animationfigmaprototypingui-design+2