🌱 기초 프론트엔드
반응형 웹이란?
쉽게 이해하기
물을 컵에 담으면 컵 모양대로 담기고, 그릇에 담으면 그릇 모양대로 담기죠. 반응형 웹도 마찬가지예요. 스마트폰 화면에선 세로로 길게, 태블릿에선 중간 크기로, 데스크톱에선 넓게 펼쳐지도록 자동으로 레이아웃이 변합니다.
핵심 정리
화면 크기에 따라 레이아웃이 자동으로 변하는 웹사이트예요.
자세히 알아보기
반응형 웹(Responsive Web)은 사용자의 화면 크기에 맞춰 레이아웃이 자동으로 조정되는 웹사이트를 말합니다. 예전에는 PC용 사이트와 모바일용 사이트를 따로 만들었지만, 지금은 하나의 코드로 모든 기기에 대응하는 게 일반적이에요.
핵심 기술은 CSS 미디어 쿼리(Media Query)입니다. '화면이 768px보다 작으면 이 스타일, 크면 저 스타일' 이런 식으로 조건을 걸어두는 거죠. 예를 들어 네이버를 PC로 보면 상단에 메뉴가 가로로 쭉 나열되지만, 모바일로 보면 햄버거 메뉴(≡)로 접혀 있잖아요. 이게 바로 반응형 디자인입니다.
실무에서는 'Mobile First' 방식을 많이 씁니다. 모바일 화면을 기본으로 디자인하고, 화면이 커질수록 요소를 추가하는 방식이에요. 왜냐하면 전 세계 웹 트래픽의 60% 이상이 모바일에서 발생하거든요. 모바일에서 잘 보이는 게 우선입니다.
반응형 웹은 SEO에도 유리합니다. 구글은 모바일 친화적인 사이트를 검색 순위에서 우대하거든요. 또한 하나의 URL로 모든 기기에 대응하니까 관리도 편하고, 사용자 경험도 일관되게 유지할 수 있어요. Tailwind CSS 같은 도구를 쓰면 sm:, md:, lg: 같은 접두어로 쉽게 반응형을 만들 수 있습니다.