The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세
The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세
웹사이트를 만들 때 어떤 기술 요소를확해야 하는지, 플랫폼과 무관하게 정리한 명세가 등장했다. 바로 The Website Specification다.
부터 llms.txt까지, WHATWG·W3C·IETF RFCs·WCAG·MDN 등 현대 웹 표준을 레퍼런스로 삼아 10개 영역 128개 항목을쿠로 제공한다.</p></p>
<p data-ke-size="size16"><h2 data-ke-size="size23">왜 이런 명세가 필요한가</h2></p>
<p data-ke-size="size16"><p data-ke-size="size16">현대 웹사이트는 다양한 방식으로 배포된다. WordPress, Drupal, TYPO3, Next.js, Astro, Hugo, Django, 또는 순수 HTML까지. 배포 방식이 다르더라도 <strong>웹사이트가최소한 갖추어야 할 기술 요소는 동일</strong>하다.역시 그동안 이러한 표준 집합이 없었다.</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">The Website Specification은 이 공백을 메운다. 플랫폼에 중립적이고, 출처가 명확하며, 체크리스트 형태로 제공된다. 사람과 AI 에이전트 모두를 대상으로 하며, 각 항목에는 구현 힌트도 함께 포함된다.</p></p>
<p data-ke-size="size16"><h2 data-ke-size="size23">10개 영역으로 보는 웹사이트 요건</h2></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">1. Foundations — HTML과 문서 기본 (14개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">가장 기본이 되는 영역. <title>, 메타 charset, viewport,OG 태그 등 기본 구조를 다룬다. 다른 모든 영역의근가 되는 부분이다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">2. SEO — 검색 노출 (13개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">robots.txt, XML 사이트맵, canonical URL, 구조화 데이터(schema.org) 등을 포함한다. 검색 엔진이 페이지를 올바르게 크롤링하고 색인할 수 있도록루기본요소다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">3. Accessibility — 접근성 (20개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">WCAG 가이드라인을 바탕으로, 시각·청각·운동 장애가 있는 사용자도 사이트를 사용할 수 있도록 한다.alt 텍스트, 키보드 네비게이션, 색상 대비 등을 항목으로 포함한다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">4. Security — 보안 (12개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">HTTPS 강제, 보안 헤더(CSP, HSTS, X-Frame-Options 등), /.well-known/security.txt 등을 다룬다. 방문자를 안전하게 보호하는 전송 계층과 헤더 설정을 정리한다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">5. Well-Known URIs — 표준 경로 (9개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">/.well-known/ 아래의 표준 합의 경로를 정리한다. change-password, security.txt,.host-meta 등 정해진 위치에 뒬어야 할 리소스들을정의한다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">6. Agent Readiness — AI 에이전트 준비 (18개 항목) ⭐</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">이 명세의 가장 큰 차별점이다. AI 에이전트와 크롤러가 사이트를 읽고 이해할 수 있게 하는 요소들을정의한다. 핵심은 다음 세 가지다:</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <strong>llms.txt</strong>: 페이지별 Markdown 버전을 제공하여 에이전트가HTML 파싱 없이도 내용을 이해할 수 있게 한다</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <strong>MCP 서버</strong>: spec 전체를 읽기 전용·인증 없는 MCP 서버로 제공한다</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <strong>에이전트 스킬</strong>: 호환 에이전트가 명세를 활용하는 방법을 알려주는 Skill을 게시한다</p></p>
<p data-ke-size="size16"><pre><code>{"mcpServers": {"specification-website": {"transport": "http","url": "https://mcp.specification.website/mcp"}}}</code></pre></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">7. Performance — 성능 (19개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">Core Web Vitals(LCP, FID, CLS), 캐싱 헤더, 이미지 최적화, 폰트 로딩, 네트워크 동작 등을 포함한다. 사용자 경험에 직접적인 영향을 미치는성능요소를 정리한다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">8. Privacy — 개인정보 보호 (6개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">쿠키 동의, Do Not Track,GDPR 등에 대응하는 신호와 방문자 선택 존중 요건을 다룬다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">9. Resilience — 복원력 (5개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">오류 페이지, Service Worker 기반 오프라인 대응, 리디렉션 전략 등 우아한 실패 방식을 정의한다.</p></p>
<p data-ke-size="size16"><h3 data-ke-size="size20">10. Internationalisation — 국제화 (12개 항목)</h3></p>
<p data-ke-size="size16"><p data-ke-size="size16">lang 속성, 로케일-aware 날짜/숫자 포맷,RTL 언어 지원, 번역 콘텐츠 구조 등을 다룬다.</p></p>
<p data-ke-size="size16"><h2 data-ke-size="size23">사용 흐름: Audit → Learn → Improve</h2></p>
<p data-ke-size="size16"><p data-ke-size="size16">이 명세는 단순히 읽는 것이 아니라 <strong>활용하는 것</strong>을 목표로 한다.</p></p>
<p data-ke-size="size16"><table></p>
<p data-ke-size="size16"><tr><th>단계</th><th>설명</th></tr></p>
<p data-ke-size="size16"><tr><td><strong>01 Audit</strong></td><td>체크리스트를 훑으며 "이 사이트가 이것을 하는가 — 예/아니오"로 확인</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>02 Learn</strong></td><td>각 항목에서 무엇인지, 왜 중요한지, 어떻게 구현하는지 확인</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>03 Improve</strong></td><td>빠진 부분, 오래된 사실, 누락된 주제를 찾으면 출처를 붙여 PR 열기</td></tr></p>
<p data-ke-size="size16"></table></p>
<p data-ke-size="size16"><p data-ke-size="size16">모든 페이지에 Edit on GitHub 링크가 있어 커뮤니티 기여도 가능하다.</p></p>
<p data-ke-size="size16"><h2 data-ke-size="size23">실무 적용: 기존 사이트심례</h2></p>
<p data-ke-size="size16"><p data-ke-size="size16">자는 최근 로컬 모델(Qwen3.6 27B)을 이용해 오래된 Hugo 사이트를 분석했다. 명세의 체크리스트를 에이전트에 전달하자, 빠진 필수 항목을 자동으로 식별하고 할 일 목록을 만들었다.자가 검토하는 구조로 운영하니 빠진 favicon도 로고에서 직접리어서 만들어줬다고 한다.</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">이처럼 <strong>명세를 에이전트에게 전달하면 실제 구현까지 연결</strong>될 수 있다. 특히 llms.txt를 통해 에이전트가 원시 Markdown 버전을 참조하고, 사람은 보기 좋은 웹페이지를 보는 구조는 효율적이다.</p></p>
<p data-ke-size="size16"><h2 data-ke-size="size23">비판적 시각</h2></p>
<p data-ke-size="size16"><p data-ke-size="size16">모든 평가가 긍정적인 것은 아니다. Hacker News 댓글에서는 다음과 같은 우려도 제기된다:</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <strong>128개 항목은 부담이 될 수 있다</strong> — 웹 개발자를 겁먹게 만들지 않을까</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <strong>Agent Readiness는 영구적이지 않을 수 있다</strong> — 망참자가 곧 에이전트 접근을 자동화의 위협으로 인식할 가능성이 있다</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <strong>일부 문장은 AI 생성스럽게 보인다</strong> — 긴 대시, 반복 패턴 등</p></p>
<p data-ke-size="size16"><p data-ke-size="size16">다만 전체 목록을 읽어보면 Agent 섹션을 제외한 나머지는 탄탄한 웹 위생을 명확히 전달하고 있어, 성장기 웹 개발자에게 보내기엔 괜찮다는 평가도 있다.</p></p>
<p data-ke-size="size16"><h2 data-ke-size="size23">핵심 정리</h2></p>
<p data-ke-size="size16"><table></p>
<p data-ke-size="size16"><tr><th>항목</th><th>내용</th></tr></p>
<p data-ke-size="size16"><tr><td><strong>주제 수</strong></td><td>10개 영역 128개 항목</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>대상</strong></td><td>사람 + AI 에이전트</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>레퍼런스</strong></td><td>WHATWG, W3C, IETF RFCs, WCAG, MDN</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>활용</strong></td><td>MCP 서버, Agent Skill, llms.txt</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>플랫폼</strong></td><td>WordPress, Next.js, Hugo, Django, 순수 HTML 등</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>분포</strong></td><td>Foundations 14, SEO 13, Accessibility 20, Security 12, Well-Known URIs 9, Agent Readiness 18, Performance 19, Privacy 6, Resilience 5, Internationalisation 12</td></tr></p>
<p data-ke-size="size16"><tr><td><strong>비용</strong></td><td>무료, 공개, 읽기 전용 MCP 서버 무인증 제공</td></tr></p>
<p data-ke-size="size16"></table></p>
<p data-ke-size="size16"><p data-ke-size="size16">좋은 웹사이트가 갖추어야 할 기술 요소를 플랫폼 독립적으로 정리한 The Website Specification. 웹 개발자라면 한 번 훑어볼 가치가 있다.</p></p>
<p data-ke-size="size16"><hr/></p>
<p data-ke-size="size16"><p data-ke-size="size16"><strong>📚 출처</strong></p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <a href="https://specification.website/" target="_blank">The Website Specification</a></p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <a href="https://news.hada.io/topic?id=30066" target="_blank">GeekNews 원본</a></p><hr/></p>
<p data-ke-size="size16"><p data-ke-size="size16"><strong>📚 출처</strong></p></p>
<p data-ke-size="size16"><p data-ke-size="size16">• <a href="https://news.hada.io/topic?id=30066" target="_blank" rel="nofollow">https://news.hada.io/topic?id=30066</a></p></p></div>
<!-- System - START -->
<!-- System - END -->
<script onerror="changeAdsenseToNaverAd()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script>
<!-- inventory -->
<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 = '//sigco.tistory.com/reaction';
window.ReactionReqBody = {
entryId: 601
}</script>
<div class="wrap_btn" id="reaction-601" 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="601" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세" data-description="The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세웹사이트를 만들 때 어떤 기술 요소를확해야 하는지, 플랫폼과 무관하게 정리한 명세가 등장했다. 바로 The Website Specification다. 부터 llms.txt까지, WHATWG·W3C·IETF RFCs·WCAG·MDN 등 현대 웹 표준을 레퍼런스로 삼아 10개 영역 128개 항목을쿠로 제공한다.왜 이런 명세가 필요한가현대 웹사이트는 다양한 방식으로 배포된다. WordPress, Drupal, TYPO3, Next.js, Astro, Hugo, Django, 또는 순수 HTML까지. 배포 방식이 다르더라도 웹사이트가최소한.." data-profile-image="https://tistory1.daumcdn.net/tistory/5587853/attach/74a49fd5bf3c4915b4d4923081cc4f71" data-profile-name="노동1호" data-pc-url="https://sigco.tistory.com/601" data-relative-pc-url="/601" data-blog-title="ICBM의 Dev 블로그"><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="601" 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="5587853" data-url="https://sigco.tistory.com/601" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">ICBM의 Dev 블로그</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div>
</div>
<!-- PostListinCategory - START -->
<div class="another_category another_category_color_gray">
<h4>'<a href="/category/AI%20%EB%89%B4%EC%8A%A4">AI 뉴스</a>' 카테고리의 다른 글</h4>
<table>
<tr>
<th><a href="/603">ADHD 증폭기로서의 바이브코딩 — 생산성을 높이다가 오히려 지치는 이유</a> <span>(1)</span></th>
<td>2026.06.02</td>
</tr>
<tr>
<th><a href="/602">노란 벽돌길에서 죽음을 피하는 법 — 앱 레이어는 아직 죽지 않았다</a> <span>(0)</span></th>
<td>2026.06.02</td>
</tr>
<tr>
<th><a href="/600">AI 시대의 소프트웨어 장인정신, 코드의 종말이 아니라 진화다</a> <span>(0)</span></th>
<td>2026.06.02</td>
</tr>
<tr>
<th><a href="/599">United Airlines 767, Bluetooth 이름이 경보를 촉발해 Newark로 회항</a> <span>(0)</span></th>
<td>2026.06.02</td>
</tr>
<tr>
<th><a href="/598">EY 캐나다 사이버보안 보고서, 인용의 72%가 환각이었다</a> <span>(0)</span></th>
<td>2026.06.02</td>
</tr>
</table>
</div>
<!-- PostListinCategory - END -->
</div>
<!-- article-footer -->
<div class="article-footer">
<div class="article-page">
<h3 class="title-footer">'AI 뉴스'의 다른글</h3>
<ul>
<li>
</li>
<li><span>현재글</span><strong>The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세</strong></li>
<li>
</li>
</ul>
</div>
<!-- article-related -->
<div class="article-related">
<h3 class="title-footer">관련글</h3>
<ul class="list-related">
<li class="item-related">
<a href="/603?category=1219746" class="link-related">
<span class="thumnail" style="background-image:url('')"></span>
<div class="box_content">
<strong>ADHD 증폭기로서의 바이브코딩 — 생산성을 높이다가 오히려 지치는 이유</strong>
<span class="date">2026.06.02</span>
</div>
</a>
</li>
<li class="item-related">
<a href="/602?category=1219746" class="link-related">
<span class="thumnail" style="background-image:url('')"></span>
<div class="box_content">
<strong>노란 벽돌길에서 죽음을 피하는 법 — 앱 레이어는 아직 죽지 않았다</strong>
<span class="date">2026.06.02</span>
</div>
</a>
</li>
<li class="item-related">
<a href="/600?category=1219746" class="link-related">
<span class="thumnail" style="background-image:url('')"></span>
<div class="box_content">
<strong>AI 시대의 소프트웨어 장인정신, 코드의 종말이 아니라 진화다</strong>
<span class="date">2026.06.02</span>
</div>
</a>
</li>
<li class="item-related">
<a href="/599?category=1219746" class="link-related">
<span class="thumnail" style="background-image:url('')"></span>
<div class="box_content">
<strong>United Airlines 767, Bluetooth 이름이 경보를 촉발해 Newark로 회항</strong>
<span class="date">2026.06.02</span>
</div>
</a>
</li>
</ul>
</div>
<!-- // article-related -->
<!-- article-reply -->
<div class="article-reply">
<div class="area-reply">
<div data-tistory-react-app="Namecard"></div>
</div>
</div>
<!-- // article-reply -->
</div>
<!-- // article-footer -->
<!-- // s_article_rep -->
<!-- s_article_protected / 개별 보호글 페이지 -->
<!-- // s_article_protected -->
<!-- s_page_rep -->
<!-- // s_page_rep -->
<!-- s_notice_rep / 개별 공지사항 페이지 -->
<!-- // s_notice_rep -->
<!-- s_tag / 개별 태그 페이지-->
<!-- // s_tag -->
<!-- s_local / 개별 위치로그 페이지 -->
<!-- // s_local -->
<div class="article-reply">
<div class="area-reply">
<!-- s_guest / 개별 방명록 페이지 -->
</div>
</div>
<!-- s_paging -->
<!-- // s_paging -->
</div>
<!-- area-view -->
<!-- s_cover_group / 커버 리스트 -->
<!-- // s_cover_group -->
</div>
<!-- // area-main -->
<!-- aside -->
<aside class="area-aside">
<!-- sidebar 01 -->
<!-- 프로필 -->
<div class="box-profile " style="background-image:url('');">
<div class="inner-box">
<img src="https://tistory1.daumcdn.net/tistory/5587853/attach/74a49fd5bf3c4915b4d4923081cc4f71" class="img-profile" alt="프로필사진">
<p class="tit-g">ICBM의 Dev 블로그</p>
<p class="text-profile"></p>
<!-- 블로그 소유자 접속시 보여지는 버튼 -->
<div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="5587853" data-url="https://sigco.tistory.com" data-device="web_pc"><strong class="txt_tool_id">ICBM의 Dev 블로그</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div>
<!-- 블로그 소유자가 아닌 경우 보여지는 버튼 그룹 -->
<div class="profile-btn-group visitor">
<button type="button" class="btn-g btn-primary btn-write">글쓰기</button>
<button type="button" class="btn-g btn-blog-manage">블로그 관리</button>
</div>
<div class="box-sns">
</div>
</div>
</div>
<!-- sidebar 02 -->
<!-- 카테고리 메뉴 -->
<div class="box-category box-category-2depth">
<nav>
<ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(1082)</span> <img alt="N" src="https://tistory1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif" style="vertical-align:middle;padding-left:2px;"/></a>
<ul class="category_list"><li class=""><a href="/category/AI%20%EB%89%B4%EC%8A%A4" class="link_item"> AI 뉴스 <span class="c_cnt">(893)</span> <img alt="N" src="https://tistory1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif" style="vertical-align:middle;padding-left:2px;"/></a></li>
<li class=""><a href="/category/%EA%B0%9C%EB%B0%9C%20%ED%8C%81" class="link_item"> 개발 팁 <span class="c_cnt">(21)</span> </a></li>
<li class=""><a href="/category/%EC%9E%90%EB%8F%99%ED%99%94%26%ED%88%B4%20%EB%A6%AC%EB%B7%B0" class="link_item"> 자동화&툴 리뷰 <span class="c_cnt">(150)</span> <img alt="N" src="https://tistory1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif" style="vertical-align:middle;padding-left:2px;"/></a></li>
<li class=""><a href="/category/%ED%88%AC%EC%9E%90%26%EA%B2%BD%EC%A0%9C" class="link_item"> 투자&경제 <span class="c_cnt">(9)</span> </a></li>
<li class=""><a href="/category/%EC%95%84%EC%9D%B4%EB%94%94%EC%96%B4" class="link_item"> 아이디어 <span class="c_cnt">(4)</span> </a></li>
<li class=""><a href="/category/%EA%B8%B0%ED%83%80" class="link_item"> 기타 <span class="c_cnt">(5)</span> </a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- 태그 -->
<div class="box-tag">
<h3 class="title-sidebar">Tag</h3>
<div class="box_tag">
<a href="/tag/MCP" class="cloud4">MCP,</a>
<a href="/tag/ChatGPT" class="cloud4">ChatGPT,</a>
<a href="/tag/%EC%BD%94%EB%94%A9%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8" class="cloud4">코딩에이전트,</a>
<a href="/tag/Anthropic" class="cloud4">Anthropic,</a>
<a href="/tag/%EA%B0%9C%EB%B0%9C%EB%8F%84%EA%B5%AC" class="cloud4">개발도구,</a>
<a href="/tag/claudecode" class="cloud4">claudecode,</a>
<a href="/tag/%EA%B0%9C%EB%B0%9C%EC%9E%90" class="cloud4">개발자,</a>
<a href="/tag/claude%20code" class="cloud4">claude code,</a>
<a href="/tag/OpenAI" class="cloud4">OpenAI,</a>
<a href="/tag/%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4" class="cloud4">오픈소스,</a>
<a href="/tag/AI%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8" class="cloud4">AI에이전트,</a>
<a href="/tag/gemini" class="cloud4">gemini,</a>
<a href="/tag/Ai" class="cloud1">Ai,</a>
<a href="/tag/%EC%9E%90%EB%8F%99%ED%99%94" class="cloud4">자동화,</a>
<a href="/tag/%EB%B3%B4%EC%95%88" class="cloud4">보안,</a>
<a href="/tag/%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8" class="cloud4">에이전트,</a>
<a href="/tag/Codex" class="cloud4">Codex,</a>
<a href="/tag/Google" class="cloud4">Google,</a>
<a href="/tag/llm" class="cloud3">llm,</a>
<a href="/tag/Claude" class="cloud4">Claude,</a>
</div>
</div>
<!-- 최근글과 인기글-->
<div class="box-recent">
<h3 class="title-sidebar blind">최근글과 인기글</h3>
<ul class="tab-recent">
<li class="tab-button recent_button on"><a class="tab-button" href="#" onclick="return false;">최근글</a></li>
<li class="tab-button sidebar_button"><a class="tab-button" href="#" onclick="return false;">인기글</a></li>
</ul>
<ul class="list-recent">
</ul>
<ul class="list-recent list-tab" style="display: none">
</ul>
</div>
<!-- 최근댓글 -->
<div class="box-reply">
<h3 class="title-sidebar">최근댓글</h3>
<ul class="list-sidebar">
</ul>
</div>
<!-- 공지사항 -->
<div class="box-notice">
<h3 class="title-sidebar">공지사항</h3>
<ul class="list-sidebar">
</ul>
</div>
<!-- 페이스북 트위터 플러그인 -->
<div class="box-plugins">
<h3 class="title-sidebar blind">페이스북 트위터 플러그인</h3>
<ul class="tab-sns">
<li class="tab-button item-facebook on"><a class="tab-button" href="#" onclick="return false;">Facebook</a></li>
<li class="tab-button item-twitter"><a class="tab-button" href="#" onclick="return false;">Twitter</a></li>
</ul>
<div class="plugin-facebook">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2&appId=360877073936113&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="" class="fb-xfbml-parse-ignore"><a href=""></a></blockquote>
</div>
</div>
<div class="plugin-twitter" style="display: none;">
<a class="twitter-timeline" href=""></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<!-- 글 보관함 -->
<div class="box-archive">
<h3 class="title-sidebar">Archives</h3>
<ul class="list-sidebar">
</ul>
</div>
<!-- 달력 모듈-->
<div class="box-calendar">
<h3 class="title-sidebar"><span class="blind">Calendar</span></h3>
<div class="inner-calendar"><table class="tt-calendar" cellpadding="0" cellspacing="1" style="width: 100%; table-layout: fixed">
<caption class="cal_month"><a href="/archive/202607" title="1개월 앞의 달력을 보여줍니다.">«</a> <a href="/archive/202608" title="현재 달의 달력을 보여줍니다.">2026/08</a> <a href="/archive/202609" title="1개월 뒤의 달력을 보여줍니다.">»</a></caption>
<thead>
<tr>
<th class="cal_week2">일</th>
<th class="cal_week1">월</th>
<th class="cal_week1">화</th>
<th class="cal_week1">수</th>
<th class="cal_week1">목</th>
<th class="cal_week1">금</th>
<th class="cal_week1">토</th>
</tr>
</thead>
<tbody>
<tr class="cal_week">
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day cal_day3"><a href="/archive/20260801" class="cal_click">1</a></td>
</tr>
<tr class="cal_week">
<td class="cal_day cal_day3 cal_day_sunday"><a href="/archive/20260802" class="cal_click">2</a></td>
<td class="cal_day cal_day3"><a href="/archive/20260803" class="cal_click">3</a></td>
<td class="cal_day cal_day3"><a href="/archive/20260804" class="cal_click">4</a></td>
<td class="cal_day cal_day3"><a href="/archive/20260805" class="cal_click">5</a></td>
<td class="cal_day cal_day3"><a href="/archive/20260806" class="cal_click">6</a></td>
<td class="cal_day cal_day3"><a href="/archive/20260807" class="cal_click">7</a></td>
<td class="cal_day cal_day3">8</td>
</tr>
<tr class="cal_week">
<td class="cal_day cal_day3 cal_day_sunday">9</td>
<td class="cal_day cal_day3"><a href="/archive/20260810" class="cal_click">10</a></td>
<td class="cal_day cal_day3"><a href="/archive/20260811" class="cal_click">11</a></td>
<td class="cal_day cal_day4"><a href="/archive/20260812" class="cal_click">12</a></td>
<td class="cal_day cal_day3">13</td>
<td class="cal_day cal_day3">14</td>
<td class="cal_day cal_day3">15</td>
</tr>
<tr class="cal_week">
<td class="cal_day cal_day3 cal_day_sunday">16</td>
<td class="cal_day cal_day3">17</td>
<td class="cal_day cal_day3">18</td>
<td class="cal_day cal_day3">19</td>
<td class="cal_day cal_day3">20</td>
<td class="cal_day cal_day3">21</td>
<td class="cal_day cal_day3">22</td>
</tr>
<tr class="cal_week">
<td class="cal_day cal_day3 cal_day_sunday">23</td>
<td class="cal_day cal_day3">24</td>
<td class="cal_day cal_day3">25</td>
<td class="cal_day cal_day3">26</td>
<td class="cal_day cal_day3">27</td>
<td class="cal_day cal_day3">28</td>
<td class="cal_day cal_day3">29</td>
</tr>
<tr class="cal_week">
<td class="cal_day cal_day3 cal_day_sunday">30</td>
<td class="cal_day cal_day3">31</td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
<td class="cal_day1 cal_day2"> </td>
</tr>
</tbody>
</table></div>
</div>
<!-- 방문자수 -->
<div class="box-visit">
<h3 class="title-sidebar"><span class="blind">방문자수</span>Total</h3>
<p class="text-total"></p>
<ul>
<li class="item-visit">Today : </li>
<li class="item-visit">Yesterday : </li>
</ul>
</div>
<!-- search-bar for MOBILE -->
<div class="util use-sidebar">
<div class="search">
<label for="searchInput" class="screen_out">블로그 내 검색</label>
<input id="searchInput" class="searchInput" type="text" name="search" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { requestSearch('.util.use-sidebar .searchInput') }">
</div>
</div>
</aside>
<!-- // aside -->
</main>
<!-- // main -->
</div>
<!-- // container -->
<!-- footer -->
<footer id="footer">
<div class="inner-footer">
<div class="box-policy">
</div>
<div>
<p class="text-info">Copyright © Daum Corp. All rights reserved.</p>
<address></address>
</div>
<div class="box-site">
<button type="button" data-toggle="xe-dropdown" aria-expanded="false">관련사이트</button>
<ul>
<li class="on"><a href="https://www.notion.so/Dev-24976f2e9097809caecdebede4ee8e2c" target="_blank">AI뉴스 스크랩</a></li>
<li class="on"><a href="https://github.com/sigco3111" target="_blank">GitHub 저장소</a></li>
</ul>
</div>
</div>
</footer>
<!-- // footer -->
</div>
<!-- // wrap -->
<div class="#menubar menu_toolbar ">
<h2 class="screen_out">티스토리툴바</h2>
<div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="5587853" data-url="https://sigco.tistory.com" data-device="web_pc"><strong class="txt_tool_id">ICBM의 Dev 블로그</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div>
<div class="#menubar menu_toolbar "></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>
<!-- DragSearchHandler - START -->
<script src="//search1.daumcdn.net/search/statics/common/js/fe/search-library-workspace/drag-search/1.0.2/main.js"></script>
<!-- DragSearchHandler - END -->
<!-- SyntaxHighlight - START -->
<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>
<!-- SyntaxHighlight - END -->
<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-d748cfd5e0a0f73a4f05afc297a1e4fc6364eea5/static/script/common.js"></script>
<script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5587853-601","customProps":{"userId":"0","blogId":"5587853","entryId":"601","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"601","entryTitle":"The Website Specification — 좋은 웹사이트를 위한 플랫폼 독립 명세","entryType":"POST","categoryName":"AI 뉴스","categoryId":"1219746","serviceCategoryName":"IT 인터넷","serviceCategoryId":401,"author":"5570022","authorNickname":"노동1호","blogNmae":"ICBM의 Dev 블로그","image":"","plink":"/601","tags":["AI에이전트","MCP","SEO","W3C","whatwg","스펙","웹개발","웹표준","접근성","표준"]},"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>