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

남양주개발자

·

2020. 7. 13. 18:30

728x90
반응형

✍️ Frame이란?

레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다.

프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다.

 

프레임 컴포넌트를 사용하면 아래의 특성을 이용할 수 있습니다.

- 크기와 레이아웃을 설정할 수 있습니다.
- 수평, 수직 중앙정렬을 설정할 수 있습니다.
- 색상이나 배경 이미지를 변경할 수 있습니다.
- 상태에 따른 애니메이션을 추가할 수 있습니다.
- 데스크톱 및 모바일에서 작동하는 탭 이벤트를 추가할 수 있습니다.
- 드래그와 같은 제스처를 구현할 수 있습니다.
- 팬과 같은 고급 제스처에 반응하도록 할 수 있습니다.

⚙️ 특징

Performance

애니메이션에서 최고의 성능을 얻으려면 GPU 가속을 활용하세요.

이런 식으로 최신 모바일 장치에서 수백 개의 레이어에 애니메이션을 적용 할 수 있습니다.

CSS 특성으로 GPU 동작 방식은 여기를 참고하면 좋습니다.

Integration

Frame 구성요소는 주로 DOM 요소 (일반 div)이기 때문에 모든 DOM 요소와 잘 작동하도록 설계되었습니다.

크기, 너비, 높이, 위쪽, 오른쪽, 아래쪽, 왼쪽 및 가운데 사이의 레이아웃 조합을 사용할 수 있습니다.

Text Centering

프레임에 텍스트 내용만 포함된 경우 편의상 기본적으로 가운데에 배치됩니다.

span 요소에 텍스트를 배치하여 이 동작을 피할 수 있습니다.

// 텍스트가 중앙으로 배치됩니다!
<Frame>Hello</Frame>

// 텍스트가 중앙으로 배치되지 않습니다!
<Frame><span>Hello</span></Frame>

 

text centering 예시

 

Event Handling

이벤트 전파는 React에 의해 처리되며 DOM 이벤트처럼 작동합니다. 

preventDefault()로 이벤트를 취소하고 stopPropagation()으로 전파를 중지 할 수 있습니다.

 

DOM

Frame 컴포넌트는 HTML div를 기반으로 하므로 모든 DOM 속성을 상속합니다.

📑 레이아웃(Layout)

Frame의 레이아웃 규칙은 일반 CSS처럼 동작하고 부모 요소 (Frame 또는 div)의 크기가 조정되면 다시 레이아웃됩니다. 선택적으로 가운데와 같은 편리한 단축키를 사용하여 부모에서 요소를 빠르게 가운데에 맞출 수 있습니다.

프레임은 기본적으로 절대 위치에 있습니다. position 속성을 사용하여이를 명시 적으로 변경할 수 있습니다. 상대 레이아웃 (예 : 스택)이 필요한 구성 요소의 자식으로 프레임을 추가하면 편의상 해당 구성 요소가 상대적으로 위치를 재정의 할 수 있습니다.

레이아웃 속성 조합이 호환되지 않으면 재정의 순서가 CSS와 일치합니다. x 및 y 변환은 일반 레이아웃 규칙이 설정된 후에 적용되므로 항상 작동합니다.

  • height > top, bottom > center=“y”
  • width > left, right > center=“x”

width

타입: number | string | MotionValue<number | string>

CSS width(너비) 속성을 조정합니다. 너비 기본값은 200으로 설정되어 있습니다. 모든 CSS 값 유형(픽셀, 백분율, 키워드 등)을 허용합니다.

// Pixels
<Frame width={100} />

// Percentages
<Frame width={"100%"} />

 

width 예시

 

height

타입: number | string | MotionValue<number | string>

CSS height(높이) 속성을 조정합니다. 높이 기본값은 200으로 설정되어 있습니다. 모든 CSS 값 유형(픽셀, 백분율, 키워드 등)을 허용합니다.

// Pixels
<Frame height={100} />

// Percentages
<Frame height={"100%"} />

 

height 예시

 

size

타입: number | string

너비와 높이를 동시에 설정할 수 있습니다. string으로 사용할 경우에는 '300px'처럼 뒤에 유형을 적어야 됩니다.

<Frame size={100} />

 

size 예시

 

top, right, bottom, left

타입: number | string | MotionValue<number | string>

포지션으로부터의 거리(픽셀)입니다. 기본값은 0입니다. string으로 사용할 경우에는 '300px'처럼 뒤에 유형을 적어야 됩니다.

<Frame size={150} top={110} left={120} bottom={20} right={50} />

 

distance 예시

 

center

타입: boolean | "x" | "y"

중앙정렬을 시켜주는 속성입니다.

// 중앙
<Frame center />

// 수평으로 중앙정렬
<Frame center="x" />

// 수직으로 중앙정렬
<Frame center="y" />

 

centering 예시

 

position

타입: string

CSS 포지션 속성을 변경합니다. 기본값은 absolute입니다.

<Frame position={"relative"} />

🖌 시각요소(Visual)

style

타입: MotionStyle

Frame에서 명시적으로 받지 않는 CSS 속성을 세팅하기 위한 속성입니다.

<Frame style={{ mixBlendMode: "difference" }}  />

visible

타입: boolean

프레임의 표시 여부를 정의합니다. 불투명도와 달리 해당 속성은 애니메이션을 적용할 수 없습니다. 기본값은 true입니다.

<Frame visible={false} />

 

visible 예시

 

opacity

타입: number | MotionValue<number>

불투명도 값을 설정하면 요소를 반투명하거나 완전히 숨길 수 있습니다. 숨기기 애니메이션을 적용할 때 유용합니다.

기본값은 1입니다.

<Frame opacity={0.5} />

 

opacity 예시

 

background

타입: Background | null

프레임의 배경을 설정합니다. src를 사용하여 이미지를 불러올 수 있고, 색상 문자열, 색상 객체 및 이미지를 지원합니다.

기본적으로 반투명 청색으로 설정됩니다. 이것은 이미지 속성에 의해 설정된 값보다 우선으로 적용됩니다.

색상과 이미지를 사용하려면 backgroundColor를 대신 사용하세요.

<Frame background="#09F"/>
<Frame background={Color({r: 255, g: 0, b: 102})} />
<Frame background={{ alpha: 1, angle: 75, start: "#09F", end: "#F09"}} />
<Frame background={{ src: "https://example.com/logo.png"}} />

 

background 예시

 

backgroundColor

타입: string | Color

프레임의 배경색을 설정합니다. 색상 문자열과 객체를 지원합니다. 

<Frame backgroundColor="#09F"/>
<Frame backgroundColor={Color({r: 255, g: 0, b: 102})} />

 

backgroundColor 예시

 

image

타입: string

프레임의 백그라운드 이미지를 설정합니다.

<Frame image="https://source.unsplash.com/random" />

color

타입: string | MotionValue<string>

프레임 안에서 텍스트 요소의 색상을 결정합니다. 기본값은 검은색입니다.

<Frame color="#09F" />

border

타입: string | MotionValue<string>

CSS border 속성입니다. 너비와 테두리의 스타일 그리고 색상을 값으로 받습니다. 기본값은 "none"입니다.

<Frame border="1px solid #09F" />

radius

타입: number | string | MotionValue<number | string>

CSS border-radius 속성입니다. 기본값은 0입니다.

// Radius with pixels
<Frame radius={10} />

// Radius with percentages
<Frame radius="50%" />

 

radius 예시

 

shadow

타입: string | MotionValue<string>

CSS의 box-shadow 속성입니다. 속성의 자세한 정보는 아래를 참고해주세요.

 

box-shadow

box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산

developer.mozilla.org

<Frame shadow="10px 5px 5px black" />

overflow

타입: "visible" | "hidden"

CSS의 overflow 속성입니다. 기본값은 "visible"입니다.

<Frame overflow="hidden" />

🎉 마무리

이번 포스팅에서는 프레임 컴포넌트의 레이아웃과 시각요소 부분을 다루는 방법을 알아봤습니다.

다음 포스팅 Frame 컴포넌트 완벽정리 2에서는 Transform, Animation, Transition, Variants와 같은 애니메이션과 연관되어 있는 부분을 다뤄보도록 하겠습니다.

 

728x90
반응형
그리드형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다