강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #3-1] Overlay Effect를 활용한 UI 구현(Bottom Sheet, Draggable Sheet, Modal Box, Side Menu)

이번 포스팅에서는 프레이머에서 제공하는 Overlay Effect를 활용해서 아래의 UI 요소들을 구현해보겠습니다. 개인적으로 일상에서 가장 많이 접할 수 있는 UI 요소들인데 바로 Bottom Sheet, Draggable Sheet, Modal Box, Side Menu입니다. 단어로 설명드려서 어떤 건지 감이 안 오실 수도 있으니 아래 예시를 같이 볼까요? 📑 Overlay Effect 예시 이처럼 애플리케이션에서 거의 필수적인 UI 요소라고 봐도 무방한 기능들입니다. Bottom Sheet UI 요소부터 차근 차근 다뤄보도록 하겠습니다. Bottom Sheet 머테리얼 디자인에도 기본 요소로 가지고 있을 만큼 대중적인 UI 요소입니다. Material Design Build beautiful, u..

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #2] Magic Motion을 활용한 탭메뉴 구현 (Animated Tabs)

🔮 매직모션(Magic Motion)이란? 매직모션은 한 상태에서 다른 상태로 레이어에 애니메이션을 적용할 수 있는 전환 유형입니다. 한 레이어에서 다음 레이어로 이동하면 Framer가 변경된 부분을 찾아내고 애니메이션을 적용합니다. 💝 목표 결과물 강의를 끝까지 따라오시면 아래의 매직 모션이 적용된 탭메뉴를 구현할 수 있습니다. ❗️ 시작하기 전에 혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정 등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다. [개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트..