웹 레이아웃 디자인: 인쇄와 다른 매체

웹은 크기가 정해지지 않은 매체다

인쇄 디자인과 웹 디자인은 선·도형·색·균형·대비·여백·게슈탈트 같은 기본기가 같다. 좋은 것과 나쁜 것을 알아보는 눈, 좋은 결과를 위한 인내가 둘 다 핵심이다. 다른 것은 매체의 성질이다.

"72ppi 웹 해상도"는 과거의 관행이다. 지금은 CSS 픽셀과 기기 픽셀 비율을 구분하고, 고밀도 화면에는 벡터나 여러 해상도 이미지를 준다. 자세한 내용은 반응형 디자인과 다국어 타이포그래피와 반응형 이미지: srcset·sizes와 picture에 있다.

인쇄의 스타일 개념은 CSS와 닮았다

InDesign 같은 편집 도구의 스타일 체계는 CSS로 거의 그대로 옮겨진다. 편집 디자이너가 웹으로 넘어올 때 가장 쉽게 이어지는 부분이다.

그리드 시스템

편집 디자인의 그리드 시스템도 웹으로 넘어왔다. 페이지 전체의 배치는 칼럼 그리드(보통 12칼럼)로, 요소 하나하나의 크기와 간격은 8의 배수로 맞추는 8pt 그리드로 정한다. 용어와 배치 조합, 하드·소프트 방식, 수직 리듬과 코드 구현은 레이아웃 그리드와 간격 체계에 있다.

고정폭에서 반응형까지

이 절과 「매크로 레이아웃과 마이크로 레이아웃」 절은 web.dev 「Learn Responsive Design」 강좌의 Introduction·Macro layouts·Micro layouts 모듈을 바탕으로 보강했다.

화면 폭을 다루는 방식은 「한 폭을 정해 둔다」에서 「폭을 모른다고 인정한다」로 옮겨 왔다.

적응형이 「미디어 쿼리 + 고정폭」이라면 반응형은 「미디어 쿼리 + 리퀴드」다. 지금의 반응형은 화면 폭을 넘어 사용자 설정·입력 장치·컴포넌트가 놓인 공간에도 반응한다. 구현은 반응형 디자인과 다국어 타이포그래피에 있다.

본질의 웹 디자인 (Intrinsic Web Design)

본질의 웹 디자인은 젠 시먼스(Jen Simmons)가 2018년에 붙인 이름으로, CSS에 내장된(intrinsic) 레이아웃 기능만으로 콘텐츠에 맞게 늘고 줄어드는 레이아웃을 만드는 방식이다.

flowchart LR
  table["테이블 레이아웃"] --> hack["float·position 편법"]
  hack --> fw["편법을 묶은 CSS 프레임워크·JS 그리드"]
  fw --> modern["플렉스박스 + CSS 그리드 + 컨테이너 쿼리<br/>(CSS가 직접 레이아웃을 이해)"]

과거에는 원하는 배치를 위해 float와 절대 위치를 섞는 편법, 그리고 그 편법을 모은 프레임워크가 필요했다. 지금은 CSS 자체가 레이아웃 도구다.

반응형 웹 디자인이 "화면 크기마다 브레이크포인트로 바꾼다"였다면, 본질의 웹 디자인은 "콘텐츠와 공간에 맞게 스스로 크기를 정하게 한다"에 가깝다. 고정 칼럼 수와 유동 칼럼, 고정 크기와 비율을 한 페이지에서 섞는다. 그래서 레이아웃 아이디어가 다시 잡지처럼 다양해질 수 있다.

디자이너가 코드를 쓰지 않더라도 이 기능들로 무엇이 가능한지 알면 시안이 달라진다. 구현은 CSS 그리드 레이아웃과 Float와 Flexbox 레이아웃에 있다.

매크로 레이아웃과 마이크로 레이아웃

레이아웃은 두 층으로 나눠 설계한다.

설계 순서:

1. 레이아웃 전에 콘텐츠의 순서부터 맞춘다. 아무 레이아웃도 주지 않은 한 열 상태가 곧 작은 화면이 받는 모습이고, 키보드·스크린 리더가 따라가는 순서다.
2. 화면이 넓어지면 매크로 레이아웃을 덧붙인다. 페이지 단위의 열 나눔은 그리드가 컨테이너 한 곳에서 표현할 수 있어 플렉스보다 짧다.
3. 컴포넌트는 놓일 자리를 모른다고 가정하고, 부모 폭에 반응하게 만든다.
4. 브레이크포인트가 계속 늘어나면 미디어 쿼리 대신 「카드는 15em보다 좁아지지 않게, 남는 만큼 채우게」 같은 규칙을 주고 계산을 브라우저에 맡긴다.

컨테이너 쿼리와 「미디어 쿼리 없는 레이아웃」의 코드는 반응형 디자인과 다국어 타이포그래피에, 좁은 화면에서 모습이 크게 달라지는 내비게이션·캐러셀·표는 반응형 UI 패턴에 있다.

이미지 위에 텍스트 올리기

큰 배경 이미지와 짧은 문구 조합은 랜딩 페이지의 단골 레이아웃이다. 두 가지를 먼저 확인한다.

• 용량. 큰 이미지는 로딩을 늦추고 이탈을 늘린다. 장식용 배경이라면 정보 가치에 비해 비싼지 따져 본다. 어두운 영역, 흐림(아웃포커스), 단색 하늘·물처럼 디테일이 적은 사진은 압축이 잘되고 텍스트 놓을 자리도 넉넉하다.
• 구체성. 모호한 분위기 사진보다 메시지를 바로 전하는 구체적인 이미지를 고른다. 이미지의 분위기와 문구의 어조가 맞아야 한다.

그다음 세 가지로 텍스트를 읽히게 한다.

.hero {
  background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .45)),
              url(hero.avif) center / cover;
  color: #fff;
}

반응형에서는 화면 비율이 바뀌면 이미지가 잘리는 위치도 바뀐다. object-position이나 <picture>의 아트 디렉션으로 텍스트 자리와 초점이 겹치지 않게 한다.

정리

• 인쇄와 웹은 기본기가 같고 매체가 다르다. 웹은 크기와 결과를 확정할 수 없는 매체다.
• 편집 도구의 단락·문자 스타일은 CSS의 블록·인라인 규칙으로 이어진다.
• 화면 폭 대응은 고정폭 → 리퀴드 → 적응형 → 반응형으로 왔다. 반응형 = 유동 그리드 + 유동 미디어 + 미디어 쿼리.
• 본질의 웹 디자인은 플렉스박스·그리드·컨테이너 쿼리로 콘텐츠에 맞게 스스로 크기를 정하는 레이아웃이다.
• 페이지 단위(매크로)는 뷰포트에, 컴포넌트 단위(마이크로)는 부모 공간에 반응하게 나눠 설계한다.
• 이미지 위 텍스트는 대비, 위치, 심도로 읽히게 하고, 이미지 용량을 함께 따진다.

관련 노트: 반응형 디자인과 다국어 타이포그래피, CSS 그리드 레이아웃, Float와 Flexbox 레이아웃, 색과 움직임의 접근성, 발표·포트폴리오 디자인 팁, 반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표, UI 밀도: 시각·정보·디자인·시간·가치