개인 포트폴리오 사이트 구축

App Router 기반 정적 생성(SSG)으로 S3 배포에 최적화되고, TypeScript로 데이터 구조를 타입 안전하게 관리할 수 있었습니다. Tailwind CSS v4와의 궁합도 선택 이유 중 하나였습니다.

CSS-first 설정 방식으로 설정 파일 없이 globals.css에서 바로 커스텀 테마를 정의할 수 있었고, 다크 모드 지원이 클래스 기반으로 간단하게 구현됩니다.

S3를 퍼블릭으로 열지 않고 OAC(Origin Access Control)로 CloudFront에서만 접근 가능하도록 구성해 보안을 강화했습니다. 직접 도메인 DNS는 외부 공급자에서 관리하며 CNAME으로 CloudFront에 연결했습니다.

관리형 규칙셋으로 SQL 인젝션, XSS 등 일반적인 웹 공격을 차단하고, 개인 포트폴리오임에도 기본 보안 레이어를 갖추기 위해 적용했습니다.

Puppeteer는 Chromium 바이너리가 필요해 일반 Lambda 패키지 크기 제한을 초과합니다. 컨테이너 이미지 기반 Lambda로 배포해 이 제약을 해결했습니다. PDF 생성은 간헐적 요청이므로 상시 서버 대신 Lambda가 비용 효율적입니다.

CloudFront에서 Lambda를 직접 호출하는 대신 API Gateway를 두어 요청 라우팅, 인증 확장, X-Ray 추적 연동을 용이하게 했습니다.

Lambda 컨테이너 배포에 필요한 이미지를 AWS 내부 레지스트리에서 관리해 배포 지연을 최소화하고 이미지 버전 관리를 체계화했습니다.

단순 에러 로그로는 파악하기 어려운 Lambda Cold Start 지연, Puppeteer 렌더링 구간 병목을 시각화해 성능 문제의 원인을 특정하기 위해 도입했습니다.

CloudFront, S3, WAF, API Gateway, Lambda, ECR, ACM, IAM 등 모든 리소스를 코드로 정의해 콘솔 수동 작업 없이 재현 가능한 인프라를 유지했습니다. 모듈 단위로 분리해 환경별 확장을 고려했습니다.

코드 push 시 Next.js 빌드 → S3 업로드 → CloudFront 캐시 무효화, Lambda 이미지 빌드 → ECR 푸시 → Lambda 함수 업데이트를 자동화해 수동 배포를 완전히 제거했습니다.

Lambda 오류·Duration 임계값 초과·Throttle, API Gateway 5xx를 CloudWatch Alarm으로 감지하고 SNS 이메일 구독으로 즉시 알림을 받도록 구성했습니다. 대시보드로 호출 추이·지연 시간을 한눈에 확인할 수 있어 장애 대응 속도를 높였습니다.

CloudFront Function 없이 AWS 관리형 정책으로 HSTS(2년)·X-Frame-Options·X-Content-Type-Options·XSS-Protection·Referrer-Policy·Permissions-Policy를 모든 응답에 일괄 적용해 코드 유지보수 없이 보안 레이어를 완성했습니다.

피드백 수신 Lambda와 이메일 발송 Lambda를 직접 연결하지 않고 EventBridge 커스텀 버스를 중간에 두어 두 기능을 느슨하게 분리했습니다. 향후 Slack 알림, DB 저장 등 처리를 추가할 때 기존 코드 수정 없이 Rule만 추가하면 되는 확장 구조를 확보하기 위해 이 방식을 선택했습니다. 이메일 발송은 자체 도메인(`eomkyeongmun.me`)을 SES에서 DKIM 검증 후 발신자로 사용해 신뢰도를 확보했습니다.