웹 표준
: 인터넷으로 연결된 환경에서 다양한 사용자들이 소통하고 정보를 공유하는 공간인 웹을 설계할때 표준적으로 사용되는 기술과 규칙
웹 표준의 장점
-
유지 보수 용이
: 웹 표준을 사용하면서 웹 설계를 위한 각각의 영역이 분리돼 정리되었으며, 지속적으로 유지보수하면 클린코드 작업이 이루어져 코드의 경량화 부분이 개선되어 비교적 가볍고 편리하게 보수가 가능해졌음 -
웹 호환성 유리
: 브라우저의 종류 및 버젼, os 종류와 상관없이 동일한 표준을 지키며 설계함으로, 다양한 환경에서 호환되도록 설계 가능 -
검색 효율성 증대
: 웹 표준 준수시 웹 검색 엔진이 주는 점수에 높은 점수를 가져갈 수 있어 검색 환경에서 유리해짐 -
웹 접근성
: 웹 호환성가 마찬가지로 os, 브라우저와 같은 다양한 환경에 맞추어 독립적으로 설계하지 않고, 동일하게 웹 표준에만 맞추어 설계해 종속적이 않은 웹을 설계해 사용자의 접근성을 향상-만족 시킴
Semantic HTML
: HTML을 설계하며 사용되는 요소에 의미를 부여 구조를 설계하는 방법으로 개발,검색, 접근성 등의 부분에서 긍정적인 효과를 기대할 수 있음
Semantic HTML 필요성
-
개발자간 소통
: 요소간의 의미를 부여해 해당 요소안의 구조와 기능해 대해 미리 생각하고 표현할 수 있어, 개발자간의 소통의 복잡도를 줄이고 직관성을 올려줌 -
검색 효율성
: 검색 엔진의 입장에서 시멘틱 요소를 찾아 해당 요소의 중요성과 기능을 짐작하고 관련 정보를 빠르게 찾아 우선순위 점수를 주기 때문에 효율성이 올라옴 -
웹 접근성
: 시멘틴 요소를 사용해 설계 시 사용자 및 환경적인 특징에 따라서도 기능적으로 최대한 많이 사용할 수록 설계할 수 있음 (ex 시멘틱 요소를 찾아 중심 정도를 시작장애인분들에게 읽어주는 스크린리더, 키보드로만 웹 사용하기)
마크업 요소 맞게 사용하기
-
Inline vs Block
: 블록요소는 가로 영역 전체를, 인라인 요소는 콘텐츠가 차지하는 영역 만큼을 차지하는 요소로, 블록요소가 인라인 요소안에 위치하면 안됨 -
<b> -> <strong> , <i> -> <em>
: 위의 요소 뿐만 아니라도 시멘틱 의미를 가지지 않는 요소를 같은 기능을 하는 시멘틱 요소로 대체해 사용할 것을 권장 -
<hgroup>사용 유의점
: h 요소를 사용할 때, 글씨 크기를 조절하기 위해 사용하는 것이 아닌, 구조 및 의미적으로 분기가 되는 점으로 나타내기 위해, 즉 정확한 구조를 표현하고 설계하기 위해 사용해야함 -
<br>텍스트 환경에서만 사용하는 것을 권장 (내가 많이 하던 실수)
: 텍스트가 아닌 요소간의 간격등 스타일 적인 영역에서 사용하는 것은 적적한 요소 사용이 아님, 앞의 경우 css를 사용할 것 -
Html과 CSS를 분리해서 구성하기
: inline 환경에서, html 환경에서 style를 조정할 경우 영역 분리를 통해 개발 협업과 시스템적인 이점이 반감됨
Cross 브라우징
: 다양한 브라우저에서 웹을 사용해도 모두 동등한 수준의 기능과 정보를 제공할 수 있도록 설계하는 것
-
Cross 브라우징 Work flow
기획 -> 개발 -> 테스트 -> 수정/반복
중요 포인트
- 개발 단계에서 사용하는 코드들을 사용할 때 브라우저 호환경을 확인하며 설계해야함 (Mdn 같은 곳에서)
- 수정시, 버그 발생의 위치와 환경을 최대한 특정하고 해당 특정 환경에서는 다르게 동작하도록(if문 같은거 사용) 구현해야함
SEO
: Search Engine Optimization의 약자로, 검색 엔진의 동작 방식에 맞춰 최적화로 설계해 검색 환경에서 높은 우선순위를 가져할 수 있도록 하는 것
-
On-Page SEO
: 페이지 내부에서 검색엔진 노출에 유리하도록, 시멘트로 요소로 설계하고 HTML 구조를 구성하는 등의 작업을 하는 SEO 방식 -
Off-Page SEO
: 페이지 외부에서 검색엔진 노출에 유리하도록, SNS 홍보, 백링트 설계등의 방법을 사용하는 SEO 방식
On-Page SEO
-
<title>요소
- 검색 결과창에서 제목에 해당하며,<head>의 자식으로 위치함
- 핵심 키워드를 사용해 적절한 길이의 내용으로 작성해야함 -
<meta>요소
- 해당 웹에서 다루는 콘텐트 데이터를 가지는 요소로 요약정보 역할을 하며, 보통<head>의 자식으로 위치함<meta>를 사용하는 대표적인 2가지 방식
<meta name="속성값" content="내용" />페이지 정보
- name = 'description' , content = '상세설명 정보'
- naem = 'keywords', content = '키워드 정보'
- name = 'author' , content = '저자 정보'
<meta property="속성값" content="내용" />콘텐츠 정보
- property = 'og:url', content = '페이지 url'
- property = 'og:site_name', content = '사이트 이름'
- property = 'og:title', content = '콘텐츠 제목'
- property = 'og:description', content = '상세설명 정보'
- property = 'og:image', content = '미리보기 이미지 정보'
- property = 'og:type', content = '콘텐츠 타입 정보(website, music, video)'
- property = 'og:locale', content = '리소스 언어 정보'
-
<hgroup>요소
- 콘텐츠들의 제목, 부제목을 나타냄
- 핵심 키워드를 사용해 적잘한 개수만 사용해야함 -
개성있는 콘텐츠 다루기
웹 접근성
: 접근에 제한이 있을 수 있는 상황의 사용자 또한 웹에 접근해 사용할 수 있도록 지원하는 정도
- 웹 접근성을 확보해 다양한 환경에서의 다양한 사용자를 확보해 웹을 사용률을 높히고 사회적 이미지 또한 화곱할 수 있음
한국형 웹 콘텐츠 접근성 지침 2.1
인식의 용이성
: 모든 콘텐츠에 대해 사용가 용이하게 인식 할 수 있어야함
-
적절한 대체 텍스트
:콘텐츠 제공에 문제가 있을 때를 대비해 콘텐츠를 설명할 수 있는 대체 텍스트 요구 -
자막 제공
: 멀티미디어 콘텐츠에 대해 자막,원고,수화등을 요구 -
색에 무관한 콘텐츠 인식
: 테두리, 레이블 등을 통해 색이 없어도 콘텐츠를 인식할 있도록 제작 요구 -
명확한 지시사항 제공
: 지시사항을 모양, 크기, 위치, 방향, 색, 소리등에 무관하게 인식할 있도록 제작 요구 -
텍스트 콘텐츠 명도 대비
: 텍스트 콘텐츠와 배경간의 명도 대비는 4.5 대 1 이상이어야 함 -
자동 재생 금지
: 스크린 리더와 같이 소리가 자동으로 재생됨에 따라 사용자의 콘텐츠 사용헤 방해가 될 수 있음을, 자동 재생 금지 요구 -
콘첸츠 간 구분
: 콘텐츠간 구분을 명확하게 해야함 (스타일 활용)
운용의 용이성
: 사용자가 인터페이스 구성요소를 사용 및 이동가능하며 조작가능해야함
-
키보드 사용 보장
: 키보드로 콘텐츠 네비게이트 가능해야함 -
초점 이동
: 초점이동이 명확하게 보여야하고 가능해야함 -
조작 가능
: 입력 및 컨트롤이 사용가능해야함 -
응답 시간 조절
: 시간 제한 콘텐츠에 대한 조절 가능 -
정지 기능 제공
: 움직이고 변경 되는 콘텐츠의 경우 조절 가능 해야함 -
깜빡임 및 번쩍임 제한
: 초당 3-50 회 주기로 깜빡이는 콘텐츠는 사용자에 제공 되면 안됨(의료적으로도 안좋을수 있음) -
반복 영역 건너뛰기
: 반복 콘텐츠의 경우 건너뛰기 기능 제공해야함 -
제목 제공
: 적절한 제공을 제공해야함 -
적절한 링크 텍스트
: 링크가 걸려있는 텍스트의 링크의 용도와 기능을 설명해야 함
이해의 용이섬
- 기본 언어 표시
- 사용자 요구에 따른 실행
- 콘텐츠 선형 구조
- 표의 구성레이블 제공
- 오류정정
견고성
- 마크업 오류 방지
- 웹 애플리케이션 접근성 준수
