용어집 › AI 용어

한국어日本語 English

AI 용어

접근성 트리 (화면 구조를 문자로 나타낸 정보)

영어 accessibility tree · 일본어 アクセシビリティツリー · 읽는 법 아쿠세시비리티 츠리

한 줄로

접근성 트리는 브라우저가 웹페이지의 버튼·링크·입력란마다 이름과 역할, 상태를 간추려 만든 정보입니다. 화면 읽기 프로그램과 AI 에이전트가 이것을 보고 페이지를 이해합니다.

HowtoAI 글에서는 AI 에이전트가 웹페이지를 읽는 세 가지 방법(스크린샷·HTML·접근성 트리)을 소개하며, 사이트를 AI도 읽기 쉽게 만드는 기준으로 이 말을 썼습니다.

확인 2026-10-26출처 MDN Web Docs 용어집 「Accessibility tree(접근성 트리)」(DOM 트리를 바탕으로 만들고, 이름·설명·역할·상태 네 가지를 담음)

1이 말, 이런 곳에서 만납니다

처음 보는 말이 낯선 것은 당연합니다. 대개 이런 자리에서 마주칩니다.

Google ScreenAI 되짚어 보기 글 (google-ux-screenai-overview)
스크린샷을 이미지로 보는 방법, HTML 구조를 읽는 방법, 브라우저가 보조 기술용으로 만드는 「접근성 트리」를 읽는 방법입니다.
Google ScreenAI 되짚어 보기 글 (google-ux-screenai-overview)
크롬 개발자 블로그(2026년 6월 22일)는 접근성 트리를 「AI 에이전트가 페이지를 이해하는 주된 방법」이라고 씁니다.
가게 사장님의 고민 (예)
“AI에게 우리 홈페이지에서 예약하는 법을 물었더니, 예약 버튼을 못 찾겠다고 하네요.”

2한 장면으로 이해하기

접근성 트리는 건물 입구의 점자 안내도와 같습니다. 벽 색이나 장식은 없지만, 어느 층에 무엇이 있고 어디로 들어가면 되는지는 정확히 적혀 있습니다. 눈으로 보지 않는 사람도, 화면을 그림으로 보지 않는 AI도 이 안내도로 길을 찾습니다.

겉모양은 빼고, 무엇이 어디 있고 무엇을 할 수 있는지만 적은 안내도입니다.

3우리 회사도 해당될까요?

이런 경우 해당됩니다

홈페이지에 예약·문의·구매 버튼이나 입력 폼이 있다
AI 에이전트나 화면 읽기 프로그램이 사이트를 제대로 쓰게 하고 싶다
제작사에 사이트 개편이나 점검을 맡길 예정이다

이런 경우는 걱정을 덜어도 됩니다

글과 사진만 있고 누르거나 입력할 곳이 거의 없는 페이지만 있다

접근성 트리는 브라우저가 자동으로 만듭니다. 따로 만들 필요는 없고, HTML을 바르게 쓰면 바르게 만들어집니다.

4조금 더 자세히

브라우저는 웹페이지의 HTML을 읽어 들인 뒤, 버튼·링크·입력란 같은 부품마다 「무엇이라 부르는지(이름)」「어떤 종류인지(역할)」「지금 어떤 상태인지」를 간추린 목록을 따로 만듭니다. 이것이 접근성 트리입니다. 건물의 점자 안내도처럼 겉모양은 빼고 어디에 무엇이 있고 무엇을 할 수 있는지만 담습니다. 화면을 소리로 읽어 주는 프로그램이 이 목록을 쓰고, 요즘은 AI 에이전트도 이것으로 페이지를 이해합니다.

주의할 점 모양만 버튼처럼 꾸민 부품은 접근성 트리에서 버튼으로 드러나지 않을 수 있습니다. 진짜 button·a 요소를 쓰고, 입력란에는 label을 연결해 두는 것이 좋습니다. 크롬 개발자 도구의 Elements 패널에서 Accessibility 탭을 열면 자사 페이지의 접근성 트리를 직접 볼 수 있습니다.

5그래서 무엇을 하면 되나요?

1크롬의 제미나이로 자사 페이지를 열고 「이 페이지에서 문의하려면 어떻게 해?」라고 물어, 답이 엇나가는지 봅니다.사장님
2모양만 버튼인 div 대신 button과 a 요소를 쓰고, 입력란마다 label을 연결합니다. 버튼 위에 투명한 요소를 겹치지 않습니다.제작사
3크롬 개발자 도구의 Accessibility 탭에서 「Show accessibility tree」를 켜고, 주요 버튼과 입력란에 이름과 역할이 붙어 있는지 확인합니다.제작사

제작사에 이렇게 물어보세요

“우리 사이트의 예약·문의 버튼과 입력란이 접근성 트리에 이름과 역할을 갖고 제대로 나타나는지 점검해 주실 수 있나요?”

6자주 묻는 질문

Q. 접근성 트리를 따로 만들어야 하나요?

아닙니다. 브라우저가 HTML(정확히는 DOM 트리)을 바탕으로 자동으로 만듭니다. 사이트 쪽에서 할 일은 버튼에는 button, 링크에는 a를 쓰고 입력란에 label을 붙이는 것처럼 HTML을 뜻에 맞게 쓰는 것입니다.

Q. AI 에이전트는 화면을 그림으로 보지 않나요?

그림으로 보기도 합니다. web.dev 글은 에이전트가 스크린샷, HTML, 접근성 트리의 세 가지로 페이지를 본다고 설명하고, 크롬 개발자 블로그는 잘 짜인 접근성 트리를 에이전트가 페이지를 이해하는 주된 방법이라고 씁니다. 그래서 겉모양만큼 구조도 중요합니다.

7이 풀이의 근거

출처

MDN Web Docs 용어집 「Accessibility tree(접근성 트리)」(DOM 트리를 바탕으로 만들고, 이름·설명·역할·상태 네 가지를 담음) (확인 2026-10-26)

web.dev 「에이전트 친화적인 웹사이트 만들기」(에이전트는 스크린샷·HTML·접근성 트리로 페이지를 봄) (확인 2026-10-26)

Chrome for Developers 블로그 「웹사이트를 에이전트에 대응시키는 개발자 도구 모음」(2026-06-22, 잘 짜인 접근성 트리가 에이전트가 페이지를 이해하는 주된 방법) (확인 2026-10-26)

Chrome DevTools 문서 「접근성 기능 참고 자료」(Accessibility 탭, Show accessibility tree 토글) (확인 2026-10-26)

확인한 날

2026-10-26 · 다음 확인 2027-01-26

풀이

양진석 · 따뜻한기술 대표

이 정의를 인용하려면

“접근성 트리는 브라우저가 웹페이지의 버튼·링크·입력란마다 이름과 역할, 상태를 간추려 만든 정보입니다. 화면 읽기 프로그램과 AI 에이전트가 이것을 보고 페이지를 이해합니다.” — 용어집 「접근성 트리 (화면 구조를 문자로 나타낸 정보)」 (확인 2026-10-26), atatakaidigital.com/kr/glossary/accessibility-tree

8이어서 알아 두면 좋은 말

이 말이 쓰인 글

Google ScreenAI는 어떻게 되었나｜화면을 읽는 AI와 UX의 2026년