맑음

요즘 들어서 반응형이라는 말을 자주 듣지 않나요?

반응형이라는게 과연 무엇일까요?

그럼 질문을 조금 바꿔보아 맑음식구들은 하루에 휴대폰을 통해 인터넷을 얼마나 하시나요?

아마도..시간을 알 수 없을 정도로 많은 시간을 모바일 혹은 태블릿과 함께 보내고 있을거에요.

컴퓨터가 없어도 인터넷 세상으로 쏘옥 들어갈 수 있는 세상.

이 때문에 반응형이라는게 생겨난거죠~

오늘은 반응형에 대해서 알아보려 합니다

===================================================================================

앞에서 말한것처럼 사용환경이 변화하면서 사람들은 일반적으로 작업을 수행하기 위해

다양한 기기를 순차적으로 사용하는데요.

다양한 기기를 사용하는 90% 이상 사람들이 장소와 시간에 구애받지 않고 여러 기기를 순차적으로 사용한다고 합니다.

즉! 컴퓨터를 조금이라도 할 수 있는 사람이라면 휴대폰, 노트북, 태블릿 등 다양한 경로를 통해

본인이 원하는 작업을 진행한다는 말인거죠~

저 역시 회사에서는 컴퓨터, 출퇴근길에는 휴대폰, 잠자기 전에는 노트북 등

여러 기기를 사용하고 있습니다~

뭐...저 같은 경우에는 중요한 업무라기 보다는..그냥 습관인거죠~ㅋㅋㅋㅋㅋ

아무튼~

예전에는 PC에만 적합한 한정적인 디자인 때문에 보기가 어려웠는데요.

요즘은 어디들 들어가든 모바일에 적합한 사이트가 많아서 사실..컴퓨터 보다는 모바일을 더 애용하는거 같습니다.

그만큼 접근성이 엄청 커졌다는거죠~

그럼 단말기 별 최적화 되어 있는 사이트가 얼마나 있다고 생각하시나요?

실제로 707개의 단말기를 지원하는 사이트가 있다는데요.

이 사이트의 고객문의 99.9%가 "왜 내 단말기는 지원되지 않는거죠?"라는 거라는데.

믿어지시나요?

때문에 우리는 단말기 최적화를 위한 반응형 디자인을 더욱더 연구하고 관심을 갖게 되는 것입니다.

그럼 궁금증이 생기게 되죠.

모바일 사이트를 따로 만들면 되는것을..왜 꼭 반응형 디자인으로 해야할까???

- 고객은 모바일 사이트가 없는곳에는 당황하게 되고, 재방문을 하지 않기 때문에.

- SEO나 마케팅을 간단하게 해주고 단일화 할 수 있기 때문에.

- 모바일 페이지와 데스크탑 페이지가 동일한 URL로 검색순위 상단 노출을 원하기 때문에.

- 단말기별, 해상도별 사이트를 만들 자금이 부족하기 때문에.

- 값비싼 백엔드 솔루션이 없기 때문에.

이 때문에 반응형 디자인이 필요한것입니다~

실제로 해외의 의류판매 사이트인 http://www.oneill.com/ 의 경우

iPhone/iPod에서

65.7%  전환율이 상승

101.2% 매출 증가

안드로이드에서

407.3% 전환율이 상승

591.4% 매출 증가

모바일 외 기기에서

20.3% 전환율 상승

41.1% 매출 증가

이런 결과를 가져 왔다고 합니다.

또 다른 해외 타이 판매 사이트인 http://skinnyties.com/ 역시

모든기기

13.6% 전환율 상승

42% 매출 증가

iPhone에서

71.9% 전환율 상승

377.6% 매출 증가

결과를 가져왔다죠. 

이제는 웹사이트 하나만 잘 만든다고 해서 해결되지 않는다는걸 잘 보여주는 결과인셈입니다.

서론이 길어졌는데요.

그렇다면 반응형으로 제작할때 무엇을 알아야 할까요?

뷰포트에 대한 이해

모니터 또는 모바일 장치에 디스플레이 요소가 표현되는 영역을 말하는데요.

데스크탑 브라우저는 화면에 표시되는 영역 전체를 뷰포트로 사용합니다~

반면, 웹킷(Webkt)엔진을 사용하는 대부분의 모바일 브라우저는 980픽셀의 뷰포트를 사용하는데요.

만약 아이폰3GS(480X320)으로 웹 사이트를 본다면

980픽셀의 페이지를 320픽셀안에 다 표시되도록 전체적인 배율축소가 발생하게 되는데요.

그렇게 되면 글자 및 이미지의 가독성이 많이 떨어지기 때문에

포털 등 기 개발된 모바일 웹사이트에서는 별도의 메타태그로 뷰포트를 설정해 놓고 있습니다.

1) m.naver.com

2) m.daum.net

3) m.nate.com

레티나 디스플레이에 대한 이해

1개의 픽셀을 물리적인 4개의 픽셀로 표현하는 방법입니다.(1/2 다운 스케일링)

소프트웨어적 PPI와 물리적 해상도의 완전한 분리가 가능하며,

고해상도 디스플레이를 이용한 화질손상 없이 자유로운 해상도 할 수 있습니다.

이 레티나 디스플레이를 사용할 경우  

폰트의 계단현상이 극도로 줄어들어 가독성 향상되며, 기존의 레이아웃을 해치지 않아도 됩니다.

또한 하드웨어와 소프트웨어의 조화가 가능합니다.

※이러한 픽셀 집적도는 OS차원에서 다운 스케일만 지원해주면 누구나 사용할 수 있는 기술이기 때문에 

현재 출시되고 있는 대부분의 고해상도 모바일 기기는 실제 하드웨어적인 PPI와는 별개로 해당 기기 화면 사이즈에 맞는 소프트웨어적인 해상도(Viewport)를 갖고 있다고 간주할 수 있습니다.

따라서 웹 사이트 제작 시 고해상도 기기를 위한 별도의 레이아웃은 고려하지 않아도 되는거죠~ 

===================================================================================

어떤가요?

반응형 웹에 대해서 조금은 이해가 되었나요?

이어서 "그럼! 반응형 웹은 어떻게 디자인해야 하는가?"에 대해서

포스팅 하도록 하겠습니다~

다시 돌아옵니다!ㅋㅋㅋㅋ

뿅! 

본 리뷰는 지극히 개인적인 관점과 생각으로 작성된 주관적인 글 입니다

본 내용은 http://m.mkexdev.net/34, http://www.lukew.com/ff/entry.asp?1691,

http://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html 을 참고하여 작성되었습니다.

ⓒ 언제나 맑음 with 꼬대리