Next.js에서 반응형으로 구현하기

배포하기 전까지는 로컬에서 npm run dev해서 확인했기 때문에 처음에는 모든 프론트엔드 코드를 PC 버전으로 작업했다. 그리고 vercel로 배포한 다음 휴대폰에서 작동하는지 확인해봤는데, 휴대폰에서는 글자도 작고 가로로 스크롤이 생겨서 보기가 불편했다. 그래서 기존 컴포넌트를 깨지 않고 반응형으로 확장하기로 결정했다. 

 

반응형을 위한 핵심 전략

• Tailwind CSS의 반응형 prefix (sm, md, lg, xl)
• 햄버거 메뉴를 위한 useState + motion.div
• flex-col / flex-row 전환을 통한 레이아웃 대응

리팩토링 포인트

• 기존 PC 기준 컴포넌트를 최대한 재사용하면서 스타일만 분기
• Image 컴포넌트에서 sizes를 사용해 디바이스별 최적 이미지 로딩

 

1. 반응형 디자인의 기본 단위: Tailwind CSS의 반응형 클래스

<div className="hidden md:flex">...</div>
<button className="md:hidden">...</button>

• hidden md:flex: 모바일에서는 숨김(hidden), md 이상 (768px+)에서 flex로 표시.
• md:hidden: 데스크탑에서는 안 보이고, 모바일에서만 표시.

→ 이는 메뉴 버튼, 네비게이션 등 디바이스에 따라 다르게 렌더링하기 위한 Tailwind의 반응형 breakpoint를 활용한 방식이다. 

 

2. 반응형 메뉴 구성 방식 (햄버거 메뉴)

const [isMenuOpen, setIsMenuOpen] = useState(false);

 

• 모바일에선 상단 우측에 햄버거 버튼만 보이고, 클릭 시 isMenuOpen을 true로 설정.
• 메뉴는 <motion.div>로 슬라이딩 애니메이션까지 자연스럽게 처리했다. 

{isMenuOpen && (
  <motion.div
    initial={{ opacity: 0, y: -10 }}
    animate={{ opacity: 1, y: 0 }}
    ...

 

3. Hero Section 이미지의 반응형

<div className="relative w-[380px] h-[380px] md:w-[420px] md:h-[420px]">
  <Image
    src={"/images/mockup_desktop.png"}
    ...
    sizes="(max-width: 768px) 100vw, 500px"
    style={{ objectFit: 'contain' }}
  />
</div>

 

• 모바일에선 width를 100vw로, 데스크탑에선 500px 정도로 제한.
• sizes와 objectFit을 이용해 해상도에 따라 유연하게 이미지 크기 최적화

4. 레이아웃 반응형 처리

<div className="flex flex-col lg:flex-row ...">

• 모바일(default)에서는 세로 쌓기 (flex-col),
• 데스크탑(lg: 이상)에서는 가로 정렬 (flex-row)

→ 반응형 그리드나 레이아웃 처리의 가장 기본적인 기법을 적용했다. 

5. 그리드 레이아웃: 콘텐츠 섹션

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">

• 모바일: grid-cols-1 (한 줄에 하나)
• 데스크탑: grid-cols-3 (한 줄에 3개)

→ 디바이스 크기에 따라 컨텐츠 개수를 자동으로 조절하는 방식이다. 

 

6. Viewport에 따라 애니메이션 조절

<motion.div
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
/>

 

• 사용자가 해당 섹션을 스크롤로 볼 때만 애니메이션 적용.
• margin 조절로 화면 진입 시점 커스터마이징 가능.

결과 및 마무리

다음에 프로젝트를 할 때는 처음부터 모바일 대응을 고려하자고 다짐했다....

 

위 사진은 내가 대표적으로 적용한 반응형 중에 햄버거 메뉴를 적용한 모습이다.