후하하핫
5k
2021-12-31 11:29:32 작성 2021-12-31 12:27:53 수정됨
14
1823

세상은 선의로만 돌아가지 않는다고 생각합니다: HTML의 semantic 태그


최근에 급하게 뭘 만들어 보려고 웹 프로그래밍 책을 읽어 보는데 (참고로 전 원래 web과 거리가 먼 사람입니다), HTML의 semantic tag에 대한 내용이 나오더군요.


(저같이 모르셨을 분들을 위해서 설명하자면) HTML의 tag 중 layout을 위해 기본적으로 inline element 인 <span> (말그대로 한 라인 안에서의 layout의 단위) 와 block element 인 <div> (한 줄 이상의 공간을 차지하는 layout의 단위)  라는 tag들을 사용합니다.즉, 이러한 태그들은 화면에 그려지지 않지만 layout을 관리하는 단위로서 작용을 하는 것이라고 볼 수 있겠네요.


HTML5 에서 추가된 Semantic tag들은 이러한 layout 관리 단위의 의미와 더불어 tag 들에 의미를 부여합니다. 예를 들어, <header> 는 상단에 표시 되기 위해, <footer> 는 하단을 표시하기 위해 쓰이고, <article> 은 한 문서의 단위를 표현하기 위해 사용됩니다.

정말 재밌는 건, 이 semantic tag들은 사실상 <span>이나 <div>와 기능 상으로 구별되지 않는다는 것입니다. 즉, footer를 위에 놓고, header는 아래로 내려도 웹 페이지가 보이는 것은 똑같이 보인다는 것이죠.


그러면 semantic tag는 왜 사용될까요?


첫 번째로, 프로그래머들이 코드를 읽는데 도움이 됩니다. div라고 하면, 이 div가 layout 적으로 어떤 의미를 가지는지 알기가 어렵습니다. 하지만 semantic tag가 달려 있으면 태그만 읽어도 어떤 위치에 가게 될지, 목적이 무엇 인지가 분명하겠죠. Readability가 올라갑니다.

두 번째로, 웹 브라우저 입장에서 줄 수 있는 기능이 생깁니다. 대표적으로, 모바일 웹 브라우저에서 읽기 모드를 지원해 주는 경우, <article> tag 안에 있는 내용은 읽을 수 있는 내용이라고 생각할 수 있기 때문에, 해당 내용을 파싱해서 보여주는 방식의 방법을 적용할 수 있습니다. 많은 크롬 extension 들이 이러한 기능을 사용하죠.


기획 의도는 좋습니다. 그런데 실제로 생각한 것처럼 될까요?


예를 들어서, 읽기 모드의 예로 가보죠. 만약에 어떤 광고 배너가 악의적으로 <article>을 포함한다면 광고가 읽기 모드의 내용으로 들어가게 될 것입니다. 이런 것과 같이, semantic tag의 악용 혹은 오용이 발생하면 웹 브라우저의 기능들을 제대로 사용할 수 없거나, 사용자 경험이 훼손되겠죠.


이렇게 HTML의 semantic tag가 디자인 된 것을 보고 저는 선의에 기댄 설계라는 생각이 들었습니다.

의미론을 통해 구현될 수 있는 가능성이 생기는 컨셉 자체는 매우 좋습니다. 하지만, semantic 이라는 건 시간이 지나면서 바뀌는 부분이기도 합니다. 새로운 혁신으로 인해 바뀌는 이용법에 따라 기존의 semantic이 전환 비용을 증가시키거나 심지어는 vulnerable 해질 수도 있다고 생각합니다.

추가로, 웹의 영향을 받는 산업들이 많아지는 과정에서, backward compatibility를 최우선으로 생각하는 웹이 어디까지 semantic tag를 늘려갈지 모르겠고 (그 중에 많이 안쓰이는 것들도 많고요), 어쩌면 후대에 이렇게 많아진 semantic들이 기술부채로 남지 않을까 하는 우려가 듭니다.

다른 하나는, 오히려 이런 기능들이 다양성을 해치는 면도 있다고 생각합니다. 이런 기능들을 표준이 아니라 라이브러리 차원에서 해결하면 더 다양하게 해결할 수 있을 것이라 보기 때문입니다. 예컨데 웹으로 게시판을 만들 때와 게임을 만들 때 필요한 tag들의 semantic은 다를 것이니까요.

현재 우리가 보는 웹을 보는 장치와 미래에 보게 되는 장치가 달라질 수 있다고 보는데, 오히려 HTML이 너무 hypertext 기반의 문서라는 시작점을 고집하기 때문에 웹을 통해 발생할 수 있는 혁신이 저해되는 측면도 있을 것 같습니다.

물론 너무 먼 미래를 생각하는 웹알못의 뇌피셜(?)이긴 하지만, 웹은 더 이상 문서가 아니라 플랫폼이자 운영체제이니까요. 이미 늦긴 했지만, 애초에 최소한의 기술적인 컴포넌트들만 지원했으면 어땠을까 하는 생각이 들었습니다.


----


이 글이 올해의 마지막 글이 되겠네요.


올해 우연히 다른 일을 하던 제 친구가 "나 국비 학원 다니려고 하는데, 어떻게 생각해?" 라는 질문을 하게 되어서, 이름만 알던 okky에 처음 들어오게 되었습니다.

그렇게 들어온 okky 는, 우리나라에 활성화 된 다른 개발 커뮤니티가 있는지 모르겠지만, 제가 접근 했던 국내 커뮤니티 중 가장 건강하게 운영되고 있는 것 같고, 많은 학생 개발자들도 이곳의 영향을 받아 사회로 나갈 준비를 하는 것 같더군요.

원래는 정보만 얻고 눈팅하고 나가려다, 어쩌다 내가 기여할 수 있는 게 없을까 해서 썼던 글들이 좋은 반응을 얻어 굉장히 행복하게 시간들을 보냈던 것 같습니다.

아시는 분은 아시겠지만, 저는 박사를 마친 사람인데, 제가 쓴 논문들을 읽은 사람의 총 수보다 okky에 제가 주절주절 쓴 글을 읽으신 분들의 수가 훨씬 많을 것이라는 생각이 들더라고요. (게다가 논문 리뷰는 공격적인데 여기 댓글은 따뜻해서...ㅎㅎ 좋았습니다) 가끔은 읽어주시는 분들의 수에 책임감도 느끼고, 논문을 쓰는 것보단 (최소한 형식적으로는) 편안해 하면서 글을 작성할 수 있어 제게도 인적인 성장을 이룰 수 있었던 기회였던 것 같습니다.


아무쪼록, 이제까지 글 읽어주셔서 감사합니다. 앞으로도 도움이 될만한 커리어에 대한 팁이나 기술에 대한 이야기들을 공유해보겠습니다. 연말연시 안온하게 보내시고, 새해 복 많이 받으세요. 내년에도 잘 부탁 드립니다.

16
3
  • 댓글 14

  • 제운
    1k
    2021-12-31 11:33:10

    잘 읽고있습니다. ㅎㅇㅌ하십시오~

  • 꿈의연봉1800
    448
    2021-12-31 12:02:55
    구더기 무서워서 장 못담그겠다는 소리
  • 꿈의연봉1800
    448
    2021-12-31 12:04:37 작성 2021-12-31 12:04:50 수정됨
    메인 컨텐츠가 아닌 곳에 시멘틱으로 강조를 하면 
    사용자가 불편하고 끝 정도가 아니라 SEO가 개박살나서 사이트에도 손해
  • 무야자키
    576
    2021-12-31 12:26:57

    잘 읽고 있습니다 슨배님 ^^7

  • 후하하핫
    5k
    2021-12-31 12:27:13

    @꿈의연봉1800: 아하, SEO 에 대해선 제가 고려를 못했네요.

    다만, 제 의견은 "역사에 만약이란 없다"지만, 만약에 애초에 semantic tags가 없었다는 가정하에 HTML을 만들었다면 어땠을까에 대한 이야기로 보시면 될 것 같습니다.

    어떤 웹사이트는 꼭 SEO에서 접근하지 않아도 되고 (외부 검색을 막는 사이트들도 많으니), 웹을 사용하는 컴퓨팅 환경이 빠르게 변하고 있으니까요. 꼭 semantic tags만이 SEO를 위한 최고의 디자인은 아니지 않나 싶습니다.

  • 우주로가고픈유성
    458
    2021-12-31 12:30:48 작성 2021-12-31 12:50:24 수정됨

    뭐 seo 문제도 있고 

    사실 공익적인 측면도 있다고 들었습니다.

    시각 장애인의 경우 목소리를 통해서만 소프트웨어를 제어가 가능한데

    웹 구조를 div로만 풀어버리면 구조에 의미가 사라지기 때문에

    누군가 커스텀하게 기능을 제공하지 않으면 음성으로는 웹사이트 이용이 불가능하죠.

    그리고 시장규모를 생각했을때 '시각장애인'들을 위해서 무언가 만들어 줄 사람이 없는거죠.

    예를들면

    <div>로 버튼을 만들수도 있긴한데요..

    "주문하기 버튼 눌러줘"라는 명령이 들어왔을때 문제가 있는거죠.

    "개발하고 보니 음성명령이 되네?"가 되어야되는거죠. 


    네이밍 설계가 얼마나 정교하냐면

    select안에는 options들어갑니다.

    dropdown-items와 select-options

    을 봤을때 구글 번역기를 돌려보면

    dropdown items은 너무 추상화되어 있고 번역도 잘 안됩니다. select options는 있는 그대로 명령이 됩니다.

    결국 이런 파편을 막는거죠. 누군가 div를 이용해서 기능 구현하고 네이밍을 dropdown으로 만들어버린다면...?

    시각장애인들은 웹사이트에서 옵션 선택을 못해서 제품을 구매를 못하는거죠.


  • 후하하핫
    5k
    2021-12-31 12:47:11

    @우주로가고싶은유성: 아하, 이 부분은 정말 그러네요. 좋은 의견 감사합니다. 또한, 저도 지금 표준이 있는 상황에서 semantic web을 사용하지 말자는 얘기는 당연히 아닙니다. 이미 존재하는 한, 잘 준수해서 작성해야지요.

    다만, HTML이 문서라는 틀 안에 갇혀 있는 면은 있다고 생각합니다. 시스템을 디자인하는 사람 입장에서 가정이 많다는 것은 여러모로 문제가 될 소지가 있다고 보거든요. Web이 Universal하게 모든 기기에서 돌아가는 인터페이스, 즉, 일종의 운영체제라고 바라보는 입장에서는 좀 덕지덕지 붙은 게 많달까요.

    제 개인적인 기대는 이런 부분을 React.js 와 React Native 같이, tag 기반의 언어들이 더 넓은 생태계를 구축했으면 좋겠습니다. SPA로 데스크탑 및 모바일 레벨의 서비스들이 웬만치 구현은 된다곤 하지만, 각 프레임워크 수준에서 정리가 됐을 뿐 생태계가 안정된 상황은 아닌 것 같아서요. 그렇기 때문에 프론트 엔드 엔지니어들이 배울게 쏟아지면서 나온다고 표현하는 것이겠죠.

    라이브러리들도 버전 많이 올라가고, 패키지 매니저도 딱 국룰로 쓰는게 생기고, 궁극적으로는 React Native와 React.js를 따로 공부하지 않을 정도가 되면 제가 기대했던 universal user interface가 만들어질 것 같습니다. 지금도 충분히 잘 하고 있지만요!

  • DEVVY
    94
    2021-12-31 15:32:42
    후하하핫님 글 잘 읽고 있습니다. 많은 걸 배우네요. 한 해 고생 많으셨고 내년에 좋은일 가득하셨으면 좋겠네요~. 
  • OKKY
    3k
    2022-01-01 02:36:29
    해당 게시물은 관리자에 의해 사는얘기에서 칼럼로 이동 되었습니다.
  • 인그니야
    1k
    2022-01-05 09:40:53

    이렇게 모든 시리즈를 흥미있게 읽은 적은 Austin kim님 외 처음이네요ㅎㅎ 모든 글마다 많은 걸 생각해보게 되요.

    기회만 된다면 커피 한 잔 마시고 싶네요.

  • 뛰라고
    1k
    2022-01-05 15:59:58

    ㅎㅎ...저는 웹은 초보라 아직까진

    무조건 div만 쓰고있습니다 ㅎㅎ...

  • SonicSAN
    334
    2022-01-06 00:08:24

    React 같은 SPA에도 시맨틱 태그를 사용할 필요가 있을까요?

  • moonti
    4k
    2022-01-06 13:19:57

    선의에 기댄다가 맞습니다. 브라우저는 강하게 강제하지 않지요. 그리고 개발자의 실수도 어느정도 눈감아주기도 하구요. 예를들면 h2 하위에 h1을 올려도 렌더링에는 문제가 안대요. 

    그렇기 때문에 광고가 악용될 소지가 있다고 하죠. 광고를 구글 애드센스처럼 전문적으로 처리하는 곳에는 이상한 형태로 만들지는 않지 싶네요. 

    (논지와 다르지만 광고는 article로 하는 것이 적절해 보입니다. 독립적인 컨텐츠니까요. aside안에 article로 하는것이 제일 좋을 것이라 저는 생각합니다)


    그리고 html이 웹 페이지를 넘어서는 다른 컴포넌트를 더 구성하는 것을 얘기 하셨는데요. html에서는 기본 캄포넌트를 더 만드는 방향으로 잡지 않을 것같습니다.

    실무에서 각각 기본 컴포넌트를 그대로 쓰는 경우가 거의 없고 각 브라우저의 구현한 형태가 달라 디자인에 생기기 때문이지요.

    대신 커스텀 컴포넌트를 설계 하도록 표준에 포함 시킨 것으로 보입니다.

  • moonti
    4k
    2022-01-06 13:22:08

    저는 h1 h2와 같은 헤딩은 새세하게 안보더라도 header aside main footer정도는 적절하게 사용하는 것이 옳다고 생각합니다.

  • 로그인을 하시면 댓글을 등록할 수 있습니다.