Utility Village는 금융 계산기, 단위 변환기, 브라우저 미니게임을 한 곳에 모은 유틸리티 사이트입니다. 각각 따로 검색해야 했던 도구들을 하나의 사이트로 통합하고, 설치 없이 브라우저에서 즉시 사용할 수 있도록 만들었습니다.
기술 스택
| 항목 | 선택 |
|---|---|
| 프레임워크 | Next.js 16 (App Router) |
| UI | React 19 |
| 언어 | TypeScript 5 |
| 스타일링 | Tailwind CSS 4 |
| 차트 | Recharts 3 |
| 애니메이션 | Motion (Framer Motion 12) |
| 아이콘 | Lucide React |
| 호스팅 | Cloudflare |
Next.js 16 App Router를 선택한 이유는 각 도구가 독립적인 라우트(/calculator/loan-calculator, /minigame/tic-tac-toe 등)로 구분되어 있어 파일 시스템 기반 라우팅과 궁합이 좋기 때문입니다. 또한 서버 컴포넌트를 활용하여 페이지별 메타데이터(SEO)를 쉽게 설정할 수 있습니다.
프로젝트 구조
src/
├── app/
│ ├── calculator/
│ │ ├── loan-calculator/ # 대출 계산기
│ │ ├── deposit-calculator/ # 적금/예금 계산기
│ │ └── unit-converter/ # 단위 변환기
│ └── minigame/
│ ├── number-baseball/ # 숫자 야구
│ ├── tic-tac-toe/ # 틱택토
│ ├── minesweeper/ # 지뢰찾기
│ └── roulette/ # 룰렛
├── components/
│ ├── ui/ # 재사용 UI 컴포넌트
│ ├── calculator/ # 계산기 컴포넌트
│ └── minigame/ # 게임 컴포넌트
└── lib/
├── calculator/ # 순수 계산 로직
└── minigame/ # 순수 게임 로직
핵심 설계 원칙은 로직과 UI의 완전한 분리입니다. src/lib/ 아래의 파일들은 React에 의존하지 않는 순수 TypeScript 함수로 작성되어 있어 단독 테스트가 가능하고, 컴포넌트는 이 함수들을 호출하여 결과를 렌더링하는 역할만 담당합니다.
디자인 시스템
Tailwind CSS 4의 알파 값 유틸리티를 활용한 모노크롬 디자인을 적용했습니다.
- 배경:
bg-black/[0.03]— 거의 흰색에 가까운 미묘한 배경 - 테두리:
border-black/10— 얇고 절제된 경계선 - 호버: 흰 배경 → 검은 배경, 흰 텍스트로 반전
색상을 최소화하고 명도 대비만으로 계층을 표현하여, 도구 중심 사이트에서 콘텐츠에 집중할 수 있도록 했습니다.
7가지 도구
계산기
| 도구 | 핵심 기능 |
|---|---|
| 대출 계산기 | 4가지 상환 방식, 일별 이자 계산 |
| 적금/예금 계산기 | 단리/복리, 세금 3종 비교 |
| 단위 변환기 | 7개 카테고리, 한국 전통 단위 |
미니게임
| 도구 | 핵심 기능 |
|---|---|
| 숫자 야구 | 역추적 알고리즘 힌트 |
| 틱택토 | Minimax AI (무적) |
| 지뢰찾기 & 룰렛 | 첫 클릭 안전 보장, 슬롯 가중 확률 |
각 도구의 구현 세부사항은 개별 포스트에서 다룹니다.
사이트 바로가기: https://utility.dreamurl.biz