프로토타이핑

오토 레이아웃 스티키 요소 고정

피그마 오픈카톡방2026. 3. 7.

질문사항

Auto Layout이 적용된 프레임 내에서, Y 좌표 0에 있는 요소 A(높이 100)와 Y 좌표 100에 있는 요소 B(높이 100)를 모두 화면 상에서 절대적인 위치에 고정(sticky)시키고 싶습니다. 요소 B를 sticky로 설정하면 스크롤 시 요소 A와 포개어지는데, 이를 해결하고 두 요소를 각각의 위치에 고정하는 방법이 있을까요?

답변

질문하신 상황을 정확히 이해하기 위해 몇 가지 확인이 필요합니다.

'화면 상에서 절대적인 위치에 존재하게' 라는 것이 스크롤과 무관하게 항상 그 위치에 고정되어 있어야 한다는 의미인가요? (Figma의 `Fixed position when scrolling` 속성)

아니면, 스크롤하다가 특정 지점에 도달하면 그 위치에 고정되는 `Sticky` 동작을 원하시는 건가요?

Figma의 `Sticky`와 `Fixed position when scrolling`의 차이:

Fixed position when scrolling: 부모 프레임의 스크롤과 관계없이 뷰포트(화면)의 특정 위치에 항상 고정됩니다. (예: 상단 내비게이션 바, 하단 버튼)

Sticky: 부모 프레임 내에서 스크롤되다가, 부모 프레임의 스크롤 영역 상단(또는 하단)에 도달하면 그 위치에 고정됩니다. Sticky 요소는 다른 Sticky 요소와 겹칠 수 있으며, 스크롤 방향에 따라 서로 밀어내거나 겹쳐질 수 있습니다.

요소 A와 B가 포개어지는 문제 해결:

만약 두 요소 모두 `Fixed position when scrolling`을 원하신다면, 단순히 두 요소를 각각 `Fixed`로 설정하고 Y 좌표를 다르게 지정하면 됩니다. 이 경우 서로 포개어지지 않고 각자의 고정된 위치에 존재합니다.

만약 `Sticky`를 원하신다면, `Sticky` 요소는 기본적으로 스크롤 영역 내에서 동작하며, 여러 `Sticky` 요소가 같은 스크롤 방향으로 배치될 경우 서로 겹치거나 밀어내는 동작을 할 수 있습니다. 두 `Sticky` 요소가 겹치지 않게 하려면, 일반적으로는 하나의 `Sticky` 요소만 사용하거나, `Sticky` 요소가 포함된 부모 프레임의 구조를 조정하여 겹치지 않도록 해야 합니다.

어떤 동작을 원하시는지 명확히 해주시면 더 구체적인 해결책을 제시해 드릴 수 있습니다.