관리 메뉴

cmos00

1-1. 모바일과 UX/UI/GUI의 이해 1 본문

+ 정리하기/모바일 GUI 디자인

1-1. 모바일과 UX/UI/GUI의 이해 1

cmos00 2017. 5. 2. 20:24
728x90

1. 모바일 서비스의 이해


 1) 모바일 앱 종류 및 특징

  (1) 네이티브 앱

   - 접근성이 좋으며, 사용자의 홈 스크린에 보여지는 앱 아이콘을 선택해서 즉시 시작이 가능

   - 항상 로그인 되어 있어 사용성이 좋으며, 본인에게 맞추어진 정보를 즉시 볼 수 있음

   - 타 운영체제에서 사용불가하며 개발 난이도가 높은 편 (개발 시간과 비용이 높음)

   - 운영체제 별로 제공하는 고유의 기능을 최대한 활용할 수 있음

   - 디바이스의 다양한 센서, 기능, 프레임워크 사용가능 (지문센서, 가속도계, 자이로, 기압계 등)

  (2) 웹 앱

   - 웹 브라우저 앱을 통해 접속하며 별도의 주소를 입력해야 함 (접근성이 낮음)

   - 다양한 해상도 대응 방식으로 제작 가능 (One Source Multi Use)

   - 개발 난이도가 낮은 편 (HTML, CSS, Java Script 등의 언어로 제작 가능)

   - 보안상의 이유로 하드웨어 및 시스템 접근이 제한되며 다양한 센서, 기능들 사용 불가 (일부만 가능)

  (3) 하이브리드 모바일 앱

   - 앱의 장점과 웹의 장점을 합친 방식으로 PhoneGap, 센차터치 등의 별도 기술을 활용하여 웹 결과물을 

     앱으로 패키징한 앱

   - 매번 웹에서 콘텐츠 등을 불러오므로 퍼포먼스는 떨어지는 편

   - 주로 콘텐츠가 인터넷 중심일 경우 사용하며, 최근에는 완성도가 높아져 네이티브 앱과 거의 구분이

     안되는 편


  • PhoneGap

- 니토비(Nitobi)가 만들고 어도비 시스템즈가 인수한 모바일 개발 프레임워크

- 자바스크립트, HTML5, CSS3를 이용하여 모바일 기기를 위한 응용 프로그램들을 만들 수 있음

- 응용 프로그램 결과물들은 하이브리드 형태인데, 이는 모든 레이아웃 렌더링이 플랫폼의 네이티브 

  UI 프레임워크가 아닌 웹 뷰를 통해 수행되며 단지 웹앱일 뿐만 아니라 배포를 위해 패키지화되면서 

  네이티브 기기 API에 접근할 수 있음 (네이티브 코드와 하이브리드 코드 일부를 자유롭게 섞어서 사용가능)


* Sencha Touch

- 모바일 웹앱을 지향하여 만들어진 자바스크립트 라이브러리

- 자바스크립트 어플리케이션을 네이티브 앱으로 직접 제작할 있도록 컴파일러제공


 2) 제작 방식 별 특징 및 주의점

  (1) 네이티브/웹/하이브리드 앱 제작 시 주의점

   - 각 앱별로 장/단점이 있으므로 앱이 제공하는 기능 및 방식을 이해하고 개발자과 협의하에 

     결정하는 것이 바람직

   - 최근에는 하이브리드 방식에 네이티브 코드를 탑재해 실제 구현된 앱만을 볼 경우 차이점 식별이 어려움

   - 채택한 제작 방식에 따라 구체적인 디자인/이미지 제작 방식이 달라지기 때문에 주의

  (2) 게임엔진 활용 

   - 유니티, 언리얼 등 게임 개발 앱은 개발 후 다양한 플랫폼으로 변환해주는 기능 제공

   - 단, 게임엔진 이기에 텍스트 및 많은 양의 정보를 다루는 앱에는 부적합



2. 모바일 운영체제의 이해와 관련 사이트


 1) 공통점

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

  - 손으로 쥐고 사용하는 디바이스라는 점에서 콘텐츠 및 구성이 터치 및 제스처에 최적화되어 있음

  - 마켓을 통한 구매 > 아이콘 터치 > 앱 실행이라는 Flow가 동일


 2) 차이점

  - 안드로이드, iOS모두 플랫 디자인 스타일을 채택하였으나 컬러/타이포그래피/레이아웃/이미지 처리 등

    많은 부분에서 차이 존재

  - 기본 서체: 안드로이드 (Roboto), iOS (San Francisco)

  - 안드로이드: 


  iOS: https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/


728x90

'+ 정리하기 > 모바일 GUI 디자인' 카테고리의 다른 글

5. 컨트롤 컴포넌트  (0) 2017.05.05
4. 구조구성 컴포넌트  (0) 2017.05.03
3. 컴포넌트의 이해  (0) 2017.05.03
2. 모바일과 GUI 디자인  (0) 2017.05.03
1-2. 모바일과 UX/UI/GUI의 이해 2  (0) 2017.05.03