강의/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) #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) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual)

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

강의/Framer

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

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