오토레이아웃은 익숙해졌다고 생각했는데, 최근 피그마를 사용하다 보면 새로 만든 프레임과 예전에 작업했던 프레임의 동작이 미묘하게 다르게 느껴질 수 있습니다.
설정을 잘못 건드린 것이 아니라면 새로 만든 프레임에 적용된 새로운 Layout version이 원인일 가능성이 있습니다. Figma는 2026년 7월 24일 Auto Layout이 CSS Flexbox와 더 비슷하게 동작하도록 레이아웃 계산 방식을 변경했습니다.
다만 기존 Auto Layout 프레임이 자동으로 모두 바뀌는 것은 아닙니다. 새로 만드는 프레임에는 새로운 방식이 기본 적용되고, 기존 프레임은 직접 업데이트하기 전까지 Legacy 버전을 유지할 수 있습니다. 이번 글에서는 변경된 계산 방식과 기존 파일 영향, 업데이트 방법, 실무에서 확인할 부분을 정리합니다.
Figma Auto Layout 업데이트 — 정확히 무엇이 바뀌었을까
이번 변경을 단순히 'Auto Layout이 CSS로 바뀌었다'고 이해하면 정확하지 않습니다.
Figma Auto Layout은 이전부터 웹의 레이아웃 방식을 참고해 만들어졌지만 일부 조건에서는 CSS Flexbox와 계산 결과가 완전히 일치하지 않았습니다. 특히 Padding, Stroke, Fill container, Auto gap을 함께 사용할 때 디자인과 실제 개발 화면 사이에 차이가 발생할 수 있었습니다.
새로운 Layout version에서는 이런 차이를 줄이기 위해 다음과 같은 계산 방식이 변경됐습니다.
- Padding에 필요한 공간을 항상 확보합니다.
- Inside Stroke는 기본적으로 레이아웃 계산에 포함됩니다.
- Center·Outside Stroke는 레이아웃 계산에서 제외됩니다.
- 부모의 Stroke 설정이 자식 프레임 계산에 영향을 주지 않도록 변경됐습니다.
- Fill container 계산이 CSS의 Border-box 방식과 더 가까워졌습니다.
- Auto gap에서 공간이 부족해도 요소가 겹치지 않도록 변경됐습니다.
- Auto gap에 자식이 하나뿐이면 가운데가 아닌 시작점에 정렬됩니다.
UI나 웹 디자인에서 Auto Layout을 자주 사용한다면 작은 계산 차이가 실제 화면 크기나 정렬에 영향을 줄 수 있으므로 한 번 확인해두는 것이 좋습니다.
공식 안내: Figma Auto Layout 공식 도움말에서 최신 Layout version 관련 내용을 확인할 수 있습니다.
Padding 계산 방식 — 최소 공간을 확보하도록 변경
가장 이해하기 쉬운 변화는 Padding 계산 방식입니다.
예를 들어 가로 50px 프레임에 왼쪽 30px, 오른쪽 30px의 Padding을 설정했다고 가정해보겠습니다.
| 구분 | 계산 방식 |
|---|---|
| 기존 Layout | 좌우 Padding 합계가 60px이어도 프레임 너비를 50px로 유지할 수 있었습니다. |
| 새 Layout version | Padding에 필요한 최소 공간을 확보해 프레임이 그보다 작게 줄어들지 않도록 계산합니다. |
Inside Stroke가 있고 Stroke를 레이아웃에 포함하도록 설정했다면 해당 두께도 최소 크기 계산에 영향을 줄 수 있습니다.
개념적으로 CSS의 Border-box 계산 방식에 조금 더 가까워졌다고 이해하면 쉽습니다.
기존 Auto Layout을 새로운 버전으로 변경한 뒤 프레임 크기가 예상보다 커졌다면 오류부터 의심하기보다 Padding 값과 프레임의 최소 크기를 먼저 확인하는 것이 좋습니다.
Stroke 계산 — Inside와 Center·Outside 처리 방식이 달라집니다
버튼이나 카드처럼 테두리를 자주 사용하는 컴포넌트에서는 이번 변경을 특히 확인할 필요가 있습니다.
| Stroke 유형 | 새 Layout 계산 | CSS와 비교 |
|---|---|---|
| Inside Stroke | 기본적으로 레이아웃 계산에 포함 | Border에 가까움 |
| Center·Outside Stroke | 레이아웃 계산에서 제외 | Outline에 가까움 |
또 하나 달라진 부분은 부모와 자식 프레임의 Stroke 설정입니다.
기존에는 부모 Auto Layout 프레임의 Stroke 관련 설정이 자식 레이어 계산에 영향을 줄 수 있었지만 새로운 버전에서는 각 프레임의 Stroke 설정이 독립적으로 계산됩니다.
중첩 Auto Layout으로 버튼이나 카드, 리스트를 구성하고 있다면 업데이트 후 각 프레임의 Stroke 설정을 따로 확인하는 편이 안전합니다.
Fill container — Border-box 방식에 더 가까워졌습니다
Auto Layout에서 많이 사용하는 기능 중 하나가 Fill container입니다.
부모 프레임 안에 여러 요소를 넣고 Fill container를 설정하면 사용 가능한 공간을 자동으로 나누어 사용할 수 있습니다.
기존에는 Fill container가 적용된 자식 요소마다 Padding이나 Inside Stroke 두께가 다르면 내부 콘텐츠 영역에 차이가 생기는 경우가 있었습니다.
새로운 Auto Layout에서는 Fill container 요소의 공간을 계산할 때 자식 요소의 콘텐츠 영역을 기준으로 공간을 배분하도록 변경돼 CSS Border-box 모델과 더 가까워졌습니다.
따라서 Stroke 두께가 서로 다른 요소가 나란히 배치돼 있어도 내부 콘텐츠 영역을 보다 자연스럽게 맞출 수 있습니다.
반대로 Stroke 두께와 관계없이 공간을 정확히 동일한 비율로 나누고 싶다면 Grid Auto Layout의 fr 단위를 사용하는 방법도 있습니다.
Auto gap — 공간이 부족해도 요소가 겹치지 않습니다
Auto Layout에서 Gap between을 Auto로 설정하면 남는 공간이 자식 요소 사이에 자동으로 배분됩니다. CSS Flexbox의 space-between과 비슷한 기능입니다.
기존 방식에서는 프레임 공간이 부족하면 Auto gap이 음수처럼 작동하면서 자식 요소끼리 겹치는 상황이 발생할 수 있었습니다.
새로운 Layout version에서는 Auto gap이 0보다 작아지지 않습니다. 공간이 부족하면 요소를 겹치는 대신 프레임의 시작점부터 배치합니다.
의도적으로 요소를 겹치고 싶다면 Auto가 아니라 음수 Gap 값을 직접 지정하면 됩니다.
자식 요소가 하나뿐일 때도 위치가 달라집니다
Auto gap을 적용한 프레임에 자식 요소가 하나만 있는 경우에도 위치가 달라질 수 있습니다.
기존에는 하나의 요소가 가운데에 배치됐지만 새로운 버전에서는 가로 방향이면 왼쪽, 세로 방향이면 위쪽처럼 흐름의 시작점에 배치됩니다.
항목이 조건에 따라 하나까지 줄어드는 네비게이션이나 필터, 버튼 그룹 등을 만들었다면 업데이트 후 위치를 확인하는 것이 좋습니다.
기존 Figma 파일 영향 — 자동으로 바뀌는 것은 아닙니다
결론부터 말하면 기존 파일을 지금 당장 모두 업데이트할 필요는 없습니다.
| 구분 | 적용 방식 |
|---|---|
| 기존 Auto Layout 프레임 | 사용자가 직접 변경하지 않으면 Legacy 버전을 유지합니다. |
| 새로 생성하는 프레임 | 새로운 Layout version이 기본 적용됩니다. |
현재 안내 기준으로 2027년 1월까지 두 Layout version 사이를 전환할 수 있으며, 이후에는 Legacy 버전으로 만들어진 프레임에 새로운 버전으로 변경할 수 있는 Update 방식이 제공될 예정입니다.
따라서 서비스 중인 프로젝트나 규모가 큰 디자인 시스템이라면 전체 화면을 한꺼번에 변경하기보다 대표 컴포넌트나 일부 화면부터 새로운 버전으로 변경해 결과를 비교하는 방법이 안전합니다.
앞으로는 한 파일 안에 Legacy 방식과 새로운 방식으로 계산되는 Auto Layout이 함께 존재할 수 있습니다. 같은 설정처럼 보이는데 프레임 움직임이 다르다면 먼저 Layout version이 동일한지 확인하는 것이 좋습니다.
Figma Auto Layout 업데이트 방법 — 선택 영역과 페이지 단위로 변경
기존 Auto Layout 프레임을 새로운 방식으로 변경하려면 해당 프레임을 선택한 뒤 Auto Layout 설정에서 Layout version을 변경할 수 있습니다.
여러 프레임을 변경해야 한다면 Figma의 Actions 메뉴에서 다음 기능을 사용할 수 있습니다.
- Update layout version for selection: 선택한 영역을 기준으로 Layout version을 변경합니다.
- Update layout version for page: 현재 페이지를 기준으로 Layout version을 변경합니다.
변경 과정에서 프레임 크기나 위치가 달라질 가능성이 있다면 적용 전에 결과를 확인하는 것이 좋습니다. 문제가 발생했다면 Command + Z 또는 Ctrl + Z로 실행 취소할 수 있습니다.
업데이트 후 꼭 확인해야 할 부분
새로운 Auto Layout으로 변경한 뒤 모든 프레임을 하나씩 확인할 필요는 없지만 변화 가능성이 높은 영역은 먼저 살펴보는 것이 좋습니다.
- Padding 합계가 프레임의 최소 크기와 비슷하거나 더 큰 경우
- 부모와 자식 Auto Layout의 Stroke 설정이 다른 경우
- Fill container 요소마다 Stroke 두께가 다른 경우
- Auto gap을 사용하면서 자식 요소가 하나만 존재하는 경우
디자인 시스템을 관리한다면 개별 화면보다 버튼, 카드, 인풋, 네비게이션처럼 여러 화면에서 반복 사용하는 공통 컴포넌트부터 확인하는 것이 효율적입니다.
하나의 Main Component 변화가 여러 Instance에 영향을 줄 수 있기 때문에 실제 서비스 화면을 수정하기 전에 대표 컴포넌트부터 테스트하는 것이 좋습니다.
개발자 협업 — CSS Flexbox와의 차이를 줄이는 것이 핵심
이번 업데이트의 중요한 목적 중 하나는 디자인과 실제 개발 결과 사이의 차이를 줄이는 것입니다.
기존에는 Figma에서 Auto Layout을 정확하게 설정해도 실제 CSS Flexbox로 구현하면 Padding이나 Stroke, Fill container 처리 방식 때문에 결과가 미묘하게 달라지는 경우가 있었습니다.
이런 차이가 발생하면 개발자가 추가 CSS를 적용하거나 디자이너와 수치를 다시 확인해야 했습니다. 새로운 Auto Layout에서는 레이아웃 계산 자체가 CSS Flexbox와 더 가까워지면서 이런 보정 작업을 줄일 수 있습니다.
Figma는 Dev Mode에서 복사되는 코드 역시 CSS Flexbox 속성과 더 직접적으로 대응하도록 변경됐다고 안내하고 있습니다.
디자인과 개발 사이의 핸드오프가 잦은 팀이라면 화면상 작은 변화보다 이 부분이 더 실질적인 장점이 될 수 있습니다.
Figma Auto Layout 업데이트 자주 묻는 질문
Q1. Layout version은 어디에서 확인할 수 있나요?
Auto Layout이 적용된 프레임을 선택한 뒤 오른쪽 패널의 Auto Layout 설정을 열면 Layout version을 확인하고 변경할 수 있습니다. 기존 파일과 새 프레임의 움직임이 다르다면 Padding이나 Gap 값을 수정하기 전에 Layout version부터 비교해보는 것이 좋습니다.
Q2. 기존 Auto Layout 프레임도 자동으로 새로운 버전으로 바뀌나요?
아닙니다. 기존 Auto Layout 프레임은 사용자가 직접 업데이트하지 않는 한 Legacy 버전을 유지합니다. 반면 새로 생성하는 프레임에는 새로운 Layout version이 기본 적용됩니다.
Q3. Main Component의 Layout version을 변경하면 Instance에는 어떤 영향이 있나요?
Auto Layout이 적용된 컴포넌트는 필요한 경우 Main Component에서 새로운 버전으로 업데이트한 뒤 다시 Publish할 수 있습니다. 다만 Instance에서는 Layout version을 개별적으로 변경할 수 없으므로 디자인 시스템을 사용한다면 Main Component에서 먼저 레이아웃 변화를 확인한 뒤 업데이트 여부를 결정하는 방식이 적합합니다.
Q4. 페이지 전체를 한 번에 업데이트해도 괜찮을까요?
페이지 단위 업데이트 기능을 사용할 수 있지만 Auto Layout이 많이 중첩된 페이지라면 처음부터 전체 페이지를 변경하기보다 선택 영역에서 먼저 테스트하는 편이 좋습니다. Padding, Stroke, Fill container, Auto gap이 복합적으로 적용된 프레임은 업데이트 전후 크기와 위치를 확인한 다음 페이지 전체로 적용하는 것이 안전합니다.
Q5. 업데이트 후 프레임 크기가 달라졌다면 무엇부터 확인해야 하나요?
먼저 Layout version이 바뀌었는지 확인한 뒤 Padding, Inside Stroke, Fill container, Auto gap 순서로 살펴보는 것이 좋습니다. 특히 Padding 합계가 프레임 최소 크기보다 큰 경우 새로운 계산 방식에서 프레임 크기가 달라질 수 있습니다.
Figma Auto Layout 업데이트 마지막 체크포인트
이번 Figma Auto Layout 업데이트는 새로운 기능 하나가 추가됐다기보다 기존 레이아웃 계산 방식을 CSS Flexbox와 더 비슷하게 정리한 변화에 가깝습니다.
Padding에 필요한 최소 공간을 확보하고 Stroke 계산 방식을 정리했으며, Fill container와 Auto gap 역시 실제 CSS 구현 방식에 더욱 가까워졌습니다.
기존 프레임은 자동으로 변경되지 않기 때문에 지금 모든 디자인을 수정할 필요는 없습니다. 다만 새로 만드는 프레임에는 새로운 Layout version이 적용되므로 예전 프레임과 새 프레임의 동작이 달라질 수 있다는 점은 알아둘 필요가 있습니다.
Auto Layout이 예상과 다르게 움직인다면 오류라고 판단하기 전에 Layout version → Padding → Stroke → Fill container → Auto gap 순서로 확인하는 것이 가장 빠릅니다.
공식 참고: 정확한 Layout version 적용 방식과 향후 Legacy 지원 일정은 Figma 공식 도움말 및 업데이트 안내에서 최종 확인하시기 바랍니다.
'피그마' 카테고리의 다른 글
| 피그마 마지막 한 단어만 줄바꿈될 때｜텍스트 줄바꿈 Pretty 설정 방법 (0) | 2026.08.19 |
|---|---|
| 피그마 MCP 업데이트｜피그마 웨이브 AI 에이전트에서 바로 사용하는 방법 (0) | 2026.08.12 |
