웹표준 준수 증적자료

1. 문서 개요

문서명: 웹표준 준수 증적자료

작성일: 2025-06-20

작성자: 백준형(소속: 토마토시스템 기술연구소)

대상: eXBuilder6

목적: 본 문서는 eXBuilder6가 웹표준을 준수하여 개발되었음을 증명하기 위해 기술적 근거를 제시함.

---

2. 적용 웹표준 및 기술 명세

구분	적용 기술	참고 스펙 URL
마크업	HTML5	HTML Living Standard(https://html.spec.whatwg.org)
스타일	CSS3	W3C CSS(https://www.w3.org/Style/CSS/)
스크립트	ECMAScript 2009 (IE11 지원)	ECMA-262(https://ecma-international.org/wp-content/uploads/ECMA-262_5th_edition_december_2009.pdf)
접근성	WCAG 2.1	WCAG 2.1(https://www.w3.org/TR/WCAG21/)
기타	WAI-ARIA	ARIA Overview(https://www.w3.org/WAI/standards-guidelines/aria/)

---

3. 웹표준 준수 개발 방법

3-1. 시맨틱 요소와 ARIA Role 사용

시맨틱 태그의 한계를 보완하고 웹 접근성을 확보하기 위해, 다양한 role, aria-*, tabindex 속성을 활용합니다.

사용 Aria Role 목록

역할 (role)	역할 설명
application	웹 애플리케이션처럼 독립적으로 작동하는 영역
button	사용자 클릭 가능한 동작 트리거
checkbox	두 상태 또는 세 상태 체크 가능 항목
combobox	입력 필드와 리스트박스를 결합한 위젯
dialog	팝업 창 형태의 대화상자
group	라디오나 체크박스를 그룹으로 구성
heading	문서 내 구획 제목을 나타냄
img	시각적 정보를 나타내는 그래픽
link	다른 위치로 이동하거나 동작을 유발하는 항목
list	순서 없는 항목 집합
listbox	하나 또는 여러 항목 선택 가능한 목록
menu	명령 또는 옵션 모음
menuitem	메뉴 내 선택 가능한 항목
menuitemradio	메뉴에서 단일 선택만 가능한 항목
navigation	페이지 간 또는 내부 영역 간 이동
option	리스트 항목 - listbox나 combobox 내 선택 가능한 항목
presentation	시각적 요소 - 접근성 트리에서 제거 (의미 없음)
progressbar	진행률 표시 - 작업 상태 또는 진행도 표현
radio	라디오 버튼 - 단일 선택만 가능한 옵션 항목
radiogroup	라디오 버튼 그룹 - 관련된 라디오들을 묶는 역할
region	명확히 구분된 문서 영역
slider	연속적인 값을 조절하는 컨트롤
spinbutton	숫자 스핀박스 - 값 증감 컨트롤 제공
tab	탭패널 전환을 위한 선택 요소
tablist	여러 개의 탭을 포함하는 컨테이너
tabpanel	현재 선택된 탭의 콘텐츠 영역
textbox	사용자 입력을 받는 필드
tooltip	요소에 대한 추가 설명 제공
tree	계층 구조의 탐색 가능 목록
treeitem	트리 내 단일 노드

3-2. CSS 레이아웃에 Flex, Grid 등 표준 속성 사용

Flex와 Grid 기반 레이아웃을 통해 다양한 브라우저에서 일관된 UI를 제공합니다.

3-3. JavaScript는 DOM 표준 API만 사용

비표준 API 없이 표준 DOM API 기반으로 기능을 구현합니다.

3-4. ARIA 속성 적용으로 접근성 보완

복합 UI 환경에서도 접근성을 확보하기 위해 ARIA 속성을 적극 사용하고 있으며, 개발자가 설정 가능한 API도 제공합니다.

속성	설명
aria-activedescendant	현재 포커스를 가지는 자식 요소의 ID를 참조
aria-atomic	전체 영역을 다시 읽을지 여부 지정
aria-autocomplete	자동완성 기능의 유무 및 유형 지정
aria-checked	체크 상태 표시
aria-colcount	테이블의 총 열 개수 지정
aria-colspan	셀의 열 병합 개수 지정
aria-controls	연관 요소 참조
aria-current	현재 상태를 나타내는 항목에 사용
aria-describedby	요소에 대한 설명을 제공하는 다른 요소의 ID를 참조
aria-disabled	요소가 비활성화된 상태임을 나타냄
aria-expanded	확장 여부 표시
aria-haspopup	팝업 요소(메뉴, 리스트박스 등) 존재 여부 표시
aria-hidden	시각적 요소 숨김 처리
aria-keyshortcuts	해당 요소에 할당된 키보드 단축키 제공
aria-label	대체 텍스트 설명 제공
aria-labelledby	요소를 설명하는 하나 이상의 다른 요소의 ID를 참조하여 대체 텍스트 설명을 제공
aria-level	계층 구조 내 요소의 수준(Level) 지정
aria-live	동적으로 변경되는 영역의 업데이트 알림 우선순위 설정
aria-posinset	현재 항목이 셋 내 몇 번째인지 지정
aria-rowcount	테이블의 총 행 개수 지정
aria-rowindex	해당 셀이 위치한 행 번호 지정
aria-rowspan	셀의 행 병합 개수 지정
aria-selected	선택 상태 표시
aria-setsize	현재 셋(세트) 내 총 항목 수 지정
aria-sort	정렬 상태 지정
aria-valuemax	슬라이더, 스핀버튼 등의 최대 값 설정
aria-valuemin	슬라이더, 스핀버튼 등의 최소 값 설정
aria-valuenow	슬라이더, 스핀버튼 등의 현재 값 설정
aria-valuetext	사용자에게 읽히는 현재 값의 텍스트 표현 제공

---

4. 유효성 검사 결과

4-1. HTML5 유효성 검사

테스트 화면	검사 도구	결과	스크린샷
테크돔 메인 페이지(https://tech.tomatosystem.co.kr)	W3C Validator	오류 없음	[첨부 A-1]

4-2. CSS 유효성 검사

테스트 화면	검사 도구	결과	비고
테크돔 메인 페이지(https://tech.tomatosystem.co.kr)	W3C CSS Validator	경고 1건	브라우저 호환성을 위해 -webkit, -moz, -ms 등 비표준 접두어 사용 (eXBuilder6에서 제공되는 cleopatra.css 기준)

---

5. 크로스 브라우징 테스트 결과

브라우저	버전	테스트 결과	비고
Chrome	126.0	정상 동작	-
Edge	126.0	정상 동작	-
Firefox	127.0	정상 동작	-
Safari	17	정상 동작	macOS 기준

---

6. 웹 접근성 확인

eXBuilder6는 매년 외부 기관을 통해 웹 접근성 인증을 받고 있으며, alt, label, aria 속성 및 키보드 내비게이션을 포함한 접근성 항목을 충실히 반영하고 있습니다.

6-1. SA 인증 이력

심사 연도	인증 기관	심사 내용	인증 결과
2019	웹와치	런타임 웹 접근성	합격
2020	웹와치	런타임 웹 접근성	합격
2021	웹와치	런타임 웹 접근성	합격
2021	한국웹접근성인증평가원	런타임 웹 접근성	합격
2022	웹와치	런타임 웹 접근성	합격
2022	한국웹접근성인증평가원	런타임 웹 접근성	합격
2023	웹와치	런타임 웹 접근성	합격
2023	한국웹접근성인증평가원	런타임 웹 접근성	합격
2024	웹와치	런타임 웹 접근성	합격
2024	한국웹접근성인증평가원	런타임 웹 접근성	합격
2025	한국웹접근성인증평가원	런타임 웹 접근성	합격
2025	웹와치	런타임 웹 접근성	합격
2026	한국웹접근성인증평가원	런타임 웹 접근성	합격
2026	웹와치	런타임 웹 접근성	합격

---

7. 결론

eXBuilder6는 HTML5, CSS3, ECMAScript, WAI-ARIA 등 웹표준을 준수하여 개발되었으며,
외부 검증 및 인증을 통해 웹 접근성과 기술 적합성을 지속적으로 확보하고 있습니다.
이를 통해 모든 사용자에게 일관된 UX와 웹 호환성을 제공합니다.

첨부자료

• A-1: 테크돔 메인 페이지

  
  
  검사결과