기획서용 화면 시안 ‘깨짐’ 방지: Figma Constraints 실전 가이드

기획서용 화면 시안 ‘깨짐’ 방지
: Figma Constraints 실전 가이드

서론

기획서에 들어갈 화면 시안을 Figma로 만들고 나면, 꼭 한 번은 이런 일을 겪습니다.
“처음엔 멀쩡했는데… 화면 폭을 조금만 늘리면 버튼이 밀리고, 텍스트가 튀고, 카드 간격이 와르르 무너진다.”
마치 레이아웃이 젤리처럼 흔들리죠. (젤리는 맛있지만… 화면은 아니잖아요 🍮)

이 문제는 대개 Constraints를 제대로 잡지 않아서 생깁니다.
Auto Layout이 “컨테이너 안에서 요소가 줄 서는 규칙”이라면, Constraints는 “프레임 크기가 변할 때 요소가 어디에 붙어 있을지(고정/확장/중앙정렬)를 결정하는 규칙”입니다.

이 글에서는 Figma Constraints의 핵심 개념부터, 기획서용 화면 시안에서 자주 쓰는 실전 설정, 그리고 Auto Layout과 함께 사용할 때의 기준까지 “깨짐 방지”에 초점을 맞춰 정리합니다.

이 글을 읽고 나면: 화면을 리사이즈해도 레이아웃이 덜 무너지고, 기획서 이미지 추출/전달이 훨씬 편해집니다.

본론

1) Constraints가 정확히 뭐예요?

Constraints는 프레임(화면)의 크기가 바뀔 때, 안에 있는 요소가 어디에 붙어 있고, 어떻게 늘어나야 하는지를 정하는 규칙입니다.

수평(Horizontal): Left / Right / Center / Left & Right / Scale
수직(Vertical): Top / Bottom / Center / Top & Bottom / Scale

즉, “리사이즈하면 왜 버튼이 도망가지?” 같은 문제는 대부분 Constraints가 원인입니다.

2) 화면 시안이 깨지는 대표 원인 5가지

프레임이 아닌 그룹/캔버스 위에 요소를 두고 리사이즈
→ 기준이 되는 “부모 프레임”이 없으면 Constraints도 힘을 못 씁니다.
중앙에 있어야 할 요소가 Left로 고정
→ 화면 폭이 바뀌면 요소가 왼쪽에 붙어버립니다.
양쪽에 붙어야 할 컨테이너가 Left만 설정
→ 카드/검색창이 폭을 따라 늘어나지 않습니다.
Scale을 남발
→ 텍스트까지 비율로 늘어나 “폰트가 찌그러진 느낌”이 납니다.
Auto Layout과 Constraints의 역할을 섞어씀
→ 내부 정렬은 Auto Layout, 프레임 리사이즈 대응은 Constraints로 분리해야 안정적입니다.

한 줄 요약: 내부 줄세움(Auto Layout)과, 프레임 변형 대응(Constraints)은 담당이 다릅니다.

3) Left/Right/Center 한 장 비교표(저장용)

아래 표는 입문자가 가장 자주 쓰는 Left / Right / Center를 “한 장”으로 정리한 비교표입니다.
그대로 캡처해서 이미지로 올려도 좋고, 글 중간에 두면 독자가 저장하기 좋습니다.

Left	Center	Right
의미 프레임의 왼쪽 기준으로 고정됩니다.	의미 프레임의 중앙 기준으로 유지됩니다.	의미 프레임의 오른쪽 기준으로 고정됩니다.
언제 쓰나 로고, 좌측 메뉴, 좌측 아이콘 등 “왼쪽에 붙어 있어야 하는” 요소	언제 쓰나 중앙 타이틀, CTA 문구, 빈 상태 안내 등 “가운데에 있어야 하는” 요소	언제 쓰나 프로필, 설정 아이콘, 장바구니 등 “오른쪽에 붙어 있어야 하는” 요소
테스트 방법 프레임 폭을 늘리면 요소는 왼쪽 간격 유지	테스트 방법 프레임 폭을 늘려도 요소는 중앙에 남음	테스트 방법 프레임 폭을 늘리면 요소는 오른쪽 간격 유지
초보 실수 중앙 요소를 Left로 두면 화면이 커질수록 “왼쪽으로 쏠림”	초보 실수 중앙이 필요한데 Left/Right로 두면 레이아웃 균형이 무너짐	초보 실수 우측 아이콘을 Left로 두면 화면이 커질수록 “오른쪽이 비어 보임”

SEO 캡션(그대로 써도 됨): Figma Constraints의 Left/Center/Right는 프레임을 리사이즈할 때 요소가 어느 기준(왼쪽/중앙/오른쪽)으로 고정될지 결정합니다.

이미지 ALT 추천: Figma Constraints Left Right Center 차이 비교표

4) Constraints 기본 옵션 한 번에 이해하기

4-1. Left / Right / Center

Left: 프레임 왼쪽 기준으로 고정 (좌측 메뉴, 로고)
Right: 프레임 오른쪽 기준으로 고정 (우측 아이콘, 프로필)
Center: 프레임 중앙 기준으로 유지 (중앙 CTA, 타이틀)

4-2. Left & Right (양쪽 고정)

요소의 왼쪽/오른쪽 여백을 고정해서, 프레임 폭이 바뀌면 요소 폭이 함께 늘어납니다.
검색창, 상단 바, 카드 컨테이너 같은 “폭 따라가는 UI”에 자주 씁니다.

4-3. Top / Bottom / Center / Top & Bottom

수직 방향도 동일합니다. 예를 들어 하단 고정 버튼은 Bottom, 화면 가운데 안내문은 Center처럼 쓰면 됩니다.

4-4. Scale은 언제 쓰나요?

Scale은 “비율로 함께 확대/축소”됩니다. 그래서 이미지나 아이콘 묶음처럼 비율 유지가 중요한 요소에만 제한적으로 추천합니다.
텍스트가 포함된 UI를 Scale로 늘리면, 글자가 어색하게 커져서 기획서 시안에선 특히 티가 납니다.

5) 기획서 시안에서 자주 쓰는 실전 패턴 6가지

패턴 1) 상단 헤더(좌: 로고 / 중: 타이틀 / 우: 아이콘)

로고: Horizontal = Left
타이틀: Horizontal = Center
우측 아이콘: Horizontal = Right

패턴 2) 검색창/상단 바처럼 폭이 늘어나야 하는 요소

검색창 컨테이너: Horizontal = Left & Right
내부 아이콘은 Left, 텍스트는 Fill(또는 Auto Layout)로 구성

패턴 3) 하단 고정 버튼(모바일 CTA)

버튼 컨테이너: Vertical = Bottom
가로 폭은 화면에 맞추려면 Horizontal = Left & Right

패턴 4) 카드 리스트(폭은 늘고, 내부는 정렬 유지)

리스트 컨테이너: Horizontal = Left & Right
카드 내부 정렬/간격: Auto Layout로 처리

패턴 5) 중앙 안내(빈 상태, 로딩, 에러 메시지)

안내 컨테이너: Horizontal = Center, Vertical = Center
텍스트는 줄바꿈/정렬만 안정적으로 잡아두기

패턴 6) 사이드 패널/모달

오른쪽 사이드 패널: Horizontal = Right
중앙 모달: Horizontal = Center, Vertical = Center
모달 내부 버튼/폼: Auto Layout로 구성하면 수정에 강함

6) Auto Layout과 Constraints, 같이 쓸 때 기준

많은 분이 헷갈리는 포인트는 이겁니다: “Auto Layout만 있으면 Constraints는 필요 없지 않나?”
답은 둘 다 필요입니다. 역할이 다르니까요.

Auto Layout = 컨테이너 안에서 요소가 어떻게 줄 서는지(간격/패딩/정렬)
Constraints = 프레임(화면) 크기 변화에서 컨테이너가 어디에 붙고 어떻게 늘어나는지

7) 깨짐 방지 체크리스트(발행 전 1분 점검)

모든 화면이 Frame 안에 들어가 있는가?
상단/하단 고정 요소는 Top/Bottom 제약이 맞는가?
폭이 늘어나야 하는 컨테이너는 Left & Right로 되어 있는가?
중앙 요소는 Center로 되어 있는가?
텍스트가 포함된 UI에 Scale을 쓰지 않았는가?
내부 간격/패딩은 Auto Layout로 처리했는가?
프레임 폭을 2~3가지로 바꿔 보며(예: 360 → 390 → 430) 테스트했는가?

기획서 팁: “모바일(360)”과 “조금 큰 모바일(430)” 두 번만 테스트해도 대부분의 깨짐이 잡힙니다.

결론

기획서용 화면 시안에서 가장 피곤한 순간은 “수정”입니다. 텍스트가 늘고, 버튼이 추가되고, 화면이 한 번만 바뀌어도 레이아웃이 깨지면 결국 기획서 업데이트 속도가 떨어집니다.

Constraints는 이 문제를 줄여주는 “고정 규칙”입니다.
폭을 따라 늘어나는 컨테이너는 Left & Right, 중앙 요소는 Center, 하단 고정 CTA는 Bottom처럼 기본 패턴만 익혀도 화면 안정성이 확 달라집니다.

다음 단계로는 Components/Variants로 “수정 한 번에 전체 반영”까지 만들면 기획서 시안의 유지보수 난이도가 더 내려갑니다. (복붙 지옥에 출구가 생깁니다 🧯)

FAQ

Q Constraints를 설정했는데도 화면이 깨져요. 왜 그런가요?

A 가장 흔한 원인은 부모 프레임/컨테이너가 올바르게 잡혀 있지 않거나, 폭이 늘어나야 할 요소가 Left만 설정된 경우입니다. “체크리스트”에서 Frame 포함 여부와 Left & Right 설정을 먼저 확인해 보세요.

Q Scale은 정말 쓰면 안 되나요?

A 쓰면 안 되는 건 아니고, 텍스트가 포함된 UI에는 추천하지 않습니다. Scale은 비율로 커지기 때문에 텍스트까지 커져서 어색해질 수 있습니다. 이미지/아이콘 묶음처럼 “비율 유지가 중요한 요소”에만 제한적으로 쓰는 게 안전합니다.

Q Auto Layout만으로 반응형이 되지 않나요?

A Auto Layout은 컨테이너 내부 정렬 규칙이고, Constraints는 프레임 크기 변화에 대한 고정/확장 규칙입니다. 내부는 Auto Layout, 외부(프레임 대응)는 Constraints로 나누면 가장 안정적입니다.

Q 기획서용으로 가장 많이 쓰는 Constraints 조합은 뭔가요?

A Left & Right(폭 따라 늘어남) + Bottom(하단 고정) 조합이 많이 쓰입니다. 검색바/카드 영역/하단 CTA 같은 기획서 화면 구성에 특히 자주 등장합니다.

이 블로그 검색

AI야, 기획 아이디어 줄래?