페이지 빌더 없이 UI 요소 추가하기

포스트(글)나 페이지에 UI 요소를 추가할 일이 종종 생깁니다. 그런데 ’UI 요소’가 뭐냐구요? 예를 들면 버튼이나 폼, 목록(list)이나 카드, 카로젤(carousel) 같이, 웹페이지에추가되어 사용자에게 어떤 의미있는 효과를 주거나 사용자와 인터페이스 역할을 하는 각종 컴포넌트를 말합니다.

이런 UI 요소들을 내 포스트나 페이지에 추가할 때 어떻게 하면 좋을까요?

얼핏 떠오르는 간단한 방법 하나는 페이지 빌더(Page Builder)를 사용하는 것입니다. 대부분의 페이지 빌더는 다양한 UI 요소를 제공하며 또한 위지윅(WYSIWYG) 방식으로 바로 포스트나 페이지 속에 쉽게 붙여 넣을 수 있는 기능을 지원합니다.

페이지 빌더 플러그인

하지만 페이지 빌더는 오늘 글의 주제는 아닙니다. 페이지 빌더 없이, 좀 더 간단하게 내 워드프레스 사이트에 UI 요소를 추가하는 방법은 없을까요?

그게 오늘 다룰 내용입니다.

HTML과 CSS 직접 다루기

첫 번째 방법은 직접 HTML 코드와 CSS 스타일을 다루는 방법입니다. 예를 들어 내 포스트 속에 간단하게 공지사항을 안내하는 노트(note) UI 요소를 하나 추가한다 해 보죠. (아래 노란 색상 박스)

— 예시 글 출처: http://thekeyground.com/dimaconcept1/

관리자 대시보드의 글 편집기에서 다음과 같이 노트 UI 요소를 적용할 영역을 <div> 태그로 감싸고 임의의 class 명을 추가합니다. 여기서는 note note-alert 이라고 주었지만 뭐든 상관 없습니다. 스타일을 적용할 수만 있으면 됩니다.

이제 CSS 편집기로 가서 이 UI 요소에 맞는 CSS 스타일을 적용해 줍니다. 예를 들면 다음과 같은 식이죠.

.note {
  padding: 1em;
  border: 1px solid #ccc;
  margin-bottom: 1em;
}
.note.note-alert { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }

이렇게 하면 이제 노트 UI 요소가 내 웹사이트에 적용됩니다. 만약 노트 아닌 다른 UI 요소를 추가할 경우라도 방법은 똑같습니다. 글 편집기에서 HTML 코드를 추가하고 그에 맞춰 CSS 스타일을 적용하는 방식. 네, 맞습니다! 통상적인 웹 UI 개발에서 흔히 사용하는 일반적인 방식 그대로죠.

하지만 이 방식의 단점은 무엇보다 번거롭다는 점입니다. 일일이 UI 요소가 필요할 때마다 글을 편집하여 HTML 코드를 추가하고 또 스타일시트도 만들고 관리하는 일이 여간 성가신 일이 아니죠. 특히 관리할 사이트 규모가 크거나 UI 요소의 유형이 다양해 질수록 말이죠.

UI Kit 적용하기

이와 같은 UI 요소들을 한데 모아 하나의 라이브러리 형태로 만들어 놓은 것이 UI Kit 입니다. 시중에는 멋진 UI Kit 라이브러리들이 많이 나와 있고, 대부분이 오픈소스 라이선스를 달고 있어 내 사이트에 바로 적용해 사용할 수 있습니다.

다음과 같은 UI Kit 들이 대표적이지만, 이 밖에도 많이 있으니 검색하면 입맛에 맞는 UI Kit을 어렵지 않게 찾을 수 있을 것입니다.

• Bootstrap
• Foundation
• Semantic UI
• UIkit
• Bulma

이들 UI Kit 중 하나를 내 워드프레스 사이트에 적용하면 해당 UI Kit에서 제공하는 여러 가지 UI 요소들을 내 웹사이트 내에서 바로 사용할 수 있습니다. 별도 스타일링은 필요 없죠.

여기서 이들 UI Kit의 적용방법은 따로 다루지는 않겠습니다. 이들 중 하나인 Twitter Bootstrap을 워드프레스에 적용하는 방법에 대해서는 이미 다룬 적이 있으니 아래 글을 참고하면 됩니다. 다른 UI Kit들의 적용 방법도 대개 비슷합니다.

워드프레스 테마에 Bootstrap 적용하기

이 방법의 단점은 아무래도 적용이 좀 까다로울 수 있다는 점이죠. 게다가 적용한 UI Kit이 사용 중인 테마의 UI와 상충하여 종종 테마의 스타일이 깨질 수도 있기 때문에 주의해서 사용할 필요가 있습니다.

UI 숏코드 플러그인 사용하기

맞습니다. “기.승.전.플러그인” 입니다. 워드프레스에는 언제나 플러그인이 따라 다니죠! 워드프레스 플러그인들 중에는 UI 요소를 숏코드(short) 방식으로 추가할 수 있게 해주는 좋은 플러그인들이 이미 여럿 나와 있습니다.

예를 들면 다음과 같은 것들이죠.

• Shortcodes Ultimate | WordPress.org
• Intense WordPress Shortcode Plugin
• WordPress Shortcodes | WordPress.org

이 중 하나 Shortcodes Ultimate을 사용해 보겠습니다. 앞서 표현한 공지사항 노트를 이번엔 Shortcodes Ultimate 에서 제공하는 숏코드 방식으로 적용해 봅니다.

Shortcodes Ultimate 플러그인 설치 후 글 편집기에는 “Insert shortcode” 라는 버튼이 추가됩니다. 이 버튼을 클릭하면 다음과 같이 숏코드를 선택할 수 있는 팝업창이 뜹니다.

Shortcodes Ultimate는 정말이지 다양한 UI 요소를 제공하는데 이 중 우리가 사용할 “Note”를 클릭하면 아래와 같이 노트의 여러 가지 스타일을 조정할 수 있는 화면이 뜹니다.

필요한 내용을 입력하고 팝업창 하단의 “Insert shortcode” 버튼을 누르면 다음과 같이 숏코드가 글 편집기에 추가된 것을 확인할 수 있습니다.

끝입니다. 간단하게 노트 UI 요소가 적용되었네요!

Shortcode Ultimates 같은 이런 UI 숏코드 플러그인을 사용할 경우 단점은 내게 불필요한 UI 요소들까지 갖고 있어야 한다는 점, 그리고 UI 요소를 적용할 때마다 일일이 요소의 여러 옵션값들을 셋팅해 줘야 한다는 점 정도입니다.

어느 게 더 좋냐구요? 그때 그때 다르겠죠. 🙂