강의

멘토링

로드맵

개발 · 프로그래밍

/

웹 개발

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

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

(5.0) 수강평 5개

수강생 49명

  • 닭강정

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 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 변수, 함수를 만드는 법

안녕하세요
입니다.

517

수강생

28

수강평

51

답변

4.8

강의 평점

6

강의

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

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

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

 

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

 

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

커리큘럼

전체

39개 ∙ (6시간 47분)

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

수강평

전체

5개

5.0

5개의 수강평

  • openuriz님의 프로필 이미지
    openuriz

    수강평 2

    평균 평점 5.0

    5

    33% 수강 후 작성

    • dakgangjung123
      지식공유자

      Xin chào openuriz. Cảm ơn bạn đã để lại đánh giá sao quý giá. Nhờ có bạn mà tôi có thêm động lực lớn để chuẩn bị cho khóa học tiếp theo. Hy vọng sẽ giúp ích nhiều cho việc học tập của bạn trong tương lai!

  • doit12님의 프로필 이미지
    doit12

    수강평 3

    평균 평점 5.0

    5

    95% 수강 후 작성

    Tôi là nhà phát triển ứng dụng nền tảng Windows, còn về mảng web thì tôi đã học qua các bài giảng để tự nghiên cứu. Nội dung rất thực tế, hơn nhiều so với việc mua một cuốn sách về các loại xác thực khác nhau, nên đã giúp ích rất nhiều!

    • dakgangjung123
      지식공유자

      Chào bạn, 할수있다12! Chân thành cảm ơn bạn rất nhiều vì đã để lại đánh giá tốt và ý nghĩa. Khi nghe bạn nói rằng khóa học đã giúp ích cho công việc thực tế liên quan đến xác thực, với tư cách là người hướng dẫn, tôi cảm thấy rất tự hào. Tôi chân thành cổ vũ cho bạn, mong rằng năng lực của bạn, 할수있다12, sẽ tiếp tục tỏa sáng trong lĩnh vực mới là phát triển web. Nếu bạn cần gì hoặc có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ bất cứ lúc nào nhé! Một lần nữa, xin cảm ơn vì đánh giá quý báu của bạn, và chúc bạn luôn thành công!

  • dlwndud25068067님의 프로필 이미지
    dlwndud25068067

    수강평 2

    평균 평점 5.0

    5

    31% 수강 후 작성

    • dakgangjung123
      지식공유자

      Cảm ơn bạn đã góp ý quý báu. Hy vọng khóa học đã hữu ích cho bạn, nếu có thêm câu hỏi nào liên quan, vui lòng liên hệ bất cứ lúc nào.

  • hdrecssh2075님의 프로필 이미지
    hdrecssh2075

    수강평 3

    평균 평점 5.0

    5

    13% 수강 후 작성

    • dakgangjung123
      지식공유자

      Cảm ơn bạn đã tham gia khóa học! Chúc bạn có một buổi học bổ ích và tôi sẽ luôn ủng hộ bạn học tập chăm chỉ! 😊

  • neobnsjwlee0121님의 프로필 이미지
    neobnsjwlee0121

    수강평 20

    평균 평점 4.8

    5

    31% 수강 후 작성

    Sao giờ mới...? Gặp được nhau dù là bây giờ cũng là may mắn rồi.

    • dakgangjung123
      지식공유자

      Xin chào neobns.jwlee! Rất vui vì cuối cùng cũng được gặp bạn! Hy vọng chúng ta sẽ cùng nhau có những trải nghiệm tốt đẹp trong tương lai và tôi có thể giúp đỡ bạn nhiều hơn. Cảm ơn bạn vì những đánh giá quý giá!

지식공유자의 깜짝할인 중

월 ₩65,674

5개월 할부 시

21%

₩18,700

₩328,369

닭강정님의 다른 강의

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

비슷한 강의

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