만든 이유

빠르게 바뀌는 사업 방향과 수시로 추가되는 스펙·기능 요구에 대응하기 위해 만들었습니다.

코멘트

입사 후부터 계속 고도화해 오다 결국 SaaS 라는 종착점에 도달한 솔루션입니다. Flunti 사이트의 중추이며, 지금도 고도화를 이어가고 있는 프로젝트입니다.

주요 특징

• 01멀티테넌트 라우팅: URL 스코프 (/[vendor]/[workspace]) 로 기업·기관별 진입점 분리 + 미들웨어 URL 리라이팅 / 권한 분기
• 02서버 사이드 기업 정보 기반의 동적 메인 페이지·테마 (브랜드 컬러는 Material Color Utilities 로 런타임 생성)
• 03권한 그룹 (Role) 기반 기능 on/off: RoleProvider / RoleSweep / usePermission 으로 페이지·컴포넌트 단위 접근 제어
• 04TanStack Query + Next.js fetch API 통합 (serverPararellFetcher + HydrationBoundary) + 벤더 prefix query key 로 멀티테넌트 캐시 격리
• 05다양한 콘텐츠 유형 지원: 동영상 강의, 퀴즈, 프로젝트, 오프라인 코스, 세미나, 학습 로드맵
• 06관리자 어드민 (코스 / 강의 / 태그 / 콘텐츠 모더레이션 + 권한 + 수강 통계) + 콘텐츠 리셀러 B2B 입점 플로우

맡은 역할

• 01프로젝트 세팅, 구현, 아키텍처 정의
• 02proxy.ts (middleware) 를 통한 권한 · 기업 정보 · 인증 정보 fetching 및 page header 로 전달
• 03TanStack Query + Next.js fetch API 통합용 fetcher 작성, 각 페이지 fetcher 를 통한 SSR / hydration 단순화
• 04entities 단의 API 자동 생성 스크립트 작성 및 전체 적용
• 05주요 기능 구현: 로드맵 리스트 / 상세, 강의 리스트 / 상세, VOD, Quiz, Project, 게시판 (QNA / 공지사항 / FAQ) 등

만든 이유

온·오프라인 강의 수요에 따라 별도의 출석 모듈을 만들고, 온라인 강의의 경우 Zoom 강의를 페이지 내에서 플랫폼 계정으로 수강할 수 있도록 했습니다. 어드민은 이 모든 것을 한 곳에서 관리·확인할 수 있도록 작성되었습니다.

코멘트

2024년 말 ~ 2025년 초에 진행했던 프로젝트를 교훈 삼아 시작한 프로젝트입니다. FE 에서도 캐싱을 어느 정도 도입하고, API call 빈도와 최적화에 좀 더 신경을 써서 작성했습니다.

주요 특징

• 01동적으로 관리 가능한 메뉴
• 02메인 LMS (Flunti) 와는 별개로 클래스 매니지먼트 전용 권한 체계 구현
• 03다양한 클래스 매니지먼트 기능 (라이브 / VOD / 출석 / 게시판) 지원
• 04일정 현황판 지원 및 일정 기반 콘텐츠 생성

맡은 역할

• 01프로젝트 세팅, 구현, 아키텍처 정의
• 02Zoom SDK 를 통한 Live 기능 구현
• 03Flunti 의 일부 기능을 그대로 채용하고 개량
• 04동적 게시판 생성을 위한 page wrapper 구현 (QNA / Notice / FAQ / Common 4종)
• 05출석 대시보드 작성 및 바로가기 페이지 구현

만든 이유

필요한 재고 유지 비용을 줄이고 주문 충족 시간을 단축해, 전반적인 물류 효율성을 끌어올리기 위해 작성했습니다.

코멘트

개발자로서 처음으로 주도적으로 맡게 된 프로젝트입니다. FE 아키텍처 전반을 담당하고 BE 는 보조로 참여했으며, 공통 함수와 샘플 페이지, 기능 모듈 작성 및 리팩토링을 맡았습니다.

주요 특징

• 01의뢰 기업의 요구에 맞춰 튜닝 가능
• 02기본적인 Warehouse Management flow 내장
• 03삼자 물류 (3PLA) 지원
• 04Vue 3 + TypeScript + Spring Boot 기반

맡은 역할

• 01레거시 nexacro 를 Vue 3 + TypeScript + Spring Boot 로 마이그레이션
• 02API 호출 / 응답 최적화
• 03폼 / 그리드 / 검색 조건 등 핵심 기능 모듈화 및 샘플 코드 작성
• 04검색 조건 동적 생성 로직 리팩터링 (재사용성 / 유지보수성 강화)
• 05WS 기반 알림 시스템 구현 (실시간 알람 + 메시지)
• 06PDF.js + Fabric.js 로 도면 기능 구현

만든 이유

점점 늘어나는 프로젝트에 비해 디자인이 파편화되는 경향이 매우 강해졌습니다. 이를 방지하기 위해 기준이 되는 디자인 시스템을 구축했습니다.

코멘트

Document 페이지 (SSG), Storybook / Plugin, CLI 등 편의 기능까지 모두 갖춰 완성한 디자인 시스템입니다. 1년이 지난 지금도 잘 사용되고 있으며, 가끔 컴포넌트가 추가되기도 합니다.

주요 특징

• 01매우 풍부한 컴포넌트 라인업 (40+ 종)
• 02SSG 로 생성된 Document 페이지 + Storybook 을 통한 컴포넌트 Preview 기능
• 03Storybook 에는 디자이너와의 빠른 협업을 위해 Notion API 를 활용한 comment plugin 기능 지원
• 04Document 페이지에서 Icon 을 바로 찾아 사용할 수 있는 별도 페이지 제공
• 05디자인 토큰 값도 자동으로 파싱되어 페이지에 그대로 노출

맡은 역할

• 01디자인 시스템 core · Document · Storybook 을 위한 monorepo 구성 (pnpm workspace)
• 02MD 파일 기반으로 SSG 된 정적 Document 페이지 작성
• 03GitHub Actions 배포 스크립트 작성 및 배포
• 04타 프로젝트에서 사용 / 업데이트를 위한 CLI 커맨드라인 작성

만든 이유

지속적인 인원 감소로 AI 활용을 극대화해야 하는 상황에서, AI 를 통한 코드 일관성 확보와 능률 향상을 위해 마련했습니다.

코멘트

팀원이 하나의 LLM 문서를 바라보고 일관된 코드를 생성할 수 있도록 마크다운 문서를 지속적으로 고도화하고 있습니다. PR 리뷰 / widgets · features 컴포넌트 생성 / 테스트 코드 작성 / PR description 작성 등 자주 쓰이는 커맨드와 스킬을 함께 정리했고, 팀 컨벤션과 과거 코드 기반의 컨벤션, 디자인 토큰 가이드까지 문서화했습니다.

주요 특징

• 01구현 · 테스팅 · 리뷰 등 업무 전반에 사용되는 skills / commands 제공
• 02팀 컨벤션 + 과거 작성된 코드를 기반으로 한 컨벤션 문서화
• 03디자인 토큰 가이드 문서 포함

맡은 역할

• 01프로젝트 Document 페이지 작성
• 02skills / commands 설치 CLI 작성
• 03위 두 내용을 배포하기 위한 GitHub Actions 작성

만든 이유

기존 작업 흐름은 디자이너의 Figma 작업 → FE 퍼블리싱 → 로직 작업 순서였고, Figma → FE 퍼블리싱 단계가 병목이었습니다. 와이어프레임 기반의 디자인 시스템을 이용한 페이지 생성을 디자이너에게 제안하였고, design-studio 가 이를 자동화해 병목이 거의 사라졌습니다. 변경된 흐름: 와이어프레임 작성 → design-studio 에서 페이지 생성 → FE 는 페이지를 보고 퍼블리싱 마무리 → 디자이너는 생성된 페이지를 기준으로 Figma 에 문서화.

코멘트

이 솔루션을 구축한 뒤 디자이너에게서 "매우 유용하다"는 코멘트를 받았으며, 본인 또한 일상 업무에서 그 유용함을 충분히 체감하고 있습니다.

주요 특징

• 01와이어프레임만 제공하면 Flunti 디자인 시스템 (Design System) 기준으로 페이지 자동 생성
• 02자동 commit 커맨드 지원
• 03FE 아키텍처 (FSD) 에 맞춰 features / widgets 단위 컴포넌트 + Mock entities 자동 생성으로 빠른 퍼블리싱 구현

맡은 역할

• 01페이지 생성을 위한 프롬프트 작성 및 커맨드화
• 02생성된 페이지를 미리보기 위한 Next.js 기반 SSG 프로젝트 작성
• 03해당 페이지를 배포하기 위한 GitHub Actions 스크립트 작성

만든 이유

시스템 전체를 한 곳에서 관리하고 싶다는 사내 요구가 있었습니다. 당시 BE 인원의 퇴사로 한 명에게 작업이 몰려 있던 반면 FE 는 비교적 여유로운 상황이었기에, FE 가 Drizzle 을 도입해 View 단을 ORM 으로 직접 가져와 데이터를 표시하고, Create / Update / Delete 로직만 구현된 API 와 함께 사용해 내부 인원이 Flunti 시스템을 제어할 수 있는 어드민을 작성했습니다.

코멘트

작성 과정에서 AI 를 적극 활용해 짧은 시간 안에 작업을 마무리한 프로젝트입니다.

주요 특징

• 01View 와 Action 의 분리 (ORM 을 통한 View 조회 / API 를 통한 업데이트)
• 02사내 어드민만 접근 가능하도록 작성된 페이지 구성

맡은 역할

• 01전체 구현
• 02Drizzle 의 pull 기능을 이용한 DB schema 생성 및 AI 를 활용한 select repository 생성
• 03각 어드민 페이지 작성

만든 이유

velog · tistory · medium 같은 서비스가 있지만, 시도해보고 싶은 기술을 자유롭게 적용할 수 있는 공간이 필요했습니다.

코멘트

4년간 스택을 계속 바꿔온 흔적이 브랜치로 그대로 남아있는 블로그입니다. 장기 운영과 레거시 마이그레이션을 계속 진행해오고 있으며 현재 Vercel + 별도의 백엔드 조합으로 사이트를 운영하고 있습니다.

주요 특징

• 01Article: 마크다운 기반 긴 글 (MDX + remark/rehype 렌더링)
• 02Notice: 메인 페이지에 공지 + 최신 Article 자동 노출
• 03Article list: 태그별 필터링 + 키워드 검색 (제목 / 본문)
• 04Log 페이지: 짧은 글 타임라인
• 05댓글 / 카테고리 / 이미지 첨부 (자체 이미지 서버 경유)
• 06관리자 대시보드: 통계 / 모더레이션 / 게시글 상태 관리
• 07Vue → Svelte → Next.js로 4년간 스택 마이그레이션
• 08AWS Cognito → NextAuth → better-auth 인증 진화
• 09AWS Lightsail 직접 운영 → Vercel + 별도 BE(b-hub) 분리 (보안 책임 분리)
• 10Tailwind v3 → v4 마이그레이션에서 디자인 시스템 전체를 수동 재구성

만든 이유

회사에서 SaaS를 만들다 보니 재미있어서 개인 프로젝트로 한 번 도전해 보고 싶었습니다. velog나 medium 같은 SaaS형 블로그도 만들 수 있다는 자신감을 얻게 되었고, Hono로 어디까지 풀스택을 갈 수 있는지 실험하고 싶었습니다.

코멘트

Hono + React SSR + Island를 이용해 풀스택을 직접 구현했습니다. Astro에서 배워온 island를 적용해 볼 좋은 기회였고, 실제로 성공했습니다.

주요 특징

• 01초기 Cloudflare Workers 단일 구조 → FE/BE/Admin 3-repo 분리 진화 (관리자는 CSR로 별도)
• 02Hono + React SSR + Island 아키텍처 (Astro에서 영감): 3-프로세스 병렬 dev 환경
• 03Cloudflare Free Tier로 비용 0원 운영, smart_placement로 D1 가까운 리전 자동 배치
• 04자체 image-convert-server (Lightsail): Cloudflare R2의 sharp 미지원 우회
• 05rehype-remark로 양방향 md ↔ html 변환 에디터 (contentEditable + dnd-kit)
• 06kataru.dev/<userSubpath> 멀티테넌트 (domain.service + gateway.route 라우팅 분기)

만든 이유

shields.io는 알고 있었지만 언제 내려갈지 모르는 외부 서비스에 종속되고 싶지 않았습니다. 과거 Next.js의 @vercel/og가 Satori를 사용한다는 점이 기억나, "나도 Satori로 만들어 보자"는 동기로 출발했습니다.

코멘트

가장 작은 코드로 가장 자주 쓰이는 도구입니다. README 한 줄 뱃지가 매일 떠야 하는 상황에서, 외부 서비스 의존 없이 직접 컨트롤하고 있습니다.

주요 특징

• 01Satori (JSX → SVG) + @resvg/resvg-wasm (SVG → PNG) 파이프라인을 Hono 위에 직접 조립
• 02Vercel 함수에서 wasm 파일 경로를 직접 잡아 초기화하는 환경 분기 처리
• 03URL 쿼리만으로 모든 커스터마이즈: Tailwind 클래스를 URL에 그대로 전달 (tw-to-css)
• 04내장 아이콘 슬러그 + 임의 favicon 로딩 (icojs로 .ico 동적 디코드)
• 05한글 폰트 (Noto Sans KR) 내장으로 한국어 뱃지 생성 가능

만든 이유

네이버 웹툰을 즐겨 보다 보니 항상 보던 작품을 매번 찾아 들어가는 것이 번거롭고, 즐겨찾기 페이지도 별도로 진입해야 하는 불편함이 있었습니다. 이를 해결하기 위해 Chrome 익스텐션을 작성하여 메인에 새로운 탭을 삽입하고, 파싱한 웹툰 중 체크된 것만 표시하는 기능을 만들어 Chrome Extension Store 에 배포했습니다.

코멘트

MV2 → MV3 마이그레이션, Chakra → shadcn 전환, Bun 자체 빌드 파이프라인까지 세 가지를 한 번에 정리했습니다. 한국 웹툰 도메인에서 실제로 사용되고 있는 익스텐션입니다.

주요 특징

• 01Chrome Manifest V3 + chrome.storage.local: Content Script (DOM 조작) + Popup (React) 구성
• 02v1 → v2 재구축: Chakra UI → shadcn 마이그레이션, Vite/CRXJS → Bun 자체 빌드 파이프라인
• 03Proxy 객체로 라이브러리 없이 반응형 상태관리 (Vanilla 패턴, 회고하면 MutationObserver만으로 충분)
• 04권한 최소화: host_permissions 1개(comic.naver.com), permissions 1개(storage)
• 05Bun 빌드 + adm-zip으로 스토어 업로드 zip 자동 생성, Vite/Webpack 의존 0
• 06사용자 30명 실사용, 1년 5개월 무업데이트에도 정상 동작 (네이버 마크업 안정)

만든 이유

회사에서 AMS / WMS 를 만들었었는데, 그 근간이 되는 사용자별 언어 · 탭 · 커스터마이징 가능한 ADMIN 코어 기능을 사이드로 구현하는 데 집중했습니다. 본인은 React 를 선호하지만, 첫 회사가 Vue + Spring Boot 환경이었기 때문입니다.

코멘트

2024년 시점의 모범적 풀스택 구성 (Vite 4 + Vue 3.4 + Spring Boot 3.2 + JWT)을 갖추었습니다. React 본진 외에도 회사 스택을 깊이 다룰 수 있다는 점을 증명한 사례입니다.

주요 특징

• 01Vue 3.4 + Vite 4 + Pinia (persistedstate) + vue-i18n 9 (서버사이드: DB Locale 엔티티 fetch)
• 02Spring Boot 3.2.2 + Java 17 + Spring Data JPA + Spring Security + JJWT 0.11 + Redis Reactive
• 03JWT 필터 추상화: AbstAuthProcessFilterImpl로 공통부 분리, JwtAuthFilter로 확장 (한 단계 더 추상화)
• 04탭 시스템 (keep-alive + Pinia): addCache/getCacheList/removeCache/refreshCurrentTab 4 함수로 동기
• 05메뉴-역할 동적 권한: Menubyrole · RoleByUser 별도 엔티티 + 복합키로 사용자 역할별 메뉴 결정
• 06DaisyUI 테마 프리셋 + 자작 그리드 (CRUD · 마스킹 · 행 스타일링): ag-grid 점진 교체 중

만든 이유

나무위키처럼 스크롤바에 목차가 뜨는 것이 센세이셔널하였습니다. 기존 ToC 라이브러리는 사이드바에 텍스트를 그리지만, 이 라이브러리는 빈 공간(스크롤바 옆)을 활용합니다.

코멘트

의존성 0으로 React / Vue / Svelte / Vanilla 어느 환경에서도 가볍게 import할 수 있습니다. 하루 만에 v1을 publish했고, 누적 459 다운로드를 기록하고 있습니다.

주요 특징

• 01의존성을 없앴습니다
• 02tsdown (Rolldown 기반) 빌더로 ESM + CJS + .d.ts 듀얼 출력
• 03IntersectionObserver 대신 rAF 폴링 + Map 추적: Next.js 16 cacheComponents 환경 대응
• 04WeakMap → Map 전환: 참조 끊김 케이스에서 명시적 cleanup 보장
• 05History API monkey-patch + popstate로 SPA 네비게이션 시점 일괄 정리
• 06GitHub Actions + NPM SLSA Provenance: 검증된 빌드만 publish

만든 이유

원래 쓰던 앱 snoww 가 서비스 종료되었습니다. 이렇게 된 김에 직접 공부해 볼 겸 한 번 만들어 보자는 마음으로 시작했습니다.

코멘트

ML 없이 룰베이스로 깔끔하게 동작하는 활동 감지를 구현했습니다. 슬로프 환경을 가정한 오프라인-first 설계로 만들었습니다.

주요 특징

• 01Expo SDK 54 + RN 0.81 + expo-router 6 + New Architecture, NativeWind 4 + @rn-primitives (shadcn-RN)
• 02자체 룰베이스 활동 감지: 3 상태 (skiing/lifting/resting) 자동 전이, ML 없이 평활화 + 차분
• 03노이즈 필터: speed 3개 이동평균, altitude 5개 차분, accuracy > 50m 폐기, 3초 전이 지연
• 04백그라운드 위치 추적: BestForNavigation 1초/1m, Foreground Service 알림 (Android), ActivityType.Fitness
• 05expo-sqlite 4 테이블 (sessions/locations/runs/photos): 로컬 우선 + is_synced 서버 동기화
• 06expo-maps (MapLibre에서 마이그레이션), 크래시 복구, 트래킹 시뮬레이터, ko/ja/en i18n

만든 이유

매번 AI 관련 내용을 찾아 보는 데 들이는 시간이 아까웠습니다. 자주 가는 사이트들을 한 번에 모아 크롤링하고, 데일리 / 위클리 리포트를 자동 작성하기로 했습니다.

코멘트

LLM 한 공급자에 묶이지 않는 Fallback Chain을 구성했습니다. 한 · 일 · 영 다언어를 동시 운영해 담론 차이를 비교할 수 있고, 본인의 매일 9곳 사이트 찾기 시간을 0으로 만들었습니다.

주요 특징

• 01Turborepo + Bun workspaces: apps/parser (Python 3.12 + uv) + apps/web (Next.js 16) + packages/db (Drizzle MySQL)
• 02LLM Fallback Chain 5종: Ollama Cloud / Ollama Local / omlx (Apple MLX) / OpenRouter / OpenAI
• 03한 · 일 · 영 동일 기간 · 동일 구조 리포트: 언어별 시각 차이 비교 가능
• 04cron 자동화: 매시간 RSS, 시간당 2번 키워드 추출, 매일 00:30 일간, 매주 월요일 주간, 14일/8주 backfill
• 05본문 보강 (trafilatura) + cloakbrowser로 안티봇 우회, 원어 그대로 키워드 추출 (번역 금지 프롬프트)
• 06Docker (Playwright Python + Noto CJK + cron + tini), 운영 비용 사실상 0원 (Ollama free + Vercel + 로컬)

만든 이유

Android 기기를 들였는데 iCloud 캘린더가 Android에 잘 맞지 않았습니다. iPhone · Mac · Android · Windows 어디서나 동일하게 쓸 캘린더를 만들기로 했고, CalDAV 표준만 지원하면 모든 앱에서 그대로 사용할 수 있습니다.

코멘트

본인 삶의 향상을 위해 직접 만들고 통합했습니다: 모든 디바이스에서 동일 캘린더, 한 번의 .mobileconfig 다운로드로 iPhone 자동 등록. 현재 모든 일정을 이곳에서 관리하고 있습니다.

주요 특징

• 01CalDAV 양방향 동기화: Apple Calendar / Thunderbird / GNOME Calendar 등 표준 클라이언트 호환
• 02iOS .mobileconfig 브라우저에서 직접 생성: plist XML download, 1-click iOS/macOS CalDAV 자동 등록
• 03Next.js 16 + React 19 + React Compiler 활성, shadcn + Radix + Tailwind 4
• 04@dnd-kit 드래그/리사이즈: EventLayout/ResizePreview/MovePreview로 multi-week span 충돌 회피
• 05proxy.ts로 Vercel WAF 우회: CalDAV PROPFIND / REPORT 등 비표준 메서드를 caldav.hyns.dev 경유
• 06Server Action 인증 forward + CSRF (Origin/Host), Nanum Gothic + M+ 1 Code CJK 폰트 직접 호스팅

만든 이유

매일 아침 샤워 후 Siri 를 부르는 루틴을 간소화하고, 날씨를 시각적으로 확실하게 확인하기 위해 ESP32 로 대시보드를 작성했습니다. 마침 손에 ESP32 가 있어, 한 번 직접 만들어 보기로 했습니다.

코멘트

임베디드를 실제로 구현하고, 체험하고, 사용하고 있습니다. 펌웨어 (C++) → b-hub (TypeScript) → MySQL → KMA 로 이어지는 풀스택 흐름을 완성했으며, 책상이 아닌 기계 단에서 메모리 · 화면 buffer · 폰트 렌더링을 다시 생각해 보는 계기가 되었습니다.

주요 특징

• 01ESP32-D0WD-V3 + ILI9341 2.8" TFT (320×240) + XPT2046 저항식 터치: "Cheap Yellow Display"
• 02State machine: BOOT → WIFI_SETUP → LOCATION_SEARCH → WEATHER ⇄ SETTINGS / DISPLAY_SETTINGS
• 03두벌식 한글 키보드 직접 구현 (위치 검색용): 라이브러리 없이 작성, 재사용 가능하게 분리
• 04u8g2 unifont 한글 + drawJamoGlyph()로 호환 자모 픽셀 작도
• 05자기 복원: 60초 heap 모니터, KST 00/12시 자발적 reboot, fetch all-or-nothing (stale 유지)
• 06b-hub /weather/* 프록시: KMA API 키 미노출, 격자좌표 변환 위임, weatherApiKey quota 관리

만든 이유

유지보수가 중구난방이었습니다. 각 토이마다 백엔드를 따로 만드는 것이 N배 부담이었습니다. 인증 / 배포 / DB / 이미지 처리 / 캐시를 한 곳으로 모으기로 결심해 BBlog 이전 시점(2025)에 동시에 계획을 시작했습니다.

코멘트

토이별 난개발을 한 곳으로 통합했습니다. mail 도메인과 자체 웹메일 클라이언트로 Outlook 을 대체했고, 매번 설치하던 클라이언트를 웹에서 처리하고 있습니다.

주요 특징

• 01Bun on Vercel Functions + Hono 4 + @hono/zod-openapi (OpenAPI 3 + Swagger UI 자동)
• 028 도메인 (blog · calendar · weather · mail · drive · spotify · resume · badge), 40+ 테이블에 사용자 FK 일관 적용
• 033-tier hybrid storage: R2 hot / Mac Studio middle (예정) / Google Drive cold, lifecycle cron 자동 promote / evict
• 04RFC 4791 CalDAV 서버 자체 구현 (ctag · sync-token · ICS export · subscription token)
• 05Vercel 사이드카 구성: caldav-proxy (DDoS bypass 용 PROPFIND/REPORT) + upload-server (4.5MB 페이로드 제한 우회)
• 06API Token 다층 인증 (better-auth 세션 / apiToken 테이블 / 도메인별 weatherApiKey, IoT 디바이스용 quota 분리)