220723 시멘틱 마크업에 대한 개인적인 생각

샨티(shanti)·2022년 7월 23일
0

TIL

목록 보기
49/145
post-thumbnail

하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.

근 1개월 내도록 아이를 혼자 보는 남편이 어제는 좀 지쳐보여서
약간 무리가 되었지만 밤 아홉시쯤 강원도에 있는 친정집으로 출발했다.
나도 처음으로 밤&고속도로 운전도 해보고 ;;
운전면허 딴 지 3개월..만에... 이정도면 운전이란거에 살짝 익숙해졌다고 말할 수 있을까 ㅎㅎ

금주 강의 페이지가 일찍 오픈되었음에도 불구하고 금요일 밤에 공부를 하지 못하고 결국 기절.
오늘 아침 늦게 눈이 떠져서 좀 속상한 마음으로 공부를 시작했던 것 같다.
황금같은 시간을 아껴보고자 젭에 접속한 동료들에게 뽀모도로 같이 해달라고 부탁도 하고.. 쨌든 같이 뽀모 해준 동료들 덕택에 늘어지지 않고 빠르게 강의를 보고 노트를 정리한 다음에 개념노트를 만들기 시작했다.

이번주에는 정말 1도 모르는 내용이 나오려나? 하고 긴장하고 있었는데, 어언 3번째 듣게되는 HTML과 CSS 강의가 올라왔다.
하지만 전-혀 안도감이 들지 않았다. 왜냐면 이 HTML과 CSS 만큼 정답이 없으면서 동시에 공부를 하자면 무한한 영역이 또 있나? ㅋㅋ 싶은걸 어렴풋이 알고 있기 때문이다.
와 이번주에도 정말 처참하게 발리겠구나~ 걱정 하면서 개념노트를 만들기 시작했다.

가장 먼저는 (1) 강의 페이지에서 제공되는 '키워드'를 중심으로 노트를 정리하고, (2) 그 다음 과제인 HTML, CSS에 대한 모든 내용을 정리하는 것으로 하자!! 싶어서 달려들었는데..
정말 그 양이 너무 방대하고 넓다.
오죽했으면 강의 듣고 있는 동료들한테 '제발 강의 2배속으로 빨리 듣거나 지금 당장 멈추고 개념노트부터 시작하라'고 떠들었을까...ㅋㅋ

CSS 선택자만 정리하는데 1시간이 넘게 걸린다.
사실 선택자 같은 경우에는 정리에 집중할 게 아니라 간략하게 알고 그다음 계속 써먹어야지 외워지고 익혀지는 것 같아서, 일정 시간이 넘어가는 것 같다고 느꼈을 때 빠르게 정리를 중단하고 다음 주제로 넘어갔다.
attribute쪽은 설명만 봐서는 잘 모르겠기에... 오늘 개념노트 정리 다 하고나서 css 선택자 게임을 다시 해보면서 복습하려 한다.

HTML은 사실 '태그'에 대한 숙지와 함께 클론 코딩을 해보면서 많이 활용하는 것이 중요할 것 같다고 생각했다.
아직 알고있는 태그가 제한적이기 때문에 이번 정리 기회를 통해 어떤 태그들이 있는지 넓고 얇게 알아본 다음, 내일 클론코딩을 해보면서 써먹어봐야지...

오늘 개념노트를 정리하면서 눈에 들어온 건 '시멘틱 마크업', 즉 의미있는 마크업의 내용이었다.

사실 이월 전 6주차였나, 7주차 강의가 이 HTML, CSS였고 거기서도 시멘틱 마크업에 대해서 들어보긴 했으나 오늘 처럼 깊게 생각해본 적은 없는 것 같다.

시멘틱 마크업은 말 그대로 '의미있는 마크업'이다. HTML 문서를 작성할 때, 의미를 잘 전달하도록 문서를 작성하는 것 정도로 간략히 표현할 수 있겠는데. 사실 의미있는 마크업 그 자체보다는 이를 해야 하는 '이유'가 더 중요하게 느껴졌다.

의미있는 마크업을 해야 하는 이유는 mdn 홈페이지에서도 확인할 수 있지만 아래 5개 정도로 압축할 수 있을것 같다.

  • 검색엔진의 최적화(SEO) 측면. 검색엔진이 효과적으로 해당 웹페이지를 분석할 수 있음
  • 웹 접근성 측면. 시각장애인들의 스크린 리더 사용 시 웹페이지 구조나 내용을 파악하는데 용이함
  • 유지보수 측면. 정리된 마크업은 코드 식별이 용이하여 개발자들의 유지보수 측면에 도움
  • 태그 안에 채워질 데이터의 유형을 제안함
  • 적절한 사용자 정의의 요소, 구성 요소의 이름짓기(naming)를 반영

당연히 개발자 입장에서는 유지보수 측면, 구성요소 네이밍이나 태그 안에 들어갈 컨텐츠의 유형 역시 중요한 부분이다. 이번에 코드 리팩터링을 하면서 과거의 내가 아무렇게나 쓴 코드가 미래의 내 발목을 얼마나 잡을수 있는지 살짝 느꼈기 때문이다.

한편으론 '웹 접근성' 측면에서의 시멘틱 마크업도 아주아주 의미있게 다가왔다.
장애를 가진 사람이나 장애를 가지지 않은 사람이나 모두가 동등하게 웹사이트를 이용하고 정보에 접근할 수 있어야 하는 부분.
현대에는 과학기술의 발전으로 다양한 보조장치나 기기들이 있기에 장애를 가진 사람들에게 이전보다는 더 나은 웹 접근성을 제공하고 있는 것 같다.
하지만 (차마 가늠하진 못하겠으나) 분명 그것이 장애를 가지지 않은 사람들과 동등하다고 말할 수는 없을 것이다.

나는 가까운 가족 중에 발달장애인이 있어서 아무래도 장애를 가진 사람에게 눈길이 한번 더 가는 것 같다.
자주 이용하는 마을버스에 특정 시간마다 보조인과 함께 타는 시각장애인 승객이 있는데, 언뜻 그 분이 휴대폰을 사용하시는 걸 봤다.
귀에다가 대고 끊임없이 화면을 이리 저리 넘기시던데 무언가를 넘길 때마다 마치 핸드폰이 네비게이션처럼 읽어주는 형태였던 것 같다.
아마 그 분이 사용하시던 것이 스크린 리더같은 기기가 아니었을까.

그 당시에는 '와 저런 장치가 있구나...' 하고 그냥 신기해하면서 넘겼는데,
이제 개발을 공부하는 입장에서 웹페이지를 만들어야 한다고 생각하니 그 때의 기억과 경험이 아주 다르게 느껴졌다.
아... 내가 의미있는 마크업을 하지 않으면 스크린 리더를 사용하는 사람들은 본인이 원하는 정보를 찾기위해 도대체 얼만큼의 시간을 허비해야 하고, 그 포인트가 나올때까지 얼만큼을 기다려야 하는걸까.
이 웹페이지를 이용하는 사람들의 접근성이 모두 나와 같다는 보장은 없겠구나.
그런 생각이 들면서 시멘틱 마크업에 대한 내용이 이전과는 다르게 읽히기 시작했다.

물론 시멘틱 마크업은 위에서 이야기 한 여러가지 요소를 고려했을 때 스크린리더 사용자들에게도 도움이 될 뿐만 아니라 개발자들과 더 나아가 서칭 시스템에도 분명 유용하다.
그럼에도 불구하고 오늘 공부한 이 시멘틱 마크업 중에서도 '웹 접근성'을 떠올리게 한 부분은..
뭔가 아주 기계적이고 드라이하다는 느낌으로 공부를 하면서 갑자기 훅 들어온 humanity 때문인건가... ㅎㅎ...

그냥.. 지금 하는 공부가 뭔가 알수없는 기계, 실체없는 완벽한 무언가와의 싸움(?) 같이 느껴졌는데.
사실 따지고 보면 이 모든 공부도 결국 사람을 향한 것이겠지.
이런 깨달음을 얻었던 하루인 것 같다.

물론 아직 공부는 끝나지 않았다.
오늘의 목표는 오늘 안으로 빠르게 노트정리를 끝내고..
내일은 나름의 실습을 통해 개념노트를 보완하는 것.

시간은 항상 부족하고 할일은 많지만,
어떻게든 또 해내는 것이 우리 모두의 미션일 것이기에 ㅎㅎㅎㅎ
얼른 공부하러 가자 샨티.

짤은 그냥 요즘 유명한 드라마라는 우영우? 에서 나온 짤.
고래... 멋지다. 나중에 드라마 몰아서 봐야지 ㅎㅎ

profile
가벼운 사진, 그렇지 못한 글

0개의 댓글