명령어와 단축키
Vibe Design Starter Kit 학습 환경에 맞춰 정리한 터미널 명령어와 IDE 단축키, Claude Code 레퍼런스. 외울 필요 없이 필요할 때 찾아보면 됨.
14
Essentials95
Commands4
Categories먼저 알면 좋은것들
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
디자인과 개발을 잇는 언어를 배웁니다
디자인 사고로 제품을 설계하는 바이브 코딩
6섹션 · 18챕터
Vibe Design Starter Kit
디자인 사고로 제품을 설계하는 바이브 코딩
바이브 디자인: 새로운 사고에 적응하기
꼭 필요한 만큼의 디자인 시스템
제품으로서의 확장: UX로 로직 제어하기
내 프로젝트에 적용해보기 - 챌린지
디자인 에이전트: 이성과 감성사이의 파이프라인
실전 서비스 운영 시나리오 대응