Firebase로 나만의 웹 앱 만들기 (1부)

Firebase란 무엇일까?

나만의 웹사이트나 애플리케이션을 만들어보고 싶다는 생각, 한 번쯤 해보셨나요? 아이디어는 있지만, '서버는 어떻게 만들지?', '데이터베이스는?', '로그인 기능은 어떻게 구현하지?' 같은 막막함에 부딪히곤 합니다. 이런 고민을 한 방에 해결해 줄 수 있는 강력한 도구가 바로 Firebase입니다.

이번에는 총 2회에 걸쳐 Firebase의 핵심 개념을 알아보고, 직접 간단한 방명록 웹 앱을 만들어보는 실습까지 진행해 보겠습니다. 오늘은 그 첫 번째 시간으로, 'Firebase가 도대체 무엇이고 왜 사용하는지'에 대해 쉽고 재미있게 알아보겠습니다.

구글 위스크 이미지

🤔 Firebase, 그것이 무엇일까요?

Firebase는 구글이 제공하는 'BaaS(Backend as a Service)' 플랫폼입니다. 말이 조금 어렵죠? 쉽게 말해, 웹이나 앱 개발에 필요한 서버(백엔드)의 기능들을 구글이 미리 다 만들어놓고, 우리는 그냥 가져다 쓰기만 하면 되는 서비스입니다.

요리에 비유해 볼까요? 우리가 파스타를 만들고 싶을 때, 밀가루를 빻아 면을 만들고, 토마토를 으깨 소스를 만드는 과정부터 시작할 수도 있습니다. 하지만 마트에서 잘 만들어진 파스타 면과 소스를 사 와서 요리하면 훨씬 빠르고 간편하게 맛있는 파스타를 완성할 수 있겠죠?

여기서 Firebase는 바로 잘 만들어진 '파스타 면과 소스' 같은 역할을 합니다. 개발자는 복잡하고 시간이 많이 드는 서버 인프라 구축이나 데이터베이스 설계, 보안 설정 같은 '재료 손질' 과정을 생략하고, 오직 사용자가 눈으로 보고 상호작용하는 '요리(프런트엔드 개발)'에만 집중할 수 있게 도와줍니다.

✨ Firebase를 사용하면 뭐가 좋을까요? (주요 기능)

Firebase는 개발자들이 "이런 기능 있었으면 좋겠다!"라고 생각할 만한 대부분의 기능을 제공합니다. 그중 대표적인 몇 가지를 살펴보겠습니다.

1. Firebase Authentication (인증)
   • 웹사이트나 앱의 핵심 기능인 로그인, 회원가입을 정말 간단하게 구현할 수 있습니다. 이메일/비밀번호, 구글, 페이스북, 깃허브 등 다양한 소셜 로그인 방식을 클릭 몇 번과 코드 몇 줄로 추가할 수 있습니다. 우리가 직접 사용자 정보를 암호화하고 관리할 필요 없이, Firebase가 안전하게 처리해 줍니다.
2. Firestore Database / Realtime Database (데이터베이스)
   • 사용자가 작성한 글, 상품 정보 등 모든 데이터를 저장하고 관리하는 공간입니다. 특히 Firestore는 '실시간' 동기화를 지원하는데, A 사용자가 글을 쓰면 그 즉시 B 사용자의 화면에도 해당 글이 나타나는 채팅 앱 같은 기능을 아주 쉽게 만들 수 있습니다.
3. Firebase Hosting (호스팅)
   • 열심히 만든 나의 웹사이트를 전 세계 어디서든 접속할 수 있도록 인터넷에 올려주는 서비스입니다. 복잡한 서버 설정 없이, 명령어 한 줄이면 내가 만든 HTML, CSS, JS 파일을 빠르고 안정적인 구글 서버에 배포할 수 있습니다.
4. Cloud Storage (스토리지)
   • 사용자가 업로드하는 이미지, 동영상, 문서 파일 등을 저장할 수 있는 안전한 공간입니다. 구글 드라이브처럼 파일들을 보관하고, 필요할 때 쉽게 꺼내 쓸 수 있습니다.

👨‍💻 초보 개발자에게 Firebase가 최고의 파트너인 이유

• 빠른 개발 속도: 백엔드에 대한 깊은 지식이 없어도 아이디어를 빠르게 프로토타입으로 만들고 실제 작동하는 서비스로 구현할 수 있습니다.
• 넉넉한 무료 플랜: 대부분의 핵심 기능을 일정 사용량까지는 무료로 제공하기 때문에, 토이 프로젝트나 소규모 서비스를 운영할 때 비용 부담이 거의 없습니다.
• 뛰어난 확장성: 사용자가 갑자기 늘어나도 구글의 강력한 인프라가 알아서 서버를 증설하고 관리해주므로, 서비스 규모가 커지는 것에 대한 걱정을 덜 수 있습니다.

다음 편 예고

오늘은 Firebase가 무엇인지, 어떤 강력한 기능들을 가지고 있는지에 대해 알아보았습니다. Firebase는 개발 과정을 단순화하고 우리가 아이디어 자체에만 집중할 수 있도록 도와주는 든든한 파트너라는 점이 매력적인 것 같습니다

다음 2부에서는 오늘 나온 개념을 바탕으로, 실제로 간단한 '실시간 방명록' HTML 앱을 만들어 보겠습니다.

이 앱입니다!! https://visitors--book.web.app

Firebase 우리들의 방명록 (수정/삭제)

 

 

Firebase 프로젝트를 생성하고, 내 컴퓨터에서 만든 HTML 파일과 Firestore 데이터베이스를 연동하여 실시간으로 메시지를 남기고 확인하는 모든 과정을 차근차근 함께 해볼 예정이니 많이 기대해 주세요!