반응형웹 디자인 마스터

반응형웹이란 가변 그리드(Fluid Grid) 가변 이미지(Flexible image) 미디어 쿼리(Media Queries)을 이용한 기술에 대한 용어로 흔히 반응형웹 디자인 마스터라 함은 웹의 형태로 웹 브라우저의 가로 크기에 반응해 레이아웃을 최적화하여 모든 디바이스에서 최적의 상태로 콘텐츠를 제공할 수 있는 형태를 말합니다.

 

반응형웹의 비밀

 

반응형웹의 장점

다양한 디바이스 지원으로 반응형 웹은 데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 일관된 사용자 경험을 제공할뿐 아니라 검색 엔진 최적화로 구글 및 기타 검색 엔진은 반응형 웹사이트를 선호하며, SEO에 긍정적인 영향을 미칩니다.

또한 콘텐츠 관리 용이성으로 단일 코드베이스를 유지 보수하기 때문에 콘텐츠 업데이트 및 관리가 편리하고 효율적이 고객 유지 및 이탈 방지 사용자들은 어디서나 일관된 경험을 제공합니다.

 

반응형웹디자인

반응형웹의 단점

하지만 단점도 있기 마련인데 모든 각 해상도에 맞게 레이아웃, 콘텐츠, 이미지 등의 모양이나 크기가 변화하게 됩니다. 이에 따라 PC 버전에서 존재하는 콘텐츠이지만 모바일 디바이스 버전으로 가면 안 보이게 하거나, 디바이스에서 필요한 이미지 크기보다 더 큰 이미지를 불러와서 불필요한 데이터를 로드 할 수 도 있어서 자동으로 이미지가 리사이징 되는 것은 디바이스의 CPU의 사용량을 증가시켜 부담이 될 수도있고 인터넷 익스플로러 8 이하 버전에서는 미디어 쿼리 적용되지 않습니다.

 

반응형웹의 패턴

모든 패턴은 각 요소를 마크업(Mark-up)하고 각 요소가 노출되는 순서는 브라우저에서왼쪽 위 영역부터 오른쪽 아래로 차례대로 나열되므로 가로 폭이 작아져 축소되면 자연스럽게 오른쪽 아래의 자리가 없어서 아래로 내려가는 모습으로 반응형 웹에는 세 가지 패턴이 가장 널리 많이 쓰임(Mostly Fluid, Shifter, Column Drop) 다른 방식의 패턴은 흐름이 어색하여 사용자가 불편함을 느낄 수 있고 다시 말해 웹 접근성 콘텐츠의 논리성에도 위배될 수 있습니다. 대표적인 패턴으로는 아래 3가지 예를 들어볼게요.

Mosty Fluid 패턴

반응형 웹디자인에서 가장 많이 사용하는 패턴으로 Wide Pc에서는 가변이 아닌 고정형으로 가고 이보다 작아지면 양쪽은 여백을 남기고 내부는 가변적으로 변하게끔 설정 된 패턴입니다.

Shifter 패턴

세로와 가로 정렬이 혼합된 모습으로 PC 웹사이트와 모바일 웹사이트 사이의 GNB 영역의 변화가 가장 큽니다.

Column Drop 패턴

가로로 정렬되어 있던 요소가 해상도에 따라서 세로로 정렬되는 모습 사용자에게 참신하고 좋은 느낌을 줄 수 있습니다.