강의/Framer

[개발자가 알려주는 프레이머(Framer)] 오버라이드(Override) 개념정리

이전 포스팅들은 프레이머(Framer) 툴을 사용해서 워밍업으로 몇 가지 예제들을 다뤘습니다. 하지만, 분명 저보다는 유능한 디자이너 분들께서 해당 툴에 대한 이해도가 훨씬 높을 것이고, 심지어 더 다양한 인터랙티브한 모션들을 구현할 수 있을 것입니다. 하지만 오늘 포스팅에서 다룰 주제는 조금 다르다고 생각합니다. 오늘 다룰 주제는 오버라이드(Override)입니다. 이번 포스팅을 시작으로 오버라이드 정의부터 시작해서 다양한 예제들을 다뤄볼 예정입니다. 어렵지 않게 최대한 풀어서 설명할 것이니 포기하지 마시고 끝까지 따라오셔서 오버라이드에 대해서 제대로 알고 넘어갑시다! 오버라이드(Override)란 무엇인가? 오버라이드를 정복하기 위해서 우선 오버라이드의 개념을 알아야되겠죠? 코드 재정의는 프로토타입을..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #2] Stack 컴포넌트 완벽정리

1강에서는 프레임(Frame) 컴포넌트에 대해서 다뤄봤습니다. 프레임 컴포넌트 자체로도 제공하고 있는 기능들이 정말 많고, 다양한 곳에서 활용할 수 있음을 확인했습니다. 이번 포스팅에서 소개드릴 스택(Stack) 컴포넌트도 정말 유용하게 사용할 수 있습니다. 스택(Stack) ? 스택 컴포넌트를 활용하면 프레임을 사용하여 매우 유연하고 자동으로 분산된 레이아웃을 쉽게 만들 수 있습니다. 설명으로는 잘 이해가 안되시죠. CSS의 flex 속성을 활용해서 자동으로 간격이나 위치를 조정해줍니다. 스택 컴포넌트는 프레임을 기반으로하므로 모든 프레임 속성을 지원합니다! 좀 더 쉽게 이해하시려면 "프레임을 좀 더 간편하게 레이아웃을 구성하기 위해서 스택이 존재하는 구나" 라고 생각하시면 될 것 같습니다. 스택에 프..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-3] Frame 컴포넌트 완벽정리 (Tap, Hover, Pan, Drag)

개발자가 알려주는 프레이머 프레임(Frame) 컴포넌트를 다루는 마지막 포스팅입니다. 첫 번째 강의에서는 컴포넌트의 위치나 크기 그리고 시각적 요소를 다루는 Layout과 Visual에 대해서 다뤄봤고, 두 번째 강의에서는 프레임을 동적으로 변환시켜주는 Transform, Animation, Transition, Variants 속성들에 대해서 알아봤었습니다. 해당 부분을 안 보셨다면 한번 보고 오시는 걸 추천드릴게요! [개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual) [개발자가 알려주는 프레이머(Framer) #1-2] Frame 컴포넌트 완벽정리 (Transform, Animation, Transition, Variant..

강의/Framer

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

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

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-2] Frame 컴포넌트 완벽정리 (Transform, Animation, Transition, Variants)

이전 포스팅에서는 Frame 정의, Layout 그리고 Visual API에 관련해서 다뤄봤습니다. 아직 해당 포스팅을 읽지 않으셨다면 프레임 컴포넌트 완벽정리 1편부터 보고 오시는 것을 추천드립니다. [개발자가 알려주는 Framer #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual) ✍️ Frame이란? 레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다. 프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다. 프레임 webruden.tistory.com 그럼 1편에 이어서 프레임 컴포넌트의 동작과 관련된 Transform, Animation, Transition, Variants 속성들을 살펴보도록 하겠습니..

강의/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] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual)

✍️ Frame이란? 레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다. 프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다. 프레임 컴포넌트를 사용하면 아래의 특성을 이용할 수 있습니다. - 크기와 레이아웃을 설정할 수 있습니다. - 수평, 수직 중앙정렬을 설정할 수 있습니다. - 색상이나 배경 이미지를 변경할 수 있습니다. - 상태에 따른 애니메이션을 추가할 수 있습니다. - 데스크톱 및 모바일에서 작동하는 탭 이벤트를 추가할 수 있습니다. - 드래그와 같은 제스처를 구현할 수 있습니다. - 팬과 같은 고급 제스처에 반응하도록 할 수 있습니다. ⚙️ 특징 Performance 애니메이션에서 최고의 성능을 얻으려면 GPU 가속을 활용하세요...

강의/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] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트..

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #1] 페이지 툴을 활용한 스와이프 기능 구현 (Page Interactions)

✍️ 페이지 툴이란? 페이지 툴이란 Framer에서 제공하는 기능 중 하나로 웹서비스에서 사용되는 스와이프 기능을 구현할 수 있게 도와주는 도구입니다. 페이지 툴을 사용하면 스와이프 기능을 굉장히 손쉽게 추가할 수 있습니다. 💝 목표 결과물 강의를 끝까지 따라오시면 아래의 결과물을 구현할 수 있습니다. 그것도 정말 간단하게요! ❗️ 시작하기 전에 혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다. [개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #0] Framer 쉽게 시작해보자.

📑 Framer란? Framer는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제공하는 라이브러리입니다. 처음 접하시는 분들도 어려움 없이 서비스 아이디어들을 구현할 수 있도록 설계되어 있습니다. Framer는 아래의 기술 스택으로 구성되어 있습니다. 💻 기술 스택 React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. Jsx JavaScript에서 HTML과 같은 구문을 직접 사용하여 친숙한 방식으로 문서 구조를 표현할 수 있는 방법입니다. Typescript TypeScript는 Javascript의 상위 확장 개념 언어입니다. 그래서 ES5의 문법을 그대로 사용할 수 있고, ES6에서 새롭게 추가된 기능들을 기존의 자바..