채널톡 아이콘
개발 · 프로그래밍

/

웹 개발

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

🔥 HTML + Tailwind CSS + 순수 JavaScript만으로 완성하는 Firebase 사용자 인증! 소셜 로그인·휴대폰·위치 인증까지, 복잡한 백엔드 없이 쉽고 빠르게 계정 시스템 구축합니다.

(5.0) 수강평 2개

수강생 20명

HTML/CSSTailwindCSSJavaScriptFirebase서버리스
Thumbnail

초급자를 위해 준비한
[웹 개발, Firebase] 강의입니다.

이런 걸 배울 수 있어요

  • Firebase 인증 4가지 (소셜, 휴대폰, GPS 위치기반, 이메일)로 계정 시스템 완벽 구축

  • Tailwind CSS로 반응형 디자인을 빠르게 적용하는 법

  • 순수 JavaScript로 로그인 상태 관리 및 데이터 처리

  • 로그인 UX 개선! 사용자 친화적인 인증 UI 설계 방법

강의 가격 조정과 관련하여 안내드립니다. (2025-02-19)

이번 가격 조정은 다음 시리즈 출시 및 전체적인 가격 조정을 고려하여 결정된 사항입니다. 기존 가격으로 구매하신 수강생분들께서는 갑작스러운 변경으로 인해 아쉬움을 느끼실 수 있을 것 같아 죄송한 마음입니다.

이에, 이전 가격으로 구매하신 분들께 우선적으로 추가 기능 요청을 반영해드리거나, 다음 시리즈 강의에 대한 할인권을 제공해드릴 예정입니다.
궁금하신 사항이나 원하시는 부분이 있으시면 개인 이메일(dakgangjung122@gmail.com) 또는 질문 게시판을 통해 남겨주시면 최대한 빠르게 대응해드리겠습니다.

언제나 강의를 들어주셔서 감사드리며, 더욱 좋은 강의로 보답하겠습니다. 😊

백엔드 없이 로그인 시스템을 만들 수 있을까요? 🤔

대부분의 웹사이트와 앱에는 로그인 & 회원가입이 필수입니다.
Firebase Authentication을 활용하면 소셜 로그인, 휴대폰 인증, 위치 인증까지 백엔드 없이 구현할 수 있습니다.

이 강의에서는 HTML/CSS, TailwindCSS, JavaScript, Firebase, 서버리스로 완성형 인증 시스템을 구축하는 방법을 배웁니다.
대회, 해커톤, 캡스톤 프로젝트에서도 활용할 수 있도록 실전에서 바로 적용 가능한 회원가입 & 로그인 시스템을 함께 만들어 보세요!

복잡한 백엔드는 필요 없습니다. 이제 Firebase 하나로 강력한 계정 시스템을 완성해 보세요! 🚀

이 강의의 특징

📌 백엔드 없이도 강력한 사용자 인증 시스템 구축!
Firebase Authentication을 활용해 소셜 로그인, 휴대폰 인증, 위치 기반 인증까지 쉽고 빠르게 구현하는 실전 노하우를 제공합니다.

📌 해커톤·대회·캡스톤 프로젝트에서 바로 적용!
빠르게 MVP(최소 기능 제품)를 개발할 수 있도록 Firebase Security Rules, UI 디자인, 데이터 관리 방법까지 다룹니다.

📌 이론보다 실습 중심! (이론 10% + 실습 90%)
직접 코드를 작성하고 테스트하며, Firebase 인증이 실제 프로젝트에서 어떻게 작동하는지 검증합니다.

📌 초·중·고·대학생 대회 & 프로젝트에 최적화!
Firebase를 활용해 빠르게 프로토타입을 개발하고, 실전에서 활용할 수 있도록 직접 따라하며 배우는 실습형 강의입니다.


HTML, JavaScript의 기초만 알고 있다면 누구나 쉽게 따라올 수 있어요!

소셜 로그인·휴대폰·위치 인증까지! Firebase 사용자 인증 완벽 가이드 소개동영상

이런 분들께 추천해요

백엔드 개발, 어떻게 할까?

웹 기초는 알고 있지만, 회원가입·로그인 기능을 직접 구현해 보고 싶은 학생·개발자

해커톤·캡스톤 프로젝트
소셜 로그인, 휴대폰 인증, 위치 인증을 Firebase로 빠르고 쉽게 구현하고 싶은 분

백엔드 없이 로그인 시스템
React·Node.js 없이도 HTML, CSS, JavaScript만으로 Firebase 인증 시스템을 구축하고 싶은 분

수강 후에는 이런 걸 할 수 있어요!

  • Firebase로 로그인 시스템을 직접 만들고 활용할 수 있어요.

  • 소셜 로그인, 휴대폰 인증, 위치 인증을 구현하고 실제 서비스에도 적용할 수 있는 실력을 갖추게 됩니다.

  • 보안과 성능을 고려한 인증 시스템을 만들 수 있어요.

  • Firebase Security Rules을 설정하고, 안전한 사용자 인증 시스템을 구축할 수 있습니다.


  • React·Node.js 없이도 Firebase만으로 웹 서비스를 개발할 수 있어요.

  • HTML, CSS, JavaScript만으로 완성형 로그인·회원가입 기능을 구현할 수 있습니다. 🚀

이런 내용을 배워요.

Firebase: 이메일 인증, 사용자 관리

Firebase Authentication의 이메일 인증은 간단해 보이지만, 보안과 확장성을 고려하지 않으면 안정적인 서비스 운영이 어려울 수 있습니다.

이 강의에서는 단순한 이메일 로그인 구현을 넘어,

보안 설정, 사용자 데이터 관리, 실전에서 적용 가능한 Firebase 인증 전략까지 다룹니다.

Firebase: 휴대폰 인증, OTP 보안

Firebase 휴대폰 인증은 이메일보다 빠르고 간편한 로그인 방식입니다. 하지만 단순히 OTP를 보내고 입력하는 것만으로 충분할까요?

reCAPTCHA 인증을 활용한 자동화 공격 방어!
더 안전하고 효율적인 휴대폰 인증 구현 방법을 익혀보세요!

Firebase: Google Authenticator TOTP 인증

Firebase Authentication에 Google Authenticator 기반 TOTP 인증을 추가하면 보안을 더욱 강화할 수 있습니다.

이 강의에서는 단순한 이메일 로그인 구현을 넘어,
TOTP 기반 2단계 인증(2FA) 설정 및 Google Authenticator 연동 및 코드 검증까지 다루며, 보다 안전한 인증 시스템을 구축하는 방법을 배웁니다.

Firebase: GPS기반 위치 인증

Firebase Authentication에 위치 기반 인증을 추가하면 보안을 강화할 수 있습니다.

이 강의에서는 Navigator Geolocation API로 사용자 위치를 확인하고 Leaflet.js를 활용해 인증 가능 영역을 설정하며, 지정된 지역 내에서만 로그인을 허용하는 방법을 다루며, 보다 안전한 위치 기반 인증 시스템을 구축하는 방법을 배웁니다.

수강 전 참고 사항

실습 환경

  • 강의는 Window 10 기준으로 설명합니다. 다른 OS 환경에서도 완벽하게 개발이 가능합니다!

  • 강의에서는 Visual Studio Code를 사용합니다.

학습 자료

  • 노션, 깃허브 링크로 제공해 드립니다!

선수 지식 및 유의사항

  • 기본적인 HTML 태그 (h1 ~ h6, input 등

    의 태그)

  • async await을 이해하고 있으시다면 좋습니다!

  • javascript 변수, 함수 선언

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 백엔드 없이 로그인 시스템을 만들고 싶은 분들

  • Firebase 인증을 활용해 실무형 프로젝트를 경험해보고 싶은 웹 개발자

  • 회원가입·로그인 기능을 포함한 포트폴리오 웹사이트를 직접 만들어보고 싶은 분들

  • 초·중·고·대학생 대회, 캡스톤 프로젝트에서 빠르게 인증 시스템을 구축하고 싶은 분들

선수 지식,
필요할까요?

  • 기본적인 HTML 태그

  • JavaScript 변수, 함수를 만드는 법

안녕하세요
닭강정입니다.

116

명

수강생

4

개

수강평

17

개

답변

5.0

점

강의 평점

2

개

강의

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

더보기

커리큘럼

전체

39개 ∙ (6시간 47분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

2개

5.0

2개의 수강평

닭강정님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드강의 썸네일

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

₩44,000

25%

₩33,000

중급이상 / React, Node.js, MongoDB, HTML/CSS, JavaScript

5.0

(2)

React, Node.js, MongoDB를 활용해 회사 웹사이트를 직접 제작하는 과정을 배울 수 있는 실전 강의입니다. 간단한 React, Node.js 배경으로 풀스택 프로젝트를 같이 만들어요!

중급이상

중급이상

React, Node.js, MongoDB

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

React 완전 끝내기: useHoooooook강의 썸네일

React 완전 끝내기: useHoooooook

김영보

₩44,000

초급 / React, JavaScript, DOM

5.0

(2)

100+

넓고 깊으면서 자세하게 React의 state와 hook을 배울 수 있습니다. React 공식 문서의 95% 이상을 다룹니다. 본 강좌로 React를 끝낼 수 있습니다.

초급

초급

React, JavaScript, DOM

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌강의 썸네일

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

velopert(김 민준)

₩16,500

초급 / JavaScript, React

4.7

(371)

5,600+

프론트엔드 프레임워크, 리액트(React)를 누구든지 쉽고 재밌게 시작할 수 있도록 만들어진 강의입니다.

초급

초급

JavaScript, React

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기강의 썸네일

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

₩59,400

중급이상 / 디자인 패턴, 객체지향, TypeScript, JavaScript, canvas

5.0

(5)

300+

타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

중급이상

중급이상

디자인 패턴, 객체지향, TypeScript

제대로 파고드는 HTML CSS - by 얄코(Yalco)강의 썸네일

제대로 파고드는 HTML CSS - by 얄코(Yalco)

얄팍한 코딩사전

₩44,000

입문 / HTML/CSS

4.9

(95)

2,600+

코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 HTML & CSS 박사로 들어주는 끝판왕 강좌!

입문

입문

HTML/CSS

Sencha ExtJS 6 로 화면개발 더이상 고민하지 말자 - 기초편강의 썸네일

Sencha ExtJS 6 로 화면개발 더이상 고민하지 말자 - 기초편

개발로짜

무료

초급 / JavaScript, ExtJS

4.9

(29)

1,700+

디자이너 + 퍼블리셔 + 개발자의 조합으로 대부분의 사이트를 제작합니다. 순수하게 Sencha의 ExtJS 컴포넌트를 이용하면, 디자이너와 퍼블리셔 없이 화면개발이 가능합니다. 단, 상용화 목적으로 ExtJS를 사용하신다면, 라이센스정책을 정확하게 숙지하시고 사용하시길 바라겠습니다.

초급

초급

JavaScript, ExtJS

자바스크립트 중고급: 엔진 핵심강의 썸네일

자바스크립트 중고급: 엔진 핵심

김영보

₩55,000

초급 / JavaScript

4.7

(98)

1,600+

4개 강좌로 구성된 자바스크립트 바이블 강좌의 2번째 강좌입니다. 자바스크립트 엔진 이해를 통해 자바스크립트에 최적화된 프로그램을 개발할 수 있습니다. 자신 있게 시스템을 설계할 수 있습니다.

초급

초급

JavaScript

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.2강의 썸네일

자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.2

유용한IT학습

₩56,100

입문 / JavaScript, jQuery

4.8

(61)

59,000+

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 코딩을 처음 접하시는 분들도 쉽게 이해할 수 있도록 차근차근 설명하고 있습니다. Part 2는 자바스크립트의 함수와 이벤트, 함수의 종류, 코어 라이브러리를 다루고 있습니다.

입문

입문

JavaScript, jQuery

클린업 JavaScript: 점프업!강의 썸네일

클린업 JavaScript: 점프업!

김영보

₩44,000

25%

₩33,000

초급 / JavaScript

자바스크립트 최종 코스! ES2025 기준 실행 콘텍스트 구조와 방법, Event Loop, 멀티 스레딩을 다룹니다. 자바스크립트 언어에 담겨진 언어 문화를 다룹니다.

초급

초급

JavaScript

웹디자인기능사 실기 문제풀이 A-1강의 썸네일

웹디자인기능사 실기 문제풀이 A-1

Dongho Lee

₩11,000

초급 / HTML/CSS, 웹 디자인

4.5

(2)

웹 디자인 기능사 실기시험을 충실하게 준비합니다. 다양한 방법으로 문제를 해결합니다.

초급

초급

HTML/CSS, 웹 디자인

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

₩33,000

초급 / Firebase, React

4.9

(25)

500+

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

초급

Firebase, React

효과적인 모바일 UX 만들기 (디자인 + 코딩)강의 썸네일

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

₩79,200

초급 / HTML/CSS, jQuery, XD

4.5

(46)

106,900+

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

초급

HTML/CSS, jQuery, XD

클린업 JavaScript: 베이스 빌드업!강의 썸네일

클린업 JavaScript: 베이스 빌드업!

김영보

₩44,000

초급 / JavaScript, 면접, 기술면접

5.0

(3)

100+

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

초급

JavaScript, 면접, 기술면접

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React강의 썸네일

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

₩38,500

초급 / MongoDB, Express, React, Node.js, Firebase

4.7

(27)

300+

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

초급

초급

MongoDB, Express, React

처음하는 플러터(Flutter) 기초부터 실전까지 [풀스택 Part4] (쉽고 견고하게 단계별로 다양한 프로젝트까지)강의 썸네일

처음하는 플러터(Flutter) 기초부터 실전까지 [풀스택 Part4] (쉽고 견고하게 단계별로 다양한 프로젝트까지)

잔재미코딩 DaveLee

₩79,200

초급 / Flutter, Firebase, firestore, dart, frontend

4.8

(18)

500+

본 강의는 dart 프로그래밍 기초부터 Flutter 기본 및 중급 기능, 심지어 백엔드인 Firebase를 연동하여, 실제 프로젝트까지! Flutter를 단계별로 익힐 수 있는 완성도 높은 강의입니다.

초급

초급

Flutter, Firebase, firestore

[2024]리베하얀의 HTML 기초 실무강의 썸네일

[2024]리베하얀의 HTML 기초 실무

리베하얀

₩132,000

입문 / HTML/CSS, nvda

HTML 기초문법을 다루는 강의입니다. 다양한 사례의 미션이 존재하며, 실무에서 사용가능한 최신문법까지 알려드립니다.

입문

입문

HTML/CSS, nvda

아바타 커뮤니티앱 만들기 (React Native)강의 썸네일

아바타 커뮤니티앱 만들기 (React Native)

Kyo

₩74,800

초급 / React Native, TypeScript, react-query, React, JavaScript

5.0

(8)

100+
Update
Update

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

초급

초급

React Native, TypeScript, react-query

CSS GRID 마스터: FIGMA 디자인 웹구현 실전강의 썸네일

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

₩27,500

초급 / HTML/CSS, jQuery, Figma

CSS Grid는 복잡한 레이아웃도 간단하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이번 강의에서는 CSS Grid의 핵심 개념부터 실전 활용법까지 단계별로 쉽게 배울 수 있도록 구성했습니다. 이제 복잡한 float과 flexbox에 얽매이지 말고, 효율적인 레이아웃 설계의 정석을 배워보세요! 지금 바로 시작하세요!

초급

초급

HTML/CSS, jQuery, Figma

실무중심의 HTML5 시각화 프로그래밍강의 썸네일

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

₩33,000

초급 / HTML/CSS

3.5

(2)

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

초급

HTML/CSS

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

₩44,000

초급 / HTML/CSS, jQuery, JavaScript, 웹 디자인

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

초급

HTML/CSS, jQuery, JavaScript

아무도 알려주지 않는 WebRTC를 사용한 P2P통신강의 썸네일

아무도 알려주지 않는 WebRTC를 사용한 P2P통신

July

₩46,200

입문 / Go, webrtc, p2p, JavaScript, Socket.io

5.0

(6)

WebRTC를 활용하여 구현하는 웹캠과 피어간 통신에 대해서 학습할 수 있습니다.

입문

입문

Go, webrtc, p2p

₩18,700