레트로 계산기 (Retro Calculator)

macOS 스타일의 인터랙티브 웹 계산기 애플리케이션입니다.

프로젝트 개요

바닐라 자바스크립트로 구현한 레트로 감성의 계산기 웹 애플리케이션입니다. 실제 OS처럼 드래그, 최소화, 리사이즈 등의 인터랙션을 제공합니다.

주요 기능

계산기 핵심 기능

• 사칙연산 (+, -, x, /)
• 퍼센트 계산 (%)
• 부호 변경 (±)
• 초기화 (C)
• 소수점 연산 지원
• 0으로 나누기 예외 처리

사용자 경험

• 키보드 입력 지원: 숫자, 연산자, Enter(=) 키 바인딩
• 연산 기록: 계산 내역 자동 저장 및 표시
• 기록 관리: 휴지통 아이콘으로 기록 초기화

윈도우 시스템

• 드래그 앤 드롭: 타이틀바를 잡고 창 이동 가능
• 창 최소화/복원: 작업 표시줄과 연동
• 창 닫기: X 버튼으로 닫기
• 리사이즈: 우측 하단 핸들로 창 크기 조절
  • 500px 이상 확장 시 연산 기록 패널 자동 표시
• 경계 제한: 화면 밖으로 나가지 않도록 제한

UI/UX

• 레트로 픽셀 아트 아이콘
• 실시간 시계 (12시간 형식)
• 커서 팔로워 (별 모양 애니메이션)
• 더블클릭으로 프로그램 실행

기술 스택

• HTML5
• CSS3
• Vanilla JavaScript

프로젝트 구조

calculator/
├── index.html              # 메인 HTML
├── styles/
│   ├── style.css          # 전역 스타일
│   ├── header.css         # 헤더/시계 스타일
│   ├── programs.css       # 프로그램 아이콘 스타일
│   ├── calulator.css      # 계산기 UI 스타일
│   └── banjuk.css         # 추가 프로그램 스타일
├── scripts/
│   ├── main.js            # 윈도우 시스템 로직
│   ├── calculator.js      # 계산기 핵심 로직
│   └── cursorFollower.js  # 커서 이펙트
└── imgs/
    └── ...                # 이미지 리소스

사용 방법

1. 프로그램 실행: Calculator 아이콘을 더블클릭
2. 계산하기:
   • 마우스로 버튼 클릭
   • 키보드 숫자/연산자 입력 (Enter로 =)
3. 창 조작:
   • 타이틀바 드래그로 이동
   • 최소화 버튼으로 작업 표시줄에 숨기기
   • 우측 하단 핸들로 크기 조절
4. 기록 관리: 휴지통 아이콘으로 계산 기록 초기화

Action Items

• 과학용 계산기 모드 (삼각함수, 로그 등)
• 테마 변경 (다크 모드)
• 계산 기록 내보내기 (CSV, TXT)
• 다중 창 지원 (여러 계산기 동시 실행)

---

Javascript로 계산기 만들기