디자인 오픈북

탭 바 인터랙션

하단 탭 바에는 어떤 애니메이션을 넣는 것이 좋은가요? 슬라이딩 인디케이터와 아이콘 채움 전환을 200ms 안팎으로 쓰는 것이 기본이고, 뒤집기나 입자 효과는 재미가 목적일 때만 씁니다.

하루에 가장 많이 누르는 곳이라 효과는 짧고 분명해야 합니다. 화려함보다 어디로 왔는지가 보이는 게 중요합니다.

이름과 미리보기

미리보기를 누르면 멈추고, 다시 누르면 재생합니다.

  1. 슬라이딩 인디케이터

    Sliding indicator

    밑줄이나 알약 모양 선택 표시가 누른 탭으로 미끄러짐

  2. 아이콘 채움 전환

    Outline-to-filled icon

    선 아이콘이 채워진 아이콘으로 바뀜

  3. 라벨 펼침

    Expanding label

    선택된 탭만 글자가 옆으로 펼쳐짐

  4. 아이콘 튐

    Icon bounce

    누른 아이콘이 살짝 튀었다 자리를 잡음

  5. 뒤집기·입자

    3D flip / Particles

    아이콘이 뒤집히거나 입자가 퍼짐. 장식성이 강함

이렇게 씁니다

  • 기본은 슬라이딩 인디케이터 + 아이콘 채움 전환. 200ms 안팎이면 충분합니다.
  • 뒤집기·입자처럼 장식이 큰 효과는 게임이나 아이용 앱처럼 재미가 목적일 때만 씁니다.
  • 이미 선택된 탭을 다시 누르면 목록 맨 위로 올라가게 합니다. 사용자들이 이미 익숙한 동작입니다.

복사해서 쓰는 프롬프트

탭 바 4개

하단 탭 바 4개에 인터랙션을 넣어 줘.
- 선택 표시는 알약 모양 배경이 누른 탭으로 미끄러지는 슬라이딩 인디케이터(Sliding indicator), 220ms 스프링.
- 선택된 탭 아이콘은 선에서 채움(Outline-to-filled)으로 전환.
- 이미 선택된 탭을 다시 누르면 목록 맨 위로 스크롤.
- transform과 opacity만 사용.

참고한 게시물: @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts

전체 카드 보기 (27)