오늘의 코스

AI 에이전트에게 "바텀시트 만들어줘"라고 하면 매번 다른 품질의 코드가 나옵니다. 드래그 판정이 빠지거나, 애니메이션이 없거나, 매번 다른 디자인이 나오는 식으로요. fe-skills는 그 판단을 스킬 문서로 고정합니다 — 언제 이 패턴을 쓰는지, 왜 이 기술인지, 어디를 커스터마이즈하고 무엇을 조심해야 하는지, 그리고 바로 복사해 쓰는 구현 코드까지. Claude Code 플러그인 마켓플레이스로 설치합니다.

• UI·애니메이션 스킬 29종, 설계 문답 스킬 1종
• CSS 우선 설계, 런타임 의존성 0

$ /plugin marketplace add Guksu/fe-skills
$ /plugin install fe-ui@fe-skills        # 애니메이션 · UI/UX 구현 29종
$ /plugin install fe-system@fe-skills    # 코드 짜기 전 설계 문답 1종

AI 에이전트에게 개발을 맡기면 "브랜치부터 파고 시작해", "테스트 먼저 써", "임의로 커밋하지 마"를 매번 다시 말하게 됩니다. guksu-harness는 그 말을 프로젝트에 상주하는 규칙으로 심습니다 — 역할별 에이전트, 작업 절차, 기록 양식을 자동으로 만들고, 위험한 명령은 부탁이 아니라 훅으로 막습니다. Claude Code 플러그인 마켓플레이스로 설치합니다.

• 브랜치 · 기록 · 인계 · 배포 전 점검 스킬 9종
• git 변경 · 시크릿 읽기 · 보호 브랜치 편집은 훅으로 차단

$ /plugin marketplace add Guksu/guksu-harness
$ /plugin install guksu-harness@guksu-harness
$ /harness 이 프로젝트에 하네스 구축해줘   # 에이전트 · 스킬 · 훅 생성

Claude Code가 내 컴퓨터에 남기는 사용 기록을 읽어 "오늘 얼마 썼지?", "어떤 프로젝트가 돈을 많이 먹었지?", "캐시 덕분에 얼마나 아꼈지?"를 터미널에서 바로 보여주는 CLI입니다. 사용 데이터를 어디에도 보내지 않고 내 컴퓨터 안에서만 동작하며, 오늘 설치해도 지난달 기록까지 소급 집계됩니다. npm에 배포되어 있습니다.

• 오늘/주간/월간 비용 + 모델별 · 프로젝트/브랜치별 사용량 집계
• 요청 ID 기준 중복 제거로 정확한 비용 계산
• 히트맵 · 추이 · 세션 순위 · 캐시 절감액 · 월 예산 게이지 등 조회 명령

$ tokkaebi today
✔ 파일 269개 확인 · +16건 수집 (0.0초)

오늘 사용량 · 2026-08-11 (화) · $87.27
모델별 · 프로젝트/브랜치별 표 출력

캐시 절감  $390.21 — 캐시가 없었다면 오늘 $477.48
연속 사용  2일째

코딩테스트 준비를 문제 풀이로 끝내지 않고 학습 시스템으로 만든 웹 앱입니다. 유형별 로드맵을 따라 문제를 풀면 커버리지와 정확도가 쌓이고, 틀린 문제는 복습 큐로 돌아옵니다. 제한시간 모의고사와 접근을 설명한 뒤에야 코딩을 시작하는 라이브 코테 모드로 실제 시험 조건을 재현합니다.

• 그리디 · DP · BFS/DFS 등 18개 유형 123문제 로드맵 + 유형별 진행률
• 오답 기반 복습 큐 — 틀린 문제가 다시 풀 문제로 돌아옴
• 제한시간 모의고사 — 시험 시간 안의 제출만 채점
• 라이브 코테 모드 — 랜덤 문제 35분, 접근 설명 후 코딩 시작

연인·친구와 '로그'라는 공유 공간을 만들고, 초대코드 하나로 합류해 다녀온 음식점을 사진·별점·메모로 기록하는 React Native 앱입니다. 기록이 쌓이면 전부 지도 위 핀으로 모여 우리만의 맛집 지도가 완성됩니다. App Store에 출시되어 운영 중입니다.

• 초대코드 하나로 합류하는 공유 기록 공간 '로그' (로그당 최대 5명)
• 카카오 장소검색으로 위치·주소 자동 입력 + 사진 5장·별점·방문일·메모
• 내 맛집 핀 + 주변 음식점 핀 + 위시리스트를 지도 한 화면에서

앱 속 웹뷰에서 생기는 문제만 골라 해결하는 헤드리스 라이브러리입니다. 키보드가 화면을 밀어 올리는 레이아웃 밀림, 네이티브와 어긋나는 스크롤처럼 일반 웹에서는 없던 증상이 대상입니다. Three.js 카메라 모델로 네이티브 같은 페이저를 재현하고, 코어/React/Vue 패키지로 제공합니다.

• CSS3DRenderer 카메라 모델 기반 가로·세로 페이저 + 핀치 줌 (ScrollContainer)
• visualViewport로 iOS 키보드 레이아웃 밀림 방지 (StableInput)
• 네이티브 바운스와 충돌 없는 풀투리프레시 상태 머신 (PullToRefresh)
• 소프트 키보드·세이프에어리어 반응형 감지 훅 (useVirtualKeyboard · useSafeArea)

"버그가 났어요"라는 제보를 받아도 재현이 안 되면 원인을 찾기 어렵습니다. qa-recorder는 화면(DOM)·네트워크·콘솔 로그를 백그라운드에서 최근 20분간 기록해 두었다가, 버그 직후 버튼 한 번에 전체 상황을 HTML 리포트 하나로 만들어주는 클라이언트 사이드 라이브러리입니다.

• rrweb 기반 DOM 세션 리플레이로 화면 상태 그대로 재생
• HAR 1.2 포맷 네트워크 캡처 (fetch · XHR 인터셉트, 최대 100개)
• error · warn · onerror · unhandledrejection 자동 수집
• Authorization · Cookie 등 민감 헤더 자동 마스킹

용량 큰 영상을 어딘가에 올리지 않고도 압축할 수 있는 웹 앱입니다. 브라우저가 지원하면 WebCodecs로 GPU 가속 인코딩을 쓰고, 아니면 FFmpeg.wasm으로 자동 전환합니다. 처리 과정 내내 영상은 기기 밖으로 나가지 않습니다.

• WebCodecs · FFmpeg.wasm 하이브리드 엔진 자동 폴백
• H.264 인코딩 · CRF 18~40 품질 슬라이더
• 원본 / 1080p / 720p / 480p 해상도 선택
• 실시간 진행률 표시 · 영상은 브라우저 밖으로 나가지 않음

환경변수와 JSON 설정을 하나의 스키마로 함께 검증하는 도구입니다. 문자열로 들어온 값을 숫자·불리언으로 자동 변환해 주니, 흩어진 설정의 오타나 타입 실수가 배포 전에 걸립니다. 민감 값 마스킹과 검증·생성·비교용 CLI를 내장합니다.

• 단일 스키마로 env · JSON 설정 동시 검증
• 문자열 → 숫자 · 불리언 자동 타입 변환
• 민감 값 마스킹 출력 (sk-****xxxx)
• 스키마에서 그대로 추론되는 TypeScript 타입 (zero-config)