디자인 아틀라스
EN
▞ 패턴·텍스타일

체커보드

Checkerboard

두 색이 정사각 격자로 정확히 번갈아 채워지는 가장 단순한 2색 테셀레이션.

다른 이름: 바둑판무늬체크무늬
···
html
<div class="cb"></div><span class="tag">checkerboard</span>
css
.cb{position:absolute;inset:0;background-color:#fff;
  background-image:conic-gradient(#111 90deg,transparent 90deg 180deg,#111 180deg 270deg,transparent 270deg);
  background-size:32px 32px;
  animation:pan 8s linear infinite}
@keyframes pan{to{background-position:32px 32px}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.78);
  color:#fff;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

체스·체커 같은 보드게임판으로 수천 년 쓰인 무늬이고, 중세 교회 바닥(코스마테스크 양식)과 문장학의 체키(checky) 문양에도 등장합니다. 20세기 후반에는 스케이트보드 문화(반스)와 자메이카발 스카(ska)/투톤(2 Tone) 음악 신의 시각 정체성으로 다시 유행했습니다.

구조는 정사각형 하나 걸러 색을 바꾸는 것뿐이지만, 이 단순함이 오히려 다른 용도로도 쓰입니다 — 이미지 편집 프로그램에서 "알파 채널(투명)"을 표시할 때 쓰는 회백색 체커보드가 대표적입니다. 투명함을 색으로 표현할 수 없으니, "배경이 없다"는 사실 자체를 이 무늬로 약속해 둔 것입니다.

CSS 로는 45도 linear-gradient 를 25%/75% 지점에서 끊은 레이어 두 장을, 정확히 타일 절반만큼 어긋나게 겹치면 됩니다. 하운드투스가 이 위에 대각선 레이어를 두 장 더 얹은 확장판이라고 보면 관계가 이해하기 쉽습니다.

언제 쓰나

레이싱/스케이트 무드, 투명도 표시 UI, 플로어링 목업에 씁니다. 타일이 작을수록 원거리에서 회색으로 뭉쳐 보입니다.