Insights / 기술 해설
구현과 운영의 판단을 재사용 가능한 지식으로.
Astro, Cloudflare, CMS, SEO, 접근성 등을 중심으로 서비스와 사례의 설계 판단을 정리합니다.
Library / 01
기술 해설 목록
도입 방향부터 정리하려면 구현 가이드를 확인하세요.구현 가이드 보기
Cloudflare Vectorize와 RAG 입문: 검색과 AI 답변의 차이 이해하기
Cloudflare Vectorize가 방문자의 자연스러운 질문으로 이미 공개한 정보를 더 쉽게 찾게 하는 방법을, 도입 가치, 일반 검색과의 역할 분담, RAG, 단계적 시작 방법으로 설명합니다.
- 기술
- Cloudflare
- Vectorize
- RAG
- 의미 검색
- 사이트 검색
Cloudflare Vectorize 구현 가이드: 공개 HTML을 안전하게 동기화하는 방법
공개 HTML에서 corpus를 만들고 Pagefind를 유지하면서 Vectorize 동기화를 안전하게 운영하는 상세 가이드입니다.
- 기술
- Cloudflare
- Vectorize
- OpenAI
- 사이트 검색
“조용한 기반”을 구체화하다: Acecore Systems 사이트를 새롭게 단장했습니다
Acecore Systems 사이트를 “조용한 기반”이라는 주제로 새롭게 단장했습니다. 업무를 “현장·구조·운영”의 세 층으로 바라보고 지원 방향, 서비스, 실적, 요금, 도입 가이드, 상담까지 이어지는 흐름을 재설계한 배경과 주요 변경점을 소개합니다.
- 소식
- 서비스
- 웹사이트
- 웹 제작
Astro + Cloudflare 사이트를 기능별로 확장하는 전체 설계
Astro와 Cloudflare Pages를 기반으로 문의 AI, Sveltia CMS, 다국어 블로그, 서비스 CTA, 안전한 Markdown 렌더링, Cloudflare만으로 만든 댓글 기능을 하나의 구조로 정리합니다.
- 기술
- Astro
- Cloudflare
- 웹사이트
- AI
- CMS
Cloudflare만으로 Astro 블로그 댓글 기능 만들기
외부 댓글 서비스를 쓰지 않고 Cloudflare Pages Functions, D1, Turnstile, Wrangler 설정만으로 Astro 블로그 댓글 기능을 구현한 기록입니다.
- 기술
- Cloudflare
- Astro
- 보안
- 웹사이트
Sveltia CMS로 다국어 블로그를 운영하는 방법
Sveltia CMS에서 일본어 원문을 편집하고, GitHub Actions와 GitHub Copilot으로 번역 PR을 만들어 정적 다국어 페이지를 배포하는 운영 방식과 UI 번역과의 차이, 검색 엔진상의 장점을 정리합니다.
- 기술
- GitHub Copilot
- i18n
- CMS
- SEO
Sveltia CMS 도입 가이드
Astro 같은 정적 사이트에 Sveltia CMS를 도입하는 방법을 GitHub backend, OAuth Worker, 이미지 업로드, 다국어 운영, CMS 전용 PR 흐름, 실제 수정에서 얻은 교훈까지 정리합니다.
- 기술
- CMS
- Astro
- Cloudflare
- 보안
AI 채팅 답변의 Markdown 링크를 안전하게 렌더링하는 구현 설계
AI 채팅 답변에 포함된 Markdown 링크를 안전한 HTML로 바꾸는 구현 메모입니다. 공백을 허용하는 파싱, href trim, 허용 목록 검증, DOM 렌더링, fallback, 테스트 케이스를 나누면 다른 사이트에도 재사용하기 쉽습니다.
- 기술
- 웹사이트
- AI
- 보안
- Astro
서비스 CTA의 문맥을 문의 폼으로 이어 주는 기술 설계
서비스 페이지에서 읽던 문맥을 문의 폼으로 전달하는 구현 설계입니다. Astro 사이트의 미니 CTA, URL 파라미터 계약, 폼 분류 초기 선택, 제목 prefill, 다국어 URL, GA 측정, 생성 HTML 확인까지 다른 사이트에도 적용할 수 있게 정리합니다.
- 기술
- 웹사이트
- 서비스
- Astro
- CMS
Astro 사이트에 문의 AI 채팅을 넣기 위한 기술 설계
Astro + Cloudflare Pages 정적 사이트에 OpenAI Responses API 기반 문의 AI 채팅을 넣는 기술 설계입니다. API 경계, 사이트 컨텍스트, 프롬프트 제어, locale별 URL, Origin 검사, rate limit, 안전한 Markdown 링크 렌더링을 정리합니다.
- 기술
- Cloudflare
- 웹사이트
- AI
- 서비스
Hatt 홈페이지를 공개했습니다
그림, 소설, VRChat용 3D 아바타와 기믹 제작을 한곳에 모은 “Hatt 홈페이지”를 공개했습니다. Astro, Sveltia CMS, Pagefind를 사용해 창작 활동을 계속 발신할 수 있는 개인 사이트로 설계했습니다.
- 소식
- 웹 제작
- 웹사이트
- CMS
- Astro
홈페이지 제작 비용 시세와 견적서에서 확인해야 할 포인트
홈페이지 제작 비용 시세를 목적별로 정리하고, 견적서에서 확인해야 할 항목과 예산 내에서 성과로 이어지는 사고방식을 해설합니다.
- 웹 제작
- 웹사이트
- SEO
- 서비스
예전에 유료였던 Cloudflare SSL 옵션의 정체 — Dedicated SSL에서 Advanced Certificate Manager로
Cloudflare에서 과거 유료 옵션이었던 "Dedicated SSL Certificates(전용 SSL 인증서)"는 2021년에 "Advanced Certificate Manager(ACM)"로 기능 확장 및 명칭 변경되었습니다. 무료 Universal SSL과의 차이와 ACM이 필요한 경우를 설명합니다.
- 기술
- Cloudflare
- 보안
- 인프라
Astro 사이트 품질 개선 가이드 속편 - PageSpeed Insights 전 항목 100점을 만든 최종 조정
이전 글 이후 마지막으로 진행한 개선을 정리합니다. Cloudflare Web Analytics 중지, GA4와 검색 UI의 지연 로드, PageSpeed Insights 모바일과 데스크톱 4개 항목 모두 100점 달성, Search Console의 빵부스러기와 색인 정리, 공유 SVG 아이콘으로의 이행, 그리고 시도했지만 채택하지 않은 추가 최적화 판단까지 한 번에 정리했습니다.
- 기술
- Astro
- 성능
- 접근성
- SEO
- 웹사이트
Astro 사이트 품질 개선 가이드 — PageSpeed 모바일 점수 99 달성
Astro + UnoCSS + Cloudflare Pages 사이트를 성능, SEO, 접근성, UX의 4가지 축에서 개선하여 PageSpeed Insights 모바일 99점, 데스크톱 전 항목 100점을 달성한 전 과정 기록.
- 기술
- Astro
- 성능
- 접근성
- SEO
- 웹사이트
GitHub Copilot × Playwright로 웹사이트 몽키 테스트하기: 실전 가이드
VS Code 에이전트 모드(GitHub Copilot)와 Playwright 브라우저 도구를 결합하여 정적 사이트를 체계적으로 몽키 테스트하는 실전 가이드. 테스트 설계 방법론, 발견된 버그와 수정, 개선 권장 사항을 다룹니다.
- 기술
- GitHub Copilot
- VS Code
- Astro
- 웹사이트
Astro View Transitions의 함정과 해결책 — UX 및 코드 품질 개선 가이드
Astro View Transitions에서 스크립트가 작동하지 않는 문제의 해결 패턴, Pagefind 전문 검색 도입, TypeScript 타입 안전성 강화, 상수 중앙 관리 등 UX와 코드 품질 개선을 위한 실전 가이드.
- 기술
- Astro
- 웹사이트
Astro 사이트를 WCAG AA 준수로 만드는 실전 가이드
Astro + UnoCSS 사이트에서 구현한 접근성 개선에 대한 종합 가이드. aria 속성, 명도 대비, 포커스 관리, 폼 유효성 검사, 스크린 리더 지원 등 WCAG AA 준수에 필요한 모든 것을 다룹니다.
- 기술
- Astro
- 접근성
SEO 개선 가이드: Astro 사이트에 구조화 데이터와 OGP 구현하기
Astro + Cloudflare Pages 사이트에서 JSON-LD 구조화 데이터, OGP, 사이트맵, RSS를 올바르게 구현하는 단계별 가이드. Google 리치 결과 지원부터 RSS 피드 최적화까지 실전 SEO 개선을 다룹니다.
- 기술
- Astro
- SEO
Astro 7 사이트를 9개 언어로 지원하는 방법 ― 블로그 번역과 다국어 아키텍처
Astro 7.1.3 + UnoCSS + Cloudflare Pages 사이트를 9개 언어로 대응한 기록. UI 국제화부터 블로그 글 번역, Pages CMS 다국어 설정까지 전체 과정을 다룹니다.
- 기술
- Astro
- i18n
- 웹사이트
GitHub Copilot에게 확정신고 전 과정을 맡겼다 — 837건의 분개부터 신고까지
클라우드 회계의 데이터 연동으로 축적된 837건의 분개 분류·검증부터, 사회보험료 대조, 공제 입력, 신고서 제출까지. GitHub Copilot Agent Mode × Simple Browser가 실질적인 작업 대부분을 처리한 확정신고의 전 과정 기록.
- 기술
- GitHub Copilot
- VS Code
Zoho Mail에서 KAGOYA MAIL로의 이전 가이드 — DNS, 인증, 데이터 감사 실전
Zoho Workplace에서 KAGOYA MAIL로의 전체 이전에 대한 실전 가이드. 단계별 절차, DNS 설정, SPF/DKIM 인증, Zoho Workplace 전 서비스의 포괄적 데이터 감사를 다룹니다.
- 기술
- 이메일
- DNS
- 인프라
Astro 사이트의 PageSpeed를 개선하는 실전 기법
Astro + UnoCSS + Cloudflare Pages 사이트를 위한 실전 최적화 기법입니다. CSS 전달, 폰트, 반응형 이미지, AdSense 로딩 제어, GA4 지연 로딩, 캐시를 다룹니다.
- 기술
- Astro
- 성능
Cloudflare Pages로 안전한 정적 사이트 배포 달성
Cloudflare Pages에서의 정적 사이트 배포와 _headers를 사용한 보안 헤더/CSP 설정에 대한 실전 가이드. Workers에서 Pages로 되돌린 이유도 다룹니다.
- 기술
- Cloudflare
- 보안
VitePress에서 Starlight로 — 문서 사이트 프레임워크 통합
VitePress + UnoCSS로 구축한 사업계획서를 Astro + Starlight로 마이그레이션하여 두 프로젝트의 프레임워크를 통합한 기록. Mermaid 다이어그램의 CDN 이전도 다룹니다.
- 기술
- Astro
- Starlight
