3장. 프레임, 자동 레이아웃, 변수 — 반응형의 3대 기둥

반응형 UI를 처음 배울 때 많은 사람이 화면 크기부터 떠올린다. 데스크톱, 태블릿, 모바일. 물론 맞는 말이다. 하지만 피그마에서 진짜 반응형은 화면 크기보다 먼저 규칙에서 시작된다. 무대가 되는 프레임이 있고, 그 안에서 요소들이 어떻게 줄 서고 늘어나고 줄어드는지를 정하는 자동 레이아웃이 있고, 그 규칙에 들어가는 값을 일관되게 바꾸는 변수가 있다.

이 셋을 따로 배우면 금방 헷갈린다. 프레임은 알겠는데 왜 카드가 늘어나지 않는지 모르겠고, 자동 레이아웃은 켰는데 왜 버튼이 이상하게 찌그러지는지 모르겠고, 변수는 만들었는데 어디에 왜 써야 하는지 감이 오지 않는다. 반대로 이 셋을 한 덩어리로 이해하면 피그마 파일이 갑자기 살아 움직인다. 텍스트가 길어져도 버튼이 망가지지 않고, 언어를 바꿔도 카드가 버티고, 화면 폭이 달라져도 레이아웃이 덜 부서진다.

짧게 요약하면 이렇다.

• 프레임은 경계를 만든다.

• 자동 레이아웃은 관계를 만든다.

• 변수는 의미를 만든다.

이 장에서는 이 세 가지를 각각 설명한 뒤, 마지막에 하나의 흐름으로 묶어 보겠다. 목표는 단순하다. 보기 좋은 화면이 아니라, 바뀌어도 안 무너지는 화면을 만드는 것이다.

반응형은 화면이 아니라 컨테이너에서 시작된다

피그마에서 프레임은 단순한 네모가 아니다. 프레임은 다른 요소를 담는 컨테이너다. 그래서 크기를 갖고, 부모가 될 수 있고, 자식에게 반응 규칙을 줄 수 있다. 레이아웃 그리드를 붙일 수도 있고, 프로토타입의 시작 화면이 될 수도 있다. 쉽게 말해 그룹이 단순히 묶음이라면, 프레임은 질서를 가진 상자다.

입문자가 가장 많이 하는 실수는 카드나 섹션을 그룹으로 만들고, 그 안의 요소를 손으로 맞춰 놓는 것이다. 처음엔 빨라 보인다. 하지만 텍스트가 두 줄이 되는 순간, 버튼 문구가 길어지는 순간, 언어가 바뀌는 순간, 모든 것이 삐끗한다. 그룹은 관계를 설명하지 않기 때문이다. 프레임은 다르다. 이 상자가 어디까지인지, 안쪽 여백이 얼마인지, 자식들이 어떤 기준으로 반응해야 하는지를 담을 수 있다.

그래서 반응형 UI를 만들 때는 화면 전체만 프레임으로 잡으면 부족하다. 헤더도 프레임, 카드도 프레임, 카드 안의 헤더 영역도 프레임, 버튼도 프레임이어야 한다. 조금 과장하면, 의미 있는 덩어리는 거의 다 프레임이 되는 편이 낫다. 그래야 피그마가 이 파일을 단순한 그림이 아니라 구조로 이해한다.

좋은 프레임 설계는 세 가지 질문에서 출발한다. 이 요소의 바깥 경계는 어디까지인가. 이 안의 요소들은 같이 움직여야 하는가. 나중에 내용이 늘어나거나 줄어들 가능성이 있는가. 이 질문에 예라고 답하는 순간, 그건 대개 프레임으로 다뤄야 한다.

자동 레이아웃: 정렬 기능이 아니라 행동 규칙

프레임이 상자라면, 자동 레이아웃은 그 상자 안에서 일어나는 생활 규칙이다. 어떤 요소가 가로로 놓일지, 세로로 쌓일지, 사이 간격은 얼마일지, 상자 가장자리와 콘텐츠 사이 여백은 얼마일지, 그리고 내용이 바뀌었을 때 누가 늘어나고 누가 고정될지를 정한다. Figma의 Auto Layout은 가로, 세로, 그리드 흐름을 지원하고, 패딩, 간격, 정렬, 크기 조정 같은 속성으로 콘텐츠 변화에 따라 레이아웃이 자동으로 반응하게 만든다.¹

버튼 하나를 떠올려 보자. 아이콘과 텍스트가 있고, 그 바깥에 좌우 12, 상하 8의 여백이 있다고 하자. 이것을 손으로 맞추면 텍스트가 바뀔 때마다 다시 정렬해야 한다. 하지만 버튼 프레임에 자동 레이아웃을 걸고, 방향을 가로로 두고, 간격과 패딩을 정해 두면 끝이다. 텍스트가 길어지면 버튼이 함께 커지고, 아이콘을 빼면 간격도 자연스럽게 정리된다.

이때 핵심은 세 가지 크기 조정 방식이다. 이름은 영어지만, 원리는 아주 단순하다.¹

• Hug contents는 내용 크기에 맞춰 상자가 따라간다.

• Fill container는 부모가 허락한 남는 공간을 채운다.

• Fixed는 정해진 크기를 유지한다.

이 셋을 몸으로 이해하는 순간 자동 레이아웃은 갑자기 쉬워진다. 예를 들어 버튼은 대개 가로는 Hug, 높이는 Fixed이거나 최소 높이를 가진 Hug가 잘 맞는다. 검색 바는 아이콘은 Fixed, 입력 영역은 Fill, 바깥 프레임은 Fill이 잘 맞는다. 카드 리스트는 각 카드는 Fill이나 고정된 최소 너비를 갖고, 카드들을 감싸는 부모 프레임은 가로 Wrap이나 그리드 흐름으로 관리하면 훨씬 안정적이다.¹

자동 레이아웃에서 특히 자주 마주치는 포인트가 중첩이다. 실제 UI는 한 방향으로만 흐르지 않는다. 카드 전체는 세로로 쌓이지만, 카드 헤더 안에서는 아바타와 이름이 가로로 놓이고, 본문 안에서는 또 세로 흐름이 생긴다. 그래서 좋은 화면은 거의 항상 자동 레이아웃 안에 자동 레이아웃이 들어 있다. 바깥은 세로, 안쪽은 가로, 다시 그 안쪽은 세로. 이렇게 중첩된 프레임이 쌓이면서 화면이 만들어진다.¹

또 하나 알아둘 것은 오토레이아웃 무시다. 예전의 절대 위치와 같은 개념인데, 부모 프레임 안에 있으면서도 자동 레이아웃 흐름에서는 빠진다.¹ 카드 오른쪽 위에 붙는 뱃지나, 썸네일 위에 겹쳐지는 북마크 아이콘 같은 것이 여기에 해당한다. 모든 것을 자동 레이아웃의 줄 세우기 안에 넣으려 하면 오히려 복잡해진다. 규칙적으로 흐를 것은 흐르게 두고, 겹쳐야 할 것은 예외로 분리하면 된다.

프레임이 좋고 자동 레이아웃이 좋아도, 값이 엉망이면 결국 무너진다

여기서 많은 파일이 다시 흐트러진다. 구조는 그럴듯한데 간격 값이 제각각이기 때문이다. 어떤 카드 패딩은 14, 어떤 섹션은 18, 어떤 버튼은 11. 처음엔 별문제 없어 보여도 화면이 커지고 팀원이 늘어나면 파일이 금방 지저분해진다. 이때 필요한 것이 변수다.

변수는 재사용 가능한 값을 저장하는 장치다. 색상, 숫자, 문자열, 불리언 같은 값을 변수로 만들어 디자인 속성이나 프로토타입에 연결할 수 있다.² 한마디로, 숫자와 색에 이름을 붙여서 다시 쓰게 만드는 기능이다. 그냥 16px를 넣는 대신 spacing/16 같은 이름을 붙여 넣는다고 생각하면 이해가 쉽다.

이 차이는 생각보다 크다. 16이라는 숫자는 그냥 숫자다. 하지만 spacing/md는 역할이 있다. 지금은 16일 수 있지만, 모바일 모드에선 12로, 대형 화면에선 20으로 바뀔 수 있다. 같은 값이 아니라 같은 의미를 쓰는 것이다.

변수의 진짜 힘은 모드에서 드러난다. Figma 변수는 컬렉션과 모드를 통해 같은 변수에 여러 값을 둘 수 있다.² 그래서 light와 dark를 바꾸거나, 브랜드 A와 브랜드 B를 바꾸거나, 심지어 모바일과 데스크톱에서 같은 컴포넌트의 간격과 크기를 다르게 가져갈 수 있다. 색상만 바꾸는 기능으로 생각하면 절반만 이해한 셈이다.

가장 쉬운 예는 여백이다. 페이지 좌우 여백을 page/padding/x라는 숫자 변수로 만들고, Desktop 모드에서는 32, Mobile 모드에서는 16으로 둔다. 그다음 이 변수를 주요 섹션 프레임의 좌우 패딩에 연결한다. 그러면 모드 전환만으로 화면의 호흡이 달라진다. 카드 간 간격, 버튼 높이, 코너 반경, 심지어 본문 줄 간격까지 이런 방식으로 정리할 수 있다.²

문자열 변수도 의외로 강력하다. 같은 카드에 한국어 제목, 영어 제목, 일본어 제목을 문자열 변수로 바꿔 넣으면, 어느 언어에서 줄바꿈이 무너지는지 미리 확인할 수 있다.² 반응형은 폭만의 문제가 아니다. 콘텐츠 길이도 반응형의 일부다.

셋을 연결해 보기: 반응형 카드 하나를 제대로 만드는 법

이제 프레임, 자동 레이아웃, 변수를 한 번에 묶어 보자. 예제로 가장 흔한 카드 컴포넌트를 생각해 보자. 썸네일, 제목, 설명, 태그, 버튼이 들어 있는 제품 카드다.

먼저 카드 바깥을 프레임으로 만든다. 여기서 중요한 것은 카드의 시각적 경계가 아니라 구조적 경계를 잡는 일이다. 이 카드 전체가 하나의 덩어리로 이동하고 재사용될 것이므로, 가장 바깥 상자는 프레임이어야 한다. 이 프레임에 세로 자동 레이아웃을 적용한다. 왜 세로냐고 묻는다면, 카드의 주요 정보가 위에서 아래로 읽히기 때문이다.

그다음 카드 패딩과 내부 간격을 변수로 연결한다. 예를 들어 padding/card, gap/card, radius/card 같은 숫자 변수를 만든다. 아직 디자인 시스템 전체를 설계하는 단계는 아니더라도, 최소한 이런 핵심 값만큼은 숫자를 직접 입력하지 않는 편이 좋다. 그래야 카드 스타일을 바꾸고 싶을 때 한 군데에서 조정할 수 있다.

이제 카드 내부를 나눈다. 상단 메타 영역은 다시 가로 자동 레이아웃 프레임으로 만든다. 왼쪽에는 작은 썸네일이나 아이콘이 오고, 오른쪽에는 텍스트 묶음이 온다. 썸네일은 대개 Fixed가 맞다. 하지만 텍스트 묶음은 Fill이 더 낫다. 부모가 허용하는 공간을 채우면서 제목과 설명이 자연스럽게 줄바꿈되기 때문이다. 여기서 제목 텍스트 박스를 억지로 고정 폭으로 두면 곧바로 문제가 시작된다. 화면이 줄어들거나 언어가 바뀌는 순간 카드 높이가 이상하게 튀거나 다른 요소와 겹칠 수 있다.¹

버튼 영역도 같은 방식이다. 버튼 하나라면 버튼 자체는 Hug contents로 두고, 카드 안에서는 정렬 규칙으로 위치를 잡는다. 버튼이 두 개라면 바깥 래퍼 프레임을 가로 자동 레이아웃으로 만들고, 각 버튼을 Fill로 두어 남는 폭을 나눠 갖게 할 수 있다. 이렇게 하면 데스크톱에서는 나란히, 좁은 폭에서는 자연스럽게 줄어든다.

이 카드 여러 개를 한 줄에 배치할 때는 선택지가 생긴다. 콘텐츠가 일정하고 열 중심으로 보이고 싶다면 그리드 자동 레이아웃이 좋다. 카드 폭에 따라 다음 줄로 자연스럽게 넘기고 싶다면 가로 자동 레이아웃에 Wrap을 쓰는 편이 직관적이다.¹ 어느 쪽을 쓰든 중요한 것은 카드 자체가 이미 반응형으로 설계돼 있어야 한다는 점이다. 카드 내부가 Fixed 덩어리라면 바깥 레이아웃만 바꿔서는 해결되지 않는다.

마지막으로 모드를 바꿔 본다. Desktop 모드에서는 카드 패딩 24, 내부 간격 16, 버튼 높이 44였다고 하자. Mobile 모드에서는 각각 16, 12, 40으로 줄인다. 카드 구조는 그대로 두고 값만 바뀌니, 같은 컴포넌트가 다른 화면 밀도에 맞춰 자연스럽게 적응한다. 나중에 컴포넌트의 variant와 breakpoint를 연결하면 특정 환경에서 적절한 변형이 자동으로 적용되는 흐름까지 만들 수 있다.³

여기서 중요한 깨달음이 하나 있다. 반응형은 매번 새 화면을 그리는 작업이 아니라, 같은 구조가 다른 조건에서 다른 값을 갖게 만드는 작업이라는 점이다.

자주 무너지는 조합

실무에서 자주 망가지는 패턴은 대체로 비슷하다. 미리 알아두면 시간을 많이 아낄 수 있다.

• 그룹으로 시작하고 프레임으로 바꾸지 않는다. 보기엔 같아도 반응 규칙을 담지 못한다.

• 모든 요소를 Fixed로 잠가 둔다. 그러면 화면이 바뀔 때 늘어날 것도 줄어들 것도 없다.

• 부모는 Hug인데 자식은 Fill로 두고, 왜 부모가 더 이상 Hug가 아니냐고 놀란다. 자식이 남는 공간을 채우기 시작하면 부모는 그 축에서 고정처럼 동작할 수 있다.¹

• 텍스트 상자를 수동 너비로 고정한 채 긴 문장을 넣는다. 그러면 자동 레이아웃이 아니라 텍스트가 문제를 만든다.¹

• 숫자를 직접 입력한다. 한두 번은 빠르지만, 결국 spacing 12와 14와 16이 뒤엉킨다.

이 문제들의 공통점은 하나다. 규칙보다 결과를 먼저 만졌다는 것이다. 반응형 파일은 결과를 그리는 파일이 아니라 규칙을 설계하는 파일이다.

AI와 코드까지 흔들리지 않으려면

이 장의 핵심은 단순히 화면이 예쁘게 줄어들고 늘어나는 법이 아니다. 2026년의 피그마 파일은 사람만 보는 문서가 아니다. AI도 읽고, Dev Mode도 해석하고, 나중에는 코드와 더 직접적으로 연결된다. 최근 Figma의 AI 보조 코드 표현과 핸드오프 흐름은 레이어의 전체 구조와 변수 연결을 더 잘 반영하는 방향으로 발전하고 있다.⁴

여기서 프레임, 자동 레이아웃, 변수의 역할이 다시 또렷해진다. 프레임은 계층을 보여 준다. 자동 레이아웃은 이 계층이 어떻게 배치되는지 알려 준다. 변수는 값의 의미를 알려 준다. 즉, 이 셋은 보기 좋은 화면을 위한 장치이면서 동시에 해석 가능한 파일을 만드는 문법이다.

손으로 맞춘 파일은 겉보기엔 그럴듯해도 설명이 없다. 반면 잘 짜인 파일은 자기소개를 한다. 이건 카드이고, 이 안은 가로 흐름이고, 이 간격은 임의의 13이 아니라 spacing/md이고, 이 색은 파란색이 아니라 primary다. 사람도 이해하기 쉽고, AI도 덜 헷갈리고, 코드로 옮길 때도 덜 무너진다.

결국 반응형의 3대 기둥은 따로 서 있지 않다. 프레임으로 경계를 세우고, 자동 레이아웃으로 관계를 정하고, 변수로 의미를 부여할 때 비로소 하나의 시스템이 된다. 이 관점이 잡히면 다음부터는 화면을 그린다기보다, 화면이 스스로 버티는 방식을 설계하게 된다.

참고

¹Auto Layout 가이드 – Figma Learn - 도움말 센터

²Guide to variables in Figma

³Create a responsive component that automatically adapts to each breakpoint

⁴Figma AI in 2026: Everything it can do — and what it still can't