본문으로 바로가기
아틀리에ATELIER

웹에서 편집 디자인을 흉내 내지 않는 방법

인쇄의 레이아웃을 그대로 옮기면 읽기가 불편해집니다. 화면의 조건에 맞춘 편집.

2026.08.21 발행2026.10.09 고침 수정읽는 시간 5분
SHARE

잡지 같은 웹사이트를 만들어 달라는 의뢰를 자주 받습니다. 잡지의 펼침면을 그대로 화면에 옮기면 처음엔 멋있어 보이지만, 스크롤을 두세 번 내리면 어디를 읽어야 할지 헷갈립니다.

펼침면이 없습니다

잡지는 두 쪽을 한 번에 봅니다. 화면은 위에서 아래로 한 줄씩 지나갑니다. 왼쪽 쪽의 사진과 오른쪽 쪽의 글이 만들던 긴장은 웹에서 위아래 순서로 바뀌어야 합니다. 저희는 펼침면 대신 «장면»을 단위로 생각합니다.

본문 안인아티클 · 높이 가변

애드센스 광고 자리 - 승인을 받으시면 이 자리에 광고를 넣으실 수 있습니다. (실제 애드센스 광고입니다)

  • 한 장면은 화면 한 높이 안쪽
  • 장면마다 주인공은 하나, 사진이거나 문장이거나
  • 다음 장면이 살짝 보이게 아래 끝을 남김

단을 줄입니다

인쇄에서 흔한 3단 본문은 웹에서 쓰지 않습니다. 한 단이 끝나면 위로 다시 올라가야 하기 때문입니다. 본문은 한 단, 한 줄에 35자에서 45자 사이로 둡니다. 편집의 느낌은 단 대신 여백과 캡션, 인용의 크기로 냅니다.

화면에서의 편집은 배치보다 순서를 설계하는 일입니다.

남겨 두는 잡지의 습관

큰 숫자로 시작하는 목차, 본문보다 작고 단단한 캡션, 페이지를 넘기듯 크게 바뀌는 섹션 배경. 이 세 가지는 화면에서도 잘 작동합니다. 흉내 내는 대신 화면에 맞게 옮겨 오는 것들입니다.

글 끝디스플레이 · 336×280 대역

애드센스 광고 자리 - 승인을 받으시면 이 자리에 광고를 넣으실 수 있습니다. (실제 애드센스 광고입니다)

SHARE

아틀리에

이름을 짓고 형태를 정하는 과정, 만난 사람과 읽은 책을 기록합니다. 일하며 알게 된 것을 천천히 정리해 둡니다.

함께 읽을 글

댓글 0

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

댓글 남기기