1. 웹 표준
1-1. 웹 표준이란?
W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’ 으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 말한다.
웹 표준을 지킨다 === HTML, CSS, JavaScript 등 웹사이트 제작에 사용되는 언어들의 표준과 가이드라인을 따른다!
웹 표준에 맞춰서 웹 페이지를 작성하는 것의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
1-2. Semantic HTML
Semantic HTML : 의미를 갖는 HTML 구조. 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실한 의미를 가진 Semantic 요소를 적절하게 사용하여 구성한 HTML.
Semantic HTML 을 사용하면 개발자간 소통에 용이하며, 검색 효율성과 웹 접근성이 높아진다.
주로 사용되는 시맨틱 요소의 종류
<header>, <nav>, <aside>, <main>, <article>, <section>, <hgroup>. <footer>...추가 시맨틱 요소 참고 사이트
MDN elements reference
MDN Semantics
1-3. 지양해야 할 마크업
1. 인라인 요소(<span>, <a> 등) 안에 블록 요소(<div>, <h1> 등) 넣기
인라인 요소는 항상 블록 요소 안에 들어가야 한다.
2. <b>, <i> 요소 사용하기
<b> 대신 —> <strong> 사용하기 : 글씨를 두껍게(매우 강조)
<i> 대신 —> <em> 사용하기: 글씨를 기울이기(강조)
3. <hgroup> 마구잡이로 사용하기
<h1>…<h6> 태그들은 목차 역할 및 콘텐츠의 상하 관계를 표시하기 위해 순서대로 사용하기
4. <br /> 연속으로 사용하기
<br /> 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소인데, 줄바꿈 목적이 아닌 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안 됩니다. 요소 사이에 간격이 필요한 경우에는 아예 별도의 단락으로 구별하거나(<p> 태그 사용) CSS 속성을 주어 여백을 조정해주어야 한다.
5. 인라인 스타일링 사용하기
웹 표준을 지키기 위해 HTML과 CSS 코드를 분리해서 작성해야 한다.
1-4. 크로스 브라우징
크로스 브라우징(Cross Browsing)
웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한(브라우저들의 렌더링 엔진이 각자 다르므로 동일한 화면을 만드는 것은 불가능함) 화면과 기능을 제공할 수 있도록 만드는 작업. 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것.
크로스 브라우징 워크 플로우
초기 계획 > 개발 > 테스트/발굴 > 수정/반복
1. 초기 기획
- 어떤 웹 사이트를 만들 것인지
- 어떤 콘텐츠와 기능이 있어야 하는지
- 디자인은 어떻게 할지
- 타겟 고객층은 누군지
- 타겟 고객층이 어떤 브라우저, 장치 등을 사용할지
- 그에 필요한 기술 검토하기
2. 개발
- 사이트 영역 분할 및 세분화로 개발의 여러 부분을 모듈 분할하기
- 모든 브라우저에서 가능한 호환될 수 있도록 작성하기
- 모든 브라우저에서 어떤 기능이 동일하게 작동하지 않는다는 점을 인정하고, 이에 대한 다양한 솔루션을 제공하기
- 일부 구형 브라우저에서는 사이트가 작동하지 않을 수도 있다는 사실 인정하기
3. 테스트 / 발견
각 기능의 구현 단계 후에 새 기능 테스트하기.
먼저 기능 작동을 중지시키는 코드에 일반적인 문제가 없는지 확인하기
- 안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트 진행
- 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트 진행
- 그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트 진행
- Window, Linux, Mac 등 다양한 운영 체제에서도 테스트 진행
- 키보드만 사용하여 사이트를 사용하거나 스크린 리더를 통해 사이트를 사용하여 탐색 가능한지 확인하는 등의 lo-fi 접근성 테스트를 수행합니다.
직접 테스트를 수행할 수도 있지만, 자동으로 테스트를 진행해주는 도구를 이용하는 것도 방법입니다. TestComplete, LambdaTest, BitBar, Selenium 등의 크로스 브라우징 테스트 툴이 있습니다.
4. 수정 / 반복
테스트 단계에서 버그가 발견시 수정해야 함.
- 버그가 발생하는 위치를 최대한 좁혀서 특정하기
(버그를 신고한 사람으로부터 플랫폼, 장치, 브라우저 버전 등 최대한 많은 정보를 얻으십시오. 유사한 구성(예: 다른 데스크톱 플랫폼에서 동일한 브라우저 버전 또는 동일한 플랫폼에서 동일한 브라우저의 몇 가지 다른 버전) 버그가 얼마나 광범위하게 지속되는지 확인) - 버그의 원인을 발견한 후에는버그가 발생하는 특정 브라우저에서의 해결 방법을 정하기
- 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 코드를 분기하여 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋음.
- 수정이 완료되면 3번의 테스트 프로세스를 반복하여 작동여부, 다른 위치/브라우저에서 사이트가 중단되지 않았는지 확인하기
참고사이트
MDN Introduction to cross-browser testing
MDN Debugging HTML
MDN Debugging CSS
MDN Troubleshooting JavaScript
2. SEO
SEO(Search Engine Optimization, 검색 엔진 최적화)
검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업. SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있음.
- On-Page SEO : 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
- Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법. 웹 페이지 내용이나 구조와는 관계가 없음.
SEO 에 영향을 미치는 On-Page 요소
1. <title> 요소
<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성한다.
<title>요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.<title>요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아지지만, 같은 키워드를 반복하면 검색시 불이익을 받을 수 있으니 제목에 핵심 키워드는 한 번만 포함시킨다.
2. <meta> 요소
<meta> 요소는 메타 데이터(해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터)를 담고 있는 요소. <meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적임.
검색 결과창에서 제목 밑에 따라오는 설명글이 <meta> 요소안에 들어있는 내용.
소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용.
| property 속성값 | 설명 |
|---|---|
| og:url | 페이지의 표준 URL입니다. |
| og:site_name | 사이트의 이름입니다. |
| og:title | 콘텐츠의 제목입니다. |
| og:description | 콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. |
| og:image | 미리보기로 표시될 이미지입니다. |
| og:type | 콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다. |
| og:locale | 리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다. |
- title :
<meta>-name속성을 사용하며, SEO를 위해서 사용하는 것이 목적. - meta 요소들 :
property속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적.
특히property속성을 사용하는 경우는 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었고 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙는다.
SEO를 위한 meta 요소
<meta **name**="속성값" content="내용" />주요 속성값은 다음과 같습니다.
description, keywords, author
오픈 그래프 (open graph)
<meta **property**="속성값" content="내용" />주요 속성값은 다음과 같습니다.
og:url, og:site_name, og:title, og:description, og:image, og:type, og:locale
3. <hgroup> 요소
<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높으며, 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급함.
이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋음
4. 콘텐츠
- 개성있는 브랜딩
- 복사 + 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성하기
참고사이트 :
Google - SEO 기본 가이드
Naver - 웹마스터 가이드
