요즘 워드프레스와 같은 CMS(Contents Management System)를 기반으로 홈페이지를 제작하는 경우가 많아지면서, 콘텐츠를 관리하기가 더욱 수월해졌습니다. 개발자나 제작사를 거치지 않고 직접 글을 게시하거나 편집할 수 있게 되었지요. 

그래서 웹사이트 제작 프로젝트를 진행할 때 관리자의 글 편집 기능을 좀 더 신경 쓰게 되는데요. 슬로워크에서는 콘텐츠를 깔끔하게 정리하여 게시할 수 있는 본문 작성의 가이드를 드리기도 합니다. 가이드에 맞춰 공지나 새 소식에 게시할 글을 작성하면, 별도의 디자인이나 퍼블리싱 과정 없이 본문의 요소를 표현할 수 있습니다.


본문 스타일가이드의 예본문 스타일가이드의 예



본문의 스타일을 고민하기에 앞서, 게시물의 원고를 준비하는 단계를 생각해봅시다. 스타일 가이드를 잘 만들어두었다고 해도, 원고의 적절한 가공이 없으면 그 내용을 효과적으로 전달하기 어렵습니다. 


제목은 어떻게 쓸 것인지, 단락은 어떻게 나눌 것인지, 어느 부분에 표와 이미지를 활용할 것인지 고민해보셨나요? 또한, 종이 위의 보고서를 만드는 것이 아니라 웹사이트에 글을 올릴 것이므로 웹의 속성을 고려할 필요가 있습니다. 적절한 콘텐츠 표현을 위해 어떠한 고민이 필요한지, 요소별 체크포인트를 알아봅시다.



텍스트 - 소제목을 활용하거나 단락을 구분합니다.텍스트 - 소제목을 활용하거나 단락을 구분합니다.


1. 텍스트

- 제목과 본문을 구분하였는가: 제목의 단계를 활용하여 내용의 상하/포함 관계를 나타냅니다.
- 소제목으로 구분하였는가: 내용이 길고 단락마다 주요 내용이 다르다면 소제목으로 구분해보세요.
- 요약글을 더했는가: 가독성이 높아집니다.
- (본문 영역의 너비가 넓다면,) 단을 나눠서 글을 썼는가: 가독성을 높이는 데 도움이 됩니다.
- 전체 글의 양이 적절한가: 웹은 스크롤이 되기 때문에 본문의 양이 많아도 괜찮을 것 같지만, '스크롤의 압박'이라는 말도 있지요. 읽기 부담스러운 양의 본문은 사이트 이탈을 유발할지도 모릅니다.



표 - 데이터의 정렬을 확인합니다표 - 데이터의 정렬을 확인합니다


2. 표

- 표의 형태로 표현하기 적합한 콘텐츠인가: 단순히 레이아웃을 위해 표를 사용하지는 않았나요? 행과 열로 구분할 수 있고 여러 항목의 비교가 필요한 내용인지 살펴봅시다.
- 행과 열의 수가 적절한가: 행과 열이 너무 많으면 특히 모바일 디바이스에서 표에 담긴 내용을 파악하기 어려울 수 있습니다.
- 데이터의 정렬을 확인했는가: 숫자 데이터는 오른쪽 정렬을, 일반적인 글자 데이터는 왼쪽 정렬을 합니다. 표의 제목 행은 그 데이터 정렬과 같이 합니다. 되도록 가운데 정렬은 사용하지 않습니다.





3. 도식

- 도식으로 표현하기 적합한 콘텐츠인가: 도식은 주로 그룹 사이의 관계를 나타내거나, 구조, 변화를 나타낼 때 유용합니다. ex) 조직 구조도
- 다른 요소로 대체할 수 있는가: 웹상에서 도식을 사용하기가 쉽지는 않기 때문에 꼭 필요한 부분에만 사용하세요. 절차나 순서를 알려주는 내용에는 화살표 특수기호만 이용해도 좋습니다. 
- 도식의 크기와 형태가 웹사이트에 적절한가: 표와 마찬가지로, 도식을 가로나 세로로 너무 길게 표현하면 오히려 내용을 파악하기 어렵고, 모바일 환경에서는 별도의 도식 이미지를 준비해야 할 수도 있습니다.



이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)




4. 이미지

- 캡션을 표기하였는가: 사진이나 이미지에 설명을 덧붙이면 본문 내용의 이해에 도움이 됩니다. 
- 이미지와 텍스트를 섞어 작성하였는가: 되도록 본문 전체를 웹 포스터 형태의 단일 이미지로 게시하거나, 이미지만 올리는 경우를 피하세요. 로딩 속도를 지연시킬 수도 있고, 특정 내용을 찾기 위한 검색에도 큰 도움이 되지 않습니다. 
- 이미지의 비율이 적절한가: 반응형 웹의 경우, 가로로 긴 와이드 이미지는 모바일 환경에서 너무 작게 보일 수도 있습니다. 



링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)




5. 링크

- 링크와 링크가 아닌 요소를 구분하였는가: 링크 텍스트를 밑줄이나 다른 색상으로 구분해주세요. 클릭할 수 있는 것인지 명확히 해주는 것이 좋습니다. 링크를 단락과 구분하여 별도로 표시하는 것도 좋습니다. 이미지 자체에 링크하기보다는 텍스트로 링크를 표시하여, 사용자가 실수로 클릭하거나 이미지 확대 보기와 혼동하지 않도록 하세요.




웹상에서 글쓰기도 다른 글쓰기와 크게 다르지 않습니다. 다만 몇 가지 특징을 알고 준비한다면, PC와 모바일 모든 환경에서 보기 좋고 이해하기 쉬운 글을 쓸 수 있습니다. 사이트를 통해 제공하는 정보는 결국 방문자들을 위한 것입니다. 같은 내용이라도 쉽고 적절하게 표현하였는지 한 번 더 확인해보세요.







작성: 오예슬


Posted by slowalk

아래 이미지는 패턴일까요? 로고일까요? 디지털 환경의 발전과 함께 브랜드의 접점도 많아졌습니다. 브랜드는 일관성 있게 장기적으로 브랜드 가치를 전하고, 단기적으로는 다양한 세부 접점에 대응할 수 있어야 합니다. 그렇다고 빠른 반응이 필요한 상황에서 같은 그래픽 요소를 단순 반복하는 것만이 유일한 대안은 아닐 것입니다. 일관성은 반복(repetition)만으로 만들어지지 않기 때문입니다.




일관성은 일정한 패턴의 구조 형성(formation)과 인식(recognition)으로 이루어집니다. 패턴은 우리 뇌가 행동, 생각, 기억을 통해 궁극적으로 어떠한 믿음을 형성하도록 하는 방법이기도 합니다. 패턴에는 여러 개별 요소의 차이와 변화를 수용하면서도 일관성을 유지하는 특별함이 있습니다. 


브랜드 에이전시 Method의 Marc Shillum의 패턴으로서의 브랜드(Brand as Patterns)의 일부를 요약하여 브랜드에 필요한 패턴의 속성을 소개합니다.


1. 패턴은 가변적이면서도 일관적입니다.

패턴은 기본 요소를 가지고 가변적 재구성이 가능합니다. 요소의 재구성은 또 다른 의미를 만들 수 있습니다. 그러나 새로운 의미는 이미 익숙한 기본 요소로 만들어집니다.



재구성이 가장 쉬운 패턴 중 하나는 영문 알파벳입니다. 옥스퍼드 영어 사전에는 171,476단어가 있습니다. 그러나 그 단어들은 26개의 알파벳으로 구성되었습니다. 우리는 단어를 각 글자의 패턴으로 인식하고 의미를 미리 파악합니다. 단어를 계속 접할수록 단어에 대한 하위 패턴이 학습되어 단어를 읽을 때 글자 하나를 읽기보다 하나의 패턴으로 읽게 됩니다.




아이폰 앱 그리드는 사용자가 자신이 원하는 대로 앱의 위치와 순서를 바꿀 수 있게 합니다. 앱이 덜덜 떠는 모습은 인터페이스가 가장 유연하게 조정될 수 있는 상태임을 알려줍니다. 앱 아이콘에 동일하게 적용되는 둥근 모서리는 애플 제품의 둥근 모서리를 연상시킵니다. 각 앱 아이콘은 브랜드의 성격이 반영되어 서로 다른 모습이지만, 애플의 아이콘 제작 가이드라인에 맞춰 제작된 이미지와 규격화된 그리드에 들어갔을 때는 애플 제품의 한 부분으로 인식됩니다. 패턴의 일관성을 부여하는 그리드는 사용자마다 아이폰의 배경화면 모습은 다르지만, 애플 기기의 화면임을 바로 알 수 있게 합니다.



뉴스비트(Newsbeat)는 BBC가 16-24세를 주 대상으로 하는 뉴스서비스입니다. 뉴스비트의 비주얼 아이덴티티는 ‘beat’의 4개 글자를 4분할 된 영역 안에서 운율감이 느껴지도록 표현합니다. 웹사이트에 처음 접속하면 워드마크가 움직이면서 비트를 연상시키며, 헤드라인 이미지나 스크롤시 비트의 움직임도 시각적으로 경험할 수 있습니다. 4개의 움직이는 요소를 바탕으로 다양한 접점과 콘텐츠에 맞게 적용되는 시각적 패턴이 적용된 사례입니다.




2. 패턴은 여러 작은 의미가 모인, 하나의 커다란 아이디어가 될 수도 있습니다.

패턴은 부분적으로 다양한 메시지를 전달하면서 하나의 종합적인 메시지를 전달할 수 있게 합니다. 만다라나 이슬람 예술 양식, 문학의 작문 구성, 영화의 화면 분할 구도 등에서 패턴은 오랜 시간 동안 활용되었습니다.



한스 홀바인의 페인팅 ‘대사들’의 작은 요소들은 각자의 의미가 있습니다. 커튼 구석에 숨겨진 십자가상, 끊어진 류트(악기)의 줄, 바닥에 표현된 해골 이미지 등은 두 대사를 묘사한 전체 모습 안에서 각자의 의미를 전달합니다. 브랜드에 비교한다면, 패턴은 세부 접점의 표현이 모여 브랜드의 커다란 아이디어를 전달하도록 합니다.




포르투갈 포르투시 브랜드 아이덴티티 디자인은 작은 요소가 모여 커다란 아이디어를 이루는 패턴의 요소를 보여주는 사례입니다. 시를 상징하는 다양한 요소를 아이콘으로 표현합니다. 아이콘은 개별적 의미를 가지면서도 여러 조합의 다양한 패턴으로 만들어져 또 다른 의미를 만듭니다. 광고판, 공공 교통수단 등 여러 접점의 공간에 맞춰 확장되어 사용할 수 있습니다. 다양한 패턴의 모습은 다르지만 궁극적으로 포르투시를 상징합니다.




3. 패턴은 새로움을 쉽게 인지하고 기억하게 하는 방법입니다.

패턴의 반복은 인식을 강화시킵니다. 그리고 패턴의 변화는 원형의 의미와 관련성을 유지하면서 새로운 요소를 수용하여 흥미를 유발합니다.







휘트니 미술관(Whitney Museum of American Art)의 비주얼 아이덴티티는  ‘W’ 원형의 구조를 유지하며 매체와 내용에 맞게 변합니다. 문구류와 같은 전통적인 어플리케이션 요소부터 웹사이트에 까지 다양한 매체에 효과적으로 대응해 노출됩니다. 새로운 전시회를 알릴 때도 ‘W’는 유지하면서 전달해야 하는 주요 메시지를 더욱 돋보이게 하는 구조를 가진 아이덴티티입니다.



이미지 출처: IKEA


유사성을 바탕으로 변화하는 패턴의 속성은 브랜드 경험에 반영될 수 있습니다. 이케아 매장은 일관성 있는 경험을 제공합니다. 매장에 들어가면 파란 가방과 연필, 줄자를 손에 넣게 됩니다. 부엌, 거실, 침실 등의 공간을 지나며 가구를 구경하고 나면 잠시 쉬며 음식을 먹게 됩니다. 음식을 먹은 후에는 사고 싶은 물건을 사게 됩니다. 이러한 기본 경험 구성 안에는 빨리 지나갈 수 있는 길과 신상품 소개나 특정 테마 공간이 자리합니다. 모듈화된 기본 공간 구성 안에서 조금씩 변화를 주며 다시 방문하는 소비자에게 지속해서 흥미 요소를 제공합니다.



패턴으로서의 브랜드

패턴은 브랜드의 요소인 결과물(Artifacts), 행동(Behaviours), 그리고 개념(Concepts) 간의 유기적인 상호 일관성을 구축합니다. 브랜드가 추구하는 가치를 유지하면서 역동적으로 변하는 다양한 상황에 맞춰 대응하도록 돕습니다. 패턴의 상호 일관성은 서로 다른 성격의 매개체와 내용이 상호 보완하는 장치로 사용되기 때문입니다.


브랜드 패턴은 아이덴티티가 단순 반복해서 노출 되었을 때보다 더 많은 가치를 만듭니다. 브랜드는 역동적으로 변하는 환경과 다양한 소비자 니즈에 유연하게 대응하면서 일관성을 유지해야 합니다. ‘브랜드 = 로고’만으로 인식되지 않는 지금, 패턴의 속성은 브랜드에 필요한 요소입니다.


자료 출처:

Method: Brand as patterns

Designcode

Apple Human interface guidelines

Moving Brands: newsbeats

White Studio

Brandnew: Whitney Museum of American Art 


  


작성: 노길우


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 Guide(다양한 디바이스를 아우르는 구글의 디자인 가이드라인, 일관된 사용자 경험을 위해 제작되었다)에 Bottom navigation이란 요소를 추가했습니다. iOS와 UI를 차별화 하고 콘텐츠 영역을 확보하겠다는 의도에서 하단에 내비게이션을 두지 않는 것을 원칙으로 하였던 구글이 결국에는 하단 내비게이션을 선택한 것이죠.

구글의 하단 내비게이션, 사진출처



이스북의 변화도 인상적입니다. 주요 메뉴들을 하단 내비게이션으로 끌어냈습니다. 구글의 프로덕트 디렉터인 Luke Wroblewski의 ‘Obvious Always Wins’에 따르면, 기존에 메뉴와 내비게이션의 역할을 하였던 햄버거 메뉴를 없애고 하단에 내비게이션을 두면서 사용성이 더 높아졌습니다.




햄버거 메뉴를 하단 내비게이션으로 대체한 페이스북과 Redbooth, 사진출처




이러한 변화들은 무엇을 말하고 있을까요?  그리고 왜 하단 내비게이션일까요?



스티븐 후버는 일반인의 모바일 기기 사용에 대한 자신의 연구에서, 응답자의 49%가 스마트폰을 사용할 때 한 손으로 잡고 엄지 하나 만을 사용한다고 밝혔습니다.



스마트폰을 잡는 손의 위치에 따라 생기는 두 가지 주요 터치 영역, 사진출처



엄지 손가락을 사용할 때 터치하기 쉬운 영역, 사진출처



 스마트폰을 사용할 때 엄지손가락을 사용하게 되면, 위의 그림과 같이 Thumb Zone이 생깁니다. 녹색이 엄지손가락이 닿기 쉬운 위치이고, 붉은색으로 갈 수록 엄지손가락이 닿기 어려운 위치입니다. 스마트폰의 크기가 커질 수록 그 경계가 더욱 극명합니다.



구글 Material Design의 주요 내비게이션 터치 영역 비교, 사진출처



Thumb Zone을 실제로 대입해보면 그 차이가 더욱 명확합니다. 위의 그림처럼 한 손만 사용하는 사용자의 경우에는 상단에 왼쪽에 위치하는 햄버거 메뉴보다 하단의 내비게이션에 엄지손가락이 접근하기 쉽습니다. 두 손으로 스마트폰을 사용하는 사용자들이 상대적으로 영역에 구애 받지 않는다고 할 때, 기존의 햄버거 메뉴보다는 하단의 내비게이션을 사용함으로써 대부분의 사용자들을 고려한 서비스를 제공할 수 있습니다.  




그렇다면 하단 내비게이션을 잘 만들기 위해서는 어떻게 해야 할까요?



1.가장 중요한 목적지만 담을 것


하단 내비게이션에는 3~5개의 목적지를 담는 것이 좋습니다. 목적지가 3개 미만일 경우는 사용자가 받는 정보가 빈약하여 서비스를 제대로 파악하지 못하게 되고, 5개가 넘어가면 선택 영역이 좁아져서 사용자가 불편함을 느끼고 이용 중인 서비스에 대해 복잡함을 느끼게 됩니다.



목적지가 2개일 때보다 안정적인 3개짜리 내비게이션, 사진출처



5개가 넘어가자 아이콘이 작아지고 복잡해진 내비게이션, 사진출처



Gaumengut의 안정적인 하단 네비게이션, 사진출처



따라서 하단 내비게이션에 너무 축약하거나 너무 많이 보여주기보다는, 3~5개의 엄선된 목적지를 배치하여 안정으로 구성할 필요가 있습니다.



2.현재 위치를 잘 보여줄 것


‘내가 지금 어디에 있는가?’를 사용자가 아는 것은 매우 중요합니다. 여행을 할 때 지도를 펼쳐 들고 내가 지금 어디에 있는 지를 알아야 다음에 어디를 갈지, 어떻게 가야 할 지 한눈에 파악할 수 있는 것과 같습니다.


하단 내비게이션에는 주로 아이콘을 사용하는데, 아이콘에 각기 다른 색을 쓰는 것보다는 주요 색으로 통일하고 사용자가 현재 있는 위치의 아이콘만 색깔을 다르게 하는 것이 좋습니다.



크리스마스 트리 같은 색(왼쪽)보다는 주요한 색 하나를 쓰는 것(오른쪽)이 눈에 띕니다. 사진출처



메시지가 파란색으로  활성화 중인 트위터의 하단 내비게이션, 사진출처



 목적지 각각을 어떻게 잘 설명하느냐도 내가 지금 어디에 있는지 파악하는 데 중요한 역할을 합니다. 해당 메뉴의 역할이 충분히 설명되지 않은 아이콘을 사용하거나, 텍스트 라벨이 간결하고 함축적으로 목적지를 설명하지 못하면 사용자가 한눈에 현재 위치를 파악하는 데 어려움을 겪을 수 있습니다.



아이콘이 무엇을 나타내는지 알기 힘든 Bloom.fm 앱, 사진출처



텍스트 라벨이 간결하지 못해서 발생하는 나쁜 예, 사진출처



3.따로 설명이 필요 없도록 명확하게 표현할 것


 사용자를 이끄는 매력적인 특징과 콘텐츠가 있다고 하더라도 사용자가 그것을 발견하지 못하면 아무 소용이 없을 것입니다. 그래서 하단 내비게이션은 명확해야 합니다.


하단 내비게이션은 눌렀을 때 어떤 단계를 거치지 않고도 직접 연관된 화면이 보이는 목적지로 향해야 합니다. ‘Photo’라고 하면 사진들을 모아 놓은 앨범이 아니라 모든 사진이 쭉  나열되어 있는 화면이 나와야하는 것이죠.



직접적인 화면을 보여주는 하단 내비게이션, 사진출처



그리고 가능하면 어떤 화면이든지 항상 같은 내비게이션을 노출해야 합니다. 그래야 사용자가 안정적으로 느낄 수 있고, 각각 내비게이션의 목적에 대한 이해도 더욱 쉽게 할 수 있습니다. 일시적으로 사용이 불가능한 목적지가 하단 내비게이션에 존재할 수 있습니다. 그럴 때는 내비게이션 상에서 지우는 것이 아니라, 왜 사용이 불가능한지 알려주는 화면을 보여주고 내비게이션을 고정함으로써 각 목적지의 존재감을 명확히 할 수 있습니다.      

  



모바일 웹을 디자인하고 계신가요? 앱을 디자인하고 계신가요?


좋은 하단 내비게이션은 사용자를 이끄는 보이지 않는 손과 같습니다. 사용자가 가고 싶은 길을 쉽게 갈 수 있도록 안내하고, 더 나아가서는 사용자를 움직이게 만듭니다. 하단 내비게이션으로 사용자의 행동을 디자인해보는 것은 어떨까요?



출처 : Medium, GS real design


by 수달 발자국









Posted by slowalk

UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다.



1. UI의 9가지 상태

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다.



UI의 9가지 상태 ➔ 더 읽기



2. 모바일 사용자 UX의 시작, 터치 제스처

터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해한다면 디자이너, 개발자, 프로젝트 담당자의 소통이 명확해질 것입니다.


모바일 사용자 UX의 시작, 터치 제스처 ➔ 더 읽기




UI디자인에서 버튼이나 메뉴는 다른 곳으로 향하는 '문'입니다. 버튼의 형태나 스타일만큼 중요한 것은 '문의 이름'입니다. 메뉴 버튼의 중요성과 적합한 메뉴명을 결정하는 요소를 알아봅니다.

클릭을 유도하는 이름 붙이기 ➔ 더 읽기




스크롤로 제어하는 원 페이지 구조가 등장하면서 세로형 내비게이션 메뉴도 많이 볼 수 있게 되었습니다. 웹사이트를 디자인할 때 사용하는 세로형 내비게이션이 무엇인지와 세로형 내비게이션 메뉴 활용법을 3단계로 나누어 알아봅니다.

웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 ➔ 더 읽기




사용자의 명령을 인식하거나 긴급 상황을 알리는 데 사용하는 모달 창 (Modal window)는 사용자의 작업 흐름을 흐트러트릴 수 있습니다. 그래서 모달 창 버튼의 색상 사용이 중요합니다. 모달 창 버튼의 3가지 성격에 맞는 색상 지정 방법을 알아봅니다.

버튼색상에도 정답이 있다 ➔ 더 읽기



6. 스크롤 UI를 대체하는 방법이 있을까요?

화면을 꽉 채우는 배경 이미지와 함께 타이포그래피를 적절히 배치하는 디자인이 많아지고 있습니다. 이런 디자인에서는 스크롤을 유도하는 UI요소가 자주 보이는데요, '스크롤을 해주세요'와 같은 요소를 넣는 것은 자연스러운 콘텐츠의 이해를 방해할 수 있습니다. 스크롤 안내 요소 없이 자연스럽게 스크롤을 유도하는 방법을 알아봅니다.


스크롤 UI를 대체하는 방법이 있을까요? ➔ 더 읽기



7. 모바일웹에서 헤더를 꼭 고정해야 될까요?

모바일 웹을 서핑 하다 보면 1. 고정된 헤더, 2. 콘텐츠와 같이 스크롤 되는 헤더, 3. 하단 고정 내비게이션 (주로 앱에 많습니다.)를 발견할 수 있습니다. 제작자들은 메뉴를 쉽게 클릭할 수 있는 고정된 헤더를 선호하는데요, 어떤 방식이 더 좋을까요? A/B 테스트를 통해 얻은 인사이트를 공유합니다.


모바일웹에서 헤더를 꼭 고정해야 될까요? ➔ 더 읽기




8. 새로운 UI로써의 No-UI

새로운 기술은 그에 적합한 새로운 디자인적 접근이 필요합니다. 새로운 기술이 가져다주는 NO-UI를 이해하는 글을 읽어보세요.


새로운 UI로써의 No-UI ➔ 더 읽기





Posted by slowalk

IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 




 

우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 


본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 


터치(Touch)

손가락이 화면 위에 올려진 상태를 말합니다. 예를 들어, 손가락 하나를 화면 위에 올려놓았을 경우 디바이스는 한 손가락의 제스처를 명령어로 인식합니다. 즉 터치의 개수는 손가락의 개수와 일치한다고 생각할 수 있습니다. 


제스처(Gesture)

혹시 떠오르는 장면이 있으신가요? 미래를 배경으로 하는 SF, 공상과학 영화에서 많이들 보셨을 겁니다. 바로 사람의 움직임, 가령 동작이나 표정, 근육의 변화 등을 얘기할 수 있습니다. 이를 디바이스가 수학적 알고리즘으로 변환 및 입력된 신호로 인식하는 과정의 인터페이스를 말합니다.



터치 제스처의 중요성

이러한 신체의 일부분이나 움직임을 기반으로 하는 인터페이스가 인터렉션 디자인에서 중요한 이유는 무엇일까요? 첫번째는 대중화 즉, 최근 가장 많은 사용자 사용하는 인터페이스 방식이기 때문입니다. 스마트폰이나 태블릿과 같은 휴대용 디바이스의 경우, PC 사용에 비해 사용하기 쉬운 인터페이스의 역할이 더욱 강조된다는 점을 생각해보면, 이는 가장 쉽고 직관적인 인터페이스 방법 중 하나입니다. 두 번째 이유는 바로 디자인의 효율성입니다. PC보다 작은 모바일 스크린에선 가능한 모든 픽셀을 콘텐츠 자체에 집중시켜 디자인하게 됩니다혹시 상단 혹은 하단에 배치됐던 내비게이션(Navigation) 탭 바(Tap Bar)를 기억하시나요? 요즘은 이 탭 영역을 스크린과 분리시켜 디바이스 자체에 배치하여 지문을 인식하거나 어떠한 제스처를 취하는 방식으로 바뀌었습니다. 현재 우리는 과거 탭 바가 차지하던 공간까지 디자인에 활용할 수 있다는 것입니다. 또한, 터치 제스처 인터페이스는 눈에 보이는 작은 스크린 자체가 뷰포트(viewport)의 전부라는 생각을 탈피하는 계기가 되었습니다. 메인 스크린의 위, 아래 혹은 양옆의 다른 공간을 잡아끌거나(Drag) 미는 (Swipe) 제스처를 취함으로써 스크린 자체보다 더 넓은 사이즈의 영역을 통해 콘텐츠를 효율적으로 선택하고 볼 수 있게 변화했습니다.



터치 제스처의 종류

사용자가 설명서 없이도 직관적으로 사용할 수 있는 모바일 UX / UI를 기획하기 위해서 해야 할 일은 무엇일까요? 기본적으로 다수가 사용하고 있는 터치스크린 중심의 인터렉션을 이해하는 것입니다. 터치 기능을 잘 활용한 디자인은 사용자가 더 빠르게, 효율적인 인터렉션을 경험할 수 있습니다. 





1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것을 말합니다. 보통 앱을 실행하거나 어떤 것을 선택할 때 사용됩니다. 손가락을 화면에 놓은 뒤 들어 올리는 순간, 이벤트가 발생합니다. 또한, 스크린을 터치하는 횟수에 따라서 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap) 등이 있습니다. 애플의 아이폰 6s부터 추가된 3D 터치의 경우, 1단계에 해당하는 기본 제스처입니다. 


2. 더블 탭(Double Tap) : 탭의 종류 중 싱글 탭 다음으로 많이 사용되는 제스처입니다. 더블 탭은 화면에 손가락을 2회 연속 두드리기 때문에 싱글 탭과는 상대적으로 해당 제스처의 목적이 분명한 기능에 배치합니다. 예를 들어 브라우저 사파리 혹은 지도나 이미지를 화면에서 확대하거나 축소하기 위한 제스처로 사용합니다. 


3. 프레스(Press) : 화면 위를 일정 시간 동안 약간의 힘을 가한 상태로 탭 하는 제스처를 프레스라고 합니다. 화면 전체가 바뀌는 것이 아니라, 주로 팝업과 같이 숨겨진 메뉴를 불러오거나 기능을 실행할 때 사용됩니다. 프레스는 '터치 앤 홀드(Touch and Hold)'라는 용어로 불리기도 하며, 추가로 아이폰 6s부터 추가된 3D 터치 중 2단계 제스처(Peek 엿보기)입니다. 


3-2. 세게 누르기 (Deep press) : 프레스보다 더 힘을 줘 길게 누르는 방식으로, 아이폰 6s부터 추가된 3D 터치 중3단계에 해당하는 제스처(Pop 튀어나오기)입니다.





4. 팬(Pan) : 손가락을 떼지 않고 계속 드래그(Drag) 하는 제스처로, 시간과 방향의 제한 없이 사용자가 손가락을 뗄 때까지 패닝(Panning)으로 인식합니다. 가령, 화면에서 오브젝트를 이동할 때, 라인 그리기 혹은 확대된 이미지를 상하좌우로 움직여 탐색할 때 사용하는 제스처 방식입니다.


5. 스와이프(Swipe) : 스와이프는 손가락을 댄 후, 일직선으로 드래그하는 것을 말합니다. 시간의 제한은 없으나 직선 움직임이라는 제한이 있습니다. 보통 화면 탐색 시, 스크롤(Scroll) 기능으로 사용합니다.


6. 플릭(Flick) : 스와이프에서 좀 더 빠르게 한 방향으로 미는 것을 말합니다. 가령 탐색하던 브라우저 화면을 불러오거나 다른 화면으로 넘길 때 혹은 숨겨진 드로어 메뉴(Drawer menu)를 열 때 사용됩니다.


위 동작 UI를 기획 및 배치할 때 주의해야 할 점은 바로 팬 > 스와이프 > 플릭 제스처라는 포함 관계입니다. 즉 스와이프나 플릭의 경우 팬으로 명령어를 인식할 수 있고 플릭의 경우 스와이프로 인식될 수 있으므로 터치 UI를 설계할 때 제스처의 각 포함관계와 특징을 살펴 구성해야 합니다.



7. 드래그 (Drag) : 손가락의 제스처만 보면, 스와이프나 팬과 유사하지만, 드래그는 오브젝트를 이동할 때나 정해진 방향으로 움직인 후 손가락을 떼는 행동을 말합니다. 팬처럼 제한 없이 이동할 수 있지만, 스와이프처럼 직선 움직임이 아니어도 인식이 가능합니다. 오브젝트를 이동시킬 때나 텍스트를 복사할 때 주로 사용하고 있습니다.


8. 핀치 인/아웃 (Pinch in/out) : 위 동작들과 다르게 손가락 두 개를 화면에 댄 상태에서 두 손가락 사이를 넓히거나(out) 좁히는(in) 제스처를 말합니다. 더블 탭 외에 지도나 이미지를 볼 때 확대/축소 기능으로 사용됩니다. 핀치 아웃은 핀치 오픈(Pinch Open) 혹은 스프레드(Spread)로, 핀치 인은 핀치 클로즈(Pinch Close)라는 용어로도 알려져 있습니다. 

 

9. 로테이트 (Rotate) : 로테이트도 핀치처럼 두 손가락을 이용하는데, 오브젝트가 도는 회전 값을 인식하는데 차이가 있습니다. 보통 화면에서 이미지를 회전시킬 때 사용되는 제스처 입니다. 




지금까지 모바일에서 자주 쓰이는 기본적인 제스처에 대하여 알아봤습니다. 모바일 플랫폼에 따라 약간의 차이가 있지만, 기본적인 제스처에 대한 정의와 이해는 개발자와 원활한 소통뿐 아니라 깔끔하고 체계적인 UX, UI 디자인을 완성할 수 있는 기본기가 될 것입니다. 




by 고양이 발자국





Posted by slowalk



데스크탑 뿐만 아니라 모바일, 테블릿PC 등 다양한 환경에서의 인터넷 사용이 증가하면서 웹디자인도 환경에 따라 변화하고 있습니다. 스크린의 크기, 비율에 따라 변화하는 웹디자인을 반응형 웹디자인이라고 하는데요, 예전에 슬로워크 블로그에도 소개된 적이 있죠. (반응형 웹디자인의 9가지 요소 글 보러가기)


스크린에 따라 상하좌우로 변화하는 웹디자인 안에서 해당 웹페이지의 로고 역시 스크린의 사이즈에 따라 축소, 확대되는 것을 볼 수 있습니다. 단순하고 간단한 형태를 가진 로고는 스크린의 사이즈에 맞춰 축소되더라도 아무 문제가 없겠죠. 그러나 복잡한 모양이나 작은 글씨를 가진 로고의 경우는 그 형태를 인식할 수 없고, 글씨 또한 읽히는 데 어려움이 있습니다.

오늘은 이렇게 다양한 환경에 적응하며 로고들이 어떻게 변화하는지에 대해 소개합니다.

 

 

대부분의 잘 디자인된 로고들은 최적의 적용을 위해 가로형, 세로형 로고의 가이드라인을 가지고 있습니다. 펜실베니아 대학교의 로고는 여기에 한 가지 가이드를 더 추가하였습니다. 특별히 더 작은 영역에 사용될 수 있는 대체로고 규정이었죠.

 


로고의 작은 버전에서는 작은 글씨가 제거되었고, 로고타입은 심볼의 높이와 일치하도록 확장되었습니다. 그 결과 로고는 와이드 320픽셀인 작은 화면의 압축된 헤더에서 더 잘 읽힐 수 있게 되었습니다.

 


 

 


디테일 최소화하기

위와 같이 복잡한 심볼을 가진 로고의 경우에는 자세한 모양을 좀 더 부드럽고 단순하고 처리하고, 얇은 선을 두껍게 만드는 방법을 사용할 수 있습니다. 심볼의 흰 부분을 검게 채우는 식으로 요소를 반전시켜 작은 크기에서도 인식이 쉽도록 변화하였습니다. 사이즈 축소의 단계별로 로고의 심볼 또한 점점 더 단순화되어 가독성을 높인 예입니다.

 

 

 


제거하기

위의 로고는 메인 그래픽 앰블럼을 둘러싼 많은 글씨들이 특징입니다. 이와 같은 로고는 작은 화면에서는 전혀 읽히지 않습니다. 따라서 이 로고는 화면의 크기에 따라 순차적으로 요소를 제거하는 방법을 택했습니다. 엠블럼을 둘러싼 작은 글씨들을 제거하고, 다음 단계에서는 엠블럼 자체의 글씨를 제거하였습니다. 이러한 과감한 변화에도 브랜드 인지도는 여전히 유지됩니다.

 

 

 


위치 바꾸기

가장 일반적인 방법으로 사이즈의 축소시 로고타입을 심볼과 같은 높이에 맞춰 로고타입의 가독성을 높이는 결과를 가져다 주는 예입니다.

 


로고를 조정하는 것이 브랜드 인지도와 아이덴티티에 영향을 주지 않을까 걱정을 하실 수도 있겠는데요. 위의 사례와 같이 각 상황에 맞는 대체 로고 규정이 있다면, 로고의 유연성은 오히려 아이덴티티의 인지도를 향상시킬 수도 있다고 합니다. 앞으로 더 빠르게 변화할 웹의 환경에 맞춰 얼마나 다양한 방법의 로고 솔루션이 등장할지 기대됩니다.   

 

 

출처:  viget

 

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