검수 리스트

서비스 오픈전 검수사항을 정리한다.

웹페이지

상품기술서 페이지 <HTML> 포맷 최적화 기능을 검수한다.

적용방식

  1. urlRewrites 에 모든 상품기술서 URL패턴이 정의되어 있다.

    Hint

    • pagedesk , pagemixed 등의 page- 함수와 같이 적용되어 있다면 pagedesk 함수 키워드로 통합된다.

    • 가능한 모든 값이 기본값으로 구성되어 있어 urlRewrites 에 별도 옵션을 추가하지 않는다.

    • 상세한 urlRewrites 가 범용 URL 전처리 규칙보다 우선하여 설정된다.

  2. (원본이 JSON 포맷인 경우) HTML 문서를 포함하는 필드만 수정된다. → in

  3. 부모페이지의 UX 스타일에 간섭하지 않는다. → isolstyle

  4. 이미지, 비디오와 같은 노드로 동작하는 경우 상품기술서 를 고정하여 MISS 비율 낮추기 가 적용되어 있어야 한다.

    Hint

    • fixedCount 은 10,000 전후로 설정한다.

<IFRAME> 삽입시

  1. 부모 페이지에 자동 높이조절 스크립트가 삽입되어 있다. → library.parent

    Hint

    <script src="https://{서비스도메인}/pagefx/fxjs/b74de465-a464-4640-a4f7-5415af4a6571.js" type="text/javascript" charset="utf-8" />

  2. 부모페이지가 삽입하는 상품기술서 <IFRAME> 태그가 iframeAutoHeight .selector 로 구성되어 있는가?

    Hint

    • 크로스도메인 환경에서 이 구성이 되어 있지 않다면 자연스러운 lazy-loading이 동작하지 않는다.

    • 자연스러운 lazy-loading은 이미지 로딩지연을 클라이언트가 느낄 수 없도록 브라우저가 1~2스크롤의 영역을 먼저 로딩하는 것을 의미한다. 이미지를 미리 전부 로딩하거나, 노출 임박하여 로딩되어서는 안된다.

  3. 풀 스크롤시 <IFRAME> 이 부모 페이지와 이질감없이 노출되는가?

    Hint

    • 전체 기술서가 온전히 표기되며 미노출 영역이나 과도한 하단 공백이 발생하지 않는다.

모니터링

  1. 데이터독 정상적으로 구성되어 있고, 메트릭 특히 오류(4xx, 5xx) 관련 메트릭이 정상 집계/보고 되고 있는가?

    Hint

    • 고의로 5xx를 만들 수 없다면 없는 페이지를 요청하여 4xx로 처리하여 수행한다.

  2. 서비스 품질범위가 정상적인 범위내에 있는가?

    Hint

    • timeout 된 Dirty 페이지는 5% 이하로 유지되어야 한다.

    • 1초 이상 소요되는 페이지 비율도 10%이하로 유지되어야 한다.

사용자 상호작용

Important

frontend 기능이 활성화된 경우

  1. 자바스크립트 a4890ed1-b4c1-4e0f-809c-eecf7da465f1.js 가 페이지에 삽입되어 있다.

  2. 상품기술서 영역만 처리대상으로 지정되어 있다. → frontend

  3. 화면 해상도를 변경하거나 Portrait, Landscape 전환시 여백없이 이미지 레이아웃이 유지된다. → responsive

  4. viewmore 가 적용되어 있다면 상품기술서가 900px (기본) 만큼만 표기된다.

    Hint

    1. 더보기 버튼이 이질감없이 표기되며, 버튼 하위 페이지가 정상 표기된다.

    2. 더보기 버튼 클릭시 전체 기술서가 표기되며 미노출 영역이나 과도한 하단 공백이 발생하지 않는다.

  5. pinchzoom 이 적용되어 있다면 기술서를 확대할 수 있다.

캐싱/라우팅

  1. 동일 상품기술서 리소스(페이지, 이미지, 비디오 등)는 항상 같은 M2Live 노드로 라우팅된다.

    Hint

    • 상품기술서 내 이미지, 비디오에 대한 처리와 proxy 함수 키워드 등이 분산 정책에서 예외로 동작해야 한다.

    • 1 Tier 구성인 경우 가상호스트의 instant bypass에 기반하여 분산된다.

    • 2 Tier 구성인 경우 Child 레이어에 의해 bypass로 분산된다.

  2. 응답되는 모든 리소스(페이지, 이미지)에 Cache-Control 이 적용되어 있다. Cache-Control 은 고객사에 문의하여 CDN-TTL (최소 12시간)로 지정한다. 또는 원본 페이지의 Cache-Control 을 사용한다.

  3. (CDN 미적용시) 최소 5분 이상의 ttl 이 적용되어 있고, 해당 시간동안 TCP_HIT 로 동작한다. → 1. 캐싱 구성

  4. (CDN 적용시) 반복 호출하여 HIT/MISS 여부를 확인한다. → CDN에 캐싱하는 환경

    Hint

    • [브라우저 개발자 모드] 일반적으로 X-Cache-Result 와 같은 헤더로 제공된다.

    • CDN 캐싱정책이 최소 5분 이상이어야 한다.

  5. 동일 콘텐츠를 다른 hyperdims 명령어로 호출시 ttl 동안 원본에 재요청하지 않는다.

    Hint

    • 2번째 요청에 대해 access.log 에는 TCP_MISS 가 기록되지만, origin.log 는 발생하지 않는다.

이미지

상품기술서 페이지 <HTML> 에 포함된 <IMG> 최적화 기능을 검수한다.

용량절감/최적화

  1. 조건에 미달되는 이미지는 가공하지 않는다. 그 외 모든 이미지는 가공되어야 한다.

    Hint

  2. <IMG> 태그가 <PICTURE> 태그로 클라이언트 호환성에 맞추어 제공된다.

    Hint

  3. 최적화된 이미지에 대해 용량 절감효과가 확인된다.

  4. 이미지 최대 폭 maxwidth (기본: 1200px) 을 초과하지 않는다.

  5. <MAP> 태그가 적용된 이미지는 분할하지 않는다.

분할/지연 로딩

  1. 분할된 이미지 사이의 틈새가 노출되지 않는다.

    Hint

    • 브라우저 “확대/축소” 옵션을 100%로 놓고 테스트한다. (간혹 배율이 홀수인 경우 틈새가 노출될 수 있음)

  2. 최소 분할조건(기본: 2000px) 을 초과하는 이미지만 1200px(기본) 단위로 분할된다.

  3. 분할된 개별 이미지가 용량절감/최적화 된다.

  4. lazy loading이 적용되었다면 스크롤에 맞추어 이미지가 노출된다.

    Warning

    • 한 번에 모든 이미지가 노출되면 안된다.

  5. <MAP> 태그가 적용된 이미지는 분할하지 않는다.

캐싱/라우팅

  1. 이미지 서비스 도메인에 hyperdims 함수가 활성화되어 있다.

  2. 이미지 서비스 도메인이 CDN에 위임되어 있다.

    Hint

    • CDN캐싱정책이 최소 12시간 이상임을 확인한다.

    • CDN정책이 명확하지 않은 경우 응답 고객과 협의하여 Cache-Control: max-age=... 를 12시간 이상으로 설정한다.

  3. 이미지 URL을 반복 호출하여 HIT/MISS 여부를 확인한다.

    Hint

    • [브라우저 개발자 모드] 일반적으로 X-Cache-Result 와 같은 헤더로 제공된다.

  4. 이미지 URL을 임의수정하였을 때 CDN MISS 를 통해 동일 노드에서 hyperdims 함수가 수행되어야 한다. 반드시 access.log 로 확인한다.

    Hint

    • 예를 들어 /resize/10 명령을 URL에 추가한다.

    • 노출 상품기술서 URL패턴이 같다면 반드시 동일 노드로 라우팅되어야 한다.

  5. 동일 콘텐츠를 다른 hyperdims 명령어로 호출시 ttl 동안 원본에 재요청하지 않는다.

    Hint

    • 2번째 요청에 대해 access.log 에는 TCP_MISS 가 기록되지만, origin.log 는 발생하지 않는다.

비디오

상품기술서 페이지 <HTML> 에 포함된 모든 비디오(애니메이션 GIF 포맷 포함) 최적화 기능을 검수한다.

용량절감/최적화

  1. 애니메이션 GIF 포맷이 <VIDEO> 태그로 실시간 변환된다. → gif2video

    Hint

    • 자동재생, 루프, 음소거, 인라인재생 등의 속성이 적용된다.

    • 원본 GIF 재생속도와 동일한 속도로 재생된다.

  2. <VIDEO> 태그가 멀티 <SOURCE> 로 제공된다.

    Hint

    • WEBM, MP4 등 클라이언트 호환성에 맞춘 비디오가 정상노출된다.

    • 특정 앱 지원등을 위한 호출규격이 있다면 해당 포맷이 미노출된다.

    • 빠른 재생을 위해 URL에 faststart 옵션이 명시된다.

  3. 원본에 비해 용량 절감이 확인된다.

캐싱/라우팅

  1. 비디오 서비스 도메인에 transcoder 함수가 활성화되어 있다.

  2. 비디오 서비스 도메인이 CDN에 위임되어 있다.

    Hint

    • CDN캐싱정책이 최소 12시간 이상임을 확인한다.

    • CDN정책이 명확하지 않은 경우 응답 고객과 협의하여 Cache-Control: max-age=... 를 12시간 이상으로 설정한다.

  3. 비디오 URL을 반복 호출하여 HIT/MISS 여부를 확인한다.

    Hint

    • [브라우저 개발자 모드] 일반적으로 X-Cache-Result 와 같은 헤더로 제공된다.

  4. 비디오 URL을 임의수정하였을 때 CDN MISS 를 통해 동일 노드에서 transcoder 함수가 수행되어야 한다. 반드시 access.log 로 확인한다.

    Hint

    • 예를 들어 /capture/ts=1 명령을 URL에 추가한다.

    • 노출 상품기술서 URL패턴이 같다면 반드시 동일 노드로 라우팅되어야 한다.

  5. 동일 콘텐츠를 다른 transcoder 명령어로 호출시 ttl 동안 원본에 재요청하지 않는다.

    Hint

    • 2번째 요청에 대해 access.log 에는 TCP_MISS 가 기록되지만, origin.log 는 발생하지 않는다.