[React]웹 표준을 준수하며 개발하는 방법

💻웹(Web)/React

[React]웹 표준을 준수하며 개발하는 방법

stonesy 2023. 8. 28. 23:24

728x90

이것저것 정보를 찾다 보면 "웹 표준"이라는 용어가 자주 등장하는데, 항상 그 의미를 완벽히 이해하지는 못하고 넘어갔었다. 개강 전에 시간이 조금 남은 지금, “웹 표준”에 대해서 공부하고 정리해보았다!😀

🔎웹표준이란?

웹 표준(Web Standard)는 W3C에서 사용되는 기술과 프로토콜에 대한 규칙과 권고안의 모음을 말한다. 웹 표준은 웹 페이지와 웹 애플리케이션을 개발하고 구현하는데 일관성을 제공하며, 다양한 웹 브라우저와 장치에서 동일한 방식으로 작동하도록 보장하는 역할을 한다. 즉, 웹 표준에 따라 개발된 웹 사이트는 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라고 웹 페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다. 따라서 웹 표준의 준수는 웹 접근성 준수를 위한 핵심이다.

*웹 표준 가이드라인: https://www.w3.org/standards/

웹 접근성

W3C의 정의에 따르면 웹 표준은 접근성, 사생활 보호, 보안, 국제화의 측면에서 고려해야 한다. 특히 이중에 접근성을 흔히 “웹 접근성”이라고 한다.

웹 접근성은 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹 페이지를 이용할 수 있어야 한다는 것을 의미한다. 예를 들어, 눈으로 화면을 볼 수 없는 시각장애인의 경우 스크린 리더라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹 페이지에 담긴 정보를 이해한다. 이때, 메뉴라는 텍스트 대신 메뉴라고 그려진 이미지를 사용할 경우 비시각장애인의 눈에는 메뉴라고 인식가능하지만 소프트웨어의 입장에서는 그저 이미지일 뿐이기 때문에 그 이미지 안의 내용을 시각 장애를 가진 사람에게 전달이 불가능하다. 따라서 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 이미지가 어떤 내용인지 아래와 같이 설명을 추가해야 한다.

<button>
	<img src="/images/button__menu.jpg" alt="메뉴 버튼" />
</button>

🔎웹 표준을 준수하는 방법

웹 표준 관련 기술로는 구조-(X)HTML, 표현-CSS, 동작-JavaScript 등이 있다.

1. DOCTYPE 선언

웹 페이지의 최상단에 DOCTYPE를 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하지는지 명시한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML !DOCTYPE declaration</title>
</head>
<body>
    <p>이 문서는 HTML 문서입니다.</p>
</body>
</html>

2. 시맨틱 태그 사용

시맨틱 태그는 HTML5에서 새로 추가된 태그로 <header>, <nav>, <section>, <article>, <footer> 등의 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다.

✔️<header>

: 페이지나 일부분의 머리말 부분을 지정

: <header>안에 <h1>~<h6>태그를 사용하여 제목을 구분하면 시멘틱 마크업을 할 수 있다.

: 웹 사이트의 주요 제목은 <h1> 태그로 작성하고, 그 아래의 섹션 제목은 <h2> 등의 태그를 사용한다.

✔️<footer>

: 페이지나 일부분의 꼬리말 부분을 지정

✔️<nav>

: 페이지의 네비게이션 부분을 지정

: 사이트의 주요 탐색 부분을 <nav> 안에 배치하여 사용자가 사이트 구조를 이해하고 콘텐츠로 빠르게 이동할 수 있도록 한다.

✔️<section>

: 페이지의 일부분을 지정

: 한 <section>은 독립적인 콘텐츠 블록을 나타내며, 제목을 가질 수 있다.

✔️<article>

: 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용

⇒예를 들어, 웹 페이지에서 하나의 뉴스기사는 <article>로 표시할 수 있다. 이 기사를 독립적으로 다른 곳에 포함시키거나 재사용할 수 있기 때문이다. 그리고 기사 목록을 각각의 <section>으로 구성할 수 있다.

3. CSS 스타일 시트 사용

CSS 스타일 시트를 사용하여 디자인과 레이아웃을 분리하고, 웹 페이지의 내용과 디자인을 분리하여 유지보수 및 확장성읖 높일 수 있다.

4. 웹 접근성 고려

웹 페이지를 만들 때 모든 사용자가 쉽게 접근할 수 있도록 웹 접근성을 고려해야 한다. 예를 들어, 시각 장애인이 스크린 리더를 사용하여 웹 페이지를 읽을 수 있도록 alt 속성을 사용하여 이미지에 대한 설명을 제공하거나, 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등의 세심한 작업이 필요하다.

*alt 속성

<img src="example-image.jpg" alt="색상풍경 이미지: 해질녘 노을이 비치는 해변 풍경">

*tabindex 속성

tabindex 속성은 HTML 요소의 탭 키(Tab Key) 순서를 지정하는데 사용되는 속성이다.

<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="2">
<input type="submit" value="Submit" tabindex="3">

🔎웹 표준의 장점

1. 웹 페이지의 호환성

웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 일관적으로 표시되게 된다. 이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있어 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.

2. 검색 엔진 최적화(SEO)

웹 표준을 준수하면, 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있다. 이를 통해 더욱 높은 검색 결과를 얻을 수 있다.

3. 유지보수 및 확장성

웹 표준을 준수하면, 웹 페이지를 만드는데 필요한 시간과 비용을 줄일 수 있어 유지보수 및 확장성이 좋아진다. 또한 논리적이고 효율적으로 작성된 웹 문서를 코드의 양이 줄어 파일 크기가 줄고 서버 부담의 감소로 이어진다.

4. 웹 접근성 향상

웹 표준을 준수하면, 모든 사용자가 쉽게 웹 페이지에 접근할 수 있도록 웹 접근성을 고려할 수 있다. 예를 들어, 다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상되고 크린리더 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 도움을 준다.

✨요약하면 웹표준이란 접속자에 상관없이 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하기위한 권고안의 모음이라고 할 수 있고, 웹 표준을 준수하는 개발방법은 적절한 시맨틱 태그를 사용하고 웹 접근성을 고려해 개발하는 것이다.✨

🔎출처/참고

https://inpa.tistory.com/entry/WEB-📚-웹-표준의-이해

https://cocobi.tistory.com/170

https://helloworld-88.tistory.com/96

728x90

'💻웹(Web) > React' 카테고리의 다른 글

[React]Firebase로 React 배포하기, Mixed-Content 에러 (1)	2023.09.03
[React]Netlify로 React 배포하기: 새로고침, API 연결 에러 해결방법 (0)	2023.09.01
[React]React 프로젝트에 CSS 적용하는 방법(Nomad Coders 강의 정리) (0)	2023.08.15
[React]Themes를 이용한 일관성 있는 스타일 관리 (0)	2023.06.17
[React]CORS 에러 (0)	2023.06.16

현재글[React]웹 표준을 준수하며 개발하는 방법

https://github.com/seoyoung927

250x250

Today :
Yesterday :

stonesy