숏코드는 워드프레스의 가장 뛰어난 기능 중 하나입니다. 숏코드는 개발자와 사이트 제작자 사이의 가교 역할을 하여, 사용자가 원하는 거의 모든 곳에 정교한 콘텐츠를 배치할 수 있도록 해줍니다. 플러그인 제작자들은 사용자가 콘텐츠를 표시하는 방식과 위치에 더 많은 유연성을 부여할 수 있기 때문에 숏코드를 매우 좋아합니다.
숏코드가 무엇인지, 어떻게 생겼는지 잘 모르신다면, 대괄호로 둘러싸인 고전적인 코드 형태의 텍스트를 떠올리시면 됩니다. 대략 다음과 같이 생겼습니다:
이 특정 숏코드는 임베드(embed) 숏코드라고 불리며 워드프레스에 기본적으로 내장되어 있습니다. 이 숏코드는 URL의 동영상을 콘텐츠에 삽입해 줍니다. 한 번 사용해 보고 싶다면 위 숏코드를 복사하여 사이트에 붙여넣기만 하면 됩니다.
보이지 않는 곳에서는 워드프레스가 콘텐츠 내에서 숏코드를 발견하면, 이를 처리하여 다른 요소로 변환하는 작업이 일어납니다. 위의 경우,
숏코드가 감지될 때마다 워드프레스는 숏코드 안의 URL을 가져와 보유한 여러 콘텐츠 제공자 목록과 대조합니다. 일치하는 항목을 찾으면 적절한 iframe 임베드 코드를 가져와 대신 표시합니다.
그렇다면 여기서 무엇이 문제일까요? 대괄호가 있는 짧은 텍스트만 입력하면 되니 아주 간단해 보입니다.
이제 숏코드 API(Shortcode API)가 등장합니다..
넘쳐나는 숏코드
숏코드 API는 개발자들에게 숏코드 제작의 길을 열어주었습니다. 이 덕분에 개발자들은 자신이 만든 플러그인 내에 고유한 숏코드를 추가할 수 있게 되었습니다.
코드 형태의 짧은 스니펫(그래서 “숏코드(shortcode)”라는 이름이 붙음) 하나만으로 초보자와 고급 사용자 모두 원하는 거의 모든 유형의 콘텐츠를 어디든 배치할 수 있게 되었으니 정말 훌륭한 일입니다.
워드프레스에는 기본적으로 소수의 숏코드만 들어 있습니다. 몇 개 되지 않기 때문에 기억해서 직접 타이핑하기도 쉽습니다. 하지만 플러그인을 몇 개 설치하기 시작하면 숏코드의 수는 순식간에 십여 개 이상으로, 경우에 따라서는 백 개 넘게 늘어납니다. 각 숏코드는 고유한 속성(attribute) 모음과 사용법을 가지고 있습니다. 대부분의 플러그인은 모든 숏코드가 작동하는 방식과 각 숏코드에서 사용할 수 있는 매개변수를 나열한 설명서를 제공합니다. 하지만 그 모든 숏코드와 속성을 전부 외우려고 한다면 제정신이 아닐 것입니다.
문제는 사이트에서 사용할 수 있는 모든 숏코드와 그 사용법을 한눈에 확인할 수 있는 통합된 공간이 없다는 점입니다.
문제를 해결하려는 몇 가지 시도
일부 플러그인은 접근하기 쉬운 드롭다운 메뉴에 자체 숏코드를 모두 표시하여 이 문제를 해결하려고 시도합니다. 그중 하나를 클릭하면 해당 숏코드에 가능한 모든 속성이 포함된 상태로 출력됩니다. 더 이상 외울 필요가 없으니 좋은 방법입니다.
어떤 플러그인은 한 걸음 더 나아가 체크박스와 색상 선택기가 포함된 설정 팝업 양식을 추가하여 숏코드의 속성을 채울 수 있도록 지원합니다.
이 솔루션은 어느 정도 효과가 있습니다. 하지만 각 플러그인은 자체 숏코드만 나열합니다. 따라서 각 플러그인이 저마다 고유한 형태의 숏코드 선택기를 만든다면, 화면에 여러 개의 숏코드 선택기가 동시에 나타나는 상황을 겪게 마련입니다(저 역시 이전에 겪어본 일입니다).
즉, 각 플러그인이 각자의 방식대로 행동하며 자신의 숏코드만을 위한 자체 솔루션을 구현하는 것입니다. 어떤 플러그인은 “미디어 추가” 버튼 옆에 새 버튼을 추가하기도 하고, TinyMCE 에디터 내부에 새 버튼을 추가하기도 합니다.
이쯤 되면 “다른 플러그인의 숏코드도 함께 모아서 드롭다운이나 숏코드 선택기에 포함하면 되지 않을까?”라는 생각이 들 수 있습니다. 네, 저도 정확히 그렇게 생각했습니다. 하지만 말은 행동보다 쉬운 법입니다. 그 이유는 잠시 후에 설명하겠지만, 먼저 이상적인 해결책이 어떤 모습일지 살펴보겠습니다.
이상적인 해결책
완벽한 계획은 사이트에서 사용 가능한 모든 숏코드를 모은 뒤 목록으로 보여주고 모든 속성을 입력할 수 있도록 도와주는 플러그인을 만드는 것입니다. 그리고 새 플러그인을 설치할 때마다 새로 추가된 모든 숏코드도 함께 표시되는 방식입니다.
모든 숏코드가 쉽게 접근할 수 있도록 한곳에 모여 있는 중앙 공간을 상상해 보십시오. 각 숏코드는 어떤 역할을 하는지, 어떤 플러그인에 속해 있는지 설명되어 있습니다. 그리고 사용 가능한 각 속성에 대해 레이블, 값을 선택하는 적절한 방법, 설명이 제공된다고 상상해 보세요. 드롭다운, 색상 선택기, 라디오 버튼, 토글 등이 표시될 것입니다.
이러한 것이 있다면 웹사이트 및 콘텐츠 제작자로서 우리의 삶은 훨씬 편해질 것입니다. 사용하고 싶은 슬라이더의 생성된 숏코드 하나를 복사하려고 여러 설명서를 찾아보거나 관리자 페이지의 이곳저곳을 헤맬 필요가 더 이상 없어집니다.
주의해야 할 한계점
안타깝게도 현재로서는 이러한 기능을 구현하기가 매우 어렵습니다. 숏코드의 모든 세부 정보를 알아낼 수 있는 확실한 방법이 없기 때문입니다. 모든 숏코드의 목록을 가져올 수는 있지만 실제 태그/이름만 알 수 있을 뿐, 속성 목록, 기능, 속성의 유형(문자열, 색상, 숫자 등)과 같은 추가 세부 정보는 얻을 수 없습니다. 각 속성에 대한 간략한 설명조차 얻을 수 없습니다.
개발자분들을 위해 덧붙이자면: 네, shortcode_atts 함수에 새로 추가된 세 번째 인자가 있기는 하지만, 이는 필수 인자가 아닙니다. 따라서 전 세계의 모든 플러그인 개발자가 이를 구현하지 않는 한, 숏코드의 모든 속성을 알아낼 수 있는 확실한 방법은 여전히 존재하지 않습니다.
숏코드 API는 숏코드 설명 추가, 속성 타입 캐스팅, 속성 설명을 추가하기 위한 어떠한 기능도 제공하지 않습니다. 그리고 워드프레스 자체가 숏코드에 접근할 수 있는 중앙 공간을 추가하지 않는 한, 이러한 기능이 만들어질 가능성은 희박해 보입니다.
결론
현재로서는 숏코드를 정리하는 작업이 각 개발자의 몫으로 남아 있습니다. 워드프레스 내에서 중앙 집중식 방식이 개발되지 않는 한, 백엔드에서 여러 개의 “숏코드 추가” 버튼을 계속 마주하게 될 것입니다. 이러한 기능을 워드프레스 코어에 추가해야 하는지 여부는 그 자체로 또 다른 거대한 논쟁거리입니다.
대안
이 문제를 다른 방식으로 다루는 페이지 빌더 플러그인들이 있습니다. 프로그래밍 방식으로 숏코드를 감지하는 대신, 사용자가 숏코드의 모든 세부 정보를 수동으로 입력할 수 있는 숏코드 매퍼를 제공합니다. 작업이 완료되면 페이지 빌더 내에서 해당 숏코드를 사용할 수 있게 됩니다. 이 방법이 효과가 있기는 하지만, 해당 사이트 내에서만 사용할 수 있습니다.
여기 Page Builder Sandwich에서는 이 숏코드 난제를 해결할 수 있기를 바라며 무언가를 제작하고 있습니다. 진행 상황에 대한 알림을 받으시려면 아래의 뉴스레터를 구독해 주세요.