본문 바로가기

모바일

(11)
웹에서 글 쓸 때, 이것만 체크하세요 요즘 워드프레스와 같은 CMS(Contents Management System)를 기반으로 홈페이지를 제작하는 경우가 많아지면서, 콘텐츠를 관리하기가 더욱 수월해졌습니다. 개발자나 제작사를 거치지 않고 직접 글을 게시하거나 편집할 수 있게 되었지요. 그래서 웹사이트 제작 프로젝트를 진행할 때 관리자의 글 편집 기능을 좀 더 신경 쓰게 되는데요. 슬로워크에서는 콘텐츠를 깔끔하게 정리하여 게시할 수 있는 본문 작성의 가이드를 드리기도 합니다. 가이드에 맞춰 공지나 새 소식에 게시할 글을 작성하면, 별도의 디자인이나 퍼블리싱 과정 없이 본문의 요소를 표현할 수 있습니다. 본문의 스타일을 고민하기에 앞서, 게시물의 원고를 준비하는 단계를 생각해봅시다. 스타일 가이드를 잘 만들어두었다고 해도, 원고의 적절한 가공..
모바일 시대 브랜드의 필수요소: 패턴 아래 이미지는 패턴일까요? 로고일까요? 디지털 환경의 발전과 함께 브랜드의 접점도 많아졌습니다. 브랜드는 일관성 있게 장기적으로 브랜드 가치를 전하고, 단기적으로는 다양한 세부 접점에 대응할 수 있어야 합니다. 그렇다고 빠른 반응이 필요한 상황에서 같은 그래픽 요소를 단순 반복하는 것만이 유일한 대안은 아닐 것입니다. 일관성은 반복(repetition)만으로 만들어지지 않기 때문입니다. 일관성은 일정한 패턴의 구조 형성(formation)과 인식(recognition)으로 이루어집니다. 패턴은 우리 뇌가 행동, 생각, 기억을 통해 궁극적으로 어떠한 믿음을 형성하도록 하는 방법이기도 합니다. 패턴에는 여러 개별 요소의 차이와 변화를 수용하면서도 일관성을 유지하는 특별함이 있습니다. 브랜드 에이전시 Meth..
새로운 아름다운가게를 소개합니다. 아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다. 아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다. 기존의 아름다운가게 홈페이지 아름다운가게 리뉴얼 방향성 및 목표1. 메..
모바일을 위한 UX디자인: 하단 내비게이션 최근 구글은 Material Design Guide(다양한 디바이스를 아우르는 구글의 디자인 가이드라인, 일관된 사용자 경험을 위해 제작되었다)에 Bottom navigation이란 요소를 추가했습니다. iOS와 UI를 차별화 하고 콘텐츠 영역을 확보하겠다는 의도에서 하단에 내비게이션을 두지 않는 것을 원칙으로 하였던 구글이 결국에는 하단 내비게이션을 선택한 것이죠. 구글의 하단 내비게이션, 사진출처 페이스북의 변화도 인상적입니다. 주요 메뉴들을 하단 내비게이션으로 끌어냈습니다. 구글의 프로덕트 디렉터인 Luke Wroblewski의 ‘Obvious Always Wins’에 따르면, 기존에 메뉴와 내비게이션의 역할을 하였던 햄버거 메뉴를 없애고 하단에 내비게이션을 두면서 사용성이 더 높아졌습니다. 햄버거..
웹, 모바일 디자인을 한다면 읽어야 할 정보 8가지 UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다. 1. UI의 9가지 상태UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다. UI의 9가지 상태 ➔ 더 읽기 2. 모바일 사용자 UX의 시작, 터치 제스처터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해..
모바일 사용자 UX의 시작, 터치 제스처 IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 터치(Touch)손가락이 화면 위에 올려진 상태를 말합니다. 예..
화면이 작아지면 로고가 변한다? 반응형 로고 디자인 데스크탑 뿐만 아니라 모바일, 테블릿PC 등 다양한 환경에서의 인터넷 사용이 증가하면서 웹디자인도 환경에 따라 변화하고 있습니다. 스크린의 크기, 비율에 따라 변화하는 웹디자인을 반응형 웹디자인이라고 하는데요, 예전에 슬로워크 블로그에도 소개된 적이 있죠. (반응형 웹디자인의 9가지 요소 글 보러가기) 스크린에 따라 상하좌우로 변화하는 웹디자인 안에서 해당 웹페이지의 로고 역시 스크린의 사이즈에 따라 축소, 확대되는 것을 볼 수 있습니다. 단순하고 간단한 형태를 가진 로고는 스크린의 사이즈에 맞춰 축소되더라도 아무 문제가 없겠죠. 그러나 복잡한 모양이나 작은 글씨를 가진 로고의 경우는 그 형태를 인식할 수 없고, 글씨 또한 읽히는 데 어려움이 있습니다. 오늘은 이렇게 다양한 환경에 적응하며 로고들이 어떻..
모바일 친화적인 이메일 만들기 이 글은 MailChilmp의 Mobile Friendliness 글을 번역한 내용입니다. 비전문가의 이해를 위해 일부 내용을 수정하거나 추가하였습니다. 모든 인터넷의 “모바일화”가 시작된 지 2년 정도가 지났습니다. 그러나 모바일 환경에서 이메일 디자인은 아직인 것 같네요. “모바일 친화적인 이메일 디자인”은 아직 걸음마 단계입니다. 이메일은 아직도 구식의 태그로 코딩되고 있는데, 사실 보통 웹사이트와 같은 기준으로도 모던하고, 모바일 친화적인, 반응형 웹이 적용된 이메일을 충분히 만들 수 있습니다. “모바일 친화적”과 “반응형 웹”은 좀 차이가 있습니다. 모바일 친화적인 이메일이 반드시 반응형 웹일 필요는 없지만, 보통 반응형 이메일은 모바일 친화적이죠. (반응형 웹에 대해 더 알아보기) 모바일 친화..