Constraints와 반응형 화면 설계

화면이 커져도 무너지지 않는 디자인

Auto Layout을 익히면 "내용이 늘어나도 UI가 버티는 법"을 어느 정도 알게 됩니다. 버튼 안의 텍스트가 길어져도 좌우 여백이 유지되고, 카드 안에 설명 문장이 한 줄 더 들어가도 아래 요소들이 자연스럽게 밀려나는 구조를 만들 수 있습니다.

그런데 실무에서는 또 다른 질문이 등장합니다.

"이 화면을 작은 아이폰에서 보면 어떻게 되나요?"

"태블릿에서는 버튼이 어디에 붙어 있나요?"

"웹 대시보드에서 브라우저 폭을 줄이면 카드 영역은 줄어드나요, 아니면 잘리나요?"

이 질문에 답하려면 Auto Layout만으로는 부족합니다. Auto Layout이 요소들 사이의 내부 배치 규칙을 다룬다면, Constraints는 부모 프레임의 크기가 바뀔 때 자식 요소가 어디에 붙어 있을지를 정하는 기능입니다.

쉽게 말해 Auto Layout은 도시 안의 도로 규칙이고, Constraints는 건물이 땅의 어느 모서리에 붙어 있을지 정하는 기준점입니다. 도로가 아무리 잘 정리되어 있어도 건물이 기준 없이 떠다니면 도시가 어수선해집니다. 반대로 건물이 기준점에 잘 붙어 있으면 화면 크기가 달라져도 전체 구조가 안정적으로 유지됩니다.

이번 장에서는 Constraints를 이용해 화면 크기가 달라져도 자연스럽게 유지되는 레이아웃을 설계해 보겠습니다. 특히 기획자와 개발자가 함께 보는 화면이라면 "작은 화면에서는 이렇게 줄어들고, 큰 화면에서는 이 영역이 넓어집니다"라고 설명할 수 있어야 합니다. 이 설명 능력이 곧 실무형 디자인 역량입니다.

Constraints는 무엇을 기준으로 움직일까

Constraints는 선택한 레이어가 부모 프레임을 기준으로 어떻게 고정되거나 변형될지 정하는 설정입니다. 여기서 가장 중요한 단어는 부모 프레임입니다.

예를 들어 Login Screen이라는 모바일 프레임 안에 로고, 입력창, 로그인 버튼이 있다고 해 봅시다. 이때 로고의 Constraints를 Top과 Center로 설정하면, 프레임 높이가 길어지거나 짧아져도 로고는 위쪽에서 일정한 거리를 유지하면서 가로 중앙에 머뭅니다. 반대로 하단 고정 버튼을 Bottom과 Left and right로 설정하면, 화면 높이가 달라져도 아래쪽 여백은 유지되고 버튼 폭은 화면에 맞게 늘어나거나 줄어듭니다.

Figma에서는 부모 프레임 안의 레이어를 선택하면 오른쪽 디자인 패널에서 Constraints 설정을 확인할 수 있습니다. 수평 방향과 수직 방향을 각각 따로 지정합니다. 수평 방향은 왼쪽, 오른쪽, 중앙, 양쪽, 비율 기준 등을 정하고, 수직 방향은 위쪽, 아래쪽, 중앙, 위아래, 비율 기준 등을 정합니다.

처음에는 복잡해 보이지만 원리는 간단합니다. 레이어가 화면 크기 변화에 반응할 때 "어느 벽을 잡고 버틸 것인가"를 정하는 것입니다.

Left, Right, Top, Bottom: 가장 기본적인 고정 규칙

가장 자주 쓰는 Constraints는 Left, Right, Top, Bottom입니다. 이 네 가지는 레이어가 부모 프레임의 어느 방향과 거리를 유지할지 결정합니다.

Left는 왼쪽 벽과의 거리를 유지합니다. 모바일 화면의 뒤로 가기 아이콘처럼 항상 왼쪽 상단에 있어야 하는 요소에 적합합니다. 프레임 폭이 넓어져도 아이콘은 왼쪽에서 같은 거리만큼 떨어진 위치에 머뭅니다.

Right는 오른쪽 벽과의 거리를 유지합니다. 닫기 버튼, 설정 아이콘, 알림 아이콘처럼 화면 오른쪽에 붙어 있어야 하는 요소에 자주 씁니다. 웹 화면에서는 우측 상단 프로필 메뉴나 도움말 버튼에 사용할 수 있습니다.

Top은 위쪽 벽과의 거리를 유지합니다. 헤더, 상단 내비게이션, 상태 메시지처럼 화면 상단 기준으로 배치되는 요소에 적합합니다.

Bottom은 아래쪽 벽과의 거리를 유지합니다. 모바일 하단 탭 바, 고정 CTA 버튼, 플로팅 버튼처럼 화면 아래쪽에 붙어 있어야 하는 요소에 사용합니다.

여기서 중요한 점은 수평과 수직을 함께 생각해야 한다는 것입니다. 왼쪽 상단의 뒤로 가기 아이콘이라면 수평은 Left, 수직은 Top입니다. 오른쪽 하단의 플로팅 버튼이라면 수평은 Right, 수직은 Bottom입니다. 이렇게 두 방향을 조합해야 실제 위치가 결정됩니다.

TIP · Constraints를 고를 때의 질문

이 요소가 화면 크기 변화에도 어느 쪽에 붙어 있어야 하는지 먼저 물어보세요. "왼쪽 위에 있어야 한다"면 Left와 Top, "오른쪽 아래에 있어야 한다"면 Right와 Bottom입니다. 위치를 말로 설명할 수 있으면 Constraints 선택도 쉬워집니다.

Center: 가운데에 머물러야 하는 요소

Center는 부모 프레임의 중앙을 기준으로 레이어 위치를 유지합니다. 수평 방향에서 Center를 선택하면 프레임 폭이 바뀌어도 레이어는 가로 중앙에 남습니다. 수직 방향에서 Center를 선택하면 프레임 높이가 바뀌어도 세로 중앙에 남습니다.

로그인 화면의 로고를 떠올려 봅시다. 로고가 화면의 가로 중앙에 있어야 한다면 수평 Constraints를 Center로 설정하는 것이 자연스럽습니다. 프레임 폭을 375px에서 430px로 늘려도 로고는 가운데에 머뭅니다. 반대로 수평을 Left로 둔 상태에서 프레임 폭을 늘리면 로고는 왼쪽에 가까워지고, 화면 전체로 보면 중앙에서 벗어난 것처럼 보입니다.

다만 Center는 신중하게 써야 합니다. 가운데 정렬이 필요한 요소에는 좋지만, 모든 요소를 Center로 설정하면 화면이 커질 때 좌우 여백 체계가 무너질 수 있습니다. 예를 들어 입력창까지 모두 Center로만 설정해 두면 입력창의 폭은 그대로이고 위치만 가운데에 남습니다. 작은 화면에서는 괜찮아 보이지만 큰 모바일 화면에서는 입력창이 지나치게 좁아 보일 수 있습니다.

그래서 실무에서는 로고처럼 크기가 고정되어도 괜찮은 요소는 Center를 쓰고, 입력창이나 카드처럼 화면 폭에 따라 넓어져야 하는 요소는 Left and right를 고려합니다.

Left and right, Top and bottom: 늘어나야 하는 영역

Constraints에서 가장 실무적인 설정 중 하나가 Left and right입니다. 이름 그대로 왼쪽과 오른쪽 여백을 모두 유지합니다. 부모 프레임의 폭이 커지면 레이어의 폭도 함께 커지고, 부모 프레임의 폭이 작아지면 레이어의 폭도 함께 줄어듭니다.

모바일 화면의 입력창을 생각해 봅시다. 보통 입력창은 왼쪽 여백 20px, 오른쪽 여백 20px을 유지한 채 화면 폭에 맞게 늘어나거나 줄어들어야 합니다. 이때 입력창을 Left and right로 설정하면 프레임 폭이 바뀌어도 양쪽 여백이 유지됩니다. 작은 기기에서는 적당히 줄어들고, 큰 기기에서는 자연스럽게 넓어집니다.

세로 방향의 Top and bottom도 같은 원리입니다. 위쪽과 아래쪽 여백을 모두 유지하기 때문에 부모 프레임의 높이가 바뀌면 레이어 높이도 함께 변합니다. 웹 대시보드의 사이드바처럼 화면 높이에 맞게 길어져야 하는 영역에 사용할 수 있습니다. 또는 모달 안에서 본문 영역이 위아래 기준을 유지하면서 늘어나야 할 때도 쓸 수 있습니다.

다만 Top and bottom은 아무 요소에나 쓰면 어색해질 수 있습니다. 텍스트 박스나 버튼처럼 높이가 고정되어야 하는 요소에 적용하면 화면 높이가 커질 때 버튼이 비정상적으로 길어질 수 있습니다. 따라서 이 설정은 "늘어나도 자연스러운 영역"에만 사용하는 것이 좋습니다.

Scale: 비율대로 커지고 작아지는 설정

Scale은 부모 프레임 크기가 변할 때 레이어의 위치와 크기를 비율에 따라 조정합니다. 예를 들어 어떤 사각형이 프레임의 왼쪽에서 20% 지점에 있고 폭이 전체의 50%라면, 프레임이 커질 때도 그 비율을 유지하려고 합니다.

말로 들으면 굉장히 좋아 보이지만, UI 디자인에서는 Scale을 자주 쓰지 않는 편입니다. 왜냐하면 실제 서비스 화면의 대부분은 비율보다 여백과 고정 기준이 더 중요하기 때문입니다. 버튼 글자는 비율대로 커지면 안 되고, 아이콘도 화면이 커진다고 함께 커지는 경우가 많지 않습니다. 입력창 역시 "화면의 60%만큼"보다는 "좌우 여백 20px을 유지"하는 방식이 더 자연스럽습니다.

Scale은 이미지나 일러스트처럼 전체 비율을 유지한 채 커지고 작아져도 괜찮은 요소에 제한적으로 사용하면 좋습니다. 예를 들어 온보딩 화면의 배경 그래픽, 지도 위의 장식 요소, 특정 비주얼 영역 안의 도형처럼 정확한 상대 비율이 중요한 경우에 사용할 수 있습니다.

하지만 기본값처럼 쓰지는 마세요. 실무 UI에서는 대부분 Left, Right, Center, Left and right 조합이 더 예측 가능하고 개발자에게 설명하기도 쉽습니다.

TIP · Scale을 쓰기 전에 확인하기

이 요소가 화면이 커질 때 정말 함께 커져야 하나요? 아이콘, 버튼, 텍스트처럼 읽기와 조작이 중요한 요소라면 Scale보다 고정 여백이나 Auto Layout의 Fill container가 더 적합한 경우가 많습니다.

고정 영역과 유동 영역을 구분하기

반응형 화면을 설계할 때 가장 먼저 해야 할 일은 "무엇을 고정하고, 무엇을 유동적으로 바꿀지" 나누는 것입니다. 이 구분을 하지 않은 상태에서 Constraints를 만지면 화면이 커질 때마다 예상 밖의 결과가 나옵니다.

고정 영역은 화면 크기가 바뀌어도 위치나 크기가 크게 변하지 않아야 하는 부분입니다. 대표적으로 모바일 상단 헤더, 하단 탭 바, 닫기 버튼, 뒤로 가기 아이콘, 웹 대시보드의 사이드 메뉴가 있습니다. 사용자가 길을 잃지 않도록 기준점 역할을 하는 영역입니다.

유동 영역은 화면 크기에 맞춰 넓어지거나 좁아져야 하는 부분입니다. 모바일의 입력창, 상품 카드 리스트, 웹 대시보드의 콘텐츠 영역, 표, 그래프, 검색 결과 목록이 여기에 해당합니다. 정보가 담기는 영역이기 때문에 화면이 넓어지면 더 많은 공간을 활용하고, 화면이 좁아지면 정해진 규칙 안에서 줄어들어야 합니다.

예를 들어 모바일 로그인 화면에서는 로고와 안내 문구는 상단 기준으로 고정하거나 중앙 기준으로 배치할 수 있습니다. 이메일 입력창과 비밀번호 입력창은 좌우 여백을 유지하며 폭이 변해야 합니다. 하단의 "계정 만들기" 링크나 고정 CTA 버튼은 아래쪽 기준을 유지해야 할 수 있습니다. 이렇게 영역별 성격을 나누면 Constraints 선택이 훨씬 명확해집니다.

모바일 화면에서 Constraints 적용하기

모바일 화면은 Constraints를 연습하기에 가장 좋은 무대입니다. 화면 폭과 높이가 기기마다 다르고, 상단과 하단에 고정되어야 하는 요소가 뚜렷하기 때문입니다.

로그인 화면을 예로 들어 보겠습니다. 프레임은 iPhone 13/14 정도의 크기라고 가정하고, 안에는 로고, 제목, 설명 문구, 이메일 입력창, 비밀번호 입력창, 로그인 버튼, 하단 회원가입 링크가 있습니다.

로고는 보통 가로 중앙에 있어야 하므로 수평을 Center로 설정합니다. 화면 위쪽에서 일정한 위치에 있어야 한다면 수직은 Top을 사용합니다. 제목과 설명 문구도 중앙 정렬된 형태라면 수평 Center, 수직 Top으로 둘 수 있습니다. 다만 텍스트 박스의 폭이 화면에 따라 변해야 한다면 텍스트 레이어 자체보다 텍스트를 감싸는 프레임을 만들고 그 프레임을 Left and right로 설정하는 편이 더 안정적입니다.

입력창과 로그인 버튼은 대부분 Left and right와 Top 조합이 적합합니다. 이렇게 하면 좌우 여백은 유지되면서 화면 폭에 맞게 넓어지거나 좁아집니다. 단, 버튼 안의 텍스트와 아이콘 정렬은 Auto Layout으로 잡는 것이 좋습니다. 즉, 버튼 프레임 자체는 Constraints로 부모 화면에 반응하고, 버튼 내부의 텍스트 배치는 Auto Layout으로 관리하는 방식입니다.

하단 회원가입 링크가 항상 화면 아래쪽에 있어야 한다면 수직을 Bottom으로 설정합니다. 가로 중앙에 있어야 한다면 수평은 Center입니다. 만약 하단에 고정 CTA 버튼을 둔다면 버튼 프레임은 수평 Left and right, 수직 Bottom이 자연스럽습니다.

이 구조는 작은 기기와 큰 기기에서 모두 테스트해야 합니다. 작은 화면에서는 입력창과 버튼이 너무 좁아지지 않는지, 하단 링크가 위 요소와 겹치지 않는지 확인합니다. 큰 화면에서는 로고와 입력 영역 사이가 지나치게 벌어지지 않는지, 하단 요소가 너무 멀리 떨어져 보이지 않는지 살펴봅니다.

단축키 박스 · 프레임 크기 테스트에 자주 쓰는 조작

작업	단축키/조작
선택한 요소를 프레임으로 감싸기	⌥ Option + ⌘ Command + G / Windows: Alt + Ctrl + G
Auto Layout 추가	Shift + A
선택한 프레임 미리보기	오른쪽 상단 Present 버튼 또는 ⌘ Command + Enter / Windows: Ctrl + Enter
프레임 크기 직접 변경	오른쪽 패널의 W, H 값 수정
비율 유지하며 크기 조절	모서리 드래그 중 Shift

웹 대시보드에서 Constraints 적용하기

웹 대시보드는 모바일보다 한 단계 더 복잡합니다. 화면 폭이 훨씬 크게 변하고, 고정 영역과 유동 영역이 동시에 등장하기 때문입니다.

가장 흔한 구조는 왼쪽 사이드바, 상단 헤더, 중앙 콘텐츠 영역으로 이루어진 대시보드입니다. 여기서 왼쪽 사이드바는 보통 폭이 고정되어 있고 높이는 화면 전체에 맞춰 늘어납니다. 따라서 사이드바 프레임은 수평 Left, 수직 Top and bottom으로 설정할 수 있습니다. 이렇게 하면 브라우저 높이가 커져도 사이드바가 아래까지 이어집니다.

상단 헤더는 사이드바 오른쪽에서 시작해 화면 오른쪽 끝까지 이어져야 합니다. 헤더가 전체 화면 기준으로 배치되어 있다면 수평 Left and right, 수직 Top이 필요합니다. 다만 사이드바를 제외한 콘텐츠 영역 안에 헤더를 넣는 구조라면, 헤더는 부모 콘텐츠 프레임 안에서 Left and right와 Top으로 설정하면 됩니다. 중요한 것은 부모 프레임을 무엇으로 잡았는지입니다.

중앙 콘텐츠 영역은 가장 유동적인 부분입니다. 브라우저 폭이 넓어지면 카드와 그래프 영역이 넓어지고, 폭이 줄어들면 카드가 줄어들거나 다음 줄로 내려가야 합니다. 이때 큰 콘텐츠 프레임은 Constraints로 Left and right, Top and bottom을 설정하고, 그 안의 카드 목록은 Auto Layout으로 간격과 줄바꿈 규칙을 잡는 방식이 실무적으로 좋습니다.

웹 대시보드에서 자주 하는 실수는 모든 카드를 절대 위치로 배치한 뒤 각각 Constraints를 따로 주는 것입니다. 이렇게 하면 처음에는 괜찮아 보이지만 화면 폭을 줄였을 때 카드 사이 간격이 깨지고, 특정 카드만 이상한 방향으로 늘어나는 일이 생깁니다. 카드들이 하나의 그룹처럼 움직여야 한다면 카드 컨테이너를 만들고, 그 컨테이너에 Auto Layout을 적용한 뒤, 컨테이너 자체를 부모 프레임에 Constraints로 고정하는 편이 훨씬 안정적입니다.

반응형 카드 영역 설계하기

카드 UI는 앱과 웹에서 모두 자주 등장합니다. 상품 카드, 게시글 카드, 통계 카드, 설정 카드처럼 반복되는 정보 덩어리는 대부분 카드 형태로 표현됩니다. 카드 영역은 Constraints와 Auto Layout을 함께 이해하기 좋은 예시입니다.

카드 하나의 내부를 먼저 봅시다. 카드 안에는 썸네일, 제목, 설명, 버튼이 있을 수 있습니다. 이 내부 구조는 Auto Layout으로 만드는 것이 좋습니다. 썸네일 아래에 제목이 오고, 제목 아래에 설명이 오며, 설명이 길어지면 버튼이 아래로 밀리는 구조는 Auto Layout이 잘하는 일입니다.

그다음 카드 여러 개를 담는 카드 리스트 또는 카드 그리드를 생각합니다. 카드들이 가로로 나열되고 일정한 간격을 유지해야 한다면 이 컨테이너 역시 Auto Layout을 사용할 수 있습니다. 웹 화면에서 폭이 넓어질 때 카드가 더 넓어져야 한다면 카드의 리사이징을 Fill container로 설정하고, 컨테이너는 부모 프레임에 대해 Left and right로 반응하게 만들 수 있습니다.

마지막으로 카드 영역 전체가 화면 안에서 어디에 붙어 있어야 하는지 정합니다. 대시보드 본문 안의 카드 섹션이라면 수평은 Left and right, 수직은 Top 또는 Top and bottom이 될 수 있습니다. 카드 영역이 화면 아래까지 스크롤되는 본문이라면 높이를 억지로 늘리기보다 콘텐츠 흐름에 맡기는 편이 더 자연스럽습니다. 반대로 그래프 패널처럼 화면 높이에 맞춰 커져야 하는 영역이라면 Top and bottom을 고려할 수 있습니다.

이렇게 계층을 나누면 복잡한 카드 레이아웃도 단순해집니다. 카드 내부는 Auto Layout, 카드 묶음도 Auto Layout, 카드 영역이 화면에 붙는 방식은 Constraints입니다.

Auto Layout과 Constraints는 경쟁 관계가 아니다

초보자가 가장 많이 헷갈리는 부분이 바로 이것입니다. "Auto Layout을 썼는데 Constraints도 써야 하나요?" 또는 "Constraints를 주면 Auto Layout이 무시되나요?"라는 질문이 자주 나옵니다.

답은 이렇습니다. 둘은 같은 일을 하는 기능이 아닙니다.

Auto Layout은 주로 부모 안에서 자식들이 어떤 순서와 간격으로 배치될지 관리합니다. 버튼 안의 텍스트와 아이콘 간격, 카드 안의 제목과 본문 간격, 리스트 아이템 사이의 간격처럼 내부 흐름을 다룹니다.

Constraints는 부모 프레임의 크기가 바뀔 때 선택한 레이어가 부모를 기준으로 어떻게 반응할지 관리합니다. 화면이 넓어질 때 검색창이 같이 넓어질지, 하단 버튼이 계속 아래에 붙어 있을지, 사이드바가 높이에 맞게 늘어날지를 정합니다.

실무에서는 둘을 함께 쓰는 경우가 많습니다. 예를 들어 로그인 버튼을 만든다고 해 봅시다. 버튼 내부의 텍스트는 Auto Layout으로 가운데 정렬합니다. 버튼 자체는 모바일 화면 안에서 좌우 여백을 유지해야 하므로 Constraints를 Left and right, Bottom 또는 Top으로 설정합니다. 이때 Auto Layout은 버튼 내부를 관리하고, Constraints는 버튼이 화면 안에서 반응하는 방식을 관리합니다.

다만 한 가지 중요한 규칙이 있습니다. 부모 프레임이 Auto Layout 프레임인 경우, 그 안의 자식 위치는 Constraints보다 Auto Layout의 정렬, 간격, 리사이징 설정에 의해 주로 결정됩니다. 즉, Auto Layout 컨테이너 안에서는 자식에게 Hug contents, Fill container, Fixed 같은 리사이징 설정을 더 많이 사용합니다. 반면 그 Auto Layout 컨테이너 자체가 바깥 화면 프레임 안에서 어디에 붙어야 하는지는 Constraints로 관리할 수 있습니다.

정리하면 이렇게 이해하면 됩니다. 안쪽 질서는 Auto Layout, 바깥 기준점은 Constraints입니다.

TIP · 실무 조합 공식

버튼, 카드, 리스트 아이템처럼 내용이 들어 있는 작은 UI는 Auto Layout으로 만드세요. 그 UI 묶음이 화면 안에서 어디에 붙고 얼마나 늘어날지는 Constraints로 정하세요. 화면 전체를 한 번에 해결하려고 하지 말고, "내부 규칙"과 "외부 반응"을 나누면 훨씬 쉬워집니다.

리사이징 방식: Fixed, Hug, Fill과 함께 이해하기

Auto Layout을 사용할 때 자주 만나는 리사이징 옵션이 있습니다. Fixed, Hug contents, Fill container입니다. Constraints와 함께 쓰려면 이 셋의 성격도 알아야 합니다.

Fixed는 크기를 고정합니다. 아이콘, 아바타, 특정 크기의 썸네일처럼 화면이 커져도 그대로 있어야 하는 요소에 적합합니다. 예를 들어 24px 아이콘은 대시보드가 넓어져도 24px이어야 합니다.

Hug contents는 안의 내용에 맞춰 크기를 감쌉니다. 버튼 텍스트가 길어지면 버튼 폭도 늘어나는 구조가 대표적입니다. 태그, 작은 배지, 텍스트 버튼처럼 내용 길이에 따라 자연스럽게 변해야 하는 요소에 좋습니다.

Fill container는 부모 컨테이너의 남는 공간을 채웁니다. 입력창, 검색창, 카드, 본문 영역처럼 사용 가능한 공간을 넓게 써야 하는 요소에 적합합니다.

이 세 가지는 Auto Layout 내부에서 특히 중요합니다. 예를 들어 검색 바 컴포넌트를 만든다고 해 봅시다. 왼쪽 검색 아이콘은 Fixed, 가운데 입력 텍스트 영역은 Fill container, 오른쪽 삭제 버튼은 Fixed로 설정할 수 있습니다. 검색 바 전체는 화면 프레임 안에서 Constraints를 Left and right, Top으로 설정합니다. 그러면 화면이 넓어질 때 검색 바 전체가 넓어지고, 내부에서는 입력 영역만 자연스럽게 늘어납니다.

이것이 실무에서 가장 많이 쓰는 반응형 조합입니다. 바깥은 Constraints로 늘리고, 안쪽은 Fill container로 공간을 분배합니다.

프레임 크기 변경으로 테스트하기

Constraints는 설정하는 것보다 테스트하는 것이 더 중요합니다. 설정값만 보고 "잘 되겠지"라고 생각하면 실제 기기 크기에서 깨지는 경우가 많습니다. 반드시 프레임 크기를 직접 바꿔 보며 확인해야 합니다.

가장 쉬운 방법은 프레임을 선택한 뒤 오른쪽 패널에서 W와 H 값을 수정하는 것입니다. 예를 들어 모바일 화면을 390×844에서 360×780으로 줄여 보고, 다시 430×932로 키워 봅니다. 이때 요소들이 어디에 붙어 있는지, 입력창과 버튼 폭이 자연스럽게 변하는지, 하단 요소가 겹치지 않는지 확인합니다.

프레임의 오른쪽이나 아래쪽 가장자리를 직접 드래그해 보는 것도 좋습니다. 이 방법은 화면이 변하는 순간을 눈으로 볼 수 있어 Constraints의 효과를 이해하기 쉽습니다. 다만 실무 검수 단계에서는 정확한 수치로 테스트하는 편이 좋습니다. 실제 프로젝트에서 지원할 기기 크기나 브레이크포인트를 기준으로 확인해야 하기 때문입니다.

웹 화면이라면 1440px, 1280px, 1024px, 768px처럼 대표 폭을 정해 놓고 테스트하는 습관이 필요합니다. 모바일이라면 작은 기기, 일반 기기, 큰 기기 정도로 나누어 확인합니다. 모든 기기를 완벽히 만들 필요는 없지만, 최소한 "작아졌을 때 깨지지 않는가"와 "커졌을 때 어색하게 비어 보이지 않는가"는 확인해야 합니다.

체크 박스 · 리사이징 테스트 순서

순서	확인할 내용
1	프레임 폭을 줄였을 때 텍스트와 버튼이 겹치지 않는가
2	프레임 폭을 늘렸을 때 유동 영역이 자연스럽게 넓어지는가
3	상단 헤더와 하단 버튼이 의도한 위치에 남아 있는가
4	아이콘과 로고처럼 고정되어야 할 요소가 불필요하게 커지지 않는가
5	Auto Layout 내부 요소가 Fill, Hug, Fixed 규칙대로 반응하는가

미리보기에서 확인해야 할 것

Figma의 캔버스에서 프레임을 조절하는 것만으로도 많은 문제를 찾을 수 있지만, 실제 사용 흐름은 미리보기에서 확인하는 것이 좋습니다. 오른쪽 상단의 Present 버튼을 눌러 프로토타입 미리보기로 들어가면 화면이 실제 앱이나 웹처럼 보입니다.

미리보기에서는 단순히 정적인 배치만 보지 말고 사용자가 보는 순서로 확인해야 합니다. 첫 화면에서 중요한 버튼이 보이는지, 하단 고정 요소가 너무 아래로 밀려 보이지 않는지, 긴 콘텐츠가 있을 때 스크롤 영역이 자연스러운지 살펴봅니다.

특히 모바일 화면에서는 하단 버튼을 고정해 두었을 때 콘텐츠와 겹치는지 확인해야 합니다. Constraints의 Bottom은 버튼을 아래에 붙여 주지만, 본문 콘텐츠가 길어졌을 때 자동으로 버튼을 피해 주지는 않습니다. 이런 경우에는 콘텐츠 영역과 하단 고정 영역을 분리하고, Prototype 단계에서 스크롤 동작을 함께 설정해야 합니다. Constraints는 위치 반응을 담당하고, 스크롤 동작은 프로토타입 설정에서 다루는 별도 문제입니다.

웹 화면에서는 브라우저 폭이 줄어들었을 때 사이드바와 콘텐츠가 충돌하지 않는지 확인합니다. 디자인 단계에서 최소 폭을 정해 두지 않으면 카드와 표가 너무 좁아져 읽기 어려워질 수 있습니다. 이때는 개발자와 함께 "이 폭 이하에서는 카드가 한 줄로 내려간다" 또는 "이 폭 이하에서는 사이드바가 접힌다" 같은 규칙을 정해야 합니다.

기획자와 개발자에게 설명할 수 있는 화면 만들기

Constraints를 잘 쓰는 디자이너는 단순히 화면을 예쁘게 만드는 사람이 아닙니다. 화면이 변할 때의 규칙을 설명할 수 있는 사람입니다.

예를 들어 모바일 로그인 화면을 공유할 때 이렇게 말할 수 있어야 합니다.

"입력창과 로그인 버튼은 좌우 20px 여백을 유지하면서 기기 폭에 따라 늘어납니다. 로고는 상단에서 96px 떨어진 위치에 있고 가로 중앙 정렬입니다. 하단 회원가입 링크는 화면 아래에서 32px 떨어진 위치를 유지합니다."

웹 대시보드라면 이렇게 설명할 수 있습니다.

"왼쪽 사이드바는 240px로 고정되고 화면 높이에 맞춰 늘어납니다. 상단 헤더와 콘텐츠 영역은 오른쪽 끝까지 유동적으로 확장됩니다. 카드들은 컨테이너 폭에 맞춰 넓어지며, 일정 폭 이하에서는 줄바꿈 또는 1열 구조로 전환하는 것을 권장합니다."

이런 설명은 개발자에게 큰 도움이 됩니다. 개발자는 화면을 코드로 만들 때 고정값, 유동값, 최소값, 최대값을 구분해야 합니다. 디자이너나 기획자가 Constraints 기준을 명확히 설명하면 개발자는 CSS의 position, width, max-width, flex, grid 같은 속성으로 옮기기 쉬워집니다. 물론 Figma의 설정이 코드로 그대로 변환되는 것은 아니지만, 의도를 전달하는 데에는 매우 강력한 언어가 됩니다.

기획자에게도 도움이 됩니다. 기획자는 다양한 화면 크기에서 정보 우선순위가 어떻게 유지되는지 확인할 수 있습니다. 작은 화면에서 꼭 보여야 할 버튼이 사라지지 않는지, 큰 화면에서 중요한 정보가 너무 흩어지지 않는지 판단할 수 있습니다. 결국 Constraints는 디자인 도구의 기능을 넘어, 팀이 화면의 규칙을 함께 이해하게 만드는 장치입니다.

자주 생기는 문제와 해결법

Constraints를 처음 사용할 때는 몇 가지 문제가 반복해서 생깁니다. 이 문제들은 대부분 부모 프레임, 기준 방향, Auto Layout과의 역할 구분을 놓쳐서 발생합니다.

첫 번째 문제는 레이어가 생각한 대로 움직이지 않는 경우입니다. 이때는 먼저 부모 프레임이 무엇인지 확인해야 합니다. Constraints는 페이지 전체가 아니라 직접 속한 부모 프레임을 기준으로 작동합니다. 레이어가 엉뚱한 프레임 안에 들어가 있으면 아무리 Constraints를 바꿔도 예상과 다르게 움직입니다. 레이어 패널에서 계층 구조를 확인하고, 필요한 경우 올바른 프레임 안으로 옮겨야 합니다.

두 번째 문제는 버튼이나 입력창이 화면 폭에 따라 늘어나지 않는 경우입니다. 이때는 수평 Constraints가 Left나 Center로 되어 있을 가능성이 높습니다. 좌우 여백을 유지하며 폭이 변해야 한다면 Left and right를 사용해야 합니다. Auto Layout 내부라면 해당 요소의 리사이징이 Fill container인지도 함께 확인합니다.

세 번째 문제는 아이콘이나 로고가 이상하게 커지는 경우입니다. 이때는 Scale이 적용되어 있거나, Auto Layout 안에서 Fill 설정이 불필요하게 들어갔을 수 있습니다. 아이콘과 로고처럼 고정 크기를 유지해야 하는 요소는 Fixed에 가깝게 관리하고, Constraints도 Left, Right, Center처럼 위치 중심으로 설정하는 편이 안전합니다.

네 번째 문제는 하단 고정 버튼이 본문을 가리는 경우입니다. Constraints의 Bottom은 버튼을 아래에 붙여 줄 뿐, 본문 콘텐츠와의 충돌을 자동으로 해결하지 않습니다. 이럴 때는 본문 영역과 하단 버튼 영역을 분리하고, 본문에 충분한 하단 여백을 주거나 스크롤 영역을 별도로 설계해야 합니다.

TIP · 문제가 생겼을 때 보는 순서

순서	질문
1	이 레이어의 부모 프레임은 정확한가?
2	수평 Constraints와 수직 Constraints가 의도와 맞는가?
3	Auto Layout 내부라면 Fixed, Hug, Fill 설정이 맞는가?
4	고정되어야 할 요소와 늘어나야 할 요소를 구분했는가?
5	작은 화면과 큰 화면에서 직접 테스트했는가?

실무에서 추천하는 반응형 설계 순서

반응형 화면을 처음부터 완벽하게 만들려고 하면 어렵습니다. 대신 순서를 정해 두면 훨씬 수월합니다.

먼저 기본 화면 크기 하나를 정합니다. 모바일 앱이라면 가장 많이 쓰는 기준 기기 하나를 선택하고, 웹이라면 1440px 또는 팀에서 정한 기본 데스크톱 폭을 기준으로 시작합니다. 이 기준 화면에서 정보 구조와 시각적 위계를 먼저 안정적으로 잡습니다.

그다음 화면을 큰 영역으로 나눕니다. 모바일이라면 상단 영역, 본문 영역, 하단 영역으로 나눌 수 있습니다. 웹이라면 사이드바, 헤더, 콘텐츠 영역, 보조 패널로 나눌 수 있습니다. 이 단계에서는 세부 요소보다 영역의 역할을 먼저 생각합니다.

이후 각 영역이 고정인지 유동인지 결정합니다. 상단 헤더는 고정, 입력창은 유동, 아이콘은 고정, 카드 그리드는 유동처럼 구분합니다. 이 구분이 끝나면 Constraints 설정은 자연스럽게 따라옵니다.

마지막으로 프레임 크기를 바꾸며 테스트합니다. 작은 화면, 기준 화면, 큰 화면을 오가며 요소가 의도한 대로 움직이는지 확인합니다. 문제가 생기면 개별 레이어만 고치지 말고, 부모 프레임과 Auto Layout 구조부터 다시 봅니다. 반응형 문제의 원인은 대개 눈에 보이는 버튼 하나가 아니라 그 버튼을 담고 있는 구조에 있습니다.

실무 팁 박스 · 반응형 설계의 작은 습관

상황	추천 습관
모바일 화면 설계	작은 기기와 큰 기기 프레임을 복제해 나란히 비교하기
웹 화면 설계	최소 폭, 기준 폭, 넓은 폭을 정해 카드와 표를 테스트하기
개발 전달 전	고정 영역과 유동 영역을 코멘트로 표시하기
버튼·입력창 제작	내부는 Auto Layout, 화면 반응은 Constraints로 나누기
깨짐 발견	레이어 하나보다 부모 프레임 구조부터 확인하기

핵심 요약

Constraints는 부모 프레임의 크기가 바뀔 때 자식 레이어가 어디에 붙고 어떻게 변할지 정하는 기능입니다. Left, Right, Top, Bottom은 특정 방향의 여백을 유지하고, Center는 중앙 기준을 유지합니다. Left and right와 Top and bottom은 양쪽 기준을 유지하기 때문에 폭이나 높이가 함께 변합니다. Scale은 비율대로 변형되지만, 일반적인 UI 요소에는 신중하게 사용해야 합니다.

반응형 설계의 핵심은 고정 영역과 유동 영역을 구분하는 것입니다. 모바일에서는 헤더, 하단 버튼, 입력창의 반응 방식을 다르게 설정해야 하고, 웹 대시보드에서는 사이드바, 헤더, 콘텐츠 영역의 역할을 분리해야 합니다. 카드 영역처럼 반복되는 UI는 내부 구조를 Auto Layout으로 만들고, 카드 영역 전체가 화면에 반응하는 방식은 Constraints로 관리하면 안정적입니다.

Auto Layout과 Constraints는 경쟁 관계가 아닙니다. Auto Layout은 내부 배치와 간격을 담당하고, Constraints는 바깥 프레임 변화에 대한 반응을 담당합니다. 특히 Auto Layout 컨테이너 안에서는 Fixed, Hug contents, Fill container를 함께 이해해야 합니다.

마지막으로 Constraints는 반드시 테스트해야 합니다. 프레임 크기를 직접 줄이고 늘려 보면서 작은 화면에서 겹치지 않는지, 큰 화면에서 어색하게 비어 보이지 않는지 확인하세요. 좋은 반응형 디자인은 설정값이 많은 디자인이 아니라, 화면이 변해도 의도가 흔들리지 않는 디자인입니다.

실습 과제: 모바일 화면을 작은 기기와 큰 기기에 맞게 조정하기

이번 실습에서는 Auto Layout으로 만든 로그인 화면이나 간단한 모바일 홈 화면을 사용합니다. 아직 준비된 화면이 없다면 새 모바일 프레임을 만들고 로고, 제목, 입력창 2개, 로그인 버튼, 하단 링크를 배치해도 좋습니다.

1단계: 기준 모바일 화면 만들기

먼저 기준이 되는 모바일 프레임을 하나 정합니다. 예를 들어 390×844 크기의 프레임을 만들고 이름을 Login / Base로 지정합니다. 화면 안에는 로고, 제목, 설명 문구, 이메일 입력창, 비밀번호 입력창, 로그인 버튼, 하단 회원가입 링크를 배치합니다.

입력창과 버튼은 좌우 여백을 동일하게 맞춥니다. 예를 들어 왼쪽 20px, 오른쪽 20px로 설정합니다. 버튼 내부 텍스트는 Auto Layout으로 가운데 정렬해 둡니다.

2단계: 요소별 Constraints 설정하기

로고는 수평 Center, 수직 Top으로 설정합니다. 제목과 설명 문구도 중앙에 있어야 한다면 수평 Center, 수직 Top을 사용합니다. 입력창 2개와 로그인 버튼은 수평 Left and right, 수직 Top으로 설정합니다. 하단 회원가입 링크는 수평 Center, 수직 Bottom으로 설정합니다.

이때 입력창과 버튼이 Auto Layout 프레임이라면 내부 텍스트와 아이콘의 정렬도 확인합니다. 텍스트는 가운데 또는 왼쪽 정렬이 의도대로 되어 있어야 하고, 입력창 안의 placeholder 영역은 필요하다면 Fill container로 설정합니다.

3단계: 작은 기기 프레임으로 테스트하기

기준 프레임을 복제하고 이름을 Login / Small로 바꿉니다. 프레임 크기를 360×780 정도로 줄여 봅니다. 이때 입력창과 버튼이 좌우 여백을 유지하면서 줄어드는지 확인합니다. 로고와 제목이 너무 위로 붙거나, 하단 링크가 버튼과 겹치지 않는지도 봅니다.

만약 하단 링크가 본문 요소와 겹친다면 본문 요소 간 간격을 줄이거나, 하단 링크를 반드시 고정해야 하는지 다시 판단합니다. 작은 화면에서는 모든 요소를 한 화면에 억지로 넣기보다 스크롤 구조를 고려하는 것이 더 나을 수 있습니다.

4단계: 큰 기기 프레임으로 테스트하기

다시 기준 프레임을 복제하고 이름을 Login / Large로 바꿉니다. 프레임 크기를 430×932 정도로 키워 봅니다. 입력창과 버튼이 자연스럽게 넓어지는지, 로고와 제목이 중앙 기준을 유지하는지 확인합니다. 화면이 커졌을 때 상단 영역과 입력 영역 사이가 지나치게 벌어져 보인다면 전체 콘텐츠를 감싸는 프레임을 만들고 Auto Layout으로 간격을 관리하는 방법을 고려합니다.

큰 화면에서 버튼 폭이 너무 넓어 보인다면 최대 폭을 별도로 정하는 설계도 가능합니다. 예를 들어 모바일에서는 좌우 여백을 유지하되, 태블릿 이상에서는 입력 영역의 최대 폭을 420px로 제한하고 중앙 정렬하는 식입니다. Figma에서는 별도 태블릿 프레임을 만들어 이 규칙을 화면 예시로 보여 주면 좋습니다.

5단계: 설명 코멘트 남기기

마지막으로 기준 화면 옆에 짧은 설명을 적어 봅니다. 예를 들어 "입력창과 버튼은 좌우 20px 여백 유지", "로고는 상단 기준, 가로 중앙 정렬", "하단 링크는 화면 아래 32px 기준"처럼 작성합니다.

이 설명은 단순한 메모가 아닙니다. 개발자에게는 구현 기준이 되고, 기획자에게는 화면 정책이 됩니다. Constraints를 설정하는 데서 끝나지 말고, 화면이 변할 때의 규칙을 말로 설명하는 연습까지 해 보세요. 그것이 실무에서 통하는 반응형 설계의 시작입니다.