본문 바로가기
AI

GPT로 HTML 일기 웹앱 만들기: 로컬스토리지부터 파이어베이스까지 완성형 웹앱 개발

by 프로랑 2025. 5. 21.
728x90
반응형

웹앱을 처음 만들어보고 싶다면, 가장 쉬운 방법은 HTML과 자바스크립트만으로 일기 웹앱을 구현해보는 것입니다.

이번 글에서는 로컬 스토리지부터 시작해 Firebase(파이어베이스)와 같은 외부 데이터베이스까지 연결하여 완성도 높은 일기장 웹앱을 만드는 과정을 단계별로 소개해 드리겠습니다.

특히, 온라인 코드 편집 도구인 리플릿을 활용하여 쉽게 테스트하고 배포할 수 있도록 도와드립니다.

1. 프로젝트 기본 구조 만들기

  1. 빈 폴더(예: diary-app)를 생성
  2. 그 안에 index.html 파일을 만들고 아래 기본 템플릿을 붙여넣습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>일기 웹앱</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: auto; padding: 1rem; }
    input, textarea { width: 100%; padding: .5rem; margin: .5rem 0; }
    button { padding: .5rem 1rem; cursor: pointer; }
    ul { list-style: none; padding: 0; }
    li { background: #f5f5f5; margin: .5rem 0; padding: .5rem; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>나의 일기장</h1>
  <input id="title" placeholder="제목을 입력하세요" />
  <textarea id="content" rows="5" placeholder="내용을 입력하세요"></textarea>
  <button id="saveBtn">저장</button>
  <h2>일기 목록</h2>
  <ul id="diaryList"></ul>

  <script src="app.js"></script>
</body>
</html>
  1. 같은 폴더에 app.js 파일을 만듭니다.

2. 로컬스토리지 적용하기

2.1. 데이터 저장 함수 작성

app.js 에 아래 코드를 추가하세요.

// 입력 엘리먼트 가져오기
const titleEl = document.getElementById('title');
const contentEl = document.getElementById('content');
const saveBtn = document.getElementById('saveBtn');
const diaryList = document.getElementById('diaryList');

// 로컬스토리지에 저장된 일기 불러오기
function loadDiaries() {
  const diaries = JSON.parse(localStorage.getItem('diaries') || '[]');
  diaryList.innerHTML = '';
  diaries.forEach((d, i) => {
    const li = document.createElement('li');
    li.textContent = `${d.title} — ${d.content}`;
    diaryList.appendChild(li);
  });
}

// 일기 저장하기
function saveDiary() {
  const diaries = JSON.parse(localStorage.getItem('diaries') || '[]');
  const newEntry = { title: titleEl.value, content: contentEl.value };
  diaries.push(newEntry);
  localStorage.setItem('diaries', JSON.stringify(diaries));
  titleEl.value = '';
  contentEl.value = '';
  loadDiaries();
}

// 이벤트 연결
saveBtn.addEventListener('click', saveDiary);
window.addEventListener('DOMContentLoaded', loadDiaries);
 

2.2. 테스트 방법

  1. 브라우저에서 index.html 파일을 더블클릭 또는 Live Server로 열기
  2. 제목과 내용을 입력 후 저장 버튼 클릭
  3. 새로고침해도 목록이 유지되는지 확인

3. Firebase 연동하기

3.1. Firebase 프로젝트 생성

  1. firebase.google.com 접속 후 프로젝트 만들기 클릭
  2. Analytics는 비활성화 선택 → 프로젝트 생성
  3. 좌측 메뉴에서 빌드 → Firestore Database 선택 → 데이터베이스 만들기 클릭
  4. 위치 : asia-northeast3 (Seoul) → 다음
  5. 테스트용 보안 규칙으로 읽기·쓰기 모두 true 설정 → 게시

3.2. 웹앱 설정 정보 복사

  1. 상단 톱니바퀴 아이콘 → 프로젝트 설정 → CDN 탭
  2. <!-- The core Firebase JS SDK ... --> 로 시작하는 <script> 태그 일체를 복사

3.3. HTML에 Firebase SDK 추가

index.html <head> 바로 아래에 붙여넣기 합니다.

<!-- Firebase 설정 정보 시작 -->
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-firestore.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "…",
    appId: "…"
  };
  // Initialize Firebase
  const app = firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();
</script>
<!-- Firebase 설정 정보 끝 -->
 

3.4. Firestore 연동 코드 작성

app.js 맨 위에 Firebase db를 사용할 수 있도록 다음 코드를 추가합니다.

// 기존 로컬스토리지 로직 대신 Firestore 사용
async function loadDiaries() {
  const snapshot = await db.collection('diaries').get();
  diaryList.innerHTML = '';
  snapshot.forEach(doc => {
    const d = doc.data();
    const li = document.createElement('li');
    li.textContent = `${d.title} — ${d.content}`;
    diaryList.appendChild(li);
  });
}

async function saveDiary() {
  const newEntry = { title: titleEl.value, content: contentEl.value, created: Date.now() };
  await db.collection('diaries').add(newEntry);
  titleEl.value = '';
  contentEl.value = '';
  loadDiaries();
}
 

3.5. 최종 테스트

  1. 코드 수정 후 저장
  2. 브라우저에서 새로고침 → 목록 로딩 확인
  3. 다른 기기나 브라우저에서 동일 URL 접속 시 일기 데이터 동기화 확인

4. 추가 팁

  • 로그인 기능: Firebase Authentication 연동하면 사용자별 일기 관리 가능
  • 실시간 업데이트: onSnapshot 사용으로 데이터 변경 즉시 반영
  • 스타일 업그레이드: Tailwind CSS 등으로 UI 개선

 

5. 일기 외에 다양한 웹앱으로 확장 가능

Firebase를 이용하면 단순한 일기장 외에도:

  • 게시판
  • 투두 리스트
  • 메모장 등

다양한 실시간 저장 기능이 필요한 웹앱을 제작할 수 있습니다.

마무리하며

이번 글에서는 HTML로 구현한 일기 웹앱을 로컬스토리지로 저장하고, 더 나아가 Firebase를 이용해 서버 기반으로 안전하게 저장하는 방법까지 알아보았습니다.

 

* 참고 영상: https://youtu.be/Vgm-1xJaAI8

728x90
저작자표시 (새창열림)

'AI' 카테고리의 다른 글

누구나 쉽게 따라할 수 있는 올인원 AI 비서 도구, 젠스파크(Genspark) 사용법 총정리!  (3) 2025.05.27
초보자를 위한 챗GPT 웹앱 무료 배포 + 앱스토어 등록 가이드  (0) 2025.05.26
요즘 좋다고 난리난 구글 재미나이(Gemini) 사용법 정리｜GPT보다 빠르고 실용적인 AI  (1) 2025.05.20
AI GPT로 주식 투자 효율 500% 올리는 10가지 방법  (7) 2025.05.19
AI 웹툰, 나도 만들 수 있다! PicLumen(픽루멘)과 캔바로 웹툰 제작 따라하기  (2) 2025.04.24

관련글

티스토리툴바