프로덕트 빌더 노트

혼자서 웹사이트를 만들고 배포하고 운영하며 부딪힌 문제를 해결 과정과 함께 기록합니다. 정적 사이트 배포, 다크 모드, 서버 없는 문의 폼, 접근성, 속도, 검색 노출까지 실제로 이 사이트에 적용한 내용을 다룹니다.

모든 글

• GitHub Pages로 정적 웹사이트 무료 배포하기

  저장소 준비부터 Pages 활성화, 프로젝트 사이트의 경로 문제, 사용자 지정 도메인 연결, 자주 겪는 오류까지 GitHub Pages 배포 과정을 정리합니다.

  배포·호스팅 · 2026년 10월 29일

• 깜빡임 없는 다크 모드 구현하기

  CSS 변수와 head 안의 짧은 인라인 스크립트로 새로고침해도 번쩍이지 않는 다크 모드를 만들고, 외부 위젯까지 테마를 맞추는 방법을 설명합니다.

  프런트엔드 · 2026년 10월 29일

• 서버 없이 정적 사이트에 문의 폼 만들기

  Formspree 같은 폼 백엔드로 정적 사이트에 이메일로 전달되는 문의 폼을 만들고, 중복 제출 방지와 스팸 차단, 개인정보 고지까지 챙기는 방법입니다.

  기능 추가 · 2026년 10월 29일

• ads.txt 완벽 가이드: 의미, 작성법, 위치

  ads.txt가 막아 주는 도메인 위장 문제, 각 항목의 의미, 도메인 최상위에 두어야 하는 이유와 GitHub Pages에서 흔히 놓치는 위치 문제를 정리합니다.

  사이트 운영 · 2026년 10월 29일

• 검색 노출을 위한 기본 메타 태그와 sitemap

  title, meta description, canonical, Open Graph, robots.txt, sitemap.xml까지 검색 결과에 페이지가 제대로 보이기 위해 먼저 챙길 기본을 설명합니다.

  검색 최적화 · 2026년 10월 29일

• 작은 사이트를 위한 웹 접근성 점검 목록

  문서 구조, 명암비, 이미지 대체 텍스트, 키보드 사용, 폼 레이블까지 작은 사이트에서 바로 적용할 수 있는 웹 접근성 항목과 확인 방법을 정리했습니다.

  프런트엔드 · 2026년 10월 29일

• 정적 사이트 로딩 속도 개선 기본

  Core Web Vitals 측정부터 이미지 최적화, 스크립트 로딩 순서, 웹 폰트, 레이아웃 흔들림, 외부 서비스 관리까지 효과가 큰 순서로 속도 개선 방법을 정리합니다.

  성능 · 2026년 10월 29일

이런 분께 도움이 됩니다

• HTML, CSS를 조금 알고 첫 개인 사이트를 배포해 보려는 분
• 사이트에 다크 모드, 문의 폼, 댓글 같은 기능을 서버 없이 붙이고 싶은 분
• 검색 노출과 광고 게재를 위해 사이트를 정비하려는 분

사이트를 만든 이유와 글을 쓰는 원칙은 소개에서 확인할 수 있습니다.