아직 감지된 업데이트가 없습니다. GitHub 릴리스가 나오면 여기에 보입니다.
최근 완료된 8시간 회차 사이 GitHub 스타 증가량 순
개인 계정의 공개 저장소 소유자는 GitHub로 로그인해 운영자를 확인하고 소개를 직접 관리할 수 있습니다. 관리자 승인은 필요하지 않습니다.
로그인한 뒤 확인 파일을 만들어 이 저장소의 기본 브랜치에 30분 안에 커밋해 주세요. 다른 브랜치나 포크의 파일은 인정하지 않습니다. 파일을 올린 뒤 아래에서 확인하면 관리자 승인 없이 관리할 수 있습니다. 자격을 유지하려면 파일을 남겨 두세요.
로그인이 필요하면 로그인 화면으로 이동합니다. 로그인 후 이곳으로 돌아와 원하는 확인 버튼을 다시 눌러 주세요.
프로젝트 폴더에서 /nomorevibe verify를 실행하면 소유권을 확인하고 소개를 직접 관리할 수 있습니다.
1분 만에 확인하기개발자·디자이너를 위한 무료 웹 도구 모음 — Next.js(App Router) + Tailwind v4. 클라이언트 사이드 전용.
README 전체를 불러오는 중입니다.
README 전문 보기 ↗개발자·디자이너를 위한 무료 웹 도구 모음. 프론트 단독으로 동작하며, 모든 처리는 브라우저 안에서 끝납니다 (DB·서버 전송 없음). SEO 최적화된 단일 도메인 + 서브패스 구조.
Claude Design 핸드오프(HTML/CSS/JS 프로토타입)를 Next.js(App Router) + Tailwind v4로 옮긴 초안입니다.
app/json-formatter → /json-formatter)app/globals.css의 @theme 블록에 디자인 토큰을 1:1 매핑/en 프리픽스. 각 URL이 서버에서 해당
언어로 렌더되어 양국어 모두 색인됨 + hreflang 연결app/lib/content.ts 한 파일에 페이지별 제목 / 설명 / 키워드를
KO·EN로 모아두고 → 메타데이터·화면 카피·JSON-LD·허브 검색 색인에 모두 재사용.
텍스트 수정은 이 파일만 고치면 됩니다.canonical + hreflang(ko/en/x-default) + OpenGraphWebApplication, 허브=WebSite+ItemListsitemap.xml(양 언어 + alternates) · robots.txt 자동 생성ready 와 indexable 분리:
ready 는 "도구를 쓸 수 있는가"(허브 목록·검색·관련 도구 노출),
indexable 은 "검색 랜딩 페이지로 낼 품질이 확보됐는가"(sitemap·robots·허브 ItemList).
indexable=false 도구도 페이지는 정상 동작하고 UI에 그대로 노출되며,
sitemap에서 빠지고 robots: noindex, follow 만 적용됩니다.
동일 컴포넌트·동일 구조의 파생 페이지는 계열별 대표 1개만 색인합니다.indexable=true 는 validateIndexableTools() 의 조건
(guide 2섹션 · examples · limitations · faq · relatedTools · og, ko/en 양쪽)을
통과해야 합니다. 글자 수가 아니라 필수 콘텐츠 구조의 존재 여부로 판정합니다.각 도구는 KO(루트)·EN(/en) 양 언어로 서버 렌더되며, 메타데이터·JSON-LD·OG·FAQ/AEO를
app/lib/content.ts 레지스트리에서 단일 출처로 관리합니다. 허브(/, /en)는 전체 도구의
검색·필터·디스커버리 진입점입니다.
| No | 분류 | 기능명 | KO 경로 | EN 경로 | 기능 요약 |
|---|---|---|---|---|---|
| 1 | 문서·이미지 | 글자 수·단어 수 카운터 / Character Counter | /character-counter | /en/character-counter | 글자·단어·문장·줄 수를 실시간 집계. SNS 글자 수 제한 안내 포함. |
| 2 | 문서·이미지 | PDF 도구 / PDF Tools | /pdf-tools | /en/pdf-tools | PDF 병합·분할·회전·페이지 삭제를 탭 전환으로. 모든 처리는 브라우저 안에서. |
| 3 | 문서·이미지 | 이미지 최적화 / Image Optimizer | /image-optimizer | /en/image-optimizer | PNG·JPG·WebP의 픽셀 크기는 그대로 두고 포맷과 품질만 조절해 파일 용량을 줄입니다. |
| 4 | 문서·이미지 | 이미지 리사이즈·크롭 / Image Resizer & Cropper | /image-resizer-cropper | /en/image-resizer-cropper | 이미지를 원하는 픽셀 크기로 조절하거나 1:1·16:9 같은 비율로 잘라 저장합니다. |
| 5 | QR 코드 | QR 코드 생성기 / QR Code Generator | /qr-code-generator | /en/qr-code-generator | 링크를 QR 코드로 만들고 색상과 모양을 설정해 PNG·SVG로 다운로드합니다. |
| 6 | QR 코드 | QR 코드 읽기 / QR Code Reader | /qr-code-reader | /en/qr-code-reader | QR 이미지를 붙여넣거나 업로드하고 카메라로 스캔해 링크와 내용을 확인합니다. |
| 7 | 날짜·시간 | KST UTC 변환기 / KST ↔ UTC Converter | /kst-utc-converter | /en/kst-utc-converter | 한국 시간(KST)과 UTC를 양방향 변환하고, 언어별 변환 함수 코드를 함께 복사합니다. |
| 8 | 날짜·시간 | 슬랙 타임스탬프 변환기 / Slack Timestamp Converter | /slack-timestamp-converter | /en/slack-timestamp-converter | Unix 타임스탬프 ↔ 날짜 ↔ Slack date 구문 양방향 변환. 현재 타임스탬프 실시간 표시. |
| 9 | 날짜·시간 | 시간 더하기 빼기 계산기 / Time Calculator | /time-calculator | /en/time-calculator | 시간 블록을 자유롭게 더하고 빼서 총 근무시간 계산. 타임시트·청구 시간에 유용. |
| 10 | 날짜·시간 | 시간 단위 변환기 / Time Converter | /time-converter | /en/time-converter | 시간·일·주·월·년 단위 즉시 변환. 근무 기준(8h/일)과 캘린더 기준 선택 가능. |
app/
├── layout.tsx # 루트(KO) 레이아웃 + 폰트 + LangProvider
├── globals.css # Tailwind v4 @theme 토큰 + 컴포넌트/페이지 CSS
├── page.tsx # 허브 (/)
├── json-formatter/page.tsx # /json-formatter (얇은 래퍼: 메타 + JSON-LD + 컴포넌트)
├── css-gradient/page.tsx
├── character-counter/page.tsx
├── en/ # EN 서브트리 (lang=en 주입)
│ ├── layout.tsx
│ ├── page.tsx # /en
│ └── <tool>/page.tsx # /en/<tool>
├── sitemap.ts · robots.ts # SEO
├── lib/
│ ├── content.ts # ★ 페이지 콘텐츠 단일 출처 (제목/설명/키워드 KO·EN)
│ └── i18n.tsx # LangProvider · useT (URL 기반)
└── components/
├── Hub.tsx # 허브 (검색·카테고리·즐겨찾기)
├── JsonFormatter.tsx · CssGradient.tsx · CharacterCounter.tsx
├── SiteHeader.tsx # 도구 페이지 공통 헤더
├── LangToggle.tsx # KO/EN 토글 (로케일 URL 이동)
├── SetHtmlLang.tsx # /en 에서 documentElement.lang 보정 (hydration 이후)
├── JsonLd.tsx # 구조화 데이터 주입
└── useBodyTheme.ts # 페이지별 body 배경 테마
npm install
npm run dev # http://localhost:3000
npm run build # 프로덕션 빌드
npm test # 계산 로직 테스트 (node --test + tsx)
npm run validate:content # indexable 도구 콘텐츠 품질 게이트 (실패 시 exit 1)
app/lib/**/__tests__/*.test.ts 를 실행합니다. 계산 검증은 타 계산기와
총액을 비교하지 않고 각 항목의 공식 산식과 요율 상수·적용 기간 경계를 직접 확인합니다.effectiveFrom/effectiveTo) 으로 관리합니다 (app/lib/salary/insurance.ts).@theme 토큰명(--color-blue-primary-700 등)을 그대로 사용.kf-pagehead): 개별 인입 대비next/font)로 교체 권장| 11 | 날짜·시간 | 음력 양력 변환기 / Lunar-Solar Converter | /lunar-solar-converter | /en/lunar-solar-converter | 양력 ↔ 음력 날짜를 즉시 변환. 1901~2100년 범위, 윤달·갑자·띠 정보 포함. |
| 12 | 근무·휴가 | 유연근무 잔여시간 계산기 / Flex Work Calculator | /flex-work-calculator | /en/flex-work-calculator | 유연근무 목표·남은 근무시간과 하루 평균 필요시간을 계산. 휴가 차감·공휴일 반영. |
| 13 | 근무·휴가 | 연차 계산기 / Korea Annual Leave Calculator | /annual-leave-calculator | /en/annual-leave-calculator | 입사일로 지금까지 생긴 연차·다음 발생일·소멸일을 계산하고, 회계연도 기준과 퇴사 정산 차이를 비교. |
| 14 | 급여·세금 | 연봉 실수령액 계산기 / Salary Net Pay Calculator | /salary-calculator | /en/salary-calculator | 세전 연봉·월급으로 4대보험·세금을 뺀 예상 실수령액과 공제 내역을 즉시 계산. |
| 15 | 급여·세금 | 퇴직금 계산기 / Severance Pay Calculator | /severance-pay-calculator | /en/severance-pay-calculator | 입사일과 퇴직 전 3개월 임금으로 1일 평균임금과 예상 퇴직금(세전)을 계산. |
| 16 | 급여·세금 | 프리랜서 3.3% 계산기 / Korea Freelancer Tax Calculator (3.3%) | /freelancer-tax-calculator | /en/freelancer-tax-calculator | 외주비·강연료에서 3.3%·8.8% 원천징수 후 실수령액과, 원하는 실수령액에 맞는 지급액을 계산. |
| 17 | 급여·세금 | 종합소득세 계산기 / Korea Income Tax Calculator for Freelancers | /income-tax-calculator | /en/income-tax-calculator | 3.3% 프리랜서의 1년 수입으로 5월 종합소득세 환급·추가 납부액을 계산하고, 단순·기준경비율과 간편장부를 비교. |
| 18 | 급여·세금 | 부가세 계산기 / Korea VAT Calculator | /vat-calculator | /en/vat-calculator | 공급가액과 부가세 포함 합계를 서로 계산하고, 간이과세자의 업종별 납부세액과 납부 면제 여부를 계산. |
| 19 | 급여·세금 | 실업급여 계산기 / Korea Unemployment Benefit Calculator | /unemployment-benefit-calculator | /en/unemployment-benefit-calculator | 퇴직 전 임금·나이·가입기간으로 구직급여 1일 금액과 총액, 다 받기 위한 신청 마감일을 계산합니다. |
| 20 | 광고·성과 | 광고 지표 계산기 / Ad Metrics Calculator | /ad-metrics-calculator | /en/ad-metrics-calculator | ROAS·CPA·CPC·CPM·CTR을 탭 전환으로 즉시 계산. 역산 모드로 목표 매출·예상 전환·필요 예산까지. |
| 21 | 광고·성과 | 광고 예산 페이싱 계산기 / Ad Budget Pacing Calculator | /ad-budget-pacing-calculator | /en/ad-budget-pacing-calculator | 캠페인 기간 진행률 대비 예산 소진율을 비교해 과다·부족 집행 상태를 즉시 확인. |
| 22 | 광고·성과 | 퍼널 전환율 계산기 / Funnel Conversion Calculator | /funnel-conversion-calculator | /en/funnel-conversion-calculator | 마케팅 퍼널 단계별 전환율·이탈률 분석과 목표 달성을 위한 필요 트래픽 역산. |
| 23 | 광고·성과 | 성장률 계산기 / Growth Rate Calculator | /growth-rate-calculator | /en/growth-rate-calculator | 이전값·현재값으로 성장률·MoM·YoY 계산. 목표 성장률·필요 증가량·역산·퍼센트 차이도 탭 전환으로. |
| 24 | 광고·성과 | CAGR 계산기 / CAGR Calculator | /cagr-calculator | /en/cagr-calculator | 시작값·종료값·기간으로 CAGR 즉시 계산. 탭 전환으로 복리 최종값·미래 예측값도. |
| 25 | 코드·웹 제작 | JSON 포매터 / JSON Formatter | /json-formatter | /en/json-formatter | JSON 문자열을 들여쓰기·색상 강조로 포맷팅. 문법 오류 감지와 유효성 검사 포함. |
| 26 | 코드·웹 제작 | 슬랙 메시지 빌더 / Slack Message Builder | /slack-message-builder | /en/slack-message-builder | 슬랙 봇 메시지를 에디터로 작성하고 Block Kit JSON과 curl·Node.js·Python 호출 코드로 변환합니다. |
| 27 | 코드·웹 제작 | CSS 단위 변환기 / CSS Unit Converter | /css-unit-converter | /en/css-unit-converter | rem·em·vw·%·ms를 px(또는 초)로 즉시 변환. CSS 단위 변환 5종을 한 곳에서. |
| 28 | 코드·웹 제작 | 그라디언트 생성기 / CSS Gradient | /css-gradient | /en/css-gradient | linear·radial·conic 그라디언트를 시각적으로 편집하고 CSS 코드를 즉시 복사. |
| 29 | 코드·웹 제작 | Tailwind 팔레트 생성기 / Tailwind Palette | /tailwind-palette-generator | /en/tailwind-palette-generator | 베이스 HEX 하나로 Tailwind용 11단계 팔레트(50~950)를 만들고 코드로 복사. |
| 30 | 코드·웹 제작 | OG 미리보기 테스트 / Open Graph Preview Tester | /open-graph-preview | /en/open-graph-preview | OG 이미지와 제목·설명이 주요 플랫폼에서 어떻게 보이는지 비교합니다. |
| 31 | 웹 접근성 | HTML 접근성 검사기 / HTML Accessibility Checker | /html-accessibility-checker | /en/html-accessibility-checker | HTML을 붙여넣어 헤딩·랜드마크·alt·label·탭 순서를 정적으로 점검하고 수정 위치를 확인합니다. |
| 32 | 웹 접근성 | 명도대비 검사기 / Color Contrast Checker | /color-contrast-checker | /en/color-contrast-checker | 전경색·배경색의 WCAG 명도대비를 검사하고, 미달하면 통과하는 색상 후보를 제안합니다. |
| 33 | 웹 접근성 | 색각이상 시뮬레이터 / Color Blindness Simulator | /color-blindness-simulator | /en/color-blindness-simulator | 시안·스크린샷을 색각 조건별로 변환해 색상에만 의존한 구분을 찾습니다. |
| 34 | 웹 접근성 | 텍스트 확대·간격 검사기 / Text Scaling & Spacing Checker | /text-scaling-checker | /en/text-scaling-checker | HTML·CSS와 JSX·TSX·Tailwind에 200% 확대, 320px 리플로, WCAG 간격을 적용해 원본과 나란히 비교합니다. |
| 35 | 웹 접근성 | 웹접근성 체크리스트 빌더 / Web Accessibility Checklist Builder | /accessibility-checklist | /en/accessibility-checklist | KWCAG·WCAG 2.2 항목으로 프로젝트용 체크리스트를 만들고 역할·상태·근거를 관리합니다. |