협업하는 디자이너 - #6 ios
TRANSCRIPT
DnD
디자이너에서�협업하는�디자이너로!배우자마자�바로�적용�해볼�수�있는�실전�협업�수업!
Index
iOS�기초�이론
3.�아이폰�앱을�수정해봅시다
iOS
iOS�실습
정리
One
iOS와�관련된�기본적인�사항들을�배워봅시다
iOS�기초�이론
#이제�무엇인지�아시죠?�iOS
저번�수업에서�알려드렸듯이�
macOS,�Windows�같은�‘OS’�입니다
04
#무엇일까요?�iOS
05
#iOS�에서는�dp�를�안쓰나요?�pt
iOS�에서는�dp�를�쓰지는�않습니다.�
하지만�같은�개념으로�pt�라는�단위를�씁니다!
06
#iOS�에서는�dp�를�안쓰나요?�pt
07
#iOS�에서는�dp�를�안쓰나요?�pt
08
iPhone�5/5s�2x
iPhone�6/6s�2x
iPhone�6/6s�plus�3x
#iOS�에서는�dp�를�안쓰나요?�pt
09
#iOS�의�두�컨테이너
10
TabBarController
#iOS�의�두�컨테이너
11
TabBarController�
기능적으로�분리된�View를보여줄�때
#iOS�의�두�컨테이너
12
TabBarController�
기능적으로�분리된�View를보여줄�때�
TabBar�위에�다른�View�가�들어갑니다
#iOS�의�두�컨테이너
13
NavigationController�
#iOS�의�두�컨테이너
14
NavigationController�
흐름을�따라�이동하는�View�를�보여줄�때�
#iOS�의�두�컨테이너
15
NavigationController�
흐름을�따라�이동하는�View�를�보여줄�때�
아래에�다른�View�가�들어갑니다
#iOS�의�두�컨테이너
16
TabBarController�안에�
NavigationController�가�쓰일�수�있습니다
#iOS�의�두�컨테이너
*�SplitViewController�도�있습니다�
17
#iOS�의�View
18
Label�
텍스트를�보여줍니다
#iOS�의�View
19
Button�
누를�수�있는�버튼입니다
#iOS�의�View
20
Segmented�Control�
여러개�중�하나를�선택할�수있는�컨트롤입니다
#iOS�의�View
21
TextField�
텍스트를�입력�받습니다
#iOS�의�View
22
Slider�
정도를�나타냅니다
#iOS�의�View
23
Switch�
스위치
#iOS�의�View
24
Activity�Indicator�View(Spinner)�
작업중임을�표시합니다
#iOS�의�View
25
Progress�View�
진행�정도를�표시합니다
#iOS�의�View
26
Stepper�
값을�늘리거나�줄일�때�씁니다
#iOS�의�View
27
Image�View�
이미지를�표시합니다
#iOS�의�View
28
TableView�
테이블을�보여줍니다
#iOS�의�View
기본적으로�좀�이쁘게�생겼습니다!(동의�하시나요?)�
커스터마이징�하기가�정말�더럽게�빡셉니다
29
#iOS�의�View
있는거�가져다�써주세요..�
Awesome-iOShttp://awesomeios.com/�
Awesome-iOS-UI�(업데이트�안되고�있음)https://github.com/cjwirth/awesome-ios-ui
30
Two
iOS�UI�를�직접�꾸며봅시다!
iOS�실습
#iOS�실습
Xcode�를�실행해봅시다
32
#iOS�실습
Main.storyboard�클릭
33
#iOS�실습�Xcode�8
34
#iOS�실습�Xcode�8
35
#iOS�실습�Xcode�8
36
#iOS�그림판�storyboard
37
#이미지를�넣어봅시다�Image�View
38
#이미지를�넣어봅시다�Image�View
39
#이미지�리소스를�추가해봅시다�Assets
40
#이미지�리소스를�추가해봅시다�Assets
41
#이미지�리소스를�추가해봅시다�Assets
42
#이미지�리소스를�추가해봅시다�Assets
43
#이미지�리소스를�추가해봅시다�Assets
44
#이미지�리소스를�추가해봅시다�Assets
45
#이미지를�넣어봅시다�Image�View
46
#이미지를�넣어봅시다�Image�View
47
#이미지를�넣어봅시다�Image�View
48
으아니!
#이것은�마술입니다�Auto�Layout
Storyboard�크기는�왜�저렇게�생겼을까요?
49
#이것은�마술입니다�Auto�Layout
50
#이것은�마술입니다�Auto�Layout
51
#이것은�마술입니다�Auto�Layout
52
#이미지를�넣어봅시다�Image�View
53
Good!
#텍스트를�넣어봅시다�Label
54
#텍스트를�넣어봅시다�Label
55
#텍스트를�넣어봅시다�Label
56
#텍스트를�넣어봅시다�Label
57
#텍스트를�넣어봅시다�Label
58
#텍스트를�넣어봅시다�Label
59
#텍스트를�넣어봅시다�Label
60
#텍스트를�넣어봅시다�Label
61
#텍스트를�넣어봅시다�Label
62
#텍스트를�넣어봅시다�Label
63
#텍스트를�넣어봅시다�Label
64
#텍스트를�넣어봅시다�Label
65
Good!
#배경색을�넣어봅시다�View
66
#배경색을�넣어봅시다�View
67
#배경색을�넣어봅시다
68
Good!
#버튼을�넣어봅시다�Button
69
#버튼을�넣어봅시다�Button
70
#벡터�이미지�리소스를�추가해봅시다�Assets
71
#벡터�이미지�리소스를�추가해봅시다�Assets
72
#벡터�이미지�리소스를�추가해봅시다�Assets
73
#버튼을�넣어봅시다�Button
74
#버튼을�넣어봅시다�Button
75
#버튼을�넣어봅시다�Button
76
#버튼을�넣어봅시다�Button
77
#버튼을�넣어봅시다�Button
78
#버튼을�넣어봅시다�Button
79
#버튼을�넣어봅시다�Button
80
Good!
#버튼을�옮겨봅시다�AutoLayout
81
#버튼을�옮겨봅시다�AutoLayout
82
#버튼을�옮겨봅시다�AutoLayout
83
#버튼을�옮겨봅시다�AutoLayout
84
#버튼을�옮겨봅시다�AutoLayout
85
#버튼을�옮겨봅시다�AutoLayout
86
Finish!
Three
오늘�배운�내용을�정리해봅시다
정리
#정리해봅시다
pt�
해상도가�다른�폰들에서도�비슷하게�보이도록�해주는�단위안드로이드의�dp�와�같은�개념�
View�
iOS�에�있는�View�들을�알아둡시다커스터마이징이�드럽게�힘들어요!�
AutoLayout�
다양한�해상도에서의�뷰�배치를�해결해주는�마법사
88
#References
Designer's�guide�to�DPIhttp://sebastien-gabriel.com/designers-guide-to-dpi/�
89
E N D