채널톡 아이콘

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

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

날개 달린 동전

마케팅 파트너스

강의를 추천하고 성장과 수익을 만들어 보세요!

이런 걸 배울 수 있어요

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

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

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

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

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼 강의드디어 오픈됐습니다!
AI 추천 시스템 + 한자 필기 학습 기능까지 담은 프로젝트 많은 관심과 수강 부탁드립니다 😊

정가 29,700원강의 바로가기!

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

대부분의 웹사이트와 앱에는 로그인 & 회원가입이 필수입니다.
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 변수, 함수를 만드는 법

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

321

수강생

17

수강평

35

답변

5.0

강의 평점

5

강의

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

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

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

 

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

 

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

더보기

커리큘럼

전체

39개 ∙ (6시간 47분)

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

수강평

전체

4개

5.0

4개의 수강평

  • hdr.ecssh님의 프로필 이미지
    hdr.ecssh

    수강평 3

    평균 평점 5.0

    5

    13% 수강 후 작성

    • 닭강정
      지식공유자

      수강해 주셔서 감사합니다! 유익한 강의가 되길 바라며, 열심히 학습하시길 응원하겠습니다! 😊

  • 할수있다12님의 프로필 이미지
    할수있다12

    수강평 3

    평균 평점 5.0

    5

    95% 수강 후 작성

    윈도우기반 응용프로그램 개발자인데 웹쪽으로는 개인적 스터디로 강의 들었습니다. 다양한 인증 관련해서 책 한권 사는 것 보다 훨씬 실무적인 내용이라 도움이 많이 되었네요!

    • 닭강정
      지식공유자

      안녕하세요, 할수있다12님! 정말 감사하고 좋은 수강평 남겨주셔서 진심으로 감사드립니다. 인증 관련해서 실무적인 도움을 받으셨다는 말씀에 강의자로서 매우 큰 보람을 느낍니다. 앞으로도 웹 개발이라는 새로운 영역에서도 할수있다12님의 역량이 멋지게 발휘되기를 진심으로 응원합니다. 필요하시거나 궁금한 부분이 생기시면 언제든 편하게 문의 주세요! 다시 한 번 소중한 수강평에 감사드리며, 늘 건승하시길 바랍니다!

  • 이주영님의 프로필 이미지
    이주영

    수강평 1

    평균 평점 5.0

    5

    31% 수강 후 작성

    • 닭강정
      지식공유자

      소중한 의견 남겨주셔서 감사합니다. 강의가 유익하게 다가가셨기를 바라며, 관련하여 추가로 궁금하신 점이 있으시면 언제든 문의 부탁드립니다.

  • neobns.jwlee님의 프로필 이미지
    neobns.jwlee

    수강평 20

    평균 평점 4.8

    5

    31% 수강 후 작성

    왜 이제서야 .... 지금이라도 만난것이 행운입니다

    • 닭강정
      지식공유자

      안녕하세요. neobns.jwlee님! 이제라도 만나게 되어 정말 다행입니다! 앞으로도 함께 좋은 경험을 쌓아가길 바라며, 많은 도움이 되길 바랍니다. 소중한 수강평 감사합니다!

닭강정님의 다른 강의

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

비슷한 강의

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

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

₩13,090

30%

₩18,700