자바스크립트 실무 유틸 함수 시리즈 14 - 반응형 UI 구현을 위한 유틸

이번 14편에서는 브라우저 환경에서 다양한 디바이스와 해상도에 대응할 수 있도록 돕는 반응형 UI 구현을 위한 자바스크립트 유틸 함수들을 정리합니다. 뷰포트, 리사이즈 감지, 미디어 쿼리, 브레이크포인트 관리 등에 활용됩니다.

---

✅ 1. getViewportSize (현재 뷰포트 크기 가져오기)

📌 화면의 가시 영역 너비와 높이

function getViewportSize() {
  return {
    width: window.innerWidth,
    height: window.innerHeight
  };
}

📌 활용 예시

• 레이아웃 변경 조건 감지
• 모바일/태블릿/PC 구분 기준

---

✅ 2. onResize (창 크기 변경 이벤트 리스너)

📌 리사이즈 이벤트에 콜백 등록

function onResize(callback) {
  window.addEventListener('resize', callback);
  return () => window.removeEventListener('resize', callback);
}

📌 활용 예시

• 실시간 반응형 레이아웃 재조정
• 성능 최적화를 위한 debounce와 함께 사용

---

✅ 3. matchMediaQuery (미디어 쿼리 조건 만족 여부 확인)

📌 CSS 미디어쿼리를 JS에서 감지

function matchMediaQuery(query) {
  return window.matchMedia(query).matches;
}

📌 활용 예시

• 뷰포트 조건에 따라 JS 코드 분기 처리
• 다크모드 여부 감지 등도 가능

---

✅ 4. getBreakpoint (해상도 기준 브레이크포인트 반환)

📌 반응형 기준점 명시적 반환

function getBreakpoint(width = window.innerWidth) {
  if (width < 576) return 'xs';
  if (width < 768) return 'sm';
  if (width < 992) return 'md';
  if (width < 1200) return 'lg';
  return 'xl';
}

📌 활용 예시

• 반응형 설계 조건 체크
• 모바일/데스크탑 UI 구분 처리

---

✅ 5. scrollToElement (특정 요소로 부드럽게 스크롤)

📌 부드러운 스크롤 UX 구현

function scrollToElement(selector) {
  const el = document.querySelector(selector);
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' });
  }
}

📌 활용 예시

• 반응형 메뉴 클릭 시 섹션 이동
• 모바일 내비게이션 UX 향상

---

✅ 결론

반응형 UI는 현대 웹 환경에서 기본 요건입니다. 이번 시리즈에서 다룬 유틸 함수들은 CSS만으로 해결하기 어려운 디바이스 대응, 조건 감지, UX 보완에 큰 도움을 줄 수 있습니다.