프로젝트

마지막으로 한 날짜를 적어 두면 며칠이 지났는지 보여줍니다. 반복 주기를 정하면 다음 날짜에 알림을 받을 수 있고, 일을 마친 뒤에는 버튼 한 번으로 기록을 남깁니다. 로그인 없이 쓰며 기록은 휴대폰에 저장됩니다.

• 칫솔, 필터 등 자주 쓰는 항목을 골라 추가
• 깜빡한 기록은 지난 날짜로 추가하고, 잘못 누른 완료는 취소
• 백업 파일로 복원하거나 기록을 CSV로 내보내기

회차별로 원고를 나누고, 인물 관계도와 연표를 옆에 두고 글을 씁니다. 여러 회차를 이어서 읽거나 수정 전 원고를 따로 남길 수 있습니다. 원고는 브라우저에 자동 저장되며 인터넷이 끊겨도 작업할 수 있습니다.

• 회차를 카드로 펼쳐 순서 바꾸기
• 하루 집필 목표와 회차별 글자 수 확인
• 인물명과 고유명사를 다르게 쓴 곳 찾기
• TXT, Markdown, DOCX 내보내기와 작품 전체 백업

바텀시트, 핀치 줌, 가상 스크롤 등을 구현할 때 AI가 참고할 설명과 코드를 묶었습니다. 예제마다 왜 이렇게 구현했는지, 어디를 바꿔 쓸 수 있는지 적어 두었습니다. Claude Code, Codex, Cursor 등에서 설치해 사용합니다.

• UI 구현 스킬 53개와 화면 설계 스킬 1개
• CSS와 TypeScript로 구현한 예제, 별도 런타임 라이브러리 불필요

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

보호 브랜치에서 파일을 수정하거나 허용하지 않은 Git 명령을 실행하려 할 때 훅으로 막습니다. 저장소를 읽어 필요한 설정을 제안하고, 설정을 적용한 뒤 검사합니다. 업데이트해도 팀이 고쳐 둔 규칙과 설정은 남습니다.

• 기본 설치는 규칙과 훅만, 기록 양식과 추가 검사는 선택
• 설정 파일 검사와 훅 실행 결과를 구분해 확인
• 팀 설정을 내보내 다른 저장소에도 적용
• 기록, 인계, 배포 전 점검 등에 쓰는 스킬 9개

$ npx guksu-harness init --app both
$ npx guksu-harness diagnose .
$ npx guksu-harness compose . --dry-run
$ npx guksu-harness verify . --run

Claude Code가 남긴 로그를 읽어 토큰을 얼마나 썼는지, API 요금으로 얼마인지 계산합니다. 프로젝트별 사용량과 캐시로 아낀 비용을 함께 보여줍니다. 로그는 외부로 보내지 않으며 설치 전 기록도 집계합니다.

• 날짜, 모델, 브랜치별로 사용량 조회
• 같은 요청이 여러 번 기록돼도 한 번만 계산
• 사용량 히트맵과 월 예산 확인

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

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

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

유형별로 문제를 풀고, 틀린 문제는 모아서 다시 풉니다. 유형마다 얼마나 풀었고 얼마나 맞혔는지 볼 수 있습니다. 시간을 정해 놓고 푸는 모의고사와 풀이 방법을 먼저 설명하는 면접 연습 모드도 있습니다.

• 그리디, DP, BFS/DFS 등 18개 유형의 123문제
• 모의고사는 제한 시간 안에 제출한 풀이만 채점
• 면접 연습은 무작위 문제를 35분 동안 풀이

연인이나 친구를 초대해 다녀온 식당의 사진, 별점, 메모를 함께 남깁니다. 기록한 식당은 지도에서 다시 찾을 수 있습니다. 가보고 싶은 곳은 따로 담아 두었다가 방문 후 기록으로 바꿉니다.

• 기록 공간마다 초대 코드로 최대 5명 참여
• 카카오 장소 검색으로 식당을 찾고 사진은 기록당 최대 5장 첨부
• 지도를 움직이며 주변 음식점 찾기

iOS에서 키보드가 뜰 때 화면이 밀리는 문제와, 웹뷰의 스크롤이 제스처와 충돌하는 문제를 다룹니다. 스타일 없이 동작만 제공하므로 앱 디자인에 맞춰 붙여 쓸 수 있습니다. 순수 JavaScript와 React, Vue에서 사용합니다.

• 외부 의존성 없이 CSS transform으로 페이지 넘기기와 핀치 줌 구현
• 입력창과 visualViewport를 이용한 키보드 화면 보정
• 당겨서 새로고침, 스크롤 잠금, 키보드와 세이프에어리어 감지

페이지를 사용하는 동안 화면 변화와 네트워크 요청, 콘솔 오류를 기록합니다. 버그를 발견하면 메모를 적고 리포트를 저장합니다. 리포트에서 실패한 요청이나 오류를 누르면 그때의 화면으로 이동합니다.

• 기본 설정에서 최근 20분의 화면 변화와 요청 100개 보관
• 재생용 HTML, 세션 기록, HAR 파일을 ZIP으로 저장
• Authorization과 Cookie 등 민감한 헤더는 가려서 기록
• 새로고침 후 기록 복원과 자체 서버 업로드는 설정으로 선택

영상 파일을 넣고 해상도와 화질을 고르면 브라우저 안에서 압축합니다. WebCodecs를 쓸 수 없거나 인코딩에 실패하면 FFmpeg.wasm으로 전환합니다. 압축 전후 용량을 비교하고 결과를 내려받을 수 있습니다.

• 원본, 1080p, 720p, 480p 중 해상도 선택
• H.264 인코딩과 CRF 18~40 화질 조절
• 소리를 빼고 저장하는 옵션

설정에 필요한 키와 타입을 정의하면 환경변수와 JSON 파일을 같은 기준으로 검사합니다. 문자열로 들어오는 숫자와 불리언을 변환하고 TypeScript 타입도 추론합니다. 비밀번호나 API 키로 지정한 값은 로그에 그대로 출력하지 않습니다.

• 필수 값, 기본값, 허용할 값의 목록 지정
• CLI로 설정 검사와 .env.example 생성
• 두 환경 파일의 차이 비교와 시크릿 검사