좋은 웹사이트의 기준을 한곳에 모은 Website Specification

웹사이트 품질을 이야기할 때는 검색, 접근성, 보안, 성능이 따로 흩어져 나오기 쉬워요. The Website Specification은 이 기준을 한곳에 모아, 사람이 읽는 웹과 기계가 읽는 웹을 같이 점검할 수 있게 만든 공개 명세예요.

핵심 요약

구분	핵심	왜 볼 만한가요
웹 표준	HTML 기본 요소부터 SEO, 접근성, 보안, 성능까지 10개 영역으로 나눴어요	웹사이트 점검 기준을 프레임워크나 CMS에 묶지 않고 볼 수 있어요
에이전트 대응	llms.txt, Markdown 응답, 공개 MCP 서버, Agent Skill을 함께 제공해요	검색엔진뿐 아니라 AI 도구가 읽는 웹을 어떻게 준비할지 힌트를 줘요
운영 방식	각 항목이 WHATWG, W3C, IETF RFC, WCAG, MDN 같은 출처와 연결돼요	취향이 아니라 표준과 근거를 기준으로 체크리스트를 만들 수 있어요

1. 웹사이트 품질 기준을 플랫폼 밖으로 꺼냈어요

The Website Specification은 좋은 웹사이트가 갖춰야 할 기술 항목을 플랫폼과 분리해 정리한 문서예요. WordPress로 만들었든, Next.js나 Django 앱으로 배포했든, 순수 HTML 페이지든 같은 기준으로 점검하자는 접근이에요. 첫 화면의 설명도 이 점을 분명히 말해요. ``, `/.well-known/security.txt`, WCAG 대비, `llms.txt`처럼 서로 다른 층위의 항목을 하나의 명세 안에 넣었어요. <a href="https://specification.website/" target="_blank" rel="noopener">2</a></p> <p>구성은 꽤 넓어요. Foundations, SEO, Accessibility, Security, Well-Known URIs, Agent Readiness, Performance, Privacy, Resilience, Internationalisation까지 10개 영역으로 나뉘어요. 전체 항목은 128개로 공개돼 있고, 각 항목은 필수인지 권장인지도 나눠 보여줘요. 예를 들어 HTML 문서의 `doctype`, `<html lang>`, UTF-8 charset, viewport, `<title>`은 기본 항목으로 잡혀 있어요. <a href="https://specification.website/spec/" target="_blank" rel="noopener">3</a></p> <p>이 명세가 흥미로운 지점은 "웹 개발 점검표"를 특정 도구의 실무 기준으로 만들지 않았다는 점이에요. React를 쓰는지, CMS를 쓰는지, 정적 사이트 생성기를 쓰는지는 뒤로 미뤄요. 먼저 페이지가 어떤 신호를 제공해야 하는지, 어떤 표준을 따라야 하는지, 어느 부분이 사람과 기계에 읽히는지를 묻는 방식이에요.</p> <h2>왜 중요한가요</h2> <p>웹사이트 운영자는 이미 너무 많은 점검표를 봐요. SEO 도구는 검색 노출을 말하고, 접근성 도구는 WCAG를 말하고, 보안 스캐너는 헤더를 말해요. 그런데 실제 사이트는 이 모든 항목이 한 화면 안에서 같이 작동해요. Website Specification은 이 흩어진 기준을 한 문서 구조로 묶어, 팀이 "무엇부터 점검할지"를 빠르게 맞출 수 있게 해요. <a href="https://specification.website/" target="_blank" rel="noopener">2</a></p> <p>특히 Agent Readiness 영역은 지금 웹이 어디로 움직이는지 보여줘요. 명세는 `/llms.txt`, 페이지별 Markdown, 공개 MCP 서버, Agent Skill을 제공해요. AI 도구가 페이지를 읽고 점검하고 개선 제안을 만들 수 있게 하는 통로예요. 다만 이 흐름은 논쟁도 있어요. 사람이 보는 화면과 기계가 보는 내용을 다르게 만들 여지가 생기면, 검색엔진 최적화에서 겪었던 문제를 다시 만날 수 있어요. 그래서 이 명세는 무조건 따라야 할 답이라기보다, 앞으로 웹사이트가 사람과 자동화 도구 사이에서 어떤 신호를 제공할지 보여주는 참고 기준에 가까워요. <a href="https://specification.website/llms.txt" target="_blank" rel="noopener">4</a></p> <p>개발자에게는 바로 쓸 수 있는 점검표로도 가치가 있어요. 새 프로젝트를 시작할 때 제목, 설명, canonical, Open Graph, feed discovery, 보안 헤더, 오류 페이지, 언어 설정을 매번 따로 떠올리기는 어려워요. 이 명세처럼 항목과 근거가 같이 있으면, 배포 전 QA 목록으로 옮기기 쉬워요. 프레임워크가 바뀌어도 남는 기준을 만들고 싶은 팀이라면 한 번 훑어볼 만해요. <a href="https://specification.website/spec/" target="_blank" rel="noopener">3</a></p> <h2>참고 자료</h2> <ol><li><a href="https://news.hada.io/topic?id=30066" target="_blank" rel="noopener">The Website Specification</a> — GeekNews</li><li><a href="https://specification.website/" target="_blank" rel="noopener">The Website Specification</a> — 원문</li><li><a href="https://specification.website/spec/" target="_blank" rel="noopener">All topics · Website Spec</a> — 원문</li><li><a href="https://specification.website/llms.txt" target="_blank" rel="noopener">The Website Specification llms.txt</a> — 원문</li></ol></div>   <script onerror="changeAdsenseToNaverAd()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="margin:50px 0; display:block;" data-ad-client="ca-pub-9527582522912841" data-ad-slot="4947159016" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-HCZEy0KQLPMGnGuC"></ins> <script id="adsense_script"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script> if(window.observeAdsenseUnfilledState !== undefined){ observeAdsenseUnfilledState(); } </script> <div data-tistory-react-app="NaverAd"></div> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//diligesker.tistory.com/reaction'; window.ReactionReqBody = { entryId: 94 }</script> <div class="wrap_btn" id="reaction-94" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-entry-id="94" data-thumbnail-url="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FlufWO%2FdJMcaaerLMp%2FAAAAAAAAAAAAAAAAAAAAAHx1b-nZ1JD4LdA47wg1Ft1R1sU5W6RBI3InZaGMvR5_%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DMP%252B9D%252BcvD3EGli9x18DNuwIhA5c%253D" data-title="좋은 웹사이트의 기준을 한곳에 모은 Website Specification" data-description="좋은 웹사이트의 기준을 한곳에 모은 Website SpecificationAI 뉴스 썸네일웹사이트 품질을 이야기할 때는 검색, 접근성, 보안, 성능이 따로 흩어져 나오기 쉬워요. The Website Specification은 이 기준을 한곳에 모아, 사람이 읽는 웹과 기계가 읽는 웹을 같이 점검할 수 있게 만든 공개 명세예요.핵심 요약구분핵심왜 볼 만한가요웹 표준HTML 기본 요소부터 SEO, 접근성, 보안, 성능까지 10개 영역으로 나눴어요웹사이트 점검 기준을 프레임워크나 CMS에 묶지 않고 볼 수 있어요에이전트 대응llms.txt, Markdown 응답, 공개 MCP 서버, Agent Skill을 함께 제공해요검색엔진뿐 아니라 AI 도구가 읽는 웹을 어떻게 준비할지 힌트를 줘요운영 방식각 항목이 W.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="부지런한 게으름뱅이" data-pc-url="https://diligesker.tistory.com/94" data-relative-pc-url="/94" data-blog-title="부지런한 게으름뱅이"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="94" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="8165386" data-url="https://diligesker.tistory.com/94" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">부지런한 게으름뱅이</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div> </div>  <div class="another_category another_category_color_gray"> <h4>'<a href="/category/IT%20%26%20AI">IT & AI</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/98">AI 검색에 맞춘 SEO, Claude Code 스킬로 점검하는 방법</a> <span>(0)</span></th> <td>2026.06.02</td> </tr> <tr> <th><a href="/95">Codex의 sudo 우회 사례, 문제는 AI보다 Docker 권한이에요</a> <span>(0)</span></th> <td>2026.06.01</td> </tr> <tr> <th><a href="/93">AV2 v1.0 공개, 영상 압축 표준 경쟁이 다시 움직여요</a> <span>(1)</span></th> <td>2026.06.01</td> </tr> <tr> <th><a href="/92">Zig 빌드가 150ms에서 14ms로 빨라진 이유</a> <span>(1)</span></th> <td>2026.06.01</td> </tr> <tr> <th><a href="/91">AI 에이전트 시대, 모델보다 실행 구조가 중요해졌어요</a> <span>(0)</span></th> <td>2026.06.01</td> </tr> </table> </div>  </div>  <div class="related_type related_type_view"> <h2 class="title_related">관련글 <a href="/category/IT%20%26%20AI" class="link_add thema_apply">관련글 더보기</a></h2> <ul class="list_related"> <li> <a href="/98?category=1309805" class="link_related" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FZKRyE%2FdJMcadvnAa6%2FAAAAAAAAAAAAAAAAAAAAAJb_VsIjBIVGb7RMQIOxVyFJwTNwq0YlOHeXMSWRtodZ%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DSX2Wg%252F70w6b84qu9Fv40R7bhTxU%253D') !important" > <span class="bg"></span> <span class="txt"><strong>AI 검색에 맞춘 SEO, Claude Code 스킬로 점검하는 방법</strong></span> </a> </li> <li> <a href="/95?category=1309805" class="link_related" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F2EloD%2FdJMcaf7PEu5%2FAAAAAAAAAAAAAAAAAAAAAEKVj_0C3fO0JjkBmfKisChIrpsFcfSKDT0s2HqwL7P0%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3D8fQ7V%252BYJpP2fmOGJSND%252BlaoCWUM%253D') !important" > <span class="bg"></span> <span class="txt"><strong>Codex의 sudo 우회 사례, 문제는 AI보다 Docker 권한이에요</strong></span> </a> </li> <li> <a href="/93?category=1309805" class="link_related" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FuC6iH%2FdJMcacceAJ7%2FAAAAAAAAAAAAAAAAAAAAAKUr9Ag4yxzLBOhyeCxhMYDj8klc8D66cRDuzQu9bwZh%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DJ5GLRNGGunNZq4SgeL%252Bzd08SOD4%253D') !important" > <span class="bg"></span> <span class="txt"><strong>AV2 v1.0 공개, 영상 압축 표준 경쟁이 다시 움직여요</strong></span> </a> </li> <li> <a href="/92?category=1309805" class="link_related" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbb2i68%2FdJMcagyVcjC%2FAAAAAAAAAAAAAAAAAAAAAGpqIi8f-f8NubA4rV5_RDbEUe3fzF5QUgcVI3QwdD_2%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DM8dk5sylJi9fk6iT7Vi1rZpX9jE%253D') !important" > <span class="bg"></span> <span class="txt"><strong>Zig 빌드가 150ms에서 14ms로 빨라진 이유</strong></span> </a> </li> </ul> </div>   <div class="area_reply"> <div data-tistory-react-app="Namecard"></div> </div>  </div>  </div> </li> </ul> </div> </div>  </main>  <aside class="sidebar mobile_blind"> <div class="inner_sidebar thema_apply">  <div class="related_posts"> <div class="related_type related_type_view"> <h2 class="title_related">인기포스트</h2> <ul class="list_related"> </ul> </div> </div>  <div class="about_me_pc"> <div class="box_sidebar about_me"> <div class="inbox"> <h3 class="title_sidebar">ABOUT ME</h3> <p class="text_about">diligesker 님의 블로그 입니다.</p> </div> </div> </div>  <div class="box_sidebar"> <div class="inbox"> <h3 class="title_sidebar">LINK</h3> </div> </div>  <div class="box_sidebar sidebar_admin"> <div class="inbox"> <h3 class="title_sidebar">ADMIN</h3> <a href="https://diligesker.tistory.com/manage" class="admin"><span class="blind">admin</span></a> <a href="https://diligesker.tistory.com/manage/entry/post" class="write"><span class="blind">글쓰기</span></a> </div> </div>  <div class="box_sidebar visit_counter"> <div class="inbox"> <span class="total"></span> <span class="today"></span> <span class="yesterday"></span> </div> </div> </div> </aside>   <footer id="footer"> Designed by Tistory. </footer>  </div>  </div>  <div class="#menubar menu_toolbar toolbar_rb"> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="8165386" data-url="https://diligesker.tistory.com" data-device="web_pc"><strong class="txt_tool_id">부지런한 게으름뱅이</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div> <div class="#menubar menu_toolbar "><div class="btn_tool btn_tool_type1" id="menubar_wrapper" data-tistory-react-app="Menubar"></div></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>  <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script>   <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/styles/atom-one-light.min.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/delphi.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/php.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/python.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/r.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/ruby.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/scala.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/shell.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/sql.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/swift.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/typescript.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/vbnet.min.js" defer></script> <script>hljs.initHighlightingOnLoad();</script>  <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-44ca594baca98ea2c2f34172595cf9eb7185ccc1/static/script/common.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"8165386-94","customProps":{"userId":"0","blogId":"8165386","entryId":"94","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"94","entryTitle":"좋은 웹사이트의 기준을 한곳에 모은 Website Specification","entryType":"POST","categoryName":"IT & AI","categoryId":"1309805","serviceCategoryName":null,"serviceCategoryId":null,"author":"3884478","authorNickname":"부지런한 게으름뱅이","blogNmae":"부지런한 게으름뱅이","image":"kage@lufWO/dJMcaaerLMp/Th3cZxjzL9OLSodA8E7VLk","plink":"/94","tags":["AgentReadiness","AI뉴스","AI에이전트","corewebvitals","django","html","IETF","IT뉴스","llms.txt","MCP","MDN","Next.js","SEO","w3c","WCAG","WebsiteSpecification","WHATWG","WordPress","개발자뉴스","개발자도구","보안","오픈소스","웹개발","웹사이트명세","웹성능","웹접근성","웹표준","웹품질","테크뉴스","프론트엔드"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null","thirdProvideAgree":null}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>