728x90
반응형
[예제를 통해 학습하는 프레이머(Framer) #3-4] Overlay Effect를 활용한 UI 구현 (Side Menu) 포스팅 썸네일 이미지

강의/Framer

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

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

2020.07.17 게시됨

[예제를 통해 학습하는 프레이머(Framer) #3-3] Overlay Effect를 활용한 UI 구현3 (Modal Box) 포스팅 썸네일 이미지

강의/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..

2020.07.16 게시됨

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

강의/Framer

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

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

2020.07.15 게시됨

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

강의/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..

2020.07.13 게시됨

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

강의/Framer

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

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

2020.07.13 게시됨

728x90
반응형