피그마 사이트
인터랙션 미리보기
Button
버튼을 눌러보세요
Press effect
작동 방식
사용자가 버튼 또는 요소를 클릭할 때 일시적으로 스타일 변화
사용 위치
버튼, 카드, 인터랙티브 컴포넌트
주요 효과
크기 축소, 그림자 제거, 색상 반전 등
디자인 목적
클릭 피드백 제공, 버튼의 반응성 강조
Button
Reveal
작동 방식
스크롤이나 트리거를 통해 요소가 점진적으로 드러남
사용 위치
텍스트, 이미지, 섹션 진입 시
주요 효과
페이드 인, 슬라이드 인 등
디자인 목적
콘텐츠에 리듬감 부여, 사용자 시선 유도
Spin
작동 방식
요소가 회전(360도 또는 일부 각도)하는 애니메이션 효과
사용 위치
아이콘, 로딩 인디케이터, 인터랙션 강조
주요 효과
계속 회전하거나 트리거 시 한 번 회전
디자인 목적
주목성 강화, 움직임으로 기능 전달
Scroll parallax
작동 방식
사용자의 스크롤 위치에 따라 배경 또는 요소가 서로 다른 속도로 이동
사용 위치
히어로 섹션, 배경 이미지 등
주요 효과
foreground와 background의 속도 차
디자인 목적
깊이감, 몰입감, 동적인 화면 구성
Hello
Scroll transform
작동 방식
특정 스크롤 위치에 도달했을 때 요소의 transform 속성이 적용됨
사용 위치
텍스트 강조, 카드, 이미지 애니메이션
주요 효과
확대/축소, 회전, 투명도 변화 등
디자인 목적
진행 방향에 맞는 애니메이션 제공, 몰입 유도
마우스를 올려보세요
Custom cursor
작동 방식
기본 커서를 커스터마이징하여 사이트의 톤앤매너에 맞춤
사용 위치
전체 페이지 또는 특정 영역
주요 효과
원형 커서, 텍스트 커서, 아이콘형 커서 등
디자인 목적
브랜드 아이덴티티 표현, 사용성 향상
피튜를 드래그해서 옮겨보세요
Draggable
작동 방식
사용자가 요소를 마우스로 클릭한 후 원하는 위치로 드래그할 수 있음
사용 위치
카드 정렬, 이미지 갤러리, 게임 등
주요 효과
마우스로 이동 가능한 객체
디자인 목적
사용자 주도형 인터랙션, UX 향상
마우스를 올려보세요
Mouse parallax
작동 방식
사용자의 마우스 위치에 따라 요소들이 미묘하게 따라 움직임
사용 위치
히어로 섹션, 배경 레이어, 인터랙션 카드
주요 효과
마우스 위치 기반의 레이어 이동
디자인 목적
몰입감 부여, 인터랙션 강화
Marquee
작동 방식
텍스트나 요소가 자동으로 좌우 또는 상하로 흐름
사용 위치
브랜드 슬로건, 타이포그래피 애니메이션
주요 효과
무한 루프 스크롤
디자인 목적
정보 강조, 동적인 시선 유도
Typewriter
작동 방식
텍스트가 하나씩 순차적으로 출력되어 마치 타자기로 타이핑되는 듯 보임
사용 위치
히어로 타이틀, 소개 섹션, 콘텐츠 진입부
주요 효과
글자가 한 글자씩 나타나며 시각적 주목도 향상
디자인 목적
몰입감 부여, 사용자의 시선 유도
Scramble text
작동 방식
텍스트가 무작위 문자로 빠르게 변형되다가 최종 텍스트로 고정됨
사용 위치
로딩 화면, 히어로 타이틀, 브랜드 소개 문구
주요 효과
무작위 문자 변화 → 실제 텍스트로 전환
디자인 목적
긴장감과 기대감 조성, 미래지향적 느낌 강화
캐릭터를 클릭해 보세요
Light box
작동 방식
이미지를 클릭하면 전체화면 또는 오버레이로 확대되어 보여짐
사용 위치
갤러리, 썸네일 이미지, 제품 상세 이미지
주요 효과
클릭 시 이미지 확대 및 배경 어둡게 처리
디자인 목적
콘텐츠에 집중 유도, 고해상도 이미지 제공
인터랙션 적용 사이트 구경하기
Figma pedia
@siwon.designer
피그마 사이트
인터랙션 미리보기
Button
버튼을 눌러보세요
Press effect
작동 방식
사용자가 버튼 또는 요소를 클릭할 때 일시적으로 스타일 변화
사용 위치
버튼, 카드, 인터랙티브 컴포넌트
주요 효과
크기 축소, 그림자 제거, 색상 반전 등
디자인 목적
클릭 피드백 제공, 버튼의 반응성 강조
Button
Reveal
작동 방식
스크롤이나 트리거를 통해 요소가 점진적으로 드러남
사용 위치
텍스트, 이미지, 섹션 진입 시
주요 효과
페이드 인, 슬라이드 인 등
디자인 목적
콘텐츠에 리듬감 부여, 사용자 시선 유도
Spin
작동 방식
요소가 회전(360도 또는 일부 각도)하는 애니메이션 효과
사용 위치
아이콘, 로딩 인디케이터, 인터랙션 강조
주요 효과
계속 회전하거나 트리거 시 한 번 회전
디자인 목적
주목성 강화, 움직임으로 기능 전달
Scroll parallax
작동 방식
사용자의 스크롤 위치에 따라 배경 또는 요소가 서로 다른 속도로 이동
사용 위치
히어로 섹션, 배경 이미지 등
주요 효과
foreground와 background의 속도 차
디자인 목적
깊이감, 몰입감, 동적인 화면 구성
Hello
Scroll transform
작동 방식
특정 스크롤 위치에 도달했을 때 요소의 transform 속성이 적용됨
사용 위치
텍스트 강조, 카드, 이미지 애니메이션
주요 효과
확대/축소, 회전, 투명도 변화 등
디자인 목적
진행 방향에 맞는 애니메이션 제공, 몰입 유도
마우스를 올려보세요
Custom cursor
작동 방식
기본 커서를 커스터마이징하여 사이트의 톤앤매너에 맞춤
사용 위치
전체 페이지 또는 특정 영역
주요 효과
원형 커서, 텍스트 커서, 아이콘형 커서 등
디자인 목적
브랜드 아이덴티티 표현, 사용성 향상
피튜를 드래그해서 옮겨보세요
Draggable
작동 방식
사용자가 요소를 마우스로 클릭한 후 원하는 위치로 드래그할 수 있음
사용 위치
카드 정렬, 이미지 갤러리, 게임 등
주요 효과
마우스로 이동 가능한 객체
디자인 목적
사용자 주도형 인터랙션, UX 향상
마우스를 올려보세요
Mouse parallax
작동 방식
사용자의 마우스 위치에 따라 요소들이 미묘하게 따라 움직임
사용 위치
히어로 섹션, 배경 레이어, 인터랙션 카드
주요 효과
마우스 위치 기반의 레이어 이동
디자인 목적
몰입감 부여, 인터랙션 강화
Marquee
작동 방식
텍스트나 요소가 자동으로 좌우 또는 상하로 흐름
사용 위치
브랜드 슬로건, 타이포그래피 애니메이션
주요 효과
무한 루프 스크롤
디자인 목적
정보 강조, 동적인 시선 유도
Typewriter
작동 방식
텍스트가 하나씩 순차적으로 출력되어 마치 타자기로 타이핑되는 듯 보임
사용 위치
히어로 타이틀, 소개 섹션, 콘텐츠 진입부
주요 효과
글자가 한 글자씩 나타나며 시각적 주목도 향상
디자인 목적
몰입감 부여, 사용자의 시선 유도
Scramble text
작동 방식
텍스트가 무작위 문자로 빠르게 변형되다가 최종 텍스트로 고정됨
사용 위치
로딩 화면, 히어로 타이틀, 브랜드 소개 문구
주요 효과
무작위 문자 변화 → 실제 텍스트로 전환
디자인 목적
긴장감과 기대감 조성, 미래지향적 느낌 강화
캐릭터를 클릭해 보세요
Light box
작동 방식
이미지를 클릭하면 전체화면 또는 오버레이로 확대되어 보여짐
사용 위치
갤러리, 썸네일 이미지, 제품 상세 이미지
주요 효과
클릭 시 이미지 확대 및 배경 어둡게 처리
디자인 목적
콘텐츠에 집중 유도, 고해상도 이미지 제공
인터랙션 적용 사이트 구경하기
Figma pedia
@siwon.designer
피그마 사이트
인터랙션 미리보기
Button
버튼을 눌러보세요
Press effect
작동 방식
사용자가 버튼 또는 요소를 클릭할 때 일시적으로 스타일 변화
사용 위치
버튼, 카드, 인터랙티브 컴포넌트
주요 효과
크기 축소, 그림자 제거, 색상 반전 등
디자인 목적
클릭 피드백 제공, 버튼의 반응성 강조
Button
Reveal
작동 방식
스크롤이나 트리거를 통해 요소가 점진적으로 드러남
사용 위치
텍스트, 이미지, 섹션 진입 시
주요 효과
페이드 인, 슬라이드 인 등
디자인 목적
콘텐츠에 리듬감 부여, 사용자 시선 유도
Spin
작동 방식
요소가 회전(360도 또는 일부 각도)하는 애니메이션 효과
사용 위치
아이콘, 로딩 인디케이터, 인터랙션 강조
주요 효과
계속 회전하거나 트리거 시 한 번 회전
디자인 목적
주목성 강화, 움직임으로 기능 전달
Scroll parallax
작동 방식
사용자의 스크롤 위치에 따라 배경 또는 요소가 서로 다른 속도로 이동
사용 위치
히어로 섹션, 배경 이미지 등
주요 효과
foreground와 background의 속도 차
디자인 목적
깊이감, 몰입감, 동적인 화면 구성
Hello
Scroll transform
작동 방식
특정 스크롤 위치에 도달했을 때 요소의 transform 속성이 적용됨
사용 위치
텍스트 강조, 카드, 이미지 애니메이션
주요 효과
확대/축소, 회전, 투명도 변화 등
디자인 목적
진행 방향에 맞는 애니메이션 제공, 몰입 유도
마우스를 올려보세요
Custom cursor
작동 방식
기본 커서를 커스터마이징하여 사이트의 톤앤매너에 맞춤
사용 위치
전체 페이지 또는 특정 영역
주요 효과
원형 커서, 텍스트 커서, 아이콘형 커서 등
디자인 목적
브랜드 아이덴티티 표현, 사용성 향상
피튜를 드래그해서 옮겨보세요
Draggable
작동 방식
사용자가 요소를 마우스로 클릭한 후 원하는 위치로 드래그할 수 있음
사용 위치
카드 정렬, 이미지 갤러리, 게임 등
주요 효과
마우스로 이동 가능한 객체
디자인 목적
사용자 주도형 인터랙션, UX 향상
마우스를 올려보세요
Mouse parallax
작동 방식
사용자의 마우스 위치에 따라 요소들이 미묘하게 따라 움직임
사용 위치
히어로 섹션, 배경 레이어, 인터랙션 카드
주요 효과
마우스 위치 기반의 레이어 이동
디자인 목적
몰입감 부여, 인터랙션 강화
Marquee
작동 방식
텍스트나 요소가 자동으로 좌우 또는 상하로 흐름
사용 위치
브랜드 슬로건, 타이포그래피 애니메이션
주요 효과
무한 루프 스크롤
디자인 목적
정보 강조, 동적인 시선 유도
Typewriter
작동 방식
텍스트가 하나씩 순차적으로 출력되어 마치 타자기로 타이핑되는 듯 보임
사용 위치
히어로 타이틀, 소개 섹션, 콘텐츠 진입부
주요 효과
글자가 한 글자씩 나타나며 시각적 주목도 향상
디자인 목적
몰입감 부여, 사용자의 시선 유도
Scramble text
작동 방식
텍스트가 무작위 문자로 빠르게 변형되다가 최종 텍스트로 고정됨
사용 위치
로딩 화면, 히어로 타이틀, 브랜드 소개 문구
주요 효과
무작위 문자 변화 → 실제 텍스트로 전환
디자인 목적
긴장감과 기대감 조성, 미래지향적 느낌 강화
캐릭터를 클릭해 보세요
Light box
작동 방식
이미지를 클릭하면 전체화면 또는 오버레이로 확대되어 보여짐
사용 위치
갤러리, 썸네일 이미지, 제품 상세 이미지
주요 효과
클릭 시 이미지 확대 및 배경 어둡게 처리
디자인 목적
콘텐츠에 집중 유도, 고해상도 이미지 제공
인터랙션 적용 사이트 구경하기
Figma pedia
@siwon.designer