이 글은 누구를 위한 것인가
- 콘텐츠 종류가 많은 포털·매거진형 사이트의 메인 화면을 다시 잡는 디자이너
- 카드 컴포넌트의 변종이 너무 많아 정리가 필요한 디자인 시스템 담당
- "그리드는 깔끔한데 사용자가 길을 잃는다"는 피드백을 들은 PM·기획자
들어가며
콘텐츠 종류가 많아질수록 메인 화면 디자인은 두 가지 방향으로 갈린다. 모든 카드를 비슷한 모양으로 통일해 정렬감을 우선하거나, 카드마다 모양을 바꿔 콘텐츠 유형을 즉시 알아보게 하거나. 둘 다 장단이 있고, 실무에서는 한쪽으로 못 박지 못하고 어정쩡하게 섞인다.
테이블플레이는 게임·뉴스·블로그·즉시 플레이가 한 페이지에 들어가는 포털이다. 이 사이트가 흥미로운 이유는 카드 모양을 과하게 분리하지도 통일하지도 않은 채 콘텐츠 유형을 구분한다는 점이다. 디자인 시스템 관점에서 분리해서 살펴볼 가치가 있다.
1. 페이지 단위가 아니라 섹션 단위로 그리드를 다시 잡는다
테이블플레이 메인 화면은 다음 섹션이 위에서 아래로 흐른다.
- 톱 뉴스 한 건 (와이드 카드)
- 게임 소개 4개 (2×2 그리드)
- 뉴스 — 메인/서브 분리 (1+3 레이아웃)
- 블로그 4개 (4열 그리드)
- 즉시 플레이 4개 (4열 그리드, 썸네일 강조)
같은 4개 카드 그리드인데 섹션마다 카드 안의 정보 우선순위가 다르다. 게임 소개는 제목이 가장 크고, 블로그는 카테고리가 먼저, 즉시 플레이는 썸네일이 절대적이다.
이 점이 중요하다. 흔히 디자인 시스템은 "카드 컴포넌트 1개"를 정의하고 모든 섹션에서 재사용하라고 한다. 그러면 정렬은 깔끔하지만 사용자는 왜 이 카드를 클릭해야 하는지를 매번 새로 판단해야 한다.
테이블플레이는 카드의 외곽 스타일(보더, 라운드, 그림자)은 통일하되 내부 정보 위계만 섹션별로 바꾼다. 디자인 토큰은 공유하고 슬롯 구성만 다르게 가져가는 방식이다. 디자인 시스템 측면에서 적용 가능한 패턴이다.
2. "톱 뉴스 한 건"의 비대칭이 만드는 호흡
상단의 톱 뉴스는 다른 카드들과 비례가 다르다. 가로 폭이 거의 화면 전체에 가깝고, 본문 한 단락이 카드 안에 그대로 들어간다. 스포츠토토 프로토 운영 방식 개편 같은 글이 여기 들어가 있다.
이 비대칭은 두 가지를 노린다.
- 시간성: "지금 가장 중요한 한 건"이 바로 보인다.
- 호흡: 그 아래로 이어지는 4×N 그리드가 톱 카드의 반복이 아닌 별도 영역으로 인지된다.
작은 카드 그리드를 위에서부터 시작하면 사용자는 모든 카드를 같은 무게로 본다. 위에 비대칭 카드가 한 번 들어가면 시각적 문장 끊기가 생긴다. 이 한 번의 끊기가 스크롤 피로를 줄인다.
3. "지금 플레이"의 카드 = 액션 카드 패턴
즉시 플레이 영역의 4개 카드는 다른 섹션과 형태가 살짝 다르다. 썸네일이 카드의 60% 이상을 차지하고, 제목·설명은 한 줄로 압축돼 있다. 이 변종을 액션 카드라고 부르면 디자인 시스템에 추가하기 쉽다.
| 카드 변종 | 주요 정보 | 클릭 의도 |
|---|---|---|
| 정보 카드 | 제목 + 설명 + 메타 | 읽기 |
| 미디어 카드 | 썸네일 + 제목 | 보기 |
| 액션 카드 | 썸네일 + 한 줄 + 즉시 실행 | 시작하기 |
세 변종을 같은 베이스 카드에서 슬롯만 바꿔 만든다. 디자인 시스템에 카드 컴포넌트를 50개 만들 필요가 없다. 베이스 1개 + 슬롯 정의 3~4개면 대부분의 콘텐츠 유형을 덮을 수 있다.
4. 뉴스 섹션의 1+3 레이아웃
테이블플레이 뉴스 섹션은 "주요 뉴스 1개 + 보조 뉴스 3개" 패턴이다. 1+3은 콘텐츠 사이트에서 자주 보이는 비율인데, 디자인 관점에서 잘 작동하는 이유가 있다.
- 정보 농도 균형: 메인 카드는 이미지·요약·날짜를 다 담을 수 있고, 보조 3개는 제목 위주로 압축된다.
- 인지 부하 분산: 같은 크기 4개를 펼쳐 두면 사용자는 "어디부터 봐야 하지?"를 매번 결정해야 한다. 1+3은 자동 동선을 만든다.
- 반응형 안정: 모바일에서 1개 메인 + 스크롤 3개로 자연스럽게 변환된다.
비슷한 변종으로 1+4, 2+4도 있다. 콘텐츠 양에 따라 고른다. 같은 페이지에 1+3 섹션을 두 번 반복하면 패턴 학습 효과가 생기고, 사용자는 두 번째 섹션을 훨씬 빨리 읽는다.
5. "주제별로 찾기" 부드러운 카테고리 노출
상단 주제별로 찾아보기 섹션은 강한 컬러 배경이나 큰 아이콘을 쓰지 않는다. 텍스트 링크와 가벼운 카드만으로 카테고리를 노출한다.
이 절제가 중요한 이유가 있다. 카테고리 메뉴를 강하게 디자인하면 사용자는 그 메뉴만 본다. 본문 콘텐츠로 자연스럽게 흐르지 않는다. 약한 카테고리 노출 + 강한 본문 콘텐츠 조합이 결과적으로 본문 전환을 더 만든다.
콘텐츠 사이트의 흔한 실수가 "카테고리 칩을 시각적 강조 1순위로 두는" 것이다. 그러면 사용자는 "내가 보려던 카테고리가 없네" 한 번에 이탈한다. 카테고리는 돕는 도구다. 메인 콘텐츠가 주인공이다.
6. "깊게 읽기" 블로그 섹션의 톤 분리
테이블플레이 메인의 블로그 섹션은 "깊게 읽기"라는 부제를 단다. 카드 4개의 제목 톤이 위쪽 뉴스·게임 카드와 다르다.
- 뉴스: "스포츠토토 프로토 운영 방식 개편 — 4월 21일부터..." (사실 보고)
- 게임 소개: "저장·진행이 안 될 때 포커 웹 게임에서 볼 것" (실용 가이드)
- 블로그: "스포츠토토 vs 카지노 — 환수율과 하우스 엣지 수치 비교" (분석)
같은 카드 컴포넌트를 쓰지만 제목 작성 톤이 섹션마다 다르다. 사용자는 컴포넌트가 아니라 톤으로 콘텐츠 유형을 판별한다. 디자이너가 제목 가이드라인까지 디자인 시스템에 포함시켜야 하는 이유다.
7. 정리 — 디자인 시스템에 추가할 5가지
| 패턴 | 적용 위치 |
|---|---|
| 베이스 카드 1개 + 슬롯 변종 3개 | 정보·미디어·액션 카드 |
| 톱 비대칭 카드 + 균등 그리드 | 메인 첫 화면 |
| 1+3 뉴스 레이아웃 | 시간성 콘텐츠 섹션 |
| 약한 카테고리 + 강한 본문 | 콘텐츠 사이트 메인 |
| 섹션별 제목 톤 가이드 | 디자인 시스템 문서 |
다섯 가지를 한 번에 도입할 필요는 없다. 메인 화면 한 섹션부터 적용하고, 사용자 행동(스크롤 깊이·클릭 분포)이 바뀌는지 측정한다. 측정 없이 디자인을 바꾸면 느낌만 남고 지표는 그대로다.
마무리
테이블플레이 메인 화면을 한 번 위에서 아래로 스크롤해 보길 권한다. 같은 카드인데 슬롯 구성이 어떻게 달라지는지, 비대칭 카드가 들어간 자리에서 어떻게 호흡이 끊기는지, 카테고리 영역이 얼마나 약하게 처리됐는지를 보면 카드 변종을 정리할 때 참고할 점이 많이 보인다.
콘텐츠 포털 디자인은 결국 어떤 카드를 어디에 둘지의 반복이다. 카드 변종을 줄이고 슬롯을 명확하게 정의하면 디자인 시스템도 가벼워지고, 새 콘텐츠 유형이 추가됐을 때 기존 슬롯 안에서 표현할 수 있게 된다. 이 점이 결과적으로 운영 비용을 가장 많이 줄인다.