꿈꾸는섬 | 사례와 트렌드 탐구

[쇼핑몰 구축기] 최고의 워드프레스 검색 엔진을 찾자

happist

-

2019-06-09

0

쇼핑몰이 커지면서 쇼핑몰이가지고 있는 아주 다양한 정보를 쉽고 빠르게 검색할 수 있으려면 아무래도 워드프레스 자체가 가진 검색 능력을 뛰어 넘어야 합니다.

하여 워드프레스 기본 검색 엔진을 대체할 수 있는 다양한 검색 엔진들을 살펴보고 어는 것이 적절한지 함 살펴 보도록 하겠습니다.

[검색 고도화] 최고의 검색 엔진을 찾자

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[검색 고도화] 최고의 검색 엔진을 찾자

앞선 포스팅에서 쇼핑몰에서 검색 폼을 만들고 라이브 서치(Live Search) 기능을 추가하는 등 검색 편리성을 중점으로 살펴보았다면 여기서는 검색 질을 높일 수 있는 검색엔진에 대한 이야기를 살펴보기로 합니다.

들어가며, 검색관련 세가지 프로세스

검색 관련해서는 사이트 내용을 잘 정리해 빠르고 정확하게 검색을 할 수 있게 만드는 검색 엔진과 검색할 수 있도록 검색 양식을 만드는 검색폼 그리고 검색 결과를 어떻게 보여줄 것인가라는 세가지 프로세스가 있습니다.

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

[검색 고도화] 최고의 검색 엔진을 찾자

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

[검색 고도화] 메뉴에 검색 기능 추가하기

세번째, 검색 결과를 어떻게 보여줄 것인가

[검색 고도화] 라이브 서치 기능 추가하기

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

여기에서는 이러한 세가지 프로세스 중에서 워드프레스 자체 콘텐츠를 제대로 정리하고 데이타베이스화해서 제대로 빠르게 정확하게 검색하는 기본이 되는 검색엔진에 대해서 살펴보겠습니다.

구글에서 검색엔진을 검색하면 주로 검색엔진 최적화(SEO) 관련 내용이 대부분인데요. 여기서는 그런 검색엔진 최적화(SEO)가 아닌 워드프레스 쇼핑몰 자체 콘텐츠 검색을 제대로 해줄 수 있는 검색엔진 또는 검색엔진 플러그인은 무엇이 있는지 살펴보겠습니다.

물론 사이트가 초기 단계라면 솔직히 검색량이 많지 않기 때문에 워드프레스 기본 검색엔진을 사용하면 됩니다.

그러나 콘텐츠가 증가하고 취급 상품 그리고 상품 및 서비스에 대한 리뷰 등등 콘텐츠가 많아지면 이용자가 원하는 정보를 바로 찾을 수 있게 만드는 것 또한 중요한 경쟁 포인트가 될 수 있기 때문에 워드프레스 기본 검색엔진을 뛰어넘는 새로운 검색엔진을 찾게 되는 것이죠.

다른 좋은 플러그인도 많지만 여기에서는 워드프레스에 설치형 중심으로, 대형 사이트에 맞춘 WPSolr, 중소형 사이트에 맞는 SearchWP 그리고 무료로도 훌륭한 Relevanssi – A Better Searc라는 세개를 살펴봤습니다.

1. WPSolr

WPSolr은 강력한 검색 플랫폼인 Elasticsearch 나 Apache Solr를 이용해 검색 결과를 정교화할 수 있으며, 그 형태는 아마존이나 이베이와 같은 초대형 쇼핑몰과 비슷한 방식으로 검색을 할 수 있게 만들며, 더 나아가 대규모 데이타베이스하에서도 엄청나게 빠른 속도로 검색이 가능하다고 주장하고 있습니다.

1.1. 주요 특징

WPSolr는 대규모 사이트에서의 검색 솔류션을 지향합니다. 위에서 잠깐 언급했듯이 규모가 있는 워드프레스 사이트 또는 우커머스 사이트에서 몇백만개의 검색 결과를 순식간에 검색한다고 쥬장하죠.
사용자가 검색 때문에 스트레스를 받지 않토록 아마존이나 이베이와 같은 쉬우면서도 강력한 검색이 가능합니다.
굉장히 다양한 플러그인들고 호환, 작동합니다. 우커머스, Advanced custom fields, WPML 및 Polylang, TablePress, bbPress, PDF Embedder, Google doc Embedder 등

1.2. 가격

유감스럽게도 이 WPSolr 플러그인은 무료로 상요할 수는 없습니다. 물론 일정기간 테스트 사용 기간은 있지만 말입니다.

연간 계약 시 199유로
월간 계약 시 월 29유로

2. SearchWP

SearchWP는 무료 라이브 서치 플러그인으로 널리 알려진 SearchWP Live Ajax Search을 배포하는 곳에서 제공하고 있는 워드프레스 검색 플러그인입니다.

플러그인측에서는 이 검색 플러그인은 중소형 사이트에 적합하다고 밝히고 있습니다. SearchWP was designed and built to work best on small-to-midsize WordPress sites

수만개, 수십만개의 콘텐츠가 있는 사이트라면 다른 방안을 찾으라고 권고 하고 있습니다.

2.1. 주요 특징

이 플러그인의 장점은 아래와 같이 정리해 볼 수 있습니다.

매우 다양한 기능
사이트를 정교하게 검색할 수 있도록 다양한 필터를 제공하고 콘텐츠 특성별, 분류 체계 그리고 사용자 지정 필드 등등에 다양한 방식으로 가중치를 둘 수 있음
우커머스, 다른 이커머스 플러그인 지원, PDF 검색 등 다양한 프리미엄 기능
WooCommerce Integration, Related Content, Redirects 및 Metrics. 와 같은 프리미엄 확장 기능을 통해 검색 관련 경험 및 관리를 최적으로 할 수 있는 가능성을 높임

2.2. 가격

마찬가지로 이 SearchWP은 전부 유료 플러그인입니다.

1개 사이트에 적용 가능한 Standard Version – 99$
5개 사이트 적용 및 프리미엄 확장 기능이 있는 Pro Version – 149$
무제한 사이트 적용 및 프리미엄 확장 기능이 있는 Pro Plus version – 299$

3. Relevanssi – A Better Search

Relevanssi는 워그프레스 사용자 검색 시 가장 연관성이 높은 검색 결과를 보여주겠다는 것에서 이름을 따왔습니다.

이 Relevanssi 플러그인은 무료/유료 기능으로 나누어지는데요. 무료 기능중에서는 가장 파워플한 기능을 제공합니다.

3.1. Relevanssi 특징

Relevanssi의 무료 버젼의 특징을 아래와 같이 정리해 볼 수 있습니다.

검색 결과를 연관성이 높은 순서로 보여줍니다.
Fuzzy matching – 비록 완벽하게 일치하지는 않터라도 부분적으로 일치하는지를 판단해 보여줍니다.
OR 또는 AND 검색
문구 및 인용문 검색 가능
검색 결과를 강조 기능
댓글, 태그, 카테고리 및 커스텀 필드 검색 가능
멀티 사이트
bbPress, WPML 및 Members 지원
구글 스타일의 “Did you mean?” suggestions

프리미엄 버변은 이외에도 다음과 같은 기능들을 제공합니다.

첨부 파일 및 PDF 파일 색인
서브 사이트간 검색
카스텀 필드 검색
사용자 프로파일과 분류 용들에 대한 색인 및 검색 지원
유형별 가중치 부여해 검색 결과를 향상시킬 수 있는 기능 지원

3.2. 가격

Relevanssi 일반 버젼은 무료로 사용할 수 있습니다.

그러나 보다 더 전문적인 기능을 원하면 프리미엄 버젼을 사용할 수 있는데요.

사이트 제한없는 연간 이용권은 108.9$
사이트 제한없는 영구 이용권은 383.9$

3.3. Relevanssi의 치명(?)적인 단점

생각하기에 따라서 치명적인 단점으로 이야기될 수 있는 문제가 있습니다. 즉 한국어나 일본어와 같은 동양권 언어를 제대로 지원하지 않습니다.

Relevanssi에서는 그렇기 때문에 한단어 검색같은 기능이 작동하지 않습니다. 즉 검색 옵션에서 한 글자만 입력해도 검색 결과가 나오도록 설정해도 두글자를 입력해야 그 때부터 검색결과가 보입니다.

첫 글자부터 검색 결과가 나오길를 원한다면 Relevanssi를 사용하기 어렵겠다는 생각입니다. 저도 이것때문에 어청 헤매다 포기했습니다.

그리고 이 Relevanssi 플러그인은 별도의 라이브 서치 기능을 제공하지는 않습니다. 여기에서는 이전에 소개했던 “SearchWP Live Ajax Search” 를 가장 좋은 라이브 서치 플러그인으로 추천하고 있습니다.

4. 마치며

위에서 쇼핑몰에 적용할 여러 검색 엔진을 살펴보았는데요.

다들 뛰어난 검색 엔진이기는 하지만 대규모 사이트에 적합하는 WPSol는 아무래도 부담스럽고, Relevanssi는 위에서 언급한대로 동양 언어와 궁합이 좋지 않다고하므로 라이브 서치 SearchWP Live Ajax Search과 궁합을 고려해서 우선 SearchWP를 사용하면서 그 사용성을 검증해보려고 합니다..

[쇼핑몰 구축기] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

happist

-

2019-06-09

0

[쇼핑몰 구축기] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

앞서 포스팅했던 라이브 서치 기능 추가 방법에서 소개한 여러 플러그인 중에서 SearchWP라는 괜찮은 검색 업체에서 제공하는 SearchWP Live Ajax Search 플러그인을 제대로 사용하는 방법에 대해 살펴봅니다.

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

여기에서는 라이브 서치 플러그인인 중에서 가장 무난하게 사용할 수 있는 “SearchWP Live Ajax Search” 플러그인을 제대로 사용하는 방법에대해서 알아보겠습니다.

들어가며, 검색관련 세가지 프로세스

검색 관련해서는 사이트 내용을 잘 정리해 빠르고 정확하게 검색을 할 수 있게 만드는 검색 엔진과 검색할 수 있도록 검색 양식을 만드는 검색폼 그리고 검색 결과를 어떻게 보여줄 것인가라는 세가지 프로세스가 있습니다.

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

[검색 고도화] 최고의 검색 엔진을 찾자

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

[검색 고도화] 메뉴에 검색 기능 추가하기

세번째, 검색 결과를 어떻게 보여줄 것인가

[검색 고도화] 라이브 서치 기능 추가하기

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

아러한 세가지 프로세스중에서 여기에서는 검색 결과를 어떻게 보여줄 것인가에 대한 이야기 중의 하나인 라이브 서치 기능에 대해서 알아보겠습니다.

이전 포스팅 “[쇼핑 경험 최적화] 라이브 서치 기능 추가하기”에서 무료로 사용가능한 라이브 서치 기능을 소개했죠.

여기서 각기 플러그인들은 다들 나름대로의 장점과 단점을 가졌지만 지속 지원 가능성이나 다른 서치엔진과의 호환성을 고려하면 “SearchWP Live Ajax Search” 플러그인이 현재 시점에서는 가장 나은 대안 중의 하나라는 생각입니다.

다만 이 플러그인은 치명적으로 아무런 화면을 제공하지 않습니다. 아주 불친절하죠. 그리고 초기 화면도 아주 심플합니다. 디자인이 거의 없는 오직 검색만을 위한 실용성이 가득 담긴 플러그인입니다.

그렇기에 플러그인 추가에 따른 부담이 상대적으로 덜하다고 할 수 있단ㄴ 잠점만큼 수작업으로 원하는 디자인이나 기능을 추가해야 합니다.

1. get_search_form() 미 적용 테마에서 사용가능하게 만들기

SearchWP Live Ajax Search은 기본적으로 get_search_form()만 지원하므로 이를 사용하지 않은 테마나 검색 폼을 적용한 경우 SearchWP Live Ajax Search 를 설치해도 검색이 이루어지지 않습니다.

이 경우는 data 속성을 부여해 사용해야 합니다. 이 방법은 생각보다는 어렵지는 않습니다.

즉 테마의 searchform.php 파일의 검색 폼에 data-swplive=”true” 를 추가하는 것으로 가능합니다. data-swplive=”true” enables SearchWP Live Search

twentyseventeen 테마의 경우

예를들어 워드프레스 설치 시 기본으로 제공되는 twentyseventeen 테마의 searchform.php 파일의 검색 폼은 아래와 같은 코드로 되어 있습니다.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo $unique_id; ?>">
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
	</label>
	<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>Code language: PHP (php)

여기서 5번째 줄 끝부분 즈음 name=”s” 다음에 data-swplive=”true” 를 추가합니다. 그러면 아래와 같은 코드가 되겠죠.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo $unique_id; ?>">
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
	</label>
	<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" data-swplive="true"  />
	<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>Code language: PHP (php)

아래는 플러그인 공식 문서에서 제안하는 방법인데요. 참고로 보시면 좋을 것 같습니다.

<?php
  // if your form is generated using get_search_form() you do not need to do this
  // as SearchWP Live Search does it automatically out of the box
?>

<form action="" method="get">
  <p>
    <label for="s"><?php _e( 'Search' , 'mytextdomain' ); ?></label>
    <input type="text" name="s" id="s" value="" data-swplive="true" /> <!-- data-swplive="true" enables SearchWP Live Search -->
  </p>
  <p>
    <button type="submit"><?php _e( 'Search' , 'mytextdomain' ); ?></button>
  </p>
</form>Code language: PHP (php)

같은 방법이지만 다양한 사례를 소개하는 것도 의미가 있으니 “SearchWP Live Ajax Searchを使ってみる”에서 설명하는 방법도 참고해 보시기 바랍니다. 이도 같은 방법입니다.

변경 전

<form method="get" action="/">
    <input type="search" name="s" />
    <input type="submit" value="검색" />
</form>Code language: PHP (php)

변경 후

<form method="get" action="/">
    <input type="search" name="s" data-swplive="true" />
    <input type="submit" value="검색" />
</form>Code language: PHP (php)

2. 기능 및 디자인 변경 방법

SearchWP Live Ajax Search의 검색 결과를 보여주는 포맷 세팅을 변경은 대부분과 마찬가지로 세가지 정도의 방법이 동원됩니다.

2.1. 테플릿 search-results.php 파일 수정

는 템플릿 시스템에 의해서 보여지기 때문에 이 템플릿 수정을 통해서 검색 결과 포맷을 변경할 수 있습니다.

SearchWP Live Ajax Search 의 검색 결과를 보야주는 템플릿은 ~/wp-content/plugins/searchwp-live-ajax-search/templates/search-results.php이라는 파일에서 정의하고 있습니다.

이를 수정하고 안정적으로 유지 관리하기 위해서는 차일드 테마에서 관리할 수 있도록 만듭니다.

차일드 테마에서 searchwp-live-ajax-search라는 폴더를 만듭니다.
search-results.php라는 파일을 ~/wp-content/plugins/searchwp-live-ajax-search/templates/에서 복사해 옵니다.
복사해온 search-results.php 파일을 원하는 대로 수정합니다.

2.2. 테마의 functions.php에서 제어

대부분이 다 그러하듯이 이 플러그인도 테마의 functions.php 파일에서 필터 명령을 통해서 제어 가능합니다.

2.3. style.css에서 제어

마찬가지로 이 플러그인의 디자인을 제어하는 style.css 파일을 통해서 제어 가능합니다. 업데이트되는 것을 대ㅑ비해서 custom css에서 관련 코드를 지정합니다.

3. 썸네일 추가 방법

이 플러그인은 아주 단순해서 썸네일 추가도 별도 커스터마이징을 해야 합니다. 이에 대해서는 아래 포스팅에서 잘 설명하고 있습니다.

search-results.php 파일에서 기존 코드를 아래에서 설명하는 코드로 변경하면 되는데요. 잘 보면 아래 코드가 추가된 것을 알 수 있습니다.

<span style="display: inline-block; margin-left: 5px;margin-top: 5px;"><?php echo( get_the_post_thumbnail( $post->ID, array( 50, 50) ) ) ?></span>Code language: PHP (php)

여기서 썸네일 이미지 크기를 바꾸고 싶다면 array( 50, 50)을 원하는 수치로 변경합니다. 저의 경우는 array( 75, 75)로 지정했습니다.

SearchWP Live Ajax Search Results With Thumbnails

<?php
/**
* This template adds thumbnails to your SearchWP Live Ajax Search results.
* 
* Create a folder called searchwp-live-ajax-search in your child theme folder and copy this file in there. 
* In order for this to work you require the SearchWP and SearchWP Live Ajax Search plugins installed and active.
*
*/
?>

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php $post_type = get_post_type_object( get_post_type() ); ?>
		<div class="searchwp-live-search-result" style="white-space: nowrap;">
		<span style="display: inline-block; margin-left: 5px;"><?php echo( get_the_post_thumbnail( $post->ID, array( 50, 50) ) ) ?></span>
		<span style="display: inline-block;">
			<p><a href="<?php echo esc_url( get_permalink() ); ?>">
				<?php the_title(); ?> »
			</a></p>
		</span>
		</div>
	<?php endwhile; ?>
<?php else : ?>
	<p class="searchwp-live-search-no-results">
		<em><?php _ex( 'No results found.', 'swplas' ); ?></em>
	</p>
<?php endif;Code language: PHP (php)

4. 검색 시작 글자수 지정하기

대부분의 라이브 서치 기능은 첫 글자만 치면 바로 검색 결과를 보여줍니다. 그래야 어느 정도 라이브 서치가 되고 있다는 느낌을 받을 수 있겠죠.

그렇지만 척 글자부터 보여주는 것은 보기에는 좋지만 실 검색 결과에는 별 도우이 안됩니다. 아무래도 원하는 단어를 입력해야 정확한 검색이 가능할 수 있겠죠.

그렇기 때문에 SearchWP Live Ajax Search 에서는 기본적으로 세글자이상을 입력해야 검색 결과가 나오도록 기본 설정 되어 있습니다.

이를 간단하게 수정하는 방법은 functions.php 파일에 아래 명령을 추가하는 것입니다.

아래 코드에서 return 2가 몇번째 글자부터 검색 결과를 반영할 것이냐를 지정합니다. 2이니 두번째 글자가 입력되면 검색결과를 보여다오라고 지정하는 것입니다..

function my_searchwp_minimum_word_length() {
  // index and search for words with at least two characters
  return 2;
}
 
add_filter( 'searchwp_minimum_word_length', 'my_searchwp_minimum_word_length' );Code language: PHP (php)

이 방법 외 아래서 소개하는 초기 세팅 명령에서 지정할 수도 있습니다.

5. 몇개의 검색 결과를 보여줄 것인지?

마찬가지로 몇개의 검색 결과를 보여줄 것인지를 지정할 수 있습니다. 기본적으로는 7개만 보여줍니다.

아래 코드 양식으로 functions.php 파일에 추가합니다. return 다음의 수치가 보옂고 싶은 줄 수 입니다. 아래는 20개를 보여주겠다고 지정했습니다.

function my_searchwp_live_search_posts_per_page() {
  return 20; // return 20 results
}
add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' );Code language: PHP (php)

6. 기본 설정 변경

마찬가지로 functions.php파일에서 기본 설정 몇가지를 변경할 수 있습니다.

검색 엔진 지정 ‘engine’ => ‘default’,
검색 결과를 보여주는 시간 ‘delay’ => 200,
검색 결과를 보여주는 입력 글자 수 ‘min_chars’ => 1,
검색 결과를 보여주는 위치 ‘position’ => ‘bottom’, 또는 ‘top’,
검색 결과를 보여주는 창 크기 제어 방법 ‘width’ => ‘css’, 또는 ‘width’ => ‘auto’,

아래는 제가 적용한 코드입니다.

function my_searchwp_live_search_configs( $configs ) {
  // override some defaults
  $configs['default'] = array(
    'engine' => 'default',                      // search engine to use (if SearchWP is available)
    'input' => array(
      'delay'     => 200,                 // wait 500ms before triggering a search
      'min_chars' => 1,                   // wait for at least 3 characters before triggering a search
    ),
    'results' => array(
      'position'  => 'bottom',            // 검색창 아래(bottom) where to position the results (bottom|top)
      'width'     => 'auto',              // whether the width should automatically match the input (auto|css)
      'offset'    => array(
        'x' => 0,                   // x offset (in pixels)
        'y' => 5                    // y offset (in pixels)
      ),
    ),
    'spinner' => array(                         // powered by http://fgnass.github.io/spin.js/
      'lines'         => 10,              // number of lines in the spinner
      'length'        => 8,               // length of each line
      'width'         => 4,               // line thickness
      'radius'        => 8,               // radius of inner circle
      'corners'       => 1,               // corner roundness (0..1)
      'rotate'        => 0,               // rotation offset
      'direction'     => 1,               // 1: clockwise, -1: counterclockwise
      'color'         => '#000',          // #rgb or #rrggbb or array of colors
      'speed'         => 1,               // rounds per second
      'trail'         => 60,              // afterglow percentage
      'shadow'        => false,           // whether to render a shadow
      'hwaccel'       => false,           // whether to use hardware acceleration
      'className'     => 'spinner',       // CSS class assigned to spinner
      'zIndex'        => 2000000000,      // z-index of spinner
      'top'           => '50%',           // top position (relative to parent)
      'left'          => '50%',           // left position (relative to parent)
    ),
  );
  // add an additional config called 'my_config'
  $configs['my_config'] = array(
    'engine' => 'supplemental',                 // search engine to use (if SearchWP is available)
    'input' => array(
      'delay'     => 200,                 // wait 500ms before triggering a search
      'min_chars' => 1,                   // wait for at least 3 characters before triggering a search
    ),
    'results' => array(
      'position'  => 'top',               // where to position the results (bottom|top)
      'width'     => 'css',               // whether the width should automatically match the input (auto|css)
      'offset'    => array(
        'x' => 0,                   // x offset (in pixels)
        'y' => 0                    // y offset (in pixels)
      ),
    ),
    'spinner' => array(                         // powered by http://fgnass.github.io/spin.js/
      'lines'         => 8,               // number of lines in the spinner
      'length'        => 6,               // length of each line
      'width'         => 5,               // line thickness
      'radius'        => 6,               // radius of inner circle
      'corners'       => 1,               // corner roundness (0..1)
      'rotate'        => 0,               // rotation offset
      'direction'     => 1,               // 1: clockwise, -1: counterclockwise
      'color'         => '#000',          // #rgb or #rrggbb or array of colors
      'speed'         => 1,               // rounds per second
      'trail'         => 60,              // afterglow percentage
      'shadow'        => false,           // whether to render a shadow
      'hwaccel'       => false,           // whether to use hardware acceleration
      'className'     => 'spinner',       // CSS class assigned to spinner
      'zIndex'        => 2000000000,      // z-index of spinner
      'top'           => '50%',           // top position (relative to parent)
      'left'          => '50%',           // left position (relative to parent)
    ),
  );
  
  return $configs;
}
add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' );Code language: PHP (php)

[쇼핑몰 구축기] 쉽고 빠른 검색을 위한 라이브 서치 기능 추가하기

happist

-

2019-06-09

0

쇼핑 경험을 개선하기 위해 쉽게 검색할 수 있도록 모바일 메뉴에 검색창 추가 방법에 대해서 살펴봤지만 여기서 더 나아가 검색어 입력 시 페이지 이동없이 그 자리에서 검색 결과를 보여주는 라이브 서치 기능에 대해서 살펴 봅니다.

[검색 고도화] 라이브 서치 기능 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[검색 고도화] 라이브 서치 기능 추가하기

우커머스 테마를 고를 때 각 테마마다 그들이 주장하는 주요 기능들을 소구할 때, 라이브 서치 기능을 중요한 기능으로 이야기하는 경우를 종종 만납니다.

일반적인 검색 프로세스를 살펴보면 아래와 같은 다소 복잡한 과정을 거칩니다.

먼저 검색창을 찾고
검색어를 입력
검색을 실행하라는 명령(주로 엔터)
별도 검색 결과 페이지로 이동

그런데 모바일의 경우 별도 페이로 이동했다 다시 되돌아오는 과정이 쉽지는 않습니다. 되돌아가기 버튼이 점점 없어지는 추세죠. 아주 오래전부터 아이폰은 되돌아가ㅣ 하드키를 없앴고, 덩달아 삼성과 같은 다른 스마트폰 회사들도 이러한 하드키를 없앴습니다.

앱의 UI에서 되돌아가기 버튼이 없는 것은 아니지만 아무래도 불편합니다. 그리고 UX를 더 단순화한다고 되돌아가기 기능은 있지만 다시 실행하는 기능을 또 없기도 하죠.

요는 스마트폰일수록 UX가 단순화되면서 이러 저리 이동하는 것이 쉽지 않다는 것이고, 이러한 추세에 사이특 맞추어서 사용 경험을 높일 수 있도록 해야한다는 것입니다.

들어가며, 검색관련 세가지 프로세스

검색 관련해서는 사이트 내용을 잘 정리해 빠르고 정확하게 검색을 할 수 있게 만드는 검색 엔진과 검색할 수 있도록 검색 양식을 만드는 검색폼 그리고 검색 결과를 어떻게 보여줄 것인가라는 세가지 프로세스가 있습니다.

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

[검색 고도화] 최고의 검색 엔진을 찾자

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

[검색 고도화] 메뉴에 검색 기능 추가하기

세번째, 검색 결과를 어떻게 보여줄 것인가

[검색 고도화] 라이브 서치 기능 추가하기

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

아러한 세가지 프로세스중에서 여기에서는 검색 결과를 어떻게 보여줄 것인가에 대한 이야기 중의 하나인 라이브 서치 기능에 대해서 알아보겠습니다.

1. 사용자 경험을 높일 수 있는 라이브 서치 기능

사이트 검색에서 이러한 사용 경험을 높일 수 있는 방법이 바로 라이브 서치 기능입니다.

이 라이브 서치 기능은 검색창에 검색어를 입력하면 바로바로 검색 결과를 창 아래 또는 위에 띄워주죠.

이러한 라이브 서치기능의 장점은 아래와 같이 정리해 볼 수 있습니다.

검색 시 검색 실행 명령인 엔터 단계와 검색 결과 페이지로 이동이라는 단계가 줄어듭니다.
검색 간련 단어를 입력하자마자 첫 글자부터 해당되는 검색 결과를 뿌려주기 때문에 바로 바로 결과를 보면서 검색어를 바꾸어가며 검색할 수 있기 때문에 검색 효율이 높아지비낟.
거기다 바로바로 반응하기 때문에 만족도가 높아질 수 있습니다.

2. 라이브 서치 플러그인 3가지

사이트에 라이브 서치 기능은 테마에서 지원한다면 바로 사용할 수 있겠죠.

그렇지만 대부분의 테마에서 라이브 서치 기능은 기본으로 내장되어 있지는 않습니다.

OceanWP와 같이 커스터마이징을 주요 특징으로하는 테마의 경우 기본 기능하에 여러가지 기능을 추가하는 방식을 취하기 때문에 이러한 기능이 추가되어 있지는 않습니다.

이런 경우 라이브 서치 기능 추가를 위해서는 플러그인의 힘을 빌리는 것도 좋은 방법입니다. 능력이 된다면 직접 프로그램해도 좋지만요.

2.1. Dave’s WordPress Live Search

라이브 서치 기능중에서 가장 많이 추천되는 플러그인이 Dave’s WordPress Live Search인데요.

제가 보기에 다음과 같은 장점이 있는 것 같습니다.

사이트에서 사용하는 검색 명령에 상관없이 기존 검색폼에서 자동으로 라이브 서치 기능을 구현해 줍니다.
사용자에 따라서 라이브 서치 결과 폼을 커스터마이징할 수 있습니다. 그것도 별다른 코딩없이.
리이브 서치 플러그인들이 그렇듯이 성능 좋은 서치 엔진과 같이 사용해 성과를 높일 수 있습니다. 무료로 강력한 검색 기능을 제공하는 Relevanssi – A Better Search와 활용 시 무료로 좋은 성과를 낼 수 있습니다.
프로그래밍 능력이 된다면 다양한 필터 기능을 적용할수 있습니다.

이 플러그인도 여러가지 단점이 있습니다.

가장 큰 단점은 최근 업데이트가 멈추고, 지원도 안되고 있다는 점입니다. 이 그를 ㅆ는 2019년 6월 기준 근 1년동안 업데이트가 안되고 있습니다. 2025년 4월 현재 이 플러근인 개발자의 요청으로 영구히 사용 정지되어 있습니다. 안타깝네요

2.2. SearchWP Live Ajax Search

두번째로 SearchWP Live Ajax Search를 들 수 있습니다.

이 플러그인은 SearchWP라는 굉장히 파워플한 워드프레서 검색 플러근에서 제공하는 라이브 서치 기능인데요.

장점은

SearchWP라는 유수의 프리미엄 검색 플러그인에서 제공하기 때문에 업데이트가 계속된다는 점
워드프레스 검색 폼인 get_search_form() 를 사용하는 모든 테마에서 제공하는 검색 폼에 자동으로 라이브 서치 기능을 제공
개발자 입장에서 다양하게 커스터마이징할 수 있음

그렇지만 이 플러그인도 단점이 많이 있기는 합니다.

우선 개발자들이 쉽게 커스터마이징을 할 수 있지만 일반들이 커스터마이징 하기는 쉽지는 않습니다. 어느 정도 기술적인 지식을 가지고 있어야 합니다.
위에서 소개한 Dave’s WordPress Live Search보다는 호환성이 높지는 않습니다. get_search_form()을 명시적으로 사용하는 검색폼은 자동으로 지원하지만 그렇지 않은 경우 별도 커스터마이징을 해야 합니다.

2.3. Ajax Search Lite

Ajax Search Lite는 Ajax Search Pro라는 검색 엔진과 라이브 서치 기능을 동시에 제공하는 프리미엄 플러그인의 무료 공개판입니다.

기본적인 검색 기능을 라이브 서치로 구현해 보여주는데요.

개인적으로 장점이라면 아래와 같은 점을 들 수 있습니다.

상당히 보기 좋은 디자인
상대적으로 빠른 속도
검색폼에서 다양한 필터를 바로 선택할 수 있습니다. 포스팅 제목, 콘텐츠, 글쓴이 등읃

제 개인적으로는 단점이 더 많이 보이기는 합니다.

기존 테마에서 구현해 놓은 검색폼을 그대로 지원하지는 않습니다. Ajax Search Lite에서 제공한ㄴ 검색폼을 별도로 설치해야 하죠.
Ajax Search Lite는 무료 공개판이다보니, 기본적인 검색 기능만 제공합니다.

[쇼핑몰 구축기] 모바일 메뉴에 검색창 추가해 모바일 검색을 쉽게 하기

쇼핑몰

happist

-

2019-06-09

1

모바일 쇼핑 경험을 강화하기 위한 기본중의 하나는 검색을 쉽게 할 수 있게 만드는 것입니다.

모바일 메뉴를 만드는 가장 흔한 방법은 햄버거 메뉴를 만들어 이를 클릭해 세부 메뉴로 들어가도록 하는 방법이죠.

이 방법은 검색을 하기위해서 모바일 햄버거 메뉴를 클릭하고 이어 검색어를 입력해야하므로 상대적으로 불편합니다. 그렇기 때문에 헤더 메뉴에서 바로 검색을 시작할 수 있는 방안을 찾아보겠습니다.

[검색 고도화] 모바일 메뉴에 검색 기능 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[검색 고도화] 모바일 메뉴에 검색 기능 추가하기

요즘 어지간한 테마라면 쉽게 메뉴에 검색 기능을 추가할 수 있죠.

그렇지만 간혹 메뉴나 헤더 부분에 검색 기능을 추가할 필요가 있어서 검색 기능 추가 방법에 대해서 간단히 살펴 보았습니다.

원래 목적은 모바일에서 햄버거 메뉴 옆에 검색 기능 추가 방법을 찾다가 헤매고 만 케이스이기는 합니다.

이런 저런 방법을 발견했는데 혹시 다른 분들은 도움이 될지도 몰라서 공유해 봅니다.

들어가며, 검색관련 세가지 프로세스

검색 관련해서는 사이트 내용을 잘 정리해 빠르고 정확하게 검색을 할 수 있게 만드는 검색 엔진과 검색할 수 있도록 검색 양식을 만드는 검색폼 그리고 검색 결과를 어떻게 보여줄 것인가라는 세가지 프로세스가 있습니다.

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

[검색 고도화] 최고의 검색 엔진을 찾자

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

[검색 고도화] 메뉴에 검색 기능 추가하기

세번째, 검색 결과를 어떻게 보여줄 것인가

[검색 고도화] 라이브 서치 기능 추가하기

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

아러한 세가지 프로세스중에서 여기에서는 검색을 할 수 있게 판을 깔아주는 검색창 구현에 대한 이야기를 푸러보겠습니다.

1. 헤더(메뉴)에 검색 박스 기능 추가하기

헤더에 일반적으로 메인 메뉴가 위치하는데요. 여기에 검색 기능 추가는 add_filter 명령으로 처리 가능합니다.

function head_nav_search($items, $args) {
    if( !($args->theme_location == 'site-header-inner') ) 
    return $items;
    return $items . '<li>' . get_search_form(false) . '</li>';
}
add_filter('wp_nav_menu_items', 'head_nav_search', 10, 2);Code language: PHP (php)

또는 아래와 같은 코드도 제안되네요..

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
    $items .= '<li>' . get_search_form( false ) . '</li>';
    return $items;
}
Code language: PHP (php)

2. 원하는 곳에 코드 직접 삽입 방식

테마가 업데이트될 때만다 작업을해야하지만 (다른 플러그인을 사용하지 않는다면) 원하는 곳의 php 파일에 검색 폼을 추가하는 방법입니다.

검색폼을 추가하는 명령은 아래와 같습니다.

<?php get_search_form(); ?>Code language: PHP (php)

3. 검색 아이콘 추가하기

아미 테마에서 폰트 어썸을 사용하고 있다면 아래와 같은 코드를 이용해서 검색 아이콘을 추가할 수 있습니다.

여기 ‘primary’를 원하는 메뉴 위치 슬러그로 변경하면 됩니다. 이에 대해서는 “쇼핑몰 메뉴에 우커머스 로그인/로그아웃 링크 추가하기”라는 포스팅을 참조해 보시기 바랍니다.

저의 경우는 ‘main_menu’에 추가해 봤습니다.

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display fontawesome search icon in menus and toggle search form 

function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}Code language: PHP (php)

4. OceanWP 테마에서 메뉴 추가 방법

앞서 소개한 많은 방법은 워드프레스가 제공하는 메뉴 끝에 검색 아이콘이든 검색창이든 삽입하는 방식이므로 데스크탑에서는 바로 검색창이 보이지만 모바일에서는 햄버거메뉴 속으로 숨어버립니다.

그렇기 때문에 테마 특성을 타기는 하지만 OceabWP의 Hook 기능을 이용해 로고 다음에 검색창이 오도록 만들었습니다.

차이드 테마의 functions.php에 적용한 코드입니다.

// 검색 아이콘 추가 -
add_action('ocean_after_logo_inner', 'puripia_add_search_icon');
function puripia_add_search_icon() {

echo '<div class="clr custom_search" id="custom_search_id"><form method="get" calss="search" id="search" action="'.site_url().'"> <input type="search" placeholder="Search" name="s"  data-swplive="true"></form></div>';

}Code language: PHP (php)

5. 기타 참고 링크

happist

-

2019-06-09

0

[쇼핑몰 구축기] 쇼핑 경험 강화를 위해 상품 탭에 스티키 기능을 적용해 보자

워드프레스 쇼핑몰이든 다른 한국형 쇼핑몰이든 상품관련 다양한 정보를 제공하기 마련인데요. 이렇게 너무도 많은 정보를 효현하다보니 특히 모바일같은 좁은 화면에서는 위치를 잃어버리기 쉽상입니다.

그래서 상품관련 정보를 보여주는 메뉴탭을 쉽게 이동할 수 있도록 만드는 것도 쇼핑 경험을 개선할 수 있는 좋은 방안입니다.

여기에서는 상품 정보를 보여주는 상품 탭 메뉴를 고정시켜 쉽게 이동할 수 있게 만들어주는 스티키 기능 적용 방안에 대해 알아봅니다.

[쇼핑 경험 최적화] 상품 탭에 스티키 기능을 적용해 보자

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[쇼핑 경험 최적화] 상품 탭에 스티키 기능을 적용해 보자

쇼핑몰에서 상품 설명은 그 중요성을 아무리 강조해도 지나치니 않을 정도로 중요한 요소죠.

그렇기 때문에 상품 설명 내용은 굉장히 길고, 또 부가 설명, 리뷰, FAQ 그리고 질문까지 관련 내용도 많은 편입니다.

때문에 상품 설명관련 메뉴로 쉽게 이동할 수 있도록 만드는 것도 쇼핑몰 이용자들에게 좋은 쇼핑 경험을 줄 수 있는 지름길이기도 합니다.

그러면 어떻게 상품탭에 이 스티키 기능을 적용할 수 있을까요? 처음에는 어떻게 접근해야할지 몰라 난감했는데요.몇주간 삽질한 끝네 알아낸 내용을 간략히 공유해 봅니다.

1. 스티키 기능 구현 플러그인

당연히도 가장 간단히, 우선적으로 고려할 수 있는 것은 이러한 스티키 기능 구현토록 도와주는 플러그인을 사용하는 것입니다.

이 기능 구현 플러그인에는 무료로 사용할 수 있는 플러그인들이 많아서 큰 욕심을 부리지 않는다면 적젏 사용할 수 있습니다.

1.1. myStickymenu Plugin

가장 많이 추천되는 것이 바로 myStickymenu인데요.

Sticky Menu on Scroll, Sticky Header for Any Theme – myStickymenu

기본 기능은 큰 차별점은 없지만 프로기능에는 디바이스 선택 기능, CSS 코드 적용, 특정 페이지에 스티키 기능을 해제할 수 있는 기능등 조그 더 다양한 기능을 추가합니다.

그리고 사소하지만 UX 디자인이 조금 세련되어 있습니다.

무료 버젼에서는 단 하나의 요소만 스티키 기능을 사용할 수 있습니다. 프로버젼은 사용하지는않았지만 마찬가지인듯 싶습니다.

1.2. Sticky Menu (or Anything!) on Scroll by Mark Senff

이 플러그인은 무료 버젼만 있는데요. 단순하면서도 필요한 기능들로 구성되어 있습니다.

이 플러그인도 한 하나의 요소만 스티키 할 수 있습니다. 하나만 할 수 있지만 다른 스티키 기능과 조합해서 사용가능하다는 장점이 있습니다.

어떤 요소도 스티키 가능
스티키 위치를 지정 가능, 예를들면 이미 다른 스티키 기능이 적용되어 있다면 그 스티키 아래에서 구현되도록 50px를 지정해주면 Top으로부터 50px 떨어진 곳에서 고정시킴
적용하지 말아야 할 스크린 사이즈 지정 가능, 예를 들어 화면 크기가 1500px이상 또는 300px 이하에서는 작동하지 않게 설정 가능
Z-index 지원(옵션)
Push-up 지정 가능(옵션), 스티키 요소를 특정 요소 위로 올려주는 기능
디버그 모드

개인적으로는 OceanWP 테마에서 제공하는 sticky head와 이 플러그인을 조합해서 사용중입니다.

2. 코드 사용

플러그인을 사용하지 않고 스티키 기능을 추가하는 방법은 없을까요?

구글링 결과 몇가지 방법이 있습니ㄷ다. 다만 저의 경우는 전부 작동하지 않더군요. 테마와 플러그인들간 충돌이 있는 것으로 보이는데요.

그래도 테마 등등 환경에 따라서 가능할지도 모르니 소개해 보도록 하겠습니다.

2.1. CSS 코드 이용 방법

이는 GeneratePress테마이 문의 내용중 알려진 내용인데요. 아래와 같은 코드 사용을 제안하고 있습니다.

/* 상품 탭 스티키 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    position: sticky;
    position: -webkit-sticky;  /* Safari */  
    top: 0;
    background: #fff;
}Code language: PHP (php)

2.2. JS 코드 이용하기

이는 Chris Coyier 라는 분이 공개한 코드인데요. 잘 연구하는 좋은 결과가 나올 것도 같은데 저는 아직 이를 이해할만한 실력이 못되나 봅니다.

Chris Coyier의 Scroll-Then-Fix Content 글 보러가기

[쇼핑몰 구축기] 쇼핑 경험 강화를 위해 상품 탭에 스티키 기능을 적용해 보자 4

여기서 적용된 코드는 아래에서 공개되어 있습니다.

Search Box in Content Moves to Fixed Header

3.기타 참고 링크

How do I make the menu sticky in WordPress so it will only show when you scroll up?

How can I make a sticky side header after scrolling to it in jQuery?

JQuery – Easy Sticky Nav Bar

Boost Views With Sticky Scrolling

WooCommerce: Edit “Continue Shopping” Link Redirect

[쇼핑몰 구축기] 폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

happist

-

2019-06-09

0

이번에는 폰트어썸(Font Awesome) 적용 시 흔히 마주치는 woff2관련 404에러 문제를 어떻게 풀어야 하는지에 대해서 살펴봅니다.

폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

이모티콘이나 이모지등이 널리 활성화되면서 웹페이지에서 이러한 경향을 다소 늦었지만 적극적으로 수용하려는 시도가 지속되어 왔습니다.

아이콘을 사용해 보다 직관적으로 사용 경험을 제공할 수 있고, 군더더기 설명을 줄일 수 있어 깔끔한 사이트 구현도 가능합니다.

이렇게 웹 페이지에서 아이콘을 구현하는 여러가지 방법이 있지만 가장 널리 사용되는 것이 바로 폰트어썸 (Font Awesome) 아이콘 폰트입니다.

폰트어썸 (Font Awesome) 공식 페이지 살펴보기

1. 폰트어썸 (Font Awesome) 적용 시 woff2관련 404 에러

폰트어썸 (Font Awesome)이 등장한지 어느 정도 시간이 걸려서 일반적인 웹사이트에서 이를 적용하는 것은 어렵지는 않습니다.

그러나 이를 적용하는 과정에서 아무래도 열가지 장애를 만나게 되는데요.

이 중 오늘 이야기하는 woff2를 표현하지 못하고 404에러를 뿜어내면서 적용되지 못하는 현상을 어떻게 해결할 것인지에 대해 그동란 뻘짓하면서 알아낸 내용을 공유하고자 합니다.

이는 webpagetest.org에서 테스트해보면 다른 항목들은 제대로 작동하는데 woff2는 작동하지 않는 것을 알 수 있습니다.

[쇼핑몰 구축기] 폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법 5

2. 폰트어썸 (Font Awesome) 적용 시 점검 사항

왜 이런 문제가 발생하는 것일까요?

저도 처음에는 어떻게 접근해야할지 몰라서 너무 당황했고 몇달동안 그냥 무시했습니다.

사이트 운영에서 큰 문제는 없었기 때문에요. 아마 어느 부분이제대로 표현되지 않았을텐데 그냥 감내하기로 한것이지요.

그러는 가운데 이문제를 한번 풀어야겠다고 마음먹고 엄청난 구글링 작업에 들어갔습니다.

2.1. MIME 타입에 woff2가 등록되었는지 확인

그러면서 어쩌면 당연하겠지만 woff2를 MIME 타입에 등록한다는 사실을 알게되었습니다. 초심자라 모르는게 너무 많군요!!!!!!

폰트, 이미지, 텍스트 등 대부분의 형식들은 MIME 타입을 등록합니다.
woff2 파일 형식이 등장했던 시기에 이 파일을 woff2를 어떻게 등록할 것인지에 대한 가이드가 많이 있었습니다.

아는 nginx라면 /etc/nginx/mime.types라는 파일에 정의되어 있습니다. 여기에서 woff2가 제대로 등록되어 있는지 확인해보면 됩니다.

대부분 아래처럼 등록이 되어 있습니다.

font/woff   woff;
font/woff2   woff2;
Code language: PHP (php)

2.2. 웹서버 설정 확인 – woff2가 전부 반영되었는지

웹서버 설정에서 별다른 설정을 하지 않았다면 별 문제가 없을지도 모릅니다.

그러나 대부분 내용이 쉽게 변하지않는 파일의 경우 속도 향상을 캐싱하도록 만드는 옵션을 적용하고는 합니다.

아래는 nginx에서 적용했던 옵션인데요.

location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}Code language: PHP (php)

여기를 보시면 woff는 있는데 woff2는 없다는 것을 알 수 있습니다.

이 옵션이 사용 유무를 결정하는 것은 아닐텐데요. 여기에 없다는 이유로 woff2는 작동하지 않더군요.

그래서 여기 리스트에 woff2를 넣어주었습니다. 그랬더니 아무일 없었다는 듯 작동하더군요..

조금 허무했습니다. 최종 적용 옵션입니다.

location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|woff2|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    include /etc/nginx/security-headers.conf;
Code language: PHP (php)

여기서 include /etc/nginx/security-headers.conf;를 삽입한 이유를 간단히 설명하죠.

이전에 설명한 “[쇼핑몰 보안] NGINX에서 HTTP 보안 헤더(Security Headers) 적용 時 주의점“에서 설명한 내용과 같습니다.

즉 nginx는 보안 헤더관련 명령이 뒤에 나오면 앞에서 설정한 모든 보안 헤더관련 옵션이 무효화됙 때문에 보안 헤더 적용을 파일을 블러오는 것으로 처리했기 때문입니다.

[참고] Apache와 IIS에서 woff2 등록 방법

아마 최근에 설치된 최신 웹서버라면 woff2는 기본으로 등록되어 있겠지만 Apache와 IIS에서 woff2를 등록하는 방법은 아래와 같다고 합니다.

Apache에서 woff2 등록하기

.htaccess 파일에 아래 내용을 추가합니다.

# MIME Mappings
AddType font/woff .woff
AddType font/woff2 .woff2Code language: PHP (php)

IIS에서 woff2 등록하기

IIS 엡서버를 사용하는 경우에는 woff2는 아래와 같은 스니펫(snippet)을 추가해 해결할 수 있습니다.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>Code language: PHP (php)

[쇼핑몰 구축기] 속도 개선을 위한 폰트어썸(Font Awesome) 외부 로딩을 금지하는 방법

happist

-

2019-06-09

1

[쇼핑몰 구축기] 속도 개선을 위한 폰트어썸(Font Awesome) 외부 로딩을 금지하는 방법

앞서 이야기한 구글 폰트 로딩을 금지하는 것과 마찬가지로 다양한 아이콘 활용을 위한 폰트어썸(Font Awesome)의 경우도 외부 로딩을 금지해햐 할 경우가 있습니다.

폰트어썸(Font Awesome)가 활발하게 적용되면서 테마 설계 시 폰트어썸(Font Awesome)은 로컬 서버에서 불러오도록 설계하는 경향이 늘고 있습니다. 속도 측면에서 유리하기 때문이죠. 조금 트래픽에서 손해를 보드라도 말입니다.

그런데 그굴폰트와 마찬가지로 플러그인마다 폰트어썸(Font Awesome)를 불러오는 방식이 다릅니다. 플러그인으로서는 테마마다 어떤 방식으로 폰트어썸(Font Awesome)을 불러오늕 모르므로 기본적으로 외부에서 불러오는 방법을 택합니다.

그러다보면 로컬에서 폰트어썸(Font Awesome)을 불러오고 또 외부에서 폰트어썸(Font Awesome)을 불러오는 이중의 상황이 발생합니다.

이를 어떻게 막을 수 있을까요?

사이트 속도 개선을 위해 폰트어썸(Font Awesome) 외부 로딩을 금지하는 방법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

사이트 속도 개선을 위해 폰트어썸(Font Awesome) 외부 로딩을 금지하는 방법

여러번 언급했지만 소셜 미디어나 제반 프로그앰등에서 이모지나 아이콘등이 활발하게 사용되면서 이 분야에서 상대적으로 보수적으로 접근했던 웹에서도 적극적으로 이러한 아이콘을 도입하고 있습니다.

그런데 워드프레스은 통일된 하나의 프로그램이 아니라 워드프레스 core에 각종 플러그인을 추가해 프로그램을 완성하는 방법을 사용하다보니 예상치 못했던 부작용을 만날 수 있습니다.

폰트어썸(Font Awesome)관 관련해서 다양한 적용방법이 있다보니 각 플러그인들이 독자적으로 폰트어썸(Font Awesome)을 적용하면서 이중으로 적용하는 문제가 발생하기도하죠.

예를들어 OceanWP테마는 속도를 고려해 서버 로컬에서 폰트어썸(Font Awesome)관련 콘텐츠를 끌어오도록 설계되어 있습니다. 그런데 POPUP Login 기능을 제공하는 플러그인중에서 자체적으로 외부의 폰트어썸(Font Awesome) 파일을 로딩하도록 설정하고 있습니다.

그렇기때문에 로컬에서 불러오는 폰트어썸(Font Awesome)과 외부 예를들어 “https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”가 동시에 브러들이게 되는 상황이 발생합니다.

1. 폰트어썸(Font Awesome) 외부 로딩은 무엇이 문제일까?

외부에 있는 폰트어썸(Font Awesome)을 불러오는 것은 편리하기는 하지만 상대적으로 속도를 느리게 만듭니다.

외국의 사례는 전체 로딩 시간의 1/3을 차지하는 경우까지도 있다고 합니다.

아래는 ttps://use.fontawesome.com/releases/v5.5.0/css/all.css?ver=5.2.1을 로딩하기위해서 1.047초가 걸렸고 다른 차일들이 로딩하는 것을 막고 있는 상황을 잘 보여주고 있습니다.

[쇼핑몰 구축기] 속도 개선을 위한 폰트어썸(Font Awesome) 외부 로딩을 금지하는 방법 6

2. 어떻게 폰트어썸(Font Awesome) 외부 로딩을 막을까?

그러면 어떻게 이럴게 속도를 지연시키는 폰트어썸(Font Awesome) 외부 로딩을 막을 수 있을까요?

2.1. filter 이용법 01

차일드 테마의 functions.php에서 원하지 않는 CSS 파일을 로딩하지 않토록 만드는 방법입니다.

이 명령의 경우 먹히는 경우도 있고 아닌 경우도 있다고하니 실험해보시고 안된다면 다른 대안을 찾아야 할 것 같아요.

예를 들어 새롭게 설치한 플러그인에서 폰트어썸(Font Awesome)을 “https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”에서 로딩한다고 할때, 로딩을 막는 방법을 찾아보도록 하겠습니다.

이는 stackoverflow.com에서 소개한 방법인데요.

function remove_unwanted_css(){
wp_dequeue_style('font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
}
add_filter('wp_print_styles', 'remove_unwanted_css');Code language: PHP (php)

2.2. 2.1. filter 이용법 02

마찬가지로 차일드 테마의 functions.php에서 스타일 적용을 무력화 시키는 방법인데요.

플러그인에 아래와 같이 스타일이 적용되어 있다면

wp_enqueue_style( 'sb-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );Code language: PHP (php)

이는 플러그인에서 정의한 스타일을 적시하고 이를 무력화하도록 만드는 명령을 추가하는 것입니다.

wp_dequeue_style( 'sb-font-awesome' );
wp_deregister_style( 'sb-font-awesome' );Code language: PHP (php)

또는 액션 명령으로 만들 수도 있습니다. “How to Remove Font Awesome from WordPress Theme” 참조

add_action( 'wp_print_styles', 'tn_dequeue_font_awesome_style' );
function tn_dequeue_font_awesome_style() {
      wp_dequeue_style( 'sb-font-awesome' );
      wp_deregister_style( 'sb-font-awesome' );
}Code language: PHP (php)

이 방법은 간단항것 같지만 플러그인에서 사용하는 스타일 이름과 테마에서 사용하는 스타일 이름이 같으면 별 도움이 안되는 듯 합니다.

2.3. Content-Security-Policy 활용

원래 이 Content-Security-Policy의 목적은 이게 아니었지만 제대로 활용하면 효과적인 제어 장치가 됩니다.

즉 Content-Security-Policy에서는 등록된 화이트 리스트(White list)만 로딩되고 작동하기 때문에 등록 화이트 리스트(White list)에서 제외하면 외부의 어떤 소스도 작동할 수 없습니다.

이를 응용하면 구글폰트의 외부 로딩으로 고민하는데 여기에서 원천적으로 막을 수 있습니다.

저의 경우 Content-Security-Policy의 style-src를 아래와 같이 세팅했습니다.

여러 유명회사들이 들어가 있는 이유는 이런 저런 서비스를 이용하다보면 이들 회사것을 알게 모르게 사용하게 때문에 화이트 리스트(White list)에 올려 놓았습니다.

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' 'unsafe-eval' *.google.com *.twitter.com *.facebook.com  *.google-analytics.com *.daumcdn.net *.daum.net *.gstatic.com *.naver.net *.naver.com *.inicis.com ;" always;Code language: PHP (php)

[쇼핑몰 구축기] 속도 개선을 위한 구글 폰트 로딩 방지법

happist

-

2019-06-09

0

앞서 가장 효과적으로 웹폰트를 적용하는 방법에 대해서 살펴 보았습니다. 그러한 방법을 통해서 자신이 원하는 웬폰트 중심으로 콘텐츠가 보여지도록 설정했죠.

그럼에도 불구하고 대부분의 테마나 플러그인은 대부분 구글 웬폰트를 사용하도록 프로그램되어 있다보니 자동으로 구글 웬폰트를 로딩합니다. 이는 불필요하게 속도를 저하시키고 슬데없는 트래픽을 발생시킵니다.

여기에서는 속도와 트래픽에 좋지않은 영향을 미치는 구글 폰트가 로딩되지 못하도록 막는 방법에 대해서 살펴봅니다.

[쇼핑몰 속도 개선] 구글 폰트 로딩 방지법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[쇼핑몰 속도 개선] 구글 폰트 로딩 방지법

워드프레스의 대부부능 테마나 플러그인들은 기본적으로 구글 폰트를 사용하는 것을 전제로 프로그램됩니다. 더우기 워드프레스 자체도 구글 폰트 사용을 당연시하고 구글 폰트 로더를 기본으로 제공하고 있기도 하죠.

그러나 구글 폰트는 구글 서버에서 폰트를 가져오고, JS를 사용하므로 중간에 다른 콘테츠 로딩을 막으면서 속도를 저하시키는 원인이 되기도 합니다.

구글 폰트를 적극적으로 사용한다면 큰 문제는 없지만 구글 웹폰트를 사용하지 않는다면 구글 폰트관련 설정 파일들이 로딩되는 것을 막아 최적화할 필요는 있습니다.

1. 구글 폰트 미적용시에도 설정은 로딩된다.

많은 테마에서는 구글 폰트를 사용하지 않는 옵션을 제공합니다.

그러나 이 옵션을 적용해도 다른 플러그인등에서 구글 폰트를 사용하도록 되어 있어서인지 모르지만 구글 폰트 관련 제반 파일들이 로딩됩니다.

https://fonts.googleapis.com/css?....Code language: PHP (php)

이렇게 구글 폰트 관련 설정 내용들이 로딩되면서 테ㅏ에 따라서 50k ~ 250k정도의 용량을 다운받더군요. 대세에 큰 지장은 없지만 일정정도 속도 지연도 발생합니다.

2. 구글 폰트 로딩을 근본적으로 막기 – 플러그인 이용

그러면 구글 폰트를 사용하지 않을 시 구글 폰트 설정 및 폰트들이 로딩되고 다운받아지는 현상을 어떻게 막을 수 있을까요?

구글링을 통해서 구를폰트 로딩을 막는 다양한 코드들을 테스트해 보았지만 효과가 없었습니다.

또한 구글 폰트 사용을 막아준다는 플러그인들이 몇가지 존재합니다.

아래는 “Disable Google Fonts”라는 키워드로 검색한 구글 폰트관련 플러그인들입니다.
Autoptimize와 Disable Google Fonts와 같은 플러그인들이 보이는군요. 그러나 이중에서 제대로 효과를 내는 것은 딱 하나만 보았습니다.

2.1. Autoptimize 플러그인

Autoptimize 플러그인은 다양한 기능과 함께 CSS 파일들을 묶어 다운할 수 있도록 만들어 서버 요청 회수(request)를 획기적으로 줄여줍니다. 저의 경우 106개 정도의 request가 40여개로 줄더군요,

그러나 서버 요청 회수(request)를 획기적으로 줄어 들어도 전체 로딩 시간은 별 차이가 없더군요. 조금 아이러니하기는 했습니다.

또한 이 플러그인은 Elementor와 궁합이 맞지 않은 것 같았습니다. 이 플러그인을 적용하면 Elementor로 편집한 화면은 설정이 엉키더군요.

예를 들어 메인 페이지 Link color를 화이트로 설정해 놓았는데 플러그인 적용후에는 블랙으로 바뀌어 버립니다. 그리고 다시 변경하려면 또 디자인이 틀어져 버립니다.

또한 이 플러그인은 구글 폰트 사용을 막아주기는 하지만 구글 폰트관련 설정이 로딩되는 것을 막지는 못하더군요. 그래서 지웠죠.

2.2. Disable Google Fonts

Disable Google Fonts 플러그인은 아준 단순하게 구글 폰트 사용만을 막아줍니다.

사용 자체는 막아주지만 구글 폰트와 관련된 설정이 로딩되는 것을 막지는 못합니다.

그래서 이 플러그인도 삭제될 운명에 처했습니다.

2.3. Remove Google Fonts References

이 Remove Google Fonts References 플러그 인은 다소 덜 알려져 있지만 제가 테스트했을 시 확실하게 효과를 보여준 플러그인입니다.

“[워드프레스 Tips] 워드프레스에 설치된 구글웹폰트 제거 방법 – 매뉴얼 제거 또는 플러그인 사용”라는 글에서도 이 플러그인을 추천하고 있더군요.

다만 이 플러그인은 지난 3년간 업데이트가 없었습니다. 이는 조금 불안한 요소로 보입니다.

Remove Google Fonts References 적용 후 속도

Remove Google Fonts References 르 적용 후 전체 로딩 속도가 크게 개선된 것은 아닙니다.

왜냐하면 이전에도 구글 폰트 로딩 용량과 숫자가 많지는 않았기 ㄸ문입니다. 구글 폰트 수가 많고 많은 용량을 다운 받는 경우 효과는 클 것으로 보입니다.

아무튼 Remove Google Fonts References 적용 후 테스트해보니 속도도 괜찮게 나왔고 더우기 그글 폰트와 관련된 설정 파일 로딩도 없어졌습니다.

Web Page Performance Test for puripia.com

3. Content-Security-Policy 활용

Content-Security-Policy를 적용하면 등록된 화이트 리스트(White list)만 로딩되고 작동하기 때문에 등록 화이트 리스트(White list)에서 제외하면 외부의 어떤 소스도 작동할 수 없다는 점을 이용하는 것입니다.

이를 응용하면 구글폰트의 외부 로딩을 원천적으로 막을 수 있습니다.

저의 경우 Content-Security-Policy의 style-src를 아래와 같이 세팅했습니다.

여러 유명회사들이 들어가 있는 이유는 이런 저런 서비스를 이용하다보면 이들 회사것을 알게 모르게 사용하게 때문에 화이트 리스트(White list)에 올려 놓았습니다.

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' 'unsafe-eval' *.google.com *.twitter.com *.facebook.com  *.google-analytics.com *.daumcdn.net *.daum.net *.gstatic.com *.naver.net *.naver.com *.inicis.com ;" always;Code language: PHP (php)

[쇼핑몰 구축기] 가장 효과적인 웹폰트 적용법 – 나눔바른고딕을 중심으로

happist

-

2019-06-09

0

[쇼핑몰 구축기] 가장 효과적인 웹폰트 적용법 – 나눔바른고딕을 중심으로

워드프레스 쇼핑몰이든 워드프레스 블로그 사이트든 사이트 콘텐츠를 가장 미려한 폰트를 이용해 보여주기 위해서는 웹폰트를 사상할 수 밖에 없는데요.

여기에서는 한글 웬폰트를 적용하면서도 속도나 트래픽을 최소로 사용하는 방법에 대해서 살펴봅니다.

[사용 경험 개선] 가장 효과적인 웹폰트 적용법 – 나눔바른고딕을 중심으로

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[사용 경험 개선] 가장 효과적인 웹폰트 적용법 – 나눔바른고딕을 중심으로

쇼핑몰이든 블로그 사이트이든 우선 보기에 좋아야하기 때문에 사용자들이 좋아할 웹폰트를 적용하게 됩니다.

여기서는 웹폰트를 적용하되 가장 효율적으로 그리고 가장 빠른 속도를 낼 수 있는 방안에 대해서 살펴 보겠습니다.

웹폰트 적용에 대해서는 많은 글들이 있지만 아래 글을 참조했고, 동의를 얻어 일부 내용을 가져왔습니다.

[Tips] 본고딕(노토산스CJK) 경량화 버젼 적용법

1. 폰트 적용 방향

어떠한 폰트를 보여주느냐는 사이트 운영 철학 또는 브랜드 정책에 따라 달라집니다.

예를 들어 회사에서 브랜드 홍보용으로 특별히 만든 폰트가 있다면 기본적으로 이 회사 개발 폰트가 가능하면 적용해야 합니다. 그래야 회사의 일관된 메세지가 잘 전달 될 수 있을 것이니깐요.

저희 사이트는 아직 특정 폰트만을 고집할 필요는 없다는 생각했습니다. 사용자들이 어느 정도 좋아할만한 폰트라면 별 문제가 없을 것이죠.

그래서 아래와 같은 원칙을 적용했습니다.

폰트는 사용자들에게 어느 정도 호응을 얻은 폰트라면 적용 가능
애플 기기 사용자들은 애플 SD 산돌고딕 Neo, 윈도우즈 사용자는 나눔바른고딕, 본고딕을 기본적으로 추천
사이트 속도를 최적화하기 위해서 가능하면 사용자의 시스템에 설치된 폰트를 사용토록 유도
시스템폰트에 원하는 폰트가 없다면 나눔바른고딕을 다운, 적용

2. 웹폰트 적용법

위에서 정한 원칙에 따라 아래의 포인트들을 점검했습니다.

2.1. 사용자 PC의 시스템 폰트 활용

사용자의 시스템에 있는 폰트를 이용하려면 local()이라는 명령을 사용합니다.

애플 사용자라면 맥킨토시 컴퓨터 시스템안에 애플 SD 산돌고딕 Neo이 설치되어 있을 것이고, 위도우즈 사용자라면 나눔바른고딕이나 본고딕 또는 최소한 맑은고딕체가 설치되어 있을 것입니다.

사이트 메인 페이지가 로딩되면서 이러한 폰트를 찾아서 띄워주는 것이죠.

그런데 이 시스템에 설치된 폰트이름이 다른 경우가 많으므로 가장 일반적으로 사용하는 이름들은 전부 적용해 줍니다.

나눔 바른 고딕 : 나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF (NanumBarunGothicOTF와 나눔바른고딕OTF는 맥용 safari, Firefox, Chrome에서 필요)
애플 SD 산돌고딕 Neo : ‘애플 SD 산돌고딕 Neo’, ‘Apple SD Gothic Neo’
맑은고딕 : ‘맑은 고딕’, ‘Malgun Gothic’
나눔고딕 : 나눔고딕, NanumGothic

2.2. 나눔바른고딕 웹폰트 적용

위에서 설정한 폰트들이 없는 경우 나눔바른폰트를 내려받도록 합니다.

IE8이하 브라우저들은 EOT 파일을 내려 받도록 합니다.

src: url('https://puripia.com/Font/nanumbarungothicregular.eot'); /*For IE6~8*/Code language: PHP (php)

IE 6~8은 EOT 파일만 지원하고 포맷명을 해석하지 못하기 때문에 파일명뒤에 물을표(?)를 추가하면 물음표 이후 구문을 모두 쿼리문으로 인식해 무시하도록 합니다. 관련 추가 명령을 추가합니다.

url('https://puripia.com/Font/nanumbarungothicregular.eot?#iefix') format('embedded-opentype'),Code language: PHP (php)

IE9+이상은 용량이 조금 크지만 가독성이 좋은 WOFF를 다운받도록 한다면 아래 코드로 대신 합니다.

 src: local(☺),Code language: PHP (php)

WOFF 포맷을 30% 더 압축해 용량을 줄인 WOFF2를 지원하는 브라우저는 WOFF2를 내려 받도록 먼저 위치시킵니다. Chrome, Fire Fox, Opera, Edge가 지원합니다

url('https://puripia.com/font/nanumbarungothicregular.woff2') format('woff2'),Code language: PHP (php)

나머지 모던 브라우저들은 WOFF 포맷을 지원하므로 이를 다운토록 합니다. WOFF를 지원하는 IE9+, Chrome, Safari, Opera 등등 대부분이 지원하지만 압축율이 좋은 WOFF2를 지원하는 Chrome, Fire Fox, Opera, Edge를 빼고 IE9이상, Safari에서 적용됩니다.

url('https://puripia.com/font/nanumbarungothicregular.woff') format('woff'),Code language: PHP (php)

WOFF 포맷이 적용안되는 경우는 이전부터 사용되던 TTF를 다운하도록 합니다. TTF형식은 용량도 크고 쉽게 복제 가능해 이를 대체코자 WOFF가 만들어졌습니다.

url('https://puripia.com/font/nanumbarungothicregular.ttf') format('truetype'),Code language: PHP (php)

WOFF나 TTF 포맷을 지원하지 않은 구 모바일 브라우져(Safari 4.3 이하, Android 4.3 이하, Opera Mobile 10 이하 등)를 위해서 CSS2에서 폰트로 활용 가능한 SVG(Scalable Vector Graphics)를 적용합니다.

url('https://puripia.com/Font/notokr-demilight.svg') format('svg');Code language: PHP (php)

3. 폰트 적용 위치 지정

다음으로는 이 폰트를 어디에다 적용할지를 정해줍니다.

대부분은 body를 비롯해 모든 장소에 이 폰트를 적용하는 것으로 지정하죠. 사용위치 그리고 font-family를 정의합니다.

테마의 css 파일에서 지정하는 것들을 무시하고 싶다면 font-family 마지막 부분에 !important를 추가합니다.
font-family 마지막 부분에 !important를 넣었다면 아마 대부분 FontAwesome 폰트가 적용되지 않습니다. 이를 해결하려면 별도 명령어를 추가해야 합니다.
테마의 css 파일에서 지정한 명령이 어느 정도도 필요하다면 font-family 마지막 부분에 !important를 적용하지 않습니다. 그러면 FontAwesome 폰트도 적용되는데요. 저는 Edge 등에서 일부 글꼴이 적용되지 않는 현상이 발견되더군요.

3.1. font-family 마지막에 !important 미지정 시

저는 아래와 같이 지정했습니다.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue','Helvetica','나눔바른고딕','NanumBarunGothic','나눔바른고딕OTF','NanumBarunGothicOTF','Noto Sans','Noto+Sans','notokr-demilight','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','sans-serif';
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }Code language: PHP (php)

이렇게 적용 시 저의 경우는 Edge나 IE에서는 우커머스 부분에서 일부 제목 폰트가 적용되지 않더군요.

3.2. font-family 마지막에 !important 지정 시

가끔 폰트 적용 위치를 지정했음에도 불구하고 폰트가 제대로 나오지 않은 경우가 있습니다. 그러는 경우는 font-family 끝에 !important를 붙여줍니다.

이 경우 강제로 모든 경우 이 폰트로 적용해 버리기 때문에 FontAwesome 적용이 안되는 경우가 많습니다.

요즘 FontAwesome 폰트 적용이 많이 늘고 있기 때문에 필히 해결해야하는 문제인데요. 저는 아래와 같은 코드를 추가해서 해결했습니다.

.fa {
	font-family: 'FontAwesome' !important;Code language: PHP (php)

아래는 최종적으로 확정, 적용한 코드입니다.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue','Helvetica','나눔바른고딕','NanumBarunGothic','나눔바른고딕OTF','NanumBarunGothicOTF','Noto Sans','Noto+Sans','notokr-demilight','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','sans-serif' !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }

.fa {
  font-family: 'FontAwesome' !important;
Code language: PHP (php)

4. 최종 적용 코드

아래는 최종적으로 나눔바른고딕체를 적용하기 위해서 적용한 코드이니 참고하시기 바랍니다. 적어도 이 OceanWP 테마에서는 잘 작동합니다.

 @charset “utf-8″
 @font-face {
 font-family: '나눔바른고딕';
 font-style: normal;
 font-weight: normal;
 font-display: swap;
 src: local('나눔바른고딕'),local('NanumBarunGothic'),local('나눔바른고딕OTF'),local('NanumBarunGothicOTF'),local('애플 SD 산돌고딕 Neo'),local('Apple SD Gothic Neo'),local('Noto Sans'),local('Noto+Sans'),local('notokr-demilight'),local('나눔고딕'),local('NanumGothic'),local('맑은 고딕'),local('Malgun Gothic');
 src: url('https://puripia.com/Font/nanumbarungothicregular.eot'); /*For IE6~8*/
 src: local(☺),
     url('https://puripia.com/Font/nanumbarungothicregular.eot?#iefix') format('embedded-opentype'), 
     url('https://puripia.com/font/nanumbarungothicregular.woff2') format('woff2'), 
     url('https://puripia.com/font/nanumbarungothicregular.woff') format('woff'), 
     url('https://puripia.com/font/nanumbarungothicregular.ttf') format('truetype'),
     url('https://puripia.com/Font/notokr-demilight.svg') format('svg');
 }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue','Helvetica','나눔바른고딕','NanumBarunGothic','나눔바른고딕OTF','NanumBarunGothicOTF','Noto Sans','Noto+Sans','notokr-demilight','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','sans-serif' !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }

.fa {
  font-family: 'FontAwesome' !important;Code language: PHP (php)

[쇼핑몰 구축기] 보안과 속도를 위해 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법

happist

-

2019-06-09

0

이번에는 쇼핑몰 전반 콘텐츠를 압축해 속도를 높여주는 압축 프로그램도 보다 보안이 뛰어난 프로그램인 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법에 대해서 살펴 봅니다.

보안과 속도를 위해 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

보안과 속도를 위해 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법

여기에서는 보안과 속도 측면에서 좋은 평가를 받고 있는 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법에 대해서 알아 봅니다.

보안과 속도는 상당히 양립하기 어려운 문제죠. 보안을 강화하면서도 속도를 높인다는 것은 쉽지않은 문제이기 때문이죠.

그렇지만 주제가 속도를 빠르게 해주는 솔류션의 문제라면 다르겠죠. 속도를 높여주는 솔류션이 보안과 연계되어 보안을 높이는 요인이 있다면 금상첨화겠죠.

오늘 이야기하려는 브로틀리 압축((Brotli Compression)이 그러한 한 예가 되지않을까 싶습니다.

1. 가장 널리 사용되는 gzip

그동안 서버에서 제반 포맷들을 압축해주는 솔류션으로 gzip이 널리 사용되었습니다.

이 gzip은 대부분의 웹서버가 기본으로 제공하는 기능으로 별다른 조치없이도 적용 옵션만 제대로 명기해 주는 것으로 작동했습니다.

그만큼 안정적이고 적용하기도 어렵지 않았다는 반증이기도 합니다.

그러나 이 gzip은 보안 측면에서는 완벽하지않다는 평가를 받고 있으며, 가능하면 브로틀리 압축((Brotli Compression)으로 대체하라는 주문이 있기도 합니다.

이전에 소개한 “SSL 보안 등급 A+에 도전하는 Let’s Encrypt 인증서 세팅 방법”에서도 잠깐 언급되었던 내용이기도 합니다.

2. 2016년부터 확산되기 시작한 브로틀리 압축((Brotli Compression)

그러는 가운데 구글은 브로틀리 압축((Brotli Compression) 기술을 오픈 소스로 공개했습니다.

그리고 가장 많은 점유율을 가진 크롬이 2016년 5월 27일부터 브로틀리 압축((Brotli Compression)을 지원하기 시작하면서 본격적으로 확산되기 시작했습니다.

지금은 화이어폭스, 마이크로소프트 Edge, 사파리 등 대부분의 주요 브라우져가 이를 지원하고 있습니다. 우리나라에서 아직도 많이 사용하는 IE는 아직 지원하지 않고 있네요.

브라우저 사용자의 90%를 지원(전셰계 전체로)

[쇼핑몰 구축기] 보안과 속도를 위해 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법 8

3. Gzip vs 브로틀리 압축((Brotli Compression)

당연하게도 기존에 널리 사용되었던 gzip과 브로틀리 압축((Brotli Compression) 간의 비교가 관심이 많을 것으로 보입니다.

안전성 여부를 떠나서 압춧 성능과 관련해 비교해 놓은 자료들이 많은데요.

“Text Compression in R: brotli, gzip, xz and bz2 “ 라는 글에서 gzip과 brotli 등 여러 압축 기술들을 평가해 놓은 글을 참조해 봤습니다.

이에 따르면 압축율은 브로틀리 압축((Brotli Compression)이 가장 뛰어납니다.

[쇼핑몰 구축기] 보안과 속도를 위해 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법 9

그러나 압축 속도는 gzip이 브로틀리 압축((Brotli Compression) 보다도 훨씬 뛰어납니다.

[쇼핑몰 구축기] 보안과 속도를 위해 브로틀리 압축((Brotli Compression)을 Nginx에서 쉽게 이용하는 방법 10

여기에서 테스트한 결과를 토대로 정적인 파일(static contents)에는 브로틀리 압축((Brotli Compression)이 뛰어나지만 동적 콘텐츠( on-the-fly)나 스트리밍 데이타에는 적합하지 않다는 평가를 내리고 있습니다.

3. Nginx에서 브로틀리 압축((Brotli Compression) 적용 어려움

종종 언급하지만 nginx는 상당히 장점이 많은 웹서버이지만 때로는 불리한 점도 있습니다.

예를 들어 브로틀리 압축((Brotli Compression)과 같이 새로운 기술의 경우 nginx용으로 개발되어 자동으로 적용되지 않고 별도로 ngix에 맞추어 컴파일을 해줘야 합니다.

이는 nginx 버젼이 바뀌면 이에 맞추어 다시 컴파일해서 세팅해야 한다는 것을 의미합니다. 관리하기 쉽지가 않다는 것이죠.

아래와 같은 글에서 버젼이 바뀌어도 브로틀리 압축((Brotli Compression)을 계속 적용할 수 있다고 하지만 이는 잘 작동하지 않습니다.

아래 글에서 소개하는 방법도 nginx 버젼이 높아지면 별도로 컴파일하는 절차를 다시 진행해야 합니다.

[사이트 속도 개선] 브로틀리 압축(Brotli Compression)으로 속도를 개선해 보기

4. 명령어 하나로 브로틀리 압축((Brotli Compression) 적용하고 데이트하기

그냥 nginx가 업데이트되면 자동으로 브로틀리 압축((Brotli Compression)도 업데이트되면 가장 좋겠지만 이게 가능하지 않으므로 차선으로 쉬운 방법을 찾아 보았습니다.

안벽하지는 않지만 아주 쉽게 자동화할 수 있는 방법이 인터넷에 소개되어 있습니다. 아래 링크를 참조..

Compile Nginx from Source with Brotli Support

여기서 소개하고 있는 brotli.sh 파일을 서버 root에 설치하고 bash 명령어로 실행 시키면 됩니다.

4.1. brotli.sh 만들기

아래처럼 nano와 같은 편집기 명령어를 이용해 brotli.sh 파일을 만듭니다.

nano brotli.shCode language: PHP (php)

이 파일에는 아래 내용을 추가합니다.

#!/usr/bin/env bash

# version 1.2

# use it while developing / testing.
# you may use it in production as well.
# set -o errexit -o pipefail -o noclobber -o nounset
# set -x

# compile Nginx from the official repo with brotli compression

[ ! -d ${HOME}/log ] && mkdir ${HOME}/log

G_DIR="$(pwd)"

# logging everything
log_file=${HOME}/log/brotli.log
exec > >(tee -a ${log_file} )
exec 2> >(tee -a ${log_file} >&2)

# Defining return code check function
check_result() {
    if [ $1 -ne 0 ]; then
        echo "Error: $2"
        exit $1
    fi
}

export DEBIAN_FRONTEND=noninteractive

printf '%-72s' "Updating apt repos..."
sudo apt-get -qq update
echo done.

printf '%-72s' "Installing pre-requisites..."
sudo apt-get -qq install dpkg-dev build-essential zlib1g-dev libpcre3 libpcre3-dev unzip
echo done.

codename=$(lsb_release -c -s)

# function to add the official Nginx.org repo
nginx_repo_add() {
    distro=$(gawk -F= '/^ID=/{print $2}' /etc/os-release)
    if [ "$codename" == "juno" ] ; then
        codename=bionic
    fi

    if [ "$distro" == "elementary" ] ; then
        distro=ubuntu
    fi

    if [ "$distro" == "linuxmint" ] ; then
        distro=ubuntu
    fi

    [ -f nginx_signing.key ] && rm nginx_signing.key
    curl -LSsO http://nginx.org/keys/nginx_signing.key
    check_result $? 'Nginx key could not be downloaded!'
    sudo apt-key add nginx_signing.key &> /dev/null
    check_result $? 'Nginx key could not be added!'
    rm nginx_signing.key

    # for updated info, please see https://nginx.org/en/linux_packages.html#stable
    nginx_branch= # leave this empty to install stable version
    # or nginx_branch="mainline"

    if [ "$nginx_branch" == 'mainline' ]; then
        nginx_src_url="https://nginx.org/packages/mainline/${distro}/"
    else
        nginx_src_url="https://nginx.org/packages/${distro}/"
    fi

    [ -f /etc/apt/sources.list.d/nginx.list ] && sudo rm /etc/apt/sources.list.d/nginx.list
    echo "deb ${nginx_src_url} ${codename} nginx" | sudo tee /etc/apt/sources.list.d/nginx.list
    echo "deb-src ${nginx_src_url} ${codename} nginx" | sudo tee -a /etc/apt/sources.list.d/nginx.list

    # finally update the local apt cache
    sudo apt-get update -qq
    check_result $? 'Something went wrong while updating apt repos.'
}

case "$codename" in
    "stretch")
        nginx_repo_add
        ;;
    "xenial")
        nginx_repo_add
        ;;
    "bionic")
        nginx_repo_add
        ;;
    "juno")
        codename=bionic
        nginx_repo_add
        ;;
     "tara")
        codename=bionic
        nginx_repo_add
        ;;
    *)
        echo "Distro: $codename"
        echo 'Warning: Could not figure out the distribution codename. Continuing to install Nginx from the OS.'
        ;;
esac

sudo install -o ${UID} -g $(id -gn $USER) -d /usr/local/src/${USER}
cd /usr/local/src/${USER}
apt-get source nginx
sudo apt-get build-dep nginx -y

git clone --recursive https://github.com/eustas/ngx_brotli
sudo ln -s /usr/local/src/${USER}/ngx_brotli /usr/local/src/ngx_brotli
sudo chown ${USER}:$USER:$(id -gn $USER) /usr/local/src/ngx_brotli
cd /usr/local/src/${USER}/nginx-*/

# modify the existing config
sed -i -e '/\.\/configure/ s:$: --add-module=/usr/local/src/ngx_brotli:' debian/rules

# if gcc 8 is installed add patch to nginx 
if [ "$(gcc -dumpversion)" == "8" ]; then
    mkdir -p debian/patches
    cp ${G_DIR}/gcc-8_fix.diff debian/patches/gcc-8_fix
    echo "gcc-8_fix" > debian/patches/series
fi

# build the updated pacakge
dpkg-buildpackage -b

# optional
# install the updated package in the current server
cd /usr/local/src/${USER}

# take a backup
[ ! -d ~/backups/ ] && mkdir ~/backups
cp nginx*.deb ~/backups/nginx-$(date +%F)/

# sudo apt-mark unhold nginx
sudo dpkg -i nginx_*.deb

# print info about remove all the sources and apt sources file
cd ~/

printf "
# To clean up after install You can run
 rm -rf /usr/local/src/$(echo ${USER})/nginx*
 rm -rf /usr/local/src/$(echo ${USER})/ngx_brotli
 sudo rm /etc/apt/sources.list.d/nginx.list
 sudo apt-get -qq update
"
# hold the package nginx from updating accidentally in the future by someone else!
sudo apt-mark hold nginx

# stop the previously running instance, if any
sudo nginx -t && sudo systemctl stop nginx

# start the new Nginx instance
sudo nginx -t && sudo systemctl start nginxCode language: PHP (php)

이렇게 만들어진 brotli.sh의 파일 권한을 변경합니다.

chmod +x brotli.shCode language: PHP (php)

이 파일을 아래와 같이 bash 명령을 사용해 실행합니다.

bash britli.shCode language: PHP (php)

그러면 설치 전과정을 알아서 진행합니다. nginx 버젼을 파악해서 말이죠.

nginx 버젼이 변경될때마다 위에서 소개한 bash brotli.sh 명령으로 자동으로 새로 업데이트된 ngix에 맞추어 브로틀리 압축((Brotli Compression)을 적용할 수 있습니다.

Buy now

쿠팡 파트너스

쇼핑몰 구축기를 연재하는 이유

[검색 고도화] 최고의 검색 엔진을 찾자

들어가며, 검색관련 세가지 프로세스

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

세번째, 검색 결과를 어떻게 보여줄 것인가

1. WPSolr

1.1. 주요 특징

1.2. 가격

2. SearchWP

2.1. 주요 특징

2.2. 가격

3. Relevanssi – A Better Search

3.1. Relevanssi 특징

3.2. 가격

3.3. Relevanssi의 치명(?)적인 단점

4. 마치며

쇼핑몰 구축기를 연재하는 이유

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

들어가며, 검색관련 세가지 프로세스

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

세번째, 검색 결과를 어떻게 보여줄 것인가

1. get_search_form() 미 적용 테마에서 사용가능하게 만들기

twentyseventeen 테마의 경우

변경 전

변경 후

2. 기능 및 디자인 변경 방법

2.1. 테플릿 search-results.php 파일 수정

2.2. 테마의 functions.php에서 제어

2.3. style.css에서 제어

3. 썸네일 추가 방법

4. 검색 시작 글자수 지정하기

5. 몇개의 검색 결과를 보여줄 것인지?

6. 기본 설정 변경

쇼핑몰 구축기를 연재하는 이유

[검색 고도화] 라이브 서치 기능 추가하기

들어가며, 검색관련 세가지 프로세스

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

세번째, 검색 결과를 어떻게 보여줄 것인가

1. 사용자 경험을 높일 수 있는 라이브 서치 기능

2. 라이브 서치 플러그인 3가지

2.1. Dave’s WordPress Live Search

2.2. SearchWP Live Ajax Search

2.3. Ajax Search Lite

쇼핑몰 구축기를 연재하는 이유

[검색 고도화] 모바일 메뉴에 검색 기능 추가하기

들어가며, 검색관련 세가지 프로세스

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

세번째, 검색 결과를 어떻게 보여줄 것인가

1. 헤더(메뉴)에 검색 박스 기능 추가하기

2. 원하는 곳에 코드 직접 삽입 방식

3. 검색 아이콘 추가하기

4. OceanWP 테마에서 메뉴 추가 방법

5. 기타 참고 링크

CSS를 이용해서 다양한 효과를 주는 메뉴 구현 방안을 소개하는 사이트

PHP의 검색폼 구현 관련 다양한 예를 제시하는 사이트

Genes 테마 헤드에 검색 아이콘 추가하기

토글효과의 검색 아이콘 적용 방법

쇼핑몰 구축기를 연재하는 이유

[쇼핑 경험 최적화] 상품 탭에 스티키 기능을 적용해 보자

1. 스티키 기능 구현 플러그인

1.1. myStickymenu Plugin

1.2. Sticky Menu (or Anything!) on Scroll by Mark Senff

2. 코드 사용

2.1. CSS 코드 이용 방법

2.2. JS 코드 이용하기

3.기타 참고 링크

쇼핑몰 구축기를 연재하는 이유

폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

1. 폰트어썸 (Font Awesome) 적용 시 woff2관련 404 에러

2. 폰트어썸 (Font Awesome) 적용 시 점검 사항

2.1. MIME 타입에 woff2가 등록되었는지 확인

2.2. 웹서버 설정 확인 – woff2가 전부 반영되었는지

[참고] Apache와 IIS에서 woff2 등록 방법

Apache에서 woff2 등록하기