웹 디자인 레이아웃의 기본: 콘텐츠 흐름부터 반응형 그리드까지

디자인 시스템2026년 7월 23일글: 홍서진, Duolabs19분 읽기accessibility blog container-query css-grid flexbox frontend layout model-openai-gpt-5 responsive-design technical-note web-design

웹 레이아웃은 화면을 몇 칸으로 나눌지 정하는 작업이 아닙니다. 콘텐츠의 읽기 순서를 먼저 세우고, 넓이가 달라져도 그 순서와 기능이 무너지지 않도록 공간의 규칙을 만드는 작업입니다.

디자인을 시작하면 색상, 카드 그림자, 둥근 모서리부터 만지기 쉽습니다. 하지만 레이아웃이 흔들리면 장식은 문제를 가릴 뿐입니다. 이 글에서는 빈 HTML에서 출발해 실제 서비스에 쓸 수 있는 반응형 페이지 골격을 만드는 순서를 정리합니다.

1. 레이아웃보다 먼저 읽기 순서를 정한다

브라우저는 별도 CSS가 없어도 블록 요소를 위에서 아래로 배치합니다. 이를 **일반 흐름(normal flow)**이라고 합니다. MDN의 CSS 레이아웃 입문은 제한적인 브라우저나 스크린 리더에서도 읽을 수 있는 문서 구조를 먼저 만드는 것이 좋은 출발점이라고 설명합니다.

다음 정도의 HTML만으로도 페이지의 정보 구조가 드러나야 합니다.

<header>
  <a href="/">브랜드</a>
  <nav aria-label="주요 메뉴">...</nav>
</header>

<main>
  <article>
    <h1>페이지 제목</h1>
    <p>핵심 콘텐츠</p>
  </article>

  <aside aria-label="관련 콘텐츠">...</aside>
</main>

<footer>...</footer>

이 순서는 모바일의 한 열 레이아웃이기도 합니다. 넓은 화면에서 사이드바를 오른쪽에 보이게 하더라도 DOM에서 주요 콘텐츠보다 앞에 둘 이유는 없습니다. CSS가 꺼졌을 때도 제목, 본문, 보조 정보 순으로 읽힌다면 구조가 단단한 편입니다.

W3C WAI의 페이지 구조 안내도 header, nav, main, article, aside, footer 같은 영역과 논리적인 제목 단계를 사용하면 키보드·스크린 리더·읽기 모드가 페이지를 더 잘 탐색할 수 있다고 설명합니다.

2. 화면 전체가 아니라 컨테이너부터 잡는다

넓은 모니터를 끝까지 채우면 정보가 많아 보이지만, 본문 한 줄도 함께 길어집니다. 반대로 고정 폭만 쓰면 작은 화면에서 가로 스크롤이 생깁니다. 가장 기본적인 해법은 바깥 여백과 최대 폭을 분리하는 것입니다.

:root {
  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
}

.page {
  padding-inline: var(--page-gutter);
}

.page__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}

.article-body {
  max-inline-size: 68ch;
}

역할은 세 가지로 나뉩니다.

.page는 화면 가장자리와 콘텐츠 사이의 안전한 여백을 만듭니다.
.page__inner는 큰 화면에서 레이아웃이 끝없이 늘어나는 것을 막습니다.
.article-body는 긴 글의 줄 길이를 별도로 제한합니다.

clamp()를 사용하면 화면 구간마다 여백 값을 여러 번 바꾸지 않아도 됩니다. 중요한 점은 72rem이나 68ch라는 숫자 자체가 아닙니다. 실제 제목, 표, 카드, 본문을 넣었을 때 읽기 편한 범위를 찾고 디자인 토큰으로 관리하는 것이 핵심입니다.

3. 큰 구조는 Grid, 한 줄 정렬은 Flexbox

Grid와 Flexbox는 서로 경쟁하는 도구가 아닙니다. 해결하는 문제가 다릅니다.

CSS Grid: 행과 열을 함께 다루는 페이지, 카드 목록, 대시보드
Flexbox: 메뉴, 버튼 묶음, 아이콘과 텍스트처럼 한 방향으로 흐르는 요소

MDN CSS 레이아웃 과정은 Grid를 2차원 레이아웃, Flexbox를 1차원 레이아웃 방식으로 구분합니다.

본문과 사이드바가 있는 페이지는 Grid로 간단히 표현할 수 있습니다.

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 64rem) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    align-items: start;
  }
}

여기서 minmax(0, 1fr)가 중요합니다. Grid 아이템의 기본 최소 크기 때문에 긴 URL이나 코드가 열을 밀어내는 문제를 줄여 줍니다. 사이드바는 필요한 범위 안에서만 늘어나고, 나머지는 본문이 사용합니다.

반면 헤더 안의 로고와 메뉴는 Flexbox가 자연스럽습니다.

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

flex-wrap을 빼면 메뉴 번역이 길어지거나 글자 크기를 키웠을 때 쉽게 넘칩니다. 한 줄을 강제하기보다 줄바꿈 가능한 상태를 기본으로 두는 편이 안전합니다.

4. 12열 그리드는 목적이 아니라 좌표계다

많은 디자인 도구가 12열 그리드를 제공합니다. 12는 2, 3, 4, 6으로 나누기 쉬워서 여러 비율을 표현하기 편한 숫자입니다. 하지만 모든 화면에 12개의 열을 실제로 그려야 한다는 뜻은 아닙니다.

레이아웃을 정할 때는 다음 세 값이 더 중요합니다.

열(column): 콘텐츠가 놓이는 영역
간격(gutter): 열과 열 사이의 거리
바깥 여백(margin): 화면과 콘텐츠 사이의 거리

카드 목록처럼 개수가 바뀌는 콘텐츠는 열 개수를 직접 지정하지 않아도 됩니다.

.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 18rem), 1fr)
  );
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

이 규칙은 카드가 최소 폭을 유지할 수 있을 만큼 공간이 있을 때만 다음 열을 만듭니다. 화면이 아니라 콘텐츠가 열 개수를 결정합니다. MDN의 Grid 안내에서도 repeat(), auto-fit, minmax()를 이용해 컨테이너에 들어갈 수 있는 만큼 열을 만드는 방식을 소개합니다.

5. 브레이크포인트는 기기 이름이 아니라 콘텐츠가 깨지는 지점이다

mobile, tablet, desktop이라는 이름은 대화에는 편하지만 CSS의 기준으로는 오래가지 못합니다. 새 기기 폭은 계속 생기고, 같은 태블릿도 분할 화면에서는 작은 창이 됩니다.

다음 순서가 더 실용적입니다.

가장 좁은 한 열 레이아웃을 기본값으로 만든다.
창을 천천히 넓힌다.
한 줄이 지나치게 길어지거나 카드가 어색하게 비는 시점을 찾는다.
그 지점에서만 열을 추가하거나 배치를 바꾼다.

MDN의 반응형 웹 디자인 안내는 특정 기기 폭보다 콘텐츠가 보기 나빠지는 지점에 브레이크포인트를 두고, 상대 단위를 사용하는 방식을 권합니다. web.dev의 매크로 레이아웃도 작은 화면에서 사용할 단일 열의 콘텐츠 순서를 먼저 확인한 뒤, 공간이 충분할 때 Grid를 적용하는 흐름을 보여 줍니다.

미디어 쿼리는 적을수록 좋다는 뜻은 아닙니다. 각 쿼리가 해결하는 문제가 설명 가능해야 한다는 뜻입니다.

/* 기본: 한 열 */
.content-layout { grid-template-columns: minmax(0, 1fr); }

/* 본문과 보조 영역이 각자 최소 폭을 확보할 수 있는 시점 */
@media (min-width: 64rem) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }
}

6. 페이지는 미디어 쿼리, 컴포넌트는 컨테이너 쿼리

같은 카드가 본문에서는 넓고 사이드바에서는 좁게 배치될 수 있습니다. 뷰포트만 보는 미디어 쿼리는 카드가 실제로 받은 공간을 알지 못합니다. 이런 경우 컨테이너 쿼리가 맞습니다.

.card-region {
  container-type: inline-size;
}

.profile-card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 32rem) {
  .profile-card {
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
  }
}

이제 카드가 페이지 어디에 놓였는지는 중요하지 않습니다. 자신을 담은 컨테이너가 32rem보다 넓을 때만 가로 배치로 바뀝니다. MDN 컨테이너 쿼리 안내와 web.dev의 마이크로 레이아웃은 페이지 수준에는 미디어 쿼리, 재사용 컴포넌트에는 컨테이너 쿼리를 조합하는 방식을 설명합니다.

기본 레이아웃을 배우는 단계라면 미디어 쿼리만으로도 충분합니다. 다만 컴포넌트가 여러 문맥에서 재사용되기 시작하면 컨테이너 쿼리를 고려할 시점입니다.

7. 간격은 빈 공간이 아니라 정보의 관계다

레이아웃에서 간격은 장식이 아닙니다. 가까운 요소는 한 묶음으로, 멀리 떨어진 요소는 다른 묶음으로 읽힙니다. 모든 곳에 다른 숫자를 쓰면 관계를 예측하기 어렵습니다.

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
}

작은 간격은 아이콘과 라벨, 중간 간격은 카드 내부, 큰 간격은 섹션 사이처럼 역할을 정합니다. 카드마다 테두리와 그림자를 더하기 전에 간격만으로 그룹이 구분되는지 확인하면 시각적 소음이 줄어듭니다.

세로 간격도 같은 원칙을 따릅니다. 제목과 설명은 가깝게, 다음 섹션과는 멀게 둡니다. margin-bottom: 17px, 29px, 43px처럼 화면을 보며 매번 새 숫자를 만들기보다 제한된 간격 체계를 반복하는 편이 유지보수에 유리합니다.

8. 반응형은 가로 스크롤이 없는 상태까지 포함한다

레이아웃이 320 CSS 픽셀 폭에서도 정보와 기능을 잃지 않고 한 방향으로 흐르는지 확인해야 합니다. WCAG 2.2의 Reflow 해설은 표·지도처럼 2차원 표현이 본질적인 일부 콘텐츠를 제외하고, 320 CSS 픽셀 폭에서 양방향 스크롤 없이 콘텐츠를 사용할 수 있어야 한다고 설명합니다.

자주 빠뜨리는 기본 방어 코드는 다음과 같습니다.

img,
video,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

pre,
.table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
}

p,
li,
.card {
  overflow-wrap: anywhere;
}

표나 코드 블록처럼 가로 방향이 의미를 가지는 영역만 자체 스크롤을 허용하고, 페이지 전체에는 가로 스크롤이 생기지 않게 합니다. 이미지는 컨테이너보다 커지지 않게 하고, 긴 URL은 레이아웃을 밀지 않도록 줄바꿈합니다.

터치 화면에서는 조밀한 레이아웃도 문제입니다. WCAG 2.2 Target Size 기준은 포인터 입력 대상에 최소 24×24 CSS 픽셀 크기 또는 충분한 주변 간격을 요구합니다. 실제 버튼과 메뉴는 이 최소치보다 여유 있게 설계하는 편이 누르기 쉽습니다.

9. `position: absolute`로 큰 구조를 만들지 않는다

절대 위치는 배지, 장식, 닫기 버튼처럼 다른 요소 위에 놓여야 하는 작은 UI에 유용합니다. 하지만 페이지의 주요 열과 섹션을 좌표로 배치하면 다음 문제가 생깁니다.

문장이 길어졌을 때 다음 요소와 겹칩니다.
번역이나 사용자 글자 크기 설정을 견디지 못합니다.
콘텐츠가 추가될 때마다 높이와 좌표를 다시 계산해야 합니다.
DOM 순서와 시각 순서가 달라져 키보드 탐색이 어색해집니다.

큰 구조는 일반 흐름, Grid, Flexbox로 만들고, 겹침이 의미인 부분에만 position을 사용합니다. 레이아웃을 고치기 위해 z-index: 99999가 반복되기 시작했다면 좌표보다 문서 구조를 먼저 다시 볼 때입니다.

10. 기본 골격을 한 번에 조립해 보기

지금까지의 원칙을 합치면 아래와 같은 페이지가 됩니다.

<body>
  <header class="site-header page">
    <div class="page__inner">...</div>
  </header>

  <main class="page">
    <div class="page__inner content-layout">
      <article class="article-body">...</article>
      <aside aria-label="관련 글">...</aside>
    </div>
  </main>

  <footer class="page">
    <div class="page__inner">...</div>
  </footer>
</body>

:root {
  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

body { margin: 0; }

.page { padding-inline: var(--page-gutter); }

.page__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.article-body { max-inline-size: 68ch; }

@media (min-width: 64rem) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: start;
  }
}

이 골격은 화려하지 않지만 콘텐츠가 늘거나 화면이 달라져도 예측하기 쉽습니다. 이후에 색, 타이포그래피, 카드, 모션을 얹더라도 레이아웃의 책임이 명확합니다.

마무리 체크리스트

배포 전에는 다음 질문을 순서대로 확인합니다.

CSS가 없어도 콘텐츠 순서가 자연스러운가?
페이지에 header, nav, main, article, aside, footer가 의미에 맞게 쓰였는가?
컨테이너 최대 폭과 화면 바깥 여백이 분리되어 있는가?
큰 2차원 구조에는 Grid, 한 방향 정렬에는 Flexbox를 사용했는가?
가장 좁은 화면을 기본값으로 만들었는가?
브레이크포인트가 특정 기기 이름이 아니라 콘텐츠가 깨지는 지점에 있는가?
이미지, 긴 URL, 코드, 표가 페이지 전체를 밀어내지 않는가?
320 CSS 픽셀 폭과 브라우저 400% 확대에서 정보가 사라지지 않는가?
키보드 포커스 순서가 화면의 읽기 순서와 일치하는가?
터치 대상의 크기와 간격이 충분한가?

좋은 레이아웃은 특정 화면에서 픽셀 단위로 완벽히 맞아 보이는 결과보다, 콘텐츠와 환경이 바뀌어도 의도가 유지되는 규칙에 가깝습니다. 먼저 읽기 순서를 만들고, 컨테이너로 폭을 제한하고, Grid와 Flexbox로 관계를 표현한 다음, 실제 콘텐츠가 요구할 때만 반응형 전환을 추가하면 됩니다.