비대칭 레이아웃

Asymmetric layout

좌우·상하를 똑같이 맞추지 않고 일부러 무게를 한쪽으로 쏠리게 배치하는 구성. 정적인 대칭 대신 긴장감과 시선의 흐름을 만듭니다.

다른 이름: Off-balance layout

···

html

<div class="comp" id="comp">
  <div class="b big"></div>
  <div class="b med"></div>
  <div class="b small"></div>
  <div class="b wide"></div>
</div>

css

.comp{position:relative;width:min(92%,460px);height:min(88%,260px)}
.b{position:absolute;border-radius:10px;transition:transform 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.big{width:46%;height:70%;left:4%;top:6%;background:var(--accent)}
.med{width:26%;height:38%;right:8%;top:10%;background:var(--accent-2)}
.small{width:16%;height:16%;right:30%;bottom:10%;background:var(--accent-3)}
.wide{width:34%;height:22%;left:8%;bottom:6%;background:var(--surface);border:1px solid var(--line)}
.comp.shift .big{transform:translate(3%,-2%) rotate(-1deg)}
.comp.shift .med{transform:translate(-4%,3%)}
.comp.shift .small{transform:translate(-6%,-4%) scale(1.1)}
.comp.shift .wide{transform:translate(4%,-3%)}

const comp = document.getElementById('comp');
setInterval(() => comp.classList.toggle('shift'), 1800);

대칭 레이아웃은 안정적이지만 "이미 다 봤다"는 느낌을 빨리 줍니다. 비대칭은 큰 요소와 작은 요소, 넓은 여백과 좁은 여백을 의도적으로 섞어서 시선이 한 지점에서 다른 지점으로 움직이게 만듭니다 — 잡지 편집 디자인에서 오래 써온 기법입니다.

CSS Grid의 `grid-template-columns`에 균등하지 않은 값(예: `2fr 1fr 1.4fr`)을 주거나, 요소마다 `grid-row`/`grid-column` span을 다르게 줘서 만듭니다. 핵심은 "무작위"가 아니라 "의도된 불균형"이라는 것 — 균형은 시각적 무게(크기, 색, 대비)의 총합으로 맞추되 좌우 대칭만 깹니다.

과하게 쓰면 그냥 어수선해 보입니다. 페이지 전체보다 히어로 섹션 하나, 편집 페이지 한 블록처럼 국소적으로 쓰는 게 실패 확률이 낮습니다.