every-calcualtor 계산기서비스
📝

every-calcualtor 계산기서비스

설명
D-day, 근무일수, 퍼센트 계산 등 일상생활에서 자주 필요한 계산 기능을 제공하는 서비스
유형
개인 프로젝트
작업기간
Jan 3, 2025 → Feb 14, 2025
Skills
Next.js
TypeScript
Zustand
Tailwind CSS
shadcn/ui

Every Calculator (다목적 계산기)

프로젝트 개요

notion image
실용적인 계산 기능들을 모아둔 웹/앱 서비스입니다.
D-day, 근무일수, 퍼센트 계산 등 일상생활에서 자주 필요한 계산 기능을 제공합니다.
  • 기간: 2025.01 ~ 업데이트 중
  • 역할: 개인 프로젝트 (기획/디자인/개발)

주요 기능

  • D-day 계산기: 특정 날짜까지의 남은 일수 계산
  • 근무일수 계산기: 공휴일을 제외한 실제 근무일수 계산
  • 퍼센트 계산기: 다양한 비율 계산

기술 스택

Frontend

Next.js 14 React, TypeScript Zustand
Tailwind CSS shadcn/ui
 

Infrastructure

Vercel
Google Analytics
 

Cross Platform

next-pwa
Capacitor (iOS/Android)

 

주요 개발 포인트

1. 모바일 최적화

notion image
  • 반응형 디자인으로 모든 디바이스에서 최적의 사용자 경험 제공
  • 모바일에서 사용성을 고려한 UI/UX (터치 영역, 키패드 등)
  • PWA 지원으로 네이티브 앱과 유사한 경험 제공
 

2. 성능 최적화

  • Next.js의 App Router 활용
  • 정적 페이지 생성으로 빠른 로딩 속성
  • Lighthouse 성능 점수 최적화

3. 사용자 경험

 
notion image
notion image
  • 다크모드 지원
  • 직관적인 UI로 사용자 친화적 디자인
  • 최근 계산 기록 저장 기능
 

4. 크로스 플랫폼

  • 웹, PWA, 네이티브 앱(iOS/Android) 지원
  • Capacitor를 활용한 하이브리드 앱 개발
  • 플랫폼별 최적화된 사용자 경험 제공

성과

  • Lighthouse 성능 점수 90점 이상 달성
  • PWA 최적화로 웹/앱 경계 없는 서비스 제공
 

배운 점

  • Next.js 14의 App Router 아키텍처 이해
  • apacitor를 활용한 하이브리드 앱 개발 경험
  • shadcn/ui를 활용한 효율적인 UI 개발
  • Zustand를 이용한 상태 관리 패턴 학습

향후 계획

  • 추가 계산기 기능 개발
  • 사용자 피드백 기반 UI/UX 개선
  • 앱스토어/플레이스토어 출시
  • 다국어 지원 추가