디자인 아틀라스
EN
▦ 레이아웃

풀 블리드

Full bleed

본문은 가운데 좁은 폭으로 제한하면서, 특정 이미지만 화면 양끝까지 꽉 채우는 기법. 인쇄에서 종이 끝까지 잉크가 "번지는(bleed)" 것에서 이름을 땄습니다.

다른 이름: Edge-to-edgeBleed image
···
html
<div class="page">
  <i class="ln l1"></i><i class="ln l2"></i><i class="ln l3"></i>
  <div class="bleed" id="bleed"></div>
  <i class="ln l1"></i><i class="ln l2"></i>
</div>
css
.page{width:100%;height:100%;display:grid;grid-template-columns:1fr min(70%,340px) 1fr;row-gap:10px;align-content:center}
.page>.ln{grid-column:2}
.ln{display:block;height:8px;border-radius:3px;background:var(--line)}
.l1{width:100%}.l2{width:82%}.l3{width:60%}
.bleed{grid-column:1/-1;height:min(60px,20vmin);border-radius:4px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--accent),var(--accent-3))}
.bleed::after{content:'';position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(360%)}
}

본문은 가독성을 위해 보통 60~75자 폭(약 600~700px)으로 제한합니다. 그런데 이미지까지 그 좁은 폭에 갇히면 답답해 보입니다. 풀 블리드는 텍스트 폭은 그대로 두고 이미지만 뷰포트 끝까지 넓혀서 리듬을 만듭니다.

가장 깔끔한 구현은 부모를 `display: grid; grid-template-columns: 1fr min(680px, 90%) 1fr`로 만들고, 본문은 가운데 칼럼에, 풀 블리드 이미지는 `grid-column: 1 / -1`로 양 끝 칼럼까지 차지하게 하는 것입니다. 오래된 방식인 `margin-left: calc(-50vw + 50%)`도 같은 효과를 내지만 스크롤바 폭 때문에 미세한 오차가 생길 수 있습니다.

이미지뿐 아니라 인용구, 배경색 있는 섹션에도 같은 기법을 씁니다. 핵심은 "본문의 좁은 리듬"과 "이미지의 넓은 순간"이 번갈아 나오면서 스크롤에 강약이 생긴다는 것입니다.

언제 쓰나

블로그·기사처럼 읽는 본문 사이에 시각적 숨표가 필요할 때. 앱의 기능 화면처럼 여백 자체가 기능(터치 영역 등)인 곳에는 어울리지 않습니다.