#04 비개발자가 ChatGPT로 웹만들기
일기웹에 구글로그인 및 데이터베이스 환경설정!
일기웹에 계정 로그인은 필요로 할까?
일본의 소설가 엔도슈사쿠는 이런 말을 한 적이 있습니다.
"일기는 자신과의 독백이지, 기도로 가는 길이다"
이 글을 갑자기 보니, 자신과의 독백이자 일기를 쓰기 전에 로그인 환경이 과연 맞을까 싶기도 했습니다.
구글 로그인 때문에 혹은 비밀번호 찾다가 일기를 쓰지 못한다면,
일기를 쓰는 사용자 입장에서 포기하게 되는건 아닐까 싶다는 생각을 했습니다.
그래서 추후 이 점을 고려하여 익명 로그인 기능을 옵션으로 주려고 합니다.
FireBase에서 간편하게 로그인 계정방식 선택하기
우리가 흔히 말하는 SNS 소셜로그인처럼 타사 계정을 통해 접근하는 로그인 방식을 하기로 했습니다.
구글 Firebase에서 제공하는 로그인 제공업체✅ 익명 로그인 사용 요금은 5만명 이하인 경우 무료
Firebase에서는 월간 활성 사용자 수(MAU)가 50,000명 이하인 경우 무료로 제공하고 있습니다.
아래 구성 중 선택이 가능합니다.
기본구성
1. 이메일/비밀번호
2. 전화
3. 익명
.
추가구성
1.구글 << 구글만 하기로 함
2.페이스북
3.애플
4.마이크로소프트
⚠️ 유료로 전환되는 경우
다음과 같은 상황에서는 유료로 전환될 수 있습니다
전화번호 인증 사용 시:
전화번호를 이용한 인증은 월 10,000건까지 무료이며, 그 이후에는 지역에 따라 SMS 발송 건당 요금이 부과됩니다
월간 활성 사용자 수(MAU)가 50,000명을 초과하는 경우:
Spark 플랜에서는 월 50,000명까지 무료로 제공되며, 이를 초과하면 Blaze 플랜으로 업그레이드하여 사용량에 따라 요금이 부과됩니다.Firebase
고급 기능 사용 시: 다중 인증(MFA), 사용자 활동 로그, SAML 또는 OpenID Connect(OIDC)와 같은 고급 인증 기능을 사용하려면 Blaze 플랜으로 업그레이드해야 하며, 이에 따라 요금이 부과됩니다.
로그인 방식은 사용자가 가장 많은 순인 구글계정 로그인으로 하기로 했습니다.
원하는 로그인방법을 선택시, 사용 설정이 됩니다.
구글 Firebase에서 제공하는 구글계정 설정된 상태표시 구글로그인 로직추가하기
구글로그인을 FireBase에 설정을 했으니 이를 VScode에 지난번 생성 해준ts, tsx 페이지에
로그인 처리 로직을 추가하면 됩니다.
로그인 방법 설정 알려주는 ChatGPT 콘솔에서 설정이 완료된 후,
처음 익명으로 설정된 로직을 로그인버튼 코드를 추가하는 코드까지 알려줍니다.
코드 이미지 일부 심지어 로그인 완료 후 기대모습까지의 Flow도 기획해서 알려주는데, 정말로 시키는대로 하면 됩니다.
로그인 완료 후 기대 모습
“Google 계정으로 로그인” 클릭 → 팝업 로그인
로그인되면 사용자 이름 표시 + 프롬프트 화면 보여짐
로그인 사용자가 작성한 글을 FireStore에 저장하기
로그인 후, 사용자가 작성한 글을 데이터베이스에 저장을 해야하는 환경설정이 필요하다.
저장창고가 필요한데, 이 부분도 무료라서 연결해보았습니다.
FireBase > FireStore database 1단계: Firestore 활성화하기
Firebase 콘솔에서:
왼쪽 사이드바 → "Build" > "Firestore Database"
"데이터베이스 만들기" 클릭
테스트 모드로 시작 (권장)
→ 보안 규칙은 나중에 조정
위치는 기본값 그대로 → "다음" 클릭 → 생성 완료
2단계: 저장 버튼 누르면 Firestore에 저장되도록 코드 추가
firestore의 데이터베이스가 추가되도록 코드를 추가 ✅ 결과
사용자가 작성한 글이 날짜형식과 문서로 저장되는 것을 확인할 수 있습니다.
이 화면에서 좀 더 변경한 내용은 수정하기 기능을 추가했는데요, 그 기능을 적용한 화면은
아래처럼 보입니다.
디자인은 아주 기본적인 형태지만, 기능은 아주 잘 작동해요!
이네숨이름 계정으로 로그인 후, 일기쓰기 웹화면 완성! MVP 기능 중 1,2번까지 완성했습니다.
(Minimum Viable Product)최소 기능
앱기획시 고려했던 MVP기능 중 아주 기본 기능을 벌써 완료했네요.
1. 구글 로그인 (개인사용자 계정 1차보안 및 가입없이 로그인하여 사용)
2. 날짜 (달력기능 고려)
3. 본문내용 글쓰기, 글수정, 글삭제
4. 일기 날짜별 목록보기
5. 글쓰기 페이지에 "묵상주제글 or 마음돌보기 글" 랜덤으로 변경되기
목록보기가 되지 않는 미완성의 형태이지만
ChatGPT도움으로 어렵다고 여겨지는 React 기반의 일기웹의 기본화면을 완성할 수 있게 되었습니다.
실제 만드는 시간은 개발환경 설정하고, 로직추가하는데는 4시간정도 소요했던 것 같아요.
아이디어까지 확장시켜주는 ChatGPT
어떤 결과와 상황이 생길지 기획하는데 사실 많은 시간을 보내는데
ChatGPT가 이런 시간을 상당시간 도움을 주고 아이디어까지 확장시켜주기 까지 합니다.
이런 편에서 기획과 개발, 디자인까지 고려해주는 ChatGPT로 아이디어를 실현할 수 있다는 점이
너무나 놀랍고 개발에 대한 이해까지 생겼습니다.
이제 앞으로 남은 MVP 기능인 일기를 수정하고 조회하고,
글 주제 추천해주는 기능과 UI 디자인 변경을 순서대로 진행할 예정입니다.
디자인과 기획만 하던 제가 이렇게 개발을 무턱대고 하고 있지만,
퇴사 이후 저의 소소한 소규모 프로젝트라고 생각해서 작은 웹을 만드는 데 많은 의미를 두고 있습니다.
앞으로도 많은 관심 부탁드리겠습니다.
