Blog

서론#

반응형 웹을 처음 배울 때
모바일 퍼스트와 데스크탑 퍼스트라는 개념을 함께 접했다.

이론적으로는 이해했지만,
실제로 코드를 작성할 때는 두 방식의 차이가 명확하게 느껴지지 않았다.

Tailwind CSS를 사용하면서
이 차이가 코드 구조에 직접적으로 드러났고,
왜 모바일 퍼스트가 기본 전제로 사용되는지 궁금해졌다.

이 글은 Tailwind의 반응형 설계 방식을 기준으로
모바일 퍼스트와 데스크탑 퍼스트를 다시 정리한 기록이다.

모바일 퍼스트와 데스크탑 퍼스트란?#

두 방식의 차이는 어디를 기준으로 스타일을 작성하느냐에 있다.

• 모바일 퍼스트
  • 작은 화면을 기본 스타일로 작성
  • 화면이 커질수록 스타일을 추가
• 데스크탑 퍼스트
  • 큰 화면을 기본 스타일로 작성
  • 화면이 작아질 때 스타일을 덮어씀

결국 차이는
“기본값이 무엇이냐”에 있다.

Tailwind의 반응형 방식#

Tailwind의 반응형 클래스는
sm, md, lg 같은 접두사를 사용한다.

<div class="text-sm md:text-base lg:text-lg"></div>

여기서 중요한 점은
이 접두사들이 min-width 기준이라는 것이다.

• 접두사가 없는 클래스 → 가장 작은 화면 기준
• md: → 화면이 md 이상일 때 적용

이 구조 자체가
모바일 퍼스트를 기본 전제로 설계되어 있다.

Tailwind에서 기본 스타일의 의미#

Tailwind에서는
접두사가 없는 클래스가 곧 모바일 스타일이다.

<div class="p-4 md:p-8"></div>

• 모바일: p-4
• 태블릿 이상: p-8

이 방식에서는
모바일 스타일이 항상 기준이 되고,
화면이 커질수록 덮어쓰는 구조가 된다.

데스크탑 퍼스트처럼 작성하려면
오히려 코드가 더 복잡해진다.

데스크탑 퍼스트로 작성하면 생기는 문제#

Tailwind에서 데스크탑 퍼스트로 접근하면
다음과 같은 코드가 된다.

<div class="p-8 md:p-4"></div>

이 코드는 문법적으로는 가능하지만,
읽는 사람 입장에서는 혼란을 준다.

• 왜 기본이 더 큰 값인지
• 왜 화면이 커질수록 값이 줄어드는지

Tailwind의 설계 의도와 반대 방향으로 작성되기 때문에
코드 해석 비용이 올라간다.

모바일 퍼스트가 자연스러운 이유#

Tailwind에서 모바일 퍼스트가 자연스러운 이유는
단순한 유행 때문이 아니다.

• 접두사 없는 클래스 = 기본 스타일
• 반응형 클래스 = “추가되는 조건”

이 구조 덕분에
스타일의 변화 흐름이 코드에 그대로 드러난다.

<div class="flex-col md:flex-row"></div>

이 코드는
“기본은 세로, 커지면 가로”라는 의도를
추가 설명 없이 전달한다.

정리#

Tailwind CSS는
모바일 퍼스트를 기본 전제로 설계된 도구다.

이 방식을 따르면
반응형 스타일이 자연스럽게 누적되고,
코드만 보고도 화면 변화 흐름을 파악할 수 있다.

그래서 Tailwind를 사용할 때는
모바일 퍼스트를 “선택지”라기보다는
전제 조건으로 이해하는 편이 더 납득이 된다.