모바일 대응을 위한 화면 크기 감지 및 Zoom 기반 전략 - clappingmin/asterum_traveler GitHub Wiki

문서 목적

이 문서는 모바일 대응이 포함되지 않은 초기 웹 디자인을 기반으로, 실제 개발 과정에서 화면 크기 감지 및 CSS zoom 속성을 활용하여 대응한 전략과 그 한계점을 정리한 기술 문서이다. 프로젝트 초기에 효율적인 작업을 위한 전략으로 도입되었으며, 장기적으로는 반응형 구조로 전환할 계획이다.

도입 배경

프로젝트 초기, 디자이너에게 UI 디자인 요청 시 모바일 디자인을 별도로 요청하지 않았다. (예산 문제)
디자이너에게 전달한 요청은 러프한 와이어프레임 기반이었고, 처음으로 디자이너에게 요청한 디자인이라서 명확한 가이드라인 없이 진행하였다.
결과적으로 받은 디자인은 해상도 1920px 기준의 정적 웹 디자인이었다. 디자이너는 1920px보다 작은 웹 화면에서도 동일한 화면 비율을 유지하는 것을 전제로 작업하였고, 실제 px 단위는 다르더라도 비율은 고정된 UI가 최종 목표였다.

일반적인 모바일 대응 방식과 그 문제점

일반적으로 <meta name="viewport" content="width=device-width">를 사용하여, 디바이스 크기에 맞춘 레이아웃 구성을 적용함
그러나 이 방식은 1920px 디자인 기준으로 구성된 UI를 좁은 화면에 그대로 적용하기 어렵게 만듦
px 값을 일일이 화면 크기에 맞춰 조정해야 하며, 디자이너가 제공한 결과물과 미묘한 어긋남이 발생할 수 있음

선택한 전략: `zoom` 기반 비율 조정

디자인의 고정 비율을 유지하면서 빠르게 개발을 진행하기 위해, 다음과 같은 전략을 사용함.

1920px 고정 기준으로 전체 레이아웃 개발
가장 바깥 Wrapper 요소를 하나 두고, CSS zoom 속성을 적용
window.innerWidth 값을 기준으로 현재 화면 크기에 따라 zoom 비율을 계산
window.addEventListener('resize') 이벤트로 화면 리사이징 시마다 zoom 재계산

적용 코드 예시

const handleResize = (wrapperRef: React.RefObject<HTMLDivElement>) => {
  const pageWrapper = wrapperRef.current;
  if (!pageWrapper) return;

  const zoomSize = window.innerWidth / 1920;
  const revertSize = 1920 / window.innerWidth;
  const isMobile = window.screen.width < 768;

  pageWrapper.style.zoom = String(zoomSize);
  pageWrapper.style.height =
    pageWrapper.clientWidth === 1920 && isMobile
      ? "100vh"
      : `calc(100vh * ${revertSize})`;
};

장점

디자이너가 제공한 1920px 기준 디자인을 별도 변환 없이 그대로 개발 가능
초기 디자인 경험 부족 상황에서도 빠르고 일관된 UI 구현 가능
리팩터링 없이 다양한 해상도 대응 가능

한계 및 향후 계획

모바일 기기에서 실제 사용성 저하 발생 가능 (예: 버튼이 너무 작게 보임)
CSS zoom은 일부 브라우저에서 지원 제약 있음, 성능 이슈 가능
반응형 디자인(Media Query, rem/em 단위)으로의 전환이 어려움
모바일 전용 UI가 추가될 경우, <meta name="viewport" content="width=device-width">로 반드시 전환 필요

계획

모바일 전용 개발 시점에 반응형 레이아웃으로 구조 전환 예정이다.
현재 zoom 방식은 임시 전략으로 유지하며, 개발 속도와 작업 효율을 위한 선택이다.

정리

해당 zoom 기반 화면 대응 전략은, 모바일 대응 없이 웹 전용으로 디자인된 프로젝트에서 발생할 수 있는 레이아웃 문제를 빠르게 해결하기 위한 현실적인 방안이었다.
초기 개발 효율은 확보했지만, 장기적으로는 반응형 구조 전환과 모바일 대응을 고려해야 함을 명확히 인식하고 있다.