#cdn

Frontend › Web

이미지 CDN은 원본 한 장을 올려 두면 URL 매개변수로 크기·자르기·품질·형식을 바꾼 변형을 만들어 캐시한다. 브라우저의 Accept 헤더를 보고 AVIF·WebP 중 지원하는 가장 효율적인 형식을 주므로 picture·type 없이 srcset·sizes만으로 형식 대체가 된다. 같은 URL이 형식마다 다른 응답이 되므로 Vary: Accept로 캐시를 나눠야 하고, 비용이 주된 단점이다.

• #frontend
• #performance
• #http
• #cache

Backend › Architecture

Netflix·YouTube 같은 주문형 동영상 서비스의 설계다. 요구 사항과 규모 추정(하루 500TB 업로드), 데이터 모델과 API, 업로드 뒤 큐로 도는 처리 파이프라인(장면 단위 청크, 콘텐츠 검사, 트랜스코딩, 화질 변환), CDN과 ISP 안에 서버를 두는 Open Connect, 적응형 비트레이트와 이어 보기, 검색·트렌드·공유, 지역 차단과 추천을 정리했다.

• #backend
• #architecture
• #streaming
• #scalability

Backend › Architecture

업로드된 이미지·동영상을 여러 크기와 화질로 바꿔 내보내는 서버를 설계하는 방법이다. 미리 만들어 두기와 요청 시 변환(온디맨드 리사이징)의 비교, 캐시·CDN·HTTP 검증자로 변환 비용을 줄이는 법, 엣지 함수 구성, 트랜스코딩 파이프라인을 단계로 나누고 비동기 완료 알림을 보내는 법, 점진적 다운로드와 적응형 스트리밍을 정리했다.

• #backend
• #architecture
• #cache
• #performance

Computer Science › Network

전 세계 엣지 서버에 콘텐츠를 캐시해 사용자 가까운 곳에서 응답하는 CDN. 동작 방식, 얻는 것과 비용·위험, 캐시 무효화와 프론트엔드 배포에서의 쓰임을 정리한다.

• #network
• #cache
• #web
• #frontend

DevOps

빌드한 SPA·정적 사이트를 AWS에 올리는 표준 구성. 비공개 S3 버킷을 원본으로 두고 CloudFront가 OAC로만 읽어 HTTPS·압축·엣지 캐시를 맡으며, ACM 인증서(us-east-1)와 Route 53 별칭 레코드로 커스텀 도메인을 붙인다. SPA 라우팅 처리, 캐시 헤더와 무효화, GitHub Actions에서 OIDC로 배포하는 워크플로까지 정리한다.

• #aws
• #deployment
• #ci-cd
• #devops
• #frontend