[Responsive] Mobile First vs Desktop First

모바일 퍼스트(Mobile First)

• 모바일 기기에서의 화면을 기준으로 스타일을 작성하고, 점점 넓은 화면(태블릿, 데스크탑)을 위한 스타일을 미디어쿼리로 추가하는 방식

장점

• 모바일 사용자 비중이 높은 현재, 실제 사용 환경에 맞는 전략
• 모바일 성능 제약을 고려해 필수 스타일만 먼저 로딩, 성능 향상
• 점진적 향상(Progressive Enhancement): 기본 기능에서 점점 향상시켜 나가는 전략과 맞물림

단점

• 데스크탑 중심의 디자인을 먼저 받은 경우, 작업자에게 익숙하지 않을 수 있음
• 복잡한 UI가 많은 데스크탑을 나중에 고려할 경우, 스타일 구조가 복잡해질 수 있음

/* 기본 스타일: 모바일 기준 */
.container {
  font-size: 14px;
  padding: 16px;
}

/* 화면이 768px 이상이면 (태블릿 이상) */
@media (min-width: 768px) {
  .container {
    font-size: 16px;
  }
}

/* 화면이 1280px 이상이면 (데스크탑) */
@media (min-width: 1280px) {
  .container {
    font-size: 18px;
  }
}

---

모바일 퍼스트가 실무에 더 많이 사용되는 이유

이유	설명
모바일 사용자 비중 증가	대부분의 서비스 트래픽이 모바일에서 발생 (특히 B2C 서비스)
퍼포먼스 최적화	모바일 퍼스트는 작은 리소스부터 로딩, 성능 측면에서 유리
디자인도 모바일부터 시작	많은 디자이너들이 이미 모바일 디자인 먼저 작업하는 흐름
접근성·UX 고려	모바일 퍼스트는 단순하고 접근성 좋은 UI 설계에 유리

---

점진적 기능 추가 전략

 

• "모바일엔 핵심 기능만, 해상도 커질수록 부가 기능 추가"
• 팁기능 추가 시 display: none 보단 visibility, position, opacity로 부드럽게 토글 설계
• JS에서도 window.innerWidth 감지해서 디바이스별로 조건 분기 가능

예시	모바이	데스크탑
GNB 메뉴	햄버거 메뉴로 숨기기	전체 메뉴 노출
필터 기능	버튼 클릭 시 슬라이드 오픈	항상 노출된 필터 박스
푸터 구조	아코디언 방식	여러 컬럼으로 분기
테이블	세로형 카드 레이아웃	가로 스크롤 or 일반 테이블

---

데스크탑 퍼스트(Desktop First)

 

• 데스크탑 화면을 기준으로 기본 스타일을 작성하고, 점점 좁은 화면(태블릿, 모바일)을 위한 스타일을 미디어쿼리로 덮어쓰는 방식

장점

• 대부분의 디자이너가 PC 디자인을 먼저 작업하므로 마크업하기 쉬움
• 복잡한 기능이나 UI를 먼저 구현하고 축소해나가기 쉬움

단점

• 점진적 감소(Graceful Degradation): 완성된 기능을 낮은 환경에서 꺼내야 하므로 예외 처리 많음
• 모바일 성능 저하 우려: 처음부터 무거운 스타일이 적용됨
• 모바일 사용자 경험을 놓치기 쉬움

/* 기본 스타일: 데스크탑 기준 */
.container {
  font-size: 18px;
  padding: 32px;
}

/* 화면이 1279px 이하이면 (태블릿 이하) */
@media (max-width: 1279px) {
  .container {
    font-size: 16px;
  }
}

/* 화면이 767px 이하이면 (모바일) */
@media (max-width: 767px) {
  .container {
    font-size: 14px;
  }
}

---

데스크탑 퍼스트가 고려되는 상황

• 관리자 페이지, 대시보드 등 PC에서 사용되는 웹앱
• 기업 내부 시스템처럼 데스크탑 사용자만 대상일 경우
• 초기 디자인 전달이 PC만 존재하고 모바일 디자인이 없을 때
•  

---

선택 기준

• 대부분의 최신 프로젝트에서는 모바일 퍼스트 전략을 사용
• SCSS 등에서 믹스인으로 min-width, max-width 기반 미디어쿼리를 함께 사용할 수 있도록 설계하는 것도 좋음

상황에 따른 선택

상황	방식
모바일 사용자 비중이 높거나 앱 성격의 웹	모바일 퍼스트
복잡한 데스크탑 기능이 많거나 PC 기반 서비스	데스크탑 퍼스트
최신 트렌드 및 성능 최적화 고려	모바일 퍼스트

---

선택 시 고려사항

구분	고려사항
사용자 비율	실제 서비스의 모바일/데스크탑 사용자 비율 분석 필요. 대부분의 경우 모바일 비중이 더 높음.
디자인 전달 방식	디자이너가 어떤 화면부터 작업했는지 확인. PC 디자인만 있는 경우 데스크탑 퍼스트로 시작할 수도 있음.
기능 복잡도	데스크탑의 UI가 더 복잡하거나, 모바일 UI가 단순한 경우엔 모바일 퍼스트가 작업 효율이 높음.
기존 프로젝트 구조	기존 코드가 데스크탑 퍼스트라면 일관성을 유지할지, 리팩토링할지를 판단해야 함.
개발팀 숙련도	퍼블리셔나 개발자가 어떤 전략에 익숙한지도 고려할 것. 모바일 퍼스트가 익숙하지 않으면 시행착오 많음.