반응형 웹 디자인: 모든 기기에 대응하기

반응형 웹 디자인은 현대 웹 개발의 필수 요소입니다. 모든 기기 크기에서 최적의 경험을 제공해야 합니다.

메타 뷰포트 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 우선 접근

/* 모바일 먼저 (기본) */
.container {
  width: 100%;
  padding: 10px;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* 데스크톱 이상 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

/* 큰 화면 */
@media (min-width: 1440px) {
  .container {
    width: 1200px;
  }
}

반응형 그리드

.grid {
  display: grid;
  gap: 20px;
}

/* 모바일: 1열 */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* 태블릿: 2열 */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 데스크톱: 3열 */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

반응형 타이포그래피

/* 유동 타이포그래피 */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.2;
}

p {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}

반응형 이미지

<!-- 반응형 이미지 -->
<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 768px) 100vw,
         (min-width: 1200px) 50vw,
         90vw"
  alt="설명"
>

<!-- Picture 요소 -->
<picture>
  <source media="(min-width: 1024px)" srcset="desktop.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="설명">
</picture>

Flexbox를 이용한 레이아웃

.navbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

터치 친화적 디자인

/* 터치 대상 최소 크기: 44x44px */
button, a {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 16px;
}

/* 호버 효과 제거 (모바일) */
@media (hover: none) {
  button:hover {
    background-color: initial;
  }
}

주요 브레이크포인트

테스트

# 크롬 개발자 도구에서 반응형 테스트
1. F12로 개발자 도구 열기
2. Ctrl+Shift+M (토글 기기 도구 모음)
3. 다양한 기기 크기에서 테스트

성능 최적화

/* 모바일에서 불필요한 요소 숨기기 */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

반응형 디자인은 현대 웹 개발의 필수 요소입니다. 항상 모바일 우선으로 생각하세요.