블로그

  • Page Builder Sandwich에 커스텀 숏코드를 추가하는 방법

    Page Builder Sandwich에 커스텀 숏코드를 추가하는 방법

    From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

    숏코드를 사용하면 개발자가 일반적으로 작성하는 방대한 양의 코드를 추가할 필요 없이 웹사이트에 다양한 요소(예: 위젯)를 추가할 수 있습니다.

    예를 들어, 일반적인 코드의 길이는 대략 다음과 같을 것입니다:

    <html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
    Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.
    
    Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.
    
    Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.
    
    Nullam sodales eleifend massa, in bibendum purus fermentum id.
    
    Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.
    
    </html>​

    이 예시에서는 위의 코드를 통해 Lorem Ipsum 자리표시자 텍스트의 전체 단락을 추가할 수 있다고 가정해 보겠습니다.

    Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

    [lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

    You can see how they’re miles different from each other in terms of length.

    이제 두 코드(원래의 긴 코드와 “lorem”이라는 단어만 포함된 숏코드)가 모두 완전히 똑같은 작업, 즉 Lorem Ipsum 텍스트를 추가하는 작업을 수행한다고 상상해 보세요.

    This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

    Where can I find shortcodes?

    자주 사용하는 플러그인이나 위젯이 있다면, 사용할 수 있는 숏코드가 제공될 가능성이 높습니다.

    Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

    Adding Custom Shortcodes on PBS

    Page Builder Sandwich에서는 콘텐츠 영역에 숏코드를 직접 입력하거나 복사하여 붙여넣는 것만으로 페이지에 숏코드를 추가할 수 있습니다.

    아래에서는 Shortcodes Ultimate의 숏코드를 사용하여 Page Builder Sandwich 데모 페이지에 콘텐츠 상자를 추가했습니다.

    Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

    숏코드 매핑에 관한 이전 기사 중 하나의 정의는 다음과 같습니다:

    Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    이것이 의미하는 바 중 하나는 각 문서나 저장소에서 숏코드를 더 이상 직접 수동으로 찾을 필요가 없다는 것입니다.

    해당 숏코드가 포함된 플러그인이 워드프레스 사이트에 설치되어 있기만 하면, Page Builder Sandwich에서 쉽게 사용할 수 있습니다.

    So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

    And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

    Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

    You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

    따라서 사용자 지정 숏코드나 직접 만든 숏코드를 추가하고 싶다면, 워드프레스 사이트에 설치되어 있는 한 언제든지 추가할 수 있습니다.

    Here are some other helpful plugins that you can use to create your own custom shortcodes:

  • 이번 2017 블랙 프라이데이 특가로 멋진 워드프레스 사이트를 만들어 보세요

    Create WordPress Website With Black Friday Sale 2017 Deals Black Friday and Cyber Monday are coming in a couple of days (5 to be exact), but you’ll find that a bunch of websites have already started announcing their discount deals every which way. WordPress tools and plugins are definitely no exception.

    따라서 아직 (비교적) 이른 시기이지만, 예산 내에서 워드프레스 사이트를 제작하는 데 필요한 필수 항목을 갖춘 2017년 워드프레스 블랙 프라이데이 최고의 특가 상품 목록을 정리해 보았습니다.

    그럼 지체 없이, 기본적인 첫 워드프레스 웹사이트를 구축하는 데 필요한 대폭 할인된 5가지 도구와 플러그인을 소개합니다.

    Cloudways

    Cloudways is a managed cloud hosting platform that’s quick to start, easy to manage, and made to scale. It’s feature-rich, plus it lets you choose your server resources, allowing you to get your site up and running within minutes.

    Enter the coupon code HOLIDAY25 upon checkout to get a 25% discount on Cloudways for 3 months, valid until 28th November 2017.

    Cloudways 쿠폰 받기

    Yoast SEO

    Yoast SEO is one of the most popular (if not most trusted) search optimization plugin for WordPress, and for good reason too. With over 7 million installs, it’s probably the most comprehensive SEO tool in the digital market, and their millions of users (ourselves included) can attest: you simply can’t go wrong with a plugin as functional as Yoast.

    While they haven’t announced this year’s Black Friday coupons yet, they’ve made an announcement in one of their articles that they’ll definitely having a sale on November 24 and 25.

    지금 Yoast SEO 확인하기!

    WP Rocket Cache

    WP Rocket offers a good range of caching functions, giving your site the performance boost that it needs. It’s a breeze to configure as well, so it’s great for beginners as it only requires minimal effort for setup.

    This year, they’re having their biggest sale yet: 35% off on ALL their licenses.

    WP Rocket 쿠폰 받기

    Theme Discounts from WeDevs.com

    WeDevs는 유용한 워드프레스 플러그인과 확장 기능 모음입니다. 꽤 탄탄한 커뮤니티를 보유하고 있으며 2008년부터 운영되어 왔습니다. 2017년 블랙 프라이데이(및 이어지는 올해 연휴)를 맞아 멋진 WP 테마에 대한 수많은 할인 및 쿠폰이 포함된 워드프레스 홀리데이 딜 목록을 정리했습니다.

    테마 쿠폰 받기

    BONUS RESOURCE: First Site Guide

    First Site Guide is a resource site and tool that contains easily accessible knowledge on how to create your first website, both on WordPress and off of it. It also has great infographics that guide you through the basics of blogging, design, and marketing as well. And best of all, you get this good share of site-building knowledge for free.

    또한 곧 First Site Guide의 멋진 리소스가 포함된 랜딩 페이지 제작 가이드 글도 선보일 예정이니 앞으로 몇 주 동안 기대해 주세요!

    First Site Guide로 이동

    (And last but not least) Page Builder Sandwich!

    We definitely don’t want to miss out on all the fun. So this 2017, we’re giving you guys 33%-off on any license. Just use the promo code CYBERMONDAY33 upon checkout to start building your site today!

    Premium Single Site

    $39 $26.79

    지금 구매하기

    Apply CYBERMONDAY33 upon checkout to save $13.20

    Premium Unlimited Sites

    $89 $60.29

    지금 구매하기

    Apply CYBERMONDAY33 upon checkout to save $29.70

    So what are you waiting for? Grab these kick-ass WordPress deals now. After all, Black Friday only happens once a year. ?

  • Page Builder Sandwich를 활용한 이메일 마케팅 방법

    Page Builder Sandwich를 활용한 이메일 마케팅 방법

    네, 가능합니다.

    The more important question, though, is how and why do you need to do it?

    My business is small. Can’t I just wing it?

    Email marketing has an average ROI of 3,800 percent. For every dollar invested, the average return is $38, according to Salesforce.

    In other words, it’s definitely something worth investing your time in.

    Because while there are tons of ways to market your products and capture leads– you can still try to make use of the less-popular cold call, for example– the most sure-fire way to connect and communicate with your target audience in the 21st century is through e-mail marketing.

    So if you’re running a business –any kind of business, whether small, big, online or otherwise– digital and e-mail marketing is an absolute must.

    Aside from cutting on costs (e-mail is free, after all), businesses rely on it not just because it’s been proven to be successful, but also because it yields results that are both measurable and flexible; you can track your audience’s responses to your e-mails, for example, or note how many clicks and opens your e-mail marketing campaigns get.

    How you can do it with Page Builder Sandwich

    There are lots of available software you can use to help you market your products and content digitally, like Hubspot’s E-mail Marketing Software, or Mailchimp, which gives you a management system that helps you create, organize, and analyze your newsletters.

    But did you know that using Sandwich, you can actually integrate some of the popular software mentioned via the Newsletter Element?

    The Newsletter Element (and how it works)

    You can find the Newsletter Element by hovering over to the Elements Inspector over to the left side of the screen, and selecting Newsletter from the bottom area.

    Using the Properties Inspector, you can also choose which newsletter integration you’d like to use with the Newsletter Element. For this exmple, we’re going to use MailChimp (highlighted in blue in the dropdown below).

    And, using the Input Field button, you can try to play around with the Newsletter Element’s settings as well, so you can change colors, customize success message options, and other settings, like so:

    By trying your hand at the different available settings for the Newsletter Element’s options, you can end up with something like this:

    Plus, with the help of our Pre-Designed Sections and other design tips, you can actually do a whole lot more.

    Other useful resources for e-mail marketing beginners

    • 11 Types of Marketing E-mails That Actually Generate a Response

    Conclusion

    While other noteworthy marketing trends still exist today, one thing’s for sure: E-mail marketing is definitely here to stay, and it’s important that you utilize it when you can. Who knows? Through e-mail marketing, your business could just get that big break it’s been looking for.

    Design in less time!

    Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.

    Try Live Preview
  • Frontly API: Frontly Builder를 더욱 개발자 친화적으로 만들기

    개발자 여러분을 위한 반가운 소식입니다. 다가오는 Frontly 릴리스에서 마침내 Frontly API가 출시됩니다.

    현재 아직 개발 중이지만, 드디어 Frontly용 애드온과 확장 프로그램을 만들 수 있게 됩니다. 물론 보다 원활하고 효과적인 개발 환경을 위해 API 문서도 함께 공개될 예정입니다.

    여러분이 만들어 낼 멋진 작품들을 하루빨리 만나볼 수 있기를 기대합니다.

    Here’s a short list of some of the APIs we have so far:

    1. Text Formatting Bar API

    Text Formatting Bar API를 통해 개발자는 Frontly의 텍스트 서식 표시줄 기능을 확장할 수 있습니다. 이를 통해 텍스트 서식 표시줄에 새로운 버튼 및 옵션을 추가할 수 있습니다.

    2. Add Element API

    이 API를 사용하면 새로운 요소를 생성하여 콘텐츠 편집기 왼쪽의 요소(Elements) 섹션에 있는 기존 목록에 추가할 수 있습니다.

    3. Inspector API

    Inspector API를 사용하면 각 요소의 속성 검사기(Properties Inspector)에서 설정을 생성, 추가 또는 제거할 수 있습니다.

    4. Text API

    Text API를 사용하면 텍스트 스타일을 수정할 수 있으며, 구체적으로 텍스트 서식 수정, 텍스트 배경색 변경 등의 작업을 수행할 수 있습니다.

    Developers! It’d be great if you could send over some suggestions

    These are just some of the basic APIs we have in store for you. We’re in the middle of creating more, but if you have any other ideas of APIs we can add to our console, just leave a comment below, or hit us up at [email protected]. We might just feature your suggestions in the upcoming Frontly release ?

  • Page Builder Sandwich가 다른 빌더들과 다른 점

    How-Page-Builder-Sandwich-Is-Different-from-the-Rest세상에는 수많은 페이지 빌더가 존재하며, 여러분은 분명 이렇게 자문하고 계실 것입니다: Page Builder Sandwich는 대체 무엇이 특별한가? 이미 다른 빌더를 사용하고 있다면 굳이 이것을 써야 할 이유가 있을까요?

    이 글에서는 Page Builder Sandwich를 특별하게 만들고 콘텐츠 크리에이터와 디자이너 모두에게 진정한 필수품으로 만들어 주는 핵심 기능 몇 가지를 소개해 드리겠습니다. 페이지 빌더가 무엇인지, 왜 필요한지 잘 모르시더라도 걱정하지 마세요. 도움이 될 만한 자료가 준비되어 있습니다.

    1. 단순한 시각적 표현이 아닌, 실제 콘텐츠를 직접 보고 편집합니다

    다른 페이지 빌더에서는 콘텐츠를 단순히 나타내기만 하는 영역을 보게 됩니다. 주로 블록과 직사각형 모양으로 콘텐츠 레이아웃을 구성하기 때문에, 그 결과물은 실제 페이지에서 콘텐츠가 어떻게 보일지에 대한 뼈대처럼 보일 뿐입니다. 이로 인해 결과물이 어떻게 보일지 확인하려고 미리보기 버튼을 끊임없이 클릭해야 합니다.

    Page Builder Sandwich를 사용하면 모든 편집이 사이트의 프론트엔드에서 이루어지며 콘텐츠를 직접 편집하므로 진정한 위지위그(WYSIWYG) 경험을 누릴 수 있습니다.

    2. 성가신 팝업 대화상자 없는 빠르고 간편한 직접 편집

    팝업은 페이지 빌더의 단골 요소였습니다. 대부분의 빌더에서는 제목, 버튼 라벨, 작은 태그라인 텍스트 등 레이아웃의 어떤 요소를 편집하려고 해도 먼저 팝업 대화상자가 열릴 때까지 기다린 후 그 안에서 변경 작업을 수행해야 했습니다.

    우리는 Page Builder Sandwich 전반에서 팝업의 사용을 최소화하는 것을 목표로 삼았습니다. 팝업을 제거함으로써 모든 콘텐츠 편집이 그 어느 때보다 쉽고 매끄러워졌습니다.

    편집 방식은 매우 직관적입니다. 텍스트를 클릭하여 커서를 놓고 바로 타이핑을 시작하면 됩니다. 이제 편집을 시작하기 위해 TinyMCE 에디터가 포함된 팝업 대화상자를 기다릴 필요가 없습니다. 가장 좋은 점은 여전히 콘텐츠를 드래그 앤 드롭으로 자유롭게 이동할 수 있다는 것입니다.

    번거로움 없는 편집을 돕는 또 다른 혁신은 항상 표시되는 인스펙터(속성창)입니다. 인스펙터는 도구 상자이자 속성 편집기 역할을 합니다. 텍스트 색상, 제목, 글꼴 크기 조절, 마진, 패딩, 테두리, 인용문 등 콘텐츠 서식 지정을 위한 도구를 클릭 한 번으로 손쉽게 사용할 수 있습니다.

    Reused functionality

    3. 워드프레스 기존 기능의 재사용

    다른 페이지 빌더에서 발견한 또 다른 점은 바퀴를 다시 발명하는 경우가 많다는 것입니다. 일부 빌더는 자체 컬러 피커, 이미지 업로더, 갤러리 생성기 및 기타 다양한 도구를 직접 구현합니다. 그 자체로 나쁜 것은 아니지만, 워드프레스는 수많은 코드 스니펫의 보물창고인데 굳이 이를 활용하지 않을 이유가 있을까요?

    워드프레스는 수많은 훌륭한 기여자들이 만든 멋진 도구들이 가득한 거대하고 경이로운 플랫폼입니다. Page Builder Sandwich는 워드프레스에 이미 번들로 포함된 기능을 최대한 활용합니다.

    자체 컬러 피커 대신 Iris 컬러 피커를 사용합니다. 자체 이미지 업로더 대신 미디어 관리자를 사용합니다. 또한 유용한 스크립트의 예로 backbonejs, underscorejs, wp.hooks, wp.shortcode 등도 있습니다. 우리는 이 모든 것을 활용하고 있으며, 이를 통해 개발이 더 수월해졌을 뿐만 아니라 코드베이스도 훨씬 더 안정적이 되었습니다.

    워드프레스의 기능을 재사용한 덕분에 멋진 뜻밖의 소득도 얻었습니다. 예를 들어, 이미지를 삽입할 때 미디어 관리자를 사용했기 때문에 워드프레스 갤러리, 비디오 및 오디오 재생목록, 외부 URL까지 추가 작업 없이 즉시 처리할 수 있었습니다. 또한 이미지 편집에도 미디어 관리자를 그대로 활용할 수 있어 불필요한 개발 고민에 들어가는 수많은 시간을 절약할 수 있었습니다.

    4. 키보드 내비게이션 및 단축키

    다른 페이지 빌더에서는 마우스가 주된 도구입니다. 마우스로 요소를 드래그 앤 드롭하고 더블 클릭하여 편집합니다. 하지만 키보드는 소외되는 경우가 많습니다.

    예를 들어, 일부 빌더에서는 팝업 대화상자를 닫고 새 대화상자를 클릭해야 하므로 현재 편집 중인 위치의 한 단락/섹션 위에 있는 텍스트를 쉽게 편집할 수 없습니다. Page Builder Sandwich에서는 키보드로 탐색할 수 있습니다. 화살표 키를 눌러 콘텐츠 사이를 이동할 수 있으며, 다른 행이나 열 안에 숨겨진 콘텐츠라도 문제없이 작동합니다.

    또 다른 중요한 기능은 실행 취소(Undo) 및 다시 실행(Redo) 키보드 단축키입니다. 처음에는 대수롭지 않게 보일 수 있지만, 실수로 콘텐츠를 잘못된 위치에 드래그 앤 드롭한 상황을 생각해 보세요. 일부 페이지 빌더에서는 원래 위치로 다시 직접 드래그해야 합니다. Page Builder Sandwich에서는 실행 취소와 다시 실행이 모두 지원됩니다. 입력한 내용을 수정하고 싶든, 드래그한 콘텐츠(또는 여러 콘텐츠)를 되돌리고 싶든, 실행 취소나 다시 실행을 누르기만 하면 됩니다. 실행 취소 및 다시 실행은 드래그 앤 드롭한 콘텐츠는 물론 글꼴 크기, 행 패딩과 같은 속성 변경에도 적용됩니다. 이를 통해 강력한 편집 도구로 활용할 수 있습니다.

    Relaxing experience

    5. 진정한 프론트엔드 페이지 빌더 – 더욱 편안하고 군더더기 없는 편집 경험

    개발 과정에서 우리의 마음가짐은 프론트엔드에서의 편집이 백엔드 도구를 그대로 사용해 편집하는 것처럼 느껴져서는 안 된다는 것이었습니다. 빌더가 원래 백엔드용으로 만들어진 후 프론트엔드로 단순히 포팅된 것처럼 느껴져서는 안 됩니다.

    결론적으로 제가 생각하는 Page Builder Sandwich의 가장 큰 차별점은 프론트엔드 편집이란 어떠해야 하는가를 새롭게 재해석하여 “진정한” 프론트엔드 페이지 빌더가 되는 것을 목표로 제작되었다는 점입니다.

  • PBS 버전 4.0의 모바일 반응형 기능

    모바일 반응형 웹을 제대로 구현하는 것은 매우 까다로울 수 있으며, 이를 망치게 되면 그 결과는 대개 끔찍하게 끝납니다. 실제로 아직 듣지 못하셨다면, 구글은 이미 2015년 4월부터 모바일 친화적이지 않은 웹사이트에 불이익을 주기 시작했습니다. 간단히 말해, 모바일 반응성은 대단히 중요한 문제입니다.

    그렇다면 모바일 반응성이란 무엇일까요?

    웹사이트는 데스크톱 이외의 기기에서 볼 때 콘텐츠가 다양한 화면 크기와 방향에 적응할 수 있는 기능이 있을 때 반응형으로 간주됩니다. 더 쉽게 말하자면, 여러분이 PBS v4로 업그레이드하고 페이지를 디자인하거나 제작하고자 할 때, 데스크톱, 휴대폰 또는 태블릿 중 어느 기기를 사용하든 확인하는 데 전혀 문제가 없어야 합니다.

    버전 4.0의 반응성

    최신 업데이트에서 저희 팀은 PBS의 새로운 모바일 보기 기능이 텍스트, 이미지 및 기타 모든 콘텐츠가 기기의 화면 해상도에 자동으로 맞춰지는 등 전반적으로 더 부드럽고 반응성이 뛰어난 환경이 되도록 만들었습니다.

    이제 모든 제목이 화면 크기에 맞춰 자동으로 조정되므로, 휴대폰에서 PBS로 제작된 사이트나 페이지를 볼 때 지나치게 큰 글씨가 나타나지 않습니다. 좀 더 명확하게 보여드리자면 다음과 같습니다:

    다양한 화면 크기로 사이트 보기

    또한 모바일에서 페이지가 어떻게 보이는지 확실히 파악하실 수 있도록, 데스크톱을 통한 모바일 보기 기능도 활성화했습니다. 이렇게 하면 페이지가 잘 보이는지 확인하기 위해 휴대폰(또는 태블릿)과 데스크톱을 직접 오가는 번거로움을 겪지 않아도 됩니다. 이제 페이지를 디자인하는 동안 언제든지 다양한 화면 크기를 간편하게 전환해 가며 확인할 수 있습니다.

    뿐만 아니라 이제 태블릿과 휴대폰에 맞춰 요소 간격을 구체적으로 미세 조정할 수도 있습니다.

    여러분은 어떻게 생각하시나요? 마음에 드시나요? 모바일과 관련하여 저희가 개선할 수 있는 다른 기능이 있을까요? 아래 댓글 섹션에 의견을 남겨주세요!

  • Frontly 리브랜딩 업데이트 #1: 문단 복사하여 붙여넣기

    Over our past blog posts, we mentioned that PBS will be rebranding as Frontly, and that we’ll be changing and improving a lot of aspects for the better. One of these aspects is being able to use Frontly to experience a smoother, more intuitive page building experience that’s even better than PBS.

    따라서 여러분을 위해 Frontly를 완벽하게 다듬는 동안, Frontly가 출시되었을 때 여러분이 정확히 어떤 기능을 누리게 될지 알려드리고자 일련의 게시물을 공개하기로 결정했습니다.

    Copy-paste blocks of text on Frontly

    저희는 PBS에서 모든 문단이 별도의 요소가 되도록 설계했습니다. 긴 텍스트를 복사하여 붙여넣으면 선택 영역이 별도의 텍스트 블록으로 나뉩니다.

    What do we mean by this? Here’s an example to illustrate.

    현재 버전의 PBS(여러분이 지금 사용하고 계신 버전)에서는 여러 줄을 복사하여 붙여넣으면 여러 텍스트 요소로 쪼개져 텍스트 섹션을 이동하기가 더 어렵습니다. 이로 인해 텍스트 편집이 힘들어집니다.

    따라서 방금 복사하여 붙여넣은 텍스트를 다른 열로 이동하려면 각 줄을 하나씩 드래그해야 하므로 더 어려워집니다.

    This is something we’re definitely addressing with Frontly.

    This is a small test page Benjamin made for Frontly. Here, you’ll see that we copy-pasted the same paragraph we tried to copy-paste on PBS. Only this time, everything is retained in a single area that you can drag around and place wherever you want to.

    즉, 텍스트를 더욱 매끄럽게 추가하고 편집할 수 있어 번거로움 없는 타이핑(및 페이지 제작) 환경을 경험하실 수 있습니다.

    Retain full text formatting with Frontly

    Frontly에서 여러분이 사용해보시길 기대하는 또 다른 기능은 모든 서식이 그대로 유지된다는 점입니다. 글머리 기호는 물론 이모지까지 포함하여 모든 제목이 유지됩니다.

    Copy-pasting with PBS vs copy-pasting with Frontly

    Frontly(오른쪽)에서는 원본 소스의 모든 텍스트 서식이 그대로 유지된 것을 확인할 수 있습니다. 굵게, 기울임꼴, 밑줄 또는 다른 제목 크기로 편집된 모든 서식이 Frontly 영역에 붙여넣을 때 온전히 유지됩니다(이모지만 유지되던 PBS와 비교했을 때).

    What else do we have in store for you?

    앞서 말씀드렸듯이, 이는 Frontly가 PBS보다 얼마나 혁신적으로 발전할 것인지를 다루는 일련의 게시물 중 첫 번째일 뿐입니다. 여러분께 보여드리고 싶은 다른 기능들이 너무나 많으니, 다음 블로그 게시물도 많은 기대 부탁드립니다!

    제안이나 의견이 있으신가요? 아래에 답글을 남겨서 알려주세요!

  • 훌륭한 고객 지원을 제공하는 비결

    매일 아침 출근길에, 상상할 수 있는 최악의 포커페이스로 커피를 건네주는 바리스타가 있습니다. 이것은 우리 둘만의 일상적인 의식이 되었습니다.

    그리고 만약 이 특정 커피점이 사무실로 가는 길목에 편리하게 있지 않았더라면, 저는 아마 오래전에 단골 카페를 바꿨을 것입니다.

    그런데 이 바리스타와 꼭 닮은 존재가 온라인 지원 커뮤니티에도 있습니다.

    하지만 이메일과 실시간 채팅에서는 포커페이스를 볼 수 없기 때문에, 정확히 집어내기가 조금 더 어렵습니다. 하지만 장담하건대, 그들은 분명히 존재합니다.

    좋은 고객 서비스가 비즈니스 성장의 핵심인 것은 맞습니다. 하지만 단순한 고객 지원만으로는 충분하지 않습니다.

    고객이 소중한 존재라는 느낌을 받을 수 있도록 (훌륭하지는 않더라도) 좋은 서비스를 제공해야 합니다. 고객은 실제로 소중하기 때문입니다. 결국, 고객이 있기에 여러분의 비즈니스가 존재하는 것입니다.

    하지만 고객 서비스가 그저 품질 없이 제공되기만 해서는 충분하지 않다는 사실을 모든 사람이 이해하고 있는 것은 아닙니다.

    실제로 기업 뒤에 지원 팀이 당연히 배치되어 있음에도 불구하고, 최근 통계에 따르면 68%의 고객이 회사가 자신에게 관심을 기울이지 않는다고 생각하여(당연히 신경 써야 함에도) 이탈한다고 합니다.

    그렇다면 진정으로 좋은 고객 지원을 보장하는 것은 무엇이며, 이를 어떻게 유지할 수 있을까요?

    동료 고객 지원 전문가의 입장에서, 고객을 — 더 나아가 비즈니스를 — 만족스럽게 유지하기 위한 몇 가지 핵심 요소를 소개합니다.

    1. 부정적인 피드백을 활용하세요

    기술 산업이든 아니든, 어떻게든 제품에 대한 피드백을 항상 받게 마련입니다. 하지만 주의하세요. 모든 피드백이 여러분이 듣고 싶어 하는 이야기일 수는 없습니다.

    그리고 여러분은 이에 대비해야 합니다.

    하지만 대비하는 것 이상으로 필요한 것은 부정적인 피드백을 수용하고 활용하는 것입니다.

    조만간 여러분은 불만, 기능 요청, 못마땅해하는 의견들의 세례를 받게 될 것입니다.

    그것들을 잘 기록해 두세요.

    긍정적이든 그렇지 않든, 접수되는 모든 의견에 귀를 기울이고 열린 자세를 갖는 것이 매우 중요합니다. 이러한 의견은 제품이나 서비스에 무엇이 부족한지 보여주며, 잠재 고객이나 시장의 요구를 충족할 수 있는 기회를 제공합니다.

    예를 들어, 사용자 인터페이스(UI)를 탐색하기 어렵다는 불만이 다수 접수된다면, 이는 사용자 인터페이스를 변경해야 한다는 뜻입니다.

    한 달 동안 제품의 성능 저하에 대한 불만을 세 번째로 받은 것이라면, 팀원들과 모여 해당 성능 문제를 해결하는 데 우선순위를 두는 것이 좋습니다.

    다시 말해, 부정적인 피드백은 좋은 것입니다. 이는 제품을 더욱 개선할 수 있는 기회이며, 고객의 불만으로부터 영감을 얻을 수 있는 기회입니다. 이는 여러분의 비즈니스와 제품이 더욱 성장하는 데 도움이 될 것이며, 그렇게 될수록 여러분과 고객 모두가 더 행복해질 것입니다.

    2. 사람 대 사람임을 느끼게 하세요

    저를 정말 짜증나게 하는 한 가지는 자동 생성된 답변처럼 느껴지는 딱딱한 어조의 이메일을 받는 것입니다.

    대기업들은 대개 실제 자동 생성 답변과 봇에 의존하지만, 이는 그들의 브랜드가 이미 시장에서 확고하게 자리 잡았고 신뢰를 얻고 있기 때문입니다.

    하지만 실제 사람이 고객 지원을 제공하는 저희와 같은 입장이라면, 상대방에게 여러분 역시 사람이라는 점을 알리는 것이 중요합니다. 고객이 편하게 다가올 수 있고, 도움을 요청할 수 있으며, 미리 짜인 양식을 복사해서 붙여넣은 듯한 기계적인 답변이 아닌 진정성 있는 답변을 받을 수 있다는 점을 알려야 합니다.

    일대일 이메일 지원에 대한 제 한 가지 팁은, 실생활에서 하지 않을 말은 고객에게도 절대 하지 않는 것입니다. 즉, “안녕하십니까!”나 “답변이 지연된 점 머리 숙여 사과드립니다”와 같은 지나치게 딱딱한 문구는 버릴 때가 되었습니다.

    개인적으로, 지나친 격식은 진심으로 신경 쓰기 때문에 지원을 제공하는 것이 아니라, 단순히 직업이고 해야만 해서 지원을 제공한다는 인상을 준다고 느낍니다.

    그리고 이는 절대 피해야 할 일입니다.

    따라서 회사 정책에 명시되어 있지 않은 한, 고객이 여러분과 대화할 수 있다고 느끼도록 노력해야 한다는 점을 기억하세요. 누군가 월급을 주기 때문에 로봇처럼 답변을 쏟아내는 것이 아니라, 진심으로 도움을 주기 위해 그곳에 있다는 것을 보여주어야 합니다.

    3. 고객을 마냥 기다리게 방치하지 마세요

    이것은 굳이 생각할 필요도 없는 당연한 원칙일 것입니다.

    고객의 문제에 대한 해결책이나 최소한의 임시방편도 제시하지 않은 채 고객을 절대로 방치해서는 안 됩니다.

    하지만 때로는 즉각적인 해결책이 없는 문제가 불가피하게 발생할 수 있습니다. 예를 들어, 한 고객이 조만간 출시될 계획이 전혀 없는 기능에 대해 문의했다고 가정해 봅시다.

    어떻게 대답하시겠습니까?

    “죄송하지만 해당 기능은 지원하지 않습니다. 안녕히 계세요.

    지원팀 드림”

    글쎄요… 그렇게 해서는 절대로 안 됩니다.

    작은 대안이라도 제공해야 한다면 그렇게 하세요. 고객이 분홍색 제품을 찾는데 현재 빨간색만 있다면, 솔직하게 이야기하되 그동안 고객이 어떻게 할 수 있는지 대안을 알려주세요.

    “더 다양한 색상이 준비되면 다시 연락드리겠습니다!”라고 말하고 실제로 약속을 이행하세요.

    4. 빠른 답변도 중요하지만 효율적인 답변도 중요합니다

    네, 고객에게 가능한 한 빨리 응답하는 것은 중요합니다. 하지만 단순히 답변을 보내기만 하는 것으로는 부족합니다.

    답변에는 핵심이 담겨 있어야 하며, 당면한 문제에 대한 해결책이나 대안을 고객에게 제공해야 합니다(3번 참조). 둘 중 어느 하나만으로는 제 역할을 다하지 못합니다.

    네, 고객은 급합니다. 하지만 대충 얼버무린 무성의한 답변을 제공하는 것은 아예 답변하지 않는 것만큼이나 나쁩니다(그리고 일단 “보내기” 버튼을 누르면 되돌릴 수 없기 때문에 오히려 더 나쁘게 느껴질 수도 있습니다).

    5. 지키지 못할 약속은 피하세요

    “걱정 마세요. 1시간 이내로 해결해 드리겠습니다!”

    만약 그보다 더 오래 걸린다면, 여러분과 회사의 평판은 모두 곤두박질치게 됩니다.

    처음에는 고객의 귀를 솔깃하게 만들 수 있지만, 약속을 지키지 못하면 훨씬 더 큰 타격을 주는 반발을 불러일으킬 수 있습니다.

    문제를 해결하는 데 24시간이 걸릴 것 같다는 점을 알고 있다면 솔직하게 털어놓으세요. 고객은 서둘러서 제대로 작동하지도 않는 제품보다는 시간이 좀 걸리더라도 제대로 작동하는 제품에 더 만족할 것입니다.

    결론

    그렇다면 훌륭한 고객 지원을 제공하는 비결은 무엇일까요? 고객 지원을 절대 과소평가하지 않는 것입니다.

    고객은 여러분의 원동력이며, 가장 중요한 존재입니다.

    고객을 그에 걸맞게 대우하세요.

    그리고 다음에 훌륭한 고객 지원에 투자하는 것을 망설이게 된다면, 닐 파텔(Neil Patel)의 다음 말을 기억하세요:

    “현명한 비즈니스 소유자는 경쟁업체로든 다른 이유로든 고객과의 관계를 하나 잃을 때마다 매년 평균 289달러의 손실이 발생한다는 사실을 알고 있습니다.

    그리고 신규 고객으로 그 손실을 메우면 된다고 생각한다면 다시 생각해 보세요. 기존 고객을 유지하는 것보다 신규 고객을 유치하는 데 6~7배나 더 많은 비용이 드는 것으로 나타났습니다.”

  • Page Builder Sandwich의 작동 방식

    How-Page-Builder-Sandwich-Works이 글은 Page Builder Sandwich의 작동 방식에 대해 간략히 설명하며, 당사의 페이지 빌더가 WordPress의 다양한 요소와 어떻게 통합되는지 관심 있는 분들을 위한 입문서로 마련되었습니다. Page Builder Sandwich의 개별적인 기능들에 대해 자세히 다루지는 않겠습니다. 해당 내용을 확인하고 싶으시다면 각 기능을 짧은 화면 녹화 영상으로 소개하는 동영상 페이지를 방문해 보세요.

    Page Builder Sandwich가 다른 페이지 빌더들과 어떻게 다른지 알고 싶으시다면, How Page Builder Sandwich Is Different from the Rest.

    Where is the page builder?

    어디에 있나요? 그리고 무엇을 편집할 수 있나요?

    다른 많은 페이지 빌더와 달리, Page Builder Sandwich는 웹사이트의 프런트엔드에서 작동합니다. 백엔드에 계실 경우, 페이지의 프런트엔드로 이동할 수 있도록 콘텐츠 편집기 버튼 옆에 “Frontend” 버튼을 제공해 드렸습니다.

    Page Builder Sandwich를 사용하면 글, 페이지 및 커스텀 포스트 타입 콘텐츠를 편집할 수 있습니다. 단, 메인 페이지에 모아놓은 블로그 글 목록이나 사이트의 기타 비단일 페이지 영역은 직접 편집할 수 없습니다. 백엔드에 콘텐츠 편집기가 있는 대상(예: “새 글 추가”, “새 페이지 추가”)이라면 Page Builder Sandwich를 사용할 수 있다고 생각하시면 됩니다. 개별 페이지와 블로그 글을 편집할 수 있으며, 예를 들어 레스토랑 메뉴나 포트폴리오 항목을 추가해 주는 플러그인이 있다면 해당 항목도 편집할 수 있습니다.

    프런트엔드에서는 관리 표시줄(어드민바)에 파란색 “Edit with Page Builder Sandwich” 버튼이 배치되어 있습니다. 이 버튼을 클릭하기만 하면 페이지 편집을 시작할 수 있습니다.

    직관적인 콘텐츠 편집

    Page Builder Sandwich를 사용하면 콘텐츠 편집을 최대한 쉽고 번거로움 없이 진행할 수 있습니다. 편집 작업은 매우 직관적이고 쉬워 클릭하고 입력하기만 하면 됩니다. 정말 간단합니다.

    The inspector

    인스펙터(Inspector)를 소개합니다

    많은 페이지 빌더에 팝업창이 너무 많다는 점을 발견했습니다. 개인적으로 저는 팝업창이 집중을 방해하고 기본적으로 “잠깐, 이 필드들을 다 채우기 전까지는 하던 작업을 멈추세요”라고 말하는 것 같아 선호하지 않습니다. 이는 매끄러운 편집 경험의 흐름을 끊어 놓습니다. 이 때문에 저희는 전반적인 팝업창 사용을 최소화하고, 대신 인스펙터를 제작했습니다.

    인스펙터는 필요한 모든 서식 및 레이아웃 도구를 담고 있는 사이드바 형태의 영역입니다. 화면의 왼쪽 또는 오른쪽에 고정할 수 있어 편집 중인 내용을 쉽게 확인할 수 있습니다.

    인스펙터를 통해 제목, 글꼴 크기, 굵게, 기울임꼴, 텍스트 색상 등 다양한 텍스트 속성을 조정할 수 있습니다. 이외에도 이미지를 추가하고 행이나 열로 구성된 콘텐츠를 생성할 수 있습니다. 또한 행을 전체 페이지 너비로 조정하거나, 행 및 열의 배경색, 수직 콘텐츠 정렬, 여백 및 배경 설정 등 더욱 고급 편집 기능도 수행할 수 있습니다. 매우 강력하여 작업의 대부분을 인스펙터로 처리하게 될 것입니다.

    WordPress 테마와의 통합

    Page Builder Sandwich는 본질적으로 자체 스타일이 거의 포함되어 있지 않습니다. 콘텐츠를 편집할 때 표시되는 스타일은 대부분 현재 사용 중인 테마를 기반으로 합니다.

    숏코드(Shortcode)와의 통합

    숏코드는 WordPress에서 중요한 부분을 차지하며, 사이트에서 여러 숏코드를 활용할 가능성이 높습니다. Page Builder Sandwich는 프런트엔드에서 숏코드가 렌더링된 상태로 나타나도록 이를 매우 잘 처리합니다. 숏코드는 계속해서 편집 가능한 상태로 유지되며, 가장 좋은 점은 숏코드를 편집한 후 변경 사항과 함께 다시 즉시 렌더링된다는 것입니다.

    편의를 위해 인스펙터를 사용하여 숏코드를 편집할 수 있습니다. 더 세부적으로 제어하고 싶다면 숏코드를 두 번 클릭하여 원본 코드 형태로 편집할 수도 있습니다. 뿐만 아니라, 웹사이트에서 사용 가능한 모든 숏코드가 인스펙터에 나열되어 콘텐츠에 쉽게 삽입할 수 있습니다.

    No bloat

    웹사이트 속도 저하(Bloat)는 없나요?

    느린 웹사이트를 좋아하는 사람이 있을까요? 저희도 싫어하며, 여러분도 당연히 싫어하실 것입니다. 저희는 Page Builder Sandwich가 웹사이트 성능에 미치는 영향을 거의 제로에 가깝게 유지하도록 개발했습니다. 로그아웃된 상태에서는 최소한의 행 및 열 CSS 스타일만 대기열에 추가되며(enqueue), 사용자가 사용한 숏코드에 필요한 JS 및 CSS 스크립트만 함께 로드됩니다.

    개발자를 위한 안내

    개발자로서 본인의 WordPress 플러그인에 숏코드가 포함되어 있다면, Page Builder Sandwich가 제공하는 Shortcode API를 활용하여 고객이 숏코드를 쉽게 생성하고 수정할 수 있는 필드를 간편하게 제공할 수 있습니다.

    기능을 더욱 확장하거나 Page Builder Sandwich의 일부와 통합하고 싶으신 경우 사용할 수 있는 유용한 액션 및 필터 훅도 다수 준비되어 있습니다.

  • PBS 사용자를 위한 단독 Cloudways 프로모션!

    저희는 웹상에서 가장 뛰어난 관리형 클라우드 호스팅 플랫폼 중 하나인 Cloudways와 협력하고 있습니다. 아직 들어보지 못하셨다면, 이들은 워드프레스 커뮤니티에서 상당한 신뢰를 얻고 있으며 가장 신뢰할 수 있는 호스팅 서비스 중 하나로 입증되고 있습니다. 다중 클라우드 인프라, 다중 데이터 센터, SSD 호스팅뿐만 아니라 원클릭 복제, 원클릭 백업 및 복원, 원클릭 도메인 매핑 등 매우 멋진 기능들도 갖추고 있습니다.

    기쁜 소식은 저희가 Cloudways와 제휴하여 Cloudways를 사용해보고 싶은 Page Builder Sandwich 애호가 여러분이나 기존 Cloudways 사용자를 위한 특별 프로모션을 준비했다는 것입니다! 다음 코드를 입력하기만 하면 됩니다:

    CWPBS15

    ..Cloudways 계정을 업그레이드할 때 $15 할인을 받으실 수 있습니다. 또한 이 혜택을 통해 Cloudways에서 1개월 동안 1GB DigitalOcean 서버가 제공됩니다. 이는 호스팅 제공업체를 이전하려는 분들이나 새로운 웹사이트 또는 웹 앱을 구축하려는 분들에게 훌륭한 혜택입니다.

    저희가 Cloudways와 협력하며 즐거웠던 만큼 여러분도 이 프로모션을 유용하게 활용하시길 바랍니다!