반응형 디자인이란?
반응형 웹 디자인은 하나의 웹사이트가 다양한 화면 크기에 자동으로 적응하는 접근 방식입니다. 스마트폰, 태블릿, 데스크톱 어디서든 최적의 경험을 제공하죠.
단순히 화면을 줄이는 게 아니라, 각 디바이스에 맞게 레이아웃, 이미지, 타이포그래피가 재배치됩니다.
핵심 원리: 유동 그리드와 미디어 쿼리
유동 그리드(Fluid Grid)는 고정 픽셀 대신 비율(%)을 사용해 레이아웃을 구성합니다. 화면 크기가 바뀌어도 비율이 유지되면서 자연스럽게 조절되죠.
미디어 쿼리(@media)는 특정 화면 너비에서 다른 스타일을 적용할 수 있게 해줍니다. '768px 이하에서는 1열 레이아웃으로' 같은 규칙을 설정하는 거예요.
모바일 퍼스트, 왜 중요할까?
모바일 퍼스트 접근은 가장 작은 화면부터 디자인을 시작해서 점점 넓혀가는 방식입니다. 전체 트래픽의 60% 이상이 모바일에서 발생하기 때문에 이 전략이 효과적이에요.
프로덕의 모든 프로젝트는 모바일 퍼스트로 설계됩니다.