footer

<abbr> 요소 제대로 알고 사용하기

<abbr>요소는 Abbreviation(축약)의 약자이다.

아래의 컨텐츠에 <abbr>를 사용해준 이유는 IR이라는 축약어에 대한 풀네임을 사용자에게 제공해주기 위함이다. 하지만 난... 제공해주려 만든 text를 아무도 모르게 감춰버렸다.😓

[수정 전]

<a class="resetLink" href="">투자 정보(IR)<abbr class="a11yHidden">Investor Relations</abbr></a>

요소를 사용하기 전 요소의 역할을 다시 한 번 확인하고 그 역할에 맞게 사용하기로 하자!

[수정 후]

<a class="resetLink" href="">투자 정보<abbr title="Investor Relations">(IR)</abbr></a>

abbr[title] {
  cursor: help;
  text-decoration: none;
}

참고

[MDN]<abbr>

넷플릭스 서비시스 코리아? 서비시스?

넷플릭스의 연락 정보에 보면 Netflix Services Korea를 "넷플릭스서비시스코리아"로 번역했다. 그리고 띄어쓰기도 제대로 되어있지 않다. 해당 영어를 그대로 직역한 경우인데, 한국인이 사용하는 사이트인 것을 생각하여 서비시스를 서비스로, 그리고 띄어쓰기까지 해주는 것으로 결정!

footer <b>를 일관성있게 사용해볼까?

내 의견

연락 정보에서 <b>를 사용한 이유는 제목과 내용을 구분하기 위해서이다. 기존의 넷플릭스 사이트를 보면 연락 정보의 제목과 내용이 구분이 되어 있지 않아서 한 눈에 알아보기 힘들다는 단점이 있다. 그 점을 개선하기 위해 <b>요소를 사용했다.

의견 1

<b>는 글자를 굵게 처리해서 주변 맥락과 구분하기 위한 용도로 사용한다. 해당 의도로 사용한 것은 좋았으나 일관성을 위해 위의 본문인 "문의 전화"에도 <b>태그를 사용했으면 더 좋지 않을까?

정리

위의 "문의 전화"는 글자의 크기가 크고 사용자가 충분히 문의 전화임을 알아 보기에 어려움이 없다는 생각으로 <b>를 사용하지 않았다. 하지만 UI에는 차이가 없더라도 같은 역할을 하는 컨텐츠라면 일관성을 지키는 것이 좋겠다. 그리고 마크업을 스타일링을 목적으로 사용하지 않도록 노력해야겠다.

<adress> 제목이 필요할까?

의견 1

footer안에 <adress>가 있다는 것 만으로도 맥락상 연락 정보, 저작권 정보라는 의미를 줄 수 있기 때문에 제목요소를 사용해서 "연락정보"를 알려 줄 필요가 있을까?

의견 2

사용자 관점에서 봤을 때 제목간 탐색을 통해 연락 정보에 손쉽게 접근할 수 있기 때문에 사용자에게 편리함을 줄 수 있다.

정리

현재 넷플릭스에서는 사이트의 개선, 사용자의 편리함을 중점으로 페이지를 만들고 있기 때문에 제목을 설정해 주는 것이 더 맞다고 생각한다. 하지만 피드백을 통해 이런 넷플릭스가 아닌 다른 페이지를 마크업 할 때 해당 페이지의 footer가 어떤 내용을 담고 있는지를 확인하고 상황에 맞게 마크업 할 수 있을 것이다.

footer에 <nav> 요소를 사용하는 것

과거의 footer는 많은 내용을 담고 있지 않기 때문에 <nav>요소를 사용 하지 않았다 또한 <nav>가 많아 지는 것은 혼란을 유발할 수 있기 때문이다.

하지만 요즘에는 header나 footer에는 과거와 다르게 많고 다양한 정보를 담고 있기 때문에 <nav>를 사용하는 추세이다.