부트캠프 52일차 (웹 표준, SEO)
오늘의 생각
웹 표준에 대해 배우게 되었는데, 기존에 알고있던 개념들이 대부분이라 크게 어렵지는 않았다.
하지만 웹 표준의 장점, 시맨틱Semantic 요소의 필요성 등은 명확히 몰랐던 부분이라 다소 당황스러웠다. 개발자라면 "왜" 쓰는지를 알아야 하는데 조금은 모자란 부분이 아니었나 싶었다.
자주 틀리는 마크업의 몇 가지 예시에 대해 배웠는데, 잘 지키고 있으면서도 마찬가지로 "왜" 지켜야 하는지 생각하지 못했던 부분들이 있어 아쉬웠다.
// 나쁜 예시
<h1>엄청 큰 글씨</h1>
<h3>적당히 큰 글씨</h3>
<h2>큰 글씨</h2>
<h6>엄청 작은 글씨</h6>
<h4>그냥 글씨</h4>
// 좋은 예시
<h1>제목</h1>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h3>작은 목차</h3>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h4>더 작은 목차</h4>
<h4>더 작은 목차</h4>
특히 <hgroup>의 경우 나도 HTML만으로 작성할 때 다소 무분별하게 사용하고 있었기 때문에 웹 표준을 준수하지 못한 점에 반성했다.
크로스 브라우징의 경우 관련된 지식인 전무했기 때문에 매우 흥미로웠다. 한국에서 크로스 브라우징의 어려움을 알고 그럼에도 왜 ActiveX라는 플러그인을 사용하게 됐는지 알게되어 조금은 씁쓸한 감정이 들었다. 크로스 브라우징 워크플로우를 통해 더 나은 UX를 제공할 수 있는 개발자가 되어야겠다는 생각도 들었다.
검색 엔진 최적화(SEO)도 명확히 몰랐던 개념이기 때문에 매우매우 흥미로웠다.
특히 실습 때 "나와의 대화"를 통해 <meta> 요소와 <title> 요소를 배운 경험이 매우 이색적이고 즐거웠다. 항상 "검색 결과는 어떤 걸 기준으로 우선시 되는걸까?" 라는 의문이 다소 해소될 수 있었던 계기가 되었다. 물론 SEO를 활용하기 위한 "최적의 콘텐츠"는 창의적인 부분이 많기 때문에 어떻게 나만의 개성있는 브랜딩을 가질 수 있을지 조금 의문이 들었다.
오늘의 키워드
웹, 웹 표준, 시맨틱Semantic HTML, 크로스 브라우징, ActiveX, 검색 엔진 최적화(SEO: Search Engine Optimization), On-Page SEO, Off-Page SEO, <meta> 요소, <title> 요소
오늘의 학습내용
- 인터넷과 웹의 차이점
- 웹 표준의 정의, 웹 표준이 필요한 이유와 웹 표준을 지켰을 때의 장점
- 시맨틱 요소가 가지는 역할과 시맨틱 요소의 필요성, 종류
- 자주 틀리는 마크업의 예시와 그에 따른 단점
- 크로스 브라우징의 정의와 우리나라에서의 역사
- ActiveX가 사용됐던 이유와 ActiveX의 기능
- 크로스 브라우징 워크 플로우를 통한 개발 단계
- 검색 엔진 최적화(SEO: Search Engine Optimization)가 중요한 이유
- On-Page SEO와 Off-Page SEO의 차이점
- SEO에 영향을 미치는 요소(<meta>, <title>)
어려웠던 keyword / 활용한 질문
Q. 왜 <b>, <i> 요소를 사용하지 않는 것이 좋나요?
A. <b>, <i> 요소는 시맨틱 하지 않은, 표현을 기준으로 이름이 지어진 요소이기 때문에 웹 표준을 준수하지 못하기 때문입니다.
Q. 크로스 브라우징이 중요한 이유와 크로스 브라우징 워크 플로우를 활용했을 때의 장점이 무엇인지 설명할 수 있나요?
A. 크로스 브라우징을 사용하면 브라우저의 종류에 상관 없이 사용자에게 동등한 화면과 기능을 제공할 수 있기 때문에 중요합니다. 크로스 브라우징 워크 플로우를 고려해 개발하면 크로스 브라우징을 지원할 수 있고, 웹 표준에 맞는 코드를 작성하는 것이 중요한지 인지할 수 있습니다.
Q. 왜 웹 콘텐츠를 만들 때 최대한 글자로 작성하는 것이 SEO에 도움이 되나요?
A. 검색 엔진은 이미지에 적힌 글을 읽을 수 없기 때문에 검색 엔진의 선택을 받을만한 글을 이미지로 대체하여 기회를 박탈당할 수 있기 때문입니다. 따라서 글자로 적어도 될 내용을 굳이 이미지로 만들어서 작성하는 것은 SEO에 도움이 되지 않을 수 있습니다. 반대로 적절한 이미지의 사용은 콘텐츠의 품질을 높일 수 있기 때문에 이미지를 넣는다면 alt 속성을 사용하여 이미지에 대한 설명을 텍스트로 작성하는 것이 좋습니다.