🍨반응형 웹은 어쩌다 나왔나

🍧옛날 옛적에...

웹이 처음 대중화되었을 1990년대 초반엔 저같이 늙은 사람들은 기억하겠지만 모니터가 크기가 모두 같았습니다. 두껍고, 화면은 렌즈처럼 튀어나와있었죠. 그러다보니 웹 디자인은 고정된 사이즈로 만들어도 아무 문제가 없었습니다. 하지만 시간이 지남에 따라 더 큰 화면이 나오기 시작했고 웹 디자이너들은 고정된 비율중 하나를 선택하는 식으로 처리하게 됩니다. 당연히 창이 작으면 잘리고 창이 크면 옆이 텅텅 비었죠.

.container {
    width: 960px;
    margin: 0 auto;
}

🍧유동적 레이아웃

옛날 웹페이지들을 볼 수 있는 아카이브가 있길래 가져와봤습니다. 유동적 레이아웃은 화면이 줄어들면 그 비율만큼 축소되다 못해 뭉개지는 모습을 보여줍니다. 여기에 min-width와 max-with를 사용해 어느정도 완화하는 방법을 사용하기 시작합니다. 화면을 너무 늘리거나 줄였을때 한계를 정해두는거죠.

.container {
    width: 100%;
}

🍧핸드폰의 등장

커져가는 모니터와 같이 커져가던 웹은 커다란 전환점을 맞게 됩니다. 바로 핸드폰의 등장이죠. 이미 만들어져 있는 거대한 웹사이트를 유동적 레이아웃으로 240px밖에 안되는 핸드폰에서 보이게 할 수 있을까요? 하지만 인간은 항상 그렇듯 방법을 찾아냅니다.

🍧모바일 전용 사이트

가장 간단한 방법으로 별도의 도메인으로 모바일 전용 사이트를 하나 만듭니다. 하지만 이렇게 되면 유지 보수 관점에서 너무 비효율적이죠. 또한 핸드폰과 컴퓨터 사이에 있는 사이즈들의 기기들이 나오게 되면서 이 방법은 사용할 수 없게 되었죠. 또 인터넷을 뒤져 과거의 유물을 발굴해 봤습니다. 도메인은 http://front.mobile.daum.net/mobile/Mobile 로 역시나 별도로 되어있네요.

🍧적응형 레이아웃

미디어 쿼리가 CSS에 등장하면서 장치와 브라우저 특성에 따라 요소를 재배열하는 적응형 레이아웃이 등장하게 됩니다. 사용중인 화면에 적합하게 보여주도록 조정되죠. 컴퓨터, 태블릿, 휴대전화 등 어느 기기에서나 좋게 보이도록 자동조정되는 웹이 등장한겁니다. 하지만 그럼에도 화면의 크기는 너무나도 다양했고 여전히 틈새가 존재했습니다.

🍨마참내... 반응형 웹 디자인의 등장

🍧백분율을 쓰자

적응형 레이아웃이 미디어 쿼리를 통해 지정된 화면 크기에 따라 움직였다면, 반응형은 미디어 쿼리에 유동적 레이아웃을 담았습니다. 무슨 뜻이냐 하면 픽셀과 같이 고정된 단위가 아닌 백분율과 같은 상대적 단위를 사용해 만들어 진다는 뜻입니다.

@media (min-width: 600px) {
    .container {
        width: 80%;
    }
}

그리고 반응형 디자인에 대해 세 가지 기준을 정의했습니다.

Fluid grids
Fluid media
Media queries

하지만 아직 끝난게 아니었다~

🍧viewport

비율을 사용해 화면의 실제 너비에 맞게 축소하더라도 반응형 디자인이 축소되지 않도록 하는 메타 태그가 도입되었습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width는 웹사이트의 너비가 장치의 너비와동일하다고 가정하도록 지시합니다. initial-scale=1은 브라우저에 scale을 어느정도 수행할지 알려줍니다.

meta제거	원본

뷰포트 메타 태그를 제거하니 같은 비율이라도 디자인이 축소되어 버립니다. 이제 정말 반응형 웹 디자인이 탄생했습니다!

🍦참조

https://web.dev/learn/design/intro/