www.aiacademykim.co.kr
T1 웹 작동 기초 · 09강 · 비개발자 사고법

🔐 인증과 보안은 자물쇠다

코드는 AI가 짠다. 나는 "꼭 잠가서 저장해"라고 시키는 사장이다.

① 로그인 = 자물쇠 열기

아이디(너 누구냐?) + 비밀번호(진짜 본인 맞아?). 둘 다 맞아야 철컥 열린다.

🎬 0:38 자물쇠 열기
🔑 자물쇠 = 로그인 — 열쇠 두 개가 다 맞아야 문이 열린다
🔒
잠겨 있음

아이디와 비밀번호, 두 열쇠가 다 맞아야 이 문이 열립니다.

① 아이디 = 너 누구냐 ② 비밀번호 = 증명
🪪 아이디 = 이름 대기 + 🔑 비밀번호 = 나임을 증명 집을 나설 때 문 잠그듯, 창고도 아무나 못 열게 자물쇠를 건다.

② 소셜 로그인 = 열쇠공에게 맡기기

자물쇠를 직접 깎지 마세요. 카카오·네이버·구글이 신원보증서를 써주고, 열쇠공(파이어베이스 인증)이 열쇠를 통째로 관리합니다.

🎬 실전 1 — 소셜 로그인
🔑 소셜 로그인 = 열쇠공이 대신 만들어준 열쇠 — 신원보증서 받고 문 철컥
1
🙋
버튼 하나 클릭
손님은 비번을 새로 만들지 않는다. 버튼 한 번이면 끝.
2
🪪
신원보증서 발급
큰 회사가 "이 사람 저희 회원 맞아요 ✅" 하고 보증서를 써준다.
3
🔓
우리 가게 문 철컥
우리는 보증서만 믿고 문을 연다. 비번 보관 걱정도 열쇠공 몫.

💬 소셜 로그인

간편 가입·재방문용 기본 선택. 회원 기능이 필요해지는 순간 이걸 먼저.

📱 휴대폰 인증

번호가 진짜인지 확인. 문자 한 통도 비용 — 필요할 때만.

🪪 PASS·본인인증

성인 인증·실명 확인 등 의무가 있을 때만. 외부 유료 서비스 연동.

🖥 실제 화면 — 파이어베이스 콘솔의 '로그인 방법' 스위치 (사장이 직접 켠다)
G Google 스위치만 켜면 끝
💬 카카오 (OIDC) 개발자센터 등록 + 열쇠(키) + 돌아올 주소 필요
N 네이버 (OIDC) 개발자센터 등록 + 열쇠(키) + 돌아올 주소 필요
📱 전화번호 SMS 발송 비용 발생
👔 사장이 알아야 할 최소 4가지 : ① 제공업체 스위치 켜기 ② 키·시크릿 붙여넣기 ③ 돌아올 주소(리디렉션) 등록 ④ 허용 도메인 확인

코드는 AI가 다 짜지만 콘솔 스위치는 사장 몫입니다. 이메일 로그인을 만든다면 비밀번호 재설정·이메일 인증도 처음부터 같이 시키세요 — 손님은 비번을 반드시 까먹습니다.

③ 평문 vs 해싱 — 같은 '1234', 두 갈래로 저장

똑같이 "로그인 만들어줘"라고 시켜도, 비번이 '맨얼굴'로 적히느냐 '뒤섞여' 적히느냐가 갈린다.

🎬 챕터 — 비밀번호 해싱
화면엔 ●●●● 로 가려져요
✗ 그대로 저장 (평문)

창고 문 열면 비번이 글자 그대로

📂 창고에 적힌 모습
___
저장 버튼을 눌러보세요.
🦹 도둑이 창고를 털면 → 비번이 그대로 보임. 에어비앤비 주인이 전 객실 비번을 수첩 한 권에 몽땅 적어둔 꼴.
✓ 뒤섞어 저장 (해싱)

알아볼 수 없는 글자 뭉치로

📂 창고에 적힌 모습
___
저장 버튼을 눌러보세요.
🦹 도둑이 창고를 털어도 → 거꾸로 못 풉니다. 객실 개인 금고처럼, 손님이 직접 잠근 금고를 보관만 하는 셈. 로그인은? 입력을 즉석에서 똑같이 뒤섞어 뭉치끼리 비교 — 맞으면 철컥.
같은 입력 '1234' → 갈림길. 단어를 아는 사장은 "그대로 저장하지 말고 해싱해서 저장해"라고 콕 집어 시킨다.

큰 회사들도 비번을 그대로 저장했다가 통째로 털린 사고가 종종 일어납니다. (회사명·수치는 단정하지 않음)

④ API 키 = 가게끼리 쓰는 열쇠 (법인카드)

사람은 로그인으로, 프로그램끼리는 API 키로 신분 확인. 발급은 사장 몫, 보관은 .env 금고, 요금은 한도 관리.

🎬 실전 2 — API 키
🗝️ API 키 = 다른 가게(AI·지도·결제) 능력을 빌릴 때 내미는 가게 명의 법인카드 — 쓴 만큼 청구
🏪
내 앱 (우리 가게)
🗝️ — 주문 →
🤖
OpenAI 가게 (AI 능력 대여)
버튼을 눌러 두 가지 주문을 비교해 보세요.

🤖 오픈AI API (OpenAI API)

챗GPT 만든 회사의 AI 능력을 빌리는 창구. 쓴 만큼 요금이 나간다 — 그래서 열쇠 관리가 돈 문제.

🌐 오픈 API (open API)

네이버·카카오·공공데이터처럼 누구나 쓰라고 열어둔 주문 창구. 이름만 비슷하고 다른 말.

🖥 실제 화면 — 열쇠를 어디에 두느냐로 사고가 갈린다
✗ 코드에 그대로 (하드코딩)

코드가 공개되는 순간 열쇠도 공개

// main.js — 코드 안에 열쇠가 그대로 const apiKey = "sk-abc123비밀열쇠";
💳 이번 달 AI 사용료 ₩0
아직 코드는 내 컴퓨터에만 있어요.
✓ .env 금고에 보관

코드와 열쇠를 분리 — 깃허브에 안 올라감

# .env — 금고 파일 (깃허브 제외 목록에 등록) OPENAI_API_KEY=sk-●●●●●●●●●● // main.js — 코드에는 열쇠가 없다 const apiKey = process.env.OPENAI_API_KEY;
🛡 코드가 공개돼도 열쇠는 금고 안. AI한테 "키는 .env에 넣어줘" 한마디면 이렇게 해줍니다.
열쇠 발급(가입·카드 등록·키 복사)은 AI가 못 하는 사장 몫. 이미 새 나갔다면? 잠그는 게 아니라 버리고 재발급. .env는 깃이그노어(제외 명단)에 등록해 이중 잠금.
⛽ 유출이 아니어도 — 손님이 누를 때마다 내 지갑. 계량기 두 개를 단다

① 공급사 대시보드 — 월 사용 한도

OpenAI 같은 가게의 관리 화면에서 월 한도·예산 알림을 건다. 콘솔 스위치처럼 사장이 직접.

② 우리 앱 안 — 손님별 제한

무료는 하루 3회, 유료는 넉넉히 — 사용 횟수를 창고에 기록하고 서버가 검사(인가의 실전, 팔찌 색깔과 한 세트).

지시문 예 — "AI 기능은 회원만. 무료 회원은 하루 3회까지만. 사용 횟수는 창고에 기록해서 서버에서 확인해 줘. 요청 한 번에 비용이 얼마쯤인지도 알려줘." 과금 연출은 가상의 예시입니다. (회사명·수치는 단정하지 않음)

⑤ 인증 vs 인가 — 너 누구냐 ≠ 뭘 해도 되냐

'너 누구냐'(신분증 확인)와 '뭘 할 수 있어'(출입 권한)는 완전히 다른 개념이다.

🎬 챕터 — 인증 vs 인가
🪪 인증 = 신분 확인 · 🗝️ 인가 = 출입 권한 — 들어왔다고 다 만질 수 있는 건 아니다
🪪
① 인증(authentication) 통과 — "너 누구냐"
손님 (로그인 완료)
셋 다 로그인은 됐다. 신분은 확인됨. 그런데…
✓ 가능
🏠
내 정보 보기
✓ 가능
📦
주문 관리
✓ 가능
👥
회원 정보 삭제
✓ 가능
💰
매출·정산 보기
손님은 로그인은 됐지만(인증 O), 회원 정보나 매출은 못 건드립니다(인가 X). 역할 버튼을 바꿔 보세요.

🪪 인증 (Authentication)

"너 누구냐?" — 신분증 보여주고 본인 확인. 로그인이 곧 인증.

🗝️ 인가 (Authorization)

"뭘 해도 되냐?" — 들어온 사람이 어디까지 만질 수 있는지 권한으로 막는 것.

⑥ 유료 등급 = 팔찌 색깔

무료=흰 팔찌, 유료=금팔찌. 결제 성공 → 창고에 등급 기록 → 검사는 반드시 서버(주방)가.

🎬 실전 3 — 유료 권한
🎗️ 등급은 창고에 기록하고, 검사는 서버가 — 화면에서 숨기는 건 잠금이 아니다
1
💳
손님 결제 성공
한 달 9,900원 구독 결제 완료.
2
📨
"입금 확인!" 신호
결제 회사가 우리 주방(서버)에 웹훅 신호를 쏜다.
3
📦
창고에 등급 기록
회원 문서에 plan: 'pro' 한 줄을 적는다.
4
🎗️
금팔찌 착용
이제 유료 문 앞에서 서버가 창고를 보고 통과시킨다.
📦 창고 — 회원 문서
name: "김손님"
email: "guest@..."
plan: "free" ⚪ 흰 팔찌
🖥 실제 화면 — "화면에서 숨겼어요"가 왜 잠금이 아닌가
우리 앱 — 무료 회원 화면 plan: free
프리미엄 버튼은 화면에서 숨겨져(display:none) 있어요. 안 보이니까 안전할까요?
순서: ① 들춰보기 → ② 프리미엄 버튼 클릭 → ③ 서버 검사를 켜고 다시 클릭.
AI가 "화면에서 숨겨뒀어요" 하면 — "화면 말고, 서버에서 플랜 확인해서 막아." 이 한마디가 구독 장사의 자물쇠.

지시문 예 — "결제가 성공하면 회원 문서에 plan을 'pro'로 기록하고, 프로 기능은 서버에서 plan을 확인해서 막아줘. 화면에서만 숨기지 마."

⑦ 토큰 = 디지털 입장 팔찌

매번 비번 다시 안 묻게 — 한 번 로그인하면 받는 손목 팔찌, 그게 토큰이다. 팔찌 기간은 사장이 정한다.

🎬 챕터 — 토큰(JWT)
🎗️ 토큰 = 입장 팔찌 — 한 번 채워주면 이후엔 비번 대신 팔찌만 보여주면 통과
1
🔑
처음 한 번 로그인
아이디·비번으로 자물쇠를 연다. (이때만 비번 확인)
2
🎗️
입장 팔찌(토큰)를 받음
"이 사람 통과시켜 주세요" 적힌 디지털 팔찌를 손목에 채워줌.
🎗️ 팔찌 발급됨
3
🚶
이후엔 팔찌만 보여주면 통과
다른 페이지로 갈 때마다 비번 다시 안 묻고, 팔찌만 슥 보여주면 끝.
🎗️ 놀이공원 입장 팔찌처럼 — 한 번 차면 안에서 자유롭게 다님

✗ 팔찌 없으면

페이지 넘길 때마다 비번을 또 묻는다. 손님은 짜증, 화면은 멈춤.

✓ 팔찌(토큰) 있으면

한 번 로그인 → 팔찌로 자유 통행. 단, 팔찌를 도둑맞으면 안 되니 안전하게 보관·만료가 중요.

⏱ 팔찌 기간은 사장이 정한다

🏦 은행 앱 = 10분(민감 정보) · 🛍 쇼핑몰 = 30일(편의 우선). 손님이 "자꾸 로그아웃돼요" 하면 → "토큰 유지 기간을 2주로 늘려줘"라고 시키면 끝.

"다음 단계 ▷"를 눌러 한 단계씩 보세요. 비번은 처음 한 번만, 그 뒤엔 팔찌(토큰)로 다닙니다.

⑧ 좋은 지시 vs 나쁜 지시 (오늘의 AI 지시법)

단어를 알면 콕 집어 시키고(정방향), AI가 던진 말을 되받아친다(역방향).

🎬 챕터 — AI 지시법
정방향 내가 AI한테 시킨다 — 같은 "로그인 만들어줘", 한 줄 차이로 결과가 갈린다
✗ 나쁜 지시
결과가 여기에 나타납니다
✓ 좋은 지시
결과가 여기에 나타납니다
AI = 직원 · = 사장 단어를 아는 사장은 "꼭 잠가서 저장해"라고 시킨다. 모르는 사람은 활짝 열린 금고를 모른 채 손님한테 내준다.
역방향 AI가 나한테 말한다 — 모르면 끄덕끄덕, 알면 되받아치기 (사례 6개)
🤖 AI 비밀번호는 해싱해서 저장했어요.
🤖 AI 로그인하면 누구나 회원 목록을 볼 수 있게 해뒀어요.
🤖 AI 로그인 유지용 토큰을 발급했어요.
🤖 AI API 키는 코드에 직접 넣어뒀어요.
🤖 AI 유료 기능은 화면에서 숨겨뒀어요.
🤖 AI 토큰 유지 기간은 1시간으로 해뒀어요.
📋 오늘의 AI 지시법 — 복붙해서 바로 써보기
로그인/회원가입 만들어줘. 소셜 로그인은 파이어베이스 인증으로 붙이고, 비밀번호는 절대 그대로 저장하지 말고 해싱해서 저장해. 로그인 유지는 토큰으로 하고 만료·무효화 걸어줘. 손님·직원·관리자 권한을 나누고, 유료 기능은 서버에서 플랜을 확인해서 막아줘. API 키는 전부 .env에 넣고 깃이그노어에 등록해서 깃허브에 안 올라가게 해줘. AI 기능은 무료 회원 하루 3회로 제한하고, 사용 횟수는 서버에서 확인해 줘.

오늘 끝나고 이 지시법을 그대로 AI에게 붙여넣어 시켜보세요. 단어를 아는 사장이 직원을 부립니다.

외부강사 김지백 · AI 교육자료
← 강의 목록 🏠 홈