#
서비스 기획
2022-12-21

UX를 고려한 모달 UI : 팝업, 바텀시트, 스낵바

모달(modal)이란 사용자의 이목을 끌기 위해서 사용하는 화면전환 기법입니다.

오늘은 다양한 모달 UI를 소개해드리려고 합니다.

1. 팝업(popup)

팝업은 중요한 정보를 전달할 때, 사용자의 의사결정이 필요한 경우에 사용합니다.

서비스 이용에 있어 고객의 승인이 필요한 상황, 중요한 정보를 전달하는 상황에 팝업을 사용합니다.

팝업을 사용할 때는 서비스의 다른 기능들은 비활성화되며, 사용자가 버튼을 의사결정을 하여 버튼을 누를 때까지

화면에 변화가 없기 때문에 의도적으로 사용자의 해옫응ㄹ 방해하기 때문에 사용을 최소화하는 것이 좋습니다.

또한 사용자가 어떤 행동을 해야할 지 바로 인식할 수 있도록 명확한 문구로 작성하는 것이 좋습니다.

2. 바텀시트(Bottom sheet)

바텀시트는 기존 화면과 연관성이 있는 콘텐츠를 제공하거나 화면의 이동없이 다양한 메뉴를 이용해야할 때 사용합니다.

사용자는 기존 컨텐츠를 벗어나지 않지만 관련된 작업을 할 수 있어 프로세스가 막힘 없고 신속하다고 느낄 수 있습니다.

서비스 제공자 입장에서는 컨텐츠 내의 중요한 정보를 사용자가 놓치지 않게 전달할 수 있습니다.

3. 스낵바(snackbar)

기업마다 명칭이 달라서 스낵바, 토스트 등으로 불리우는 스낵바 기능은 사용자가 수행한 액션에 대한 피드백을 줄 때 사용됩니다.

화면 이동, 팝업 등을 사용하지 않고 사용자가 필요한 정보를 한 화면에서 바로 확인할 수 있게 전달되는 것이 특징입니다.

특정 액션마다 다른 문구가 표출될 수도 있고, 사용자의 액션에 따라 결과값이 달라지는 경우에 많이 사용됩니다.

그렇기 때문에 로그인 등 유효성 체크가 필요한 항목에서 자주 볼 수 있죠.

유익했다면! 이어서 읽어보기:)
피그마 프로토타입 기능 사용시 컴포넌트 활용법

프로토타입 시에 컴포넌트를 어떻게 활용할까요?

피그마 업데이트 :: 도형 간 간격조정 기능

Figma의 도형 간 간격조정 기능에 대해서 알아볼까요?

[기능 정의] 회원가입 기능 정의

회원가입 기능정의는 어떻게 작성해야 할까요?

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.