이전에 페어 프로그래밍을 했던 파트너 중에 웹 퍼블리셔분이 있었다. 웹 퍼블리셔라는 직업이 우리나라에만 있다고 들은 것 같은데.. 웹 퍼블리싱이 뭔지 찾아보니 프론트 개발 과정에서 서버 인터렉션을 제외한 구조를 짜고, 스타일을 입히는 일이라고 정리할 수 있었다.
🖥 웹 퍼블리싱 ?
디자이너가 구상한 웹 디자인을 구조화하여 웹상에서도 볼 수 있도록 코딩하고 관리하는 것을 말한다.
웹 퍼블리싱은 페이지 구조부터 디자인 표현과 사용자 경험까지 고려하며 작업해야하고, HTML, CSS, 웹 표준, 웹 접근성에 대한 이해가 높아야한다. 설계 및 디자인을 보면서 코드로 나타내는 것이기 때문에 구조화하고 동작하는 방식에 대한 판단이 필요하다. 참고
그렇다면 웹 표준과 웹 접근성은 무엇일까 ?? 🙋🏻♀️
결론적으로 정리하면 웹 접근성, 웹 표준, 웹 호환성 모두 조건과 환경에 상관없이 모든 브라우저 환경에서 똑같이 작동할 수 있도록 만드는 데에서 기반한 개념들이다.
웹 표준 (Web Standards)
웹 표준을 잘 알고 지키는 것은 웹 접근성을 준수하는 것이다.
웹 접근성이란 ?
웹 사이트에서 제공하는 정보를 신체적 차이, 장애 여부, 지식의 정도, 기술 등에 제한없이 사용자가 동등하게 이용할 수 있도록 보장하는 것을 의미한다.
사용자가 어떤 브라우저나 기기를 사용하더라도 내용을 동일하게 볼 수 있도록 W3C가 권고한 표준안에 따라 웹 사이트를 만들어야 한다. 이 때 표준적으로 사용되는 기술이나 규칙을 웹 표준이라 한다. 웹 표준에서는 HTML, CSS, JS 등 구조와 표현, 동작을 분리시키기를 권고한다.
웹 표준의 장점
- 수정 및 운영관리 용이
- 접근성 향상
- 검색엔진 최적화
- 파일 사이즈 축소, 서버 저장 공간 절약
- 효율적인 마크업
- 호환성 가능
웹 호환성 (Cross Browsing)
웹 브라우저 버전 및 종류와 관계없는 웹 사이트 접근할 수 있어야 한다는 개념이다.
HTML을 처음 공부했던 날 vscode에 DOC을 치고 tab을 눌렀을 때 생성됐던 <!DOCTYPE> 이 생각났다.
찾아보니 이는 Document Type의 약자로, HTML이 어떤 버전으로 작성 되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해 주는 것이었다.
<!DOCTYPE> 으로 선언하는데 이걸 해 주지 않으면 호환 모드(quirks mode) 로 동작하여 웹 호환성에 좋지 않으며, 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 웹 호환성(Cross Browsing) 이슈가 심해질 수 있다.
웹 표준 준수는 최적화된 검색엔진에 도움이 된다. 그렇다면 SEO (aka. 검색엔진최적화) 란 무엇이고, 어떻게 검색엔진을 최적화 할 수 있을까??
SEO Search Engine Optimization : 검색엔진 최적화
HTML tag 를 의미론적으로 잘 쓰는 것은 검색엔진 최적화의 기본이 된다.
-
title태그를 이용하여 페이지의 제목을 나타낸다. 이는 검색엔진에서 제목을 나타낸다. -
meta태그를 사용하여description,keywords,author,subject,classification등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용한다.
meta tag에서description을 사용할 때 한 두개의 문단이나 짧은 단락을 사용할 수 있다 -
url을 컨텐츠의 내용을 잘 표현하는 것으로 이용하면 좋다.
- 불필요한 매개변수와 세션id가 있는 긴 url 사용 x
- 일반적인 페이지 이름, 예를 들면
page.1혹은 너무 긴 파일 이름 x
-
특정 문서에 도달하기 위한 한 가지 형태의 url을 제공한다. 같은 컨텐츠가 여러개의 주소를 갖는 것은 좋지 않다.
<link rel="canonical" href="http://localhost/1.html" />
-
사이트 내에서 이동하기 쉽게 만들기
- 사이트 이동은 하이퍼텍스트 이용
-
보다 나은 앵커 텍스트 작성
여기를 클릭하세요와 같은 일반적인 앵커텍스트 사용 x- 컨텐츠와 관련없는 텍스트 사용 x
- 페이지 url 을 앵커텍스트로 사용 x
-
img tag는alt를 꼭 작성하기 : 이는 스크린리더 동작에도 도움이 되며, 부득이하게 이미지가 열리지 않았을 때 보여질 수 있다.
웹 접근성 참고자료
웹 표준 참고자료
standards 이미지 출처
SEO 이미지 출처
SEO 참고자료 | 생활코딩
썸네일 이미지 출처
