안드로이드 앱 디자인은 처음인데요안드로이드 앱 디자인 처음 접하게 되면 dp, px(픽셀), Dpi이란 말을 듣게 됩니다. 안드로이드는 다양한 스마트폰 화면 크기와 해상도를 지원하고 있기 때문에 필요한 개념입니다. 처음에는 헷갈리기 쉽지만 생각보다 어렵지 않습니다. 그리고 이와 관련된 지식을 알고 있으면 디자인,개발 작업에 도움이 됩니다.스크린의 실제 단위 Pixel많이 들어봤을 법한 픽셀은 화면을 구성하는 최소 단위입니다.Pixel 단위는 화면의 전체 화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위이므로 안드로이드에서는 Pixel보다 dp 단위를 사용하는 것이 개발이 이루어질 때 수월합니다.그 이유는 아래 DP단위 개념을 설명에서 알 수 있습니다.DPIDPI는 Dot Per Inch로 1인치에 들어가는 픽셀을 나타내는 단위입니다. 예를 들면 100DPI는 1인치당 픽셀이 100개 포함된다는 것을 말합니다. 개수가 많을 수록 고밀도이며 안드로이드에서 주요 DPI는 아래와 같습니다.DPI기준ldpi120dpimdpi160dpi (기본)hdpi240dpixhdpi320dpixxhdpi480dpixxxhdpi640dpi안드로이드의 기준 DPI는 160 DPI 입니다. 160 DPI인 경우 밀도 독립단위 DP와 PX이 같은 크기를 갖습니다. 즉, 16DPI에서는 1dp는 1px이 됩니다.다양한 디바이스 크기에 대응하기 위해 필요한 DPDP는 픽셀 독립 단위입니다.화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위이며 큰 화면,작은 화면에 상관 없이 같은 크기로 나타납니다.예시1) 같은 사이즈의 애플리케이션에 Low, Medium, High-density 화면에 PX 단위로 크기를 지정했을 때예시2) 같은 사이즈의 애플리케이션에 Low, Medium, High-density 화면에 DP 단위를 지원했을 때위의 예시들을 보면 안드로이드에서 왜 DP단위를 써야 하는지 알 수 있습니다.위의 개념들을 실무에 응용DP, Px, DPI는 안드로이드 앱 디자인 할 때 꼭 알아야 합니다. 실제로 디자이너는 디자인 후 이미지를 보내줄때 해상도별로 Png파일을 보내줘야 하고 개발자도 리소스 파일을 해상도별로 관리해야 합니다.DP와 PX의 단위 변환개발을 하다보면 DP를 PX로 바꿔줘야할 경우가 있습니다. 안드로이드 레이아웃을 코드 작성 할때 는 DP를 사용할 수가 없기 때문입니다.사용하는 공식은 아래와 같습니다.px = dp * 단말 DPI/기본 160dp = px * 기본 160/단말 DPImdpi 지원 단말일 경우 dpi는 160 이므로 1dp 160/160 = 1pixel이 됩니다.xxhdpi 지원 단말일 경우, 5dp를 pixel로 계산하면5dp 480/160 = 15 pixel 이므로 xxhdpi 단말의 5dp는 15pixel이 됩니다.단위 변환을 계산해주는 도구디자이너는 가이드를 작성할 때 DP계산이 필요하고 개발자는 코드를 작성할 때 PX 계산이 필요합니다.머릿속으로 계산이 빨리 되면 상관없겠지만, 일하면서 여간 쉬운 일은 아닙니다.(숫자에 약한 디자이너라면 더더욱…!) 그래서 계산이 힘든 사람들을 위해 작업 시간도 줄여주는 도구 몇가지 소개합니다.1. Android DP/PX converter   각 화면 밀도 별로 dp 를 pixel 로 pixel 을 dp 로 간단하게 확인 해 볼 수 있다.(바로가기)2. Pixplicity DP/PX converter   각 화면 밀도 별로 pixel, dp, sp, mm, inch, pt 로 계산 값을 확인 할 수 있다. (바로가기)3. Cracker9의 Unit Converter   디자이너가 작업하면서 쓰기 유용한 포토샵 플러그인이다. (바로가기)안드로이드 앱 디자인 하실 때 도움이 많이 되셨으면 좋겠습니다.#에이치나인 #디자이너 #개발자 #협업툴 #크래커나인 #솔루션기업

디자인과 예술의 차이를 물으면대부분 클라이언트가 있느냐 없느냐의 차이라고답하는 경우가 많다.내 작품인가? 고객의 작품인가?틀린 말은 아니지만,이 말에 순응하는 순간, 디자이너의 생각은수동적인 모드로 전환되기 시작한다.디자인이라는 업태가 고객의 요구를 기반으로디자인 역량과 해결책을 제공하여 수익을 얻는 구조라는 것을 인정하더라도 이 프레임에 빠져서는 안된다.여러차례 얘기하지만디자이너의 핵심 역량은 그림을 잘 그리거나멋지게 표현하는 것이 아니다.남들이 미처 보지 못하는 것을 발견하고,눈에 보이지 않는 것을 상상하고,자신의 생각을 남들이 이해할 수 있게  표현하는 능력이다.  남들이 보지 못하는 것을 표현하는 능력많은 디자이너들이 이런 유형의 클라이언트를접해봤을 것이다."요즘 그런 스타일이 괜찮던데...""그 브랜드처럼 해주세요""요런 느낌 좀 살려주면 좋겠는데요"눈에 보이는 것만 볼 수 있는 사람들은눈으로 본 것만을 믿는다.그리고 봤던 것 중에 선택할 수 밖에 없다.그 이상을 상상하거나, 받아들이지도 않는다.자신이 볼 수 있는 해상도로만 사고한다.그래서 좋은 creativity를 가진 디자이너도창의성을 수용할 클라이언트를 만나지 못한다면고객의 눈높이로 평준화될 수밖에 없다.때로는 고객의 사고를 확장시켜야 하고경험 너머의 risk를 감내할 수 있도록 설득해야 한다.디자이너가 yes man이 되는 순간 그들과 같이 망하게 되는 것이다.무조건 부정하라는 의미가 아니다.기획력이 필요하다는 것이다.기획력이 필요하다아무도 해보지 않은 것을 시도한다는 것은,누구도 경험하지 않았던 리스크를 감내시키는 것은고도의 전략이 필요하다.보지 못한 것을 볼 수 있게 해줘야 한다.상상하지 못한 것을 한걸음씩 상상할 수 있게 해줘야 한다.기획력이라는 것은논리적이어야 한다는 의미만은 아니다.치밀한 데이터로 설득하는 보고서를 쓰라는 의미도 아니다.상상력은 데이터로 입증할 수도 없다.다만, 클라이언트가 사고의 영역을 확장할 수 있게유도하는 과정을 기획하라는 것이다.많은 인터랙션과 교감과 교류가 있어야 한다.때론 논쟁하고 인정하고 생각의 빈틈을 파고들어야 한다.자주 이야기하고 확신을 줘야 한다.사례를 들고, 시뮬레이션하고, 구체적이어야 한다.상상력을 작동할 수 있게 긴장과 집착을 풀도록 해야한다.시간이 필요하고 신뢰가 필요하다.관계가 만들어져야하고 호감을 생성되어야 한다.그래서 어려운 것이다.그래서 순응하게 되는 것이다.디터람스가 브라운에서 그랬던 것처럼,나오토 후카사와가 무인양품에서 했던 것처럼,조나단 아이브가 애플에서 그랬던 것처럼,시키는 것을 잘하는 것이 아니라,주도하는 것이어야 한다.거들기만 할 뿐이 아니라,앞장서야 한다.기회를 기다리는 것이 아니라,주인이 되어야 한다.다행스러운 것은점점 그런 세상이 다가오고 있다는 것이 느껴지고,그런 능력을 요구하는 목소리가 커지고 있다는 것을체감하고 있다는 것이다.상대방을 움직이는 역량,클라이언트를 성장시키는 능력이 필요하다.언제까지나고집세고 개성강한 독불장군 디자이너로는세상을 바꿀 수 없다.사람을 움직이는 능력아티스트가 아니라디자이너이기 때문이다.

사용자가 목표로 하는 경험이나 서비스가 빠르게 구현되는 환경에서 B2B 제품의 UI는 대부분의 제품이 어렵고 복잡하여 전문가가 아니면 배우기 힘든 단점이 있었다. 제니퍼의 UX는 중요하고 자주 사용하는 기능의 사용성을 높이는데 중요도를 높이 둔다. 그렇다고 자주 사용하지 않는 기능의 UX를 중요시하지 않는다는 것이 아니다. 많은 사용자(비전문가 포함)가 사용하는 기능의 접근성을 높이고, 쉽게 사용할 수 있도록 하는 것이다. 반면, 전문가가 분석을 위해서 사용하는 복잡한 기능은 정확하게 기능을 사용할 수 있도록 유도하고, 데이터를 가장 잘 표시하는데 집중한다. 제니퍼 5는 제작 시기부터 다른 경쟁사가 하지 않은 도전을 시작하였다. 타사 제품들이 기능적인 부분에 포커스를 맞추고 개발하였다면, 제니퍼는 사용자 경험적으로 더 뛰어나게 만들기 위해 기존의 제니퍼가 가지고 있던 모든 요소를 하나하나 다시 고민하고 새롭게 재 창조하였다. 그 결과 심미적이면서도 직관적으로 사용자들이 겪는 불편함과 어려움을 최소화하였다. 많이 사용하고 중요한 기능일수록 쉬운 UX/UI현재 기업의 웹 서비스는 기업의 수익을 높이는 중요한 요소로 자리잡았다. 개발자나 웹 관리자뿐만 아니라, C 레벨 혹은 마케터까지 자신이 관련된 웹 서비스 방문자가 얼마나 되며 서비스 이용은 순조로운지 등에 관심 갖게 됐다. 그러나 이전의 APM은 IT관점으로 설계되어 현업이 제품을 이용해 애플리케이션을 모니터링 하는 것이 거의 불가능했다. 그래서 제니퍼 5는 기획 단계부터 현업까지 이해 가능한 UX/UI를 만드는데 공들였고, 사용자가 사용하기 쉬운 UX/UI를 제공하려고 애썼다. 개발 후에도 피드백을 받고 개선하는 작업을 게을리 하지 않고 있다. 간결하고 직관적인 인터페이스 제공대시보드는 관제실이나 전용 화면에서 공간을 최대한 활용할 수 있도록 만들었고, 분석의 경우 쉬운 조작만으로도 사용자가 보고자 하는 데이터를 직관적으로 보여주는데 중점을 두었다. 또한 대시보드에서 어떤 이벤트가 발생하면 해당 이벤트를 쉽게 볼 뿐만 아니라 그와 연관된 데이터의 분석도 바로 할 수 있도록 하여 사용자의 Interaction(사용자가 클릭 등의 행위를 하는 것)을 최소화하였다. 사용자는 이벤트를 선택하면 문제가 발행한 지점으로 바로 도달하는 느낌을 받도록 한 것이다. HTML 5 기반의 UI제니퍼 5는 HTML 5 스팩을 기반으로 UI를 개발했다. 제니퍼 5는 HTML 5 스팩이 나온 초기부터 개발을 시작해서 정보나 제공되는 기능 등의 부족으로 많은 어려움을 겪었지만, 수많은 연구를 통해 현재는 JUI(JENNIFER User Interface)라는 오픈소스 프로젝트를 진행할 수 있는 수준까지 이르렀다. 앞으로 HTML 5 스팩은 더욱더 발전할 것으로 예상되고 이에 맞추어 3D를 포함한 다양한 Frontend 기술을 접목해 더욱 발전시킬 예정이다. 제니퍼 네비게이션, 최단기간에 목적지까지 도달하는 구조사용자 경험을 긍정적으로 만들기 위해 신경 썼던 부분 중 하나가 네비게이션 기능이었다. 제니퍼 5의 네비게이션은 사용자 인지 네비게이션으로, 이벤트가 발생하거나, 사용자가 데이터를 분석하고자 할 때 접근하기 가장 쉬운 형태로 만들었다. 이를 위해 특정 기능이 다음으로 넘어가는 과정을 자연스럽게 구현하려고 노력했다. 제니퍼는 사용자가 주로 사용하는 기능을 집중해서 보여주는 방법으로 선택과 집중해서 제품의 UX를 개발했다. 반면 외산은 평면적으로 기능을 늘어놓아 이용자에게 적지 않은 학습을 요구한다. 제니퍼는 이용 목적이 분명한 사용자가 최단기간에 목적지에 도달할 수 있게 해준다. 이용자가 대시보드를 모니터링 할 것인지, 분석을 할 것인지, 아니면 통계를 할 것인지에 대한 목적이 정해지면 해당 메뉴를 클릭하는 방식으로 목적지까지 쉽게 도달할 수 있다.컴포넌트화를 통한 UI 통일성 및 유지보수 편의성 도모 디자인과 개발의 일관성을 위해 자주 사용하는 요소는 모두 컴포넌트화시켰다. 이에 한 요소가 JUI이고 이로 인해 새로운 화면이 추가되더라도 디자인의 일관성이 유지되었고, 화면상의 문제가 발생할 경우에도 컴포넌트 단위로 버그를 수정하여 반영함으로써 유지보수도 쉬워졌다.제니퍼는 이와 달리 데이터 관점에서 UX를 적용하기 보단, UX/UI에 제니퍼의 데이터를 맞추는 전략을 썼다. UX에 딱 맞는 옷을 찾기 위해 UI라이브러리나 차트도 새로 만들었다. 개발 생산성을 높이기 위해 제니퍼는 최대한 작은 단위로 디자인 구성요소들을 나눴다. 작은 단위로 쪼갠 후 재사용이 가능해야 개발의 일관성 및 확장성을 보장할 수 있기 때문이다. 쉽게 재사용할 수 있는 것을 컨셉으로 기술 트렌드인 HTML5를 스펙을 맞춰 공유를 목적으로 구성요소를 개발했다. 예를 들면 화면에 들어가 있는 버튼을 일일이 나눠 개발했고, 이를 재사용하기 쉽게 만들었다. 이를 통해 페이지마다 버튼이 다르게 보이는 문제를 해결했다. 하나의 버튼을 고치면 나머지 버튼도 바뀌도록 해 UI의 일관성을 유지했다.

이메일 디자인에 있어서 모바일에 대한 고려는 선택이 아니라 필수입니다. 몇 가지 원칙을 지키면 모바일 친화적인 이메일을 디자인할 수 있습니다.반응형 디자인?웹페이지를 디자인 할 때 다양한 화면 크기에 대응하기 위해 반응형 다지인을 적용합니다. 반응형 디자인의 핵심은 CSS의 미디어 쿼리(media query)입니다. 미디어 쿼리를 사용하면 화면 크기에 따라 어떤 요소를 표시하거나 숨길 수 있고, 스타일을 바꿀 수 있습니다.출처: Wikipedia Commons하지만 이메일을 디자인할 때 미디어 쿼리를 사용하는 것은 바람직하지 않습니다. 미디어 쿼리를 지원하지 않는 이메일 클라이언트가 있기 때문입니다.모바일 친화적인 이메일 디자인은, 반응형은 아니지만 모바일의 작은 화면 크기에서도 좋은 가독성을 유지할 수 있는 디자인을 의미합니다.모바일 친화적인 이메일 디자인 원칙단순한 레이아웃을 사용합니다. 되도록이면 1단 레이아웃을 사용합니다. 레이아웃이 너무 복잡하면 작은 화면에서 가독성이 떨어집니다.가로 크기는 상대값(%)으로 지정하되, 최대 사이즈는 600px로 합니다.가로 크기를 상대값으로 지정하면 작은 화면에서도 가로 스크롤 없이 콘텐츠를 표시할 수 있습니다. 큰 화면에서 가로 크기가 너무 커지지 않도록 최대 사이즈도 지정합니다.글자 크기는 16px 이상으로 합니다. 글자 크기가 너무 작으면 작은 화면에서 가독성이 떨어집니다. 구글과 애플은 모바일에서 14px 이상의 글자 크기를 사용하도록 권장하고 있습니다.CTA 버튼 크기는 46px 이상으로 합니다. CTA 버튼 크기가 너무 작으면 작은 화면에서 버튼을 클릭하거나 누르기 어려워집니다. 구글과 애플은 모바일에서 각각 48dp, 44px 이상의 버튼 크기를 사용하도록 권장하고 있습니다.모바일 친화적인 이메일을 위해서는 콘텐츠를 단순화하는 노력도 필요합니다. 디자인 이전에 콘텐츠를 모으고 정리하는 일이 필요한데 이 과정을 거치다 보면 디자인도 복잡해지곤 합니다. 가능한 적은 양의 콘텐츠를 담고, 전달한 콘텐츠가 많다면 여러 개의 뉴스레터로 나누어 일정 기간 동안 발송하는 것이 좋습니다.charity: water 사례charty: water는 모바일 친화적인 이메일 디자인의 좋은 사례입니다. 1단 레이아웃을 사용하고 가로 크기를 상대값으로 지정하고, 글자와 CTA 버튼을 충분히 크게 했습니다. 모바일에서도 데스크톱과 거의 동일한 디자인을 보여줍니다.아쉬운 것이 있다면 CTA 버튼을 선택하려면 스크롤을 해야한다는 것입니다. CTA 버튼을 상단에 배치하면 더 많은 클릭을 유도할 수 있을 것입니다.참고MailChimp, Mobile FriendlinessLitmus, Understanding Mobile Email ApproachesGoogle, Material Design GuidelinesApple, iOS Human Interface Guidelines#슬로워크 #스티비 #디자인 #마케팅 #마케터 #디자이너 #인사이트 #일지