[SemiClass X Claude] 4강

살아있는 서비스로 마무리하기

이미 배포한 웹사이트에 창고, 회원증, 알림벨, 바깥 창구를 붙입니다.

웹사이트 만들기 시리즈 마지막 강의

지난 흐름

브랜드에서 서비스까지

1강: 브랜드의 말, 이미지, 디자인 방향을 잡았습니다.
2강: 코딩 에이전트로 웹사이트를 만들고 배포했습니다.
3강: Supabase로 데이터, 로그인, CRUD를 붙였습니다.
4강: 파일, 실시간, 소셜 로그인, 외부 데이터를 붙여 마무리합니다.

오늘의 포지션

새 기능을 많이 외우는 날이 아닙니다

내 사이트에 필요한 확장 패턴을 하나씩 보고, 다음에도 반복할 수 있는 작업 순서를 익힙니다.

기본 목표OAuth, Storage, 외부 API 흐름을 이해하고 하나 이상 적용

선택 목표Realtime 댓글 또는 이모지 반응을 붙여보기

완료 기준공개 URL에서 로그인, 업로드, 외부 데이터 중 하나가 실제로 동작

오늘의 번역표

어려운 말은 생활어로 바꿉니다

Storage이미지와 파일을 보관하는 창고

OAuth구글 계정으로 들어오는 소셜 회원증

Realtime새 댓글과 반응을 알려주는 알림벨

외부 API내 사이트 밖 데이터에 물어보는 창구

OAuth

가입 폼을 직접 만들지 않아도 됩니다

소셜 로그인은 이미 익숙한 계정으로 입장하게 하는 회원증입니다. 중요한 건 redirect URL과 로그인 후 사용자 정보를 어디에 연결할지입니다.

Supabase Auth에서 provider를 켭니다.
배포 URL과 callback URL을 맞춥니다.
로그인 사용자의 id를 DB row의 owner_id와 연결합니다.

Storage

이미지는 DB가 아니라 창고에 둡니다

DB에는 파일 자체보다 파일 위치와 설명을 저장합니다. 창고에는 원본 파일을 두고, 장부에는 어느 칸에 있는지 적습니다.

bucket파일을 담는 창고 이름

path창고 안에서 파일이 놓인 위치

public URL방문자에게 보여줄 수 있는 파일 주소

Storage 실습

하나만 고르면 됩니다

포트폴리오 사이트라면 작품 썸네일 업로드
개인 브랜드 사이트라면 프로필 이미지 업로드
클래스/모임 사이트라면 자료 PDF 업로드
업로드 성공 후 DB row에 storage_path 또는 public_url 저장

Realtime

새로고침 없이 반응하게 만들기

Realtime은 누가 장부에 새 줄을 추가했을 때 화면에 바로 알려주는 알림벨입니다.

댓글새 댓글이 생기면 목록에 바로 추가

이모지 반응좋아요, 하트, 놀람 수가 바로 증가

주의점실시간보다 먼저 DB 저장과 권한이 맞아야 합니다

External API

바깥 창구에서 데이터를 가져옵니다

날씨, 환율, 뉴스, 지도, AI 요약처럼 내 DB에 없는 정보는 외부 API에 물어봅니다.

먼저 내 서비스에 진짜 필요한 데이터인지 확인합니다.
무료 플랜, 공식 문서, 인증 방식을 확인합니다.
실패했을 때 보여줄 예시 데이터를 준비합니다.

Secret

API Key는 금고 열쇠입니다

손님 화면에 금고 열쇠를 붙여두면 안 됩니다. 브라우저가 아니라 서버 route에서 대신 물어보게 만듭니다.

브라우저공개되어도 되는 anon key와 화면 표시용 데이터

서버 route외부 API key를 숨기고 대신 요청하는 창구

환경변수배포 환경에만 저장하는 비밀값

Agent Loop

한 번에 다 맡기지 않습니다

먼저 Plan mode로 작업 순서와 위험 요소를 받습니다.
OAuth, Storage, 외부 API, Realtime을 한 번에 섞지 않습니다.
기능 하나가 동작하면 배포 URL에서 확인합니다.
막히면 에러 메시지를 그대로 보여주고 작은 수정부터 요청합니다.

갤러리/포트폴리오형 사이트

작품 썸네일을 Storage에 올리고, DB에는 제목, 설명, 이미지 경로, 작성자를 저장합니다.

오늘 완성이미지 업로드 + 목록 표시

확장로그인 사용자만 자기 작품 수정

숙제댓글 또는 이모지 반응 Realtime

정보 제공형 사이트

외부 API를 서버 route로 호출하고, 화면에서는 정리된 데이터만 보여줍니다.

오늘 완성외부 데이터 카드 1개

확장새로고침 버튼과 fallback 데이터

숙제사용자별 즐겨찾기 저장

수업 운영

시간이 부족하면 이렇게 자릅니다

필수: OAuth 설정 확인
필수: Storage 또는 외부 API 중 하나 완성
선택: Realtime은 데모와 자료로 제공
마무리: 공개 URL에서 실제 동작 확인

검증

배포 전 마지막 체크

로그인 전/후 화면이 다르게 보이나?
파일 업로드 후 새로고침해도 남아 있나?
외부 API key가 브라우저 코드에 없나?
실패했을 때 빈 화면이 아니라 안내가 보이나?

다음 시리즈

이제 웹사이트에서 업무 자동화로

웹사이트 만들기는 이번 4강으로 마무리합니다. 다음부터는 반복 업무를 AI와 에이전트에게 맡기는 업무 자동화 강의로 넘어갑니다.

사이트를 만든 경험을 자동화 워크플로우의 입력 화면으로 연결합니다.

1 / 16