# 웹 표준

# 웹표준 준수 증적자료

## 1. 문서 개요

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

작성일: 2025-06-20

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

대상: eXBuilder6

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

---

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

<table border="1" id="bkmrk-%EA%B5%AC%EB%B6%84-%EC%A0%81%EC%9A%A9-%EA%B8%B0%EC%88%A0-%EC%B0%B8%EA%B3%A0-%EC%8A%A4%ED%8E%99-url-%EB%A7%88" style="border-collapse: collapse; border-style: solid; width: 116.667%;"><thead><tr><th style="width: 9.0584%;">구분</th><th style="width: 18.4744%;">적용 기술</th><th style="width: 72.4672%;">참고 스펙 URL</th></tr></thead><tbody><tr><td style="width: 9.0584%;">마크업</td><td style="width: 18.4744%;">HTML5</td><td style="width: 72.4672%;">HTML Living Standard([https://html.spec.whatwg.org](https://html.spec.whatwg.org))</td></tr><tr><td style="width: 9.0584%;">스타일</td><td style="width: 18.4744%;">CSS3</td><td style="width: 72.4672%;">W3C CSS([https://www.w3.org/Style/CSS/](https://www.w3.org/Style/CSS/))</td></tr><tr><td style="width: 9.0584%;">스크립트</td><td style="width: 18.4744%;">ECMAScript 2009 (IE11 지원)</td><td style="width: 72.4672%;">ECMA-262([https://ecma-international.org/wp-content/uploads/ECMA-262\_5th\_edition\_december\_2009.pdf](https://ecma-international.org/wp-content/uploads/ECMA-262_5th_edition_december_2009.pdf))</td></tr><tr><td style="width: 9.0584%;">접근성</td><td style="width: 18.4744%;">WCAG 2.1</td><td style="width: 72.4672%;">WCAG 2.1([https://www.w3.org/TR/WCAG21/](https://www.w3.org/TR/WCAG21/))</td></tr><tr><td style="width: 9.0584%;">기타</td><td style="width: 18.4744%;">WAI-ARIA</td><td style="width: 72.4672%;">ARIA Overview([https://www.w3.org/WAI/standards-guidelines/aria/](https://www.w3.org/WAI/standards-guidelines/aria/))</td></tr></tbody></table>

---

## 3. 웹표준 준수 개발 방법

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

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

**사용 Aria Role 목록**

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

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

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

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

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

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

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

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

---

## 4. 유효성 검사 결과

### 4-1. HTML5 유효성 검사

<table border="1" id="bkmrk-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%94%EB%A9%B4-%EA%B2%80%EC%82%AC-%EB%8F%84%EA%B5%AC-%EA%B2%B0%EA%B3%BC-exbu" style="border-collapse: collapse; border-style: solid;"><thead><tr><td>테스트 화면</td><td>검사 도구</td><td>결과</td><td>스크린샷</td></tr></thead><tbody><tr><td>테크돔 메인 페이지([https://tech.tomatosystem.co.kr](https://tech.tomatosystem.co.kr))</td><td>W3C Validator</td><td>오류 없음</td><td>\[첨부 A-1\]</td></tr></tbody></table>

### 4-2. CSS 유효성 검사

<table border="1" id="bkmrk-%EA%B2%80%EC%82%AC-%EB%8F%84%EA%B5%AC-%EA%B2%B0%EA%B3%BC-%EB%B9%84%EA%B3%A0-w3c-css-" style="border-collapse: collapse; border-style: solid; width: 108.69%; height: 76.3907px;"><thead><tr style="height: 29.7969px;"><td style="width: 33.969%; height: 29.7969px;">테스트 화면</td><td style="width: 17.0454%; height: 29.7969px;">검사 도구</td><td style="width: 8.69956%; height: 29.7969px;">결과</td><td style="width: 40.2861%; height: 29.7969px;">비고</td></tr></thead><tbody><tr style="height: 46.5938px;"><td style="width: 33.969%; height: 46.5938px;">테크돔 메인 페이지([https://tech.tomatosystem.co.kr](https://tech.tomatosystem.co.kr))</td><td style="width: 17.0454%; height: 46.5938px;">W3C CSS Validator</td><td style="width: 8.69956%; height: 46.5938px;">경고 1건</td><td style="width: 40.2861%; height: 46.5938px;">브라우저 호환성을 위해 -webkit, -moz, -ms 등 비표준 접두어 사용 (eXBuilder6에서 제공되는 cleopatra.css 기준)</td></tr></tbody></table>

---

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

<table border="1" id="bkmrk-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B2%84%EC%A0%84-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EA%B2%B0%EA%B3%BC-%EB%B9%84%EA%B3%A0-ch" style="border-collapse: collapse; border-style: solid;"><thead><tr><th>브라우저</th><th>버전</th><th>테스트 결과</th><th>비고</th></tr></thead><tbody><tr><td>Chrome</td><td>126.0</td><td>정상 동작</td><td>-</td></tr><tr><td>Edge</td><td>126.0</td><td>정상 동작</td><td>-</td></tr><tr><td>Firefox</td><td>127.0</td><td>정상 동작</td><td>-</td></tr><tr><td>Safari</td><td>17</td><td>정상 동작</td><td>macOS 기준</td></tr></tbody></table>

---

## 6. 웹 접근성 확인

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

### 6-1. SA 인증 이력

<table border="1" id="bkmrk-%EC%8B%AC%EC%82%AC-%EC%97%B0%EB%8F%84-%EC%9D%B8%EC%A6%9D-%EA%B8%B0%EA%B4%80-%EC%8B%AC%EC%82%AC-%EB%82%B4%EC%9A%A9-%EC%9D%B8%EC%A6%9D" style="border-collapse: collapse; border-style: solid; width: 49.7619%; height: 485.6px;"><thead><tr style="height: 46.4px;"><th style="width: 17.2665%; height: 46.4px;">심사 연도</th><th style="width: 37.8904%; height: 46.4px;">인증 기관</th><th style="width: 27.5785%; height: 46.4px;">심사 내용</th><th style="width: 17.2665%; height: 46.4px;">인증 결과</th></tr></thead><tbody><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2019</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2020</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2021</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr style="height: 46.4px;"><td style="width: 17.2665%; height: 46.4px;">2021</td><td style="width: 37.8904%; height: 46.4px;">한국웹접근성인증평가원</td><td style="width: 27.5785%; height: 46.4px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 46.4px;">합격</td></tr><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2022</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr style="height: 46.4px;"><td style="width: 17.2665%; height: 46.4px;">2022</td><td style="width: 37.8904%; height: 46.4px;">한국웹접근성인증평가원</td><td style="width: 27.5785%; height: 46.4px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 46.4px;">합격</td></tr><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2023</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr style="height: 46.4px;"><td style="width: 17.2665%; height: 46.4px;">2023</td><td style="width: 37.8904%; height: 46.4px;">한국웹접근성인증평가원</td><td style="width: 27.5785%; height: 46.4px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 46.4px;">합격</td></tr><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2024</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr style="height: 46.4px;"><td style="width: 17.2665%; height: 46.4px;">2024</td><td style="width: 37.8904%; height: 46.4px;">한국웹접근성인증평가원</td><td style="width: 27.5785%; height: 46.4px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 46.4px;">합격</td></tr><tr style="height: 46.4px;"><td style="width: 17.2665%; height: 46.4px;">2025</td><td style="width: 37.8904%; height: 46.4px;">한국웹접근성인증평가원</td><td style="width: 27.5785%; height: 46.4px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 46.4px;">합격</td></tr><tr style="height: 29.6px;"><td style="width: 17.2665%; height: 29.6px;">2025</td><td style="width: 37.8904%; height: 29.6px;">웹와치</td><td style="width: 27.5785%; height: 29.6px;">런타임 웹 접근성</td><td style="width: 17.2665%; height: 29.6px;">합격</td></tr><tr><td style="width: 17.2665%;">2026</td><td style="width: 37.8904%;">한국웹접근성인증평가원</td><td style="width: 27.5785%;">런타임 웹 접근성</td><td style="width: 17.2665%;">합격</td></tr><tr><td style="width: 17.2665%;">2026</td><td style="width: 37.8904%;">웹와치</td><td style="width: 27.5785%;">런타임 웹 접근성</td><td style="width: 17.2665%;">합격</td></tr></tbody></table>

---

## 7. 결론

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

## 첨부자료

- A-1: 테크돔 메인 페이지
    
    [![스크린샷 2025-07-16 오후 5.00.08.png](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-07/scaled-1680-/2025-07-16-5-00-08.png)](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-07/2025-07-16-5-00-08.png)  
      
    검사결과  
    [![스크린샷 2025-07-16 오후 5.44.41.png](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-07/scaled-1680-/2025-07-16-5-44-41.png)](https://bookstack.tomatosystem.co.kr/uploads/images/gallery/2025-07/2025-07-16-5-44-41.png)