[작성자:] Neil Lock

  • 2018년에 피해야 할 4가지 웹사이트 디자인 실수

    If there’s one thing you need to remember when building a website, it’s to never take good design for granted.

    As we’ve mentioned in a previous article, a site visitor’s first impression on your website can make or break you in just a matter of seconds.

    In other words, if they don’t like what they see within that timeframe, chances are they’re going to close their browser windows and direct their attention elsewhere.

    Fortunately, there are a lot of ways to prevent this from happening; one of them is to familiarize yourself with good web design practices. And the good news is you don’t need to be a professional web designer in order to do so.

    Because while it’s true that not everyone has a good eye for design, preventing bad design becomes easier once you know what to avoid.

    그렇기 때문에 흔히 발생하는 이 4가지 웹 디자인 실수를 반드시 염두에 두세요. 이렇게 하면 마침내 웹사이트 제작을 시작할 때 걱정거리를 하나 덜 수 있습니다.

    실수 #1: 3개 이상의 글꼴 사용

    A rule of thumb when designing websites? Try not to have too much visual elements going on within your space. Having more than 3 fonts on your site design is a surefire way to break this one rule. It’ll also overwhelm your site visitors.

    웹사이트 글꼴을 최대 3개 이내로 유지하는 것은 전문가들이 준수하는 일반적인 디자인 관행입니다. 또한 사이트의 가독성과 일관성을 높여주며, 이는 사이트 트래픽 성공의 핵심 요소입니다.

    DON’T DO THIS:

    Don’t use more than 3 fonts and try to avoid “fancy fonts” as much as possible. These tend to make your site look unprofessional and outdated.

    DO THIS:

    Use only 2 fonts, or a maximum of 3 if you have to. Notice how the page below looks clean and sleek, all while keeping readability and consistency all throughout the design.

    Try comparing the differences between this example and the previous one. The example below with only two fonts is a website that your visitors will likely take seriously.  This previous one above with the overwhelming amount of fonts isn’t.

    Mistake #2: Failing to Use White Space

    White space is one of the most important aspects of web design. But what is it?

    Put simply, white space is literally the empty space between elements in a composition.

    In other words, it’s negative space. This pertains to anything on your website that isn’t filled with text, photos, or other design elements.

    Now, the problem arises when website owners want to fill all of the white space in, which is an absolute no-no.

    White space matters because it gives your site visitors and readers some breathing space when going through your site. Just how it was mentioned in the first design mistake to avoid, overwhelming your website with too much design elements is more than enough reason for your site visitors to leave and for your traffic to decrease significantly. It also makes for poorly executed design.

    DON’T DO THIS:

    In the example below, take a look at how the text is nearing the edges of the purple section’s margin. Notice as well how all elements leave almost zero room for white space.

    DO THIS INSTEAD:

    Give your site readers some room to breathe. If adding in long paragraphs is unavoidable, just remember to always take the rules of spacing into account—they’re pretty easy to remember anyway ?.  It will leave your page looking cool, crisp, and professional.

    Mistake #3: Designing Websites With Zero Flow in Your Site’s Content

    It’s important to pay attention as to how  information on your website is presented. Moreover, site content should generally follow a logical flow, taking the site viewer’s intuition into consideration.

    어떤 의미인지 아래의 두 가지 예를 확인해 보세요.

    DON’T DO THIS:

    Unless you’re a graphic designer by profession, it’s probably not a good idea to experiment with the standard flow of your website’s sections.

    Below, you can see that the site’s design lacks both visual and logical flow; everything is all over the place. You don’t want your audience having a hard time navigating through your site, either. This is another surefire way to do it.

    DO THIS INSTEAD:

    Notice how the sections of the website flow depending on what actions the visitor is most likely to take.

    디자인이 직관적이며 논리적인 흐름을 갖추고 있습니다. 먼저, 기관에 대해 소개하고 어떤 곳인지, 무슨 일을 하는지와 같은 기본적인 정보를 방문자에게 전달합니다. 둘째로, 신뢰할 수 있는 수치를 추가하여 공신력을 확보합니다. 마지막으로, 웹사이트는 방문자에게 연락처와 이벤트 목록을 제공하여 행동을 유도합니다.

    Mistake #4: Trying to Fit in Every Bit of Information Onto Your Website

    여백이 있어야 할 자리에 불필요한 텍스트를 벽처럼 빽빽하게 채워 넣으면 방문자를 쫓아낼 수 있습니다. 중요한 세부 정보만 남겨두는 것을 잊지 마세요.

    Studies find that readers only visit 20% of your webpage; everyone else outside that percentage will probably just scroll through your site.

    DON’T DO THIS.

    Don’t overwhelm your visitors with inconsistent, giant walls of text, especially if it means having to sacrifice your website design’s cohesiveness and structure.

    DO THIS INSTEAD:

    Keep your copy short and concise, and take out chunks of unecessary text if you can help it. Only keep vital information that your site visitors absolutely need to know.

    Conclusion

    Website design is important, and can be a huge deciding factor in whether or not you gain site traffic.

    이를 당연하게 여기지 않는 것을 기억하세요. 항상 리서치에 시간을 할애하고, 방향을 잡는 데 도움이 되는 디자인 관련 글을 찾아보세요. 어느샌가 사이트 트래픽이 상승 곡선을 그리는 것을 보게 될 것입니다. ? 행운을 빕니다!

    Design in less time!

    Check out how much faster Page Builder Sandwich let you design your web pages.

    Try Live Preview

    This week’s useful resource:

    CANVA has hundreds of resources that you can access on their website. Apart from useful and easy-to-follow design tips, they also have photo editing tools, graphs, and a wide range of useful resources you can use for your creative projects.

    다음 디자인 프로젝트를 위해 Canva에서 제공하는 이 멋진 컬러 가이드를 확인해 보세요.

    Canva Design Wiki

    창의력을 마음껏 발휘해 보세요.

    Canva 색상 가이드 확인하기

  • #PBSUpdate: 200% 성능 향상 및 새로운 요소

    Only a few weeks ago, we released PBS Version 4.1. This update included tweaks on the formatting bar and some text formatting updates, among others. For Version 2.0 though, while we made additional features, we decided to focus more on PBS’ overall performance.

    200% Performance Increase & A Little Help from CodeInWP

    이러한 변화를 촉발한 것은 CodeInWP의 페이지 빌더 기대치에 관한 기사였습니다. 그들이 가장 선호하는 항목들의 짧은 목록을 소개하며 특정 기준에 따라 각각을 검토했습니다. Page Builder Sandwich는 목록 자체에는 포함되지 못했지만, 기사에서 짧게 언급되기는 했습니다.

    With Page Builder Sandwich you won’t also lose your content and will be able to continue updating the page easily via a default WordPress editor.

    이를 읽고 저희 팀은 PBS를 더욱 개선해야겠다고 결심했습니다. 그리고 목록에 포함되지 않았던 만큼 구체적인 부족한 점이 무엇인지도 궁금했습니다. 얼마 후 저희는 CodeInWP에 연락하여 PBS에 대한 간단한 리뷰를 요청했고, 게스트 작성자인 Ann Taylor가 매우 건설적이고 도움이 되는 답변을 보내주었습니다.

    “…I played around with a free version a bit. It shows a lot of promise: lots of modules, pretty intuitive UI, great WYSIWYG experience, everything is dragged around easily. However, when I had around 10 modules on the page, it became hard to continue working with it because of low editing speed…”

    이 훌륭한 피드백은 저희가 PBS의 속도와 성능을 조사하게 만드는 계기가 되었습니다. 다양한 시나리오를 테스트한 결과 엄청난 속도 병목 현상을 발견했습니다. 성능 문제의 근본 원인은 플러그인이 윤곽선, 도구 모음 및 기타 시각적 편집 단서를 표시하기 위해 수행하는 다양한 계산 작업이었습니다. 아래는 Chrome에서 측정한 PBS 4.1 버전의 성능 그래프입니다.

    Here are the important points of the graph in a nutshell:

    • 높은 보라색 영역은 좋지 않습니다
    • 넓은 보라색 영역은 더 좋지 않습니다
    • 저희는 속도를 대폭 개선했으며, 이제 4.2 버전의 그래프는 다음과 같습니다.

    If you compare the tall and wide purple areas from the two graphs, that means that we have achieved a 200% performance increase!

    4 New Elements

    이 4가지 새로운 요소에서 가장 마음에 드는 점은 요소를 PBS 작업 영역으로 일일이 드래그할 필요 없이 전체 웹페이지 섹션을 빠르고 효율적으로 만들 수 있다는 것입니다. 또한 디자인 요구 사항에 맞게 이 세 가지 새로운 요소를 사용자 지정할 수 있도록 다양한 스타일 중에서 선택할 수 있는 기회를 제공합니다.

    Spacer Element

    요소의 여백을 쉽게 조정하여 필요한 공간을 확보할 수 있습니다. 스페이서 요소는 이에 대한 대안으로 사용할 수 있습니다. 이는 모바일 화면에서 특정 행이 너무 작게 축소되지 않도록 하려는 경우에 특히 유용합니다.

    Featurette Element

    피처렛 요소를 사용하면 페이지의 섹션을 더 빠르게 만들 수 있습니다. 이러한 섹션에는 히어로 헤더, 캐러셀 추천글 및 페이지의 기능을 향상시키는 데 사용할 수 있는 기타 항목이 포함될 수 있습니다.

    Since all of the Featurette Elements are pre-designed, all you’ll have to do is simply drag the “Featurette” button from the Elements Tab, and choose what you want to add on your workspace from there.

    Team Members Element

    팀 멤버 요소는 사이트 방문자에게 팀원을 소개하기에 완벽합니다. 일반적으로 이러한 섹션에는 팀원의 사진과 함께 하단에 간단한 설명이 포함됩니다.

    Gallery Element

    이 요소는 사진 갤러리를 만드는 데 사용됩니다. 이전에는 갤러리를 만들기 위해 개별 요소(버튼, 프레임 등)를 PBS 작업 공간으로 하나씩 드래그해야 했습니다. 하지만 이 새로운 요소가 이를 대신 처리해주므로 작업 과정이 훨씬 간편해집니다.

    A Huge Thank You

    4.2 버전은 지금까지의 업데이트 중 가장 중요한 업데이트 중 하나입니다. 결국 성능과 기능은 훌륭한 플러그인에 있어 매우 중요한 요소이기 때문입니다. 건설적인 피드백을 제공해주시고 저희의 여정에 응원을 보내주신 @Ann Taylor와 CodeInWP에 감사의 말씀을 전합니다. 그리고 모든 PBS 사용자 여러분께도 지속적인 성원에 깊은 감사를 드립니다.

    조만간 더 많은 업데이트(약속드렸던 Google Fonts 기능 등 포함)가 출시될 예정이니 많은 기대 부탁드립니다!

    그때까지, PBS 팀과 함께 즐겁게 사이트를 구축해 보세요!

  • 버전 3.0: 페이지 빌더의 작동 방식을 다시 생각하다

    version-3-0-rethinking-how-a-page-builder-should-workPage Builder Sandwich를 대중에게 공개한 지 10개월이 지났습니다. 현재 약 6,000개의 활성 설치 수를 기록하고 있으며, 이는 저희에게 매우 큰 성과입니다. 그 덕분에 좋고 나쁜 수많은 피드백도 받았습니다. 하지만 전반적인 의견은 시중의 다른 페이지 빌더에 비해 레이아웃을 구성하고 콘텐츠를 만드는 것이 얼마나 쉬운지 사람들이 만족해하고 있다는 점이었습니다.

    저희가 받은 피드백 중 상당수는 기능 요청이었고, 지난 몇 달 동안 그러한 기능 중 다수를 추가했습니다. 하지만 그렇게 작업을 계속하면서, 그 과정에서 서서히 사용자 인터페이스도 변경하기 시작했습니다. 그리고 그 결과, 사용자 경험도… 최악의 방향으로 변화하고 있었습니다. 결국 인터페이스가 더 이상 매끄럽게 작동하지 않고 다양한 기능들이 서로 제대로 어우러지지 못해, 인터페이스를 완전히 재검토해야 하는 지점에 이르렀습니다.

    사라진 인터페이스

    PBS의 이전 버전에서는 모든 것을 버튼 형태로 만들고자 했습니다. 왜일까요? 버튼은 사용하기 쉽기 때문입니다. 그냥… 클릭하기만 하면 되니까요. 이전 버전의 인스펙터(위 이미지의 사이드바)에서는 버튼을 클릭하면 값이 증가하고, Shift 키를 누른 채 클릭하면 값이 감소했습니다. 아주 쉽게 들립니다. 하지만 캐러셀, 탭, 지도 및 기타 새로운 요소와 기능들이 추가되면서, 이 모든 버튼들은 서로 다른 디자인을 가진 다양한 아이콘들의 뒤범벅이 되었고, 멋진 인터페이스라기보다는 상형문자처럼 보이기 시작했습니다. 기존의 숙련된 사용자들에게는 문제가 되지 않았지만, PBS를 처음 접하는 분들에게는 보기에 상당히 부담스러웠습니다.

    다음으로, 인스펙터에서 몇 가지 문제가 나타나기 시작했습니다. 원래 아이디어는 모든 것을 인스펙터 내부에서 간단하고 사용하기 쉽게 만드는 것이었습니다. 여기서 모든 것이란, 텍스트를 제목으로 바꾸는 것부터 배경색, 글꼴 색상 변경에 이르기까지 정말로 모든 것을 의미했습니다. 그러나 현재 상태의 인스펙터는 이제 마우스 휠을 계속 위아래로 스크롤해야 하는 수많은 옵션을 포함하게 되었습니다. 제가 처음에 사용자들을 위해 만들고자 했던 인스펙터와는 사뭇 달랐습니다.

    마지막으로, 저희는 최근 즐겨 사용하는 플러그인을 위한 숏코드 매핑. 이 기능은 숏코드 편집 경험을 더욱 쾌적하게 만들기 위해 텍스트 필드, 숫자 슬라이더, 체크박스 및 추가적인 새로운 옵션 유형을 만들어야 했습니다. 처음에는 좋은 아이디어였고, 실제로 숏코드를 다루는 작업을 더 쉽게 만들어 주었습니다. 하지만 다시 말하지만, 이 기능은 저희의 “버튼 전용” 인터페이스에서 벗어난 것이었습니다. 돌이켜보면 숏코드 속성을 변경하는 데 버튼만 사용하는 것은 실질적으로 불가능했습니다. 결국 최신 버전에서는 2가지 유형의 컨트롤이 남게 되었습니다: 버튼과 숏코드 필드입니다.

    저희 인터페이스가 더 이상 효과적이지 않다(또는 저희의 요구에 맞지 않는다)고 판단하게 된 몇 가지 이유가 더 있지만, 위의 사항들이 주요 원인이었습니다. 하지만 한 가지는 언제나 분명했습니다: 인터페이스를 업데이트해야 한다는 사실을 알고 있었다는 점입니다.

    페이지 빌더가 이상적으로 작동해야 하는 방식 정의하기

    당장 뛰어들어 모든 것을 바꾸기보다는, 백 걸음 물러서서 페이지 빌더의 경험 전체를 되돌아보았습니다. 인터페이스에 새로운 생명을 불어넣고 싶었습니다. 솔직히 말해 매년 인터페이스를 다시 만드는 일은 원치 않았습니다. 그것은 진 빠지는 일이며 워드프레스 커뮤니티에도 실질적인 도움이 되지 않습니다. 이번에는 천천히, 신중하게 진행하기로 했습니다. Page Builder Sandwich의 구석구석과 그것을 훌륭한 페이지 빌더로 만드는 요소를 연구했고, 마침내 전체 편집 경험을 몇 가지 핵심 개념으로 구체화했습니다.

    핵심 개념 #1: 편집할 콘텐츠에 직접 입력하기

    페이지 빌더를 설치하는 주된 이유 중 하나는 워드프레스의 백엔드 텍스트 편집기가 주는 제약에서 벗어나기 위함입니다. 백엔드 편집기가 나쁘다는 것은 아니지만, 웹페이지를 만들 때 방문자에게 페이지가 실제로 어떻게 보일지 즉각 보여주지 못하며, 1열 레이아웃을 벗어나 콘텐츠를 배치할 수도 없습니다. 텍스트와 일부 이미지만 볼 수 있을 뿐, 더 정교한 요소(예: 문의 양식)는 볼 수 없습니다. 숏코드를 추가할 수는 있지만, 렌더링된 형태로 표시되지는 않습니다*.

    * Shortcake UI와 같이 이 문제를 해결하기 위해 다른 개발자들이 만든 플러그인이 있긴 하지만, 그것은 논외입니다.

    바로 이 지점에서 프론트엔드 페이지 빌더가 필요합니다. 편집 경험을 백엔드에서 프론트엔드로 끌어내어, 방문자가 실제로 보게 될 모습 그대로 사이트를 편집할 수 있게. 피핀(Pippin)의 표현을 빌리자면: 보는 대로 얻는 것(WYSIWYG)입니다.

    프론트엔드 편집기의 또 다른 장점은 텍스트를 직접 편집할 수 있다는 점입니다. 제목과 본문을 직접 입력하면 웹사이트 제작 시 일반적인 워드프로세서를 사용하는 듯한 편리함을 제공합니다. 버튼과 탭 레이블 역시 클릭하고 타이핑하기만 하면 쉽게 변경할 수 있어야 합니다.

    이 부분은 다른 대부분의 페이지 빌더가 제대로 제공하지 못하는 영역입니다. 대부분은 모든 것을 편집하기 위해 텍스트 필드 안에 입력하도록 강제합니다. 다시 말씀드리지만, 진정한 프론트엔드 페이지 빌더에서는 그래서는 안 됩니다. 텍스트를 직접 입력하고 편집하는 것은 버전 2 이후 Page Builder Sandwich의 강점이었으며, 버전 3에서도 이를 온전히 유지하도록 했습니다.

    핵심 개념 #2: 빠른 조정을 위한 마우스 활용

    마우스는 강력한 도구이지만 페이지 빌더에서 종종 간과되곤 합니다. 대개의 경우 페이지 빌더는 요소를 끌어다 다른 위치에 놓거나(드래그 앤 드롭), 버튼 또는 입력 필드를 클릭하는 용도로만 마우스를 사용합니다. 이것도 나쁘진 않지만, 페이지 제작 관점에서 마우스로 할 수 있는 일은 훨씬 더 많습니다.

    우선, 페이지 편집 도구로 마우스를 사용할 때 멋진 시각적 피드백을 얻을 수 있습니다. 특히 마진, 패딩, 크기와 같은 시각적 속성을 조정할 때 더욱 그렇습니다. 이제 요소를 다듬는 작업이 자연스러운 경험이 됩니다.

    PBS 버전 3에서는 마우스를 사용하여 수많은 항목을 조정할 수 있습니다. 개별 요소 사이의 여백/간격, 열 내부의 패딩뿐만 아니라 이미지, 아이콘, 지도의 크기까지 조절할 수 있습니다. 또한 숫자 값을 변경할 수 있던 버튼들을 슬라이더로 교체했습니다.

    핵심 개념 #3: 텍스트 스타일 지정이 쉬워야 함

    모니터에서 한 걸음 물러서서 바라보면 웹페이지에 추가하는 내용의 대부분이 텍스트 콘텐츠라는 것을 알 수 있습니다. 물론 이를 보완하기 위한 이미지와 아이콘도 있으며, 최근에는 사이트에 더 큰 이미지를 추가하는 경향이 있습니다. 하지만 중요한 콘텐츠의 대다수는 제목, 글머리 기호 목록, 본문, 인용문 등의 텍스트입니다. 그와 더불어 중요한 것은 디자인에 맞게 텍스트의 스타일을 지정하는 방법입니다. 크기와 색상을 변경하거나 굵게 또는 기울임꼴로 만들기도 합니다. 이는 독자들에게 콘텐츠가 더 읽기 쉽고, 적절하며, 매력적으로 다가가도록 하기 위함입니다.

    텍스트 스타일을 자주 지정하기 때문에 스타일을 변경할 수 있는 버튼은 매우 쉽게 접근할 수 있어야 합니다. 먼저 열어야 하는 팝업 상자 안에 숨겨져 있어서는 안 됩니다. 대부분의 페이지 빌더가 이러한 고질적인 문제를 안고 있습니다. 사용자 인터페이스를 ‘깔끔하다’고 내세우기 위해 가장 많이 사용되는 옵션조차 눈에 띄지 않게 가려버리는 것입니다.

    이를 해결하기 위해 가장 일반적으로 사용되는 워드프로세서들을 살펴보았습니다. 화면 상단 근처에 텍스트 서식을 지정하는 수많은 버튼이 일렬로 배치되어 있는 것을 발견하고, 버전 3에 동일한 레이아웃을 적용했습니다. 이제 화면 상단에 모든 텍스트 스타일 지정 버튼이 항상 표시되는 행이 마련되었습니다. 이를 통해 텍스트 편집 시 마치 몸에 밴 습관처럼 매우 빠르고 자연스럽게 스타일을 지정할 수 있습니다.

    핵심 개념 #4: 고급 스타일링 옵션은 유연하면서도 이해하기 쉬워야 함

    페이지 빌더의 본질은 사람들이 멋진 디자인을 쉽게 만들 수 있도록 해주는 것입니다. 즉, 가파른 학습 곡선으로 고통받지 않으면서도 다양하고 풍부한 설정과 옵션을 제공해야 한다는 뜻입니다. 여백과 패딩을 조절하고 텍스트 스타일을 다듬는 것도 훌륭하지만, 그것만으로는 한계가 있습니다. 작업을 완성하려면 배경 이미지, 패턴, 테두리, 고정 배경 등 훨씬 더 정교한 옵션이 필요합니다. 이러한 다양한 설정을 모두 쌓아두면 다소 버겁게 느껴질 수 있으므로, 버전 3에서는 일부를 단순화하고 카테고리별로 구성하여 훨씬 친숙하게 만들었습니다.

    핵심 개념 #5: 숏코드 지원

    마지막으로, 저희의 페이지 빌더가 워드프레스 위에서 작동한다는 점을 잊어서는 안 됩니다. 우리는 플랫폼과 그 기능을 온전히 수용해야 하며, 이를 제한하거나 벗어나서는 안 됩니다. 워드프레스가 제공하는 거대한 기능 중 하나는 바로 숏코드입니다. 콘텐츠 전체가 숏코드로 구성되어야 한다는 뜻은 아니며(그렇게 되면 엉망이 될 것입니다), 숏코드와 완벽하게 호환되어야 한다는 의미입니다. 수많은 플러그인과 테마가 숏코드를 사용하고 있으며, 이를 모두 무시한다면 엄청난 손실일 것입니다. 실제로 숏코드는 사용자가 페이지를 만들 때 극대화된 유연성을 제공합니다.

    저희는 몇 주 전에 숏코드 매핑 시스템을 도입했으며, 덕분에 수백 개의 플러그인에서 제공하는 수백 개의 숏코드를 매핑했습니다. 워드프레스 플러그인 디렉터리에서 가장 인기 있는 플러그인을 우선적으로 처리했으므로 여러분의 사이트에서도 쉽게 접할 수 있을 것입니다. 이 기능은 버전 3에서 더욱 강화되었으며, 앞으로도 지속적으로 개선해 나갈 예정입니다.

    결론

    저희는 위의 모든 핵심 속성들을 취하여 Page Builder Sandwich 버전 3에 녹여냈습니다. 이것은 지금까지 워드프레스용으로 제작한 페이지 빌더 중 최고입니다. 더욱 직관적이고 자연스럽게 사용할 수 있으며, 성능은 더 빨라졌고, 사용하기 쉬우며, 그 어느 때보다 친숙합니다.

    필수적인 페이지 빌더 기능에 대해 의견이 있으시다면 아래에 댓글로 알려주세요.

  • Page Builder Sandwich의 사전 디자인된 섹션을 직접 사용자 지정하는 방법

    We’ve been getting quite a few inquiries the past week about Pre-Design Sections (and by extension, the PBS Templates), what they are, and how they can be accessed.

    So in this article, we’ll be teaching you how to not only access them, but also how to maximize these features of Page Builder Sandwich: By customizing them and making them your own.

    Accessing the Pre-Designed Sections

    If you aren’t familiar yet, all you have to do to access the Pre-Designed sections is to hover your mouse onto the left side of your screen, and access the Elements Inspector. This is the sidebar that lets you drag and drop elements directly onto your content area.

    Say hello to the Elements Inspector!

    Once it’s accessed, simply scroll down to the bottom and select Pre-Designed Sections. A library of the sections will pop up. Select one from the collection, drag and drop, and it’ll show up on your content area, like so:

    From here, you can move the elements within the section around, or move the entire thing and adjust its position. And there you have it! You’ve selected a Pre-Designed Section from Page Builder Sandwich.

    Now it’s time to add in your own twist: By customizing and tweaking with the elements’ settings within the selected section.

    Customizing the Pre-Designed Sections

    Each element’s setting within any one Pre-Designed section can be edited and customized according to your website’s needs and your personal taste.

    This means everything included in your selected Pre-Designed section – like text, colors, images, buttons, everything – can be edited and tinkered with by you.

    예를 들어, 아래의 기본 사전 디자인된 섹션에 있는 기본 청록색 틴트와 밀밭 이미지가 마음에 들지 않는다면…

    You can adjust it. For instance, if I wanted a different background tint on the left:

    Or if you wanted to replace the image of the wheat field on the right:

    Or even change the button style, margin, padding, and font:

    …You can.

    비교를 위해:

    Default PBS Pre-Designed Section

    The same Pre-Designed Section, completely tweaked and customized. Notice the different font, color scheme, button style, photo, and margin width. You can actually take this further, and let your imagination run wild.

    Here are a few more examples on how you can spice up our Pre-Designed Sections

    Default Pre-Designed Section from Sandwich

    The same Pre-Designed Section, customized

    You can do it with our Full-Page Templates, too:

    Default Template from Sandwich

    The same Template, customized

    Conclusion

    Page Builder Sandwich의 사전 디자인된 섹션에는 생각하시는 것보다 더 많은 기능이 있습니다.

    Tweak and customize them to make them completely your own, or even use them as a starting point for when you don’t want to design your page from the ground up.

    Page Builder Sandwich는 디자인 시간을 단축할 수 있도록 돕기 위해 존재한다는 점을 기억하세요. 사전 디자인된 섹션과 전체 페이지 템플릿을 최대한 활용하면 바로 그렇게 할 수 있습니다.

    Design in less time!

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

    Try Live Preview
  • 사이트의 리드 생성을 극대화하는 10가지 방법 및 PBS의 지원 방법

    Page Builder Sandwich helps you, well… build websites.

    Keeping your audience reeled into your page (and successfully generating leads) is a different story altogether, though.

    Don’t get us wrong. Lots of sites can achieve this without a worry, but that’s usually because they spend a significant amount of time and research doing just that.

    In contrast, some sites admittedly have a little trouble pulling it off, and more often than not, some of them don’t know where to begin. But don’t worry – Page Builder Sandwich will try to lend you a hand with that very same thing.

    Why is it Important to Generate Leads?

    One crucial thing to remember is that generating leads takes more than just buying a domain and setting a website up.

    Now, before we get too into it, take note that Page Builder Sandwich isn’t a marketing website.

    하지만 어쨌든 리드 생성의 이면에는 과학적인 원리가 있다는 점을 아는 것이 중요합니다. 비록 저희 자신이 디지털 마케터는 아니지만, 성공적인 리드 전환은 디자인과 콘텐츠의 적절한 실행과도 관련이 있다는 점을 짚고 넘어가는 것이 필수적입니다. 바로 이 부분에서 저희가 도움을 드릴 수 있습니다.

    “하지만 그 모든 마케팅 측면에서 여러분이 어떻게 도움을 줄 수 있나요?”

    Great question! A few weeks ago we began corresponding with Straight North, a blog that specializes in digital marketing and lead conversion. They’ve given us some really tips which we hope you guys find helpful in your site-building journey.

    Now, remember that there could be lots of factors as to why your website isn’t generating the amount of leads you’d like. The first step is to identify what these factors are, and hopefully, this list can help you out with doing just that.

    TIP #1: Create Content that Stimulates Action

    According to Straight North, 84% of website conversions occur on the first visit, and only 11% convert in the second.

    다시 말해, 첫인상이 중요합니다.

    오디션을 망치면 배우가 주연을 맡을 수 없듯이, 누군가가 귀하의 웹사이트를 처음 방문했을 때의 경험이 성공과 실패를 좌우할 수 있습니다.

    That’s why it’s you and your team’s job to try and convince people to stay glued to your page.

    Straight North suggests that posting copy and content (both text and images) is a great way to catch your visitors’ attention. Remember to always allot sufficient time to research on what makes good copy and good content, and never underestimate either.

    성공적인 리드를 창출하는 여정에 도움이 될 만한 몇 가지 웹사이트를 소개합니다:

    How PBS Can Help:

    Wow your site visitors by using interactive PBS elements like the Carousel, or use Parallax Scrolling, and Video Backgrounds to catch their attention. Remember to execute their placement in a balanced way though, as to not overwhelm your audience.

    TIP #2: Intuitive Navigation

    In the realm of web development and site-building, intuitiveness in the user interface (or UI) is key.

    This means that when your visitors or users find their way around your site by intuition (i.e. easy site-navigation and straightforward instructions), they’re more likely to stay glued on your site.

    만약 웹사이트를 둘러보는 과정이 답답한 경험이 된다면, 방문자는 귀하가 전하고자 하는 말이나 제공하는 혜택을 들을 만큼 오래 머무르지 않을 가능성이 큽니다.

    Straight North adds that getting too “clever and creative” with navigation labels is a bad idea, and suggest that you use terms like “Contact Us” for call-to-action buttons, rather than using vague labels like “Interact!” or “Dialog.” Remember that bombarding your site with too much jargon can cause frustration to your audience as well.

    So as long as navigating through your website comes to the user as second nature, then you have one less thing to worry about when trying to convert leads.

    How PBS Can Help:

    Page Builder Sandwich’s UI is highly intuitive, and is akin to using a Word processor (like Google Docs and Microsoft Word). Check out our demo to get some inspiration on how you can apply intuitive changes to your site, too!

    OTHER PAGE BUILDERS …have too much stuff going on.

    PAGE BUILDER SANDWICH …gets straight to the point.

    TIP #3: Use Relevant, Custom Imagery

    Your images and how they’re presented also matter, and they matter a lot.

    While it may seem trivial to some, uploading boring stock images, stretched out/pixelzed photos, or badly-presented typography is a huge factor that dictates whether your visitors stay on your site, or move to a better, more credible-looking alternative.

    How PBS Can Help:

    Because it’s WordPress-run, PBS lets you post high-quality photos in your website. As long as you have the right image dimensions, you shouldn’t have a problem with posting photos.

    Additional lifehack: You can also check out Pexels.com and Unsplash.com to get awesome, high-quality stock photos!

    TIP #4: Persuasive Credibility Elements

    Skepticism is a huge conversion killer.

    That’s why more often than not, it’s always a good idea to add in elements that back up your credibility as a website (or business), like testimonials from credible sources, and logos of reputable companies or groups that you’ve worked with. So use customer testimonials, show logos of well-known customers, and include third-party mentions in your content.

    How PBS Can Help:

    Use PBS features to vouch for you. Display your customers’ testimonials in a Carousel, or use the Featurette element to showcase third-party mentions, or make use of the column element to effectively display logos of your well-known customers (like in the graphic above).

    TIP #5: Get Personal!

    Straight North says that using a lighter, casual tone makes all the difference when writing content (such as articles and bio’s) on your site. This lets your users know that you’re human too, and not just some bot trying to get a run for their money (which we hope you aren’t).

    How PBS Can Help:

    While this part is entirely up to you and your team, it wouldn’t hurt to use elements such as the Featurette, Gallery, and Image Box to liven up your bio’s as well. Adding in other PBS elements like Social Media Icons can help put a personal touch to your pages, too.

    PBS’ Industry Template makes full use of the Image Box Elements for its About Us and Feature Sections.

    TIP #6: Irresistible Calls-to-Action

    Calls-to-Action (CTA) are a crucial part of generating leads.

    You will FAIL to capture first-visit conversions unless you ASK. – Straight North

    Just asking isn’t enough, though. According to Straight North, your calls-to-action should be executed both “skillfully and persuasively”.

    The trick is to have effective Calls-to-Actions plus a good combination of smart consistent placement, offers that give off substance, time-sensitive offers (giving them offers for a set, limited time will give them a sense of urgency), and most importantly, guaranteed offers.

    You want your site to trust you. “Take away all arguments for delay, and conversions will increase”, Straight North says.

    How PBS Can Help:

    PBS’ Call-to-Action Button – as well as other elements such as the Countdown and Page Heading element – can help ease your burden regarding this task.

    Executing them correctly is up to you and your team though, so make sure to give time to research about CTA placements and other marketing tips.

    CTA 역량을 한 단계 끌어올리는 데 도움이 될 몇 가지 리소스를 소개합니다:

    TIP #7: User-Friendly Forms

    방문자가 웹사이트의 양식을 통해 자신의 정보를 제출하는 것이야말로 궁극적으로 성공적인 리드 전환을 측정하는 기준이 됩니다.

    This is why placing user-friendly contact forms on your site is of the utmost importance. They’re the ultimate “make-or-break stage of a great conversion opportunity”, says Straight North.

    A couple of PBS’ third-party plugins available for shortcode mapping

    So don’t intimidate your site visitors by overwhelming them with too many question forms, or have them exhaust too much energy, like having them type long sentences instead of choosing their answers from a drop-down list.

    Letting them know that you value their privacy is also a must. Be sure to place clean, good-looking forms on your site so as to boost credibility.

    How PBS Can Help:

    With PBS’ Shortcode Mapper feature, you can place awesome, reputable contact forms like Advanced Custom Fields (ACF) and Contact Form 7 on your site.

    TIP #8: Prominently Displayed Phone Numbers (or Contact Details)

    Contact number and social media buttons displayed prominently in PBS’ Restaurant Template

    전화 통화를 통해 지원을 제공하는 비즈니스 유형이라면 전화번호를 일관되고 눈에 띄게 표시하는 것이 필수입니다. Straight North는 수신자 부담 번호에 투자하는 것 역시 전환율을 높이는 데 큰 도움이 될 수 있다고 덧붙입니다.

    저희와 같은 기술 기업이라면 웹사이트에 이메일 주소(또는 방문자가 연락할 수 있는 다른 방법)를 표시하는 것도 좋은 방법입니다.

    How PBS Can Help:

    PBS’ Full Page Niche-Based Templates have fields that let you feature phone numbers and other contact information more prominently, so that your visitors can reach you right away.

    TIP #9: Continuous Testing

    Straight North attests to the importance of site maintenance and testing: “No matter how good your website is in converting leads, it can always be better.”

    이는 리드 전환을 시도하는 사이트뿐만 아니라 모든 웹사이트에 해당되는 사실입니다. 사이트를 최상의 상태로 유지하고 고객을 항상 만족시키는 것은 비즈니스가 오래도록 성장하는 데 큰 도움이 됩니다.

    How PBS Can Help:

    This one is up to you, but if you’d like a tip: the PBS Team continuously tests the site and page builder for any bugs, and always work to make sure you guys are satisfied. We don’t exactly have a feature for making sure you do regular tests on your site, so this one’s entirely up to you and your team. Do it, and do it well!

    TIP #10: Mobile-Friendly Design

    Almost everyone has a cellphone or tablet; but while only 23 percent of lead conversion rates come from mobile devices, it absolutely will not do to ignore any sort of potential conversions, no matter the percentage (leads are still leads, after all).

    “Users converting from desktop view may have seen the site initially on a mobile device,” Straight North says. “Mobile conversions are (also) likely to grow as mobile Internet access continues to soar at the expense of desktops.”

    You can preview your site on mobile view directly on desktop

    How PBS Can Help:

    Page Builder Sandwich is Mobile Responsive. You can view PBS-built sites on mobile, as well as check previews of your mobile site directly through desktop while editing. This way, you won’t have to keep switching to your phone in order to check if your site looks good on mobile.

    Everything Matters in Site-Building

    At the root of it all, it’s very, very important to understand that everything on your website – down to the smallest of details – has an impact on your audience.

    The quality of your copy, images, your layout – all of it matters, and it matters a lot.

    그리고 리드를 생성하려 할 때 사람들이 저지르는 가장 큰 실수 중 하나가 바로 이것입니다. 디자인, 텍스트 및 기타 콘텐츠와 같이 웹사이트를 구성하는 작은 요소들을 당연하게 여기는 것입니다.

    Hopefully your website garners the success it very well deserves; it’s been built with PBS, after all. ?

    귀하와 귀하의 모든 노력에 행운이 함께하기를 바라며, 늘 Page Builder Sandwich를 이용해 주셔서 감사합니다!

    즐거운 사이트 제작이 되시길 바랍니다!

  • 즐거운 독립기념일 되세요! 7월 6일까지 모든 라이선스 20% 할인!

    2017년 7월 4일부터 7월 6일까지 모든 Page Builder Sandwich 라이선스를 20% 할인받으세요! 프로모션 코드 4JULY2017을 입력하여 오늘 바로 할인을 받으세요!

  • PBS 업데이트: 버전 4.1 및 사용성

    지난 1월 버전 4.0 출시 이후에도 저희는 PBS 개발을 지속하며 버그 수정과 개선 사항을 모두 추가해 왔습니다. 이를 여러분과 공유하게 되어 기쁩니다. 버전 4.1 업데이트를 위해 준비한 내용을 소개합니다.

    서식 도구 모음 개선 사항

    최신 4.1 업데이트는 텍스트 서식 도구 모음을 중심으로 이루어졌습니다. 수많은 버그 문제를 해결했을 뿐만 아니라, 도구 모음의 몇 가지 요소를 개선하여 PBS를 더욱 매끄럽고 효율적으로 사용할 수 있도록 했습니다.

    색상 선택기 업데이트

    PBS 이전 버전에서는 색상 선택기에 몇 가지 문제가 있어 편집 과정, 특히 텍스트 및 텍스트 색상 편집 시 다소 불편함이 있었습니다. v4.1에서는 이 문제를 해결하고 번거로움 없이 텍스트를 편집할 수 있도록 새롭게 조정했습니다.

    • 더 쉬운 색상 선택을 위한 더 많은 색상 견본
    • 색상 선택기에서 이제 투명도 표시
    • 텍스트 색상 편집 관련 버그 수정

    텍스트 서식 업데이트

    이전에는 값을 늘리려면 버튼을 반복해서 클릭하고, 줄이려면 CTRL/CMD를 누른 상태에서 클릭해야 하는 버튼들이 있었습니다. 처음에는 이것이 직관적이라고 생각했지만, 사용자분들은 명확하지 않다는 의견을 주셨습니다. 이번 업데이트에서는 이러한 불편함을 수정했습니다.

    • 이제 줄 간격에 더 쉽게 접근 가능: 슬라이더를 드래그하여 원하는 크기로 조정하거나, 주어진 공간에 원하는 크기를 직접 입력
    • 더 쉬운 사용을 위해 글꼴 크기 버튼을 축소 및 확대의 두 개 버튼으로 분리
    • 글꼴 크기 축소/확대 기능도 더 쉽게 접근 가능하며, 더 수월한 편집을 위해 이제 px 단위로 표시. 이전에는 아무런 의미가 없던 “x” 단위로 표시되었음
    • 표시되는 버튼 수를 줄이기 위해 왼쪽/가운데/오른쪽/양쪽 정렬 버튼을 하나로 그룹화
    • “서식 지우기” 버튼이 이전에는 지우지 못했던 다른 스타일(예: 줄 간격)도 이제 초기화

    가로선(구분선) 개선 사항

    이전에는 가로선에 몇 가지 문제가 있었습니다. 일부 테마에서는 가로선이 너무 작아서 클릭하기가 어려웠습니다. 이를 해결하기 위해 서식 도구 모음에서 가로선을 제거하고 별도의 독립된 요소로 전환했습니다. 또한 이제 색상 선택기를 통해 가로선의 색상도 변경할 수 있습니다.

    향후 업데이트: PBS의 다음 계획은?

    말씀드렸듯이, 저희는 여전히 새로운 기능(과 추가 업데이트)을 개발 중에 있습니다. 앞으로 준비되어 있는 것들을 살짝 엿보자면 다음과 같습니다:

    • Google Fonts(드디어!)
    • 텍스트 서식 도구 모음이 단순한 텍스트 서식 지정 공간 그 이상이 되는 아이디어를 구상하고 있습니다. 현재 상황(컨텍스트)에 따라 버튼이 달라진다면 어떨까요? 예를 들어, 열 내부에서 텍스트를 편집할 때 세로 정렬 버튼이 나타난다면 정말 유용할 것입니다.

    향후 PBS 업데이트에서 어떤 기능을 보고 싶으신가요?

    저희는 언제나 PBS를 개선할 준비가 되어 있으니, 제안할 내용이 있다면 언제든 알려주세요! 늘어나는 개발 목록에 추가하고 싶은 기능 요청이 있으신가요? 현재 버전에서 조정이 필요하다고 생각되는 부분이 더 있으신가요? 아래 댓글로 알려주세요!

    즐거운 사이트 제작 되세요!

  • Page Builder Sandwich의 첫 번째 생일을 화려하게 축하합니다!

    pbs-v4-ad-3 네, 맞습니다: Page Builder Sandwich가 2017년 1월 14일에 첫 번째 생일을 맞이합니다. 현재 진행 중인 홀리데이 세일(프로모션 코드 없이 한정 기간 동안 30% 할인)과 더불어, PBS는 여러분을 위한 몇 가지 깜짝 선물을 준비했으며 팀원 모두가 이를 여러분과 하루빨리 공유하고 싶어 합니다.

    지난 한 해 동안 저희는 멋진 친구들, 큰 도움이 된 리뷰들, 그리고 PBS Slack 커뮤니티에서 새롭게 만난 친구들의 성원 덕분에 많은 성장을 이루었습니다. 이 이정표에 도달할 수 있도록 도와주신 PBS 사용자 여러분도 절대 잊을 수 없습니다. 그래서 이를 축하하고자, 여러분께 더 나은 경험을 선사하는 방법으로 PBS 버전 4.0을 출시하는 것보다 더 좋은 것이 어디 있겠느냐는 결론을 내렸습니다. 축포를 터뜨려 주세요!

    혹시 놓치셨을 분들을 위해 말씀드리자면, 현재 버전인 버전 3.0은 대대적인 변화와 개선을 거쳤습니다. 더욱 깔끔하고 부드러우며 사용자 친화적인 인터페이스와 한층 더 향상된 반응형 기능을 포함하고 있죠. 하지만 버전 4.0에서는 훨씬 더 훌륭한 기능들을 선보일 예정입니다! 다가오는 1월 출시는 훨씬 더 재미있고, 축제 같으며, 실용적인 기능들로 가득할 테니 기대해 주시기 바랍니다.

    전체 페이지 템플릿 기능

    주요 기능 목록의 첫 번째는 바로 완전히 새로워진 전체 페이지 템플릿입니다. PBS는 온갖 다양한 페이지를 구축하는 데 널리 사용되지만, 저희는 사용자들이 각기 다른 틈새시장(따라서 다양한 유형의 웹사이트)에서 사이트를 운영한다는 점을 깊이 고려했습니다. 비즈니스든 개인 프로젝트든 사용자마다 필요한 니즈가 다르기 마련입니다. 그렇기 때문에 이번에 출시되는 전체 페이지 템플릿 기능을 통해 이 점을 해결하고자 했습니다.

    pbs-v4-ag-2 그렇다면 이 전체 페이지 템플릿은 어떻게 작동할까요? 간단합니다. 버전 4.0에서는 다양하고 멋진 템플릿을 대거 출시할 예정입니다. 이 템플릿들은 여러 카테고리로 나뉘며, 각 카테고리는 특정 틈새시장에 맞춰 디자인되었습니다. 기업 페이지, 포트폴리오, 전자상거래(쇼핑몰) 사이트, 또는 일반적인 개인 블로그 등 필요한 모든 사이트에 완벽하게 들어맞도록 요소, 레이아웃 및 기능이 포함됩니다.

    예를 들어 레스토랑을 운영하면서 그러한 비즈니스에 특화된 페이지나 웹사이트가 필요한 경우, 간단히 레스토랑 템플릿을 선택하면 됩니다. 그리고 PBS는 유연한 커스터마이징을 지원하므로, 원하는 대로 마음껏 스타일을 지정할 수 있습니다. 또한 선택한 템플릿(이 경우 레스토랑)은 레스토랑 테마의 비즈니스 사이트에 특화된 기능과 함께 제공되므로, 해당 사이트 유형의 요구 사항을 충족하는 PBS 요소(예: 메뉴 전용 섹션, 배달 기능, 소셜 미디어 버튼 등)도 함께 제공됩니다. 이제 여러분의 특정 분야에 맞는 사이트를 상상해 보세요. 회사 오피스를 운영하든, 개인 사업을 하든, 단순히 포트폴리오를 만들든 걱정하지 마세요. 버전 4.0에서는 이러한 분야를 위한 템플릿도 함께 출시됩니다. 다음 사이트 구축 프로젝트에 분명 큰 도움이 될 것입니다!

    더 많은 요소, 더 많은 옵션

    새로운 전체 페이지 템플릿과 함께 다른 여러 가지 기능도 준비되어 있습니다! 늘 말씀드리듯, PBS는 멋지고 놀라운 것을 만드는 과정이 남들이 생각하는 것만큼 어려울 필요가 없다는 믿음에서 탄생했습니다. 이를 염두에 두시고 곧 제공될 다른 기능들도 살펴보시기 바랍니다. PBS를 통해 얼마나 깔끔하고 멋진 페이지와 사이트를 만들 수 있는지 직접 확인하실 수 있습니다!

    패럴랙스 배경

    패럴랙스 스크롤은 브라우저에 독특한 3D 배경 효과를 만들어내는 데 사용되는 기술입니다. 웹사이트의 시선을 사로잡는 훌륭한 장치가 되며, 제대로 구현하면 방문자 수를 확실히 늘릴 수 있습니다. 아직 확신이 서지 않으시나요? 패럴랙스 효과를 완벽하게 구현한 FireWatch의 멋진 웹사이트를 확인해 보세요.

    동영상 배경

    동영상 배경 역시 웹사이트, 특히 홈페이지, 랜딩 페이지, 히어로 헤더 등에서 널리 쓰이는 인기 효과입니다. 동영상 배경 또한 매우 매력적이며, 큰 인기를 끄는 데는 다 이유가 있습니다! 최신 PBS 업데이트를 통해 여러분도 동영상 배경을 직접 사용해 보실 수 있습니다. 동영상 배경을 활용해 방문자의 시선을 사로잡고 사이트 방문 수를 늘려보세요!

    날짜 카운트다운

    버전 4.0에서는 완전히 새로워진 날짜 카운트다운 기능도 출시됩니다. 카운트다운할 정확한 날짜와 시간을 설정하는 기본 기능은 물론, 여러분이 분명 좋아하실 유연한 맞춤 설정 옵션까지 모두 포함되어 있습니다.

    소셜 아이콘

    방문자가 소셜 미디어에 여러분의 게시물을 널리 알리도록 유도하고 싶으신가요? 걱정하지 마세요. PBS가 도와드립니다! 새로운 소셜 아이콘을 통해 독자들은 버튼 클릭 한 번으로 웹사이트와 콘텐츠를 간편하게 공유할 수 있습니다.

    하지만 준비된 것은 이게 전부가 아닙니다! 다음 기능들도 포함되어 있습니다:

    • 콘텐츠에 게시물을 추가하는 기능
    • 진행률 표시줄 (프로그레스 바)
    • 카운트업 숫자
    • WooCommerce, Advanced Custom Fields (ACF), Contact Form 7용 요소
    • 고객 후기 (테스티모니얼)
    • 가격표 (프라이싱 테이블)
    • 행동 유도 버튼 (CTA)
    • 이미지 박스
    • 아이콘 박스
    • 무료 이미지 검색 및 다운로드
    • 사용자 정의 CSS 추가 기능
    • …그리고 그 외 다수!

    반응형 기능

    마지막으로 이러한 모든 멋진 새 기능 외에도, PBS는 더욱 향상된 반응형 환경을 자랑합니다.

    pbs-v4-ag-1 과거에는 모바일에서 PBS 페이지를 보고 편집하는 것이 그리 녹록지 않았습니다. 글꼴 크기가 맞지 않거나 이미지 비율이 깨지는 등 모바일 UI 개선이 필요하다는 점을 잘 알고 있었고, 저희는 정확히 그 작업을 진행했습니다. UI 디자인 면에서 더 보기 좋을 뿐만 아니라 더 매끄럽고 접근하기 쉽도록 이 기능을 세심하게 다듬고 조정했습니다. 이제 모바일에서도 아무런 번거로움 없이 사이트를 확인하고 편집할 수 있습니다. 여러분의 눈은 물론 사이트 방문자들도 확실히 만족할 것입니다.

    더욱 매끄럽고, 더욱 우수하며, 훨씬 더 멋진 경험.

    마지막으로, PBS에 보내주신 여러분의 모든 성원과 애정에 진심으로 감사드리며, 멋진 여정이 기다리고 있는 만큼 저희만큼이나 여러분도 기대해 주시기를 바랍니다!

    이번 업데이트 예정 사항들이 기대에 부합하시나요? v4에 대해 추가로 제안하고 싶은 내용이 있으신가요? 아래에 댓글을 남겨주시면 검토하도록 하겠습니다!

    v4의 추가 업데이트(및 기타 멋진 소식)를 계속 받아보시려면 아래의 ‘구독(Subscribe)’ 버튼을 눌러 뉴스레터를 구독해 주세요! 언제든지 구독을 취소하실 수 있으니 걱정하지 않으셔도 됩니다.

    모두 행복한 연말연시 보내셨기를 바라며,

    PBS 팀 드림

    즐거운 사이트 제작 되세요!

  • 조금 더 기술적인 이야기: 당사의 자체 쇼트코드 매핑을 구현한 방법

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2이전 글에서는 쇼트코드 매핑의 기본 원리와 이를 통해 얻을 수 있는 유용한 이점에 대해 논의했습니다. 이어지는 내용이 다소 기술적일 수 있어, Page Builder Sandwich 버전의 쇼트코드 매핑을 다루는 글을 나누어 작성하기로 결정했습니다.

    아래에는 저희 쇼트코드 매핑 기능의 내부 작동 방식과 이를 구현해 낸 과정에 대한 심도 있는 설명이 나와 있습니다.

    자동화된 프로세스

    쇼트코드 매퍼에 포함할 플러그인을 결정하기 위해, 다음 기준에 따라 워드프레스 플러그인 디렉터리에서 주요 플러그인을 수집하는 자동화 스크립트를 제작했습니다:

    • 인기 순위, 평점 및 업데이트 기준 상위 1,000개 플러그인 중 활성 설치 수 최소 4,000회 이상,
    • 활성 설치 수 최소 4,000회 이상,
    • 최소 20개 이상의 평가 수, 그리고;
    • 평균 평점 3점 이상

    저희는 워드프레스 플러그인 디렉터리를 대상으로 매일 이 쿼리를 실행합니다. 이러한 필터를 통해 많은 사람들이 사용하는 양질의 플러그인 목록을 확보할 수 있습니다. 이 글을 작성할 당시, 이 기준에 부합하는 플러그인은 800개에 달했습니다. 정말 많은 수치입니다. 정말로요.

    쇼트코드 매핑을 위해 감지된 가장 인기 있는 플러그인 중 일부.
    쇼트코드 매핑을 위해 감지된 가장 인기 있는 플러그인 중 일부.

    그런 다음 각 플러그인의 소스 코드에 대한 일련의 자동화된 검사를 실행하여 쇼트코드가 포함되어 있는지 확인하고, 모든 속성을 포함한 해당 쇼트코드를 모두 찾아냅니다. 데이터를 분석한 결과, 2,000개가 넘는 쇼트코드가 추출되었습니다. 정말 엄청납니다. 이렇게 감지된 쇼트코드는 수동 검토를 위해 쇼트코드 매핑 데이터베이스에 입력됩니다.

    이 프로세스가 끝나면 방대한 플러그인 목록과 각 플러그인이 가질 수 있는 쇼트코드 목록이 완성됩니다. 이제 모든 데이터가 올바른지 확인하기 위해 이 데이터를 정제하는 일만 남았습니다.

    수동 프로세스

    이것이 아마 전체 매핑 시스템에서 가장 어려운 부분일 것입니다. 플러그인 코드는 형태와 구조가 제각각이어서 모든 쇼트코드가 스크립트에 의해 자동으로 감지되는 것은 아닙니다. 워드프레스 코덱스(WordPress Codex)에는 쇼트코드의 속성을 필터링하기 위해 `shortcode_atts` 함수를 사용하라고 나와 있지만, 이는 권장 사항일 뿐이며 모두가 이를 따르는 것은 아닙니다. 또한 플러그인이 설치되었을 때 쇼트코드의 내부를 확실하게 확인할 수 있는 방법도 없습니다.

    따라서 모든 쇼트코드와 해당 속성을 올바르게 파악할 수 있도록, AngularJS와 Bootstrap으로 쇼트코드 및 속성 편집 전용 프런트엔드 영역을 구축했습니다.

    매핑된 모든 쇼트코드를 수정하기 위한 Bootstrap 및 AngularJS 인터페이스.
    매핑된 모든 쇼트코드를 수정하기 위한 Bootstrap 및 AngularJS 인터페이스.

    저희는 모든 플러그인을 일일이 수동으로 살펴보면서 쇼트코드 문서를 확인하고 수집된 모든 데이터가 올바른지 점검해야 합니다.

    매우 고되고 지루한 작업이긴 하지만, 자동화 프로세스를 마련해 둠으로써 얻는 긍정적인 면도 있습니다:

    • 초기 통계에 따르면 플러그인 2개 중 1개 정도에만 쇼트코드가 있습니다.
    • 감지된 쇼트코드 중 절반은 속성이 없습니다(하지만 이 중 일부는 오탐지일 수 있습니다).
    • 양질의 플러그인만을 수집하기 때문에, 대부분 쇼트코드 문서가 잘 갖추어져 있습니다.

    플러그인의 모든 쇼트코드가 확인된 후에야 비로소 서버에서 해당 플러그인의 쇼트코드 매핑을 사용자에게 배포하기 시작합니다.

    REST API 호출

    퍼즐의 마지막 조각은 플러그인 자체입니다. 개념은 간단합니다. 어떤 플러그인이 활성화되어 있는지, 사이트에서 어떤 테마를 사용하고 있는지, 어떤 쇼트코드를 사용할 수 있는지 파악한 다음, 쇼트코드 매핑 데이터베이스에 매핑 정보가 있는지 확인하는 것입니다. 이를 위해 모든 클라이언트가 최신 쇼트코드 매핑을 받아올 수 있도록 핑을 보내는 커스텀 WP REST API 엔드포인트를 만들었습니다.

    미래: 크라우드소싱

    각 플러그인을 수동으로 확인하는 일에는 많은 시간과 노력이 필요합니다. 쇼트코드 매핑 플랫폼이 안정화되면, 누구나 참여할 수 있도록 쇼트코드 매핑을 공개할 계획입니다. 즉, 누구나 쇼트코드 추가를 도울 수 있게 됩니다.

    여러분은 “내가 왜 쇼트코드 매핑을 도와야 하지? 내게 무슨 이득이 있지?”라고 생각하실 수도 있습니다. 사람들이 기꺼이 돕고자 하는 몇 가지 이유를 생각해 볼 수 있습니다:

    1. 플러그인을 직접 개발했는데 위 기준 때문에 아직 감지되지 않았고(워드프레스 플러그인 디렉터리에 등록되어 있다면), 직접 매핑을 추가할 수 있습니다. 개발하신 플러그인이 PBS에서 완벽하게 지원됩니다!
    2. 자동화 프로세스에서는 워드프레스 플러그인 디렉터리에 있는 플러그인만 다루기 때문에 프리미엄 플러그인 및 테마 제작자는 포함되지 않습니다. 따라서 해당 플러그인/테마를 보유하고 있다면 이에 대한 쇼트코드 매핑을 직접 추가할 수도 있습니다.
    3. 플러그인 제작자가 아닌 분들을 위해, 도움을 주시는 분들께 보상을 제공할 수도 있습니다. 쇼트코드 매핑을 매력적인 작업으로 만들기 위해, 흔쾌히 도와주신 분들께 PBS 개인 라이선스 또는 프리미엄 라이선스 업그레이드로 보답할 수 있습니다!

    뉴스레터 구독하기

    쇼트코드 매핑 기능은 고객 여러분을 위해 2016년 8월 12일  8월 15일  8월 16일에 잠정 출시될 예정입니다. 이때까지 모든 쇼트코드가 매핑되지는 않겠지만(약 100개 플러그인 예상), 매핑 작업은 지속적으로 진행되며 새로운 매핑이 출시되는 대로 고객에게 제공될 것입니다.

    쇼트코드 매핑에 대한 소식, 출시 일정, 대중에게 공개되는 시점에 대한 정보를 받아보시려면 뉴스레터를 구독하세요!

  • 이메일 뉴스레터 구독 양식을 쉽게 추가하기

    Easily-Add-Email-Newsletter-Signup-FormsAdding an email newsletter sign up form to your site is a great way to grow your website’s following and to keep your website visitors interested in your site or product. And now you can easily add and customize newsletter sign up forms directly in your designs.

    preview-newsletterNew in Page Builder Sandwich is the Newsletter Element (check the short gif above). Now you can add a newsletter sign up form for your MailChimp, AWeber or MailPoet newsletter lists directly into your designs.

    일반적으로 뉴스레터 신청 양식을 작동하게 하려면 다른 플러그인을 설치하고 어딘가에 숏코드를 추가하거나, 팝업 창을 열어 여러 항목을 입력하거나, 위젯을 설정해야 했습니다. 이제 뉴스레터 구독 양식을 추가하는 모든 복잡한 과정이 사라졌습니다. 페이지에 뉴스레터 요소를 추가하고 리스트 API 키만 입력하면 즉시 작동합니다.

    이메일 필드를 클릭하여 색상, 크기, 테두리 등을 변경하거나 버튼을 클릭하여 아이콘을 추가하고, 버튼 크기를 변경하거나, 방문자가 이메일 주소를 입력하기 시작할 때만 버튼이 표시되도록 설정하여 가입 양식을 더욱 맞춤화할 수 있습니다. 디자인에 맞춰 모양을 완벽하게 커스터마이즈할 수 있습니다. 사용자가 입력할 때 필드 색상이 바뀌도록 하고 싶으신가요? 색상 선택기로 쉽게 설정할 수 있습니다. 필드가 테두리만 있는 미니멀한 디자인이 필요하신가요? 문제없습니다!

    멋진 점 중 하나는 뉴스레터 요소가 사이트 내 사용자의 흐름을 방해하지 않는다는 것입니다. 구독을 완료해도 페이지가 새로고침되지 않으며, 가입 양식이 “감사합니다” 메시지로 자연스럽게 바뀝니다. 이 메시지와 색상 또한 맞춤 설정할 수 있습니다.

    Page Builder Sandwich의 다른 요소들과 마찬가지로, 새로 만든 뉴스레터 가입 양식을 원하는 위치 어디에나 배치할 수 있으며 행 내부나 다른 위치로 드래그하기만 하면 됩니다.

    메일링 리스트가 중요한가요?

    간단히 답하자면 ‘네’입니다. 트위터 계정이 있으면 다른 트위터 사용자가 나를 “팔로우”하여 내 트윗을 볼 수 있는 것처럼, 메일링 리스트는 방문자가 이메일을 통해 사이트를 팔로우할 수 있는 방법입니다.

    아직 메일링 리스트가 없으신가요?

    If you don’t have a mailing list yet, now is a good time to get started. Getting a newsletter service like MailChimp or AWeber is good since they do the heavy lifting of managing your subscribers and blasting an email to your subscribers easily. They also have newsletter builders that will let you create a newsletter campaign easily. The good thing is they have free plans, so you won’t need to shell out cash in order to try it out.

    If you’re more of a I-like-to-handle-it-myself guy or gal, then you might consider using MailPoet. It’s downloadable free from wordpress.org and they have a paid model as well. With MailPoet, you’ll be able to see your subscribers within your dashboard and you can also send out emails from there. It’s easy to use as well and just takes literally less than 5 minutes to fully set up in your site (Yes, I’ve tried).

    Page Builder Sandwich에 대해 자세히 알아보기