새롭게 테마를 변경했습니다.
우커머스 내 계정(My ccount)의 필드 수정 하기
쇼핑몰을 구축하다보면 내 계정을 섬세하게 조정할 필요가 있는데요. 쇼핑몰은 일반 블러그 사이트와 달리 회원 관리가 매우 중요하기 때문에 회원의 기본 정보를 보여주는 내 계정(My account) 화면은 사용자 경험 관점에서 매우 중요한 요소라고 할 수 있습니다.
여기에서는 우커머스 내 계정(My account) 내 계정 상세(account detail) 화면에 나오는 각 필드들을 없애는 방법에 대해서 알아 봅니다.
Custom CSS 코드 활용
다른 요소들은 그대로 두고 단지 보이지 않게만 만드는 방법입니다. 흔히 사용하는 css code 중 display :none;을 사용합니다.
이러한 css 코드 사용은 데이타는 그대로 두고 보이지 읺게만 합니다.
아래 css 코드는 과격하게 비밀번호와 관련된 필드만 남겨좋고 모든 필드를 보이지 않게 만듭니다.
이 경우 쇼핑몰 회원은 오직 비밀번호만 변경할 수 있고, 다른 정보를 보거나, 변경할 수 없습니다.
.woocommerce-account form.edit-account > p.woocommerce-form-row {
display: none;
}Code language: PHP (php)위는 너무 과격하기 때문에 일부 항목만 보이지 않게 css 코드를 세팅하는 방법입니다.
우리나라와 같은 동양권은 이름과 성이 구분되어 많이 거슬려하죠. 이럴 경우는 성에 해당하는 last_name 필드를 숨기거나 없애고 싶을 것입니다.
이럴 경우 아래와 같은 css 코드를 사용합니다.
.woocommerce-EditAccountForm .woocommerce-form-row--last {
display: none;
}Code language: PHP (php)우커머스 내 계정(My account)에서 사용되는 여러 필드들을 제어하기 위한 css 코드 이름은 아래와 같으니 참고하시기 바랍니다. 이 코드들을 응용해 제 필드들을 보이지 않게 만들 수 있습니다.
- First Name: account_first_name, .woocommerce-form-row–last
- Last Name: account_last_name, .woocommerce-form-row–first
- Email Address: account_email, .woocommerce-form-row–wide
- Current Password: password_current, .woocommerce-form-row–wide
- New Password: password_1, .woocommerce-form-row–wide
- Confirm New Password: password_2, .woocommerce-form-row–wide
PHP code spineet 이용
이번에는 PHP 코드를 이용하는 방법에 대해서 알아봅니다.
물론 여기 내 계정(Mt account)에는 워드프레스가 자랑하는 Hooks은 없습니다. 따라서 한가지 php 명령으로 없애거나, 지우거나, 보이지 않게 할 수는 없습니다.
따라서 php 명령을 사용하드라도 다른 작업을 해주어야 합니다.
functions.php에 코드 추가
우선 functions.php에 아래 코드를 추가합니다. 사용자에 따라서 child theme에 추가해도 좋고, MU-Plugin에 추가해도 됩니다.
add_filter('woocommerce_save_account_details_required_fields', 'remove_required_fields');
function remove_required_fields( $required_fields ) {
unset($required_fields['account_first_name']);
unset($required_fields['account_last_name']);
return $required_fields;
}Code language: PHP (php)내 계정(My account) 폼에서 필드 제거
다음으로는 내 계정(my account) 폼에서 필드를 직접 제거하는 것입니다. 이는 우커머스의 myaccount 템플릿을 변경하는 것입니다.
먼저 우커머스의 템플릿 폴더 아래 ” /wp-content/plugins/woocommerce/templates/myaccount/includes/ “폴더로 이동합니다.
여기서 ” form-edit-account.php “파일을 다운받습니다.
이 파일 ” form-edit-account.php “을 편집기로 열어서 아래 내용을 지웁니다.
<p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
<label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
<label for="account_last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_last_name" id="account_last_name" autocomplete="family-name" value="<?php echo esc_attr( $user->last_name ); ?>" />
</p>Code language: PHP (php)이 수정된 파일을 child theme의 아래 폴더에 올립니다. 그러면 끝납니다.
/wp-content/themes/YOUR CHILD THEME FOLDER/woocommerce/myaccount/
워드프레스 속도를 악화시키는 플러그인들
워드프레스로 사이트를 운영하면서 항상 속도에 신경을 쓰게 됩니다.
아니 모든 사이트 운영자들의 기본적인 관심이 사이트가 느리지 않을까 그리고 어떻게 하면 사이트를 조금이라도 더 빠르게 할 수 있을까를 고민하게 되죠.
일반적으로 워드프레스는 한국에서 많이 사용하는 XE와 같은 CMS에 비해서 느리다는 평을 많습니다.
물론 이에 대해서 워드프레스 최적화가 되어 있지 않기 때문이라는 주장이 많기는 합니다.
저는 예전에 XE를 사용하다 워드프레스로 넘어왔는데 제가 사이트를 세팅한 당시를 회상해보면 XE나 워드프레스나 속도차이가 그리 없었습니다.
XE로 운영하던 사이트에서 약 1,200여개의 게시판 글을 운영하다가 워드프레스로 이전했습니다. 그 당시 이전 방법이 마땅치 않아서 상당한 부분을 노가다로 대체했던 기억이 새롭네요.
워드프레스 속도를 저하시키는 플러그인
다 아시다시피 워드프레스는 워드프레스 코어에 다양한 플러그인을 설치해 기능을 풍부하게 만듭니다.
워드프레스 생태계가 워박 발전했기 때문에 다양한 니즈에 맞추어 정말 다양하고 엄청난 플러그인이 개발되어 있습니다.
이러한 플러그인을 사용하면 어지간한 기능의 사이트는 쉽게 만들어 낼 수 있습니다.
그러나 이렇게 다양한 플러그인들은 제공하는 편리함 때문인지는 모르지만 워드프레스로 사이트를 구축 시 수많은 플러그인을 사용하게 됩니다.
어느 통계를 보니 워드프레스 사이트들은 평균 35개의 플러그인을 설치하고 있다는 보고도 있습니다.
저는 간단한 사이트의 경우 10개 내외의 플러그인을 설치하고 우커머스를 이용한 쇼핑몰의 경우는 20여개의 플러그인을 설치해 사용합니다.
쇼핑몰의 경우 아무래도 요구사항이 높다보니 자기도 모르는 사이에 플러그인이 늘어나게 되더군요
그동안 작업하면서 배운 경험과 사이트 구축을 위해서 공부하면서 배웠던 내용을 중심으로 어떤 플러그인이 사이트 속도에 영향을 미치는지 살펴 보도록 하겠습니다.
구글 어낼리틱스 분석 플러그인 – 0.5초이상
사이트의 성과를 제대로 분석하기 위해서 대부분 사이트는 구글 어낼리틱스를 설치합니다.
직접 코드를 입력하기도하고 플러그인을 적용하기도 하는데요. 구글 어낼리틱스 추적 코드는 처음부터 사이트 현황을 분석하기 때문에 상당히 속도에 영향을 미칩니다.
속도를 개선하기 위해 직접 사이트 헤드등에 구글 어낼리틱스 추적 코드를 입력해 테스트를 해본적이 있습니다.
그래도 미적용시보다 쵯 0.5초이상은 느려지더군요.
구글 어낼리틱스 추적 코드를 이용해 사이트를 분석해주는 다양한 플러그인들은 더 다양한 기능을 제공하기 때문에 더욱 더 속도가 느려지게 됩니다.
구글 어낼리틱스 분석 플러그인들 중에서 그래도 속도가 빠르다는 Google Analytics for WordPress by MonsterInsights라는 플러그인을 사용중인데요. 이 또한 이전보다 0.5초이상 속도를 저하시킵니다.
이메일 구독을 위한 이메일 등록 API 또는 플러그인 사용 – 0.2초 ~ 0.3초
메일링 서비스를 제공하기 위해서 구독자 신청을 받게 되죠. 대부분 MailChimp와 같은 이메일 마케팅 서버스와 연동하게 되는데요. 이러한 서비스 연동을 위해서 이메일 등록 API를 사용해야 합니다.
이러한 이메일 등록 API 연동이 생각보다 무겁기 때문에 어쩔 수 없는 속도 지연을 가져오게 됩니다. 저의 경우는 0.2초 ~ 0.3초정도 지연되는 것을 됩니다.
자체 이메일 시스템을 구축하지 않은 이상 이러한 이메일 등록 API는 사용할 수 밖에 없는데요. 그러면 이러한 속도 저하를 최소화하는 방안은 모든 페이지에서 이러한 이메일 구독 신청을 받지말고 특정 페이지 등으로 노출을 줄이는 방법이 아닐까 싶습니다.
가장 노출이 잘되고 효과가 있을 몇몇 페이지 중심으로 이러한 이메일 구독 서비스 신청을 받는 것이죠.
팝업 로그인 플러그인 – WooCommerce Login/Signup Popup – 1초
회원 가입을 받고 로그인을 편리하게 위해서 팝업 로그인 기능을 사용하죠.
저도 회원가입 시 다양한 정보를 받고 쉽게 회원가입을 받기 위해 WooCommerce Login/Signup Popup Premium 이라는 플러그인을 사용했습니다.
다양한 기능때문에 선택했고 15$을 내고 프리미엄 버젼까지 구입했죠.
그런데 이 플러그인의 경우 별도의 CSS 파일과 구글 폰트 그리고 어썸폰트등을 사용하면서 속도를 크게 떨어뜨립니다. 별다른 조취를 취하지 않은 경우 이전보다 1초정도 느려집니다. 전체 로딩속도가 말입니다.
소비자 리뷰 플러그인, WP Review Pro – 0.2 ~ 0.3초
소비자 리뷰를 제대로 받기 위해서 리뷰 전문 플러그인을 사용하기도 합니다.
저도 소비자를 좀 더 디테일하게 받아보고자 WP Review Pro라는 플러그인을 사용한적이 있습니다.
리뷰 플러그인중에서 가장 기능도 많고, 가장 믾이 추천되는 프러그인 중의 하나였습니다. 상당한 기대를 하고 거금 67$을 주고 구입해 사용해 봤습니다.
영화 리뷰 사이트를 만들거나 레스토랑 평가 사이트등을 만든다면 상당히 유용한 플러그인입니다. 그러나 아쉽게도 Woocommerce와 호환성이 떨어지긴 합니다. 결국 그 이유로 사용을 중단하기는 했습니다.
아무튼 이 플러그인의 경우도 다양한 기능 덕분으로 사이트가 로딩될때 기본적으로 13개정도의 추가 데이타를 요청합니다. 그러다보니 로딩 속도는 0.2~3초 정도 느려지더군요.
페이지 빌더, Elementor – 0.3~0.6초
페이지를 멋지게 꾸미기 위해 페이지 빌더를 많이 사용합니다.
그러한 니즈가 크기 때문에 매우 다양한 페이지 빌더가 존재합니다. 무료로 사용할 수 있는 페이지 빌더도 있도 기본 기능은 무료로 제공하지만 보다 전문적인 기능은 유료로 젱하는 Freemium 페이지 빌더도 있으며 처음부터 유료로만 구입해야 사용 가능한 페이지 빌더도 입니다.
무료로 사용 가능한 페이지 빌더는 Site Origin’s Page Builder로 무려 백만개 이상 사이트에 설치되어 있다고 합니다.
무료버젼과 유료버젼을 운영하는 Freemium 비지니스 모델을 취하는 페이지 빌더로는 Elementor , Themify 를 들 수 있습니다. 어진간한 기본적인 기능은 무료 버젼으로도 충분하지만 어느정도 차원이 높은 기능은 유료 버젼을 사용해야 하는 경우죠.
유료로만 사용해야하는 페이지 빌더로는 Beaver Builder , Divi , Visual Composer Website Builder 등을 들 수 있습니다.
wpbeginner에서 포스팅한 글 6 Best Drag and Drop WordPress Page Builders Compared에서는 Beaver Builder 와 Divi 를 가장 믾이 선택하는 페이지 빌더로 꼽고 있습니다.
반면 그동안 가장 많이 사용되는 페이지 빌더는 Visual Composer Website Builder는 빌더로서 불안정성 및 점점 사용상의 불편함이 부각되면서 사용자가 줄고 있다고 합니다.
아무튼 저는 여러가지를 고려해 Elementor를 사용했는데요. 이러한 페이지 빌더 또한 사이트 속도를 악화시키는데 역활을 하고 있습니다.
Elementor 페이지 빌더 속도를 비교한 한 글에 따르면 Elementor 프리 버젼은 0.6초, 여기에 pro 버젼이 추가되면 0.7초 지연된다고 합니다. 이 보고서에 따르면 Elementor Pro 버젼 사용시 1.3초까지 속도가 느려진다고 할 수 있네요.
저의 경우는 어떠할까 Elementor의 경우 설치전과 비교해 보았습니다. 물론 메인 페이지를 어떻게 꾸며놓고 비교하느냐에 따라 다릅니다. 내용에 따라 0.3초 ~ 0.6초 정도 차이를 보였습니다.
MU-Plugin과 child theme – 0.2초
사이트의 제반 설정을 변경하는 코드를 추가하는 곳은 테마의 functions.php 파일이나 테마마다 제공하는 custom css입력 공간에 추가하게 됩니다.
이중 테마의 functions.php의 경우 테마가 업데이트되면 내용이 변경되므로 차이드 테마의 functions.php에 코드를 입력하게 되죠.
그러면 이런 의문을 가지게되죠. 차일드 테마를 가동후 본 테마를 가동한다면 여기서 오는 속도의 저하는 없을까?
아쉽게도 제가 테스트해본 봐로는 아주 작지만 속도 저한ㄴ 나타납니다. 저는 차일드 테마를 이용하지 않고 대신 MU-Plugin을 사용하는데요. 이는 그냥 차일드 테마를 이용하는 것에 비해서 0.2초 정도는 효율적이라고 측정되었습니다.
아주 미세한 부분까지 살펴서 속도를 최적화하겠다면 차이드 테마 사용대신 MU-Plugin을 사용하는 것도 하나의 방안이 될 수 있습니다.
다만 custom code spineet중에서는 반드시 functions.php에서만 작동하는 코드도 있는데요. 이런 경우 MU-PLUGIN에서도 작동하도록 추가 작업을 해야 합니다.
마치며
이상으로 간단하게 워드프레스 속도에 영향을 미치는 플러그인들을 살펴보았습니다. 이외에도 많은 관련 플러그인들이 있겠지만 여기에서는 제가 쇼핑몰을 구축하면서 사용해 보았던 플러그인들 중심으로 설명해 보았습니다.
앞으로 작업 과정에서 만나는 다양한 플러그인들을 평가해보고 위와같이 속도를 뚜렸히 저하시키는 플러그인이 있다면 추가 업데이트 하도록 하겠습니다.
쇼핑몰 상품 정보에 사용자 정의 필드(Custom Field) 정보 표현하기
이전 글에서 ACF 플러그인을 이용해서 사용자 정의 필드(Custom Field)를 만드는 방법에 대해서 알아보았습니다.
쇼핑몰에 사용자 정의 필드(Custom Field) 추가하기
다음으로는 이렇게 만든 사용자 정의 필드를 쇼핑몰의 상품 정보란에 표현하는 방법에 대해서 살펴봅니다.
1. 기본 접근 방법
사용자 정의 필드를 표현하는 방식은 다양합니다. 개발자들은 굉장히 복잡한 코드를 사용해 이 사용자 정의 필드(Custom Field)를 표현하기도 하는데요.
개발자가 아니고 아주 상식적인 선에서 워드프레스와 우커머스를 이해하고 있는 입장에서 그러한 접근은 머리만 아플 뿐이죠.
그래서 제가 찾은 방식은 워드프레스에서 많이 사용하는 hook을 이용하는 방법입니다.
우커머스에 정보를 입력한 hook 위치를 파악하고 여기에 정보를 표시토록하는 snippet을 작성하는 것이죠.
2. 우커머스 상품 섹션의 hook
그러므로 우선 우커머스 single product에 존재하는 hook에는 어떤 것이 있는지 확인해 봅니다.
Single product hook에 대한 정보는 Business Bloomer에서 소개하는 WooCommerce Visual Hook Guide를 참조하면 될 것 같습니다.
WooCommerce Visual Hook Guide: Single Product Page
여기에 따르면 아래와 같이 다양한 훅(hook)을 발견할 수 있습니다.
3. snippet 작성하기
위에서 적절하게 정보를 입력할 위치를 찾는데요. 저는 상품에 대한 짧은 설명이 끝나는 지점에 위치하는 woocommerce_before_add_to_cart_form을 선택했습니다.
이 hook에 정보가 출력되도록 snippet을 작성합니다. 제가 골프장 기본 정보를 출력토록 만든 snippet이니 참고하세요.
add_action( 'woocommerce_before_add_to_cart_form', 'display_acf_field_before_add_to_cart_form', 30 );
function display_acf_field_before_add_to_cart_form() {
echo '<h4> 골프장 기본 정보 </h4>';
echo '<p>홀수(Halls) : ' . get_field('golf_halls') ;
echo '<p>파(Par) : ' . get_field('golf_par') ;
echo '<p>거리(Length) : ' . get_field('golf_length') ;
echo '<p>슬로프(Slope) : ' . get_field('golf_slope') ;
// Note: 'golf_halls'은 ACF에서 설정한 필드 이름입니다.
}
Code language: PHP (php)이러한 snippet을 차이드테마의 functions.php나 mu-plugins에 추가합니다.
그러면 아래 이미지와 같으 모습으로 상품란에서 관련 정보가 추가되는 것을 알 수 있습니다.
제가 보기에 이 방법에 우커머스 상품 정보란에 사용자 정의 필드를 추가해 보여주는 가장 쉬운 방법으로 보입니다.
쇼핑몰에 사용자 정의 필드(Custom Field) 추가하기
우커머스를 이용해 쇼핑몰을 구현 시 상품에 대한 다양한 정보를 줄 수 있는 방법을 고민하게 됩니다.
쇼핑몰 상품 섹션에서 다양한 정보를 입력하고 보여줄 수 있는 방법중의 하나가 바로 사용자 정의 필드를 활용하는 것인데요. 커스텀 필드(Custom Field)라고도 불리우는 사용자 정의 필드를 구현하고 이를 표현하는 방법에 대해서 알아봅니다.
사용자 정의 필드(Custom Field)를 구현하는 것은 워드프레스 자체로 제공하는 사용자 정의 필드 기능을 이용할 수도 있고 사용자 정의 필드(Custom Field)를 지원하는 다양한 플러그인을 사용할 수도 있습니다.
1. 워드프레스 제공 사용자 정의 필드 기능 이용
최신 워드프레스에서는 ㅣ본으로 사용자 정의 필드 추가 기능을 제공합니다.
새로운 글을 작성하는 화면의 아래 부분에 상요자 정의 필드 섹션이 있고 여기에서 사용자 정의 필드를 추가할 수 있습니다.
다만 일반적으로 워드프레스 자체 제공하는 사용자 정의 필드(Custom Field) 기능은 제한점이 많아 플러그인을 사용하는 것이 좋다고 합니다.
여기서는 입력 방법만 제공하고 이 사용자 정의 필드를 표현하는 방법은 워드프레스에 대한 상당한 정보, 예를들어 템플릿 체계, 코딩 기술 등등을 잘 알고 있어야 가능하기 때문에 보다 쉬운 방법을 위해서 플러그인 사용을 권장하는 것입니다.
2. ACF(Advanced Custom Fields) 플러그인 활용
사용자 정의 필드(Custom Field)를 지원하는 플러그인중 가장 유명하고 널리 사용되는 것은 CF(Advanced Custom Fields) 플러그인입니다.
ACF(Advanced Custom Fields) 플러그인은 무료 버젼과 유료로 사용하는 pro 버젼이 있는데요. 기본적인 기능 구현에는 무료 버젼도 충분합니다.
저는 우커머스 지원 테마 구입 시 번들로 딸려온 ACF(Advanced Custom Fields) Pro이 있어 이를 사용했습니다.
여기서부터는 ACF(Advanced Custom Fields) 플러그인을 이용해 사용자 정의 필드를 구현하는 방법에 대해서 살펴보도록 하겠습니다.
2.1. 추가 정보에 대한 구상
당연한 이야기이지만 사용자 정의 필드를 추가하려면 어떤 정보를 표현하고 싶은지 먼저 구상해야 합니다.
여기서는 골프장에 대한 기본 정보를 제공한다고 가정하고 골프장 기본 정보를 추가해 보도록 하겠습니다.
- 홀수(Halls)
- 파(Par)
- 거리(Length)
- 슬로프(Slope)
2.2. 사용자 정의 필드 그룹
그러면 본격적으로 ACF 플러그인을 이용해 상요자 정의 필드를 구현해보죠
ACF 플러그인이 설치되면 워드프레스 대시보드 외쪽에 Custom Fields라는 항목이 생기는데요. 여기 하위 메뉴중 Field Group으로 이동합니다..
당연히 처음이니 아무것도 없을 것이니 Add New를 눌러 새로운 사용자 정의 필드 그룹을 만듭니다.
2.3. 사용자 정의 필드(Custom Fields) 입력
필드 그룹이 만들어졌으면 이제부터 본격적으로 사용자 정의 필드(Custom Fields)를 추가합니다.
이는 Add Fields 버튼을 눌러서 시작할 수 있습니다. Add Fields 버튼을 누르면 아래와 같은 화면이 나오면서 필드 라벨, 필드 이름, 필드 타입 등을 입력해 필드를 생성할 수 있습니다.
아래는 골프장 기본 정보 중 홀수(Halls)에 대한 입력 화면입니다.
- 필드 라벨 : 홀(Hall)
- 필드 이름 : golf_halls 이는 한 단어만 가능하고 빈공간없이 대시나 언더스코어와 허용합니다.
- 필드 타입 : Text
- 반드시 입력될 필요없어 Required에는 체크하지 않음
- 폭 : 33%로 설정 입력 화면에서 한줄에 3개 항목이 나오도록 함
ACF에서 지원하는 필드 타입
ACF에서 지원하는 필드 타입은 매우 다양합니다.
아래 ACF 사이트에서 설명하는 필드 타입 리스트이 참고하면 좋을 것 같습니다. 메우 다양한 필드를 지원하니 사용 목적에 따라 활용하면 됩니다.
2.4. 사용자 정의 필드 표시 위치
이 새롭게 만든 사용자 정의 필드를 어디에서 표현할지 정의합니다.
이는 Edit Field Group에서 확정할 수 있는데요. 여기 Location 부분에서 설정할 수 있습니다.
- ① Location 으로 이동
- ② 포스트타입 선택
- ③ 상품 선택
3. 입력 화면에서 데이타 입력
이렇게 사용자 정의 필드 그룹 및 사용자 정의 필드를 입력하면 지정한 위치에서 데이타를 입력할 수 있는 화면을 만날 수 있습니다.
앞서 위치를 상품으로 지정했기 때문에 상품 정보 입력 화면에서 아래와 같은 골프장 기본 정보 입력 화면을 만날 수 있습니다.
4. 마치며
이렇게 만들고 입력한 상요자 정의 필드(Custom Field)를 쇼핑몰의 상품 정보에 보여주는 방법은 이후 글에서 설명해 보도록 하겠습니다.
구글맵 활용법 – 구글맵 API key 발급 방법
한국에는 조금 서비스가 미흡하지만 글로벌을 고려하려면 구글맵을 이용할 수 밖에 없죠. 포스팅시에도 특정 이벤트가 일어나는 지역등을 표시하기엔 구글맵이 제격입니다.
예를 들어 아래와 같이 일산호수공원과 월드컵공원 그리고 서울숲공원을 표시해보죠. 일산호수공원은 빨간색 마크, 월드컵공원은 파란색 그리고 서울숲공원은 노란색 마크로 표시해보죠
위와 같이 여러 장소를 표시하는 다중마커 사용법에 대해서는 다음 글을 참조해 보세요.
구글맵 활용법 – 여러 장소 표시하는 다중마커(Multi marker) 사용법
먼저 여기에에서는 구글맵을 이용하기위한 가장 기본적인 단계인 구글맵 API 키 발급하는 방법에 대해서 살펴봅니다.
1. 구글맵(Google 지도) 서비스 정책의 변화
이전에는 구글맵은 유료와 무료로 나누어졌었으며, 무료로도 어느 정도 서비스를 구축할 수 있을 정도의 지도 관련 데이타를 제공했었습니다.
그러나 2018년 6월 11일자로 구글은 기존 유료와 무료 서비스로 나누어졌던 서비스를 전부 유료 서비스로 단일화하고 서비스도 세가지로 단순화했습니다.
- 브랜드를 Google 지도 플랫폼(Google Maps Platform)으로 통일
- 제공 서비스를 지도(Map), 경로(Route) 그리고 지역 정보(Places)의 세가지 핵심 서비스 중심으로 통일
- 사용자를 구글맵 플랫폼에 결제 계정을 등록하거나 ‘구글 클라우드 플랫폼’ 결제 계정이 있는 사용자만 사용할 수 있음
따라서 구글 계정을 만들려면 신용카드가 있어야 함. 하지만 신용카드 정보를 제공했다고 자동으로 결제되지는 않고 유료 서비스 이용에 동의해야 함
신용카드 정보 제공 요구는 계정 자동 등록을 막기 위한 장치에 더 가까움 - 기본적으로 유료이지만 무료로 Google 지도 플랫폼을 사용할 수 있도록 월 $200 크레딧을 제공
단 예전에 비해 무료 사용 범위가 크게 줄어 듬. 예전엔 하루 10만쿼리 에 해당하는 웹서비스 및 2만 5000건의 지도 로드 서비스를 무료로 제공했지만 지금은 월 28,500건 정도로 축소됨(이는 일 900여회) - 만약 구글맵 일간 페이지뷰가 약 900회(위에서 이야기한 월 28,500회)를 초과하면 지도 표시가 중단되기 때문에 비용을 내야 함
- 참고로 구글맵 가격표에서 확인할 수 있듯이, 단순한 구글맵 Embed는 비용을 받지 않으며 서비스가 고도화 될수록 비용이 올라감
. Embed Advanced/Dynamic Street View는 무료 사용을 월 14,000건으로 제한하며 100,000건까지는 월 $14를 받음
. Dynamic Maps은 무료 사용량을 28,000건으로 제한하며, 100,000건까지 $7을 청구 등등 - 참고로 우리나라에서 구글 지도 데이타는 SK텔레콤으로부터 제공받아 보여주고 있음 가끔 구글맵 업데이트가 느린 것은 한국 정부가 정밀 지도를 구글에 제공하지 않았기 때문이 아니라 구글과 SK텔레콤간의 문제라고 함
2. 구글 맵 서비스 이용을 위한 API 발급 방법
사이트에 구글맵을 삽입하려면 구글맵 API키를 발급 받아야 합니다. 앞서 이야기 한대로 여기서는 이 구글맵 API 키 발급 과정에 대해서 알아봅니다.
2.1. 구글맵 플랫폼 사이트
구글맵 API 키 발급받기 위해서는 구글맵 플랫폼 사이트를 방문해야 합니다. 당연하지만요.
구글맵 플랫폼 사이트는 아래 링크를 따라 이동합니다.
여기서 평소 구글 답지않게 화려한 도시 이미지의 구글맵 플랫폼 환영 페이지를 만날 수 있습니다.
여기서 시작하기를 눌러서 본격적으로 구글맵 플랫폼 사용 설정을 할 수 있습니다.
2.2. 구글맵(Google 지도)플랫폼 사용 설정
시작하기를 누르면 구글맵(Google 지도)플랫폼 사용 설정이 나옵니다.
구글맵 제품 선택
지도, 경로, 지역 정보 세가지가 나오는데 저는 무엇을 사용할지 확실히 정해지지 않았고 각기 어떤 의미를 가지고 있는 정확히 몰랐기 때문에 세가지 모두 선택했습니다.
구글맵 프로젝트 설정
다음은 프로젝트를 설정하는 단계인데요.. 갑자기 메뉴가 영어로 변경되네요.
뭐 당황하지 말고 프로젝트 이름을 적고, 사용약관에 동의 후 다음 단계로 넘어갑니다.
구글맵 결제 계정 등록
다음 단계는 결제 계정 등록 단계입니다. 여기서는 갑자기 한국어 메뉴로 바뀌는군요. 돈을 받는 단계라 중요하기 때문에 이 단계는 한글화 했던 것일까요?
예전에는 구글맵을 무료로 사용할 수 있었지만 지금은 대부분이 유료로 변경되고 무료 사용도 일정 제약을 두고 있습니다.
어떤 정보를 보면 이 결제 단계를 뛰어넘을 수 있다고 합니다만 여기서는 통상 프로세스대로 진행합니다. 솔직히 새로 시작하면 이 결제단계를 뛰어 넘을 수 있는 방법이 있다는 것이 회의적입니다. 구글은 무조건 결제 계좌를 등록하라고 하니깐요.
구글맵은 월$200정도의 크레딧을 제공해 어느 정도 무료로 사용할 수 있지만 이 고객이 일정 정도 비지니스가 발전하면 당장 진짜 돈을 내는 고객으로 쉽게 전환할 수 있도록 만들고 있습니다.
조금 무서운 구글 정책이라는 생각이 들었습니다. 아무도 비니지스 시회가 없다고 생각했던 지도에서 어쩌면 굉장한 비니지스 기회가 올지 모르겠습니다. 지도를 이용한 서비스가 늘고 트래픽이 증가하면 상당한 비지니스 기회를 발견할 수 있을 것이라는 생각이 듭니다.
그렇지만 너무 쫄 필요는 없습니다. 본격적으로 비즈니스를 한다면 구급맵의 고급 기능들을 사용하겠지만, 저와 같이 블로그에 임베딩하는 목적이나 일반 사용자가 필요한 기능은 전부 무료이거나 상대적으로 무료 사용량이 많습니다.
- 단순한 구글맵 Embed는 비용을 받지 않으며 서비스가 고도화 될수록 비용이 올라감
- . Embed Advanced/Dynamic Street View는 무료 사용을 월 14,000건으로 제한하며 100,000건까지는 월 $14를 받음
- . Dynamic Maps은 무료 사용량을 28,000건으로 제한하며, 100,000건까지 $7을 청구 등등
아무튼 처음으로 구글 및 구글맵 계정에 왔기 때문에 당연히 결제 계정이 없겠죠.
결제 계정만들기를 눌러 다음 단계로 이동합니다.
결제 계정을 만든다고 당장 돈이 나가는 것이 아닙니다. 앞에서도 한번 말씀드렸지만 언제든지 과금을 할 수 있는 체계를 만드는 것과 무료 사용을 위해 자동 계정을 만들어 무료로 사용하려는 시도를 방지하는 목적도 있다고 하네요.
아래서 보시는 것처럼 우선 구글맵 플랫폼을 무료로 사용해 볼 수 있습니다. 12개월동안 무료로 사용해 볼 수 있는 $300의 무료 크레딧을 주기때문이죠. 아 지금은 $200 크레딧으로 변경되었네요.
서비스 약관과 아마 필수는 아니지만 변경 사항등을 메일로 받아보는 것은 나쁘지않으므로 이메일업데이트에 체크합니다.
이 단계가 끝나면 API 사용 결정 단계로 이동합니다.
이 단계가 끝나면 거의 끝났다는 메세지와 함께 API key가 나타납니다.
그러면 이 키를 사용해할 수 있습니다.
그러면 구글맵 지도 상황을 보여주는 대시보드 페이지로 이동합니다. 여기에서 구글맵 트래픽 등 관련 상황 정보를 볼 수 있습니다.
아직 처음이니 아무런 정보가 없죠.
2.3. 사용자 인증정보
여기에서 사용자 인증정보에 보안을 적용하라는 메세지가 나옵니다.
이는 무료 서비스가 아니므로 불필요한 곳에서 또는 다른 사람이 이 서비스를 남용하는 것을 방지하고자 키 사용처를 제한 하는 것입니다.
예를 안드로이드앱에서만 사용한다든지 아니면 웹사이트에서만 사용할 수 있도록 제한하는 것이죠.
그리고 웹사이트에서 사용한다면 API 키를 사용할 수 있는 사이트를 제한, 등록할 수 있습니다.
또한 구글맵에서 제공하는 다양한 API가 있는데요. 굉장히 많은 API중 특정 API에서만 이 API 키가 작동하도록 API를 제한 할 수 있습니다.
저는 기본으로 ‘키 제한 안함’을 선택해서 모든 API에서 이 키로 사용할 수 있도록 했습니다.
3. 마치며
이상으로 간단히 구글맵 API key 발급 과정에 대해서 살펴보았습니다.
특별한 정보가 있는 것은 아니지만 구글맵 관련 작업을 하다보니 조금 체계적으로 정리할 필요가 있어서 시리즈로 정리해 보려고 시작했습니다.
다음에는 구체적으로 구글맵을 어떻게 활용하는지 살펴보도록 하겠습니다.
참고
여행가방 하나로 유니콘이 된 어웨이(AWAY)의 브랜드 구축 방법 – 아마존을 이용하지 않기
모처럼 마음의 여유를 가지고 그동안 방치해 두었던 메일을 일기 시작했습니다. 그동안 열심히 구독 신청해 놓았던 수많은 뉴스레터들이 엄청 쌓여있기는 했습니다.
FORTUNE 뉴스레터중에는 여행 가방 스타트업기업이자 이제는 유니콘 기업이 된 어웨이(AWAY)의 브랜드 빌딩에 대한 이야기가 있어서 간단히 소개해 봅니다.
Why Away Doesn’t Sell Luggage on Amazon
아마존에 의지하지 않았기에 경제적 해자를 만들 수 있었다.
이는 Fortune에서 주관하는 Fortune Brainstorm Tech 2019에 출연한 AWAY 공동 창업자이자 최고 브랜드 책임자인 젠 루비오 (Jen Rubio)는 그들의 성공 요인중의 하나를 아마존에서 그들의 상품을 판매하지 않기로 결정했다는 점에서 찾고 있습니다.
어웨이는 당시 브랜드 강화에 도움이 될것이라고 여겨지던 아마존을 활용하지 않았습니다. 즉 아마존의 유통망을 이용하지 않고 독자적인 유통망을 개척하면서 경쟁자와 차별화되는 경제적 해자를 만들 수 있었다고 젠 루비오 (Jen Rubio)는 밝혔습니다.
브랜드 차별점 (differentiator)
“정말로 브랜드나 상품을 좋아하기 때문에 그리고 끌린다고 생각해요. 그것이 바로 차별점(differentiator)이라고 봐요. 그렇지 못한 것들은 그냥 아마존에서나 살만한 것이죠. 그러고 저는 그 중간 지대락는 없다고 생각해요. 그래서 저는 우리만의 무기를 고수하고, 아마존 플랫폼에 의지하지 않는 것이 중요하다고 생각해요.”
“I really do think that you will have brands that you go to because you love the brand or the product, and that’s a differentiator, and everything else is a commodity that you’ll buy on Amazon. And I really don’t think there will be a middle space. So I think really just sticking to our guns, and not going on the [Amazon] platform was important for us.”
아마존은 고객 데이타를 공유하지 않기 때문에 브랜드 구축이 어렵다.
젠 루비오 (Jen Rubio)는 아마존이 아마존에서 구입하는 고객에 대한 데이타를 업체와 공유하지 않는다는 사실은 누가 우리 브랜드 도는 상품을 구매하는지에 대한 통찰을 얻지 못하게 만든다고 이야기합니다.
그리고 어웨이(AWAY)와 같은 소비자와 직거래하는 브랜드에게 있어서 고객 데이타는 매우 중요하다고 강조합니다. “우리에게 있어서 가장 중요한 것은 고객 관계이고, 어웨이(AWAY)는 고객 관계를 만듬으로써 브랜드 빌딩이 가능했습니다.”
“고객 지표를 수집하고 분석할 수 있게되면 어웨이(AWAY)이와 같은 브랜드가 다음 단계 마케팅 목표를 잡는데 도움이 됩니다. 진정으로 이야기하건데 이러한 고객 관계는 페이스북에서 광고를 더욱 쉽게 만들 수 있었습니다.”
일정 조건이 될때까지 아마존을 이용하지 않을 것
어웨이(AWAY)는 브랜드 빌딩을 위해서 영원히 아마존을 활용하지 않을까?
젠 루비오 (Jen Rubio)는 그들 브랜드 관리를 위한 조건이 성숙할때까지는 아마존을 이용하지 않겠다고 합니다.
“아마존을 절대로 이용하지 않겠다고 이야기하는 것은 아니예요. 다만 현재처럼 아마존이 제공하는 조건으로는 아마존에 들어가지 않는다는 것은 분명히 약속드릴 수 있습니다. 지금 아마존은 분명 고객이 많응 대규모 플랫폼이지만 거기에 대규모 판매하는 매스 브랜드로는 진입하지 않을 것입니다.”
기타
여행가방 스타트업 어웨이(AWAY)의 성공 전략에 대해서는 아래 글을 참고해 보세요.
여행가방 스타트업 어웨이(AWAY)는 어떻게 업계를 흔들고 있는가?
아마존을 통한 비지니스에 대해서는 아주 상반적인 두가지 글을 참조하면 좋을 것 같습니다.
브라우저에 기생하는 멀웨어 News-easy.com 팝업 광고 삭제 방법 – 크롬을 중심으로
오늘은 갑자기 등장해 저를 괴롭히던 뭘웨어 팝업 광고를 제거하는 방법에 대해서 살펴보도록 하죠.
갑자기 뜨기 시작하는 아주 이상한 광고들
아주 이른 여름 휴가를 다녀온 후 컴퓨터를 사용하는데 갑자기 윈도우즈10 알림창에서 이상한 알림이 계속 뜨기 시작하네요.
내용도 상당히 무시무시한 내용에서부터 아주 야한내용까지 다양한 알림 팝업이 뜨는데 아주 당혹스러웠습니다. 말로만 듣던 멀웨어가 설치된것 같습니다.
그렇게 뜨는 알림 팝업중에서 그나마 얌전한 이미지를 아래에 소개해 봅니다.
처음에는 도대체 이게 뭔지 몰라 무지 당황했죠. 해서 최근에 설치한 프로그램 리스트에 이상한 프로그램이 있는지 확인하고, 시작 프로그램에 잘 모르는 이상한 프로그램이 시작되는 것이 아닌지 점검해 보기도 했습니다.
아무리해도 뚜렸한 혐의가 있는 프로그램 또는 앱을 발견하지 못해 운영체제 전체를 다시 설치하는 것을 진지하게 고민학도 했습니다. 그러나 막상 포맷을 하고 다시 설치하려니 너무 귀찮긴하더군요. 최소 몇시간은 지루한 작업을 해야하므로..
그러다가 알림 화면에 Chrome이라는 단어가 계속 등장하고 설치된 프로그램을 시간순으로 정렬해보니 크롬이 가장 최근에 설치한 것으로 나오더군요. 그래서 크롬이 문제구나는 감을 잡고 크롬 자체를 삭제하니 이 이상한 알림 광고 팝업은 더 이상 나타나지 않더군요.
그렇다고 크롬을 사용하지 않을 수는 없으니 크롬을 다시 설치했는데 기존에 설치되었던 설정이 남아 있어서인지 여전히 알림 팝업이 뜹니다. 이를 어찌할꼬..
구글 검색을 거듭하다보니 News-easy.com 멀웨어 팝업 광고를 제거하는 방법을 소개한 글들을 발견했습니다. 외국에서는 문제가 많이 되었나보더군요.
How to remove News-easy.com pop-up ads (Virus Removal Guide)
멀웨어 News-easy.com 팝업 광고 제거 방법
News-easy.com 팝업 광고 제거 방법은 간단합니다. 이는 브라우져의 알림 기능을 이용하므로 브라우져 알림 기능에서 News-easy.com이 화이트 리스트에 올려져 있다면 삭제하고, 아니면 블랙리스트에 올리면 됩니다.
어떻게 하냐구요? 크롭의 경우로 설명합니다.
크롬 설정으로 진입
먼저 이는 크롭의 설정(S)으로 들어갑니다. 설정은 크롬 화면 맨 오른쪽 최상단에 있는 점3개짜리를 눌러 들어갈 수 있습니다.
크롬 – 설정 – 고급 – 사이트 설정으로 이동
크롬 설정 화면의 아래쪽에서 고급 설정으로 이동할 수 있습니다.
고급 설정은 개인정보 및 보안, 언어등으로 구성되어 있는데요. 이 중 앞 부분 개인정보 및 보안 내용 중 사이트 설정으로 이동합니다.
알림 설정으로 이동
사이트 설정의 여러 항목 중 알림으로 이동합니다.
알림 설정에서 화이트리스트 또는 블랙리스트 설정
알림 설정에 보면 허용 리스트에 News-easy.com이 포함되어 있으며 이를 삭제합니다.
그리고 저는 차단 리스트에 News-easy.com를 올려놓았습니다. 이러면 문제는 해결됩니다.
마치며
이렇게 크롬 설정에서 알림 부분을 조정하는 방법도 있지만 크롬의 광고 기능 또는 애드 블럭 기능을 사용해 이러한 뭘웨어 팝업 광고를 막을 수도 있습니다.
아니면 이런 멀웨어를 삭제해주는 백신 프로그램을 설치해 막을 수도 있습니다.
저는 추가로 뭔가를 설치하는 것이 싫어서 그냥 크롬 세팅을 변경하는 것으로 끝냈습니다.
워드프레스 테마와 플러그인의 저가 판매 사이트는 안전할까?
예전엔 기본 기본 기능에 만족하다보니 새롭고 보다 고차원적인 기능에 대한 고민이 없습니다. 그런데 어느 순간부터 다양한 기능 구현을 고민하게 되었고 이를 위해서 다양한 플러그인을 찾게 되었죠.
원하는 기능을 무료 플러그인으로 해결할 수 있다면 좋겠지만 점점 괜찮은 기능을 제공하는 플러그인은 유료화되고 있기 있어 비용 문제와 부딕치게 됩니다.
그러다보면 원하는 테마나 플러그인을 무료로 배포하거나 저렴하게 판매하는 사이트의 유혹을 받게 됩니다.
솔직히 이런 유혹에 지지않을 자신이 별로 없더군요. 그러면서 이런 사이트를 이용하는 것이 문제는 없는지 모험할 가치가 있는지 끊임없이 자문하게 되는데요. 그런 측면에서 간단히 생각들을 정리해 보았습니다.
1. 테마나 플러그인을 저렴하게 판매하는 사이트
예전에 가능하면 플러그인 사용 자체를 자제하는 것이 성능에 최고로 좋다는 생각을 가지고 있었기 때문에 플러그인 판매 사이트들에 대해서 큰 관심이 없었습니다.
가장 큰 테마 및 플러그인 판매 사이트인 띰포레스트(thethemeforest.net)나 DIVI 사이트 정도 알고 있었고 여기 중심으로 필요한 정보나 테마를 구입했었습니다.
1.1. 생각보다 워드프레스 관련 비지니스가 다양하고 최근 유료화 경향을 보인다.
그런데 플러그이에 대해서 관심을 가지고 검색을 해보니 이외에도 자체 테마나 플러그인을 판매하는 사이트들이 굉장히 많더군요.
그리고 최근 몇년사이에 기존 무료로 제공하던 테마나 플러그인들이 점점 유료화로 방향을 틀고 있다는 것을 알 수 있었습니다.
프리미엄(Freemium) 비니미스 모델을 차용해 일부 기능은 무료 플러그인에서 제공하고 보다 고차원적인 기능은 유료로 제공하는 프로 버젼으로 업그레이드하도록 유도하죠.
1.2. 저렴하게 테마나 플러그인을 판매하는 사이트들이 증가하다.
또한 기존 테마를 저렴하게 판매하는 사이트들을 점점 더 많이 발견할 수 있습니다. 이들은 입수한 워드프레스 테마나 플러그인을 저렴한 비용 또는 연간/월간 회비를 받고 배포하고 있습니다.
몇년전 글들에서는 이와같은 비니지스를 하는 곳은 몇개 없었지만 지금은 상당히 많은 사이트를 발견할 수 있었습니다.
대충 검색해보아도 아래처럼 많은 사이트를 발견할 수 있었습니다. 생각보다 쉽게 발견할 수 있고 많이 있다는 것을 알 수 있었습니다.
더 놀라운 것은 워드프레스 테마 및 플러그인을 판매하는 띰포레스트(thethemeforest.net)에서도 개별로 판매는 하지 않지만 연간 회원제에 가입하면 120만개에 해당하는 테마, 플러그인 그리고 폰트 등의 콘텐츠를 다운 받을 수 있다는 점입니다.
2. 이들 사이트는 합법적일까?
유료로 판매하는 테마나 플러그인을 저렴한 비용으로 재판매하는 것은 합법적일까요?
읻ㄹ 사이트에서는 이러한 저가 판매가 완전히 합법이라고 주장하고 있습니다. 이들이 가격을 획기적으로 낮출 수 있는 것은 테마나 플러그인 이용 시 어떠한 지원도 하지 않기 때문이라고 합니다.
즉 워드프레스 테마나 플러그인의 가격은 소프트웨어 자체의 가격 + 지원으로 구성되는데 지원 비용을 없애고 합리화 했다는 것이죠.
굉장히 많은 곳에서 이러한 비지니스를 하고 있는 것을 보니 이를 불법이라고 치부할 수만 없다는 생각이 들더군요.
더구나 가장 많은 테마와 플러그인을 판매하는 띰포레스트(thethemeforest.net)에서도 유사한 비지니스를 하고있는 상황이 말입니다.
조금 더 정밀하게 검토해 보아야겠지만 아주 저렴한 가격으로 판매하거나 회원제로 전체 테마나 플러그인을 다운로드할 수 있는 비지니스 모델은 아래와 같은 원칙에 따라 가능하다고 합니다.
“GPL(General Public License)에 따라 라이센스가 부여된 프로그램을 구입한 경우 사용, 배포 등 모든 행동은 구매자의 자유”라는 것이죠. 한국에서도 그런것인지는 모르겠습니다.
GPL은 아래와 같은 4가지 기본적인 자유를 보호하도록 설계된 오픈 소스 소프트웨어 라이센스라고 하네요.
- 어떤 목적으로도 소프트웨어를 사용할 수 있다.
- 소스 코드에 대한 연구를 통해 소프트웨어가 어떻게 작동하는지 연구하고 이를 자유롭게 변경할 수 있다.
- 소프트웨어를 자유롭게 배포할 수 있다.
- 소프트웨어를 개선하고 그 개선 사항을 자유롭게 배포할 수 있다.
3. 이들 사이트 이용은 어떤 위험이 있을까?
이런 사이트를 이용하면 저렴하게 워드프레스 테마나 플러그인을 사용할 수는 있지만 또 다른 위협에 노출될 수 있다고 합니다.
3.1. 보안 문제
이러한 사이트 이용을 반대하는 측에서 가장 먼저 주장하는 것이 바로 보안 문제입니다.
이러한 사이트에서 제공하는 테마나 플러그인에는 멀웨어나 악성코드가 심어져 있을 가능성이 있다는 것입니다.
또한 이들 악성코드는 여러 파일에 분산되어 있어 팀지하기가 매우 어렵기에 사이트를 안전하게 지키기는 어렵다는 점을 들고 있습니다.
- 플러그인이 해킹되면 사이트 데이타가 손상 가능성
- 멀웨어가 서버 또는 호스팅 플랫폼 전체 사이트로 확산 가능성
3.2. 기밀 문제
멀웨어나 악성코드는 사이트 자체를 파괴할 수도 있지만 사이트에서 중요하게 다루어야할 정보들을 빼낼 수 있습니다.
각종 사이트 회원 정보들이 외부로 유출 될 수 있습니다. 더우기 이커머스 사이트라면 결제단계에서 신용카드 정보 등등의 아주 민감한 정보를 빼낼 수도 있죠.
3.3. SEO에 악영향을 미칠 수 있다.
해킹된 워드프레스 테마는 사이트에 스팸 링크를 추가하거나 방문자를 다른 사이트로 리다이렉트할 수 있습니다.
검색엔진은 이러한 이러한 수상환 활동을 눈치채고 사이트의 검색 등급을 낮추거나 심지어는 이런 사이트를 검색 리스트에서 제외해 버릴 수 있습니다.
4. 마치며
워드프레스 테마나 플러그인을 저렴하게 판매하는 사이트들은 나름 근거를 가지고 비니니스를 하는 것으로 보입니다.
그리고 보안 등등으로 위험하다는 주장을 충분히 알고 있기 때문에 자신들은 테마나 플러그인 제작자로부터 직접 받는 파일을 그대로 올리며, 보안 프로램으로 철저하게 검사해 안전하다는 점을 강조하고 있습니다.
그들이 공개적으로 판매를 한다는 점에서, 그리고 그것이 불법도 아니라는 점에서 악성 코드나 멀웨어를 심어서 자기 비지니스를 위험하게 만들 가능성은 그리 높지는 않다는 것이 합리적인 추정이라는 생각이 듭니다.
그러나 위험을 방지하는 것은 아무리 조심해도 지나치지 않죠. 조금이라도 위험을 줄일 수 있는 방법을 사용해햐 한다는 생각입니다.
마치 보험을 들듯이 예상치못한 위험을 최소화하기 위해서는 가장 정상적인 루트로 테마와 플러그인을 구입하는 것이 좋겠습니다.
최근 떠오르는 웹 디자인 트렌드 13
어느 분야도 마찬가지지만 웹 디자인부분도 빠르게 변화하면서 새로운 웹 디자인 트렌드들이 등장하고 새로운 시도들이 끊임없이 시도되고 있죠.
근래 나타난 웹 디자인 트렌드에 대해 아주 간략히 정리한 글이 있어 저자의 허락을 받아 번역 공유해봅니다. 의역 및 직역이 섞여 있습니다.
여기서는 대단한 지식을 알려주지는 않습니다. 그것은 다른 영역이겠죠.
여기서는 웹 디자인 부분에서 고려되고 있는 트렌드에는 이런 것이 있다는 것을 아주 간단히 알려줍니다. 트렌드를 간단히 파악하기에는 좋다는 생각을 했습니다.
Hot 13 Web Designing Trends That Will Make an Impact in the Coming Year
지난 4~5년 동안 웹 디자인 업계에서는 주목할만한 변화들이 있었습니다. 반응형 웹디자인 도입에서 동영상 수용 그리고 사용자 경험의 중요성 대두와 같은 웹 디자인업계를 뒤흔드는 엄청난 혁명적 변화를 수반해 왔습니다.
지난 5년간 웹 디자인 변화가 진정 혁명적이었다면 앞으로 다가올 몇년앞에는 무엇이 놓여져 있을까를 고민해 보았습니다.
향후 5년간 웹 디자인 트렌드는 어떻게 변화할까요? 정말 흥미로운 질문이 아닐 수 없죠. 여기서는 지금으로부터 2025년까지 누구난 열광하게될 웹 디자인 트렌드에 대해서 살펴보죠.
1. AI와 사이버 보안
요즘에는 맬웨어(amlware)와 사이버 보안 위협을 탐지하는 전통적인 방법은 실패를 거듭하고 있습니다. 사이버 범죄자들은 끊임없이 방화벽을 우회하는 새로운 방법을 찾아내고 있습니다.
다가오는 미래에는 로봇이 사이버 보안 분야에서 큰 변화를 일을킬 것입니다. 개발자들은 고객 지원서비스부터 분석 트렌드, 이미지 인식까지 모든 것을 도와줄 수 있는 AI(인공지능) 구축 방법을 배우고 있습니다.
AI(인공지능)는 저렴하고 매우 효율적이기 때문에 향후에는 분명히 사이버 보안의 미래가 될 것입니다.
2. 사용자 편의성과 전환율을 경이적으로 높여 줄 모션 UI(Motion UI)
웹 개발과 웹 디자인은 끊임없이 혁명적으로 변화하고 있습니다. 이 분야의 트렌드는 상상할 수 없을만큼 빠르게 변화하고 있습니다.
모션 UI(Motion UI) 가 제대로 구현되면 더 나은 방법으로 사용자의 주의를 끌 수 있습니다.
아시다시피 오늘날 (사용자들이) 관심을 가지는 영역이 빠르게 줄어들고 있습니다. 따라서 향후 몇년간은 방ㅁ자의 참여를 유지하기 위해서 모션 UI를 더욱 더 사용할 것입니다.
3. 워크로드 간소화를 위한 API 중심 디자인 설계 방식 채택
요즘은 IoT 등장으로 우리 세계는 점점 더 긴밀하게 연결되고 있습니다. 이는 각 응용 프로그앰들이 더 많은 API가 필요하다는 것을 의미합니다.
API 중심 디자인 설계 방식은 병렬적 작업이 가능해지면거 생산성과 효율성을 높일 수 있습니다.
이는 응용 프로그램의 개발 비용을 낮추는 코드 재사용이 가능하며 개발자는 향상된 사용 경험과 실패 위험을 낮출 수 있습니다.
4. 고객 서비스 비용을 줄여주는 채팅
2025년에는 인공지능으로 작동하는 챗봇들이 실질적인 고객 서비스 채널이 될 것입니다. 오늘날의 고객들도 즉각적인 챗봇들의 반응에 감사하고 있습니다.
2020년말까지 이러한 챗봇의 영향력은 크게 증가할 것입니다. 조사에 따르면 고객 상호작용의 85%는 챗봇에 의해 발생할 것으로 전망되고 있습니다.
이러면 고개 서비스 비용이 크게 절감될 것으로 전망됩니다.
5. 새로운 경험을 제공할 자바스크립트
자바스크립트는 유연성과 파워로 새로운 상요 경험을 제공할 것입니다.
지난 10년동안 자바스크립트는 웹 사이트개발에 가장 널리 사용되는 프로그래밍 언어였습니다.
Angular, React.js 및 Vue.js와 같은 새로운 언어와 프레임 워크를 통한 프레임 워크, 라이브러리 및 디자인의 발전으로 인해 앞으로도 계속 발전 할 것입니다.
6. 모바일 앱에서 차세대 프로그레시브 웹 애플리케이션으로 진화
프로그래시브 웹앱이 가장 인기있는 웹 트렌드가 될 것입니다.
이러한 PWA(Progressive Web App) 앱은 일반 웹 페이지와 유사하지만 더 다양한 기능을 탑재하고 있습니다.
여기에서 사용자는 즉각적이고 독립적이고 신뢰할 수 있는 매력적인 사용자 경험을 얻을 수 있도록 만듭니다.
7. 성능 향상을 위한 단일 페이지 응용프로그램
단일 페이지 응용 프로그램(Single Page Application, SPAs)은 모든 재부분의 사용자 기기에서 잘 작동하는 자바스크립트를 기반으로 만들어집니다.
페이지를 새로고침하지 않고도 동작인 작동으로 단일 웹페이지를 구현하기 때문에 사용자 환경을 개선하고 중단을 최소화합니다.
이 단일 페이지 응용 프로그램(Single Page Application, SPAs)은 태블릿, 데스크탑 및 모바일을 지원함에 따라 다음반응형 웹 개발 시 단일 페이지 응용 프로그램(Single Page Application, SPAs)를적용하는 것이 좋습니다.
8. 정적 웹사이트는 여전히 존재
완벽한 웹 사이트 개발 시 비용 효율을 중시한다면 정적 웹 사이트는 이러한 목적에 부합할 수 있습니다.
정적 웹 사이트는 간단하고 복잡하지 않으며 빠른 로딩이 가능합니다, 이것이 정적 웨 사이트가 사라지지 않을 이유입니다.
9. RAIL 컨셉은 즐거운 사용자 경험 제공
2015년년부터 RAIL(Response Animation Idle Load designing) 컨셉이 적용되기 시작했습니다.
이 디자인 트렌드는 주로 더 빠른 로드 시간 및 더 뛰어난 웹 사이트 성능이 가능케 합니다.
RAIL(Response Animation Idle Load designing) 컨셉은 사용자 중심 접근법을 따르는 웹 디자이너에게 매우 유용할 것입니다.
10. 사용자 행동 추적이 필수 접근 방식이 되다.
사용자의 온라인 행동은 사용자 행동 추적을 통해수 분석할 수 있습니다.
즐거운 사용 경험을 재공하기 위해서 클릭 수, 사용자 상호 작용 및 마우스 이동을 분석합니다.
다음에 웹 사이트를 구축한다면 사용자 행동 추적 솔류션을 사이트에 통하는 것이 필요합니다.
11. 음성 검색 최적화
음성 검색 최적화는 전 세계의 주요 검색 엔진에 영향을 미치는 주요 트렌드가 되었습니다.
현재, 시리, 알렉사, 구글 어시스트들이 검색 기능에 사용되고 있으며 2020년에는 거의 50%의 검색 쿼리가 음성으로 이루어질 것으로 예상됩니다.
12. 타이포그래피(Typography)의 긍정적인 역활
웹사이트를 디자인하고 개발할 때, 타이포그래피와 글꼴 선택은 절대로 무시할 수 없고 또 그렇게 해서는 안 됩니다.
타이포그래피는 사용자 경험, 사용자 인식, 가독성, 심지어 기분까지 포함한 수많은 필수 요소에 영향을 미칩니다. 이러한 경향은 현대 웹 디자인에서 선도적인 트렌드로 오랫동안 지속될 것으로 예상됩니다.
13. 삽화(Illustration) – 보다 효과적인 메세지 전달 방식
삽화, 타이포그래피, 제반 양식은 웹 사이트를 보다 사용자 친화적이고 대화형으로 만드는 데 유용합니다.
삽화를 통해 메시지를 효과적으로 전달하고 텍스트의 필요성을 줄일 수 있으며 웹 사이트를 보다 매력적이고 주의를 끌 수 있습니다.
삽화를 이용하는 이유는 바로 그 때문입니다. 이러한 경향은 향후에도 가장 중요한 웹 개발 및 디자인 트렌드로 남을 것입니다
결론
웹사이트를 개발하는 데는 많은 노력이 필요하지 않습니다. 하지만, 그것은 훌륭한 웹사이트를 만드는 데 도움이 됩니다.
사용자 요구와 기대가 커가는 것을 따라잡기 위해서는 자신의 기술을 업데이트하고 새로운 기술과 프레임워크를 학습해야 합니다.
5년이 지나면 웹 사이트가 현재와 전혀 다른 방식으로 보이고, 느끼고, 작동할 것이라는 것에는 의심의 여지가 없습니다.
위에서 논의되는 트렌드는 기존의 인터페이스를 대체하지 않고 보완할 것입니다. 이러한 최신 업데이트는 과거를 지우지 않고도 미래를 보여줄 수 있을 것입니다.
이 글은 puripia.com의 블로그에도 같이 실렸습니다.