본문 바로가기

클로드 코드 웹 버전

가능하면 터미널 버전을 사용하길 권장하지만, 클로드 코드에는 브라우저에서 바로 쓰는 웹 버전도 있습니다. 설치가 어려운 경우나 간단한 수정 작업에 유용합니다. 다만 터미널 버전에 비해 기능이 제한적일 수 있고, 출시 상태가 바뀔 수 있으니 참고용으로만 보세요.

1. 웹 버전 접속과 GitHub 연결

웹 버전은 GitHub 저장소와 연결해 사용합니다.

  1. 위 링크에 접속해 GitHub에 연결 버튼을 누릅니다.

  2. Authorize Claude 버튼으로 GitHub 계정을 연결합니다.

  3. 저장소 연결 화면에서 계정을 선택하고, All repositories(또는 원하는 저장소)를 선택한 뒤 Install & Authorize를 누릅니다.

  4. 다시 링크로 접속하면 웹 버전을 사용할 수 있습니다.

2. 저장소 생성 및 연결

웹 버전은 작업할 GitHub 저장소가 필요합니다. GitHub에서 + → New repository로 새 저장소를 만들고(예: claude-web-demo), 웹 버전에서 리포지토리 연결로 연결합니다.

3. 간단한 작업해보기

연결 후, 왼쪽 입력창에 지시를 입력하면 오른쪽에서 작업이 진행됩니다.

간단한 소개 랜딩 페이지를 만들어줘.

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

알림 설정 창이 뜨면 활성화하는 것을 권장합니다. 작업이 끝나면 알림으로 알려줍니다.

4. 변경사항 반영 (PR 흐름)

웹 버전은 변경 사항을 GitHub 저장소에 자동으로 커밋·푸시하지만, 기본 브랜치에 바로 반영되지는 않습니다. 다음 흐름으로 직접 합쳐야 합니다.

  1. Compare & pull request 클릭
  2. Create pull request 클릭
  3. Merge pull request → Confirm merge 클릭
  4. 작업용 브랜치는 Delete branch로 삭제

머지가 끝나면 Code 페이지에서 반영된 코드를 확인할 수 있습니다.

웹 버전은 아직 결과물을 그 자리에서 바로 확인·수정하기는 불편합니다. 지금은 코드를 복사해 로컬에 index.html로 저장한 뒤 브라우저로 열어 확인하는 방식을 권장합니다. 본격적인 작업은 터미널 버전(3장)이 훨씬 편리합니다.