안녕하세요! 22기 AI온보딩 청강생 나일입니다.
Antigravity 업데이트되면서, VS Code로 옮겨타는 과정에서 온보딩 수업을 다시보기로 청강하고 도움받았어요. 초급 온보딩 과정이라고 하기 무색할만큼 내용이 탄탄해서 앞으로 수요일 지정 청강으로 기초를 좀더 단단하게 다져야겠다고 생각했네요.
1주차 강의 사례글입니다~!
## 처음엔 세팅이 가장 어려웠습니다
Claude Code라는 이름을 처음 접했을 때, 솔직히 말하면 또 다른 AI 채팅 도구 정도로 생각했습니다. ChatGPT처럼 질문하고 답을 받는 도구겠거니 했죠. 그런데 막상 VS Code와 연결하는 세팅을 들여다보니, 이것은 단순한 채팅창과는 결이 달랐습니다.
바이브코딩(Vibe Coding)이라는 개념도 처음에는 막연하게 느껴졌습니다. "자연어로 개발한다"는 말은 들었지만, 그게 실제로 어떤 모습인지, 어디서부터 시작해야 하는지 몰랐습니다. 비전공자 입장에서 개발 환경 세팅은 늘 첫 번째 장벽이었고, 그 장벽에 막혀 아예 시작을 못 해본 경험이 여러 번 있었습니다.
이번 온보딩 스터디는 그 장벽을 함께 넘는 시간이었습니다. Claude Code를 VS Code와 Antigravity IDE에 연결하는 방법을 단계별로 복기하고, 실제로 결과물을 만들어보는 것까지 이어지는 실습이었습니다. 앞으로 회사 팀원들에게 개발 환경 세팅 방법을 강의 형식으로 전파할 계획인데, 이번 스터디가 그 준비의 든든한 출발점이 되었습니다.
Adobe xdk 편집기의 스크린샷
---
## 어떻게 진행됐나요
실습은 스터디장님이 준비해주신 프롬프트를 활용하는 방식으로 진행되었습니다. 처음부터 직접 프롬프트를 작성하는 것이 아니라, 잘 설계된 프롬프트의 구조를 먼저 몸으로 경험해보는 방식이었습니다.
프롬프트를 붙여넣자 AI는 바로 결과물을 내놓지 않았습니다. 대신 인터뷰를 시작했습니다. 이름이 무엇인지, 한 줄 소개를 어떻게 할지, 어떤 디자인 스타일을 원하는지, 색상은 어떤 팔레트로 할지를 한 번에 하나씩 물어왔습니다. 질문에 답하다 보니 어느새 제가 원하는 결과물의 조건들이 하나씩 정리되어 있었고, AI는 그 내용을 바탕으로 index.html 한 파일짜리 미니 링크트리 페이지를 생성해 주었습니다.
막히는 부분은 없었습니다. 세팅이 되어 있고 프롬프트가 잘 설계되어 있으면, 나머지는 대화처럼 자연스럽게 흘러갔습니다. 바이브코딩이 "자연어로 개발한다"는 말의 의미를 실감하는 순간이었습니다.
---
## 잠깐 — 헷갈렸던 점들을 정리하면
첫 번째: "IDE 안에 터미널이 따로 있는 이유가 뭔가요?"
실습을 하다 보면 이런 의문이 생깁니다. 채팅창에 자연어로 명령을 내리면 코드 편집창에서 파일이 생기고 수정도 됩니다. 그런데 터미널은 아무 변화가 없습니다. 그렇다면 터 미널은 왜 있는 걸까요?
먼저 구조를 이해하면 좋습니다. VS Code는 독립적인 데스크탑 앱입니다. 터미널 없이도 실행되고, 파일 편집은 터미널과 관계없이 동작합니다. 다만 개발 편의를 위해 터미널을 내부에 품고 있습니다. 별도의 터미널 앱을 열지 않아도 VS Code 안에서 바로 명령어를 실행할 수 있도록요.
Claude Code는 바로 이 내장 터미널 위에서 실행되는 CLI 프로그램입니다. 채팅창처럼 보이지만, 내부적으로는 터미널에서 claude라는 명령어로 동작합니다.
그렇다면 왜 이번 실습에서 터미널이 조용했을까요? 파일을 만들고 수정하는 작업은 Claude Code가 파일 시스템에 직접 접근해서 처리하기 때문에, 터미널을 거치지 않습니다. 터미널이 활발해지는 순간은 따로 있습니다.
| 상황 | 터미널에서 일어나는 일 |
|------|----------------------|
| 패키지 설치 | npm install, pip install 실행 |
| 개발 서버 구동 | npm run dev, python app.py 실행 |
| 테스트 실행 | npm test, pytest 실행 |
| Git 작업 | git commit, git push 실행 |
이번 링크트리 실습은 HTML 파일 하나를 만드는 작업이었기 때문에 위 상 황이 하나도 없었습니다. 터미널이 조용했던 것이 정상이었습니다.
> VS Code — 독립 데스크탑 앱, 터미널을 내부에 품고 있음
> 내장 터미널 — 명령어 실행이 필요할 때 쓰는 공간
> Claude Code — 그 터미널 위에서 실행되는 CLI 프로그램
Adobe xdk 편집기의 스크린샷
두 번째: Claude Code 1개 계정을 여러 컴퓨터나 프로그램에서 사용하면, 계정 과금은 어떻게?
각각의 세션은 컨텍스트를 공유하지 않습니다
하지만 과금(billing)은 같은 계정으로 합산됩니다
console.anthropic.com → Usage 탭에서 전체 토큰 소비량 확인 가능
세션 A (터미널) ─┐
├─→ 동일 계정으로 API 호출 → Anthropic 과금 합산
세션 B (VS Code) ─┘
세 번째: "IDE 내장 Chat이 있는데, Claude Code 유료 버전을 굳이 써야 하나요?"
Antigravity처럼 여러 AI 모델이 기본 탑재된 IDE를 보면 자연스럽게 드는 의문입니다.
내장 Chat은 코드 한 줄을 제안하거나 특정 함수를 설명하는 데 특화되어 있습니다. 반면 Claude Code는 프로젝트 전체 구조를 파악하고, 여러 파일을 동시에 읽고 수정하며, 터미널 명령을 실행하고, 할 일 목록을 스스로 세워 단계별로 처리하는 자율 에이전트입니다. 한 줄짜리 코드 제안과, 프로젝트 전체를 함께 설계하고 실행하는 것의 차이입니다. 작업의 규모와 목적에 따라 두 도구는 함께 쓰는 것이 맞습니다.
---
## 결과물
나일 김 - 스크린샷 1
차콜 배경에 골드 포인트 컬러를 입힌 미니 링크트리 페이지가 완성되었습니다. 이름, 한 줄 소개, 링크 버튼이 세로로 정렬된 모바일 비율의 페이지로, 외부 CSS 파일 없이 index.html 단 하나로 동작합니다. 브라우저에서 파일을 더블클릭하는 것만으로 바로 열립니다.
완성된 페이지를 브라우저에서 처음 열었을 때, 생각보다 훨씬 완성도 있는 결과물이 나와 있었습니다. "내가 이걸 만든 게 맞나?" 싶은 느낌이 드는 순간이 바이브코딩의 묘미인 것 같습니다.
---
## AI는 도구가 아니라 학습 메이트입니다
이번 실습을 통해 AI를 바라보는 시각이 조금 바뀌었습니다.
지금까지 AI를 쓸 때는 주로 "이거 해줘" 하고 결과물을 받아오는 방식이었습니다. 입력과 출력의 관계, 일종의 자동화 도구처럼 사용했던 것이죠. 그런데 이번 실습에서 AI는 결과물을 바로 내놓는 대신 먼저 질문을 했습니다. 제가 원하는 것이 무엇인지, 왜 그것을 원하는지를 함께 정리해 나갔습니다.
그 과정에서 저도 몰랐던 제 선호가 드러났습니다. 디자인 스타일을 고르면서 "나는 이런 분위기를 좋아하는구나"를 알게 되었고, 한 줄 소개를 다듬으면서 "내가 나를 어떻게 표현하고 싶은지"를 정리하게 되었습니다. AI가 대신 결정한 것이 아니라, 제가 스스로 결정하도록 이끌어준 것입니다.
강사처럼 정답을 알려주는 것도, 단순히 명령을 수행하는 도구도 아니었습니다. 함께 만들어가는 학습 메이트에 가까웠습니다.
---
## 잘 풀린 작업은 스킬로 남겨두세요
이번 실습에서 한 가지 더 인상 깊었던 것은, 완성된 작업 흐름을 스킬(Skill) 파일로 저장해두는 과정이었습니다.
오늘 진행한 "자기소개 인터뷰 → 디자인 인터뷰 → 링크트리 생성" 흐름 전체를 .claude/skills/intro-page/SKILL.md 파일에 저장해두었습니다. 이제 이 폴더에서 /intro-page 라고 입력하면, 오늘과 동일한 흐름으로 언제든 다시 시작할 수 있습니다.
다른 사람의 페이지를 만들어줄 때도, 다음에 비슷한 작업을 할 때도 처음부터 다시 설계할 필요가 없습니다. 잘 만들어진 작업 흐름은 단순히 오늘 쓰고 버리는 것이 아니라, 언제든 꺼내 쓸 수 있는 재사용 가능한 자산이 됩니다.
코드를 작성하는 능력만큼이나, 좋은 작업 흐름을 설계하고 저장하는 능력이 중요한 이유가 여기에 있습니다.
---
## 마치며
프롬프트의 정밀도가 결과물의 완성도를 결정합니다.
스터디장님이 준비해주신 프롬프트는, 기존에 제가 AI에게 던지던 막연한 질문들과는 확연히 달랐습니다. 단계가 명확했고, 원하는 결과의 조건이 구체적이었으며, AI가 사용자에게 무엇을 물어야 하는지까지 정교하게 설계되어 있었습니다.
지금은 잘 설계된 프롬프트를 복붙해서 사용했지만, 언젠가는 스스로 프롬프트를 설계할 수 있어야 한다는 것을 압니다. 프롬프트 작성 능력이 AI 시대의 핵심 역량이 되리라는 것을 이번 한 시간의 실습에서 실감했습니다.
세팅만 되면 누구든 바이브코딩을 시작할 수 있습니다. 그리고 그 첫 번째 결과물을 직접 손으로 열어보는 경험이, 다음 실습을 이어가는 가장 좋은 동기가 됩니다.
