Beginner's Guide
DevHub 시작 가이드
처음 DevHub를 사용하시나요? 8단계 가이드를 따라가면
AI 에이전트와 함께 개발하는 방법을 배울 수 있습니다.
1. 워크스페이스 입장
DevHub에 로그인하면 워크스페이스가 열립니다. VS Code와 비슷한 레이아웃이지만, AI 에이전트가 항상 함께합니다.
왼쪽 사이드바에서 파일 탐색, 검색, Git 등을 전환할 수 있습니다
상단 메뉴에서 파일 > 새 프로젝트로 시작하세요
Ctrl+P로 커맨드 팔레트를 열 수 있습니다
2. AI 에이전트와 대화
하단의 AI 채팅 패널에서 에이전트에게 질문하거나 작업을 요청할 수 있습니다. 자연어로 말하면 됩니다.
세리아(총괄): "프로젝트 구조를 분석해줘"
지아(코딩): "로그인 페이지를 만들어줘"
세나(테스팅): "이 코드의 테스트를 작성해줘"
세리아(운영/HWE): "프로덕션 빌드를 최적화해줘"
3. 코드 편집
Monaco 에디터에서 직접 코드를 편집하거나, AI가 생성한 코드를 리뷰하고 적용할 수 있습니다.
AI가 제안한 코드는 미리보기로 확인 후 적용합니다
구문 강조, 자동완성, 에러 표시가 지원됩니다
Ctrl+S로 저장, Ctrl+Z로 실행취소
4. 터미널 사용
내장 터미널에서 npm, git, 빌드 명령어 등을 직접 실행할 수 있습니다.
Ctrl+`로 터미널을 열고 닫습니다
여러 터미널 세션을 동시에 실행 가능합니다
AI에게 "npm install 해줘"라고 요청할 수도 있습니다
5. 파일 관리
왼쪽 탐색기에서 프로젝트 파일을 관리합니다. 파일 생성, 삭제, 이름 변경을 할 수 있습니다.
파일을 클릭하면 에디터에서 열립니다
우클릭으로 새 파일/폴더 생성
드래그&드롭으로 파일 이동 가능
6. Git 연동
Git 탭에서 변경 파일 확인, 커밋·푸시, AI 커밋 메시지 생성까지 지원합니다.
변경 파일 목록 조회
브랜치·상태 표시
커밋·푸시 + AI 커밋 메시지
7. 캔버스 활용
캔버스 탭에서 문서, 다이어그램, 마크다운을 시각적으로 작업할 수 있습니다.
개발 플로우 다이어그램을 시각화할 수 있습니다
마크다운 프리뷰로 문서 작성
AI에게 "README를 작성해줘"라고 요청 가능
8. 자동화 모드
Harness 워크플로우로 typecheck/lint/build를 자동 실행합니다. DevFlow 탭에서 파이프라인 상태를 확인하세요.
Harness 모드에서 워크플로우 SSE 로그 확인
DevFlow 탭에서 eslint/tsc 파이프라인
PM2 서버 모니터링