웹 표준
웹 표준의 개념
웹은 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간을 말한다. 웹 표준은 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙으로 사용자가 사용하는 어떤 운영체제나 브라우저에 상관없이 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 말한다. 웹 개발에서 사용되는 언어는 HTML, CSS, JavaScript 등의 기술을 다루며 각각 화면의 구조, 표현, 동작을 담당한다.
최신 웹 브라우저(크롬, 엣지, 사파리, 오페라, 파이어폭스 등)는 모두 웹 표준을 지원하며 웹 표준에 맞춰서 작성한다면 브라우저 호환으로 발생되는 문제 상황을 방지할 수 있어서동일한 결과물을 볼 수 있다.
▷ 유지 보수의 용이성
각 영역이 분리되면서 유지 보수가 용이해지고 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생긴다
▷ 웹 호환성 확보
웹 표준을 준수하여 제작하면 웹 브라우저의 종류, 버전, 운영 체제, 사용 기기 종류에 상관없이 동일한 결과가 나온다
▷ 검색 효율성 증대
웹 표준에 맞춰서 웹 사이트를 작성하면 검색 엔진에서 높은 우선 순위로 노출될 수 있으므로 홍보를 위한 비용이 없어도 검색의 효율성을 높일 수 있다
▷ 웹 접근성 향상
웹에 접근할 수 있는 다양한 환경과 사용자에 맞춰서 웹 페이지를 개발하는 일은 쉽지 않지만 웹 표준에 맞춰서 개발하면 문제를 해결할 수 있다.
Semantic HTML & 자주 틀리는 마크업
semantic : 의미가 있는 + HTML : 화면의 구조를 만드는 마크업 언어
➡ 시맨틱 HTML은 HTML이 의미있는 구조를 만들겠다는 의도가 담겨있다. 시맨틱 요소로 화면을 구성하면와 요소로 화면을 구성했을 때 어떤 역활을 하는지 알 수 없었던 내용들을 어떤 내용을 담고 있는지, 어떤 기능을 하는지에 대해서 더욱 명확하게 알 수 있다.
시맨틱 HTML의 필요성
▷ 개발자간 소통
시맨틱 요소를 사용하면 각 요소가 어떤 기능을 하는지 주석을 작성하거나 id나 class를 사용하여 표기하지 않아도 각 요소들이 어떤 기능을 하는지 파악할 수 있어 설명하는 시간이나 협의해야 할 부분들이 줄어들게 된다.
▷ 검색 효율성
검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. 시맨틱 요소를 사용하여 어떤 요소가 더 중요한지 우선 순위를 정할 수 있고 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하므로 검색 엔진에 더욱 자주 뜨게 만들 수 있다
▷ 웹 접근성
나이, 성별, 장애 여부, 사용 환경과 상관없이 항상 동일한 수준의 정보를 제공할 수 있어야 한다는 것으로 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달할 수 있어서 웹 접근성을 향상시킬 수 있다.
시맨틱 요소의 종류
<header> - 페이지의 요소나 최상단에 위치하는 머릿말 역활의 요소
<nav> - 메뉴, 목차 등에 사용되는 요소
<aside> - 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
<main> - 문서의 메인이 되는 주요 콘텐츠를 담는 요소
<article> - 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소이며 웹에서 실제로 보여주고 싶은 내용, 각각의 <article>을 구분하기 위한 수단으로 제목 <hgroup>을 포함하는 방법을 사용
<section> - 문서의 독립적인 구획을 나타내며 제목 <hgroup>을 포함하는 방법을 사용
<hgroup> - <h1> ~ <h6>으로 제목을 표시할 때 사용하는 요소
<footer> - 페이지나 요소의 최하단에 위치하는 꼬릿말 역활의 요소
자주 틀리는 마크업
▷ 인라인 요소 안에 블록 요소 넣기
인라인 요소는 콘텐츠가 차치하는 만큼만 영역을 차지하고 블록 요소는 가로로 넓게 화면 영역을 차지한다, 인라인 요소는 항상 블록 요소 안에 들어가야 하며 반대의 경우는 있을 수 없다. 대표적인 인라인 요소는 <span>, 블록요소는 <div>가 있다
▷ <b>, <i> 요소 사용
글씨를 굵게 만드는 <b>요소와 글씨를 기울일 때 사용하는 <i>요소는 웹 표준을 준수하기 위해서 사용하지 않는 것이 좋으며 콘텐츠에 의미를 부여하는 <strong>요소와 <em>요소를 사용하는 것이 좋다
▷ <hgroup> 마구잡이로 사용
<hgroup>요소들은 목차의 역활과 콘텐츠의 상하 관게를 표시하기 위해서 사용하는데 글자에 스타일 속성을 적용하기 위한 목적으로 사용한다면 사용자에게 잘못된 화면 구조 정보를 전달하게 된다
▷ <br /> 연속으로 사용
텍스트 흐름에 줄 바꿈을 하기 위해서 사용하는 요소인데 요소 사이의 간격을 만들기 위해서 남발해서는 안된다. 요소의 간격이 필요한 경우에는 별도의 단락으로 구별하거나 CSS 속성을 사용하여 여백을 주는 것이 좋다고 볼 수 있다
▷ 인라인 스타일링 사용
웹 표준으로 HTML, CSS, JavaScript 등의 영역이 분리되어 얻게 되는 여러 이점들을 다시 합치는 것과 같으므로 코드를 분리해서 작성해주는 것이 좋다
크로싱 브라우징 (Cross Browsing)
크로스 브라우징은 웹 사이트에서 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다. 모든 브라우저에서 똑같은 화면이 보이도록 만드는 것이 아니라 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있다.
크로스 브라우징 워크 플로우
▷ 초기 기획
초기 기획 단계는 어떤 웹 사이트를 만들 것인지 정확하게 결정해야 하며 필요한 콘텐츠와 기능, 디자인, 사이트의 고객, 고객이 사용하는 브라우저와 기기가 무엇일지 고민이 필요하며 여기에 맞는 기술을 사용해서 개발할 수 있도록 기획해야 한다.
▷ 개발
코드를 작성할 때 코드가 브라우저에서의 호환성에 대해서 파악하고 사용해야 한다. 코드를 작성할 때 크로스 브라우징이 힘든 상황을 파악하고 대체 수단을 마련해야하며 일부 오래된 브라우제어서는 기능을 제대로 할 수 없다는 부분에 대해서 알고있어야 한다. ( 코드의 호환성 확인 - MDN, Can I Use )
▷ 테스트 / 발견
각 기능을 구현한 후에 기능에 대한 테스트가 필요하며 직접 테스트를 수행할 수도 있고 TestComplete, Lambda Test, BitBar 등의 크로스 브라우징 테스트 툴을 이용하여 진행할 수 도 있다.
- 안정적인 테스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트를 진행
- 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트를 진행
- 초기 기획 단계에서 목표했던 다른 브라우저가 있다면 해당 브라우저에서도 테스트를 진행
- Window, Linux, Mac 등 다양한 운영 체제에서 테스트를 진행
▷ 수정 / 반복
테스트 단게에서 버그를 발견시 수정이 필요하며 버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 한다. 조건문을 작성해서 다른 코드를 실행하는 방식으로 고쳐나간다며 다른 브라우저에서 버그가 발생될 수 있는 상황을 줄일 수 있으며 수정이 완료되면 테스트 / 발견 과정을 반복한다.
=> 웹 페이지를 개발할 때 웹 표준만 잘 지켜서 작성해도 크로스 브라우징을 어느 정도 실현할 수 있으므로 웹 표준에 맞게 코드를 작성하는 것이 얼마나 중요한지 인지하고 있는 것이 중요하다.
참고자료
https://caniuse.com
https://developer.mozilla.org/ko
SEO (Search Engine Optimization / 검색 엔진 최적화)
1. SEO
SEO는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업으로 검색 엔진에서 웹 페이지를 상위에 노출될 수 있도록 도와준다.
▷ On-Page SEO
폐이지 내부에서 진행할 수 있는 SEO
제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
▷ Off-Page SEO
웹 사이트 외부에서 이루어지는 SEO
소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법
웹 페이지 내용이나 구조와는 관계가 X
2. On-Page SEO
<title> 요소
검색 결과창에서 제목에 해당하는 요소이며 <head> 요소의 자식 요소로 작성한다.
<title> 요소에 작성하는 내용에 따라 검색 후 유입까지 유도할 수 있으며 사용자가 사이트를 파악하기 어렵지 않도록 제목을 너무 길거나 짧게 작성하지 않는게 좋다. 핵심 키워드가 포함되면 상위 노출 확률이 높아지며 같은 키워드를 반복해서 검색시 불이익을 받지 않도록 해야한다.
<meta> 요소
해당 웹 사이트에서 다루고 있는 데이터가 무엇인지 메타 데이터를 담는 요소이며 보통 <head>요소의 자식 요소로 작성한다. <meta> 요소에 들어가는 내용은 검색 결과창과 소셜 미디어나 애플리케이션 등에서 링크를 공유할 때 링크 미리보기를 통해서도 확인할 수 있다.
▷ SEO를 위한 meta 요소
<meta name="속성값" contente="내용" />description - 콘텐츠에 대한 간략한 설명, 검색 결과에서 제목 아래에 뜨는 내용
keywords - 웹 페이지의 관련 키워드들을 나열할때 사용
author - 콘텐츠의 제작자를 표시
▷오픈 그래프 (open graph)
오픈 그래프는 다른 사람에게 공유하기 위한 목적이며 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들어졌다. 해당 페이지에 방문자 수가 많다면 검색시 상위에 노출될 확률이 높아지므로 오픈 그래프가 SEO와 연관이 없는 것이 아니며 링크 공유를 통해 방문자 수를 늘릴 수 있다.
<meta property="속성값" content="내용" />og:url - 페이지의 표준 URL
og:site_name - 사이트의 이름
og:title - 콘텐츠의 제목
og:description - 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용
og:image - 미리표기로 표시될 이미지
og:type - 콘텐츠 미디어의 유형. 기본 값은 website로, video, music 등의 유형을 표시
og:locale - 리소스의 언어. 기본값은 en_US, 한국은 ko_KR
▷ <hgroup> 요소
콘텐츠의 제목을 표시하는 용도로 핵심 키워드를 포함하고 있을 가능성이 높으며 검색엔진도 중요하게 취급합니다.
콘텐츠를 작성할 때 핵심 키워드를 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.
하지만 키워드를 반복해서 넣는 것은 역효과를 불러올 수 있으니 주의해야 한다.
▷ 콘텐츠
개성있는 브랜딩
➡ 아이디어나 이름이 타 사이트와 겹치지 않는다면 관련 키워드를 검색했을 때 웹 사이트가 상위권에 올라갈 수 있는 가능성이 높아진다.
복사+붙여넣기 금지
➡ 타 사이트의 글을 복사해서 사용할 경우에는 검색 엔진이 중복 문서로 판정하여 검색 결과에서 생략되는 일이 발생할 수 있으므로 그대로 붙여 넣기 하는 방식의 콘텐츠를 작성하는 것은 지양해야한다.
간결한 제목과 설명글
➡페이지 제목과 설명글에 많은 정보를 적어 넣는다고 검색이 잘 되는 것이 아니며 반복해서 작성할 경우 최악의 경우에는 스팸 요소가 있는 사이트로 분류될 가능성도 있다. 방문자가 방문했을 때 전혀 다른 키워드로 접근하였을 경우 않좋은 이미지를 갖게 될 수 도 있으니 주의해야한다.
최대한 글자로 작성
➡검색 엔진은 이미지를 읽을 수 없으므로 글자로 적어도 될 내용을 이미지로 넣는 것은 SEO에 도움이 되지 않는다. 꼭 이미지를 넣어야 할 경우에는 alt속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋으며 너무 길게는 작성하지 않는게 좋다.
참고자료
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
https://searchadvisor.naver.com/guide
