Section3 사용자 친화 웹

keepgoing·2023년 2월 28일

코드스테이츠

목록 보기
11/31
post-thumbnail

chapter1: 웹 표준 ~ chapter2: SEO

✅ 웹 표준

웹 표준을 알기 전 알야할 웹
🤔 인터넷은 웹 기반으로 작동한다. ( ❌ )
인터넷은 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 의미!(웹, 온라인 게임, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함)

  • 웹은 정확히 무엇을 의미할까?
    두 글자로 정의한다면 ‘공간’으로 정의할 수 있다.
    • 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미

웹 표준?

  • W3C에서 권고하는 웹에서 사용되는 기술이나 규칙
  • 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있다.(HTML, CSS, JS)
  • 최신 웹 브라우저들은 모두 웹 표준을 지원(크롬, 엣지, 사파리)
  • 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.

웹 표준의 장점

  1. 유지 보수의 용이성
  2. 웹 호환성 확보
    • 하지만 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.
  3. 검색 효율성 증대
    • 웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다.
  4. 웹 접근성 향상

✅ Semantic HTML

웹 표준에서는 HTML을 시맨틱하게 작성하는 것의 중요성을 강조한다.

  • Span, div태그로 화면을 구성할 수 있지만 구조만 보고 요소의 역할 파악이 어렵다.
  • 시맨틱 요소로 화면 구성 시 요소의 이름만 보고도 화면에서 어떤 역할을 하는지 명확하게 알 수 있다.

시맨틱 HTML의 필요성

  1. 개발자 간 소통 : 태그만 보고도 기능 파악 가능
  2. 검색 효율성 : 검색 엔진이 파악 하기 쉽다.
  3. 웹 접근성 : 시간 장애인의 스크린리더에 콘텐츠를 명확하게 전달 가능

✅ 자주 틀리는 마크업

  1. 인라인 요소 안에 블록 요소 넣기
  • HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉜다.
  • 인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지하며. 대표적인 인라인 요소로는 <span>, 블록 요소로는 <div> 가 있다.
  • 라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안 된다.
 h1, div 요소는 블록 요소이고,
 a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>
  1. <b>, <i> 요소 사용하기
  • <b> 요소와 <i> 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소이다. ❌
  • 웹 표준을 준수하기 위해 이 요소들을 사용하지 않는 것이 좋다.(시맨틱하지 않은 표현)


    ✅ 똑같은 스타일을 부여하면서 콘텐츠에 의미를 부여하는 <strong> 요소와 <em> 요소를 사용하는 것이 좋다.
<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>
  1. <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>
  1. <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 }
  1. 인라인 스타일링 사용하기
  • 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있었다.
  • HTML 요소안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같다.
//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" }

✅ 크로스 브라우징

  • 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미
  • 동일한 ❌, 동등한 🙆🏻‍♀️
  • 크로스 브라우징은 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것이 아니다. 애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능하다. 따라서 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있다.

✅ SEO(검색 엔진 최적화)

  • 열심히 만든 웹 페이지가 검색 시 상위에 잘 노출 될 수 있게 검색 엔진의 작동 방식에 맞게 웹페이지를 최적하해주는 작업
    => SEO(Search Engine Optimization)

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

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

On - Page의 요소

  1. title 요소
  • title 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성
    -> 제목만 살펴보면서 어떤 페이지에 들어 갈지 결정을 많이 하기에 중요한 역할
  • <title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있습니다.
    • 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
  • <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
    • 같은 키워드를 반복하면 검색시 불이익을 받을 수 있다. 제목에 핵심 키워드는 한 번만 포함!!
  1. <meta> 요소
  • <meta> 요소는 메타 데이터를 담는 요소입니다. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
  • <meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적

  • 이미지처럼 검색 결과창에서 제목 밑에 따라오는 설명글이 요소안에 들어있는 내용
  • 해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어있음

  • <meta> 요소에 들어가는 내용은 검색 결과창에서만 확인할 수 있는 것이 아니다.
  • 소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용.

🤔 위의 두 사례 모두 <meta> 요소를 사용하지만, 각각의 목적은 엄연히 다르다.

  • 첫 번째 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적입니다.
  • 두 번째 경우는 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적입니다.
    • property 속성을 사용하는 경우는 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙는다.
  1. <hgroup> 요소
  • <hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다. 따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다. 그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.

  • 하지만 똑같은 키워드만 반복해서 넣는 것은 역효과를 불러올 수도 있다. 따라서 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋다.
  1. 콘텐츠
  • 개성 있는 브랜딩
    -> 비슷한 타 사이트가 많지 않다면 상위권에 나올 확률 증가
  • 복사 + 붙여 넣기 금지
    -> 검색 엔진에 중복 문서로 판정 될 수도 있다!
  • 간결한 제목과 설명글
    -> 많이 넣는다면 사용자 경험 ⬇️, 스팸 사이트로 분류 가능
  • 최대한 글자로 작성하기
    -> 검색 엔진은 이미지에 적힌 글자를 읽을 수 없다.
    -> alt 속성을 사용하여 해당 이미지에대한 설명을 텍스트로 작성하는 것이 좋습니다.

실습
우선 아무 것도 작성되지 않은 상태에서 링크를 공유하고 미리보기를 확인해보세요.
<head> 요소 안에 <title> 요소를 작성하고 공유하여 미리보기를 확인해보세요.
<head> 요소 안에 속성으로 property=”og:title” 를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해주세요. 그 다음 공유하여 미리보기를 확인해보세요.
<head> 요소 안에 속성으로 property=”og:description” 를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해주세요. 그 다음 공유하여 미리보기를 확인해보세요.
property=”og:description” 를 갖는 <meta> 요소의 content 속성값을 30자 이상으로 길게 작성해보세요. 그 다음 공유하여 미리보기를 확인해보세요.
property=”og:title” 를 갖는 <meta> 요소의 content 속성값을 30자 이상으로 길게 작성해보세요. 그 다음 공유하여 미리보기를 확인해보세요.
<body> 요소 안에 <img> 요소를 만든 다음 src 속성을 작성하여 이미지를 넣어주세요. 그 다음 공유하여 미리보기를 확인해보세요.
<head> 요소 안에 속성으로 property=”og:image” 를 갖는 <meta> 요소를 작성하고 content 속성으로는 <img> 요소와는 다른 주소를 사용해주세요. 그 다음 공유하여 미리보기를 확인해보세요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>타이틀입니다.</title>
    <meta
      property="og:title"
      content="메타 타이틀도 길게 길게 작성 할 수 있습니다 길게 길게 작성할 수 있습니다 ㄱ ㄴㄷ ㄹㄹㅁㅁ"
    />
    <meta
      property="og:description"
      content="og:description은 30자 이상의 긴 글이 필요합니다. 긴글이 필요하므로 공백을 포함하여 길게 작성합니다."
    />
    <meta
      property="og:image"
      content="https://blog.kakaocdn.net/dn/uqJpZ/btqyenBIIXx/mh1Cc5F023UGpfQTFBdqV0/img.jpg"
    />
    <meta property="" content="" />
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
    <img
      src="https://images.velog.io/images/jojo_devstory/post/dae32386-bffc-40c3-b866-5c1e64516902/Android%2010_0.jpg"
      alt="dksem"
    />
  </body>
</html>
profile
keepgoing
매일매일
이전 포스트

Section3 Daily Coding 24

다음 포스트

Section3 사용자 친화 웹_2

0개의 댓글