컨테이너 최대 너비

정의

컨테이너 최대 너비는 화면이 아무리 넓어져도 콘텐츠가 일정 폭 이상으로 늘어나지 않게 묶어 두는 규칙입니다. 넓은 모니터에서 본문이 화면 끝까지 꽉 차게 펼쳐지면 한 줄이 지나치게 길어져, 눈이 다음 줄의 시작점을 찾기 어려워집니다. max-width로 상한을 걸어 두면 화면이 커져도 콘텐츠는 편안한 폭을 유지하고, 남는 공간은 좌우 여백으로 자연스럽게 흘러갑니다. 여기에 좌우 마진을 auto로 두면 콘텐츠가 화면 가운데로 정렬됩니다. 화면을 가득 채우는 것과 읽기 좋게 만드는 것은 서로 다른 목표라는 점을 이해하는 것이 이 개념의 핵심입니다.

왜 중요한가

사람의 눈은 한 줄이 너무 길면 쉽게 지칩니다. 줄 끝까지 읽고 나서 정확히 다음 줄 맨 앞으로 시선을 되돌리는 일이 어려워지기 때문입니다. 그래서 본문의 폭을 적절히 제한하면 읽는 속도와 집중력이 눈에 띄게 좋아집니다. 반대로 폭 제한이 없으면 화면이 클수록 오히려 가독성이 떨어지는 역설이 생깁니다. 컨테이너 너비를 잡아 두면 어떤 화면 크기에서도 콘텐츠가 일관된 리듬으로 보이고, 좌우 여백이 자연스러운 여유를 만들어 화면 전체가 정돈된 인상을 줍니다. 특히 요즘처럼 화면 크기가 제각각인 환경에서는 폭을 스스로 제어하는 이 규칙 하나가 안정적인 레이아웃의 바탕이 됩니다.

흔한 실수

• 본문에도 페이지 전체와 같은 넓은 폭을 그대로 적용하는 경우입니다. 배경이나 헤더는 화면 전체를 써도 좋지만, 읽어야 하는 글은 반드시 좁은 폭 안에 두어야 합니다. 영역마다 필요한 폭이 다르다는 점을 구분하지 않으면 큰 화면에서 글이 읽기 힘들어집니다.
• 최대 너비만 걸고 좌우 여백을 잊는 것입니다. 폭을 제한해도 화면이 컨테이너보다 좁아지면 글자가 가장자리에 딱 붙어 답답해 보이므로, 좌우에 최소한의 안쪽 여백을 함께 두어야 어떤 화면에서도 안정적으로 보입니다.
• 고정된 픽셀 값 하나만 쓰고 화면 크기에 따른 변화를 고려하지 않는 것입니다. 아주 작은 화면에서는 최대 너비보다 화면 폭이 더 좁으므로, 폭이 화면을 넘지 않도록 함께 다뤄야 합니다.

실무 팁

• 본문 한 줄은 대략 45~75자가 읽기 편하다고 알려져 있어, max-width를 640~760px 정도(약 60~75ch)로 두는 경우가 많습니다. 글자 폭 단위인 ch를 쓰면 폰트 크기가 바뀌어도 한 줄에 담기는 글자 수가 안정적으로 유지되어 편리합니다.
• 본문용 좁은 컨테이너와 헤더나 배너용 넓은 컨테이너를 미리 몇 가지로 정해 두세요. 상황마다 폭을 새로 고민하지 않아도 되고, 화면 전체의 폭 리듬이 일관되게 유지됩니다.
• 너비는 max-width로 상한만 정하고 기본 폭은 100%로 두세요. 그러면 큰 화면에서는 상한에서 멈추고 작은 화면에서는 화면에 맞게 줄어들어, 별도 처리 없이도 여러 화면 크기에 자연스럽게 대응됩니다.

관련 개념