본문 바로가기

Design

모바일 GUI 기초 1강

모바일 서비스

어플리케이션 / 웹 브라우저로 나뉘며 기술 구현 방식에 차이가 있다. 

사용자에게 어떤 접근경로로 다가갈지 우선 판단하여 형태를 결정한다. 

그에 맞춰 디자인 방법이 달라진다.


앱이 웹보다 실행속도가 빠르지만 개발비용이 더 많이 든다.


네이티브 앱 

애플 IOS :  오브젝티브-C / 스위프트 / X-Code ...

구글 Android :  자바 / 안드로이드 스튜디오...

디바이스의 다양한 센서, 기능, 프레임워크등을 사용가능하다.


모바일 웹

 다양한 해상도대응방식. (원소스 멀티유즈)

HTML, CSS,Javascript 등의 언어로 제작한다.

그러나 디바이스의 다양한 센서,기능,프레임워크를 사용하지 못한다.

보안상의 이유로 하드웨어 및 시스템접근에 제한이 있다.


하이브리드 앱

앱과 웹의 장점을 섞어놓은 것.

폴갭 같은 별도의 기술을 활용하여 웹 결과물을 앱으로 패키징

(웹코드를 네이티브 껍질을 패키징하여 하드웨어, 프레임워크 접근 가능)

매번 웹에서 콘텐츠를 불러오므로 퍼포먼스는 떨어지지만 앱 마켓에 등록가능하다.

주로 콘텐츠가 인터넷 중심일 때 사용하며, 최근 완성도가 올라가 네이트비앱과 크게 차이가 없다.

=> 프로젝트별 어떤 형식의 어떤 기술을 사용할 지 협의 필요함.


하이브리드

-web / Mixed(웹코드+네이티브 코드)

구현 방식에 따라 디자인 및 이미지 작업이 달라진다.

안드로이드 네이티브는 9.patch를 사용하는 것과 같이.


게임엔진을 활용한 앱개발도 있음. 

유니티,언리얼

개발 후 다양한 플랫폼으로 변환시켜주지만 

이미지, 사운드에 강하고 텍스트 및 많은 정보에는 능하지않기 때문에 게임장르에 한정되어 있다.


Web

Web app

Single App Hybrid

Multi-App Managed Hybrid


Hybrid

Single App Hybrid

Multi-App Managed Hybrid

Mixed Mode


Native

Mixed Mode

Cross Platform Native

Pure Native SDK


2016.1 기준 

안드로이드 75%, IOS 23% 점유율을 가진다.

회사관점에 따라 UX.UI,GUI 및 기능 등을 다르게 구성할 수 있다.


-공통점

1. 손으로 쥐고 쓰는 디바이스-> 터치 및 기능 등을 다르게 구성

2. 콘텐츠, 콤포넌트가 터치 및 헬드 디바이스에 맞게 구성

3. 상/하단에 운영체제 특유의 바 및 주요요소 배치

4. 각 운영체제별로 마켓존재


-차이점

1. 디자인 스타일(같은 flat 스타일이지만 다르다. 구굴은 머테리얼)

2.인터렉션 (구글은 다이나믹한 머테리얼)

3.타이포그래피

IOS 디폴트는 San francisco

구글 디폴트는 Roboto

4. 하드웨어(센서차이)->앱 기획,디자인할 때 염두할 것

5. 기능, 이미지 구현 방법 등


구글디자인 가이드 사이트-> 디자인 기획시 필수적으로 확인

http://design.google.com/resources

IOS 디자인 가이드

http://developer.apple.com/ios/

(들어가서 resources 메뉴 클릭)

'Design' 카테고리의 다른 글

이미지를 폴리곤화해주는 사이트_triangulator  (0) 2016.09.11
UX&UI 기획 1강  (0) 2016.06.21
UX&UI 기획 11강  (1) 2016.06.12
모바일 GUI 기초 3강  (0) 2016.05.15
모바일 GUI 기초 2강  (0) 2016.05.14