이 글에서 배울 수 있는 것

Claude Code를 제대로 활용하려면 VS Code 환경 설정부터 익혀두는 게 중요해요. 이 글에서는 Claude Pro 결제부터 VS Code 익스텐션 설치, 로그인, 실제 사용 준비까지 처음 시작하는 분 기준으로 쉽게 설명할게요.

단계별 실습

Claude Code는 VS Code 기반으로 사용하는 경우가 많아서 먼저 개발 환경을 준비해야 해요. 이미 설치되어 있다면 다음 단계로 넘어가도 돼요.

무료 플랜으로도 사용은 가능하지만, 실제 바이브 코딩 작업은 Claude Pro 플랜이 훨씬 쾌적해요. 사용량 제한과 응답 속도 차이가 꽤 크거든요.

VS Code 좌측 확장 프로그램 탭에서 Claude 또는 Claude Code 관련 익스텐션을 검색해서 설치해요. 설치 후 VS Code를 재시작하면 안정적으로 연결되는 경우가 많아요.

익스텐션 설치 후 Claude 계정으로 로그인하면 VS Code 내부에서 AI 기능을 바로 사용할 수 있어요.

빈 폴더 하나를 만들고 HTML 파일이나 React 프로젝트를 생성한 뒤 Claude에게 간단한 작업을 요청해봐요.

반응형 랜딩페이지 하나 만들어줘. 상단에는 큰 제목과 버튼이 있고, 아래에는 카드형 기능 소개 섹션이 있었으면 좋겠어.

처음부터 거대한 서비스를 만들려고 하기보다 버튼 하나, 섹션 하나처럼 작은 단위부터 AI와 협업하는 감각을 익혀가는 게 중요해요.