모바일에서 토너먼트 일정 안 보일 때

모바일 브라우저가 콘텐츠를 가리는 이유

모바일 기기에서 브라우저 주소창은 고정된 요소가 아니다. 사용자가 스크롤할 때 주소창이 펼쳐지고 접히면서 실제 보이는 뷰포트 높이가 실시간으로 바뀐다. 그래서 고정 픽셀 높이를 기준으로 디자인된 페이지는 상단이나 하단 영역이 예고 없이 잘려 나갈 수 있다.

포커 토너먼트 일정 페이지에서는 이게 실질적인 문제가 된다. 일정은 이벤트, 바이인, 시작 시간, 구조가 빽빽하게 나열된 목록이다. 주소창이 헤더를 가리면 플레이어가 해당 날짜나 시리즈 라벨을 못 볼 수 있다. 푸터를 가리면 내비게이션 링크나 테이블 마지막 줄을 놓칠 수 있다.

뷰포트 단위의 함정

콘텐츠가 가려지는 흔한 원인은 뷰포트 높이 단위를 쓰는 것이다. CSS에서 100vh는 뷰포트 높이를 가리키지만, 모바일 브라우저에서는 주소창이 접힌 상태의 최대 뷰포트를 가리키는 경우가 많다. 주소창이 보이는 상태에서는 실제 보이는 영역이 100vh보다 작다.

그 결과 전체 높이 레이아웃이 화면 아래로 넘어갈 수 있다. 하단에 배치된 요소, 예를 들어 고정 필터 바나 '다음 페이지' 컨트롤이 브라우저 UI 아래에 깔릴 수 있다.

최신 CSS에는 대안이 있다. dvh 같은 동적 뷰포트 단위와 svh 같은 소형 뷰포트 단위는 변화하는 뷰포트를 추적하도록 설계되었다. 전체 화면 레이아웃에서는 height: 100vh 대신 min-height: 100dvh를 쓰는 게 대표적인 해결법이다.

세이프 에어리어 인셋

또 다른 변수는 기기 세이프 에어리어다. 많은 폰에 둥근 모서리, 노치, 하단 홈 인디케이터가 있다. 가장자리에 너무 가깝게 배치된 콘텐츠는 잘리거나 탭하기 어려워질 수 있다.

CSS 환경 변수 env(safe-area-inset-top), env(safe-area-inset-bottom)과 좌우 대응 값들을 쓰면 레이아웃이 이런 영역에 공간을 확보할 수 있다. 이 값들을 기준으로 패딩을 넣으면 중요한 컨트롤이 사용 가능한 영역 안에 머문다.

토너먼트 일정에서는 고정 헤더, 하단 내비게이션 바, 그리고 다음 날이나 다음 페이지로 넘어가는 모든 버튼에 이게 가장 중요하다.

일정 페이지 실전 점검

• 데스크톱 에뮬레이터만 쓰지 말고, 주소창이 펼쳐진 상태와 접힌 상태 모두에서 페이지를 테스트한다.
• 긴 이벤트 테이블의 첫 줄과 마지막 줄에 실제로 도달할 수 있는지 확인한다.
• 뷰포트가 줄어들 때 고정 요소가 목록 콘텐츠를 겹쳐 가리지 않는지 검증한다.
• 하단 가장자리 근처의 탭 대상이 완전히 보이고 클릭 가능한지 확인한다.
• 텍스트 크기와 줄 높이를 검토해서 빽빽한 일정 줄이 확대 없이도 읽히게 한다.

포커 플레이어에게 중요한 이유

토너먼트 일정은 시간이 생명이다. 핸드 사이사이에 폰으로 일정을 확인하는 플레이어는 시작 시간, 바이인 금액, 늦은 등록 마감 시간을 빠르게 찾아야 한다. 주소 표시줄이 해당 행이나 내비게이션 버튼을 가려버리면, 페이지는 본연의 역할을 못 하는 셈이다.

모바일 최적화가 잘 된 페이지라고 해서 별도의 일정 페이지가 필요한 건 아니다. 실제 뷰포트에 반응하고, 안전 영역을 존중하며, 가장 중요한 정보를 항상 화면에 노출하는 레이아웃이면 충분하다. 플레이어보다 먼저 이런 문제를 잡아내는 가장 확실한 방법은 여전히 실제 기기에서 테스트해 보는 것이다.