abbr, acronym 태그 차이

<abbr> 태그와 <acronym> 태그는 W3C(월드와이드 웹 컨소시엄)가 1997년 제안한 HTML 4.0 권고안에 처음 수록된 태그들입니다.

이 두 태그는 영어와 같은 서양 언어에서 흔히 사용되는 축약어를 표현하기 위해 사용되는데 서로 다른 태그인 만큼 각각의 쓰임새가 다름에도 불구하고 브라우저의 지원 문제로 인해서 원래의 용도와는 다르게 사용되는 경우가 많습니다. 그래서 이 두 태그의 차이점과 ‘의미 있는’ 마크업을 위해 생각해봐야 할 점들을 정리해 봤습니다.

사전적 정의

두 태그는 각각 ‘abbreviation’, ‘acronym’ 단어에서 생겨났습니다. 그래서 먼저 위키피디아의 자료를 참고로 이 두 단어와 추가적으로 ‘initialism’의 의미를 정의해 보았습니다.

abbreviation (축약어)
라틴어의 ‘줄임(short)’에서 나온 말로 보통 단어나 구(단어의 집합)에서 하나 이상의 알파벳을 차용해서 만들어진다. 예를 들어 ‘abbreviation’이란 단어는 축약어를 사용해서 ‘abbr.’ 또는 ‘abbrev.’로 표기할 수 있다.
acronym (머리글자를 이용한 축약어)
축약어를 표현하는 방식의 하나로 각 단어에서 뽑은 머리글자를 알파벳 대문자로 표기하며, 각각의 머리글자는 이어서 발음한다. 대표적인 예로 NATO(북대서양 조약 기구)를 들 수 있다.
initialism (머리글자를 이용한 축약어)
머리글자를 이용하는 것은 ‘acronym’과 같지만 발음하는 방식에 차이가 있다. 각각의 머리글자를 개별적으로 발음한다. 예에는 HTML(하이퍼텍스트 마크업 언어), CSS(단계적인 스타일 시트) 등이 있다.

정리하자면 ‘acronym’‘initialism’은 발음하는 방식만 다르며, 두 방식 모두 ‘abbreviation’에 속한다는 얘기지요.

W3C의 정의

그러면 W3C는 왜 <abbr> 태그와 <acronym> 태그를 따로 만들었을까요? 이유를 알아보기 전에 먼저 W3C가 이 두 태그를 어떻게 정의했는지 간단히 요약해 보겠습니다.

‘abbreviation’‘acronym’ 태그는 축약된 단어의 의미를 명확하게 표현하는데 사용한다. ‘acronym’의 예로는 ‘NATO’, ‘F.B.I.’ 등이 있고 ‘abbreviation’의 예는 ‘Inc’, ‘etc’ 등이 있으며, 이 태그들을 사용함으로써 웹 브라우저 같은 프로그램(user agent)이나 스크린 리더, 맞춤법 검사기, 검색 엔진에 유용한 정보를 제공할 수 있다.”

‘acronym’‘abbreviation’ 단어가 뒤바뀐 오류를 수정했습니다. 성민장군님 고맙습니다. ^^

위에서 내렸던 정의와는 차이가 있지요? ‘initialism’‘acronym’에 포함시키고 있는데 검색을 해보면 W3C의 용어 정의에 문제가 있다는 것을 확인할 수 있습니다.

오용되는 이유

많은 사용자들이 축약어를 표현할 때 용도와는 상관 없이 <abbr> 태그 대신 <acronym> 태그를 사용합니다. 그런 데에는 위에서 언급한 용어 정의 문제도 한몫 하지만 보다 큰 이유는 브라우저의 태그 지원 문제라고 주장하는 사람들이 많습니다. 즉, 점유율이 가장 높은 인터넷 익스플로러(6.0 이하 버전) 브라우저가 <abbr> 태그의 title 속성을 제대로 안보여주기 때문이라는 것이지요. 예를 들어보겠습니다.

마우스를 올려보세요.

IE 6.0 이하 버전을 사용하는 분들은 마우스를 올려도 아무 반응이 없을겁니다. 하지만 그 외의 브라우저들은 title 속성에 지정된 텍스트를 화면에 보여주지요. 그래서 이런 시각 효과를 제공하기 위해 <acronym> 태그가 용도 구분 없이 광범위하게 사용된 것이지요.

의미 있게 사용하면?

<abbr> 태그와 <acronym> 태그를 의미 있게 사용하면 스크린 리더나 검색 엔진에 유용한 정보를 제공할 수 있습니다. 예를 들어볼까요?

검색 엔진은 <abbr> 태그의 title 속성을 인식해서 검색 결과에 반영할 수 있습니다. ‘markup language’를 검색했는데 ‘html’ 관련 페이지가 검색되는 것처럼요.

또한 스크린 리더가 <abbr> 태그와 <acronym> 태그를 각각 다르게 발음하도록 할 수 있는데 비슷한 태그를 따로 구분해서 만든 것도 이런 이유 때문이 아닐까 생각합니다. 즉, ‘NATO’ 같은 ‘acronym’은 그대로 이어서 발음하고 ‘HTML’ 같은 ‘abbreviation’은 알파벳 단위로 발음하도록 지정해주는 것이지요. CSS에는 이런 기능을 다루는 속성이 따로 있습니다.

abbr { speak: spell-out; }
acronym { speak: normal; }

또한 머리글자를 이용하지 않는 info.(information), exam.(examination) 등의 축약어에 대해서는 어떤 태그 처리도 필요없다는 의견도 있고, class를 사용해서 구별하자는 의견도 있습니다.

요약하자면 전자의 경우는 머리글자를 이용하지 않는 대부분의 축약어가 하나의 의미로 사용되고 대부분의 사람들이 쉽게 이해할 수 있기 때문이라는 주장이고, 후자의 경우에는 머리글자를 사용하는 축약어와 그렇지 않은 축약어를 명확하게 구분해서 CSS를 이용해서 스크린 리더가 축약어를 읽는 방식을 지정해주자는 의견입니다. 아래 처럼 말이지요.

acronym { speak: normal; }
abbr.initialism { speak: spell-out; }
abbr.truncation { speak: normal; }

사라질 <acronym>

W3C의 모호한 태그 정의와 브라우저의 지원 문제로 <acronym> 태그가 오용되면서 이를 지적하는 사용자도 많아졌습니다. 이를 반영해서인지 현재 초안을 작성중인 XHTML 2.0 권고안에서는 <acronym> 태그를 삭제하고 <abbr> 태그로 이를 대체하도록 했습니다. 사실 비슷한 용도로 사용되는 두 태그가 있을 경우에 보다 상위 개념의 태그 하나로 통합시키고 각각을 담당하는 class 등을 부여하는 것이 이치에도 맞고 혼란도 줄일 수 있지요. W3C는 또한 웹 접근성 2.0 권고안을 통해서 <abbr> 태그의 사용 방법을 보다 명확하게 밝히고 있습니다.

“사전(dictionary)에 등재되지 않은 축약어를 처음 사용할 때에는 <abbr> 태그로 축약되지 않은 전체 텍스트를 명확하게 표현하라.”

스크린 리더에 대해서 잘은 모르지만 그렇게 간단한 프로그램은 아닐겁니다. 잘 알려진, 그리고 하나의 뜻을 가진 축약어는 자체적으로 충분히 해석할 수 있겠지요. Acrobot 사이트는 축약어 태그 작성을 도와주는 도구를 제공하는데 축약어의 머리글자만 입력하면 사전을 검색해서 자동으로 <abbr> 태그의 title 속성을 첨가해 준답니다. 스크린 리더도 이런 기능을 포함할 수 있겠지요.

실질적인 사용법

하지만 XHTML 2.0 표준이 지금 사용되는 XHTML 1.0을 완전히 대체하려면 최소한 수 년이 걸릴겁니다. 물론 그 안에 태그 정의가 바뀔 수도 있지요. 따라서 현실적으로는 <abbr> 태그와 <acronym> 태그를 보다 ‘의미 있게’ 사용하는 것이 중요합니다. 그러기 위해서는 구 버전의 익스플로러(6.0 이하)가 <abbr> 태그의 title 속성을 보여주지 않는다는 사실을 고려해야 합니다. 그러면 이 문제를 해결할 방법을 알아볼까요?

첫 번째 방법은 지극히 간단합니다. 신경쓰지 않는 것이지요^^; 이 태그들이 사용자가 아닌 프로그램(user agent)을 위한 것이므로 화면에 표시되지 않는 것이 오히려 낫다고 주장하는 사용자도 있습니다. 그에 따르면 사용자에게 축약어에 관한 자세한 정보를 제공하는 최고의 방법은 다음과 같이 일반적인 텍스트를 이용하는 것이 것이라고 하네요.

올바른 XHTML(Extensible HyperText Markup Language)을 사용합시다!
올바른 Extensible HyperText Markup Language(XHTML)을 사용합시다!

두 번째 방법은 <acronym> 태그와 class를 이용하는 것입니다. ‘의미 있는’ 마크업은 아니지만 class를 사용해서 스크린 리더에게 어떻게 발음해야 할 지 알려줄 수 있지요.

<acronym class="abbr" title="HyperText Markup Language">HTML</acronym>

세 번째 방법은 <abbr> 태그와 <span> 태그를 함께 사용하는 방법입니다. 의미 없는 태그가 추가되지만 적어도 틀린 의미로 사용하는 것은 아니니까요.

<span title="HyperText Markup Languag">
<abbr title="HyperText Markup Languag">HTML</abbr></span>

익스플로러 6.0 이하 버전에서도 용어에 대한 설명을 볼 수 있습니다. 확인해 볼까요?

HTML

이외에도 각주를 사용하거나 해당 용어에 대한 설명이 있는 사이트를 직접 링크시키는 방법도 있습니다. 유명한 사이트인 A List Apart에 다양한 방법들이 소개되어 있으니 참고하시기 바랍니다.

Textile과 <abbr> 태그

Textile은 익스플로러 호환성을 고려해서 모든 축약어를 <acronym> 태그로 표현합니다. 따라서 <abbr> 태그를 사용하려면 직접 html을 사용해서 작성해줘야 합니다. 하지만 Textile 소스를 수정하면 몇 가지 변화를 줄 수 있지요. 물론 Textile이 업데이트 될 때마다 수정해줘야 하는 번거로움과 검증되지 않은 코드 수정으로 발생할 수 있는 호환성 문제는 사용자가 감수해야 합니다^^;

Textile 라이브러리인 ‘classTextile.php’ 파일은 거의 대부분이 정규 표현식으로 이루어져 있습니다. 그 중에서 <acronym> 변환을 담당하는 코드는 2258 버전 기준으로 1,008번째와 1,028번째 줄에 있습니다.

이 부분을 아래 코드를 참고해서 수정하면 기존의 <acronym> 태그 대신 <abbr> 태그와 <span> 태그를 사용하는 방식으로 바꿀 수 있습니다. 대문자와 소문자 구별 없이 두 글자 이상의 축약어에 적용되며, 축약어를 의미하는 마침표도 사용할 수 있습니다.

'/\b([A-Z][A-Z0-9]{2,})\b(?:[(]([^)]*)[)])/',        //  원본 소스
'<acronym title="$2">$1</acronym>',
'/\b([A-Za-z][A-Za-z0-9]{1,}\b[\.]?)(?:[(]([^)]*)[)])/',        //  수정된 소스
'<span title="$2"><abbr title="$2">$1</abbr></span>',

어떻게 적용되는지 확인해볼까요? 위 박스는 Textile 입력을, 아래 박스는 브라우저 출력을 나타냅니다.

XHTML(Extensible HyperText Markup Language)
ex.(Example) etc.(et cetera)

XHTML
ex. etc.

<abbr> 태그를 적용하기 위해 새로운 Textile 규칙도 만들 수도 있겠지만 Textile의 장점이 간단하고 쉬운 태그에 있는 만큼 기존의 태그를 최대한 이용하는 것이 옳다고 생각합니다. 물론 <abbr> 태그가 <acronym> 태그를 포함하는 개념이므로 의미 상으로도 큰 문제가 없지요.

† 정규 표현식을 잘 몰라서 그랬다고는 절대 얘기하지 않습니다^^;

결론

많이 사용되지도 않고, 우리말과 직접적으로 관계 없는 태그들을 이렇게 장황하게 설명하는 것은 단순히 흥미로왔기 때문입니다. W3C의 애매한 정의도 그렇고, 이와 관련해서 많은 사용자들이 다양한 의견과 해결 방법을 내놓은 점도 그렇습니다. 일례로 Tetile 포럼에서 가장 많은 댓글이 달린 글이 이 두 태그에 관한 글이더군요.

개인적으로 ‘의미 있는’ 마크업을 중요하게 생각하지만 특별히 영어 사용자를 위한 글이 아니라면 이 태그들을 너무 엄격하게 구분해서 사용할 필요는 없다고 생각합니다. 간단하게 <abbr> 태그만 사용해도 충분하지 않을까요? 때로는 어떤 축약어가 ‘acronym’‘initialism’ 중에 어디에 속하는지 구분하기 힘든 경우도 있습니다. 두 방식을 섞어 쓰는 축약어도 있고요. 그런 경우에는 이렇게 하라는 지침을 어느 사이트에선가 봤습니다.

“잘 모르겠으면 <abbr> 태그를 사용하라!”

또한 단순히 어떤 생소한 용어를 설명하기 위해서라면 위에 언급했던 일반적인 텍스트를 이용하는 것이 최고의 방법입니다. 마우스를 사용하지 않아도 설명을 볼 수 있으니까요.

이 주제에 관한 의견이나 주장이 상당히 다양합니다. 이것 저것 요약해서 소개하려다 보니 잘못 인용하거나 해석한 부분도 많을 겁니다. 이 점 감안하시길 바라고 의문가는 점은 언제든지 댓글로 남겨주세요.

댓글 10개가 달렸습니다. 태그: , , ,

  1. 연가시 | 2007-04-19 04:22

    잘봤습니다 :)

  2. wystan | 2007-04-19 12:37

    ^^

  3. 부침개 | 2007-11-20 02:17

    저는 개인적으로 두 태그는 약간은 다른 성질이라고 생각되는데
    xhtml 2.0 스팩에서는 acronym 가 없어진다니 아쉽네요 :)
    본문에도 있지만 "NATO" 와 "HTML" 은 두문어자와 축약어로
    둘다 약자의 뜻이 있지만 읽는법이 다르기때문인데요.
    나중에 나올 xhtml 에 대한 글들을 좀더 읽어봐야겠지만
    아무튼 세세한 정보까지 기록해주셔서 잘 봤습니다.
    글 정리를 워낙에 잘해놓으셔서 보통 이시간이면 잠을 자야하는데도 불구하고
    계속 글을 읽게 됩니다. ^^

  4. wystan | 2007-11-20 20:57

    XHTML 2.0 규격이 언제 나올지는 모르겠지만 acronym 요소가 사라져도 스크린 리더가 abbr과 acronym을 구분해서 읽어줄 수 있으리라 생각합니다. CSS 미디어 타입 중 하나인 Aural 스타일시트의 speak 속성만 제대로 구현돼도 처리가 가능하니까요.

    그리고 지금 알았는데 제 댓글이 좀 늦었네요. 요즘에는 글도 안쓰고 댓글도 자주 확인을 안하거든요. ^^;
    조만간 새 마음으로 다시 시작하려고 준비중입니다. 부족한 글을 좋게 평가해 주셔서 고맙습니다~

  5. 부침개 | 2007-11-21 00:25

    사실 Aural 속성은 스크린리더를 위한 속성임이 분명한데도 불구하고
    국산스크린리더중 점유율이 99%에 육박하는 센스리더는
    왜 Aural 을 지원하지 않는지 모르겠습니다.
    그렇게 되면 복잡한 도표나, 어려운 단어들에 대한 표현과 음성을 구분지어 조금은 더 깔끔한 구조가 될텐데 말이죠...
    엑스비전테크놀러지 홈페이지를 보니 오래동안 관리를 안하고 있어보이는데...음..
    앞으로 어떻게 될지 궁금해지네요 ^^

  6. wystan | 2007-11-21 21:18

    사실 스크린리더를 한번도 못봐서 어떻게 동작하는지는 잘 모르겠지만 HTML과 CSS를 제대로 해석하는 기계를 만드는 것이 그렇게 간단한 문제는 아닌가봅니다.

    하지만 시간이 흐를수록 조금씩 더 나아지리라 생각해요. 다양한 CSS 미디어 타입을 완벽하게 지원하는 유저 에이전트들이 언젠가는 등장하리라 믿습니다. 물론 CSS 작성은 더 까다롭겠지만요. ^^;

  7. 성민장군 | 2009-02-27 17:03

    ^^
    안녕하세요. 오랜만이네요.
    abbr과 acronym에 대해 정리할 일이 있어서 예전 기억을 더듬어 왔습니다. ㅎㅎ
    근데 위 내용중에 잘못 기재된 부분이 있는듯해서요.

    W3C의 정의에서.
    ‘abbreviation’의 에로는 ‘NATO’, ‘F.B.I.’ 등이 있고 ‘acronym’의 예는 ‘Inc’, ‘etc’ 등이 있으며,

    여기가 예가 바뀐 듯 한데요… ^^;
    이런거 쓰려니 떨리네.. ㅎㅎㅎ
    다음에 시간나시면 홍대쪽에서 한번 뵈요~

  8. wystan | 2009-02-28 16:41

    반갑습니다~ 성민장군님.

    오류 알려주셔서 고맙습니다. 성민장군님 아니었으면 평생 몰랐을 거예요~
    더불어서 작지만 심각한 오타(“에로” -> “예로”)도 같이 수정했어요. ㅎㅎ

    요즘에는 정말 홍대가 그립네요.
    조만간 모임 잡아서 연락드리겠습니다. 같이 술 한잔해요~ ^^

  9. 잠만봉 | 2010-03-25 09:57

    잘 읽었습니다. ^^ 너무 좋아서 퍼가요!

  10. 희야스 | 2014-01-22 14:43

    좋은내용 잘 봤습니다.^^

댓글이 닫혔습니다.