Daily Front_Minhhk

웹 표준, SE 본문

Code개발일지

웹 표준, SE

Minhhk 2022. 12. 30. 16:27

웹 표준

  • W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’
  • 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있습니다.
  • 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룹니다.
💡 인터넷은 ‘전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망’을 의미
웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함합니다. 웹과 인터넷을 혼동하지 않도록 주의해주세요!

 

 

💡 웹은 ‘공간’으로 정의할 수 있습니다.
문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’입니다.

 

 

웹 표준의 장점

  1. 유지 보수의 용이성
  2. 웹 호환성 확보
  3. 검색 효율성 증대
  4. 웹 접근성 향상

 

 

시맨틱 HTML의 필요성

1. 개발자간 소통

  • 만약 id 와 class 를 사용할 경우에는 이름은 어떻게 지을 것인지도 협의해서 정해야 하고, 다른 개발자에게 id 와 class 이름이 어떤 의미인지 설명하는 시간도 추가로 필요하게 될 겁니다.
  • 이런 귀찮은 과정을 시맨틱한 요소를 사용하기만 해도 없앨 수 있습니다. 적어도 각 요소의 기능을 정의하느라 쏟아야하는 시간은 들지 않을 것입니다.

2. 검색 효율성

  • 하지만 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 됩니다.
  • 웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 광고비 등의 추가 지출을 하지 않고 시맨틱 HTML을 잘 짜는 것 만으로도 어느정도 효과를 볼 수 있다는 의미입니다.

3. 웹 접근성

  • 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻합니다.
  • 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다

 

시맨틱 요소의 종류

자주 사용되는 시맨틱 요소들은 다음과 같습니다.

 

요소 종류 설명
<header> 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다.
<nav> 메뉴, 목차 등에 사용되는 요소입니다.
<aside> 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
<main> 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
<article> 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다.
각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
<section> 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
<hgroup> 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
<footer> 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.

 

 

 

1. 인라인 요소 안에 블록 요소 넣기

HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉩니다. 인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지하며.

대표적인 인라인 요소로는 <span>, 블록 요소로는 <div> 가 있습니다.

인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안 됩니다.

보통 특정 요소가 인라인 요소인지 블록 요소인지 정확하게 알지 못할 때 이런 실수를 하게 됩니다.

// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>

// ㄱㄱ
<h1> <a href="#">h1의 자식 요소</a> </h1>

 

2. <b>, <i> 요소 사용하기

<b> 요소와 <i> 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소입니다.

하지만 웹 표준을 준수하기 위해서는 이 요소들을 사용하지 않는 것이 좋습니다.

 

시맨틱 하지 않은, 표현을 기준으로 이름이 지어진 요소이기 때문입니다.

 

대신 똑같은 스타일을 부여하면서 콘텐츠에 의미를 부여하는

<strong> 요소와 <em> 요소를 사용하는 것이 좋습니다.

 

두 요소는 글씨에 효과를 줌과 동시에 각 콘텐츠를 강조하는 의미를 부여합니다.

<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>

3. <hgroup> 마구잡이로 사용하기

<hgroup> 요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해서 사용합니다.

이를 시각적으로 나타내기 위해서 숫자가 작을수록 글자의 크기가 크고, 숫자가 작을 수록 크기가 작습니다.

 

그런데 이러한 특성 때문에 <hgroup> 의 시맨틱 요소로서의 역할을 간과한 채 글자에 스타일 속성을 적용하기 위한 목적으로 사용하는 경우가 종종 있습니다.

이럴 경우 화면은 보기 좋을지 몰라도, 사용자에게 완전히 잘못된 화면 구조 정보를 전달하게 됩니다.

// 나쁜 예시
<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>

 

4. <br /> 연속으로 사용하기

<br /> 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소입니다.

그런데 이러한 목적이 아니라 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안 됩니다.

요소 사이에 간격이 필요한 경우에는 아예 별도의 단락으로 구별하거나

CSS 속성을 주어 여백을 조정해주는 것이 바람직합니다.

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

 

5. 인라인 스타일링 사용하기

웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있었습니다.

그런데 HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같습니다.

웹 표준을 지키기 위해서는, HTML과 CSS 코드를 분리해서 작성해주세요.

//HTML 파일
<head><style>
    h1 { color : "red" }
  </style></head>

(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>

//CSS 파일
h2 { color : "yellow" }

여기에서 언급된 예시는 웹 표준을 저해하는 마크업 사용법이면서, 생각보다 자주 발생하는 상황이기도 합니다. 이런 방법으로 마크업을 사용하지 않도록 주의하세요.

 

크로스 브라우징(Cross Browsing)

웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다.

크로스 브라우징은 초기 기획 → 개발 → 테스트/발견 → 수정/반복의 단계로 진행된다.

 

 

 

SEO(Search Engine Optimization)

  • SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업,
  • **SEO(Search Engine Optimization, 검색 엔진 최적화)**가 필요합니다.

 

SEO는 크게 On-Page SEO와 Off-Page SEO 두 가지로 나뉘어집니다.

  • On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법입니다.
  • Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없습니다.

 

광고비를 지불하고 검색 결과 상위에 뜨게 만드는 것은 Off-Page SEO의 예시 입니다.

 

 

 

여러 개의 <meta>요소와 <title>요소에 검색 키워드인 ‘프론트엔드’와 ‘부트캠프’가 들어가 있는 것을 확인할 수 있습니다.

이는 SEO에 영향을 주는 수 많은 요소중 일부일 뿐이지만, 이처럼 웹 페이지에서 사용하는 HTML 요소의 종류와 요소에 들어가는 내용도 검색 결과에 영향을 주는 것을 알 수 있습니다.

또한, 웹 페이지를 작성할 때 활용할 수 있는 On-Page SEO의 예시 입니다.

 

 

1. <title> 요소

<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성합니다. 아마 여러분도 검색 엔진에서 검색 후 이 제목만 살펴보면서 어떤 페이지에 들어가볼지 결정하는 경우가 많으실 것 같습니다. 이처럼 제목은 검색 결과에서 상당히 중요한 역할을 합니다.

  • <title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있습니다.
    • 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어집니다.
  • <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아집니다.
    • 그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있습니다. 제목에 핵심 키워드는 한 번만 포함시켜 주세요.

2. <meta> 요소

<meta> 요소는 메타 데이터를 담는 요소입니다. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터입니다. <meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적입니다.

위 이미지처럼 검색 결과창에서 제목 밑에 따라오는 설명글이 <meta> 요소안에 들어있는 내용입니다.

해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어있음을 알 수 있습니다.

 

 

<meta> 요소에 들어가는 내용은 검색 결과창에서만 확인할 수 있는 것이 아닙니다.

소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용입니다.

 

이 두 가지의 경우 모두 <meta> 요소를 사용하지만, 각각의 목적은 엄연히 다릅니다. 첫 번째 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적입니다.

 

두 번째 경우는 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적입니다. 특히 property 속성을 사용하는 경우는 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙습니다.

 

SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

주요 속성값은 다음과 같습니다.

name 속성값 설명

description 콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
keywords 웹 페이지의 관련 키워드들을 나열할 때 사용합니다.
author 콘텐츠의 제작자를 표시합니다.

 

오픈 그래프 (open graph)

<meta property="속성값" content="내용" />

주요 속성값은 다음과 같습니다.

property 속성값 설명

og:url 페이지의 표준 URL입니다.
og:site_name 사이트의 이름입니다.
og:title 콘텐츠의 제목입니다.
og:description 콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
og:image 미리보기로 표시될 이미지입니다.
og:type 콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다.
og:locale 리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다.

 

 

 

기본적으로 웹에 설정해줘야하는 og 메타태그

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Naver 블로그, 카카오톡 미리보기 설정

<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />

트위터 미리보기 설정

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
<meta name="twitter:title" content="콘텐츠 제목" />
<meta name="twitter:description" content="웹페이지 설명" />
<meta name="twitter:image" content="표시되는 이미지 " />

모바일 앱 미리보기 설정

모바일 앱이 존재하는 경우 앱으로 연결 시 노출

<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
<meta property="al:ios:app_name" content="ios 앱 이름" />
<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" />

 

3. <hgroup> 요소

<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높습니다.

따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급합니다.

그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 됩니다.

하지만 똑같은 키워드만 반복해서 넣는 것은 역효과를 불러올 수도 있습니다.

따라서 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋습니다.

 

4. 콘텐츠

  • 개성있는 브랜딩
  • 복사 + 붙여넣기 금지
  • 간결한 제목과 설명글
  • 최대한 글자로 작성하기

 

 

 

 

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google Developers

검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요.

developers.google.com

 

 

웹마스터 가이드 - 네이버 서치어드바이저

네이버 검색을 위한 웹마스터 가이드 입니다. 웹마스터 가이드 라인은, 네이버 검색이 콘텐츠를 발견하고 색인할수 있도록 웹사이트에 필요한 기본 요소들을 다룹니다. 모든 웹사이트는 다릅니

searchadvisor.naver.com

 

저작자표시

'Code개발일지' 카테고리의 다른 글

네트워크[TCP/UDP, OSI 7]  (0) 2023.01.06
웹 접근성, WAI-ARIA  (1) 2023.01.02
[Redux] Cmarket Redux  (0) 2022.12.30
[Redux] Store, Reducer, Action, Dispatch // Hooks : useDispatch, useSelector  (0) 2022.12.29
[React] Props Drilling + Cmarket Hooks  (0) 2022.12.27
'Code개발일지' Related Articles more