아이콘 요소를 만들때 span이 아닌 i 태그가 좋은 이유

아이콘을 만들어 웹사이트에 넣는 방법은 다양합니다. 만약 아이콘 요소를 만들기 위해 태그를 사용하는 경우 어떤 태그를 사용하는 것이 좋을까요?

일반적으로 많이 사용되는 태그가 있으니 바로 i 태그입니다. 왜 아이콘을 만드는 태그를 <span>가 아닌 <i> 태그를 사용할까요? 또는 왜 선호할까요? 그 이유를 찾아보겠습니다.


# i 태그 사용시 얻을 수 있는 장점은?
먼저 i 태그는 단어 자체가 매우 짧습니다. 한단어죠. 그리고 icon의 i와 첫글자가 같아 코드 가독성도 우수하다 말할 수 있죠.

사실 아이콘과 텍스트를 함께 사용하는 경우가 많은데 span태그만 사 사용할 경우 지나치게 복잡해 보일 수 있는 단점을 가지고 있습니다. 또한 유지보수 차원에서 나중에 수정을 할 때 i 태그만 찾는다면 모든 아이콘 태그를 선택하여 변환할 수 있어 이 점도 용이하겠습니다.

사실 i 태그를 유용하게 사용할 수 있는 이유는 i태그가 잘 쓰이지 않기 때문이기도 합니다. i 태그의 본래 목적은 이탤릭 효과를 주기 위함이나 html과 디자인 요소를 분리하여 개발하면서 i태그의 쓰임이 현저히 감소하였죠.

만약 i태그의 쓰임이 명확하다면 아이콘을 만들기 위해 i태그를 사용하는 방법은 다시 고려해 볼 문제가 될 수 있을것입니다. 하지만 현재는 아이콘을 만드는데 i태그가 활발하게 사용되고 있습니다.



# 고민되는.. 우려되는 부분은?
가장 큰 고민은 시맨틱(semantic) 태그의 사용이 점점 중요해지면서 다른 의미의 태그를 다른 용도로 사용하는 것에대한 이슈입니다. 이에 대한 의견은 엇갈리는데 개인적인 의견이지만 시맨틱 룰을 지키는데 크게 위배한다고 생각 들지는 않습니다.

사실 외형적으로 i태그는 icon과 img의 첫글자를 가졌기 때문에 다른 어떤 태그 보다도 아이콘으로서 인지하기가 쉽습니다. 그리고 i태그는 스타일 목적의 태그이고 시맨틱 목적을 위한 태그가 아니었기 때문이기도 합니다.


마지막 결론은 .. 결국 많이 사용한다는 이유는 편의성과 가독성이 다른 이유를 뛰어넘을 만큼 좋기 때문이 아닐까 생각합니다. 저 역시 런 이유로 i태그를 사용하였고 앞으로도 그럴 것입니다. 물론 대체 태그가 나오기 전까지는 말이죠.