유동 크기

정의

유동 크기는 화면 너비가 달라질 때 글자 크기나 여백 같은 값이 계단이 아니라 경사로처럼 매끄럽게 이어지며 변하는 방식입니다. 브레이크포인트가 정해진 지점에서 툭툭 배치를 갈아 끼운다면, 유동 크기는 그 지점들 사이의 빈 구간을 물 흐르듯 채워 줍니다. CSS의 clamp 함수가 대표적인 도구로, 최솟값과 최댓값 사이에서 화면 너비에 비례하는 값을 자동으로 계산합니다. 덕분에 제목 하나가 좁은 화면에서 적당히 작고 넓은 화면에서 시원하게 커지도록, 중간 단계를 일일이 지정하지 않고도 자연스럽게 이어지게 만들 수 있습니다.

왜 중요한가

브레이크포인트만 쓰면 경계를 넘는 순간 글자나 여백이 갑자기 커지거나 작아져 시선이 흔들립니다. 특히 경계 바로 앞뒤의 애매한 너비에서는 값이 어중간하게 남아 화면이 비어 보이거나 답답해 보이기 쉽습니다. 유동 크기는 이 중간 구간까지 빠짐없이 다뤄, 어떤 너비에서든 비율이 무너지지 않는 화면을 만들어 줍니다. 또한 너비에 맞춰 값이 알아서 조정되므로 경계마다 별도의 값을 반복해 적는 수고가 줄어, 코드가 짧아지고 유지보수도 한결 가벼워집니다. 사용자 입장에서는 화면 크기와 상관없이 제목과 본문, 여백의 균형이 늘 비슷하게 유지되므로 어느 기기로 들어와도 정성껏 다듬어진 화면이라는 인상을 받습니다. 이 매끄러움은 작지만 누적되어, 서비스 전체의 완성도에 대한 신뢰로 이어집니다.

흔한 실수

• 최솟값과 최댓값 없이 화면에 완전히 비례하는 값만 쓰는 것입니다. 상한이 없으면 큰 모니터에서 제목이 지나치게 거대해지고, 하한이 없으면 작은 화면에서 글자가 읽기 힘들 만큼 쪼그라듭니다. clamp의 양 끝값은 반드시 지정해야 합니다.
• 본문 글자까지 무리하게 유동으로 만드는 것입니다. 읽기 편한 본문 크기는 폭이 좁으므로, 유동 폭을 넓게 잡으면 오히려 어떤 너비에서는 너무 작아져 가독성이 떨어집니다. 제목이나 여백처럼 변화 폭이 큰 값에 먼저 적용하는 편이 안전합니다.
• 가운데 유동값을 눈대중으로만 정하고 실제 화면에서 확인하지 않는 것입니다. 계산상 그럴듯해 보여도 특정 너비에서 값이 최솟값에 계속 붙어 있거나 너무 빨리 최댓값에 닿을 수 있으니, 폭을 넓게 좁게 바꿔 가며 변화를 직접 눈으로 봐야 합니다.

실무 팁

• clamp의 세 값은 최소, 유동값, 최대 순서로 넣고, 최솟값과 최댓값을 먼저 정해 너무 작아지거나 커지는 범위를 확실히 막으세요. 안전한 상한과 하한을 잡아 두면 가운데 유동값이 조금 과감해도 화면이 무너지지 않습니다.
• 유동 크기와 브레이크포인트는 경쟁이 아니라 짝입니다. 배치의 큰 틀은 브레이크포인트로 바꾸고, 그 안의 글자와 여백은 유동 크기로 다듬으면 두 기법의 장점이 겹쳐 모든 너비에서 매끄러운 화면이 됩니다.
• 유동값에 뷰포트 단위만 쓰기보다 고정 크기와 화면 비례분을 함께 더해 쓰면 변화가 한결 안정적입니다. 이렇게 하면 아주 좁은 화면에서도 값이 갑자기 무너지지 않고, 너비에 따라 완만하게 이어지는 곡선을 얻을 수 있습니다.

관련 개념