※ 이 글은 Pete Lambert(@peterjlambert)가 작성한 HTML is the Web을 원작자의 허가를 받고 번역한 글입니다. 일부 의역이 들어가 있으며 오역이 있을 수 있습니다.
요즘 Front-End 엔지니어들과 HTML에 대한 이야기는 뭘까? 나는 최근에 HTML을 이해한다고
생각되지 않는 꽤 많은 사람들과 이야기를 하고 있습니다. 내 말은, 그들이 HTML의 일부는
이해하고 있다는 겁니다. 그 사람들은 <div>이 뭐고 <span>이 뭔지는 알고 있지만, 이것들을
클릭할 때 잘 보이고 잘 동작하기만 하면 충분히 만족해 합니다. HTML에 대한 질문에 "오, 나는
요새 전부 React나 Vue로 해요"와 같은 말로 답해 오는 사람들이 너무 많습니다. 하지만 실제로,
당신이 웹 사이트를 만들고 있다면 중요한 것은 당신은 HTML을 만들고 있다는 것이기 때문에,
당신이 작성하는 것이 JavaScript인지는 중요하지 않습니다. HTML은 웹 입니다.
이것은 모두 소비자가 소비하는 것에 관한 것입니다. UI와 UX이고, 이건 한 덩어리입니다. 중요도의 순서를 따져보면 HTML, CSS, 그리고 동작(JavaScript에 의해 제공될 수도 있고 - 아닐 수도 있는) 입니다.
나의 큰 관심사는 기술 피라미드의 바닥에 있습니다. 웹의 가장 기저에 있는 공통 분모, 토대, 리듬 섹션 [1] , 사소한 웹의 레이디핑거 [2] . 그것이 HTML 입니다. 그리고 Front-End 기술들의 가장 전방(front-end)에 있는 기술을 알지 못하거나 이해하지 못하는 많은 Front-End 엔지니어들이 있다는 것이 점점 분명해지고 있습니다.
웹 페이지는 문서입니다. 컴포넌트든, 블로그 템플릿의 일부이든, 뉴스 사이트든, 마케팅 통계
대시보드, 회원 가입 양식이든 문서의 일부입니다. 문서는 구조를 가집니다. 웹에서, 그건 그저
프레임워크에 의해 제공되는 비주얼이나 아키텍처가 아니라, 당신의 웹 페이지든, 컴포넌트든,
무엇이든, 구조적으로 정확하게 체재를 갖추도록 하기 위해 의미론 적으로 정확한
요소(element)들을 선택하는 것에 관한 것입니다. 제목들은 제목이어야 하고, 목록들은 목록이어야
하며, 버튼들은 버튼이어야 하고, 표들은 표이어야 합니다. 당신은 그것들을 (꽤 많이) 당신이
원하는 대로 — 제목이 크지 않고 굵지 않게 하고 아래 바깥 여백을 가지지 않도록 스타일링
할 수 있습니다. 그것은 당신에게 달렸지만, 틀림없이 제목이어야 하고 그것을 당신이
<div>으로 만든다면 나는 니 멱살을 잡을 겁니다.
HTML은 아마도 배우기 어렵지 않을 겁니다, 특히 당신이 JavaScript 프레임워크들을 학습하는데 익숙하다면. 세어본 적은 없지만, 대략 116개 요소(element)들이 존재하고, 그것들의 대부분은 일반적으로 당신이 필요로 하지 않을 것이라는걸 꽤 확신합니다. 왜 학습하지 않는 겁니까?
나는 'Front-End의 Front-End'와 같은 사람입니다. 내 전문성은 HTML과 CSS에 있고, 때문에 왜 모든 이들이 이미 알고 있는 것을 (분명히 말하건데, 나도 모든 것을 알지 못합니다 — 우리는 여전히 사무실에서 특정 컴포넌트를 마크업하는 가장 좋은 방법이 무엇일지에 대해 열띤 논쟁을 벌이고 있습니다.) 학습해야 하는지에 대해 열변을 토하는 것은 누워서 떡 먹깁니다. '내 업무'가 당신의 것보다 더 중요하다는 것이 아닙니다. 당신이 브라우저에 무언가를 렌더링하는 코드를 작성하고 있다면, 이것은 당신의 업무 라는 겁니다.
그것은 사용성과 접근성에 관한 것입니다. 당신의 웹 페이지나 앱의 시맨틱 구조가 중요하다고
생각하지 않는다면, 당신은 본질적으로 "글쎄요, 내 브라우저에서는 잘 동작하는데요, 배포해줘요"
라고 말하고 있을 겁니다. 나는 당신이 당신의 JavaScript에도 그렇게 할 거라고 생각하지
않습니다. 그렇다면 당신은 확실히 CSS에도 그렇게 하지 않아야 합니다. 검색 엔진은 당신의
콘텐츠를 읽어야 하며, 휙 휙 나오는 애니메이션이나 멋진 그라데이션을 즐길 필요가 없습니다.
스크린리더는 당신의 콘텐츠를 읽어야 하고 키보드 사용자는 당신의 콘텐츠를 읽을 필요가 있습니다.
다음에 어떤 기술이 나올지, 그리고 그것이 당신의 앱을 어떻게 사용할지 누가 알겠습니까? 하지만
그 기술이 당신의 콘텐츠를 쉽게 읽고, 해석하고, 이동할 수 있다면 그것이 더 효과적이라는데 내
비트코인을 걸겠습니다. 이것들이 당신의 콘텐츠를 읽는 방법은 의미 없는 태그로 감싸진 텍스트
문자열 뿐 아니라 실제 내용을 구별할 줄 안다는 겁니다. 그것들은 무엇이 표이고 그것을 어떻게
표현할지, 무엇이 목록이고 어떻게 표현할지, 무엇이 버튼이고 무엇이 체크박스인지를 구별합니다.
모든 것을 <div>들로 만들면 이게 뭔지를 알아내기 위해 피를 쏟는 노력을 해야 할 겁니다.
"내 프레임워크가 그거 다 처리해줘. 난 그냥
.jsx템플릿만 작성할 뿐이야"
아뇨. JSX에 올바른 HTML을 작성하세요. 할 수 있거든요? React나 Vue나 다른 어떤 것을
사용하고 있더라도, 모든걸 <div>으로 만들지 않아도 됩니다. 니가 안 하는거죠.
"이 라이브러리는 WAI-Aria 속성들을 모든 것에 추가하기 때문에 이미 되어 있는거니까 접근 가능하다고 알고 있는데요"
잘 됐네요. 그런데요 적절한 HTML을 썼다면, 그 속성들의 대부분은 전혀 필요하지 않을겁니다.
onClick 리스너를 가진 <div> 대신 실제 버튼을 사용하는 것만으로도 접근성 기능의 전체
덩어리를 얻을 수 있습니다. 무료로요. 무료로, 접근성, 퍼포먼스, 사용자 경험들을 말이에요.
무료라구요!
이것은 정말 중요한 겁니다. 이것을 하지 않는 것은 천천히 (사실 그렇게 느리지도 않지만) 월드 와이드 웹을 부수는 겁니다. 최소한 당신의 제품을 사용할 사람들에 대해서 사용을 더 어렵게 만들고 있는 겁니다. 당신이 당신 스스로 Front-End 엔지니어라고 부른다면, 기본을 — 웹에 접근할 수 있는 모든 브라우저, 플랫폼, 기기, 가전 제품에 걸쳐 공통적인 것을 학습하고 사용하는 것은 당신의 책임입니다.
제발 좀 하세요. 책임감 있게 웹을 만들어서 보다 나은 곳으로 만드세요. 웹에는 당신이 그것을 할 수 있도록 도와줄 자원이 가득한데, 우선 여기 몇 가지가 있습니다:
- HTML로 문서를 마크업 하는 방법을 학습하세요. 콘서트 포스터나 뉴스 페이지 그리고 이미지를 보고 HTML로 어떻게 구조화 될지를 상상해보세요. 만약 시간이 있다면 만들어보세요. 그런 학습들을 일상 업무에 활용하세요.
- MDN은 블로그 포스트, 튜토리얼, 레퍼런스로 좋은 리소스입니다.
- 커뮤니티 안으로 들어가세요. 블로그 게시물들을 (시맨틱 HTML을 사용하는 것에대한 앤디 벨의 최근 게시글, Keep it simple 같은) 읽고 영상들을 보세요.
- 내가 일을 해오는 동안, 소스보기는 여전히 유용했습니다. 우리는 현재와 미래 세대로 달려 오고 있지만, 브라우저의 개발툴들을 사용하는 방법을 아는 것에 따르는 강력함을 이해하게 할 것입니다.
- 보조 기술이 웹에 접근하는 방법에 대해 찾아보세요.
- HTML 명세를 보거나, HTML 요소들의 목록과 그것의 용도들이라도 살펴 보세요.
- 당신이 개발팀에서 일하고 있다면, 마크업에 대한 논의를 가지세요. 무언가가 테이블 또는
<dl>(설명 목록 요소 - MDN)중 어느 것이어야 하는지에 대해 활발한 대화를 나누어보세요. 정말 재밌습니다. 약속합니다. - 당신의 팀에 있는 HTML 전문가가 누구인지 찾아보고 당신의 코드를 리뷰해 줄것을 그들에게 요청하세요. 그 사람이 저라면, 전 항상 그 토론을 하는 것이 행복합니다.
출근길에 접근성 뉴스레터를 통해 본 글인데, 너무 전적으로 공감하는 내용이라 번역 및 공유 허가를 요청했다.
개인적으로도 이전부터 계속 해서 이야기 해 오던 이야기도 웹 퍼블리셔는 결국 End-User를 위한 Front-End를 만드는 사람이고, Front-End 개발자 역시 결국은 End-User를 위한 Front-End를 만드는 사람이기 때문에 웹 퍼블리셔는 너무나 당연하게 JavaScript를 해야 하는 것이고, Front-End 개발자는 너무나 당연하게 웹 표준, 시맨틱 마크업, 웹 접근성, SEO등에 신경을 써야 한다는 것이었는데 (물론 그렇다고 현재 웹 퍼블리셔들이 그런것들에 신경을 쓰고 있다는 건 아니다) 비슷한 생각을 가진 글을 발견해서 반가운 마음이 들기도 했다.
솔직히 이전에도 그리고 지금도 Front-End 개발한다고 하면서 <span> 안에 <div>을 끼워
넣는다던지, 키보드 운용이 전혀 안되게 만든다던지 하는 일들을 너무 많이 봐서 아무리 개발자와
웹 퍼블리셔 간의 관심사가 다르다고는 하지만 너무 심각하다고 생각된다.
지금 회사에서도 외주에서 개발된 산출물을 가지고 유지보수를 진행중이지만… 할많하않…
무튼, Front-End 개발자라면 결국 최종 산출물은 HTML인 것이고, 그렇기 때문에 "웹"과 "브라우저"라는 환경은 최소한 이해는 하고 작업을 하면 좋겠다. HTML을 굉장히 쉬운 것으로 치부하면서 (안 그런 이들도 있지만) 그걸 제대로 사용할 줄도 모르는건 모순이지 않을까?
각주
The Rhythm Section: 음악 그룹에서 Rhythm Section은 일반적으로 베이스와 드럼으로 간주되며 나머지 밴드들이 만들어지는 토대가 되는데, 본문에서는 그러한 "토대"가 되는 것의 의미로 사용
Ladyfingers: 스펀지 비스킷으로 trifle이라는 영국 디저트의 기본으로 사용됩니다. 유리 보울(bowl)위에 이것을 깔고, 이를 술에 적신 다음에 젤리/젤로, 커스터드, 크림, 과일이나 설탕 캔디 등을 뿌리는데, 요점은 이 스펀지 비스켓이 없으면 그냥 설탕이 든 수프를 먹는 다는 것. 즉, "기반"이 되는 것을 의미.
Hero image from pixabay
댓글