모의면접 SEO and Accessibility

1. SEO가 무엇인가요?
   • 답변)
     • 의도: 실제 프로젝트 배포를 위해 SEO를 고려해본 경험이 있는지 확인하는 질문
     • 모범 답안: SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화라는 뜻입니다. SEO가 잘 구성되어 있다면 구글이나 네이버 같은 검색 엔진에서 상위 노출을 차지 할 수 있기에 정말 중요한 역할을 합니다. 실제로 최근에 해외 어떤 유명 서비스는 신입의 실수로 SEO 데이터가 날아간 적이 있었는데, 그 사건 때문에 유저의 유입 수가 70% 가까이 급감했다고 합니다. 그만큼 개발자가 아닌 일반인들은 검색 엔진의 의존도가 높고, 많은 서비스들이 상위 노출되기 위해 검색 엔진에 기꺼이 마케팅 비용을 쓰기도 하니 SEO의 중요성은 정말로 큽니다. 그래서 다들 SEO를 위해 메타데이터도 작성하고, 시맨틱 웹이나 웹 표준 등을 지키는 것이기도 합니다. Next.js에서는 서버 컴포넌트에서 메타데이터를 작성하는 것으로 SEO를 쉽게 구현할 수 있는데요. 예를 들어 타이틀, 설명, 오픈 그래프 이미지 등 검색 엔진에 필요한 것 뿐만 아니라 서비스의 홍보나 공유에 필요한 데이터를 작성할 수 있게 도와줍니다.
2. robots.txt가 무엇인가요?
   • 답변)
     • 의도: 검색 엔진에 웹 서비스를 직접 등록해본 경험이 있는지 확인하는 질문
     • 팁: SEO와 연관지으면 좋습니다.
     • 모범 답안: robots.txt는 이름의 로봇이라는 단어처럼 검색 엔진의 크롤러봇에게 명령을 내리는 역할을 합니다. 어떤 크롤링 봇은 어디까지 접근해서 크롤링할 수 있는지 규칙을 작성하는 파일입니다. 예를 들어 굳이 검색 엔진에 드러나지 않아도 되는 페이지는 robots.txt에 페이지 주소를 적어 크롤러봇의 접근을 막을 수 있습니다. 이 robots.txt를 잘 사용해야 SEO에 도움이 되기에 중요한 부분이기도 합니다.
3. sitemap.xml은 무엇인가요?
   • 답변)
     • 의도: 검색 엔진에 웹 서비스를 등록하고 SEO를 개선하려고 한 경험이 있는지 확인하는 질문
     • 모범 답안: 네 일명 사이트맵은 웹사이트의 중요한 페이지를 나열한 xml 파일입니다. 검색 엔진은 크롤러 봇으로 웹사이트에 접근하기 전, 이 사이트맵을 통해 사이트의 구조를 이해하고 중요한 페이지에 우선적으로 접근할 수 있습니다. 또한 마지막 수정 날짜 등 각 페이지의 정보 또한 넣어줄 수 있어 크롤러봇에게 추가 데이터를 제공할 수 있습니다. 사이트맵을 생성하는 걸 Next.js에서 내장 기능으로 지원하기는 하지만, 저는 개인적으로 next-sitemap이라는 라이브러리를 애용하는 편입니다. 해당 라이브러리를 사용해 사이트맵을 자주 업데이트 및 제출하여 SEO를 향상 시키려 노력하고 있습니다.
4. 시맨틱 태그에 대해 알고 계신가요?
   • 답변)
     • 의도: HTML에 대해 자세히 알고 있는지 확인하는 질문. 프론트엔드 개발자들은 HTML에 대해 소홀하기 쉽습니다. 기본기를 확실히 했는지 확인하는 질문입니다.
     • 모범 답안: 네, 시맨틱 태그는 페이지에 쓰이는 태그가 의미를 가지게 하는 방법입니다. 시맨틱 태그를 잘 구현한다면 개발자도 어떤 역할을 하는 태그인지 쉽게 알 수가 있고 SEO 향상에도 도움이 됩니다. 예를 들어 header 태그는 헤더를 나타내고, footer는 푸터를 의미하듯 우리 생각보다 굉장히 많은 시맨틱 태그들이 있어 저는 적극적으로 도입하여 사용하고 있는 편입니다.
5. 웹 접근성을 향상시킬 수 있는 방법에는 무엇이 있을까요?
   • 답변)
     • 의도: 웹 접근성이라는 개념에 대해 알고 있는지 확인하는 질문
     • 모범 답안: 웹 접근성은 몸이 불편한 유저도 쉽게 이용할 수 있도록 도와주는 개념입니다. 이러한 웹 접근성을 높이기 위해서는 다양한 방법을 사용할 수 있습니다. 제가 아는대로 설명을 드리자면 우선 이미지 태그에서 alt 속성을 이용해 대체 텍스트를 넣을 수 있습니다. 그리고 색약자 모드를 추가하거나 대비가 적절한 색을 사용하여 시인성을 높이는 방법도 있습니다. 또한 ARIA 속성을 이용해 웹 요소에 텍스트를 달아 스크린 리더기가 읽을 수 있게 도와주는 방법 등이 있습니다.