급여 시스템을 모바일에서 조회하는 직원이 늘면서 반응형 웹 최적화가 중요해졌다. 데스크톱과 모바일에서 모두 편하게 급여를 확인할 수 있어야 한다. 화면 크기 확인 도구로 다양한 기기의 뷰포트를 파악하면서 반응형 설계를 했다.
주요 브레이크포인트
일반적인 반응형 브레이크포인트다.
- 모바일: ~768px
- 태블릿: 768px~1024px
- 데스크톱: 1024px~
koreaeu.kr/screen-size에서 현재 기기의 화면 크기를 확인할 수 있다.
급여 명세서 테이블
급여 명세서는 표 형식이라 모바일에서 보기 어렵다. 좁은 화면에서는 표를 카드 형식으로 변환하거나 가로 스크롤을 허용한다.
@media (max-width: 768px) { .salary-table { display: block; } .salary-table tr { display: block; margin-bottom: 10px; } }
터치 영역
모바일에서 버튼이나 링크는 44x44px 이상이어야 터치하기 편하다. 급여 상세보기 버튼, 다운로드 버튼 등의 크기를 확인한다.
폰트 크기
작은 화면에서 금액 숫자가 잘 보여야 한다. 최소 16px 이상을 권장하고, 중요한 정보(실수령액)는 더 크게 표시한다.
화면 크기 확인과 함께 폰트 렌더링도 테스트해야 한다.
인쇄 최적화
급여 명세서를 인쇄할 때는 @media print로 별도 스타일을 적용한다. 배경색 제거, 불필요한 UI 숨김, 페이지 나눔 설정 등이 필요하다.
PWA 고려
급여 시스템을 PWA(Progressive Web App)로 만들면 앱처럼 홈 화면에 추가할 수 있다. 오프라인 캐싱으로 이전 급여 내역을 네트워크 없이 조회하는 것도 가능하다.
결론
반응형 웹은 다양한 기기에서 테스트해야 한다. 화면 크기 파악이 필요하면 온라인 화면 크기 확인 도구를 활용해보자.