[개발일기] Static HTML과 Implicit ARIA role
몇 주 전, 작업중인 페이지에 드롭박스를 추가했는데 유닛테스트를 돌릴 때 마다 경고메세지가 떴다. 대강 리액트 컴포넌트가 랜더링 될 때 state를 업데이트 할 수 없을 수도 있다는 소리였는데 차라리 에러메세지 였으면 덜 애매했을 것이 경고메세지는 프로젝트는 멀쩡히 돌아가는데 잠재적인 문제를 품고있다는 의미여서 그냥 지나칠 수 없는 골치아픈 상황에 직면해 버렸다. 처음엔 내 코드에 문제가 있는 줄 알고 이리저리 디버깅 해봤지만 결론은 회사에서 쓰고있는 UI 라이브러리와 리액트 버전이 안맞아 일어나는 충돌이었다. UI 라이브러리 개발자들은 라이브러리를 최신버전으로 업데이트 하면 더이상 존재하지 않는 이슈라고 했지만 이거 하나 고치자고 라이브러리를 업데이트 했다가는 프로젝트 전체를 뒤집어 엎어야 해 파장이 너무 컸다. 나는 작은 서랍안에 물건을 꺼낸 뒤 서랍을 안전히 닫고싶을 뿐인데 집안에 전자제품과 가구를 싹 꺼내 먼지를 털어낸 뒤 재배치를 할 필요까진 없지 않은가. 사수와 머리를 맞대고 고민해본 결과 문제를 일으킨 UI 드롭박스를 걷어내고 HTML로 대체하기로 했다. 말 그대로 우리만의 ui component를 만드는 것이다.
사수가 대강 이래이래 해보라며 써내려간 코드를 실행시켜보니 CSS styling이 빠져서 조금 엉성해보이는 드롭다운이 완성되었다. 스타일링을 더해봤는데 전혀 먹히지 않고 여전히 못생겼다. 이것도 한 30분 삽질하다 구글링 해 보니 <select> 태그는 스타일링이 안먹히기로 악명이 높은 태그란다. 대체방법들로는 ul, li 태그를 이용해 드롭다운처럼 작동하게 만든 뒤에 예쁘게 꾸며주는 것이었는데 한국에서도 프로젝트를 할 때 이렇게 했던 기억이 있어서 select 태그를 지우고 ul과 li로 대체해 기존에 쓰던 UI 라이브러리와 같은 스타일로 완성시켰다. 나름 뿌듯해하며 다음날 standup 미팅에서 이렇게 작업했다고 설명했는데 미팅이 끝나자마자 바로 사수한데 머리채 잡혀갔다. ul 태그를 써서 드롭다운을 만드는 방법은 쓰지 않았으면 좋겠다는거다. 왜? 냐고 묻고 Static HTML이 아니어서 라는 답을 받았다. 머리를 한대 맞은 느낌이었다. 너무나 당연한 것을 하지만 굳이 따르지 않아도 된다고 생각하고 지내온 이론을 사수는 대쪽같이 지키고 있던 것이다. 마지막 항변으로 그럼 이렇게 구리게 생긴걸 그대로 배포할거냐고 물었더니 못생긴건 할 수 있는 만큼만 꾸며주고 기능만 잘 작동되면 배포해도 상관없다길래 전날 뿌듯해하며 짠 코드를 속절없이 select 태그로 돌렸다. 만약 Product 팀에서 UI가 구리다고 하면 거기에 대한 작업기간을 따로 받아야 한다는게 사수의 입장이고 들어보니 또 맞는 말이다.
삽질한 시간이 조금 아까웠지만 그래도 타스크가 마무리에 도달한다고 생각하니 힘이 생겨서 못생긴 select 드롭박스를 컴포넌트에 넣고 테스트까지 작성 해 PR을 올렸다. 그리고 사수에게 한번 더 소환 당했다. 테스트에 쓰인 combobox가 대체 어디서 나온거냐는 거다. 드롭박스를 여는 유닛테스트에서 screen.getByRole('combobox') 를 썼는데 너 코드에는 combobox 를 aria-role 로 지정해준 흔적이 없는데 어떻게 테스트가 combobox를 읽고 테스트를 통과시켜줬는지 모르겠다며 의아해 했다. 사실 이 테스트는 최초에 문제를 일으킨 UI library로 드롭다운을 만든 다른 컴포넌트 테스트에서 긁어온거라 나도 자세히 설명은 못하고 어물쩡대고 있었다. 순수 너드인 내 사수는 정말 궁금하다며 자기 스크린을 쉐어해서 구글링 하기 시작했다. 검색해보니 implicit aria role 이라는 키워드가 나왔다. 딱히 aria-role을 부여하지 않아도 어떤 테그들에는 이미 role이 부여되어 있다는 거다. 그 중 하나가 select의 combobox이다. 이건 accessibility 지식이라 알고리즘 같은거 몰라도 그냥 주워먹을 수 있는 잡지식 이었는데 뒷걸음질 치다 쥐 잡고 이걸 설명못한 내 상황이 어이없고 이걸 몇초만에 검색해서 얻은 지식을 읽어 삼켜버리는 사수의 능력에 또한 번 놀랐다. 순식간에 일어난 무식탄로와 너드의 지식흡수 세션 직관에 어질어질한 날이었다.
