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