📌

인터넷 사용 시 기기마다 화면 크기가 상이함. 컴퓨터는 화면이 크고 휴대폰은 작음.
반응형 디자인은 이러한 다양한 기기 환경에 맞춰 화면 레이아웃이 자동으로 변하는 디자인을 의미함.

◼ 필요성

• 유저 편의성: 사용자는 항상 쾌적한 환경을 원함. 휴대폰 사용 시 글씨가 너무 작거나 레이아웃이 깨지면 사용성이 크게 저하됨.
• 경험 최적화: 모든 기기에서 콘텐츠가 잘 보이게 하여 긍정적인 사용자 경험(UX)을 제공하기 위함.

◼ 장점

• 효율성: 디바이스별로 사이트를 별도 제작할 필요가 없음.
• 리소스 절약: 한 번의 구현으로 모든 기기에 대응 가능하여 개발 시간과 노력을 획기적으로 단축함.

◼ 반응형 웹과 적응형 웹

반응형 웹(Responsive Web)

반응형 웹은 화면 크기에 따라 레이아웃이 유동적으로 변경되는 방식.

참고사이트

🔗 애플 https://www.apple.com/kr/store

🔗 에어비앤비 https://www.airbnb.co.kr

🔗 H&M https://www2.hm.com/ko_kr/index.html

적응형 웹(Adaptive Web)

적응형 웹은 기기별로 미리 정의된 화면 레이아웃을 제공하는 방식.
각 기기에 최적화된 디자인이 가능하나, 정의되지 않은 크기에서는 화면이 부자연스러울 수 있음.
접속 디바이스에 따라 URL이 변경되기도 함 (예: m.naver.com)

참고사이트

🔗 네이버 PC https://www.naver.com

🔗 네이버 Mobile https://m.naver.com

🔗 무신사 PC https://www.musinsa.com

무신사 Mobile: 무신사 접근 시점에 device 모드(개발자 도구 - ctrl(command) + shift + M)일 경우 확인 가능

◼ 반응형 웹 개발방법

CSS Media Query 활용

CSS 파일에 미디어쿼리를 작성하여 리액트 컴포넌트에 적용하는 기본적인 방식.

/* styles.css */

.container {
  padding: 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

import React from 'react';
import './styles.css';

const SampleComponent = () => {
  return (
    <div className="container">
      반응형 웹
    </div>
  );
}

export default SampleComponent;

Styled-components 활용

JavaScript 파일 내에서 스타일과 미디어쿼리를 함께 정의하여 관리.

// SampleComponent.jsx

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
`;

const SampleComponent = () => {
  return (
    <Container>
      반응형 웹
    </Container>
  );
}

export default SampleComponent;

react-responsive 라이브러리 활용

useMediaQuery 훅을 사용하여 JS 로직 내에서 분기 처리.

// SampleComponent.jsx

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const SampleComponent = () => {
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

  return (
    <div style={{ padding: isMobile ? '10px' : '20px' }}>
      반응형 웹
    </div>
  );
}

export default SampleComponent;

Tailwind CSS 활용

tailwind.config.js의 theme 설정을 활용하면 다양한 디자인 프리셋 구성 가능.
프로젝트 전반에서 일관된 디자인 시스템 구축 가능.

🔗 참고 URL https://tailwindcss.com/docs/theme

스크린 사이즈 지정(Break Point)

반응형 웹 구현 시 디바이스별 대표 화면 너비(break point) 기준으로 디자인 구성.
break point는 레이아웃이 변경되는 기준 지점 역할을 함.
보통 디자이너가 기준 해상도를 정의함. tailwind.config.js에서 screens 설정 가능.
Tailwind는 기본적으로 min-width 기준의 Mobile First 방식 사용.

모바일 퍼스트 (min-width): 작은 화면부터 큰 화면 순으로 스타일 적용.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px', // => @media (min-width: 640px) { ... }
      'md': '768px', // => @media (min-width: 768px) { ... }
      'lg': '1024px', // => @media (min-width: 1024px) { ... }
      'xl': '1280px', // => @media (min-width: 1280px) { ... }
      '2xl': '1536px', // => @media (min-width: 1536px) { ... }
    }
  }
}

데스크탑 퍼스트 (max-width): 큰 화면부터 작은 화면 순으로 스타일 적용.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'}, // => @media (max-width: 1535px) { ... }
      'xl': {'max': '1279px'}, // => @media (max-width: 1279px) { ... }
      'lg': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
      'md': {'max': '767px'}, // => @media (max-width: 767px) { ... }
      'sm': {'max': '639px'}, // => @media (max-width: 639px) { ... }
    }
  }
}

🔗 참고 URL https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints

컬러 지정

프로젝트에서 자주 사용하는 색상을 theme에 미리 정의 가능.
디자인 일관성 유지, 코드 가독성 향상, 유지보수 편의성 향상의 장점이 있음.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    }
  }
}

프리셋 사용

모바일 퍼스트 기준 screen 설정 예시

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

실제 태그 적용 예시

<img class="w-16 md:w-32 lg:w-48" src="...">

클래스 접두사(md:, lg:)를 사용하여 사이즈별 스타일을 제어.
Tailwind CSS의 w-{number} 유틸리티는 0.25rem 단위를 사용함.

img의 width값은
기본(sm)일때 width: 4rem(64px), md일때 width: 8rem(128px), lg일때 width 12rem(192px)으로 적용됨.