개발 slecs

모바일에서 로그인 폼이 화면을 벗어나던 문제 해결

목차

이번엔 모바일 환경에서 로그인 카드가 화면을 벗어나는 오버플로우 현상을 고쳤다. 430px 이하의 작은 화면에서 발생하는 이슈였는데, 원인은 생각보다 단순하지만 해결 방식은 여러 가지를 고민해야 할 부분이었다.

문제의 근원: box-sizing 속성

CSS에서 요소의 크기를 다룰 때 자주 만나는 함정이 바로 box-sizing이다. 기본값은 content-box인데, 이 모드에서는 요소의 width 값이 콘텐츠 영역만 차지한다. 패딩과 보더는 그 위에 추가되니까, 결과적으로 요소가 지정한 너비보다 커진다.

예를 들어 로그인 카드를 width: 100%; padding: 20px;로 설정했다면, 실제 렌더링 크기는 100% + 40px이 되어버린다. 모바일에서 모든 픽셀이 중요한데, 이 40px이 화면 밖으로 튀어나가는 원인이 되는 것이다.

/* 문제가 있던 상태 */
.login-card {
  width: 100%;
  padding: 20px;
  /* box-sizing은 기본값 content-box */
}

/* 수정 후 */
.login-card {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

box-sizing을 border-box로 바꾸면, width 값에 padding과 border가 포함되도록 동작한다. 이제 카드는 정확히 화면 너비에 맞춰 렌더링된다.

왜 이런 버그가 발생했을까

모바일 담당들이 이 문제를 놓친 이유는 아마도 이렇지 않을까.

첫째, 모바일 테스트 환경의 부족
개발할 때는 데스크톱 브라우저의 DevTools에서 모바일 에뮬레이션을 사용하는데, 실제 기기에서는 다르게 동작할 수 있다. 특히 화면 밀도(DPI), 안전 영역(safe area, 노치 등), 스크롤 바 너비 같은 변수들이 에뮬레이션과 실제 기기 사이에서 미묘한 차이를 만든다.

둘째, 리셋 CSS의 부재 또는 불완전
많은 팀들이 프로젝트를 시작할 때 box-sizing 리셋을 global 스타일에 적용해두곤 한다. 만약 이 설정이 빠져있거나, 특정 컴포넌트 범위에서만 누락되면 이런 버그가 슬금슬금 나타난다.

셋째, 컴포넌트 격리 시 발생하는 스타일 누수
단계별로 UI 컴포넌트를 개발할 때, 로그인 카드를 큰 해상도에서만 테스트하다 보면 이 문제가 드러나지 않는다.

변경 파일들의 역할

src/interface/server/web-pages.ts는 서버 렌더링 로직에서 HTML과 스타일을 조합하는 곳이다. 여기에 border-box 설정을 추가하면 모든 모바일 렌더링에 적용된다. package.json 변경은 아마도 모바일 테스팅 도구(에뮬레이터, 크로스 브라우저 테스트 패키지) 추가나 스타일 린팅 도구 버전 업그레이드 관련일 것이다.

회고: 유사 버그 예방 전략

이런 레이아웃 버그가 재발하지 않도록, 팀 전체가 고려할 만한 몇 가지 방안들:

  • Global Reset의 명시성 — 프로젝트 진입점 스타일시트에 box-sizing 리셋을 명확히 두고, 코드 리뷰 때 "글로벌 스타일을 건드렸는가?" 를 체크리스트에 올리기

  • 모바일 우선 개발 문화 — 넓은 화면부터 시작하기보다는 작은 화면(430px 이하 포함)에서 먼저 구현하고, 그다음 큰 화면을 대응하는 방식으로 전환

  • CI/CD에 모바일 테스트 포함 — 자동화된 크로스 브라우저/해상도 테스트를 파이프라인에 추가. 스크린샷 비교나 접근성 검사 도구들이 이를 도와준다.

  • 디버깅 스킬 공유 — 브라우저 DevTools의 해상도 에뮬레이션, window.innerWidth 로 실제 렌더링 크기를 확인하는 습관을 팀에 전파

이번 수정은 작아 보이지만, 모바일 사용자들의 첫 경험을 좌우하는 로그인 화면이라는 점에서 중요도가 높다. 특히 모바일-퍼스트 시대에는 "30초 안에 진입 못 하면 나간다"는 사용자 행동을 고려하면, 이런 작은 레이아웃 버그도 이탈률을 크게 올릴 수 있다.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.