이번 글에서는 신규 페이지 작업 중 알게된, 간단하지만 유용한 몇 가지 CSS 속성들을 정리해보려고 한다.

dvh

모바일 디바이스의 뷰포트는 키패드, 스크롤 동작에 따라 노출 여부가 변하는 주소창이나 툴바 등의 영향을 받는다. vh/vw는 뷰포트 로드 시의 초기 크기를 기준으로 하며 이런 변화를 감지하지 못해 모바일 브라우저 UI에 페이지 컨텐츠가 가려지는 어글리한 UX를 만들기도 한다.

이에 대응하기 위한 단위가 dvh/dvw이다. 모바일 브라우저의 동적 UI를 반영한 동적 뷰포트의 크기를 기준으로 하기 때문에 모웹에서 더 좋은 경험을 제공한다.

height: calc(100dvh - 70px);

참고로 가장 큰 뷰포트 크기에 대한 단위인 lvh/lvw와 가장 작은 뷰포트 크기에 대한 단위 svh/svw도 있다고 한다.

• https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units#길이

• https://medium.com/@sharadbarad/understanding-viewport-height-units-vh-svh-lvh-and-dvh-d4ab8225e47e

window.visualViewport

CSS는 아니지만

하지만 dvh로 높이 단위를 대체해도 일부 aos 환경에서 동적 뷰포트가 기대한대로 계산되지 않았다. 키패드 노출 여부에 따른 재계산이 이루어지지 않는 듯 했다. 마크업 레이아웃 등이 원인이었을 수 있지만 배포일이 얼마 남지 않았던 상황이라 스크립트 대응이 필요했다.

스크립트 레벨에서 동적 뷰포트에 대한 처리가 필요한 경우 Visual Viewport API를 사용하면 된다. window.visualViewport를 통해 접근할 수 있으며 height, width를 포함한 값을 제공한다. 또 resize, scroll, 그리고 scrollend 이벤트를 받을 수 있다.

window.visualViewport.addEventListener('resize', () => {});

나는 컨텐츠 영역의 높이 조정이 필요한 경우 핸들러 내부에서 window.visualViewport.height 값을 사용해 처리했다. dvh로 해결이 되었으면 더 아름다웠을텐데 클라이언트 환경 대응은 쉽지 않은 것 같다 ...🫨

overscroll-behavior

스크롤 가능한 영역들이 중첩되어 있는 경우 스크롤 끝에 도달하면 브라우저의 기본 overscroll 동작—바운스 이펙트 또는 스크롤 이벤트가 외부 영역으로 전달되는 스크롤 체이닝 현상—이 발생한다. 레이어로 떠있는 영역에서의 스크롤이 바닥 페이지를 스크롤 하는건 일반적으로 사용자가 원하는 동작이 아닐 것이다.

overscroll-behavior 속성을 사용하면 이런 경험을 개선할 수 있다. 스크롤 가능한 영역에서만 유효하며 원하는 동작에 따라 선택해서 사용하면 된다.

overscroll-behavior: auto

기본값으로 브라우저의 overscroll 동작을 허용한다.

overscroll-behavior: contain;

바운스 이펙트의 적용 범위가 해당 영역 내부로 제한되고 스크롤 체이닝은 발생하지 않는다. 이 속성을 설정한 영역에서는 pull-to-refresh 또는 가로 스와이프 등의 native navigation이 일부 제한된다.

overscroll-behavior: none;

모든 overscroll 동작이 제한된다.

touch-action

기본적으로 터치스크린 사용자는 스크롤, 패닝(panning, 터치 드래그 동작), 핀치 줌, 더블탭 확대 등 다양한 제스처를 사용할 수 있지만 영역에 따라 일부 동작을 제한하는 것이 쾌적한 경우가 있다. 캐러셀 UI를 빠르게 스와이프 하거나 버튼을 빠르게 두번 클릭했을 때 페이지가 확대된다면 불편한 경험이 될 것이다.

touch-action은 터치스크린 환경의 다양한 제스처에 요소가 어떻게 반응할지 정의하는 속성이다. 값은 아래처럼 설정이 가능하다.

• 아래 키워드 중 하나

  • auto

    • 브라우저가 모든 터치 제스처를 핸들링 하도록 허용한다.

  • none

    • 모든 터치 제스처를 비허용한다.

  • manipulation

    • 패닝과 핀치 줌 제스처를 허용하고 더블탭 확대 등의 비표준 제스처는 제한한다.

    • touch-action: pan-x pan-y pinch-zoom 과 동일하다.

• 아래의 키워드 조합 중 하나

  • pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down

    • x, y, left, right 등의 방향으로 진행되는 한 손가락 패닝을 허용한다.

  • pinch-zoom (optional)

    • 여러 손가락 패닝과 확대를 허용한다. pan-* 속성과 함께 사용될 수 있다.

이렇게 기억해두면 앞으로 또 쓸 일이 있겠다 싶은 몇 가지 CSS 속성들을 정리해봤다. 최근 팀원이 소개해주신 content-visibility 속성도 렌더링 성능을 개선할 수 있다는 점에서 인상적이었는데, 상황에 맞게 HTML과 CSS를 활용하는게 스크립트 복잡도를 높이지 않고도 기능 디테일을 잡을 수 있는 방법이라는걸 늘 생각해야겠다.