웹? 인터넷?
둘은 무언가 비슷한 개념인 것 같다.. 하지만 엄연히 구분하자면 전혀 다른 의미이다.
🖥 인터넷
: 전세계적으로 연결된 컴퓨터 네트워크 통신망이고, 웹뿐만 아니라 여러 가지 미디어 콘텐츠를 포함한, 게임, 앱, 등 모든 서비스를 칭한다. 그중에 웹이 포함되어 있는 것이다. 조금 더 포괄적인 의미.
따라서
웹은, 하나의 공간으로 정의 할 수 있다.
여러 가지 정보들을 여러 사람들과 공유할 수 있는 공간이기 때문이다.
📍 웹 표준
: W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미한다.
예전 웹에선 브라우저마다 서로 호환이 잘 되지 않아서 정상적으로 UI가 동작하지 않는 일이 비일비재했다.
이런 상황을 막기 위해 브라우저 마다 다 따로따로 개발을 진행했어야 했다. 그 부분은 골칫거리로 작용되었고, 이러한 수고를 덜기 위해 웹 개발 형식을 통일 시킨것이 바로 이 웹 표준이다.
=> 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있게 하는 웹 페이지 제작 기법이다.
웹표준의 장점
- 유지보수 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
📍 Semantic HTML
Semantic HTML의 필요성
- 개발자 간 소통
- 검색 효율성
- 웹 접근성(여기서 접근성은 나이나 성별, 장애여부, 사용환경을 떠나 항상 동일한 수준의 정보를 제공할 수 있어야 한다.)
📍 크로스 브라우징
: 웹 사이트에 접근하는 브라우저 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업이다.
크로스 브라우징의 목표
: 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것!
크로스 브라우징 WorkFlow
1. 초기 기획
: 어떤 웹사이트를 만들지 정확하게 결정해야 한다.
1-1) 콘텐츠, 기능, 디자인을 어떤 식으로 할 것인지 결정해야 한다.
1-2) 해당 사이트를 이용할 고객이 누구일지 타깃팅 한다.
1-3) 고객이 사용할 브라우저가 무엇일지, 기기가 무엇일지 파악한다.
2. 개발
: 코드 작성 시 사용할 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 한다.
3. 테스트 / 발견
: 각 기능 구현 후엔 기능 테스트가 필요하다.
안정적인 데스크톱 브라우저에서 진행해 보기 -> 크롬, 엣지, 사파리, 오페라 등등
휴대폰 및 태블릿 브라우저에서 진행해 보기 -> 삼성인터넷, 사파리, 안드로이드 크롬
그 외 목표했던 브라우저가 있을 시 해당 브라우저에서 진행한다.
(window, mac, Linux 등 다양한 운영체제에서도 진행한다.)
✔️ 자동으로 테스트 진행을 도와주는 몇 가지 Tools : TestComplete , LambdaTest, BitBar
4. 수정 / 반복
: 테스트 시 버그 발생하면 수정이 필요하다.
버그 발생 위치를 최대한 좁혀 특정시키고, 그 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 한다.
조건문 작성을 통해 다른 코드를 실행하게 하는 방식으로 수정해 나아간다. 수정 완료 시엔 다시 3번을 실행한다.
SEO
on-Page SEO :
페이지 내부에서 진행할 수 있는 SEO
제목, 콘텐츠, 핵심키워드 배치, 효율적인 HTML요소 사용법 등을 이용하는 방법이다.
off-Page SEO :
페이지 외부에서 이뤄지는 SEO
소셜미디어 홍보나 백링크(타 사이트로 연결되는 링크)등을 이용하는 방법이다.
웹 페이지 내용과 구조와 관계는 없으며, 광고비를 지불하여 검색 결과를 상위에 위치시키게 많이 한다.
