협업하는 디자이너 - #1 git설치하기

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

Transcript of 협업하는 디자이너 - #1 git설치하기

Page 1: 협업하는 디자이너 - #1 git설치하기

DnD

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

Page 2: 협업하는 디자이너 - #1 git설치하기

Index

Git�설치하기

1.�코드�여러분도�돌려보고�싶지�않으세요?

사전�준비

GitHub�가입하기

Git-it-electron�받기

SourceTree�설치하기

Index

Page 3: 협업하는 디자이너 - #1 git설치하기

One

아직�뭔지는�모르겠지만�설치해봅시다

Git�설치하기

Page 4: 협업하는 디자이너 - #1 git설치하기

#무엇에�쓰는�물건인고?�Git

여러�명의�개발자들은 어떻게�같은�코드를�가지고�일하고�있을까요?�

개발자는�자기가�수정한�것을�되돌리고�싶을�때어떻게�할까요?

04

Page 5: 협업하는 디자이너 - #1 git설치하기

#무엇에�쓰는�물건인고?�Git

Git�이�모두�해결해줍니다!�

자세한건�수업에서

05

Page 6: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기

https://git-scm.com/downloads

각자�OS�(Mac,�Windows)�에�맞는�파일을�다운로드

06

[Downloads�for�<OS>]�클릭자동으로�다운로드�되지�않으면�

[click�here�to�~]�클릭

Page 7: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기

07

Windows 설치�Windows�Mac

Page 8: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Mac

08

받은�dmg�파일을�실행

Page 9: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Mac

09

pkg�파일을��[오른쪽�클릭]�-�[열기]�클릭

[열기]�클릭

Page 10: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Mac

10

[계속]�-�[설치]�-�[닫기]�완료!

Page 11: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Mac

11

터미널�실행

Page 12: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Mac

12

‘git’�을�쳐서�위에�처럼�나오면 성공

Page 13: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

13

받은�exe�파일을�실행

Page 14: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

14

[Next]�-�[Next]

Page 15: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

15

Git�GUI�Here�체크�해제하고�[Next]�(Git�Bash�Here�도�해제하셔도�됩니다)

Page 16: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

16

[Next]

Page 17: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

17

두번째꺼�선택하고�[Next]

Page 18: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

18

맨�위에꺼�선택하고�[Next]

Page 19: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

19

맨�위에꺼�선택하고�[Next]

Page 20: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

20

Enable�Git�Credential�Manager�체크�해제하고�[Install]

Page 21: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

21

설치�완료!

Page 22: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�Git�설치하기�-�Windows

22

명령�프롬프트�실행

Page 23: 협업하는 디자이너 - #1 git설치하기

‘git’�을�쳐서�위에�처럼�나오면 성공

#일단�설치해봅시다!�Git�설치하기�-�Windows

23

Page 24: 협업하는 디자이너 - #1 git설치하기

Two

개발자들의�성지,�가입해봅시다

GitHub�가입하기

Page 25: 협업하는 디자이너 - #1 git설치하기

#무엇에�쓰는�물건인고?�GitHub

개발자들은�자신의�코드를�어디에�보관하고�있을까요?

25

Page 26: 협업하는 디자이너 - #1 git설치하기

#무엇에�쓰는�물건인고?�GitHub

GitHub�가�보관해줍니다!�

(아닌�경우도�있어요�ㅋㅋㅋ)

26

Page 27: 협업하는 디자이너 - #1 git설치하기

#일단�가입해봅시다!�GitHub�가입하기

https://github.com

27

ID�

Email�

Password�

클릭

Page 28: 협업하는 디자이너 - #1 git설치하기

#일단�가입해봅시다!�GitHub�가입하기

28

무료�플랜인지�확인하고�[Continue]�클릭

Page 29: 협업하는 디자이너 - #1 git설치하기

#일단�가입해봅시다!�GitHub�가입하기

29

설정�안해도�됩니다�[Submit]�클릭

Page 30: 협업하는 디자이너 - #1 git설치하기

#일단�가입해봅시다!�GitHub�가입하기

30

이제�여러분도�GitHub�유저

Page 31: 협업하는 디자이너 - #1 git설치하기

#일단�가입해봅시다!�GitHub�가입하기

31

GitHub�에서�날아온�이메일에서�[Verify�email�address]�를�누르지�않으시면�

곧�아이디가�정지됩니다!�꼭�확인해주세요.

Page 32: 협업하는 디자이너 - #1 git설치하기

Three

여러분의�수업을�도와줄�Git-it-electron�을�받아봅시다

Git-it-electron�받기

Page 33: 협업하는 디자이너 - #1 git설치하기

#일단�받아봅시다!�Git-it-Electron�받기

https://github.com/nallwhy/git-it-electron/releases

각자�OS�(Mac,�Windows)�에�맞는�파일을�다운로드

33

Page 34: 협업하는 디자이너 - #1 git설치하기

#일단�받아봅시다!�Git-it-Electron�받기

34

�Windows�Mac

Page 35: 협업하는 디자이너 - #1 git설치하기

#일단�받아봅시다!�Git-it-Electron�받기�-�Mac

35

Git�설치할�때와�마찬가지로�[오른쪽�클릭]�-�[열기]�클릭

Page 36: 협업하는 디자이너 - #1 git설치하기

#일단�받아봅시다!�Git-it-Electron�받기�-�Mac

36

위와�같이�나타난다면 성공

Page 37: 협업하는 디자이너 - #1 git설치하기

#일단�받아봅시다!�Git-it-Electron�받기�-�Windows

37

받은�파일�압축을�풀고�‘Git-it’�실행

Page 38: 협업하는 디자이너 - #1 git설치하기

#일단�받아봅시다!�Git-it-Electron�받기�-�Windows

38

위와�같이�나타난다면 성공

Page 39: 협업하는 디자이너 - #1 git설치하기

Four

Git�을�다루는�비밀병기를�설치해봅시다

SourceTree�설치하기

Page 40: 협업하는 디자이너 - #1 git설치하기

#무엇에�쓰는�물건인고?�SourceTree

SourceTree�는�무얼하는�아이일까요

40

Page 41: 협업하는 디자이너 - #1 git설치하기

#무엇에�쓰는�물건인고?�SourceTree

수업�때까지�비밀입니다�:-)

41

Page 42: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

https://www.sourcetreeapp.com/

각자�OS�(Mac,�Windows)�에�맞는�파일을�다운로드

42

[Downloads�SourceTree�Free]�클릭

Page 43: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

43

�Windows�Mac

Page 44: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기�-�Mac

44

다운로드�받은�파일을�압축풀면�SourceTree�이�나옵니다

Page 45: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기�-�Mac

45

그�파일을�[응용�프로그램]에�넣어주시면 성공

Page 46: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기�-�Windows

46

다운로드�받은�파일을�실행

Page 47: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기�-�Windows

47

쭉쭉�설치해주시면 성공

Page 48: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

48

처음�실행하면�이런�창이�뜹니다�위처럼�선택하고�[Continue]�클릭

Page 49: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

49

SourceTree�는�Atlassian�계정이�있어야�사용할�수�있습니다�[Use�an�existing�account]�클릭

Page 50: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

50

이런�창이�뜹니다.�아이디가�있으면�로그인,�아니면�[Sign�up]�클릭

Page 51: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

51

알맞게�넣으신�후�[Sign�up]

Page 52: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

52

이메일을�보냈다고�합니다

Page 53: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

53

이메일�열고�[Verify�my�email�address]�클릭

Page 54: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

54

다시�로그인창�열고�로그인�하시면�됩니다

Page 55: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

55

로그인�되었다고�합니다�[Continue]�클릭

Page 56: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

56

[Skip�Setup]�클릭

Page 57: 협업하는 디자이너 - #1 git설치하기

#일단�설치해봅시다!�SourceTree�설치하기

57

Mac Windows

이렇게�잘�떴다면�성공!�

Page 58: 협업하는 디자이너 - #1 git설치하기

E N D