Dev Wiki · Vibe Design Starter Kit

명령어와 단축키

Vibe Design Starter Kit 학습 환경에 맞춰 정리한 터미널 명령어와 IDE 단축키, Claude Code 레퍼런스. 외울 필요 없이 필요할 때 찾아보면 됨.

14

Essentials

95

Commands

4

먼저 알면 좋은것들

IDE (Antigravity / VSCode)

파일 빠른 검색/열기

저장

터미널 열기/닫기

명령어 팔레트

터미널

실행 중인 명령 중단

패키지 설치

개발 서버 실행

Claude Code 실행

최근 대화 이어서 실행

원샷 실행 (대화 없이)

Claude Code 세션 안에서

현재 태스크 중단

대화 초기화

모드 전환 (4단계 순환)

파일을 컨텍스트로 전달

파일 찾기 = Cmd + P (P = 파일 Pick) 저장 = Cmd + S (S = Save) 중단 = Ctrl + C (C = Cancel) 이 3개만 손에 익으면 나머지는 이 문서 보면서 하면 됨.

터미널 필수 명령어

폴더 이동 및 확인

폴더로 이동

cd my-project

상위 폴더로 이동

홈 폴더로 이동

현재 폴더 내용 보기

현재 경로 확인

cd = Figma에서 페이지 이동 / ls = 레이어 패널에서 현재 위치 내용 보기

# 프로젝트 폴더로 이동
cd ~/projects/my-app

# 한 단계 위로 갔다가 다른 폴더로
cd ../other-project

# 현재 위치 확인
pwd

pnpm 명령어

모든 패키지 설치

프로젝트 처음 받았을 때

패키지 추가

새 라이브러리 필요할 때

개발용 패키지 추가

개발 도구 설치

패키지 삭제

안 쓰는 라이브러리 제거

개발 서버 실행

코딩하면서 확인

배포용 빌드

배포 전

Storybook 실행

컴포넌트 확인

# 프로젝트 시작할 때
pnpm install
pnpm dev

# 새 패키지 추가
pnpm add @mui/icons-material

# 개발 도구 추가 (devDependencies)
pnpm add -D @types/node

# 실행 중인 서버 종료 후 재시작
# Ctrl + C 누르고
pnpm dev

Git 명령어

저장소 복사

프로젝트 처음 받을 때

변경 상태 확인

뭐가 바뀌었나 볼 때

모든 변경사항 스테이징

저장 전

변경사항 저장

작업 단위 완료 시

원격에 업로드

GitHub에 올릴 때

원격에서 가져오기

최신 코드 받을 때

커밋 히스토리

기록 확인

# 작업 완료 후 저장
git add .
git commit -m "Button 컴포넌트 추가"
git push

# 새 프로젝트 시작
git clone https://github.com/username/repo.git
cd repo
pnpm install

시스템 명령어

실행 중인 명령 중단

서버 끌 때

터미널 화면 정리

깔끔하게 시작

Node.js 버전 확인

설치 확인

pnpm 버전 확인

설치 확인

Node 설치 경로

문제 해결

Antigravity / VSCode 단축키

기본 조작

파일 빠른 검색/열기

Cmd + / 검색

명령어 팔레트

Quick Actions

사이드바 토글

패널 접기

터미널 토글

화면 분할

현재 탭 닫기

Cmd + W

닫은 탭 다시 열기

Claude Code 명령어/단축키

핵심 개념: 터미널 직접 입력 vs Claude에게 요청

직접 입력

일반 터미널

pnpm install 직접 타이핑

Claude에게 요청

Claude Code 안에서

"pnpm install 해줘"

[일반 터미널에서 직접]
나 → 터미널 → 운영체제(Node.js) 실행

[Claude Code에서 요청]
나 → Claude → Claude의 터미널에서 실행 → "설치했습니다!" 알려줌

언제 어떤 걸 쓰나?

단순 명령어 (pnpm dev, git status)

직접 입력이 빠름

뭘 쳐야 할지 모를 때

Claude에게 요청

에러 해결할 때

Claude에게 에러 메시지와 함께 요청

코드 작성/수정

Claude에게 요청

필수 조작 (이것만 알면 됨)

현재 태스크 중단

Claude가 이상한 방향으로 갈 때, 너무 오래 걸릴 때

Claude Code 종료

터미널로 돌아가고 싶을 때

Claude Code 종료

Escape 안 먹힐 때 대안

대화 초기화

컨텍스트 꼬였을 때 새로 시작

모드 전환 (4단계 순환)

Normal → Accept Edits → Auto → Plan

기본 사용

Claude Code 시작

가장 최근 대화 이어서 하기

--continue의 단축형

이전 세션 목록에서 골라서 이어가기

ID 없이 쓰면 세션 목록 표시

대화 없이 바로 실행 (원샷)

결과만 출력하고 종료

파일을 지정해서 컨텍스트로 전달

Tab으로 경로 자동완성

여러 줄 입력

메시지 전송

프로젝트 설정

프로젝트 루트에 두면 매 대화마다 자동으로 읽힘

프로젝트 규칙, 코드 컨벤션 등을 여기에 작성

CLAUDE.md 자동 생성

프로젝트 처음 세팅할 때

규칙을 파일별로 분리 관리

규칙이 많아지면 이 방식이 편함

슬래시 명령어

도움말 보기

대화 내역 초기화

컨텍스트 압축

설정 열기

토큰 사용량 확인

설치 상태 진단

메모리 관리

코드 리뷰 요청

자주 쓰는 패턴

# Claude Code 시작
claude

# 어제 하던 대화 이어서
claude -c

# 프로젝트 컨텍스트 설정
/init

# 대화 너무 길어졌을 때
/compact

# 비용 확인
/cost

# 새로운 작업 시작 전 초기화
/clear

# 파일 지정해서 원샷 실행
claude -p "@src/App.jsx 이 파일 분석해줘"

프롬프트 팁

파일 지정해서 요청

"src/components/Button.tsx 수정해줘"

에러 메시지 포함

"이 에러 해결해줘: [에러 메시지 붙여넣기]"

명확한 요구사항

"MUI Button으로 primary variant, large 사이즈 버튼 만들어줘"

컨텍스트 제공

"이 프로젝트는 React + MUI + TypeScript 사용 중이야"

상황별 명령어 모음

프로젝트 처음 시작할 때

git clone [저장소 URL]
cd [프로젝트 폴더]
pnpm install
pnpm dev

새 패키지 설치할 때

pnpm add [패키지명]
# 개발용이면
pnpm add -D [패키지명]

작업 저장할 때

git add .
git commit -m "작업 내용 설명"
git push

서버가 이상할 때

# 1. 서버 종료
Ctrl + C

# 2. node_modules 삭제 후 재설치
rm -rf node_modules
pnpm install

# 3. 다시 실행
pnpm dev

포트 충돌 날 때

# 포트 사용 중인 프로세스 찾기
lsof -i :3000

# 해당 프로세스 종료
kill -9 [PID번호]

어떤 파일이 바뀌었는지 확인

git status
git diff

디자인과 개발을 잇는 언어를 배웁니다

디자인 사고로 제품을 설계하는 바이브 코딩

온라인 VOD + 커뮤니티 학습

6섹션 · 18챕터

Vibe Design Starter Kit

디자인 사고로 제품을 설계하는 바이브 코딩

바이브 디자인: 새로운 사고에 적응하기

꼭 필요한 만큼의 디자인 시스템

제품으로서의 확장: UX로 로직 제어하기

내 프로젝트에 적용해보기 - 챌린지

디자인 에이전트: 이성과 감성사이의 파이프라인

실전 서비스 운영 시나리오 대응