앱 기획 및 UI/UX 1

* 기획서 - 흐름도 - 스토리보드

- 앱(App) 기획

-- 앱 기획이란?

-- 앱 기획의 중요성

-- 앱 개발과정

- UI/UX

-- UI/UX의 정의

-- UI/UX 사례

- iOS Human Interface Guidelines

-- Platform Characteristics

-- Human Interface Principles

-- App Design Strategies

-- User Experience Gruidelines

-- iOS Technology Usage Guidelines

-- iOS UI Element

1. 앱 기획이란?

- 머리속에 있는 생각을 꺼내서 일을 진행하는데 적합하게 꾸미는 것

- 연차적, 장기적 계획 수립

- 앱 기획의 목표 -> 목적의 선정, 목적을 달성할 방법의 모색

* 일반기획과 앱기획의 차이점

- 모바일 특성과 UX/UI의 차이

-> "이동성", "화면의 제약"

2. 앱 기획의 중요성

- 문제 발생률을 감소시켜서 일정과 비용 준수

3. 앱 개발 과정

1) 전체 과정

아이디어 → 시장조사 → 플랫폼 결정 → 단말기 조사 → 기획서 작성 → 스토리보드 작성

→ 디자인 → 프로그램 개발 → 테스트 → 앱스토어 등록 → 업데이트

2) 일반적인 앱기획 과정

아이디어 → 시장조사 → 플랫폼 결정 → 단말기 조사 → 기획서 작성 → 스토리보드 작성

* 애플의 앱 랭킹순위 기준(완전 정확하지는 않음)

- 기존 알고리즘 : 다운로드 수 * A(가중치) + 업데이트 수 * B(가중치) (A>B)

→ 즉, 업데이트 수도 랭킹에 영향을 미친다.

- 변경 알고리즘 : 다운로드 수 * A(가중치) + 업데이트 수 * B(가중치) + 앱 실행수 * C

→ 앱 실행수가 변수로 들어갔을 것이라고 예상.

→ 따라서, 꾸준히 실행되는 앱이 순위에 오를 것이다.

* 플랫폼 : 아이폰, 안드로이드폰, 윈도우즈폰

* 애플의 공지사항 : 앱의 수가 많아졌기때문에 앱의 수준을 더욱 고려한다.

* 개발 용이성 : 아이폰 > 안드로이드

* 개발 확장성 : 아이폰 < 안드로이드

* 업데이트 사용자 참여율 : 아이폰 > 안드로이드

→ 국내에서는 삼성의 파워가 강하기때문에 삼성 안드로이드폰을 기준으로 개발하는 것이 보편적.

* 디자인에 따라서 앱의 가치가 달라진다. 기본 UI를 사용하면 무료앱 느낌;;;

→ 데이터를 표시할 때 일반 리스트뷰를 사용하지 않고, 다이얼이나 다른 그림을 넣어서 구현한다.

* 앱 테스트 - 체크리스트 작성, 아이폰은 AdHoc버전으로 테스트 가능

(개발자 아이디 1개당 100개의 기기에서 사용가능)

4. UX/UI

- UI (User Interface)

: 사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적

또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다.

→ 입력 : 사용자가 시스템을 조작할 수 있게 한다.

→ 출력 : 시스템이 사용자가 이용한 것에 대한 결과를 표시한다.

- UX (User eXperience)

: 사용자가 어떤 시스템, 제품, 서비스를 직-간접적으로 이용하면서 느끼고 생각하게 되는

총체적 경험을 말한다.

- 긍정적인 사용자 경험

- 부정적인 사용자 경험

→ UI에 따라 사용자 경험이 달라지므로 2가지는 함께 다닌다.

→ 똑같은 기능이 있더라도 어떻게 표현(구현)할 것인가를 고민한다.

* 사용성의 3단계 수준

: 본능적 UI - 오른쪽으로 진행하면 사람들이 일반적으로 정방향이라는 느낌을 받는다.

: 습관적 UI - 이미 사용자들이 많이 사용해서 습관처럼 사용하는 UI, 통화버튼

: 이성적 UI - 머리속으로 생각을 해야 하는 UI

→ 사용자가 생각하는 UI와 습관과 다른 UI는 불편한 UI이다.

5. iOS Human Interface Guidelines

- 플랫폼 특징

: 아이폰 종류는 3대 4의 비율로 화면을 구성한다. 기기별 호환이 용이하다.

: 손가락으로 터치를 하는 UI요소의 최소 사이즈는 "44x44 points" 이다.

: 디바이스의 방향에 앱의 방향 전환을 할 수 있다.

→ 아이폰은 가로, 세로 선택적으로 방향전환을 구현하면 되지만,

아이패드는 모든 방향(4방향)에 따른 방향전환을 구현해야 한다.

단, 게임은 예외.

: 제스처

(Tap, Drag, Flick, Swipe, Double tap, Pinch open, Pinch close, Touch and hold, shake)

: 멀티태스킹 (동시작업)

→ 초기에는 멀티태스킹을 지원하지 않았음.

(People Interact with One App at a Time)

: 도움말은 최소화한다. (Onscreen User Help is Minimal)

→ 도움말이 없어도 사용자가 편히 사용할 수 있도록 동작이 예측가능해야한다.

: Two Types of Software Run in iOS (iOS app, Web content)

→ Web applications : 웹페이지를 보여주나 생긴것은 애플리케이션이다.

→ OpenAppMkt.com : 웹애플리케이션을 모아놓은 사이트.

6. 휴먼 인터페이스 원칙

1) 심미적 통합 (Aesthetic Integrity) - Productivity Applications : 정보의 계층화가 있는 것. ex)레시피>국,찌게>바지락국 - Immersive Applications : 게임 같은 것. → 앱에 따른 특징이 있기때문에 그에 맞는 것을 적용해야 한다. 예) 게임은 화려하게 정보는 심플하게. 2) 일관성 (Consistency) 3) 직접 조작 (Direct Manipulation) → 사용자의 느낌을 더욱 살려주는 것. 예) 화면을 확대할 때 버튼을 사용하는 것보다 핀치오프가 더욱 직접조작하는 느낌이 든다. 4) 피드백 (Feedback) → 명령한 동작이 진행된다는 사용자가 알 수 있도록 표현해야 한다. 예)버튼이 눌렸을 때, 데이터를 처리할 때 화면의 변화가 있어야 한다. 5) 메타포 (Metaphors) → 사용자가 직관적으로 인식할 수 있도록 표현한다. 예)폴더아이콘, 어썸노트에서 투두리스트 완료시 줄을 그어주는 것, 노트형태 구성 6) 사용자 컨트롤 (User control) → 결정을 내리기 전에 다시 한번 확인할 수 있도록하여 사용자의 실수를 방지하는 것. 예) 삭제하겠습니까? 하는 선택 창을 나타냄

7. 앱 디자인 전략

(Create an Application Definition Statement)

1) 사용자가 좋아할 것 같은 특징, 기능들을 모두 열거해보아라.

2) 앱을 사용할 사용자가 누구인지 정해라.

3) 1번에서 열거한 특징들을 걸러라.

4) 거기서 멈추지 마라. → 특징을 찾으면 그것을 일관성있게 적용하라.

예) "시간적 여유가 없는 20~30대 직장인들을 위한 쇼핑 리스트 작성 및 쿠폰 검색"

8. 사용자 경험 가이드라인

1) 가장 우선이 되는 핵심에 포커스

2) 위에서 아래로

3) 쉽고 명확한 사용법

4) 사용자 중심의 언어 사용

5) 입력의 최소화

6) 적절한 제스처 사용

7) [아이패드] 정보의 계층화를 자제

→ 아이패드는 화면이 크기때문에 한 화면에 2~3페이지 내용이 들어가도 되기때문.

8) [아이패드] 툴바는 우측상단으로 이동

9. iAd

1) Standard Banner : 아이폰, 아이패드 지원

2) Full screen banner : 아이패드만 지원

10. Local and Push Notifications

1) Local Notifications

: 앱의 실행 유무와 상관없이 지정된 날짜, 시간에 앱이 어떠한 행동을 취할 수 있도록 함.

예) 달력, 일정관리 등

2) Push Notifications

: 서버에서 전달받음, 알림 내용의 종류에 따라 해당 앱이 설치된 모든 기기에 알림을 줄 수 있음.

→ 애플의 푸시 서버를 사용하지 않고 개발자가 직접 사용자앱으로 데이터를 푸시할 수 없음.

예) 카카오톡, 이벤트 알림 등

3) Notification 형태 : Alert, Badge

11. iOS UI 요소 사용 가이드 라인

1) Status Bar : 흰색(아이폰), 검정색(아이패드, 아이폰) 2) Navigation Bar : 방향 컨트롤 버튼, 콘텐츠 컨트롤 버튼 , 기본적으로 버튼 양끝 2개 사용. 3) Content View : Popover(아이패드만 지원), Slipt View(아이패드만 지원), Alerts, Action Sheets(모달뷰형태는 아이폰만, 모달형태에서는 "취소"버튼이 있어야한다.), Activity Indicator, Page Indicator, Picker, Progress View, Slider, * Alerts, Action Sheets 창을 많이 사용하는 것은 좋지 않다. 사용자의 진행 흐름을 끊는다. * Picker는 적절히 사용하면 사용자 입력의 불편을 해소할 수 있다. 4) Tab Bar : 버튼마다 각자의 기능이 있다. 즉, 기능이 모여있는 메뉴바, 최대 삽입 개수는 5개 하지만, 예외적으로 "기타"버튼을 사용해서 버튼을 따로 모아놓을 수 있다. 5) Tool Bar : 현재의 내용과 관련된 기능과 관련된 것들을 모아놓음. (새로고침,폴더이동,삭제,등)

12. 앱스토어 가이드 라인

- 앱스토어에 이미 350,000개 이상의 앱이 등록되어 있다. 일회성, 유용하지 않은, 지속적인

흥미를 제공하지 않는 앱은 허용하지 않는다.

- 연습용 앱, 아마추어적인 앱들은 차단된다.

- 리젝당한 앱은 다시 검사받을 수 있다.

- 앱 개발에 있어서 부정한 방법을 사용하였을 경우 앱스토어에서 삭제되며, 개발자 프로그램

으로부터 제명된다. (리뷰 절차에서 트릭을 시도한 경우, 다른 개발자의 프로그램을 카피한

경우, 순위 조작 등)

2) 기능(Functionality) - 개발자가 광고한 대로 작동하지 않는 앱은 리젝된다. - 앱 설명과 일치하지 않는 앱은 리젝된다. - "베타(beta)", "데모(demo)", "체험판(trial)", "테스트(test)" 버전 앱은 리젝된다. - *아이폰용 앱은 별도의 수정 없이 아이패드에서 작동되어야만 한다. 해상도는 잉폰 3GS와 동일. - 이미 앱스토어에 등록된 앱을 그대로 복제한 앱은 리젝된다. - 유용하지 않거나 지속적인 엔터테인먼트 가치를 제공하지 않는 앱은 리젝된다. - 앱 용량이 20MB이상인 앱은 3G에서 다운로드 되지 않는다. (Wi-Fi에서는 가능함) - 단순히 노래 또는 영화인 앱은 iTunes store로 제출해야 한다. 단순히 책인 앱은 iBook store로 제출해야 한다. 3) Metadata(name, descriptions, ratings, rankings, etc) - 다른 모바일 플랫폼을 언급하는 앱은 리젝된다. → 앱은 등록한 후 텍스트(소개글)를 편집할 수 있다. - 앱 콘텐츠와 카테고리가 적합하지 않을 경우 리젝된다. - 부적절한 키워드는 애플에 의해 수정/삭제 될 수 있다. - 조작된 리뷰, 돈을 주고 작성된 리뷰, 앱스토어 랭킹 조작 등 부적절한 방법을 사용하는 개발자 프로그램에서 제명된다. 4) 위치(Location) - 위치정보를 사용하기 전에 사용자에게 알리지 않거나 동의를 얻지 않은 앱은 리젝된다. 5) 알림 서비스 - 사용자 동의 없이 Push Notification을 보내는 앱은 리젝된다. - Apple Push notification(APN) API를 사용하지 않고 Push Notification을 제공하는 앱은 리젝된다. 6) 사용자 인터페이스 - 아이폰에 기본으로 제공되는 앱과 비슷한 앱은 리젝 - 볼륨 업/다운, 벨소리/진동 스위치와 같은 기본 스위치 기능을 변경하는 앱은 리젝 7) 구입과 통화 - In App Purchase API(IAP) 이외의 시스템을 이용하여 콘텐츠, 기능, 서비스를 구입하는 앱은 리젝된다. - In App Purchase API(IAP)를 이용하여 앱 이외에서 사용되는 상품이나 서비스를 구매하는 앱은 리젝된다. - 렌탈 콘텐츠 또는 제한 기간이 끝나면 만료되는 서비스를 포함하는 앱은 리젝된다. - 일반적으로 앱이 비쌀수록 더욱 철저하게 리뷰할 것이다. - 앱에서 사용될 콘텐츠를 구입하기 위해 외부 매커니즘으로 링크되어 있는 앱은 리젝된다. 8) 콘테스트, 경품, 복권, 추첨 - 애플과 무관하다는 것을 표시해야한다. 9) 자선, 기부 - 무료여야 한다. - 기부금의 모금은 사파리 웹사이트 또는 SNS를 통해야 한다. 작성자브링블링