#03 비개발자가 AI로 개발환경 만들기
초기 템플렛까지 만들어주는 GPT를 활용해 보자
안녕하세요. 지난 2화 때 제가 일기웹 기획하기에 대해 잠시 이야기를 나누었는데요.
이번화는 실제적으로 개발환경을 만드는 단계입니다.
쉬운 방법으로 설명드리자면,
오늘은 우리가 이사 갈 때 스토리지라는 창고 개념과 이삿짐센터가 들어오기 전에
열쇠가 필요하듯 이 2가지가 필요합니다.
그러기 위해서 어떤 창고(서버 및 호스팅)와 열쇠(로그인 인증)가 필요한지 선택해야 합니다.
그리고 이 들어오는 짐들을 어떻게 움직이고, 배치(스타일링)할 수 있는 환경을 만드는 것이라고 보면 됩니다.
매우 간단하죠!
이 모든 것을 챗GPT가 도와줍니다. :)
챗 GPT가 제안한 기술 방식
챗GPT에게 제가 기획한 일기웹에 대해 물어본 후 기술스택을 제안하였습니다.화면구현과 동적 웹페이지를 만드는 프론트엔드 Next.Js 환경 만들기
ChatGPT가 알려준 순서대로 순차적으로 설치를 하고, 터미널에서 세팅환경을 구성해 주면 됩니다.
터미널은 VS Code 프로그램을 설치 후에 사용하시면 더 직관적으로 사용하실 수 있습니다.
VS Code 설치하기
https://code.visualstudio.com/download
챗GPT 캡처화면입니다.
저는 Tailwind CSS를 사용하려고 했지만 Tailwind CSS 임포트가 잘 되지 않아서 이 부분은 진행하지 못하고 4번까지 진행했습니다. 여기까지 진행했으면 거의 많은 것을 했다고 볼 수 있습니다!
저는 익명의 일기장앱 anonymous-reflection-app이라는 프로젝트 폴더가 생성되어 터미널에 디렉토리가 표시되어 있습니다.
터미널에 디렉토리를 생성한 경우 저장고와 문지기 열쇠 만들기 - 구글 파이어베이스로 시작
파이어베이스의 핵심 구성요소! 우리가 현재 이 브런치에 글을 쓰면 글이 저장되는 저장고가 있는데요, 그 저장고, 즉 책장 같은 보관장소가 우선적으로 필요합니다.
인증, 데이터베이스, 파일 저장, 알림, 호스팅 같은 백엔드 기능을 쉽게 사용할 수 있도록 해주는 서비스라고 생각하시면 됩니다!
이 모든 기능을 매우 간편하게 작업할 수 있습니다.
여기서 구글 계정이 있다면 구글 파이어 베이스로 시작해 볼 수 있습니다.
Firebase의 특징
장점:
프론트엔드 개발자에게 최적화 → 서버 없이도 전체 앱 구현 가능
빠른 프로토타이핑 → 로그인, 데이터 저장, 배포까지 1시간 안에 가능
리얼타임 데이터 처리 → 채팅, 다이어리, 협업 툴 등에 강력
무료 요금제 있음 (제한적 사용에 적합, 확장도 유연)
단점:
NoSQL 구조라서 관계형 데이터 설계에 익숙한 사람은 처음에 헷갈릴 수 있음
쿼리 제한이 있음 (복잡한 조인, 서브쿼리 불가능)
유료 전환 시 트래픽 대비 비용 증가 가능성
ChaTGPT가 알려주는
성찰 웹앱에 Firebase를 쓰면 좋은 이유
글쓰기 데이터는 Firestore에 저장
사용자 인증은 Firebase Auth (Google/Email 등)
프롬프트는 Firestore에 날짜별로 저장
작성된 글은 사용자 ID + 날짜로 필터링 가능
웹앱은 Firebase Hosting으로 배포하면 끝!
방법 1. 직접 개발환경 설치
ChaTGPT가 알려준 대로 파이어베이스 환경 구축하기
방법 2. 초기템플렛으로 보다 쉽게!
이 모든 환경을 구축하기가 어렵다면,
템플렛을 다운로드를 할 수 있게 압축파일을 생성해 줍니다. 압축파일을 열어 다음 순서대로 진행할 수도 있습니다. 저는 방법 2로 하였습니다. (Node.JS가 설치되어 있다면 이 방법이 더 간편합니다)
템플렛을 구성까지 해주는 GPT 구성 설명:
pages/index.tsx
→ 오늘 날짜 프롬프트 표시 + textarea + 익명 로그인 처리 >> 추후 구글 로그인으로 변경!
lib/firebase.ts
→ Firebase 설정 파일 (
YOUR_API_KEY
부분은 본인의 Firebase 콘솔 정보로 대체하세요)
styles/globals.css
→ 간단한 기본 스타일
package.json
→ 필요한 의존성(firebase, next, react) 포함
Firebase 프로젝트 앱 만들기
파이어베이스에 프로젝트 생성이 필요합니다. 저장과 구글계정 로그인기능까지 제공하는 기능을 써보고 싶다면 추천드립니다.
✅ 1단계: Firebase 콘솔 접속
https://console.firebase.google.com클릭
Google 계정으로 로그인 (Gmail 계정이면 OK)
✅ 2단계: 새 프로젝트 만들기
오른쪽 상단의 "프로젝트 만들기" 버튼 클릭
프로젝트 이름 입력 (예: reflection-journal)
하단의 **"Google 애널리틱스 사용 여부"**는 → 체크 해제해도 OK
"프로젝트 만들기" 버튼 클릭
✅ 3단계: 웹 앱(Web App) 등록
프로젝트 생성이 끝나면 자동으로 대시보드로 이동해요.
웹 아이콘 클릭 (앱 추가: "앱에 Firebase 추가")
앱 이름 입력 (예: my-reflection-web)
호스팅 설정은 체크하지 않아도 돼요
완료하면 다음과 같은 코드 블록이 나타납니다.
제가 만든 파이어베이스 프로젝트 명은 resrospect입니다.
Firebase 프로젝트 앱과 연결하기
ApI키와 ID를 입력해주면 파이어베이스에 연결됩니다. 
해당 apiKey와 도메인, 프로젝트 아이디를 입력해 줍니다.
✅ 몇 가지의 오류
위의 단계를 순서대로 하고 접속 후 index.ts에 적용될 수 있겠지만 몇 가지 오류가 있었습니다.
익명이었지만 구글계정 로그인의 템플릿 환경으로 만들어져 있어서
구글 소셜로그인 계정을 세팅해주어야 했어요. 그래서 이 내용은 다음 화에 기록하겠습니다.
그리고 컴퓨터 맥북에 터미널 디렉터리 권한 문제가 있어서
Node JS가 정상작동을 하지 않았습니다. 그래서 그 환경을 다시 세팅해 주었습니다.
✅ 개발자의 환경을 이해하는 데 도움을 준 ChatGPT
개발자 분들이라면 아주 간단히 작업하실 수 있는 내용이었겠지만
터미널에서, 명령어를 통해서 실행하는 과정을 하다 보면 개발에 보다 친숙해져 가는 과정이 개인적으로 재미있었습니다.
ChaGPTpro로 사용하면 개발에 대한 질문제한이 없었기 때문에 질문을 통해서 환경세팅까지 잘 마무리할 수 있었습니다.
여기까지 마무리한 것만으로도 많은 작업을 한 것 같아, 이제 다음 개발진행을 추후에 업데이트하도록 하겠습니다.
감사합니다.
앱기획하기 2화 내용
