brunch

You can make anything
by writing

C.S.Lewis

by maus x maus Oct 26. 2016

디자이너를 위한 Git 사용법

아니면 깃허브를 쓰고 싶으나 어떻게 해야 될지 모르는 분들을 위한 설명서

코딩하는 것은 어렵습니다. 한줄한줄 코딩하면서 화면에서 결과물이 차곡차곡 쌓여 보이는 건 즐겁습니다. 그런데 코드 원인을 알 수 없는 버그를 찾을려하거나 본인이 작성한 코드를 다시 돌이켜 볼려 하면 이해가 안 되는 부분도 있고 상당히 짜증을 유발합니다.

Git에서 코딩하는 것은 어렵습니다. 그러나 Git 없이 코딩하는 건 상상할 수 없는 일입니다.

여러분이 큰 조직의 시니어 개발자 혹은 조그만 개인 프로젝트를 하는 디자이너이던 간에 Git을 사용하게 되면 즐겁게 협업을 할 수 있고 효율적인 코드 작업이 가능하도록 큰 변화를 줄 것입니다.

본 포스트는 Git의 기본 사용을 어떻게 하는지 하나하나 순차적으로 알려드릴 겁니다. 본 포스트만으로 Git 만랩이 되지는 않겠지만 혼자서 Git을 이용할 수 있을 겁니다. 먼저 Github에서 시작할 거고 데스크톱 앱을 설치하시길 바랍니다.

다시 말하지만 본 포스트는 완전 초짜를 위한 글입니다. 이미 Git를 어느 정도 알고 있다면 포스트 맨 하단의 레퍼런스를 참조하세요.

Git이란 무엇인가?

Git은 코드 분산 버전 관리 시스템입니다.

좀 더 쉽게 풀면 시간대 별로 코딩을 관리할 수 있습니다.

이해하기 쉽게 예를 들어보겠습니다.

누군가 조그만 웹사이트 작업을 하고 있습니다. 한 시간 내내 푸터(footer) 작업을 하는데 어떤 이유로 꼬여버렸습니다. 지금 새벽 2시입니다. CSS가 너무 싫어졌고 ㅠ 이걸 업으로 해야 하는 후회까지 생각하고 있습니다. 아몰랑.. 3시간 전에 정상적으로 보였던 이전 버전으로 복구하고 미드나 봐야지...

어랏? 잠만;;

이전 버전? 이번 버전을 가지고 있나요? 이번 버전의 코 드위에 새로운 코드를 덥어씌운거 아닌가요??

만약 여러분이 작성한 (수정/삭제) 코드가 전부 관리된다면 어떨까요? 만약 작업의 모든 단계에서 모든 코드 작성 시간을 절약할 수 있다면 어떨까요?

그렇게 된다면 방금 푸터 작업을 할 때 코드를 잃어버리거나 헷갈려할 일이 없을 겁니다.

Git 시간대별로 코드 히스토리 제어가 가능한 타임버신입니다.

Git은 위의 시나리오를 위해 나온 시스템입니다. Git은 작성한 코드를 시간대별로 제어 가능하고 쉽게 다른 개발자와 협업을 도와줍니다.

Git의 주요 기능은:

코드 복구

라이브 서비스(예: 웹사이트)에 영향을 주지 않고 추가 코딩 작업 가능

하나의 프로그램을 꼬이지 않고 다른 개발자와 실시간으로 동시 작업 가능

그럼 Github는 뭐죠?

초보자는 헷갈릴 수 있으니 쉽게 정리 해 드리겠습니다.

Git은 오픈소스 시스템입니다. 본인 로컬 컴퓨터나 로컬 서버에 설치해 직접 Git을 돌릴 수 있어서 코드를 나중에 실서버에 코드를 반영할 수도 있습니다. 그렇지만 그렇게 하게 되면 설치 과정이라든가 혼자서 여러 가지를 관리해야 되기 때문에 여러 가지로 골치 아플거라 다들 예상할 겁니다.

Github는 이러한 문제 해결을 위해 생겨났는데 멋진 인터페이스에서 리모트 Git 서버 그리고 여러분이 작성한 코드를 같은 서버에서 다른 개발자와 실시간으로 협업하도록 도와주는 플랫폼입니다.

그러면서도 Github app은 Git command-line application을 데스크톱에서도 사용 가능합니다.

Github 이외 Gitlab, Bitbucket이라는 비슷한 플랫폼도 있습니다. 이 두 개의 플랫폼 역시 좋습니다.

그런데 GitHub는 오픈소스 커뮤니티를 이용해서 팀 협업 및 큰 프로젝트를 수월하게 진행 가능한 인터페이스로 인해 크게 성장했습니다. 편의를 위해 본 포스트에서는 Github를 이용하겠습니다.

어떻게 작동하는가?

처음 Git을 사용할 때 모든 프로젝트는 repository(저장공간)이며 모든 저장공간은 각각의 다른 히스토리를 가지고 있습니다. 기본적으로 코드를 저장할 때마다 타임라인 기반으로 저장된다고 이해하면 됩니다.

그렇다고 Git이 자동으로 히스토리를 만들어주는 것은 아닙니다. 코드 저장하기 전 먼저 commit(확정)을 해야 합니다.

Commit은 Git에서 매우 중요한데 Commit을 해야 코드/파일 추가, 저장, 변경을 repository에 히스토리에 저장할 수 있습니다. Commit을 할 때마다 매 순간의 작업이 따로따로 기억하고 있고 언제 어디서든 원하는 작업 파일로 접근이 가능합니다.

그리고 매번 Commit 할 때 어떤 수정을 했는지 메모 작성이 가능합니다. Commit 할 때 꼭꼭 챙겨야 할 부분입니다. 가능하면 메모 없이 commit은 하지 마세요. 나중에 뭘 수정했는지 헷갈립니다.

Commit은 매우 강력한 기능으로 여러분이 작성한 무수한 코드 덩어리들을 보고 생각정리와 작업 정리를 쉽게 하도록 도와줍니다. 이외에 다른 중요한 기능이 있는데 하나하나 따라 하면서 배워보시죠~

크게 한 숨 쉬고 시작 준비!

테스트 commit을 하기 위해 repository 만들기를 해보겠습니다. 먼저 Github 계정을 만드세요.

그리고 새로운 repository를 만들어 봅니다. repository 이름은 편의대로 쓰고 이외 나머지 설정은 일단은 건들지 마세요.

상당히 직관적인 UI 입니다.

명령어(command-line)를 Git에서 사용하는 걸 보셨는지 모르겠지만 명령어 작성은 어렵지 않으니 걱정하지 않으셔도 됩니다. 지금 당장은 명령어 부분은 넘어가고 데스크톱 앱을 이용하도록 하겠습니다. 윈도즈와 맥용 둘 다 있으니 위의 링크로 가서 설치해주세요.

Github에서 repository가 생성되었고 데스크톱 앱을 실행하면 repository 리스트(하단 이미지의 HELLO)가 보일 겁니다. 그러고 나서 데스크톱 앱으로 그것을 복사(Clone)하세요. 그러면 데스크톱에서 repository를 여러분 컴퓨터 내 폴더 어디에 저장하는지 선택하는 옵션이 나옵니다. 일반적인 파일 저장 위치를 정하는 거라고 보시면 됩니다.

수정 항목 저장

repository이 본인 컴퓨터에 저장된 것이 확인되었다면 아무 파일을 추가/코드 입력해 보세요. 그러면 데스크톱 Github에서 변경사항을 보여줍니다.

수정하셨나요? 그러면 commit을 해보시죠.

Commit 하기 전 수정 내용을 강력하게 입력합니다.

commit 히스토리가 왼쪽에 보이네요.

중요한 알림

파일 commit을 해야만 어디가 바뀌었는지 변경점을 추적할 수 있습니다.

새로운 파일이 추가/변경되어도 commit을 하지 않으면 Git은 여러분의 파일이 변경되었는지 알 수 없습니다.

수정을 해도 이전에 작성한 내용은 사라지고 Git은 이전 히스토리를 가지고 있지 않게 됩니다.

그래서 작업 시 이전 코드를 잃어버리지 않고 코드 추가/수정될 때마다 꾸준히 commit을 해줘야 합니다. 그렇게 해주면 언제든지 원하는 코드 작성 상태로 돌아갈 수 있습니다.

코드 공유하기

코드 작성이 완성되면 오른쪽 상단의 Publish를 통해서 같이 협업하는 개발자에게 코드를 공유할 수 있습니다. 그리고 협업하는 개발자가 여러분이 publish 한 코드를 수정하는 경우 Sync를 통해 동기화할 수 있습니다. 혹시 이전에 작성한 코드를 보고 싶습니까? 그러면 commit 히스토리에서 원하는 여러분이 만든 commit을 선택하기만 하면 됩니다.

repository에 본인이 작성한 코드 히스토리가 많이 쌓여있어도 한분에 보기 좋습니다. 언제든지 원하는 commit으로 돌아갈 수 있습니다.