지난 글에서 HTML과 CSS에 대한 개념들을 비롯해 간단하게 정리하며 공부해보았다.
오늘은 더 잘 이해하기 위한 웹 접근성과 웹 표준, 그리고 검색 엔진 최적화(SEO)에 대해 알아보고, HTML과 CSS를 공부하고 실습을 진행하며 생긴 의문들을 해결해볼 것이다.
먼저 웹 접근성에 대해 알아보자.
1️⃣ 웹 접근성(Web Accessibility)이란?
장애 유무, 나이, 환경 등에 관계없이 모든 사람이 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 보장하는 것
✅ 예시
- 시각장애인: 화면 읽기 프로그램(Screen Reader)을 사용함
- 청각장애인: 자막이나 텍스트 대체가 필요함
- 색약 사용자: 색상만으로 의미를 전달하면 안 됨
- 노인, 저사양 기기 사용자: 글씨가 크고 명확해야 함
즉, 누구나 웹을 사용할 수 있도록 만드는 것이 바로 접근성의 목적이다.
2️⃣ 웹 접근성의 4원칙 (WCAG의 핵심)
웹 접근성 표준인 WCAG(Web Content Accessibility Guidelines)는 아래와 같이 4가지 원칙으로 구성돼 있다.
| 원칙 | 설명 | 예시 |
| 1. 인지 가능(Perceivable) | 콘텐츠를 감각적으로 인식할 수 있어야 함 | 대체 텍스트 제공, 자막 제공 |
| 2. 운영 가능(Operable) | 모든 기능을 키보드로도 조작 가능해야 함 | 키보드만으로 메뉴 이동 |
| 3. 이해 가능(Understandable) | 사용자에게 친숙하고 예측 가능해야 함 | 에러 메시지 제공, 논리적 순서 |
| 4. 견고함(Robust) | 다양한 기기와 보조 기술에서도 잘 작동해야 함 | 표준 마크업 사용, ARIA 사용 |
누구나 웹 컨텐츠를 만들때 우선 순위의 최우선에 웹 접근성을 높여야 한다는 것을 염두에 둘 것이다.
그렇다면 어떻게해야 웹 접근성을 높일 수 있을 것인가를 생각해보자. 웹 접근성을 높이는 방법은 여러 방법이 있겠지만 우선 HTML에서 웹 접근성을 높이는 방법에 대해 알아볼 것이다.
3️⃣ HTML에서 웹 접근성을 높이는 방법
✅ 1) 시맨틱 태그(Semantic HTML) 사용
구조와 의미를 명확하게 표현하는 HTML 태그
| 의미 | 좋은 태그 | 안 좋은 태그 |
| 제목 | <h1>~<h6> | <div class="title"> |
| 내비게이션 | <nav> | <div class="nav"> |
| 본문 | <main>, <section>, <article> | <div> |
| 푸터 | <footer> | <div> |
➡ 시맨틱 태그는 스크린 리더나 검색 엔진이 의미를 파악하는 데 도움을 준다.
✅ 2) 이미지에 alt 속성 제공
<img src="dog.jpg" alt="귀여운 강아지가 잔디밭에 누워 있음">- alt는 이미지가 보이지 않거나 스크린 리더가 읽을 수 있게 도와주는 역할을 한다.
- 단순한 장식용이면 alt=""로 비워놓는 것이 나을 수 있다.
✅ 3) Form 요소에는 label 명확히 연결
<label for="email">이메일 주소</label>
<input type="email" id="email" name="email">- 스크린 리더가 무엇을 입력하는 칸인지 알려줄 수 있다.
✅ 4) 색상만으로 정보 전달 X
<!-- ❌ 빨간색 텍스트로만 오류를 전달하면 안됨 -->
<p style="color:red;">오류가 있습니다.</p>
<!-- ✅ 아이콘이나 텍스트도 함께 사용 -->
<p><strong>❗️오류:</strong> 이메일 형식이 올바르지 않습니다.</p>✅ 5) 키보드로도 조작 가능
- 클릭 이벤트만 있는 버튼 → 키보드 사용자 배제됨
<!-- ❌ 마우스 전용 이벤트 -->
<div onclick="submitForm()">제출</div>
<!-- ✅ 올바른 방법 -->
<button type="submit">제출</button>✅ 6) 스크린 리더를 위한 ARIA 속성 사용 (보조 기술)
- ARIA: Accessible Rich Internet Applications / 동적인 UI 요소(모달, 토글 등)의 접근성을 향상시킴
<div role="dialog" aria-labelledby="dialog-title" aria-hidden="false">
<h2 id="dialog-title">회원가입 안내</h2>
</div>웹 접근성은 웹 컨텐츠를 사용하는 사용자들을 위해 신경써서 구성해야 하는 것도 있지만, 웹 접근성과 관련된 법규들이 마련되어 있기도 하다. 그렇기에 웹 컨텐츠를 만들때는 그와 관련된 법을 확인하고 법에서 벗어나는 것은 없는지 잘 확인해야 한다.
4️⃣ 웹 접근성과 관련된 법
| 예시 국가 | 주요 법/지침 | 설명 |
| 🇰🇷 대한민국 | 장애인차별금지법, KWCAG 2.1 | 공공기관은 접근성 의무화 |
| 🇺🇸 미국 | ADA, Section 508 | 웹 접근성 소송 많음 |
| 🌐 국제 | WCAG 2.1 (W3C) | 전 세계적 표준 지침 |
5️⃣ 웹 접근성의 이점
- 장애가 있는 사용자도 서비스 이용 가능함
- 검색엔진 최적화(SEO) 효과 (구조화된 콘텐츠)
- 다양한 디바이스 지원 (PC, 모바일, 스크린 리더)
- 법적 리스크 예방
- 사용자 중심의 서비스 완성
위의 내용을 통해 웹 접근성에 대해 알아보았는데, 웹 접근성에 대해 생각하다보면 웹 컨텐츠를 만드는 사람들이 다 제각각인데 어떻게 그걸 언제 다 생각해서 만들지? 라는 의문이 들 수 있다. 그래서 등장하게 된 것이 웹 접근성의 기반이 되는 기술 규칙과 구조적 원칙을 제공하는 웹 표준(Web Standards)이다.
즉, 웹 표준(Web Standards)을 지켜야 웹 접근성을 확보할 수 있다는 의미이다. 이제 웹 표준에 대해 알아보자.
🌐 웹 표준(Web Standards)이란?
✅ 정의
웹 표준은
웹에서 사용하는 HTML, CSS, JavaScript 등 핵심 기술의 통일된 규칙과 명세로,
모든 브라우저와 디바이스에서 동일하게 웹 콘텐츠를 표현하고 동작시키기 위한 국제적 약속이다.
✅ 누가 정하는가?
- W3C (World Wide Web Consortium)
- WHATWG (HTML 표준을 관리)
- ECMA (JavaScript 표준화 조직)
위와 같은 표준화 단체들이 기술 명세(specification)를 정의하고 관리한다.
✅ 웹 표준의 목적
| 목적 | 설명 |
| 🎯 호환성 | 어떤 브라우저/기기에서도 웹페이지가 동일하게 동작 |
| 🎯 일관성 | HTML/CSS 코드를 동일한 방식으로 해석하게 함 |
| 🎯 접근성 향상 | 장애가 있든 없든 누구나 사용 가능한 웹 구현 |
| 🎯 유지보수 용이 | 명확한 규칙 기반으로 개발하면 코드 재사용과 유지가 쉬움 |
| 🎯 검색엔진 친화성 | 구조적이고 시맨틱한 웹은 SEO에도 유리 |
🧱 웹 표준의 주요 기술
| 기술 | 역할 |
| HTML | 구조(structure)를 정의 (제목, 문단, 이미지 등) |
| CSS | 표현(presentation)을 정의 (색, 크기, 배치 등) |
| JavaScript | 동작(behavior)을 정의 (버튼 클릭, 애니메이션 등) |
| ARIA | 접근성 보완 태그 (스크린리더 지원 등) |
웹 접근성을 확보하기 위해서는 웹 표준을 잘 이해하고 있어야 한다.
웹 접근성과 웹 표준에 대해 이해해보았으니, 다음으로 검색 엔진 최적화에 대해서 알아보자.
1️⃣ 검색 엔진 최적화(Search Engine Optimizaion)란?
✅ 정의
검색엔진(Google, Naver, Bing 등)에서 내 웹사이트가 상위에 노출되도록 구조와 콘텐츠를 최적화하는 모든 전략과 기술이다.
즉, 검색 결과에서 내 웹페이지를 더 잘 보이게 만드는 작업이 SEO라고 생각하면 된다.
2️⃣ SEO가 왜 중요한가?
| 이유 | 설명 |
| 📈 노출 증가 | 상위에 노출될수록 클릭률이 급상승 (1위는 평균 클릭률 30% 이상) |
| 💰 광고 비용 절감 | 유료 광고 없이도 사용자 유입 가능 |
| 📊 브랜드 신뢰도 향상 | 검색 상위 페이지는 사용자가 “신뢰성 높은 정보”로 인식 |
| 🔗 지속적 유입 | 한 번 잘 설정하면, 계속 검색 유입이 생김 (장기적 효과) |
3️⃣ 검색엔진의 작동 원리
검색엔진은 아래와 같은 3단계를 통해 웹페이지를 분석한다.
| 단계 | 설명 |
| ① 크롤링(Crawling) | 봇(로봇)이 웹페이지를 자동으로 방문하고 수집 |
| ② 인덱싱(Indexing) | 수집한 데이터를 정리해서 검색 DB에 저장 |
| ③ 랭킹(Ranking) | 검색어에 가장 적합한 페이지를 상위에 노출 |
➡ SEO는 바로 이 세 단계에서 잘 평가받기 위한 작업이다.
4️⃣ SEO 핵심 최적화 요소
✅ HTML 구조 최적화 (온페이지 SEO)
| 항목 | 설명 | 예시 |
| <title> | 페이지의 핵심 주제 | <title>서연의 HTML 강의</title> |
| <meta description> | 검색 결과에 표시되는 요약 설명 | <meta name="description" content="기초 HTML을 쉽게 배워보세요"> |
| 시맨틱 태그 | 구조적 마크업 (검색엔진이 쉽게 이해) | <main>, <article>, <header> 등 |
| <img>에 alt 속성 | 이미지 대체 텍스트로 검색 인식 향상 | <img src="cat.jpg" alt="귀여운 고양이 사진"> |
| 적절한 제목 태그 | <h1>은 1번만, 그 다음은 <h2>로 구조화 | <h1>블로그 제목</h1><h2>소제목</h2> |
| URL 구조 | 키워드가 포함된 간결한 주소 | example.com/html-guide |
✅ 콘텐츠 최적화
| 항목 | 설명 | 예시 |
| 키워드 활용 | 사용자가 검색할 법한 단어 포함 | 제목, 본문, URL, alt 속성에 자연스럽게 삽입 |
| 콘텐츠 품질 | 유익하고 독창적인 내용 | 복사/붙여넣기 No! 본문 길이는 너무 짧지 않게 |
| 정기적 업데이트 | 최신 정보로 갱신 | 블로그/뉴스는 특히 중요 |
| 사용자 체류 시간 | 오래 머무를수록 좋음 | 흥미로운 구성 + 내비게이션 개선 |
✅ 기술적 최적화
| 항목 | 설명 | 도구/예시 |
| 페이지 속도 | 빠른 로딩이 SEO 점수에 영향 | 이미지 압축, lazy-loading |
| 모바일 최적화 | 모바일 친화적 디자인 (Responsive) | meta viewport, 미디어 쿼리 |
| HTTPS | 보안 인증서 적용 | https:// 필수 (Google 순위에 영향) |
| robots.txt | 크롤링 허용/차단 설정 | User-agent: * \n Disallow: /admin |
| sitemap.xml | 사이트 구조를 검색봇에게 제공 | 자동 생성 도구로 생성 가능 |
✅ 외부 요인 (오프페이지 SEO)
| 항목 | 설명 | 효과 |
| 백링크(링크 수) | 다른 웹사이트에서 내 사이트로 연결된 링크 | 많고 신뢰도 높은 곳에서 연결될수록 좋음 |
| 도메인 신뢰도 | 오래되고 공신력 있는 도메인일수록 SEO에 유리 | 예: .gov, .edu, 유명 도메인 |
| 소셜 신호 | SNS 공유, 언급 | 바이럴 효과로 간접적으로 영향 가능 |
SEO의 핵심 최적화 요소들에 대해 알아보며 정리해보았지만 이 내용은 쉽게 글로 읽으면서 이해하는 것이 더 나을 수 있을 것 같다.
SEO는 간단하게 말해서, 검색엔진(구글, 네이버 등)이 나의 웹페이지를 더 잘 이해하도록 해서 더욱 상위에 글을 노출 시킬 수 있도록 돕는 것이라고 이해하면 된다.
이때, 어떻게 하면 내 글을 상위에 노출 시킬 수 있을까? 를 고민하고 그것을 이용하는 방법이 SEO 최적화 요소들이라고 생각하면 된다. 먼저, HTML 문서의 구조가 깔끔해야 한다.
예를 들어 <title> 태그 안에는 그 페이지가 어떤 내용인지 핵심 문장을 써줘야 하고, <meta name="description">이라는 태그 안에는 이 페이지가 어떤 내용을 담고 있는지 짧고 명확한 설명을 써줘야 한다. 이 설명은 구글에서 검색했을 때 아래 나오는 요약글로 표시되고, 이를 정성들여 작성하면 클릭을 할 확률이 높아지는 것을 당연한 수순일 것이다.
그리고 당연한 말이겠지만 제목 태그도 <h1>, <h2>, <h3> 등을 잘 구분해서 작성하는 것이 좋고, 이미지를 사용할 때도 <img> 만을 사용하는 것이 아니라 alt 속성을 통해 어떤 이미지인지를 나타내주는 과정을 가지는 것이 좋다.
다음으로는 웹 컨텐츠의 내용을 사람들이 많이 검색할 만한 것들을 포함시키고, 기술적으로는 페이지 로딩 시간이 길지 않도록 신경쓰는 것 등을 꼽을 수 있을 것이다.
이렇게 HTML과 CSS를 이용해 웹 컨텐츠를 제작하고 컨텐츠를 어떻게 보여줄 것인가에 대한 고민들에 대한 내용을 적어보았다. 이제는 HTML과 CSS를 공부하고 실습을 진행하며 궁금했던 점들을 정리하며 이해해보려한다.
⁉️Q&A
HTML과 CSS를 처음 다뤄보는 사람의 관점에서는 어떤 것들이 궁금했고, 어떤 실수들을 했는지 기록해보았다.
Q. HTML 내에서 스타일을 설정하면서 디자인을 할 수 있는데 왜 CSS가 필요했고, 사용하게 되었는지?
A. HTML은 기본적으로 '구조'를 담당하는 역할이다. HTML 내에 스타일을 입혀서 디자인을 하게 되면 코드 자체가 가독성이 좋지 않다. 또 코드를 효율적으로 사용할 수 없다. CSS 파일을 따로 구성해 놓으면 같거나 비슷한 스타일을 디자인하게 될때도 그 코드를 불러와서 사용하면 되지만, HTML 내에 스타일을 입혀서 디자인을 해놓는다면 다른 요소에 재사용이 불가하기에 코드 재사용성이 저하되는 문제가 발생하기 때문에 CSS를 사용하는 것이라고 생각한다.
Q. Toss 홈페이지 클론 코딩 중 헤더가 고정되지 않는 문제가 발생하였다. (의문점은 아니고 실수한 부분)
A. header를 CSS에 지정해서 position: fixed로 설정해 놓았다. 이 부분만 보고 헤더가 왜 고정이 안될까를 계속 고민했는데 아래에 header를 body와 함께 공통 설정을 해놓으며 position을 fixed로 설정하지 않았다. 이 부분을 통해 전체의 공통 설정을 미리 지정하고 디테일한 설정으로 이동해야 한다는 것을 생각하게 되었다.
Q. Toss 홈페이지 클론 코딩 중 섹션 구분을 어떻게 해야하는지 애매한 부분이 있어 텍스트와 이미지의 위치 설정에 문제가 발생하였다.
A. 우측 위의 메모처럼 텍스트와 이미지가 하나의 섹션에 구성되어야 했는데 처음 생각은 가로를 기준으로 텍스트와 이미지가 하나의 섹션을 이루고 있을 것으로 생각했다. 그래서 가로를 기준으로 섹션을 구성해서 이미지가 살짝 겹치는 것을 구현하려고 했으나 섹션이 겹쳐질 수 없기에 실패하고 있었다. 이때, 섹션의 구분을 꼭 위 아래로 할 필요 없다는 이야기를 듣고 텍스트와 이미지의 섹션을 좌 우로 구분해보았다. 기준을 좌 우로 잡아 이미지가 살짝 겹치는 것을 구현해냈다. 섹션이 꼭 가로로 이루어져야 한다고 생각했었는데 아니었다는 것을 알게 되었다.
본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.
