웹 서비스는 레스토랑과 비슷합니다. 먼저 전체 그림을 보고 시작할게요.

클라이언트 (Client)

클라이언트는 서비스를 요청하는 쪽입니다.

• 웹 브라우저 (크롬, 사파리, 엣지)
• 모바일 앱
• 데스크톱 앱

bash
클라이언트 = "저 아메리카노 한 잔 주세요" 라고 주문하는 손님

서버 (Server)

서버는 요청을 처리하는 쪽입니다.

• 24시간 켜져있는 컴퓨터
• 클라이언트의 요청을 받아 처리하고 응답

bash
서버 = "네, 아메리카노 나왔습니다" 라고 응답하는 가게

프론트엔드 (Frontend)

사용자 눈에 보이는 모든 것입니다.

• 버튼, 입력창, 이미지, 애니메이션
• "앞쪽(Front)"에서 사용자와 직접 상호작용

bash
프론트엔드 = 레스토랑의 인테리어, 메뉴판, 테이블 배치
             손님이 직접 보고 만지는 모든 것

사용 기술: HTML, CSS, JavaScript, React, Vue, Next.js

백엔드 (Backend)

사용자 눈에 보이지 않는 처리 로직입니다.

• 로그인 확인, 결제 처리, 데이터 저장
• "뒤쪽(Back)"에서 실제 일을 처리

bash
백엔드 = 레스토랑의 주방
         손님은 못 들어가지만, 실제 요리가 만들어지는 곳

사용 기술: Python, Java, Node.js, Go

비유로 이해하기

데이터베이스란?

데이터를 체계적으로 저장하는 곳입니다.

엑셀 파일을 생각해보세요. 여러 시트에 정보를 정리해서 저장하죠? 데이터베이스도 비슷하지만, 훨씬 빠르고 안전하게 많은 데이터를 관리할 수 있습니다.

bash
데이터베이스 = 초대형 스마트 엑셀
              수백만 명의 데이터를 동시에 처리 가능

예시: 사용자 테이블

데이터베이스 종류

파일 스토리지란?

이미지, 동영상, 문서 파일을 저장하는 곳입니다.

데이터베이스는 텍스트, 숫자 같은 작은 데이터에 적합합니다. 하지만 고화질 이미지나 동영상은 용량이 크기 때문에 별도의 저장소가 필요합니다.

bash
데이터베이스 = 간단한 메모를 적는 수첩
파일 스토리지 = 사진 앨범, 동영상 하드디스크

클라우드 스토리지 서비스

네트워크란?

컴퓨터들이 서로 대화하는 길입니다.

bash
네트워크 = 전화선, 도로
           정보가 오가는 통로

HTTP vs HTTPS

웹에서 데이터를 주고받는 규칙(프로토콜)입니다.

bash
HTTP = 엽서 (누구나 내용을 볼 수 있음)
HTTPS = 밀봉된 편지 (받는 사람만 열어볼 수 있음)

도메인과 IP

웹 페이지를 어디서 만드느냐의 차이입니다.

CSR (Client-Side Rendering)

브라우저에서 화면을 그림

bash
CSR = 이케아 가구
      부품(JavaScript)을 받아서 내가 직접 조립

장점: 한번 로드 후 빠른 화면 전환 단점: 첫 로딩이 느림, 검색엔진 노출 어려움

SSR (Server-Side Rendering)

서버에서 완성된 화면을 보내줌

bash
SSR = 완제품 가구
      이미 조립된 상태로 배송

장점: 빠른 첫 화면, 검색엔진 최적화(SEO) 좋음 단점: 서버 부하 높음, 페이지 이동 시 깜빡임

비교 정리

인프라 = 서비스가 돌아가는 환경

**인프라(Infrastructure)**는 코드가 실행되기 위해 필요한 모든 환경입니다.

bash
코드 = 레시피
인프라 = 주방 (가스레인지, 냉장고, 조리도구, 전기, 수도)

아무리 좋은 레시피가 있어도
주방이 없으면 요리를 할 수 없습니다.

인프라 구성 요소

클라우드 서비스

예전에는 직접 서버 컴퓨터를 사서 관리했지만, 지금은 클라우드에서 빌려 씁니다.

배포 = 코드를 세상에 공개하는 것

**배포(Deploy)**는 내 컴퓨터에서만 돌아가던 코드를 인터넷에서 누구나 접속할 수 있게 만드는 과정입니다.

bash
개발 = 집에서 요리 연습
배포 = 가게를 열어서 손님 받기

배포 과정

배포 환경의 종류

Vercel이란?

Vercel은 배포를 아주 쉽게 만들어주는 서비스입니다.

원래 배포하려면:

1. 서버 구매/임대
2. 서버 설정
3. 네트워크 설정
4. HTTPS 인증서 설치
5. 도메인 연결
6. 코드 업로드
7. 실행 환경 설정 ...

Vercel을 쓰면: GitHub 연결 → 끝!

bash
일반 배포 = 직접 주방 차리고, 인테리어하고, 허가받고, 오픈
Vercel = 푸드코트 입점 (이미 다 세팅되어 있음)

Vercel 배포 과정

Vercel이 자동으로 해주는 것들

언제 Vercel을 쓰면 좋을까?

Vercel vs 직접 배포

전체 흐름 정리

---

핵심 용어 한줄 정리

---

다음 단계

이제 기본 개념을 알았으니, 실제로 해보세요!

1. 간단한 웹사이트 만들기 - HTML/CSS로 자기소개 페이지
2. Vercel로 배포해보기 - GitHub 연결 후 배포
3. Next.js 튜토리얼 - 공식 문서 따라하기
4. 데이터베이스 연결 - Supabase 같은 쉬운 서비스로 시작

💡 AI로 코드를 만들어도, 이 개념들을 알면 "왜 안 되지?"를 스스로 해결할 수 있습니다!

웹 서비스는 레스토랑과 비슷합니다. 먼저 전체 그림을 보고 시작할게요.

클라이언트 (Client)

클라이언트는 서비스를 요청하는 쪽입니다.

• 웹 브라우저 (크롬, 사파리, 엣지)
• 모바일 앱
• 데스크톱 앱

bash
클라이언트 = "저 아메리카노 한 잔 주세요" 라고 주문하는 손님

서버 (Server)

서버는 요청을 처리하는 쪽입니다.

• 24시간 켜져있는 컴퓨터
• 클라이언트의 요청을 받아 처리하고 응답

bash
서버 = "네, 아메리카노 나왔습니다" 라고 응답하는 가게

프론트엔드 (Frontend)

사용자 눈에 보이는 모든 것입니다.

• 버튼, 입력창, 이미지, 애니메이션
• "앞쪽(Front)"에서 사용자와 직접 상호작용

bash
프론트엔드 = 레스토랑의 인테리어, 메뉴판, 테이블 배치
             손님이 직접 보고 만지는 모든 것

사용 기술: HTML, CSS, JavaScript, React, Vue, Next.js

백엔드 (Backend)

사용자 눈에 보이지 않는 처리 로직입니다.

• 로그인 확인, 결제 처리, 데이터 저장
• "뒤쪽(Back)"에서 실제 일을 처리

bash
백엔드 = 레스토랑의 주방
         손님은 못 들어가지만, 실제 요리가 만들어지는 곳

사용 기술: Python, Java, Node.js, Go

비유로 이해하기

데이터베이스란?

데이터를 체계적으로 저장하는 곳입니다.

엑셀 파일을 생각해보세요. 여러 시트에 정보를 정리해서 저장하죠? 데이터베이스도 비슷하지만, 훨씬 빠르고 안전하게 많은 데이터를 관리할 수 있습니다.

bash
데이터베이스 = 초대형 스마트 엑셀
              수백만 명의 데이터를 동시에 처리 가능

예시: 사용자 테이블

데이터베이스 종류

파일 스토리지란?

이미지, 동영상, 문서 파일을 저장하는 곳입니다.

데이터베이스는 텍스트, 숫자 같은 작은 데이터에 적합합니다. 하지만 고화질 이미지나 동영상은 용량이 크기 때문에 별도의 저장소가 필요합니다.

bash
데이터베이스 = 간단한 메모를 적는 수첩
파일 스토리지 = 사진 앨범, 동영상 하드디스크

클라우드 스토리지 서비스

네트워크란?

컴퓨터들이 서로 대화하는 길입니다.

bash
네트워크 = 전화선, 도로
           정보가 오가는 통로

HTTP vs HTTPS

웹에서 데이터를 주고받는 규칙(프로토콜)입니다.

bash
HTTP = 엽서 (누구나 내용을 볼 수 있음)
HTTPS = 밀봉된 편지 (받는 사람만 열어볼 수 있음)

도메인과 IP

웹 페이지를 어디서 만드느냐의 차이입니다.

CSR (Client-Side Rendering)

브라우저에서 화면을 그림

bash
CSR = 이케아 가구
      부품(JavaScript)을 받아서 내가 직접 조립

장점: 한번 로드 후 빠른 화면 전환 단점: 첫 로딩이 느림, 검색엔진 노출 어려움

SSR (Server-Side Rendering)

서버에서 완성된 화면을 보내줌

bash
SSR = 완제품 가구
      이미 조립된 상태로 배송

장점: 빠른 첫 화면, 검색엔진 최적화(SEO) 좋음 단점: 서버 부하 높음, 페이지 이동 시 깜빡임

비교 정리

인프라 = 서비스가 돌아가는 환경

**인프라(Infrastructure)**는 코드가 실행되기 위해 필요한 모든 환경입니다.

bash
코드 = 레시피
인프라 = 주방 (가스레인지, 냉장고, 조리도구, 전기, 수도)

아무리 좋은 레시피가 있어도
주방이 없으면 요리를 할 수 없습니다.

인프라 구성 요소

클라우드 서비스

예전에는 직접 서버 컴퓨터를 사서 관리했지만, 지금은 클라우드에서 빌려 씁니다.

배포 = 코드를 세상에 공개하는 것

**배포(Deploy)**는 내 컴퓨터에서만 돌아가던 코드를 인터넷에서 누구나 접속할 수 있게 만드는 과정입니다.

bash
개발 = 집에서 요리 연습
배포 = 가게를 열어서 손님 받기

배포 과정

배포 환경의 종류

Vercel이란?

Vercel은 배포를 아주 쉽게 만들어주는 서비스입니다.

원래 배포하려면:

1. 서버 구매/임대
2. 서버 설정
3. 네트워크 설정
4. HTTPS 인증서 설치
5. 도메인 연결
6. 코드 업로드
7. 실행 환경 설정 ...

Vercel을 쓰면: GitHub 연결 → 끝!

bash
일반 배포 = 직접 주방 차리고, 인테리어하고, 허가받고, 오픈
Vercel = 푸드코트 입점 (이미 다 세팅되어 있음)

Vercel 배포 과정

Vercel이 자동으로 해주는 것들

언제 Vercel을 쓰면 좋을까?

Vercel vs 직접 배포

전체 흐름 정리

---

핵심 용어 한줄 정리

---

다음 단계

이제 기본 개념을 알았으니, 실제로 해보세요!

1. 간단한 웹사이트 만들기 - HTML/CSS로 자기소개 페이지
2. Vercel로 배포해보기 - GitHub 연결 후 배포
3. Next.js 튜토리얼 - 공식 문서 따라하기
4. 데이터베이스 연결 - Supabase 같은 쉬운 서비스로 시작

💡 AI로 코드를 만들어도, 이 개념들을 알면 "왜 안 되지?"를 스스로 해결할 수 있습니다!