제가 웹 개발을 시작하고 느낀 점 중의 하나가 세상에 이렇게 많은 모바일 기기가 있었나 하는 것인데요. 아무래도 사용자들이 휴대전화나 태블릿을 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

최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다.





1. UI 패턴의 증식

반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. 


Cypress North


그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다.

즉, 체크아웃은 체크아웃이고 그 자체의 역할을 합니다. 로그인 모델도 마찬가지입니다. 휠 UI를 재발견할 다른 이유는 없습니다. UI 패턴은 매끄러운 경험을 통해 사용자를 안내합니다. 


몇 가지 친숙한 패턴에 대해 살펴보겠습니다. 


햄버거 메뉴 

약간의 비판이 있긴 하지만, 햄버거 메뉴를 광범위하게 사용하면 사용자들이 기능을 쉽게 인식할 수 있다는 것이 분명합니다.


Silenza


계정 등록

사이트에 가입할 때 볼 수 있는 패턴입니다. 정보를 입력하는 부분이나 소셜 계정의 로그인을 이용하는 버튼이 있을 것입니다. 여러 단계로 나눠진 폼 마법사는 필수 항목을 확인하고 다음 단계로 넘어가기 때문에, 사용자가 가입 프로세스를 잘 통과할 수 있도록 만듭니다. 


Typeform


긴 스크롤

대부분의 사람들은 모바일 기기 덕분에 긴 스크롤에 익숙합니다. 이 기술은 스토리텔링을 통해 사용자들을 이끄는 사이트에 특히 잘 어울립니다. 또한 특정 섹션으로의 스크롤로 멀티 페이지 사이트를 흉내 낼 수 있습니다.


Vimeo


카드 레이아웃

핀터레스트가 사용한 카드 패턴은, 정보를 훑어보기에 적절한 크기로 보여주기 때문에 많이 사용됩니다. 각 카드는 하나의 통합된 개념을 나타냅니다. 직사각형 형태의 카드는 '콘텐츠 컨테이너'로서, 너비가 각기 다른 디바이스에 맞춰 쉽게 재배치할 수 있습니다.


TheNextWeb


대표 이미지

시각은 가장 강력한 인간의 감각이기 때문에, 고화질의 대표 이미지는 사용자의 시선을 사로잡는 가장 빠른 방법 중 하나입니다. 대역폭과 데이터 압축 기술의 발전 덕분에 사용자들은 긴 로딩 시간에 고생하지 않아도 됩니다. 스크롤 상단에 대표 이미지가 있고, 그 아래 지그재그 섹션이나 카드를 나열하는 것이 일반적인 레이아웃입니다.


Maaemo



(광고)



2. 풍부한 애니메이션

애니메이션은 사이트의 스토리텔링, 더 많은 상호작용이나 즐거운 경험을 주기 위해 점점 더 많이 사용되고 있습니다. 

하지만 아무 곳에나 애니메이션을 넣을 수는 없습니다. 사이트의 이야기 요소와 특성에 애니메이션을 추가할지의 여부를 신중하게 고려해야 합니다. 애니메이션에 대해 다음의 두 가지 관점으로 생각해볼 수 있습니다.


- 대규모 애니메이션 : 페럴렉스 스크롤링이나 팝업 알림과 같은 효과를 포함하며, 사용자에게 좀 더 영향을 미칠 기본적인 인터렉션 도구로써 사용됩니다. 

- 작은 규모의 애니메이션 : 스피너, hover 도구 및 로딩 바를 포함하며, 사용자 입력이 필요하지 않습니다.


가장 인기 있는 애니메이션에 대해 알아보겠습니다.


로딩 애니메이션

로딩 애니메이션을 보면서 사용자는 즐겁거나 기쁨을 느낄 수도 있고 반대로 지루함을 느낄 수도 있습니다. 로딩 애니메이션은 주로 플랫한 디자인, 미니멀리즘, 포트폴리오나 싱글 페이지 사이트에 사용됩니다.


Slack via Lauren Tan


로딩 애니메이션은 되도록 단순하게 만들고 사운드를 넣지 마세요. 사이트의 특성이나 주요 컬러와도 잘 어울려야 합니다.


네비게이션과 메뉴

숨겨진 네비게이션 메뉴는 화면 공간을 절약할 수 있어서 더욱 더 인기가 많아지고 있습니다. 특정 버튼을 클릭하여 메뉴를 드러낼 때, 어색한 전환을 막기 위해 애니메이션을 사용합니다.


갤러리와 슬라이드쇼

갤러리 및 슬라이드 쇼는 사용자의 과부하 없이 여러 이미지를 보여줄 수 있는 효과적인 방법입니다. 사진 사이트, 제품 쇼케이스, 포트폴리오 사이트에 중요합니다.


Born Fighter


모션 애니메이션 

움직임은 사용자의 주의를 집중시키는 훌륭한 도구입니다. 움직임은 시각적 계층을 만드는데도 효과적이며, 입력 폼과 메뉴, 사용자의 행동을 유도하는 요소에 적용하면 사용자의 눈길을 끌 수 있습니다.


Bugaboo


스크롤

부드러운 스크롤에는 애니메이션이 필요합니다. 사용자의 스크롤 조작으로 애니메이션이 펼쳐지는 속도가 달라질 수 있습니다.


Squarespace


배경 애니메이션/비디오

단순한 애니메이션 배경은 사이트에 가시성을 더할 수 있지만, 산만할 수 있기 때문에 적당히 사용되어야 합니다. 개별 섹션이나 전체 이미지의 부드러운 움직임을 만드는 데에 사용하는 것이 중요합니다.


Dunckelfeld



3. 마이크로 인터렉션(Microinteractions)

휴대전화의 알림을 끄는 것에서부터 페이스북의 고양이 사진에 좋아요를 누르는 것까지, 마이크로 인터렉션은 우리 주변 곳곳에 있습니다. 


Slack


마이크로 인터렉션은 상태나 피드백을 전달하거나 행동의 결과를 보여주고 사용자가 무언가를 조작하는 데에 도움을 줍니다. 마이크로 인터렉션은 모든 어플리케이션에서 중요한 부분입니다.



4. 머터리얼 디자인(Material Design)

구글은 머터리얼 디자인이라는 새로운 스타일의 언어를 출시했습니다. 이는 더 현실적인 디자인을 위해 깊이와 움직임의 개념, 그림자 효과를 사용합니다.


Google Now


머터리얼 디자인의 목표는 UX 중심의 깔끔하고 현대적인 디자인을 만드는 것입니다. 미니멀한 모습에서 다른 트렌드인 플랫 디자인과 공통점이 많아보이지만, 머터리얼 디자인은 순수한 플랫 디자인보다 더 많은 깊이와 그림자를 사용합니다. 

지난 6월 구글은 웹사이트에 적합한 Material Design Lite를 발표했습니다. Lite는 vanilla CSS, HTML, JavaScript 를 사용하며, 웹 사이트에 머터리얼 디자인의 모습과 느낌을 간단하게 추가할 수 있습니다.



5. 반응형 디자인

최근 몇 년 동안 모바일 인터넷 사용의 증가로 반응형 웹 디자인은 여전히 인기를 끌고 있습니다.


UXPin


모든 기능을 갖춘 모바일 친화적인 사이트를 구축하는 것이 비교적 간단하고 저렴할 수 있습니다. 그러나 적절히 수행하지 못할 경우, 퍼포먼스와 관련하여 몇 가지 문제가 있을 수 있습니다. 최상의 반응형 퍼포먼스를 위해 Guy's Pod의 가이드를 참고해보세요.

반응형 디자인은 유용하지만, 좋은 UX를 제공하기 위해 속도를 개선하는 등의 노력과 고민이 필요합니다.



6. 플랫 디자인 (Flat Design)

플랫 디자인은 미니멀리즘, 반응형 웹 디자인, 머터리얼 디자인과 같은 다른 트렌드와 인기를 함께하고 있습니다.


Beoplay


앞으로 플랫 디자인에서는 다음과 같은 트렌드를 볼 수 있습니다.


- 긴 그림자 : 평면 디자인에 깊이를 더해 줄 것입니다.

- 생기가 넘치는 컬러 : 인기있는 UI 프레임워크와 템플릿은 더 생동감 있는 컬러를 사용하고 있습니다. 

- 간결한 타이포그라피 : 플랫 디자인에서 간결한 타입페이스는 텍스트의 가독성을 높여줄 것입니다.

- 고스트 버튼 : UX 측면에서 산만하지 않고, 사용자가 가리켰을 때 클릭할 수 있는 링크를 보여주어 기능을 수행할 수 있도록 합니다.  

- 미니멀리즘 : 신선하고 깔끔한 UI를 위해 요소의 수를 줄이는 시도가 보입니다.



지금까지 2016년의 웹 디자인 동향 6가지를 살펴보았습니다. 2015년과 크게 다른 흐름은 아니지만 그 안의 작은 요소들이 조금씩 변하고 있는 것 같습니다. ‘힙한’ 트렌드라고 무작정 따라하지 마세요. 사용자에게 최선이 무엇인지 먼저 생각해보는 것이 중요합니다.



출처 : AWWWARDSDESIGN.CCIT WORLD


by 비숑 발자국



(광고)


Posted by slowalk




이 글은 MailChilmp의 Mobile Friendliness 글을 번역한 내용입니다. 비전문가의 이해를 위해 일부 내용을 수정하거나 추가하였습니다. 


모든 인터넷의 “모바일화”가 시작된 지 2년 정도가 지났습니다. 그러나 모바일 환경에서 이메일 디자인은 아직인 것 같네요. “모바일 친화적인 이메일 디자인”은 아직 걸음마 단계입니다.  이메일은 아직도 구식의 <Table> 태그로 코딩되고 있는데, 사실 보통 웹사이트와 같은 기준으로도 모던하고, 모바일 친화적인, 반응형 웹이 적용된 이메일을 충분히 만들 수 있습니다. 





“모바일 친화적”과 “반응형 웹”은 좀 차이가 있습니다. 모바일 친화적인 이메일이 반드시 반응형 웹일 필요는 없지만, 보통 반응형 이메일은 모바일 친화적이죠. (반응형 웹에 대해 더 알아보기)



모바일 친화적 이메일의 특징을 보면 아래와 같습니다.

- 메일의 가로 크기가 고정되어 있지만, 모바일 환경에서 잘 보이는 경우가 있습니다. 이런 경우는 보통 320px의 가로 고정값을 가진 이메일인데요. 320px는 일반적인 스마트폰(아이폰)의 가로 크기입니다. (원문에는 320px을 일반적인 스마트폰의 가로 크기라고 했지만, 이후 출시된 스마폰은 화면의 크기가 점점 커지는 추세입니다. 기존 320px이던 아이폰 3~5의 화면은 레티나 기술이 적용되면서 2배인 640px이 되었으며, 최근 출시 된 아이폰6는 750px, 아이폰6+는 1080px입니다.)


- 사용자의 스크린 크기에 따라 폰트 크기가 변하지는 않지만 작은 화면에서 읽기에 충분히 크게 디자인되어 있습니다.


- 쉽게 읽을 수 있도록 각 내용을 탭 하거나 핀치 줌할 때 디자인이 망가지지 않고 칼럼(열)을 유지합니다.  


- 행동유도를 위해 엄지로 탭 할 수 있을 정도의 큰 버튼을 사용입니다. 



한편 반응형 이메일의 특징은 아래와 같습니다. 

- 미디어쿼리를 사용하여 보고 있는 기기의 스크린 크기에 따라 가로 크기가 조정됩니다. 그래서 어떤 크기, 비율에도 비슷한 비율이 적용되도록 합니다. 


- 폰트 크기가 화면의 크기에 따라 조정됩니다. 모든 모바일 기기에 맞추기는 힘들고 많이 사용하는 몇 가지 크기에 맞춰 폰트 크기가 설정되어 있습니다. 


- 다중 칼럼(열)에서 단일 칼럼으로 레이아웃이 변화합니다.


- 보이는 플랫폼에 따라 여러 요소(이미지로 된 버튼 등)들이 보이거나 감춰집니다. 



 “하나의 눈, 하나의 엄지 그리고 팔의 길이”

그럼 모바일 친화적 이메일을 위한 가이드라인이 있을까요?  모바일용 이메일을 디자인할 때, 한 가지만 명심하면 됩니다.  “하나의 눈, 하나의 엄지 그리고 팔의 길이”. 이는 작은 화면 안의 내용을 하나의 눈으로(아마 다른 눈은 한눈을 팔고 있을 듯) 볼 수 있어야 하고, 어떤 행동유도장치나 버튼도 엄지 하나로 쉽게 누를 수 있어야 하며, 모든 글자나 시각 요소들은 사용자의 팔 길이 안에서 편안히 읽힐 수 있도록 충분히 커야 한다는 것을 의미합니다. 



이런 목표들을 위한 세부 가이드라인은 다음과 같습니다. 

- 최저 폰트 크기는 16px로 하자 (애플은 17~22px을, 구글은 18~22px을 권장하네요)


- 버튼과 같은 행동유도장치(CTA; call to action)의 크기는 46px의 정사각형 보다 커야합니다. (애플은 44px, 구글은 48px을 권장하고 있습니다)


- 링크를 여러개로 쪼개는 것을 피해야 합니다. 가장 중요한 하나의 링크를 클릭하기 어려워 질 수 있습니다. 


완벽한 가이드라인은 아니지만 이런 가이드라인은 효과적인 모바일 이메일을을 만들 때 출발점이 될 수 있습니다. 더 깊게 알고 싶다면 역시 메일침프의 done some leg work를 참고해 주세요. 



다양한 기기의 크기

사용자들은 스마트폰과 같은 모바일 기기를 어떻게 사용할까요?  “사람들의 행동”을 고려한 디자인이 되어야 합니다. 그래서 기기 환경은 매우 중요합니다. 우리가 만든 이메일을 누군가가 볼 때 그 환경이 스마트폰인지, 태블릿인지에 따라 다른 디자인으로 접근해야 합니다. 


사람들이 어떻게 기기를 쥐는지 생각해 봅시다. 스마트폰은 보통 한 손으로 쥡니다. 그리고 보통 하나의 엄지로 사용합니다. (스크린 내에서) 엄지를 사용하여 편안히 쓸 수 있는 영역은 사용자가 주로 쓰는 손의 반대편 영역입니다.즉, 오른손잡이는 왼쪽 영역을 탭하기 편한 것이죠.





반대로 태블릿은 보통 두 손으로 쥐고 사용합니다. 양 엄지는 스크린의 가장자리 영역을 쉽게 터치할 수 있지만 가운데 영역은 터치하기 어렵겠지요. 





가능하다면 당신의 디자인은 위의 두 가지 시나리오를 고려해야 합니다. 스마트폰에서 엄지 하나로 누르기 쉽게끔 화면의 가로를 꽉 채우는 큰 버튼과 같은 중요한 행동유발요소를 배치해야 합니다. 이렇게 하면 오른손잡이와 왼손잡이 모두를 수용할 수 있겠죠.


또한 반응형웹에서 이용되는 미디어쿼리를 이용해 기기의 가로 모드와 세로 모드를 고려하여 다양한 “중단점(break point)”을 만들 수 있습니다. 그리고 태블릿 환경에서도 같은 방법을 적용합니다. 

마지막으로 이메일의 가로 크기가 480px의 화면까지 작아질 수 있도록 디자인합니다. (가장 일반적인 가로 모드의 화면 크기, 세로 모드의 크기는 320px)


결론

이메일은 매우 오래되고, 중요한 소통 수단입니다. 이런 이메일의 환경도 모바일 친화적으로 변해야 하는 것은 당연하겠지요. 위의 간단한 가이드라인을 적용해서 데스크탑 환경과 모바일 환경에서 모두 잘 보일 수 있는 이메일을 디자인해 보는 건 어떨까요.



출처 : MailChimp



by 북극곰 발자국

Posted by slowalk



반응형 웹디자인이 무엇일까요? 얘기는 많이 들었지만 잘 모르고 그냥 넘겼을지도 모릅니다. 하지만 이 분야에 종사하시는 분이라면 이 개념을 확실히 알고 넘어갈 필요가 있습니다.


디자이너 산디스 씨(Sandijs Ruluks)블로그에 반응형 웹디자인을 gif로 쉽게 설명했습니다. 그는 프린트 기반의 디자인을 하다가 웹디자인을 시작해서 좀 더 일반적인 관점에서 잘 설명했는데요.

 

반응형 웹디자인은 다양한 스크린 크기에 대응할 수 있는 훌륭한 해결책입니다. 하지만 이것을 단순히 프린트 기반의 디자인과 같은 개념으로 이해한다면 당연히 어렵습니다. 정해진 페이지 크기가 없으며, 인치(inches)나 밀리미터(mm)의 단위를 쓰지 않습니다. 그렇다고 픽셀만으로 웹과 모바일 디자인한다는 것도 구시대 발상이 되었는데요. 우리는 다양한 스크린 크기에 맞춰 유동적으로 레이아웃을 만들 수 있는 반응형 웹디자인을 정확하게 알 필요가 있습니다.


1. 반응형 웹디자인 vs 적응형 웹디자인 (Responsive vs Adaptive web design)

비슷한 말이지만 같지 않습니다. 적응형 웹디자인이라는 단어는 생소할 수도 있는데요. 반응형 웹디자인은 모든 스크린 크기 맞춰 유동적으로 작동합니다. 하지만 이 블로그에서 말하는 적응형 웹디자인은 아래 gif과 같이 특정 크기에서만 반응하는 방식입니다. 더 좋고, 안 좋은 방식은 없으며, 콘텐츠에 맞춰 방향을 정하시면 됩니다.




2. 플로우 (Flow)

스크린이 작아졌을 때, 콘텐츠들은 수직 공간을 더 차지합니다. 그리고 그것 아래 요소들은 아래 첫 번째 gif처럼 밀려나게 되죠. 그것을 플로우(Flow)라고 합니다.




3. 상대적인 요소들 (Relative units)

사용자는 다양한 사이즈의 기기를 쓰기때문에, 유연하고 어디서나 작동하는 유연한 레이아웃이 필요합니다. 예를 들어 아래의 gif처럼 50% 단위를 쓰면 데스크톱은 물론이고 모바일에서도 50%의 크기를 유지하겠죠. 저는 개인적으로 반응형 웹사이트를 만드는 데 핵심이라고 생각하는 부분입니다.

 



4. 분기점(Breakpoints)

분기점을 이용하면 특정 크기에 맞는 코딩으로 바꿀 수 있습니다. 예를 들어 데스크톱에서는 3단의 레이아웃을 쓰고 싶은데, 모바일에서 3단을 유지하면 너무 작게 보이는 경우가 있습니다. 이럴 때 분기점을 이용해, 특정 넓이 이하에서는 3단을 1단으로 바꿀 수 있습니다.




디자이너분들이 이걸 잘 사용한다면 모바일웹에서도 본인이 원하는 디자인으로 맞출 수 있습니다. 하지만 레이아웃을 바꿔서 다른 요소들에 영향을 주는지 주의하세요. 웹사이트를 순식간에 망가트릴 수 있습니다.

 


5. 최댓값과 최솟값 (Max and Min values)

가끔 모바일 웹사이트를 열었는데 이미지가 화면에 꽉 차면서 깨지는 경우가 있습니다. 그것은 이미지가 브라우저 넓이보다 작은 데 억지로 늘려놓았기 때문이죠. 이미지 넓이에 최댓값을 설정해준다면 브라우저 크기가 이미지를 크기를 훨씬 넘어가도 더 이상 커지거나 깨지지도 않을 것입니다.




6. 그룹 지은 요소들 (Nested objects)

요소들이 많아 통제하기 힘들 때, 그 요소들을 그룹으로 만들어 한꺼번에 통제할 수 있습니다. 이 방식은 로고나 버튼 같은 크기의 변경이 필요없는 요소들에 유용합니다.




7. 모바일 혹은 데스크톱 우선 작업 (Mobile or Desktop first)

모바일에서 데스크톱으로 프로젝트가 반응형 작업을 할 때와 데스크톱에서 모바일로 진행될 때 기술적으로 큰 차이는 없습니다. 하지만 모바일에서 먼저 시작할 때 제한이 적고, 콘텐츠 배치를 결정할 때 수월하게 할 수 있습니다. 그래도 프로젝트별로 다를 수 있으니 프로젝트에 맞춰서 해보시길 권합니다.  




8. 웹폰트와 시스템 폰트 (Webfonts vs System fonts)

반응형 웹디자인에서 유동적인 레이아웃을 위해 이미지보다 폰트를 많이 쓰는데요. 폰트는 접속 시 내려받아 설치하는 웹폰트와 사용자 기기에 원래 설치된 시스템폰트가 있습니다. 웹폰트를 사용하면 웹사이트를 예쁘게 만들 수 있는 것은 사실입니다. 하지만 웹폰트를 다양하게 쓰는 것은 그만큼 페이지를 느리게 할 수 있습니다. 개인적으로 제목이나 디스플레이를 위한 폰트는 웹폰트로 하고 본문은 시스템폰트를 사용하는 것을 제안합니다.




9. 비트맵 방식과 벡터 방식 (Bitmap images vs Vectors)

여러분이 만든 아이콘이 스큐어모픽 스타일처럼 화려하고 디테일하다면 비트맵 방식(jpg, png, gif등등)을 사용하는 것이 맞습니다. 하지만 이런 스타일이 아니라면 벡터방식(svg)을 써보세요. 해상도가 높은 기기에서도 선명하게 보일 것입니다. (예시)



Svg는 가볍고 선명하지만 구형 브라우저에서 지원하지 않아 분기해서 써야 하는 불편함이 있습니다. 또한 굴곡이 많다면 비트맵보다 무거울 수도 있으니 주의해서 써주세요.

 


저는 퍼블리셔로 일하면서도 반응형 웹디자인의 개념만 대충 알고 있었습니다. 하지만 클라이언트와 미팅 중에 반응형 웹디자인에 대해 설명해야 되는 상황이 있었는데요. 저도 모르게 전문용어를 남발해서 클라이언트를 난감하게 만들었습니다.

전문성은 자신이 가진 지식이나 업무능력이 전부가 아니라고 생각합니다. 클라이언트 혹은 사용자들에게 이런 개념을 잘 전달하는 소통능력도 중요하지 않을까요? :)



by 숭이발자국


출처: FroontBlog





Posted by slowalk