상세 컨텐츠

본문 제목

반응형 웹으로 새단장 한화데이즈 블로그, 전문가 입장에서 보니

기자단-필진/한화프렌즈 기자단

by 하얀잉크 2014. 9. 12. 17:37

본문

한화데이즈 블로그, 반응형 웹으로 리뉴얼 Open 살펴보니


대표적인 기업블로그라고 할 수 있는 한화그룹 공식블로그 한화데이즈(http://blog.hanwhadays.com)가 이달 초 리뉴얼 오픈했습니다. 올해 6월 누적방문자 1천만 명을 돌파하며 기업 이야기는 물론 생활, 여행, 맛집 등 다양한 정보를 제공하는 채널로 자리매김 했는데요. 한화데이즈에서 발행된 컨텐츠만 무려 2,500여 건이나 된다고 합니다.


10월이 되면 서울세계불꽃축제가 열리는데 한화데이즈에서 깨알같은 축제 관련 정보를 얻을 수 있답니다. ^^





특히, 이번 리뉴얼에서는 디자인 개편과 함께 다양한 디바이스에 대응하는 반응형 웹(Responsive Web) UI를 구현했다고 하는데요. 마침 개인적으로 한화데이즈에 앞서 이달 초 모기업의 블로그 프로젝트에 PM으로 참여해 반응형 웹으로 구축한 터라 반가운 마음에 꼼꼼히 살펴봤습니다. 





한화데이즈 블로그 확 달라진 5가지 포인트


1. 레이아웃의 큰 변화 디자인 개편

먼저 한화데이즈에 접속해 보면 티스토리 블로그가 맞나 싶을 만큼 디자인에 큰 변화가 있었는데요. 메인 화면의 레이아웃이 각기 다른 스퀘어가 조화를 이루면서 화이트에 한화의 BI컬러인 오렌지 컬러로 포인트를 주었습니다. 섬네일도 전보다 시원하게 처리된 모습입니다.  





2. 핵심 컨텐츠 노출 강화

메인 화면의 상단 모습입니다. 메인 비주얼 영역을 슬라이드 처리하면서 핵심컨텐츠를 노출하는데 엥? 우측에도 눈길을 끄는 제목의 컨텐츠들이 보입니다. 바로 한화프렌즈 기자단의 글이라고 하는데요. 그동안 한화데이즈에 빛과 소금이 되어 온 한화프렌즈 기자단을 배려한 공간을 마련한 것이라 하네요. 역시 의리의 한화네요.





3. 소셜 허브 역할 강화

메인화면 하단에서는 페이스북, 트위터, 유투브 등의 소셜미디어 채널을 실시간으로 확인할 수 있습니다. 유투브는 하반기 메인 이벤트인 한화 불꽃축제 홍보영상을 맛볼 수 있습니다. 특이할 점은 플로팅 배너에 Top 버튼을 넣어 어느 시점에서도 상단으로 이동할 수 있게 사용자 편의를 고려했습니다.





특히, 한화계열사의 블로그 최신 컨텐츠도 한 눈에 확인할 수 있습니다. 한화그룹은 한화케미칼, 한화리조트, 한화생명, 갤러리아 등 계열사에서도 소셜미디어 채널을 활발하게 운영하고 있는데요. 이제 한화데이즈에서 모두 확인할 수 있겠네요.






4. 반응형 소셜 허브 역할 강화

하지만 뭐니뭐니 해도 이번 리뉴얼에서 가장 중점을 둔 것은 앞서 말했듯이 반응형 웹 UI를 구현했다는 것입니다. 최근 반응협 웹(Responsive Web)이 트렌드라고 하는데 이에 대한 설명을 먼저 하자면 과거에는 스마트폰 사용률이 높아지면서 모바일 사이트를 별도로 만들었습니다. 


쉽게 생각해 모바일에서 네이버 주소가 m.naver.com을 떠올리면 이해하기 쉽습니다. 하지만 태블릿PC가 나오고 모바일이나 태블릿PC도 화면 사이즈가 모두 제각각이죠. 다양해지는 디바이스 환경을 고려해 어떤 화면에서건 최적화된 UI를 구현하는 것이 바로 반응형 웹입니다. 특히, 좋은 점은 별도의 사이트를 구축하지 않고 하나의 주소 즉 하나의 사이트의 소스로 운영하기 때문에 관리 포인트가 줄고 비용도 절감됩니다.






위 사진은 태블릿PC로 한화데이즈 블로그를 접속한 모습입니다. 같은 주소지만 태블릿PC와 모바일에서 웹 레이아웃과 다른 UI를 구현하는 것을 볼 수 있습니다. 





5. 스마트폰 사용자를 고려한 모바일 최적화

태블릿PC와 모바일에서 보여지는 한화데이즈 블로그의 메인화면입니다. 사진에서 보듯 화면의 잘림없이 깔끔하게 콘텐츠를 읽을 수 있습니다. 특히, 모바일에 더욱 최적화 된 것을 볼 수 있습니다. 이는 세계최고 수준의 국내 스마트폰 사용자를 고려한 것이 아닐까 생각됩니다.





전문가 입장에서 본 한화데이즈 블로그의 아쉬운 점


완벽한 프로젝트가 얼마나 있을까요? 모든 프로젝트가 그렇듯 끝나고 나면 아쉽기 마련입니다. 반응형 웹을 기획했던 경험자로서 바라보니 옥의 티가 눈에 보이는데요. 사랑해 마지 않는 한화데이즈 다음 리뉴얼에는 참고하시라고 아쉬운 점을 정리해 봤습니다. 뭐, 원래 기자단 활동할 때도 쓴소리 담당이었으니까 애교로 봐주세요 ^^





1. 고려되지 못한 태블릿PC

앞서 모바일에 최적화 되었다는 말을 했는데요. 반면에 태블릿PC는 고려되지 못했다고 볼 수 있습니다. 한화데이즈에서는 두 가지 패턴의 UI가 구현되었는데요. 웹과 모바일에 최적화된 UI입니다. 즉, 태블릿PC에서는 모바일과 동일한 레이아웃의 UI가 보여집니다. 




▶ 관련글 - 반응형 웹의 완성도를 높여주는 유용한 사이트



반응형 웹의 가장 큰 매력이라면 다양한 디바이스에 따라 유연한 레이아웃의 UI를 보여주는 것입니다. 한화데이즈도 적어도 3개 정도의 브레이크 포인트를 두었으면 어땠을까 싶습니다. 



2. 버림받은 IE8 사용자


IE8에서 한화데이즈 블로그를 접속해 보았습니다. 결과는 아래 사진과 같이 PC에서 모바일 UI가 구현되는데 레이아웃이 깨지는 것을 볼 수 있습니다. 정상적인 정보 탐색이 어렵습니다. 





사실 IE9 이전버전에서는 CSS3 미디어 쿼리를 지원하지 않기 때문에 반응형 웹이 구현되지 않습니다. 이것이 국내에서 반응형 웹의 발목을 잡고 있습니다. 여전히 IE8 이하의 국내사용자가 많기 때문입니다. 미래창조부가 발표한 국내 인터넷 이용환경 조사결과(2014 상반기)에 따르면 IE 점유율이 88.05%나 됐습니다. 그럼 IE8 이하 사용자는 얼마나 될까요?





한국인터넷진흥원(KISA) 자료에 따르면 IE8의 사용자가 29.43%로 가장 높은 IE10 사용자(29.94%)와 1%도 차이가 나지 않습니다. IE7과 IE6 사용자까지 합산하면 약 35%에 이릅니다. 가장 높은 수치입니다. 반응형 웹이 IE9 이상에서만 구현되지만 이하 버전에서도 적어도 레이아웃은 깨지지 않고 정보탐색이 가능하도록 해야 하는데 제대로 테스트가 되지 않은 것으로 보여 아쉽습니다.



3. 반응형 웹을 고려하지 않은 페이지


한화데이즈 하단에 보면 공통으로 노출되는 영역 중에 한화계열사 소셜미디어 바로가기 메뉴가 있습니다. 클릭하면 계열사별로 공식웹사이트와 운영하는 소셜미디어 채널이 한 눈에 보기좋게 정리되어 있는데 모바일에서는 어떻게 보일까요?





모바일에서 보았을 때 화면입니다. 우측과 하단 모두 잘려서 출력되는 것을 볼 수 있습니다. 반응형 웹에서 주의할 것 중 하나가 이미지에 링크를 삽입하는 것인데 디바이스 사이즈에 따라 최적화 되며 링크 자리가 이동할 수 있기 때문입니다.  




다행히 링크는 움직이지 않았는데 옥의 티라면 아직 모바일에서도 제대로 볼 수 없는 계열사 사이트들이 더러 있다는 것입니다. 아마도 플래시 기반의 사이트겠죠? 반응형 웹은 전사적인 노력이 필요한 이유입니다. 



4. 기타 : 개선바라는 옥의 티




<한화 계열사 최신글>의 경우 다양한 계열사의 최신글을 한 곳에서 볼 수 있다는 것은 큰 매력인데 계열사 이름이나 카테고리명이 대부분 지면을 차지하다 보니 정작 제목은 알아보기 어려운 점이 있습니다. 결국 눈길을 끄는 것은 한 줄의 잘 빠진 제목인데 말이죠.





끝으로 메뉴별로 글의 목록을 보고 읽고 싶은 글을 선택할 수 있는데요. 모바일에서는 워낙 리스트가 촘촘하다 보니 가독성도 떨어지고 원치 않는 글을 터치할 수도 있다는 아쉬움이 있었습니다. 참, 이미지에 대체텍스트(alt) 값이 제대로 들어가지 않았다는 제보(?)도 있었습니다. 웹접근성 인증 마크까지 따면 좋겠지만 소수의 장애인도 배려해야겠죠? ^^


아무쪼록 부족한 점은 채우며 항상 사랑받는 한화데이즈 블로그가 되길 바라겠습니다. 






 


관련글 더보기

댓글 영역