Today
493
Total
5,629,185
관리 메뉴

하얀잉크의 해피컨텐츠

워드프레스로 반응협 웹디자인 적용 구축 사이트 사례, 루트임팩트 본문

IT/소셜네트워크

워드프레스로 반응협 웹디자인 적용 구축 사이트 사례, 루트임팩트

하얀잉크 2013.03.27 11:59

워드프레스와 반응형 웹디자인이 만나면?

 

최근 반응형 웹디자인으로 구현된 웹사이트 제작이 트렌드로 자리잡고 있습니다. 플래시 기반의 사이트가 줄고 텍스트 기반의 사이트가 늘고 있는데 더해 아마 향후 5년을 내다 보고 웹사이트를 구축한다면 반드시 적용되어야 하는 기술이 아닐까 합니다.

 

개인적으로 웹기획도 하고 있는데 올 초에 제가 PM으로 반응형 웹디자인을 적용한 사이트를 구축한 경험이 있어 소개할까 합니다.

 

 

■ 반응형 웹디자인이란?

 

모든 뷰포트에서 최적의 콘텐츠가 보이게 하는 것이다. 바꿔 말하면, '모바일 웹사이트'는 디바이스가 특정한 콘텐츠와 기능을 필요로 하는 경우에만 필요하다는 뜻이이다. 이런 경우 모바일 웹사이트는 데스크탑 웹사이트와 전혀 다른 사용자 경험을 제공한다.

-출처. 반응형 웹 디자인(벤 프레인 저/에이콘 출판사)



 

 

 

 

모바일, 테블릿PC도 반응형 웹디자인이면 해결!


최근 스마트폰을 비롯해 태블릿PC, 디지털TV 등의 사용률이 높아지면서 웹에 접근하는 디바이스가 다양해지고 있는데요. 반응형 웹디자인은 쉽게 말해 어떤 디바이스로 접근하든 최적의 화면을 제공한다는 것입니다. 

 

예전에는 모바일 사이트를 별도로 만들어 제공했는데 반응형 웹디자인을 적용하면 하나의 주소로 다양한 크기의 스크린을 그리기 때문에 데이터를 한번에 수정할 수 있고 앞으로 어떤 형태의 디바이스가 등장해도 그에 맞게 반응할 수 있는 장점이 있습니다.

 

 

 

 

올해 1월에 오픈한 사단법인 루트임팩트 공식웹사이트(rootimpact.or.kr)입니다. 반응형 웹디자인으로 구현해 모바일부터 와이드 화면까지 모두 반응하며 워드프레스를 CMS로 구축했습니다.

 

사실 최근에 나오는 워드프레스 테마를 보면 반응형 웹디자인을 적용한 테마가 많습니다. 그만큼 쉽게 사이트를 구축할 수 있다는 말이죠. 단, 문제는 고객사가 원하는 디자인은 없다는 것이 함정. 결국 디자인 작업을 하다보면 일반 사이트 제작에 들어가는 공수만큼 들어갈 수밖에 없습니다.

 

 

 

 

 

메인은 고객사의 요청에 따라 대표인물 네 명의 코멘트가 자동롤링되는 형식으로 구현되었습니다.

루트임팩트는 사회적 선의를 실현하고자 하는 사람들이 성공할 수 있도록 돕는 생태계를 조성한다는 미션을 가진 NPO입니다. 최근 이슈되고 있는 임팩트 비즈니스를 주도하고 있는 단체이기도 한데요. 젊고 밝은 비쥬얼로 단체의 메시지를 전달하고자 했습니다.

 

제가 블로그에서도 몇 번 언급했던 젊은 조직이죠 ^^

 

▶ 관련글 - 청년 사회적기업가들의 커뮤니티, Hub Seoul/허브 서울

▶ 관련글 - 착한 비즈니스로 변화 꿈꾸는 활동가 이야기 들어보니

 


 

 

롤링되는 인물스토리는 한 눈에 볼 수 있도록 Cover Story라는 별도 페이지가 구성되었는데, 디바이스별로 구현되는 화면은 위와 같습니다.

 

왼쪽부터 PC 버전, 테블릿PC, 모바일에서 반응하는 화면입니다. 웹표준화에 맞춰 크롬, 파이어폭스, 사파리 등 모든 브라우저에 최적화 되었고 익스플로러는 버전7 이상 최적화 되었습니다. 반응형 웹디자인은 아직 IE(익스플로러)에서는 7이상만 반응합니다. 6이하는 따로 손을 좀 봐주어야 하는 경우가 있습니다.

 

그렇기 때문에 반드시 반응형 웹디자인이 정답이라고는 할 수 없습니다.

 

 

 

반응형 디자인이 항상 올바른 선택은 아니다

 

결국은 타겟에 초점이 맞춰져야 합니다. 자사의 타겟을 고려해 유입되는 경로가 어떤 디바이스에 집중되는지 살펴보고 아래 리스트도 참고하면 좋겠습니다.

 

●  고객이 가장 빠르게 성장하고 있는 인터넷 사용자 지원을 원하는가?
●  고객이 깨끗하고 빠르며 유지보수가 쉬운 코드 베이스를 원하는가?
●  고객이 브라우저 별로 적용돼야 할 사용자 경험이나 방법이 다르다는 사실을 이해하고 있는가?
●  고객이 IE8 이하의 구 버전의 브라우저를 포함하는 모든 브라우저에서 디자인이 동일하게 보이기를 원하는가?
●  현재 또는 예상되는 사이트 방문자의 70% 이상이 IE8이나 구 버전의 브라우저를 사용하고 있는가?

 

 

 

 

<이롭게 블로그에 가시면 더욱 다양한 워드프레스와 반응형 웹디자인에 대한 내용을 만날 수 있습니다>

 

 

 

저작자 표시 비영리 변경 금지
신고
9 Comments
댓글쓰기 폼