[클로드 처음 사용해보기] ② 코딩 몰라도 됩니다… 언어가 새로운 코드입니다, 클로드 코드 시작하기

“코딩을 모르는데 클로드 코드(Claude Code)를 왜 봐야 하죠?” 바로 그 사람을 위한 글이다. 이제는 코드를 직접 쓰는 대신, 하고 싶은 걸 ‘말’로 설명하면 클로드가 코드를 짜고, 웹사이트를 만들고, 작은 프로그램까지 돌려준다. 말이 곧 코드가 되는 시대다. 오늘은 코드 한 줄 없이 결과물을 만드는 두 가지 길을 잡아본다.

1. 가장 쉬운 길 — 브라우저에서 깃허브로 (코드 0줄)

가장 부담 없는 시작은 설치 없이 브라우저에서 하는 방식이다.

🔧 1단계 — 무료 깃허브(GitHub) 계정 만들기

깃허브는 만든 결과물을 보관·배포하는 무료 창고다. github.com에서 가입만 해두면 된다.

🔗 2단계 — 클로드에 깃허브 연결

클로드 코드 화면에서 방금 만든 깃허브 계정을 연결한다. 한 번만 해두면 다음부터는 자동이다.

💬 3단계 — 코드 대신 ‘말’로 시키기

“이런 페이지를 만들어줘”처럼 원하는 결과를 문장으로 설명한다. 클로드가 알아서 코드를 만들고 화면을 구성한다.

✅ 4단계 — 받아들이고(Accept), 실제 사이트 확인, 무한 수정

클로드가 제안하는 변경을 받아들이면 결과가 반영된다. 라이브 사이트를 직접 보고 “여기 색 바꿔”, “버튼 더 크게”처럼 끝없이 고치면 된다.

2. 한 단계 위 — VS코드 + 클로드 확장 (더 빠르게)

조금 더 본격적으로 하고 싶다면 코드 편집기를 쓰는 방식이 빠르다.

🖥️ 1단계 — 무료 편집기 VS코드(VS Code)를 내려받아 설치한다.

🧩 2단계 — VS코드 안에서 ‘클로드(Claude)’ 확장을 설치한다.

⚙️ 3단계 — VS코드 안 클로드 설정으로 들어가 로그인·연결한다.

⚡ 4단계 — 이제 ‘바이브 코딩(vibe coding)’ — 화면을 보며 말로 시키고, 그 어느 때보다 빠르게 만든다.

3. 클로드 코드, 잘 시키는 법 (핵심 5가지)

도구보다 ‘시키는 법’이 결과를 가른다.

📸 ① 스크린샷으로 시작하라 — 원하는 화면·참고 디자인을 캡처해 붙여넣으면 말로 백 마디 하는 것보다 정확하다.

🎯 ② 단계가 아니라 ‘결과’를 묘사하라 — “버튼을 만들고 색을 칠하고…”가 아니라 “주문 완료를 알리는 초록색 확인 화면”처럼 최종 모습을 말하라.

📁 ③ 클로드에게 내 파일을 가리켜라 — “이 폴더의 이 파일을 기준으로”라고 짚어주면 엉뚱한 걸 만들지 않는다.

🔂 ④ 한 번에 한 가지만 — 여러 변경을 한꺼번에 시키면 꼬인다. 하나 끝내고 다음으로.

🐞 ⑤ 이상하면 다시 스크린샷 — 결과가 어긋났을 때 그 화면을 캡처해 보여주면 클로드가 원인을 더 잘 잡는다.

4. 클로드 코드에는 ‘뇌’가 필요하다 (컨텍스트)

매번 처음부터 설명하지 않으려면, 프로젝트의 배경·규칙·목표를 적은 ‘컨텍스트 파일’을 하나 만들어 두자. 클로드가 그 파일을 기준으로 움직이면 결과가 일관되고 빨라진다. (코워크 폴더 세팅은 ⑫편 참고.)

프롬프트(오퍼스 4.8 기준)
이 폴더의 파일들을 먼저 살펴보고, 무엇을 만드는 프로젝트인지 한 문단으로 요약해줘.
그다음 내가 “초보자”라는 전제로, 지금 당장 할 수 있는 가장 작은 다음 단계 하나만 제안해줘.
코드를 바꾸기 전에 무엇을 왜 바꿀지 먼저 한 줄로 알려주고 진행해줘.

5. 어디까지 기대할까 (한계)

작은 웹페이지·도구·자동화에는 놀랍도록 강하지만, 복잡한 대규모 시스템·민감한 보안 작업은 사람의 검토가 필요하다. “혼자 다 맡기는 도구”가 아니라 “엄청 빠른 조수”로 보는 게 맞다.

⏱️ 첫 30분 추천 코스: 0–5분 설치·열기 → 5–10분 컨텍스트 폴더 만들기 → 10–15분 첫 대화로 작은 페이지 만들기 → 15–20분 받아들이고 수정 요청 → 20–30분 일부러 까다로운 요청을 던져 한계 체험.

추천 대상: 코딩은 모르지만 나만의 페이지·도구·자동화를 만들어보고 싶은 사람.

이미지 출처: 앤트로픽