강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #3-4] Overlay Effect를 활용한 UI 구현 (Side Menu)

사이드 메뉴(Side Menu)? Overlay Effect를 활용한 UI 구현 마지막 포스팅입니다! 이번에 다룰 예제는 사이드 메뉴입니다. 사이드 메뉴 UI는 앱 뿐만 아니라 웹에서도 정말 많이 사용되는 UI 요소 중 하나 입니다. 아래처럼 버튼을 눌렀을 때 특정 박스가 화면에 모션과 함께 좌에서 우, 우에서 좌로 열리는 방식입니다. 프레이머(Framer)는 사이드 메뉴에서 사용되고 있는 모션(Motion)을 굉장히 쉽게 구현할 수 있게 제공하고 있습니다. 사이드 메뉴는 대부분 모바일 애플리케이션에 기본적으로 다 들어있을거라 생각합니다. 제 블로그에도 기본적으로 좌측에 탑재되어 있죠. 오늘은 대부분의 애플리케이션에 존재하고 있는 이 사이드 메뉴를 다뤄보도록 하겠습니다. ❗️ 시작하기 전에 혹시 아직 F..

강의/Framer

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

Modal Box? Modal Box는 앱 뿐만 아니라 웹에서도 정말 많이 사용되는 UI 요소 중 하나 입니다. 아래처럼 버튼을 눌렀을 때 특정 박스가 화면에 모션과 함께 노출되는게 바로 Modal Box입니다. 프레이머(Framer)는 Modal에서 사용되고 있는 모션(Motion)을 굉장히 쉽게 구현할 수 있게 제공하고 있습니다. Modal Box는 각종 프레임워크에서 모두 사용하고 있는 UI 요소입니다. Bootstrap이나 Ant Design 모두 엄청 유명한 웹 개발 프레임워크인데 모두 구현되어 있죠. 물론 이외에 Material Design 등 정말 각종 프레임워크에서 모두 사용하고 있다고 생각하셔도 무방합니다. Modal Use Bootstrap’s JavaScript modal plugin..

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #3-2] Overlay Effect를 활용한 Draggable Sheet UI 구현

Draggable Sheet? 애플리케이션을 사용하면서 위에서 아래로 끌어내리거나 아래에서 위로 끌어올리는 UI를 접해본 적이 있을 텐데요. 정말 대부분 애플리케이션에서 이 모션을 사용한다고 해도 무방할 정도로 굉장히 많이 사용되는 기능 중 하나입니다. 프레이머를 활용하면 정말 간단하게 Draggable Sheet UI를 구현할 수 있습니다. ❗️ 시작하기 전에 혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정 등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다. [개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재..