웹 사이트가 오늘날처럼 항상 적응할 수 있었던 것은 아닙니다. 현대 디자이너에게 '반응성'은 좋은 디자인을 정의하는 가장 중요한 요소 중 하나입니다. 결국, 우리는 이제 다양한 화면 크기를 가진 모바일 장치와 데스크톱 장치 사이를 자주 넘나드는 많은 사용자를 수용하고 있습니다.그러나 반응형 디자인으로의 전환은 하루아침에 이루어진 것이 아닙니다. 수년간 우리는 '반응형 웹 디자인'의 개념을 수정하여 오늘날의 단계에 도달했습니다.오늘은 반응형 웹 디자인의 역사에 대해 자세히 알아보도록 하겠습니다. 

웹 디자인은 어디에서 시작되었을까?

최초의 웹사이트가 처음 만들어졌을 때, 화면 범위에 대한 응답성에 대해 걱정하는 사람은 아무도 없었습니다. 모든 사이트는 동일한 템플릿에 맞게 디자인되었으며 개발자는 디자인, 레이아웃 및 타이포그래피와 같은 개념에 많은 시간을 할애하지 않았습니다.CSS 기술의 광범위한 채택이 시작되었을 때에도 대부분의 개발자는 콘텐츠를 다양한 화면 크기에 적용하는 것에 대해 크게 걱정할 필요가 없었습니다. 그러나 그들은 여전히 다른 모니터와 브라우저 크기로 작업하는 몇 가지 방법을 찾았습니다. 

유동적인 레이아웃

초기에 개발자가 사용할 수 있는 두 가지 주요 레이아웃 옵션은 고정 너비 또는 유동적인 레이아웃이었습니다. 고정 너비 레이아웃을 사용하면 모니터가 사이트가 설계된 것과 정확히 동일한 해상도가 아닌 경우 디자인이 깨질 가능성이 더 큽니다. 여기에서 예를 볼 수 있습니다.또는 Glenn Davis가 만든 유동적인 레이아웃은 반응형 웹 디자인의 최초의 혁신적인 사례 중 하나로 간주되었습니다.유동적인 레이아웃은 다양한 모니터 해상도와 브라우저 크기에 적응할 수 있습니다. 그러나 콘텐츠도 넘칠 수 있고 작은 화면에서는 텍스트가 자주 깨집니다. 

해상도 종속 레이아웃

2004년 Cameron Adams의 블로그 게시물은 JavaScript를 사용하여 브라우저 창 크기에 따라 스타일시트를 교체하는 새로운 방법을 소개했습니다. 이 기술은 '해상도 종속 레이아웃'으로 알려졌습니다. 개발자의 더 많은 작업이 필요했지만 해상도 종속 레이아웃을 사용하면 사이트 디자인을 보다 세밀하게 제어할 수 있습니다.해상도 종속 레이아웃은 기본적으로 CSS 중단점의 초기 버전으로 기능했습니다. 단점은 개발자가 각 대상 해상도에 대해 다른 스타일시트를 만들고 JavaScript가 모든 브라우저에서 작동하도록 해야 한다는 것이었습니다.당시 고려해야 할 브라우저가 너무 많았기 때문에 jQuery는 브라우저 옵션 간의 차이점을 추상화하는 방법으로 점점 인기를 얻었습니다. 

모바일 하위 도메인의 부상

해상도 의존적 디자인과 같은 개념의 도입은 많은 모바일 장치가 점점 더 인터넷을 사용할 수 있게 되었을 때 거의 동시에 발생했습니다. 회사는 스마트폰용 브라우저를 만들고 있었고 개발자는 갑자기 이러한 브라우저도 고려해야 했습니다.모바일 하위 도메인은 사용자에게 스마트폰의 데스크톱 사이트에서 얻을 수 있는 것과 똑같은 기능을 제공하는 것을 목표로 했지만 완전히 별개의 응용 프로그램이었습니다.모바일 하위 도메인이 있으면 복잡하지만 개발자가 SEO를 모바일 장치에 구체적으로 타겟팅하고 모바일 사이트 변형으로 더 많은 트래픽을 유도할 수 있는 등 몇 가지 이점이 있습니다. 그러나 동시에 개발자는 동일한 웹사이트의 두 가지 변형을 관리해야 했습니다.Apple이 첫 iPad를 출시했을 때 수많은 웹 디자이너가 여전히 모든 기기에서 웹사이트에 액세스 할 수 있도록 하는 이 구식의 투박한 전략에 의존하고 있었습니다. 2000년대 후반에 개발자는 모바일 사이트에 더 쉽게 액세스 할 수 있도록 하기 위해 여러 가지 트릭에 의존하는 경우가 많았습니다. 예를 들어, 단순한 레이아웃에서도 유연한 이미지를 위해 max-width: 100% 트릭을 사용했습니다.다행히 Ethan Marcotte가 A List Apart에서 "반응형 웹 디자인"이라는 용어를 만들면서 모든 것이 바뀌기 시작했습니다. 이 기사는 웹 디자인 아키텍처 원칙에 대한 John Allsopp의 탐구에 주목하고 모든 장치에서 잘 작동할 수 있는 올인원 웹 사이트의 토대를 마련했습니다. 

반응형 웹 디자인의 새로운 시대

Marcotte의 기사에서는 개발자가 반응형 웹 사이트를 만들 때 고려해야 하는 세 가지 중요한 구성 요소인 유동적인 격자, 미디어 쿼리 및 유연한 이미지를 소개했습니다. 

유동적인 그리드(fluid grids)

유동적인 격자의 개념은 웹사이트가 현재 화면 크기에 따라 늘어나거나 축소되는 다양한 유연한 열을 채택할 수 있어야 한다는 아이디어를 도입했습니다.모바일 장치에서 이는 하나 또는 두 개의 유연한 콘텐츠 열을 도입하는 것을 의미하는 반면, 데스크톱 장치는 일반적으로 더 많은 공간으로 인해 더 많은 열을 표시할 수 있습니다. 

유연한 이미지(flexible images)

유연한 이미지는 콘텐츠와 마찬가지로 이미지가 위치한 유동적인 격자를 따라 커지거나 줄어들 수 있어야 한다는 아이디어를 도입했습니다. 위에서 언급했듯이 개발자는 이를 가능하게 하기 위해 '최대 너비' 트릭이라는 것을 사용했습니다.컨테이너에 이미지를 보관하고 있었다면 특히 컨테이너가 반응형인 경우, 쉽게 오버플로 될 수 있습니다. 그러나 '최대 너비'를 100%로 설정하면 이미지가 상위 컨테이너와 함께 크기가 조정됩니다. 

미디어 쿼리(media queries)

'미디어 쿼리'라는 개념은 2010년에 도입되었지만 2년 후 W3 권장사항으로 공식 출시될 때까지 널리 채택되지 않은 CSS 미디어 쿼리를 나타냅니다. 미디어 쿼리는 기본적으로 미디어 유형(print, screen 등) 및 미디어 기능(height, width 등)과 같은 옵션을 기반으로 트리거 되는 CSS 규칙입니다.당시에는 더 간단했지만 이러한 쿼리를 통해 개발자는 본질적으로 오늘날 반응형 디자인에 사용되는 도구인 간단한 종류의 구분점을 구현할 수 있었습니다. 구분점은 웹 사이트가 브라우저 창이나 장치 너비에 따라 레이아웃이나 스타일을 변경하는 경우를 나타냅니다.오늘날의 개발자가 기대하는 방식으로 미디어 쿼리가 작동하도록 하려면 대부분의 경우 뷰포트 메타 태그를 사용해야 합니다. 

모바일 우선 디자인의 부상

Marcotte의 반응형 웹 디자인 도입 이후 개발자들은 아이디어를 가능한 한 효과적으로 구현하기 위한 새로운 방법을 연구해 왔습니다. 대부분의 개발자는 이제 데스크톱 장치 사용자의 요구를 먼저 고려하는지 또는 모바일 장치 사용자의 요구를 먼저 고려하는지에 따라 두 가지 범주로 나뉩니다. 그 경향은 후자 쪽으로 갈수록 가속화되고 있다.모바일 우선 브라우징 시대에 처음부터 웹사이트를 디자인할 때, 대부분의 개발자는 모바일 우선이 최선의 선택이라고 믿습니다. 모바일 디자인은 현재 웹 디자인의 많은 트렌드와 일치하는 훨씬 더 단순하고 미니멀한 경우가 많습니다.모바일 우선 경로를 취한다는 것은 먼저 모바일 관점에서 웹사이트의 요구사항을 평가하는 것을 의미합니다. 데스크톱 및 태블릿 레이아웃 생성을 시작하면 중단점을 사용하여 정상적으로 스타일을 작성할 수 있습니다. 또는 데스크톱 우선 접근 방식을 선택한 경우, 중단점 선택으로 더 작은 장치에 지속적으로 적용해야 합니다. 

반응형 웹 디자인의 미래 탐구

반응형 웹 디자인은 아직 완벽하지 않습니다. 여전히 모든 장치에서 동일한 놀라운 경험을 제공하지 못하는 수많은 사이트가 있습니다. 뿐만 아니라 AR 헤드셋 및 스마트워치와 같은 새로운 장치를 위한 디자인 방법을 찾아야 하는 새로운 과제가 계속해서 등장하고 있습니다.그러나 우리는 웹 디자인의 초창기부터 먼 길을 왔다고 말할 수 있습니다.

원문 링크. A Brief History of Responsive Web design

출처: https://www.designlog.org/2512971 [디자인로그(DESIGN LOG):티스토리]