플러그인은 양날의 검


플러그인은 워드프레스 사이트에 새로운 날개를 달아주는 획기적인 도구입니다. 그렇지만 플러그인은 양날의 검을 가진 툴이기도 합니다.
워드프레스 운영자가 처음에 겪는 실수 가운데 하나는 플러그인에 감탄하면서 플러그인을 끊임없이 늘려가는 것입니다.
그렇지만 관리되지 않고 조금씩 늘어난 플러그인은 결국 워드프레스 사이트에 중대한 영향을 미치게 됩니다.
플러그인의 갯수가 서버 성능의 임계치에 달하면 웹사이트 속도는 급격히 저하되고 페이지 하나 열리는데 5초에서 10초이상이 걸리는 일이 발생하게 됩니다.

아무리 잘만들어진 사이트라 할지라도(그것이 쇼핑몰이든지 유명 뉴스진이든지) 느린 속도는 애써 확보한 고객과 구독자를 잃어버리는 지름길입니다.
느린 웹사이트는 인터넷 사용자들이 가장 싫어하는 웹사이트 접근성 요소 중의 하나이기도 합니다.

결국 운영자는 급한 마음에 사이트 속도 저하를 막기 위해서 비용을 들여가면서 호스팅 서버의 메모리를 늘려보고 SSD나 CDN등 여러가지 하드웨어적인 기술을 적용해보지만 결국 플러그인을 최적화 하지 않고서는 또 사이트 속도의 문제는 필연적으로 발생합니다.

그래서, 사이트 성능을 위해서 비용을 들이는 것보다 가장 먼저 해야하는 일은 평소에 플러그인을 최적화 상태로 유지하는 습관을 들이는 것이 중요합니다. 플러그인을 최적화 하고서도 시스템의 속도와 성능 문제가 발생한다면 테마나 프로그램 소스를 확인해야 하고 그렇게 해서도 문제가 해결되지 않는다면 그때가서 비용을 지불하고 하드웨어 증설이나 튜닝을 진행해도 늦지 않습니다. 성능을 위해서 가장 먼저 관심을 가져야 할 것은 역시 플러그인의 최적화 입니다.


훌륭한 플러그인 성능 측정 도구 P3 Plugin


정량적으로 몇 개까지의 플러그인이 사이트에 좋다라고 말할 수는 없습니다. 단 한개의 플러그인도 시스템 퍼포먼스와 자원을 소진시킬 수 도 있기 때문입니다. 플러그인의 성능을 점검하는데 많이 사용하는 유용한 도구는 P3 플러그인입니다.
P3 플러그인의 정확한 명칭은 Plugin Performance Profiler 입니다. 세 개 단어의 앞자리 영문 P자를 따서 P3라고 명명하였습니다.
명칭 그대로 플러그인의 퍼포먼스를 점검하는 도구입니다. 따라서 점검 도구인 P3 플러그인으로 플러그인의 자원 점유 현황을 그때 그때 점검하면서 플러그인의 유지와 삭제를 결정해야 합니다.

P3 플러그인 설치하기


왼쪽 사이드바 메뉴에서 플러그인 추가하기 메뉴를 클릭합니다.


플러그인 검색창에서 P3 Plugin 을 입력하고 엔터키를 칩니다. 첫 번째 검색된 P3(Plugin Perfamance Profiler)의 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭합니다.




P3 플러그인으로 성능 점검하기


왼쪽 사이드바 메뉴에서 도구를 클릭하면 아래 서브 메뉴로 P3 Plugin Profiler 라는 항목이 생성된 것을 확인할 수 있습니다. P3 Plugin Profiler 를 클릭합니다.



P3 플러그인의 관리 화면이 아래와 같이 뜹니다. 현재 워드프레스 사이트에 설치된 플러그인 갯수는 총 19개 입니다. 이제 성능 점검을 시작하기 위해서 왼쪽에 Start Scan 버튼을 클릭합니다.



Scan name 항목에 플러그인 자동 점검을 위한 작업 명칭을 작성할 수 있습니다. 날짜와 유니크아이디로 sacn 작업 명칭이 생성되므로 그대로 두고 Auto Scan 버튼을 클릭합니다.



P3가 자동으로 워드프레스 사이트의 모든 플러그인 항목을 스캔하면서 아래 화면과 같이 점검하고 있습니다.



플러그인에 대해서 모든 점검이 끝나면 아래와 같이 View Results 버튼이 나타납니다. View Result 버튼을 클릭합니다.



플러그인에 대한 성능 점검이 모두 완료되고 아래와 같이 플러그인 성능 점검 리포트가 제공됩니다. 오렌지 박스에 있는 점검 결과를 왼쪽부터 순서대로 보겠습니다.

첫번째 항목은 사용자가 웹사이트 방문시 플러그인이 로드되는 시간으로 1.456초 입니다. 튜닝이 필요한 로드시간 입니다.
두번째 항목은 페이지가 로딩되는데(열리는데) 플러그인이 미치는 영향도로 89.9% 입니다. 두번째 역시 플러그인의 영향도가 높은 것을 알 수 있습니다.
세번째 항목은 사용자가 웹사이트 방문시 실행되는 MySQL 데이터베이스의 쿼리 수행 갯수로 60개의 방문자당 60개의 DB 쿼리가 수행되는 것을 나타냅니다. 



Runtime by Plugin


이제 첫번째 탭인 Runtime by Plugin 항목을 알아보겠습니다. 이 화면에서는 플러그인의 영향도를 쉽게 확인할 수 있는 원형 인포그라피로 어떤 플러그인의 영향도가 높은지를 정량적으로 시각화해서 확인할 수 있습니다.

눈으로 보아도 단번에 보라색과 노란색인 Kboard와 킹콩보드가 전체 플러그인의 70% 이상의 성능 자원을 점유하고 있음을 알 수 있습니다. 플러그인을 실습하느라 게시판 플러그인을 여러개 설치한 것이 자원을 상당부분 점유하였습니다. 일반적으로 게시판 플러그인은 자원을 많이 소진시킵니다. 다른 나머지 플러그인들을 모아 놓은 오렌지색의 Other는 플러그인의 갯수는 많아도 영향도가 크지 않음을 알 수 있습니다.



원형 도형 그래프에서 각 항목이 개별적으로 얼마만큼의 메모리 자원을 점유하고 있는지 확인하려면 원형 도형 위에 마우스를 올려놓으면 됩니다. KBoard 위에 마우스를 가져다 댑니다. KBoard 플러그인은 아래 화면에서와 같이 47%의 메모리 자원을 점유하고 있으며 플러그인 로딩 시간은 0.6854초가 걸립니다. 다른 플러그인도 이렇게 개별적으로 성능 점검을 할 수 있습니다.

또한, Email these results 링크를 클릭하면 점검 결과를 이메일로 전송할 수도 있습니다.



코어, 테마를 포함한 자원 점유 현황 확인


플러그인 뿐 아니라 워드프레스 시스템에 대한 전체적인 자원 점유 현황을 확인하기 위해서는 두 번째 탭인 Detailed Breakdown 탬을 클릭합니다. Detailed Breakdown을 보면 전체적인 사이트 로드 시간과 워드프레스 코어와 테마가 시스템 메모리 자원을 얼마나 점유하는지 그래프로 쉽게 확인할 수 있습니다. 



워드프레스 시스템의 메모리 점유 현황


워드프레스 시스템을 호스팅 받아서 사용하고 있다면 반드시 확인해야 하는 항목이 있습니다. 바로 메모리 사용 현황입니다. 메모 리 사용 현황을 확인하기 위해서는 맨 오른쪽에 Advanced Metrics 탭을 클릭해서 확인합니다. Memory Usage 부분이 워드프레스가 사용하고 있는 메모리 자원의 사용량입니다. 현재 96.58MB 입니다. 메모리 관리가 중요한 것은 호스팅에서 사용자의 메모리 사용량을 제한하기 때문입니다. 호스팅에서 제한하고 있는 메모리 Max 값을 초과하게 되면 시스템은 일종의 Out of Memory 에러를 발생할 수 있습니다.



플러그인 성능 점검 이력 보기


플러그인의 성능 점검 이력을 확인하기 위해서는 아래와 같이 두번째 History 탭을 클릭하면 됩니다. 아래 화면에서 보는 것 처럼 P3 플러그인으로 성능 점검한 이력이 목록화 되어서 나타납니다. 따라서 플러그인이 추가되거나 삭제되어도 정기적으로 성능 점검을 하였다면 서로 비교하면서 플러그인의 영향도를 평가할 수 있습니다. 

목록에서 점검했던 이름을 클릭합니다.



이력 상세화면에서 점검했던 결과 전체를 언제든지 다시 확인할 수 있습니다.




알림판 메뉴

워드프레스를 설치하고 관리자 계정으로 로그인하면 처음 나타나는 화면이 알림판 화면입니다. 왼쪽에 알림판 메뉴를 클릭해도 아래와 같은 알림판 화면이 나타납니다. 알림판은 대시보드(Dashboard)라고 생각하면 더 이해하기 쉬울수도 있습니다. 대시보드는 모든 현황을 한 분에 볼 수 있는 워드프레스의 상황실입니다. 자동차 계기판이 자동차의 전체적인 상황을 보는 곳이라 생각하면 알림판은 워드프레스의 전체적인 현황을 보는 워드프레스 계기판인 것입니다.



알림판, 외모 등의 용어가 아직은 익숙하지 않습니다. 그렇지만, 계속해서 꾸준히 워드프레스를 사용하다가 보면 국제적인 시각에서 만들어진 대표적인 CMS(Content Management System)인 워드프레스의 구조와 개념에 자연스럽게 익숙해질 것입니다. 세계에서 가장 많이 사용하는 CMS 솔루션을 시간을 내서 공부하는 것은 절대 손해보는 일은 아닙니다. 현재까지는 국내에서는 네이버 블로그가 블로그 플랫폼 시장에서는 1위를 달리고 있지만 언제까지 국내 1위 일지는 아무도 장담할 수 없는 일입니다.

알림판 화면 구성하기

오른쪽 상단에 화면옵션이라는 메뉴를 클릭하면, 알림판 화면의 구성을 재배치하거나 조정할 수 있습니다. 
화면 옵션을 클릭합니다.



화면 옵션을 클릭하면 화면에 보여주기라는 설정 화면이 나타납니다. 화면에 보여주고자 하는 부분을 체크하거나 해제할 수 있습니다. 체크하거나 해제함으로써 화면 구성이 변경되는 것을 확인 할 수 있습니다.




아래와 같이 화면에 보여주기에서 빠른 임시글과 워드프레스 뉴스의 체크박스를 해제합니다.



다음과 같이 체크 해제된 부분이 알림판 화면에서 사라진 것을 확인할 수 있습니다. 



알림판 화면 재배치하기

알림판의 각 항목을 재배치 하는 방법은 간단합니다. 만약 아래 사이트 현황 부분을 오른쪽 빈 점선 부분으로 옮겨 놓으려고 한다면, 사이트 현황 박스의 상단 제목바 부분에 마우스를 가져다 댑니다. 그러면 마우스 커서가 십자 모양으로 변경이 됩니다.



마우스 커서가 십자 모양으로 변경된 상태에서 마우스로 드래스해서 옮겨 놓으면 됩니다.



사이트 현황 제목바 부분을 클릭해서 오른쪽 빈 점선 부분으로 드래그 합니다.
반드시 점선 부분에 옮겨 놓지 않아도 됩니다. 점선이 아니더라도 드래그해서 이동할 곳으로 옮기면 옯겨집니다. 직접 드래그 해보면 옮겨지는 곳과 그렇지 않은 곳을 알게 됩니다.



사이트 현황이 오른쪽으로 이동된 것을 확인할 수 있습니다. 
화면 배치를 마우스 드래그를 통해서 간단하게 작업 하였습니다. 워드프레스는 이렇게 드래그를 이용해서 작업하거나 관리하는 부분이 많이 있습니다. 메뉴나 플러그인등에서도 드래그를 이용한 작업이 많이 있어서 워드프레스는 관리자가 CMS를 관리하고 사용하기에 무척 편리하게 제작되어 있습니다.





관리자 화면 구조 파악하고 테마 바꿔보기

지난 시간에 로컬 컴퓨터에 오토셋과 워드프레스를 모두 설치 및 설정을 완료하였습니다. 
워드프레스 설치가 완료되고 나면, 웹브라우저인 크롬이나 익스플로러에 http://localhost/wordpress 입력함으로 자신이 설치한 워드프레스 사이트에 접속할 수 있습니다.

웹브라우저를 열고 http://localhost/wordpress로 접속합니다. 화면에 다음과 같은 화면이 나타납니다.
이 화면은 워드프레스 4.2.2. 버전 설치시 기본으로 적용되어 있는 Twenty Fifteen 테마가 적용된 화면입니다.

Twenty Fiftteen 테마 적용 화면)



위의 그림에 나타난 워드프레스 사이트는 자신의 로컬PC에 설치한 것으로 아직까지 인터넷 상에서 다른 사람들이 볼 수는 없습니다. 웹호스팅 서비스하는 서버에 워드프레스를 별도로 설치하거나 자신의 로컬PC에 있는 워드프레스 화일들을 FTP를 사용해서 웹호스팅 서버에 파일을 업로드하고 호스팅을 위한 설정을 완료한 뒤에 다른 사람들에게도 보여지는 것입니다.

워드프레스 4.2.2 Powell 버전 설치시 기본 테마는 Twenty Fifteen 입니다.



Twenty Fifteen 테마는 홈페이지 느낌보다는 블로그 느낌이 강한 테마입니다. 이 테마는 워드프레스 4.1 버전이후에 탑재되었습니다.
여기서는 블로그보다 웹사이트 느낌이 있는 워드프레스 3.8 버전이후에 탑재된 Twenty Fourteen 테마를 사용하겠습니다.



테마를 변경하기 위해서는 워드프레스 관리자 화면에 로그인 해야합니다.
워드프레스 관리자 화면은 웹브라우저 주소창에 http://localhost/wordpress/wp-admin URL로 접속할 수 있습니다.
접속 경로 중에 wp-admin 부분이 있는데 이 부분은 향후 워드프레스 보안을 위해서 다른 이름으로 변경하는 것이 좋습니다.
변경 방법은 차후 보안 관련 포스팅에서 설명하도록 하겠습니다.

웹브라우저에서 http://localhost/wordpress/wp-admin 로 접속합니다. 로그인 할 수 있는 화면이 나옵니다.




워드프레스 설치 시 자신이 설정했던 사용자명과 비밀번호를 입력합니다. 입력이 완료된 뒤 로그인 버튼을 클릭합니다.




관리자 화면 구조 파악하기

워드프레스 관리자 화면입니다. 관리자 화면에서는 워드프레스 사이트를 자신의 원하는데로 변경하고 설정할 수 있는 모든 기능을 가지고 있습니다. 관리자 화면은 크게 세 가지 부분으로 나누어집니다. 첫번째, 관리자 메뉴 부분. 두번째, 알림판 사이트 현황 부분. 세번째, 자주 사용하는 기능을 모아 두는 상단 툴바 부분입니다.



1번 영역 : 관리자 메뉴
2번 영역 : 알림판 사이트 현황
3번 영역 : 자주 사용하는 기능을 모아 놓은 상단 툴바



대부분 우리나라 사람들은 티스토리나 네이버 블로그에 익숙해져 있습니다.
티스토리나 네이버 블로그에 익숙한 유저에게 워드프레스 관리자 화면은 어렵게 느껴지기 마련입니다.
워드프레스 관리자 화면에 처음 접할 때 어렵다고 느껴지는 이유는 화면 구조가 생소하고 익숙하지 않은 용어 때문입니다. 그렇지만 자주 접하면 워드프레스 화면과 용어도 금세 자기 것처럼 익숙해지게 됩니다. 


관리자 화면에서 사용자 화면으로 전환하기

관리자 화면에서 사용자 화면으로의 이동은 상단 툴바를 사용하면 간단히 화면 전환이 가능합니다.
워드프레스 화면의 왼쪽 상단에서 자신의 사이트이름에 마우스를 가져다 되면, 사이트보기라는 메뉴가 아래로 펼쳐지고 사이트보기를 클릭하면 사용자 화면으로 전환하게 됩니다.
마우스를 자신의 사이트이름 위에 가져다 댑니다.



그러면 아래 화면과 같이 사이트 보기라는 메뉴가 보입니다. 사이트보기를 클릭합니다.





사이트보기를 클릭하면, 다음과 같이 웹사이트가 나옵니다. 다시 관리자 화면으로 되돌아 가려면 왼쪽 상단의 웹사이트명을 클릭하면 됩니다. 웹사이트 명을 클릭합니다.





기본 테마 변경하기

다시 관리자 화면으로 돌아왔습니다. 이제는 블로그 느낌이 많이나는 Twenty Fifteen 테마 대신에 조금더 일반 웹사이트 느낌에 가까운 Twenty Fourteen 테마로 기본 테마를 변경 하겠습니다.



왼쪽 관리자 메뉴에서 외모 부분에 마우스를 올려놓습니다. 다음과 같이 오른쪽 방향으로 외모에 대한 세부메뉴가 펼쳐지는 것을 볼 수 있습니다. 



테마 부분을 마우스로 클릭합니다.




테마를 관리하는 화면이 나타납니다. 오른쪽에는 설치된 테마가 어떤 것들이 있는지 나타납니다. 아직까지 우리에게 테마라는 용어가 익숙하지 않을 수 있습니다. 테마는 영어 Theme 으로 우리가 이해하기 쉽게 표현하자면 스킨이라고 보아도 무방합니다. 현재 적용된 테마는 맨 왼쪽 상단에 위치하게 되며, 활성화 라고 표시가 되어있습니다. 활성화 되어있는 테마가 현재 웹사이트에 적용된 테마입니다.



현재는 기본 테마인 Twenty Fifteen 테마가 적용되어있습니다. 테마를 변경하는 것은 간단합니다. 원하는 테마를 클릭하고 활성화 버튼을 클릭하면 모든 작업이 끝납니다. 세부적이 설정부분도 있지만, 그 부분은 상세 설명시에 다루도록 하겠습니다.

가운데 Twenty Fourteen 테마 부분에 마우스를 가져다 댑니다.



Twenty Fourteen 부분에 마우스를 가져다 대면 다음과 같이 화면이 변경됩니다. 여기서 활성화 버튼을 클릭하면 바로 테마가 변경됩니다. 활성화 버튼을 클릭합니다.




두 번째에 있던 Twenty Fourteen 테마가 첫 번째로 오면서 활성화 되었음을 확인할 수 있습니다. 




그럼 왼쪽 상단에 사이트보기를 클릭해서 웹사이트 화면으로 이동하겠습니다. 사이트 보기를 클릭합니다.




웹사이트 화면이 변경되었습니다. 일반적으로 워드프레스에서 글을 쓰고 작업을 할 때, 워드프레스 관리자화면과 웹사이트 화면을 자주 왔다갔다 해야합니다. 포스팅을 위한 글을 쓰거나 테마나 플러그인을 설치해도 변경되고 적용된 결과는 웹사이트 화면을 통해서 확인이 가능하기 때문입니다.




관리자 화면과 웹사이트 화면 편리하게 사용하기

관리자 화면에서 왼쪽 상단에 사이트보기를 눌러서 화면을 전환하게 되면 지금 보고 있는 화면이 사라집니다. 관리자 화면이 사용자 화면으로 전환되면서 관리자 화면이 사라지게 되는 것입니다. 이러면 관리자 화면에서 작업을 계속할 때 필요할 때마다 관리자 화면을 웹브라우저에서 열어야 되므로 불편합니다. 이때는 아래 세 가지 방법을 사용하는 것이 편리합니다.

첫 번째 방법, 새 탭으로 열어서 작업하기

왼쪽 상단 사이트명에 마우르를 가져다대고 마우스 오른쪽 버튼을 클릭하면 다음과 같은 화면이 나옵니다. 여기서 '새 탭에서 링크 열기'를 클릭하면 됩니다. 새 탭에서 링크 열기를 클릭합니다.




다음과 같이 새 탭이 열릴 것이고, Ctrl + Tab을 눌러서 화면 전환을 하면서 사용하면 됩니다.





두번째 방법, 새 창으로 열어서 작업하기

이번에는 새 창으로 링크 열기를 클릭합니다. 이때는 별도의 새창이 열립니다. 새창이 열렸으므로 작업시에는 Alt + Tab 키를 단축키로 사용해서 화면 전환을 하면서 사용하면 편리합니다.




세번째 방법, Ctrl 키를 클릭해서 새 Tab을 띄우는 방법

저의 경우 이 방법이 가장 편리해서 자주 사용합니다. 키보드에서 Ctrl 키를 누른 상태에서 마우스로 자신의 사이트이름을 클릭하는 것입니다. Ctrl 키를 누른 상태에서 사이트이름을 클릭합니다. 오른쪽에 관리자 화면 탭이 생성된 것을 확인할 수 있습니다.


Ctrl 키를 누른 상태에서 사이트명을 누르면 사용자 화면은 관리자 화면을, 관리자 화면은 사용자 화면을 새 탭을 열어서 띄우게 됩니다. 토글 기능처럼 간편하게 사용할 수 있습니다.


+ Recent posts