웹 디자인 #25
웹 디자인 #25웹사이트는 하나의 고정된 화면이 아닙니다. 데스크톱부터 태블릿, 모바일까지 화면 크기에 따라 콘텐츠의 폭과 배치가 계속 달라집니다.
이때 레이아웃의 기준이 되는 것이 그리드 시스템입니다. 컬럼, 거터, 마진, 콘텐츠 폭을 기준으로 요소를 배치하면 여러 화면에서도 정렬과 구조를 일관되게 유지할 수 있습니다.
그리고 기존 레이아웃을 더 이상 유지하기 어려운 지점에서는 브레이크포인트를 기준으로 카드의 열 수나 콘텐츠 배치 방식을 변경합니다.
이 글에서 배우는 내용
- 컬럼·거터·마진·콘텐츠 폭의 차이
- 12단 그리드를 사용하는 이유
- 브레이크포인트의 기본 개념
- 데스크톱 레이아웃을 모바일로 바꾸는 방법
- 반응형 디자인에서 텍스트와 이미지가 달라지는 방식
웹 레이아웃은 하나의 고정 화면이 아니다
피그마에서는 1440px이나 1920px처럼 특정 크기의 프레임을 만들어 디자인합니다.
하지만 실제 웹사이트는 사용자의 브라우저 크기에 따라 계속 늘어나고 줄어듭니다.
화면이 좁아지면 카드 4개가 2개로 줄어들고, 좌우로 배치된 이미지와 텍스트가 위아래로 쌓일 수 있습니다. 제목도 한 줄에서 두세 줄로 늘어나고 좌우 여백도 함께 좁아집니다.
따라서 웹디자인에서는 현재 화면의 모습뿐 아니라 화면이 변할 때의 규칙까지 함께 생각해야 합니다.
그리드 시스템의 기본 구조
그리드 시스템은 콘텐츠의 크기와 위치를 일정한 기준으로 정렬하기 위한 구조입니다.
웹에서는 주로 다음 네 가지를 이해하면 됩니다.
컬럼
콘텐츠를 배치하기 위해 화면을 세로로 나눈 영역입니다.
대표적으로 12단 그리드가 많이 사용됩니다.
12는 여러 방식으로 나누기 쉽기 때문입니다.
- 6 + 6 → 2단
- 4 + 4 + 4 → 3단
- 3 + 3 + 3 + 3 → 4단
예를 들어 히어로 영역에서 텍스트와 이미지를 각각 6컬럼씩 사용하거나, 카드 세 개를 각각 4컬럼으로 배치할 수 있습니다.
12단이 반드시 정답은 아닙니다. 중요한 것은 프로젝트 전체에서 사용할 일관된 배치 기준을 만드는 것입니다.
거터
컬럼과 컬럼 사이의 간격입니다.
카드가 여러 개 배치되어 있다면 카드 사이의 여백을 생각하면 쉽습니다.
강의에서는 16px, 20px, 24px 같은 값을 예시로 사용하지만 정해진 정답은 없습니다. 프로젝트의 콘텐츠 밀도와 화면 크기에 맞춰 일정한 규칙을 만드는 것이 더 중요합니다.
마진
화면 가장자리와 콘텐츠 사이의 좌우 여백입니다.
데스크톱에서는 넉넉하게 사용할 수 있지만 모바일에서는 화면이 좁기 때문에 자연스럽게 줄어듭니다.
강의에서는 예시로 데스크톱 약 80~120px, 모바일 약 16~24px 정도를 설명합니다.
콘텐츠 폭
화면이 아무리 넓어져도 실제 콘텐츠가 일정 너비 이상으로 늘어나지 않도록 제한하는 값입니다.
예를 들어 브라우저가 1920px이라도 콘텐츠를 1200px 정도 안에 배치하고, 나머지는 좌우 여백으로 사용할 수 있습니다.
배경은 화면 전체를 사용하고 실제 텍스트와 카드는 중앙의 콘텐츠 폭 안에 정렬하는 방식도 자주 사용합니다.
왜 12단 그리드를 많이 사용할까?
12단 그리드의 가장 큰 장점은 다양한 레이아웃을 하나의 기준으로 만들기 쉽다는 점입니다.
한 페이지에서도 다음과 같이 사용할 수 있습니다.
- 히어로: 6 + 6
- 카드 3개: 4 + 4 + 4
- 카드 4개: 3 + 3 + 3 + 3
- 본문 + 사이드 영역: 8 + 4
각 섹션의 형태는 달라도 시작점과 끝점이 같은 그리드에 맞춰지기 때문에 페이지 전체가 정돈되어 보입니다.
다만 포트폴리오나 프로모션 페이지처럼 시각적으로 자유로운 구성이 필요한 경우 일부 요소를 그리드 밖으로 확장할 수도 있습니다.
그리드를 벗어나는 것 자체가 문제는 아닙니다. 다만 화면별 예외 처리가 많아질수록 개발과 유지보수가 복잡해질 수 있기 때문에 명확한 이유가 있을 때 사용하는 것이 좋습니다.
브레이크포인트란?
브레이크포인트는 화면의 너비에 따라 레이아웃 구조가 바뀌는 기준 지점입니다.
예를 들어 카드 네 개를 한 줄에 보여주고 있는데 화면을 줄이다 보니 카드가 너무 좁아졌다고 생각해보겠습니다.
이때 특정 너비부터 다음과 같이 바꿀 수 있습니다.
4열 → 3열 → 2열 → 1열
이처럼 기존 구조를 유지하기 어려워지는 지점에서 새로운 레이아웃으로 바꾸는 기준이 브레이크포인트입니다.
강의에서는 다음 값을 예시로 사용합니다.
- 데스크톱: 1024px 이상
- 태블릿: 768~1023px
- 모바일: 767px 이하
이 값 역시 절대적인 기준은 아닙니다.
중요한 것은 특정 기기 이름보다 현재 콘텐츠가 더 이상 자연스럽게 보이지 않는 지점을 찾는 것입니다.
예를 들어 다음과 같은 상황이 나타날 수 있습니다.
- 내비게이션 메뉴가 한 줄에 들어가지 않음
- 카드가 지나치게 좁아짐
- 제목이 너무 많은 줄로 나뉨
- 이미지와 텍스트 비율이 어색해짐
이런 지점이 레이아웃을 변경할 신호가 됩니다.
반응형에서는 화면을 그냥 축소하지 않는다
반응형 웹디자인은 데스크톱 화면 전체를 같은 비율로 작게 만드는 작업이 아닙니다.
요소마다 변화하는 방식이 다릅니다.
예를 들어 카드 목록은 데스크톱에서 4열이었다가 태블릿에서 2열, 모바일에서 1열이 될 수 있습니다.
이미지와 텍스트가 좌우로 배치된 섹션은 모바일에서는 상하 구조로 변경됩니다.
이때 콘텐츠가 쌓이는 순서도 확인해야 합니다.
데스크톱에서 이미지와 텍스트를 번갈아 배치했다면 모바일에서는 그대로 쌓았을 때 이미지 → 텍스트 → 텍스트 → 이미지처럼 어색한 순서가 나올 수 있습니다.
필요하다면 모바일에서는 이미지 → 텍스트 → 이미지 → 텍스트처럼 읽기 좋은 순서로 다시 배치합니다.
텍스트와 이미지도 유연하게 생각하기
화면이 좁아지면 제목과 본문의 줄 수도 자연스럽게 늘어납니다.
따라서 특정 화면에서 한 줄로 보인다는 이유로 텍스트 영역의 높이를 고정해두면 실제 콘텐츠가 들어왔을 때 잘리거나 다른 요소와 겹칠 수 있습니다.
이미지도 마찬가지입니다.
16:9, 4:3, 1:1처럼 일정한 비율을 유지하면서 화면 크기에 맞춰 줄어들게 할 수 있습니다.
다만 비율을 고정하면 원본 이미지의 일부가 잘릴 수 있기 때문에 중요한 피사체가 모바일에서도 잘 보이는지 확인해야 합니다.
반응형 레이아웃에서 기억할 것
좋은 반응형 디자인은 화면마다 완전히 새로운 디자인을 만드는 것이 아닙니다.
기본적인 콘텐츠의 관계와 우선순위는 유지하면서 화면에 맞게 배치를 바꾸는 것입니다.
웹 레이아웃을 설계할 때는 다음 정도만 먼저 확인해도 좋습니다.
- 기본 콘텐츠 폭은 얼마인가?
- 몇 개의 컬럼을 사용할 것인가?
- 컬럼 사이의 거터는 얼마인가?
- 화면의 좌우 마진은 어떻게 달라지는가?
- 어느 지점에서 열의 개수를 변경할 것인가?
- 모바일에서 콘텐츠 순서는 어떻게 바뀌는가?
이 기준이 잡혀 있으면 디자이너와 개발자 모두 같은 규칙을 기준으로 작업하기 쉬워집니다.
