디자인 오픈북

닮았지만 다른 컴포넌트 짝

모달과 바텀시트, 토스트와 스낵바처럼 비슷한 UI 컴포넌트는 어떻게 다른가요? 모달은 화면 중앙에 뜨고 바텀시트는 아래에서 올라오며, 토스트는 잠깐 보이고 스낵바는 실행 취소 같은 버튼이 붙습니다.

생김새는 비슷한데 하는 일이 다른 요소들입니다. 짝으로 외워 두면 기획서와 프롬프트가 정확해집니다.

이름과 미리보기

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

  1. 드롭다운 ↔ 셀렉트

    Dropdown menu ↔ Select

    고르면 바로 실행되는 메뉴 ↔ 고른 값이 칸에 남는 입력

  2. 버튼 ↔ 링크

    Button ↔ Link

    무언가를 실행 ↔ 다른 곳으로 이동

  3. 라벨 ↔ 플레이스홀더

    Label ↔ Placeholder

    입력해도 남는 칸 이름 ↔ 입력하면 사라지는 예시 글

  4. 토글 ↔ 체크박스

    Toggle switch ↔ Checkbox

    누르는 즉시 적용 ↔ 저장해야 반영

  5. 모달 ↔ 바텀시트

    Modal ↔ Bottom sheet

    화면 중앙에 뜨는 창 ↔ 아래에서 밀려 올라오는 판

  6. 토스트 ↔ 스낵바

    Toast ↔ Snackbar

    잠깐 보이고 사라지는 알림 ↔ "실행 취소" 같은 버튼이 붙은 알림

  7. 앱 바 ↔ 탭 바

    Top app bar ↔ Tab bar

    위쪽 제목 줄 ↔ 아래쪽 메뉴 줄

  8. 카드 ↔ 리스트

    Card ↔ List

    칸 단위로 나눠 보여 줌 ↔ 줄 단위로 이어 보여 줌

  9. 아바타 ↔ 썸네일

    Avatar ↔ Thumbnail

    사람을 나타내는 작은 그림 ↔ 콘텐츠 미리보기 그림

  10. 배너 ↔ 팝업

    Banner ↔ Popup

    화면 한쪽에 붙은 띠 ↔ 화면을 가리고 뜨는 창

  11. FAB ↔ 아이콘 버튼

    Floating action button ↔ Icon button

    화면 위에 떠 있는 가장 중요한 버튼 ↔ 작은 보조 버튼

이렇게 씁니다

  • 토글은 바로 적용되는 설정에만 씁니다. 저장 버튼이 있는 폼 안에 토글을 넣으면 사용자는 이미 적용된 줄 압니다.
  • 플레이스홀더만 두고 라벨을 빼지 않습니다. 입력을 시작하는 순간 무엇을 쓰는 칸이었는지 사라집니다.
  • 되돌릴 수 있는 삭제는 확인 모달 대신 "실행 취소"가 붙은 스낵바로 처리합니다. 한 번 덜 누르게 됩니다.

복사해서 쓰는 프롬프트

설정 화면

설정 화면을 만들어 줘.
- 알림 켜기/끄기는 토글(Toggle switch). 누르는 즉시 적용.
- 관심 분야는 체크박스(Checkbox) 목록. 맨 아래 [저장] 버튼을 눌러야 반영.
- 입력칸 위에는 항상 라벨(Label)을 두고, 플레이스홀더(Placeholder)는 예시로만.
- 저장하면 "저장했습니다" 토스트(Toast)를 2초 동안 띄워 줘.

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

전체 카드 보기 (27)