본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Framer에서 사용할 수 있는 위치 지정 방식

• Absolute: 부모 프레임 기준으로 자유롭게 위치 설정

• Relative: Stack이나 Grid처럼 흐름(flow)에 따라 위치가 정해짐

• Fixed: 화면(Viewport)을 기준으로 고정 위치

• Sticky: 특정 지점에 도달하면 고정되었다가 다시 흐름으로 복귀

이번 글에서는 이 중에서 가장 기초가 되는 Absolute Positioning만 먼저 다루겠습니다.

Absolute Positioning이란?

Absolute Positioning은 해당 레이어가 부모 프레임을 기준으로 고정된 위치에 배치되는 방식입나다. 다시 말해, 요소가 형제 요소들과의 관계를 무시하고, 오직 부모 프레임과의 거리만을 기준으로 자리를 잡는 것이에요.

이 방식은 우리가 Figma와 같은 디자인 툴에서 요소를 자유롭게 드래그하여 배치할 때와 매우 비슷하기 때문에 Framer를 처음 사용하는 분들도 이 포지션 방식에 쉽게 적응할 수 있을 거에요.

Framer에서는 위치를 어떻게 정의할까?

다른 디자인 툴에서는 X, Y 좌표만 표시되는 경우가 많지만, Framer는 조금 다릅니다.

• 상단/하단, 좌측/우측, 네 방향에 대해 각각의 거리 값을 설정할 수 있습니다.

• 특정 방향에 대해 값을 입력하거나 핀(pin)을 설정하면, 부모 프레임 크기가 바뀌어도 그 거리값은 유지돼요.

예를 들어 "위에서 20px"이라는 값에 핀을 설정해두면, 부모 프레임이 커지거나 줄어들어도 그 요소는 항상 위에서 20px 떨어진 위치에 있게 되는 것입니다.

핀(Pinning)과 위치 설정

프레임을 선택하면 오른쪽 속성 패널에서 아래와 같은 값을 볼 수 있습니다. 이때 또렷하게 표시된 값은 핀이 적용된 값입니다.

• Top, Bottom

• Left, Right

• 핀을 설정하면: 해당 방향으로부터의 거리가 고정됨

• 핀을 해제하면: 해당 방향은 무시되고 레이어는 유동적으로 움직일 수 있음

예시

• 왼쪽만 핀 → 좌측 기준 20px 유지

• 양쪽 모두 핀 → 좌우 20px 유지하며 자동으로 너비가 늘어나거나 줄어듦

이미 있는 요소를 감싸는 부모 프레임 만들기

여러 레이어를 선택한 후

• 우클릭 > Add Frame

• 또는 Cmd + Enter (Mac), Ctrl + Enter (Windows)

이렇게 하면 선택한 요소들을 감싸는 새로운 부모 프레임이 만들어집니다.
부모 프레임을 지우고 자식들만 남기고 싶을 때는 아래의 방법으로 하시면 됩니다.

• Cmd + Delete (Mac)

• Ctrl + Delete (Windows)

프레임을 그릴 때 유용한 단축키

• Shift: 정사각형으로 그리기

• Alt 또는 Option: 중심에서 바깥으로 그리기

• Space: 그리기 중에 위치 이동

Absolute Position vs Relative Position – Stack과 함께 쓸 때 주의점

Framer에서는 Stack을 만들면 기본적으로 그 안의 요소들은 Relative Positioning이 적용돼서 위에서 아래로 또는 좌우로 흐름에 따라 자동 정렬됩니다.
그런데 만약 그 안의 특정 요소 하나를 Absolute로 바꾼다면 어떤 일이 일어날까요?

• 해당 요소는 정렬 흐름(Flow)에서 빠지게 됩니다

• 자유롭게 드래그해서 배치할 수 있지만, 다른 요소들과 겹치거나 레이아웃이 깨질 수 있어요

z-index란?

이때는 레이어의 앞뒤 순서를 숫자로 표현하는 개념인 z-index 속성을 활용해 어떤 요소가 위에 보일지 시각적으로 조절할 수 있습니다.

• 기본값은 0이며, 숫자가 클수록 위에 보이고 작을수록 아래에 깔려요.

• 예를 들어 z-index: 1이면 다른 요소보다 위에, 1이면 다른 요소 뒤에 배치됩니다.

Framer에서는 Absolute로 전환할 때 이 z-index 값을 자동으로 추가해주기 때문에, 특별히 설정하지 않아도 기본적인 겹침 순서가 정리돼요.

Note: 흐름을 깨뜨릴 수 있기 때문에 Stack 안에서는 꼭 필요한 경우에만 Absolute를 사용하세요.

Absolute Position, 언제 사용하면 좋을까요?

Absolute Position은 정적인 위치가 중요한 UI 요소나 시각적으로 강조가 필요한 요소에 적합합니다.

• 히어로 섹션의 배경 일러스트

• CTA 버튼 위에 겹쳐지는 배지

• 배경에 떠 있는 애니메이션 요소

다만 콘텐츠 흐름(Flow)이 중요한 페이지에서는 남용하지 않는 게 좋습니다. 특히 텍스트나 리스트 구조는 Stack을 사용하는 게 더 유리해요.

마무리 요약

• Absolute Positioning은 ‘자유 배치’지만, 부모 프레임 기준으로 동작

• 핀을 설정하면 거리 값을 유지하면서 반응형 대응 가능

• Stack 안에서는 흐름에서 벗어나기 때문에 사용에 주의 필요

• 겹침 순서는 z-index로 조절 가능

본 글은 Framer 공식 유튜브 ‘Absolute Positioning in Framer (Fundamentals Lesson 5)’의 내용을 번역·각색한 콘텐츠입니다.