'반응형웹'에 해당되는 글 2건

  1. 2016.08.24 반응형 웹, 정말 효과적일까? (6)
  2. 2016.05.09 새로운 아름다운가게를 소개합니다.

제가 웹 개발을 시작하고 느낀 점 중의 하나가 세상에 이렇게 많은 모바일 기기가 있었나 하는 것인데요. 아무래도 사용자들이 휴대전화나 태블릿을 PC보다 많이 사용하다 보니 다양한 환경에서 웹페이지가 잘 돌아가는지 테스트하고 오류에 대응하는 일이 큰일이 되었습니다.


이때 빼놓을 수 없는 개념이 ‘반응형 웹(Responsive Web)’입니다. 해상도의 변화, 즉 화면 크기에 따라 레이아웃이 조절되는 웹페이지를 말합니다. 사용자의 입장에서는 어느 기기에서든 같은 콘텐츠를 적절한 화면으로 볼 수 있고, 개발자 입장에서는 기기마다 따로 웹페이지를 개발하지 않아도 되므로 비용을 절감할 수 있습니다. 이런 이유로 반응형 웹은 2010년  ‘A List Apart’라는 웹디자이너 매거진에 처음 소개된 이래로 큰 인기를 얻고 있습니다. (‘2016 꼭 알아야 할 웹 디자인 트렌드’에 나온 반응형 웹 보러가기)


하루가 멀다 하고 모바일 기기들이 쏟아져 나오는 상황에서 반응형 웹은 분명히 많은 어려움을 해결해 줍니다. 하지만 반응형 웹이 인기만큼 큰 효과를 가져다줄 수 있는지는 좀 더 생각해봐야 합니다. 왜 그럴까요? 반응형 웹이면 모바일 대응 끝, 아닌가요?






반응형 웹의 약점


로딩 시간이 길어진다


웹 페이지의 스타일을 결정하는 CSS는 표현의 한계를 가졌던 이전 버전과는 달리 CSS3가 되면서 다양한 표현이 가능해졌습니다. 특히 미디어와 화면 해상도의 정확한 구분이 가능해지면서 기기 각각의 조건에 맞는 스타일을 적용할 수 있게 되었습니다. '@media'라는 CSS문법을 사용해서 '미디어 쿼리'라고 하는데 이것이 반응형의 기본이 됩니다.

하지만 여기서 문제가 발생합니다. 기본적으로 반응형 웹은 처음 페이지가 로딩될 때 미디어 쿼리를 불러오게 되는데, 이때 모든 해상도 대응을 위한 CSS와 이미지 등을 전부 불러오게 됩니다. 사용자가 페이지를 보고 있는 화면 해상도와는 상관없는 다른 해상도의 데이터를 미리 불러오게 되므로 자연스럽게 웹 페이지의 로딩 속도가 지연되고 사용자들은 불편함을 느끼게 됩니다.



복잡한 콘텐츠에는 맞지 않는다


우리나라의 대표 포털 사이트인 네이버나 다음이 반응형 웹을 적용하지 않는 이유는 무엇일까요? 다양한 이유가 있겠지만 주요한 이유 중 하나는 바로 콘텐츠의 복잡성 때문입니다.



네이버(www.naver.com) 다음(www.daum.net)의 웹사이트 메인 화면



 반응형 웹은 해상도를 기준으로 웹페이지의 레이아웃을 변형하는 방법입니다. 이때 레이아웃과 콘텐츠가 복잡하지 않아야 최대 해상도 화면부터 최소 해상도의 화면까지 일관된 사용자 경험을 제공할 수 있습니다.





단순한 레이아웃과 콘텐츠로 구성된 스타벅스(www.starbucks.com)의 반응형 웹



우리나라는 사이트를 구성할 때 상대적으로 많은 정보를 담는 편입니다. 한 페이지에 담는 정보의 양도 많습니다. 물론 이것이 나쁘다거나 트렌드에 뒤처진다는 의미는 아닙니다. 문화적인 특성이죠. 하지만 반응형 웹을 무조건 적용하기에는 우리나라 사용자의 편의성 측면에서 적합하지 않을 수 있습니다. 따라서 콘텐츠의 양에 따라 반응형의 적용 여부를 결정해야 합니다.

콘텐츠의 유형에 따라서도 반응형 웹에 적합한지 구분이 됩니다. 표를 이용한 텍스트가 많은 경우 레이아웃이 변하면서 표의 기능이 약해지며 가독성이 떨어집니다. 글자가 많이 들어간 이미지가 많은 경우에도 이미지 자체가 축소되기 때문에 가독성이 떨어지게 됩니다. 물론 이러한 문제를 해결하는 방법은 있습니다. 텍스트가 들어간 이미지의 경우, 해상도와 레이아웃에 맞게 다른 사이즈의 이미지를 불러올 수 있습니다. 하지만 그 노력에 비해 반응형 웹이 과연 얼마나 효과적인지 생각해봐야 합니다. 추가 콘텐츠를 생성하거나 유지 보수를 하는데 똑같이 많은 노력이 들게 될 테니까 말이죠.

이 외에도 반응형 웹은 HTML5와 CSS3를 기반으로 하므로 추가 개발 없이는 Internet Explorer 8과 같은 하위 브라우저 대응이 어렵습니다. 또한, 상위 버전 브라우저라고 할지라도 각 브라우저별로 적용되는 기준이 달라 크로스 브라우징(웹 표준 기술을 사용하여 브라우저 종류에 구애받지 않고 웹을 이용할 수 있도록 하는 개발을 말합니다.)이 어려운 점도 아쉬운 부분입니다.




대안으로써의 적응형 웹?!


반응형 웹의 이러한 문제점들을 대안으로 ‘적응형 웹’이 떠오르고 있습니다. 반응형 웹과 적응형 웹은 모두 웹 사이트가 다양한 해상도의 화면에서 원활한 정보와 더 나은 UX를 제공하고자 하지만 구현하는 방법은 다릅니다.




반응형 웹과 적응형 웹의 구성 방식 비교




해상도가 변하면 유동적으로 레이아웃이 변하는 반응형 웹과는 달리 적응형 웹은 특정 디바이스, 또는 해상도를 정해두고 그 비율에 맞춰 웹페이지를 구성하는 방식입니다. 적응형 웹은 2011년 Aaron Gustofson의 책 ‘Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement’를 통해 처음 알려졌습니다. 반응형 웹 개념을 포함하는 포괄적인 개념으로 설명했으나 국내에서는 기술적인 부분에 초점이 맞춰져 통용되고 있습니다.

모든 디바이스에 적용할 CSS를 초기에 로드하는 반응형 웹과는 다르게 적응형 웹은 사용자의 기기가 데스크톱인지, 스마트폰 또는 태블릿인지를 서버나 클라이언트에서 체크하여 그에 최적화된 HTML/CSS을 불러옵니다. 필요한 정보만을 노출하게 되므로 사용자는 접속한 기기에서 좀 더 빠른 속도로 웹사이트를 이용할 수 있습니다.



네이버(www.naver.com)의 적응형 웹(왼쪽부터 차례로 휴대폰/태블릿/PC)



모든 해상도에 레이아웃을 대응하는 반응형 웹과는 달리 적응형 웹은 정교함이 떨어지지만, 정해진 해상도에서는 빠른 속도로 적절한 레이아웃을 제공할 수 있습니다.

 하지만 적응형 웹 역시 여러 단점을 가지고 있습니다. 기기에 맞게 HTML/CSS이나 URL을 분리 개발하는 비용 문제가 발생합니다. 또 새로운 모바일 기기가 시장에 나오면 이에 대한 대응과 개발이 필요한지 고려해야 하는 부분이 생깁니다. 그렇다면 반응형 웹에 대한 완벽한 대안은 없을까요?




기술보다는 사용자 경험


여기서 한 가지 의문이 듭니다. 과연 사용자들은 이 사이트가 반응형 웹인지 아닌지 얼마나 알고 있을까요? 반응형 웹으로 만들어졌기 때문에 들어오고 반응형 웹으로 만들어지지 않았으면 사이트를 박차고 나갈까요?  


모바일 환경에서 뉴스를 읽는 사용자를 고려한 뉴욕타임즈(www.nytimes.com)의 적응형 웹 



반응형 웹이든 적응형 웹이든 사용자는 모바일 기기에서의 웹 접근이 편해졌고, 이에 따라 만족스러운 경험을 하게 되었기 때문에 사이트를 이용합니다. 따라서 기술이 아니라 사용자를 먼저 생각해야 합니다. 제공하는 콘텐츠의 유형과 양을 생각해보고, 모바일 사이트에서 사용자가 어떤 행동을 하기를 원하는지 생각해보아야 합니다. 그리고나서 그 방향이 반응형 웹에 적합한지, 적응형 웹에 적합한지, 아니면 앱을 만들거나 새로운 기술을 도입해야 하는지를 결정해야 합니다.


 반응형 웹은 모바일 시대에 많은 이점을 가져다주는 기술입니다. 세상에 나온 지 얼마 안 된 만큼 앞으로 점점 발전할 것입니다. 이미 반응형 웹의 문제를 극복하려는 방법들이 공유되고 있습니다. (반응형 웹사이트를 빠르게 만드는 7가지 방법 보러가기) 하지만 반응형 웹 기술이 발전하거나 완벽한 대안이 나온다고 하더라도, 반응형 웹이라는 작은 우물에 갇혀 중요한 ‘사용자’를 놓치지 않도록 주의해야 합니다.


출처 : Despreneur, ITDAILY, SMASHING




작성: 김다래



Posted by slowalk


아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다.

아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다.



기존의 아름다운가게 홈페이지


아름다운가게 리뉴얼 방향성 및 목표

1. 메인 페이지에서 다양한 콘텐츠를 노출

2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달

3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성

4. 직관적인 디자인을 통해 웹사이트 사용성 제고

5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화


이 방향을 다음과 같이 적용하여 리뉴얼 작업을 진행했습니다.



1. 메인 페이지에서 다양한 콘텐츠를 노출


대부분 웹사이트의 메인 페이지에서는 큰 사이즈의 메인 배너를 사용하는 것이 아직까지 일반적입니다. 하지만 아름다운가게는 콘텐츠를 다양하게 보여줄 방법을 고민했습니다. 이에 따라, 메인 배너 기능을 하는 요소와 다양한 콘텐츠를 함께 노출하기로 했습니다.


초기 기획안과 (moqups 툴 사용, 관련 내용 더 보기)  실제 운영 중인 현재 메인 페이지 비교


주로 글과 사진으로 이루어진 콘텐츠 중심의 배열로 메인 페이지의 기획안이 확정되었고, 이를 기반으로 다양한 디자인 시안이 오갔습니다. 그 결과 현재 아름다운가게의 메인 페이지는 콘텐츠 위주의 생동감 있는 메인 형태를 취하고 있습니다.



2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달



아름다운가게의 CI는 잎들이 모여 꽃이 된 형태입니다. 이 형태는 나보다 우리를 먼저 생각하고 환경을 지키기 위한 다섯 가지 실천(기증, 되살림, 윤리적소비, 자원활동, 나눔활동)의 상징으로, 나눔과 순환을 소중히 여기는 그물코정신과 되살림정신을 내포하고 있습니다. 특별히 아름다운가게의 색상인 연두색(mild green)은 생명과 환경, 미래와 희망을 상징합니다. 이 메인 색상을 웹사이트에 전면적으로 통일되게 사용함으로써 아이덴티티를 확실하게 전달했습니다.


아름다운가게 주요 컬러가 사용된 아이콘 디자인 예시



3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성



아름다운가게는 여러 패밀리 사이트를 가지고 있습니다. 그 중에서도 자원활동, 나눔교육, 사회적기업센터, 인재채용 페이지는 더욱 중요한데요. 해당 페이지들이 메인 사이트와 함께 한눈에 보이면서도 접근하기 쉽도록 초점을 맞추었습니다. 상단 바에 각 패밀리 사이트들로 이동할 수 있는 탭 구조를 만들었습니다. 이를 통해 메인 사이트와 패밀리 사이트 간에 이동이 자유롭게, 또한 언제든 메인 사이트로 돌아올 수 있게 되었습니다. 또한 다른 패밀리 사이트들은 셀렉트 박스를 통해 이동할 수 있게 상단에 패밀리 사이트들을 배치해 사용성을 높였습니다.



4.  직관적인 디자인을 통해 웹사이트 사용성 제고


아름다운가게 웹사이트 리뉴얼 작업에서 가장 중점적으로 고려한 포인트는 ‘사용성을 높인다’라는 점이었습니다. 다양하고 많은 정보를 가지고 있는 사이트이기 때문에 메뉴 구조부터 디자인까지 복잡하기보다는 심플하고 간결하게 혼란을 주지 않는 것이 중요했습니다. 사이트를 이용하는 연령대와 주 사용자를 고려해 최대한 직관적이고 쉽게 사이트를 이용할 수 있도록 하는 것입니다.


이에 따라, IA(Information Architecture)를 구성할 때 사용자들이 메뉴명만 보고도 어디로 이동할지 고민하지 않고 예측할 수 있도록 메뉴명을 조금씩 변경했습니다. 변경한 사업소개 하위 메뉴명으로, 아름다운가게의 사업을 한 페이지에서 볼 수 있는 ‘사업 한눈에 보기’와 연혁을 대신한 ‘걸어온 길’ 등이 있습니다.


또한, 각 하위 메뉴가 많은 상위 메뉴에는 게이트 페이지를 두어 각 메뉴들에 대한 설명과 어느 페이지로 이동해야 내가 원하는 정보를 얻을 수 있는지 간편히 볼 수 있게 하였습니다. 각 게이트 페이지에서는 하위 메뉴들의 간단한 소개와 사진을 통해 해당 메뉴를 사용자가 인지할 수 있습니다.



5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화



아름다운가게에서 주요한 참여 방법은 매장에 기부하거나 매장에 방문해 물건을 구입하는 것입니다. 그렇기 때문에 ‘매장찾기’ 메뉴가 사이트 내에서 가장 중요한 역할을 하게 되었습니다. 따라서 매장찾기를 메뉴 중에서도 가장 우선순위에 두어 어떤 사용자가 보더라도 쉽게 눌러보고 확인할 수 있게 유도하였습니다. 또한, 현재 내 위치를 중심으로 가까운 매장을 찾을 수 있고, 검색을 통해서도 매장을 쉽게 찾을 수 있게 했습니다. 지도 위에 매장을 위치를 바로 보여주어 정확성 또한 높였습니다. 해당 매장에 대한 자세한 정보는 팝업 창으로 뜨고 공유, 인쇄하기도 간편하게 구성했습니다. 매장찾기 메뉴를 구성하면서 사용성 테스트를 함께 진행하여 사용자가 원하는 정보와 구성을 최적으로 찾을 수 있었습니다.



아름다운가게 웹사이트 리뉴얼은 킥오프미팅부터 메인 사이트 오픈까지 10개월의 기간이 걸렸습니다. 그만큼 완성도와 사용성에 중점을 두었고, 웹사이트 리뉴얼 이벤트 진행 당시 사용성이 높아졌다는 후기를 받으며 성공적으로 운영하고 있습니다. 리뉴얼한 아름다운가게 웹사이트, 지금 방문해보세요!


by 양 발자국


Posted by slowalk