CSS Grid `grid-template-areas` 마스터하기: 복잡한 레이아웃을 직관적으로 설계하는 방법

🤯 시각적 레이아웃 설계, CSS Grid grid-template-areas로 한 단계 업그레이드

기존 웹 페이지 레이아웃을 잡을 때, 우리는 div 태그를 잔뜩 쌓아 올리고 position, float, display: inline-block 등을 조합하며 복잡한 CSS를 작성하곤 했습니다. 특히 여러 개의 요소를 그리드처럼 배치해야 할 때는 더욱 까다로웠죠. 하지만 CSS Grid Layout가 등장하면서 레이아웃 설계 방식은 완전히 달라졌습니다. 그중에서도 grid-template-areas 속성은 코드를 보면서 레이아웃의 전체적인 구조를 시각적으로 파악할 수 있게 도와주어, 복잡한 UI를 직관적으로 설계하는 데 강력한 도구가 됩니다.

이 글에서는 grid-template-areas가 무엇인지, 어떻게 작동하는지, 그리고 실제 프로젝트에서 어떻게 유용하게 활용할 수 있는지 알아보겠습니다. 더 이상 div 지옥에 빠지지 않고, 마치 그림을 그리듯 레이아웃을 설계해 보세요.

🎨 grid-template-areas란 무엇인가?

grid-template-areas는 CSS Grid Layout에서 제공하는 속성으로, 이름을 가진 Grid Area를 정의하여 Grid Container의 레이아웃을 시각적으로 설계할 수 있게 해줍니다. 여기서 Grid Area란, 하나 이상의 Grid Cell로 구성된 사각형 영역을 의미합니다.

이름을 붙인 Grid Area들은 Grid Container 내에서 원하는 위치에 배치될 수 있으며, 이를 통해 복잡한 레이아웃도 마치 픽셀 아트처럼 직관적으로 표현할 수 있습니다.

1. Grid Area 이름 짓기: grid-area 속성

먼저, 레이아웃을 구성할 각 영역에 이름을 붙여야 합니다. 이는 Grid Item에 grid-area 속성을 사용하여 지정합니다.

1.header {
2  grid-area: header;
3}
4
5.sidebar {
6  grid-area: sidebar;
7}
8
9.main-content {
10  grid-area: main;
11}
12
13.footer {
14  grid-area: footer;
15}

위 예시처럼, 각 HTML 요소에 grid-area 속성으로 고유한 이름을 부여합니다. 이 이름들은 나중에 grid-template-areas에서 사용됩니다.

2. Grid Container에 레이아웃 배치하기: grid-template-areas 속성

Grid Container에 grid-template-areas 속성을 사용하여, 앞에서 정의한 Grid Area들을 2차원 그리드 형태로 배치합니다. 각 행은 문자열로 표현되며, 각 문자열 안의 단어(Grid Area 이름)들은 해당 행의 셀에 배치될 영역을 나타냅니다. 비어있는 셀은 . (점)으로 표시하거나, 해당 셀을 차지하는 Grid Area의 이름을 반복하여 표시할 수 있습니다.

1.grid-container {
2  display: grid;
3  grid-template-columns: 1fr 2fr 1fr; /* 3개의 컬럼 정의 */
4  grid-template-rows: auto 1fr auto;    /* 3개의 행 정의 */
5  grid-template-areas:
6    "header header header"  /* 첫 번째 행: header 영역이 3개 컬럼 모두 차지 */
7    "sidebar main main"     /* 두 번째 행: sidebar가 첫 번째 컬럼, main이 나머지 두 컬럼 차지 */
8    "footer footer footer"; /* 세 번째 행: footer 영역이 3개 컬럼 모두 차지 */
9  gap: 10px; /* 셀 간 간격 */
10}

위 CSS는 다음과 같은 레이아웃을 생성합니다:

• 첫 번째 행: header라는 이름의 Grid Area가 세 개의 컬럼을 모두 차지합니다.
• 두 번째 행: sidebar라는 이름의 Grid Area가 첫 번째 컬럼을, main이라는 이름의 Grid Area가 두 번째와 세 번째 컬럼을 차지합니다.
• 세 번째 행: footer라는 이름의 Grid Area가 세 개의 컬럼을 모두 차지합니다.

이렇게 grid-template-areas를 사용하면, 마치 텍스트 아트처럼 Grid Container의 전체 레이아웃 구조를 한눈에 파악할 수 있습니다. 이는 코드를 읽는 사람으로 하여금 레이아웃의 의도를 명확하게 이해하도록 돕습니다.

💡 비어있는 셀 처리

grid-template-areas에서 특정 셀을 비워두고 싶다면, . (점)을 사용합니다. 이 점은 해당 셀이 어떤 Grid Area에도 속하지 않음을 나타냅니다.

1.grid-container {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  grid-template-rows: auto 1fr auto;
5  grid-template-areas:
6    "header header ."      /* header가 첫 두 컬럼, 세 번째 컬럼은 비움 */
7    "sidebar main main"
8    "footer footer footer";
9}

이 경우, header 영역은 첫 두 컬럼만 차지하고 세 번째 컬럼은 비어있게 됩니다. 비어있는 영역은 다른 요소가 차지하지 않으며, gap 속성 등에 의해 여백으로 유지됩니다.

🚀 실전 활용 사례

grid-template-areas는 특히 다음과 같은 시나리오에서 유용하게 활용될 수 있습니다.

1. 반응형 웹사이트 레이아웃

grid-template-areas는 미디어 쿼리(@media)와 함께 사용하여 다양한 화면 크기에 맞춰 레이아웃을 유연하게 변경하는 데 탁월합니다.

예시: 데스크톱 vs 모바일 레이아웃 전환

1<div class="grid-container">
2  <header class="header">Header</header>
3  <nav class="nav">Navigation</nav>
4  <main class="main">Main Content</main>
5  <aside class="sidebar">Sidebar</aside>
6  <footer class="footer">Footer</footer>
7</div>

1.grid-container {
2  display: grid;
3  gap: 10px;
4  padding: 10px;
5}
6
7/* 데스크톱 레이아웃 (화면 너비 768px 이상) */
8.grid-container {
9  grid-template-columns: 1fr 3fr 1fr;
10  grid-template-rows: auto 1fr auto;
11  grid-template-areas:
12    "header header header"
13    "nav main sidebar"
14    "footer footer footer";
15}
16
17.header { grid-area: header; background-color: lightblue; }
18.nav { grid-area: nav; background-color: lightgreen; }
19.main { grid-area: main; background-color: lightcoral; }
20.sidebar { grid-area: sidebar; background-color: lightsalmon; }
21.footer { grid-area: footer; background-color: lightgray; }
22
23/* 모바일 레이아웃 (화면 너비 768px 미만) */
24@media (max-width: 767px) {
25  .grid-container {
26    grid-template-columns: 1fr; /* 한 개의 컬럼만 사용 */
27    grid-template-rows: auto auto 1fr auto auto; /* 행 개수 조정 */
28    grid-template-areas:
29      "header"
30      "nav"
31      "main"
32      "sidebar"
33      "footer";
34  }
35  /* 모바일에서는 nav와 sidebar가 main 아래로 오도록 */
36}

이 코드는 화면 너비가 768px 이상일 때는 헤더, 네비게이션, 메인 콘텐츠, 사이드바, 푸터가 각각 지정된 영역에 배치되지만, 768px 미만에서는 모든 요소가 한 줄씩 세로로 쌓이는 형태의 레이아웃으로 자동 변경됩니다. grid-template-areas를 통해 각 레이아웃의 구조를 명확하게 정의하고, 미디어 쿼리로 해당 구조를 쉽게 재정의할 수 있습니다.

2. 복잡한 대시보드 UI

대시보드와 같이 여러 섹션으로 구성된 복잡한 UI는 grid-template-areas를 사용하면 구조를 훨씬 쉽게 관리할 수 있습니다.

예시: 카드 기반 대시보드 레이아웃

1<div class="dashboard-grid">
2  <div class="card stats">Statistics</div>
3  <div class="card chart">Chart</div>
4  <div class="card table">Data Table</div>
5  <div class="card map">Map</div>
6  <div class="card settings">Settings</div>
7</div>

1.dashboard-grid {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, auto);
5  grid-template-areas:
6    "stats stats chart chart"
7    "table table map .";
8    "settings . . ."
9  gap: 15px;
10}
11
12.stats { grid-area: stats; background-color: #f0f0f0; }
13.chart { grid-area: chart; background-color: #e0e0e0; }
14.table { grid-area: table; background-color: #d0d0d0; }
15.map { grid-area: map; background-color: #c0c0c0; }
16.settings { grid-area: settings; background-color: #b0b0b0; }
17
18/* 각 카드에 대한 기본적인 스타일 */
19.card { padding: 20px; border-radius: 8px; }

이 예시에서는 4개의 컬럼과 3개의 행으로 구성된 Grid Container에 stats, chart, table, map, settings라는 이름의 Grid Area들을 배치했습니다. stats와 chart는 상단 두 컬럼을, table과 map은 중간 행의 각기 다른 컬럼을 차지하며, settings는 마지막 행의 첫 번째 컬럼을 차지합니다. .으로 표시된 빈 공간은 아무것도 채워지지 않습니다. 이처럼 grid-template-areas는 여러 개의 컴포넌트가 모여 복잡한 UI를 이룰 때, 각 컴포넌트의 배치와 크기를 직관적으로 정의하는 데 도움을 줍니다.

3. 템플릿 기반 레이아웃

grid-template-areas는 마치 웹 페이지의 템플릿처럼 사용할 수 있습니다. 자주 사용되는 레이아웃 구조를 미리 정의해두고, 각 영역에 콘텐츠만 동적으로 채워 넣는 방식으로 활용할 수 있습니다.

🤔 주의할 점

• Grid Item의 내용이 넘칠 때: grid-area로 지정된 영역의 내용이 해당 영역의 크기를 초과할 경우, overflow 속성을 적절히 설정하여 스크롤바를 표시하거나 내용을 자르는 등의 처리가 필요합니다.
• Area 이름의 고유성: grid-template-areas 내에서 사용되는 Area 이름은 해당 Grid Container 내에서 고유해야 합니다. 중복될 경우 예상치 못한 결과가 발생할 수 있습니다.
• grid-template-areas와 grid-template-columns/grid-template-rows의 연관성: grid-template-areas에 정의된 행과 열의 개수는 grid-template-columns와 grid-template-rows에 정의된 트랙(컬럼/행)의 개수와 일치해야 합니다. 예를 들어, grid-template-areas에서 3개의 문자열로 3개의 행을 정의했다면, grid-template-rows에서도 3개의 값을 정의해야 합니다. 각 문자열 안의 단어(Area 이름) 개수는 grid-template-columns의 값 개수와 일치해야 합니다.
• grid-area 속성은 단축 속성: grid-area 속성은 grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성을 한 번에 지정하는 단축 속성입니다. grid-template-areas를 사용할 때는 grid-area에 Area 이름을 지정하는 것으로 충분합니다. 개별적으로 트랙을 지정하고 싶을 때만 grid-row/grid-column 속성을 사용할 수 있습니다.

✨ 마무리

grid-template-areas는 CSS Grid Layout를 더욱 직관적이고 시각적으로 활용할 수 있게 해주는 강력한 기능입니다. 복잡한 웹 페이지 레이아웃 설계 시, 코드만으로는 파악하기 어려웠던 구조를 텍스트 아트처럼 시각화하여 개발 생산성을 크게 향상시킬 수 있습니다. 특히 반응형 디자인이나 복잡한 UI 컴포넌트 배치에 유용하므로, 적극적으로 활용해보시길 바랍니다.

참고 자료:

• MDN Web Docs: grid-template-areas
• MDN Web Docs: grid-area