디자이너를위한Git 입니다.

1. 작성자 이철혁 (MSQL@NAVER.COM)
작성년월일 2015. 10. 04
디자이너를 위한 Git
이 문서는 나눔글꼴로 작성되었습니다. 설치하기

2. 목차
1. Version Control
- Version Control을 이용하고 계신가요?
- Version Control의 한 예 입니다.
- 가장 일반적인 Version Control
- 가장 일반적인 Version Control의 단점
2. Git의 설치
- Git은 무엇일까요?
- Git을 이용한 Version Control의 장점
- Git의 설치
2

3. 목차
3. Git의 사용
- Git을 시작하기 전에…
- Git의 실행 방법
- Git 환경설정
- Git 저장소 생성
- Git 을 이용한 관리
3

4. 0. 주의
이 문서는 프로그래머가 아닌 디자이너 분들에게 Git을 이용하면 좋은 점들을 소개하고,
사용을 유도하도록 작성되었습니다.
그래서 일단 최대한 이해하기 쉽게 전달하는 것에 중점을 두었기 때문에,
과감히 생략하거나, 다르게 표현한 부분이 있을 수 있습니다.
하지만 크게 틀린 부분은 없을테니 안심하세요 ^^;;
- 이 문서의 내용이 100% 정확하지는 않을 수 있습니다.
4

5. 1. Version Control
혹시 Version Control 이라는 말은 들어 보셨나요?
Version control을 사용하고 계신가요?
들어보지 못하신 분도,
사용하지 않고 계시다고 생각하신 분도 있겠지만,
아마 대부분 자신도 모르게 사용하고 있을 거예요.
- Version Control을 이용하고 계신가요?
5

6. 1. Version Control
출처 : Twitter(https://twitter.com/type4graphic/status/382755506575523840)
- Version Control의 한 예 입니다.
6

7. 1. Version Control
앞에 본 방식을 사용하고 계신가요?
언제 작업을 했는지..
과거 작업한 내역부터 새로운 작업을 복사해서 사용하기 위해…
등의 목적을 위해 파일이름의 앞이나 뒤에 날짜나
자신 만의 증가 숫자(버전)을 추가 해서
사용하고 있으셨을 겁니다.
- 가장 일반적인 Version Control
7

8. 1. Version Control
이 방식의 단점은 무엇일까요?
1) 디스크 공간을 많이 사용하게 됩니다.
수정된 부분은 일부지만, 파일을 통째로 복사를 해서 중복으로 전체를 만들어서 보관해야 한다는 문
제점이 있습니다.
파일 한 개라면 큰 일이 아닐 수 있지만, 다수의 파일들로 이루어진 폴더를 통째로 이 방식을 쓴다
면… 엄청난 공간의 낭비 입니다.
- 가장 일반적인 Version Control의 단점
8

9. 1. Version Control
2) 백업! 백업! 백업! 이 필요하다.
폴더에 파일을 여러 번 복사해서 사용 중이었는데…
실수로 폴더를 삭제 했다면?
정말 끔찍한 일일 것입니다.
따라서 중요한 파일은 외장형 디스크에 N드라이브, DropBox와 같은 클라우드 스토리지를 이용하
기도 하셨을 겁니다.
하지만… 이는 결국 자동이 아니라 주기적으로 해줘야 하는 단점이 있습니다.
- 가장 일반적인 Version Control의 단점
9

10. 1. Version Control
3) 변경된 수정 사항을 쉽게 볼 수가 없다.
파일 하나라 해도 뭐가 바뀌었는지는 파일을 열어보기 전에 알 수가 없습니다.
만약 폴더를 계속 복사 하고 있었다면, 어느 파일이 언제 바뀌었는지 알기는 더욱 어려울 것입
니다.
기억이 남아있다면 모르겠지만…
시간이 흐르면 흐를수록 더 의미 없는 중복된 파일 속에서 시간을 허비하는 일이 늘어 갈 것입니다.
- 가장 일반적인 Version Control의 단점
10

11. 1. Version Control
4) 웹 디자이너나 앱 디자이너라면…
이미 개발자와 협업을 하고 있을 것 입니다.
혹시 작업의 결과물이나 중간에 변경되는 소스를 메신저나 메일로 전달하고 있다면,
개발자들이 반영을 해주기만 기다릴 수 밖에 없을 것입니다.
- 가장 일반적인 Version Control의 단점
11

12. 2 Git
일단 쉽게 이야기 하면 이런 Version Control을
좀 더 효과적으로 할 수 있게 도와주는 시스템이라고 생각하시면 됩니다.
Git외에도 CVS, SVN등 많은 시스템이 있지만,
최근 가장 인기있는 시스템이기에 Git을 알아보도록 하겠습니다.
뒤에 자세히 이야기 하도록 하고,
일단 앞에서 일반적으로 사용하는 Version Control의 단점을
Git을 사용한다면 해결이 가능할까요?
- Git은 무엇일까요?
12

13. 2. Git
1) 디스크 공간을 많이 사용하게 됩니다. (해결!)
파일 전체를 저장하는 것이 아니라 수정된 파일과 일부의 자체 데이터를
압축해서 저장하기 때문에 사용량이 줄어듭니다.
예를 들어 기존에 10개의 psd파일이 있고 1개의 파일만 수정되었지만 10개의 파일을 계속 폴더
복사해서 관리했다면, git을 사용하면 1개의 변경된 파일만 압축해서 저장하면서 관리하기
때문에 사용량이 줄어듭니다.
- Git을 이용한 Version Control의 장점
13/10

14. 1. Version Control
2) 백업! 백업! 백업! 이 필요하다. (해결!)
Git의 원격저장소기능을 이용하고 간단한 command를 통해 반영이 되어 있다면,
손쉽게 완벽하게 복구가 가능합니다.
최종 결과물 부터… 과거의 내역까지 전부 안전하게 확인이 가능합니다.
- Git을 이용한 Version Control의 장점
14

15. 2. Git
3) 변경된 수정 사항을 쉽게 볼 수가 없다. (해결!)
수정사항을 코멘트와 함께 반영하게 되므로, 코멘트확인으로 확인이 가능하고,
수정/추가/삭제등 변경된 파일만 확인이 가능합니다.
- Git을 이용한 Version Control의 장점
15

16. 2. Git
4) 웹 디자이너나 앱 디자이너라면…
이미 협업하고 있는 앱, 웹 개발자들은 Git을 사용하고 있을 가능성이 높습니다.
따라서 Git을 사용할 수 있어서 직접 소스에 직접 수정된 결과물을 수정 한다면,
개발자들의 반영하는 일을 덜어주고, 빠르게 결과를 확인할 수 있을 것 입니다.
- Git을 이용한 Version Control의 장점
16

17. 2. Git
운영체제에 관계없이
MS Windows를 사용하거나, Mac OSX를 사용하시거나
http://git-scm.com/ 로 이동하면 첫 페이지에서 Git을 다운 받을 수 있습니다.
설치는 일단 Windows 사용인 것을 문서가 작성되지만,
다른 OS도 크게 다르지 않습니다.
- Git의 설치
17

18. 2. Git
- Git의 설치
18
OS에 맞는 내용이 자
동으로 표시 됩니다!
눌러서 다운 받습니다.

19. 2. Git
- Git의 설치
19페이지가 이동되며 자동으로 다운로드를 시작합니다.

20. 2. Git
- Git의 설치
20
실행을 시키면 평소에 하시던 대로 Next를 위주로 눌러 진행하시면 됩니다.

21. 2. Git
- Git의 설치
21
이 프로그램은 GNU 라이선스입니다. GNU에 대해서는 검색을 통해 확인해주세요 ^^

22. 2. Git
- Git의 설치
22
이 프로그램은 GNU 라이선스입니다. GNU에 대해서는 검색을 통해 확인해주세요 ^^

23. 2. Git
- Git의 설치
23
TrueType를 사용하고 싶다면 체크 합시다!

24. 2. Git
- Git의 설치
24

25. 2. Git
- Git의 설치
25
기본은 환경변수를 수정해서 Windows Command에서 Git을 사용할 수 있도록 지원하는 건데,
불안하시면 위의 “Use Git from Git Bash only”를 선택하시면 됩니다.

26. 2. Git
- Git의 설치
26
기본 선택으로 Next 합니다.

27. 2. Git
- Git의 설치
27
기본 선택으로 Next 합니다.

28. 2. Git
- Git의 설치
28
기본 선택으로 Next 합니다.

29. 2. Git
- Git의 설치
29
기본 선택으로 Next 합니다.

30. 2. Git
- Git의 설치
30
실험적으로 캐시기능을 이용하여 속도를 향상된 기능이 추가되었는데, 아직 실험적 기능이라 안정성
에 문제가 생길 수 있으니 사용하지 않는 기본치로 그대로 Next 하겠습니다.

31. 2. Git
- Git의 설치
31
실험적으로 캐시기능을 이용하여 속도를 향상된 기능이 추가되었는데, 아직 실험적 기능이라 안정성
에 문제가 생길 수 있으니 사용하지 않는 기본치로 그대로 Next 하겠습니다.

32. 2. Git
- Git의 설치
32
이제 설정이 끝나고 설치를 시작합니다!!!

33. 2. Git
- Git의 설치
33
금방 설치가 완료되었습니다!!!

34. 3. Git의 사용
설명보다는 직접 체험 하는게 최고입니다.
하지만 그 전에 익숙하지 않은 command 창과 조금은 복잡한 것에 대해
이해하려는 노력은 필요합니다.
솔직히 쉽지는 않지만, 익숙해진다면 생산성 향상은 엄청날 것 입니다.
앞에서 단점과 장점에 공감하셨다면 용기를 가지고 전진해주세요 ^^
-Git을 시작하기 전에…
34

35. 3. Git의 사용
1) Windows command 창에서 사용
설치된 이후에 Command 창에서 git을 입력하고 엔터를 쳐보세요~
-Git의 실행 방법
35

36. 3. Git의 사용
-Git의 실행 방법
36
무언가 많이 나오지만 겁내지 말고 하나씩 시작해보면 됩니다 ^^

37. 3. Git의 사용
2) Git bash 이용
3) Git Gui 이용
둘 다 이번에 설치한 Git 안에 들어 있습니다.
시작버튼을 눌러 확인하세요.
-Git의 실행 방법
37

38. 3. Git의 사용
Git bash 실행화면은 일단은 windows에서 command 창과 비슷하다고 생각하시면 됩니
다.
-Git의 실행 방법
38

39. 3. Git의 사용
똑같이 git을 쳐보면 windows command와 동일한 결과가 나옵니다.
-Git의 실행 방법
39

40. 3. Git의 사용
Git Gui를 실행하면 정말 단순한 디자인의 Windows 프로그램이 실행됩니다.
Command 창에서 명령어를 입력하는 것보다는 편리하게 이용을 하도록 만들어진 프로그램입니다.
-Git의 실행 방법
40

41. 3. Git의 사용
여기서는 Windows command 창에서 사용하는 것을 선택했습니다.
Gui 프로그램이 생각보다 편리하지는 않고, 그나마 친근한 windows command에서 사용하
면서 직접 명령어를 입력하는 것이 더 학습에 좋다는 판단입니다 ^^
-Git의 실행 방법
41

42. 3. Git의 사용
처음에 유일하게 해야 할 필수 설정은 Git을 쓰는 사용자의 정보를 설정하는 것 입니다.
Git은 혼자서도 쓸 수 있지만, 여럿이 같이 사용할 수도 있기 때문에 각각의 사용자를 구분하기 위
해서 반드시 설정해야 합니다.
간단히 이름과 이메일 주소만 설정하면 됩니다.
하지만 command 창에서 명령어로 입력해야 하니 어려워 보일 수 있지만,
따라 치면 쉽습니다 ^^
-Git 환경설정
42

43. 3. Git의 사용
처음에 유일하게 해야 할 필수 설정은 Git을 쓰는 사용자의 정보를 설정하는 것 입니다.
Git은 혼자서도 쓸 수 있지만, 여럿이 같이 사용할 수도 있기 때문에 각각의 사용자를 구분하기 위
해서 반드시 설정해야 합니다.
간단히 이름과 이메일 주소만 설정하면 됩니다.
하지만 command 창에서 명령어로 입력해야 하니 어려워 보일 수 있지만,
따라 치면 쉽습니다 ^^
-Git 환경설정
43

44. 3. Git의 사용
이름과 이메일을 자신의 정보로 바꿔서 입력하세요.
기본적으로 git에서는 무소식이 희소식입니다.
에러가 난게 아니라면 아무런 반응이 없습니다 ^^
-Git 환경설정
44

45. 3. Git의 사용
Git으로 관리할 폴더를 하나 테스트로 만들어 봅시다.
-Git 저장소 생성
45

46. 3. Git의 사용
이 폴더를 Git을 사용하겠다고 설정합니다.
git init 폴더명
-Git 저장소 생성
46

47. 3. Git의 사용
빈 저장소를 해당 폴더 아래 .git 폴더로 만들었다는 메시지가 나옵니다.
이게 바로 git 저장공간입니다.
-Git 저장소 생성
47

48. 3. Git의 사용
해당 폴더로 가보면 실제로 .git 폴더가 만들어져 있습니다.
기본적으로 Windows에서 .으로 시작하면 기본적으로는 보이지 않기 때문에,
탐색기 옵션을 수정하거나 command에서 확인할 수 있습니다.
-Git 저장소 생성
48

49. 3. Git의 사용
.git 폴더안에는 git 사용하는 파일들이 위치하고 있습니다.
-Git 저장소 생성
49

50. 3. Git의 사용
.git 폴더안에는 git 사용하는 파일들이 위치하고 있습니다.
-Git 저장소 생성
50

51. 3. Git의 사용
다시 command로 돌아와서 현재 상태를 확인해 보는 명령어를 입력해봅시다.
git status
-Git 저장소 생성
51
init 명령으로 저장소만 만들고 다른 행동을 한게 없기때문에 nothing 이라는 말이 만나도
크게 이상하지는 않을 것 입니다.

52. 3. Git의 사용
만약 git init 으로 저장소를 생성하지 않은 곳에서 git status를 입력하면 어떻게 될까요?
git status
-Git 저장소 생성
52
위와 같이 에러를 발생하게 됩니다.
여기서 추가적으로 2가지 실험을 해봅시다 ^^

53. 3. Git의 사용
1) Git 저장소로 생성한 폴더 하위에 폴더를 만들어서 git status를 하면 어떻게 될까요?
git status
-Git 저장소 생성
53
위의 결과를 보면 아시겠지만,
Git 은 저장소로 만든 폴더의 하위 폴더도 git 저장소를 사용할 수 있게 되어 있습니다.
따라서 하위 폴더 별로 저장소를 만들 필요가 없습니다.

54. 3. Git의 사용
2) .git 폴더를 지우고 git status를 하면 어떻게 될까요?
git status
-Git 저장소 생성
54
위의 결과를 보면 아시겠지만,
Git 은 .git 폴더를 저장소의 공간으로 사용하고 있습니다.
.git을 지우면 저장소 전체를 지운 것 과 같습니다.
따라서 .git을 지우지 않게 조심하셔야 합니다!!!

55. 3. Git의 사용
.git 폴더를 지우면 안된다면, 아까 Version Control때 백업이 필요 없다는 이야기는 거짓인
건가요?
- git은 자신의 컴퓨터에만 혼자만 설치해서 사용할 수도 있고, 함께 사용할 수도 있게 되어 있습니
다. 여러 명이 함께 사용하거나, 백업을 위해 내 컴퓨터 외에 외부의 다른 컴퓨터의 저장소를 추
가로 사용할 수 있습니다. 이를 원격저장소라고 부릅니다.
이 원격저장소를 사용한다면, 내 컴퓨터의 내용이 지워져도 원격저장소에 있는 내용으로 복구가 가
능합니다.
-Git 저장소 생성
55
다른 사람과 같이 사용하려면, 백업을 하려는 욕구가 있다면 원격저장소 기능을 사용해야 합
니다. GitHub를 설명할 새로운 슬라이드에서 설명해보도록 하겠습니다.

56. 3. Git의 사용
test1 폴더는 다시 지우고 git init 을 통해 새로운 저장소를 생성합니다.
git init 폴더명
-Git 저장소 생성
56

57. 3. Git의 사용
이제 본격적으로 파일을 추가하고 수정하고, 삭제해보도록 하겠습니다.
테스트를 위해 파일 2개를 넣어 볼께요.
-Git을 이용한 관리
57

58. 3. Git의 사용
다시 command로 돌아와서 현재 상태를 확인해 보는 명령어를 입력해봅시다.
git status
-Git을 이용한 관리
58
방금 추가한 파일이 나타났습니다.
근데 Untracked files 라네요..
이게 뭘까요?

59. 3. Git의 사용
Git은 저장소가 만들어진 폴더에 파일을 넣는다고 자동으로 git 저장소에 파일이 들어가는 시스템
이 아닙니다. 파일을 만들어서 넣었다고 git 저장소를 이용한다고 볼 수 없기 때문에, git에 해
당 파일들을 git 저장소를 이용하겠다고 알려줘야 합니다.
-Git을 이용한 관리
59
Windows 시스템 폴더 Git 저장소

60. 3. Git의 사용
Windows 시스템상에 파일은 있지만 저장소에 등록하지 않기 때문에
저장소에는 저 두 파일은 없는 상태입니다.
이 상태를 알려주기 위해서 untracked files 라는 안내를 해준 것입니다.
-Git을 이용한 관리
60
Windows 시스템 폴더 Git 저장소
등록 필요!!!

61. 3. Git의 사용
아까 git status 명령어의 결과를 보면 친절하고 git add <file> 을 하면 추가를 할 수 있
다고 알려줍니다.
-Git을 이용한 관리
61

62. 3. Git의 사용
그러면 git 저장소에 git add 명령으로 파일들을 추가 해봅시다.
git add file이름
-Git을 이용한 관리
62

63. 3. Git의 사용
다시 command로 돌아와서 현재 상태를 확인해 보는 명령어를 입력해봅시다.
git status
-Git을 이용한 관리
63
이제 뭔가 안정감이 있는 녹색글씨로 표시되는 것을 알 수 있습니다.
여기서 또 2가지 테스트를 해봅시다 ^^

64. 3. Git의 사용
1) 파일이 여러 개인 경우에도 다 개별적으로 add 해야 하나요??
먼저 파일을 몇 개 더 추가해 봅시다!
-Git을 이용한 관리
64

65. 3. Git의 사용
command로 돌아와서 현재 상태를 확인해 보는 명령어를 입력해봅시다.
git status
-Git을 이용한 관리
65

66. 3. Git의 사용
친절히 3개의 파일이 추가되었는데, git 저장소를 사용하도록 추가가 안되었다고 알려줍니다.
한꺼번에 추가하기 위해서 파일들의 이름대신에 . (dot)를 입력해 봅시다.
git add .
-Git을 이용한 관리
66

67. 3. Git의 사용
. (dot)을 이용하면 모든 파일들이 추가되는 것을 확인할 수 있습니다.
이 외에도 * 을 이용하거나, *.png 등 처럼 일부의 파일들을 다수 추가할 때 사용할 수 있습니다.
git add *.png
-Git을 이용한 관리
67

68. 3. Git의 사용
2) 파일의 이름이 아니라 내용이 바뀌어서 복사한 경우에도 저장소에 추가해야 하나요?
직접 테스트 해봅시다~
같은 파일 이름을 수정한 후에 복사합니다.
여기서는 bg_deco_green.png 파일을 수정하여 복사하였습니다.
-Git을 이용한 관리
68

69. 3. Git의 사용
command로 돌아와서 현재 상태를 확인해 보는 명령어를 입력해봅시다.
git status
-Git을 이용한 관리
69

70. 3. Git의 사용
앞의 결과를 보면 알 수 있듯이 Git은 파일이 변경이 되면 git add를 통해 알려줘야 합니다.
git add . 으로 추가해봅시다.
-Git을 이용한 관리
70

71. 3. Git의 사용
앞의 파일들을 보면 “Changes to be committed:” 라는 말이 붙어 있습니다.
이 것은 무엇일까요?
-Git을 이용한 관리
71

72. 3. Git의 사용
Git을 이용하여 Version Control을 하려면 지금까지 수정된 부분들을 저장소에 저장하는 과정
이 필요합니다. Add는 파일들을 저장소가 관리하겠다고 추가하는 명령이라면 commit은 실질
적으로 저장소에 저장하는 것 입니다.
바로 commit을 해보면서 이해해보도록 하겠습니다.
-Git을 이용한 관리
72

73. 3. Git의 사용
Commit을 할때는 해당 commit을 설명하는 코멘트를 지정해야 합니다 ^^
git commit –m “내용”
-Git을 이용한 관리
73

74. 3. Git의 사용
command로 돌아와서 현재 상태를 확인해 보는 명령어를 입력해봅시다.
git status
-Git을 이용한 관리
74

75. 3. Git의 사용
저장소에 관리하겠다고 추가 안된 파일도 없고,
저장소에 저장되지 않은 파일도 없어서
작업 디렉토리가 깨끗(clean)하다는 문구가 나왔습니다.
-Git을 이용한 관리
75

76. 3. Git의 사용
Commit을 한 내용은 log 명령으로 확인이 가능합니다.
git log
-Git을 이용한 관리
76

77. 3. Git의 사용
앞에서 설정한 이름과 이메일 주소로 커밋(commit)된 내역이 나타나게 됩니다.
시간과 앞에서 입력한 코멘트가 나타나므로, 작업 내역을 쉽게 확인할 수 있습니다.
-Git을 이용한 관리
77

78. 3. Git의 사용
짧은 예제 작업이지만,
작업을 통해 파일의 추가, 수정 등이 일어나면 git add 명령으로 추가하고
작업 내역을 git commit 으로 저장하는 절차를 확인할 수 있었습니다.
일단은 작업을 하고 난 후에는 git add 와 git commit 을 같이 입력 한다고
생각하시면 편리합니다 ^^
-Git을 이용한 관리
78

79. 3. Git의 사용
테스트를 위해 하나의 파일을 추가해 봅시다.
-Git을 이용한 관리
79

80. 3. Git의 사용
이제 git status를 입력하면 어떤 상태일지 감이 오시나요?
git status
-Git을 이용한 관리
80

81. 3. Git의 사용
새로 추가한 파일이기에 저장소에 없어 touch_img.png 파일이 Untracked 상태라고 나옵
니다.
-Git을 이용한 관리
81

82. 3. Git의 사용
git add 와 git commit 으로 저장소에 추가하고 저장해봅시다.
-Git을 이용한 관리
82

83. 3. Git의 사용
git add 와 git commit 으로 저장소에 추가하고 저장해봅시다.
-Git을 이용한 관리
83

84. 3. Git의 사용
추가한 작업내역도 git log로 확인해 봅시다.
-Git을 이용한 관리
84

85. 3. Git의 사용
최근 작업 순으로 정렬되어 표시가 됩니다!!
-Git을 이용한 관리
85

86. 3. Git의 사용
이제 과감하게 .git 폴더는 제외하고 모든 파일을 지우고 git status를 해봅시다.
-Git을 이용한 관리
86
git은 바로 작업 폴더에서 해당 파일이 삭제되어 있음을 알려줍니다.

87. 3. Git의 사용
어떻게 복구 하면 될까요?
바로 checkout 명령으로 복구할 수 있습니다.
Checkout 명령은 저장소에 있는 파일들을 현재 작업폴더로 반영하는 역할을 합니다.
.git 폴더가 있는 곳에서 git checkout . 을 입력해봅시다!
-Git을 이용한 관리
87

88. 3. Git의 사용
git checkout .
-Git을 이용한 관리
88
바로 저장소의 내용이 그대로 반영된 것을 확인할 수 있습니다.

89. 3. Git의 사용
git status를 입력하면 모두 정상임을 알 수 있습니다.
-Git을 이용한 관리
89

90. 3. Git의 사용
지금 까지 배운 것 보다 배워야 할게 더 많지만,
일단 1부는 여기까지 입니다 ^^
-Git을 이용한 관리
90

91. http://book.naver.com/bookdb/book_detail.nhn?bid=9415223
본 슬라이드는 “만들면서 배우는 Git GitHub 입문” 책 1장, 2장을 참고하여 만들어졌습니다.
91

92. 고맙습니다!
이 문서는 나눔글꼴로 작성되었습니다. 설치하기
다음 슬라이드에 대한 요구가 있다면 ^^
이번 슬라이드에서 다루지 못한
브랜치 개념과 원격저장소,
그리고 GitHub에 대해서 알아보도록 하겠습니다.