← 목록으로

디자인 Git 워크플로우

브랜치 전략, 워크플로우 단계, 커밋 메시지, PR 설명

브랜치 전략

🏭

main (production)

프로덕션 배포용 안정 브랜치

실제 서비스 중인 디자인
직접 커밋 금지
develop에서 PR을 통해서만 병합

🔧

develop

개발 중인 디자인 통합 브랜치

다음 릴리스 준비
feature 브랜치 병합 대상
안정화되면 main으로 병합

git checkout -b develop main

✨

feature/[기능명]

개별 디자인 작업용 브랜치

feature/hero-section-redesign
feature/add-dark-mode
feature/new-dashboard-layout

git checkout -b feature/hero-section develop

워크플로우 단계

1 Feature 브랜치 생성

develop 브랜치에서 새로운 feature 브랜치를 생성합니다.

# develop 브랜치로 이동
git checkout develop

# 최신 상태로 업데이트
git pull origin develop

# 새 feature 브랜치 생성
git checkout -b feature/hero-section-redesign
                

2 Pencil.dev에서 디자인 작업

Pencil.dev에서 디자인을 작업하면 자동으로 커밋됩니다.

파일 저장 시 자동 커밋
변경 사항이 실시간으로 Git에 반영
커밋 메시지는 자동 생성 또는 수동 입력

3 변경사항 저장 및 커밋

작업한 내용을 의미 있는 단위로 커밋합니다.

# 변경사항 확인
git status

# 파일 스테이징
git add hero-section.html

# 커밋
git commit -m "design: add hero section layout"
                

4 원격 저장소에 푸시

# 원격 저장소에 푸시
git push origin feature/hero-section-redesign
                

5 Pull Request 생성

GitHub에서 PR을 생성하고 리뷰를 요청합니다.

# GitHub CLI 사용 시
gh pr create --base develop --title "design: hero section redesign" --body "템플릿 참조"
                

6 코드 리뷰 및 병합

팀원의 승인 후 develop 브랜치로 병합합니다.

# PR 승인 후 병합
gh pr merge --squash

# 또는 GitHub UI에서 Merge 버튼 클릭
                

커밋 메시지 규칙

커밋 메시지 형식

<type>: <subject>

[optional body]

[optional footer]

타입별 예시

design

design: add hero section layout

새로운 디자인 추가

update

update: improve button hover states

기존 디자인 개선

fix

fix: correct spacing in navigation

디자인 오류 수정

refactor

refactor: reorganize component structure

구조 개선 (기능 변경 없음)

# 좋은 커밋 메시지 예시
design: add dark mode color palette
update: improve card component shadows
fix: correct button alignment in mobile view
refactor: simplify grid system

# 나쁜 커밋 메시지 예시
update
fixed stuff
WIP
asdf
            

Pull Request 템플릿

## 변경 사항

- 히어로 섹션 레이아웃 재디자인
- 반응형 그리드 시스템 적용
- 다크 모드 지원 추가

## 스크린샷

[Before/After 스크린샷 첨부]

## 관련 이슈

Closes #123
Related to #456

## 체크리스트

- [x] 반응형 테스트 완료
- [x] 다크 모드 테스트 완료
- [x] 접근성 확인
- [ ] 디자인 시스템 문서 업데이트

# GitHub CLI로 템플릿과 함께 PR 생성
gh pr create --title "design: hero section redesign" --body "$(cat .github/pull_request_template.md)"
            

베스트 프랙티스

✅ 권장사항

작은 단위로 자주 커밋하기
의미 있는 커밋 메시지 작성
브랜치 이름은 명확하고 설명적으로
PR에 스크린샷 첨부
코드 리뷰 적극 참여
병합 후 feature 브랜치 삭제

❌ 피해야 할 사항

main 브랜치에 직접 커밋
의미 없는 커밋 메시지 (WIP, temp, etc.)
너무 큰 PR (여러 기능 포함)
리뷰 없이 병합
충돌 방치

## 96. 디자인 Git 워크플로우 ``` Design a comprehensive Git workflow for design files in Pencil.dev: **Branch Strategy**: ``` main (production) │ └── develop (integration) │ ├── feature/homepage-redesign ├── feature/checkout-flow-v2 ├── feature/mobile-navigation └── fix/button-alignment ``` **Branch Types**: | Type | Pattern | Purpose | Merge To | |---------|---------------------|--------------------------------|----------| | main | main | Production-ready designs | - | | develop | develop | Integration & staging | main | | feature | feature/[name] | New designs/components | develop | | fix | fix/[issue] | Design corrections | develop | | hotfix | hotfix/[issue] | Urgent production fixes | main | | release | release/v[x.x.x] | Release preparation | main | **Branch Naming Convention**: - feature/homepage-hero-section - feature/user-profile-redesign - fix/button-padding-mobile - fix/color-contrast-accessibility - hotfix/nav-dropdown-overlap **Commit Message Format**: ``` <type>(<scope>): <description> [optional body] [optional footer] ``` **Commit Types for Design**: | Type | Use Case | |----------|---------------------------------------| | design | New design work | | update | Modify existing design | | fix | Correct design issues | | refactor | Reorganize without visual change | | docs | Update design documentation | | style | Code formatting (CSS/tokens) | **Commit Examples**: ``` design(hero): add new landing page hero section - Full-width layout with gradient background - Responsive breakpoints for mobile/tablet - Animation on scroll implemented Figma: [link] Related: #142 ``` ``` fix(buttons): correct padding on mobile breakpoint - Changed px-4 to px-3 for sm breakpoint - Aligned with design system specs Fixes #89 ``` **Workflow Steps**: 1. **Start New Work**: ```bash git checkout develop git pull origin develop git checkout -b feature/component-name ``` 2. **Design in Pencil.dev**: - Open project in Pencil.dev - Make design changes - Auto-save commits to branch 3. **Regular Commits** (manual for significant changes): ```bash git add . git commit -m "design(cards): add hover state variations" ``` 4. **Push & Create PR**: ```bash git push origin feature/component-name # Create PR in GitHub ``` 5. **Review & Merge**: - Team reviews PR - Address feedback - Squash and merge to develop **Pull Request Template**: ```markdown ## 🎨 Design Changes ### Summary Brief description of what changed and why. ### Screenshots/Recordings #### Before [Screenshot or note "N/A for new design"] #### After [Screenshot of new design] ### Design Specs - [ ] Responsive breakpoints tested - [ ] Dark mode variant included - [ ] Accessibility reviewed (contrast, focus states) - [ ] Component states documented (hover, active, disabled) ### Related Links - Figma/Pencil.dev: [link] - Issue: #123 - Design System Docs: [link] ### Checklist - [ ] Self-reviewed the design - [ ] Tested on multiple viewport sizes - [ ] Updated design tokens if needed - [ ] Added to component library (if applicable) ### Notes for Reviewe ... (내용이 길어 일부만 표시됩니다)