웹 앱 사용 설명서를 자동으로 작성해 주는 무료 Codex 플러그인, 'Write the F**king Manual'

내가 출시한 앱들은 하나같이 제대로 된 사용자 가이드가 없었다.

README 말고, 진짜 최종 사용자를 위한 거 말이다. 팀원 초대하는 법, 내보내기 버튼 어디 있는지 같은 거.

AI 덕분에 글 쓰는 건 이제 일도 아니다. 진짜 문제는 스크린샷이었다. 앱 실행하고, 데이터 넣고, 클릭하고, 자르고... 귀찮아서 그냥 안 하고 말지 싶어 똑같은 문의 메일만 계속 답장했다.

그래서 WTFM(Write the F***ing Manual)을 만들었다. Codex가 알아서 가이드 쓰고 그림까지 그려주는 무료 오픈소스 플러그인이다. 터미널에서 딱 한 번만 설정하면 끝이다.

curl -fsSL https://wtfm.sh/install | bash

wtfm setup # 컴퓨터당 한 번: Codex 연결
wtfm init # 프로젝트당 한 번

그다음 Codex 실행해서 그냥 말로 시키면 된다. "팀원 초대하는 가이드 그림이랑 같이 써줘"라고 하면 알아서 다 한다.

• 라우트, 템플릿, 컨트롤러를 읽어서 실제 단계랑 버튼 이름까지 다 찾아냄

• 네 마크업이랑 CSS로 화면을 다시 그려서 로컬 헤드리스 Chromium에서 PNG로 뽑아냄. 앱을 직접 실행할 필요도 없음

• 소스 코드랑 비교해서 단계랑 스크린샷이 맞는지 검증함

• 이미지랑 같이 마크다운 파일로 저장해서 리포지토리에 박아줌

WTFM 문서(help.wtfm.sh)도 이걸로 썼고, 내 다른 사업인 Together.ly(help.together.ly) 문서 만들 때도 써먹었다.

솔직히 말할 점들:

• 스크린샷은 실제 화면 캡처가 아니라 네 CSS로 만든 목업이라 샘플 데이터가 들어감.

• 프로젝트 분석할 때는 Codex를 `--dangerously-bypass-approvals-and-sandbox` 옵션으로 돌림. 글 쓸 때는 평소처럼 승인 프롬프트 쓰면 됨.

• 웹 앱용 최종 사용자 가이드 만드는 용도임. API 문서나 README용 아님. macOS랑 리눅스(WSL)에서 돌아감.

네 Codex 구독으로 돌아가는 거라 따로 계정 필요 없다. 마크다운 파일도 다 네 거다.

이제 막 시작한 단계다. Codex로 돌려보고 설정하다 막히는 부분이나, 스크린샷이 실제 화면이랑 다르게 나오는 거 있으면 꼭 좀 알려줘라.

웹사이트: https://wtfm.sh

리포지토리: https://github.com/SupportPages-io/wtfm