원클릭으로 Manus에서 모든 스킬 실행

car-noise-pwa-builder

스타2

포크0

업데이트2026년 4월 27일 06:10

자동차 이상 소음 진단용 PWA를 자동으로 스캐폴딩한다. 마이크 입력 FFT 스펙트로그램 + 라즈베리파이로부터 WebSocket으로 받은 CAN 데이터(RPM·속도·조향각·기어) 동시 시각화 + 녹음 정지 시 WAV+CSV ZIP 저장 + Service Worker 오프라인 동작까지 한 번에 만든다. 사용자가 "차량 진단 PWA 만들어줘", "OBD2 시각화 앱", "FFT 스펙트로그램 PWA", "마이크 + CAN 동시 기록 앱", "car-noise-pwa-builder" 같은 요청을 할 때 호출한다.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

gaebalai

gaebalai/gaebalai-marketplace

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

car-noise-pwa-builder

원문 글의 PWA 구조를 그대로 재현하는 풀 스택 스캐폴드. 스마트폰 브라우저 ↔ 라즈베리파이 4 ↔ OBD2 USB-CAN 흐름을 가정한다.

산출 구조

<project_name>/
├── pwa/
│   ├── index.html
│   ├── app.js              # 마이크 FFT + WebSocket + IndexedDB + ZIP
│   ├── sw.js               # Service Worker
│   └── manifest.webmanifest # 아이콘은 사용자가 별도 추가 권장
├── pi/
│   ├── pi_server.py        # aiohttp HTTPS + WebSocket + python-can 디코더
│   ├── requirements.txt
│   └── certs/
│       ├── README.md       # mkcert 가이드 (templates에 미리 포함)
│       └── (cert.pem / key.pem — mkcert 발급 후 사용자가 배치)
└── README.md

v0.1은 PWA 아이콘 자산을 동봉하지 않습니다. 홈 화면 아이콘이 필요하면 192×192 PNG를 pwa/icon-192.png로 저장하고 manifest.webmanifest에 icons 항목을 추가하세요.

워크플로우

STEP 1. 사용자 입력 수집

project_name (예: my-car-diag)
pi_host (Wi-Fi 상에서 접근 가능한 라즈베리파이 IP, 예: 192.168.1.42)

신호 매핑 JSON (can-signal-hunter 결과물 또는 사용자 직접 입력)

{
  "rpm":      {"id": "0x202", "byte": 0, "width": 16, "endian": "big",        "scale": 0.25, "offset": 0},
  "speed":    {"id": "0x202", "byte": 2, "width": 16, "endian": "big",        "scale": 0.01, "offset": 0},
  "steering": {"id": "0x082", "byte": 0, "width": 16, "endian": "big_signed", "scale": 0.1,  "offset": 0},
  "gear":     {"id": "0x228", "byte": 0, "width": 8,  "endian": "uint",       "scale": 1,    "offset": 0}
}

STEP 2. 템플릿 복사

templates/ 디렉토리의 5개 파일을 사용자 프로젝트로 복사하면서 다음 토큰 치환:

토큰	치환값
`{{PROJECT_NAME}}`	프로젝트명
`{{PI_HOST}}`	라즈베리파이 호스트
`{{SIGNAL_MAPPING_JSON}}`	신호 매핑 JSON 문자열

STEP 3. PWA 의존성 설치 안내

PWA는 정적 파일이라 빌드 도구 없음. 라즈베리파이 쪽만:

cd pi
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt

STEP 4. HTTPS 인증서 생성 안내

브라우저 getUserMedia는 HTTPS 필수. mkcert로 로컬 CA 발급 가이드를 README에 포함.

brew install mkcert  # 또는 apt install libnss3-tools && go install
mkcert -install
mkcert {{PI_HOST}}
mv {{PI_HOST}}.pem        pi/certs/cert.pem
mv {{PI_HOST}}-key.pem    pi/certs/key.pem

STEP 5. 실행

라즈베리파이:

cd pi && python pi_server.py
# 환경변수로 호스트/포트/Origin 변경 가능:
#   HOST=0.0.0.0 PORT=8443 ALLOWED_ORIGIN=https://my-pi:8443 python pi_server.py

스마트폰 브라우저에서 https://{{PI_HOST}}:8443/ 접속 → "홈 화면에 추가"로 PWA 설치.

기술 스택 (글 본문과 동일)

마이크: navigator.mediaDevices.getUserMedia({ audio: true })
FFT: AudioContext + AnalyserNode (FFT 사이즈 16384)
스펙트로그램: Canvas 2D 시간×주파수 히트맵
음성 저장: IndexedDB Blob
오프라인: Service Worker
ZIP 묶기: JSZip (CDN)
CAN 수신: WebSocket (wss://{{PI_HOST}}:8443/ws)

보안 주의

mkcert로 만든 인증서는 로컬 개발용. 차량 안에서 자기 폰만 쓰는 시나리오 한정
Pi 서버는 LAN 노출만 가정 — 인터넷에 직접 노출 금지
WebSocket 메시지는 읽기 전용. ECU 쓰기는 절대 구현하지 말 것

참고 템플릿 (templates/)

index.html — 단일 페이지 UI
app.js — 모든 클라이언트 로직
sw.js — Service Worker 캐시 전략
manifest.webmanifest — PWA 매니페스트
pi_server.py — aiohttp + python-can 서버

이 저장소의 다른 Skills

같은 저장소

car-noise-report

gaebalai/gaebalai-marketplace

PWA가 내보낸 ZIP(audio.webm/wav + can.csv + metadata.json)을 입력받아 이상음 후보 구간을 자동 탐지하고 RPM·속도와의 상관관계를 분석한 리포트(MD + PNG 패널)를 생성한다. 음향 에너지 급증 구간, 특정 RPM에서만 나타나는 피크 주파수, 노면/속도와 무관한 정상 회전성 노이즈 분리 등을 다룬다. 사용자가 "이상음 분석해줘", "녹음 ZIP 분석", "주행 노이즈 리포트", "특정 RPM에서 나는 소리 찾아줘", "car-noise-report" 같은 요청에서 호출한다.

2026-04-272

can-signal-hunter

gaebalai/gaebalai-marketplace

차량 OBD2/CAN 로그(.asc, .log, .blf, .csv)에서 RPM·차속·조향각·기어 같은 신호의 ID와 바이트 위치, 스케일·오프셋을 자동 추정하고 검증 그래프(PNG)와 DBC 초안을 생성한다. 사용자가 "CAN 로그 분석", "RPM ID 찾아줘", "0x202가 무슨 신호야", "조향각 ID 매핑", "DBC 만들어줘" 같은 요청을 할 때 호출한다. 제조사 비공개 신호를 빠르게 역엔지니어링할 때 쓰는 스킬.

2026-04-272

raspi-can-bootstrap

gaebalai/gaebalai-marketplace

라즈베리파이 4(Raspberry Pi OS Bookworm)에 OBD2/CAN 진단 환경을 한 번에 깔아주는 스킬. Node.js 18 LTS, Claude Code, python-can, socketcan, USB-CAN 어댑터(slcan/canable) udev 규칙, aiohttp 의존성, 스왑 확장(4GB 미만 모델용)까지 부트스트랩 스크립트로 자동화한다. 사용자가 "라즈베리파이에 Claude Code 깔아줘", "Pi에 CAN 환경 세팅", "OBD2 raspi 부트스트랩", "raspi-can-bootstrap" 같은 요청을 할 때 호출한다.

2026-04-272

highlights-selector

gaebalai/gaebalai-marketplace

topics.json에서 중요도 상위 토픽을 선정해 60초 하이라이트 영상용 highlights.json을 생성합니다. 각 클립의 자막(caption/subCaption), 시작·종료 시각, src 경로를 결정하고 합계 60초를 정확히 맞춥니다. "60초 하이라이트 만들어줘", "highlights.json 만들어줘" 같은 표현에서 발동됩니다. cc-meeting-highlight 파이프라인의 Phase 4.

2026-04-262

topics-extractor

gaebalai/gaebalai-marketplace

회의 받아쓰기(transcript.json)와 회의록 요약 텍스트(예: Gemini Meet 요약, Teams 요약, 네이버 웍스 요약)를 입력으로 받아, 회의에서 다뤄진 주요 토픽을 추출해 transcript의 word-level 타임스탬프와 매칭한 topics.json을 생성합니다. "회의 토픽 뽑아줘", "topics.json 만들어줘", "회의 요약과 받아쓰기 매칭해줘" 같은 표현에서 발동됩니다. cc-meeting-highlight 파이프라인의 Phase 3.

2026-04-262

empirical-prompt-tuning

gaebalai/gaebalai-marketplace

사용자가 쓴 Claude Code Skill / SlashCommand / 프롬프트를 별도 AI에 백지 dispatch 시켜 재현성을 객관 측정하는 메타 스킬. 자기 재독으로는 못 보는 불명확점·재량 보완·재시도를 정성+정량(tool_uses) 양면으로 수집해 1회 1테마로 정련. 트리거 - "내 스킬 평가해줘", "프롬프트 재현성 검증", "skill 튜닝", "SKILL.md 다듬어줘", "암묵지 빼줘", "empirical prompt tuning". 단순 윤문은 humanize-korean, 다분야 토론 리뷰는 start로 분기.

2026-04-262

name

car-noise-pwa-builder

description

car-noise-pwa-builder

원문 글의 PWA 구조를 그대로 재현하는 풀 스택 스캐폴드. 스마트폰 브라우저 ↔ 라즈베리파이 4 ↔ OBD2 USB-CAN 흐름을 가정한다.

산출 구조

<project_name>/
├── pwa/
│   ├── index.html
│   ├── app.js              # 마이크 FFT + WebSocket + IndexedDB + ZIP
│   ├── sw.js               # Service Worker
│   └── manifest.webmanifest # 아이콘은 사용자가 별도 추가 권장
├── pi/
│   ├── pi_server.py        # aiohttp HTTPS + WebSocket + python-can 디코더
│   ├── requirements.txt
│   └── certs/
│       ├── README.md       # mkcert 가이드 (templates에 미리 포함)
│       └── (cert.pem / key.pem — mkcert 발급 후 사용자가 배치)
└── README.md

v0.1은 PWA 아이콘 자산을 동봉하지 않습니다. 홈 화면 아이콘이 필요하면 192×192 PNG를 pwa/icon-192.png로 저장하고 manifest.webmanifest에 icons 항목을 추가하세요.

워크플로우

STEP 1. 사용자 입력 수집

project_name (예: my-car-diag)
pi_host (Wi-Fi 상에서 접근 가능한 라즈베리파이 IP, 예: 192.168.1.42)

신호 매핑 JSON (can-signal-hunter 결과물 또는 사용자 직접 입력)

{
  "rpm":      {"id": "0x202", "byte": 0, "width": 16, "endian": "big",        "scale": 0.25, "offset": 0},
  "speed":    {"id": "0x202", "byte": 2, "width": 16, "endian": "big",        "scale": 0.01, "offset": 0},
  "steering": {"id": "0x082", "byte": 0, "width": 16, "endian": "big_signed", "scale": 0.1,  "offset": 0},
  "gear":     {"id": "0x228", "byte": 0, "width": 8,  "endian": "uint",       "scale": 1,    "offset": 0}
}

STEP 2. 템플릿 복사

templates/ 디렉토리의 5개 파일을 사용자 프로젝트로 복사하면서 다음 토큰 치환:

토큰	치환값
`{{PROJECT_NAME}}`	프로젝트명
`{{PI_HOST}}`	라즈베리파이 호스트
`{{SIGNAL_MAPPING_JSON}}`	신호 매핑 JSON 문자열

STEP 3. PWA 의존성 설치 안내

PWA는 정적 파일이라 빌드 도구 없음. 라즈베리파이 쪽만:

cd pi
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt

STEP 4. HTTPS 인증서 생성 안내

브라우저 getUserMedia는 HTTPS 필수. mkcert로 로컬 CA 발급 가이드를 README에 포함.

brew install mkcert  # 또는 apt install libnss3-tools && go install
mkcert -install
mkcert {{PI_HOST}}
mv {{PI_HOST}}.pem        pi/certs/cert.pem
mv {{PI_HOST}}-key.pem    pi/certs/key.pem

STEP 5. 실행

라즈베리파이:

cd pi && python pi_server.py
# 환경변수로 호스트/포트/Origin 변경 가능:
#   HOST=0.0.0.0 PORT=8443 ALLOWED_ORIGIN=https://my-pi:8443 python pi_server.py

스마트폰 브라우저에서 https://{{PI_HOST}}:8443/ 접속 → "홈 화면에 추가"로 PWA 설치.

기술 스택 (글 본문과 동일)

마이크: navigator.mediaDevices.getUserMedia({ audio: true })
FFT: AudioContext + AnalyserNode (FFT 사이즈 16384)
스펙트로그램: Canvas 2D 시간×주파수 히트맵
음성 저장: IndexedDB Blob
오프라인: Service Worker
ZIP 묶기: JSZip (CDN)
CAN 수신: WebSocket (wss://{{PI_HOST}}:8443/ws)

보안 주의

mkcert로 만든 인증서는 로컬 개발용. 차량 안에서 자기 폰만 쓰는 시나리오 한정
Pi 서버는 LAN 노출만 가정 — 인터넷에 직접 노출 금지
WebSocket 메시지는 읽기 전용. ECU 쓰기는 절대 구현하지 말 것

참고 템플릿 (templates/)

index.html — 단일 페이지 UI
app.js — 모든 클라이언트 로직
sw.js — Service Worker 캐시 전략
manifest.webmanifest — PWA 매니페스트
pi_server.py — aiohttp + python-can 서버