Source: Dev.to

Git for Designers: 평생 사용할 수 있는 유일한 가이드 (초보자 친화적)

디자이너라면 종종 “버전 관리가 필요하지만, Git은 개발자 전용이라 들리죠.” 라는 생각을 해본 적이 있을 겁니다. 실제로 디자인 파일도 버전 관리가 필요하고, Git은 그 목적에 딱 맞는 도구입니다. 이 글에서는 디자이너가 Git을 처음 접했을 때 알아야 할 핵심 개념과 실전 워크플로우를 쉽게 설명합니다.

---

왜 디자이너가 Git을 사용해야 할까요?

• 변경 이력 추적: 언제, 누가, 어떤 파일을 수정했는지 한눈에 확인할 수 있습니다.
• 협업: 여러 디자이너가 동시에 작업해도 충돌을 최소화하고, 언제든지 이전 버전으로 되돌릴 수 있습니다.
• 백업: 원격 저장소(GitHub, GitLab 등)에 푸시하면 로컬 파일이 손상돼도 복구가 가능합니다.
• 디자인 시스템 관리: 컴포넌트, 스타일 가이드, 아이콘 세트 등을 체계적으로 관리할 수 있습니다.

---

시작하기

1️⃣ Git 설치

• macOS: brew install git
• Windows: Git for Windows 설치
• Linux: sudo apt-get install git (Debian/Ubuntu)

설치가 끝났다면 터미널(또는 Git Bash)에서 다음 명령어로 버전을 확인합니다.

git --version

2️⃣ 기본 설정

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Tip: --global 옵션은 현재 사용자 계정 전체에 적용됩니다. 프로젝트마다 다른 이메일을 쓰고 싶다면 --global 대신 프로젝트 폴더 안에서 실행하세요.

---

기본 명령어

예시 워크플로우

git init
git add .
git commit -m "Initial design files"

---

브랜치와 병합

디자인 작업을 피처 브랜치(feature branch)로 분리하면 메인(또는 main) 브랜치를 깨끗하게 유지할 수 있습니다.

# 새 브랜치 생성 및 이동
git checkout -b new-logo

# 작업 후 커밋
git add .
git commit -m "Add new logo concepts"

# 메인 브랜치로 돌아와 병합
git checkout main
git merge new-logo

주의: 두 디자이너가 같은 파일을 동시에 수정하면 충돌(conflict) 이 발생합니다. 충돌이 생기면 Git이 표시해 주는 부분을 직접 편집한 뒤 git add <file> 으로 해결하고 커밋합니다.

---

원격 저장소와 협업

원격 저장소 연결

git remote add origin https://github.com/username/repo.git
git push -u origin main   # 최초 푸시

기본 협업 흐름

1. git pull 로 최신 커밋을 받아옵니다.
2. 새로운 브랜치를 만들고 작업합니다.
3. 작업이 끝나면 git push 로 원격에 올립니다.
4. GitHub에서 Pull Request(또는 Merge Request) 를 생성해 리뷰를 받습니다.

---

.gitignore 로 불필요한 파일 제외

디자인 파일 중에 임시 파일(예: .DS_Store, Thumbs.db)이나 렌더링 결과물(예: *.png, *.jpg 등)은 버전 관리에서 제외하는 것이 좋습니다.

# macOS
.DS_Store

# Windows
Thumbs.db

# Sketch
*.sketch

# Figma export
*.png
*.jpg

.gitignore 파일을 프로젝트 루트에 두면 Git이 자동으로 무시합니다.

---

GUI 툴 활용하기

코드에 익숙하지 않은 디자이너라면 GUI 클라이언트를 활용해 보세요.

---

베스트 프랙티스

1. 작은 커밋: 한 번에 너무 많은 파일을 커밋하기보다, 논리적인 단위로 작게 나눠 커밋합니다.
2. 의미 있는 커밋 메시지: feat: add new button component 와 같이 앞에 타입을 붙이면 히스토리가 깔끔해집니다.
3. 정기적인 푸시: 로컬에서만 작업을 끝내지 말고, 최소 하루에 한 번은 원격에 푸시하세요.
4. 브랜치 네이밍 규칙: feature/, bugfix/, design/ 등으로 앞에 접두사를 붙이면 브랜치 관리가 쉬워집니다.
5. 리뷰 문화: Pull Request에 디자인 피드백을 남기면, 개발자와 디자이너 간 커뮤니케이션이 원활해집니다.

---

마무리

Git은 코드 전용 도구가 아니라, 디자인 파일을 체계적으로 관리하고 협업을 원활하게 만드는 강력한 버전 관리 시스템입니다. 위에서 소개한 기본 명령어와 워크플로우만 익혀도 프로젝트의 안정성과 생산성을 크게 높일 수 있습니다.

시작이 반이다 라는 말처럼, 오늘 바로 로컬 폴더에 git init 을 실행하고 첫 커밋을 만들어 보세요. 곧 Git이 여러분의 디자인 작업에 없어서는 안 될 파트너가 될 것입니다. 🎨🚀

🎯 이 가이드가 존재하는 이유

디자이너라면 누군가가 이렇게 말하는 걸 들어봤을 겁니다:

“그냥 Git에 변경 사항을 푸시해.”

…그리고 그게 도대체 무슨 말인지 생각했겠죠?

대부분의 Git 튜토리얼은 개발자를 위해 작성됩니다. 터미널 명령어, 복잡한 워크플로, 그리고 디자이너가 마치 잘못된 교실에 들어온 듯한 느낌을 주는 전문 용어들로 바로 뛰어듭니다.

좋은 소식: Git을 사용하기 위해 개발자가 될 필요는 없습니다. Git이 무엇을 하는지, 그리고 여러분의 워크플로에 어떻게 맞는지만 이해하면 됩니다. 이를 알게 되면 Git은 웹사이트, UI 파일, 디자인 시스템, 에셋, 문서 등 디자인 관련 작업 전반에 가장 유용한 안전 도구 중 하나가 됩니다.

---

📚 핵심 개념: Git은 버전‑히스토리 시스템

• Git은 추적하는 모든 파일에 대한 변경 사항을 기록합니다.
• 이미 Figma에서 사용하고 있는 버전 히스토리와 비슷합니다: 클릭 한 번으로 어제 버전으로 되돌릴 수 있습니다.
• Git에서 저장된 각 상태를 **커밋(commit)**이라고 부르며, 이는 비디오 게임의 “세이브 포인트”와 같은 개념입니다.

디자이너를 위한 장점

• 작업을 절대 잃지 않음 – 모든 변경 사항이 저장됩니다.
• 실수 복구 – 언제든 이전 커밋으로 되돌릴 수 있습니다.
• 변경 내용 확인 – 편집 이력이 명확하게 표시됩니다.
• 안전한 팀 협업 – 여러 사람이 같은 프로젝트에서 작업해도 서로 덮어쓰지 않습니다.

❓ Git vs. GitHub (and Friends)

Analogy: Git은 포토샵(편집기)과 같고 GitHub은 구글 드라이브(다른 사람들이 볼 수 있도록 파일을 저장하는 장소)와 같습니다.

🛠️ 디자이너에게 Git이 유용한 경우

코드를 조금만 건드리더라도 Git은 작업을 보호합니다:

• HTML 템플릿 편집
• CSS 간격 조정
• 디자인 시스템 작업
• 자산(이미지, SVG 등) 업데이트
• 개발자와 협업

Git이 없으면 두 디자이너가 서로의 변경 사항을 실수로 덮어쓸 수 있습니다. Git은 누가 무엇을 언제 변경했는지 기록하여 협업을 훨씬 안전하게 만듭니다.

🚀 시작하기

1. 필수 도구 설치

2. Git에 사용자 정보 설정

다음 두 명령을 한 번 실행하세요 (VS Code의 통합 터미널에서도 실행할 수 있습니다):

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

이렇게 하면 모든 커밋에 이름과 이메일이 표시됩니다.

📂 저장소 작업하기

저장소란 무엇인가?

A repository (or repo)는 Git이 관리하는 프로젝트 폴더에 불과합니다.

복제 – 프로젝트를 로컬에 가져오기

1. GitHub에서 저장소 URL을 찾습니다.
2. VS Code(또는 터미널)에서 다음을 실행합니다:

git clone https://github.com/username/repo-name.git

이제 컴퓨터에 프로젝트의 전체 복사본이 생겼으며, Git이 여러분이 하는 모든 변경 사항을 추적하기 시작합니다.

🖥️ VS Code 안에서 Git 사용하기

VS Code의 Source Control 패널은 모든 것을 시각화합니다:

• Modified files – 마지막 커밋 이후 수정된 파일.
• Added files – 새로 만든 파일.
• Deleted files – 삭제한 파일.

일반적인 워크플로우

1. Stage 하려는 변경 사항을 선택합니다(각 파일 옆의 “+” 클릭).
2. 커밋 메시지를 작성합니다(예: Adjusted button spacing).
3. Commit을 클릭하면 스냅샷이 로컬에 저장됩니다.
4. Push – 커밋을 GitHub에 업로드하여 팀원이 볼 수 있게 합니다.

명령을 여러 개 외울 필요가 없습니다; UI가 대부분의 작업을 대신해 줍니다.

🌿 브랜치 – 안전한 놀이터

• main (or master) branch – 안정적이고 프로덕션에 바로 배포 가능한 버전.
• Feature branches – main에 영향을 주지 않고 작업을 진행하는 곳.

Design analogy:

• main = 최종 Figma 파일 (이해관계자와 공유하는 파일).
• Your branch = 자유롭게 실험할 수 있는 복제 파일.

변경 사항이 준비되면 merged가 main에 다시 합쳐져 프로젝트는 안정성을 유지하면서 안전한 실험이 가능해집니다.

📌 황금률

푸시하기 전에 항상 풀하세요.

• Pull = GitHub에서 최신 변경 사항을 다운로드합니다.
• 다른 사람이 작업 중에 프로젝트를 업데이트했다면, 먼저 풀하면 실수로 그들의 작업을 덮어쓰는 것을 방지할 수 있습니다.

🎉 Recap

• Git = 로컬 버전‑히스토리 도구.
• GitHub = 리포지토리를 위한 클라우드 호스트.
• Git, VS Code를 설치하고 GitHub 계정을 만들세요.
• 이름/이메일을 한 번만 설정하세요.
• 리포를 복제하고, 편집하고, 스테이징하고, 커밋하고, 푸시하세요.
• main을 안정적으로 유지하려면 브랜치를 사용하세요.
• 푸시하기 전에 풀하여 충돌을 방지하세요.

이제 어떤 프로젝트에서든 Git을 사용할 수 있는 견고하고 디자이너‑친화적인 기반을 갖추었습니다. 디자인도 즐기고—버전 관리도 즐기세요! 🚀

Source: …

디자이너를 위한 간단하고 안전한 Git 워크플로우

먼저 pull 하면 로컬 복사본이 최신 버전으로 업데이트되어 가장 최신 상태에서 작업할 수 있습니다. 안전한 워크플로우는 보통 다음과 같습니다:

1. 최신 변경 사항 Pull
2. 수정 작업
3. 변경 사항 Commit
4. GitHub에 Push

이 루틴을 따르면 팀이 Git에서 겪는 대부분의 문제를 예방할 수 있습니다.

“충돌(conflict)”이란 무엇인가

conflict 라는 단어는 무섭게 들리지만, 보통은 큰 문제가 아닙니다. 충돌은 두 사람이 같은 파일의 같은 줄을 동시에 수정했을 때 발생합니다. Git은 어느 버전이 올바른지 알 수 없으므로 사용자가 직접 선택하도록 요청합니다.

파일 안에 다음과 같은 형태가 보일 것입니다:

>>>>>> branch

Git은 두 옵션을 모두 보여주고 있는 것입니다.

해결 방법:

1. 변경 내용을 확인합니다.
2. 올바른 버전을 유지하거나 두 버전을 결합합니다.
3. 충돌 표시(>>>>>>)를 삭제합니다.
4. 파일을 저장합니다.

그게 전부입니다—오류가 아니라 Git이 사람의 도움이 필요하다고 알려주는 것일 뿐입니다. 대부분의 충돌은 1~2분 안에 해결됩니다.

원활한 Git 사용을 위한 유용한 습관

• 작업을 시작하기 전에 항상 최신 변경 사항을 Pull 하세요.
• 명확한 커밋 메시지를 작성하여 팀원이 파일을 일일이 살펴보지 않아도 어떤 변경이 있었는지 이해할 수 있게 합니다.
• main 브랜치에서 직접 작업하지 않기. 작업마다 별도의 브랜치를 만들어 메인 프로젝트를 안정적으로 유지합니다.
• 작은 변경을 자주 커밋하세요. 하루가 끝날 때 한 번에 모두 커밋하는 것보다 작은 커밋이 실수를 되돌리기 쉽습니다.
• 당황하지 않기. Git은 작업을 파괴하는 경우가 거의 없으며, 거의 모든 상황에서 복구가 가능합니다.

권장 워크플로우 (단계별)

1. Pull 하여 GitHub에서 프로젝트의 최신 버전을 가져옵니다.
2. 브랜치를 생성합니다(예: feature/header-redesign).
3. 수정을 진행합니다 – CSS를 조정하고, 레이아웃을 업데이트하고, 에셋을 추가하는 등.
4. 커밋하면서 명확하고 설명적인 메시지를 남깁니다.
5. Push 하여 브랜치를 GitHub에 올리고, 다른 사람이 진행 상황을 확인할 수 있게 합니다.
6. Pull Request (PR)를 열어 팀에게 main에 병합해 달라고 요청합니다.
7. 검토와 승인이 끝나면 PR을 병합합니다; 이제 작업이 메인 코드베이스의 일부가 됩니다.

디자이너 친화적인 세 가지 Git 개념

1. 버전 히스토리 도구 – 언제든 이전 상태로 되돌릴 수 있습니다.
2. 협업 안전망 – 팀원이 서로의 작업을 덮어쓰지 않고 같은 프로젝트에서 작업할 수 있습니다.
3. 작업 보호 – 작업이 원격에 저장돼 문제가 생겨도 복구할 수 있습니다.

모든 명령어나 고급 기능을 다 배울 필요는 없습니다. 커밋, 푸시, 풀, 브랜치만 이해해도 대부분의 초보자보다 앞서 나갈 수 있습니다.

Git을 꾸준히 사용하면 개발자 전용 도구가 아니라 자연스러운 워크플로우의 일부가 됩니다. 그리고 처음으로 Git이 몇 시간짜리 작업을 구해줬을 때, 어떻게 그때까지 Git 없이 작업했는지 의문이 들게 될 것입니다.