같은 카드가 넓은 자리에선 멀쩡한데, 좁은 자리에 옮기자 글자가 우그러진다
작은 회사 웹사이트에도 '카드'는 많다. 상품 하나, 후기 한 건, 공지 한 줄을 담은 네모난 조각들이다. 이 카드를 본문 한복판의 넓은 자리에 놓으면 사진과 글이 나란히 잘 배열되는데, 똑같은 카드를 오른쪽 좁은 사이드바로 옮기는 순간 사진이 글을 밀어내고 제목이 두세 줄로 우그러진다. 분명 같은 카드인데 놓인 자리가 달라 모양이 무너진 것이다.
지금까지 우리는 이 문제를 화면 전체의 너비로만 풀어 왔다. '화면이 768px보다 좁으면 세로로 쌓아라' 같은 규칙 말이다. 문제는 화면이 넓어도 그 안의 사이드바는 여전히 좁다는 데 있다. 화면 크기와 요소가 실제로 놓인 자리의 크기는 다른 이야기인데, 우리는 오랫동안 그 둘을 같은 자로 재려 했다.
화면이 아니라 '제가 놓인 자리'를 기준으로 삼는다
컨테이너 쿼리(container query)는 이 자를 바꾼다. '화면이 몇 px이냐'가 아니라 '내가 담긴 상자가 몇 px이냐'를 기준으로 요소가 스스로 모양을 바꾸게 하는 방식이다. 카드를 감싸는 부모에게 "너는 크기를 재는 기준점이다"라고 한 줄 표시해 두면, 그 안의 카드는 화면이 아니라 부모의 폭을 보고 판단한다. 넓은 본문에 담기면 사진과 글을 나란히, 좁은 사이드바에 담기면 알아서 세로로 쌓는다. 카드를 고치는 사람은 '이 카드가 어디에 쓰일지'를 더는 일일이 셈하지 않아도 된다.
규칙은 간단하다. 기준이 될 부모에 container-type을 정해 두고, 그 안의 자식은 @container (min-width: 320px)처럼 '담긴 상자의 폭'을 조건으로 스타일을 건다. 화면 크기를 뜻하던 조건이 이제 '내 자리의 크기'를 뜻하게 되는 것이다.
한 번 만든 조각을, 어디에 놓아도 안심하고 재사용한다
이 변화가 작은 회사에 주는 이득은 실용적이다. 상품 카드, 후기 카드, 배너 한 조각을 딱 한 번만 잘 만들어 두면 메인 화면, 목록 페이지, 좁은 사이드바, 팝업 어디에 옮겨 붙여도 그 자리에 맞춰 알아서 정돈된다. 예전처럼 '사이드바용 카드'와 '본문용 카드'를 따로 만들어 두 벌을 관리하다 한쪽만 고치고 다른 쪽을 잊는 사고가 사라진다.
이미 대부분의 손님 브라우저가 이 기능을 안다
새 기능이라고 하면 '아직 일부만 되는 것 아니냐'는 걱정이 먼저 든다. 하지만 컨테이너 쿼리는 2023년 이후 크롬·사파리·엣지·파이어폭스 최신판이 모두 지원한다. 손님 대부분이 쓰는 요즘 브라우저에서는 문제없이 동작한다는 뜻이다. 아주 오래된 브라우저를 쓰는 손님을 위해서는 기본은 세로로 쌓아 두고, 넉넉한 자리에서만 가로로 펼치도록 설계하면 어느 쪽에서든 최소한 읽을 수 있는 화면이 남는다. 새 기능을 얹되 옛 손님을 버리지 않는, 익숙한 안전장치다.
결국 바뀌는 것은 '유지보수의 무게'다
컨테이너 쿼리가 바꾸는 건 화려한 화면이 아니라 고치는 일의 부담이다. 조각 하나가 어느 자리에 놓여도 스스로 정돈되면, 새 코너를 만들 때마다 레이아웃이 깨질까 마음 졸일 일이 줄고, 화면을 늘리고 새 페이지를 붙이는 일이 훨씬 가벼워진다. 작은 회사일수록 홈페이지에 계속 손이 갈 여유가 없기에, '한 번 잘 만들면 오래 버티는' 구조가 곧 비용을 아끼는 길이다.
CYAN 에이전시는 작은 회사의 웹사이트를 만들 때 눈에 보이는 화면만큼이나 나중에 고치기 쉬운 구조를 함께 설계한다. 지금 쓰는 홈페이지가 화면을 조금만 바꿔도 이곳저곳이 어긋난다면, 그 구조부터 다시 들여다볼 시점일지 모른다.
