Logic × Design, in practice.

사내 운영 도구를 외부 네트워크에서도 안전하게 쓰기 위해 Node.js Express 인스턴스와 Cloudflare Worker를 결합한 대시보드를 구축했습니다. 기본 구조는 Express가 API 라우트를 담당하고, Worker가 외부 요청을 필터링해 허용된 토큰만 전달합니다.

토큰 검증은 HMAC 서명을 사용했고, 서명 키는 Workers Secret에 저장했습니다. Worker에서 실패율이 0.5%를 넘으면 Slack으로 알림을 보내도록 `fetch` 이벤트 내부에 에러 핸들링을 배치했습니다. Grafana로 응답 속도를 측정해 보니, 직접 호출 대비 평균 42ms 정도의 추가 지연만 발생했습니다.

기사 말미에 전체 구조 다이어그램과 Git 저장소 링크를 포함해, 광고 심사 시에도 “정보를 제공하는 블로그”라는 인상을 줄 수 있습니다.

매주 진행하는 회의록 작성 시간을 줄이기 위해, 녹음 파일을 AssemblyAI로 전사한 뒤 GPT-5 mini에 전달해 요약과 액션 아이템을 추출하는 파이프라인을 만들었습니다. Google Workspace SMTP 릴레이를 활용해 요약 결과를 자동으로 팀원에게 전송하는 과정도 정리돼 있습니다.

파이프라인은 Vercel Cron으로 트리거되며, 실패 시 재시도를 수행하도록 재귀 호출을 제한했습니다. 실제 사용 중 수집한 성공률, 평균 처리 비용, 프롬프트 템플릿을 상세히 공개하면서 신뢰도를 높였습니다.

향후 광고를 게재할 경우 이 문단 사이에 텍스트형 광고를 삽입해 맥락 광고와 자연스럽게 연결할 계획입니다.

다크 테마에서 대비를 유지하기 위한 색상 비율 측정, 키보드 내비게이션 테스트, 스크린 리더 호환성 검증 과정까지 단계별로 정리했습니다. Lighthouse와 axe DevTools 측정 결과 스크린샷도 함께 제공해 방문자가 실전 예시를 참고할 수 있도록 했습니다.

실험에서 사용한 HTML 구조와 ARIA 라벨링 코드를 코드 블록으로 첨부하고, 개선 전·후의 Before/After 테이블도 제공해 체류 시간을 늘립니다. 관련 자료 PDF 다운로드 링크도 준비 중임을 표기했습니다.

본문 하단에는 이메일 구독 폼과 SNS 링크를 배치할 예정으로, 광고와 충돌하지 않도록 여백과 대비를 충분히 확보했습니다.

핀볼 물리 실험과 챗봇 응답 지연 시간 같은 시계열 데이터를 한곳에 모으기 위해 TimescaleDB 확장 모듈을 설정했습니다. DBeaver에서 하이퍼테이블을 생성하고, 5분 단위 압축 정책을 적용해 스토리지를 38% 절감한 사례를 수치와 함께 공유합니다.

Grafana 대시보드 구성, Continuous Aggregates 뷰를 활용한 요약 통계, AWS RDS에서의 백업 전략을 실사례 중심으로 정리했습니다. ingestion 파이프라인을 Node.js로 작성한 코드 조각과 크론 스케줄 예시도 포함했습니다.

중간에는 스키마 다이어그램과 인덱스 전략 비교표를 제공하고, 하단에는 운영 중 겪은 트러블슈팅 메모를 정리해 반복적인 장애를 줄였습니다.

정적 HTML만으로 운영하는 사이트라도 배포 자동화가 필요했습니다. GitHub Actions에서 `pages build and deploy` 워크플로를 트리거하고, Cloudflare Pages를 백업 배포 대상으로 설정해 장애 시 빠르게 전환할 수 있는 방법을 기록했습니다.

워크플로 YAML 파일, 캐시 전략, 환경 변수 설정, 실패 알람을 Slack으로 보내는 스크립트를 공유했습니다. 덕분에 릴리즈 시간이 4분에서 1분 미만으로 단축됐고, 로그를 아카이브해서 문제를 추적하기 쉬워졌습니다.

마지막에는 광고 적용 후 체크해야 할 빌드 스텝(robots.txt 업데이트, 사이트맵 제출, 광고 스크립트 버전관리)을 체크리스트 형태로 정리해 실무 참고성을 높였습니다.

다크 테마 사이트에서 애드센스를 승인받기 위해 대비 비율, 최소 글자 크기, 광고 주위 여백 확보가 무엇보다 중요했습니다. WCAG 2.1 명도 기준을 기준으로 배경과 텍스트의 대비를 4.5:1 이상으로 맞추고, 광고 슬롯 주변에는 최소 24px의 패딩을 두었습니다.

광고를 배치하기 전에는 Lighthouse와 axe DevTools로 접근성 점수를 검증했고, 광고 스크립트를 삽입한 뒤에도 성능 점수가 90점 이상 유지되는지 확인했습니다. `requestIdleCallback`으로 비주얼 장식 스크립트를 지연 로드해 CLS를 0.02 미만으로 유지한 것이 큰 도움이 됐습니다.

코드 레벨에서는 다음과 같이 IntersectionObserver로 시야에 들어온 섹션만 애니메이션을 재생하도록 최적화했습니다.

const sections = document.querySelectorAll('[data-observe]');
const observer = new IntersectionObserver((entries) => {
	entries.forEach((entry) => {
		if (entry.isIntersecting) {
			entry.target.classList.add('is-visible');
			observer.unobserve(entry.target);
		}
	});
}, { threshold: 0.35 });

sections.forEach((section) => observer.observe(section));

이 접근 방식을 Report Tools와 WalkWithMe 서브도메인에도 재사용했고, 핵심 프레임워크 없이도 광고 심사 요건을 충족하는 사례로 문서화해 방문자가 그대로 따라 할 수 있도록 했습니다.