🤖 AI를 에이전트로 사용하는 방법 총정리

안녕하세요! 큐리어스 대표 열정진이에요.

열정진이 누군지 궁금하다면? → 열정진 소개

요즘 코딩을 몰라도 AI가 앱을 만들어준다고 하죠.

해보신 분들 반응이 대체로 비슷해요.

처음엔 잘 돌아갑니다. 화면도 뜨고 버튼도 눌려요.

그러다 "여기 색만 좀 바꿔줘" 했는데 멀쩡하던 딴 데가 깨집니다.

그거 고쳐달라고 하면 또 엉뚱한 데가 망가지고요.

사흘 만든 걸 버리고 처음부터 다시 시작하게 되지요.

저도 똑같이 했었어요.

순서 하나를 바꾸고 나서야 결과물이 남기 시작했습니다.

오늘 그 순서를 처음부터 끝까지 다 풀어드릴게요.

컴퓨터 오래 안 만져보신 분도 따라오실 수 있게 썼습니다. 길어요.

그래도 한 번만 읽어두시면 계속 써먹으실 수 있어요.

먼저 전체 그림부터

처음 네 개는 문서 만드는 일, 나머지 넷은 실제로 만드는 일이에요.

코드부터 시키지 않는 것. 이게 전부입니다.

왜 문서부터 만들까요

AI는 어제 나눈 대화를 잘 기억하지 못해요.

사람 같으면 어제 한 약속을 기억하잖아요. AI는 아니에요.

그래서 "저번에 말한 그대로 해줘"라고 하면 매번 다른 게 나옵니다.

기준이 글로 남아 있으면 얘기가 달라져요.

대화를 더듬는 대신 그 문서를 보고 움직이거든요.

만들 문서는 세 장입니다.

뒤에 붙은 .md 는 글자만 담는 메모장 파일이라는 뜻이에요. 어렵게 보지 않으셔도 됩니다.

1단계. 무엇을 만들지 적게 한다

머릿속에 있는 걸 두세 줄만 적고 이렇게 던지세요.

이런 걸 만들고 싶어. (여기에 두세 줄로 설명)
이걸 만들려면 어떤 순서와 방법이 필요한지 Concept.md 라는 문서로 정리해줘.

거창하게 쓰실 필요 없어요.

"수강생이 신청하면 자동으로 안내 문자가 나가는 걸 만들고 싶어" 이 정도면 됩니다.

나온 문서는 따로 저장해두세요. 앞으로 계속 씁니다.

2단계. 화면 기준을 박아둔다

화면이 있는 거라면 여기를 대충 넘기면 안 돼요.

"예쁘게 만들어줘"는 매번 다른 게 나옵니다. 어제 본 화면이 오늘 사라져요.

마음에 드는 사이트를 하나 정해보세요.

토스도 좋고, 평소 자주 쓰는 쇼핑몰도 좋아요. 이미 세상에 나와 있는 거라야 합니다.

(사이트 주소) 이 사이트 디자인을 뜯어서 Design.md 문서로 정리해줘.
다음을 반드시 넣어줘.
1. 화면이 어떻게 나뉘어 있는지 (위쪽 메뉴, 옆쪽 메뉴, 본문, 아래쪽)
2. 쓰인 색을 색 코드까지
3. 글씨 종류와 크기, 굵기
4. 여백과 간격 규칙
5. 버튼, 카드, 입력칸 같은 부품의 모양
6. 어두운 화면을 지원하는지, 그때 색은 어떻게 바뀌는지

나온 문서는 전부 우리말로 적혀 있어요.

"여기 초록색 말고 남색으로" 이렇게 직접 고치시면, 앞으로 만들어지는 화면이 다 그 색을 따라옵니다.

피그마로 이미 그려두신 게 있다면 그 이미지를 그냥 붙여넣으셔도 되고요.

3단계. 무엇으로 만들지 정한다

여기서 많이들 멈추세요. 낯선 영어가 쏟아지거든요.

그런데 모른다고 그대로 말하면 됩니다. 아래를 통째로 복사해서 쓰세요.

나는 개발을 모르는 사람이야. 뭘로 만들어야 할지부터 추천해줘.
인터넷 주소로 접속하는 웹이 나을지, 내 컴퓨터에 설치하는 방식이 나을지,
휴대폰 앱으로 만드는 게 나을지 골라줘.
웹으로 간다면 화면은 React 로, 휴대폰 앱이라면 Flutter 로 만들어줘.
내 컴퓨터에 설치하는 방식이면 설치와 배포가 쉬운 npm 이나 uv 방식으로 해줘.
자료를 저장할 곳이 필요하다면, 표처럼 줄과 칸으로 정리되는 자료는 MariaDB 로,
그냥 이름표와 값만 짝지어 두면 되는 자료는 AWS DynamoDB 로 잡아줘.
내 컴퓨터에서 바로 설치하고 실행할 수 있게 준비 script 도 같이 만들어줘.
그리고 나중에 실제 서비스로 올릴 때도 문제없는 구조로 잡아줘.
이걸 다 정한 다음, Concept.md 를 보고 ToDo.md 문서를 만들어줘.

이 프롬프트를 던질 때 1단계에서 받은 Concept.md 를 같이 첨부하거나, 내용을 복사해 뒤에 붙여주세요.

조금 아시는 분이라면 딱 집어서 말씀하셔도 되고요.

이건 웹 서비스야. 화면은 React 로 만들고, 내 컴퓨터에서 npm run dev 로 바로 확인되게 해줘.
뒤에서 도는 서버는 Node.js 로, 자료 저장은 MariaDB 로 해줘.
설치와 실행이 명령어 한 줄로 되는 준비 script 도 포함해줘.
Concept.md 를 보고 ToDo.md 문서를 작성해줘.

4단계. 만드는 순서표를 받는다

집도 기초부터 올리듯 프로그램에도 순서가 있어요.

그리고 한 덩어리로 만들어두면 나중에 손을 못 댑니다. 잘게 쪼개야 해요.

ToDo.md 를 다시 보고 아래 기준에 맞는지 확인해서 부족한 부분은 채워줘.
1. 전체를 기능 단위로 잘게 쪼개서 설계해줘
2. 쪼갠 것마다 무슨 일을 하는지, 무엇이 들어가고 무엇이 나오는지 분명히 적어줘
3. 만드는 순서를 체크박스 목록으로 만들어줘. 다른 것에 안 기대는 것부터
4. 자료를 어떤 표에 어떻게 담을지 설계도 넣어줘
5. 개발을 모르는 내가 직접 확인해볼 시점과 방법을 같이 써줘

5번을 빼먹으면 내가 지금 어디까지 왔는지 알 길이 없어집니다.

받은 ToDo.md 를 처음부터 끝까지 정독하실 필요는 없어요.

못생겨도 좋으니 일단 하나 돌아가게 만들어두세요. 그걸 보면서 고쳐가는 게 훨씬 빠릅니다.

완벽하게 준비하려다 시작을 못 하는 경우를 너무 많이 봤어요.

여기까지가 문서 만들기입니다. 삼십 분이면 돼요.

5단계. 준비물은 딱 두 개

작업 기록을 남기는 Git, 그리고 파일을 다루는 VS Code.

github.com 계정도 하나 필요해요. 무료 가입에 메일 인증까지 마쳐주세요.

Claude Code 를 쓰시려면 클로드 유료 요금제가 있어야 하고, Grok Build 는 그록 유료 계정이 필요합니다.

🪟 윈도우

1. git-scm.com/download/win 에 들어가면 파일이 자동으로 내려받아집니다
2. 받은 파일을 실행하고, 선택 화면이 많이 나오는데 전부 그대로 두고 다음만 계속 누르세요
3. "기본 편집기를 고르세요" 화면에서는 Visual Studio Code 를 고르시면 편합니다
4. 시작 메뉴에서 PowerShell 을 열고 git --version 을 쳤을 때 숫자가 나오면 끝

숫자가 안 나오면 PowerShell 을 껐다 다시 켜보세요. 대부분 그러면 나옵니다.

이어서 code.visualstudio.com 에서 VS Code 를 받아 설치하세요.

설치 도중 "PATH에 추가"와 "Code로 열기를 메뉴에 추가" 두 칸은 체크해두시고요.

🍎 맥

1. Command 키와 스페이스를 같이 누르고 "터미널"을 쳐서 엽니다
2. git --version 이라고 치고 엔터
3. 숫자가 바로 나오면 이미 깔려 있는 거에요
4. "명령어 라인 개발자 도구를 설치하겠냐"는 창이 뜨면 설치를 누르고 기다리세요. 그게 설치입니다

VS Code 는 code.visualstudio.com 에서 받으신 뒤,

압축을 풀어서 나온 아이콘을 응용 프로그램 폴더로 옮겨주세요.

다운로드 폴더에 둔 채로 쓰면 나중에 말썽이 납니다.

이름 등록 한 번

누가 작업했는지 기록에 남겨두려고 하는 설정이에요. 평생 한 번입니다.

git config --global user.name "홍길동"
git config --global user.email "깃허브에 가입한 메일주소"

메일은 GitHub 가입할 때 쓴 것과 똑같이 넣어주세요.

6단계. 작업물 보관소 만들기

리포지토리라는 말을 보시게 될 텐데, 인터넷에 있는 내 작업 폴더라고 생각하시면 됩니다.

1. github.com 에 로그인하고 오른쪽 위 더하기 버튼을 눌러 New repository 를 고릅니다
2. 이름은 영어로, 띄어쓰기 대신 붙임표를 쓰세요 (예: my-first-app)
3. Private 를 고르세요. 회사 일이라면 반드시요
4. "Add a README file" 칸은 꼭 체크하세요. 이래야 다음 단계가 쉬워집니다
5. Create repository 를 누릅니다
6. 만들어진 화면에서 초록색 Code 버튼을 누르고 HTTPS 주소를 복사해둡니다

이제 그 폴더를 내 컴퓨터로 가져옵니다.

1. VS Code 를 열고 Ctrl 과 Shift 와 P 를 같이 누르세요 (맥은 Command)
2. clone 이라고 치면 "Git: Clone" 이 나옵니다. 그걸 고르세요
3. 아까 복사한 주소를 붙여넣고 엔터
4. GitHub 로그인 창이 뜨면 승인해주세요. 처음 한 번만 물어봅니다
5. 저장할 위치를 고르세요. 문서 안에 Projects 같은 폴더를 하나 만들어두시면 좋아요
6. 다 되면 오른쪽 아래에 "열기" 알림이 뜹니다. 누르세요
7. 왼쪽에 README.md 가 보이면 성공이에요 🎉

문서 세 장을 여기에 넣습니다

AI는 이 폴더 안에 있는 파일을 읽어요.

여기에 문서를 넣는 게 곧 AI에게 건네주는 것입니다.

왼쪽 빈 곳에서 오른쪽 클릭을 해서 새 파일을 만드세요.

이름을 Concept.md 로 하고 내용을 붙여넣고 저장합니다.

같은 방법으로 Design.md 와 ToDo.md 도 만들어 넣으세요.

이제 인터넷에 올립니다. 마우스만 쓰셔도 돼요.

1. 왼쪽에 나뭇가지처럼 생긴 아이콘에 숫자가 붙어 있을 거에요. 그걸 누르세요
2. 위쪽 칸에 무엇을 했는지 한 줄 적습니다 (예: 기획 문서 추가)
3. 체크 표시가 있는 Commit 버튼을 누르면 내 컴퓨터에 저장이 됩니다
4. "스테이징된 변경 내용이 없습니다" 창이 뜨면 예를 누르세요
5. 이어서 Sync Changes 를 누르면 인터넷에 올라갑니다

GitHub 웹사이트를 새로고침해서 Concept.md 가 보이면 다 된 거에요.

명령어가 편해지면 터미널에서 이렇게 하셔도 똑같아요.

git add .            (바뀐 파일 전부 담기)
git commit -m "무엇을 했는지"   (내 컴퓨터에 저장)
git push             (인터넷에 올리기)
git pull             (인터넷에서 받아오기)

7단계. AI에 연결하고 시작

claude.ai/code 에 들어가 로그인하세요.

처음이면 GitHub 를 연결하라는 안내가 나옵니다. 그대로 따라가시면 돼요.

연결 화면에서 "Only select repositories" 를 고르고 방금 만든 폴더 하나만 지정하시는 걸 권합니다.

전부 열어줄 이유가 없어요. 나중에 얼마든지 추가됩니다.

회사 조직 계정이라면 관리자 승인이 필요할 수 있습니다.

설치 화면에서 요청을 보내면 관리자에게 알림이 가요.

연결이 끝나면 새 작업을 시작할 때 폴더를 고르고 이렇게 던지세요.

이 프로젝트를 만들어줘. 폴더에 있는 아래 문서를 기준으로 진행해.
Concept.md 는 뭘 만드는지, ToDo.md 는 만드는 순서, Design.md 는 화면 기준이야.
1. ToDo.md 순서대로, 한 번에 하나씩만 해
2. 확인할 수 있는 만큼 만들어지면, 내 컴퓨터에서 실행하고 확인하는 법을 알려줘.
   나는 개발을 모르니까 초보자한테 알려주듯 써줘
3. 끝난 항목은 ToDo.md 에 체크해줘
4. 작업한 가지 이름을 나에게 알려주고, 알아보기 쉬운 메모를 달아서 올려줘
5. 애매한 게 있으면 혼자 짐작하지 말고 나한테 물어봐

맨 마지막 줄을 꼭 넣으세요.

AI는 모르면 물어보는 대신 그럴듯하게 지어냅니다.

8단계. 이 리듬을 반복합니다

AI가 기능 하나를 만들어 올립니다.

그걸 내 컴퓨터로 받아서 직접 눌러봐요.

잘 되면 "좋아, 다음 거 계속 해줘", 안 되면 화면에 뜬 빨간 글씨를 통째로 복사해서 붙입니다.

그리고 다시 다음 기능으로.

전부 확인되면 그때 원본에 합칩니다.

내가 만든 걸 지키는 법

여기서 가지, 브랜치라는 말이 나와요. 말은 어려운데 원리는 별거 없습니다.

Claude Code 는 항상 연습장을 새로 만들어 거기에 결과를 올려요.

그래서 무슨 일을 시켜도 지금 잘 돌아가는 게 안 망가집니다.

Grok Build 는 원본에서 바로 작업해요. 다만 되돌릴 수 있으니 너무 걱정하진 마시고요.

지금 내가 어디에 있는지 보기

VS Code 화면 왼쪽 맨 아래, 가지 모양 옆에 지금 있는 자리 이름이 적혀 있어요.

터미널에서는 git branch 를 치면 별표 붙은 게 지금 자리입니다.

⚠️ 자리를 옮기면 폴더 안 파일이 통째로 옮겨간 자리의 내용으로 바뀝니다.

파일이 사라진 것처럼 보여도 놀라지 마세요. 다른 자리에 그대로 있어요.

AI가 만든 걸 받아서 확인하기

"어디어디에 올렸어요"라고 알려주면 그 자리로 옮겨가서 확인하시면 됩니다.

1. 왼쪽 맨 아래 이름을 누르면 목록이 열립니다
2. 새로 만든 게 안 보이면 소스 제어 탭의 점 세 개 메뉴에서 Fetch 를 한 번 누르세요
3. origin 으로 시작하는 AI의 작업 자리를 고르면 폴더가 그 상태로 바뀝니다

터미널이 편하시면 이렇게요.

git fetch                   (새로 올라온 목록 받아오기)
git checkout 알려준이름       (그 자리로 옮기기)
git pull                    (최신 내용 받기)

에러가 나면 요약하지 마시고 화면에 뜬 글씨를 통째로 복사해 붙이세요.

고쳐서 같은 자리에 다시 올려주면 받아서 또 확인하시면 됩니다.

다 됐으면 원본에 합치기

AI가 미리 만들어둔 경우가 많아서 버튼 몇 번이면 끝나요.

1. 내 폴더에 들어가 Pull requests 탭을 누릅니다
2. AI가 만들어둔 게 있으면 클릭, 없으면 New pull request 를 눌러 만듭니다
3. Files changed 에서 뭐가 바뀌는지 한번 훑어보세요. 초록색은 추가, 빨간색은 삭제예요
4. Merge pull request 를 누르고 Confirm merge 를 누르면 끝입니다
5. 내 컴퓨터도 main 으로 옮긴 뒤 Sync Changes 를 눌러 최신으로 맞춥니다

합치는 중에 충돌이 났다는 말이 나오면 직접 해결하려 하지 마세요.

원본에 합치려는데 충돌이 났어. 해결해서 다시 올려줘.
어떻게 해결했는지도 설명해줘.

⚠️ 실제 서비스로 올리는 일은 반드시 원본에서만 하세요.

서버가 있다면 관리자 화면도 같이

내가 만드는 게 서버를 쓰는지 아닌지 모르실 수 있어요. 그럴 땐 이렇게 던져두시면 됩니다.

서버가 들어가는 서비스라면 관리자 화면도 개발 계획에 넣어줘.
서버가 잘 돌고 있는지, 가입자 수 같은 핵심 숫자, 최근에 난 오류를 볼 수 있어야 해.
관리자 계정은 처음에 admin 에 비밀번호 12345 로 해두고,
그 화면에서 비밀번호를 바꿀 수 있게 해줘.
ToDo.md 를 보고 필요하다고 판단되면 계획에 포함해줘.

이 화면이 있으면 지금 몇 명이 왔는지, 어디서 오류가 났는지를 직접 보실 수 있어요.

결과를 가르는 말버릇 다섯 가지

같은 도구를 써도 결과는 천차만별이에요. 어디서 갈리냐면 여기입니다.

하나. 하지 말 것도 같이 적는다

"내가 확인하기 전엔 다른 파일 건드리지 마"

"새 도구 추가하지 말고 지금 있는 걸로만 해"

둘. 한 번에 하나만 시킨다

전체를 한 번에 시키면 결과가 확 나빠집니다. ToDo.md 순서대로 잘게 끊어서.

셋. 에러는 그대로 붙인다

줄여서 전하면 엉뚱한 데를 고쳐요. 화면에 뜬 그대로가 제일 정확합니다.

넷. 모르면 물어보게 만든다

"애매하면 짐작하지 말고 물어봐" 이 문장을 프롬프트마다 넣으세요.

다섯. "아까 말한 것처럼"을 버린다

그 자리에 "Design.md 대로"를 넣으세요.

대화 기억보다 폴더에 있는 문서가 훨씬 믿음직해요. 이것만 바꿔도 결과가 달라집니다.

저도 하나 만들어봤어요

제 강의는 줌으로 하는데, 수강생분들이 설치하다가 자꾸 막히시더라고요.

그래서 주소만 누르면 바로 들어오는 라이브 강의 방을 하나 만들어봤습니다.

화면 공유도 되고, 채팅도 되고, 녹화도 알아서 남아요.

하루 만에 돌아가는 게 나왔어요.

지금은 실제 강의에 넣기 전에 이것저것 시험해보는 중입니다.

마지막으로

낯선 말이 많아서 어려워 보이지만 한 번만 해보시면 두 번째부터는 삼십 분이면 시작하실 수 있어요.

완벽하게 준비하고 시작하려 하지 마시고요. 일단 하나 돌아가게 만들어두고 고쳐가는 게 훨씬 재미있습니다.

깃이나 깃허브부터 아예 처음이시라면 노마드코더 무료 강의를 먼저 들어보셔도 좋아요.

→ 깃 처음 배우기 무료 강의

해보시고 어땠는지 댓글로 알려주세요 😊