자바스크립트로 간단하게 만들어 본 MIDI 시퀸스 플레이어입니다. 미디 모듈은 Roland사의 MT-32이며 이것은 MUNT라는 C/C++ 에뮬레이션 라이브러리를 Emscripten을 이용하여 ASM으로 포팅한 것입니다. SIERRA사의 Silpheed라는 슈팅게임 외 몇몇개의 사운드트랙을 데모용으로 올려두었습니다. (걍 플레이 버튼을 누르면 되요) MT-32용 MIDI 파일을 직접 구해서 플레이어로 끌어다 놓거나 버튼을 눌러 MIDI 파일을 선택하면 자동으로 재생합니다. 복수로 선택하는 경우 재생목록이 만들어 집니다. 더 많은 사운드트랙을 구하려면 구글링해서 어렵지 않게 얻을 수 있고, 특히, Loom, Monky Island, Ultima, Zeliard, YS의 사운드트랙을 추천합니다. 아쉽게도 GM 용으로 만들어진 MIDI 파일은 오류가 나거나 제대로 재생되지 않으며, iOS 브라우저는 ctx.createScriptProcessor의 onaudioprocess 콜백이 정상적으로 호출되지 못하는 이슈가 있어 작동하지 않습니다.iOS Unmute Hack을 이용하여 재생할 수 있습니다.
GM 기반 MIDI 파일은 libTiMidity 라이브러리를 ASM으로 포팅하여 재생이 되는 것을 확인하였습니다. 확실히 파워풀한 사운드를 들려주는군요. libTiMidity는 사운드폰트기반이어서 별도로 내려받아 실행해야 하고 쓸만한 폰트 파일의 크기가 100MB를 훌쩍 넘기 때문에 온라인 플레이어로 만들기는 다소 힘들어 보입니다.(폰트를 악기단위로 분리하고 MIDI 파일을 분석하여 필요한 악기만을 비동기로 로드하고 재생하는 개념의 midijs라는 프로젝트가 있네요!)
유년시절에 즐겼던 대부분의 DOD 게임들이 시퀸스 모듈을 이용하여 제작되었습니다. 시퀸스드 뮤직 파일은 여러 종류가 있는데 퀄리티 순으로 나열하면 General MIDI 호환 > MT-32 호환 > OPL 시리즈(AdLib Sound) > PC 스피커 순이 됩니다. 이 중에서도 중저가형인 MT-32호환 모듈인 CM-32를 사려고 용돈을 모으다가 저가형 하이-엔드 사운드 카드인 OPL-4기반의 "옥소리"가 출시되어 지르는 바람에 물 건너 가버렸던 그런 추억이 있는 시퀸스 모듈입니다. OPL-4는 YAMAHA사에서 만든 칩셋으로 낮은 가격대비 고수준의 PCM 음원을 내장한 시퀸스 모듈입니다만, 하필이면 이즈음 하드웨어에 의존 없이 소프트웨어 믹서만으로 CD 오디오 수준의 사운드를 재생하는 분위기로 개발 동향이 바뀌면서 시퀸스 사운드는 게임계에서 자취를 감추게 되었죠.
MT-32 음향을 꼭 한번 들어보고 싶었는데, 20년이 훌쩍 지난 지금 자바스크립트로 재생해 보게 되었네요. 추억 돋게 하는군요.
구글 검색 콘솔에 액셀러레이티드 모바일 페이지(AMP)라는 신기한 녀석이 출현했습니다. AMP는 모바일 환경에서 빠르게 로드되도록 설계된 페이지입니다. 자신의 웹사이트에 이를 적용하면 구글에서 제공하는 캐시에 저장되어 구글을 비롯한 여러 메타사이트가 웹페이지 프리뷰 등의 목적으로 활용할 수 있게 됩니다. 이전 글에 간단한 소개가 있으니 참고하세요.
AMP HTML 사양에 대한 기본적인 내용을 번역하기보다는 제가 이 작업을 수행하면서 경험한 삽질이나 알아낸 것, 유용하다고 생각되는 방법을 중심으로 설명하겠습니다. AMP 페이지를 작업하기에 앞서 선행되어야 할 사항으로 구글 페이지 인사이트에서 모바일 사용환경 테스트 점수를 80점 이상으로 통과한 상태여야 하며, 추가로 데이터 구조화 유형 중 아티클을 만족해야 합니다. 아티클 유형으로는 Article, NewsArticle, BlogPosting 또는 VideoObject입니다. 이 네 가지 유형에 속하지 않는 웹사이트는 AMP를 적용하는 것이 현재 무의미합니다. 그러면, 일반 게시판이나 위키, 쇼핑몰은 어디에 속할까요? 대부분 Article 유형에 속합니다.
Note: 선택적으로는 SSL을 지원하는 것이 좋습니다. <amp-form> 이나 <amp-video> 등 <amp-img>를 제외한 URL 속성을 필요로 하는 대부분의 AMP 컴포넌트가 SSL 주소를 요구하기 때문입니다.
여기부터 작성되는 내용은 위 두 조건을 모두 만족한 것을 전제로 합니다. 이제 AMP HTML을 작성해 봅시다. 기존 HTML에 AMP 모드를 추가할 것인지 아니면 AMP 페이지를 별도로 제공할 것인지를 우선 결정해야 합니다. 여기에는 장점과 단점이 존재합니다. 전자는 작업효율이 높습니다. 이미 잘 돌아가고 있는 HTML을 건드릴 필요가 없으니까요. 스펙 문서를 보고 마구잡이로 때려 고쳐 내려가면서 검사기를 통과시키면 됩니다. 단점은 관리 포인트가 늘어나는 것이죠. 후자는 고스란히 그 반대입니다. 굉장히 하드코어한 코딩을 구사하게 될 거에요. 저는 이 두 가지 방법을 모두 시도하는 것을 추천합니다. 최초 페이지를 별도로 작업하다 보면 두 문서 간의 차이점을 쉽게 찾아낼 수 있고요. 결국에는 하나의 작업물에서 두 가지 아웃풋을 내는 형태로 병합할 수 있습니다.
자, 이제 AMP HTML 스펙 문서를 열고 코딩하세요. 코딩하면서 아래의 유의해야 할 항목을 살펴보세요. 이것은 제가 범한 실수이고 오류가 보고될 때마다 기록한 것입니다. 작게 여겨질 수도 있겠지만, 오류 하나가 보고되면 이 오류 항목이 사라지기까지는 보통 1달 정도 혹은 그 이상의 시간이 소요된다는 점 꼭 유념하시기 바랍니다.
끝으로 <link rel="amphtml"> 태그를 고유 문서의 <head>에 삽입하고 크롤링 당합니다.
<link rel="amphtml"> 태그의 값에는 원래 문서 주소의 규칙을 유지하는 것이 좋습니다.
서로 다른 고유주소를 가진 문서가 하나의 <link rel="amphtml"> 주소를 가르키지 않도록 해야합니다. 오류가 두 달 이상 사라지지 않고 있네요.
<amp-pixel>을 이용하여 캐시에 저장된 페이지로 사용자가 접근하는 것을 모니터링 하거나 할 수 있습니다.
<amp-iframe>에 삽입된 컨텐츠가 스크롤을 가지는 경우 나타나지 않을 수 있으며, 나타나지 않을 경우를 대비한 대체(placeholder) 이미지를 필요로 합니다.
<amp-form>을 이용하여 검색이나 댓글 작성기능을 추가할 수 있습니다. 단, SSL이여야 하며, CORS 이슈까지 처리해야 정상적으로 작동합니다.
Google Search Console(firejune.com) > Search Appearance > Accelerated Mobile Pages
모든 유효성 검사를 통과하고 크롤러가 문서를 긁어가면 구글 AMP 캐시에 저장되고 그 결과를 위 그림처럼 서치 콘솔에서 확인할 수 있습니다. 그리고 일정 시간이 지나면 이후 부터 검색 결과에 노출되기 시작합니다. AMP 캐시 서버에 저장되는 대상은 HTML 문서와 포함된 이미지 파일이며 그외 정적인 파일은 SSL기반의 핫링크가 걸리게 되죠. 캐시된 문서는 다음과 같이 REST API를 이용하여 접근 하거나, 갱신됨을 알리(핑)거나, 캐시된 URL 목록을 호출하거나, 삭제요청을 직접적으로 수행할 수도 있습니다.
# Request for an AMP HTML document
GET https://cdn.ampproject.org/c/s/example.com/amp_document.html
# Request for an image
GET https://cdn.amproject.org/i/example.com/logo.png
# Request an AMP URL
POST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet
# Update ping
GET https://cdn.ampproject.org/update-ping/c/s/ampbyexample.com
# Remove AMP content
GET https://cdn.ampproject.org/update-ping/i/s/example.com/favicon.ico
Note: 캐시 상태를 신속하게 동기화 할 수 있는 수단이며, 일반적으로 크롤러가 알아서 하기 때문에 선택사양입니다.
우와…. 이걸 다 언제 작업하나요…. 아…. 이 짓을 다시 한다는 것은 군대를 다시 들어가는 그런 느낌이군요. 그래서 조금이나마 도움을 드리고자 PHP로 작성한 Ampify 클래스를 공유합니다. 이 정적인 클래스는 GeSHi라는 라이브러리를 이용하여 코드의 문법 강조 기능을 포함하고 있습니다. 응답이 많이 느려지지만 클라이언트에서 할 수 없으니 백-엔드에서 할 수밖에요. 나중에 확장 컴포넌트로 나오려나요? 어차피 기계가 방문할 페이지인데 좀 느려도 괜찮겠죠. 그리고 빠른 이미지 크기 추출을 위해 fastimage.php를 필요로 합니다. 간단한 사용법은 Ampify::content($html) 메서드를 호출하여 일반 HTML을 AMP로 변환합니다. 더 자세한 내용은 코드에 있습니다. ;)
/**
* Ampify class
*
* @license MIT
* @author Firejune
* @version 0.4.19
*/
class Ampify {
// An var of list for source code syntax highlighting
private static $highlights = array();
// An var of list for extnend component loading
private static $components = array();
// Source code syntax highlight using GeSHi
private static function codeHelper($matches) {
require_once('lib/geshi/geshi.php');
$lang = str_replace('language-', '', $matches[1]);
$code = rtrim($matches[2]);
if ($lang == 'json' || $lang == 'jsx') $lang = 'javascript';
if ($lang == 'html' || $lang == 'markup') $lang = 'html5';
if ($lang == 'command') $lang = 'bash';
if (!in_array($lang, self::$highlights)) {
self::$highlights[] = $lang;
}
$geshi = new GeSHi(str_tag_on(strip_tags($code)), $lang);
$geshi->enable_classes();
$code = $geshi->parse_code();
$code = preg_replace('/<[ ]*pre( [^>]*)?>/i', '<pre$1><code>', $code);
$code = preg_replace('/<\/pre>/i', '</code></pre>', $code);
return self::fixClassName($code);
}
// Return defined styles of syntax highlight
private static function getCodeStyle() {
$geshi = new GeSHi;
$languages = self::$highlights;
foreach ($languages as $language) {
$file = $geshi->language_path.$language.'.php';
if (!file_exists($file)) {
continue;
}
$geshi->set_language($language);
$css .= preg_replace('/^\/\*\*.*?\*\//s', '', $geshi->get_stylesheet(false));
}
return $css;
}
// Fix class names of syntax type
private static function fixClassName($code) {
$entities = array('class="command"', 'class="html"', 'class="json"', 'class="jsx"');
$replacements = array('class="bash"', 'class="html5"', 'class="javascript"', 'class="javascript"');
return str_replace($entities, $replacements, $code);
}
// Retrun Accepted HTML5 tags and AMP components
private static function getAllowTags() {
$html = '<h1><h2><h3><h4><h5><h6><a><p><ul><ol><li><blockquote><q><cite><ins><del><strong>'
.'<em><code><pre><svg><table><thead><tbody><tfoot><th><tr><td><dl><dt><dd><article>'
.'<section><header><footer><aside><figure><figcaption><time><abbr><div><span><hr><br>'
.'<kbd><u><b><i><s><small><caption><address><button><source>';
$amp = '<amp-embed><amp-img><amp-pixel><amp-video><amp-audio><amp-anim><amp-iframe><amp-fit-text>'
.'<amp-access><amp-font><amp-slides><amp-ad><amp-list><amp-live-list><amp-social-share>'
.'<amp-lightbox><amp-carousel><amp-accordion><amp-youtube><amp-vimeo>';
return $html.$amp;
}
// Ignoring not allowed attribute of AMP for all tags.
private static function ignoreHelper($m) {
$tag = $m[0];
$attributes = $m[2];
preg_match_all('/([\w-]+)\s*(?:=\s*(?:"([^"]*)"|\'([^\']*)\'|(\w*[^\s>]*)))?/usix', $attributes, $matches);
foreach ($matches[1] as $key => $val) {
$attr = $matches[2][$key];
if (!$attr) $attr = $matches[3][$key];
if (!$attr) $attr = $matches[4][$key];
if ($val == 'href' && strpos($attr, 'javascript:') !== false) {
$tag = str_replace($attr, '#', $tag);
}
if (preg_match('/^(on(click|mousedown|mouseup|mousemove|mouseout|mouseover|load)|style|summary)/i', $val)) {
$tag = str_replace($matches[0][$key], '', $tag);
}
}
return $tag;
}
// An helper for image tag
private static function imageHelper($m) {
$attr = $m[1];
$args = array();
preg_match_all('/([\w-]+)\s*(?:=\s*(?:"([^"]*)"|\'([^\']*)\'|(\w*[^\s>]*)))?/usix', $attr, $matches);
# Allowed attr of <amp-img>
foreach ($matches[1] as $key => $val) {
if (preg_match('/(src|srcset|layout|heights?|alt|role|on|tabindex|placeholder|widths?|data-*|type|class)/i', $val)) {
$attr = $matches[2][$key];
if (!$attr) $attr = $matches[3][$key];
if (!$attr) $attr = $matches[4][$key];
$args[$val] = $attr;
}
}
if (!$args['layout']) {
$args['layout'] = 'responsive';
}
if (strpos($args['width'], '%') !== false) {
$args['width'] = 0;
}
if (strpos($args['height'], '%') !== false) {
$args['height'] = 0;
}
if (!$args['width'] || !$args['height']) {
require_once('lib/fastimage.php');
$src = $args['src'];
if (preg_match('/\/\/(m\.)?firejune(\.cafe24)?.com/i', $src)) {
$src = preg_replace('/https?:\/\/(m\.)?firejune(\.cafe24)?.com/i', '', $src);
}
$src = preg_replace('/^\.\.?\//', '/', $src);
if (!preg_match('/(https?:)?\/\/[^\/]+\//i', $src) && preg_match('/^\/images\//i', $src)) {
$src = '/public'.$src;
}
if (strpos($src, '/public/images/') === 0) {
$args['layout'] = 'fixed';
}
$img = new FastImage('./'.$src);
$size = $img->getSize();
if ($args['width']) {
$args['height'] = intval($size[1] / $size[0] * $args['width'], 10);
} elseif($args['height']) {
$args['width'] = intval($size[0] / $size[1] * $args['height'], 10);
} else {
$args['width'] = $size[0];
$args['height'] = $size[1];
}
}
if ($args['width'] < 240 && $args['height'] < 240) {
$args['layout'] = 'fixed';
}
if (!$args['src'] || !$args['width'] || !$args['height']) {
return '';
}
$attr = '';
foreach ($args as $key => $val) {
$attr .= ' '.$key.'="'.$val.'"';
}
return '<amp-img'.$attr.'></amp-img>';
}
// An helper for video tag
private static function videoHelper($m) {
$tag = $m[0];
$src = $m[1];
$tag = preg_replace('/<amp-video(.*?)>/', '<amp-video$1 layout="responsive">', $tag);
return str_replace($src, strip_tags($src, '<source>'), $tag);
}
// An helper for iframe tag
private static function iframeHelper($m) {
$tag = $m[0];
$src = $m[1];
preg_match('/<iframe.*width="([^"]\d+)".*height="([^"]\d+)".*>/', $tag, $m);
$width = $m[1];
$height = $m[2];
# amp-youtube
if (preg_match("/^(?:http(?:s)?:)?\/\/(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'>]+)/", $src, $id)) {
return '<amp-youtube data-videoid="'.$id[1].'" layout="responsive" width="'.$width.'" height="'.$height.'"></amp-youtube>';
}
# amp-vimeo
if (preg_match('/(https?:\/\/)?(www\.)?(player\.)?vimeo\.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/', $src, $id)) {
return '<amp-vimeo data-videoid="'.$id[5].'" layout="responsive" width="'.$width.'" height="'.$height.'"></amp-vimeo>';
}
# amp-iframe
return '<amp-iframe src="'.$src.'" width="'.$width.'" height="'.$height.'" sandbox="allow-scripts" layout="responsive" class="bdr1" frameborder="0"></amp-iframe>';
}
// Add using AMP extend compoenent to list
public static function add($component) {
if (is_array($component)) {
$component = 'amp-'.$component[1];
}
if (!in_array($component, self::$components)) {
self::$components[] = $component;
}
}
// Convert contents to AMP compoents
public static function content($html) {
$html = self::html($html);
$html = self::html($html);
# Remove unnecessary tags
$html = preg_replace('/<(script|style).*?<\/\1>/s', '', $html);
# Replace iframe tag to AMP component
$html = preg_replace_callback('#<iframe.*?src="([^"]*)".*?[^>]*>.*?</iframe>#si', 'ampify::iframeHelper', $html);
# Reduce ignore attributes
$html = preg_replace_callback('/<([\w-]+) ([^>]*)?>/si', 'ampify::ignoreHelper', $html);
# Code syntax hightlight
$html = preg_replace_callback('#<pre.*?class="([^"]*)".*?[^>]*><code>(.*?)?</code></pre>#is', 'ampify::codeHelper', $html);
# Whitelist of HTML tags allowed by AMP
$html = strip_tags($html, self::getAllowTags());
# Dynamic load amp components
preg_replace_callback('/<\/amp-(youtube|vimeo|iframe|accordion|carousel)>/', 'ampify::add', $html);
return $html;
}
// Convert generic HTML to AMP
public static function html($html) {
# Replace img, audio, and video elements with amp custom elements
$html = str_ireplace(
array('<img', '<video', '/video>', '<audio', '/audio>'),
array('<amp-img', '<amp-video', '/amp-video>', '<amp-audio', '/amp-audio>'),
$html
);
# Add amp attribute to html tag
$html = preg_replace("/<[ ]*html( [^>]*)?>/i", '<html amp$1> ', $html);
# Fix display amp custom elements
$html = preg_replace_callback('/<amp-img(.*?)\/?>/', 'ampify::imageHelper', $html);
$html = preg_replace_callback('#<amp-video.*?[^>]*>(.*?)?</amp-video>#is', 'ampify::videoHelper', $html);
return $html;
}
// Return stylesheets string from files
public static function css($path, $name) {
$css = file_get_contents($path.$name.'/css/master.css');
$css .= file_get_contents($path.$name.'/css/article.css');
$css .= file_get_contents($path.$name.'/css/responsive.css');
if (!empty(self::$highlights)) {
$css .= self::getCodeStyle();
}
return $css;
}
// Return extended components when it using
public static function js() {
foreach (self::$components as $component) {
$js .= '<script async custom-element="'.$component.'" src="https://cdn.ampproject.org/v0/'.$component.'-0.1.js"></script>';
}
return $js;
}
}
Note: 이곳의 사정에 맞게 코딩된 것으로, 모든 곳에서 작동한다는 보장은 못합니다. 참고용으로만 이용해 주세요.. :(
스마트폰에서 구글 검색을 하던 중 수년간을 버리다시피 하던 이곳의 컨텐츠가 검색 결과에 노출되었습니다. 그런데, “페이지가 모바일에 적합하지 않습니다.”라는 메시지가 뜨더군요? 이 문구는 모바일 사용환경에서 구글 웹 검색을 이용하는 경우 사용자에게 경고성으로 알리는 내용 같았습니다. 뭔가, 기분이 썩 좋지는 않습니다만, 신기하기도 하죠. 지가 뭔데 그런 심판(?)을 내리는지 말예요. 그동안 구글 검색이 무슨 짓거리를 했는지에 대하여 대략 살펴보았습니다.
2014년부터 구글 검색 크롤러가 더욱 똑똑해져서 페이지에 포함된 스타일시트와 자바스크립트가 컨텐츠에 영향을 끼치는 여부를 인지합니다. 다시 말해, 자바스크립트에 의해 생성된 내용도 검색 결과에 노출될 수 있으며, CSS에 의해 숨겨놓은 컨텐츠는 검색 대상에서 제외하는 등의 장치를 마련한 것입니다. 구글 서치 콘솔(구글 웹마스터 도구)에서 Fetch As Google에 “가져오기 및 렌더링”을 요청하면 “Googlebot에게 페이지가 다음과 같이 보입니다.” 라면서 마치 눈이라도 달라준 것 마냥 렌더링된 페이지를 보여줍니다. 이와 동시에 2009년에 추가된 AJAX crawling scheme는 Deprecated 되었고요.
2015년에는 모바일 환경에서 웹사이트를 이용하는 것이 병맛이라며 캠페인을 하더니, 모바일 전용 봇(크롤러)을 별도로 운영하면서 구림과 구리지 않음을 스스로 판단하기에 이릅니다. 그리고는 "모바일에 친화적이지 않으면 모바일 검색 결과에 안 좋은 영향을 미치게 될 것"이라면서 테스트 도구를 달랑 하나 던져주고 시험에 통과할 것을 강제합니다.
Google Search Console(firejune.com) > Search Traffic > Mobile Usability
노트: 모바일 친화성 테스트에 통과하려면 구글페이지 스피드 인사이트 모바일 섹션에서 제공하는 가이드라인에 맞게 사이트를 수정하고, 사용자 환경 점수를 80점 이상 받아야 통과되며, 디바이스 기준은 안드로이드 6.0.1 넥서스5X(Build/MMB29P)입니다. 수정 후 반영까지 규모에 따라 다르겠지만, 최소 한 주 정도 소요되는 것으로 보입니다.
그리고 2016년에는 PageRank 점수를 더이상 공개하지 않기로 합니다. 이 점수는 내부적으로만 사용될 것이라고 했습니다. 여러가지 이유가 있지만 이 점수 체계를 이용한 악용 사례를 원천적으로 차단하기 위한 것으로 판단됩니다. 또한 구글 AMP(Accelerated Mobile Pages)라는 프로젝트를 서치 콘솔에 집어넣고 자기들 검색 결과에 색다른 출력 방법을 꾀하려고 합니다. 이 프로젝트는 이름에서 알 수 있듯이 모바일에서 웹 컨텐츠를 더욱 빠르고 쉽게 접근할 수 있도록 하자는 목표를 가진 구글의 프로젝트입니다. 자세한 내용을 유스풀패러다임에서 잘 정리해 주셨네요.
제가 이해한 바로는, "당신들이 만든 사이트는 하나같이 전부 거지 같으니, 우리가 제시하는 지침대로 다시 만들어서 제출하면 사용자들은 엄청나게 빠르고 편리한 모바일 사용경험을 누리게 될 거고, 당신은 트래픽 비용을 절감할 수 있을 거예요."라는 것인데, 여기서 빠르고 편리하다는 의미는 사용자가 검색 결과를 클릭했을 때 사용자의 사이트로 직접 연결하지 않고 AMP 캐시로부터 컨텐츠를 불러와 검색 사이트 내에서 보여주는 것을 말하는 것입니다. 아웃바운드 링크를 인바운드 링크로 둔갑시켜 사용자가 구글 사이트를 떠나지 못하게 잡아두겠다는 의미로도 해석되지요. 또한, AMP 캐시에 저장된 데이터는 아무런 조건 없이 누구나 사용할 수 있게 될 것이랍니다. 즉 페이스북이나 트위터와 같은 곳에서도 같은 목적으로 사용할 수 있게 된다는 뜻이고요.
AMP 지침을 살짝 들여다보면 모바일 친화적인 건 기본이고 AMP에서 제시하는 태그를 사용할 것, 허용하지 않는 속성은 사용하지 말 것, 사용자가 작성한 자바스크립트 쓰지 말 것, 스타일시트는 적정량의 인라인으로 넣을 것 등 수십 가지 유효성 규칙이 존재하며 검사를 통과해야 합니다.
Google Search Console(firejune.com) > Search Appearance > Accelerated Mobile Pages
도대체 얼마나 빨라진다는 건지 궁금하기도 하고, 대략 이 정도면 서로 도움되는 그림인 것 같아 그냥 적용해 보기로 한 것입니다. 그래프에서 알 수 있듯이 작업을 시작한 시점이 약 두 달 전입니다. 당시 아래와 같은 백로그를 작성하고 짬짬이 수행했고요. 지금은 모두 완료된 상태입니다. 원래 AMP를 적용하는 과정에 대한 기술적 내용을 다루려고 했으나 뻘소리만 늘어놓는 바람에 프롤로그만 작성했습니다. 다음번에 별도로 AMP 적용기를 작성하도록 하겠습니다.
오류가 발생하는 구조화된 데이터 모두 수정
구조화된 데이터에 Breadcrumbs, Searchbox 추가
구글 서치 콘솔의 모바일 사용 편의성에 보고된 오류 모두 수정
액셀러레이티드 모바일 페이지 지원
모바일 사이트 별도 제공(Cafe24에서 제공하는 기능은 Path를 잘라 먹음)
Cafe24에서 UDP소켓 막아버림, Node서버를 이용한 Twitter 연동
로그인 페이지 개구림
PDF 모바일에서 깨짐
서버-사이드 문법강조기 추가
SSL 적용(미친 Cafe24 SSL 포트를 48408 이렇게 주면 어떻게 쓰라는 거야?)
Comments