상세 컨텐츠

본문 제목

📔 나만의 디지털 일기장 소개

일상자료

by gyutaebo 2025. 12. 5. 21:12

본문

📔 나만의 디지털 일기장 소개

안녕하세요! 오늘은 감정과 날씨를 기록하는 디지털 일기장 웹페이지를 소개하고자 합니다. 하루하루의 소중한 순간을 기록하고, 나중에 되돌아볼 수 있는 아름다운 일기장입니다.

🎯 이 웹페이지의 특징

이 일기장은 BASIC DIARY 스타일로 디자인되어 있어, 실제 일기장에 글을 쓰는 것처럼 자연스럽고 친근한 느낌을 줍니다. 감정과 날씨를 이모지로 표현하여 시각적으로도 즐겁게 기록할 수 있습니다.

✨ 주요 기능

  • 날짜별 일기 작성 - 원하는 날짜를 선택하여 일기 작성
  • 감정 태그 - 기쁨, 슬픔, 화남, 평온, 피곤, 고민, 자신감, 사랑 등 8가지 감정 표현
  • 날씨 기록 - 맑음, 흐림, 비, 눈, 구름 등 날씨 상태 기록
  • 월별/연도별 일기 보기 - 이번 달, 올해 필터로 일기 조회
  • 검색 기능 - 일기 내용 검색으로 원하는 일기 빠르게 찾기
  • 일기 수정/삭제 - 작성한 일기 수정 및 삭제 기능
  • 15개 샘플 일기 - 다양한 감정과 날씨의 예제 포함
  • 로컬 저장 - 브라우저에 자동 저장되어 데이터 유지

🎨 디자인 특징

이 웹페이지는 BASIC DIARY 컨셉으로 제작되었습니다:

  • 크림색 배경 - 따뜻하고 부드러운 크림색과 베이지 톤
  • 노트북 줄 패턴 - 왼쪽에 세로 줄이 있어 노트북 느낌
  • 감정 이모지 - 😊 기쁨, 😢 슬픔, 😡 화남, 😌 평온 등 시각적 표현
  • 날씨 이모지 - ☀️ 맑음, ⛅ 흐림, 🌧️ 비 등 날씨 상태 표시
  • 날짜 표시 - 오늘, 어제, 그저께 등 친근한 표현
  • 통계 대시보드 - 전체 일기 개수와 이번 달 일기 개수 표시


통계, 필터, 검색, 일기 목록이 보이는 전체 화면

💻 사용 방법

1. 일기 작성하기

상단의 입력창에 날짜, 감정, 날씨를 선택하고 일기 내용을 작성한 후 "일기 작성하기" 버튼을 클릭하면 됩니다.

2. 필터링하기

상단의 필터 버튼으로 전체, 이번 달, 올해 일기만 볼 수 있습니다.

3. 검색하기

검색창에 키워드를 입력하면 일기 내용에서 해당 키워드가 포함된 일기만 표시됩니다.

4. 일기 수정/삭제하기

각 일기 항목에 마우스를 올리면 "수정"과 "삭제" 버튼이 나타납니다. 클릭하여 일기를 수정하거나 삭제할 수 있습니다.

📊 활용 예시

일기 작성 팁

  • 감정 기록 - 하루의 감정을 이모지로 표현하여 시각적으로 기록
  • 날씨 기록 - 날씨와 함께 기분을 기록하면 나중에 추억이 더 생생해집니다
  • 정기적 기록 - 매일 또는 주기적으로 일기를 작성하여 습관화
  • 검색 활용 - 특정 키워드로 과거 일기를 검색하여 회상
  • 월별 정리 - 이번 달 필터로 한 달간의 일기를 정리하여 보기

🎯 샘플 일기 (15개)

웹페이지에는 다음과 같은 샘플 일기 15개가 포함되어 있습니다:

포함된 샘플 일기:
• 다양한 감정 표현: 😊 기쁨, 😌 평온, 🤔 고민, 😎 자신감, 😍 사랑, 😢 슬픔, 😴 피곤 등
• 다양한 날씨: ☀️ 맑음, ⛅ 흐림, 🌧️ 비, 🌤️ 구름 등
• 일상적인 이야기, 감사한 일, 고민, 성취감 등 다양한 주제의 일기

📊 기술 스택

이 웹페이지는 순수 HTML, CSS, JavaScript로 제작되었습니다:

사용 기술:
• HTML5
• CSS3 (Flexbox, Animation)
• Vanilla JavaScript
• LocalStorage API (데이터 저장)

별도의 라이브러리나 프레임워크 없이 순수 웹 기술만으로 구현되어 있어, 어떤 환경에서도 쉽게 실행할 수 있습니다.

🚀 활용 방법

이 일기장은 다음과 같이 활용하실 수 있습니다:

  • 일상 기록 - 매일의 일상을 기록하여 추억 보관
  • 감정 관리 - 감정을 기록하고 되돌아보며 자기 이해
  • 성장 기록 - 시간이 지나며 자신의 변화를 확인
  • 감사 일기 - 감사한 일을 기록하여 긍정적 마인드 유지
  • 회고 - 월별, 연도별로 일기를 정리하여 회고
  • 검색 기능 - 특정 키워드로 과거 일기를 검색하여 회상

💡 활용 팁

  • 매일 같은 시간에 일기를 작성하여 습관화
  • 감정과 날씨를 함께 기록하여 더 생생한 추억 만들기
  • 월별 필터로 한 달을 정리하며 회고하기
  • 검색 기능으로 특정 주제나 감정의 일기만 모아보기
  • 정기적으로 과거 일기를 읽으며 자신의 성장 확인

🎁 파일 받기

📧 이메일을 댓글로 남겨주시면

일기장 웹페이지 파일을
이메일로 보내드리겠습니다!

댓글에 이메일 주소를 남겨주시면, 파일을 첨부하여 보내드립니다.
개인정보 보호를 위해 댓글은 비공개로 설정하셔도 됩니다.

💡 참고사항: 파일은 단일 HTML 파일로 구성되어 있어, 다운로드 받으신 후 바로 브라우저에서 열어 사용하실 수 있습니다. 별도의 설치나 설정이 필요하지 않으며, 모든 데이터는 브라우저에 자동 저장됩니다!

💡 마무리

일기를 쓰는 것은 자신을 이해하고 성장하는 좋은 방법입니다. 이 웹페이지가 여러분의 일상 기록과 자기 성찰에 도움이 되었으면 좋겠습니다.

궁금한 점이나 개선 사항이 있으시면 언제든 댓글로 남겨주세요. 그리고 파일이 필요하시다면 댓글로 이메일 주소를 남겨주시면 보내드리겠습니다!

#일기장 #감정기록 #디지털일기 #웹페이지 #HTML #JavaScript

관련글 더보기