HTML에서 마이크로포맷(microformats) 사용하기
마이크로포맷(Microformats)은 HTML 문서 안에 의미(semantics)와 구조화된 데이터를 포함하기 위해 사용되는 표준 규약이에요. 소셜 웹 애플리케이션, 검색 엔진, 데이터 수집기(aggregator), 그리고 기타 다양한 도구들에서 활용할 수 있는 API를 제공해주죠.
이러한 최소한의 HTML 패턴들은 사람, 조직, 이벤트, 장소처럼 아주 기본적인 정보부터 특정 도메인(분야)에 국한된 정보까지 다양한 형태의 데이터(엔티티)를 마크업하는 데 쓰인답니다.
- 마이크로포맷 객체를 생성하려면
class속성에h-*형태의 클래스 이름을 사용해요. - 생성한 객체에 속성(property)을 추가하려면, 해당 객체의 자식 요소 중 하나에
p-*,u-*,dt-*,e-*같은 클래스 이름을 부여하면 됩니다.
마이크로포맷은 객체를 설명하기 위한 보조 어휘(vocabularies)와, 속성에 값을 할당하기 위한 이름-값 쌍(name-value pairs)을 사용해요. 여기서 속성들은 어떤 HTML 요소에든 자유롭게 추가할 수 있는 class 속성을 통해 전달되고, 데이터의 실제 값은 HTML 요소가 가진 콘텐츠와 시맨틱 속성들을 있는 그대로 재사용합니다.
Microformats2(가끔 mf2라고도 불려요)는 마이크로포맷의 최신 업데이트 버전이에요. 예전에 사용하던 RDFa나 microdata 같은 방식보다 HTML의 구조화된 구문과 어휘를 주석 처리하는 훨씬 개선된 방법을 제공하죠. 예전 방식들은 새로운 속성 문법들을 일일이 따로 배워야 하는 번거로움이 있었거든요.
현재 Microformats2를 위해 대부분의 프로그래밍 언어를 지원하는 오픈 소스 파싱 라이브러리들도 준비되어 있답니다.
💡 강사의 팁: > 우리가 React나 Next.js로 웹사이트를 만들 때 그저 화면에 UI를 예쁘게 그리는 것만 신경 쓰기 쉽죠? 하지만 프론트엔드 개발자로서 한 단계 더 도약하려면 이런 '시맨틱(의미론적) 마크업'과 '구조화된 데이터'에 관심을 가져야 해요. 특히 이력서용 개인 포트폴리오(예: 블로그, 도서 리뷰 사이트 등)를 만들 때 마이크로포맷을 적용해두면, 검색 엔진이 여러분의 사이트 정보를 훨씬 더 똑똑하게 읽어갈 수 있어서 SEO(검색 엔진 최적화) 측면에서 아주 강력한 무기가 된답니다! 기술 면접에서도 웹 표준과 접근성을 깊이 이해하고 있는 개발자라는 인상을 주기에 너무 좋은 주제예요.
마이크로포맷의 작동 방식 (How Microformats Work)
웹페이지 작성자는 자신이 작성한 HTML에 자유롭게 마이크로포맷을 추가할 수 있어요. 예를 들어, 웹페이지에서 자기 자신(사람)을 나타내고 싶다면 아래와 같은 h-card를 사용할 수 있습니다.
HTML 예시
<a class="h-card" href="https://alice.example.com">Alice Blogger</a>파서(parser, 데이터를 분석하는 프로그램)가 이 코드를 만나게 되면, 현재 페이지에 Alice Blogger라는 이름과 https://alice.example.com/이라는 URL을 가진 사람 혹은 조직을 설명하는 "명함(card)"이 있다는 것을 알게 됩니다. 그러면 파서는 이 데이터를 추출해 다양한 애플리케이션에서 활용할 수 있도록 API 형태로 제공해 줘요.
예를 들어 볼까요? 어떤 애플리케이션이 서비스에 가입한 사람의 프로필 정보를 자동으로 채워 넣기 위해, 사용자의 웹페이지에서 이 h-card를 스캔해서 가져올 수도 있는 거예요.
이 예시에서 볼 수 있듯이, 어떤 마크업 패턴들은 단 하나의 마이크로포맷 루트 클래스 이름만 필요로 합니다. 그러면 파서가 똑똑하게 알아서 name, url, photo 같은 보편적인 속성들을 찾아낸답니다.
마이크로포맷 사용 사례 (Microformats Use Cases)
마이크로포맷은 정말 무궁무진한 곳에 쓰일 수 있어요.
첫 번째로, Webmention 표준은 한 사이트에서 다른 사이트로 메시지나 댓글을 주고받는 방법을 제공하기 위해 마이크로포맷을 사용해요. Webmention 스펙은 풍부하고 상호 운용이 가능한 방식으로 메시지와 댓글을 발행하기 위해, 웹사이트들이 발행하고 또 소비할 수 있는 구체적인 속성들을 정의하고 있습니다. 또한 마이크로포맷은 Webmention과 함께 사용되어 '좋아요', '재게시(repost)', '북마크' 같은 소셜 반응들을 다른 웹사이트로 전송하는 기능도 가능하게 해줍니다.
두 번째로, 여러 사이트 간의 쉬운 콘텐츠 연동(syndication)을 가능하게 합니다. 데이터 수집기(aggregator)는 게시물의 제목, 본문, 작성자 같은 알짜배기 정보를 찾기 위해 마이크로포맷이 적용된 페이지를 파싱할 수 있어요. 그런 다음 수집한 시맨틱 정보를 사용해 자신의 사이트에 결과를 렌더링하는 거죠. 예를 들어, 뉴스 수집 앱이나 커뮤니티 게시판은 사용자의 제출을 쉽게 받고 마이크로포맷을 이용해 페이지에서 관련성 높은 콘텐츠만 쏙쏙 뽑아낼 수 있습니다. 더 나아가, 내 웹사이트가 소셜 네트워크 같은 타사 플랫폼에 콘텐츠를 게시해달라고 정교하게 만들어진 요청을 보낼 때도 사용할 수 있어요.
세 번째, 모든 주요 검색 엔진은 마이크로포맷을 읽고 해석하는 것을 훌륭하게 지원합니다. 검색 엔진은 이런 구조화된 데이터에 직접 접근하는 것을 아주 좋아해요. 왜냐하면 웹페이지 안에 담긴 텍스트가 진짜 어떤 '의미'를 가지는지 이해할 수 있게 되니까요. 검색 엔진은 이 정보를 바탕으로 사용자에게 훨씬 더 정확하고 관련성 높은 결과를 제공할 수 있습니다. 어떤 검색 엔진들은 마이크로포맷으로 제공된 데이터를 기반으로 검색 결과 페이지에 '별점(star ratings)' 같은 특별한 스니펫(리치 스니펫)을 예쁘게 보여주기도 한답니다.
마지막으로, 마이크로포맷은 기계가 읽기 쉬울 뿐만 아니라 코드를 작성하는 사람도 쉽게 읽고 이해할 수 있도록 설계되었어요. 이런 접근 방식 덕분에 우리 같은 개발자들이 마이크로포맷 데이터를 한눈에 파악하고 유지보수하기가 훨씬 수월하죠.
마이크로포맷 접두사 (Microformats Prefixes)
모든 마이크로포맷은 하나의 최상위 '루트(root)' 요소와 하위 속성(properties)들의 모음으로 이루어져 있어요. 여기서 속성들은 모두 선택 사항(optional)이고 하나의 속성이 여러 개의 값을 가질 수도 있습니다. 만약 애플리케이션이 딱 하나의 단일 값만 필요로 한다면, 해당 속성의 첫 번째 인스턴스(값)를 가져다 쓰면 됩니다. 계층적인 데이터는 중첩된(nested) 마이크로포맷을 통해 표현되는데, 보통 속성값 자체가 또 다른 마이크로포맷 덩어리가 되는 식이죠.
모든 마이크로포맷 클래스 이름은 접두사(Prefixes)를 사용합니다. 이 접두사들은 어휘(vocabularies)와는 독립적으로 작동하는 문법(syntax) 이며, 어휘는 그와 별개로 개발됩니다.
-
"h-*" : 루트(최상위) 클래스 이름에 사용 (예: "h-card", "h-entry", "h-feed" 등).
이 최상위 루트 클래스들은 보통 데이터의 '타입'과 그에 상응하여 예상되는 '속성 어휘'들을 나타냅니다.- h-card: 사람이나 조직을 설명해요.
- h-entry: 블로그 게시물처럼 에피소드 중심이거나 날짜가 찍혀 있는 온라인 콘텐츠를 설명해요.
- h-feed: 게시물들의 스트림이나 피드(목록)를 설명해요.
- 마이크로포맷2 위키에서 훨씬 더 다양하고 많은 어휘들을 찾아볼 수 있습니다.
-
"p-*" : 일반 (텍스트) 속성에 사용 (예: "p-name", "p-summary").
- 일반적인 텍스트 파싱을 담당하며, 주로 요소 안에 있는 텍스트 내용에 쓰입니다. 다만 특정 HTML 요소에서는 특수 속성(
img의alt속성,abbr의title속성 등)을 텍스트보다 먼저 파싱하여 사용하기도 합니다.
- 일반적인 텍스트 파싱을 담당하며, 주로 요소 안에 있는 텍스트 내용에 쓰입니다. 다만 특정 HTML 요소에서는 특수 속성(
-
"u-*" : URL 속성에 사용 (예: "u-url", "u-photo", "u-logo").
- 특수 파싱: 요소 안의 콘텐츠보다 HTML 속성들(
a태그의href,img의src,object의data등)을 우선적으로 파싱합니다.
- 특수 파싱: 요소 안의 콘텐츠보다 HTML 속성들(
-
"dt-*" : 날짜와 시간(datetime) 속성에 사용 (예: "dt-start", "dt-end", "dt-bday").
- 특수 파싱:
time요소의datetime속성을 주로 사용하며, 가치 클래스 패턴(value-class-pattern)을 활용하거나 가독성을 위해 날짜와 시간 값을 분리해서 파싱할 수 있습니다.
- 특수 파싱:
-
"e-*" : 요소 트리(element tree) 속성에 사용되며, 요소가 포함하고 있는 전체 계층 구조(HTML 마크업 전체)가 값이 됩니다 (예: "e-content").
- "e-" 접두사는 기억하기 쉽게 "element tree(요소 트리)", "embedded markup(내장된 마크업)", 또는 "encapsulated markup(캡슐화된 마크업)"의 약자라고 외우시면 편해요.
마이크로포맷 예시 (Some microformats examples)
이제 실제로 어떻게 코드를 작성하는지 예시를 통해 구체적으로 알아볼게요.
h-card
h-card 마이크로포맷은 특정 사람이나 단체(조직)를 나타냅니다.
각 속성의 값은 어떠한 HTML 요소든 가질 수 있는 범용적인 class 속성을 사용하여 정의됩니다.
h-card 예시
<p class="h-card">
<img class="u-photo" src="https://example.org/photo.png" alt="" />
<a class="p-name u-url" href="https://example.org">Joe Bloggs</a>
<a class="u-email" href="mailto:jbloggs@example.com">jbloggs@example.com</a>,
<span class="p-street-address">17 Austerstræti</span>
<span class="p-locality">Reykjavík</span>
<span class="p-country-name">Iceland</span>
</p>| 속성 (Property) | 설명 (Description) |
|---|---|
p-name | 사람 또는 조직의 전체 이름 (또는 형식이 지정된 이름) |
u-email | 이메일 주소 |
u-photo | 사람 또는 조직의 사진(프로필 이미지) |
u-url | 홈페이지 등 사람이나 조직을 대표하는 URL |
u-uid | 보편적으로 고유한 식별자 (일반적으로 고유한 표준 URL을 사용하는 것을 권장함) |
p-street-address | 번지수 및 도로명 주소 |
p-locality | 시/군/구 등의 지역 명칭 |
p-country-name | 국가 이름 |
중첩된 h-card 예시 (Nested h-card example)
<div class="h-card">
<a class="p-name u-url" href="https://blog.lizardwrangler.com">
Mitchell Baker
</a>
(<a class="p-org h-card" href="https://mozilla.org">Mozilla Foundation</a>)
</div>이 코드를 파서가 해석(파싱)한 JSON 결과는 다음과 같습니다:
{
"items": [
{
"type": ["h-card"],
"properties": {
"name": ["Mitchell Baker"],
"url": ["https://blog.lizardwrangler.com"],
"org": [
{
"value": "Mozilla Foundation",
"type": ["h-card"],
"properties": {
"name": ["Mozilla Foundation"],
"url": ["https://mozilla.org/"]
}
}
]
}
}
]
}이 예시에서는 '사람'과 그 사람이 대표하는 '조직' 모두에 대해 h-card가 지정되었어요. 즉, 링크된 조직과 그 사람의 소속(affiliation) 관계를 나타내기 위해 p-org 속성 안에 또 다른 h-card를 중첩시킨 것이죠.
참고: 중첩된 조직 h-card의 경우, <a href> 태그 위에 루트 클래스 이름만 단독으로 쓰인 다른 일반적인 h-card와 마찬가지로 'name'과 'url' 속성을 명시하지 않아도 암시적으로 가지게 됩니다.
h-entry
h-entry 마이크로포맷은 웹 공간에 존재하는 에피소드 기반 콘텐츠나 발행 날짜가 찍힌 콘텐츠를 나타냅니다. h-entry는 블로그 포스팅이나 짧은 메모처럼 다른 곳에 연동(syndicate)되도록 의도된 콘텐츠에 가장 흔하게 사용돼요.
블로그 게시물 형태의 h-entry 예시:
<article class="h-entry">
<h1 class="p-name">Microformats are amazing</h1>
<p>
Published by
<a class="p-author h-card" href="https://example.com">W. Developer</a> on
<time class="dt-published" datetime="2013-06-13 12:00:00">
13<sup>th</sup> June 2013
</time>
</p>
<p class="p-summary">In which I extoll the virtues of using microformats.</p>
<div class="e-content">
<p>Blah blah blah</p>
</div>
</article>속성 (Properties)
| 속성 (Property) | 설명 (Description) |
|---|---|
p-name | 게시물(엔트리)의 이름이나 제목 |
p-author | 게시물을 작성한 사람 (선택적으로 이 안에 h-card를 중첩하여 포함할 수 있음) |
dt-published | 게시물이 세상에 발행된 날짜/시간 |
p-summary | 게시물에 대한 짧은 요약 내용 |
e-content | 게시물의 본문(전체 콘텐츠 내용) |
답글(Reply) 형태의 파싱된 h-entry 예시
<div class="h-entry">
<p>
<span class="p-author h-card">
<a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
<img
class="u-photo"
alt="Greg McVerry"
src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" />
</a>
<a
class="p-name u-url"
href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
Greg McVerry
</a>
</span>
Replied to
<a
class="u-in-reply-to"
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats">
a post on <strong>developer.mozilla.org</strong>
</a>
:
</p>
<p class="p-name e-content">
Hey thanks for making this microformats resource
</p>
<p>
<a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
Greg McVerry
</a>
published this
<a
class="u-url url"
href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource">
<time class="dt-published" datetime="2019-05-31T14:19:09+0000">
31 May 2019
</time>
</a>
</p>
</div>이를 파싱한 JSON 결과:
{
"items": [
{
"type": ["h-entry"],
"properties": {
"in-reply-to": [
"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats"
],
"name": ["Hey thanks for making this microformats resource"],
"url": [
"https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"
],
"published": ["2019-05-31T14:19:09+0000"],
"content": [
{
"html": "Hey thanks for making this microformats resource",
"value": "Hey thanks for making this microformats resource",
"lang": "en"
}
],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Greg McVerry"],
"photo": [
"https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"
],
"url": [
"https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
]
},
"lang": "en",
"value": "Greg McVerry"
}
]
},
"lang": "en"
}
]
}h-feed
h-feed는 h-entry 게시물들이 나열된 스트림이나 피드를 뜻합니다. 홈페이지나 아카이브(저장소) 페이지에 있는 전체 게시물 목록이나, 게시물의 요약본을 모아둔 간단한 목록 등이 이에 해당해요.
h-feed 예시
<div class="h-feed">
<h1 class="p-name">Microformats Blogs</h1>
<article class="h-entry">
<h2 class="p-name">Microformats are amazing</h2>
<p>
Published by
<a class="p-author h-card" href="https://example.com">W. Developer</a> on
<time class="dt-published" datetime="2013-06-13 12:00:00">
13<sup>th</sup> June 2013
</time>
</p>
<p class="p-summary">
In which I extoll the virtues of using microformats.
</p>
<div class="e-content"><p>Blah blah blah</p></div>
</article>
</div>속성 (Properties)
| 속성 | 설명 |
|---|---|
p-name | 해당 피드의 이름 |
p-author | 해당 피드의 작성자 (선택적으로 h-card를 중첩해 포함 가능) |
자식 요소 (Children)
| 중첩된 h-entry | |
|---|---|
| 피드를 구성하는 개별 항목(item)들을 나타내는 객체들 |
h-event
h-event는 웹상에서 벌어지는 이벤트(행사, 모임 등)를 표현하기 위한 포맷입니다. 보통 이벤트 목록 리스트나 개별 이벤트 세부 페이지 모두에 폭넓게 사용된답니다.
<div class="h-event">
<h1 class="p-name">Microformats Meetup</h1>
<p>
From
<time class="dt-start" datetime="2013-06-30 12:00">
30<sup>th</sup> June 2013, 12:00
</time>
to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
<span class="p-location">Some bar in SF</span>
</p>
<p class="p-summary">
Get together and discuss all things microformats-related.
</p>
</div>속성 (Properties)
| 속성 | 설명 |
|---|---|
p-name | 이벤트 이름 (또는 행사 제목) |
p-summary | 해당 이벤트에 대한 짧은 요약 설명 |
dt-start | 이벤트가 시작되는 날짜/시간 |
dt-end | 이벤트가 종료되는 날짜/시간 |
p-location | 이벤트가 개최되는 장소 (선택적으로 h-card를 중첩해 포함 가능) |
파싱된 h-event 예시
<div class="h-event">
<h2 class="p-name">IndieWeb Summit</h2>
<time class="dt-start" datetime="2019-06-29T09:00:00-07:00">
June 29, 2019 at 9:00am (-0700)
</time>
<br />through
<time class="dt-end" datetime="2019-06-30T18:00:00-07:00">
June 30, 2019 at 6:00pm (-0700)
</time>
<br />
<div class="p-location h-card">
<div>
<span class="p-name">Mozilla</span>
</div>
<div>
<span class="p-street-address">1120 NW Couch St</span>,
<span class="p-locality">Portland</span>,
<span class="p-region">Oregon</span>,
<span class="p-country">US</span>
</div>
<data class="p-latitude" value="45.52345"></data>
<data class="p-longitude" value="-122.682677"></data>
</div>
<div class="e-content">Come join us</div>
<div>
<span class="p-author h-card">
<a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a>
</span>
Published this
<a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on
<time class="dt published" datetime="2019-05-25T18:00:00-07:00">
May 5th, 2019
</time>
</div>
</div>파싱된 JSON 결과:
{
"items": [
{
"type": ["h-event"],
"properties": {
"name": ["IndieWeb Summit"],
"url": ["https://aaronparecki.com/2019/06/29/1/"],
"author": [
{
"type": ["h-card"],
"properties": {
"name": ["Aaron Parecki"],
"url": ["https://aaronparecki.com"]
},
"lang": "en",
"value": "Aaron Parecki"
}
],
"start": ["2019-06-29T09:00:00-07:00"],
"end": ["2019-06-30T18:00:00-07:00"],
"published": ["2019-05-25T18:00:00-07:00"],
"content": [
{
"html": "Come join us",
"value": "Come join us",
"lang": "en"
}
],
"location": [
{
"type": ["h-card"],
"properties": {
"name": ["Mozilla"],
"p-street-address": ["1120 NW Couch St"],
"locality": ["Portland"],
"region": ["Oregon"],
"country": ["US"],
"latitude": ["45.52345"],
"longitude": ["-122.682677"]
},
"lang": "en",
"value": "Mozilla"
}
]
},
"lang": "en"
}
]
}마이크로포맷 rel 속성 예시 (Microformats rel property examples)
지금까지 배운 클래스 방식 외에도, 특별한 rel= 속성을 사용해 페이지에 적용되는 마이크로포맷들도 있어요. 이 마이크로포맷들은 현재 문서와 링크된 다른 문서 사이의 관계(relation)를 설명해줍니다. 전체 목록은 마이크로포맷 위키의 rel 속성(rel property) 페이지에서 자세히 확인할 수 있어요.
rel=author
이 속성은 해당 링크를 클릭했을 때 이동하는 문서가 현재 페이지의 작성자(author)를 나타낸다는 것을 명시합니다.
<a rel="author" href="https://jamesg.blog">James Gallagher</a>rel=license
이 속성은 링크된 문서에 현재 페이지가 발행된 라이선스(저작권/사용권) 정보가 담겨 있다는 것을 명시합니다.
<a rel="license" href="https://mit-license.org/">MIT License</a>rel=nofollow
이 속성은 링크된 문서가 현재 페이지로부터 파생될 수 있는 검색 엔진 랭킹 알고리즘의 어떠한 가중치(weight)도 넘겨받아서는 안 된다는 것을 명시합니다. 링크 그래프를 분석하는 알고리즘이 링크된 문서를 보고 불필요하게 높은 점수를 매기는 것을 방지할 때 아주 유용하죠.
<a rel="nofollow" href="https://jamesg.blog">James Gallagher</a>💡 강사의 특급 면접 팁!
혹시 입사 면접이나 프론트엔드 포지션 인터뷰를 준비 중이신가요? 면접관들이 종종 "웹 접근성이나 SEO 향상을 위해 마크업 단계에서 고민해 본 적이 있나요?" 또는 "rel="nofollow"속성은 어떤 역할을 하나요?"라고 묻곤 합니다.
rel="nofollow"는 내 사이트에 달린 스팸 댓글이나 신뢰할 수 없는 사용자가 남긴 링크 쪽으로 내 웹사이트의 소중한 '신뢰도 점수(Link Equity)'가 유출되는 것을 막기 위해 반드시 필요한 속성이에요. 면접에서 이런 디테일까지 꼼꼼하게 고려할 줄 아는 실무형 프론트엔드 개발자라는 점을 적극적으로 어필해 보세요!
브라우저 호환성 (Browser compatibility)
마이크로포맷은 class 속성과 이를 다루는 표준 DOM API를 기반으로 동작하기 때문에, 이를 지원하는 모든 브라우저에서 완벽하게 호환됩니다.
같이 보기 (See also)
학습을 더 확장하고 싶다면 아래 링크들을 참고해 보세요:
