내용 확인일: 2026년 9월 21일 · 이 글의 화면 규격은 설명을 위해 직접 구성한 설계 예시입니다. 특정 회사의 작업 사례나 사용자 실험 결과가 아닙니다.
카드 목록을 설계할 때 ‘데스크톱은 12컬럼’이라고만 정하면 중요한 결정이 남습니다. 실제 카드 너비, 카드 사이 간격, 화면이 좁아질 때 줄어드는 순서가 필요합니다. 이 글에서는 같은 콘텐츠를 3열·2열·1열로 배치하는 예제로 그 결정을 계산합니다.
화면 너비와 콘텐츠 너비를 먼저 나누기
예시 조건은 다음과 같습니다. 카드에는 제목·설명·이동 링크가 있고, 긴 제목도 잘리지 않아야 합니다. 가장 넓은 화면에서 콘텐츠는 최대 1,200px를 사용합니다. 좌우 여백과 카드 간격은 아래처럼 정합니다. 이 숫자들은 제품에 따라 바꿀 수 있는 설계 선택이며 보편적인 표준값은 아닙니다.
| 예시 화면 너비 | 좌우 여백 | 콘텐츠 너비 | 카드 열 수 | 열 사이 간격 | 카드 한 장 너비 |
|---|---|---|---|---|---|
| 1,440px | 각각 120px | 1,200px | 3 | 24px | 384px |
| 768px | 각각 24px | 720px | 2 | 24px | 348px |
| 360px | 각각 16px | 328px | 1 | 없음 | 328px |
카드 너비는 (콘텐츠 너비 − 전체 열 간격) ÷ 열 수로 계산합니다. 1,440px 화면에서는 (1,200 − 24 × 2) ÷ 3 = 384px입니다. 768px에서는 (720 − 24) ÷ 2 = 348px이고, 모바일에서는 카드가 콘텐츠 너비 전체를 사용합니다.
이 계산은 작은 오해를 줄입니다. 1,440px를 바로 3으로 나누면 바깥 여백과 카드 간격을 빠뜨리게 됩니다. 먼저 콘텐츠 영역을 정하고 그 안에서 나눠야 디자인과 구현의 값이 일치합니다.
12컬럼을 쓰는 경우에도 카드 열 수는 따로 정하기
콘텐츠 영역 1,200px를 거터 24px인 12컬럼으로 나누면 컬럼 하나는 (1,200 − 24 × 11) ÷ 12 = 78px입니다. 카드 한 장이 4개 컬럼을 차지한다면 카드 너비는 78 × 4 + 24 × 3 = 384px가 됩니다. 따라서 ‘12컬럼 위에서 카드 3열’과 ‘카드 목록 자체를 3열로 구성’하는 두 표현을 구분할 수 있습니다.
다른 영역도 같은 정렬선을 공유해야 한다면 12컬럼이 편리할 수 있습니다. 카드 목록 하나만 구현한다면 3열 규칙을 직접 전달하는 편이 더 단순할 수 있습니다. CSS Grid는 행과 열을 정의하는 배치 방식이며, 디자인 파일의 보조 그리드를 반드시 같은 숫자의 CSS 열로 옮겨야 하는 것은 아닙니다. MDN: Grid의 기본 개념
열 수가 바뀌는 지점은 콘텐츠로 판단하기
예시에서 카드가 최소 300px는 필요하다고 가정해 보겠습니다. 3열에 필요한 콘텐츠 너비는 300 × 3 + 24 × 2 = 948px입니다. 바깥 여백을 좌우 24px씩 둔다면 화면 너비는 최소 996px가 필요합니다. 2열은 300 × 2 + 24 = 624px이므로 같은 바깥 여백 조건에서 최소 672px가 필요합니다.
이 숫자는 이 예시의 계산상 경계입니다. 실제 화면에서는 제목 길이, 버튼 문구, 폰트, 번역, 확대 상태를 넣어 확인한 뒤 전환 지점을 정해야 합니다. ‘태블릿은 언제나 이 너비’라는 가정만으로 열 수를 고정하면 카드 내용이 먼저 깨질 수 있습니다.
| 검토할 상황 | 발견하려는 문제 | 조정할 후보 |
|---|---|---|
| 가장 긴 제목을 넣었을 때 | 제목 잘림, 링크와 설명의 겹침 | 제목 줄바꿈·카드 최소 너비·열 수 |
| 설명이 없는 카드와 긴 카드가 섞일 때 | 읽는 순서 혼란, 불필요한 빈 공간 | 높이 정책·내용 정렬 규칙 |
| 좁은 화면에서 긴 영문·URL이 들어올 때 | 가로 넘침 | 줄바꿈 정책·자식 요소의 최소 너비 |
| 확대해서 읽을 때 | 내용이 가려지거나 조작 불가 | 열 전환·고정 높이·스크롤 처리 |
정렬과 접근성은 따로 검증하기
격자가 가지런하다고 스크린 리더의 읽는 순서까지 자동으로 올바른 것은 아닙니다. CSS로 보이는 위치를 바꿔도 기본적인 읽기·키보드 탐색 순서는 문서 구조와 다를 수 있습니다. 중요한 콘텐츠의 논리적 순서를 먼저 정한 뒤 시각적 배치를 맞춰야 합니다. MDN: Grid와 접근성
카드 목록이라면 제목과 설명을 읽은 다음 해당 카드의 링크로 이동하는 흐름을 생각해 볼 수 있습니다. 디자인 검토표에는 ‘정렬됨’과 ‘키보드 순서가 자연스러움’을 별도 항목으로 적으세요. 이 글의 계산은 레이아웃의 너비를 검증한 것이며, 실제 제품의 접근성 검사를 대신하지 않습니다.
개발자에게 전달할 내용
디자인 파일의 그리드 설정 외에 다음 내용을 함께 전달하면 구현 시 추측할 부분이 줄어듭니다.
- 콘텐츠 최대 너비와 화면 크기별 바깥 여백
- 카드의 최소 너비, 열 사이 간격, 열 전환 조건
- 긴 제목·설명의 줄바꿈과 카드 높이 처리
- 모바일에서의 정보 순서와 키보드 탐색 순서
- 빈 상태, 카드 한 개만 있는 상태, 내용이 많은 상태의 예시
이 예시를 전달한다면 ‘최대 콘텐츠 1,200px, 카드 간격 24px, 최소 카드 너비 300px를 가정한 3→2→1열 목록’이라고 요약할 수 있습니다. 실제 프로젝트에서는 최소 너비를 정한 근거와 경계 너비에서 확인한 결과를 함께 기록하세요. 이 기록이 다음 화면을 만들 때 재사용할 수 있는 설계 근거가 됩니다.
수정 기록: 2026년 9월 21일, 출처가 명확하지 않은 유행·시장·기업 동향 주장을 줄이고, 재현 가능한 너비 계산과 콘텐츠 검토표를 중심으로 다시 구성했습니다. 직접 수행하지 않은 현업 사례나 사용자 테스트 결과를 추가하지 않았습니다.
