개발

프로젝트로 작업을 시작할 때마다 개발 서버를 켭니다. 개발 서버를 켜면 내가 만든 화면을 브라우저에서 바로 볼 수 있습니다.

프로젝트 안(src)에서 Claude Code 를 켜고, 개발 서버를 말로 띄웁니다. my_project 는 본인 프로젝트 폴더 이름입니다.

# 🖥️ 서버 터미널
gildong@ip-172-31-39-132:~$ cd ~/my_project/src
gildong@ip-172-31-39-132:~/my_project/src$ claude

Claude Code 안에서 자연어로 요청합니다.

개발 서버 띄워줘

실행이 끝나면 화면에 개발 서버 주소(https://my-project-dev.popupstudio.ai 형태)가 표시됩니다. 그 주소를 브라우저에서 엽니다. 화면이 뜨면 개발 서버가 켜진 것입니다.

• 핵심 정리: cd ~/my_project/src 에서 claude 를 켜 '개발 서버 띄워줘'로 개발 서버를 켜고, 표시된 주소로 접속했습니다.
• 주의 사항: Claude Code 는 항상 프로젝트 안(~/my_project/src) 에서 켜세요. 다른 폴더에서 켜면 엉뚱한 곳이 잡힙니다. 앞에 cd 를 먼저 치는 이유입니다.
• 다음 시간: Claude Code 로 기능 개발.

이번 강의부터 예시로 기능 하나를 만들어 봅니다: 긴 글을 붙여넣으면 3줄로 짧게 요약해 주는 페이지입니다. 이걸 예제 삼아 "기능을 만드는 과정"을 익힙니다(실무에서 만들 기능도 방식은 똑같습니다). 다음 강의들에서 이 페이지에 계속 살을 붙입니다.

기능은 코드를 직접 짜지 않고 말로 설명하면 됩니다. 무엇을 만들지 설명하고 중간에 나오는 확인 질문에 답하면, 나머지(코드 작성·검증·합치기)는 develop 워크플로우가 알아서 진행합니다. 개발 요청이면 이 워크플로우가 자동으로 적용되니, 무엇을 만들지 말하기만 하면 됩니다.

프로젝트 안(src)에서 Claude Code 를 켭니다. my_project 는 본인 프로젝트 폴더 이름입니다.

# 🖥️ 서버 터미널
gildong@ip-172-31-39-132:~$ cd ~/my_project/src
gildong@ip-172-31-39-132:~/my_project/src$ claude

Claude Code 안에서 위 요약 페이지를 만들어 달라고 자연어로 요청합니다. 기능을 담을 앱 이름과 만들 것을 함께 적습니다.

summarizer 앱에 글을 입력받아 3줄로 요약해 보여주는 페이지 만들어줘

• summarizer = 앱 이름(이 기능이 담길 곳).
• 뒤 문장 = 만들 것 설명.

develop 워크플로우는 진행 중에 중간중간 멈추고 물어봅니다. 화면에 보여 주는 내용을 읽고 답하면 됩니다. 그중 꼭 확인할 두 가지는 이것입니다.

1. 계획: "이런 파일을 이렇게 바꾸겠다"를 보여 줍니다. 괜찮으면 진행을, 바꿀 게 있으면 무엇을 바꿀지 적습니다.
2. 스펙: "이렇게 동작해야 한다"를 정리해 보여 줍니다. 괜찮으면 진행을 답합니다.

이 확인들에 답하면 코드 작성, 자동 검증, 합치기까지 진행됩니다. 끝나면 개발 서버 주소에서 만든 화면을 확인합니다.

• 핵심 정리: {앱 이름} 에 {만들 것} 만들어줘 로 요청하고, 계획과 스펙 확인 질문에 답해 기능 하나를 만들었습니다.
• 주의 사항: 설명이 막연하면("좋은 요약 앱 만들어줘") 엉뚱하게 나옵니다. 무엇을 입력하면 화면에 무엇이 보이는지를 한 문장씩 적으면 정확해집니다. 한 번에 큰 걸 시키지 말고 한 가지 일부터 하세요.
• 다음 시간: AI API 키 발급.

AI 를 쓰려면 API 키(AI 를 쓸 수 있게 해 주는 비밀 열쇠)가 필요합니다. 이 키는 회사 도구 keyforge 에서 직접 발급받습니다. 발급받은 키를 복사해서, 다음 강의에서 쓰도록 프로젝트의 .env 에 넣는 것까지 합니다.

브라우저에서 아래 주소로 들어갑니다.

https://keyforge-dev.popupstudio.ai

각 그림에서 빨간 네모가 누를 곳입니다.

Google 계정으로 계속하기 를 눌러, 회사에서 안내한 Google 계정으로 로그인합니다. (다음 화면에서 회사 계정을 고르고 허용을 누르면 됩니다.)

로그인하면 API 키 관리 화면이 나옵니다. 오른쪽 위의 +새 키 발급 을 누릅니다.

작은 창이 열립니다. 여기서 세 가지를 합니다.

① 발급할 AI 플랫폼을 체크합니다. 지금은 OpenAI 와 LangSmith 두 개만 체크하세요. (OpenAI 는 AI 처리에, LangSmith 는 AI 가 잘 도는지 기록·확인하는 데 씁니다.) 아래 그림에는 네 개가 다 체크돼 있는데, 그건 나중에 여러 플랫폼이 필요할 때의 예시입니다. 앞으로는 그림처럼 필요한 것을 골라 체크하면 되고, 지금은 두 개면 충분합니다.

② 프로젝트 이름을 정해 입력합니다. (영문·숫자와 _ - 만 됩니다. 예: my_project1)

③ 아래쪽 발급 을 누릅니다.

발급되면 아래 목록에 체크한 플랫폼마다 한 줄씩 키가 나타납니다. (그림은 네 개를 다 발급한 예시라 Anthropic 은 승인이 필요해 대기 로, 나머지는 활성 으로 보입니다. 지금 두 개만 체크했다면 OpenAI·LangSmith 두 줄만 나옵니다.) 활성 키 줄에는 아래 세 가지 버튼이 있습니다(그림의 빨간 네모).

• 복사: 그 줄의 키를 복사합니다.
• 값 보기: 가려진 키 전체를 화면에 보여 줍니다(확인용, 눌러도 됩니다).
• 폐기: 키를 못 쓰게 만듭니다(무효화). 누르지 마세요.

발급한 두 키를 다음 단계에서 .env 에 넣습니다. OpenAI 줄의 복사 와 LangSmith 줄의 복사 를 씁니다. 한 번에 하나씩 복사해서 넣고, 다시 와서 다음 키를 복사하면 됩니다.

복사한 키를 프로젝트의 .env 에 붙여넣습니다. (VS Code 에서 합니다.)

1. VS Code 에서 프로젝트를 엽니다: File(파일) → Open Folder(폴더 열기) 로 홈 폴더 안의 my_project 를 선택합니다.
2. 왼쪽 파일 목록에서 src 폴더를 펼치고 .env 를 클릭해 엽니다.
3. .env 안에는 아래 같은 줄들이 있습니다. 각 키를 ← 로 표시한 줄의 = 바로 뒤에 붙여넣습니다. (앞뒤 줄을 보고 위치를 찾으세요. 발급 안 한 플랫폼 줄은 비워 둡니다.)

# OpenAI API Settings
OPENAI_API_KEY=              # ← OpenAI 키를 여기에 (실습 필수)
OPENAI_MODEL=gpt-4o-mini
OPENAI_TEMPERATURE=0.1

# Anthropic (Claude) Configuration
ANTHROPIC_API_KEY=           # ← Anthropic 키를 여기에 (관리자 승인 후)
ANTHROPIC_MODEL=claude-sonnet-4-20250514

# Google Gemini Configuration
GOOGLE_API_KEY=              # ← Gemini 키를 여기에
GOOGLE_MODEL=gemini-2.5-flash

# LangSmith (optional)
LANGCHAIN_ENDPOINT=https://api.smith.langchain.com
LANGCHAIN_API_KEY=           # ← LangSmith 키를 여기에
LANGCHAIN_PROJECT=my_project

1. 저장합니다(Windows Ctrl+S / macOS ⌘+S).

키는 .env 에만 두고 코드에 직접 쓰지 않습니다. .env 는 GitHub 에 올라가지 않아 키가 새지 않습니다.

• 핵심 정리: keyforge 에서 OpenAI · LangSmith 키를 발급받아, src/.env 의 OPENAI_API_KEY 와 LANGCHAIN_API_KEY 에 각각 넣었습니다.
• 주의 사항: 키를 .env 에 안 넣거나 앞뒤에 빈칸·오타가 있으면 다음 강의에서 AI 호출이 실패합니다.
• 다음 시간: 만든 기능에 AI Agent 연동.

앞 강의(기능 개발)에서 "글을 넣으면 3줄로 요약해 주는 페이지"의 겉모습을 만들었습니다. 하지만 요약처럼 '생각'이 필요한 일은 AI(LLM) 가 해야 하는데, 아직 그 AI 를 안 붙였습니다. 그래서 지금 페이지에 글을 넣어도 진짜 요약은 안 나옵니다.

이번 강의에서 그 페이지에 진짜 AI 요약을 붙입니다.

프로젝트 안(src)에서 Claude Code 를 켜고, 앞 강의에서 만든 요약 페이지가 진짜 요약을 하도록 요청합니다. 앞 강의에서 OpenAI(ChatGPT 를 만든 곳) 키를 넣었으니, OpenAI 로 하라고 말합니다.

# 🖥️ 서버 터미널
gildong@ip-172-31-39-132:~$ cd ~/my_project/src
gildong@ip-172-31-39-132:~/my_project/src$ claude

요약 페이지의 요약을 OpenAI 로 처리해줘

• 어려운 함수 이름 같은 건 외울 필요 없습니다. 프로젝트에는 "AI 는 항상 회사 공용 코드로 부른다"는 규칙이 이미 들어 있어서, 이렇게 말만 하면 Claude Code 가 알아서 처리합니다.
• 그러면 페이지에 넣은 글을 AI 에게 보내 요약을 받아 화면에 보여주게 코드가 바뀝니다. 이때 앞 강의에서 .env 에 넣은 OpenAI 키로 AI 를 부릅니다.

진짜로 되는지 눈으로 봅니다.

1. 개발 서버 주소(https://my-project-dev.popupstudio.ai)를 브라우저에서 엽니다. (안 떠 있으면 개발 서버 실행 강의대로 다시 켭니다.)
2. 요약 페이지에 아무 긴 글이나 붙여넣습니다.
3. 3줄 요약이 나오면 성공입니다.

• 핵심 정리: "요약 페이지의 요약을 OpenAI 로 처리해줘"라고 요청해, 껍데기였던 요약 페이지에 진짜 AI 요약을 붙이고 브라우저에서 확인했습니다.
• 주의 사항: 요약이 안 나오면 앞 강의(AI API 키 발급)에서 OpenAI 키를 src/.env 에 제대로 넣었는지 확인합니다. 키가 없거나 오타가 있으면 AI 가 동작하지 않습니다.
• 다음 시간: GitHub 업로드.

앞에서 개발한 변경은 develop 이 자동으로 저장(커밋) 해 두지만, 아직 내 서버 안에만 있습니다. 이걸 GitHub 에 올려야(push) 다른 사람과 공유되고, 다음 단계인 배포도 할 수 있습니다.

프로젝트 안(src)에서 Claude Code 를 켜고, 올려 달라고 요청합니다. my_project 는 본인 프로젝트 폴더 이름입니다.

# 🖥️ 서버 터미널
gildong@ip-172-31-39-132:~$ cd ~/my_project/src
gildong@ip-172-31-39-132:~/my_project/src$ claude

지금까지 변경한 내용을 깃허브에 올려줘

Claude Code 가 git push 로 변경을 GitHub 에 올립니다.

올리고 나면 GitHub 저장소(https://github.com/popupstudio-ai/my_project)의 최근 변경 목록에 방금 올린 내용이 보입니다.

• 핵심 정리: 프로젝트 세션에서 "깃허브에 올려줘"로 개발한 변경을 GitHub 에 올렸습니다(git push).
• 주의 사항: 배포는 GitHub 에 올린 변경만 반영합니다. 개발만 하고 올리지 않으면 배포해도 바뀌지 않습니다.
• 다음 시간: 올린 변경을 프로덕션에 배포.