안녕하세요. 이번 강의에서는 피그마(Figma)의 Site 기능 내 인터랙션(Interaction) 설정을 통해 웹사이트에 생동감을 더하는 방법을 실습 중심으로 알아봅니다. 정적인 디자인을 넘어, 사용자 반응에 따라 애니메이션이 적용되는 인터랙션은 현대적인 웹사이트 제작에 있어 중요한 요소입니다.
이번 영상에서는 커스텀 커서부터 마우스 패럴럭스, Reveal, Scroll Transform 등 다양한 기능을 실제 프로젝트에 적용해보며 그 차이를 체감할 수 있도록 구성했습니다.
이번 강의에서는 다음과 같은 내용을 실습과 함께 자세히 다룹니다.
인터랙션 기능은 우측 패널의 interaction 탭에서 설정할 수 있습니다.
Scroll behavior와 Custom cursor 옵션이 제공됩니다.Link, Interactions, Accessibility, Make interactive with code 등의 세부 옵션이 활성화됩니다.웹사이트에서 마우스 커서를 디자인 요소로 변경할 수 있는 기능입니다.
일반적인 사용성 측면에서는 권장되지 않지만, 브랜딩 포인트로 활용할 수 있으니 빠르게 다뤄볼게요.
Top Left로 지정텍스트에 인터렉션을 걸어볼게요.
GPT나 Gemini처럼 프롬프트 기반으로 코드 기반 인터랙션을 자동 생성할 수 있는 기능입니다.
“한글 텍스트를 글자 하나씩 랜덤으로 애니메이션되며 나타나게 하고 싶습니다. 각 글자는 opacity로 서서히 나타나고, reveal 간격은 조절 가능하게 만들고 싶습니다.”
해당 명령에 따라 애니메이션이 적용된 예시를 미리보기를 통해 보여줍니다.
경우에 따라 duration이나 딜레이에 대한 속성을 나타내주는데, 그걸 조절할수도 있어요. 우측에도 나오게 되죠. 물론, 의도한 결과물이 아니거나, 에러가 나는 경우에는 지속적으로 채팅으로 명령을 통해 처리할 수 있어요.
그리고 이런 코드로 만든 인터렉션이 적용된 경우에는 다른 인터렉션 사용은 안됩니다.
원래 디자인으로 복원하고싶다면, 우측 더보기 메뉴를 눌러서 Restore original design을 누르시면 됩니다.
페이지 이동시에 처리할 링크입니다.
버튼이나 콘텐츠, 네비게이션 등에 연결해서 사용할 수 있겠죠? 링크는 현재 페이지 내에 있는 링크로 처리할수도 있고, url로 연결할수도 있습니다.
페이지 간 이동을 위한 기능으로, 버튼이나 네비게이션 등 다양한 컴포넌트에 링크를 연결할 수 있습니다.
반복 사용되는 헤더, 푸터, 사이드바 등에 링크를 설정하고, 인스턴스 컴포넌트로 활용하면 효율적입니다.
이제, 주요 인터렉션 프리셋들을 살펴볼게요. interactions + 누르면 여러가지가 나오죠. 우리가 이전에 프로토타입 탭에서 배워본 기능들은 건너뛰고, 새롭게 알아둬야 하는 것들만 직접 적용해볼게요.
요소가 화면에 나타나거나 사라질 때 애니메이션을 설정하는 기능입니다. 가장 많이 사용하는 효과중 하나죠!
해당 인터렉션을 적용하면 가장 기본이 되는 구조 4가지 옵션이 나오는 데 살펴볼게요.
| 항목 | 설명 |
|---|---|
| Trigger | 언제 애니메이션이 시작될지: 스크롤(In view), 페이지 로딩(Page load), 다른 요소가 보일 때(Other layer in view) |
| Enter | 요소가 등장할 때 애니메이션 |
| Exit | 요소가 사라질 때 애니메이션 |
| Replay | 스크롤로 다시 들어올 때 반복할지 여부 |
어떤 조건에서 애니메이션이 시작될지를 정하는 옵션입니다.
| 옵션 | 의미 |
|---|---|
| In view | 요소가 스크롤로 화면에 들어올 때 실행 |
| Page load | 페이지 로딩 시 자동 실행 |
| Other layer in view | 특정 레이어가 보일 때 다른 요소에 애니메이션 적용 |
요소가 나타날 때 어떻게 보여질지를 설정합니다.
요소가 화면에서 사라질 때의 애니메이션을 정의합니다.
Fade Out, Slide Out 등으로 처리None으로 설정하면 아무 퇴장 효과 없이 그냥 사라짐스크롤에 따라 요소가 느리게 혹은 빠르게 움직이며 입체감 있는 효과를 만듭니다.
Speed 값 조정 가능 (예: 95%로 설정 시 느린 시차)스크롤 트랜드폼이랑 같이 활용하면 더 고급지게 가능합니다.
스크롤에 따라 사이즈, 위치, 투명도 등의 변화를 적용할 수 있습니다.
트리거는 어떠한 시점을 선택하는 것인데, 이때 In view, On scroll, Other layer in view 옵션 선택 가능함.
텍스트나 이미지 요소를 무한 반복으로 가로로 이동시키는 애니메이션입니다.
Infinite 여부 선택 가능피그마의 Play 기능은 사용자가 상호작용하거나 특정 조건이 충족되었을 때 실행되는 다양한 애니메이션을 포함합니다.
| 효과 | 설명 |
|---|---|
| Spin | 요소 회전 애니메이션 |
| Typewriter | 텍스트가 한 글자씩 나타나는 타자기 효과 |
| Draggable | 요소를 마우스로 드래그 가능 (Momentum 설정 시 더 자연스러움) |
| Scramble Text | 글자가 랜덤하게 뒤섞이며 나타남 |
| Mouse Parallax | 마우스 움직임에 따라 요소가 미묘하게 따라 움직임 |
Spin은 요소를 회전시키는 인터랙션으로, 버튼보다는 장식적 아이콘이나 백그라운드 요소에 활용할 때 더 자연스럽습니다.
과도한 회전 애니메이션은 시각적으로 부담을 줄 수 있으며, 파워포인트 느낌처럼 촌스러워 보일 수 있으니 절제된 사용이 필요합니다.
Clockwise 또는 CounterclockwiseSlow, Normal, FastOn view 또는 On clickTypewriter는 텍스트가 한 글자씩 순차적으로 나타나는 효과로, 집중도를 높이거나 메시지를 강조할 때 유용합니다.
슬로건, 소개문구, 또는 영웅 섹션의 주제 문구에 적용하면 임팩트를 줄 수 있습니다.
Draggable은 사용자가 요소를 마우스로 직접 끌어 움직일 수 있게 만드는 기능입니다.
스마트폰에서 사진 갤러리를 드래그할 때처럼 자연스럽고 부드러운 사용자 경험을 제공합니다. 인터랙티브 카드나 슬라이더 UI에 적합합니다.
Scramble Text는 글자가 무작위로 섞이면서 최종 텍스트로 정렬되는 애니메이션입니다.
일반 웹사이트보다는 실험적이거나 캐주얼한 프로젝트에 어울립니다.
Mouse Parallax는 사용자의 마우스 위치에 따라 요소가 미묘하게 따라 움직이는 효과를 부여합니다.
버튼, 배경 이미지, 카드형 요소 등에 적용하면 시선을 끌 수 있으며, 고급 인터랙션을 구현한 듯한 효과를 연출할 수 있습니다.
지금까지 배운 피그마의 인터랙션 기능들, 직접 활용해보면 정말 차이를 느끼실 수 있을 거예요. 정적인 UI에서 벗어나 생동감 있는 화면을 만들고 싶다면, 꼭 한번 적용해보시길 추천드립니다!
로그인 후 이 콘텐츠를 이용할 수 있습니다.
강좌 공지가 등록되면 이곳에서 확인할 수 있습니다.