[PART1] 웹/디자인 - TERMS 06

[ TERMS 06 ] 반응형 웹 디자인

적응형 웹 디자인과 반응형 웹 디자인을 설명하는 이미지

1. 반응형 웹 디자인의 정의

하나의 웹 사이트가 사용자의 디바이스(데스크톱, 모바일, 태블릿)의 해상도에 반응하여 콘텐츠의 크기 및 배치를 최적화하여 제공하는 기술

 

2. 반응형 웹 디자인은 어떻게 접하게 될까?

반응형 디자인이 적용되어 있지 않다면, 데스크톱 버전이 그대로 사용자의 스마트폰에서 나타난다. 최근 사용자들은 다양한 기기로 서비스를 이용하기 때문에 반응형 웹 디자인은 필수이다.

[ e.g. 반응형을 적용하지 않은 웹사이트를 스마트폰으로 접속하면, 스마트폰 가로 비율에 맞게 보이지 않고 페이지의 일부만 나타나서 상하좌우로 스크롤 하면서 화면을 봐야한다.]

 

3. 반응형 웹 디자인 알아보기

>  등장 배경

1990년대 중반까지 대부분의 웹 페이지는 데스크톱용으로 제작되었다. 이후 2007년에 모바일 기기가 처음으로 등장하자 앞에서 언급한 것처럼 웹 사이트가 모바일 화면에서 데스크톱 크기로 보여져 큰 불편을 야기했다. 이를 해결하기 위해서 모바일 전용 페이지인 '모바일 웹'이 등장하였다. 그러나 스마트 디바이스의 종류가 다양(태블릿, 스마트TV, 폴더블 디스플레이)해지며 데스크톱, 모바일 두 버전으로는 문제를 해결할 수 없었고 디바이스별 버전을 따로 제작하기에는 비용과 시간적인 문제가 존재하였다. 따라서 이를 해결하기 위하여 2010년 5월 웹 페이지를 다양한 기기 화면에 맞게 최적화하는 '반응형 웹' 기술이 나타났다. 

 

>  적응형 웹 디자인 VS 반응형 웹 디자인

반응형 웹 디자인은 다양한 화면 크기에 맞게 유동적으로 대응하도록 웹 사이트를 제작하는 방식이고 적응형 웹 디자인은 사전에 몇 가지의  디바이스를 정하고 가각에 맞게 제작한 서로 다른 정적인 레이아웃이다. 각 레이아웃을 미리 만들어 두고 웹 사이트에 접속하는 디바이스의 종류와 화면 너비를 감지해 기존의 레이아웃 중 가장 근접한 것을 불러온다. 때문에 적응형 웹 디자인은 페이지가 열린 뒤에 창 크기를 키우거나 화면 크기를 변경하면 이에 대응하지 못한다. 반응형 웹 디자인은 모든 화면 크기에 대응하도록 설계하기 때문에 창의 크기가 동적으로 변경되더라도 현재 화면에 맞게 레이아웃이 변경된다.

 

4. 반응형 웹 디자인을 사용하는 이유

• 비용 절감 : 기기별 레이아웃을 만들지 않고 하나의 레이아웃만 개발하면 되므로 비용이 절감된다.
• 검색에 유리 : 적응형 웹 사이트는 URL이 두 개 이상으로 나뉘어진다. 이러한 경우 검색 엔진은 두 사이트가 동일한 내용을 가지고 있다고 판단하여 검색 결과에서 제외한다. 반면, 반응형 웹은 '하나의 URL'과 '하나의 코드(HTML)'을 가지므로 검색 엔진 노출에 유리하다. 이는 마케팅 비용 절감으로도 연결된다.
• 모든 해상도에 대응 : 미래에 새로운 해상도의 디바이스가 등장해도 최적화된 화면을 제공할 수 있어 미래 지향적이다.
• 유지 보수 : 수정 사항 발생 시 모든 버전을 수정하는 것이 아니라 하나의 페이지만 수정하면 되므로 유지 보수가 간편하다.

 

5. 반응형 웹 디자인 더 알아보기

>  반응형 웹 디자인 적용 시 고려 사항

• 로딩 시간 증가 : 반응형 웹 디자인의 경우 하나의 CSS파일 내에 모든 해상도에 대응되는 스타일 정보가 담겨 있어서 현재 해상도와 관련없는 데이터를 항상 불러와야 한다.
• 콘텐츠가 많고 복잡한 웹 페이지에 부적합 : 하나의 템플릿에 콘텐츠가 너무 많은데 이 모든 것을 반응형으로 개발할 경우 코드별로 다른 코드와의 의존성이 생겨난다. 이 경우에는 개발이 복잡해져 오히려 오랜 시간이 소요될 수 있고 지속적이고 민첩한 유지 보수 또한 어렵다.

 반응형 웹이 항상 정답은 아니다. 모바일 버전과 데스크톱 버전을 따로 만드는것이 효율적이기도 하다. 반응형 웹으로 제작하면 하나의 페이지로 모든 디바이스를 처리할 수 있다는 장점이 있지만, 각각의 디바이스에 최적화된 콘텐츠를 제공하려면 반응형 웹보다는 각 디바이스별로 별도의 최적화된 페이지를 만드는것이 효과적일 수 있다.

 

>  현재의 트렌드

 과거에는 웹 디자이너가 데스크톱용 웹 사이트를 먼저 디자인하고, 이후에 모바일 디바이스와 태블릿에서도 작동하도록 반응형 디자인을 적용하며 방법을 찾았다. 그러나 데스크톱용 웹 사이트의 콘텐츠를 모바일로 이식하려다보니 기기별 사용성을 고려하지 않고 반응형 자체가 목적이 되버렸다.

 요즘에는 반응형 웹 디자인을 고려할 때 페이지의 구성 요소 단위로 반응성과 기능성을 늘리것이 추세이다. 즉 웹 페이지 전체의 반응성이 아니라 제품 페이지를 구성하는 각각의 컴포넌트의 반응성을 고려하여 다양한 뷰 포트의 너비와 화면 해상도에서 원활하게 작동하게끔 하는 방안을 고민하는 추세이다.

 

>  함께 알아두면 좋은 용어

• 부트스트랩
• 그리드 시스템
• 인터랙티브 웹

 

>  혼동하기 쉬운 용어

• 반응형 프로그래밍