AX First Step · Week 3
브라우저로
내 서비스에 접속하자
만든 것을 세상에 내보내는 시간입니다.
오늘 끝나면 URL 하나가 생깁니다.
강의 2시간
실습 3시간
돌아보기
2주 전 대화를
기억하시나요?
HTML로 만든 파일,
지금은 내 컴퓨터에만 있습니다.
파일을 열면 주소창에 file:///C:/Users/... 라고 뜹니다.
이건 인터넷이 아닙니다. 내 하드 드라이브입니다.
세상에 내보내려면 — 서버에 올려야 합니다.
오늘 그걸 합니다.
기본 개념
서버 · 프론트엔드 · 백엔드
한 번만 정리합시다
🍽️
프론트엔드
손님이 보는 홀.
HTML · CSS · JS.
눈에 보이는 모든 것.
👨🍳
백엔드
손님이 못 보는 주방.
로그인·결제·데이터 처리.
서버에서 돌아간다.
🗄️
데이터베이스
재료를 쌓아두는 창고.
회원정보·게시글·주문 등
데이터가 여기 산다.
오늘은 프론트엔드를 세상에 꺼내는 날입니다.
4주 전체 흐름
이 강의를 관통하는
하나의 논리
📄 문서
→
🌐 HTML
→
⚙️ 시스템
→
☁️ SaaS
오늘은 세 번째 계단 —
HTML이 서버에 올라가면 시스템이 됩니다.
URL이 생기고, 누구나 접속할 수 있습니다.
배포 도구
Vercel — 왜 이걸 씁니까
🔗
GitHub에 push하면 자동 배포
코드를 올리는 순간 Vercel이 감지해서 자동으로 빌드하고 배포합니다. FTP, 서버 접속 필요 없음.
💸
무료 · 초보자 최적
개인 프로젝트는 완전 무료. 도메인도 자동으로 붙여줍니다. 서버 지식이 없어도 5분 안에 배포 가능.
GitHub → Vercel → yourname.vercel.app
이게 오늘 실습의 전부입니다.
백엔드 도구
Supabase — 백엔드 없이 백엔드 쓰기
-
DB
PostgreSQL 데이터베이스 — 테이블 만들고 데이터 저장. 클릭 몇 번으로.
-
인증
로그인·회원가입 — 이메일, 구글, 카카오 인증을 코드 없이 붙일 수 있습니다.
-
API
REST API 자동 생성 — 테이블을 만들면 API 주소가 즉시 생깁니다.
백엔드 개발자 없이도 데이터를 저장하고 꺼내는 서비스를 만들 수 있습니다.
도메인
digo.kr 같은 주소를
갖는다는 것
🏷️
브랜딩
yourname.vercel.app과
yourservice.kr은
같은 서비스가 아닙니다.
🤝
신뢰 · 프로페셔널함
내 도메인은 고객에게
"이 사람은 진지하다"는
첫인상을 줍니다.
도메인은 연 1~2만원. 가장 저렴한 브랜딩 투자입니다.
도메인 이메일
도메인이 물고 있는
이메일 시스템
noreply@내도메인.kr
hello@내도메인.kr
도메인 이메일은 서비스 신뢰도를 높입니다.
Cloudflare Email Routing으로 무료 설정 가능.
-
발신
회원가입 확인, 비밀번호 재설정 메일 — 내 도메인 이름으로 발송
-
수신
고객 문의 메일을 내 도메인 주소로 받아 Gmail로 포워딩
전체 인프라
내 서비스의
전체 스택 그림
🌐
도메인
digo.kr
→
🛡️
Cloudflare
DNS · CDN · 이메일
→
▲
Vercel
프론트 호스팅
→
🐙
GitHub
소스코드
→
💻
내 코드
HTML · JS
사용자가 도메인을 치면 — 이 흐름이 0.1초 안에 일어납니다.
실습 (3시간)
오늘 실습에서
직접 해볼 것
-
실습 1
GitHub 연동 — 내 HTML 파일을 GitHub 저장소에 올리기
-
실습 2
Vercel 배포 — GitHub 저장소를 Vercel에 연결 → 자동 배포 확인
-
실습 3
URL로 접속 — 내가 만든 URL을 핸드폰으로 열어보기
오늘 끝나면 yourname.vercel.app URL을 가져가십니다.
이번 주 숙제
다음 주까지
해올 것
-
🗺️
내 서비스의 인프라 그림 그려오기
도메인 → 어디에 배포? → DB는 어디? — 종이든 그림 파일이든 OK
실제로 구축했든, 아직 계획이든 모두 좋습니다
-
🔗
배포된 URL 공유하기
카카오톡 단톡방에 내 Vercel URL 올리기
접속이 안 되면 OK — 그것도 실습입니다
4주차에는 인프라 그림 발표합니다
"
파일을 만드는 것과
URL이 생기는 것은
완전히 다른 세계입니다.
— AX First Step · 3주차 핵심