Tailwind-a11y 개발 기록 4편 (출시 2주 뒤 ! 2300+ download 라니)

tailwind-a11y를 처음 만들기 시작한 지 2주 정도 됐다.

처음에는 그냥 AI 가 CSS 라이브러리로 많이 채택하는 Tailwind 의 접근성 문제를 조금 더 빨리 잡아보고 싶어서 만든 스크립트같이 간단한 레포였는데,, 이것저것 붙이다 보니 지금은 CLI도 있고, ESLint 플러그인도 있고, VS Code 익스텐션도 있고, 최근엔 GitHub Action까지 마켓플레이스에 배포했다. (이건 쓰임이 많을 것 같진 않다 ㅎㅎ) 

시간 날때마다 조금씩 라이브러리를 업데이트 하는게 재미지다. 

 

그리고 npm 다운로드가 2,300을 넘었다.(!) 

pr 이 올라오거나 연락이 오는게 아니니 사실 나에게 와닿는 건 없지만..

내가 만든 패키지를 누가 실제로 설치해서 쓰고 있다는 게 잘 안 믿기긴 한다. 

 

업데이트들 

처음에는 Tailwind class 몇 개 분석하는 정도였는데 계속 사용하다 보니 부족한 부분이 보여서 하나씩 추가했다.

• theme.extend.colors, spacing을 읽어서 커스텀 Tailwind theme 지원
• text-gray-900/30 같은 opacity modifier 지원
• GitHub Action 추가

GitHub Action을 붙이면서 이제 CLI, ESLint, VS Code에 이어 네 번째 어댑터가 생겼다.

PR에서 바로 접근성 위반을 확인할 수 있도록 GitHub Action에서는 위반 내용을 코멘트로 남기게 했다.

이렇게 하나씩 붙이다 보니까 처음에 엔진이랑 어댑터를 분리해둔 게 꽤 다행이라는 생각이 들었다. 

 

실제 오픈소스에도 돌려보기

사실 이 라이브러리를 어떻게 수치로 그 임팩을 증명할 수 있을까 하다가 유명한 오픈소스 몇 개에 직접 돌려봤다.

먼저 shadcn/ui 에 돌려보니 contrast 위반이 하나 잡혔는데, 코드를 따라가 보니 아직 문서 사이트에 연결되지 않은 개발 중인 신규 기능 쪽 코드였다. 코드 자체에는 실제로 문제가 있었지만 지금 당장 사용자가 보는 화면은 아니어서 PR까지 올리지는 않았다.

 

그리고 precedent라는 Next.js SaaS 스타터 템플릿에도 돌려봤다. 여기서는 focus:outline-none만 있고 실제 focus style은 없는 버튼 두 개가 잡혔다. 키보드로 탭을 눌러 이동했을 때 현재 어디에 focus가 있는지 알 수 없는 코드였다.

요건 실제로 사용하는 코드인지 확인한 다음 간단하게 수정해서 PR도 올렸다. (PR 올리고 나서 레포를 조금 더 보다가 마지막 merge가 2024년 10월인걸 너무 늦게 봐버렸다..) 

 

요즈음은 조금 바빴어서 더 많이 돌려보진 못했지만, 회사에서 하던 일 같아서 재밌었다. ㅎ,ㅎ 

처음부터 거창하게 라이브러리를 만들겠다고 시작한 건 아니었는데, 만들다 보니 여기까지 왔다. 당분간은 적용해보고, 또 필요한 것들 하나씩 고쳐볼 것 같다. 처음 배포하고 한 3일 뒤에 톡방에만 들어가있는 오픈소스 기여모임에 피드백 요청을 올렸는데, 아무에게도 연락이 오지 않았다.. 예상하긴 했지만 쓴소리가 너무 필요한데 목이 더 말라졌던 것 같다.

1.0.0 까지 언젠간 올릴 수 있겠지? 그 전에 접근성 커뮤니티나 한국 개발자 커뮤니티 같은 곳에도 올려보고 싶은데 아직은 내가 만든 라이브러리에 대한 자신감이 없어서 못올리는 중이다.. 더더 디밸롭 하고 나중에 자랑스럽게 올려보는 날이 오길.