Figma Site 인터렉션 활용해서 퀄리티 높이기 – 피그마 강좌 4-6

안녕하세요. 이번 강의에서는 피그마(Figma)의 Site 기능 내 인터랙션(Interaction) 설정을 통해 웹사이트에 생동감을 더하는 방법을 실습 중심으로 알아봅니다. 정적인 디자인을 넘어, 사용자 반응에 따라 애니메이션이 적용되는 인터랙션은 현대적인 웹사이트 제작에 있어 중요한 요소입니다.
이번 영상에서는 커스텀 커서부터 마우스 패럴럭스, Reveal, Scroll Transform 등 다양한 기능을 실제 프로젝트에 적용해보며 그 차이를 체감할 수 있도록 구성했습니다.
이번 강의에서는 다음과 같은 내용을 실습과 함께 자세히 다룹니다.

• 인터랙션 패널 기본 구조 이해
• 커스텀 커서 설정 및 활용
• 코드 기반 인터랙션 생성 (Make interactive with code)
• 링크 연결 및 컴포넌트 효율화 방법
• Reveal, Scroll Parallax, Scroll Transform Marquee, Typewriter, Spin, Draggable, Scramble Text, Mouse Parallax 등 효과 활용

인터랙션 패널 사용법

인터랙션 기능은 우측 패널의 interaction 탭에서 설정할 수 있습니다.

• 프레임 전체를 선택하면 Scroll behavior와 Custom cursor 옵션이 제공됩니다.
• 프레임 내부 요소를 선택하면 Link, Interactions, Accessibility, Make interactive with code 등의 세부 옵션이 활성화됩니다.

커스텀 커서

웹사이트에서 마우스 커서를 디자인 요소로 변경할 수 있는 기능입니다.

일반적인 사용성 측면에서는 권장되지 않지만, 브랜딩 포인트로 활용할 수 있으니 빠르게 다뤄볼게요.

1. 커서 디자인을 한 특정 레이어를 만듭니다. 크기는 자유롭게 가능하지만 저는 가로폭을 20으로 할게요.
2. 커스텀 커서에서 프레임 또는 이미지를 선택해서 사용
3. Hotspot 위치는 일반적으로 Top Left로 지정

Make interactive with code

텍스트에 인터렉션을 걸어볼게요.

GPT나 Gemini처럼 프롬프트 기반으로 코드 기반 인터랙션을 자동 생성할 수 있는 기능입니다.

예시 프롬프트

“한글 텍스트를 글자 하나씩 랜덤으로 애니메이션되며 나타나게 하고 싶습니다. 각 글자는 opacity로 서서히 나타나고, reveal 간격은 조절 가능하게 만들고 싶습니다.”

해당 명령에 따라 애니메이션이 적용된 예시를 미리보기를 통해 보여줍니다.

경우에 따라 duration이나 딜레이에 대한 속성을 나타내주는데, 그걸 조절할수도 있어요. 우측에도 나오게 되죠. 물론, 의도한 결과물이 아니거나, 에러가 나는 경우에는 지속적으로 채팅으로 명령을 통해 처리할 수 있어요.

그리고 이런 코드로 만든 인터렉션이 적용된 경우에는 다른 인터렉션 사용은 안됩니다.

복원

원래 디자인으로 복원하고싶다면, 우측 더보기 메뉴를 눌러서 Restore original design을 누르시면 됩니다.

Link 기능

페이지 이동시에 처리할 링크입니다.

버튼이나 콘텐츠, 네비게이션 등에 연결해서 사용할 수 있겠죠? 링크는 현재 페이지 내에 있는 링크로 처리할수도 있고, url로 연결할수도 있습니다.

컴포넌트 활용

페이지 간 이동을 위한 기능으로, 버튼이나 네비게이션 등 다양한 컴포넌트에 링크를 연결할 수 있습니다.

• 내부 페이지 이동
• 외부 URL 연결

컴포넌트 활용 팁

반복 사용되는 헤더, 푸터, 사이드바 등에 링크를 설정하고, 인스턴스 컴포넌트로 활용하면 효율적입니다.

인터렉션 프리셋

이제, 주요 인터렉션 프리셋들을 살펴볼게요. interactions + 누르면 여러가지가 나오죠. 우리가 이전에 프로토타입 탭에서 배워본 기능들은 건너뛰고, 새롭게 알아둬야 하는 것들만 직접 적용해볼게요.

• Reveal
• Scroll parallax
• Scroll transform
• Marquee
• Play
  • Spin
  • Typewriter
  • Draggable
  • Scramble text
  • Mouse parallax

Reveal – 등장 애니메이션

요소가 화면에 나타나거나 사라질 때 애니메이션을 설정하는 기능입니다. 가장 많이 사용하는 효과중 하나죠!

해당 인터렉션을 적용하면 가장 기본이 되는 구조 4가지 옵션이 나오는 데 살펴볼게요.

항목	설명
Trigger	언제 애니메이션이 시작될지: 스크롤(In view), 페이지 로딩(Page load), 다른 요소가 보일 때(Other layer in view)
Enter	요소가 등장할 때 애니메이션
Exit	요소가 사라질 때 애니메이션
Replay	스크롤로 다시 들어올 때 반복할지 여부

Trigger

어떤 조건에서 애니메이션이 시작될지를 정하는 옵션입니다.

옵션	의미
In view	요소가 스크롤로 화면에 들어올 때 실행
Page load	페이지 로딩 시 자동 실행
Other layer in view	특정 레이어가 보일 때 다른 요소에 애니메이션 적용

Enter (입장 애니메이션)

요소가 나타날 때 어떻게 보여질지를 설정합니다.

• 기본값으로 Fade In, Slide In, Zoom In 같은 애니메이션이 제공됩니다.
• 우측 화살표를 선택하면 사용자가 직접 타이밍, 모션 등을 조절한 애니메이션을 만들 수 있습니다.
• 투명도나 스케일, 좌우 이동, 회전등도 줄수있고, 트랜지션 타이밍도 조정 가능함.

Exit (퇴장 애니메이션)

요소가 화면에서 사라질 때의 애니메이션을 정의합니다.

• 예: 스크롤로 요소가 뷰포트에서 벗어날 때 Fade Out, Slide Out 등으로 처리
• None으로 설정하면 아무 퇴장 효과 없이 그냥 사라짐

Replay (재실행)

• 사용자가 스크롤로 다시 해당 요소를 화면에 넣었을 때, 애니메이션이 한 번만 실행될지, 반복 실행할지를 결정합니다.
• 체크하면 다시 스크롤될 때마다 애니메이션이 재생되고 / – 로 설정하면 한 번만 실행되고 끝납니다.

Scroll Parallax – 시차 효과

스크롤에 따라 요소가 느리게 혹은 빠르게 움직이며 입체감 있는 효과를 만듭니다.

• Speed 값 조정 가능 (예: 95%로 설정 시 느린 시차)
• 배경 이미지나 요소에 적절히 활용 시 세련된 페이지 연출 가능

스크롤 트랜드폼이랑 같이 활용하면 더 고급지게 가능합니다.

Scroll Transform – 스크롤 기반 요소 변화

스크롤에 따라 사이즈, 위치, 투명도 등의 변화를 적용할 수 있습니다.

트리거는 어떠한 시점을 선택하는 것인데, 이때 In view, On scroll, Other layer in view 옵션 선택 가능함.

Marquee – 무한 스크롤 텍스트

텍스트나 이미지 요소를 무한 반복으로 가로로 이동시키는 애니메이션입니다.

• 방향: 좌 → 우, 우 → 좌
• 속도 설정 가능
• Infinite 여부 선택 가능

Play – 다양한 애니메이션 모음

피그마의 Play 기능은 사용자가 상호작용하거나 특정 조건이 충족되었을 때 실행되는 다양한 애니메이션을 포함합니다.

효과	설명
Spin	요소 회전 애니메이션
Typewriter	텍스트가 한 글자씩 나타나는 타자기 효과
Draggable	요소를 마우스로 드래그 가능 (Momentum 설정 시 더 자연스러움)
Scramble Text	글자가 랜덤하게 뒤섞이며 나타남
Mouse Parallax	마우스 움직임에 따라 요소가 미묘하게 따라 움직임

Spin – 요소 회전 효과

Spin은 요소를 회전시키는 인터랙션으로, 버튼보다는 장식적 아이콘이나 백그라운드 요소에 활용할 때 더 자연스럽습니다.

과도한 회전 애니메이션은 시각적으로 부담을 줄 수 있으며, 파워포인트 느낌처럼 촌스러워 보일 수 있으니 절제된 사용이 필요합니다.

• 회전 방향: Clockwise 또는 Counterclockwise
• 속도: Slow, Normal, Fast
• 트리거: On view 또는 On click

Typewriter – 타자기 스타일 텍스트 애니메이션

Typewriter는 텍스트가 한 글자씩 순차적으로 나타나는 효과로, 집중도를 높이거나 메시지를 강조할 때 유용합니다.

• 텍스트 레이어에만 적용 가능
• 속도 조절 가능
• Loop 설정 및 커서 깜빡임 효과 ON/OFF 가능

슬로건, 소개문구, 또는 영웅 섹션의 주제 문구에 적용하면 임팩트를 줄 수 있습니다.

Draggable – 요소 드래그 기능

Draggable은 사용자가 요소를 마우스로 직접 끌어 움직일 수 있게 만드는 기능입니다.

• Momentum 옵션을 활성화하면 손을 놓은 방향으로 자연스럽게 튕기듯 이동하다가 서서히 멈춤
• 옵션을 끄면 즉시 멈추는 방식으로 작동

스마트폰에서 사진 갤러리를 드래그할 때처럼 자연스럽고 부드러운 사용자 경험을 제공합니다. 인터랙티브 카드나 슬라이더 UI에 적합합니다.

Scramble Text – 무작위 텍스트 애니메이션

Scramble Text는 글자가 무작위로 섞이면서 최종 텍스트로 정렬되는 애니메이션입니다.

• 역동적인 분위기를 줄 수 있는 효과이지만, 다소 과하게 보일 수 있어 주의가 필요합니다.
• 보통 로딩 중 애니메이션이나 게임 스타일 UI에서 사용됩니다.

일반 웹사이트보다는 실험적이거나 캐주얼한 프로젝트에 어울립니다.

Mouse Parallax – 마우스 기반 움직임 효과

Mouse Parallax는 사용자의 마우스 위치에 따라 요소가 미묘하게 따라 움직이는 효과를 부여합니다.

• 마우스 이동에 따라 X, Y 축으로 자연스럽게 반응
• 요소에 깊이감과 반응성을 부여해 사용자의 몰입도를 높임

버튼, 배경 이미지, 카드형 요소 등에 적용하면 시선을 끌 수 있으며, 고급 인터랙션을 구현한 듯한 효과를 연출할 수 있습니다.

지금까지 배운 피그마의 인터랙션 기능들, 직접 활용해보면 정말 차이를 느끼실 수 있을 거예요. 정적인 UI에서 벗어나 생동감 있는 화면을 만들고 싶다면, 꼭 한번 적용해보시길 추천드립니다!