피그마 피디아
home
피그마 실무Q&A
home
🎥

[16회차] 우리 디자인 시스템으로 바이브 코딩하기

작성자
뜨이
날짜
2026/02/10
[LIVE 공지]
여러분 안녕하세요. 피그마피디아팀입니다.
이번에는 [우리 디자인 시스템으로 바이브 코딩하기] 라는 주제로 위클리 라이브가 진행됩니다!
라이브 주제 : 우리 디자인 시스템으로 바이브 코딩하기
라이브 일시 : 2026년 2월 10일(화) 21:00~ / 줌 웨비나
라이브 링크  : https://us05web.zoom.us/j/83436949198
많은 관심과 참여 부탁드립니다 :)
준비물
Cursor 프로그램 : https://cursor.com/download
깃허브 회원가입 : https://github.com/
라이브 깜짝 선물) 초심자가 알아야 할 깃허브 용어들

깃허브(GitHub)가 뭐예요?

여러 명의 친구들이 모여서 하나의 거대한 레고 성을 쌓는 곳이라고 생각하면 돼요. 내가 만든 부분을 성에 합치기도 하고, 친구가 만든 부분을 구경할 수도 있는 **'온라인 작업실'**입니다.

2. 핵심 용어 사전 (비유와 함께!)

Repository (리포지토리 / 저장소)
비유: 우리 조의 '레고 보관함' 또는 '공책'.
설명: 프로젝트의 모든 파일과 변경 기록이 담겨 있는 폴더예요.
사용 사례: "야, 우리 이번 프로젝트 리포지토리 주소 좀 보내줘!"
Commit (커밋)
비유: 게임의 '세이브(Save) 지점' 만들기.
설명: 내가 작업한 내용을 저장하고, 무엇을 바꿨는지 메모(메시지)를 남기는 거예요. 나중에 실수하면 이 지점으로 되돌아갈 수 있어요.
사용 사례: "방금 성문 디자인 다 했으니까 커밋 해놓을게. (메시지: '성문 파란색으로 변경')"
Push (푸시)
비유: 내 컴퓨터에서 작업한 내용을 '인터넷 저장소로 업로드' 하기.
설명: 내 컴퓨터(로컬)에만 있던 커밋들을 깃허브(원격 저장소)로 밀어 올리는 거예요. 이제 친구들도 내 작업을 볼 수 있어요.
사용 사례: "나 작업 다 했어! 깃허브에 푸시 했으니까 확인해 봐."
Pull (풀)
비유: 친구들이 만든 최신 내용을 '내 컴퓨터로 다운로드' 받기.
설명: 다른 사람이 업데이트한 내용을 내 컴퓨터로 당겨와서 내 것과 합치는 거예요.
사용 사례: "작업 시작하기 전에 꼭 풀 먼저 받아! 안 그러면 꼬인다."
Branch (브랜치)
비유: 원본을 건드리지 않고 복사해서 쓰는 '나만의 연습장'.
설명: 메인 프로젝트(Main)에 바로 손대면 망가질 수 있으니, 가지(Branch)를 쳐서 따로 작업하는 공간이에요.
사용 사례: "나 새 브랜치 파서 '지붕 만들기' 작업할게. 완성되면 합치자."
Merge (머지)
비유: 연습장에서 완성한 내용을 '진짜 원본에 합치기'.
설명: 브랜치에서 작업한 내용이 완벽하면, 메인 줄기로 합치는 거예요.
사용 사례: "지붕 다 만들었어? 그럼 메인 브랜치로 머지 하자!"
Pull Request (PR / 풀 리퀘스트)
비유: 선생님(또는 조장)에게 "저 다 했어요! 검사해 주시고 합쳐주세요!" 라고 요청하기.
설명: 내가 작업한 브랜치를 메인에 합치기 전에, 다른 사람들에게 코드를 확인해달라고 요청하는 것이에요.
사용 사례: "지붕 디자인 다 해서 PR(피알) 올렸어. 코드 리뷰 좀 해줘."
Issue (이슈)
비유: '건의함' 또는 '할 일 목록'.
설명: 버그를 발견했거나, 새로운 기능을 추가하고 싶을 때 글을 남기는 게시판이에요.
사용 사례: "여기 성벽이 무너졌다는 이슈가 올라왔네? 내가 고칠게."

3. 업무 프로세스 (우리가 일하는 순서)

자, 이제 친구들과 **'학교 홈페이지 만들기'**를 한다고 상상해 봅시다. 아래 토글을 하나씩 펼치며 내용을 살펴보세요
1단계: 준비하기 (Clone)
2단계: 나만의 작업 공간 만들기 (Branch)
3단계: 작업하고 저장하기 (Commit)
4단계: 공유하기 (Push)
5단계: 검사 요청하기 (Pull Request)
6단계: 합치기 (Merge)
7단계: 최신화 (Pull)
Figma 배우기
Figma 오카방
레퍼런스 캡쳐하기