[블로그 개편기 - 6] 컴포넌트가 아니라 실제 글로 발견한 레이아웃 문제

컴포넌트 미리보기에서 괜찮아 보이는 디자인도 실제 글을 열면 쉽게 무너진다. 긴 제목, 비율이 제각각인 사진, 표와 링크가 들어오는 순간 가짜 콘텐츠로는 보이지 않던 문제가 드러난다.

그래서 QA의 단위를 컴포넌트가 아니라 게시물로 바꿨다.

실제 긴 제목으로 검증한 모바일 게시물. 줄바꿈, 좌우 여백, 태그와 이미지가 차지하는 높이를 함께 확인한다.

하나의 컨테이너로 모든 것을 해결할 수 없다

본문은 너무 넓으면 읽기 어렵지만 큰 사진은 좁은 본문 폭에 갇히면 힘을 잃는다. 그 때문에 레이아웃을 네 개의 층으로 나눠 생각했다.

• Global Container: 사이트 전체 정렬 기준
• Article Container: 본문을 읽기 좋은 폭
• Wide Container: 표나 이미지 그리드처럼 여유가 필요한 콘텐츠
• Full-bleed Container: 의도적으로 화면 폭을 사용하는 장면

모든 요소를 같은 max-width에 넣는 대신 콘텐츠의 역할에 따라 폭을 선택한다.

사진은 크기보다 리듬

주짓수 글을 모바일에서 보니 사진 한 장이 화면 한 페이지보다 크게 보이기도 했다. 사진 중심 블로그라고 모든 이미지를 최대로 키우는 것이 정답은 아니었다.

원본 비율을 유지하면서 과도한 화면 높이를 제한하고, object-fit과 object-position을 조절했다. Gallery와 일반 Journal의 이미지 규칙도 분리했다. 목적은 사진을 작게 만드는 것이 아니라 글과 사진이 번갈아 호흡하게 만드는 것이다.

이미지에는 고유 너비와 높이, aspect-ratio, 반응형 크기, lazy loading을 적용해 로딩 중 레이아웃 이동도 줄였다. 디자인과 LCP, CLS는 별개의 문제가 아니었다.

표와 링크도 실제 기능이다

데스크톱의 표를 그대로 줄이면 모바일에서 셀이 지나치게 좁아지고 문장이 단어 단위로 끊긴다. 필요한 경우 가로 스크롤을 허용하더라도 헤더와 데이터의 관계가 유지되어야 한다.

링크도 보인다는 사실만으로 충분하지 않았다. 내부 링크, 외부 링크, 이전·다음 글 연결을 직접 열어 죽은 경로가 없는지 확인했다. 화려하지 않은 요소일수록 운영 중 자주 쓰이므로 실제 사용 가능성이 중요하다.

이 과정을 거치며 완료 기준이 “렌더링된다”에서 “실제 콘텐츠를 읽을 때 리듬이 유지된다”로 바뀌었다.