슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

혜인 대
1 years ago
Views:

1 UX UI 디자인 UX UI 모바일앱디자인실무 [UX UI 모바일앱디자인실무 ] 과정은 UX UI 를기반으로한기획을바탕으로다시 BX, Interaction, Design Skill 등을적용해실제모바 일앱 (ios, Android, MobileWeb) 제작에필요한실무내용을학습하는과정입니다. 특히, 안드로이드의 DP, ios 의 PT, 모바일웹의 Viewport 등다양한해상도설정과변환, 모바일색상사용, 이미지파일포멧, 각운영체제 별디자인프로세스, 나인패치, 이미지커팅, 모바일앱레이아웃디자인, 인터렉션구현등모바일앱디자이너가알아야할내용위주로진 행되는과정입니다. 특히, 앱디자인에필수인 Adobe XD 와같은모바일전용프로토타입툴을사용하여디자인하는방법과개발자와의협업프로세스에필요 한디자인가이드제작까지모바일앱디자인에필요한모든기술을배울수있습니다.

2 1. [UX UI 활용한모바일앱기획및프로토타입제작과정 ]_ 커리큘럼 교육목표 - 모바일앱디자인프로세스이해 _ 각운영체제별 -모바일해상도의이해 _DP, PT, Viewport, PX - 다양한모바일서비스구분 _ 네이티브앱, 웹앱, 반응형웹 - 모바일색상및이미지파일포멧 - Android, ios 디자인방법및 UI-kit - Adobe XD를활용한모바일앱디자인방법 - 디자인가이드제작방법 상세커리큘럼 일정 1 일차모바일앱디자인프로세스 - 다양한모바일서비스구분 - 모바일해상도의이해 -Android DP 의이해 -ios Point 의이해 이론 / 실습 2 일차모바일앱디자인 - 해상도별 UI-Kit 제작방법 - 모바일색상사용시주의사항 - 모바일앱제작에필요한이미지파일포멧 - 기능별모바일레이아웃설계방법 이론 / 실습 3 일차 프로토타입툴을이용한디자인 (Adobe XD 활용 ) - 모바일프로토타입디자인 ( 안드로이드, ios) - Adobe XD 의활용 - 디자인가이드제작방법 이론 / 실습 Adobe XD 는가장많이사용하는모바일제작툴로 Adobe에서 무료로사용할수있는 S/W 입니다.( 윈도우 10 이상설치가능 )

3 일차 [ 모바일앱디자인프로세스 ]_ 상세내용 1> 네이티브앱 (Native App) 서비스 모바일기기에직접설치되고운영되는전용애플리케이션. 각플랫폼마다맞는프로그래밍언어와 SDK로개발해야하며기기의고유정보에직접접근할수있다. 우리가일반적으로각종스토어에서다운로드받아단말기에설치하여사용하는앱이다 /3> 모바일웹 + 앱 (Mobile WebApp) 네이티브앱모바일웹모바일웹앱 4 5 OS와상관없이웹을통한풀브라우징 (Full Browsing) 을지원하는모바일상의홈페이지로 HTML 기반으로제작이되어지며단말기와 OS에상관없이보여주는일반적인모바일홈페이지이다. 여기에통화, 메시지, SNS 연동등과같이단말기의기능을수행할수있게좀더네이티브앱처럼제작하는것을모바일웹앱이라고한다. 또한, ios, Android SDK 와같은네이티브툴에서 URL을웹뷰 (Web View) 형태로보여주는앱도웹앱이라고한다. ios Android 반응형웹앱 적응형웹앱 4/5> 반응형웹앱 (RWA) / 적응형웹앱 (AWA) 하나의 HTML 파일이 PC 용웹사이트, 태블릿용, 스마트폰용으로자동리사 6 이징이되어지는형태를반응형웹앱 (Responsive Web App) 이라고하며, 같은컨텐츠이지만 PC 상의웹사이트와모바일용을따로제작하여각환경 에맞게실행해주는것을적응형웹앱 (Adaptive Web App) 이라고한다. 하이브리드앱 6> 하이브리드앱 (Hybrid App) 웹앱을네이티브앱으로감싼것을하이브리드앱이라고한다. 즉, 내부컨텐 츠는 HTML, CSS, JS 기반으로제작이이루어지며, 겉은폰갭, 앱스프레소와 같은프레임워크를통해네이티브앱화시킨다.

4 일차 [ 모바일앱디자인프로세스 ]_ 상세내용 나인패치설치및이해 나인패치제작방법 Resolution Draw9patch Layout / UI-Kit 단말기별해상도 모바일해상도의이해 DP / PX DP별제작순서 OS별레이아웃특징 UI-Kit 제작 디자인가이드의이해 디자인가이드작성방법 Design Guide Color 모바일색상의이해 색상최적화 이미지포멧별특징 PNG, JPG, GIF, SVG 좌표추출 Image Format Launcher Icon OS별런처아이콘특징 Android 런처아이콘 ios 런처아이콘 모바일웹런처아이콘

5 일차 [ 모바일앱디자인프로세스 ]_ 상세내용 Unite 디자인 : Pixels(px) = 개발 : DIP(DP) Pixels(px) 가로 / 세로 1 인치안에들어가는픽셀의개수는디자이너기준 72dpi DIP(DP) : Device independent pixel 가로 / 세로 1인치안에표현되는픽셀의개수. DP 단위는독립적인크기를나타낼수있도록하는단위이다. 이론상어떠한해상도에서도같은크기를보여주는것이핵심개념이다. 1inch x 0.75 x 1 x 1.5 x 2 x 3 x 4 72dpi 1inch 120dpi 160dpi 240dpi 320dpi 480dpi 640dpi 제작해상도 LDPI MDPI HDPI XHDPI XXHDPI XXXHDPI 모바일웹 / 앱 2016 현재가장많이제작하는해상도 ( 국내기준 ) DP 계산법 : 원본 PX * (160 / 원본 PX 의 DPI)

6 일차 [ 모바일앱디자인프로세스 ]_ 상세내용 단말기실해상도 / 디자인해상도 Viewport / DP / Point 그리드 - 갤럭시 S1 / 2 : 480 X 갤럭시 S1 / 2 : 320 X 갤럭시 Not1 : 800 X 갤럭시 Not1 : 400 X 갤럭시 S3 / Not2 : 720 X 갤럭시 S3 / Not2 : 360 X 640 DP - 갤럭시 S4 / 5 / Not3 : 1080 X 갤럭시 S4 / 5 / Not3 : 360 X 갤럭시 S6,7,8,9 / Edge / Not4 : 1440 X 갤럭시 S6,7,8,9 / Edge / Not4 : 360 X 640 Viewport - 아이폰 3 : 320 X 아이폰 3 : 320 X 아이폰 4 : 640 X 아이폰 4 : 320 X 480 -아이폰5 : -아이폰6/7/8 : 640 X X 아이폰5 : -아이폰6/7/8 : 320 X X 667 Point - 아이폰 6/7/8Plus (1242 x 2208) 1080 X 아이폰 6/7/8Plus : 414 X 아이패드 : 1024 X 아이패드 768 X 아이패드에어 : 2048 X 아이패드에어 : 768 X 1024 아이폰 6/7Plus 의실해상도는 1242 x 2208 이지만 1080 X 1920 으로인식한다.

7 일차 [ 모바일앱디자인 ]_ 상세내용 Main Keylines and spacing (MDPI) Button and Border Edge (toolbar) Screen edge left Right-side icons Navigation right margin / floating Status bar / Icon Touch target(btn) List item Space between content areas

8 일차 [ 모바일앱디자인 ]_ 상세내용 모바일레이아웃은핵심가이드라인및간격을준수함

9 일차 [ 모바일앱디자인 ]_ 상세내용 터치영역은최소 48dp 의크기를가지며 아이콘의경우 24dp, 아바타의경우 40dp 를준수 팝업내버튼의경우 36dp 를권장

3-4. 2 일차 [ 모바일앱디자인 ]_ 상세내용 Status Bar Navigation Bar iphone4 :

Plus : 1080 X 40 iphone4 : 640 X 88 iphone5 : 640 X 88 iphone6

iphone6 / 7 iphone 6 / 7 Plus img@2x.png img@3x.

10 일차 [ 모바일앱디자인 ]_ 상세내용 Status Bar Navigation Bar iphone4 : 640 X 40 iphone5 : 640 X 40 iphone6 / 7 : 750 X 40 iphone6 / 7 Plus : 1080 X 40 iphone4 : 640 X 88 iphone5 : 640 X 88 iphone6 / 7 : 750 X 88 iphone6 / 7 Plus : 1080 X 132 iphone4 iphone5 iphone6 / 7 iphone 6 / 7 Plus img@2x.png img@3x.png 단말기별표준가이드의포인트를기준으로 iphone 4/5/6/7 는 X2 배수픽셀, iphone 6 / 7 Plus 는 X3 배수픽셀이미지를사용한다.

11 일차 [ 모바일앱디자인 ]_ 상세내용 Status Bar Search Ba Navigation Bar Tab Bar Toolbar

12 일차 [ 모바일앱디자인 ]_ 상세내용 Flat Design Material Design

13 일차 [ 모바일앱디자인 ]_ 상세내용 콘텐츠표현색상및단계 배경표현색상및단계 앱스와치제작 그라데이션

14 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 - 폰트그대로의느낌을주지말것 - 고딕 / 필기 / 로고화텍스트를혼용해서사용 - 이미지와버튼의안정적인구도사용

15 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 or or or Popup or Don t DO Transition 단순정보를나타낼땐닫기버튼을사용 닫기버튼은좌측상단또는하단에닫기버튼을권장합니다. 입력및선택기능이있을땐예 / 아니오버튼사용하고상단의닫기버튼은사용하지않음 긍정적인내용의버튼은왼쪽, 부정적인버튼의위치는좌측에배치한다. 장면전환 (Transition) 상위메뉴에서상세내용또는, 다른기능의화면으로이동할때사용 상위메뉴또는다른메뉴로이동하는네비버튼이필요함. 팝업 (Popup : Alert / Modal / Dialog) 현재화면의설정및부수적인기능, 정보등을나타낼때사용

4-3. 3 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 Don t DO 사용자에게입력을받는대화창 (Dialog) 의닫기버튼및이동버튼은좌측상단을권장함 확인,

16 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 Don t DO 사용자에게입력을받는대화창 (Dialog) 의닫기버튼및이동버튼은좌측상단을권장함 확인, 저장, OK 와같은최종확인버튼은우측상단에배치하여키패드와겹치는것을방지함. 확인버튼을우측상단에배치하는이유는입력후키패드를내리고다시 OK 버튼을누르는단계를축소할수있음.

17 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 Don t DO 갤러리구조 리스트구조 스크롤이가능하여더많은정보가있음을보여준다. 사진및이미지의중요도가높은콘텐츠는갤러리구조를따른다. 정보가중요한콘텐츠는리스트구조를따른다.

18 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 100%

19 일차 [ 프로토타입툴을이용한디자인 ]_ 상세내용 Adobe XD 활용

mobile_guide_SA

mobile_guide_SA 네이버 모바일배너 모바일 네트워트 GUIDE AD GUIDE Version 1.0 03. 적용위치 04. Appendix 목차 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 01/03 네이버 모바일배너 개요 네이버 모바일배너는 네이버 모바일 서비스