Kitfolio : 일하는 사람을 위한 작은 도구들

Kitfolio : 일하는 사람을 위한 작은 도구들 PRD

Kitfolio — 일하는 사람을 위한 작은 웹 도구 모음

글자 수 카운터, JSON 포매터, 연봉 계산기 등 업무용 계산기·생성기·유틸리티 모음. 설치·가입 없이 브라우저에서 무료로 사용하세요.

https://kitfolio.app/

1. 목적 (Goal)

2. 범위 (Scope)

2026-07-07 기준 Kitfolio에는 KO·EN 양 언어로 공개된 도구 38종이 등록되어 있으며, 업무 시의 작은 불편을 해소할 수 있는 기능 단위로 지속적 확장 운영 예정

• 도구는 UI 유형에 따라 Developer(7종) · Design(3종) · Text(28종) 3개 카테고리로 구분한다. 카테고리는 URL 구조에 반영하지 않고, 허브 화면의 섹션 분류와 디자인 테마 분기에만 사용한다.

• 각 도구는 PM·디자이너·개발자·구직자·직장인·소상공인·마케터 등 직군을 태그로 가진다. 이 태그는 URL이나 카테고리가 아니라 허브의 직군 필터와 관련 도구 추천에 쓰이는 내부 메타데이터다.

3. 정보 구조 (IA)

/
├─ 허브 (/)
├─ 도구
│   ├─ /json-formatter
│   ├─ /slack-timestamp-converter
│   ├─ /salary-calculator
│   └─ /[slug]  (총 38종, 1뎁스 플랫 라우트)
├─ 약관
│   ├─ /privacy-policy
│   └─ /terms-of-service
└─ 영어 버전
    ├─ /en
    └─ /en/[slug]

4. 페이지 정의

4.1 허브 페이지 (/, /en)

• 역할: 도구 탐색 허브

• 구성:
• 히어로 영역: 타이틀, 서브타이틀
• 검색 인풋: 도구 이름, 카드 설명, 키워드 기준 실시간 필터링
• 직군 필터: 전체, PM, 마케터, 디자이너, 개발자, 구직자, 직장인, 소상공인
• 즐겨찾기: 선택 상태를 브라우저에 저장
• 카탈로그: 필터링된 도구를 카드 그리드로 노출

• 카드 표시 정보:
• 아이콘
• 도구명
• 한 줄 설명
• 타깃 태그
• 즐겨찾기 버튼

4.2 도구 페이지 (/[slug], /en/[slug])

• 역할: 개별 도구 사용 페이지

• 데이터 기준: content.ts 레지스트리의 도구 항목 1건

• 구성:
• 카테고리·테마 뱃지
• 제목
• 리드 문단
• 3단계 사용 가이드
• 도구 UI
• AI 검색 대응 문답(AEO)
• FAQ
• 관련 도구 추천

• 렌더링 정책:
• 언어별 메타데이터와 구조화 데이터를 먼저 구성하고, 그 위에 도구 UI를 렌더링한다.
• 도구 UI는 좌우 분할, 카드형 입력·출력, 시각 결과형 레이아웃 중 도구 성격에 맞는 패턴을 사용한다.
• AI 검색 대응 문답과 FAQ는 동일한 아코디언 구조 안에서 탭으로 전환한다.

• OG 정책:
• 각 도구는 레지스트리의 OG 타이틀/서브타이틀을 소비한다.
• 1200×630 OG 이미지를 빌드 시 정적으로 생성한다.

5. 콘텐츠 레지스트리 정책

• slug

• category

• targets

• KO/EN title

• KO/EN description

• 카드 문구

• 사용 가이드

• AI 검색 대응 문답(AEO)

• FAQ

• OG 타이틀/서브타이틀

• SEO 키워드

• 관련 도구

• ready 상태

6. 도구 설계 원칙

• 단일 목적
각 도구는 하나의 검색 의도와 하나의 계산·변환 문제만 다룬다. 여러 기능을 한 페이지에 묶지 않는다.

• 3종 레이아웃 시스템
도구 성격에 따라 Clean(카드형 입력 → 결과) · IDE(좌우 분할, 다크 출력 패널) · Canvas(컨트롤 → 실시간 시각 결과) 중 하나의 디자인 테마를 적용한다. 레이아웃 타입은 Developer/Design/Text 카테고리와 대체로 겹치지만, 도구 성격에 따라 예외도 둔다.

• 계산 로직의 재사용
같은 계산 패턴을 공유하는 도구 묶음은 하나의 계산 엔진을 공유하고, 도구별로 파라미터만 다르게 준다. 성장률·퍼센트 계열 계산기 15종(성장률, YoY/MoM/QoQ/WoW, CAGR, 복리, 역산 등)이 하나의 설정 기반 계산 엔진을 공유하고, 광고 지표 계산기 중 ROAS/CPA/CPC/CPM/CTR 5종이 하나의 공용 계산기를 공유한다.

• 도구별 독립 색인
계산 로직은 공유되지만 각 도구의 URL·메타데이터·구조화 데이터·SEO 문구는 슬러그 단위로 독립적으로 등록된다.

• 콘텐츠는 메타데이터
도구 자체가 제품이고 텍스트는 발견을 돕는 보조 수단이라는 원칙 아래, 모든 설명·FAQ는 검색엔진과 AI 검색이 소비할 수 있는 메타데이터로 설계한다.

7. SEO / AEO 정책

7.1 다국어 색인 정책

7.2 구조화 데이터 정책

7.3 sitemap/robots 자동 생성 정책

8. 기술 스택

• Next.js 15 (App Router) + React 19 + TypeScript

• Tailwind CSS v4

• Vercel
• GitHub 저장소 연동으로 push 시 자동 배포
• apex 도메인의 SSL 자동 발급·갱신

• 도구별 계산 로직에 필요한 소규모 라이브러리
• 색상 변환
• 음력 변환
• OG 미리보기 렌더링
• 사용자 입력 새니타이즈

• 서버 API나 유료 API 의존성 없음

9. 운영 상태

• Google Analytics 4가 전 페이지 연동 완료

• Google AdSense 로더 스크립트와 사이트 소유 확인 메타태그가 삽입 완료

• 광고 단위 미배치 (실제 광고 미노출)
• 실운영 2-3개월 경과 후 광고 도입 고려

부록 : 전체 도구 목록 (38종)

• EN 경로는 각 KO 경로에 /en 프리픽스를 붙인 동일 슬러그(예: /en/json-formatter)이며 표에서는 생략한다.