실무에서 바로 쓰는 피그마 8 - 프로토타입과 인터랙션 : 사용자 경험 시뮬레이션

지금까지 Figma의 핵심 기능들을 배우며 디자인 요소를 만들고 관리하는 방법을 익혔습니다. 이제 디자인에 생명을 불어넣어 사용자와 상호작용하는 경험을 시뮬레이션할 시간입니다. 바로 프로토타입(Prototype)과 인터랙션(Interaction)기능입니다. 프로토타입은 정적인 디자인 화면들을 연결하여 실제 제품처럼 작동하게 만드는 것이며, 인터랙션은 특정 동작(클릭, 드래그 등)에 대한 반응(화면 전환,애니메이션 등)을 정의하는 것입니다. 이 기능을 마스터하면 디자인의 사용자 흐름을 검증하고, 이해관계자들에게 아이디어를 효과적으로 전달하며, 개발 전 오류를 조기에 발견하여 시간과 비용을 절약할 수 있습니다.

 

8.1 프로토타이핑(Prototyping)이란 무엇인가? 왜 중요한가?

 

프로토타이핑은 디자인 아이디어를 실제 제품처럼 작동하는 모델로 구현하여 테스트하고 검증하는 과정입니다. Figma의 프로토타이핑 기능은 코드 한 줄 없이 디자인 화면들을 연결하고 인터랙션을 추가하여, 사용자가 앱이나 웹사이트를 사용하는 것처럼 시뮬레이션 할 수 있게 해줍니다.

 

8.1.1 프로토타이핑의 필요성 및 장점

• 사용자 경험 검증 : 디자인된 흐름이 사용자가 예상하는 대로 작동하는지, 불편한 점은 없는지 등을 실제와 유사한 환경에서 테스트하여 사용자 경험을 최적화할 수 있습니다.
• 이해관계자와 소통 : 정적인 화면만으로는 디자인의 의도나 사용자 흐름을 명확하게 설명하기 어렵습니다. 프로토타입은 팀원, 클라이언트, 투자자 등 이해관계자들에게 아이디어를 시각적이고 직관적으로 전달하는 가장 효과적인 방법입니다.
• 개발 효율성 증대 : 개발 단계로 넘어가기 전에 디자인의 문제점이나 논리적 오류를 프로토타이핑 단계에서 미리 발견하고 수정할 수 있습니다. 이는 개발 과정에서 발생할 수 있는 불필요한 재작업과 비용을 크게 줄여줍니다.
• 피드백 수집 용이성 : 프로토타입을 통해 사용자 테스트를 수행하고 구체적인 피드백을 수집할 수 있습니다. '여기를 클릭하면 다음으로 넘어가나요?'와 같은 막연한 질문 대신, '여기서 이 버튼을 클릭했을 때 다음 화면으로 넘어가는 것이 불편하다'와 같은 구체적인 피드백을 얻을 수 있습니다.
• 아이데이션 및 반복 : 다양한 아이디어를 빠르게 프로토타입으로 만들고 테스트하며 반복적인 개선을 통해 최적의 솔루션을 찾아갈 수 있습니다.

8.1.2 Figma 프로토타입의 기본 개념

Figma에서 프로토타입은 주로 두 가지 핵심 요소를 기반으로 작동합니다.

• 핫스팟(Hotspot) : 클릭, 드래그 등 사용자 인터랙션이 발생하는 영역입니다. 주로 버튼, 이미지, 텍스트 링크 등 특정액션이 트리거되는 UI요소가 핫스팟이 됩니다.
• 연결(Connection) : 핫스팟이 트리거되었을 때 어떤 화면으로 이동하고 어떤 애니메이션 효과가 적용될지를 정의하는 링크입니다.

8.2 프로토타입 생성 및 연결 : 화면 간 흐름 만들기

Figma에서 프로토타입 작업을 시작하려면 좌측 상단 탭에서 Prototype탭을 선택해야 합니다.

8.2.1 기본 화면 연결 (Flow)

1. 시작 프레임 설정 : 프로토타입의 시작점이 될 프레임을 선택하고, 우측 Prototype패널에서 Flow startingpoint 옆의 +버튼을 클릭합니다. 해당 프레임에 Flow 1 과 같은 시작점이 표시됩니다.

2. 핫스팟 선택 : 프로토타입 연결을 시작할 UI 요소(버튼,이미지,프레임 등)을 선택합니다.

3. 연결선 드래그 : 선택된 요소의 우측에 나타나는 작은 원(+아이콘)을 클릭한 채, 마우스를 드래그하여 다음 프레임으로 가져다 놓습니다.

4. 인터랙션 설정 : 연결선이 만들어지면 우측 Prototype패널에 인터랙션 설정 창이 나타납니다.

• Interaction details (인터랙션 세부 정보) :
  Trigger (트리거) : 어떤 사용자 동작이 인터랙션을 발생시킬지 선택합니다. (예 : On Click, On Drag, While Hovering, Key/Gamepad, After delay, Mouse enter/leave, Touch down/up)
  Action (액션) : 트리거가 발생했을 때 어떤 액션을 취할지 선택합니다. (예 : Maps to, Open overlay, Swap overlay, Close overlay, Back, Scroll to, Open link) 
  Destination (목적지) : Maps to 또는 Open overlay 등의 액션 선택 시, 이동할 대상 프레임을 선택합니다.
  Animation (애니메이션) : 화면 전환 시 어떤 애니메이션 효과를 적용할지 선택합니다. (예 : Instant, Dissolve, Smart animate, Move in/out, Push, Slide in/out)
  Easing (이징) : 애니메이션의 속도 변화를 조절합니다.(예 : Ease in, Ease out, Ease in and out)
  Duration (지속 시간) : 애니메이션이 재상될 시간을 밀리초(ms) 단위로 조절합니다.

 

8.2.2 프리젠테이션 모드에서 미리보기

프로토타입이 완성되면, 상단 툴바의 Present 아이콘(삼각형 모양)을 클릭하여 새로운 탭에서 프로토타입을 미리 볼 수 있습니다.

• 시작 지점 선택 : 여러 개의 Flow가 있는 경우, Prototype 패널에서 원하는 Flow를 클릭한 후 Present버튼을 누르면 해당 Flow부터 시작합니다.
• 디바이스 미리보기 : Prototype패널의 Show prototype settings(톱니바퀴)에서 Device를 선택하여 특정 디바이스(iPhone, Android, Desktop 등) 프레임에 맞춰 프로토타입을 미리 볼 수 있습니다.
• 배경색 설정 : Prototype패널에서 미리보기 화면의 배경색을 설정할 수 있습니다.
• 핫스팟 힌트 : 미리보기 화면에서 화면을 클릭하면 연결 가능한 핫스팟 영역이 파란색으로 표시되어, 사용자가 어디를 클릭해야 다음 화면으로 넘어갈 수 있는지 알 수 있습니다.

 

8.3 주요 인터랙션 유형 마스터하기

Figma는 다양한 인터랙션 유형을 제공하여 복잡하고 현실적인 사용자 경험을 시뮬레이션할 수 있게 해줍니다.

 

8.3.1 화면 전환(Navigate To)

가장 기본적인 인터랙션으로, 특정 핫스팟 클릭 시 다른 화면(프레임)으로 이동하게 됩니다.

• 애니메이션 : Instant(즉시 전환), Dissolve(페이드 인/아웃), Smart Animate(스마트 애니메이트), Move in/out, Push, Slide in/out 등 다양한 전환 효과를 적용할 수 있습니다.

8.3.2 오버레이(Open Overlay, Swap Overlay, Close Overlay)

팝업, 모달, 드롭다운 메뉴, 툴팁 등 현재 화면 위에 다른 UI 요소가 나타나거나 사라지는 인터랙션을 구현합니다.

• Open Overlay : 새로운 프레임을 오버레이로 띄웁니다.
  활용 : 로그인 모달, 알림 팝업 등
  설정 :
  Positon : 오버레이가 나타날 위치(Center, Top Left, Bottom Center 등)를 설정합니다. Manual을 선택하여 직접 위치를 조절할 수 있습니다.
  Close when clicking outside : 오버레이 바깥을 클릭했을 때 닫히도록 설정합니다.
  Add background behind overlay :  오버레이 뒤에 배경(딤드 처리)를 추가합니다. 색상과 투명도 조절 가능.

• Swap Overlay : 이미 열려있는 오버레이를 다른 오버레이로 교체합니다.
  활용 : 단계별 팝업(예 : 비밀번호 찾기 팝업에서 인증 코드 입력 팝업으로 전환)
• Close Overlay : 현재 열려있는 오버레이를 닫습니다.
  활용 : 팝업의 닫기 버튼, Esc 키 등의 동작

 

8.3.3 이전 화면으로 돌아가기 (Back)

브라우저 뒤로 가기 버튼과 유사하게, 이전 화면으로 되돌아가는 액션입니다.

• 활용 : 앱의 뒤로 가기 버튼, 웹 페이지의 이전 페이지 이동 등.
• 특징 : Back 액션 이전에 방문했던 프레이으로 돌아가며, 이전에 사용된 애니메이션 효과를 역방향으로 재생합니다.

8.3.4 스크롤 위치로 이동 (Scroll To)

• 활용 : 웹 페이지의 목차 링크 클릭 시 해당 섹션으로 이동, 긴 약관 동의 페이지에서 특정 항목으로 이동 등
• 설정 : 스크롤될 대상 요소를 선택합니다. Y축 스크롤, X축 스크롤을 지정할 수 있습니다.

8.3.5 외부 링크 열기(Open Link)

클릭 시 외부 웹 페이지를 새 탭으로 여는 액션입니다.

• 활용: 푸터의 외부 사이트 링크, 문의하기 버튼 등.

 

8.4 스마트 애니메이트 (Smart Animate) : 마법같은 애니메이션 구현

스마트 애니메이트는 Figma 프로토타이핑의 가장 강력하고 인상적인 기능 중 하나입니다. 두 개의 프레임 사이에 동일한 이름의 레이어가 존재할 때, Figma가 그 레이어의 속성(위치, 크기, 회전, 불투명도, 색상 등)변화를 자동으로 감지하여 부드러운 전환 애니메이션을 생성합니다. 코딩 없이도 복잡한 마이크로 인터랙션과 트랜지션을 구현할 수 있습니다.

 

8.4.1 스마트 애니메이트 작동 원리

1. 동일한 이름의 레이어 : 두 개의 프레임(시작 프레임과 도착 프레임)에 정확히 동일한 레이어 이름을 가진 요소가 있어야 합니다.(예 : Button/Primary, Profile Image)

2. 속성 변화 : 이 동일한 이름의 레이어들이 시작 프레임과 도착 프레임에서 위치, 크기, 색상, 투명도, 회전 등의 속성에서 변화를 보여야 합니다.

3. 스마트 애니메이트 선택 : 두 프레임 간의 연결 인터렉션에서 Animation을 Smart animate로 설정합니다.

4. 자동 보간 : Figma가 시작 프레임과 도착프레임 사이의 변화를 부드럽게 보간하여 애니메이션을 생성합니다.

 

8.4.2 스마트 애니메이션 활용 예시

• 아코디언/토글 메뉴 : 닫힌 상태와 열린 상태의 아코디언 컴포넌트를 만들고, 동일한 레이어 이름(예 : Content Area)을 가진 요소의 높이만 변경하여 스마트 애니메이트로 부드러운 확장/축소 효과를 만듭니다.
• 탭 전환 : 탭 바의 선택 인디케이터(선 또는 배경)를 각 탭의 위치에 따라 이동시키면서, 스마트 애니메이트를 적용하여 부드러운 슬라이딩 효과를 만듭니다.
• 카드 확장/축소 : 카드 컴포넌트의 축소된 상태와 확장된 상태를 만들고, 텍스트나 이미지의 위치/크기를 변경하여 스마트 애니메이트로 자연스러운 전환 효과를 줍니다.
• 로딩 애니메이션 : 로딩 바의 길이 변화, 원형 프로그레스 바의 회전 등을 스마트 애니메이트로 구현할 수 있습니다.
• 스크롤 패럴랙스 효과 : (고급)여러 레이어를 다른 속도로 스크롤되도록 설정하여 패럴랙스 효과를 만듭니다.(Figma의 Scroll animation 기능과 조합)

팁 : 스마트 애니메이트가 제대로 작동하지 않는다면, 가장 먼저 레이어 이름이 정확히 동일한지 확인해야 합니다. 그룹화된 레이어도 같은 이름으로 그룹화되어 있어야 합니다.

 

8.5 고급 프로토타이핑 기능 및 팁

 

8.5.1 인터랙티브 컴포넌트 (Interactive Components)

인터랙티브 컴포넌트는 베리언트를 기반으로 합니다. 컴포넌트 자체 내에서 인터랙션을 정의하여, 버튼의 호버/클릭 상태, 체크박스 선택/해제, 토글 스위치 On/off 등 작은 단위의 마이크로 인터랙션을 구현할 수 있게 해줍니다.

• 활용 : 이 기능은 마스터 컴포넌트 한 번만 설정하면, 해당 컴포넌트의 모든 인스턴스에서 정의된 인터랙션이 자동으로 작동하므로, 수많은 인스턴스에 일일이 인터랙션을 연결할 필요가 없어 생산성이 획기적으로 향상됩니다.
• 설정 : 마스터 컴포넌트의 베리언트 세트를 선택한 후, Prototype 탭에서 각 베이언트간의 연결을 정의합니다. (예 : Default상태에서 Hover상태로 OnHover 인터랙션 연결)

8.5.2 스크롤 애니메이션(Scroll Animation)

특정 요소가 스크롤 위치에 따라 반응하도록 하는 애니메이션입니다.

• 활용 : 상단 바가 스크롤시 숨겨지거나, 특정 이미지가 스크롤 시 확대/축소되거나, 요소가 서서히 나타나는 효과 등.
• 설정 : Prototype탭에서 스크롤될 요소를 선택하고, When scrolling 옵션을 사용하여 애니메이션을 정의합니다.

8.5.3 조건부 로직(Conditional Logic)

Figma는 최근 Conditional logic 기능을 도입하여, 특정 조건(예 : 변수 값)에 따라 다른 화면으로 이동하거나 다른 인터랙션을 실행하는 더욱 복잡한 프로토타입을 만들 수 있게 되었습니다. 이는 Variables 기능과 함께 사용됩니다. (고급)

 

 

8.5.4 프로토타입 공유 및 댓글

• 공유 : Present모드에서 상단의 Share prototype 버튼을 클릭하여 링크를 복사하고, 이메일이나 메신저로 공유할 수 있습니다. 특정 팀원이나 모든 사람이 볼 수 있도록 접근 권한을 설정할 수 있습니다.

• 댓글 : Present모드에서 상단의 Connet아이콘을 클릭하여 프로토타입의 특정 부분에 직접 댓글을 남길 수 있습니다. 이는 피드백을 수집하고 소통하는데 매우 효과적입니다.

 

8.6 마치며 : 디자인에 생명을 불어넣다.

이번글에서는 Figma의 프로토타입과 인터랙션 기능을 깊이 있게 다루었습니다. 디자인 화면들을 연결하고, 다양한 트리거와 액션, 애니메이션을 활용하여 사용자 경험을 시물레이션하는 방법, 특히 강력한 스마트 애니메이트와 인터랙티브 컴포넌트를 통해 복잡한 인터랙션을 효율적으로 구현하는 방법을 알아보았습니다.

 

프로토타이핑은 디자인 아이디어를 현실로 만들고, 사용자의 피드백을 통해 개선하며, 개발 전 디자인의 완성도를 높이는 데 필수적인 과정입니다. Figma의 프로토타이핑 기능은 코드 없이도 놀랍도록 현실적인 경험을 제공하여, 디자이너가 더욱 효과적으로 소통하고 디자인을 검증할 수 있도록 돕습니다.

 

다음 글에서는 공유 및 협업 : 팀 프로젝트 관리와 버전 컨트롤이라는 주제로, Figma의 강력한 팀 협업 기능을 활용하여 여러 디자이너와 개발자가 하나의 프로젝트를 효율적으로 진행하는 방법에 대해 알아보겠습니다. 프로토타입을 통해 공유하고 피드백을 받는 것의 중요성을 고려할 때, 다음 주제는 여러분의 협업 능력을 한 단계 더 끌어올릴 것입니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!