1. 웹표준
W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미함.
사용자가 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있게 하는 웹페이지 제작 기법을 담고 있다. HTML, CSS, JavaScript 등의 기술을 다룬다. 이 기술들은 각각 화면의 구조, 표현, 동작 등을 담당한다.
=> 웹 표준에 맞추어 웹페이지를 작성하면 어떤 브라우저를 사용해도 동일한 결과물을 얻을 수 있다.
장점
- 유지보수가 용이
구조 / 표현 / 동작이 분리되면서 유지보수가 용이해지고 코드가 경량화 되어 트래픽 비용이 감소하는 효과 발생 - 웹 호환성 확보
웹표준을 준수하면 브라우저의 종류, 버전, 운영체제나 사용 기기 종류에 관계 없이 항상 동일한 결과가 출력됨 - 검색 효율성 증대
검색 효율성과 관련된 내용도 웹 표준에서 다루고 있음으로 웹표준에 맞춰 작성하면 검색엔진에서 더 높은 순위로 노출될 수 있다. - 웹 접근성 향상
웹표준에 맞춰 개발하면 브라우저, 운정체제, 기기의 종류에 상관없이 해당 페이지에 접근하는 사람들에게 동일한 결과를 보여줌으로 이러한 문제를 해결할수있다.
1) Semantic HTML
시맨틱 요소 : 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 갖고 있는 요소
=> 시맨틱 요소를 적절하게 사용하여 구성한 HTML = 시맨틱 HTML
시맨틱 HTML의 필요성
- 개발자간의 소통
시맨틱 요소 사용시 해당 요소의 의미와 기능을 빠르게 파악할 수 있기 때문에 소통이 원활해짐 - 검색 효율성
검색엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 중요도의 우선순위를 정할 수 있음 - 웹 접근성
나이, 성별, 장애여부, 사용환경과 관계없이 항상 동일한 수준의 정보를 제공할 수 있음
시맨틱 요소의 종류
| 요소 종류 | 설명 |
| <header> | 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다. |
| <nav> | 메뉴, 목차 등에 사용되는 요소입니다. |
| <aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다. |
| <main> | 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다. |
| <article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다. |
| <section> | 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다. |
| <hgroup> | 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다. |
| <footer> | 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다. |
자주 틀리는 마크업
- 인라인 요소 안에 블록 요소 넣기
- <b>, <i> 요소 사용 => <strong>, <em>으로 대체. 해당 태그들은 글씨에 효과를 주고 콘텐츠를 강조하는 의미를 부여함
- <hgroup>은 목차의 역할을 하고 콘텐츠의 상하관계를 표시함. 숫자가 작을수록 글자의 크기가 크다. h1이 가장 상위의 제목이 됨.
- <br /> 연속 사용. <br/>은 줄바꿈일뿐 요소 사이에 간격을 만들기 위한 목적이 되어서는 안된다.
- 인라인 스타일링 => 가급적 스타일링 속성은 style 요소를 사용하거나 CSS 파일을 따로 작성할것.
2) 크로스 브라우징
웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업.
브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능함.
=> 그럼에도 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하도록 해야함.
크로스브라우징 워크플로우
초기 기획
웹사이트의 콘텐츠와 기능, 디자인을 결정하고 타겟층을 설정한다. 타겟 고객층이 주로 사용하게 될 브라우저와 기기를 파악하고 여기에 맞는 기술을 사용해 개발한다.
개발
코드가 각 브라우저와의 호환성이 어떤지 파악하고 사용해아야한다. MDN과 Can I Use 등의 사이트에서 호환성을 확인할 수 있다. 크로스브라우징이 힘들경우 대체 수단을 마련해야한다. 또한 개발중인 웹사이트가 일부 구형 브라우저에서는 제대로 기능하지 않을 수 있음을 인지해야한다.
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
테스트 / 발견
- 안정적인 데스크톱 브라우저 - 크롬, 엣지, 파이어폭스, 오페라, 사파리 등
- 휴대폰 및 태플릿 브라우저 - 삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등
- 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트 진행
- Window, Linux, Mac 등 다양한 운영 체제에서 테스트 진행
직접 테스트를 수행하거나 크로스 브라우징 테스트 툴(TestComplete, LambadaTest, BitBar 등)을 이용해 테스트한다.
수정 / 반복
버그 발생 위치를 최대한 좁혀서 특정하고 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야한다.
섣불리 코드를 수정하면 다른 브라우저에서 버그가 발생할 수 있으므로 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다.
수정되면 3번 과정부터 반복한다.
2. SEO(Search Engine Optimization, 검색 엔진 최적화)
검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화 해주는 작업. 검색엔진에서 웹페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다.
On-Page SEO
페이지 내부에서 진행할 수 있는 SEO. 제목과 콘텐츠, 핵심 키워드 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
Off-Page SEO
웹사이트 외부에서 이루어지는 SEO. 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법.
웹 페이지 내용이나 구조와는 관계없음
1) SEO에 영향을 미치는 요소
(1) <title>
검색 결과창에서 제목에 해당하는 요소. <head>의 자식 요소로 작성된다.
<title> 요소의 내용에 따라서 검색 후 유입까지 유도할 수 있다. 제목이 너무 길거나 짧아서 사용자가 사이트를 파악하기 어렵다면 유입률이 떨어진다. 또한 핵심 키워드가 포함되면 상위에 노출될 확률이 높아지지만 같은 키워드를 반복함녀 검색시 불이익을 받을 수 있다.
(2) <meta>
메타 데이터(해당 웹 사이트에서 다루는 데이터)를 담는 요소. <head>의 자식 요소로 작성됨.
SEO를 위한 meta 요소
<meta name="속성값" content="내용" /><head>
<meta charset="UTF-8"> <!-- 문자 인코딩 방식 명시 -->
<meta name="keyword" content="code, js, javascript, react, blog"> <!-- 웹 페이지 관련 키워드 나열 -->
<meta name="description" content="해리의 개발 블로그"> <!-- 콘텐츠 설명 = 검색결과 제목 밑에 뜨는 내용 -->
<meta name="author" content="해리"> <!-- 콘텐츠 제작자 -->
<title>일단 하는 공부 로그</title>
</head>| name 속성값 | 설명 |
| description | 콘텐츠에 대한 간략한 설명. 예) 검색 결과에서 제목 밑에 뜨는 내용 |
| keywords | 웹 페이지의 관련 키워드들을 나열할 때 사용 |
| author | 콘텐츠 제작자 |
오픈 그래프(open graph)
페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었음. 각 속성값 앞에는 오픈 그래프를 뜻하는 og가 붙는다.
소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을때 뜨는 링크 미리보기와 관련된 정보등을 설정할 수 있다.
<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> 요소에 넣어주는 것도 도움이 된다.
단 똑같은 키워드만 반복해서 넣으면 역효과를 부를 수도 있으므로, 이미 사용한 핵심 키워드와 중복되지 않는 비슷한 키워드로 대체해서 사용하거나 관련 키워드들을 쭉 포함하는 것이 좋다.
(4) 콘텐츠
- 개성있는 브랜딩
- 복사 + 붙여넣기 금지
검색엔진이 중복 문서로 판정하여 검색 결과에서 생략할 가능성이 있다. - 간결한 제목과 설명글
- 최대한 글자로 작성하기
검색엔진은 이미지에 적힌 글을 읽을 수 없기때문에 글자로 적어도 될 내용을 굳이 이미지로 만들어 작성할 필요는 없다. 꼭 이미지를 넣어야 한다면 alt 속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다.
SEO 가이드
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
'study > TIL' 카테고리의 다른 글
| 23.03.06 - TCP/IP, 네트워크 계층 모델, HTTP, HTTPS (0) | 2023.03.06 |
|---|---|
| 23.03.02 ~ 03 - 웹 접근성, WAI-ARIA (0) | 2023.03.02 |
| 23.02.27 - Redux Middleware, Redux-Thunk (0) | 2023.02.27 |
| 23.02.24 - Redux (0) | 2023.02.24 |
| 23.02.23 - 상태 관리 (0) | 2023.02.23 |
