코드를 작성하지 않고 품질 체크를 시스템화했다. AI에게 사양을 전달하기만 하면 됐다

품질 체크 스크립트를 직접 만들지 않은 이야기입니다. Claude Code에게 만들게 했습니다. 코드는 한 줄도 작성하지 않았지만, 품질 체크는 제대로 작동하고 있습니다.

무엇이 두려워졌는가

コピペ de UI 라는 사이트에서 UI 컴포넌트 사례를 양산하고 있는데, 사례가 20개를 넘어갈 무렵 「데모와 샘플 소스가 괴리되면 어떡하지」라는 두려움이 생겼습니다.

각 사례 페이지에는 「작동하는 데모」와 「복사 붙여넣기용 샘플 소스」를 모두 배치하고 있습니다. 데모는 실제로 작동하는 HTML이고, 샘플 소스는 거기에서 불필요한 부분을 제외한 코드입니다.

이 부분이 괴리되면 사이트의 가치가 무너집니다. 「복사 붙여넣기하면 작동하는 사이트」인데 「샘플 소스를 복사 붙여넣기해도 작동하지 않는다」면 말이 안 됩니다.

그리고 실제로 괴리되어 있었습니다. 5월 26일에 확인했을 때 말이죠.

수작업으로 하고 있을 때는 페이지를 완성하는 것에 집중하고 있어서, 샘플 소스의 정합성까지는 눈길이 닿지 않았던 것입니다.

20개 분량을 눈으로 확인하는 것은 솔직히 하고 싶지 않았습니다. 더 나아가, 앞으로도 계속 수작업으로 확인하는 것은 무리라고 생각했습니다.

「체크 도구를 AI에게 만들게 한다」는 발상

여기서 「직접 체크 스크립트를 작성한다」는 선택지를 생각해 보았지만, 애초에 저는 코딩이 귀찮은 부류의 SE입니다. Node.js 스크립트를 작성하고, HTML을 해석하고, 차이점을 추출하고…… 하는 작업을 직접 할 엄두가 나지 않았습니다.

그럼 Claude Code에게 만들게 하자, 라고 생각했습니다.

사양을 일본어로 전달했습니다.

「데모 페이지의 HTML 파일을 해석해서, 거기에 임베드된 데모 코드와 대응하는 샘플 소스 파일의 코드를 대조하여, 괴리가 있으면 경고를 내보내는 스크립트가 필요해. Node.js로 동작할 것」

그게 전부입니다.

5월 26일의 커밋 d68f680 샘플 소스 체크 스크립트 추가가 바로 check-sample.js의 첫 도입입니다. Claude Code가 만든 코드를 저는 거의 읽지 않고 그대로 사용했습니다.

check-sample.js가 작동한 경험

node check-sample.js를 실행했더니, 괴리가 있는 페이지가 목록으로 나왔습니다.

「내가 코드를 작성하지 않아도 품질을 담보할 수 있는 시스템을 만들 수 있었다」

이것이 솔직한 경험입니다.

코드를 작성할 수 있는지 여부와 품질 체크 시스템을 가지고 있는지 여부는 별개의 문제입니다. 「도구를 만들 수 있는 AI가 있다」면, 저는 도구의 사양을 결정하는 사람이 되면 됩니다.

그 후, 슬래시 명령어(slash command) 안에 check-sample.js 실행을 포함시켰습니다. 사례를 하나 만들 때마다 체크가 돌아가는 상태가 되었습니다. 이때부터 「절차의 누락」이 줄어들었습니다.

도구는 수작업으로 막혔을 때 만드는 것이 좋다

check-sample.js를 넣은 것은 5월 26일입니다. 사이트 출시가 5월 16일이었으니, 10일 후입니다.

처음부터 「체크 스크립트를 준비한 뒤에 양산한다」는 설계는 되어 있지 않았습니다.

하지만 지금은 「그게 좋았다」고 생각합니다. 수작업으로 해봤기 때문에 「어디서 막히는지」를 알 수 있었습니다. 데모와 샘플 소스의 괴리 문제는 직접 만들었기에 체감할 수 있었던 문제입니다. 처음부터 완벽한 시스템을 설계하려고 했다면, 「괴리가 두렵다」는 감각은 나오지 않았을지도 모릅니다.

「막힌 부분을 도구로 해결한다」는 순서가 결과적으로 쓸 만한 도구를 만드는 지름길이었다고 생각합니다.

「품질 체크가 불안하다」는 상태가 된 후에 체크 도구를 만든다. 그 편이 사양이 구체적이 되고, 무엇을 체크해야 할지가 명확해집니다.

AI에 대한 지시만으로 품질 담보 가능

「코드를 작성하지 못하면 품질 체크를 할 수 없다」는 전제가 제 안에 있었던 것 같습니다.

하지만 지금은 check-sample.js가 작동하고 있으며, 매번 사례를 작성할 때마다 체크가 포함되어 있습니다. 저는 코드를 작성하지 않았습니다. 사양을 생각해서 Claude Code에게 전달하고, 작동하는 것을 워크플로(workflow)에 포함시켰을 뿐입니다.

「AI를 사용하면 품질 체크도 시스템화할 수 있다」는 경험이었습니다.

check-sample.js가 지키고 있는 사례집은 이쪽입니다. 괜찮으시다면 참고해 보세요.

Discussion