JadeCode

[리뷰] 사용자 친화 본문

개발/웹

[리뷰] 사용자 친화

z-zero 2022. 6. 28. 09:00

웹표준: W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙'

사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.

웹 표준 등장 이전에는 구조, 표현, 동작이 뒤섞인 코드가 많았지만, 각 영역이 분리되면서 오히려 코드가 경량화되었다.

웹 표준 장점

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

Semantic HTML

웹 표준에서는 HTML을 시맨틱하게 작성하는것의 중요성을 강조한다. <div>와 <span>요소는 해당 요소에 어떤 내용이 들어갈지 요소의 이름만으로는 알 수 없다. 따라서 시맨틱 HTML을 구성하고자 할 때에는 적합하지 않다.

시맨틱 HTML의 필요성

  1. 개발자간 소통
  2. 검색 효율성
  3. 웹 접근성

나쁜 습관🤬

  1. 인라인 요소 안에 블록 요소 넣기
  2. <b>,<i>요소 사용하기(<strong><em>태그 사용하는 것이 좋다)
  3. <hgroup>마구잡이로 사용하기
  4. <br/> 연속으로 사용하기
  5. 인라인 스타일링 사용하기

크로스브라우징

브라우저의 종류에 상관 없이 ‘동일한' 화면과 기능이 아니라 ‘동등한’ 화면과 기능을 제공할 수 있도록 만드는 작업.

브라우저들의 렌더링 엔진이 각자 다르므로 동일한 화면을 만드는 것은 불가능하다.

SEO

검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업.

SEO를 통해 검색 엔진에서 웹페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다.

- On-Page SEO: 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML요소 사용법 등을 이용하는 방법이다.

- Off-Page SEO: 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없다.

 

검색창에서 웹 페이지가 나오는 것(On-page SEO), 광고비를 지불하고 검색 결과 상위에 뜨게 만드는 것(Off-Page SEO)

 

SEO에 영향을 미치는 요소

1. <title>요소

<head>태그의 자식 요소로 작성한다. <title>요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다. 또한 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다. 하지만 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있다. 제목에 핵심 키워드는 한 번만 포함시키는 것이 좋다.

 

2.<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

3. <hgroup>요소

<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다. 따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다. 그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.

 

4.콘텐츠

개성있는 브랜딩, 복붙금지, 간결한 제목과 설명글, 최대한 "글자"로 작성하기

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko 

 

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

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

developers.google.com

https://searchadvisor.naver.com/guide

 

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

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

searchadvisor.naver.com


웹 접근성: 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장하는 것

웹 접근성 실태

우리나라의 웹 접근성 수준은 높지 않다. 텍스트로 제공된 정보는 스크린 리더를 사용할 수 있지만 이미지에 들어있는 글자의 경우 스크린 리더가 인식할 수 없다.

웹 접근성 갖추면 얻을 수 있는 효과

  1. 사용자층 확대
  2. 다양한 환경 지원
  3. 사회적 이미지 향상

웹 접근성을 잘 확보했는지 판단할 기준이 될 수 있는 웹 콘텐츠 접근성지침

W3C이 웹 접근성 권고안인 ‘WCAG 2.0’을 기반으로 한국 실정에 맞게 조금 수정한 ‘한국형 웹 콘텐츠 접근성 지침 2.1’

WAI-ARIA

  • WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
  • ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
    • RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

 

Using ARIA: Roles, states, and properties - Accessibility | MDN

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and proper

developer.mozilla.org

https://www.w3.org/TR/html-aria/

 

ARIA in HTML

Element with contenteditable=true or element without contenteditable attribute whose closest ancestor with a contenteditable attribute has contenteditable="true". Note This is equivalent to the isContentEditable IDL attribute. aria-readonly="false" Authors

www.w3.org

 

저작자표시

'개발 > 웹' 카테고리의 다른 글

[리뷰] 인증,보안  (0) 2022.07.06
[리뷰] 네트워크 심화  (0) 2022.06.30
[리뷰] REDUX  (0) 2022.06.27
[리뷰] Custom Component  (0) 2022.06.17
[리뷰] UI/ UX  (0) 2022.06.15
'개발/웹' Related Articles more
Comments