클로드 코드의 웹 버전
이번 장은 오프라인 실습에서는 진행하지 않습니다. 가능하면 Claude Code의 웹 버전이 아니라 터미널 버전을 사용하시길 권장드립니다. 그럼에도 이 챕터가 있는 이유는 추후에 이 웹 버전이 주류가 될 수도 있기 때문입니다. 지금은 클로드 코드 설치가 어려운 경우나, 간단한 수정 작업만을 위해 사용하는 것으로 하는 것이 좋습니다. 다만, 터미널 버전에 비해 기능이 제한적일 수 있으니 참고하시길 바랍니다.
1. 클로드 코드의 웹 버전
Claude Code는 터미널 버전 외에도 웹 브라우저에서 사용할 수 있는 웹 버전을 제공합니다. 이 웹 버전은 별도의 설치 없이도 바로 사용할 수 있어 편리합니다. 25년 12월 현재 리서치 프리뷰(Research Preview)로 제공되고 있으며, 일부 기능이 제한될 수 있습니다. 해당 버전은 아직 공식 출시 전입니다. 추후 이 기능이 출시되지 않고, 사라질 수도 있다는 점을 유의하시길 바랍니다.
위 링크로 접속 후 GitHub에 연결 버튼을 눌러주세요. 앞 챕터에 회원가입은 이미 하셨을 것입니다. 깃헙 계정으로 로그인하시면 됩니다.
아래 이미지에서 Authorize Claude 버튼을 눌러 깃헙 계정을 연결해주세요.
시간이 지나면 리포지토리 연결 화면이 뜹니다. 리포지토리 연결 버튼을 눌러주세요.
여러분 계정을 선택해주세요. 저는 사용하고 있는 계정이 많아 아래와 같이 뜬 것이고 여러분은 하나의 계정만 뜰 것입니다.
마지막으로 All repositories를 선택하고 Install & Authorize 버튼을 눌러주세요.
모두 완료되었습니다. 다시 https://claude.ai/code/onboarding 링크로 접속하면 아래와 같이 클로드 코드의 웹 버전을 사용할 수 있습니다. 이름을 설정 신뢰됨 버튼을 클릭하신 후 시작해주세요.
2. 리포지토리 생성 및 연결
리포지토리를 먼저 생성한 후 연결해야 합니다. GitHub에 들어가서 오른쪽 위에 있는 + 버튼을 누르고 New repository 버튼을 눌러주세요.
앞에서 했던 것과 동일합니다. 리포지토리 이름을 vibecoding-web-demo로 입력하고 Create repository 버튼을 눌러주세요.
이미지는 sample로 되어 있으나 vibecoding-web-demo로 입력해주세요.
이제 클로드 코드 웹 버전으로 돌아가서 리포지토리 연결 버튼을 눌러주세요. 이제 클로드로 돌아와 아래처럼 연결해주겠습니다.
모든 작업이 완료되었습니다. 이제 클로드 코드의 웹 버전을 사용할 준비가 되었습니다.
3. 간단한 웹 프로젝트 제작
이제 간단한 웹 프로젝트를 만들어보겠습니다. 아래처럼 터미널에 입력해주세요.
바이브 코딩을 소개하는 랜딩페이지를 만들어주세요.
기술 스택: HTML, CSS, JavaScript
요구사항:
- 모든 코드는 하나의 HTML 파일에 포함
- 반응형 디자인
- 부드러운 스크롤 애니메이션
- 현대적이고 깔끔한 디자인
명령어를 입력하면 알림 설정 활성화 창이 뜹니다. 가능하면 알림 설정을 하시는 것을 권장합니다.
내용을 왼쪽 박스에 입력 후 실행시키면 오른쪽에서 결과물이 나옵니다. 모든 작업이 다 완료되면 알림이 뜹니다.
모든 변경사항이 깃헙 리포지토리에 자동으로 커밋되고 푸시됩니다. 이제 깃헙에 들어가서 코드를 확인해보겠습니다. 아래 보는 것처럼 우리가 기대한 코드는 들어가 있지 않습니다. 여기서도 2 ~ 3가지 작업을 더 해야 합니다. 여러분이 코드를 확인하고, 기존의 코드와 합치는 작업입니다. Compare & pull request 버튼을 눌러주세요.
아래 Create pull request 버튼을 눌러주세요.
이제 Merge pull request 버튼을 눌러주세요. 버튼을 누르면 Confirm merge 버튼이 나타납니다. 코드를 기존 코드와 합치겠다는 것입니다. 클릭하여 합쳐주세요. 모두 완료되면 Delete branch 버튼이 나타납니다. 이전에 만들어진 브랜치는 더 이상 필요하지 않으니 눌러서 삭제해주세요.
다시 Code 페이지로 돌아오면 클로드가 작성한 코드가 반영된 것을 확인할 수 있습니다.
다만 아직 직접 확인해보면서 수정할 수 있는 것은 아닙니다. 이 부분이 매우 불편한데 앞으로 공식 런칭이 되면 개선될 것이라 기대합니다. 지금은 코드를 복사하여 메모장에 붙여넣고 index.html로 저장한 후 웹 브라우저로 열어보시길 권장드립니다.