5회차 IT 기초 — 비개발자를 위한 넓고 얕은 지식 — AI 실전 강의

🌐 인터넷 동작	IP·DNS·HTTP — 주소 입력하면 페이지가 뜨는 원리
🖥️ 웹 기초	클라이언트/서버, HTML·CSS·JS, 브라우저 개발자 도구
🗄️ DB 기초	테이블·행·열·기본키, SQL vs NoSQL 감 잡기
🔗 API·웹훅	REST API, JSON, 웹훅 — 앱끼리 대화시키는 법
🌿 Git·GitHub	버전관리, 커밋·브랜치·PR, GitHub 가입까지
☁️ 클라우드·배포	호스팅·도메인·DNS, Vercel·Cloudflare 한눈에
🔒 보안 기초	HTTPS, 인증/인가, 비밀번호·토큰 관리

중급반의 출발선 — 자동화·앱 제작에 꼭 필요한 IT 기본기를 '넓고 얕게' 잡습니다. 외울 필요 없습니다. 6회차(Make)·7~8회차(Claude Code) 실습 중 '이게 뭔 소리지?' 싶을 때 다시 펴 볼 수 있도록 용어와 흐름을 정리하는 게 목표입니다. AI 시대엔 모든 개념을 모를수록 'AI에게 정확히 물어보는 능력'이 곧 실력입니다.

🌐 인터넷은 어떻게 작동하나 — '주소 → 페이지'의 5단계

google.com을 주소창에 치고 Enter를 누르면, 1초도 안 되는 사이에 다음 일이 일어납니다.

도메인 → IP 변환 (DNS) — 'google.com'을 '142.250.x.x' 같은 숫자 주소로 바꿈
내 컴퓨터가 그 IP의 서버에 'HTTP 요청' (GET / 페이지 줘)
서버가 HTML 응답 (HTTP 응답)
브라우저가 HTML 파싱 → 안의 CSS·JS·이미지 추가 요청
최종 화면 그리기 (렌더링)

IP — 인터넷상의 집 주소 (숫자). IPv4: 142.250.x.x, IPv6: 더 긴 형식
도메인 — 사람이 외우기 쉬운 별명 (google.com)
DNS — '별명 → 주소' 전화번호부
HTTP/HTTPS — 약속된 대화 규칙. HTTPS는 암호화된 HTTP
포트 — 같은 IP의 어느 '문'으로 들어갈지 (웹은 보통 80/443)

🖥️ 웹 — 클라이언트와 서버

브라우저(클라이언트)가 서버에 요청하고 응답을 받는 구조. 우리가 만들 앱은 거의 다 이 형태입니다.

클라이언트 — 내 브라우저/앱 (요청하는 쪽). HTML·CSS·JS를 받아 화면을 그림
서버 — 인터넷 어딘가의 컴퓨터 (응답하는 쪽). DB와 대화하고 결과를 돌려줌
프론트엔드 — 클라이언트에서 보이는 부분 (디자인·버튼·애니메이션)
백엔드 — 서버에서 도는 로직 (회원가입·결제·DB)
풀스택 — 둘 다 만지는 사람
웹앱 — 브라우저에서 도는 앱 (설치 없음). 우리가 만들 것
네이티브 앱 — 스토어에서 설치하는 앱 (iOS/Android)

📄 HTML · CSS · JS — 웹 3대 언어 (개념만)

외울 필요 없습니다. 'AI가 이 셋을 짜준다'는 사실만 알면 됩니다.

HTML — 구조·내용 (제목·문단·이미지·버튼이 어디에 있는지)
CSS — 디자인 (색·크기·여백·애니메이션)
JS(JavaScript) — 동작 (버튼 누르면 뭐가 일어나는지)
비유 — HTML은 뼈대, CSS는 옷·화장, JS는 움직임

🔧 브라우저 개발자 도구 — F12 한 번만 눌러도 다릅니다

크롬·엣지에서 F12 → 'Elements/Console/Network' 탭만 알면 디버깅의 80%가 됩니다.

Elements — 현재 페이지의 HTML/CSS 구조 보기·수정
Console — 에러 메시지·JS 실행 결과. 8회차에서 빨간 에러를 복사해 Claude에 던질 곳
Network — 어떤 요청이 오갔는지 (API 호출 디버깅)
Application — 쿠키·localStorage 등 저장된 데이터 확인

📦 JSON — 인터넷의 공용 데이터 포맷

앱끼리 대화할 때 거의 모든 데이터가 JSON으로 오갑니다. '키:값' 구조만 알면 됩니다.

{
  "name": "홍길동",
  "age": 30,
  "email": "hong@example.com",
  "hobbies": ["커피", "독서", "코딩"],
  "address": {
    "city": "서울",
    "district": "강남구"
  }
}

객체 — { 키:값, 키:값 } (중괄호)
배열 — [ 값, 값, 값 ] (대괄호)
값 — 문자열(""), 숫자, true/false, null, 객체, 배열
중첩 — 객체 안에 객체·배열을 마음대로

🗄️ 데이터베이스 — '구조화된 엑셀'

엑셀처럼 행과 열이지만, 동시에 여러 사람이 접근하고 빠르게 검색되도록 설계된 것이 DB.

테이블 — 엑셀의 시트와 비슷. '사용자' 테이블, '주문' 테이블
행(Row) — 한 건의 데이터 (사용자 한 명)
열(Column) — 항목 (이름·이메일·가입일)
기본키(Primary Key) — 각 행을 구분하는 고유 ID — 사용자번호 같은 것
외래키(Foreign Key) — 다른 테이블의 기본키를 참조 (주문 → 사용자 연결)
인덱스 — 빠른 검색을 위한 색인. 책의 목차 같은 것

🆚 SQL vs NoSQL — 두 종류의 DB

SQL — 정해진 표 구조 (MySQL, PostgreSQL, SQLite). 관계·집계 강함
NoSQL — 유연한 문서 구조 (MongoDB, Firestore). JSON 그대로 저장, 빠른 변경
선택 — 정형 데이터(주문·결제)는 SQL, 비정형(채팅·로그)은 NoSQL
초보자 첫 DB — Supabase(PostgreSQL 기반) 또는 Firebase(NoSQL) — 둘 다 무료 시작

🔗 API — 앱끼리 대화하는 표준

앱 A가 앱 B에게 '이거 해줘'라고 부탁하는 방법. 거의 모든 인터넷 서비스가 API를 제공합니다.

REST API — 가장 흔한 형태. URL + HTTP 메서드(GET/POST/PUT/DELETE)로 작업 지시
GET — 데이터 읽기 (예: GET /users → 사용자 목록)
POST — 새로 만들기 (예: POST /users → 사용자 추가)
PUT/PATCH — 수정
DELETE — 삭제
응답 — 보통 JSON, HTTP 상태코드(200 성공·404 없음·500 서버 오류)

# 예 — 날씨 API 호출
GET https://api.open-meteo.com/v1/forecast
  ?latitude=37.57
  &longitude=126.98
  &current=temperature_2m

# 응답 (JSON)
{
  "current": {
    "temperature_2m": 18.3,
    "time": "2026-05-26T09:00"
  }
}

📡 웹훅 — '저쪽이 나를 부르는 것'

API는 내가 묻는 것, 웹훅은 저쪽이 알림을 보내는 것. 방향이 반대입니다.

API — 내가 다른 서비스에 '데이터 줘' 요청 (전화 거는 것)
웹훅 — 이벤트가 생기면 그쪽이 내 URL로 알려줌 (전화 오는 것)
예시 — 결제 발생 시 토스가 내 서버로 'POST 알림'을 보냄
Make·Zapier의 트리거 모듈이 곧 웹훅 받는 곳

🌿 Git — '시간 여행 가능한 저장'

파일의 모든 변경을 기록해 언제든 되돌릴 수 있게 해주는 도구. 모든 협업의 표준.

리포지토리(Repo) — 프로젝트 하나의 저장소
커밋(Commit) — '여기까지 진행' 도장. 메시지와 함께 저장
브랜치(Branch) — 평행 우주. 본 작업에 영향 없이 실험
병합(Merge) — 평행 우주를 본선에 합치기
PR(Pull Request) — '내 브랜치를 본선에 합쳐도 될까요?' 리뷰 요청
원격(Remote) — 인터넷에 올린 사본 (보통 GitHub)
푸시/풀(Push/Pull) — 내 PC ↔ 원격 동기화

🐙 GitHub 가입 & 첫 리포 만들기

github.com 접속 → Sign up (이메일·비밀번호·사용자명)
사용자명은 신중히 — URL에 들어가고 바꾸기 어려움
이메일 인증 → 무료 플랜 선택
New repository → 이름 입력 → Create
8회차에서 Claude Code가 이 리포에 자동으로 코드를 올립니다

☁️ 호스팅·도메인·DNS — '내 앱을 인터넷에 두는 법'

호스팅 — 서버를 빌리는 것. Vercel·Netlify·Cloudflare Pages가 대표 (무료 시작)
도메인 — 사람이 외울 주소 (mybrand.com). 가비아·Cloudflare·Namecheap에서 구매(연 $10~)
DNS 설정 — 도메인을 호스팅에 연결. 호스팅 업체가 시키는 대로 'A 레코드'·'CNAME' 추가
SSL 인증서 — HTTPS로 만들어 주는 자물쇠. Vercel/Cloudflare가 자동 발급(무료)

☁️ 클라우드 — 큰 그림만

AWS·GCP·Azure가 클라우드 빅3. 우리는 직접 만지지 않습니다. 'Vercel·Cloudflare 같은 도구가 안에서 이것들을 알아서 써준다'만 알면 됩니다.

Compute — 서버 빌리기 (AWS EC2, Cloud Run)
Storage — 파일 저장 (AWS S3, Cloudflare R2)
Database — 관리형 DB (Supabase, Firebase, RDS)
CDN — 전 세계 캐시로 빠르게 (Cloudflare, Vercel Edge)

🔒 보안 — 비전공자도 꼭 알아야 할 것

HTTPS — URL이 https://로 시작해야 안전. http://는 도청 가능
인증(Authentication) — '너 누구야' 확인 (로그인)
인가(Authorization) — '너 이거 해도 돼?' 권한 체크
비밀번호 — 절대 코드에 직접 적지 말기 (환경 변수로)
API 키 — 외부 서비스 쓰는 열쇠. 깃허브 공개 리포에 올리면 즉시 도용됨
환경 변수(.env) — 비밀 값을 코드 밖에 두는 표준 방법. .gitignore에 .env 꼭 추가
2FA — 모든 중요 계정에 2단계 인증 (구글·깃허브·결제)

🛠️ 알아두면 좋은 IT 용어 (사전식)

프레임워크 — 미리 짜둔 코드 뼈대 (React·Next.js·Vue·Django)
라이브러리 — 가져다 쓰는 코드 도구 모음
패키지 매니저 — 라이브러리 설치 관리 (npm·pnpm·pip)
CI/CD — 코드 푸시하면 자동으로 빌드·배포 (GitHub Actions·Vercel 자동 배포)
SSH — 멀리 있는 서버에 터미널로 안전하게 원격 접속하는 방법 (7회차에서 등장)
오픈소스 — 코드가 공개된 무료 소프트웨어 (대부분 우리가 쓸 도구)
MIT 라이선스 — 가장 자유로운 오픈소스 라이선스
버그·이슈·트래커 — GitHub Issues에 버그 기록
스택 — 한 서비스가 쓰는 기술 묶음 ('Next.js + Supabase + Vercel')

📌 5회차 핵심

인터넷은 '주소 → DNS → 서버 → HTML 응답'의 흐름.
클라이언트·서버·JSON은 모든 웹앱의 기본 언어.
DB는 '구조화된 엑셀' — 테이블·행·열·기본키, 첫 DB는 Supabase로.
API는 '내가 묻는 것', 웹훅은 '저쪽이 알리는 것'.
Git은 시간 여행 — 커밋·브랜치·PR. GitHub로 인터넷 공유.
Vercel·Cloudflare로 무료 배포, 도메인은 별도 구매.
보안 1순위 — API 키 절대 깃허브에 올리지 말고 .env로.

5회차 · IT 기초 — 비개발자를 위한 넓고 얕은 지식

이 회차에서 배우는 것