적용버전 : XE Ver 1.5 or higher 애드온 추가하기

애드온 추가하기

간섭쟁이 애드온(addOn)

애드온은 코어와 모듈의 동작 사이에 끼어들어 자신의 기능을 수행하는 작은 프로그램입니다. 애드온을 켜고 끈다는 뜻은 전기 스위치처럼 ON/OFF의 개념과 같기 때문입니다. 애드온은 자신이 간섭할 모듈의 대상을 선택할 수도 있고 모든 모듈을 대상으로 할 수도 있습니다.


팝업 모듈과 팝업 오프너 애드온 설치하기

다음 내용에서 예제로 다룰 애드온은 팝업 오프너 애드온으로 팝업 모듈이 생성한 콘텐츠를 애드온이 간섭하여 선택된 모듈 화면에서 팝업으로 보여주는 일을 합니다. 팝업 모듈은 게시판처럼 등록된 내용을 별도로 보여줄 수 없습니다. 간단히 작성된 내용글이나 이미지, 또는 외부 파일의 주소를 기억하고 있다가 팝업 오프너 애드온이 보여달라고 요청하면 콘텐츠를 내어 줍니다. 단, 아무때나 내어주는 것이 아니라 선택된 대상 모듈, 또는 허가된 기간 동안만 내어 줍니다. 만약 애드온이 꺼져 있다면 팝업 모듈의 내용은 그대로 보관될 뿐입니다.

팝업 오프너 애드온을 살펴보기 전에 우선 아래 그림의 순서대로 따라하면서 팝업 모듈과 애드온을 다운로드 받고 팝업 모듈에서 콘텐츠를 생성하는 과정까지 살펴봅니다. 팝업 모듈과 팝업 오프너 애드온은 XE스쿨에서 관리하고 있습니다. 팝업 관련 압축 파일을 해제하면 버전 폴더 안에 각각 모듈과 애드온 프로그램의 설치 위치별로 구분하여 저장되어 있습니다. 모듈과 애드온의 설치 위치를 반드시 확인한 후 서버 계정에 올바르게 업로드 해야 합니다.

  • image▲ XE스쿨 자료실에서 [XE 1.5 관련자료]를 클릭합니다.
  • image▲ [v1.5를 위한 팝업 모듈과 팝업 오프너 애드온]을 클릭합니다.
  • image▲ 최신 버전의 압축 파일을 클릭합니다.
  • image▲ 팝업 모듈(popup)은 modules 폴더 안으로 업로드 합니다.
  • image▲ 팝업 오프너 애드온(popup_opener)은 addons 폴더 안으로 업로드 합니다.
  • image▲ [제어판]에서 팝업 모듈의 [DB 테이블 생성] 버튼을 클릭합니다.
  • image▲ 다시한번 [모듈 업데이트하기] 버튼을 클릭하며 팝업 모듈을 코어에 등록합니다.
  • image▲ [설치된 모듈]로 이동합니다.
  • image▲ [팝업 관리] 모듈을 클릭합니다.
  • image▲ 팝업 콘텐츠를 생성하기 위해 [생성] 버튼을 클릭합니다.
  • image▲ [제목]은 자유롭게 입력하고 팝업을 띄울 [대상 모듈 선택]은 환영 페이지(welcome_page)를 선택합니다.
  • image▲ [팝업 내용 입력 방법]은 [내용 직접 입력]을 선택하고 간단히 이미지를 첨부합니다.
  • image▲ [배너 클릭시 이동 위치]에 게시판의 게시글 주소를 입력하면 팝업을 클릭했을 때 해당 게시물로 이동하게 됩니다.
    팝업 오픈의 시작일과 종료일까지 자유롭게 설정합니다.
  • image▲ 팝업의 가로,세로 크기와 화면 좌측 상단을 기준으로 열리는 위치, 팝업 비활성 기간을 순서대로 입력합니다.
  • image▲ 설정한 내용을 저장하기 위해 [저장] 버튼을 클릭합니다.

팝업 오프너 애드온으로 팝업 열기

애드온의 기능과 동작 방법에 따라 추가 설정이 필요할 수 있습니다. 팝업 오프너 애드온은 추가 설정이 필요하지 않기 때문에 체크박스에 체크 표시만 해도 곧바로 동작하게 됩니다.

image

위 그림과 같이 [설치된 애드온]으로 이동합니다.


image

팝업 오프너 애드온의 [PC 환경에서 동작]의 체크 박스에 체크 표시한 후 저장합니다.


image

[설정]을 클릭하면 팝업 오프너 애드온은 추가 설정하는 내용이 없기 때문에 설정이 존재하지 않으며, 동작 대상 모듈을 선택할 수 있는 모듈의 목록이 나열됩니다. 팝업 모듈에서 이미 대상 모듈을 선택하였기 때문에 모든 모듈을 대상으로 하더라도 대상 모듈이 아니면 팝업이 열리지 않게 됩니다.


image

환영 페이지(welcome_page)에서 팝업이 열렸습니다. 그런데 이미지를 추가한 부분 상단에 여백이 생깁니다. 내용 작성 후 저장하면 에디터에서 내용을 감싸는 <p> 태그를 추가했기 때문입니다. 이 부분을 수정해 봅니다.


image

[팝업 관리] 모듈로 돌아가서 팝업의 내용을 수정합니다. 에디터 상단의 [HTML 편집기]를 클릭합니다.


image

추가된 <p> 태그는 삭제해도 다시 생깁니다. 따라서 위와 같이 여백을 제거하는 스타일 속성을 추가합니다.


image

수정 후 환영 페이지(welcome_page)에서 팝업을 확인해 보면 여백이 수정된 것을 확인할 수 있습니다.


외부 파일로 팝업 열기

XE 코어 외부에 위치한 HTML 문서를 내부 레이어 형태의 팝업 내용으로 가져와 표시할 수 있습니다. 즉 에디터에서 작성된 내용이 아닌 외부 파일의 내용을 팝업으로 출력하는 기능입니다. 외부 파일의 위치는 상대경로 또는 절대경로를 모두 사용할 수 있습니다.

image

위 그림과 같이 XE 코어 외부에 popup_box 디렉터리를 생성한 후 popup_example.html 파일을 업로드하고 팝업 파일의 URL로 입력합니다. 상대경로를 사용하는 경우에는 ../popup_box/example.html 로 입력합니다.


image

대상 모듈에서 팝업을 확인할 수 있습니다.


애드온 대상 모듈 설정하기

애드온은 간섭할 모듈을 대상으로 선택할 수 있습니다. 다음의 내용은 팝업 모듈에서 모든 모듈을 대상으로 팝업을 열도록 설정하였을 때 애드온에서 대상 모듈을 선택하는 방법에 대해 살펴봅니다.

image

팝업 모듈에서 팝업이 열릴 대상 모듈을 popup으로 선택합니다. popup으로 선택하면 모든 모듈을 대상으로 팝업이 열리게 됩니다.


image

팝업 오프너 애드온의 [설정]을 클릭합니다.


image

팝업 오프너 애드온의 설정에서 위 그림과 같이 체크하면 체크된 모듈에서만 팝업이 열리게 됩니다. 즉 애드온이 간섭하게 되는 모듈을 선택하고 사용하는 것입니다. 이러한 동작 방법은 모든 애드온이 동일합니다.


도움말 : 팝업 모듈과 팝업 오프너 애드온 사용 안내

  • 최초 코어 설치후 팝업모듈과 팝업오프너 애드온을 테스트 하자!
    레이아웃과 위젯, 애드온 등 기타 기능을 위해 필요한 소스를 추가할 때 팝업의 동작을 항상 점검하면서 사이트를 꾸미자. 만약 이후에 문제점을 찾으려면 최초 설치시 보게되는 환영페이지(기본 레이아웃)에서 팝업의 동작과 비교/확인해 보자.
  • 이미지를 활용하는 위젯, 애드온을 추가할 때 주의하자!
    팝업오프너 애드온은 코어가 가지고 있는 jquery.js(jquery.min.js) 파일을 이용하게 되는데 중복으로 jquery 라이브러리가 로드되는 경우 그것과 이것 모두 정상적으로 작동하지 않는다.(경험치 100%) 따라서 소스보기를 통해 jquery 라이브러리의 중복 로드를 확인해 보자. 팝업애드온은 jQuery.fn.xe_popup 플러그인을 만들어 이용하고 있다.
  • 팝업 모듈에서 팝업오픈 기간을 꼼꼼히 확인해 보자.
    오늘 날짜가 15일인데 1~10일에 팝업 오픈기간을 설정하면 당연히 팝업은 열리지 않는다.
  • 팝업 비활성 기간을 클릭한 경우 브라우저에서 쿠키를 삭제하면 다시 작동함을 이해하자.
    1일 동안 다시보지 않기에 체크하고 팝업을 닫으면 브라우저는 쿠키를 이용해 그 기간동안 팝업을 열지 않기로 기억하고 있다. 다시 확인하고 싶으면 브라우저의 머리속에서 쿠키를 지워줘야 한다.
  • 팝업 오프너 애드온의 설정에서 동작으로 체크(체크표시)가 되어 있는지 확인하자.
    나도 가끔 체크만 하고 저장을 하지 않는 실수를 범한다.(캐시파일 재생성을 함께 활용한다.) 필요없는 애드온을 삭제하는 경우 우선은 애드온을 끄고 삭제하는 것이 좋다. 애드온을 끄지 않고 설치파일만 삭제하는 경우 코어의 기억속에 애드온의 설정값을 영원히 기억하라고 말하는 것과 같다.
  • 팝업이 동작하지 않는 경우 레이아웃에서 추가된 위젯 소스코드를 임시로 지워보며 확인해 보자.
    나중에 문제점을 찾는다는 것은 사막에서 바늘찾기만큼 어렵다. 가끔 소스코드를 통째로 보내오기도 하는데 어떤 개발자도 자신의 소스가 아닌 코드는 사막의 모래알처럼 보인다.
  • 팝업의 내용을 에디터로 작성하는 경우 반드시 " "(겹따옴표)를 사용하자.
    만약 ' '(홑따옴표)를 사용하는 경우 팝업을 열어줄 오프너의 스크립트에서 구문오류가 발생한다.