터미널이 낯선 초보자의 클로드 코드 설치 및 사이트 디버깅 도전기

소개 시도 배경

최근 코딩 지식이 부족해도 인공지능의 도움을 받아 서비스를 만드는 바이브 코딩에 관심이 생겼습니다. 그중에서도 터미널 환경에서 강력한 성능을 발휘한다는 클로드 코드를 직접 사용해보고 싶었습니다. 단순히 웹에서 대화하는 수준을 넘어 내 컴퓨터의 파일에 직접 접근하고 수정하는 환경을 구축하여, 개발 효율을 획기적으로 높여보고자 설치를 시작하게 되었습니다.

진행 방법과 사용 도구

사용한 도구는 터미널(zsh), 클로드 코드(Claude Code), 그리고 크롬 브라우저의 클로드 확장 도구입니다.

  1. 클로드 코드 설치 단계 가장 먼저 터미널에서 설치 명령어를 실행했습니다. 설치 자체는 성공했지만 환경 변수(PATH) 설정이라는 난관에 부딪혔습니다. 컴퓨터가 클로드라는 프로그램의 위치를 찾지 못하는 상태였습니다.

  2. 환경 설정 및 권한 문제 해결 화면에 나온 안내대로 환경 설정 파일인 .zshrc에 경로를 추가하려 했으나, 이번에는 권한 거부(Permission denied) 메시지가 떴습니다. 이를 해결하기 위해 파일의 소유권을 가져오는 명령어를 사용하고 나서야 설정을 마칠 수 있었습니다.

사용했던 핵심 명령어는 다음과 같습니다.

sudo chown $(whoami) ~/.zshrc echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc

  1. 클로드 인 크롬(Claude in Chrome) 활용 설치 후에는 크롬 브라우저에서 클로드를 활용해 사이트 디버깅을 시도했습니다. 웹 페이지의 요소를 분석하고 오류가 발생하는 지점을 클로드에게 물어보며 실시간으로 문제를 파악하는 방식으로 활용했습니다.

결과와 배운 점

처음에는 검은 화면의 터미널과 알 수 없는 영어 오류 메시지들이 무척 생경하고 두렵게 느껴졌습니다. 하지만 하나씩 단계를 밟아보니 다음과 같은 소중한 팁을 얻을 수 있었습니다.

첫째, 환경 변수 설정의 중요성입니다. 프로그램만 설치한다고 끝나는 게 아니라, 컴퓨터가 그 프로그램을 찾을 수 있도록 길(PATH)을 알려주는 과정이 필수적이라는 것을 배웠습니다.

둘째, 권한 문제입니다. 맥북이나 리눅스 환경에서는 시스템 파일을 수정할 때 권한 때문에 막히는 경우가 많은데, 이때 당황하지 않고 소유권을 확인하거나 관리자 권한을 적절히 사용하는 법을 익혔습니다.

셋째, 클로드 코드와 크롬 확장을 연동하면 시너지가 대단하다는 점입니다. 터미널에서는 파일 전체를 관리하고, 브라우저에서는 시각적인 오류를 바로 잡아내니 개발 속도가 훨씬 빨라졌습니다.

시행착오도 있었습니다. 비밀번호를 입력할 때 화면에 아무 글자도 나타나지 않아 입력이 안 되는 줄 알고 여러 번 당황했던 기억이 납니다. 혹시 저 같은 초보자분이 계신다면, 글자가 안 보여도 입력은 되고 있으니 믿고 엔터를 치시라는 꿀팁을 전하고 싶습니다.

앞으로는 클로드 코드를 활용해 간단한 웹 서비스의 기능을 직접 수정하고 배포하는 단계까지 나아가 볼 계획입니다.

도움 받은 글

이번 도전에 큰 힘이 된 자료는 앤스로픽의 공식 가이드와 아래 노션 자료입니다.

클로드 코드 가이드: https://www.notion.so/claude-code-32c16ac83c6a801f8ca1ffae14a907cb

2

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요