반응형 웹 제대로 알고 디자인하기 2
구간 안에서 변화하는 수많은 규칙들
반응형 웹 디자인에 대하여 두 번째 글입니다. 이전 글에서 제가 반응형 웹은 아래 두 가지를 짚고 넘어가야 한다고 하였습니다.
웹은 구간 별로 나눠진다는 것을 이해한다.
각 구간 안에 규칙이 정해진다는 것을 이해한다.
저번 글에서 첫 번째 항목에 대해 이야기했고, 오늘은 두 번째 항목인 ‘각 구간 안에 규칙이 정해지는 것을 이해한다’에 대해 자세한 이야기를 해보려 해요. 먼저 레이아웃 변화 규칙부터 알아보도록 하죠!
레이아웃 변화 규칙
화면 안에서 변화하는 레이아웃의 규칙은 크게 네 가지로 구분 지을 수 있어요.
Fixed
Fluid(Flexible)
Adaptive
Responsive
Fixed
화면에 따라 너비가 변화하지 않고, 너비가 고정되는 속성입니다. Desktop&Mobile Web으로 나뉜 페이지 거나 테이블이 포함된 어드민 페이지에서는 화면을 Fixed Layout으로 만들곤 합니다.
화면 전체가 Fixed 인 예시는 네이버 PC버전이 될 수 있겠네요.
Fixed라는 속성이 꼭 화면 전체가 고정된다는 말은 아닙니다. Fixed라는 것은 단지 특정 픽셀로 너비를 고정시키는 ‘속성’ 일뿐입니다. 다시 말해, 화면 전체가 Fixed일 수도 있을 뿐만 아니라, 로고나 이미지, 버튼 등 모든 UI 요소마다 특정 구간에서 Fixed 될 수 있다는 것을 기억해 주시면 좋겠습니다.
Fluid (Flexible)
‘Fluid 하다’는 건 요소들이 화면 크기에 맞게 유연하게 조정되는 것을 의미합니다. 우리가 브라우저 너비를 조정함에 따라 텍스트 너비가 조정되는 것을 상상하시면 이해가 빠르실 것 같아요.
영상을 보시다시피 화면이 Fluid하기만 하다면, 컬럼이 유지되는 채로 텍스트 너비가 줄어들게 되므로, 가독성에 취약해지는 부분이 있습니다.
Fluid 속성은 고정된 픽셀로 입력해 둔 값이 아닌, %(퍼센티지)와 같은 상대적인 단위입니다. Fluid 속성이 적용되는 요소는 아래와 같이 다양합니다.
섹션을 감싸는 큰 컨테이너
카드, 리스트, 버튼 등
이미지
텍스트
이미지가 Fluid하게 변화하는 것을 보여주는 예시로 원티드를 가져와봤습니다. 화면 크기가 넓어짐에 따라 컬럼의 ‘너비’가 늘어나고 있는 것에 집중해서 봐주세요 ㅎㅎ. (컬럼 개수가 바뀌는 것은 Fluid 하다는 것과는 직접적인 관계가 없으므로 넘어갈게요. 컬럼 개수가 바뀌는 테크닉에 대해서도 할 말이 많지만 이건 나중에..)
Adaptive
바로 이전 글에서 구간마다 레이아웃이 바뀔 수 있다는 것을 다루었죠? 이전 글을 참고하여 Breakpoint를 이해하셨다면 웹은 다양한 화면 너비에서 존재할 수 있고, 레이아웃을 구분 짓는 종단점(Breakpoint)이 필요하다는 것을 이해하셨을 거예요. 결국 ‘화면 A는 Aa, Ab, Ac와 같이 여러 레이아웃 버전이 존재할 수 있다’는 것을요.
화면이 Adaptive하기만 하다면 특정 너비의 스냅샷만 괜찮게 보일 뿐, '구간'을 커버하지는 못하겠죠?
font-size 변화는 Adaptive함을 보여주는 좋은 예시입니다. 예시 이미지를 보며 규칙을 확인해 봐요.
Responsive
위에서 말한 Fixed, Fluid, Adaptive 함을 모두 섞으면 그게 Responsive Web인 거예요.
Responsive Layout은 모든 구간에서 Fluid 할 수도 있고요, 특정 구간에서는 Fixed될 수도 있어요. 어떤 이미지가 화면 안에 있다고 가정하고 a, b, c 세 구간에 대해 이미지 너비 규칙을 예로 들어 볼게요. 정말 규칙이 자유로워질 수 있다는 것을 말씀드리기 위해 적는 예시입니다.
All Fluid : a (부모 컨테이너의 100%) / b (부모 컨테이너의 50%) / c (33%)
All Fixed : a (200px) / b (150px) / c (100px)
Hybrid : a (부모 컨테이너의 100%) / b (부모 컨테이너의 50%) / c (200px)
만약 ‘모든 화면 사이즈에서 우리 유저가 접근할 수 있다’고 가정하고 작은 화면 너비부터 정말 큰 너비까지 머릿속에 쫙 깔아 두고 디자인한다면 머리가 복잡해질 수도 있어요.
모든 화면 대응을 위해 머리가 복잡해지기 이전에 우리 유저는 누구이고, 주로 어느 화면 사이즈에서 접근하는지 이해하는 게 우선입니다. 다만, 소수의 유저만이 보는 화면일지라도 특정너비(예를 들어 1366)를 말했을 때, 프로덕트 디자이너라면 당신이 디자인한 화면을 상상할 수는 있어야 돼요.
반응형 웹 디자인을 위해 더 이해하면 좋은 것들
위에 네 가지 타입을 이해했다고 해서, 끝은 아니에요. 반응형 웹디자인을 위한 조미료가 더 있거든요. 같이 보시죠.
max or min width/height
Fluid한 요소에 대해서는 필요에 따라 늘어나거나 줄어드는 마지노선을 지정할 수 있어요. min or max값이 정해지면 구간 내에서 Fluid하다가 더 이상 조정되지 않아요. 예를 들어볼게요.
예시
칩 : min-width를 56px로 지정하면 한 음절만 적어도 너비가 56px임.
이미지 : max-width를 400px로 지정하면 이미지가 늘어나다가 400px이상은 늘어나지 않음.
다이얼로그 : max-height를 80vh로 지정하면 화면 높이의 80% 이상 높이가 커지지 않고 스크롤 발생.
min, max 값에 대한 이해를 하셨다면 구간 별 규칙과 합쳐져서 아래처럼 더 복잡한 규칙을 만들어낼 수도 있습니다.
A구간 : 보이지 않음 / B구간 : 너비는 부모의 50% (max-width: 500px) / C구간 : 너비 800px 고정
이미지 리사이징 규칙
반응형 웹 디자인을 할 때, 이미지 사이즈 변화도 중요한 부분 중 하나예요. 딱 세 가지만 기억하세요. 너비만 늘어나거나, 비율이 고정된 채로 커지거나, 아니면 고정이거나. 쉽죠?
너비만 늘어나요
이미지를 부모 요소의 가로 너비에 맞추는 방식입니다. 보통 이미지의 원래 비율을 유지하면서 꽉 채워요. 그에 따라 이미지 위아래 혹은 좌우가 잘려 보일 수 있어요. 코드펜 예시를 통해 브라우저 너비를 직접 조정해 보세요. 너비만 늘어나는 경우는 보통 페이지 최상단 배너 등에 활용하면 좋아요. 예시는 토스 합류여정 페이지가 있겠네요.
비율이 고정된 채로 커져요
이미지가 이미지 비율을 유지한 채로 커지거나 줄어들어요. 보통 그리드 형태로 썸네일과 함께 목록들을 보여줄 때가 예시가 될 수 있겠네요. 코드펜 예시를 통해 확인해 보세요. 위에서 언급된 원티드의 예시도 함께 봐주시면 좋을 것 같아요.
어느 구간이든 고정이에요
특정 값으로 너비와 높이를 고정시키는 것입니다. 예시는 찾지 않겠습니다. 코드펜 예시로만 조정해 보세요. ㅎㅎ
기억해!
이 글을 통해 특정 화면의 여러 레이아웃 버전(Aa, Ab, Ac)이 존재할 수 있으며, 각 요소별로 Fluid, Fixed 함을 자유롭게 적용시킬 수 있다는 것을 꼭 기억해 주셨으면 좋겠어요. 덤으로 min/max에 대한 개념과 이미지 리사이징의 원리도 함께 이해하고 넘어가시면 앞으로 웹이든 앱이든 디자인하는데 큰 도움이 되시리라 확신합니다.
참고자료
Space, grids, and layouts, DesignSystems.com
[https://www.designsystems.com/space-grids-and-layouts/]
What is the difference between fixed, fluid, adaptive and responsive layouts and why should I care?, Product Alpaca
