GN⁺: 외부 모니터에 따라 고장난 BBC 내비게이션 바 컴포넌트

• BBC 탐색 바 컴포넌트의 버그

  • 최근 팀에서 이상한 버그를 해결했음. 한 팀원만 재현할 수 있었고, 집에서만 발생했음.

• 버그의 원인

  • BBC 웹사이트의 '더보기' 버튼 클릭 시 메뉴가 열려야 하지만, 외부 모니터에서는 작동하지 않았음.
  • 외부 모니터에서만 발생하며, Safari에서는 문제가 없었음.

• 문제 재현

  • 외부 모니터가 노트북 위에 위치할 때만 버그가 발생함을 발견했음.
  • OS 설정에서 모니터 위치를 조정하여 문제를 재현할 수 있었음.

• 조사 과정

  • 첫 번째 단서: Safari에서는 버그가 발생하지 않음.
  • 두 번째 단서: 외부 모니터가 메인 모니터의 위와 왼쪽에 위치할 때만 발생함.
  • 세 번째 단서: Chrome과 Firefox에서 screenX와 screenY 값이 음수였음.
  • 네 번째 단서: screenX와 screenY가 음수일 때만 버그가 발생함.
  • 다섯 번째 단서: Chrome과 Firefox에서는 메인 모니터의 좌상단이 (0,0) 좌표임.

• 해결책

  • isInvokedByMouse 함수에서 screenX와 screenY가 0이 아닌지 확인하도록 변경함.
  • 복잡한 문제였지만 해결책은 간단했음.
  • 코드 리팩토링이 필요하지만, 현재 해결책으로 충분함.

• 교훈

  • API 작동 방식에 대한 가정에 주의해야 함.
  • 다양한 테스트에도 불구하고 버그가 발견되지 않았음.
  • 모니터 설정에 따라 사용자 경험이 달라질 수 있음을 알게 됨.

• 2024-11-19 수정: screenX 사용에 대한 혼란이 있었고, 네비게이션 컴포넌트를 리팩토링했음. 다음 블로그 포스트에서 리팩토링 과정과 질문에 대한 답변을 제공할 예정임.

[neo]

Hacker News 의견

• BBC의 웹사이트에서 키보드와 포인터로 메뉴를 열 때 다른 동작을 보이는 이유를 설명함

  • 키보드로 열 때는 애니메이션 없이 첫 번째 링크로 포커스가 이동함
  • 포인터로 열 때는 메뉴 컨테이너로 포커스가 이동함
  • 키보드 사용자를 위한 경험을 만들 때 'click' 이벤트가 장치에 독립적이라 유용함

• isInvokedByMouse를 수정하여 screenX와 screenY가 0이 아닌지를 확인하는 방법을 제안함

  • 마우스가 실제로 0,0에 있을 경우를 고려해야 함
  • 이벤트 핸들러 함수의 복잡성을 줄이기 위해 추가적인 리팩토링이 필요함

• BBC의 접근성에 대한 투자와 버그 발견을 칭찬함

  • 드롭다운 메뉴가 모든 사용자에게 일관되게 열리지 않는 이유를 질문함
  • 웹 프레임워크나 웹 컴포넌트가 이러한 문제를 해결할 수 있는지 궁금해함

• 서버 사이드 템플릿, CSS 프레임워크, 최소한의 JS를 사용하여 문제를 해결하려고 시도함

  • BBC의 접근성 표준에 부합하는지는 확신하지 못함

• 잘못된 휴리스틱으로 인해 발생한 버그라고 지적함

  • screenX와 screenY 좌표를 확인할 때 양수뿐만 아니라 음수도 확인해야 한다고 제안함

• 웹사이트가 왜 화면 좌표로 마우스 위치를 얻는지 의문을 제기함

  • click 이벤트만으로도 충분한 정보를 제공한다고 주장함

• 브라우저가 모니터에 따라 다른 좌표를 보고하는 이유에 대해 궁금해함

  • 웹 API가 이러한 정보를 가지는 것이 보안 및 정보 추적 위험을 초래할 수 있다고 우려함

• 마우스 클릭과 키보드 클릭을 구분하는 올바른 방법에 대해 질문함

  • mousedown과 keydown 이벤트를 기반으로 플래그를 설정하는 방법을 제안함

• 화면 좌표 대신 뷰포트 좌표를 사용해야 한다고 주장함

  • 화면 공간에서의 음수 값이 버그가 아니라고 봄

• BBC의 관리 및 법무팀의 승인 없이 블로그를 작성한 것에 감명을 받음