2017 iOS 앱 스터디 1주차 - 프로젝트 생성 및 UI

시간 : 2017.08.12 (토) 오전 10시 ~ 12시 (2시간)
장소 : 강남역 옐로스톤 스터디룸
참여자 : 5명

Transcript

1. 1주차-프로젝트생성및UI iOS Study 2017.08.12(토) ˅
   
   ӣ੿ਗ
   BMM
   SJHIUT
   SFTFSWFE
2. ࢸ஖
3. 프로젝트 생성 및 UI 방법 - App Store
4. 프로젝트 생성 및 UI 방법 - Site
5. ೐۽ં౟ ࢤࢿ
6. 프로젝트 생성 및 UI 프로젝트 생성
7. 프로젝트 생성 및 UI 프로젝트 생성
8. 프로젝트 생성 및 UI 프로젝트 생성
9. 프로젝트 생성 및 UI 프로젝트 생성
10. ೐۽ં౟ ҳઑ
11. 프로젝트 생성 및 UI 프로젝트 구조 Scene - ೞա੄ ചݶ StoryBoard(झషܻࠁ٘) - ৈ۞ѐ੄ Scene੉ ׸ѹ੓ח ౵ੌ (ۨ੉ইਓ ߓ஖੘স, View২࣌, ചݶ ੹ജ(Segue) ١ী ਊ੉) ViewController - Swift௿ېझ۽ ೞա੄ ചݶী োѾغয ௏٬੉ оמೞѱ ೣ ೞա੄ Sceneীח ೞա੄ ViewController োѾ ViewControllerח A Sceneী ੸ਊೞҊب B Scene, C Scene١ ׮ܲ Sceneী ઺ࠂ ࢎਊ оמೣ द੘ -BVODI4DSFFO
    झషܻࠁ٘ .BJO
    झషܻࠁ٘ .BJO੄
    ୐
    4DFOF ୐
    4DFOF੄
    7JFX$POUSPMMFS জਸ
    ۽٬ೞחزউ
    -BVODI4DSFFO
    झషܻࠁ٘
    ୐
    4DFOF
    ڸ਋ӝ ۽٬੉
    ՘աݶ
    .BJO
    झషܻࠁ٘
    ڸ਋ӝ .BJO
    झషܻࠁ٘੄
    ୐
    4DFOF
    ଺ই
    ڸ਋ӝ ୐
    4DFOF੄
    7JFX$POUSPMMFS
    ࢤݺ઱ӝ
    ೣٜࣻ
    प೯
12. 프로젝트 생성 및 UI 프로젝트 구조 AppDelegate.swift - জ੄ ࢚క߸ച (জ द੘, ऀѹ૗, աఋթ, ઙܐ ١) ViewController.swift - ചݶਸ ҙܻೞח ௿ېझ (೐۽ં౟ ࢤࢿ द ചݶ 1ѐо ٜ݅য૑Ҋ Ӓ ചݶী োѾ೧ࢲ ઁҕؽ) Main.storyboard - ৈ۞ചݶٜਸ о૓ ౵ੌ (੉ ౵ੌਸ ৌҊ ചݶ ۨ੉ইਓ ੘সਸ ೣ) Assets.xcassets - ੉޷૑ ಫ؊ (೧࢚ب߹ ੉޷૑ ੸ਊ) LaunchScreen.storyboard - জ੄ ୐ചݶ੉ ڰӝ ੹ী ڸ਎ ചݶਸ о૓ ౵ੌ (Splash ו՝) Info.plist - ജ҃߸ࣻ ౵ੌ (঱যࢸ੿, জ੄ ֎౟ਕ௼ ࢎਊೲо, জߡ੹ ١ਸ ׮ܚ)
13. 프로젝트 생성 및 UI AppDelegate.swift AppDelegate.swift - জ੄ ࢚క߸ച (জ द੘, ऀѹ૗, աఋթ, ઙܐ ١)
14. 프로젝트 생성 및 UI ViewController.swift ViewController.swift - ചݶਸ ҙܻೞח ௿ېझ (೐۽ં౟ ࢤࢿ द ചݶ 1ѐо ٜ݅য૑Ҋ Ӓ ചݶী োѾ೧ࢲ ઁҕؽ)
15. 프로젝트 생성 및 UI LaunchScreen.storyboard LaunchScreen.storyboard - জ੄ ୐ചݶ੉ ڰӝ ੹ী ڸ਎ ചݶਸ о૓ ౵ੌ (Splash ו՝)
16. 프로젝트 생성 및 UI Main.storyboard Main.storyboard - ৈ۞ചݶٜਸ о૓ ౵ੌ (੉ ౵ੌਸ ৌҊ ചݶ ۨ੉ইਓ ੘সਸ ೣ)
17. 프로젝트 생성 및 UI Assets.xcassets Assets.xcassets - ੉޷૑ ಫ؊ (೧࢚ب߹ ੉޷૑ ੸ਊ)
18. 프로젝트 생성 및 UI Info.plist Info.plist - ജ҃߸ࣻ ౵ੌ (঱যࢸ੿, জ੄ ֎౟ਕ௼ ࢎਊೲо, জߡ੹ ١ਸ ׮ܚ)
19. प೯೧ࠁӝ
20. 프로젝트 생성 및 UI 실행해보기 জ प೯द ୊਺ڰח ۽٬ചݶэ਷ ചݶ(Scene)ਸ о૓ storyboard: LaunchScreen ୐ ചݶ(Scene)ਸ о૓ storyboard : Main LaunchScreen, Mainਵ۽ ੿೧૓ ੉ਬח?? ޖઑѤ Ӓېࢲ(X) Info.plistী ইې৬ э਷ ੿ࠁо ׸ѹ੓যࢲ(O)
21. 프로젝트 생성 및 UI 실행해보기 LaunchScreen.storyboard Main.storyboard ف storyboard੄ ୐ചݶ উী ׮ܲ ఫझ౟ܳ ֍যࠁҊ प೯೧ࠁӝ
22. 프로젝트 생성 및 UI 실행해보기 LaunchScreen.storyboard
23. 프로젝트 생성 및 UI 실행해보기
24. 프로젝트 생성 및 UI 실행해보기 LaunchScreen.storyboard
25. 프로젝트 생성 및 UI 실행해보기 Main.storyboard
26. 프로젝트 생성 및 UI 실행해보기 Main.storyboard
27. 프로젝트 생성 및 UI 실행해보기
28. 프로젝트 생성 및 UI 실행해보기 о࢚ दޯۨ੉ఠܳ ੉ਊ೧ о࢚੄ iOS ಪী प೯दఃӝ ചݶ੉ ցޖ ௼׮ݶ Window > Scale > 33%۽ ࢸ੿
29. UI (StoryBoard)
30. 프로젝트 생성 및 UI UI (StoryBoard) Main.storyboardܳ ৌݶ ਤ৬ э਷ ചݶ੉ ա২פ׮.
31. 프로젝트 생성 및 UI UI (StoryBoard) ചݶ য়ܲଃ ਤ੄ ੉ ߡౡٜਸ ࢎਊೞݶ ৽ଃ,য়ܲଃ,ইې੄ ಁօਸ ײও׮о ৌ঻׮о ೡ ࣻ ੓णפ׮. ੉ ߡౡٜ ઺ فߣ૩,ࣁߣ૩ Ѫਸ ࢎਊೞݶ فѐ੄ ౵ੌਸ ೞա੄ ചݶীࢲ ࠅ ࣻ ੓חؘ, فߣ૩ ߡౡ݅ ׮਺दрী UIViewܳ Swift௏٘߸ࣻ۽ োѾೡ ٸ ࠁৈܻ٘ѷणפ׮.
32. 프로젝트 생성 및 UI UI (StoryBoard) Main.storyboard ੷ ചݶ ৽ଃ о਍ؘী ੓ח ച࢓಴(Storyboard Entry Point)о ੉ ౵ੌ੄ ୐ द੘ചݶਸ ڷೣ
33. 프로젝트 생성 및 UI UI (StoryBoard) ചݶਸ ؊ ୶оೞ۰ݶ ചݶҗ э੉ য়ܲଃ ইېࠗ࠙੄ ࣁߣ૩ చਸ ־ܰҊ ViewControllerܳ ٘ېӒೞৈ ചݶী оઉ׮ فݶ ؾפ׮. (ചݶ ੹ജ਷ ׮਺दрী)
34. 프로젝트 생성 및 UI UI (StoryBoard) UIButtonਸ ଺ই ٘ېӒ೧ࢲ 2ѐ ֍যࠁӝ
35. 프로젝트 생성 및 UI UI (StoryBoard) ViewControllerܳ ٜ݅ѱ غݶ ӝࠄ੸ਵ۽ 3о૑о ׸ѹ੓णפ׮. ಪ ചݶ੄ ߓఠܻ ࠗ࠙ ߃ଃী ࢶݽনਵ۽ ٜযр Top Layout Guide (ాनࢎ, दр, ৬੉౵੉١੉ ಴दػ StatusBar৔৉੉ ՘աח ࠗ࠙ী ਤ஖೤פ׮.) ചݶ ݔ ߃ী ࢶݽনਵ۽ ٜযр Bottom Layout Guide ੹୓੸ੋ ചݶੋ View
36. 프로젝트 생성 및 UI UI (StoryBoard) Top Layout Guide View Bottom Layout Guide
37. 프로젝트 생성 및 UI UI (StoryBoard) View উী ৈ۞о૑ܳ ֍Ҋ ചݶਸ Բ޷חؘ ࠁా ઝ಴ࠁ׮ח ઁডઑѤٜਸ ࢎਊ೤פ׮.
38. UI (use Constraints)
39. 프로젝트 생성 및 UI UI (use Constraints) width : о۽ height : ࣁ۽ equal width : о۽৬ эѱ equal height : ࣁ۽৬ эѱ aspect ratio : о۽ࣁ۽ ࠺ਯ
40. 프로젝트 생성 및 UI UI (use Constraints) top : ਤ centerY : о਍ؘ(ࣁ۽, vertical) bottom : ইې
41. 프로젝트 생성 및 UI UI (use Constraints) A.centerY equal B.centerY A.top equal B.centerY A.top equal B.top A.bottom equal B.top " # OR " # OR " # OR " # OR " # " # " # " #
42. 프로젝트 생성 및 UI UI (use Constraints) leading : ৽ଃ centerX : о਍ؘ(о۽, horizontal) trailing : য়ܲଃ
43. 프로젝트 생성 및 UI UI (use Constraints) A.centerX equal B.centerX A.leading equal B.centerX A.trailing equal B.trailing A.trailing equal B.leading " # # " OR " # " # OR " # # " OR " # OR " #
44. 프로젝트 생성 및 UI UI (use Constraints) UIVIewח StoryBoard੄ Viewউী ߓ஖ೡ ٸ ઁডઑѤਵ۽ о۽ਤ஖, ࣁ۽ਤ஖, о۽ӡ੉, ࣁ۽ӡ੉о ഛ੿غযঠ೤פ׮.
45. 프로젝트 생성 및 UI UI (use Constraints) ٘ېӒܳ ࢎਊ 4ѐ੄ Auto Layout Tool ࢎਊ(Stack, Align, Pin, Resolve)
46. 프로젝트 생성 및 UI UI (use Constraints) э਷ ࣻળ੄ UIViewՙܻ ਋௿ܼ ٘ېӒद Horizontal Spacing A.trailing + @ equal B.leading Vertical Spacing A.bottom + @ equal B.top 5PQ A.top equal B.top $FSUFS
    7FSUJDBMMZ A.centerY equal B.centerY #BTFMJOF
    A.baseline equal B.baseline #PUUPN A.bottom equal B.bottom -FBEJOH A.leading equal B.leading $FOUFS
    )PSJ[POUBMMZ A.centerX equal B.centerX 5SBJMJOH A.trailing equal B.trailing &RVBM
    8JEUIT A.width equal B.width &RVBM
    )FJHIUT A.height equal B.height A, B = ਋ܻо ٘ېӒ೧ࢲ ֍਷ View View = ࠗݽView @ = ୶оч
47. 프로젝트 생성 및 UI UI (use Constraints) UIView৬ ࠗݽView੄ ਋௿ܼ ٘ېӒद Trailing Space to Container Margin 7JFXMFBEJOH
    
    .
    FRVBM
    "MFBEJOH 7FSUJDBM
    4QBDJOH
    UP
    5PQ
    -BZPVU
    (VJEF TLG.bottom equal A.top $FSUFS
    )PSJ[POUBMMZ
    JO
    $POUBJOFS
    7JFXDFOUFS9
    FRVBM
    "DFOUFS9 $FOUFS
    7FSUJDBMMZ
    JO
    $POUBJOFS View.centerY equal A.centerY &RVBM
    8JEUIT View.width equal A.width &RVBM
    )FJHIUT View.height equal A.height A = ਋ܻо ٘ېӒ೧ࢲ ֍਷ View View = ࠗݽView TLG = Top Layout Guide M = ӝࠄ݃૓
48. 프로젝트 생성 및 UI UI (use Constraints) Leading Space to Container Margin Trailing Space to Container Margin
49. 프로젝트 생성 및 UI UI (use Constraints) 4ѐ੄ Auto Layout Tool (Stack, Align, Pin, Resolve)
50. 프로젝트 생성 및 UI UI (use Constraints) Auto Layout Tool (Align)
51. 프로젝트 생성 및 UI UI (use Constraints) Auto Layout Tool (Pin)
52. 프로젝트 생성 및 UI UI (use Constraints) Auto Layout Tool (Resolve)
53. 프로젝트 생성 및 UI UI (use Constraints) ୶оػ ઁডઑѤ ࠁӝ
54. 프로젝트 생성 및 UI UI (use Constraints) ઁডઑѤ ৌযࠁӝ
55. 프로젝트 생성 및 UI UI (use Constraints) ઁডઑѤ ࣻ੿ೞӝ(୶оч)
56. 프로젝트 생성 및 UI UI (use Constraints) ઁডઑѤ ࣻ੿ೞӝ(࠺ਯч)
57. 프로젝트 생성 및 UI UI (use Constraints) ઁডઑѤ ࣻ੿ೞӝ(࠺ਯч)
58. 프로젝트 생성 및 UI UI (use Constraints) ৘ઁ
59. 프로젝트 생성 및 UI UI (use Constraints) ੉ܴ ૙ӝ
60. 프로젝트 생성 및 UI UI (use Constraints) ੉ܴ ૙ӝ
61. 프로젝트 생성 및 UI UI (use Constraints) ಪઙܨٜ ߂ ഥ੹ Top Layout Guide View Bottom Layout Guide
62. 프로젝트 생성 및 UI UI (use Constraints) Compact / Regular
63. 프로젝트 생성 및 UI UI (use Constraints) ઁ৻ೠ Ѫٜ ࠗ١ഐ, ਋ࢶࣽਤ
64. UIView (UILabel, UIButton, UITextEdit)
65. 프로젝트 생성 및 UI UIView UILabelҗ UITextEdit৬ UIButtonਸ 1:1:1ࣁ۽ߓ஖
66. 프로젝트 생성 및 UI UIView UILabelҗ UITextEdit৬ UIButtonਸ 1:1:1ࣁ۽ߓ஖
67. 프로젝트 생성 및 UI UIView ViewController.swiftܳ splitਵ۽ ڸ਋ӝ
68. 프로젝트 생성 및 UI UIView ViewController.swift ੌױ ӝࠄز੘ ੉೧ܳ ਤ೧ ׼࠙р ࢤݺ઱ӝ ೣࣻ ઺ viewDidLoad݅ ࢎਊೞѷणפ׮.
69. 프로젝트 생성 및 UI UIView ߸ࣻোѾ
70. 프로젝트 생성 및 UI UIView ߸ࣻোѾ
71. 프로젝트 생성 및 UI UIView ߸ࣻোѾ
72. 프로젝트 생성 및 UI UIView Labelч оઉয়ח ۽Ӓڸਕࠁӝ
73. 프로젝트 생성 및 UI UIView UIButton ௿ܼ੉߮౟োѾ
74. 프로젝트 생성 및 UI UIView UIButton ௿ܼ੉߮౟োѾ
75. 프로젝트 생성 및 UI UIView UIButton ௿ܼ੉߮౟োѾ
76. 프로젝트 생성 및 UI UIView ௿ܼद TextEdit੄ ੑ۱ч оઉ৬ UILabelী ੸ਊ೧ࠁӝ TextEditܳ ߸ࣻ۽ োѾ onClickೣࣻীࢲ TextEdit੄ ੑ۱ чਸ ԁղ UILable੄ textী ؀ੑ
77. 프로젝트 생성 및 UI 다음시간에는 1. ੉޷૑ (15࠙ ৘࢚) UIImageView( with Assets, File ) 2. ࠂण (4ߣਸ ਤೠ ࠂण) (30࠙ ৘࢚) оੑ ಬ ഋध੄ ചݶ ٜ݅ӝ(पण) ױ҅ 1 : UILabel, UITextEdit, UIButton ߓ஖ (ID, PW, PWഛੋ, ੉ܴ) ױ҅ 2 : ௿ېझ۽ োѾ(UIView߸ࣻ, ੉߮౟ೣࣻ) ױ҅ 3 : ߡౡ ׂۥਸ ٸ ۽Ӓ۽ UITextEditчٜ ੹ࠗ ڸਕࠁӝ 3. ׮੉঴۽Ӓହ (10࠙ ৘࢚) Dialog(AlertController, ഛੋ/ஂࣗ੄ рױೠ ࣻળ) 4. ఃಁ٘ ׮ܖӝ (20࠙ ৘࢚) ੑ۱೦ݾ ׮਺ਵ۽ ನழय(FirstResponder), ৈߔ ఠ஖द ఃಁ٘ ײӝ