CLAUDE CODE LEARNING PORTAL

비즈니스 의도가 Agentic AI 스킬을 주도한다

의도기반 개발(SDD)은 '어떻게 코딩할지'가 아닌 '무엇을 만들고 싶은지'에 집중하는 개발 방식입니다.
개발자가 아니어도 비즈니스 목표와 요구사항을 명확히 설명하면, AI가 이를 이해하고 실제 동작하는 코드로 구현해줍니다.
기존 개발이 'How(어떻게)'에 집중했다면, SDD는 'What(무엇을)'에 집중합니다.
여러분의 아이디어와 의도가 곧 소프트웨어가 됩니다.

SCROLL
01 _ ARCHITECTURE

서버 아키텍처 이해하기

현재 접속한 서버가 어떻게 구성되어 있는지 이해하면, Claude Code로 작업할 때 더 효과적으로 의사소통할 수 있습니다.

네트워크 흐름도
CLIENT
웹 브라우저
p7.sumzip.com
PROXY
Nginx
192.168.0.91:443
BACKEND
LLM Server
192.168.0.19:9507

구성 요소 설명

  • 도메인 (p7.sumzip.com)
    인터넷에서 접속할 수 있는 주소입니다. HTTPS로 암호화된 안전한 연결을 제공합니다.
  • Nginx 리버스 프록시
    외부 요청을 받아 내부 서버로 전달하는 중계 역할을 합니다. SSL 인증서 관리와 로드밸런싱을 담당합니다.
  • LLM Server (192.168.0.19)
    실제 웹 서비스가 실행되는 서버입니다. Pioneer7 팀은 포트 9501을 사용합니다.

팀별 포트 할당

PORT ALLOCATION
Pioneer7    p7.sumzip.com    :9507
Pioneer2    p2.sumzip.com    :9502
Pioneer3    p3.sumzip.com    :9503
Pioneer4    p4.sumzip.com    :9504
Pioneer5    p5.sumzip.com    :9505

중요: 각 팀은 할당된 포트에서만 서비스를 실행해야 합니다. 다른 포트를 사용하면 도메인 연결이 작동하지 않습니다.

02 _ TERMINAL ACCESS

터미널로 접속하기

Claude Code는 터미널(명령줄 인터페이스)에서 실행됩니다. SSH를 통해 LLM 서버에 접속하는 방법을 알아봅니다.

01

터미널 열기

Mac에서는 Spotlight(Cmd+Space)에서 "Terminal"을 검색합니다. Windows에서는 PowerShell 또는 Windows Terminal을 사용합니다.

02

SSH 접속

강사가 제공한 계정 정보로 LLM 서버에 접속합니다. 접속 명령어는 아래 코드 블록을 참조하세요.

03

작업 디렉토리 이동

접속 후 프로젝트 디렉토리로 이동합니다. 각 팀의 작업 공간이 미리 생성되어 있습니다.

TERMINAL COMMANDS
# Step 1: SSH로 LLM 서버 접속 (외부 도메인 사용)
ssh -p 2225 pioneer7@mis.iptime.org

# Step 2: 비밀번호 입력 (강사에게 문의)
# 비밀번호는 입력해도 화면에 표시되지 않습니다 (보안)

# Step 3: 프로젝트 디렉토리로 이동
cd ~/projects

# Step 4: 현재 위치 확인
pwd
/home/pioneer7/projects

# Step 5: 디렉토리 내용 확인
ls -la

외부 접속 정보: 학습 환경에서는 내부 IP가 아닌 외부 도메인(mis.iptime.org)으로 접속해야 합니다. SSH 포트는 서버마다 다르니 주의하세요.

서버별 SSH 접속 정보

SERVER SSH ACCESS
# LLM Server (주 개발 서버)
ssh -p 2225 pioneer7@mis.iptime.org


# Mini_A Server (경량 서버)
ssh -p 2227 pioneer7@mis.iptime.org
03 _ PROFILE SETUP

프로필로 Claude Code 시작하기

강사가 미리 설정해둔 프로필을 사용하면 최적화된 환경에서 Claude Code를 바로 시작할 수 있습니다.

프로필이란?

프로필은 Claude Code 계정별로 설정해둔 실행 환경입니다. 강사가 사전에 구성한 프로필을 사용하면 최적화된 설정으로 바로 작업을 시작할 수 있습니다.

할당된 프로필 목록

cm 강사용 프로필
cw1 학습자 1
cw2 학습자 2
cw3 학습자 3

강사가 지정한 프로필을 사용하세요.

  • 계정별 독립 환경
    각 프로필은 독립된 설정과 API 키를 가집니다.
  • 사전 구성된 환경
    강사가 검증한 최적 설정이 적용되어 있습니다.
  • 프로젝트 컨텍스트
    프로젝트 구조와 목표가 미리 설정되어 있습니다.
CLAUDE CODE 접속 방법
# ═══════════════════════════════════════════
# 방법 1: 기본 Claude Code 실행
# ═══════════════════════════════════════════
claude

# 권한 확인 생략 모드 (빠른 실행)
claude --dangerously-skip-permissions

# ═══════════════════════════════════════════
# 방법 2: 프로필로 실행 (강사 지정)
# ═══════════════════════════════════════════
cw1                         # 학습자 1 프로필
cw1 --dangerously-skip-permissions

cw2                         # 학습자 2 프로필
cw2 --dangerously-skip-permissions

cw3                         # 학습자 3 프로필
cw3 --dangerously-skip-permissions

# ═══════════════════════════════════════════
# 강사가 지정한 프로필을 사용하세요!
# ═══════════════════════════════════════════

CLAUDE.md 파일의 역할

프로젝트 폴더에 CLAUDE.md 파일이 있으면 Claude Code가 자동으로 프로젝트 컨텍스트를 인식합니다.

  • 프로젝트 구조 및 규칙 정의
  • 코딩 스타일 및 컨벤션 설정
  • 자주 사용하는 명령어 단축
  • 팀/프로젝트별 맞춤 지시사항
04 _ VS CODE

VS Code로 프로젝트 접근하기

Visual Studio Code의 Remote-SSH 확장을 사용하면 그래픽 환경에서 편리하게 코드를 편집할 수 있습니다.

01

확장 프로그램 설치

VS Code 확장 탭에서 "Remote - SSH"를 검색하여 설치합니다. Microsoft에서 제공하는 공식 확장입니다.

02

원격 호스트 연결

Cmd/Ctrl+Shift+P로 명령 팔레트를 열고 "Remote-SSH: Connect to Host"를 선택합니다.

03

프로젝트 폴더 열기

연결 후 File > Open Folder로 프로젝트 디렉토리를 엽니다. 이제 로컬처럼 편집할 수 있습니다.

VS CODE REMOTE-SSH 접속 방법
# VS Code Remote-SSH 접속 방법 (아이디/비밀번호 인증)
# 사전 작업: VS Code에서 "Remote - SSH" 확장 설치 필요

# 1. VS Code 명령 팔레트 열기
Cmd + Shift + P  (macOS)
Ctrl + Shift + P (Windows/Linux)

# 2. Remote-SSH 명령 선택
"Remote-SSH: Connect to Host..." 입력 후 선택

# 3. 새 호스트 추가 선택
"+ Add New SSH Host..." 클릭

# 4. SSH 호스트 입력 (아래 중 사용할 서버 선택)
pioneer7@mis.iptime.org:2225  # LLM Server (주 개발 서버)

# 5. 비밀번호 입력
# 연결 시 비밀번호 입력창이 나타나면
# 강사에게 부여받은 비밀번호를 입력합니다

# 6. 작업 폴더 열기
# 연결 후 File > Open Folder > /Users/pioneer7/ 선택
고급: SSH Config 설정 (선택사항) - 자주 접속할 경우 편리합니다
SSH CONFIG (~/.ssh/config)
# ~/.ssh/config 파일에 아래 내용을 추가하면
# VS Code에서 호스트 이름만으로 바로 접속할 수 있습니다
# (SSH 키 설정 없이 비밀번호 인증으로도 작동합니다)

# LLM Server (주 개발 서버) - 외부 접속용
Host llm-pioneer7
    HostName mis.iptime.org
    User pioneer7
    Port 2225


# Mini_A Server (경량 서버)
Host mini-pioneer7
    HostName mis.iptime.org
    User pioneer7
    Port 2227

# 설정 후 접속 방법:
# VS Code 명령 팔레트에서 "Remote-SSH: Connect to Host"
# → 목록에서 llm-pioneer7 등 선택
# → 비밀번호 입력 후 연결 완료

VS Code + Claude Code 통합: VS Code에서 코드를 편집하면서, 터미널 창에서 Claude Code를 실행하면 시각적 편집과 AI 지원을 동시에 활용할 수 있습니다.

05 _ SPECKIT FRAMEWORK

Speckit으로 의도 전달하기

Speckit은 Claude Code에게 개발 의도를 체계적으로 전달하는 프레임워크입니다. 명확한 단계를 따르면 원하는 결과를 더 정확하게 얻을 수 있습니다.

01
SPECIFY

요구사항 명세화

만들고자 하는 기능이나 서비스를 자연어로 상세히 설명합니다. 사용자 스토리, 기능 요구사항, 제약 조건 등을 포함합니다. Claude Code가 이해할 수 있도록 구체적으로 작성하는 것이 핵심입니다.

/specify
02
CLARIFY

불명확한 부분 명확화

Claude Code가 질문을 통해 불명확한 요구사항을 명확히 합니다. 기술적 선택, 우선순위, 제약 조건 등에 대한 질의응답이 이루어집니다. 이 과정에서 요구사항이 더욱 구체화됩니다.

/clarify
03
PLAN

구현 계획 수립

명세를 바탕으로 구체적인 구현 계획을 세웁니다. 기술 스택 선정, 아키텍처 설계, 파일 구조 등이 결정됩니다. 계획을 검토하고 필요시 수정할 수 있습니다.

/plan
04
TASKS

작업 목록 생성

계획을 실행 가능한 단위 작업으로 분해합니다. 각 작업의 우선순위, 의존관계, 예상 난이도가 정리됩니다. 체계적인 구현을 위한 로드맵이 완성됩니다.

/tasks
05
IMPLEMENT

단계별 구현

작업 목록에 따라 순차적으로 코드를 구현합니다. 각 단계마다 결과를 확인하고 필요시 수정합니다. 구현이 완료되면 테스트와 검증을 진행합니다.

/implement

핵심 원칙: Speckit의 각 단계를 건너뛰지 마세요. 명확한 명세 없이 바로 구현에 들어가면 원하는 결과를 얻기 어렵습니다. 각 단계에서 충분히 논의하고 확인한 후 다음 단계로 진행하는 것이 효과적입니다.

06 _ TECH STACKS

웹 개발 스택 예시

웹 서비스 개발에 사용할 수 있는 대표적인 기술 조합입니다. 각 스택은 특성과 용도가 다르므로 프로젝트에 맞게 선택하세요.

STACK A

React + FastAPI

현대적인 풀스택 조합

React 18 TypeScript FastAPI Python 3.11 PostgreSQL

React로 동적인 사용자 인터페이스를 만들고, FastAPI로 고성능 백엔드 API를 구축합니다. 비동기 처리와 자동 문서화가 특징입니다. 현대적인 웹 애플리케이션에 적합합니다.

STACK B

Django

배터리 포함 프레임워크

Django 5.0 Python 3.11 Django REST SQLite/PostgreSQL Tailwind CSS

Django는 관리자 패널, 인증, ORM 등 웹 개발에 필요한 모든 것이 내장되어 있습니다. 빠른 프로토타이핑과 안정적인 운영이 가능하며, 콘텐츠 관리 시스템에 특히 적합합니다.

STACK C

TypeScript Full-Stack

단일 언어 개발 환경

Next.js 14 TypeScript Prisma ORM tRPC Tailwind CSS

프론트엔드와 백엔드 모두 TypeScript로 개발합니다. 타입 안전성을 유지하면서 빠르게 개발할 수 있습니다. 서버 사이드 렌더링과 API 라우트를 하나의 프로젝트에서 관리합니다.

스택 선택 기준

  • 학습 목적이라면 Django를 추천합니다. 구조가 명확하고 문서화가 잘 되어 있습니다.
  • 인터랙티브 UI가 중요하다면 React + FastAPI 조합이 적합합니다. 복잡한 상태 관리가 필요한 경우에 유리합니다.
  • 빠른 개발 속도를 원한다면 TypeScript 풀스택이 좋습니다. 언어 전환 없이 전체 스택을 다룰 수 있습니다.
QUICK START EXAMPLE
# Stack A: React + FastAPI
npx create-react-app frontend --template typescript
pip install fastapi uvicorn

# Stack B: Django
pip install django djangorestframework
django-admin startproject mysite

# Stack C: TypeScript Full-Stack
npx create-next-app@latest myapp --typescript
npm install prisma @prisma/client
07 _ SERVICE FRAMEWORK

서비스 프레임워크 및 포트 관리

현재 Info 페이지의 서비스 구조와 포트 인수인계 방법을 설명합니다. 팀 프로젝트 시작 시 기존 서비스를 중지하고 새 프로젝트로 전환하는 과정입니다.

01
현재 서비스 구조

이 Info 페이지는 Python HTTP Server를 사용하여 서비스됩니다.

프레임워크 Python 3 HTTP Server
포트 9501
경로 /Users/pioneer7/info/
도메인 https://p7.sumzip.com
02
서비스 명령어

Python HTTP Server 시작 및 중지 방법

SERVICE COMMANDS
# 서비스 시작
cd /Users/pioneer7/info
nohup python3 -m http.server 9501 --bind 0.0.0.0 > server.log 2>&1 &

# 상태 확인
lsof -i :9507

# 서비스 중지
pkill -f "http.server 9501"
03
포트 인수인계: Info → 팀 프로젝트 전환

팀 프로젝트 개발 시작 시, 현재 Info 서비스를 중지하고 팀 프로젝트가 동일한 포트(9501)를 사용하도록 전환합니다. https://p7.sumzip.com 도메인으로 바로 서비스됩니다.

PORT HANDOVER PROCEDURE
# Step 1: 기존 Info 서비스 중지
lsof -i :9507                           # PID 확인
pkill -f "http.server 9501"              # 프로세스 종료

# Step 2: 팀 프로젝트 디렉토리 생성
cd ~ && mkdir -p my-project && cd my-project

# Step 3: 팀 프로젝트 서비스 시작 (4가지 방법)
# A: Python HTTP Server
nohup python3 -m http.server 9501 --bind 0.0.0.0 > server.log 2>&1 &

# B: React           PORT=9501 npm start
# C: FastAPI         uvicorn main:app --host 0.0.0.0 --port 9501
# D: Django          python manage.py runserver 0.0.0.0:9507

# Step 4: 서비스 확인
lsof -i :9507   # https://p7.sumzip.com 접속 테스트
04
포트 할당표

각 팀별 할당된 포트 및 도메인

포트 도메인
Pioneer1 9501 p1.sumzip.com
Pioneer2 9502 p2.sumzip.com
Pioneer3 9503 p3.sumzip.com
Pioneer4 9504 p4.sumzip.com
Pioneer5 9505 p5.sumzip.com
Pioneer6 9506 p6.sumzip.com
Pioneer7 9507 p7.sumzip.com
Pioneer8 9508 p8.sumzip.com
Pioneer9 9509 p9.sumzip.com
Pioneer10 9510 p10.sumzip.com
05
주의사항
포트 충돌 방지

새 서비스 시작 전 반드시 기존 서비스를 먼저 중지하세요. 같은 포트에 두 서비스가 동시에 바인딩될 수 없습니다.

바인딩 주소

--bind 0.0.0.0 또는 --host 0.0.0.0 옵션을 사용해야 외부 접속 가능합니다.

Info 서비스 복원

팀 프로젝트 종료 후: cd /Users/pioneer7/info && python3 -m http.server 9501 --bind 0.0.0.0 &

06
DB 할당표

MariaDB 접속 정보 | 접속주소: mis.iptime.org:13306

계정 데이터베이스 패스워드
Pioneer1 pioneer1 pioneer1 pioneer26
Pioneer2 pioneer2 pioneer2 pioneer26
Pioneer3 pioneer3 pioneer3 pioneer26
Pioneer4 pioneer4 pioneer4 pioneer26
Pioneer5 pioneer5 pioneer5 pioneer26
Pioneer6 pioneer6 pioneer6 pioneer26
Pioneer7 pioneer7 pioneer7 pioneer26
Pioneer8 pioneer8 pioneer8 pioneer26
Pioneer9 pioneer9 pioneer9 pioneer26
Pioneer10 pioneer10 pioneer10 pioneer26