디자인 오픈북

손으로 미는 요소: 스와이프·FAB·캐러셀·메뉴

스와이프, 캐러셀, FAB 같은 제스처 UI는 어떻게 만들어야 하나요? 손가락을 그대로 따라오게 하고, 스와이프 기능에는 다른 길도 두며, 캐러셀은 다음 카드를 10~20% 보이게 하고 자동 넘김은 쓰지 않습니다.

끌거나 밀어서 쓰는 요소는 손가락을 그대로 따라와야 합니다. 손을 뗀 뒤에도 그 속도를 이어받아 움직여야 자연스럽습니다.

이름과 미리보기

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

  1. 스와이프 액션

    Swipe actions

    목록 줄을 옆으로 밀면 삭제·보관 버튼이 드러남

  2. FAB 펼침

    Speed dial FAB

    떠 있는 버튼을 누르면 하위 버튼 여러 개가 펼쳐짐

  3. 스크롤 시 숨는 FAB

    Hide-on-scroll FAB

    내리면 숨고 올리면 다시 나타남

  4. 캐러셀

    Carousel

    옆으로 넘기는 카드 묶음

  5. 다음 카드 엿보기

    Peek

    다음 카드를 가장자리에 살짝 보여 줌

  6. 스냅

    Scroll snap

    넘기다 놓으면 카드가 정확한 위치에 멈춤

  7. 메뉴 펼침

    Menu reveal

    메뉴가 누른 버튼 위치에서 커지며 나타남

이렇게 씁니다

  • 스와이프로 지우는 기능에는 항상 다른 길(케밥 메뉴 등)도 둡니다. 스와이프는 숨은 기능이라 모르는 사람이 많습니다.
  • 스와이프로 지운 뒤에는 실행 취소 스낵바를 띄웁니다.
  • 캐러셀은 다음 카드를 10~20% 보이게 해서 옆에 더 있다는 걸 알려 줍니다. 자동 넘김은 쓰지 않습니다.
  • 메뉴와 팝오버는 누른 버튼 쪽에서 커지게 합니다(transform-origin). 화면 가운데서 커지면 어디서 나왔는지 모릅니다.

복사해서 쓰는 프롬프트

메일 목록 스와이프

메일 목록에 스와이프 액션(Swipe actions)을 넣어 줘.
- 왼쪽으로 밀면 빨간 [삭제], 오른쪽으로 밀면 [보관].
- 손가락을 그대로 따라오고, 화면 폭의 40% 이상 밀고 놓으면 실행. 아니면 스프링으로 제자리.
- 실행 후 "삭제했습니다 [실행 취소]" 스낵바 4초.
- 같은 기능을 각 줄의 케밥 메뉴에도 넣어 줘.

카드 캐러셀

추천 상품 캐러셀(Carousel)을 만들어 줘.
- 다음 카드가 오른쪽에 15% 보이는 엿보기(Peek).
- 손을 놓으면 카드 단위로 멈추는 스냅(Scroll snap).
- 자동 넘김 없음. 아래에 현재 위치 점 표시.

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

전체 카드 보기 (27)