학습 코너

단계별 학습 커리큘럼

웹 개발 기초부터 AI·에이전트까지, 시리즈별로 차근차근 배울 수 있는 커리큘럼입니다. 원하는 시리즈를 골라 첫 번째 글부터 순서대로 따라가 보세요.

8 개 시리즈
60 편 글
6 개 주제

HTML

웹페이지의 뼈대. 모든 웹 개발의 출발점.

1개 시리즈
HTML입문

HTML 입문

10시작하기
  1. 1

    웹페이지는 어떻게 만들어질까? HTML 첫걸음

    브라우저가 HTML을 읽는 원리를 이해하고 VSCode와 Live Server를 설치해 첫 Hello World를 출력해 봅니다.

  2. 2

    HTML 기본 구조 — head와 body의 역할

    DOCTYPE, html, head, body 태그가 각각 무슨 역할을 하는지 이해하고 올바른 기본 구조를 손에 익힙니다.

  3. 3

    글자를 다루는 태그 — 제목, 단락, 강조

    h1~h6 제목 태그, p 단락 태그, strong·em 강조 태그, br 줄바꿈 태그 등 텍스트 관련 태그를 직접 써보며 익힙니다.

  4. 4

    링크와 이미지 — <a>와 <img> 태그 완전 정복

    다른 페이지로 이동하는 링크(a 태그)와 이미지(img 태그) 사용법을 익히고, 속성(attribute)의 개념을 이해합니다.

  5. 5

    목록과 표로 정보 정리하기 — ul, ol, table

    순서 없는 목록(ul), 순서 있는 목록(ol), 표(table) 태그를 배우고 정보를 구조적으로 표현하는 방법을 익힙니다.

  6. 6

    사용자 입력 받기 — 폼과 버튼

    로그인·회원가입·검색처럼 사용자 입력을 받는 form, input, button 태그를 배우고 다양한 입력 유형을 익힙니다.

  7. 7

    의미 있는 HTML — 시맨틱 태그로 구조 잡기

    header, nav, main, section, article, aside, footer 등 시맨틱 태그의 역할과 쓰임을 이해하고 올바른 페이지 구조를 만듭니다.

  8. 8

    파비콘과 메타 태그 — 탭에 이름과 아이콘 붙이기

    검색 결과와 SNS 공유에 영향을 주는 메타 태그와 브라우저 탭 아이콘(파비콘) 설정 방법을 배웁니다.

  9. 9

    HTML만으로 만드는 학급 설문 폼 실습

    지금까지 배운 폼 태그들을 총동원해 학급 설문지를 완성합니다. 입력 유효성 검사 속성도 함께 배웁니다.

  10. 10

    [HTML 완성 프로젝트] 나를 소개하는 웹페이지 만들기

    HTML 시리즈 1~9편에서 배운 모든 내용을 활용해 사진·자기소개·좋아하는 것이 담긴 완성도 있는 1페이지 소개 사이트를 만듭니다.

CSS

색상·레이아웃·애니메이션으로 디자인을 완성.

1개 시리즈
CSS입문

CSS 기초

10시작하기
  1. 1

    CSS란? HTML에 옷을 입히는 방법

    CSS가 무엇인지, HTML과 어떻게 연결하는지 배우고 배경색·글자색을 직접 바꿔보며 CSS의 기본 문법을 익힙니다.

  2. 2

    원하는 요소를 골라내는 기술 — CSS 선택자

    태그·클래스·아이디 선택자부터 자손·형제·가상 클래스 선택자까지, 원하는 HTML 요소에 정확히 스타일을 적용하는 방법을 배웁니다.

  3. 3

    색상과 배경 마음대로 다루기

    HEX·RGB·HSL 색상 표현법과 배경 색상·이미지·그라디언트를 활용해 페이지에 생동감을 불어넣습니다.

  4. 4

    폰트와 텍스트 스타일링 — 구글 폰트 적용까지

    font-family, font-size, font-weight, line-height 등 텍스트 관련 속성을 배우고 Google Fonts를 무료로 적용합니다.

  5. 5

    박스 모델 — margin, padding, border 완전 정복

    CSS의 핵심 개념인 박스 모델을 이해하고 margin, padding, border, box-sizing을 자유자재로 다룹니다.

  6. 6

    Flexbox로 레이아웃 자유자재로 — 가로 배치부터 정렬까지

    display:flex, justify-content, align-items, gap 등 Flexbox 핵심 속성을 배우고 다양한 레이아웃을 만들어 봅니다.

  7. 7

    반응형 웹 — 스마트폰부터 PC까지 모두 잘 보이게

    미디어 쿼리와 뷰포트 설정으로 스마트폰, 태블릿, PC 화면에서 모두 잘 보이는 반응형 웹 페이지를 만드는 방법을 배웁니다.

  8. 8

    hover 효과와 transition — 페이지에 생동감 불어넣기

    :hover 가상 클래스와 transition, transform 속성을 활용해 마우스 오버 시 부드러운 애니메이션 효과를 만드는 방법을 배웁니다.

  9. 9

    CSS 변수 — 색상과 값을 한 곳에서 관리하기

    CSS Custom Properties(변수)를 활용해 색상, 간격, 폰트 크기를 체계적으로 관리하고 다크 모드 전환의 기초까지 배웁니다.

  10. 10

    [CSS 완성 프로젝트] HTML 소개 페이지를 예쁘게 꾸미기

    CSS 시리즈 1~9편의 모든 내용을 활용해 HTML 프로젝트 소개 페이지에 반응형 디자인, 애니메이션, CSS 변수까지 적용해 완성도 있는 사이트를 만듭니다.

JavaScript

버튼 클릭, 데이터 처리 — 웹을 살아있게 만드는 언어.

1개 시리즈
JavaScript입문

JavaScript 기초

10시작하기
  1. 1

    JavaScript란? 웹을 살아있게 만드는 언어

    JavaScript가 무엇인지, HTML/CSS와 어떻게 다른지 이해하고 브라우저 콘솔에서 첫 코드를 실행해 봅니다.

  2. 2

    조건문과 반복문 — 프로그램의 흐름 만들기

    if/else 조건문과 for/while 반복문을 배우고 프로그램이 상황에 따라 다르게 동작하도록 흐름을 제어하는 방법을 익힙니다.

  3. 3

    함수 — 코드를 묶어서 재사용하기

    함수 선언, 매개변수, 반환값, 화살표 함수를 배우고 중복 코드를 없애 깔끔하고 재사용 가능한 코드를 작성하는 방법을 익힙니다.

  4. 4

    DOM 조작 — JavaScript로 HTML 바꾸기

    DOM이 무엇인지 이해하고 querySelector로 요소를 선택하고 innerHTML, textContent, style을 변경해 화면을 동적으로 바꾸는 방법을 배웁니다.

  5. 5

    이벤트 처리 — 클릭, 입력, 키보드에 반응하기

    addEventListener로 클릭, input, keydown, submit 등 다양한 사용자 이벤트에 반응하는 인터랙티브 웹 페이지를 만드는 방법을 배웁니다.

  6. 6

    배열과 객체 — 데이터를 구조적으로 다루기

    배열 메서드(map, filter, find, forEach)와 객체(Object)를 배우고 실제 데이터를 구조화해서 화면에 렌더링하는 방법을 익힙니다.

  7. 7

    localStorage — 브라우저에 데이터 저장하기

    localStorage를 활용해 새로고침해도 사라지지 않는 데이터 저장소를 만들고, JSON.stringify/parse로 객체를 저장하는 방법을 배웁니다.

  8. 8

    fetch API — 외부 데이터 가져오기

    fetch API와 async/await로 외부 API에서 데이터를 가져오고 화면에 표시하는 방법을 배웁니다. 날씨, 포켓몬 등 공개 API를 직접 사용해봅니다.

  9. 9

    실전 패턴 — 자주 쓰는 JavaScript 기법 모음

    폼 유효성 검사, 디바운스, 무한 스크롤 등 실제 웹 개발에서 자주 사용하는 JavaScript 패턴들을 배웁니다.

  10. 10

    [JavaScript 완성 프로젝트] 영화 검색 앱 만들기

    JavaScript 시리즈 1~9편의 모든 내용을 활용해 검색, 필터, localStorage, 즐겨찾기 기능을 갖춘 영화 검색 앱을 완성합니다.

Python

AI·데이터·자동화의 언어. 문법이 간결해 처음 배우기 좋습니다.

1개 시리즈
Python입문

Python 기초

10시작하기
  1. 1

    파이썬 시작하기 — 변수와 자료형

    파이썬의 기본 자료형(숫자, 문자열, 불리언)과 변수 사용법을 익힙니다. 타입 확인, 형 변환, f-string 등 실전에서 자주 쓰는 패턴을 배웁니다.

  2. 2

    조건문과 반복문 — 코드의 흐름 제어하기

    if/elif/else로 조건에 따라 다른 코드를 실행하고, for/while로 반복 작업을 자동화하는 방법을 배웁니다. 파이썬 들여쓰기 규칙도 익힙니다.

  3. 3

    함수와 모듈 — 코드를 재사용 가능하게 만들기

    def로 함수를 정의하고, 기본값·가변 인자·키워드 인자를 활용하는 방법을 배웁니다. 모듈 import와 자주 쓰는 표준 라이브러리도 익힙니다.

  4. 4

    리스트와 딕셔너리 — 파이썬의 핵심 자료구조

    리스트로 순서 있는 데이터를 관리하고, 딕셔너리로 키-값 쌍을 다루는 방법을 배웁니다. 리스트 컴프리헨션과 딕셔너리 조작 패턴도 익힙니다.

  5. 5

    파일 입출력 — 데이터를 읽고 저장하기

    파이썬으로 텍스트 파일을 읽고 쓰고, CSV와 JSON 파일을 처리하는 방법을 배웁니다. with 구문과 파일 경로 다루기도 함께 익힙니다.

  6. 6

    예외 처리 — 오류가 나도 멈추지 않는 코드 만들기

    try/except로 런타임 오류를 처리하고, 커스텀 예외를 만들고, 로깅으로 오류를 기록하는 방법을 배웁니다. 견고한 프로그램을 위한 필수 기술입니다.

  7. 7

    클래스와 객체 — 데이터와 기능을 하나로 묶기

    클래스로 자신만의 자료형을 만들고, 속성과 메서드를 정의하는 방법을 배웁니다. LLM API 코드에서 자주 보이는 Pydantic 모델의 기반 개념도 함께 익힙니다.

  8. 8

    외부 패키지와 가상환경 — 파이썬 프로젝트 관리

    pip로 외부 패키지를 설치하고, venv로 프로젝트별 가상환경을 만들고, requirements.txt로 의존성을 관리하는 방법을 배웁니다.

  9. 9

    HTTP 요청 — 외부 API 호출하기

    requests와 httpx로 REST API를 호출하고, JSON 응답을 처리하는 방법을 배웁니다. 헤더 설정, 인증, 에러 처리까지 실전 API 연동에 필요한 모든 것을 익힙니다.

  10. 10

    최종 프로젝트 — AI 기반 뉴스 요약 도구 만들기

    변수, 함수, 클래스, 파일 I/O, 예외 처리, HTTP 요청, OpenAI API까지 Python 기초 시리즈에서 배운 모든 개념을 활용해 실용적인 뉴스 요약 도구를 만듭니다.

Agent

AI 에이전트 설계·구현·운영 실전 가이드.

1개 시리즈
Agent중급

AI 에이전트 기초

  1. 1

    AI 에이전트란? — LLM이 스스로 생각하고 행동한다

    AI 에이전트의 개념과 일반 LLM 챗봇과의 차이를 이해합니다. 계획·도구·기억·행동으로 구성된 에이전트 아키텍처의 작동 원리를 알아봅니다.

  2. 2

    LangChain 기초 — 에이전트 개발 프레임워크 시작하기

    LangChain으로 LLM 체인을 구성하고, LCEL 문법으로 파이프라인을 조합하는 방법을 배웁니다. 에이전트 개발의 기반이 되는 핵심 추상화를 익힙니다.

  3. 3

    도구 설계와 LangGraph — 실제로 움직이는 에이전트 만들기

    LangGraph로 상태 기반 에이전트를 구현하고, 커스텀 도구를 설계해 LLM이 실제 작업을 수행하게 만드는 방법을 배웁니다.

  4. 4

    메모리와 상태 관리 — 에이전트가 기억하는 방법

    에이전트의 단기 메모리(컨텍스트)와 장기 메모리(벡터 DB)를 설계하고, 대화 기록·사용자 정보·작업 결과를 효과적으로 관리하는 방법을 배웁니다.

  5. 5

    멀티 에이전트 패턴 — 에이전트들이 협업하는 구조

    오케스트레이터-서브에이전트 패턴으로 복잡한 작업을 역할별로 분리하고, LangGraph로 에이전트 간 협업 시스템을 구현하는 방법을 배웁니다.

  6. 6

    실전 프로젝트 — 자율 리서치 에이전트 만들기

    지금까지 배운 도구 설계, LangGraph, 메모리, 멀티 에이전트를 모두 통합해 주제를 받아 스스로 리서치하고 보고서를 작성하는 자율 에이전트를 완성합니다.

LLM

대형 언어 모델 활용·파인튜닝·프롬프트 엔지니어링.

3개 시리즈