지난 여름부터 David Luhr와 프로젝트 단위로 협력하며 Figma 버전의 Tailwind UI (거의 완료!) 개발과 함께 Tailwind UI 템플릿을 만들 때 그의 접근성 전문 지식을 활용했습니다. 이를 통해 모든 사용자가 어떤 도구를 사용하든 웹을 탐색할 수 있는 마크업을 제공할 수 있었습니다.
이제 David가 정식으로 팀에 합류했다는 소식을 전하게 되어 기쁩니다!
David는 접근성 전문가이자 세계적인 프론트엔드 개발자, 뛰어난 교육자, 그리고 따뜻한 리더입니다. 그는 Steve와 제가 상상도 못한 방식으로 Figma에서 Tailwind UI를 마법처럼 다루며, Steve의 Tailwind UI 디자인을 모든 사용자를 위한 픽셀 단위의 완벽한 HTML과 CSS로 변환하는 놀라운 작업을 해냈습니다.
HTML이 배우기 쉽다고는 하지만, 마스터하기는 어렵습니다. David는 제가 20년 동안 웹 개발을 하며 한 번도 접하지 못한 스펙에 대한 지식을 가지고 있으며, 실제 기기 테스트를 통해 축적한 지식이 너무 방대해서 David가 기본적으로 작성하는 마크업만큼 견고한 코드를 작성하려면 수년의 노력이 필요할 정도입니다.
개발자들이 더 나은 인터페이스를 빠르게 구축할 수 있도록 돕는 회사로서, 우리가 만드는 도구가 기본적으로 접근성 모범 사례를 따르도록 하는 것은 우리의 책임입니다. David가 팀에 합류해 이 책임을 다할 수 있게 되어 정말 감사합니다.
David가 도움을 준 문제 중 가장 기억에 남는 것은 Tailwind CSS v2.0의 새로운 링 유틸리티를 개발한 것입니다. David가 Tailwind UI의 접근성 개선을 위해 작업을 검토하기 시작했을 때, 일부 포커스 스타일이 충분히 명확하지 않다는 지적을 했습니다. 예를 들어 버튼의 _색상_만 변경하는 것은 충분하지 않다는 것이 밝혀졌습니다. 포커스 링과 같이 화면에 새로운 요소를 그려야 누구나 쉽게 볼 수 있습니다.
이 문제를 해결하기 위한 방법을 찾는 것은 어려웠습니다. 보기 좋아야 했고, 유틸리티 클래스로 간단하게 구현할 수 있어야 했으며, Tailwind 내부에서 실제로 구현 가능해야 했습니다. David는 비디오 게임 콘솔이나 Apple TV와 같은 인터페이스를 연구해 보자고 제안했습니다. 마우스로 상호작용할 수 없는 환경에서 영감을 얻어 커스텀 가능한 오프셋 포커스 링을 구현하기로 결정했습니다.
이를 구현하는 것은 어려웠습니다. 박스 섀도우로 구현해야 했고, 기존 박스 섀도우 API와 조합할 수 있어야 했습니다. 여러 번 좌절했고, 혼자 작업했다면 포기했을지도 모릅니다. 하지만 결국 해결했고, 이제는 프레임워크에서 가장 좋아하는 기능 중 하나가 되었습니다.
David는 Tailwind UI의 컴포넌트 및 디자인 자산 개발을 주도하고, Tailwind CSS와 Headless UI와 같은 다른 프로젝트에서 접근성 지침을 제공할 예정입니다. 지난 6개월 동안 그와 함께 작업한 경험은 정말 멋졌고, 이제 그가 정식으로 팀에 합류하게 되어 매우 기쁩니다.
David의 작업을 계속 따라가고 싶다면? Twitter에서 David 팔로우하기 →