가이드 목록으로
입문
반응형 디자인
모바일부터 데스크톱까지! 모든 화면에서 완벽하게 보이는 반응형 웹사이트를 만드는 방법을 배웁니다.
반응형 디자인이란?
스마트폰, 태블릿, 노트북, 대형 모니터... 사람들은 정말 다양한 크기의 화면으로 웹사이트를 봐요. 반응형 디자인은 화면 크기에 따라 레이아웃이 자동으로 변하는 디자인 방식이에요. 마치 물이 그릇 모양에 맞춰 형태를 바꾸는 것처럼요!
하나의 코드로 모든 화면 대응사용자 경험(UX) 향상유지보수 용이
화면 크기 시뮬레이터
슬라이더를 움직여서 화면 크기가 변할 때 레이아웃이 어떻게 바뀌는지 확인해보세요.
화면 너비
lg: Large1024px
네비게이션
Logo
홈소개서비스연락처
카드 그리드 (3열)
카드 1
카드 2
카드 3
카드 4
바이브코딩 팁:"모바일에서는 1열, 태블릿에서는 2열, 데스크톱에서는 4열로 카드 배치해줘"
브레이크포인트 (Breakpoints)
"여기서부터 레이아웃을 바꿀게!" 하고 정해둔 기준점이에요. Tailwind CSS는 아래 6개의 브레이크포인트를 사용합니다.
모바일 퍼스트 vs 데스크톱 퍼스트
반응형 디자인을 만들 때 "어느 화면 크기부터 시작할까?"를 정해야 해요.
모바일 퍼스트
추천작은 화면(모바일)에서 시작해서 점점 큰 화면으로 확장해요. Tailwind CSS의 기본 방식이에요!
장점
- 모바일 사용자 경험 우선
- 필수 콘텐츠에 집중하게 됨
- 점진적 향상 (Progressive Enhancement)
- Tailwind 기본 방식과 일치
단점
- 데스크톱 디자인을 나중에 생각하게 될 수 있음
- 큰 화면에서 복잡한 레이아웃 설계 필요
데스크톱 퍼스트
큰 화면(데스크톱)에서 시작해서 작은 화면으로 축소해요. max-width 미디어 쿼리를 사용하는 전통적인 방식이에요.
장점
- 복잡한 데스크톱 레이아웃을 먼저 설계 가능
- 관리자 대시보드처럼 데스크톱 중심 서비스에 적합
단점
- 모바일 경험이 부수적으로 처리될 수 있음
- Tailwind 기본 방식과 반대
- 불필요한 CSS가 모바일에 로드될 수 있음
바이브코딩 팁:"모바일 퍼스트로 반응형 만들어줘. 기본은 1열이고, md부터 2열, lg부터 3열이야"
자주 쓰는 반응형 패턴
실무에서 가장 많이 쓰이는 반응형 패턴들이에요. 클릭해서 미리보기를 확인해보세요.
모바일에서는 세로로 쌓고, 큰 화면에서는 그리드로 배치해요. 가장 흔하게 쓰이는 반응형 패턴이에요!
카드 1
카드 2
카드 3
사용 예: 상품 카드, 블로그 포스트, 팀원 소개, 서비스 목록
반응형 디자인 핵심 규칙
- 모바일 퍼스트로 시작하세요
기본 스타일은 모바일용으로, sm:, md:, lg:로 확장
- 주요 브레이크포인트만 사용하세요
보통 md(768px), lg(1024px) 2개면 충분해요
- 콘텐츠를 기준으로 브레이크포인트를 정하세요
디바이스가 아닌 "레이아웃이 깨지는 지점"에서 변경
바이브코딩 팁 모음
- "모바일에서는 세로로 쌓고, 태블릿부터는 가로로 배치해줘"
- "네비게이션을 모바일에서는 햄버거 메뉴로 바꿔줘"
- "화면이 작을 때는 사이드바를 숨겨줘"
- "모바일에서는 글자 크기를 좀 작게 해줘"