[React] 💻 모바일 웹 반응형 디자인 하기

0. 들어가면서

얼마 전에 대학교 졸업 전 마지막 프로젝트로 과 후배 한 명과 컴공과 지인 두 명과 함께

'추억의 칠판'이라는 이름의 

졸업식 기념 롤링페이퍼 모바일 웹 서비스 프로젝트를 진행했다.

 

모바일 웹 프로젝트이다 보니 핸드폰 디바이스 마다 다른 화면 크기에 맞추어 UI들과 홈페이지를 반응형으로 해야 했다.

 

반응형이라고 해봤자 컴포넌트 단위 정도로만 해보았기 때문에 이렇게 홈페이지 전체적으로 반응형을 필요로 하는 프로젝트는 처음이였기에 꽤나 어려움을 겪었다. 그 때 공부하며 사용도 해보았던 개념들을 정리하고 추가적으로 필요한 부분은 더 알아보도록 하겠다.

 

 

 

---

1. 반응형 웹 디자인이란?

✅ 반응형 웹 디자인의 개념

반응형 웹 디자인(Responsive Web Design, RWD)은 다양한 화면 크기와 디바이스 환경에 따라 자동으로 레이아웃이 조정되는 웹 디자인 기법입니다. 이를 통해 하나의 코드베이스로 데스크톱, 태블릿, 모바일 환경에서 최적화된 화면을 제공할 수 있습니다.

 

 

✅ 반응형 디자인이 중요한 이유

• 사용자 경험(UX) 향상: 모바일 사용자도 불편함 없이 사이트를 이용할 수 있음.
• SEO(검색엔진 최적화) 우수: Google은 반응형 디자인을 권장하며, 모바일 친화적인 웹사이트에 가산점을 부여함.
• 유지보수 용이: 별도의 모바일 전용 웹사이트를 만들지 않고, 하나의 코드로 관리할 수 있음.

 

 

---

2. 미디어 쿼리(Media Queries) 활용하기

✅ 미디어 쿼리란?

CSS의 @media 규칙을 사용하여 특정 화면 크기에서 스타일을 다르게 적용할 수 있는 기능입니다.

 

나는 이번 프로젝트에서 이 미디어 쿼리를 이용하여 반응형 UI 처리를 했다.

여러 부분 중에 일부 코드를 가져왔다.

 

const SelectedMemoImage = styled.img`
  width: 380px;
  height: 380px;
  border-radius: 12px;
  @media (max-width: 450px) or (max-height: 650px) {
    padding: 10px;
    width: 350px;
    height: 350px;
  }
`;

 

코드 설명 : 롤링페이퍼에 각자가 편지를 적을 메모지UI 이다. 각 디바이스 비율에 맞춰 메모지의 가로 세로가 커지지만 일정 크기 이상으로는 커지지 않도록 반응형 처리를 해놓은 코드이다.

 

아래 영상은 해당 코드인 메모지UI를 영상으로 찍어놓은 것이다. 가로 세로 길이의 최대 길이를 설정해놓음으로써

어떤 디바이스에서 이 메모지UI를 띄우더라도 깨지거나 짤리지 않습니다.

 

 

 

 

 

✅ 주요 Breakpoint 예시

아래는 일반적으로 사용되는 반응형 웹 디자인의 기준 화면 크기(Breakpoint)입니다.

/* 모바일 (최대 768px) */
@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

/* 태블릿 (768px ~ 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  body {
    background-color: white;
  }
}

 

 

 

---

3. 유동적 레이아웃(Flexible Layouts) 적용하기

✅ Flexbox와 Grid 활용

반응형 디자인에서 flexbox와 grid를 활용하면 레이아웃을 쉽게 조정할 수 있습니다.

/* Flexbox 예제 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* CSS Grid 예제 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

 

 

✅ 유동적인 단위 사용

반응형 디자인에서는 px보다 %, vw, vh, rem 등의 단위를 사용하면 유연한 레이아웃을 만들 수 있습니다.

.container {
  width: 80vw;  /* 뷰포트 너비의 80% */
  max-width: 1200px;
}

 

 

---

4. 이미지 및 미디어 최적화

✅ 반응형 이미지 적용

반응형 웹에서는 srcset과 picture 태그를 활용하여 최적화된 이미지를 제공할 수 있습니다.

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

 

✅ SVG, WebP 포맷 활용

• SVG: 아이콘 및 벡터 이미지에 적합하며, 해상도에 영향을 받지 않음.
• WebP: JPEG보다 용량이 작고 화질이 뛰어남.

 

 

---

5. CSS 프레임워크와 라이브러리 활용

✅ Bootstrap, Tailwind 등 프레임워크 활용

CSS 프레임워크를 사용하면 반응형 디자인을 쉽게 적용할 수 있습니다.

• Bootstrap: 미디어 쿼리가 기본 내장되어 있으며, 그리드 시스템을 제공.
• Tailwind CSS: 유틸리티 기반의 스타일링으로 빠르게 반응형 적용 가능.

✅ Emotion CSS를 활용한 반응형 스타일링

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const containerStyle = css`
  width: 100%;
  padding: 20px;

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

const Component = () => <div css={containerStyle}>반응형 컴포넌트</div>;

 

 

---

6. 반응형 디자인 테스트 및 디버깅 방법

✅ 크롬 개발자 도구 활용

Chrome DevTools에서 다양한 화면 크기로 반응형 테스트를 할 수 있습니다.

1. F12 또는 Ctrl + Shift + I 키를 눌러 개발자 도구를 엽니다.
2. 상단의 "Toggle Device Toolbar" 버튼(📱)을 클릭합니다.
3. 다양한 디바이스 크기로 사이트를 테스트합니다.

이러한 방법을 원래 주로 사용했지만 이번 프로젝트에서 나는 모바일 시뮬레이터라는

크롬 확장자를 사용했다. 핸드폰 디바이스 별 화면을 볼 수 있어서 각 디바이스 별 사이즈를

따로 알아보지 않아도 되는 편리함이 있었다.

 

 

✅ 모바일 퍼스트 디자인 테스트

• 모바일 화면부터 디자인을 적용하고 점진적으로 데스크톱 스타일을 추가하는 방식.
• min-width 기반의 미디어 쿼리를 사용하여 작은 화면부터 스타일을 적용하는 것이 일반적임.

 

 

---

7. 결론 및 최적화 팁

✅ 반응형 디자인 시 유의할 점

1. 너무 작은 버튼 및 텍스트 피하기 – 모바일 사용자가 클릭하기 어렵지 않도록 디자인.
2. 레이아웃의 일관성 유지 – 디바이스별로 UI가 과도하게 변하지 않도록 설계.
3. 과도한 애니메이션 피하기 – 모바일에서는 성능 저하를 유발할 수 있음.

 

✅ 성능 최적화를 위한 추가 팁

• CSS 파일을 최소화하여 로딩 속도를 개선.
• 이미지 최적화 및 지연 로딩(Lazy Loading) 적용.
• 불필요한 미디어 쿼리 남용하지 않기.