레이아웃 & 그리드

그리드 레이아웃 너비 정수 요청

피그마 오픈카톡방2026. 3. 7.

질문사항

3열 그리드 레이아웃에서 각 칸의 너비가 소수점으로 나올 수밖에 없는 상황인데, 소수점 없이 정수 값으로 맞춰달라는 요청을 받았습니다. 이러한 요구사항이 일반적인가요?

답변

네, 그러한 요구사항은 특정 상황에서 발생할 수 있습니다.

해당 영역이 이미지 배너나 어드민(관리자 페이지)에서 관리되는 운영 영역일 경우, 고객사의 운영 관리 편의성을 위해 너비 값을 소수점 없이 고정값으로 전달하는 경우가 있습니다. 예를 들어, 이미지를 업로드할 때 특정 픽셀 값으로 고정된 너비를 요구하거나, 개발 시 정수 단위의 계산이 더 용이하다고 판단될 때 이러한 요청이 있을 수 있습니다.

이러한 경우, 디자인의 유연성보다는 운영의 효율성이나 개발의 편의성이 우선시될 수 있습니다.

해결 방안:

요구사항의 배경 확인: 해당 요청이 왜 나왔는지 (예: 개발 편의성, 이미지 관리, 특정 디바이스 대응 등) 정확한 배경을 개발자나 기획자에게 확인하는 것이 중요합니다.

대안 제시: 만약 소수점 너비가 디자인적으로 필수적이라면, `calc()` 함수를 사용하거나 `flex-grow`와 같은 CSS 속성을 활용하여 소수점 너비를 유지하면서도 개발 편의성을 높일 수 있는 방법을 개발자와 논의해 볼 수 있습니다.

가장자리 여백 조정: 전체 컨테이너 너비나 컬럼 간의 `gap` 값을 조정하여 각 컬럼의 너비가 정수가 되도록 맞추는 방법도 있습니다.

선배 디자이너/팀 리더와 상의: 팀 내 선배 디자이너나 리더에게 해당 상황을 공유하고, 팀의 일반적인 정책이나 과거 사례를 참고하여 최적의 해결책을 찾는 것이 좋습니다.