[작성자:] Neil Lock

  • 도대체 숏코드란 무엇인가요?

    What-Are-Shortcodes-Anyway알고 계실지 모르겠지만, 워드프레스의 기본 원칙 중 하나는 초보자와 숙련된 개발자 모두를 위해 언제나 모든 것을 조금 더 쉽게 만드는 것입니다. 이 목표를 달성하는 방법 중 하나가 바로 숏코드(shortcode)를 사용하는 것입니다.

    WordPress.com 지원 페이지에서는 숏코드를 다음과 같이 정의합니다:

    sht꽤 간단하게 들립니다. 이 글을 읽기 전까지 숏코드에 대해 들어본 적이 없거나 어떻게 생겼는지 모르신다면, 대괄호로 둘러싸인 생소한 코드 형태의 텍스트를 떠올리시면 됩니다.

    일반적으로 다음과 같이 보이는 일반 코드와 비교해 보겠습니다:

    HTML5-video-tag-sample-code
    (음. 이게 뭐죠?)

    숏코드는 대략 다음과 같이 생겼습니다:

    embed_shortcode
    (식은 죽 먹기죠.)

    …그리고 여러분이 개발자라면(아니, 컴퓨터를 한두 번이라도 다뤄본 사람이라면 누구나), 보잘것없는 작업 하나를 끝내기 위해 일일이 타이핑하고 클릭하는 것만으로도 상당한 시간이 소모된다는 점에 동의하실 것입니다. 우리가 키보드 단축키를 사용하는 것과 같은 이유로, 숏코드는 우리 모두에게 작업을 더 수월하게 해주고 시간을 절약하여 더 나은 것을 만들고 작업할 수 있도록 존재합니다. 그와 동일한 목적을 지닌다는 점에서 단축키와 매우 비슷합니다.

    이제 위에서 보았던 바로 그 특정 숏코드로 다시 돌아가 보겠습니다:

    embed-shortcode 이 특정 숏코드는 임베드 숏코드라고 불리며 워드프레스에 기본으로 내장되어 있습니다. URL의 비디오를 콘텐츠에 삽입해 줍니다. 지금 워드프레스를 사용 중이시라면, 직접 테스트해 보기 위해 위의 숏코드를 복사하여 사이트에 붙여넣어 보실 수 있습니다.

    하지만 숏코드가 시간을 절약하는 완벽한 해결책인 것만은 아닙니다. 이전 글에서는 숏코드가 지닌 단점과 이를 해결하기 위해 Sandwich 팀이 준비하고 있는 것에 대해 더 자세히 다루었습니다.

    우선은 숏코드를 자유롭게 다뤄보면서 숏코드가 여러분을 위해 무엇을 해줄 수 있는지 확인해 보세요.

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

  • 숏코드의 말하지 않는 문제점

    The-Unspoken-Problem-of-Shortcodes

    숏코드는 워드프레스의 가장 뛰어난 기능 중 하나입니다. 숏코드는 개발자와 사이트 제작자 사이의 가교 역할을 하여, 사용자가 원하는 거의 모든 곳에 정교한 콘텐츠를 배치할 수 있도록 해줍니다. 플러그인 제작자들은 사용자가 콘텐츠를 표시하는 방식과 위치에 더 많은 유연성을 부여할 수 있기 때문에 숏코드를 매우 좋아합니다.

    숏코드가 무엇인지, 어떻게 생겼는지 잘 모르신다면, 대괄호로 둘러싸인 고전적인 코드 형태의 텍스트를 떠올리시면 됩니다. 대략 다음과 같이 생겼습니다:

    이 특정 숏코드는 임베드(embed) 숏코드라고 불리며 워드프레스에 기본적으로 내장되어 있습니다. 이 숏코드는 URL의 동영상을 콘텐츠에 삽입해 줍니다. 한 번 사용해 보고 싶다면 위 숏코드를 복사하여 사이트에 붙여넣기만 하면 됩니다.

    보이지 않는 곳에서는 워드프레스가 콘텐츠 내에서 숏코드를 발견하면, 이를 처리하여 다른 요소로 변환하는 작업이 일어납니다. 위의 경우,

    숏코드가 감지될 때마다 워드프레스는 숏코드 안의 URL을 가져와 보유한 여러 콘텐츠 제공자 목록과 대조합니다. 일치하는 항목을 찾으면 적절한 iframe 임베드 코드를 가져와 대신 표시합니다.

    그렇다면 여기서 무엇이 문제일까요? 대괄호가 있는 짧은 텍스트만 입력하면 되니 아주 간단해 보입니다.

    이제 숏코드 API(Shortcode API)가 등장합니다..

    넘쳐나는 숏코드

    숏코드 API는 개발자들에게 숏코드 제작의 길을 열어주었습니다. 이 덕분에 개발자들은 자신이 만든 플러그인 내에 고유한 숏코드를 추가할 수 있게 되었습니다.

    코드 형태의 짧은 스니펫(그래서 “숏코드(shortcode)”라는 이름이 붙음) 하나만으로 초보자와 고급 사용자 모두 원하는 거의 모든 유형의 콘텐츠를 어디든 배치할 수 있게 되었으니 정말 훌륭한 일입니다.

    워드프레스에는 기본적으로 소수의 숏코드만 들어 있습니다. 몇 개 되지 않기 때문에 기억해서 직접 타이핑하기도 쉽습니다. 하지만 플러그인을 몇 개 설치하기 시작하면 숏코드의 수는 순식간에 십여 개 이상으로, 경우에 따라서는 백 개 넘게 늘어납니다. 각 숏코드는 고유한 속성(attribute) 모음과 사용법을 가지고 있습니다. 대부분의 플러그인은 모든 숏코드가 작동하는 방식과 각 숏코드에서 사용할 수 있는 매개변수를 나열한 설명서를 제공합니다. 하지만 그 모든 숏코드와 속성을 전부 외우려고 한다면 제정신이 아닐 것입니다.

    문제는 사이트에서 사용할 수 있는 모든 숏코드와 그 사용법을 한눈에 확인할 수 있는 통합된 공간이 없다는 점입니다.

    문제를 해결하려는 몇 가지 시도

    일부 플러그인은 접근하기 쉬운 드롭다운 메뉴에 자체 숏코드를 모두 표시하여 이 문제를 해결하려고 시도합니다. 그중 하나를 클릭하면 해당 숏코드에 가능한 모든 속성이 포함된 상태로 출력됩니다. 더 이상 외울 필요가 없으니 좋은 방법입니다.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    어떤 플러그인은 한 걸음 더 나아가 체크박스와 색상 선택기가 포함된 설정 팝업 양식을 추가하여 숏코드의 속성을 채울 수 있도록 지원합니다.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    이 솔루션은 어느 정도 효과가 있습니다. 하지만 각 플러그인은 자체 숏코드만 나열합니다. 따라서 각 플러그인이 저마다 고유한 형태의 숏코드 선택기를 만든다면, 화면에 여러 개의 숏코드 선택기가 동시에 나타나는 상황을 겪게 마련입니다(저 역시 이전에 겪어본 일입니다).

    Screen-Shot-2016-06-22-at-11.22.41-AM

    즉, 각 플러그인이 각자의 방식대로 행동하며 자신의 숏코드만을 위한 자체 솔루션을 구현하는 것입니다. 어떤 플러그인은 “미디어 추가” 버튼 옆에 새 버튼을 추가하기도 하고, TinyMCE 에디터 내부에 새 버튼을 추가하기도 합니다.

    이쯤 되면 “다른 플러그인의 숏코드도 함께 모아서 드롭다운이나 숏코드 선택기에 포함하면 되지 않을까?”라는 생각이 들 수 있습니다. 네, 저도 정확히 그렇게 생각했습니다. 하지만 말은 행동보다 쉬운 법입니다. 그 이유는 잠시 후에 설명하겠지만, 먼저 이상적인 해결책이 어떤 모습일지 살펴보겠습니다.

    이상적인 해결책

    완벽한 계획은 사이트에서 사용 가능한 모든 숏코드를 모은 뒤 목록으로 보여주고 모든 속성을 입력할 수 있도록 도와주는 플러그인을 만드는 것입니다. 그리고 새 플러그인을 설치할 때마다 새로 추가된 모든 숏코드도 함께 표시되는 방식입니다.

    모든 숏코드가 쉽게 접근할 수 있도록 한곳에 모여 있는 중앙 공간을 상상해 보십시오. 각 숏코드는 어떤 역할을 하는지, 어떤 플러그인에 속해 있는지 설명되어 있습니다. 그리고 사용 가능한 각 속성에 대해 레이블, 값을 선택하는 적절한 방법, 설명이 제공된다고 상상해 보세요. 드롭다운, 색상 선택기, 라디오 버튼, 토글 등이 표시될 것입니다.

    이러한 것이 있다면 웹사이트 및 콘텐츠 제작자로서 우리의 삶은 훨씬 편해질 것입니다. 사용하고 싶은 슬라이더의 생성된 숏코드 하나를 복사하려고 여러 설명서를 찾아보거나 관리자 페이지의 이곳저곳을 헤맬 필요가 더 이상 없어집니다.

    주의해야 할 한계점

    안타깝게도 현재로서는 이러한 기능을 구현하기가 매우 어렵습니다. 숏코드의 모든 세부 정보를 알아낼 수 있는 확실한 방법이 없기 때문입니다. 모든 숏코드의 목록을 가져올 수는 있지만 실제 태그/이름만 알 수 있을 뿐, 속성 목록, 기능, 속성의 유형(문자열, 색상, 숫자 등)과 같은 추가 세부 정보는 얻을 수 없습니다. 각 속성에 대한 간략한 설명조차 얻을 수 없습니다.

    개발자분들을 위해 덧붙이자면: 네, shortcode_atts 함수에 새로 추가된 세 번째 인자가 있기는 하지만, 이는 필수 인자가 아닙니다. 따라서 전 세계의 모든 플러그인 개발자가 이를 구현하지 않는 한, 숏코드의 모든 속성을 알아낼 수 있는 확실한 방법은 여전히 존재하지 않습니다.

    숏코드 API는 숏코드 설명 추가, 속성 타입 캐스팅, 속성 설명을 추가하기 위한 어떠한 기능도 제공하지 않습니다. 그리고 워드프레스 자체가 숏코드에 접근할 수 있는 중앙 공간을 추가하지 않는 한, 이러한 기능이 만들어질 가능성은 희박해 보입니다.

    결론

    현재로서는 숏코드를 정리하는 작업이 각 개발자의 몫으로 남아 있습니다. 워드프레스 내에서 중앙 집중식 방식이 개발되지 않는 한, 백엔드에서 여러 개의 “숏코드 추가” 버튼을 계속 마주하게 될 것입니다. 이러한 기능을 워드프레스 코어에 추가해야 하는지 여부는 그 자체로 또 다른 거대한 논쟁거리입니다.

    대안

    이 문제를 다른 방식으로 다루는 페이지 빌더 플러그인들이 있습니다. 프로그래밍 방식으로 숏코드를 감지하는 대신, 사용자가 숏코드의 모든 세부 정보를 수동으로 입력할 수 있는 숏코드 매퍼를 제공합니다. 작업이 완료되면 페이지 빌더 내에서 해당 숏코드를 사용할 수 있게 됩니다. 이 방법이  효과가 있기는 하지만, 해당 사이트 내에서만 사용할 수 있습니다.

    여기 Page Builder Sandwich에서는 이 숏코드 난제를 해결할 수 있기를 바라며 무언가를 제작하고 있습니다. 진행 상황에 대한 알림을 받으시려면 아래의 뉴스레터를 구독해 주세요.

  • 페이지에 세련된 지도를 추가하는 인터랙티브한 경험

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2이제 Page Builder Sandwich를 사용하여 페이지 디자인에 지도를 배치할 수 있습니다!

    지도에 대해 이렇게 기대한다는 게 조금 신기하게 느껴질 수도 있습니다. 보통은 Google 지도 URL을 가져와 임베드하거나, 온라인에서 지도 플러그인을 찾아 숏코드를 넣거나, 기존에 쓰던 다른 페이지 빌더에 이미 기능이 있어 언제든 추가할 수 있으니까요. 하지만 저희가 기대에 찬 이유는 지도를 추가하는 방식을 완전히 새로운 차원으로 끌어올렸기 때문입니다.

    미리보기는 다음과 같습니다:

    지도를 추가하는 지루하고 오래된 방식

    일반적인 페이지 빌더에서 지도를 추가하는 방법은 다음과 같습니다:

    1. 새 지도 요소를 드래그합니다.
    2. 필드에 위도와 경도를 입력합니다.
    3. 지도 높이, 지도 너비, 도로 스타일 확인란 선택 등 필드의 다른 값을 입력합니다.
    4. 미리보기를 눌러 어떻게 보이는지 확인하고, 더 멋지게 보이도록 변경할 부분이 있는지 결정합니다.
    5. 페이지 빌더로 돌아가 값을 변경한 다음 위의 4단계를 반복합니다.

    Page Builder Sandwich 방식으로 지도 추가하기

    웹사이트의 지도는 대화형입니다. 둘러보고 지도를 확대 및 축소할 수 있죠. 그래서 우리는 어림짐작으로 작업하는 번거로움을 모두 없애고, 페이지를 제작하는 동안 사용자가 지도와 직접 상호작용할 수 있도록 하면 어떨까 생각했습니다.

    Page Builder Sandwich로 지도를 추가하는 방법은 다음과 같습니다:

    1. 지도 요소를 추가합니다.
    2. 지도의 중심을 맞추고자 하는 위도와 경도 또는 주소를 입력합니다.
    3. 원하는 모습을 얻을 때까지 지도를 이동하고 확대 또는 축소합니다.
    4. 스타일에 맞게 지도에 멋진 색상을 추가합니다.
    5. 저장을 누릅니다.

    저희 방식은 훨씬 더 재미있고 직관적입니다. 일반적인 Google 지도를 사용하는 것과 똑같은 방식으로 지도와 상호작용할 수 있습니다.

    색상 지도를 만들거나 SnazzyMaps로 스타일 지정하기

    저희가 추가한 멋진 기능 중 하나는 지도에 색조와 색상을 입히는 기능이며, 사용하기도 아주 쉽습니다. (이 기능은 프리미엄 버전에만 제공됩니다). 지도에 색을 입히고 싶다면 색상 선택기를 클릭하고 색상을 선택하기만 하면 지도가 즉시 변경됩니다.

    다음은 분홍색 색조를 입힌 예시입니다:

    또한 Page Builder Sandwich는 SnazzyMaps를 통한 더욱 정교한 색상 구성표를 지원합니다. 사용자가 기여한 방대한 색상 구성표 목록이 있으며, 색상을 더 세밀하게 제어하고 싶다면 직접 만들 수도 있습니다.

    마음에 드는 색상 구성표를 찾은 후 코드를 복사하여 Page Builder Sandwich에 붙여넣기만 하면 됩니다. 색상 구성표가 지도에 즉시 적용됩니다.

    다음은 SnazzyMaps의 papuportal dark:

    원하는 곳 어디에나 지도를 배치하세요

    더욱 극적인 효과를 위해 전체 너비 행에 추가하는 등 지도 기능으로 할 수 있는 멋진 작업이 훨씬 더 많습니다. 원하신다면 캐러셀 내부나 탭 내부(예정된 기능)에도 추가할 수 있습니다.

    아직 Page Builder Sandwich를 사용하고 있지 않으시다면, 위의 “라이브 데모(Live Demo)” 링크.

  • 여백이 중요한 5가지 이유

    Reasons-Why-Whitespace-Matters기본적으로 여백(Whitespace)이란 가장 기본적인 정의로 볼 때, 디자인 구성의 모든 요소 주위와 사이에 남겨진 표시되지 않은  공간을 의미합니다. 대부분의 웹사이트 소유자가 생각하는 것처럼 화면 공간을 낭비하는 것이 절대 아닙니다. 잘 활용하면 여백은 제품을 더 효과적으로 홍보할 수 있는 이점을 실제로 제공할 수 있습니다. 여백은 좋은 디자인을 만드는 중요한 핵심이며 웹사이트를 모든 면에서 더 훌륭하게 만들어 줍니다.

    여백(whitespace)이라는 이름 때문에 이 공간이 흰색이어야 할 것 같지만, 문자 그대로 항상 흰색일 필요는 없습니다. 여백은 사실 어떤 색상이어도 무방하며, 은은한 패턴이나 질감을 가질 수도 있습니다. 이는 시선이 집중되는 것을 원하지 않는 영역입니다. 다른 말로는 네거티브 스페이스(negative space)

    그렇다면 여백이 왜 중요할까요?

    newsfeed
    이미지 출처: News Feed

    이유 1: 가독성 향상

    기준선과 문단 사이의 여백은 사용자가 사이트의 모든 콘텐츠를 편안하게 읽을 수 있도록 실질적인 도움을 줍니다. 줄 간격이나 자간과 같은 사이트의 세부적인 부분을 조정하는 것만으로도 훨씬 수월하게 읽을 수 있도록 큰 차이를 만들어낼 수 있습니다.

    목표는 눈이 편안한 레이아웃을 디자인하여 사람들이 계속해서 글을 읽고 싶게 만드는 것입니다.

    hpmagicwords
    이미지 출처: HP Magic Words

    이유 2: 상호작용 속도 향상

    솔직히 말해서 대부분의 방문자는 웹사이트를 둘러볼 때 꼼꼼히 살펴볼 만큼 인내심이 많지 않습니다. 웹사이트가 복잡해 보이면 사용자가 찾고자 하는 정보를 찾는 데 집중하지 못하게 됩니다.

    여백은 방문자의 시선이 페이지를 자연스럽게 둘러볼 수 있도록 안내해야 합니다. 주의를 분산시키는 요소를 줄이고 여백을 적절히 활용하면 방문자의 속도를 늦추는 산만함을 방지할 수 있습니다.

    google
    이미지 출처: Google

    이유 3: 적절한 요소로 시선 유도

    여백은 사용자에게 어디를 보아야 할지에 대한 시각적 단서를 제공할 수 있습니다. 올바른 방식으로 사용하면 여백은 정보를 강조하고 웹사이트의 특정 영역으로 시선을 끄는 데 도움이 됩니다.

    모든 것이 눈에 띈다면, 그 어떤 것도 돋보이지 않는다는 점을 기억하세요.

    이미지 출처: Pocket Penguins

    이유 4: 첫인상이 중요합니다

    웹사이트의 룩앤필(외관과 느낌)은 좋은 첫인상을 남기는 주요 핵심입니다. 좋은 첫인상은 종종 더 긴 방문 시간으로 이어집니다. 여백이 너무 적으면 웹사이트가 조잡하고 신뢰할 수 없어 보일 수 있습니다. 사이트나 브랜드가 매력적으로 보이지 않는다면 방문자는 신뢰를 갖지 않을 것입니다. 적절한 양의 여백을 두면 웹사이트에 알맞은 분위기를 조성하는 데 도움이 됩니다. 여백은 독창성, 신선함, 그리고 때로는 우아함을 전달하는 방법이 될 수 있습니다.

    팁: 웹 디자인을 단순하고 친숙하게.

    flockknitwear
    이미지 출처: Flock Knitwear

    이유 5: 여유 공간과 균형감 형성

    균형 잡힌 디자인이 대칭을 의미하는 것은 아닙니다. 하나의 큰 디자인 요소는 몇 개의 더 작은 요소들로 균형을 맞출 수 있습니다. 여백을 추가하는 것은 페이지 내 다양한 크기의 디자인 요소 간 균형을 맞추는 훌륭한 방법입니다. 사용자의 시선이 사방으로 흩어지지 않도록 흐름을 만드세요. 훌륭한 디자인은 방문자를 혼란스럽게 하지 않으면서 한 지점에서 다른 지점으로 사용자를 안내할 수 있어야 합니다.

    결론

    다음에 웹사이트를 방문하여 한동안 머물게 된다면, 무엇이 여러분을 머물며 읽게 만들었는지 생각해 보세요. 줄 간격이 글을 더 읽기 쉽게 만들어 준다고 생각하시나요? 그 경험이 계속해서 다시 방문하고 싶게 만드나요? 내비게이션 메뉴를 찾는 데 어려움이 있었나요?

    웹사이트에서 여백이 훌륭하게 적용된 사례를 눈여겨보세요. 여러분의 웹사이트에도 효과가 있을 것 같다면, 웹사이트에 원하는 “흐름”을 해치지 않으면서 적절한 분위기와 가독성을 전달했다고 느껴질 때까지 각 요소에 얼만큼의 여백을 할당해야 하는지 적용하고 관리하는 방법을 익혀보세요.

    모든 웹사이트의 궁극적인 목표는 소통입니다. 시각적인 매력은 웹사이트의 성공과 직결됩니다.

  • 숏코드 매핑: PBS가 800개 이상의 플러그인과 2,000개 이상의 숏코드를 지원하는 방법

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    지난 몇 주 동안 PBS 팀은 지도 요소뿐만 아니라 탭 요소도 추가했습니다.

    이제 며칠마다 새로운 요소를 계속 추가하는 것은 저희에게 꽤 쉽고 단순한 일과처럼 보일 것입니다.

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, 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.

    이러한 시스템의 이점은 매우 큽니다:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    숏코드 매핑은 새로운 것이 아니며, 이미 여러 페이지 빌더에 포함되어 있습니다. 그렇다면 저희의 방식은 무엇이 다를까요?

    다른 페이지 빌더에서 숏코드 매핑이 작동하는 방식

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

    이러한 시나리오에서는 숏코드 매핑의 부담이 온전히 사용자 여러분의 몫이 됩니다. 모든 속성(예쁜 색상 선택 도구 및 기타 요소 포함)이 적용된 숏코드를 완벽하게 매핑하려면 각각의 모든 숏코드에 대해 모든 세부 정보를 빠짐없이 입력해야 합니다.

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Page Builder Sandwich에서 숏코드 매핑이 작동하는 방식

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    이는 우리에게 많은 훌륭한 이점을 제공합니다:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    뉴스레터를 구독하세요!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • WordPress.com VS WordPress.org

    Wordpress-Com-VS-Wordpress-Org웹사이트 제작에 비교적 익숙하지 않으시다면, 아마도 ‘WordPress.com 대 WordPress.org’의 열띤 논쟁에 대해 잘 모르실 가능성이 높습니다. 둘 중 다른 하나가 존재한다는 사실조차 몰랐거나, 각각의 장단점에 대해 알지 못했을 수도 있습니다. 그렇다면 도대체 WordPress.com과 WordPress.org 사용 사이의 이 열띤 논쟁이란 무엇일까요? 둘 중 하나는 고소당할 위험에 처한 저렴한 모조품일 뿐일까요?

    글쎄요, 그렇지 않습니다.

    간단히 말해, 이 논쟁은 이 두 가지 워드프레스 서비스 중 어느 쪽이 여러분이 구축하려는 웹사이트에 더 적합한가에 관한 것입니다. 둘 중 어느 것도 모조품이 아니며, 두 사이트 모두 WordPress가 소유하고 있습니다. 다만 하나(.com)는 다른 쪽에 비해 개발자가 아닌 사람들에게 더 친숙한 버전이고, .org는 .com에 비해 사이트 구축 시 제한이 훨씬 적다는 점이 다릅니다.

    “하지만 나에게 어떤 것이 필요한지 어떻게 알 수 있나요?”

    이 질문에 대한 답변은 앞으로 만들 웹사이트의 요구사항에 따라 전적으로 달라집니다. 객관적으로 더 “나은” 버전이나 심지어 “최고”의 워드프레스 버전이란 존재하지 않습니다. 둘 다 고유한 기능을 가지고 있으며 장단점도 동일하게 존재합니다.

    WordPress.com: 왜, 그리고 언제 선택해야 할까요?

    WordPress.com은 기본적인 필수 요소를 대신 관리해 주므로, 사이트 콘텐츠에 더 집중할 수 있습니다. 이는 Automattic이라는 기업에 의해 완전히 운영 및 호스팅되는 사이트 빌더입니다. 프리미엄 호스팅, 백업, 보안 등을 제공받습니다. 즉, 처음부터 끝까지 사이트를 구축하는 데 몇 시간씩 소요하는 대신 콘텐츠에 훨씬 더 쉽게 집중할 수 있다는 뜻입니다.

    하지만 WordPress.com에도 고유한 한계가 있다는 점을 유의하세요. 사이트의 내부 작동을 유지 관리하는 데 많은 신경을 쓸 필요는 없지만, 원하는 만큼의 자유도를 누릴 수는 없을 수도 있다는 점을 염두에 두어야 합니다. 사이트 인터페이스를 맞춤 설정하는 것은 문제가 되지 않을 수 있지만(예를 들어 WordPress.com에는 수많은 테마가 제공됩니다), 플러그인 형태로 특정 기능과 요소를 추가하는 것은 문제가 될 수 있습니다. 특히 사이트에 WordPress.com에서 제공되지 않는 특정 기능이 필요한 경우 더욱 그렇습니다.

    웹사이트를 어떻게 유지 관리할 것인가는 전혀 다른 문제입니다. 이는 대체로 1) 본인이 워드프레스 개발자가 아니거나, 2) 코딩을 배울 의향이 없거나, 3) 코딩을 배울 시간이 거의 또는 전혀 없는 경우에 크게 좌우됩니다.

    WordPress.org: 언제 고려해 보아야 할까요?

    WordPress.org를 고려할 때의 한 가지 기본 원칙은 코드 작동 방식에 대해 최소한 조금이라도 알고 있거나, 이를 배우는 데 기꺼이 시간을 투자할 의향이 있을 때입니다. WordPress.org는 자체 호스팅(설치형) 버전의 워드프레스이므로, 원하는 만큼 직접 이것저것 다뤄볼 수 있습니다. 게다가 원하는 만큼 많이 또는 적게 자유롭게 만져볼 수 있습니다. 직접 호스팅 업체를 찾고, 자체 보안 백업을 설정하며, 전반적인 웹사이트를 스스로 관리해야 합니다. 그리고 더 중요한 것은 본인의 방식대로 관리할 수 있다는 점입니다.

    “잠깐만요, 왜 그렇게 하고 싶어 하겠어요? 워드프레스의 목적은 사이트 구축을 더 쉽게 만드는 것 아닌가요?”

    …꼭 그렇지는 않습니다. 이렇게 생각해 보세요. The Daily Post에서는 왕초보(저 같은 사람)라도 요점을 바로 파악할 수 있도록 WordPress.org와 WordPress.com을 아주 훌륭하게 비유했습니다.

    그들에 따르면, WordPress.com은 완전한 소유권을 갖지 못한 상태로 생각해야 합니다. 예를 들어, 부모님과 함께 사는 15세의 자신을 떠올려 보세요. 침실에 페인트를 칠하고 싶다면, 먼저 부모님(물론 여러분의 방을 포함한 집 전체의 소유권을 가진 분들)의 허락을 받아야 합니다. 엄밀히 말해 방은 여러분의 것이지만, 결국… 어찌 보면 그렇지 않기도 합니다.

    따라서 벽에 페인트를 칠하거나 방을 확장하는 등 큰 변화를 주고 싶거나 주어야 할 때, 여전히 집의 실제 소유자인 엄마와 아빠와 상의하거나 타협점을 찾아야 합니다. 하지만 이에 따른 장점도 있습니다. 지하실 퓨즈가 나가거나 에어컨이 작동을 멈추면 부모님이 알아서 해결해 주시므로 여러분은 아무것도 걱정할 필요가 없습니다.

    반면에 WordPress.org는 본인의 뜻에 따라 자유롭게 맞춤 설정하고 수정할 수 있는 대상입니다. 이는 마침내 18세가 되어 독립해 자신만의 아파트를 얻었을 때에 비유할 수 있습니다. 거주지에 대한 완전한 소유권이 있으므로, 어머니가 항상 질색하셨던 색으로 벽을 칠하기 위해 누구와도 타협할 필요가 없습니다. 결정을 직접 내리거나 기준에 맞는 사람을 고용하여 작업을 맡길 자유가 있습니다. 또한 거실에 어떤 에어컨을 놓을지도 원하는 대로 고를 수 있습니다. 다만 고장이 나면 수리 기사를 부르거나 무엇이 문제인지 파악하여 스스로 수리해야 한다는 점이 다릅니다(하지만 이것도 나쁘지 않습니다. 교훈을 얻을 수 있고, 배움은 좋은 것이니까요).

    이제 WordPress.com과 WordPress.org의 뚜렷한 차이점이 무엇인지 더 명확하게 파악하셨기를 바랍니다. 요약하자면 다음과 같습니다:

    원하는 만큼 설치할 수 있습니다 테마는 워드프레스 테마로만 제한되며, 광고를 제거하려면 일정 비용을 지불해야 합니다.사이트에 대한 거의 완전한 제어권을 갖습니다. 테마를 추가하거나 맞춤 설정하거나 직접 만들 수도 있습니다.

    콘텐츠 제어가 제한적입니다;

    WordPress.com WordPress.org
    워드프레스에서 전적으로 호스팅하며 모든 필수 요소가 제공됩니다. 자체 호스팅(설치형); 필수 요소를 직접 선택하거나 더 나은 요소를 선택할 수 있습니다.
    WordPress.com에서 제공하는 기능으로 제한됩니다 플러그인 형태의 수천 가지 기능;

    이는 두 가지 사이의 차이점을 따져볼 때 나오는 몇 가지 비교 사항입니다. 둘 중 하나를 선택하는 것은 궁극적으로 사이트를 제작할 때 얼마나 많은 자유를 원하는지, 그리고 이를 위해 얼마나 많은 리소스(시간, 노력, 비용 등)를 기꺼이 투입할 것인지에 달려 있습니다. 자신에게 가장 적합한 워드프레스 플랫폼을 결정하기 전에 이 두 가지 모두 반드시 면밀히 검토해야 할 중요한 선택지라는 점을 기억하세요. 그러니 성급하게 결정하지 마세요!

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

  • 왜 워드프레스일까요?

    Why-Wordpress기업이든, 프리랜서이든, 혹은 그 누구이든 간에 첫 웹사이트를 구축할 때 고려해야 할 중요한 한 가지는 모든 사람이 코드와 소프트웨어 개발 언어에 능숙한 것은 아니라는 점입니다. 예를 들어, 온라인에 자신의 레시피를 게시하고 싶은 셰프일 수도 있습니다. 또는 전문적인 포트폴리오가 필요한 미술학부생이거나, 자체 웹사이트가 필요한 스타트업 기업일 수도 있습니다. 어떤 경우이든 간에, 우리 중 일부는 코드의 기초에 익숙할 수 있지만 모두가 전업 개발자는 아니며, 웹사이트가 필요하거나 원하는 모든 사람이 처음부터 웹사이트를 만드는 방법을 아는 것은 아니라는 사실은 변함이 없습니다. 바로 이 부분에서 워드프레스(WordPress)가 유용하게 쓰일 수 있습니다. 이제 다음과 같은 질문이 생깁니다. “왜 워드프레스일까요?”

    이유 #1

    워드프레스는 콘텐츠 관리 시스템(CMS)으로, 사용하기 매우 편리합니다.

    가장 먼저 알아야 할 점은 워드프레스가 콘텐츠 관리 시스템(또는 CMS)이라는 것입니다. 더 쉽게 말해, 워드프레스를 사용하면 사용자가 코드를 처음부터 직접 작성하지 않고도 웹사이트를 만들 수 있습니다. 체계적이고 잘 정돈된 인터페이스를 갖추고 있어 매번 코드를 수정할 필요 없이 상황을 지속적으로 관리하고 확인할 수 있습니다.

    일반적으로 다음과 같이 시작하게 되는 맨땅에서부터의 웹사이트 구축과 비교해 보십시오:

    screenshot-1 콘텐츠 관리 시스템을 사용하면 다음과 같은 화면으로 시작할 수 있습니다:

    WordPress
    워드프레스의 백엔드 인터페이스. CMS를 사용하면 웹사이트 관리와 제작이 훨씬 쉬워집니다.

    하지만 이런 의문이 들 수도 있습니다. “워드프레스가 좋아 보이긴 하지만, 내 사이트에 필요한 기능이 없으면 어쩌지?”, 또는 “지도, 음악 플레이어, 캐싱 엔진, 혹은 더 안정적인 보안 시스템이 필요하면 어떻게 해야 하지?”

    …기술적으로 말하자면, 워드프레스에는 여러분이 원하는 그 기능이 이미 있을 가능성이 높으며, 이는 워드프레스 플러그인.

    이유 #2

    플러그인: 워드프레스 케이크 위의 화룡점정

    웹사이트에 원하는 특정 기능이 워드프레스에 포함되어 있지 않을까 봐 걱정되신다면 걱정하지 마세요. 이미 있을 가능성이 높습니다.

    플러그인은 워드프레스 사이트의 기능을 확장하기 위해 존재하는 ‘확장 기능’입니다. 사이트에 문의 양식이 필요한 사업가라면, 워드프레스 자체에는 해당 기능이 기본 탑재되어 있지 않다는 점을 알 수 있지만, 이를 지원하는 플러그인은 수없이 많습니다. 그리고 워드프레스는 오픈 소스이므로(누구나 개발에 기여할 수 있음을 의미), 새로운 플러그인이 정기적으로 제작됩니다. 원하는 문의 양식은 물론 그 이상을 얻을 수 있습니다. 소셜 공유 버튼부터 지도, 사이트를 위한 추가 보안 조치에 이르기까지 수많은 다른 기능과 확장 프로그램 중에서 원하는 플러그인을 자유롭게 추가할 수 있습니다. 정말 멋지지 않나요?

    현재 워드프레스에는 수천 개의 플러그인이 존재하며, PBS.

    이유 #3

    오픈 소스: 워드프레스 커뮤니티

    워드프레스는 오픈 소스입니다. 즉, 누구나 자유롭게 개발에 기여할 수 있으며, 누구나 기본 코드를 연구하여 소프트웨어 개발은 물론 워드프레스 자체에 대해 더 자세히 알아볼 수 있습니다. 플러그인이나 테마와 같은 워드프레스 관련 제품 제작 및 개발에만 전념하는 기업도 존재합니다(저희처럼요!).

    워드프레스는 오픈 소스이기 때문에 수많은 사용자, 개발자, 디자이너들이 지속적으로 협력하고 워드프레스 관련 문제에 대해 서로 도움을 주고받습니다. 이러한 방식으로 실제 사람들로부터 진정한 도움을 받을 수 있으며, 동시에 서로에게서 배울 수도 있습니다. 이는 일반적인 고객 서비스 지원에서는 거의 경험하기 힘든 부분입니다.

    이유 #4

    워드프레스는 검증되었습니다.

    CNN, 공식 스타워즈 블로그, 타임지, 심지어 (놀랍게도!) 비욘세에 이르기까지 수많은 곳에서 워드프레스로 구축된 사이트를 운영하고 있습니다. 워드프레스의 신뢰성을 증명하는 것은 이러한 유명 인사와 대기업뿐만이 아닙니다. Treehouse.com에 따르면 웹상에 존재하는 모든 사이트의 약 25%가 워드프레스로 구동된다고 합니다. 수백만, 수천만 개의 웹사이트가 존재한다는 점을 감안할 때… 25%는 정말 엄청난 숫자입니다.

    이유 #5

    다양한 맞춤 설정!

    워드프레스에는 여러분과 여러분의 사이트를 위한 수많은 테마가 준비되어 있습니다. 무료 버전, 프리미엄 버전 중에서 자유롭게 선택할 수 있으며, 직접 테마를 제작하거나(또는 제작을 의뢰할 수도 있습니다!).

    이유 #6:

    무료입니다.

    네, 맞게 읽으셨습니다. 로컬 개발 환경을 통해 WordPress를 완전 무료로 이용할 수 있으며, 버튼 클릭 한 번으로 컴퓨터에 설치할 수 있습니다. 마찬가지로, 개발자를 고용하는 대신 코딩에 대해 알고 있는 지식을 활용하여 WordPress의 작동 방식을 더 깊이 배울 수도 있습니다(배움은 언제나 좋은 것이니까요).

    …게다가 WordPress와 사이트 구축에 깊이 파고들 시간이 부족한 경우라면, 멋진 페이지 빌더 플러그인을 구해서 저희 제품을 한번 사용해 보실 수도 있습니다.

    WordPress에는 무한한 가능성이 있으며, 모든 작동 방식을 이해하는 데 천재가 될 필요는 없다는 점을 기억하세요!

    WordPress를 사용하면 많은 시간, 비용, 노력을 절약할 수 있습니다. 이러한 리소스가 부족한 상황이라면, WordPress 사이트와 플러그인(PBS 같은 플러그인!), 테마, 특히 커뮤니티가 여러분에게 큰 도움이 되어 훨씬 더 수월하게 만들어 줄 수 있다는 점을 잊지 마세요.

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

  • 웹사이트를 멋지게 만드는 5가지 간단한 팁

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    웹사이트의 디자인을 개선하기 위해 할 수 있는 몇 가지 기본적인 팁을 소개합니다.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    올바른 색상 선택하기

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    웹사이트의 색상 구성은 브랜드에 적합한 분위기와 톤을 조성하는 데 중요한 역할을 합니다. 보기 좋은 색상을 고른다고 해서 반드시 올바른 색상인 것은 아닙니다. 각 색상은 서로 다른 메시지와 반응을 전달합니다. 색상은 사이트 방문자가 가장 먼저 인지하는 요소 중 하나이며 실제로 웹사이트의 성공에 영향을 미칠 수 있습니다.

    디자인을 위해 기본 색상은 최대 2~3개만 선택하세요. 색상을 더 추가해야 한다고 느낀다면 기본 색상의 틴트(tint)와 셰이드(shade)를 활용할 수 있습니다. 색채 이론에서 틴트는 색상에 흰색을 섞어 밝기를 높이는 것이며, 셰이드는 색상에 검은색을 섞어 밝기를 낮추는 것입니다.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    대비되는 서체 사용하기

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    두 가지 서체를 조합하는 것은 디자이너에게도 어려울 수 있습니다. 하나의 서체 패밀리에서 서로 다른 두 가지 폰트를 활용하여 단순하게 유지할 수도 있습니다. 두 번째 서체가 꼭 필요하다면 첫 번째 서체와 뚜렷한 대비를 이루는 것을 선택하세요. 일반적으로 세리프(명조) 폰트와 산세리프(고딕) 폰트를 결합하면 잘 어울립니다. 또 다른 중요한 팁은 회사의 스타일에 맞는 서체를 선택하는 것입니다. 세상에서 가장 아름다운 폰트를 가지고 있더라도 잘못된 맥락에서 사용된다면 여전히 끔찍해 보일 수 있습니다.

    여백을 활용하여 깔끔하게 유지하기

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    모바일 친화적으로 만들기

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    추가 팁: 웹사이트에서 Page Builder Sandwich를 사용하면 자동으로 모바일 최적화 보기가 활성화되고 모바일 화면 크기에 맞게 조정됩니다.

    결론

    기억하세요: 디자인의 힘을 과소평가하는 것은 웹사이트를 구축할 때 저지를 수 있는 가장 치명적인 실수 중 하나입니다. 물론 웹사이트를 디자인할 때 과도하게 힘을 쏟을 필요는 없지만, 그동안 이 팁들을 따르는 것만으로도 사이트가 방문자에게 거부감을 주지 않도록 할 수 있습니다.

  • 페이지 빌더를 시작하기 전 고려해야 할 3가지

    3-Things-to-Consider-Before-Diving-Into-Page-Builders어쩌면 PBS가 웹사이트 제작을 위한 가장 빠른 지름길 중 하나라는 이야기를 듣고 이곳에 오셨을지도 모릅니다. 일반적으로 페이지 빌더는 작업을 더 수월하게 만들기 위해 존재하지만, 워드프레스 개발이라는 이 특별한 영역에 본격적으로 뛰어들기 전에 고려해야 할 몇 가지 사항이 있습니다.

    워드프레스 배우기: 페이지 빌더의 필수 전제 조건

    이는 이 목록에서 아마도 가장 뻔한 항목일 수 있지만, 여전히 가장 중요한 항목입니다. 안타깝게도 페이지 빌더는 단독으로 구매할 수 있는 것이 아닙니다. 페이지 빌더는 워드프레스 플러그인 형태로 제공되며, 이를 다루기 위해서는 설치하고 사용법을 익혀야 합니다. 안심하셔도 좋습니다. 워드프레스는 웹사이트를 제작하는 가장 쉽고 정석적인 방법 중 하나입니다. 우리가 살고 있는 시대를 고려할 때, 기술적인 내용을 알아두는 것을 결코 후회하지 않을 것입니다. WordPress.com과 WordPress.org 사이에는 차이점이 있으며, 자신의 필요에 맞는 것이 무엇인지 아는 것은 시간도 절약해 줍니다!

    하지만 이 글에 나오는 수많은 기술 용어 때문에 조금 주눅이 드시더라도 걱정하지 마세요. 시작하는 데 도움이 될 만한 유용한 사이트들이 몇 군데 있습니다. 그중에는 WordPress Codex와 Treehouse 가 있습니다. 이곳에는 사용자의 필요와 지식수준에 맞춘 워드프레스 팁과 웹사이트 제작 정보가 담겨 있습니다.

    확실히 알아보기 위해 먼저 시험 삼아 사용해 보세요

    나중에 후회하게 될지도 모를 큰 금액의 구매를 하기 전에 무료 및/또는 체험 버전을 사용해 보는 것은 언제나 현명한 방법입니다. 다행히도 대부분의 페이지 빌더는 무료/데모 버전을 제공합니다. 물론 수많은 페이지 빌더에 대한 신뢰할 수 있는 리뷰를 살펴볼 수도 있고, 다른 한편으로는 페이지 빌더들을 비교 분석해 볼 수도 있습니다. 옵션들을 꼼꼼하게 저울질해 보세요!

    글이나 리뷰를 살펴보는 것 외에도, 워드프레스의 장점 중 하나는 그 뒤에 거대한 커뮤니티가 든든하게 자리하고 있다는 점입니다. 동료 워드프레스 사용자들, 특히 여러분과 같은 신규 사용자들을 기꺼이 도와주고자 하는 개인, 팀, 심지어 기업들도 있습니다! 이 커뮤니티는 기본적으로 주고받기(기브 앤 테이크)보다는 도움의 릴레이(Pay-it-forward) 방식으로 운영됩니다.

    디자인이 큰 차이를 만듭니다

    워드프레스 애호가인 도나 폰테노 카발리에(Donna Fontenot Cavalier)는 드래그 앤 드롭 페이지 빌더와 기본 디자인의 중요성에 대해 매우 훌륭한 지적을 했습니다 . PBS와 같은 드래그 앤 드롭 빌더가 많은 시간을 절약해 줄 수는 있지만, 웹사이트를 제작할 때는 기본적인 노하우와 미적 감각에 대한 최소한의 어느 정도의 친숙함 또한 반드시 고려해야 할 중요한 요소입니다. 이런 상황을 상상해 보세요. 마음에 드는 멋진 페이지 빌더를 구했습니다. 정말 좋죠! 하지만 예술, 디자인, 기능성에 대한 안목이 별로 없는 편이라면: 이런, 곤란해집니다.

    하지만 걱정하지 마세요. Page Builder Sandwich는 단순한 페이지 빌더가 아닙니다. 저희 팀은 다른 워드프레스 사용자분들에게 도움을 드리는 일에도 전념하고 있습니다. 따라서 디자인과 관련해 약간의 어려움을 겪고 계시더라도 걱정하지 마세요. 여기 PBS 블로그에는 시작하는 데 도움이 될 유용한 팁이 가득한 글들이 많이 준비되어 있습니다. 그렇게 함으로써 더 많은 것을 하고, 더 많이 배우며, 걱정을 덜 수 있습니다.

    페이지 빌더에 대해 궁금한 점이나 우려 사항이 있거나 위의 내용과 관련된 질문이 있으시다면 언제든지 아래 댓글란에 의견을 남겨주세요. 저희는 고객 여러분을 돕는 일에 언제나 기쁨을 느낍니다.

    즐겁게 사이트를 제작해 보세요!

  • 간단한 3단계로 기본 히어로 헤더를 만드는 방법

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    히어로 헤더란 무엇인가요?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    첫 번째 PBS 히어로 헤더 제작을 시작하려면 아래의 간단한 단계를 따르세요:

    1단계: 열 삽입 및 행 너비 조정

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    2단계: 마진을 조정하여 여백 공간 만들기

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    3단계: 텍스트 및 요소 오버레이가 포함된 배경 추가

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    팁 #2: 브랜딩 요소의 경우 다채로운 배경 이미지와 겹쳐서 가독성을 해치지 않도록 흰색 또는 검은색 로고를 사용하는 것을 고려해 보세요.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    작업 내용을 저장하는 것을 잊지 마세요. 이제 모든 준비가 끝났습니다!

    PBS로 첫 번째 히어로 헤더를 완성하신 것을 축하합니다! 혹시 마음에 들지 않더라도 걱정하실 필요 없습니다. PBS를 사용하면 처음부터 다시 시작하는 것도 매우 쉬우므로 큰 어려움이 없을 것입니다.

    즐거운 웹사이트 제작이 되시기를 바랍니다!