사용자 맞춤형 Google 스타일 대시보드
검색, 시간, 날씨, 할 일, 뉴스, 테마 설정을 한 화면에서 사용할 수 있는 개인화 웹 대시보드입니다.
My Google은 Google 메인 화면을 모티브로 제작한 사용자 맞춤형 대시보드 웹 애플리케이션입니다.
검색 기능을 중심으로 현재 시간, 오늘의 날씨, 할 일 관리, 최신 기술 뉴스 기능을 한 화면에서 확인할 수 있도록 구성했습니다.
또한 사용자가 직접 메인 색상을 선택할 수 있고, 다크모드 / 라이트모드를 전환할 수 있어 나만의 스타일로 사용할 수 있는 개인화 대시보드입니다.
검색어를 입력하여 Google 또는 Naver 검색을 사용할 수 있습니다.
- 검색어 입력 후
Enter입력 시 Google 검색으로 이동 - Google 검색 버튼 제공
- Naver 검색 버튼 제공
- 검색 결과는 새 창에서 열림
현재 시간을 실시간으로 확인할 수 있습니다.
- 시 / 분 / 초 표시
- 요일 표시
- 날짜 표시
- 1초마다 자동 업데이트
간단한 Todo List 기능을 제공합니다.
- 할 일 추가
- 완료 체크
- 할 일 삭제
- 완료 개수 표시
- 진행률 바 표시
- 모든 할 일 완료 시 완료 상태 표시
사용자의 현재 위치를 기준으로 날씨 정보를 보여줍니다.
- 현재 온도
- 체감 온도
- 습도
- 풍속
- 시간별 예보
기술 관련 뉴스를 카테고리별로 확인할 수 있습니다.
현재는 네이버 뉴스 API 키 연결 전 단계이기 때문에 더미 뉴스 데이터를 사용하여 뉴스 카드 UI와 카테고리 동작을 먼저 확인할 수 있도록 구성했습니다.
추후에는 네이버 뉴스 검색 API를 연결하여 실제 뉴스 데이터를 받아올 예정입니다.
| 카테고리 | 설명 |
|---|---|
| 전체 | 기술, 소프트웨어, 반도체 관련 뉴스 |
| 🤖 AI | 인공지능, 생성형 AI 관련 뉴스 |
| 🔒 보안 | 해킹, 랜섬웨어, 사이버보안 관련 뉴스 |
| 📱 모바일 | 스마트폰, 앱, 안드로이드, 아이폰 관련 뉴스 |
| 🚀 스타트업 | 창업, 벤처투자, 스타트업 관련 뉴스 |
| 🚗 EV·로봇 | 전기차, 로봇, 자율주행 관련 뉴스 |
사용자가 직접 메인 색상을 선택할 수 있습니다.
선택한 색상은 주요 UI 요소에 적용되어 나만의 대시보드처럼 꾸밀 수 있습니다.
적용 요소는 다음과 같습니다.
- 주요 버튼
- 선택된 뉴스 카테고리
- Todo 진행률 바
- 프로필 아이콘
- 검색창 포커스 효과
- 카드 강조 색상
다크모드와 라이트모드를 전환할 수 있습니다.
- 라이트모드 지원
- 다크모드 지원
- 선택한 모드 자동 저장
- 새로고침 후에도 설정 유지
| 구분 | 기술 |
|---|---|
| Frontend | React |
| Build Tool | Vite |
| Language | JavaScript |
| Styling | Inline Style |
| State Management | React Hooks |
| Storage | localStorage |
| Weather API | Open-Meteo API |
| News API | Naver News API 예정 |
| Server | Express 예정 |
my-google-dashboard
├─ src
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ services
│ ├─ news.js
│ └─ weather.js
│
├─ server
│ └─ index.js
│
├─ screenshots
│ ├─ light-mode.png
│ ├─ dark-mode.png
│ └─ custom-theme.png
│
├─ .env.example
├─ .gitignore
├─ package.json
└─ README.md- Gmail 링크
- 이미지 링크
- 다크모드 / 라이트모드 버튼
- 색상 선택 버튼
- 사용자 프로필 아이콘
- My Google 로고
- 검색 입력창
- Google 검색 버튼
- Naver 검색 버튼
- 🕐 현재 시간 카드
- ✅ 오늘의 할 일 카드
- 🌤 오늘의 날씨 카드
- 📰 최신 기술 뉴스 카드
npm installnpm run devhttp://localhost:5173현재는 더미 뉴스 데이터를 사용하고 있습니다.
추후 실제 네이버 뉴스 API를 연결할 경우 프로젝트 루트에 .env 파일을 생성하고 아래 내용을 입력합니다.
NAVER_CLIENT_ID=your_naver_client_id
NAVER_CLIENT_SECRET=your_naver_client_secret
PORT=4000서버 실행 명령어는 다음과 같습니다.
npm run server네이버 뉴스 API의 Client ID와 Client Secret은 프론트엔드 코드에 직접 작성하지 않습니다.
API 키는 서버의 .env 파일에만 저장하고, React에서는 백엔드 프록시 API를 통해 뉴스 데이터를 요청하는 방식으로 설계했습니다.
React
↓
Express Server
↓
Naver News API이 구조를 사용하면 브라우저 개발자 도구에서 API Secret이 노출되는 것을 방지할 수 있습니다.
사용자가 선택한 테마 설정은 브라우저의 localStorage에 저장됩니다.
| Key | 설명 |
|---|---|
dashboard-mode |
다크모드 / 라이트모드 설정 |
dashboard-accent-color |
사용자가 선택한 메인 색상 |
이 프로젝트는 단순히 Google 화면을 따라 만드는 것이 아니라, 사용자가 자주 확인하는 정보를 한 화면에 모아 보여주는 개인 맞춤형 대시보드를 목표로 제작했습니다.
구현하면서 중점적으로 본 부분은 다음과 같습니다.
- Google 스타일의 깔끔한 UI 구성
- 검색 기능과 대시보드 기능 결합
- 카드형 레이아웃을 활용한 정보 분리
- 사용자 맞춤 색상 변경 기능
- 다크모드 / 라이트모드 지원
- 새로고침 후에도 테마 설정 유지
- API 키가 노출되지 않는 안전한 구조 설계
- 실제 API 연결 전에도 테스트 가능한 더미 데이터 구성
- 화면 크기에 따라 자연스럽게 변하는 반응형 레이아웃
- 네이버 뉴스 API 실제 연결
- Todo List localStorage 저장 기능 추가
- 날씨 지역 직접 선택 기능 추가
- 모바일 반응형 UI 개선
- 카드 순서 변경 기능 추가
- 즐겨찾기 링크 추가 기능 구현
- 사용자 프로필 설정 기능 추가
- 뉴스 검색어 직접 입력 기능 추가
사용자 개인에게 맞춰 사용할 수 있는 Google 스타일 대시보드라는 의미를 담았습니다.
평소 자주 사용하는 검색 기능을 중심으로, 시간, 날씨, 할 일, 뉴스처럼 자주 확인하는 정보를 한 화면에 배치하면 더 편리할 것 같다고 생각했습니다.
또한 단순한 정적 페이지가 아니라 사용자가 직접 색상과 모드를 바꿀 수 있도록 하여, 개인화된 웹 대시보드 느낌을 주고자 했습니다.