🔥 웹 표준
1. 웹 표준의 개념
: W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙,
사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.
- 웹 표준의 장점
- 유지 보수의 용이성
웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하고, 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다. - 웹 호환성 확보
웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다. - 검색 효율성 증대
웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선순위로 노출될 수 있다. - 웹 접근성 향상
브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양해 모든 환경에 맞춰 웹 페이지를 개발하는 일은 쉽지 않지만 웹 표준에 맞춰 개발하는 것만으로 문제를 해결할 수 있다.
2. Semantic HTML
semantic : 의미의, 의미가 있는 이라는 뜻 & HTML : 화면의 구조를 만드는 마크업 언어
-> HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만들겠다는 의도가 담겨있다.
시멘틱 요소 : 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소
시멘틱 요소를 적절하게 사용하여 구성한 HTML -> 시멘틱 HTML
- 시멘틱 HTML의 필요성
: 개발자 간 소통, 검색 효율성, 웹 접근성
- 시멘틱 요소의 종류
<header>
- 페이지 최상단에 위치하는 경우 사이트 전체에서 사용할 수 있는 내용을 담는다.
<article>,<main>등 다른 요소의 머리말 역할로도 사용할 수 있다.
<nav>
- 내비게이션 바의 역할로, 링크들을 담고 있다.
<aside>
- 메인 콘텐츠와 관련이 있긴 하지만, 직접적인 연관은 없는 내용이 들어가는 요소
- 우측에 있는 제목별 북마크, 페이지 하단에 있는 콘텐츠 오류 제보 등의 내용이
<aside>요소 안에 들어가 있다.
<main>
- 페이지의 메인 콘텐츠가 들어가는 요소
<article>
- 게시글, 뉴스 기사처럼 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소
- 재사용하는 부분인 만큼, 각각의
<article>을 식별할 수 있는 요소가 필요하다. <hgroup>요소를 사용하여 식별하는 경우가 많다.
<section>
- 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용한다.
- 적합한 의미의 요소가 없을 때 사용하기 때문에, 의미를 부여하기 위한 요소를 포함시키는 것이 좋다.
<hgroup>을 포함하는 경우가 많다.
<hgroup>
- 제목을 표시하기 위해서 사용하는 요소
<h1>부터<h6>까지 있으며, 숫자가 클수록 글자의 크기는 작아진다.
( 숫자가 작은 제목이 숫자가 큰 제목을 포함하는 방식으로 사용 )
<footer>
- 페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소
- 사이트 제공자, 저작권, 정책, 사이트맵 등의 내용을 포함하고 있다.
3. 자주 틀리는 마크업
-
인라인 요소 안에 블록 요소 넣기
인라인 요소 : 콘텐츠가 차지하는 만큼 차지 ( ex.<span>)
블록 요소 : 가로로 넓게 화면 영역을 차지 ( ex.<div>) -
<b>,<i>요소 사용하기
<b>요소 : 글씨를 굵게 만들 때 사용,<i>요소 : 글씨를 기울일 때 사용
-> 웹 표준을 준수하기 위해선<strong><em>을 사용하는 것이 좋음 -
<hgroup>마구잡이로 사용하기
<hgroup>: 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해 사용 -
<br />연속으로 사용하기
<br />: 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소
-> 요소 사이에 간격을 만들기 위한 목적으로 사용해서는 안됨 -
인라인 스타일링 사용하기
HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같으므로 HTML과 CSS 코드를 분리해서 작성해야 한다.
4. 크로스 브라우징(Cross Browsing)
: 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
-> 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것
크로스 브라우징 워크 플로우
1. 초기 기획
어떤 웹 사이트를 만들 것인지, 어떤 콘텐츠와 기능이 있어야 하는지, 디자인은 어떻게 할지, 이 사이트의 고객이 누구일지, 고객이 사용하는 브라우저는 무엇일지, 기기는 무엇일지에 대한 고민이 필요하며 여기에 맞는 기술을 사용해서 개발할 수 있도록 기획해야 한다.
2. 개발
코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 한다.
( MDN, Can I Use 등의 사이트에서 코드의 호환성 확인 가능 )
3. 테스트 / 발견
각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요하다.
- 안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트 진행
- 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트 진행
- 그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트 진행
- Window, Linux, Mac 등 다양한 운영 체제에서도 테스트 진행
직접 테스트를 수행할 수도 있지만, 자동으로 테스트를 진행해 주는 도구를 이용하는 것도 방법이다. TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴이 있다.
4. 수정 / 반복
테스트 단계에서 버그가 발견되었다면 수정이 필요하다.
버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 한다. 코드 수정이 완료되면 3번 과정부터 반복한다.
🔥 SEO
1. SEO (Search Engine Optimization, 검색 엔진 최적화)
: 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업
( SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다. )
- On-Page SEO
: 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
- Off-Page SEO
: 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 ( 웹 페이지 내용이나 구조와는 관계가 없다. )
2. SEO에 영향을 미치는 요소
On-Page에서 통제할 수 있는 요소
- <title> 요소
: 검색 결과창에서 제목에 해당하는 요소, <head> 요소의 자식 요소로 작성
<title>요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.
( 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다. )<title>요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
( 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있다. 제목에 핵심 키워드는 한 번만 포함시키는 게 좋다. )
- <meta> 요소
: 메타 데이터를 담는 요소, <head> 요소의 자식 요소로 작성
( 메타 데이터 : 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터 )
검색 결과창에서 제목 밑에 따라오는 설명글이 <meta> 요소 안에 들어있는 내용
- 소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도
<meta>요소에 들어가 있는 내용
SEO를 위한 meta 요소 -> name 속성
<meta name="속성값" content="내용" />
오픈 그래프 (open graph) -> property 속성
<meta property="속성값" content="내용" />
- <hgroup> 요소
: 콘텐츠의 제목을 표시하는 용도
- 핵심 키워드를 의식해
<hgroup>요소에 넣어주는 것이 SEO에 도움이 된다.
-> 이미 사용한 핵심 키워드를 비슷한 키워드로 대체해서 사용하거나 핵심 키워드의 관련 키워드를 포함시키는 것이 좋다.
- 콘텐츠
개성 있는 브랜딩, 복사 & 붙여넣기 금지, 간결한 제목과 설명글, 최대한 글자로 작성하기
( + 참고 Google - SEO 기본 가이드 , Naver - 웹마스터 가이드 )
🔥 웹 접근성
1. 웹 접근성의 개념
: 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
- 웹 접근성을 갖추면 웹에 접근했을 때 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.
- 웹 접근성의 궁극적인 목적 -> 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것
웹 접근성을 갖추면 얻을 수 있는 효과
-> 사용자층 확대, 다양한 환경 지원, 사회적 이미지 향상
2. WAI-ARIA
: WAI와 ARIA를 합친 단어 ( WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격 )
WAI (Web Accessibility Initiative)
: 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications)
: 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
( + RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성, 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션 )
- WAI-ARIA의 필요성
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.
( 보조적으로 사용하면 웹 접근성 향상할 수 있음 )
- 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와준다.
- 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황
: 시멘틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미
( WAI-ARIA를 남용해선 안 되며, 시멘틱한 HTML을 작성하는 것이 최우선이다. )
- 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황
- SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.
- WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해 줄 수 있다.
- WAI-ARIA의 속성
- 역할(role) : HTML 요소의 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성
- 속성(property) : 요소의 특징을 정의하는 속성(attribute)
