Quiz - Web Accessibility, UX, CrossBrowsing

1. 웹 접근성과 관련하여 고려해야 할 요소를 설명해주세요. 이와 관련하여 경험이 있나요?

• 웹 접근성과 관련하여 고려해야 할 요소로 image 태그의 alt 속성, 페이지 내의 heading 태그, 시맨틱 태그, aria 관련 속성 등이 있습니다.
  • 저는 웹 접근성을 위해 img 태그에 alt 속성을 넣어주어 스크린 리더기가 대체텍스트를 읽을 수 있게 했습니다.
  • 그리고 input 관련 컨트롤 태그를 사용할 때 관련 태그들을 하나의 컨트롤로 묶어서 사용했습니다.
    • input 관련 label 태그에 htmlFor 속성으로 input id 값을 설정했습니다.
      • input 태그의 aria-describedby 속성에 부연 설명을 나타내는 span 태그의 id를 설정했습니다.

2. 사용자 경험(UX)을 개선하기 위해 어떤 노력을 하였나요? 사용자를 고려한 디자인과 사용성을 개선하기 위한 방법에 대해 얘기해주세요.

• UX를 개선하기 위해 컨텐츠가 많은 내용의 경우 스크롤 설정을 하고, 스크롤을 내렸을 때 다시 맨 위로 올라갈 수 있도록 Top 버튼을 구현했습니다.
• indicator UI의 간격이 좁을 경우, 모바일 사용자가 터치하는 것이 어려울 것이라는 점을 감안해서 indicator UI 간격을 넓혔습니다.
• 닉네임 수정시 닉네임의 제한 조건에 대해 placeholder에 명시하고, 닉네임 제한 조건에 만족한 경우에만 중복 확인 버튼이 활성화되도록 구현했습니다.

3. 프로젝트를 개발하면서 발생한 크로스 브라우징 문제를 어떻게 해결했나요? 다양한 브라우저와 기기에서 일관된 경험을 제공하기 위해 취한 조치에 대해 이야기해주세요.

• 프로젝트 전체적으로 CSS reset 파일을 사용하여 기본 스타일을 초기화하거나 CSS normalize 파일을 사용하여 기본 스타일을 일관적으로 설정했습니다.
• babel의 polyfill을 사용하여 최신 JavaScript 문법을 구형 브라우저에서도 사용할 수 있도록 했습니다.
• 구체적인 예로는 이전 프로젝트에서 range input을 사용했는데, 브라우저별로 기본 스타일이 달라서 기본 스타일을 숨기는 설정을 했습니다.
  webkit-appearance 속성을 none으로 설정하여 기본 슬라이드를 숨겼고, background 속성을 transparent로 설정하여 투명하게 했습니다. 또한 input이 focus되었을 때의 outline 속성을 none으로 설정하여 기본 블러 처리를 제거했습니다.