OS 파편화

About this offer

프론트엔드 개발에서는 동일한 크롬(Chrome)이나 사파리(Safari) 브라우저를 사용하더라도 실제 앱이 동작하는 운영체제(OS)에 따라 레이아웃 깨짐, 폰트 굵기 차이, 키보드 단축키 충돌 등 다양한 이슈가 발생한다. 스크롤바 처리 및 레이아웃 시프트 (Layout Shift) OS에 따라 스크롤바가 차지하는 공간의 방식이 완전히 다르다. macOS / iOS: 기본적으로 Overlay Scrollbar 형태이다. 스크롤할 때만 콘텐츠 위에 스크롤바가 떠오르고, 평소에는 레이아웃 공간을 차지하지 않는다 ( 100vw 와 100% 너비가 동일) Windows: 기본적으로 Classic Scrollbar 형태로, 스크롤바가 화면 우측의 일정 영역(약 15px~17px)을 고정 점유 문제 상황 모달이나 레이어 팝업이 열릴 때 overflow: hidden 을 부여하면, Windows에서는 스크롤바가 사라지면서 페이지 전체가 오른쪽으로 15px가량 덜컥거리는 레이아웃 시프트가 발생 마크업 제작 시 100vw 를 기준으로 지정한 가로 길이가 Windows에서는 스크롤바 너비를 포함해 계산되어 하단 스크롤이 원치 않게 발생할 수 있음 해결책 /* 현대 브라우저 및 현대 CSS 솔루션 */ html { scrollbar-gutter: stable; /* 스크롤바 유무와 상관없이 미리 공간을 예약 */ } 폰트 렌더링 및 안티앨리어싱 (Subpixel vs Grayscale) OS별 라스터라이징 엔진 차이로 인해 동일한 font-weight 를 적용하더라도 글자 두께나 선명도가 달라 보인다. macOS: 폰트 고유의 디자인과 굵기를 충실히 재현하도록 진하게 안티앨리어싱을 적용 Windows (ClearType): 서브픽셀 렌더링 기반으로 픽셀 그리드에 가독성을 최적화하여 상대적으로 얇고 가늘게 보임 크로스 OS 시스템 폰트 스택 (System Font Stack) OS마다 기본 탑재 폰트가 다르므로 폰트 패밀리 지정 시 꼼꼼한 fallback 설정이 필수적이다. body { font-family: -apple-system, BlinkMacSystemFont, /* macOS / iOS Apple 시스템 폰트 */ "Segoe UI", /* Windows 대표 시스템 폰트 */ Roboto, /* Android */ "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* 이모지 폰트 */ /* macOS에서 폰트가 지나치게 두꺼워 보이는 것 방지 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 키보드 이벤트 및 단축키 (Command vs Control) 웹 앱에서 커스텀 단축키(예: Cmd+K 검색창, Cmd+S 저장)를 구현할 때 OS별 키 매핑 차이가 존재한다. 입력 키 macOS Windows / Linux 메인 수식어 키 (Modifier) Meta (Cmd ⌘) Control (Ctrl) Delete / Backspace Backspace (Delete) / Fn+Delete Backspace / Delete 해결 방안 (Event Listener) const handleKeyDown = (e: KeyboardEvent) => { // OS 판별 조건문 const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; const isCmdOrCtrl = isMac ? e.metaKey : e.ctrlKey; if (isCmdOrCtrl && e.key === 'k') { e.preventDefault(); openSearchModal(); } }; 모바일 OS 및 웹킷(WebKit) 뷰포트 이슈 (iOS vs Android) 데스크톱 OS 외에도 모바일 OS 간 차이는 프론트엔드 UI를 파괴하는 가장 흔한 원인이 된다. 100vh 이슈 (iOS Safari) iOS Safari는 주소창과 하단 툴바의 고무줄 효과로 인해 100vh 가 화면의 실제 가시 영역보다 더 길게 계산되어 하단 요소가 잘리는 현상이 일어난다. 해결책: Modern CSS 단위인 100dvh (Dynamic Viewport Height) 또는 100svh (Small Viewport Height) 사용 .full-screen-modal { height: 100vh; /* Fallback */ height: 100dvh; /* 동적 뷰포트 대응 */ } Form Input 줌 현상 iOS Safari는 input 요소의 font-size 가 16px 미만일 때 포커스 시 자동으로 화면을 확대시킨다. 해결책: 모바일 프론트엔드 환경에서는 입력 폼의 font-size 를 최소 16px 이상으로 지정 입력 장치 및 제스처 동작 (Touch, Trackpad, Wheel) macOS (트랙패드): 좌우 스와이프 시 "뒤로가기/앞으로가기" 브라우저 제스처가 기본 작동한다. 가로 스크롤 영역( overflow-x: auto )이 있는 캐러셀/차트를 조작할 때 브라우저 뒤로가기 제스처와 충돌 가능 Windows (마우스 휠): 마우스 휠 단위 스크롤 속도가 트랙패드에 비해 뚝뚝 끊기는 디스크리트(Discrete) 스크롤 방식으로 동작하므로, Smooth Scroll 연출 시 보정이 필요 브라우저 뒤로가기 제스처 충돌 방지 .horizontal-scroll-container { overscroll-behavior-x: contain; /* 브라우저의 기본 페이지 전환 제스처 차단 */ } 이모지(Emoji) 및 파일 경로 렌더링 이모지 렌더링: Apple Color Emoji (macOS/iOS)와 Segoe UI Emoji (Windows)는 디자인 트렌드와 렌더링 방식이 완전히 달라, 서비스 아이콘 대용으로 이모지를 사용하면 OS별 분위기가 크게 달라진다. (가능하면 SVG 아이콘 시스템 권장) 파일명/경로 대소문자 구문: Windows: 파일 경로의 대소문자를 구분하지 않음 ( Header.tsx 와 header.tsx 를 동일하게 인식) macOS / Linux: 기본적으로 대소문자를 엄격히 구분 주의사항: Windows에서 개발 시 import Header from './header' 로 작성하더라도 local 실행은 잘 되지만, Linux 기반 CI/CD 빌드서버(GitHub Actions, Verce, AWS 등)로 전달될 때 빌드 에러가 발생