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