본문 바로가기

첫 실행과 첫 대화

설치와 로그인을 마쳤으니, 이제 클로드 코드와 첫 대화를 나눠보겠습니다. 이 장의 목표는 "클로드 코드가 실제로 내 컴퓨터에서 파일을 만들고 일을 한다"는 것을 직접 체감하는 것입니다.

1. 첫 프로젝트 만들기

먼저 작업할 빈 폴더를 만들고 그 안에서 클로드 코드를 실행합니다.

  1. 바탕화면 등에 claude-first 라는 폴더를 만듭니다.

  2. VSCode에서 파일 → 폴더 열기로 이 폴더를 엽니다.

  3. 터미널 → 새 터미널을 열고 다음을 입력합니다.

    claude
    
  4. 폴더 신뢰 여부를 물으면 엔터로 진행합니다.

2. 첫 대화

이제 자연어로 지시해봅니다. 프롬프트 입력창에 다음을 그대로 입력하고 엔터를 누르세요.

바이브 코딩을 소개하는 간단한 랜딩 페이지를 만들어줘.

요구사항:
- 모든 코드를 하나의 index.html 파일에 포함
- HTML, CSS, JavaScript 사용
- 반응형 디자인
- 부드러운 스크롤 애니메이션
- 현대적이고 깔끔한 디자인

클로드 코드는 다음과 같은 과정을 거칩니다.

작업 중간에 파일을 생성/수정해도 되는지 묻는 권한 확인 창이 나올 수 있습니다. 내용을 확인하고 승인하면 클로드 코드가 실제로 index.html 파일을 만듭니다.

권한 확인은 안전장치입니다

클로드 코드는 여러분의 파일을 직접 다루기 때문에, 중요한 동작(파일 수정, 명령 실행 등)에 대해 승인을 요청합니다. 처음에는 번거롭게 느껴질 수 있지만, 의도치 않은 변경을 막아주는 안전장치입니다. 자주 쓰는 안전한 명령을 미리 허용하는 방법은 10장(권한 관리)에서 다룹니다.

3. 결과 확인하기

작업이 끝나면 VSCode 왼쪽 탐색기에 index.html 파일이 생긴 것을 볼 수 있습니다. 이 파일을 웹 브라우저로 열어 결과를 확인합니다.

  • VSCode에서 index.html 우클릭 → "기본 브라우저에서 열기"
  • 또는 파일 탐색기에서 index.html 더블클릭

마음에 들지 않는 부분이 있다면 계속 자연어로 수정 지시를 내리면 됩니다.

헤더 배경을 보라색 그라데이션으로 바꾸고, 버튼에 호버 효과를 추가해줘.

클로드 코드는 기존 index.html을 읽어 해당 부분만 수정합니다. 이렇게 대화하듯 결과물을 다듬어 가는 것이 클로드 코드의 기본 작업 방식입니다.

4. 지시를 잘 하는 작은 습관

첫 대화에서부터 다음 습관을 들이면 결과물 품질이 크게 달라집니다.

습관설명
구체적으로 지시"예쁘게"보다 "여백을 넉넉히, 폰트는 굵게, 색은 파랑 계열로"
요구사항을 목록으로위 예시처럼 항목을 나눠 적으면 빠뜨림이 줄어듭니다
한 번에 하나씩큰 작업은 단계로 쪼개서 지시
결과를 직접 확인브라우저로 열어보고 피드백

지금은 그냥 "되는구나"를 체감하는 단계입니다. 더 효율적으로 지시하고, 더 큰 프로젝트를 안정적으로 다루는 방법은 4장의 명령어·모드, 5장의 CLAUDE.md와 작업 흐름에서 본격적으로 배웁니다.

여기까지 따라오셨다면 클로드 코드의 설치와 첫 실행을 모두 마친 것입니다. 이제 본격적으로 클로드 코드를 다루는 기본기를 익혀보겠습니다.

첫 실행과 첫 대화 - 클로드 코드 에센셜 | 위니버시티