소개

프로덕트 빌더 노트는 혼자서 웹사이트와 작은 서비스를 만드는 사람을 위한 실무 기록입니다.

이 사이트를 만든 이유

처음 웹사이트를 만들면 HTML 한 장을 띄우는 것까지는 금방이지만, 그 다음 단계에서 막히는 일이 많습니다. 배포했더니 CSS가 깨지고, 다크 모드를 넣었더니 화면이 번쩍이고, 문의 폼을 만들려니 서버가 필요하다고 하고, 광고를 붙이려니 ads.txt를 어디에 둬야 할지 모르는 식입니다.

이 사이트는 바로 이 사이트를 만들면서 실제로 부딪힌 문제와 해결 방법을 정리한 결과물입니다. 정적 HTML 사이트를 GitHub Pages로 배포하고, 다크 모드, 문의 폼, 댓글을 붙이는 과정을 하나씩 글로 남겼습니다.

글을 쓰는 원칙

• 직접 확인한 내용만 씁니다. 코드 예시는 이 사이트에 실제로 쓰인 코드를 바탕으로 합니다.
• 출처를 밝힙니다. 표준이나 수치(예: 명암비 기준, Core Web Vitals 기준값)는 W3C, Google, IAB Tech Lab 등 공식 문서의 내용을 따릅니다.
• 바뀌는 정보는 공식 문서를 함께 안내합니다. IP 주소, 서비스 요금제처럼 자주 바뀌는 값은 직접 적기보다 최신 공식 문서를 확인하도록 안내합니다.
• 틀린 내용은 고칩니다. 오류를 발견하시면 문의 페이지나 각 글의 댓글로 알려 주세요. 확인 후 수정하고 수정 날짜를 표시합니다.

다루는 주제

• 정적 사이트 제작과 배포 (GitHub Pages, 도메인 연결)
• 프런트엔드 기본기 (다크 모드, 접근성, 페이지 속도)
• 서버 없이 기능 붙이기 (문의 폼, 댓글)
• 검색 노출과 사이트 운영 (메타 태그, sitemap, ads.txt)

운영자

이 사이트는 GitHub 사용자 beautifulwind가 운영합니다. 사이트의 소스 코드는 GitHub 저장소에 공개되어 있어, 글에 나온 코드가 실제로 어떻게 쓰였는지 직접 확인할 수 있습니다.

글에 대한 의견, 오류 제보, 제휴 문의는 문의 페이지를 이용해 주세요.