[개발자가 알려주는 프레이머(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
반응형

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

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

0개의 댓글