최신 기법 적용하기¶
트렌드에 맞는 다양한 기법을 레거시 상품기술서 수정없이 즉시 반영하는 방법을 알아본다.
반응형 상품기술서¶
반응형 상품기술서 패턴을 구현한다.
# functions.contents.pageEffector
"responsive": {
"enable": true,
"width": 800
}
위 예제에서는 모바일 대응이 용이하도록 가로폭을 800px 로 설정하였다.
고정형 상품기술서를 반응형 상품기술서로 즉시 변경한다.
PC기준 웹페이지가 모바을 대응이 되도록 변경한다.
아래와 같이 단위 테스트를 거쳐 노출 URL을 결정한다.
// 페이지 전체
https://example.com/products/100/m2x/mixed/main/responsive
// <div id="prdDesc">
https://example.com/products/100/m2x/mixed/main:prdDesc/responsive
https://example.com/products/100/m2x/mixed/main!prdDesc/responsive
이미지 분할로딩¶
상품기술서를 구성하는 이미지는 매우 긴 경우가 많다.
2만 pixel이 넘는 이미지¶
특히 모바일 환경이라면 보이지 않는 영역까지 로딩하거나, 너무 큰 이미지를 로딩하는 것은 고객 경험을 저해한다.
다음 설정을 통해 상품기술서 이미지 높이가 800px 을 넘지 않도록 분할한다.
# functions.contents.pagefx.backend.img
"splitimg": {
"enable": true,
"dest": {
"splitHeight": 800
}
}
M2는 서비스 품질을 개선하기 위해 상품기술서 내 이미지를 분석하여 분할, 최적화가 가능하다.
// 원본
https://example.com/product/100
// Mixed Contents 처리
https://example.com/product/100/m2x/mixed/main
// Mixed Contents 처리 + 이미지 분할로딩
https://example.com/product/100/m2x/mixed/main/image/split/400
// Mixed Contents 처리 + 이미지 최적화
https://example.com/product/100/m2x/mixed/main/image/optimize
// Mixed Contents 처리 + 이미지 분할로딩 + 이미지 최적화
https://example.com/product/100/m2x/mixed/main/image/split/400/optimize
이상의 이미지 처리는 이미지 트래픽이 반드시 M2를 거쳐야만 동작한다.
Note
상품기술서 내 이미지가 모두 백엔드로 유입되는 것은 매우 부담스럽다. 따라서 이 기능을 활성화하기 전에 최소한만 처리되도록 CDN 또는 캐싱의 TTL을 최대한 길게 유지하는 것이 바람직하다.
상품기술서 실시간 수정¶
상품기술서의 특정 문자열을 치환하거나 유해 태그등을 삭제한다.
# functions.contents.pageDesk
"meta" : {
"enable" : true,
"keyword": "pagedesk"
},
"replace": {
"pre": {
"enable" : true,
"list" : [
{
"src" : "://foo.com/",
"dest" : "://new.foo.com/"
},
{
"src" : ".bar.com/image/",
"dest" : ".bar.com/s3/image/"
}
]
},
"post": {
"enable" : true,
"list" : [
{
"src" : "/logo.jpg",
"dest" : "/logo_2022.jpg"
}
]
}
}
pageDesk 는 다른 page*** 계열 엔진의 기반 엔진으로 DOM-Tree 를 생성하여 전달한다.
DOM-Tree 생성 이전시점은 pre 에서 설정하며, 다른 엔진까지의 모든 처리가 완료된 후 시점은 post 에서 처리한다.
태그 제거¶
상품기술서 내 유해 태그등을 삭제한다. 이 기능은 deprecated , obsolete 요소들을 상품기술서에서 삭제할 목적으로 개발되었다. 따라서 기본 설정은 deprecated , obsolete 에서 언급된 목록들을 포함하여 배포되지만, 임의의 태그를 추가하여도 동작한다.
# functions.contents.pageDesk
"dom" : {
"remove" : {
"enable" : true,
"includeChild" : true,
"elements" : [
"applet",
"acronym",
"bgsound",
"dir",
"frame",
"frameset",
"noframes",
"hgroup",
"isindex",
"listing",
"nextid",
"noembed",
"strike",
"xmp",
"basefont",
"big",
"blink",
"center",
"font",
"marquee",
"menu",
"menuitem",
"multicol",
"nobr",
"spacer",
"tt",
"rb",
"rtc"
]
}
}
remove 설정이 dom 하위에 있는 것을 통해 이 기능이 DOM-Tree 구성 이후 동작함을 알 수 있다.
Note
W3C - Obsolete features 는 꾸준히 제안되고 있으며, M2는 HTML 5.2 제안을 따른다.
핀치 줌¶
M2의 프론트엔드 모듈인 m2fe.min.js 를 <HEAD> 영역에 삽입한다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/your-path/m2fe.min.js"></script>
<script>
window.M2OPTION = {};
</script>
</head>
<body>
<div id="m2-product-area">
<div style="margin-top: 20px;">
<strong style="color: rgb(51, 51, 51);">소개합니다</strong>
</div>
<ul style="margin-top: 10px;">
<li>- 편안하게 입을 수 있는 남성 폴리 사틴 파자마 상하세트입니다.</li>
<li>- 허리 밴딩 처리로 편안하며 허리 조절 스트링으로 사이즈 조절이 가능합니다.</li>
<li>- 양쪽 포켓으로 간단한 수납이 가능합니다.</li>
<li>- 비침이 없으며 배색 파이핑과 가슴판 포켓으로 포인트를 준 디자인입니다.</li>
</ul>
<img src="pajama.jpg">
</div>
</body>
</html>
CSS Selector 로 m2-product-area 영역을 지정한다.
window.M2OPTION = {
contentSelector: '#m2-product-area',
pinchzoom: {
enable: true
}
};
M2에서 다음과 같이 pinchZoom 기능을 활성화하면 핀치 줌 기능이 삽입된다.
# functions.contents.pageEffector
"pinchZoom": {
"enable": true,
"selector": "...
}