반응형 디자인의 시작: UI 배치와 사이즈 개념 이해하기
애플리케이션 화면을 만들다 보면 처음엔 깔끔하게 정렬된 것처럼 보이지만, 화면 크기를 바꾸는 순간 요소가 어색해지거나 예상과 다르게 움직이는 경우가 생깁니다. 이런 상황은 누구나 한 번쯤 겪기 마련인데요. 대부분은 배치와 반응형 사이즈 개념을 제대로 이해하면 자연스럽게 해결할 수 있습니다. 이번 글에서는 플렉스튜디오 이은지 디자이너가 반응형 UI의 기본이 되는 배치 구조와 사이즈 개념을 차근차근 소개해 드릴게요.
배치란 무엇인가요?
배치 기능은 쉽게 말해 자동으로 정리해 주는 책꽂이 같은 기능이에요. 책을 책꽂이에 꽂아 두면 따로 손대지 않아도 간격과 순서가 자연스럽게 맞춰지는데요. 배치를 적용하면 디자인 요소들도 자동으로 정돈됩니다. 반대로 배치 없이 작업하면 위치와 간격을 하나하나 직접 조정해야 하는 번거로움이 있습니다.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C3.jpeg?width=720&height=405&name=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C3.jpeg)
배치 기능이 중요한 이유
요즘 UI는 데스크탑, 노트북, 태블릿, 모바일처럼 다양한 화면 크기에서 사용됩니다. 그래서 화면 크기가 바뀌더라도 디자인이 흐트러지지 않으려면 요소들이 상황에 맞게 자연스럽게 줄어들거나 늘어날 수 있어야 해요. 배치 기능은 이런 유연한 대응을 가능하게 해 주는 반응형 디자인의 기본 도구로, 디자인을 시작할 때 가장 먼저 익혀두면 좋은 개념입니다.
배치의 방향과 정렬 정하기
배치는 크게 방향과 정렬을 설정하는 방식으로 구성돼요. 방향은 요소를 가로로 배치할지, 세로로 배치할지를 결정하는 옵션입니다. 가로 방향은 메뉴 버튼이나 아이콘과 텍스트처럼 옆으로 나란히 배치하고 싶을 때 자주 사용됩니다. 세로 방향은 리스트나 카드 형태처럼 위에서 아래로 흐르는 구조에 잘 어울립니다. 정렬은 배치 안에서 요소를 어느 위치에 둘지 정하는 설정으로, 상단·가운데·하단 정렬이나 요소 사이 공간을 자동으로 나눠 주는 Space Between 같은 옵션을 사용할 수 있습니다.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C5.jpeg?width=720&height=405&name=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C5.jpeg)
간격(Gap) 설정으로 더 깔끔한 UI 만들기
배치에서 빠질 수 없는 요소가 바로 간격(Gap) 설정입니다. 간격은 요소와 요소 사이의 여백을 일정하게 유지해 주는 기능으로 반복적인 UI 구조에서 특히 유용합니다. 한 번 간격을 정해 두면 이후에 요소가 늘어나거나 줄어들어도 전체 균형이 자연스럽게 유지되기 때문에 디자인 관리가 훨씬 쉬워집니다.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EA%B0%84%EA%B2%A9%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_v0.1.gif?width=960&height=540&name=%EA%B0%84%EA%B2%A9%20%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0_v0.1.gif)
반응형 사이즈의 기본 : Hug, Fill, Fixed
배치 구조를 이해했다면 이제 사이즈 개념도 함께 알아볼 차례입니다. 플렉스튜디오에서는 Hug, Fill, Fixed의 세 가지 방식으로 요소의 크기를 조절할 수 있어요.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C17.jpeg?width=720&height=405&name=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C17.jpeg)
Hug
내부 콘텐츠 크기에 맞춰 요소가 감싸듯 늘어나는 방식으로 텍스트 길이에 따라 크기가 자연스럽게 바뀝니다. 텍스트가 짧으면 짧게, 길면 길게 요소 크기가 콘텐츠 길이에 맞춰 딱 맞게 ‘껴안듯’ 조절되는 것이 특징이에요. 플렉스튜디오에서는 너비나 높이 수치를 따로 입력하지 않으면 기본적으로 Hug 콘텐츠 속성이 적용됩니다.
Fixed
너비나 높이를 수치로 지정해 크기를 고정하는 방식으로 어떤 화면에서도 동일한 크기를 유지해야 할 때 사용해요. “이만큼만 써” 하고 값을 정해두는 개념이라서 안에 어떤 콘텐츠가 들어 있든 요소 크기는 변하지 않습니다.
Fill
부모 영역의 남은 공간을 채우는 방식으로, 화면 크기에 따라 유연하게 늘어나고 줄어드는 것이 특징입니다. 그룹 너비가 남는 만큼 공간을 꽉 채우며 넓이를 조절하기 때문에 반응형 구성에 자주 쓰여요. 플렉스튜디오에서는 너비를 100%로 설정하면 Fill 콘텐츠 속성이 적용돼요.
예시
바깥에 1000px짜리 큰 프레임이 있고 그 안에 두 개의 그룹이 있다고 가정해 보겠습니다. 첫 번째 그룹은 너비를 100%로 설정해 공간을 채우고 두 번째 그룹은 너비를 300px로 입력해 고정합니다.
이렇게 설정하면 전체 프레임 사이즈가 바뀌더라도 100%인 그룹은 자연스럽게 늘어나거나 줄어들고, 300px인 그룹은 고정된 크기를 그대로 유지하게 됩니다. 이처럼 Hug, Fill, Fixed를 상황에 맞게 조합하면 어떤 화면 크기에서도 디자인이 무너지지 않고 안정감 있게 반응하도록 만들 수 있어요.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EC%82%AC%EC%9D%B4%EC%A6%88%20%EC%A1%B0%EC%A0%95%20%EA%B0%9C%EB%85%90.gif?width=960&height=540&name=%EC%82%AC%EC%9D%B4%EC%A6%88%20%EC%A1%B0%EC%A0%95%20%EA%B0%9C%EB%85%90.gif)
Wrap으로 더 자연스러운 반응형 구성하기
Wrap은 배치된 요소들이 한 줄에 다 들어가지 않을 때 자동으로 다음 줄로 내려가도록 도와주는 기능입니다. 내부 요소의 크기가 어느 정도 정해져 있을 때 특히 효과적으로 동작하며 카드 목록처럼 반복되는 UI 패턴을 구성할 때 자주 활용됩니다. Wrap을 함께 사용하면 화면 크기가 달라져도 콘텐츠가 어색하지 않게 재배치되어, 더 안정적인 반응형 UI를 만들 수 있습니다.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/Wrap%20%EA%B0%9C%EB%85%90%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0.jpg?width=960&height=540&name=Wrap%20%EA%B0%9C%EB%85%90%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0.jpg)
오늘 배운 내용 총정리
다시 정리하자면 배치는 가로·세로 방향을 정하고 그 안에서 정렬(Left, Center, Space Between 등)을 선택해 구성해요. 마지막으로 Gap을 설정해 원하는 만큼 요소 사이 간격을 일정하게 띄울 수 있습니다.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C15.jpeg?width=720&height=405&name=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C15.jpeg)
여기에 Hug, Fill, Fixed, Wrap 같은 사이즈 개념을 함께 활용하면 다양한 화면 환경에서도 안정적인 디자인을 만들 수 있어요. 이론을 한 번 익혀두면 플렉스튜디오에서 실제로 화면을 구성할 때 훨씬 수월하게 작업하실 수 있을 거예요.
%20%EB%B0%B0%EC%B9%98/2-1,2-2/%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C21.jpeg?width=720&height=405&name=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C21.jpeg)
다음 글에서는 이러한 개념을 바탕으로 플렉스튜디오에서 직접 배치 기능을 적용해 보는 실습 내용을 소개해 드릴 예정이에요. 오늘 정리한 내용을 떠올리면서 따라오시면 반응형 레이아웃이 훨씬 자연스럽게 익숙해질 거예요.