[Web UI 기초 #부록] 시맨틱 태그 심화: Feedly와 RSS로 이해하는 <article>
✅ 들어가며
웹페이지에 보이는 콘텐츠 중, 블로그 글·뉴스 기사·포럼 게시글처럼 독립적으로 배포 가능하고 재사용 가능한 콘텐츠는 <article> 태그로 감쌉니다.
이번 글에서는 Feedly를 통해 RSS피드를 구독하는 방법을 안내하고, 동시에 <article> 태그의 개념과 실용성을 함께 이해해 보겠습니다.
📘 RSS란 무엇인가요?
위와 같은 로고를 본 적이 있는 사람도, 본 적이 없는 사람도 있을 것입니다. 블로그를 즐겨 보던 시절, 매일 자주 가는 웹사이트를 일일이 방문하지 않아도, 새 글이 올라오면 자동으로 내 구독함에 들어오던 그 기능… 기억나시나요?
티스토리, 네이버 블로그, 언론사 홈페이지까지 왼쪽 아래 구석 어딘가에 늘 붙어 있던 그 주황색 아이콘. 바로 RSS입니다.
RSS가 등장하며 여러 플랫폼에 흩어져 있는 콘텐츠를 ‘찾아가는’ 것이 아니라 하나의 피드로 ‘받아보는’ 방식으로 소비하기 시작했습니다. 이 경험이 웹에서 콘텐츠를 하나의 독립된 단위(article)로 다루는 필요성을 강화시켰고, 바로 그 구조화의 연장선상에서 HTML5의
<article>태그가 등장한 겁니다.
📌 정리
- RSS (Really Simple Syndication)는 웹 콘텐츠의 업데이트 정보를 자동으로 수집하는 기술입니다.
- RSS 피드는 구조화된 XML 데이터로 제공되며, 일반적으로 글 제목, 본문 요약, 링크, 작성일 등을 포함합니다.
- 웹페이지의 시맨틱 구조가 잘 정리되어 있다면, RSS 생성기나 리더기가 해당 글의 정보를 정확히 읽어낼 수 있습니다.
※ 이때 각 글이 <article>로 명확히 구분되어 있어야, RSS가 글 단위로 정확히 인식할 수 있습니다.
🤝 RSS는 어떻게 글을 찾아낼까?
RSS는 웹사이트의 각 포스트를 "콘텐츠 단위"로 추출해야 합니다.
이 콘텐츠 단위는 대부분 <article> 또는 <entry>와 같은 시맨틱 태그에 기반합니다.
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title>웹 UI 기초 블로그</title>
<link>https://yourblog.tistory.com</link>
<description>웹 UI 기초와 관련된 실용적인 콘텐츠를 제공합니다.</description>
<language>ko</language>
<lastBuildDate>Tue, 10 Jun 2025 09:00:00 +0900</lastBuildDate>
<item>
<title>[Web UI 기초] #1 HTML 시작하기</title>
<link>https://yourblog.tistory.com/entry/html-start</link>
<description>HTML의 기본 구조와 태그를 소개합니다.</description>
<pubDate>Mon, 09 Jun 2025 08:00:00 +0900</pubDate>
<guid>https://yourblog.tistory.com/entry/html-start</guid>
</item>
<item>
<title>[Web UI 기초] #2 시맨틱 태그란?</title>
<link>https://yourblog.tistory.com/entry/semantic-tags</link>
<description>시맨틱 태그의 의미와 실제 사용 예를 설명합니다.</description>
<pubDate>Tue, 10 Jun 2025 07:30:00 +0900</pubDate>
<guid>https://yourblog.tistory.com/entry/semantic-tags</guid>
</item>
</channel>
</rss>rss (version="2.0")
└── channel
├── title : 웹 UI 기초 블로그
├── link : https://yourblog.tistory.com
├── description : 웹 UI 기초와 관련된 실용적인 콘텐츠를 제공합니다.
├── language : ko
├── lastBuildDate : Tue, 10 Jun 2025 09:00:00 +0900
├── item
│ ├── title : [Web UI 기초] #1 HTML 시작하기
│ ├── link : https://yourblog.tistory.com/entry/html-start
│ ├── description : HTML의 기본 구조와 태그를 소개합니다.
│ ├── pubDate : Mon, 09 Jun 2025 08:00:00 +0900
│ └── guid : https://yourblog.tistory.com/entry/html-start
└── item
├── title : [Web UI 기초] #2 시맨틱 태그란?
├── link : https://yourblog.tistory.com/entry/semantic-tags
├── description : 시맨틱 태그의 의미와 실제 사용 예를 설명합니다.
├── pubDate : Tue, 10 Jun 2025 07:30:00 +0900
└── guid : https://yourblog.tistory.com/entry/semantic-tags이처럼 RSS의 콘텐츠 단위는 결국 HTML에서 <article>로 표현된 각 글에 해당합니다.
📨 Feedly로 블로그 구독하기
🧭 Feedly란?
- Feedly는 대표적인 RSS 리더 서비스로, 여러 사이트의 새 글을 한눈에 확인할 수 있게 해줍니다.
- 특히 시맨틱 구조가 잘 된 사이트일수록 글이 정확히 구독됩니다.
🔎 티스토리 블로그 RSS 주소를 찾으려면
대부분의 티스토리 블로그는 다음과 같은 형식으로 RSS 피드를 제공합니다: https://블로그주소.tistory.com/rss
현재 블로그의 경우는 다음과 같습니다: https://sesoc.tistory.com/rss
🔖 시맨틱 구조를 기반으로 하고 있는 구독할 만한 웹사이트 3선
- MDN Web Docs구독 링크: https://developer.mozilla.org/en-US/blog/feed.xml
<article>,<section>,<header>,<nav>등의 시맨틱 태그로 구조화됨- 블로그 및 문서 섹션은 RSS로 제공되어 Feedly 구독 가능
- Smashing Magazine구독 링크: https://www.smashingmagazine.com/feed/
- 시맨틱 마크업을 충실히 사용 (
<article>,<time>,<section>등) - 개발자/디자이너를 위한 아티클 제공
- RSS 피드 구독 가능
- 시맨틱 마크업을 충실히 사용 (
- CSS-Tricks구독 링크: https://css-tricks.com/feed/
- HTML5 시맨틱 구조 준수
<main>,<article>,<aside>,<footer>등의 태그 사용- 피드 URL 제공
🧩 핵심 정리
Feedly는 다음 조건이 충족되면 RSS 없이도 HTML을 기반으로 구독 가능하게 만듭니다:
| 조건 | 설명 |
|---|---|
| 시맨틱 태그 | <article>, <section>, <time>, <h1> 등이 잘 쓰일 것 |
| 콘텐츠 분리 | 각 글이 고유한 URL을 가질 것 |
| 정기적 업데이트 | 동적 페이지가 아닌 정적인 문서가 일정 주기로 갱신 |
| 명확한 구조 | 제목-본문-날짜가 명확히 구분된 HTML 구조 |
➕ Feedly에서 구독할 사이트를 추가하는 방법
- Feedly 웹사이트에 접속하고 가입을 진행합니다.
- 로그인 후 좌측 상단 +Follow 버튼 클릭
- 구독하려는 사이트 주소(RSS 주소 혹은 링크)를 입력
- 원하는 피드 그룹에 추가하면 완료!
이제 새 글이 올라올 때마다 Feedly에서 자동으로 확인할 수 있습니다.
🤔 왜 지금 RSS를 배워야 할까?
RSS는 요즘 트렌드에서 한발 물러난 기술처럼 보일 수 있습니다. 하지만 <article> 태그를 왜 써야 하는지를 이해하려면, RSS처럼 "정보 단위를 구조화해서 배포"하던 기술의 원리를 아는 것이 매우 중요합니다.
HTML5에서 <article> 태그가 도입된 핵심 이유는, 블로그 글, 뉴스 기사, 포스트처럼 하나하나가 독립적으로 배포 가능한 콘텐츠 단위를 정의하기 위해서였습니다.
이와 정확히 일치하는 철학을 바탕으로 만들어진 것이 바로 RSS입니다. RSS에서는 각각의 글이 <item> 혹은 <entry>라는 단위로 정의되고, 제목, 링크, 요약 등이 함께 구조화되어 전달됩니다.
즉, RSS를 이해하면 <article>의 역할과 구조가 왜 필요한지를 실제 정보 유통 시스템에서 체감할 수 있습니다.
단순히 "지금 많이 쓰이는 기술이냐"를 따지는 것이 아니라, 웹 문서를 어떻게 구조화할 것인가라는 설계의 본질을 이해하는 데에 RSS는 여전히 유효한 학습 도구입니다.
그래서 이 글에서는 RSS를 소개하고 Feedly와 연결해 보는 과정을 통해, <article>의 존재 이유를 실감할 수 있도록 설계했습니다.
🧠 <article> 태그, 단순한 시맨틱 이상
이처럼 <article>은 단순히 "글 본문을 감싸는 태그"를 넘어,
콘텐츠의 단위를 정의하고 RSS와 같은 외부 시스템과 연결되는 중요한 인터페이스 역할을 합니다.
- 콘텐츠의 독립성과 배포 가능성
- 메타 정보 (
<header>,<time>,<footer>등)와의 연계 - 외부 서비스(FB Instant, AMP, RSS 등)에서의 활용
<html>
└── <body>
├── <header> ← 사이트 전체의 머리말
│ └── 로고, 네비게이션 등
│
├── <main> ← 주요 콘텐츠 영역
│ ├── <article> ← 독립적인 콘텐츠 블록
│ │ ├── <header> ← 기사나 글의 머리말 (제목, 작성일 등)
│ │ ├── <section> ← 본문 내용
│ │ └── <footer> ← 기사 관련 정보 (작성자, 태그 등)
│ │
│ ├── <article> ← 또 다른 콘텐츠 블록
│ │ └── ...
│ │
│ └── 기타 섹션 등 ← 예: <section>, <aside> 등
│
└── <footer> ← 사이트 전체의 바닥글
└── 저작권, 연락처, 링크 등정리:
<article>은 단순한 시맨틱 태그가 아니라, “이 정보는 독립적으로 배포 가능한 콘텐츠 단위인가?”라는 질문에 답하는 구조입니다.
RSS가 구조화된 정보를 소비하는 방식이었다면, <article>은 그 구조를 HTML 안에서 명확히 표현한 것입니다.
🧵 마무리
시맨틱 태그는 단순히 HTML을 구분 짓는 도구가 아니라,
콘텐츠 구조화와 외부 시스템 연동을 위한 표준화된 약속입니다.
이번 부록 글에서는 RSS와 Feedly를 예로 들어 <article> 태그의 실질적인 쓰임을 소개했습니다.
💪 오늘 해볼 일: 자주 읽는 블로그 3곳을 Feedly로 구독해 보기