Computer >> 컴퓨터 >  >> 네트워킹 >> 인터넷

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

편집 메뉴를 이리저리 뒤져보고 텍스트 모드와 비주얼 모드를 오가며 살펴봤지만, 결국 원하는 기능을 찾지 못한 경험이 있으신가요? 오랫동안 워드프레스를 사용해 왔다면 당연히 이런 기본 도구가 있을 거라고 생각하기 마련입니다. 상식적으로도 있어야 할 기능이죠.

하지만 없었습니다.

정말일까요? 세계에서 가장 인기 있는 CMS인데, 표(테이블)를 만드는 기능조차 없다고요?

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

다행히 워드프레스 환경에서는 어떤 기능이든 딱 맞는 플러그인이 한두 개씩 존재합니다.

익숙한 방법: TinyMCE Advanced

워드프레스에 표를 삽입하는 가장 일반적인 방법은 플러그인을 사용해 고급 편집 옵션을 '잠금 해제'하는 것입니다. 가장 널리 쓰이는 플러그인은 TinyMCE Advanced입니다. 워드프레스 관리자 화면의 '플러그인 → 새로 추가' 메뉴에서 손쉽게 설치할 수 있습니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

설치가 완료되면 편집 메뉴에 새로운 메뉴와 편집 옵션이 추가되어 한층 강력해진 것을 확인할 수 있습니다. 그중 하나가 바로 표 삽입 기능입니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

하지만 아래 이미지에서 볼 수 있듯이, 추가된 표는 단순한 행과 열로만 구성된 자리표시자(placeholder)에 불과합니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

이 정도면 충분하다면 TinyMCE Advanced만으로도 표 작업을 처리할 수 있습니다. 하지만 더 정교하고 기능이 풍부하며 보기 좋은 표를 만들고 싶다면 TablePress가 필요합니다.

TablePress 소개

이 플러그인 역시 워드프레스 공식 플러그인 저장소에서 제공됩니다. 간단히 검색하고 버튼 두 번만 클릭하면 바로 사용을 시작할 수 있습니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

다만 TablePress는 TinyMCE 옵션과 사용 방식이 조금 다릅니다. 글이나 페이지 안에서 직접 표를 삽입하고 내용을 채우는 대신, 먼저 표를 만들어 둔 후 숏코드(shortcode)로 불러오는 방식입니다.

이 방식의 가장 큰 장점은 글이나 페이지를 수정하지 않고도 표만 따로 업데이트할 수 있다는 점입니다.

표를 만들거나 수정하려면 워드프레스 관리자 화면 사이드바의 'TablePress' 메뉴를 사용하세요. 첫 화면에는 지금까지 만든 모든 표의 목록이 나타납니다. 아직 표가 없다면 새로 추가하거나 파일을 가져오기(import)부터 시작하면 됩니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

메뉴에는 여러 탭이 있으며 각각 고유한 기능을 담당합니다. '새로 추가(Add New)', '가져오기(Import)', '내보내기(Export)', '플러그인 옵션(Plugin Options)', '정보(About)'입니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

TablePress를 특히 유용하게 만드는 것은 표를 가져오고 내보낼 수 있는 기능입니다. 이미 만들어둔 스프레드시트가 있다면 워드프레스에서 다시 만들 필요가 없습니다. 반대로 TablePress에서 작성한 표를 워드프레스 밖에서 재활용할 수도 있습니다.

표 만들기와 삽입하기

표를 만들려면 '새로 추가' 탭을 클릭하고 표 이름과 설명을 입력한 뒤, 원하는 행과 열의 개수를 정합니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

'Add Table' 버튼을 클릭하면 표 ID가 포함된 숏코드가 생성됩니다. 이 코드를 글이나 페이지에 삽입하면 됩니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

표 내용을 입력한 뒤, 표 아래에 있는 다양한 옵션을 활용해 세부적으로 꾸밀 수 있습니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

모든 작업이 끝나면 페이지 하단으로 스크롤하여 '변경 사항 저장(Save Changes)'을 누르세요. 필요하다면 표를 복사하거나 내보내고 삭제할 수도 있습니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

그런 다음 표의 숏코드를 복사해, 표를 표시하고 싶은 글이나 페이지에 붙여넣으면 됩니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

TablePress는 TinyMCE의 빈약한 기본 표보다 훨씬 세련된 기본 디자인을 제공합니다. 여기에 CSS 스타일링을 더하면 완성도를 한층 높일 수 있습니다. CSS로 표의 모양을 조정하지 않으면 외관은 사용 중인 테마 디자인에 크게 좌우됩니다. 실제 게시글에 적용된 결과물은 아래와 같습니다.

워드프레스 게시글에 멋진 표(테이블)를 추가하는 방법 – 플러그인 활용 완벽 가이드

알아두면 좋은 추가 기능들

디자인만으로도 충분히 매력적이지만, TablePress는 기본적으로 몇 가지 유용한 부가 기능도 함께 제공합니다. 위의 결과 이미지를 보면 표 왼쪽 상단에 '10개 항목 보기(Show 10 Entries)' 옵션이 있습니다. 방문자는 이 드롭다운 메뉴로 한 번에 볼 행의 개수를 자유롭게 조절할 수 있습니다.

표 오른쪽 상단에는 '검색 상자(Search Box)'가, 오른쪽 하단에는 '이전/다음(Previous/Next)' 페이지네이션 버튼이 배치되어 있습니다. 여기에 더해 방문자는 각 열을 오름차순/내림차순으로 정렬할 수도 있습니다.

직장인에게 특히 유용한 또 다른 기능은 스프레드시트 앱에서처럼 표 안에 '수식(formula)'을 사용할 수 있다는 점입니다.

이 플러그인이 지원하는 기능은 무수히 많으니 직접 하나씩 살펴보며 모든 기능을 100% 활용해 보세요. 하지만 별도의 설정 없이도 TablePress만으로 일상적인 워드프레스 사용자의 요구를 충분히 만족시키기에 부족함이 없습니다.

대부분의 일반 워드프레스 사용자는 콘텐츠 작성 시 표를 자주 사용하지 않을 수 있지만, 필요할 때 TablePress가 든든하게 뒷받침해 줄 것이라는 사실을 알면 안심이 될 겁니다.