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

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

2. Index
Git 설치하기
1. 코드 여러분도 돌려보고 싶지 않으세요?
사전 준비
GitHub 가입하기
Git-it-electron 받기
SourceTree 설치하기
Index

3. One
아직 뭔지는 모르겠지만 설치해봅시다
Git 설치하기

4. #무엇에 쓰는 물건인고? Git
여러 명의 개발자들은
어떻게 같은 코드를 가지고 일하고 있을까요?
개발자는 자기가 수정한 것을 되돌리고 싶을 때
어떻게 할까요?
04

5. #무엇에 쓰는 물건인고? Git
Git 이 모두 해결해줍니다!
자세한건 수업에서
05

6. #일단 설치해봅시다! Git 설치하기
https://git-scm.com/downloads
각자 OS (Mac, Windows) 에 맞는 파일을 다운로드
06
[Downloads for <OS>] 클릭
자동으로 다운로드 되지 않으면
[click here to ~] 클릭

7. #일단 설치해봅시다! Git 설치하기
07
Windows 설치WindowsMac

8. #일단 설치해봅시다! Git 설치하기 - Mac
08
받은 dmg 파일을 실행

9. #일단 설치해봅시다! Git 설치하기 - Mac
09
pkg 파일을
[오른쪽 클릭] - [열기] 클릭
[열기] 클릭

10. #일단 설치해봅시다! Git 설치하기 - Mac
10
[계속] - [설치] - [닫기] 완료!

11. #일단 설치해봅시다! Git 설치하기 - Mac
11
터미널 실행

12. #일단 설치해봅시다! Git 설치하기 - Mac
12
‘git’ 을 쳐서 위에 처럼 나오면 성공

13. #일단 설치해봅시다! Git 설치하기 - Windows
13
받은 exe 파일을 실행

14. #일단 설치해봅시다! Git 설치하기 - Windows
14
[Next] - [Next]

15. #일단 설치해봅시다! Git 설치하기 - Windows
15
Git GUI Here 체크 해제하고 [Next]
(Git Bash Here 도 해제하셔도 됩니다)

16. #일단 설치해봅시다! Git 설치하기 - Windows
16
[Next]

17. #일단 설치해봅시다! Git 설치하기 - Windows
17
두번째꺼 선택하고 [Next]

18. #일단 설치해봅시다! Git 설치하기 - Windows
18
맨 위에꺼 선택하고 [Next]

19. #일단 설치해봅시다! Git 설치하기 - Windows
19
맨 위에꺼 선택하고 [Next]

20. #일단 설치해봅시다! Git 설치하기 - Windows
20
Enable Git Credential Manager
체크 해제하고 [Install]

21. #일단 설치해봅시다! Git 설치하기 - Windows
21
설치 완료!

22. #일단 설치해봅시다! Git 설치하기 - Windows
22
명령 프롬프트 실행

23. ‘git’ 을 쳐서 위에 처럼 나오면 성공
#일단 설치해봅시다! Git 설치하기 - Windows
23

24. Two
개발자들의 성지, 가입해봅시다
GitHub 가입하기

25. #무엇에 쓰는 물건인고? GitHub
개발자들은 자신의 코드를 어디에 보관하고 있을까요?
25

26. #무엇에 쓰는 물건인고? GitHub
GitHub 가 보관해줍니다!
(아닌 경우도 있어요 ㅋㅋㅋ)
26

27. #일단 가입해봅시다! GitHub 가입하기
https://github.com
27
ID
Email
Password
클릭

28. #일단 가입해봅시다! GitHub 가입하기
28
무료 플랜인지 확인하고
[Continue] 클릭

29. #일단 가입해봅시다! GitHub 가입하기
29
설정 안해도 됩니다
[Submit] 클릭

30. #일단 가입해봅시다! GitHub 가입하기
30
이제 여러분도 GitHub 유저

31. #일단 가입해봅시다! GitHub 가입하기
31
GitHub 에서 날아온 이메일에서
[Verify email address] 를 누르지 않으시면
곧 아이디가 정지됩니다!
꼭 확인해주세요.

32. Three
여러분의 수업을 도와줄 Git-it-electron 을 받아봅시다
Git-it-electron 받기

33. #일단 받아봅시다! Git-it-Electron 받기
https://github.com/nallwhy/git-it-electron/releases
각자 OS (Mac, Windows) 에 맞는 파일을 다운로드
33

34. #일단 받아봅시다! Git-it-Electron 받기
34
WindowsMac

35. #일단 받아봅시다! Git-it-Electron 받기 - Mac
35
Git 설치할 때와 마찬가지로
[오른쪽 클릭] - [열기] 클릭

36. #일단 받아봅시다! Git-it-Electron 받기 - Mac
36
위와 같이 나타난다면 성공

37. #일단 받아봅시다! Git-it-Electron 받기 - Windows
37
받은 파일 압축을 풀고 ‘Git-it’ 실행

38. #일단 받아봅시다! Git-it-Electron 받기 - Windows
38
위와 같이 나타난다면 성공

39. Four
Git 을 다루는 비밀병기를 설치해봅시다
SourceTree 설치하기

40. #무엇에 쓰는 물건인고? SourceTree
SourceTree 는 무얼하는 아이일까요
40

41. #무엇에 쓰는 물건인고? SourceTree
수업 때까지 비밀입니다 :-)
41

42. #일단 설치해봅시다! SourceTree 설치하기
https://www.sourcetreeapp.com/
각자 OS (Mac, Windows) 에 맞는 파일을 다운로드
42
[Downloads SourceTree Free] 클릭

43. #일단 설치해봅시다! SourceTree 설치하기
43
WindowsMac

44. #일단 설치해봅시다! SourceTree 설치하기 - Mac
44
다운로드 받은 파일을 압축풀면
SourceTree 이 나옵니다

45. #일단 설치해봅시다! SourceTree 설치하기 - Mac
45
그 파일을 [응용 프로그램]에 넣어주시면 성공

46. #일단 설치해봅시다! SourceTree 설치하기 - Windows
46
다운로드 받은 파일을 실행

47. #일단 설치해봅시다! SourceTree 설치하기 - Windows
47
쭉쭉 설치해주시면 성공

48. #일단 설치해봅시다! SourceTree 설치하기
48
처음 실행하면 이런 창이 뜹니다
위처럼 선택하고 [Continue] 클릭

49. #일단 설치해봅시다! SourceTree 설치하기
49
SourceTree 는 Atlassian 계정이 있어야 사용할 수 있습니다
[Use an existing account] 클릭

50. #일단 설치해봅시다! SourceTree 설치하기
50
이런 창이 뜹니다.
아이디가 있으면 로그인, 아니면 [Sign up] 클릭

51. #일단 설치해봅시다! SourceTree 설치하기
51
알맞게 넣으신 후 [Sign up]

52. #일단 설치해봅시다! SourceTree 설치하기
52
이메일을 보냈다고 합니다

53. #일단 설치해봅시다! SourceTree 설치하기
53
이메일 열고 [Verify my email address] 클릭

54. #일단 설치해봅시다! SourceTree 설치하기
54
다시 로그인창 열고 로그인 하시면 됩니다

55. #일단 설치해봅시다! SourceTree 설치하기
55
로그인 되었다고 합니다
[Continue] 클릭

56. #일단 설치해봅시다! SourceTree 설치하기
56
[Skip Setup] 클릭

57. #일단 설치해봅시다! SourceTree 설치하기
57
Mac Windows
이렇게 잘 떴다면 성공!

58. E N D