코드·데이터·힙·스택과 운영체제 자원을 묶어 둔 실행 공간입니다.
먼저 확인하기
지금 가장 흐릿한 것은 무엇인가요?
모르는 항목을 고르는 것은 시험이 아닙니다. 무엇부터 다시 볼지 정하는 출발점입니다.
기초부터 시작하기
먼저, 지금 무엇을 실행한 건지부터 보세요
이 페이지의 예에서는 브라우저가 HTML과 JavaScript를 읽고 실행합니다. 아래 흐름에서 각 이름이 실제로 무엇을 가리키는지 확인해 보세요.
01 · 파일
강의 HTML + JS
저장장치(SSD)에 보관된 실행 전 자료입니다.
02 · 읽는 프로그램
브라우저
Whale/Chrome이 HTML과 JavaScript를 읽습니다.
03 · 관리자
macOS
브라우저가 쓸 공간과 CPU 차례를 관리합니다.
04 · 작업대
메모리(RAM)
실행에 필요한 코드와 데이터를 잠시 펼칩니다.
05 · 실행 공간
프로세스
실행 중인 브라우저의 작업 공간입니다.
06 · 실행 흐름
메인 스레드
프로세스 안에서 클릭과 JS를 처리하는 한 줄입니다.
07 · 처리 장치
CPU
메인 스레드의 JavaScript 명령어를 처리합니다.
파일을 여는 것과 실행하는 것은 다릅니다
에디터로 JavaScript 파일을 열면 글자를 보는 것입니다. 브라우저가 코드를 읽고 실행하도록 요청해야 페이지에서 버튼과 화면이 움직입니다.
작은 코드로 연결하기
console.log("안녕");
브라우저의 메인 스레드가 이 코드를 따라가고, CPU가 명령어를 처리합니다.
지금 실행 중인 것
브라우저가 읽고 실행하는 이 강의의 HTML + JavaScript
실행 시작을 눌러도 새 프로그램을 여는 것이 아닙니다. 이미 열린 페이지의 JavaScript가 메인 스레드에서 실행되어 설명 문구를 바꿉니다.
CPU와 GPU는 역할이 다릅니다
CPU클릭 로직과 상태 변경을 처리합니다.
GPU바뀐 글자와 색을 픽셀로 그리는 일을 돕습니다.
핵심: HTML 파일은 저장장치에 있고, 브라우저 프로세스 안의 메인 스레드가 JavaScript를 따라가며 CPU와 GPU가 각각 실행과 화면 표시를 나눕니다.
THE CORE MODEL
프로세스·스레드·CPU를 한 번에 연결하기
프로세스와 스레드는 운영체제 레벨에서 관리됩니다. 브라우저 버튼 하나를 눌렀을 때도 이 실행 모델이 그대로 작동합니다.
운영체제 안의 구조
운영체제
└─ 프로세스 · 실행 공간
├─ 스레드 1 · 클릭 흐름
└─ 스레드 2 · 다른 작업
↓
CPU · 스레드 명령어 실행
- 프로그램 파일실행 전 저장장치에 있는 코드와 자료입니다.
- 프로세스프로세스는 운영체제가 관리하는 실행 공간입니다.
- 스레드스레드는 그 안의 실행 흐름입니다. CPU가 따라갈 명령어 순서를 가집니다.
- CPUCPU는 스레드의 명령어를 실행하는 하드웨어입니다.
버튼 클릭은 새 프로세스를 만들지 않습니다
사용자 클릭 → 브라우저 프로세스의 메인 스레드 → CPU의 JavaScript 실행 → DOM·상태 변경 → 브라우저와 GPU의 화면 표시 순서로 이어집니다.
메모리 공유의 기준
Code · Data · Heap은 공유하고 Stack은 각 스레드가 따로 가집니다. count = 0을 동시에 바꾸면 동기화가 필요합니다.
브라우저에서 주의할 점
이 그림은 일반적인 OS 스레드 모델입니다. Web Worker와
worker_threads는 보통 별도의 JavaScript Heap을 사용하므로, 메모리 공유에는 SharedArrayBuffer 같은 명시적인 방법이 필요합니다.
한 문장으로 말해 보기
프로세스는 실행 공간, 스레드는 그 안의 실행 흐름, CPU는 스레드의 명령어를 실행하는 하드웨어라고 설명해 보세요.
프론트 vs 서버
같은 컴퓨터 개념, 다른 실행 장소
프론트는 브라우저에서 화면을 만들고, 서버는 요청을 기다렸다가 데이터를 돌려줍니다. 버튼으로 한 단계씩 비교해 보세요.
프론트엔드
내 브라우저에서 화면을 만듭니다.
브라우저
- 브라우저HTML과 JavaScript를 읽습니다.
- 브라우저 프로세스페이지를 위한 실행 공간입니다.
- 메인 스레드클릭 이벤트와 JavaScript 흐름을 처리합니다.
- CPU문구 변경 같은 로직을 실행합니다.
- GPU/화면바뀐 글자와 색을 픽셀로 표시합니다.
서버
localhost 또는 EC2에서 요청을 처리합니다.
Node.js / Nginx
- 요청브라우저가 localhost 또는 EC2로 보냅니다.
- 서버 프로세스Node.js나 Java 프로그램이 실행 중입니다.
- 이벤트 루프들어온 요청을 확인하고 처리할 일을 고릅니다.
- CPU + RAM서버 코드, 인증, DB 요청을 처리합니다.
- 응답HTML이나 JSON을 브라우저로 돌려줍니다.
프론트 예시 1단계: 브라우저가 이 강의 HTML과 JavaScript를 읽습니다.
서버 프로그램은 요청을 기다리는 프로그램입니다. localhost는 내 컴퓨터 안의 서버이고, EC2는 AWS의 가상 컴퓨터입니다. 서버는 보통 화면을 직접 그리지 않으므로 GPU가 필수는 아닙니다.
한 장면씩 확인하기
프로세스와 스레드가 어디에서 만나는가
먼저 위치를 잡고, 탭을 바꿔 메모리·CPU 시간·데드락을 각각 확인해 보세요.
HOW TO READ A VISUAL
시각 자료는 정답 그림이 아니라 작은 실험입니다
먼저 질문을 읽고, 버튼으로 상태를 바꾼 다음, 무엇이 변했고 왜 변했는지 말해 보세요. 탭마다 같은 학습 순서를 사용합니다.
- 질문무엇을 알아보려는가?
- 조작어떤 상태를 바꿀까?
- 변화무엇이 달라졌나?
- 해설왜 그런 결과가 나왔나?
읽는 순서: 질문 → 조작 → 변화 → 해설. 애니메이션을 빨리 넘기기보다 한 단계에서 “CPU가 지금 무엇을 실행하는가?”를 먼저 말해 보세요.
파일·프로세스·스레드는 어디에 있나요?
프로그램은 파일, 프로세스는 실행 공간, 스레드는 그 안의 한 줄, CPU는 명령어를 처리합니다.
- 프로그램 파일저장장치에 있는 이 강의 HTML과 JS입니다.
- 브라우저Whale/Chrome이 파일을 읽고 실행합니다.
- 운영체제macOS가 실행 공간과 자원을 관리합니다.
- 메모리RAM에 코드와 데이터를 준비합니다.
- 프로세스실행 중인 프로그램의 공간과 자원 묶음입니다.
- 메인 스레드프로세스 안에서 클릭 흐름을 처리합니다.
- CPU선택된 스레드의 JS 명령어를 실행합니다.
CPU가 실제로 실행하는 것은 스레드의 명령어입니다. 화면을 다시 그릴 때는 GPU가 글자와 색을 픽셀로 표시하는 일을 돕습니다.
프로세스는 방, 스레드는 그 안의 일꾼
프로세스는 방이고, 스레드는 그 안에서 일하는 흐름입니다. 서로 다른 프로세스는 방이 다르고, 같은 프로세스의 스레드는 Code·Data·Heap을 같이 씁니다.
프로세스
서로 다른 작업 공간
주소 공간 A
Code독립
Data독립
Heap독립
Stack독립
주소 공간 B
Code독립
Data독립
Heap독립
Stack독립
다른 프로세스의 메모리는 기본적으로 바로 보이지 않습니다. 데이터를 주고받으려면 IPC가 필요합니다.
스레드
한 공간 안의 실행 흐름
하나의 프로세스 주소 공간
Thread 1 · Stack 1지역 변수와 호출 순서
Thread 2 · Stack 2지역 변수와 호출 순서
같은 데이터를 바로 볼 수 있어 빠르지만, 동시에 바꾸지 않도록 동기화 규칙이 필요합니다.
프로세스는 독립된 공간이고, 스레드는 그 공간 안에서 CPU가 실행하는 흐름입니다.
CPU는 누가 먼저 일하게 할까요?
CPU는 여러 작업을 아주 짧게 번갈아 처리합니다. 작업 A를 잠깐 멈추고 B로 바꾸는 장면을 봅니다.
프로세스 전환: 다른 작업 공간으로 이동
주소 공간과 실행 상태 관련 정보를 함께 바꾸므로 준비할 것이 많습니다.
작업 A 저장
작업 B 복원
CPU 실행 대상
비용이 큰 편
스레드 전환도 공짜는 아니지만, 같은 주소 공간을 유지한 채 실행 흐름 중심으로 바꾸는 경우가 많아 프로세스 전환보다 가벼운 편입니다.
서로 기다리면 왜 멈출까요?
두 스레드가 서로 가진 잠금을 기다리면 둘 다 멈춥니다. 이 순환이 데드락입니다.
잠금을 잡는 순서를 정하면 서로 기다리는 일을 줄일 수 있습니다.
멈춰서 설명해 보기
현재 탭의 그림을 보지 않고도 “무엇이 공유되고, 누가 실행하며, 어떤 순서 때문에 결과가 달라지는지” 한 문장으로 말해 보세요.
오개념 비교
헷갈리기 쉬운 문장을 뒤집어 보기
정의를 외우기 전에, 자주 나오는 짧은 문장이 어디까지 맞는지 확인합니다.
파일은 실행 전 자료입니다. 운영체제가 실행 공간과 자원을 마련한 뒤 프로세스가 됩니다.
프로그램 파일은 실행할 내용을 담고, 프로세스는 그 내용을 실행하기 위한 공간과 자원의 묶음입니다.
프론트엔드 연결
브라우저에서는 이렇게 보자
JavaScript 파일, 브라우저, macOS, RAM, 프로세스, 메인 스레드, CPU와 GPU의 관계를 버튼 클릭 하나로 연결해 봅니다.
작성한 코드
button.addEventListener("click", () => {
fetch("/posts");
});
- 프로그램HTML과 JavaScript 파일이 실행할 내용을 담습니다.
- 브라우저Whale/Chrome이 파일을 읽고 화면 구조를 만듭니다.
- 운영체제macOS가 브라우저에 RAM과 CPU 사용 기회를 관리해 줍니다.
- 메모리실행에 필요한 코드와 데이터가 RAM에 준비됩니다.
- 프로세스브라우저의 렌더러 프로세스가 페이지 실행 공간을 제공합니다.
- 메인 스레드클릭 이벤트와 JavaScript 실행 흐름을 처리합니다.
- CPU선택된 스레드의 JavaScript 명령어를 실행합니다.
- GPU바뀐 글자와 색을 픽셀로 그리는 일을 돕습니다.
JavaScript 코드 하나가 운영체제 스레드 하나라는 뜻은 아닙니다. 브라우저는 화면, 네트워크, 그래픽 등을 위해 여러 프로세스와 스레드를 함께 사용합니다.
정리
같은 기준으로 다시 비교하기
정체
프로세스: 실행 공간과 자원의 묶음
스레드: CPU가 실행하는 흐름
메모리
프로세스: 주소 공간이 기본적으로 분리
스레드: Code, Data, Heap 공유. Stack 분리
소통
프로세스: IPC 같은 통신 필요
스레드: 공유 메모리를 바로 볼 수 있음
주의점
프로세스: 생성과 통신 비용
스레드: 공유 데이터와 동기화
독립성이 더 중요하면 프로세스, 빠른 공유가 더 중요하면 스레드를 먼저 검토합니다. 실제 선택은 작업과 오류 범위까지 함께 봅니다.
이해 확인
이제 내 말로 설명해 보기
정답을 보기 전에 짧게라도 먼저 답해 보세요. 특히 처음에 고른 “가장 흐릿한 항목”부터 설명하면 좋습니다.
- 프로그램 파일, 브라우저, 운영체제, 메모리, 프로세스, 스레드, CPU를 실행 순서대로 설명해 보세요.
- 같은 프로세스의 두 스레드가 공유하는 메모리 영역은 무엇인가요?
- CPU가 운영체제의 선택을 받아 실제로 실행하는 단위는 무엇인가요?
- 프로세스끼리 데이터를 공유할 때 IPC가 필요한 이유는 무엇인가요?
- 두 스레드가 서로 상대의 잠금을 기다리는 상태를 무엇이라고 하나요?
- Chrome 탭을 곧바로 프로세스 하나라고 부르면 안 되는 이유는 무엇인가요?
- 버튼을 눌렀을 때 CPU와 GPU는 각각 어떤 일을 하나요?
- localhost와 EC2는 서버 프로세스가 실행되는 위치에서 어떻게 다른가요?
정답과 해설 보기
프로그램 파일을 브라우저가 읽고, 운영체제가 RAM과 실행 공간을 관리하면 프로세스가 됩니다. 프로세스 안의 스레드에 CPU 시간이 배정되어 JavaScript 명령어가 실행됩니다.
Code, Data, Heap은 공유하고 Stack은 각 스레드가 따로 가집니다. 프로세스끼리는 주소 공간이 기본적으로 분리되어 있어 IPC가 필요합니다.
서로 잠금을 기다리는 상태는 데드락입니다. 잠금 순서를 통일하면 순환 대기를 끊을 수 있습니다.
Chrome은 여러 프로세스와 그 안의 여러 스레드가 함께 동작하므로 탭과 프로세스를 일대일로 볼 수 없습니다.
CPU는 클릭 로직과 상태 변경을 처리하고, GPU는 바뀐 글자·색·버튼을 픽셀로 그리는 일을 돕습니다.
localhost는 내 컴퓨터에서 실행한 서버이고, EC2는 AWS의 가상 컴퓨터에서 실행되는 서버입니다.