JJ Edu

www.gdweb.co.kr

www.umoby.co.kr

http://blog.mariuszwozniak.com/post/40090655756/top-10-mobile-ui-design-and-interaction-patterns

http://capptivate.co

http://useyourinterface.com

http://ui-animations.tumblr.com

http://sixux.com

http://www.pinterest.com/search/?q=ui%20ux%20mobile

PC 웹에서 사용자의 사용성을 분석하는데 사용자의 시선 방향을 고려했다면(Eye Tracking) 

모바일에서는 사용자의 동작에 따라 화면이 어떻게 반응하는지가 사용자 경험(UX)를 좌우한다.

1. 모바일 환경과 PC 환경의 차이

. 하드웨어 구성과의 연관성

. 기기가 지닌 센서를 적용

. 사용자와 상호작용

. 휴대성 극대화

. 사용자와 24시간을 함께하는 밀접성

. 모바일 전용 운영체제(안드로이드, IOS) 탑재

. 터치와 제스처, 오디오를 이용한 입력

2. 모바일 UX 프로세스

. 사업 기획 아이디어 발상

. 시장과 사용자 분석

. 정보구조(IA) 설계

. 모바일 UI 디자인: 스토리보드 작성과 UI 설계

. 비주얼 디자인

. 사용성 테스트

3. 노키아의 모바일 앱 디자인 프로세스

. 아이디어 단계

. 디자인 리서치

. 콘셉트 디자인

. 인터랙션 디자인

. 비주얼 디자인

. 모션 디자인

. 디자인 최적화

. 사용성 테스트

4. 사용자 분석

. 사용자 요구 파악: 모든 경우의 수 고려

. 사용 환경과 맥락의 이해: 사용자 접근성이 좋은 UI 설계 -> 좋은 UX

. 문제점 발견: 가이드라인, 칼라

. 트렌드와 현황 파악

5. 사용자 분석 프로세스

. 조사 대상 선정: 대표적인 표본 서정/ 이해 당사자 / 핵심 타겟층 세분화

. 조사 정보 수집: 인터뷰, 다이어리 분석, 인터넷, 통계자료, SNS

. 조사 결과 분석: 통계에 근거 객관적으로

6. 사용자 분석 방법

. 콘셉트 테스트: FGI, 전문가 인터뷰, 다이어리 분석

- 디자인 및 서비스의 콘셉트를 파악하기 위한 테스트, 사용자들이 얼마나 제작자의 아이디어나 디자인에 대해 만족하고 있는지에 대한 평가

. 기능 테스트: QA,FGI, 전문가 인터뷰

- 접근의 편리성과 사용자 반응 등을 점검, 일반적으로 제품 개발 이후에 진행, 간단히 기능 위주로 제작된 프로토타입으로 테스트

. 사용성 테스트: FGI, 길거리 인터뷰, 페르소나

- UX개념과 가장 일치하는 테스트, 일반 사용자들을 대상으로 해당 서비스나 앱, 소프트웨어의 편리성, 효용성을 테스트

. 고객 세분화: Survey, 페르소나, 다이어리 분석 등 관찰법

- 모바일에서의 고객은 특정 취향이나 업무, 관심사 등을 기준으로 세분화

(1) 인터뷰: 사용자의 요구 사항에 대해 직접적으로 알 수있는 가장 넓은 범위의 테스트 방식

. 제품 선호도가 아닌 행동과 사고 방식 중심의 대화

. 육하원칙에 의한 자유 응답 질문만 사용

. 인터뷰 대상자를 고려한 단어나 어구 선택

. 대화의 흐름을 따를 것

. 인터뷰 도구에 대해 언급하지 말 것

. 직접적인 경험에 중점을 둘 것

- 전문가 인터뷰: 개발하고자 하는 모바일 서비스의 타당서오가 적합성 테스트

- 표적집단 면접(FGI, focusing Group interview): 평가단, 가장 많이 사용, 사전질문, 사후질문, 전문적인 UX 연구실, 인터뷰 진행자 필요

(2) 다이어리 분석

. 구경, 탐문

. 노트법, 활영법

(3) 페르소나: 가상의 표본적 사용자를 만들고 가정

. 다양한 페르소나를 통해 모바일 서비스 개발에 적용

(4) 멘탈 모델

. 인간 행위에 기반을 둔 디자인 전략

. 사람들의 행동 동기, 사고 과정, 감성적이고 철학적인 배경을 연구하고 그 패턴을 찾아 하나의 모델로 정리

. 타겟층을 완전히 이해

(4-1) 멘탈 모델의 목적: 수집된 정보를 통해 사용자의 요구사항의 핵심을 찾고 서비스 개선한다.

. 디자인 지침 설정

. 사업 방향의 명확성

. 전략의 연속성

(4-2) 멘탈 모델 방법론

. 사용자와 인터뷰 시행, 행동 패턴에 대한 질문과 서비스 사용 중 긍정적 또는 부정적 견해를 탐구

. 사용자의 인터뷰 내용을 행동 기반으로 그룹화

. 행동 유형을 분석하고 핵심 키워드로 정리

. 멘탈 모델 다이어그램으로 결과를 도출

7. 시장 분석 방법

. 모바일 서비스의 트렌드 분석

. 경쟁사의 성공 및 실패 요인을 분석

. 조사 대상 선정 (ex. Top 50 앱)

. 통계 자료 활용

. 분석 템플릿 작성 (엑셀 활용)

: 차별화 포인트와 핵심 역량 집중 분석

: 안정성, 기능성, 사업성 등에 따라 점수 부여

슬라이스툴은 이미지를 구획을 나누어서 쪼개주는 기능이다. 웹 이미지를 제작한 뒤 홈페이지를 올려 놓으면 이미지의 용량이 커 로딩속도가 늦어지는 경우가 발생하는데 이런 경우에는 이미지를 쪼개서 배치하는 것이 좋은데, 이때 슬라이스툴을 사용하면 웹 이미지를 정교한 형태로 쪼갤 수 있다.

1. Extract 기능을 사용해서 배경을 지우고 투명한 이미지로 만들는 방법을 알아보도록 하겠습니다. 작업할 이미지를 불러옵니다.

2 . Fliter 메뉴에서 Extract 를 클릭합니다.

3. Extract 대화상자가 나타납니다. Tool Options 항목에서 브러시 크기를 15로 입력하고, Smart Highlighting을 체크 표시가 나타나게 합니다. 이옵션은 자석 선택 툴처럼 색상 차이가 분명한 경계선을 자동으로 선택해 줍니다.

4. 아무 곳이나 시작점을 클릭한 후 이미지의 외관선을 그리면 초록색으로 표시됩니다. 외관선을 그리다 조금 실수를 하더라도 나중에 수정할 수 있으니 대충 경계선을 그려줍니다.

5. 다 그렸으면 채우기(Fill Tool)을 선택한 후 테두리 안쪽을 클릭합니다.

6. 파랑색으로 채워지면 잘 된 것입니다. 상태를 확인하기 위해 Preview 버튼을 클릭합니다.

7. 파랗게 칠해진 부분을 제외하고 나머지 부분는 다지워집니다. 필요 없는 배경이 지워진 부분도 있고 지저분하게 남아 있는 부분도 있음으로 현재 상태를 자세히 보기 위해 Preview 항모에서 Display 드롭다운 단추를 클릭후 Gray Matte 를 선택합니다.

8. 이제 확실하게 보이겁니다. 클린업 툴(Cleanup Tool)을 사용해서 지우고 싶은 부분을 정리합니다. 원래 이미지를 살려야 할 부분은 [Alt] 키를 누른 채 클린업 툴로 드래그하면 됩니다. 테두리 다듬기 툴(Edge Touchup tool)도 사용하여 가장자리를 다듬어 보세요. 작업이 끝났으면 OK 버튼을 클릭하여 익트랙트 창을 빠져나갑니다.

9. File 메뉴에서 Save for Web 을 클릭합니다.

10. Save For Web 대화상자에서 4-Up 탭을 클릭한 후 Transparency 에 체크가 되었는지 확인합니다. Matte 드롭다운 단추를 클릭하여 Other 를 클릭한 후 이미지의 바탕색으로 쓰일 색을 결정합니다. 이때 바탕색을 선택하는 이유는 투명 이미지를 저장할 때 기본적으로 이미지의 외관에 흰색의 Anti-aliasing이 적용되는데, 다른 색의 바탕에서는 지저분한 테두리가 보이기 때문에 이것을 방지하기 위해서 바탕색으로 Anti-aliasing을 적용하는 것입니다.

※ Anti-aliasing 이란?
그래픽 프로그램에서 화면의 영상을 자연스럽고 매끄럽게 표현하도록 해 주는 화면 처리 기법. 모니터 화면의 영상 정보는 2차원으로 배열된 점에 의해 전달되는데, 화면의 점의 개수가 적으면 들쑥날쑥한 계단 현상이 일어나 화면이 매끄럽지 못합니다. 이를 방지하기 위해 각 점 사이에 배경 색과 중간 색조의 점을 추가하여 화면을 자연스럽게 표현하는 화면 처리 기술입니다.

 Edge Highlighter Tool - 배경에서 추출 이미지의 테두리를 그려줍니다.

 Fill Tool - 테두리가 완성된 후에 남겨질 부분을 칠해줍니다.
 Eraser Toll - 칠해진 부분을 지웁니다.
 Eyedropper Tool - 이미지의 한 가지색으로 이루어진 부분만을 남기고 나머지 부분을 제거할 때, 남길 색을 지정합니다. 오른쪽의 Force Foreground 를 사용할때만 필요한 툴입니다.
 Cleanup Tool - Preview 버튼으로 추출된 이미지에서 필요 없는 부분을 지웁니다. [Alt] 를 누르면 추출 과정에서 잘려나간 부분도 다시 나타나게 합니다.
 Edge Touchup Tool - Preview 버튼으로 추출된 이미지에서 지저분한 테두리를 깔끔하게 정리합니다.
 돋보기 툴 - 이미지를 확대/축소 ([Alt] 를 클릭한 경우 축소) 합니다.
 손 툴 - 확대된 이미지를 이동합니다.
 Brush Size - 브러시의 크기를 조절합니다.
 Highlight - Edge Highlighter Tool 로 칠해지는 색을 지정합니다.
 Fill - Fill Toll 로 채워지는 색을 결정합니다.
 Smart Highlighting - 경계선을 자동으로 찾아줍니다.
 Extraction 항목 - 이미지에서 선택된 색으로 이루어진 부분만을 남기고 모두 지웁니다.
 Preview 항목 - 미리보기의 세부 항목을 결정합니다.

안드로이드 아이콘(.ico) 파일 만들 때,

아래 사이트에서 하시면 매우 편리합니다.

안드로이드 개발의 경우 다양한 사이즈의 아이콘이 필요하기 때문에

사이즈별 아이콘을 디자이너에게 요청하게 됩니다.

http://romannurik.github.io/AndroidAssetStudio/

(1) 아래와 같이 "Launcher icons" 클릭하시고,

(2) "Foreground" -> "Image" 버튼 클릭 하셔서 아이콘 만드실 이미지 업로드 하시면 됩니다.

저의 경우,

최근에 배경 없이 아이콘만 보여주는 것이 좋아서

투명 이미지가 되는 PNG 포맷으로 대부분 작업합니다.

그럼 편리하게 이용하세요~ ^^

. GCM (GOOGLE CLOUD MESSAGING) 사용

. GOOGLE 검색에서 앱 색인 생성 활용 : Google 검색에서 앱으로 연결되는 딥 링크 제공 서비스로 앱 등록 후 바로 적용하여 Google에서 앱이 검색되도록 한다. 네이버에서 앱 검색 후 다운로드 사이트로 링크되는 것과 동일한 서비스

마케팅은 광고, 홍보와 다르다.

마케팅은 고객의 생각속에 포지셔닝 되는 것이 매우 중요하기 때문에, 명확한 목적에 따라 철저하게 계획하고 지속적으로 마케팅 Action을 피드백하며 실행해 나가야 한다.

지속적으로 진행되기 때문에 마케팅 계획은 매우 중요하다

아래 이미지처럼 마케팅 때 고려할 요소들이 명시되어 있으므로

마케팅을 준비하는 독자가 효율적으로 활용할 수 있다.