진정한 반응형 디자인을 위한 CSS 속성들

하드웨어 요소가 가리는 것 방지

iOS 기기에는 노치, 홈 인디케이터, 둥근 모서리 등 하드웨어로 인해 스크린 전체에 페이지를 렌더링하려고 한다면 컨텐츠가 하드웨어 요소들에 가려질 수 있다. 이를 해결하기 위해서 나온 것이 safe-area-inset이다. 이 속성을 사용하면 하드웨어 UI 요소를 피해서 안전 영역에만 페이지를 렌더링할 수 있다. caniuse에 따르면 전세계 95%의 기기에서 사용할 수 있기에 프로덕션에서도 안정적으로 사용할 수 있다.

다음과 같이 body의 padding 값으로 safe-area-inset을 설정한다면 해당 부분에 컨텐츠가 렌더링되는 것을 피하고 공백으로 채워넣을 수 있다.

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right); 
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

소프트웨어 요소가 페이지를 가리는 것 방지

모바일 기기에서는 주소창(address bar)가 사용자 상호작용에 따라 지속적으로 보였다 사라졌다를 반복한다. 문제는 기존 단위 'vh'는 이 유동적으로 변화하는 뷰포트 높이를 반영하지 못한다는 것이다. 이를 대응하기 위해서 'dvh', 'svh', 'lvh'가 등장하였다. 'dvh'는 주소창이 보일 때 / 사라질 때 유동적으로 사이즈가 변하는 뷰포트 높이 단위이다. 'svh'는 뷰포트의 높이가 최소가 될 때, 즉 주소창이 보일 때의 뷰포트 높이 단위이다. 'lvh'는 주소창이 보이지 않을 때의 높이 단위이다. 주소창에 의해 UI가 숨겨지는 것을 방지하기 위해서는 전체 레이아웃에 100dvh를 적용하면 된다.

caniuse에 따르면 2025년 9월 기준으로 92%의 사용자가 dvh를 사용하고 있다. 다양한 환경에서 유저가 유입될 때에는 사용할 때에는 반드시 fallback mechanism을 마련할 필요성이 있어 보인다.

body {
  height: 100dvh;
}

이렇게 설정한다면 페이지의 높이를 변화하는 뷰포트의 높이와 동일하게 맞출 수 있다. 스크롤 없는 풀스크린 페이지를 만들 때 유용하다.

em, rem 속성에 대한 개인적인 견해

예전에 개인 프로젝트를 진행할 때는 em과 rem을 최대한 사용해서 멋진 반응형을 구현하려고 애썼다. 실무에서는 이런 단위들을 활용하여 세밀한 반응형 디자인 제어를 할 것이라고 생각했기 때문이다. 막상 요즘에는 웬만한 상황에서는 잘 안 쓰게 되는 거 같다. media query로 mobile, tablet, desktop으로 나누거나 mobile, desktop으로 나눠서 UI를 만들 게 될 때 굳이 em이나 rem을 사용해서 세밀하게 컨트롤하지 않아도 px 단위로 디자인 표현이 충분이 되는 경우가 대부분이었다. 디자인 QA를 진행할 때도 px 단위인 경우 잘못 적용된 길이 단위를 확인하기가 더 쉬웠던 거 같다. 실용주의적 관점에서 아직도 px이 대부분의 상황에서 적절하다. 만약 em, rem을 사용하여 효과적으로 반응형 디자인을 구현한 경험이 있다면 독자께서 그 이야기를 들려줬으면 좋겠다.

Flex로 flex하기

em과 rem 대신에 내가 선택하는 일반적인 속성은 flex이다. 반응형을 구현하면서 화면이 줄어들 때 어떤 요소가 줄어드는지 설정해야되는 경우가 많았는데 flex item에 flex 속성을 적용하여 대부분 해결하였다. 예를 들어 텍스트와 이미지가 수평으로 배열되어 있는데 여백이 없을 때 화면 너비가 줄어드는 상황이라고 하자. 이 경우에는 이미지를 줄이는 것이 자연스러울 것이다. 이를 구현하기 위해 텍스트가 들어있는 flex item의 flex 속성에 1을 적용하고, 이미지를 포함하는 flex item의 flex 속성에 auto를 적용하여 쉽게 문제를 해결하였다.