profile_image
vibecode
25-05-28 14:21 1건 83회
A11y-AI 스캐너 (AI KWCAG 2.2 웹 접근성 진단도구) 제작기

얼마전 https://replit.com/ 으로 아래와 같은 디자인을 만들었습니다.

근데 조금만 기능을 추가해 보려면 유료로 넘어가야 하더군요. 

eaa0af799dcd74511318d7f99a4367f0ac7a11bf.png

Replit 를 쓰기에는 아직 확인해 봐야 할 툴들이 많습니다. 💵 내돈~ㅜ.ㅜ


만들어진 디자인을 가지고 클로드4.0 을 통해서도 구현을 해보지만 ~ 아따 느리고 진행 되다가 끊기고~ 그러다가 2시간, 4시간 뒤에 다시 하라고 하고~ 아따 속 터지것네~ 

물론 디테일한 PRD 를 만들지 않았습니다.


그러다가 Gemini 가 속도도 빨라지고 성능도 좋아 졌다 해서 ~ 넘어가 봅니다.

제미나이에 보면 '코딩 파트너' 가 있습니다. 이녀석을 이용해 봅니다.

하지만 원하는걸 제대로 만들어 주지 못합니다.

bd341fae16a15fee4738f60d24b74a5dac34027f.png
그러다가 확실한것을 깨닫습니다.

간단한 부분개발은 챗봇을 통해서 기능 구현이 가능하지만 사이즈가 조그만 커져도 챗봇은 방법이 아니었습니다.

이럴때는 진짜 커서나, 윈드서프 같은 툴로 넘어가야 가능하겠더군요.

그러다가 https://aistudio.google.com/ 라는것을 발견 합니다.


여기에 Build 라는 메뉴가 있는데 이녀석이 대박 좋은 툴 이었습니다.

e563f14cf29ab1b329b2bca6d3bc2bf0f223785a.png


디자인한 화면을 캡쳐해서 주고 '웹접근성 진단 도구' 를 만들어 줘~ wcage2.2 기준으로 만들어줘

라고 했더니 ~ 워메~ 이것이 무엇이여~ 겁나게 만들어 줍니다.

a3b4d764c3bdbd6f482bc5f7112c2b1725852478.png몇번의 오류 수정을 거쳐서 완성을 했는데 이 도구는 특별한 점이 있습니다.


바로  웹접근성 분석에 AI를 이용하여 분석할수 있게 했습니다.

와~ 이거 선 넘는거 아뉘니~~ 😳

파일 다운로드도 제공되기 때문에 기능까지 다 만들어지면 다운로드 받을수 있습니다.


다운로드한 파일을 vscode 로 가지고 옵니다.

구동을 해 보는데 에러가 납니다~ 난감 하지만 설치 해 놨던 클라인(Cline) 을 사용해 봅니다.

4c0ad90d6aa47bea21c8ca153420bcacae9ee222.png여기서 클라인이 다시 한번 수정해 줍니다.


그런데 치명적인 단점이 있습니다.

클라인~ 매우 비쌉니다~ 기본은 금방 소진되어서 5달러를 바로 결제 합니다.
4e8d9d401bbadfe7986c66773efba53474e87818.png야~ 제미나이는 100번 이상 번역을 해도 100원 때인데 이건 순식간 입니다.


어찌 되었든 클라인을 통해서 구동 버전까지 완성이 되었습니다.

이렇게 말이죠~~ 와 대박입니다.

769f02cc70565d97f6c0abc33ffb92a94827467f.png

AI 에이전트를 통해 이제 상상하는건 이렇게 현실이 될수 있습니다.


👍 Good~

추천 1

댓글목록

vibecode님의 댓글

profile_image
vibecode 작성일

이건 진단 할 때마다 토근 사용비용이 들어가 오픈을 못하겠네요. ㅎ~

AI 개발 이야기

Total 7 1 페이지