디자이너와 디벨로퍼가 서로 이해해나가는 공간 DnD 에서 강의하는 '협업하는 디자이너' 수업자료입니다. https://www.facebook.com/groups/designersndevelopers/

1. DnD
디자이너에서
협업하는
디자이너로!
배우자마자 바로 적용 해볼 수 있는 실전 협업 수업!

2. Index
iOS 기초 이론
3. 아이폰 앱을 수정해봅시다
iOS
iOS 실습
정리

3. One
iOS와 관련된 기본적인 사항들을 배워봅시다
iOS 기초 이론

4. #이제 무엇인지 아시죠? iOS
저번 수업에서 알려드렸듯이
macOS, Windows 같은 ‘OS’ 입니다
04

5. #무엇일까요? iOS
05

6. #iOS 에서는 dp 를 안쓰나요? pt
iOS 에서는 dp 를 쓰지는 않습니다.
하지만 같은 개념으로 pt 라는 단위를 씁니다!
06

7. #iOS 에서는 dp 를 안쓰나요? pt
07

8. #iOS 에서는 dp 를 안쓰나요? pt
08
iPhone 5/5s
2x
iPhone 6/6s
2x
iPhone 6/6s plus
3x

9. #iOS 에서는 dp 를 안쓰나요? pt
09

10. #iOS 의 두 컨테이너
10
TabBarController

11. #iOS 의 두 컨테이너
11
TabBarController
기능적으로 분리된 View를
보여줄 때

12. #iOS 의 두 컨테이너
12
TabBarController
기능적으로 분리된 View를
보여줄 때
TabBar 위에 다른 View 가 들어
갑니다

13. #iOS 의 두 컨테이너
13
NavigationController

14. #iOS 의 두 컨테이너
14
NavigationController
흐름을 따라 이동하는 View 를
보여줄 때

15. #iOS 의 두 컨테이너
15
NavigationController
흐름을 따라 이동하는 View 를
보여줄 때
아래에 다른 View 가 들어갑니
다

16. #iOS 의 두 컨테이너
16
TabBarController 안에
NavigationController 가 쓰일
수 있습니다

17. #iOS 의 두 컨테이너
* SplitViewController 도 있습니다
17

18. #iOS 의 View
18
Label
텍스트를 보여줍니다

19. #iOS 의 View
19
Button
누를 수 있는 버튼입니다

20. #iOS 의 View
20
Segmented Control
여러개 중 하나를 선택할 수
있는 컨트롤입니다

21. #iOS 의 View
21
TextField
텍스트를 입력 받습니다

22. #iOS 의 View
22
Slider
정도를 나타냅니다

23. #iOS 의 View
23
Switch
스위치

24. #iOS 의 View
24
Activity Indicator View
(Spinner)
작업중임을 표시합니다

25. #iOS 의 View
25
Progress View
진행 정도를 표시합니다

26. #iOS 의 View
26
Stepper
값을 늘리거나 줄일 때 씁니다

27. #iOS 의 View
27
Image View
이미지를 표시합니다

28. #iOS 의 View
28
TableView
테이블을 보여줍니다

29. #iOS 의 View
기본적으로 좀 이쁘게 생겼습니다!
(동의 하시나요?)
커스터마이징 하기가 정말 더럽게 빡셉니다
29

30. #iOS 의 View
있는거 가져다 써주세요..
Awesome-iOS
http://awesomeios.com/
Awesome-iOS-UI (업데이트 안되고 있음)
https://github.com/cjwirth/awesome-ios-ui
30

31. Two
iOS UI 를 직접 꾸며봅시다!
iOS 실습

32. #iOS 실습
Xcode 를 실행해봅시다
32

33. #iOS 실습
Main.storyboard 클릭
33

34. #iOS 실습 Xcode 8
34

35. #iOS 실습 Xcode 8
35

36. #iOS 실습 Xcode 8
36

37. #iOS 그림판 storyboard
37

38. #이미지를 넣어봅시다 Image View
38

39. #이미지를 넣어봅시다 Image View
39

40. #이미지 리소스를 추가해봅시다 Assets
40

41. #이미지 리소스를 추가해봅시다 Assets
41

42. #이미지 리소스를 추가해봅시다 Assets
42

43. #이미지 리소스를 추가해봅시다 Assets
43

44. #이미지 리소스를 추가해봅시다 Assets
44

45. #이미지 리소스를 추가해봅시다 Assets
45

46. #이미지를 넣어봅시다 Image View
46

47. #이미지를 넣어봅시다 Image View
47

48. #이미지를 넣어봅시다 Image View
48
으아니!

49. #이것은 마술입니다 Auto Layout
Storyboard 크기는 왜 저렇게 생겼을까요?
49

50. #이것은 마술입니다 Auto Layout
50

51. #이것은 마술입니다 Auto Layout
51

52. #이것은 마술입니다 Auto Layout
52

53. #이미지를 넣어봅시다 Image View
53
Good!

54. #텍스트를 넣어봅시다 Label
54

55. #텍스트를 넣어봅시다 Label
55

56. #텍스트를 넣어봅시다 Label
56

57. #텍스트를 넣어봅시다 Label
57

58. #텍스트를 넣어봅시다 Label
58

59. #텍스트를 넣어봅시다 Label
59

60. #텍스트를 넣어봅시다 Label
60

61. #텍스트를 넣어봅시다 Label
61

62. #텍스트를 넣어봅시다 Label
62

63. #텍스트를 넣어봅시다 Label
63

64. #텍스트를 넣어봅시다 Label
64

65. #텍스트를 넣어봅시다 Label
65
Good!

66. #배경색을 넣어봅시다 View
66

67. #배경색을 넣어봅시다 View
67

68. #배경색을 넣어봅시다
68
Good!

69. #버튼을 넣어봅시다 Button
69

70. #버튼을 넣어봅시다 Button
70

71. #벡터 이미지 리소스를 추가해봅시다 Assets
71

72. #벡터 이미지 리소스를 추가해봅시다 Assets
72

73. #벡터 이미지 리소스를 추가해봅시다 Assets
73

74. #버튼을 넣어봅시다 Button
74

75. #버튼을 넣어봅시다 Button
75

76. #버튼을 넣어봅시다 Button
76

77. #버튼을 넣어봅시다 Button
77

78. #버튼을 넣어봅시다 Button
78

79. #버튼을 넣어봅시다 Button
79

80. #버튼을 넣어봅시다 Button
80
Good!

81. #버튼을 옮겨봅시다 AutoLayout
81

82. #버튼을 옮겨봅시다 AutoLayout
82

83. #버튼을 옮겨봅시다 AutoLayout
83

84. #버튼을 옮겨봅시다 AutoLayout
84

85. #버튼을 옮겨봅시다 AutoLayout
85

86. #버튼을 옮겨봅시다 AutoLayout
86
Finish!

87. Three
오늘 배운 내용을 정리해봅시다
정리

88. #정리해봅시다
pt
해상도가 다른 폰들에서도 비슷하게 보이도록 해주는 단위
안드로이드의 dp 와 같은 개념
View
iOS 에 있는 View 들을 알아둡시다
커스터마이징이 드럽게 힘들어요!
AutoLayout
다양한 해상도에서의 뷰 배치를 해결해주는 마법사
88

89. #References
Designer's guide to DPI
http://sebastien-gabriel.com/designers-guide-to-dpi/
89

90. E N D