AI로 코드를 만들었는데, 이걸 어떻게 세상에 공개하지?
이 글은 개발 경험이 없는 분들이 "배포"까지 가는 여정을 이해할 수 있도록 돕기 위해 작성되었습니다.
웹 서비스는 레스토랑과 비슷합니다. 먼저 전체 그림을 보고 시작할게요.
| 레스토랑 | 웹 서비스 | 역할 |
|---|---|---|
| 손님 | 브라우저/앱 | 서비스를 사용하는 사람 |
| 홀 직원 | 프론트엔드 | 손님에게 보이는 화면 담당 |
| 주방 | 백엔드 | 실제 요리(데이터 처리) 담당 |
| 냉장고/창고 | 데이터베이스 | 재료(데이터) 보관 |
| 와인셀러 | 파일 스토리지 | 이미지, 동영상 보관 |
| 도로 | 네트워크 | 손님이 가게에 오는 길 |
클라이언트는 서비스를 요청하는 쪽입니다.
bash클라이언트 = "저 아메리카노 한 잔 주세요" 라고 주문하는 손님
서버는 요청을 처리하는 쪽입니다.
bash서버 = "네, 아메리카노 나왔습니다" 라고 응답하는 가게
사용자 눈에 보이는 모든 것입니다.
프론트엔드 = 레스토랑의 인테리어, 메뉴판, 테이블 배치 손님이 직접 보고 만지는 모든 것
사용 기술: HTML, CSS, JavaScript, React, Vue, Next.js
사용자 눈에 보이지 않는 처리 로직입니다.
백엔드 = 레스토랑의 주방 손님은 못 들어가지만, 실제 요리가 만들어지는 곳
사용 기술: Python, Java, Node.js, Go
데이터를 체계적으로 저장하는 곳입니다.
엑셀 파일을 생각해보세요. 여러 시트에 정보를 정리해서 저장하죠? 데이터베이스도 비슷하지만, 훨씬 빠르고 안전하게 많은 데이터를 관리할 수 있습니다.
bash데이터베이스 = 초대형 스마트 엑셀 수백만 명의 데이터를 동시에 처리 가능
| id | 이름 | 이메일 | 가입일 |
|---|---|---|---|
| 1 | 김철수 | kim@email.com | 2024-01-15 |
| 2 | 이영희 | lee@email.com | 2024-02-20 |
| 3 | 박민수 | park@email.com | 2024-03-10 |
| 종류 | 특징 | 비유 |
|---|---|---|
| 관계형 DB (SQL) | 엑셀처럼 표 형식, 구조가 정해짐 | 서류 캐비닛 |
| NoSQL | 자유로운 형식, 유연함 | 자유로운 메모장 |
이미지, 동영상, 문서 파일을 저장하는 곳입니다.
데이터베이스는 텍스트, 숫자 같은 작은 데이터에 적합합니다. 하지만 고화질 이미지나 동영상은 용량이 크기 때문에 별도의 저장소가 필요합니다.
bash데이터베이스 = 간단한 메모를 적는 수첩 파일 스토리지 = 사진 앨범, 동영상 하드디스크
| 서비스 | 제공사 | 특징 |
|---|---|---|
| S3 | AWS | 가장 많이 사용, 안정적 |
| Cloud Storage | Google 서비스와 연동 | |
| Blob Storage | Azure | Microsoft 서비스와 연동 |
컴퓨터들이 서로 대화하는 길입니다.
bash네트워크 = 전화선, 도로 정보가 오가는 통로
웹에서 데이터를 주고받는 규칙(프로토콜)입니다.
| 구분 | HTTP | HTTPS |
|---|---|---|
| 보안 | 암호화 없음 | 암호화됨 (SSL/TLS) |
| 주소창 | http:// | https:// + 🔒 자물쇠 |
| 용도 | 테스트용 | 실제 서비스 (필수!) |
bashHTTP = 엽서 (누구나 내용을 볼 수 있음) HTTPS = 밀봉된 편지 (받는 사람만 열어볼 수 있음)
| 개념 | 설명 | 예시 |
|---|---|---|
| IP 주소 | 컴퓨터의 실제 주소 (숫자) | 223.130.195.95 |
| 도메인 | 사람이 읽기 쉬운 이름 | www.naver.com |
| DNS | 도메인 → IP 변환 | 전화번호부 |
웹 페이지를 어디서 만드느냐의 차이입니다.
브라우저에서 화면을 그림
bashCSR = 이케아 가구 부품(JavaScript)을 받아서 내가 직접 조립
장점: 한번 로드 후 빠른 화면 전환 단점: 첫 로딩이 느림, 검색엔진 노출 어려움
서버에서 완성된 화면을 보내줌
bashSSR = 완제품 가구 이미 조립된 상태로 배송
장점: 빠른 첫 화면, 검색엔진 최적화(SEO) 좋음 단점: 서버 부하 높음, 페이지 이동 시 깜빡임
| 구분 | CSR | SSR |
|---|---|---|
| 화면 생성 위치 | 브라우저 | 서버 |
| 첫 로딩 속도 | 느림 | 빠름 |
| 이후 속도 | 빠름 | 보통 |
| SEO | 어려움 | 좋음 |
| 대표 기술 | React, Vue | Next.js, Nuxt |
**인프라(Infrastructure)**는 코드가 실행되기 위해 필요한 모든 환경입니다.
bash코드 = 레시피 인프라 = 주방 (가스레인지, 냉장고, 조리도구, 전기, 수도) 아무리 좋은 레시피가 있어도 주방이 없으면 요리를 할 수 없습니다.
| 구성 요소 | 역할 | 비유 |
|---|---|---|
| 서버 | 코드를 실행하는 컴퓨터 | 주방 공간 |
| 네트워크 | 인터넷 연결 | 도로, 배달 시스템 |
| 스토리지 | 파일 저장 공간 | 창고 |
| 데이터베이스 | 데이터 저장 | 냉장고 |
| 보안 | 해킹 방지 | 잠금장치, CCTV |
| 도메인 | 웹 주소 | 가게 간판, 주소 |
예전에는 직접 서버 컴퓨터를 사서 관리했지만, 지금은 클라우드에서 빌려 씁니다.
| 클라우드 | 제공사 | 특징 |
|---|---|---|
| AWS | Amazon | 가장 많이 사용, 기능 풍부 |
| GCP | AI/ML 강점 | |
| Azure | Microsoft | 기업용 강점 |
**배포(Deploy)**는 내 컴퓨터에서만 돌아가던 코드를 인터넷에서 누구나 접속할 수 있게 만드는 과정입니다.
bash개발 = 집에서 요리 연습 배포 = 가게를 열어서 손님 받기
| 단계 | 설명 | 비유 |
|---|---|---|
| 1. 코드 업로드 | 코드를 저장소에 올림 | 레시피를 본사에 전달 |
| 2. 빌드 | 코드를 실행 가능하게 변환 | 재료 손질, 준비 |
| 3. 배포 | 서버에 코드 설치 | 주방에 세팅 |
| 4. 서비스 시작 | 사용자 접속 가능 | 가게 오픈! |
| 환경 | 목적 | 접근 |
|---|---|---|
| 개발 (Development) | 개발자가 코드 작성 | 개발자만 |
| 스테이징 (Staging) | 배포 전 테스트 | 팀 내부 |
| 프로덕션 (Production) | 실제 서비스 | 모든 사용자 |
Vercel은 배포를 아주 쉽게 만들어주는 서비스입니다.
원래 배포하려면:
Vercel을 쓰면: GitHub 연결 → 끝!
bash일반 배포 = 직접 주방 차리고, 인테리어하고, 허가받고, 오픈 Vercel = 푸드코트 입점 (이미 다 세팅되어 있음)
| 기능 | 설명 |
|---|---|
| 자동 빌드 | 코드 올리면 자동으로 빌드 |
| 자동 배포 | 빌드 끝나면 자동으로 배포 |
| HTTPS | 무료 SSL 인증서 자동 적용 |
| 도메인 | 기본 도메인 무료 제공 |
| CDN | 전 세계 빠른 접속 |
| 미리보기 | PR마다 테스트 URL 생성 |
| 항목 | Vercel | 직접 배포 (AWS 등) |
|---|---|---|
| 난이도 | 쉬움 (클릭 몇 번) | 어려움 (학습 필요) |
| 비용 | 무료 티어 있음 | 사용량에 따라 과금 |
| 커스터마이징 | 제한적 | 자유로움 |
| 적합한 경우 | 프론트엔드, 빠른 배포 | 복잡한 백엔드, 대규모 서비스 |
| 용어 | 한줄 설명 |
|---|---|
| 클라이언트 | 서비스를 요청하는 쪽 (브라우저, 앱) |
| 서버 | 요청을 처리하는 쪽 (24시간 켜진 컴퓨터) |
| 프론트엔드 | 사용자가 보는 화면 |
| 백엔드 | 보이지 않는 로직 처리 |
| 데이터베이스 | 데이터 저장소 (초대형 엑셀) |
| 파일 스토리지 | 이미지/동영상 저장소 |
| HTTPS | 암호화된 안전한 통신 |
| CSR | 브라우저에서 화면 생성 |
| SSR | 서버에서 화면 생성 |
| 인프라 | 서비스 운영에 필요한 모든 환경 |
| 배포 | 코드를 인터넷에 공개하는 것 |
| Vercel | 쉽고 빠른 배포 서비스 |
이제 기본 개념을 알았으니, 실제로 해보세요!
💡 AI로 코드를 만들어도, 이 개념들을 알면 "왜 안 되지?"를 스스로 해결할 수 있습니다!
댓글을 작성하려면 로그인이 필요합니다.
AI로 코드를 만들었는데, 이걸 어떻게 세상에 공개하지?
이 글은 개발 경험이 없는 분들이 "배포"까지 가는 여정을 이해할 수 있도록 돕기 위해 작성되었습니다.
웹 서비스는 레스토랑과 비슷합니다. 먼저 전체 그림을 보고 시작할게요.
| 레스토랑 | 웹 서비스 | 역할 |
|---|---|---|
| 손님 | 브라우저/앱 | 서비스를 사용하는 사람 |
| 홀 직원 | 프론트엔드 | 손님에게 보이는 화면 담당 |
| 주방 | 백엔드 | 실제 요리(데이터 처리) 담당 |
| 냉장고/창고 | 데이터베이스 | 재료(데이터) 보관 |
| 와인셀러 | 파일 스토리지 | 이미지, 동영상 보관 |
| 도로 | 네트워크 | 손님이 가게에 오는 길 |
클라이언트는 서비스를 요청하는 쪽입니다.
bash클라이언트 = "저 아메리카노 한 잔 주세요" 라고 주문하는 손님
서버는 요청을 처리하는 쪽입니다.
bash서버 = "네, 아메리카노 나왔습니다" 라고 응답하는 가게
사용자 눈에 보이는 모든 것입니다.
프론트엔드 = 레스토랑의 인테리어, 메뉴판, 테이블 배치 손님이 직접 보고 만지는 모든 것
사용 기술: HTML, CSS, JavaScript, React, Vue, Next.js
사용자 눈에 보이지 않는 처리 로직입니다.
백엔드 = 레스토랑의 주방 손님은 못 들어가지만, 실제 요리가 만들어지는 곳
사용 기술: Python, Java, Node.js, Go
데이터를 체계적으로 저장하는 곳입니다.
엑셀 파일을 생각해보세요. 여러 시트에 정보를 정리해서 저장하죠? 데이터베이스도 비슷하지만, 훨씬 빠르고 안전하게 많은 데이터를 관리할 수 있습니다.
bash데이터베이스 = 초대형 스마트 엑셀 수백만 명의 데이터를 동시에 처리 가능
| id | 이름 | 이메일 | 가입일 |
|---|---|---|---|
| 1 | 김철수 | kim@email.com | 2024-01-15 |
| 2 | 이영희 | lee@email.com | 2024-02-20 |
| 3 | 박민수 | park@email.com | 2024-03-10 |
| 종류 | 특징 | 비유 |
|---|---|---|
| 관계형 DB (SQL) | 엑셀처럼 표 형식, 구조가 정해짐 | 서류 캐비닛 |
| NoSQL | 자유로운 형식, 유연함 | 자유로운 메모장 |
이미지, 동영상, 문서 파일을 저장하는 곳입니다.
데이터베이스는 텍스트, 숫자 같은 작은 데이터에 적합합니다. 하지만 고화질 이미지나 동영상은 용량이 크기 때문에 별도의 저장소가 필요합니다.
bash데이터베이스 = 간단한 메모를 적는 수첩 파일 스토리지 = 사진 앨범, 동영상 하드디스크
| 서비스 | 제공사 | 특징 |
|---|---|---|
| S3 | AWS | 가장 많이 사용, 안정적 |
| Cloud Storage | Google 서비스와 연동 | |
| Blob Storage | Azure | Microsoft 서비스와 연동 |
컴퓨터들이 서로 대화하는 길입니다.
bash네트워크 = 전화선, 도로 정보가 오가는 통로
웹에서 데이터를 주고받는 규칙(프로토콜)입니다.
| 구분 | HTTP | HTTPS |
|---|---|---|
| 보안 | 암호화 없음 | 암호화됨 (SSL/TLS) |
| 주소창 | http:// | https:// + 🔒 자물쇠 |
| 용도 | 테스트용 | 실제 서비스 (필수!) |
bashHTTP = 엽서 (누구나 내용을 볼 수 있음) HTTPS = 밀봉된 편지 (받는 사람만 열어볼 수 있음)
| 개념 | 설명 | 예시 |
|---|---|---|
| IP 주소 | 컴퓨터의 실제 주소 (숫자) | 223.130.195.95 |
| 도메인 | 사람이 읽기 쉬운 이름 | www.naver.com |
| DNS | 도메인 → IP 변환 | 전화번호부 |
웹 페이지를 어디서 만드느냐의 차이입니다.
브라우저에서 화면을 그림
bashCSR = 이케아 가구 부품(JavaScript)을 받아서 내가 직접 조립
장점: 한번 로드 후 빠른 화면 전환 단점: 첫 로딩이 느림, 검색엔진 노출 어려움
서버에서 완성된 화면을 보내줌
bashSSR = 완제품 가구 이미 조립된 상태로 배송
장점: 빠른 첫 화면, 검색엔진 최적화(SEO) 좋음 단점: 서버 부하 높음, 페이지 이동 시 깜빡임
| 구분 | CSR | SSR |
|---|---|---|
| 화면 생성 위치 | 브라우저 | 서버 |
| 첫 로딩 속도 | 느림 | 빠름 |
| 이후 속도 | 빠름 | 보통 |
| SEO | 어려움 | 좋음 |
| 대표 기술 | React, Vue | Next.js, Nuxt |
**인프라(Infrastructure)**는 코드가 실행되기 위해 필요한 모든 환경입니다.
bash코드 = 레시피 인프라 = 주방 (가스레인지, 냉장고, 조리도구, 전기, 수도) 아무리 좋은 레시피가 있어도 주방이 없으면 요리를 할 수 없습니다.
| 구성 요소 | 역할 | 비유 |
|---|---|---|
| 서버 | 코드를 실행하는 컴퓨터 | 주방 공간 |
| 네트워크 | 인터넷 연결 | 도로, 배달 시스템 |
| 스토리지 | 파일 저장 공간 | 창고 |
| 데이터베이스 | 데이터 저장 | 냉장고 |
| 보안 | 해킹 방지 | 잠금장치, CCTV |
| 도메인 | 웹 주소 | 가게 간판, 주소 |
예전에는 직접 서버 컴퓨터를 사서 관리했지만, 지금은 클라우드에서 빌려 씁니다.
| 클라우드 | 제공사 | 특징 |
|---|---|---|
| AWS | Amazon | 가장 많이 사용, 기능 풍부 |
| GCP | AI/ML 강점 | |
| Azure | Microsoft | 기업용 강점 |
**배포(Deploy)**는 내 컴퓨터에서만 돌아가던 코드를 인터넷에서 누구나 접속할 수 있게 만드는 과정입니다.
bash개발 = 집에서 요리 연습 배포 = 가게를 열어서 손님 받기
| 단계 | 설명 | 비유 |
|---|---|---|
| 1. 코드 업로드 | 코드를 저장소에 올림 | 레시피를 본사에 전달 |
| 2. 빌드 | 코드를 실행 가능하게 변환 | 재료 손질, 준비 |
| 3. 배포 | 서버에 코드 설치 | 주방에 세팅 |
| 4. 서비스 시작 | 사용자 접속 가능 | 가게 오픈! |
| 환경 | 목적 | 접근 |
|---|---|---|
| 개발 (Development) | 개발자가 코드 작성 | 개발자만 |
| 스테이징 (Staging) | 배포 전 테스트 | 팀 내부 |
| 프로덕션 (Production) | 실제 서비스 | 모든 사용자 |
Vercel은 배포를 아주 쉽게 만들어주는 서비스입니다.
원래 배포하려면:
Vercel을 쓰면: GitHub 연결 → 끝!
bash일반 배포 = 직접 주방 차리고, 인테리어하고, 허가받고, 오픈 Vercel = 푸드코트 입점 (이미 다 세팅되어 있음)
| 기능 | 설명 |
|---|---|
| 자동 빌드 | 코드 올리면 자동으로 빌드 |
| 자동 배포 | 빌드 끝나면 자동으로 배포 |
| HTTPS | 무료 SSL 인증서 자동 적용 |
| 도메인 | 기본 도메인 무료 제공 |
| CDN | 전 세계 빠른 접속 |
| 미리보기 | PR마다 테스트 URL 생성 |
| 항목 | Vercel | 직접 배포 (AWS 등) |
|---|---|---|
| 난이도 | 쉬움 (클릭 몇 번) | 어려움 (학습 필요) |
| 비용 | 무료 티어 있음 | 사용량에 따라 과금 |
| 커스터마이징 | 제한적 | 자유로움 |
| 적합한 경우 | 프론트엔드, 빠른 배포 | 복잡한 백엔드, 대규모 서비스 |
| 용어 | 한줄 설명 |
|---|---|
| 클라이언트 | 서비스를 요청하는 쪽 (브라우저, 앱) |
| 서버 | 요청을 처리하는 쪽 (24시간 켜진 컴퓨터) |
| 프론트엔드 | 사용자가 보는 화면 |
| 백엔드 | 보이지 않는 로직 처리 |
| 데이터베이스 | 데이터 저장소 (초대형 엑셀) |
| 파일 스토리지 | 이미지/동영상 저장소 |
| HTTPS | 암호화된 안전한 통신 |
| CSR | 브라우저에서 화면 생성 |
| SSR | 서버에서 화면 생성 |
| 인프라 | 서비스 운영에 필요한 모든 환경 |
| 배포 | 코드를 인터넷에 공개하는 것 |
| Vercel | 쉽고 빠른 배포 서비스 |
이제 기본 개념을 알았으니, 실제로 해보세요!
💡 AI로 코드를 만들어도, 이 개념들을 알면 "왜 안 되지?"를 스스로 해결할 수 있습니다!
댓글을 작성하려면 로그인이 필요합니다.