안녕하세요 피피팀 시원
입니다.
입니다.이번 주에는 Figma Site에서 활용할 수 있는 인터랙션 효과 12가지를 소개해드릴게요.
저도 처음엔 텍스트 설명만으로는 어떤 인터랙션인지 감이 잘 오지 않았는데, 공부도 할 겸 여러분과 함께 공유하려고 인터랙션을 직접 미리볼 수 있는 사이트를 만들어봤습니다.
이미 월간피디아에서 받아가신 분들도 계실 텐데요, 도움이 되셨을까요? Figma Site로 제작했으니, 들어오셔서 구경도 하고 함께 공부해보세요!
Press effect
클릭 시 버튼이나 카드에 시각적 ‘눌림’ 효과를 주고 크기·그림자를 변화시켜 인터랙션 피드백을 강화합니다. Reveal
클릭 또는 호버 시 숨겨진 요소를 노출하며, 노출 방향도 자유롭게 지정할 수 있어요. 이미지 카드, 리스트 등에 효과적입니다. Spin
자동으로 지속 회전하는 애니메이션입니다. 회전 속도와 방향을 설정할 수 있어 로딩 아이콘이나 배경 요소에 활용됩니다. Scroll parallax
스크롤에 따라 배경이나 이미지가 다른 속도로 이동해 깊이감을 주는 효과입니다. 히어로 이미지나 랜딩 페이지에서 많이 사용됩니다. Scroll transform
스크롤 시 특정 요소의 위치나 크기를 변화시켜 동적인 페이지 흐름을 만듭니다. Custom cursor
특수 아이콘이나 브랜드에 맞춘 사용자 정의 커서를 적용해 인터랙션의 개성을 높입니다. Draggable
드래그로 오브젝트를 움직일 수 있게 해줍니다. 이미지나 카드 등 제한적인 상호작용에 적합합니다. Mouse parallax
마우스 이동에 따라 배경이나 이미지가 반응하여 입체감을 구현합니다. Marquee
텍스트 배너나 로고를 반복 스크롤시키는 효과입니다. 속도와 방향을 조절할 수 있어 무한 슬라이드에 유용합니다. Typewriter
텍스트를 한 글자씩 나타나게 하여 시각적 주목도를 높입니다. 소개 섹션이나 타이틀에 효과적입니다. Scramble text
문자가 무작위로 섞였다가 실제 텍스트로 변환되는 애니메이션입니다. 로딩 화면이나 키 비주얼에 활용됩니다. Light box
이미지를 클릭하면 확대하고 배경을 어둡게 처리해 집중도를 높입니다. 썸네일 클릭 시 상세 보기 기능으로 자주 쓰입니다.
