히스토리
- remark42 적용 #쿼츠: #댓글 #소통 §disqus §giscus §remark42 완전 깔끔
- Phase 1+2 완료. 코드 구현, 서비스 등록, 브랜드 아이덴티티 세트까지. POSSE가 열렸다.
- 인디웹 풀스택 구현 착수. Webmention + Bridgy + Microformats2 + POSSE.
- 인디웹은 IndieWeb은 대중화될 필요가 없다. 옮김
- 생성 관련 이맥스 활용 자료 조사
관련노트
- #인디웹
- POSSE 블로깅 전략 - 디지털가든 - 인디웹 - 공유 - 소유권
- #니치 #작은 #커뮤니티 운영 활성화 #본파이어 #블로그롤 #인디웹
- @힣: 브랜드 세트 - 아이콘 파비콘(favicon) OG이미지 - 나노바나나
BIBLIOGRAPHY
susam. 2025. “Indieweb은 대중화될 필요가 없다.” March 22, 2025. https://news.hada.io/topic?id=19889.
———. n.d. “The Indieweb Doesn’t Need to ‘Take off’ - Susam’s Quick Notes.” Accessed March 24, 2025. https://susam.net/indieweb-does-not-need-to-take-off.html.
“The Neo-Babbage Files.” 2022. June 28, 2022. https://babbagefiles.xyz/.
2026 인디웹 풀스택 구현: notes.junghanacs.com
2024년 자료 조사 → 2025년 POSSE 전략 수립 → 2026년 구현 착수. 블루스카이 댓글 연동 검토에서 출발해, 인디웹 풀스택으로 방향 확정.
배경: 왜 지금인가
- 블루스카이 댓글 연동을 검토하다가 인디웹 POSSE가 올바른 접근임을 재확인
- 개별 SNS API 방식(PESOS)이 아닌, Webmention 표준 기반 통합 방식 선택
- Micah Cantor의 블루스카이 댓글 분석 후, 범용 인디웹 방식이 더 적합하다는 결론
- 긱뉴스 인디웹 글(2026-01) 이 시점의 확신을 더함
- scripter.co (Kaushal Modi)의 구현이 거의 동일한 파이프라인 (Org→ox-hugo→정적사이트→Webmention)
선택한 접근법: Webmention.io + Bridgy
notes.junghanacs.com (Quartz 4 / Netlify)
├── <link rel="webmention" href="webmention.io/..."> ← 수신 엔드포인트
├── Microformats2 마크업 (h-entry, h-card) ← 구조화된 콘텐츠
├── Webmention 댓글 표시 컴포넌트 (클라이언트 JS) ← 표시
└── Bridgy (brid.gy) ← SNS 백피드
POSSE 흐름:
글 발행 → Bluesky/Mastodon에 링크 공유 (수동, 추후 자동화)
↓
Bridgy가 답글/좋아요 감지 → Webmention.io에 전송
↓
페이지 로드 시 webmention.io API 호출 → 댓글 표시다른 방식 비교:
- 개별 API 직접 호출: SNS별 코드 유지보수 부담, 인디웹 표준과 무관 → 탈락
- Bridgy Fed (블로그=Fediverse 참여자): 설정 복잡, DNS 설정 필요 → 추후 검토
SNS 계정 (Bridgy 연동 대상)
| SNS | 핸들 | Bridgy 지원 | 비고 |
|---|---|---|---|
| Bluesky | junghanacs.bsky.social | 지원 | 공개 API, 인증 불필요 |
| Mastodon | @junghanacs@fosstodon.org | 지원 | 공개 API, 인증 불필요 |
| Threads | @junghanacs@threads.net | 미지원 | Fediverse 베타, 추후 간접 수신 가능 |
구현 계획 (Phase별)
Phase 1: 기반 인프라 (Quartz 코드 수정)
- Head.tsx — Webmention/Pingback
<link>태그 +rel”me”= SNS 프로필 링크 추가 - Microformats2 마크업 —
h-entry,h-card,p-name,dt-published,e-content,u-url - Webmentions.tsx — 신규 컴포넌트 (webmention.io API 호출, 좋아요/리포스트/답글 표시)
- quartz.layout.ts — Giscus 비활성화, Webmentions 컴포넌트로 교체
- 빌드 확인 및 배포
Phase 2: 서비스 연결 (배포 후)
- webmention.io 가입 및 도메인 인증 (IndieAuth 또는
rel”me”=) - brid.gy에서 Bluesky, Mastodon 계정 연결
- 테스트 포스트로 백피드 동작 확인
Phase 3: POSSE 워크플로우 (추후)
- 발행 시 SNS 공유 (수동 복붙 → 추후 스크립트 자동화)
- Threads Fediverse 통합 추이 관찰
- 자동 POSSE (CI/CD 연동 또는 Bluesky/Mastodon API 직접 호출)
수정 대상 파일 목록
| 파일 | 변경 |
|---|---|
quartz/components/Head.tsx | Webmention <link>, rel”me”= 추가 |
quartz/components/ArticleTitle.tsx | p-name 클래스 추가 |
quartz/components/ContentMeta.tsx | dt-published 마이크로포맷 |
quartz/components/Footer.tsx | h-card 저자 정보 추가 |
quartz/components/Webmentions.tsx | 신규: Webmention 댓글 표시 |
quartz/components/scripts/webmentions.inline.ts | 신규: 클라이언트 API 호출 |
quartz/components/styles/webmentions.scss | 신규: 스타일링 |
quartz/components/index.ts | Webmentions 컴포넌트 등록 |
quartz.layout.ts | Giscus → Webmentions 교체 |
관련 레퍼런스
- Webmention - IndieWeb
- webmention.io — Webmention 수신 서비스
- Bridgy — SNS 백피드 서비스
- Bridgy Fed — 탈중앙 프로토콜 브릿지
- POSSE - IndieWeb
- Microformats2 - IndieWeb
- scripter.co 소스코드 — Org+Hugo+Webmention 구현 예시
- Bluesky Comment Section — AT Protocol API 참고
- blog-rsc 소스코드 — React 블루스카이 댓글 구현
비고
- Giscus(GitHub Discussions)는 접근성 문제로 비활성화 방향
- Netlify 배포 환경 — 서버사이드 로직 불필요, 클라이언트 JS만으로 충분
- 이 노트는 작업 기록 용도, 완료 후 POSSE 어쏠로그에 2026년 이야기를 담을 예정
2026-02-16 구현 완료 후기
2024년 자료 조사 → 2025년 POSSE 전략 → 2026-02-16 하루만에 풀스택 구현 완료.
완료된 것
- Phase 1 코드: Microformats2 마크업 (h-entry, h-card, p-name, dt-published, e-content, u-url) + Webmentions 컴포넌트 + Giscus→Webmentions 교체
- Phase 2 서비스: webmention.io 도메인 등록, Bridgy에 Bluesky + Mastodon 연결
- 브랜드 아이덴티티: 커스텀 OG 이미지 + 사이트 아이콘 세트 (디지털가든 새싹-노드 모티프)
- UI 디테일: Reply via Bluesky/Mastodon CTA, 수동 webmention 전송 폼, commentpara.de 안내
커밋 이력
| SHA | 내용 |
|---|---|
e01afec3 | feat(indieweb): Webmention + Microformats2 Phase 1 |
76c4e707 | feat(indieweb): SNS reply CTA, webmention send form |
0d93964b | feat: custom site icon and OG image |
남은 것 (Phase 3)
- POSSE 실천: 글 발행 시 Bluesky/Mastodon에 수동 공유 → 반응 수집 → 히스토리 축적
- Threads Fediverse 통합 추이 관찰 (Bridgy 지원 대기)
- 자동 POSSE 스크립트 (추후, 필요 시)
- 니치 커뮤니티와의 연결 — POSSE는 추천 알고리즘이 아닌 실체 있는 존재의 기록
POSSE가 열어내는 것
추천 알고리즘은 현실을 왜곡한다. 끼리끼리 묶어주는 것은 편리하지만 거북하다. POSSE는 다르다. 내가 쓰고, 내가 공유하고, 거기에 반응이 돌아온다. 그 히스토리 자체가 ‘진짜 있다’는 증거다.
이맥스 쓰는 사람은 한국에 정말 없다. 그럼에도 글을 쓰고 공유한다. 루소가 말한 산책처럼 — 같이 걷되 말 굳이 섞지 않는 그런 관계. POSSE는 그 산책로를 까는 일이다.
2025 인디웹은 IndieWeb은 대중화될 필요가 없다
- neo
- IndieWeb은 사람들이 자신의 웹사이트를 호스팅하고 자신만의 콘텐츠를 소유하는 것을 장려하는 운동개인 웹사이트, IRC 채널, 소셜 미디어 등을 통해 활동디지털 독립을 강조하고 개인이 자신의 디지털 정체성을 통제해야 한다는 철학종종 “IndieWeb은 성공하지 못했다”는 주장이 나옴마치 사람들이 슈퍼마켓에서 채소를 사기 때문에 가드닝이 유행하지 않았다고
https://news.ycombinator.com/item?id=43431068
IndieWeb은 주류가 되지 않아도 참여자에게 가치가 있음 POSSE(자신의 사이트에 게시하고, 모든 곳에 배포) 전략을 사용함
원문 The IndieWeb Doesn’t Need to “Take Off” - Susam’s Quick Notes
By Susam Pal on 22 Feb 2025
There’s a corner of the Internet where people have been reclaiming their digital independence by hosting their own websites and promoting the idea of owning your own content—it’s called the IndieWeb. This community has its own website, IRC channels, social media presence, and more, all dedicated to the idea that individuals should control their own digital presence through personal websites.
인터넷에는 자신만의 웹사이트를 호스팅하고 자신만의 콘텐츠를 소유한다는 아이디어를 홍보함으로써 디지털 독립성을 되찾고자 하는 사람들이 모여 있는 커뮤니티가 있는데, 바로 인디웹(IndieWeb)입니다. 이 커뮤니티는 개인이 개인 웹사이트를 통해 자신의 디지털 존재를 통제해야 한다는 생각에 전념하는 자체 웹사이트, IRC 채널, 소셜 미디어 등을 보유하고 있습니다.
Publishing your own website isn’t a new concept. It is the very essence of the Web! This is what the Web has always been about since its inception. But in an era where corporate-controlled platforms dominate online interaction, the IndieWeb emphasises the original spirit of the Web, where individuals have control over their content, identities, and online spaces. Every time this topic arises in online discussions, someone inevitably claims that the IndieWeb hasn’t taken off!
나만의 웹사이트를 게시하는 것은 새로운 개념이 아닙니다. 웹의 본질입니다! 이것이 웹이 탄생한 이래로 항상 존재해 왔던 것입니다. 하지만 기업이 통제하는 플랫폼이 온라인 상호작용을 지배하는 시대에 인디웹은 개인이 자신의 콘텐츠, 신원, 온라인 공간을 통제하는 웹의 본래 정신을 강조합니다. 온라인 토론에서 이 주제가 나올 때마다 누군가는 인디웹이 아직 성공하지 못했다고 주장할 수밖에 없습니다!
I feel that such claims about the IndieWeb not “taking off” are either stating the obvious or, if that’s not the intention, completely missing the point. It’s like saying that gardening hasn’t taken off because most people buy their vegetables at the supermarket. The IndieWeb doesn’t need to “take off” to be valuable to those who participate in it. Maintaining a personal website is about owning your digital presence, embracing creative freedom, and expressing your individuality! It’s not about appealing to the masses!
인디웹이 ‘도약하지 못하고 있다’는 주장은 명백한 사실을 말하거나, 그런 의도가 아니라면 요점을 완전히 놓치고 있다고 생각합니다. 마치 대부분의 사람들이 슈퍼마켓에서 채소를 사먹기 때문에 텃밭 가꾸기가 활성화되지 않았다고 말하는 것과 같습니다. 인디웹에 참여하는 사람들에게 가치가 있기 위해 인디웹이 ‘도약’할 필요는 없습니다. 개인 웹사이트를 운영하는 것은 자신의 디지털 존재를 소유하고, 창의적인 자유를 포용하며, 개성을 표현하는 것입니다! 대중에게 어필하는 것이 아닙니다!
I remember how, in the early 2000s, I used to spend my spare time learning HTML and writing my website, one HTML tag at a time. Writing a few lines of code in a text editor and then watching the browser render that code into a vibrant web page full of colours and images felt like an art form. It was doubly fun to find other netizens who shared that same joy of maintaining and publishing their websites. The IndieWeb is about preserving that hacker culture where websites are crafted and hosted not for mass appeal but for the sheer joy of creation and sharing with like-minded individuals.
2000년대 초반, 여가 시간을 이용해 HTML을 배우고 한 번에 하나씩 HTML 태그를 추가하며 웹사이트를 만들던 때가 기억납니다. 텍스트 편집기에 몇 줄의 코드를 작성하고 브라우저가 그 코드를 색상과 이미지로 가득한 생생한 웹 페이지로 렌더링하는 과정을 지켜보는 것은 마치 예술 작품처럼 느껴졌습니다. 웹사이트를 관리하고 게시하는 기쁨을 공유하는 다른 네티즌들을 발견하는 것도 두 배로 즐거웠습니다. 인디웹은 대중의 관심을 끌기 위해 웹사이트를 제작하고 호스팅하는 것이 아니라 같은 생각을 가진 사람들과 함께 창작하고 공유하는 순수한 기쁨을 위해 웹사이트를 제작하는 해커 문화를 보존하는 데 그 목적이 있습니다.
The IndieWeb doesn’t need to go mainstream to be meaningful. It’s a celebration of a more personal, decentralised, and creative world wide web. For those of us who still care about these values, it is already meaningful. 인디웹은 주류가 아니어도 의미가 있습니다. 인디웹은 보다 개인적이고 탈중앙화되며 창의적인 월드 와이드 웹을 기념하는 행사입니다. 이러한 가치에 여전히 관심이 있는 사람들에게는 이미 의미 있는 행사입니다.
2024 인디웹(IndieWeb) 이맥스 휴고 블로그 구축 관련
인디웹(IndieWeb)은 ‘기업 기반 상용 웹’에 대한 대안으로서 사람들이 중심이 되는 웹입니다.
”The Neo-Babbage Files” 2022 예제
(“The Neo-Babbage Files” 2022)
“sp1ff/indie-org” Michael 2024 - Org mode on the Indieweb
이게 샘플이다.
webmention org-publish ?!
Hugo - IndieWeb - indieweb.org
휴고 사용자 리스트
User:Scripter.co #indieweb #hugo
https://indieweb.org/User:Scripter.co
-
Site:https://scripter.coby
Kaushal Modi -
Original site content written inOrg mode(GNU Emacs). That content is then exported to Markdown using
ox-hugo. -
Built usingHugo.
-
Deployed usingNetlify.
-
The site’s HTML, CSS, JS is minified using a Go commandline utility
minify. -
Useswebmention.ioas Webmention endpoint.
-
Supports receiving comments via Webmentions (via URL or comment usingcommentpara.de), or as back-feed fromtwitterif a post is syndicated there. The back-feed Webmentions are generated bybrid.gy.
-
The comments viacommentpara.dealso get parsed for Markdown (including the triple-backquoted syntax-highlighted code blocks).
-
Pages are marked with
h-feed,h-entry, and the nestedp-andu-as needed. Please ping me on IRC if you find something incorrect or unusual about my microformats2 markup. -
h-cardis added to the footer of each page.
로그
indieweb에 대해서
[SYS]: You are a helpful assistant. Please write in Korean language.
@user 인디웹(indieweb)에 대해서 알려줘.
@assistant 인디웹(IndieWeb)은 개인이 자신만의 웹사이트를 통해 데이터를 소유하고, 소셜 미디어와 같은 대규모 중앙 집중화된 플랫폼에 의존하지 않고도 독립적으로 온라인 활동을 할 수 있도록 돕는 운동입니다. 인디웹은 개인의 디지털 자율성을 지지하고, 사람들이 자신의 콘텐츠를 통제할 수 있게 하는 것을 목표로 합니다. 다음은 인디웹의 주요 개념들입니다:
-
자기 소유(Self-Ownership): 사용자는 자신의 웹사이트를 운영하며 자신의 콘텐츠를 완전히 통제합니다. 이를 통해 사용자는 플랫폼의 규칙에 얽매이지 않고 자유롭게 자신의 데이터를 다룰 수 있습니다.
-
독립성: 인디웹은 다른 웹사이트나 소셜 미디어 플랫폼에 의존하지 않고 독립적으로 콘텐츠를 작성하고 공유할 수 있는 방법을 제공합니다. 이를 통해 사용자는 플랫폼의 정책 변화나 서비스 종료 등에 영향을 받지 않습니다.
-
상호 운용성(Interoperability): 인디웹은 웹 표준과 프로토콜을 사용하여 다양한 웹사이트와 서비스가 서로 호환되고 연결될 수 있도록 합니다. 이를 통해 사용자는 하나의 중앙 집중된 플랫폼에서 벗어나 다양한 서비스와 통합된 경험을 누릴 수 있습니다.
-
연결성과 소셜 기능: 인디웹은 Webmention 등의 기술을 사용하여 다른 웹사이트와 소셜 네트워크 기능을 연결할 수 있습니다. 예를 들어, 자신의 블로그 글에 달린 댓글이나 다른 사람의 링크를 관리할 수 있게 합니다.
-
오픈 소스와 커뮤니티: 인디웹 운동은 많은 오픈 소스 프로젝트와 커뮤니티 참여를 통해 이루어집니다. 다양한 도구와 라이브러리, 플러그인이 개발되어 누구나 쉽게 자신의 웹사이트를 구축하고 관리할 수 있습니다.
인디웹에 관심이 있다면, “IndieWeb.org” 사이트를 방문하여 더 많은 정보를 얻고 커뮤니티에 참여해 보는 것도 좋은 방법입니다. 여기에는 인디웹의 다양한 도구와 구현 사례, 가이드 등이 잘 정리되어 있습니다.
@user 인디웹 관련한 이맥스 프로젝트 좀 찾아봐줘.
@assistant 이맥스(Emacs)는 강력한 텍스트 편집기로, 여러 확장 기능과 패키지를 통해 다양한 작업을 수행할 수 있습니다. 인디웹 관련 이맥스 프로젝트나 패키지를 찾고자 한다면, 다음과 같은 몇 가지 주요 프로젝트들을 참고할 수 있습니다:
-
Org-Roam 및 Org-mode:
- Org-mode: Org-mode는 이맥스 사용자들 사이에서 매우 인기 있는 도구로, 메모 작성과 프로젝트 관리에 특화되어 있습니다. 인디웹 사용자들은 Org-mode를 사용하여 자신의 콘텐츠를 작성하고 관리합니다.
- Org-Roam: Org-mode를 기반으로 한 패키지로, 노트들을 연결 및 관리하기 쉽게 만들어 줍니다. 이 패키지를 통해 인디웹 스타일의 개인 위키나 블로그 등을 관리할 수 있습니다.
-
IndieWeb.el:
- IndieWeb.el 패키지는 인디웹 기능들을 Emacs에서 직접 사용할 수 있도록 도와줍니다. 이 패키지를 사용하면 웹멘션(Webmention)이나 마이크로포맷(Microformats) 같은 인디웹 기술을 Emacs 환경에서 쉽게 구현할 수 있습니다.
-
Blorg:
- **Blorg**는 Org-mode 노트를 기반으로 블로그를 생성하는 패키지입니다. 이를 사용하면 Org-mode 문서로 블로그 게시글을 작성하고 HTML로 변환하여 블로그에 게시할 수 있습니다. 특히, 블로그 콘텐츠를 관리하는 데 유용합니다.
-
ox-hugo:
- **ox-hugo**는 Org-mode 문서를 Hugo 정적 사이트 생성기 형식으로 변환해주는 Emacs 확장 기능입니다. Hugo는 많은 인디웹 사용자들이 사용하는 정적 사이트 생성기로, 이를 통해 개인 웹사이트나 블로그를 만들 수 있습니다. ox-hugo를 사용하면 Emacs 내에서 직접 콘텐츠를 작성하고, 이를 Hugo로 쉽게 출판할 수 있습니다.
이 외에도 Emacs용 패키지 매니저인 MELPA(Milkypostman’s Emacs Lisp Package Archive)를 통해 다양한 인디웹 관련 패키지를 찾을 수 있습니다. Emacs 사용자 커뮤니티에서는 새로운 패키지와 기능들이 지속적으로 개발되고 있으므로, 최신 정보를 자주 확인하는 것도 좋습니다.
@user
Comments