디자인 시스템 : 그리드와 레이아웃

반응형 그리드 시스템을 만들 때 고민해야 하는 것들

레이아웃을 잡을 때 많은 생각을 한다. 그중 주니어와 초보자가 가장 많이 고민하는 질문은 이거다.

‘보통의 경우는 어떻게 할까?’ 이는 일반적인 경우를 말한다. 기본적으로 어떻게 하는지를 궁금해하는 것.

일단 보통의 경우라는 기본을 알아야 응용을 할 수 있다. 그래서 레이아웃의 보통의 경우를 알고 그다음 응용의 경우를 알아보자.

목차

1. 그리드 시스템의 네 가지 요소

2. 브레이크 포인트

3. 컨테이너형 vs 풀스크린

그리드 시스템의 네 가지 요소

디자인 시스템을 구성하는 그리드에는 네 가지 기본요소가 있다

1. Screen margine

2. column

3. gutter

4. container

1. Screen margine

화면의 끝단의 간격을 말한다. 해당 마진이 없을 경우 콘텐츠가 간격이 없어 딱 붙어있는 경험을 하게 될 거다. 예를 들어 모바일의 경우 마진을 16px로 두고 있는데 그게 없다고 생각하면 쉬울 거다. 스크린 마진은 desktop의 경우 보통 24px을 mobile의 경우에는 16px을 사용한다.

보통 사용하는 사이즈는 다음과 같다. 

desktop→ 24~36px = 보통 24px을 사용한다.

tablet → 20~36px

mobile → 16~20px = 보통 16px을 사용한다. (material design, HIG)

모바일에서 16~20px이 가장 사용성이 좋았다는 연구 결과가 있어서 그런 거 같다.

출처 - KRDS

2. Columns

레이아웃을 구성하는 가이드라인 역할을 한다. 칼럼은 보통 화면을 가로로 나누는 일련의 균일한 구역으로, 콘텐츠를 정렬하고 배치하는 데 사용된다. 그럼 칼럼은 보통 몇 개를 쓸까?

      desktop → 12~16개 = 보통 12를 쓰는데 이유는 2, 3, 4, 6의 배수이기에 다양한 조합을 만들 수 있기 때문이다. (Material Design, Bootstrap)  

      tablet → 6~12개 = 보통 8을 쓴다. (소형은 8, 대형은 12)  

      mobile → 2~6개  = 보통 4를 쓴다.(Material Design 4~6, HIG 4)  

Responsive Web Design with the 12-Column Grid
이 연구는 여러 실제 웹사이트와 애플리케이션의 디자인 사례를 분석하여 12-column 그리드 시스템이 반응형 웹 디자인에서 어떻게 활용되고 있는지를 설명합니다. 이 시스템을 사용함으로써 개발자와 디자이너가 협력하여 다양한 화면 크기에서 효과적인 레이아웃을 구현할 수 있음을 보여줍니다.  

Optimal Grid Layout for Small Screens
연구 결과에 따르면, 모바일에서 4-column 또는 6-column 그리드를 사용하는 것이 가장 효율적이며, 사용자가 더 쉽게 콘텐츠를 탐색할 수 있음을 보여줍니다.  

12 칼럼은 2,3,4,6와 호환한다.

PC에서 칼럼은 12개가 일반적이다. 첫째로 2, 3, 4, 6의 배수이기에 다양한 대응이 가능하다. 둘째로 반응형에도 유용하다는 연구사례가 있다. 실제로 Material Design Guide과 Bootstrap에서도 12를 권장한다. 하지만 12가 정답은 아니며 16까지도 확장될 수 있다. 콘텐츠가 단순할수록 칼럼은 낮아진다.

3. Gutter

그리드 시스템에서 각 column 사이의 간격을 의미한다. 이 간격은 콘텐츠 사이에 적절한 여백을 제공해 시각적 균형을 유지하고, 사용자가 콘텐츠를 쉽게 구분할 수 있도록 돕습니다. Gutter는 디자인의 전반적인 레이아웃에 중요한 요소이며, 모바일, 태블릿, 데스크톱 등 다양한 화면 크기에서 다른 설정이 사용된다.

desktop →  24px ~ 32px

tablet → 16px ~ 24px

mobile →8px ~ 16px = 보통 16px을 사용한다.(matarial)

4.  Container

컨테이너는 콘텐츠의 폭이다. 

원티드 1100px

네이버 1280px

머테리얼 1280px

일반적으로 1024~1440px를 권장한다.

그럼 내가 만약 PC만 일단 1200px로 12 칼럼으로 만든다면 마진과 거터는 몇으로 만드는 게 좋을까?? 앞서 PC의 마진은 글로벌에서 24를 최소로 사용하고 있었다. 그럼 거터는 몇이 좋을까?

이걸 쉽게 계산해 주는 사이트가 있다.

오픈소스에 뿌려진 원티드는 1100px이었고 마진과 거터는 24가 아닌 20을 사용했다.

그럼 어떻게 될까? 잘 들어맞는다!

 http://gridcalculator.dk/ 해당 웹사이트를 참고하면 된다.

그럼 다음으로.

브레이크 포인트

글로벌 기준 머테리얼 디자인 가이드

머테리얼 디자인 가이드

한국 기준 KRDS

KRDS

공통적으로 모바일은 600px이하이며 태블릿과 데스크톱은 미묘한 차이를 가진다. 모바일과 태블릿의 경계가 600인 이유는 소형 태블릿 사이즈가 7인치인데 그게 600px이기 때문이라 판단한다. PC와 태블릿의 경계는 모호하다. 1200을 나누기도 하며 1024로 나누기도 한다. 선택 기준은 자사 서비스를 기준을 나누거나 그것도 없다면 가장 많이 사용하는 기종을 기준을 나누면 된다. 가장 작은 태블릿인 7인치가 600x1024이니 아무래도 1024에서 1차적으로 끊는 게 좋아 보인다. 기종 별 스크린 사이즈 참고 

총 정리하자면 다음과 같다.

정리한 표

그리드는 이렇게 잡으면 되겠다!
근데.. 풀스크린은 어떻게 만들지?

컨테이너 형 vs 풀스크린 형

나 또한 반응형으로 사이트를 제작하는 데 있어서 고민을 했다. 풀스크린으로 한다면 어떻게 될까? 하지만 생각해 보니 답은 정해져 있었다. 풀스크린을 레이아웃의 목적은 분명하다. 풀스크린은 한 가지 콘텐츠를 몰입감 있게 보여줄 때 사용한다. 그래서 게임, 영화, OTT, 스트리밍 플랫폼 등 모두가 동일한 풀스크린 구조를 가지고 있다. 영화, 게임, 스트리밍, 비디오와 같은 것들은 몰입감을 높이는 콘텐츠이기에 방해가 별로 없어야 한다. 그래서 풀스크린으로 UI를 디자인한다. 마찬가지 피그마, 프레젠테이션, 차트를 보여주는 트레이딩 뷰와 같이 작업이나 분석이나 작업툴 또한 한 화면에서 몰입을 요하기 때문에 풀스크린이 적합하다.

정리하면 다음과 같다.

풀스크린의 장점

단일 콘텐츠에 몰입감을 준다. (유튜브 , OTT 플랫폼, 핀터레스트)

분석이나 작업에 용이하다. (피그마, PPT, 대시보드, 어드민, 분석)

풀스크린의 단점

단점은 사용자가 다양한 페이지나 섹션을 탐색하는 것이 불편할 수 있다.

유튜브에서 검색을 많이 사용하지 필터를 잘 사용하지 않는 것처럼 말이다.   

International Journal of Human-Computer Studies
사용자들이 풀스크린 모드에서 비디오나 게임을 경험할 때, 몰입도가 높아지고 집중력이 향상된다는 결과가 도출되었습니다. 이는 사용자가 화면 전체를 콘텐츠에만 사용할 때 시각적 방해 요소가 줄어들기 때문입니다.

Nielsen Norman Group의 연구에 따르면, 풀스크린 모드를 사용할 때 인터페이스 요소들이 사라져, 사용자가 콘텐츠에 더 쉽게 몰입할 수 있다고 설명합니다.

정리

풀스크린의 목적은 이미지, 어드민, 영화와 같은 OTT, 작업 툴을 제작할 때 쓰면 사용성이 올라간다.

상황을 가정해 보자
이번에 새롭게 론칭되는 뉴스페이지 만들어줘

물론 아무런 의도나 기획 없이 이런 경우는 잘 없다고 생각할지 모르지만 비일비재하다.(자주 겪는다.) 뉴스 사이트를 반응형으로 만든다고 가정했을 때 기사라는 단일 콘텐츠 아닌가요?라고 생각할 수 있다. 그럼 뉴스 사이트는 단일콘텐츠니.. 풀스크린?? 만약에 기사 하나만 있는 단일 콘텐츠면 가능하다 하지만 그런 경우가 잘 없다. 야후 파이낸스, 월스트리트 저널을 보면 알 수 있는 게 있다 텍스트 중심 콘텐츠일 경우 좌우 간격이 너무 넓으면 읽기 어렵다. 우리가 읽는 책에 글의 길이를 보면 알 수 있다. 보통 8~12마디가 가장 잘 읽힌다. 가능은 하지만.. 실효성이 없어서 뉴스에서 풀스크린은 거의 쓰지 않는다.

뉴스가 만약 검색만 제공한다면 구글이나 네이버처럼 쓸 수 있을 거다. 특히 구글은 풀스크린에 가까운 UI를 제공한다. 검색했을 때 그렇다. 그러다 이미지를 클릭하면 진정한 풀스크린으로 전환된다. 마치 핀터레스트처럼 이미지를 빠르게 탐색할 수 있는 UI를 제공한다. 네이버도 마찬가지다. 컨테이너형이 나오다 이미지를 클릭하면 풀스크린으로 전환된다.

이미지 태그로 넘어가면 풀스크린으로 전환된다.

에이 거 참 우리도 거 시원하게
풀스크린으로 만드는 거 어때?

요즘 OTT에서, 유튜브에서 풀스크린을 사용하니 마치 그게 트렌드처럼 보이는 경우가 있는가 보다. 그래서 풀스크린=트렌드라는 착각을 해서 이런 요구사항이 오기도 한다. 그런데 뉴스가 풀스크린으로 가려면 전제조건이 있다. 뉴스페이지가 정보 탐색이 아닌 분석과 전문적인 기능을 제공해야 한다.

하지만 더 이상 뉴스사이트가 아니게 될 것이며 분석에 가까운 사이트가 될 거다. 결국 뉴스 사이트를 만들라고 했는데 결국 뉴스가 아니게 된다. 아무래도 경제 분석 사이트가 되지 않을까. 그건 어려울 거 같아요 목적에 맞지 않아요!

그럼 됐고 우리 쇼핑몰 만들건대 이건 이미지 중심이잖아
시원하게 풀스크린으로 해줘
네이버도 이미지일 땐 풀스크린으로 보여준다며?

만약에 쇼핑몰이 브랜드 이미지를 중심으로 생각한다면 풀스크린 레이아웃 방향이 좋다. 몰입감을 주고 상품 하나하나의 임팩트가 있기 때문에 그렇다. 대표적으로 29센티가 이러한 방향을 쓰는데 29센치는 11번가 G마켓과 달리 편집샵의 성격이 강하며 ‘취향과 감성’이라는 경험의 맥락을 가지고 있다. 그래서 풀스크린으로 만들 수 있다.

풀스크린을 사용하는 쇼핑몰은 브랜드 성격이 강한 곳이다. 왜냐하면 아이덴티티를 나타내기 효과적이다. 제품마다의 강렬함을 주기 좋기도 좋다. 그래서 편집샵이나 자사쇼핑몰에서 많이 사용한다. 혹은 풀스크린이 아니더라도 보통 1100px인 컨테이너가 1760까지 늘리기도 한다.

풀스크린 예시

29센티, 애플, 나이키, 파타고니아, MLB, 이솝 등등

쇼핑몰에서 기준을 굳이 나누자면 종합 쇼핑몰과 브랜드 쇼핑몰의 차이로 볼 수 있겠다. 하지만 정답은 없으며 목적에 맞는 UI를 차용하면 되는 것이다. 풀스크린은 브랜드 아이덴티티와 단일 콘텐츠에 강점을 가지고 컨테이너형은 다중 콘텐츠 탐색과 필터에 강점을 가진다. 같은 쇼핑몰이지만 다른 레이아웃을 가지는 게 흥미로운 점이다.

기본기와 풀스크린의 아쉬운 사례

정리가 끝났다. 기본적이라고 생각할 수 있지만 기본기를 지키는 게 가장 어려운 순간이 온다. 그건 목적에 맞지 않는 UI를 요구받았을 때다. 기본기를 잊고 만든다면 완성도가 떨어지는 작업물이 나올 수도 있다. 

쟁글 홈페이지는 리뉴얼을 진행했는데 컨테이너형에서 풀스크린으로 전환되었다. 그런데 개인적인 생각이지만 이건 풀스크린과 맞지 않는 UI구조를 띄고 있다. 많은 텍스트가 넓게 퍼져있다 보니 가독성이 떨어진다. 혹여나 풀스크린으로 제작했다면 복잡한 콘텐츠들을 SNB나 드로워 UI로 정보에 대한 탐색을 도와주었어야 했다. 히스토리나 비즈니스 요구사항을 모르는 입장이지만 나의 좁은 시야에서 봤을 땐 아쉬움이 있다.

추가로 내가 좋아하는 유형의 레이아웃

컨테이너 형 드로워 UI다. 메뉴가 많거나, 추가 기능을 표현할 때 사용된다. 브런치, 챗지피티, 토스 PC는 드로워 메뉴를 사용해 컨테이너형에 공간을 최대로 활용한다. 컨테이너 형에 SNB/LNB 또는 다른 기능이 결합한 경우의 UI를 개인적으로 좋아한다. 명확한 계층 구분이 되고 가독성이 높기 때문이다. 

메뉴가 많을 때 - 레딧, 챗피티

추가 기능을 표현할 때 - 토스증권, 다음 마이페이지, 위믹스 월렛

끝으로

그리드 시스템의 네 가지 요소들의 기본값을 알았고 반응형에서 브레이크 포인트를 어떻게 쓰는지 알아봤다. 뿐만 아니라 변수로 나타날 수 있는 풀스크린 UI는 언제 쓰는 게 맞는지를 알 수 있었다. 이로써 PC부터 모바일까지 반응형에 대한 그리드 시스템 기본기는 끝! 

레이아웃이 끝나면 컨텐츠를 넣어야한다. 그런데 스티븐 크룩이 말했듯 사용자는 페이지를 읽지 않고 훑어본다. 그래서 사람들에게 잘 훑어볼 수 있는 페이지를 제작하는 게 옳다. 잘 읽을 수 있는 게 아니라 잘 훑어볼 수 있는 페이지는 사용성과 신뢰성까지 심어주는 효과를 가지고 있다. 그래서 닐슨노먼의 사용자가 스캔하는 7가지 방법도 알아두면 좋다. 널리 알려진 건 F패턴 와 Z패턴이 있다. 

F패턴과 Z패턴이 궁금하다면 참고 https://brunch.co.kr/@blackindigo-red/38