Using microdata in HTML

김동현·2026년 3월 2일

mdn 학습 번역 - HTML

목록 보기

22/31

HTML에서 마이크로데이터(Microdata) 사용하기 (Using microdata in HTML)

마이크로데이터(Microdata)는 WHATWG HTML 표준의 일부로, 웹 페이지의 기존 콘텐츠 안에 메타데이터를 중첩해서 넣을 때 사용해요. 검색 엔진이나 웹 크롤러가 웹 페이지에서 이 마이크로데이터를 추출하고 처리해서, 유저들에게 훨씬 풍부한 브라우징 경험을 제공할 수 있게 도와주죠.

검색 엔진들은 이런 구조화된 데이터에 직접 접근하는 걸 굉장히 좋아하는데요, 왜냐하면 이를 통해 검색 엔진이 웹 페이지에 담긴 정보를 완벽하게 이해하고 유저들에게 더 관련성 높은 결과를 보여줄 수 있기 때문이에요. 마이크로데이터는 특정 항목(item)을 설명하기 위한 지원 어휘(vocabulary)를 사용하고, 그 항목의 속성(properties)에 값을 할당하기 위해 이름-값 쌍(name-value pairs)을 사용합니다. 쉽게 말해, 기계가 읽을 수 있는 태그를 HTML 요소에 선언적으로 달아주는 시도라고 볼 수 있어요. (기존에 있던 RDFa나 마이크로포맷(microformats) 방식과 비슷한 접근법이랍니다.)

👨‍🏫 강사의 부연 설명:

우리가 <p>Angry Birds</p>라고만 쓰면 브라우저는 그저 텍스트로 보여주지만, 검색 엔진 입장에서는 이게 새 이름인지, 영화 제목인지, 게임 이름인지 알 길이 없어요. 이때 마이크로데이터를 사용해 "이건 소프트웨어 애플리케이션이고, 이름은 Angry Birds야!"라고 기계(검색 엔진)에게 친절하게 설명해 주는 것이 핵심입니다.

크게 보면 마이크로데이터는 여러 개의 이름-값 쌍 그룹으로 이루어져 있어요. 이 그룹들을 항목(items)이라고 부르고, 각각의 이름-값 쌍을 속성(property)이라고 부릅니다. 이 항목과 속성들은 우리가 흔히 쓰는 일반적인 HTML 요소들로 표현돼요.

항목(item)을 만들 때는 itemscope 속성을 사용해요.
만들어진 항목에 속성을 추가할 때는, 해당 항목의 자손 요소 중 하나에 itemprop 속성을 사용하면 됩니다.

어휘 (Vocabularies)

구글을 비롯한 주요 검색 엔진들은 구조화된 데이터를 위해 Schema.org 어휘(vocabulary)를 지원하고 있어요. 이 어휘는 표준화된 타입 이름과 속성 이름의 세트를 정의합니다.

예를 들어, Schema.org Music Event는 콘서트 공연을 의미하고, 콘서트의 핵심 정보들을 명시하기 위해 startDate(시작일)와 location(장소) 같은 속성들을 가지고 있어요. 이 경우, itemtype 속성에는 Schema.org Music Event URL이 사용되고, startDate와 location은 이 어휘에서 정의한 itemprop 값이 되는 거예요.

참고:
itemtype 속성에 대한 더 자세한 정보는 https://schema.org/Thing에서 확인하실 수 있어요.

마이크로데이터 어휘는 항목(Item)의 의미론(semantics)이나 의미를 제공해 줘요. 우리 같은 웹 개발자들은 직접 커스텀 어휘를 설계할 수도 있고, 널리 사용되는 schema.org처럼 웹에 이미 공개된 어휘를 가져다 쓸 수도 있습니다. Schema.org에 가보면 일반적으로 많이 쓰이는 마크업 어휘 모음이 쫙 준비되어 있답니다.

자주 사용되는 어휘들:

창작물 (Creative works): CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
삽입된 비 텍스트 객체 (Embedded non-text objects): AudioObject, ImageObject, VideoObject
이벤트: Event
건강 및 의학 타입: MedicalEntity 아래에 있는 건강/의학 타입 관련 사항들
조직/기관: Organization
인물: Person
장소: Place, LocalBusiness, Restaurant
제품: Product, Offer, AggregateOffer
리뷰: Review, AggregateRating
행동: Action
사물 (가장 기본이 되는 타입): Thing
무형의 것: Intangible

구글, 마이크로소프트, 야후! 같은 대형 검색 엔진 운영사들은 검색 결과를 개선하기 위해 이 schema.org 어휘에 크게 의존하고 있어요. 목적에 따라서는 그냥 임시로 만든 어휘로도 충분할 때가 있고, 어떤 경우에는 완전히 새로운 어휘를 직접 설계해야 할 수도 있죠. 하지만 가급적이면 기존에 있는 어휘들을 재사용하는 것을 권장해요. 그래야 콘텐츠를 다른 곳에서도 쉽게 재사용할 수 있으니까요.

지역화 (Localization)

경우에 따라, 특정 지역을 서비스하는 검색 엔진들은 해당 지역에 특화된 마이크로데이터 확장 기능을 제공하기도 해요.

예를 들어, 러시아의 메이저 검색 엔진인 Yandex는 hCard(회사 연락처 정보), hRecipe(음식 레시피), hReview(시장 리뷰), hProduct(제품 데이터) 같은 마이크로포맷을 지원하면서, 동시에 용어 정의와 백과사전 문서를 위한 자체 포맷도 제공하고 있어요. 이런 확장 기능을 만든 이유는 키릴 문자와 라틴 문자 사이의 음역(transliteration) 문제를 해결하기 위해서였죠. Schema의 어휘에 추가적인 마킹 파라미터들을 구현한 덕분에, 러시아어 웹 페이지들의 정보 색인 작업이 훨씬 더 성공적으로 이루어질 수 있게 되었답니다.

전역 속성 (Global attributes)

이 속성들은 마이크로데이터를 다룰 때 HTML 태그에 직접 붙여서 사용하는 핵심 전역 속성들입니다!

itemid – 항목의 고유한 전역 식별자입니다.
itemprop – 항목에 속성을 추가할 때 사용해요. 모든 HTML 요소는 itemprop 속성을 가질 수 있고, 하나의 itemprop은 이름과 값 쌍으로 구성됩니다.
itemref – itemscope 속성을 가진 요소의 직계 자손이 아닌 속성들도 itemref를 사용하면 해당 항목과 연결할 수 있어요. 문서의 다른 곳에 있는 추가 속성들을 가진 요소들의 id 목록(itemid가 아님!)을 제공해 줍니다.
itemscope – 이 속성은 보통 itemtype과 짝꿍으로 쓰여요. 해당 블록 안에 있는 HTML이 특정 항목에 대한 내용이라는 것을 명시해주죠. itemscope는 항목(Item)을 생성하고, 그것과 연결된 itemtype의 유효 범위를 정의해 줍니다. itemtype 속성값으로는 그 항목과 속성의 맥락을 설명해 주는 어휘의 유효한 URL(예: schema.org 링크)이 들어갑니다.
itemtype – 데이터 구조 내에서 itemprop(항목 속성들)을 정의할 때 사용할 어휘의 URL을 지정해요. itemscope 속성이 데이터 구조 안에서 이 어휘가 활성화될 범위를 설정하는 역할을 합니다.

예제 (Example)

HTML

Play (Run example in MDN Playground)

<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
    itemprop="applicationCategory"
    href="https://schema.org/SoftwareApplication" />

  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

구조화된 데이터 (Structured data)

코드로 작성된 데이터가 내부적으로 어떻게 매핑되는지 보여주는 표입니다.


itemscope	itemtype	SoftwareApplication (https://schema.org/SoftwareApplication)
	itemprop	name	Angry Birds
	itemprop	operatingSystem	ANDROID
	itemprop	applicationCategory	SoftwareApplication (https://schema.org/SoftwareApplication)
itemscope	itemprop[itemtype]	aggregateRating [AggregateRating]
	itemprop	ratingValue	4.6
	itemprop	ratingCount	8864
itemscope	itemprop[itemtype]	offers [Offer]
	itemprop	price	1.00
	itemprop	priceCurrency	USD

결과 (Result)

Play (Run example in MDN Playground)

참고:
HTML에서 마이크로데이터 구조를 추출하고 제대로 작성되었는지 검증해 볼 수 있는 아주 유용한 도구로 Schema Markup Validator가 있습니다. 위에서 본 HTML 예제 코드를 복사해서 직접 테스트해 보세요!

👨‍🏫 강사의 실무 & 면접 팁 💡

마이크로데이터(Microdata)는 프론트엔드 개발의 꽃 중 하나인 SEO(검색엔진 최적화)와 아주 밀접한 관련이 있습니다. 화면을 예쁘게 그리는 것도 중요하지만, 검색 결과에 우리 서비스가 얼마나 매력적으로 노출되느냐가 트래픽에 엄청난 영향을 주거든요.

새로운 포트폴리오 프로젝트를 개발하실 때, 이 마이크로데이터(또는 요즘 더 널리 쓰이는 JSON-LD 방식의 구조화된 데이터)를 한 번 쓱 끼워 넣어 보세요. 블로그 글 데이터라면 Schema.org/Article을, 번역 서비스 도구라면 Schema.org/SoftwareApplication을 적용해 볼 수 있겠죠.

나중에 면접 자리에 가셨을 때, 단순히 "화면을 잘 구현했습니다"가 아니라 "크롤러와 검색 엔진이 프로젝트의 콘텐츠를 정확하게 이해할 수 있도록 마이크로데이터를 적용하여 SEO를 최적화했습니다" 라고 어필해 보세요. 면접관분들 입장에서 '아, 이 지원자는 웹 표준과 서비스의 실제 운영 관점까지 고민하는 실무형 인재구나!'라는 깊은 인상을 받으실 겁니다. 취업 준비 과정에서 아주 강력한 무기가 될 테니 꼭 기억해 두세요! 응원합니다!