디자인을 하다 보면 정해진 답이 없어서 결정하기 어려운 순간들을 자주 마주하곤 합니다.
“이건 고정값으로 하는 게 좋을까?”
“콘텐츠에 따라 유동적으로 만드는 게 좋을까?”
간단한 결정 사항처럼 보이지만, 막상 작업하다 보면 하나를 선택하기가 쉽지 않습니다.
사이즈를 고정하면 전체적으로 깔끔하고 일관성 있어 보이지만 어떤 콘텐츠가 들어오느냐에 따라 답답하거나 여백이 많을 수 있고, 반대로 유동적으로 만들면 다양한 상황에 대응할 수 있지만 화면마다 형태가 달라져 일관성이 떨어질 수도 있습니다.
이런 고민은 사이즈에만 해당되는 이야기는 아닙니다. 디자인 시스템의 규칙을 어디까지 지켜야 하는지, 정보를 얼마나 보여줘야 하는지, 모달로 해결할지 페이지로 분리할지, 아이콘만 사용할지 텍스트를 함께 보여줄지처럼 명확한 정답이 없는 항목들에 대한 고민은 계속해서 이어집니다.
이번 글에서는 디자이너들이 고민해봤을 만한 사항 중, 웹 모달창에 대한 고정값 / 유동값 이야기를 집중적으로 해보려고 합니다.
그리고 각각 어떤 상황에서 어떤 선택이 더 적절할지, 저는 어떤 기준으로 판단하는지 이야기해보겠습니다.
모달의 너비: 고정값 VS 유동값
(1) 모달의 너비를 고정값으로 하는 케이스
디자인 시스템에서 모달을 정의할 때 흔히 S, M, L처럼 몇 가지 Width 값을 정해놓는 경우가 있습니다.
- 예를 들어 간단한 안내나 확인을 위한 모달은 S,
- 일반적인 입력이나 상세 정보를 보여주는 경우는 M,
- 많은 정보를 보여줘야 하는 경우는 L
이처럼 사용 목적에 따라 규격을 나눌 수 있습니다.
이렇게 기준을 정해놓으면 여러 화면에서 동일한 모달을 사용할 수 있고, 개발 측면에서도 컴포넌트를 관리하기 편해집니다. 디자이너 입장에서도 매번 모달의 크기를 새롭게 고민하지 않아도 된다는 장점이 있습니다.
(2) 모달의 너비를 고정값으로 하기 애매한 케이스
실제 업무 화면을 디자인하다 보면 조금 다른 상황을 만나게 됩니다. 어떤 화면에서는 데이터 컬럼이 몇 개밖에 없지만, 어떤 화면에서는 수십 개의 항목이나 긴 텍스트가 들어갈 수도 있습니다.
특히 운영자나 관리자 화면에서는 사용자가 입력하거나 확인해야 하는 데이터의 양이 일정하지 않은 경우가 많습니다.
이런 상황에서 모든 모달을 S / M / L로만 정의하게 되면 문제가 생길 수 있습니다.
콘텐츠가 많은 화면을 억지로 L 사이즈에 넣다 보면 정보가 지나치게 압축될 수 있고, 테이블과 같은 데이터가 들어가는 경우에는 컬럼을 충분히 보여주지 못해 가로 스크롤이 발생할 수도 있습니다. 반대로 콘텐츠가 애매하게 뜨면 불필요한 여백이 생길 수 있습니다. 규격은 일관성을 만들어주지만, 모든 콘텐츠에 최적화된 공간을 제공해주지는 못합니다.
모달 안에 탭 메뉴가 있는 경우의 높이: 고정값 VS 유동값
이런 고민은 Width뿐만 아니라 Height에서도 비슷하게 발생합니다.
하나의 모달 안에 여러 개의 탭이 있고, 각 탭마다 콘텐츠의 양이 다른 화면을 만들어야 하는 상황이 있었습니다.
A 탭에는 많은 콘텐츠가 있고,
B 탭에는 조금 적은 콘텐츠가 있고,
C 탭에는 몇 가지 항목만 있다고 한다면,
모달의 높이를 어떻게 가져가는 것이 좋을까요?
(1) 모달의 높이를 고정값으로 하는 케이스
콘텐츠가 가장 많은 탭에 맞춰 모달 높이를 고정할 수도 있습니다. 이렇게 하면 탭을 전환하더라도 모달의 크기가 변하지 않아 안정적인 느낌을 줄 수 있습니다.
특히 사용자가 탭을 빠르게 이동하면서 각 내용을 비교해야 하는 경우에는 모달의 크기와 위치가 계속 변하지 않는 것이 도움이 될 수 있습니다.
하지만 콘텐츠가 적은 탭에서는 사용하지 않는 공간이 많이 생깁니다.
(2) 모달의 높이를 유동적으로 조절하는 케이스
반대로 각 탭의 콘텐츠 양에 맞춰 모달의 높이를 유동적으로 변경할 수도 있습니다.
이 경우 콘텐츠가 적은 탭에서는 불필요한 여백을 줄일 수 있고, 필요한 공간만 사용할 수 있다는 장점이 있습니다.
하지만 탭을 전환할 때마다 모달의 높이가 달라지게 됩니다. 특히 탭마다 콘텐츠의 양 차이가 큰 경우에는 모달이 갑자기 커지거나 작아지면서 사용자가 화면의 변화를 크게 느낄 수도 있습니다.
결국 여기에서도 같은 딜레마가 발생합니다. 고정하면 안정적이지만 공간이 부족하거나 애매할 수 있고, 유동적으로 가져가면 공간은 효율적이지만 화면의 변화가 커질 수 있습니다. 
그렇다면 고정과 유동 중 무엇이 더 좋은가?
이런 사례들을 정리하다 보면 결국 하나의 결론을 내리기가 어렵습니다. 고정된 값이 항상 좋은 것도 아니고, 유동적인 값이 항상 좋은 것도 아닙니다.
그래서 이 경우에도 단순히 “탭이니까 고정”이라고 결정하기보다는 탭의 성격과 사용자의 행동을 함께 보는 것이 필요하다고 생각합니다.
예를 들어 탭마다 비슷한 정보를 제공하고 사용자가 탭을 이동하며 내용을 비교하는 구조라면 고정된 높이가 더 자연스러울 수 있습니다.
반대로 각 탭의 콘텐츠가 서로 독립적이고, 콘텐츠 양의 차이가 큰 경우라면 유동적인 높이가 더 적절할 수 있습니다.
제가 이런 상황에서 가장 먼저 확인하는 것은 크게 세 가지입니다.
(1) 콘텐츠의 양과 변화 폭
먼저 실제 서비스에서 들어올 콘텐츠의 양을 확인합니다. 콘텐츠의 양이 대부분 일정하다면 굳이 유동적으로 만들 필요가 없을 수 있습니다.
반대로 데이터의 양이 화면마다 크게 달라진다면 하나의 고정값만으로 모든 상황에 대응하기 어려울 수 있습니다.
특히 업무 시스템에서는 디자인 단계에서 보았던 샘플 데이터와 실제 운영 데이터의 차이가 큰 경우가 있기 때문에, 가능한 데이터의 범위를 미리 확인하는 것이 중요하다고 생각합니다.
(2) 사용자의 행동
다음으로는 사용자가 해당 UI를 어떻게 사용하는지를 봅니다.
단순히 정보를 확인하고 닫는 모달인지, 여러 탭을 이동하면서 내용을 비교하는 모달인지, 많은 데이터를 직접 입력하거나 수정하는 모달인지에 따라 판단이 달라질 수 있습니다.
예를 들어 탭을 빠르게 이동하면서 비교하는 화면이라면 모달 크기가 계속 변하는 것보다 일정하게 유지되는 것이 더 편할 수 있습니다.
반대로 각각의 탭에서 독립적인 작업을 수행하는 구조라면 콘텐츠에 맞춰 크기가 달라지는 것이 크게 문제가 되지 않을 수도 있습니다.
(3) 콘텐츠가 정말 모달에 들어가야 하는지
마지막으로 가장 중요하게 보는 부분입니다.
콘텐츠가 많다는 이유로 무조건 모달을 크게 만드는 것이 정답은 아닙니다. 모달이 지나치게 커지고 내부 스크롤이 길어지기 시작한다면, 애초에 이 콘텐츠를 모달 안에서 처리하는 것이 적절한지 다시 생각해볼 필요가 있습니다.
Carbon Design System에서도 모달의 최대 높이를 제한하고, 콘텐츠가 많아 스크롤이 지나치게 발생한다면 더 큰 모달을 사용하거나, Large 모달로도 충분하지 않다면 전체 페이지로 이동하는 것을 고려하도록 안내하고 있습니다.
Material Design 역시 Dialog의 크기에 최소·최대 범위를 두고, 화면 크기에 따라 크기를 조정하도록 안내하고 있습니다. 큰 화면에서는 최대 Width를 두고 콘텐츠에 따라 높이를 조절하는 방식도 사용합니다.
결국 “유동적으로 만드는 것 자체가 목적이 되어서는 안 되고, 콘텐츠와 사용 목적에 맞는 범위 안에서 유연하게 대응하는 것이 중요하다”고 생각합니다.
그래서 제가 생각하는 기준
위와 같은 상황들을 정리하면 저는 다음과 같은 기준으로 판단할 것 같습니다.
반복적으로 사용되는 일반적인 모달
→ S / M / L과 같은 고정 규격
콘텐츠 양이 일정하지 않은 업무 데이터
→ 일정한 범위 안에서 유동적인 Width 고려
탭 간 콘텐츠 양 차이가 적고 비교가 중요한 경우
→ 고정 Height
탭 간 콘텐츠 양 차이가 크고 각각 독립적인 콘텐츠인 경우
→ 유동 Height
데이터 테이블처럼 가로 정보가 많은 경우
→ 더 큰 모달 또는 별도의 창 전환 레이아웃 고려
모달이 지나치게 커지거나 내부 스크롤이 길어지는 경우
→ 모달이 아닌 페이지로 분리하는 것을 고려
여기서 중요한 것은 “고정과 유동을 서로 반대되는 개념으로 볼 필요는 없다는 것”입니다.
실제로 디자인 시스템에서도 S / M / L이라는 규격을 정의하면서 화면 크기에 따라 실제 Width를 responsive하게 변경하거나, 콘텐츠 양에 따라 다음 단계의 사이즈를 선택하는 방식이 사용되고 있습니다.
따라서 “고정값으로 할 것인가, 유동값으로 할 것인가”를 결정하기보다, “어떤 범위까지는 시스템으로 통제하고, 어떤 범위부터는 콘텐츠에 맡길 것인가?”를 결정하는 것이 더 중요하다고 생각합니다.
추가로 IBM의 Carbon Design System에서는 XS, S, M, L과 같이 모달의 크기를 몇 가지 단계로 정의하고 있습니다. 대신 절대적인 픽셀값으로 fixed 처리하지 않고, 뷰포트에 따른 비율 및 그리드 칼럼 기준으로 유동적으로 설계하고 있습니다.
즉, 사이즈는 규칙으로 정의하되 실제 크기는 어느 정도 유동적으로 대응하는 방식입니다. 저는 이 부분이 디자인 시스템에서 말하는 ‘고정’의 의미를 생각해보게 하는 부분이라고 생각합니다.
고정한다는 것이 반드시 ‘480px’, ‘640px’처럼 하나의 숫자를 모든 상황에 적용한다는 의미는 아닐 수 있기 때문입니다.
결국 UI 디자인은 선택의 문제
이번 모달의 Width와 Height를 고민하면서 다시 한 번 느낀 것은 UI 디자인에는 생각보다 명확한 정답이 많지 않다는 것입니다.
고정하면 일관성을 얻을 수 있지만 유연성을 잃을 수 있고, 유동적으로 만들면 다양한 상황에 대응할 수 있지만 일관성이 떨어질 수 있습니다. 결국 어느 한쪽이 항상 더 좋은 선택이라고 말하기는 어렵습니다.
그래서 디자인을 할 때는
“실제 콘텐츠는 어떻게 들어오는가?”
“사용자는 이 화면에서 어떤 행동을 하는가?”
“UI가 해결하려는 문제는 무엇인가?”
“이 선택으로 인해 사용자가 감수해야 하는 불편은 무엇인가?”
를 먼저 생각해보려고 합니다.
그리고 그 기준에 따라 고정할 것과 유동적으로 가져갈 것을 나누는 것이 더 좋은 방법이라고 생각합니다.
단순히 모달의 Width와 Height를 결정하는 문제로 보이지만, 결국 그 안에는 콘텐츠의 특성, 사용자의 행동, 데이터의 양, 그리고 디자인 시스템의 일관성까지 여러 가지 요소가 함께 연결되어 있었습니다.
앞으로도 이런 선택의 순간들을 계속 마주하게 될 것이고 그때마다 정해진 규칙을 그대로 적용하기보다 왜 이 규칙이 필요한지 다시 한 번 생각하고 현재 상황에 맞는 선택을 하고자 노력할 것입니다.
RIMS