Seonglae ChoBackdrop
사용자의 액션을 위해 화면의 하단에서 출력되는 모달 UI
react native 에서 백드롭, 바텀시트 구현하기 (Backdrop)
앱 개발에 있어서 가장 많이 사용되는 디자인 요소 중 하나가 바로 백드롭 (Backdrop), 바텀시트(Bottom Sheet) 입니다. 스크린 이동을 시키지 않고, 바로 뜨는 화면에서 쉽게 동작을 이끌어내거나 주의를 끌 수 있기 때문인데요. 오늘은 이러한 기능을 구현하기 위한 방법에 대해 알아보겠습니다. 들어가며: 백드롭(Backdrop)이란? 백드롭이란 (아래 그림과 같이) 기존의 스크린 위에 새로운 화면이 뜨는 방식의 UI를 뜻합니다. 인스타그램의 프로필 스크린에서 프로필 이름을 누르거나, 옵션을 누를 때 아래에서 올라오는 스크린을 말하는 것이죠. 아래에서 올라오는 화면이라는 의미로 바텀 시트라고 부르기도 합니다. 방법1: 라이브러리 활용하기 새로운 기능을 써야할 때 가장 편리한 방법은 라이브러리를..
https://blog.pumpkin-raccoon.com/123
컴퍼넌트UI - 바텀시트 (Bottom Sheet)
모바일 앱이나 웹 화면기획설계를 하다보면, 아무래도 PC에 비해 활용가능한 면적이 적다보니 모든 정보나 메뉴, 사용자 기능들을 하나의 화면에서 표현하기 힘든 경우들이 많습니다. 그렇다보니 사용자의 이목을 끌고 행동이 필요한 경우 또 그 행동의 중요성을 고려해서 모달을 적용하는 경우들이 많습니다. 모달을 구현하는 방법은 팝업(Popup), 바텀시트(Bottom sheet), 스낵바(Snackbar)등이 있는데, 이번 포스팅에서는 그 중 Bottom sheet에 대해서 정리를 해놨습니다. 바텀시트는 문자 그대로 사용자의 액션을 위해 화면의 하단에서 출력되는 모달 UI입니다. 메인화면에서의 연관된 컨텐츠를 제공하거나, 기존의 컨텍스트에서 벗어나지 않고 연관된 작업을 할 수 있어서 빠르게 프로세스가 진행되는 느..
https://daysweet.tistory.com/585
