학습 코너
단계별 학습 커리큘럼
웹 개발 기초부터 AI·에이전트까지, 시리즈별로 차근차근 배울 수 있는 커리큘럼입니다. 원하는 시리즈를 골라 첫 번째 글부터 순서대로 따라가 보세요.
HTML
웹페이지의 뼈대. 모든 웹 개발의 출발점.
HTML 입문
- 1
웹페이지는 어떻게 만들어질까? HTML 첫걸음
브라우저가 HTML을 읽는 원리를 이해하고 VSCode와 Live Server를 설치해 첫 Hello World를 출력해 봅니다.
- 2
HTML 기본 구조 — head와 body의 역할
DOCTYPE, html, head, body 태그가 각각 무슨 역할을 하는지 이해하고 올바른 기본 구조를 손에 익힙니다.
- 3
글자를 다루는 태그 — 제목, 단락, 강조
h1~h6 제목 태그, p 단락 태그, strong·em 강조 태그, br 줄바꿈 태그 등 텍스트 관련 태그를 직접 써보며 익힙니다.
- 4
링크와 이미지 — <a>와 <img> 태그 완전 정복
다른 페이지로 이동하는 링크(a 태그)와 이미지(img 태그) 사용법을 익히고, 속성(attribute)의 개념을 이해합니다.
- 5
목록과 표로 정보 정리하기 — ul, ol, table
순서 없는 목록(ul), 순서 있는 목록(ol), 표(table) 태그를 배우고 정보를 구조적으로 표현하는 방법을 익힙니다.
- 6
사용자 입력 받기 — 폼과 버튼
로그인·회원가입·검색처럼 사용자 입력을 받는 form, input, button 태그를 배우고 다양한 입력 유형을 익힙니다.
- 7
의미 있는 HTML — 시맨틱 태그로 구조 잡기
header, nav, main, section, article, aside, footer 등 시맨틱 태그의 역할과 쓰임을 이해하고 올바른 페이지 구조를 만듭니다.
- 8
파비콘과 메타 태그 — 탭에 이름과 아이콘 붙이기
검색 결과와 SNS 공유에 영향을 주는 메타 태그와 브라우저 탭 아이콘(파비콘) 설정 방법을 배웁니다.
- 9
HTML만으로 만드는 학급 설문 폼 실습
지금까지 배운 폼 태그들을 총동원해 학급 설문지를 완성합니다. 입력 유효성 검사 속성도 함께 배웁니다.
- 10
[HTML 완성 프로젝트] 나를 소개하는 웹페이지 만들기
HTML 시리즈 1~9편에서 배운 모든 내용을 활용해 사진·자기소개·좋아하는 것이 담긴 완성도 있는 1페이지 소개 사이트를 만듭니다.
CSS
색상·레이아웃·애니메이션으로 디자인을 완성.
CSS 기초
- 1
CSS란? HTML에 옷을 입히는 방법
CSS가 무엇인지, HTML과 어떻게 연결하는지 배우고 배경색·글자색을 직접 바꿔보며 CSS의 기본 문법을 익힙니다.
- 2
원하는 요소를 골라내는 기술 — CSS 선택자
태그·클래스·아이디 선택자부터 자손·형제·가상 클래스 선택자까지, 원하는 HTML 요소에 정확히 스타일을 적용하는 방법을 배웁니다.
- 3
색상과 배경 마음대로 다루기
HEX·RGB·HSL 색상 표현법과 배경 색상·이미지·그라디언트를 활용해 페이지에 생동감을 불어넣습니다.
- 4
폰트와 텍스트 스타일링 — 구글 폰트 적용까지
font-family, font-size, font-weight, line-height 등 텍스트 관련 속성을 배우고 Google Fonts를 무료로 적용합니다.
- 5
박스 모델 — margin, padding, border 완전 정복
CSS의 핵심 개념인 박스 모델을 이해하고 margin, padding, border, box-sizing을 자유자재로 다룹니다.
- 6
Flexbox로 레이아웃 자유자재로 — 가로 배치부터 정렬까지
display:flex, justify-content, align-items, gap 등 Flexbox 핵심 속성을 배우고 다양한 레이아웃을 만들어 봅니다.
- 7
반응형 웹 — 스마트폰부터 PC까지 모두 잘 보이게
미디어 쿼리와 뷰포트 설정으로 스마트폰, 태블릿, PC 화면에서 모두 잘 보이는 반응형 웹 페이지를 만드는 방법을 배웁니다.
- 8
hover 효과와 transition — 페이지에 생동감 불어넣기
:hover 가상 클래스와 transition, transform 속성을 활용해 마우스 오버 시 부드러운 애니메이션 효과를 만드는 방법을 배웁니다.
- 9
CSS 변수 — 색상과 값을 한 곳에서 관리하기
CSS Custom Properties(변수)를 활용해 색상, 간격, 폰트 크기를 체계적으로 관리하고 다크 모드 전환의 기초까지 배웁니다.
- 10
[CSS 완성 프로젝트] HTML 소개 페이지를 예쁘게 꾸미기
CSS 시리즈 1~9편의 모든 내용을 활용해 HTML 프로젝트 소개 페이지에 반응형 디자인, 애니메이션, CSS 변수까지 적용해 완성도 있는 사이트를 만듭니다.
JavaScript
버튼 클릭, 데이터 처리 — 웹을 살아있게 만드는 언어.
JavaScript 기초
- 1
JavaScript란? 웹을 살아있게 만드는 언어
JavaScript가 무엇인지, HTML/CSS와 어떻게 다른지 이해하고 브라우저 콘솔에서 첫 코드를 실행해 봅니다.
- 2
조건문과 반복문 — 프로그램의 흐름 만들기
if/else 조건문과 for/while 반복문을 배우고 프로그램이 상황에 따라 다르게 동작하도록 흐름을 제어하는 방법을 익힙니다.
- 3
함수 — 코드를 묶어서 재사용하기
함수 선언, 매개변수, 반환값, 화살표 함수를 배우고 중복 코드를 없애 깔끔하고 재사용 가능한 코드를 작성하는 방법을 익힙니다.
- 4
DOM 조작 — JavaScript로 HTML 바꾸기
DOM이 무엇인지 이해하고 querySelector로 요소를 선택하고 innerHTML, textContent, style을 변경해 화면을 동적으로 바꾸는 방법을 배웁니다.
- 5
이벤트 처리 — 클릭, 입력, 키보드에 반응하기
addEventListener로 클릭, input, keydown, submit 등 다양한 사용자 이벤트에 반응하는 인터랙티브 웹 페이지를 만드는 방법을 배웁니다.
- 6
배열과 객체 — 데이터를 구조적으로 다루기
배열 메서드(map, filter, find, forEach)와 객체(Object)를 배우고 실제 데이터를 구조화해서 화면에 렌더링하는 방법을 익힙니다.
- 7
localStorage — 브라우저에 데이터 저장하기
localStorage를 활용해 새로고침해도 사라지지 않는 데이터 저장소를 만들고, JSON.stringify/parse로 객체를 저장하는 방법을 배웁니다.
- 8
fetch API — 외부 데이터 가져오기
fetch API와 async/await로 외부 API에서 데이터를 가져오고 화면에 표시하는 방법을 배웁니다. 날씨, 포켓몬 등 공개 API를 직접 사용해봅니다.
- 9
실전 패턴 — 자주 쓰는 JavaScript 기법 모음
폼 유효성 검사, 디바운스, 무한 스크롤 등 실제 웹 개발에서 자주 사용하는 JavaScript 패턴들을 배웁니다.
- 10
[JavaScript 완성 프로젝트] 영화 검색 앱 만들기
JavaScript 시리즈 1~9편의 모든 내용을 활용해 검색, 필터, localStorage, 즐겨찾기 기능을 갖춘 영화 검색 앱을 완성합니다.
Python
AI·데이터·자동화의 언어. 문법이 간결해 처음 배우기 좋습니다.
Python 기초
- 1
파이썬 시작하기 — 변수와 자료형
파이썬의 기본 자료형(숫자, 문자열, 불리언)과 변수 사용법을 익힙니다. 타입 확인, 형 변환, f-string 등 실전에서 자주 쓰는 패턴을 배웁니다.
- 2
조건문과 반복문 — 코드의 흐름 제어하기
if/elif/else로 조건에 따라 다른 코드를 실행하고, for/while로 반복 작업을 자동화하는 방법을 배웁니다. 파이썬 들여쓰기 규칙도 익힙니다.
- 3
함수와 모듈 — 코드를 재사용 가능하게 만들기
def로 함수를 정의하고, 기본값·가변 인자·키워드 인자를 활용하는 방법을 배웁니다. 모듈 import와 자주 쓰는 표준 라이브러리도 익힙니다.
- 4
리스트와 딕셔너리 — 파이썬의 핵심 자료구조
리스트로 순서 있는 데이터를 관리하고, 딕셔너리로 키-값 쌍을 다루는 방법을 배웁니다. 리스트 컴프리헨션과 딕셔너리 조작 패턴도 익힙니다.
- 5
파일 입출력 — 데이터를 읽고 저장하기
파이썬으로 텍스트 파일을 읽고 쓰고, CSV와 JSON 파일을 처리하는 방법을 배웁니다. with 구문과 파일 경로 다루기도 함께 익힙니다.
- 6
예외 처리 — 오류가 나도 멈추지 않는 코드 만들기
try/except로 런타임 오류를 처리하고, 커스텀 예외를 만들고, 로깅으로 오류를 기록하는 방법을 배웁니다. 견고한 프로그램을 위한 필수 기술입니다.
- 7
클래스와 객체 — 데이터와 기능을 하나로 묶기
클래스로 자신만의 자료형을 만들고, 속성과 메서드를 정의하는 방법을 배웁니다. LLM API 코드에서 자주 보이는 Pydantic 모델의 기반 개념도 함께 익힙니다.
- 8
외부 패키지와 가상환경 — 파이썬 프로젝트 관리
pip로 외부 패키지를 설치하고, venv로 프로젝트별 가상환경을 만들고, requirements.txt로 의존성을 관리하는 방법을 배웁니다.
- 9
HTTP 요청 — 외부 API 호출하기
requests와 httpx로 REST API를 호출하고, JSON 응답을 처리하는 방법을 배웁니다. 헤더 설정, 인증, 에러 처리까지 실전 API 연동에 필요한 모든 것을 익힙니다.
- 10
최종 프로젝트 — AI 기반 뉴스 요약 도구 만들기
변수, 함수, 클래스, 파일 I/O, 예외 처리, HTTP 요청, OpenAI API까지 Python 기초 시리즈에서 배운 모든 개념을 활용해 실용적인 뉴스 요약 도구를 만듭니다.
Agent
AI 에이전트 설계·구현·운영 실전 가이드.
AI 에이전트 기초
- 1
AI 에이전트란? — LLM이 스스로 생각하고 행동한다
AI 에이전트의 개념과 일반 LLM 챗봇과의 차이를 이해합니다. 계획·도구·기억·행동으로 구성된 에이전트 아키텍처의 작동 원리를 알아봅니다.
- 2
LangChain 기초 — 에이전트 개발 프레임워크 시작하기
LangChain으로 LLM 체인을 구성하고, LCEL 문법으로 파이프라인을 조합하는 방법을 배웁니다. 에이전트 개발의 기반이 되는 핵심 추상화를 익힙니다.
- 3
도구 설계와 LangGraph — 실제로 움직이는 에이전트 만들기
LangGraph로 상태 기반 에이전트를 구현하고, 커스텀 도구를 설계해 LLM이 실제 작업을 수행하게 만드는 방법을 배웁니다.
- 4
메모리와 상태 관리 — 에이전트가 기억하는 방법
에이전트의 단기 메모리(컨텍스트)와 장기 메모리(벡터 DB)를 설계하고, 대화 기록·사용자 정보·작업 결과를 효과적으로 관리하는 방법을 배웁니다.
- 5
멀티 에이전트 패턴 — 에이전트들이 협업하는 구조
오케스트레이터-서브에이전트 패턴으로 복잡한 작업을 역할별로 분리하고, LangGraph로 에이전트 간 협업 시스템을 구현하는 방법을 배웁니다.
- 6
실전 프로젝트 — 자율 리서치 에이전트 만들기
지금까지 배운 도구 설계, LangGraph, 메모리, 멀티 에이전트를 모두 통합해 주제를 받아 스스로 리서치하고 보고서를 작성하는 자율 에이전트를 완성합니다.
LLM
대형 언어 모델 활용·파인튜닝·프롬프트 엔지니어링.
LLM 기초
- 1
LLM이란 무엇인가? — 대형 언어 모델의 작동 원리
ChatGPT, Claude, Gemini의 핵심 기술인 LLM(대형 언어 모델)이 어떤 원리로 언어를 이해하고 생성하는지, 그리고 왜 지금 이 기술이 중요한지 알아봅니다.
- 2
토크나이저와 임베딩 — 텍스트가 숫자가 되는 과정
LLM이 텍스트를 어떻게 숫자로 변환하는지, 토크나이저와 임베딩의 원리를 이해하고 의미 기반 검색과 유사도 계산이 어떻게 작동하는지 알아봅니다.
- 3
RAG — 외부 지식을 LLM에 연결하는 방법
RAG(검색 증강 생성)의 구조와 작동 원리를 이해하고, 왜 LLM에 외부 문서를 연결해야 하는지, 벡터 DB가 어떤 역할을 하는지 알아봅니다.
- 4
LLM 평가와 선택 기준 — 어떤 모델을 써야 할까?
벤치마크 지표의 의미와 한계를 이해하고, 속도·비용·성능의 트레이드오프를 파악해 실제 프로젝트에 맞는 LLM을 선택하는 기준을 배웁니다.
LLM API 개발
- 1
OpenAI API 기초 — 코드로 LLM 호출하기
Python으로 OpenAI API를 호출하는 방법을 처음부터 배웁니다. API 키 설정, 기본 호출, 메시지 구조, 응답 파싱까지 실제 코드와 함께 익힙니다.
- 2
스트리밍과 비동기 — 실시간 응답으로 UX 개선하기
Streaming API로 ChatGPT처럼 글자가 실시간으로 출력되는 UX를 구현하고, asyncio로 여러 요청을 동시에 처리해 성능을 높이는 방법을 배웁니다.
- 3
Function Calling — LLM이 외부 함수를 호출하게 만들기
OpenAI Function Calling으로 LLM이 날씨 API, 데이터베이스, 계산기 등 외부 도구를 직접 호출하는 AI 에이전트를 만드는 방법을 배웁니다.
- 4
RAG 구현 실습 — ChromaDB로 문서 검색 시스템 만들기
ChromaDB와 OpenAI 임베딩 API를 사용해 실제 동작하는 RAG 시스템을 처음부터 구현합니다. 문서 인덱싱부터 질문 응답까지 전체 파이프라인을 코드로 작성합니다.
- 5
완성 프로젝트 — RAG 기반 AI 챗봇 서비스 만들기
OpenAI API, ChromaDB, FastAPI를 조합해 문서 기반 AI 챗봇 서비스를 처음부터 끝까지 구현합니다. 스트리밍, 대화 기록, RAG를 모두 통합한 실전 프로젝트입니다.
프롬프트 엔지니어링
- 1
프롬프트 엔지니어링이란? — 같은 모델, 다른 결과
프롬프트 엔지니어링의 핵심 원칙을 이해하고, 명확성·구체성·구조화된 지시로 LLM에서 훨씬 좋은 결과를 이끌어내는 방법을 배웁니다.
- 2
역할 부여와 Few-shot — LLM을 전문가로 만드는 법
Role Prompting으로 LLM에게 전문가 페르소나를 부여하고, Few-shot 예시로 원하는 출력 패턴을 학습시켜 일관된 고품질 결과를 얻는 방법을 배웁니다.
- 3
Chain-of-Thought — LLM이 단계별로 생각하게 만들기
Chain-of-Thought 프롬프팅으로 LLM의 추론 능력을 최대로 끌어내는 방법을 배웁니다. '단계별로 생각해줘' 한 마디가 결과를 어떻게 바꾸는지 알아봅니다.
- 4
시스템 프롬프트 설계 — LLM의 행동 방식을 제어하기
시스템 프롬프트로 LLM의 페르소나, 응답 규칙, 제약 조건을 설정하는 방법을 배웁니다. AI 서비스 개발에 필수적인 시스템 프롬프트 설계 패턴을 익힙니다.
- 5
고급 프롬프팅 기법 — ReAct, 자기 일관성, 메타 프롬프팅
ReAct로 LLM이 행동하며 추론하게 만들고, 자기 일관성으로 신뢰도를 높이고, 메타 프롬프팅으로 프롬프트 자체를 자동 생성하는 고급 기법을 배웁니다.