UI 브리핑 : 7화 - 반응형웹의 그리드 시스템
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
자, 오늘은 기존에 이어서 비율과 그리드, 최소단위에 대한 이야기를 이어서 해보겠습니다. 어제 이야기드렸던 내용이 4:3 비율과 16:9 비율. 그리고 해상도별로 설계하는 방식이 달라진다는점. 그리고 4:3 /16:9 모두를 지원하기 위해 중심정렬 / 혹은 좌측정렬을 하는 방식으로 - 4:3 비율에 더 우선적으로 디자인한다는걸 이야기드렸습니다.
이번엔 개별 디자인들의 모바일 / PC 그리드에대한 부분을 좀 파보겠습니다
https://brunch.co.kr/@clay1987/135
기존에 제가 작성한 윈도우관련 그리드 최소단위에대한 분석글이 있습니다. 보시면아시겠지만. 모든 웹브라우저는 PC OS의 기본 비례에서 영향을받고. 다시 디자인 자체도 그리드 시스템이라는. - 가상의격자무늬안에서. 동일한 단위를 얼마나 깔끔하게 사용했느냐에따라서 - 디자인의 완성도가 달라지곤합니다.
https://brunch.co.kr/@clay1987/136
그렇다고하면. 사실 이런 - 그리드를 통해서. 잘 만들어진 시안들을 분석하고. 그곳에서 쓰였던 비례나. 배치 등을 참고하면 -좋은 디자인을 만들수있겠죠. 다만 이런경우는 아주 단적으로. 한 화면만을 보는것이기때문에. 모바일 / 타블렛 / PC에 이르는 모든 반응형 레이아웃을 어떻게 지정해야하는지는 상황마다 다릅니다. 그리고 '변형'해서 다른 UI 패턴을 만들때는 어떻게해야하는지에 대한 해답을 내어주질 못합니다.
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
그래서 필요한게 반응형 그리드.라는것인데요. 간단히말해서. 모바일에서는 몇개의 큰 틀로 전체 레이아웃을 나눌것인지. PC는 몇개의 틀로 나눌것인지.
이런 '큰 박스들'로 화면을 나누고, 정리하고. 다시 - PC에서의 레이아웃과. 모바일에서의 레이아웃을 변형 적용할수있게 설계하는과정입니다.
쉽게. 네이버 모바일 도메인을 통해서 보시게되면. 전체 화면을 총 3단계로 나누어두었음을 알 수 있습니다. 좌우 여백이 좁아졌을때는. 동일한 요소들을 좌측 하단으로 내리고. 넓어질때에는 우측 상단으로 올리는 형식이죠. 물론 개중에는 '압축'되거나 - 아예 표기되지않는 규격들이 있을수도있습니다.
보시면 아시겠지만. 이 화면은 위 스크린샷의내용을. UI 모듈별로 - 총 세가지를 비교한것입니다. 1단 / 2단 / 3단 레이아웃을 사용했을떄. 우리의 일반적인 상식으로는 그냥 좌측 하단에서 - 우측 상단으로 올려주면되는거 아닌가. 라고 생각하기 쉽습니다. 실제로 확인을 해보면 '전혀 그렇지않다'는것을 알 수있습니다.
모듈별로 배치되는 레이아웃은 온전히 디자이너나 기획자의 의도대로 재배치될수있고. 기계적이지않습니다.
그리고 재미있는 부분이. 2단에서 3단으로 넘어갈때. 아주 작은 영역이지만. 거의 간격차이가 나지않는 상태가 존재합니다. 이렇게 별차이가없다면. 3단을 넘어서 4단,5단을 가도 크게 문제가없지않나. 라고생각하실수있는데요
사실상 최대 3단을 이용한 이유도. 사실 어제 이야기드린 4:3 / 16:9 화면과 연관이있습니다. 모바일 페이지역시도 다양한 비례를 갖고있지만. 기기중에서는 타블렛의경우 4:3 비율을 채택하고있는 경우가 여전히 많습니다. 물론 모바일은 가로 / 세로모드 사용이 가능한 경우가있어서 좀더 복잡해지긴하지만. 기본적으로 모바일 페이지 역시도 4:3 비율을 최소단위로 보고있고. 또한 단락이 3개를 넘어설경우. 인식이 어려운 문제가 생기기에 - 4개까지의 단락은 사용하지않는게 일반적입니다.
가상으로 4개 단락을 사용할경우를 만들어보았는데요. 사실 2개만 되어도 인식이 어려워지는 경우가 많습니다. 게다가 3줄만해도 - 단락 크기가 같지않은 세로 레이아웃이 여러개인건 - 인식에 크게 문제를 가져온다는걸 알 수 있습니다.
물론 언제나 2줄.3줄만이 옳은건 아닙니다. 예로 핀터레스트.혹은 구글 이미지검색같은경우는. 이야기가다른것이. 텍스트가 거의 표기되지않고. 여러 이미지들중에 원하는걸 찾는 형식이 되니. 개별 이미지를 더 많이 보여주게되죠. 이런 단순 갤러리형태의 UI는 반응형 표기도 쉽습니다. 그냥 이미지 가로 갯수를 조절해주면 되니까요. 다만 우리가 실제로 만들게되는 UI들은 대부분이 텍스트가 들어가고. 내용이 각각 다른 형태일 경우가 대부분입니다.
해당 페이지는 부트스트랩 기반의 어드민페이지. 테마의 반응형 레이아웃들입니다.
https://colorlib.com//polygon/adminty/default/index.html
자세히보시면 가장 좁았을 때와. 2단으로 변형되었을 때. 그리고 메뉴탭이 등장하는 순간과. 다시 - 기존 레이아웃이 4단짜리 레이아웃으로 변형되는 순간을 확인하실수있습니다.
이걸 다시 가상의 단락을 표현해보면. 메뉴가 등장하는 순간부터는. 그저 가상의 블럭이 계속 하나씩 추가되는 형태가 될 뿐입니다. 그리고 단락이 다섯칸이 되는 순간 - 4:3 해상도에 맞는 최적 비율이 됩니다. 이후에는 늘려봐도 16:9해상도로 - 좌우 비율이 늘어날뿐임을 알 수 있습니다.
또한 메뉴바가 사라지는 지점에서부터는. 기존의 단락크기와는 다르게. 미묘하게 블럭 좌우 너비가 다른걸 알수있는데요. 실제로 반응형 웹 해상도를 나누는 방식은 min. max 개념이라고해서. 최소 000 픽셀 ~~ 최대 0000 픽셀 사이의 내용을 - 이 해상도 레이아웃으로 보여줘라. 라는 식의 명령을 내리게됩니다. 그리고 그런 최소 / 최대 범위개념은 - 각각의 테마나 그리드시스템에 따라서 조금씩 달라집니다.
이런 이유에서 완벽하게 이러한 크기로 맞춰야한다. 는 개념은 없지만 모든 테마 / 프레임워크 / 반응형을 지원하는 디자인들의 공통점은 존재합니다. 일단. 4:3 비율에 맞춰서 컨텐츠를 만들어야한다는것이 우선이구요. 이후 크기가 늘어나는 것은 16:9 해상도에 맞게. 재배치를 하거나. 기존의 컨텐츠 스케일을 좌우로 늘려서 맞추는 등. 추가로 16:9에 딱 맞춘 디자인을 할것인가. 아니면 4:3 비율의 내용을 늘려 보여줄것인가.는 기획자 / 프로젝트에 따라서 조금 달라지긴 하겠네요
https://medium.com/gridbox/bootstrap-4-vs-foundation-6-grid-system-5874e0e87a95
부트스트랩의경우 자체적인 그리드에 대한 방식을 갖고있고. 다른 곳에서는 이 방식과 조금 다르거나. 변형이 되어있을 가능성이 높습니다. 스스로 프로젝트에 쓰게될 UI 프레임워크의 스타일 / 그리드를 확인해놓는게 중요한것도 이런 이유에서구요
그리드 최소단위를 구하는 제 분석법도. 결국 가장 작은 단위를 정해놓고. 해당 단위에맞게 - 간격을 떼거나. 해당 크기만큼 UI 컴포넌트의 크기를 늘리고, 줄이는 방식에 가깝습니다. 다만 그건 다시 - 큰 단위에서. 기본 프레임워크나. 해당 OS. 디자인 시스템의 그리드 와 연관이됩니다.
더 큰 단위의 내용이 - 자체 그리드 시스템.인것이고 그보다 더 작은 단위이자, 미세한 조정이 가능하게만드는게 - 그리드 최소단위라고 생각하시면 될 것 같습니다.
이걸 좀더 쉽게 이야기드리면. 위의시안은 구글의 마테리얼 디자인- 그리드에 대한 이야기인데요.
기본적으로 구글의 단락을 나누는 방식은 위의 기준으로 볼떄 총 8개의 세로줄이 나오게됩니다 (좌우 여백 제외) 다만 세로나 가로나. 하늘색의 최소단위만큼. 간격을 떼게되고. 가로줄에서도 동일한 색상인. 하늘색 영역에 맞춰 간격을 떼게됩니다.
이 하늘색 칸의 세로, 가로 크기가 바로 그리드 최소단위라고 보고. 분석을 진행한다는 의미입니다.
구글의 마테리얼 레이아웃을 설명하기 위해 쓰인 영상자료
그리고 해당 단위는 크게 변하지않고. 모바일. 타블렛. PC해상도 모두에 적용될 수 있는 방식이죠. 단락 자체의 크기는 크게 변화하는데 반해, 간격의 차이는 그렇게 크지 않습니다. 변화한다해도 아주 미세하게 변화할뿐이죠.
이것도 파고들어보면 수학적 수식이 있긴 합니다마는. 그걸 계산해서 하기엔 너무 복잡하니. 동일 컨테이너를 반복해서 추가하는 형태로 - 해상도에 맞게 레이아웃을 만들게된다.정도로 생각을 하시면 될것 같습니다.
오늘 이야기를 좀 정리해보자면. 결국 모든 웹디자인 / 반응형 웹은 모듈형태의. 아주 작은 단위로 - 구성된 UI 컴포넌트나. 단락들을 어떻게 재배치하는가에 달려있고. 모바일과 PC웹 모두를 동시에 대응하기 위해. 부트스트랩같은 주요 프레임워크들이 - 어떤 그리드 시스템을 사용하는지.
4:3 / 16:9 해상도와. 모바일 / PC 해상도를 동시에 지원하기위해. 어떤 지점들이 중요해지는지. 그리고 실제 서비스를 제공하는 네이버같은 곳에서. 어떤식으로 반응형웹을 지원하는지를 확인해봤습니다
사실 이정도 내용만 하더라도. 결코 쉬운 부분이 아니기때문에. 이해가 어려우실수있습니다. 다만 이 부분은 추후에도 다시 풀어서 설명 / 다른 사례를 통해서 다시 이야기를 드릴 부분이므로. 너무 걱정하지마시고. 일단 '저렇게 분석하는 방법도 있구나. 저런식으로 바라보면, 새로운게 있구나'정도를 기억해두시면 될것같습니다.
그리드는. 우리가 일반적으로 바라보는 '눈'과는 많이 다른 방식입니다. 그렇기에계속해서 그려보고, 들여다보고, 분석해보지않으면 - 익숙해지질 않습니다. 그리드를 통해서 실제 컨텐츠들이 해당 블럭 내에 어떻게 들어가는지. 간격은 어떻게 떼어져있는지. 등은 실제 시안을 만들어볼때 사용하거나. 혹은 기존의 시안을 분석해보는 방식으로 - 익숙해지는것이 중요합니다.
오늘은 큰 단위에서 그리드시스템을 통해 웹 / 반응형 웹을 들여다보았으니. 다음시간에는 반응형웹을 위한 메뉴구조와. 메가메뉴. 그리고 반응형 웹을 위한 반응형 데이터테이블 설계에 대한 이야기를 해보겠습니다.
오늘 내용을 요약하면 다음과 같습니다
1. 반응형 웹은 - 여러 해상도에 맞춰 UI 컴포넌트를 재배치하기위해. 개별 컴포넌트를 블럭식으로 만들어두었다.
2. UI 세부 컴포넌트들을 쪼개어 블럭형식으로 나누고. 그걸 어떻게 배치하는가는 기획자 / 프로젝트에따라 방식이 달라진다.
3. 반응형웹은 개별 해상도 위치를 A to B 형식으로. 영역을 지정해 해상도에 따른 레이아웃을 적용하는 방식이다. 그렇기에 중간위치에서 -애매하게 보여질 수 밖에 없는 해상도들이 존재한다.
4. UI 컴포넌트가 복잡하게 만들어진 경우. 좌우 단락 크기는 크게 2~3개 정도가 한계이며 (예 : 네이버 모바일) 개별 컴포넌트의 복잡도가 낮아지는 경우 ( 예 : 갤러리) 숫자가 늘어나더라도 무방하다.
5. UI 프레임워크마다 사용하는 그리드시스템과 단위는 서로 다르다. 그렇기에 여러 프레임워크들을 서로 비교해보아야한다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
