라이브리(LiveRe)를 커스터마이징해서 써보자!!

Prolog....

이전에 제작했던 블로그 스킨에 국내 소셜 덧글 솔루션 중 하나인 라이브리(이하 LiveRe)를 덧글 모듈에 달았다가 관리기능의 부재로 덧글이 달리는 것을 확인할 길이 없어 제거해 두었었는데, 다시 블로그 스킨을 제작하면서 덧글 대신 방명록으로 쓰는 건 어떨까? 하는 생각이 머리를 스쳐 지나갔다. 방명록은 페이지 이동이 없고, 한 페이지 안에서 모든 액션이 이루어지니 괜찮겠다 싶어 바로 적용 시켜 두었다.

하지만 달아 놓고 보니 눈을 거슬리게 하는 것이 있었으니... 바로 이것!

저 빨간줄려 밑줄 쫙 그어놓은 문구들!!
난 방명록으로 쓸건데 댓글이라고 하면 이상하잖아??!!?!?!?
그리구... 로그인 하라고 하면 블로그 온사람들이 블로그에 로그인하는데 있는가 찾아보는거 아닐까? 하는 생각이 들기 시작한거다.

그리하여서... 저 문구들을 커스터마이징 해 볼 생각으로 소스들을 뒤적이기 시작했다.

How to LiveRe Customizing?

일단, 위의 두가지 문구를 커스터마이징 하는 방법을 소개하고, 아래에 찾아낸 방법 및 추가 커스터마이징 방법을 소개하도록 하겠다.
관심있는 방문자께서는 입맛에 맞게 더 꾸며 보시라!! ㅎㅎ
커스트 마이징 방법은 매우 간단하다. LiveRe 설치 방법은 안다는 가정하에 설명토록 하겠다.

LiveRe를 설치 하는 코드를 보면 아래와 같이 구성이 된다.

livereReply = new Livere(rep,"liveRe",title,"","mulder21c","default","openwhite",15);
livereReply.init();

여기서 첫번째 문구의 커스트 마이징은 다음과 같다.

livereReply = new Livere(rep,"liveRe",title,"","mulder21c","default","openwhite",15);
livereReply.initMessage.snsid = "원하는 문구";
livereReply.init();

위와 같이 liveReply.init() 바로 위 라인을 추가해 주면 된다. 물론 "원하는 문구"는 보여주고 싶은 문구로 바꾸어 주면 된다.

두번째 문구의 커스트 마이징은

livereReply = new Livere(rep,"liveRe",title,"","mulder21c","default","openwhite",15);
livereReply.initMessage.snsid = "원하는 문구";
livereReply.initMessage.title = "원하는 문구"
livereReply.init();

위와 같이 3번째 라인을 추가해 주면 글 입력 박스안의 문구가 바뀌게 된다.

참 쉽죠잉~~? ㅎ

Additional Info

위에서 간단한 커스터마이징 방법을 알아 보았다. 그럼 이제 그 외 다른 것들을 커스터마이징 하는 방법을 알아보자.

우선 원리부터보면, JavaScript를 웬만큼 다룰 줄 안다면 금방 눈치 챘을 것이다.
당연히 init()를 호출하기전, 생성된 인스턴스의 변수를 직접 지정해 주는 방식을 택한 것이다.

이를 위해 필자는 먼저 LiveRe가 로드하는 JSP 파일을 찬찬히 뜯어 보았고, 마침내 인스턴스 생성 시 정의 되는 변수들을 쉽게 찾을 수 있었다.
코드 내용은 아래와 같다.

this.initMessage.secretContent	= "관리자만 볼 수 있는 비밀 글 입니다";
this.initMessage.needLogin	= "로그인 후 이용 가능합니다";
this.initMessage.snsid		= "로그인 후 댓글을 작성하여 주세요"; 
this.initMessage.pltfrm_txt	= "";
this.initMessage.writeCount	= this.textLength;
this.initMessage.deleteConfirm	= "삭제하시겠습니까?";
this.initMessage.deleteAuthFail	= "본인 글만 삭제가능합니다";
this.initMessage.deleteFail	= "삭제에 실패하였습니다";
this.initMessage.title		= "로그인 후 작성 가능합니다";
this.initMessage.replyCount_tx	= "전체댓글수 ";
this.initMessage.replyCount_txt2= "";
this.initMessage.textCount_txt	= "";
this.initMessage.linkLivere	= "라이브리에 연동하시겠습니까?";
this.initMessage.secret_txt	= "비밀글쓰기";
this.initMessage.reactionA	= "이미 참여하셨습니다";
this.initMessage.reactionB	= "참여해주셔서 감사합니다";
this.initMessage.emptyReply	= "본문없이 제목만 포스팅 하시겠습니까?";
this.initMessage.lowFlowMessage	= "자 이상 입력해주세요";
this.initMessage.overFlowMessage	= "자 까지만 입력 가능합니다";
this.initMessage.needNameAndPassword	= "이름과 비밀번호를 입력하여 주세요";

대강 이해가 되는가?
앞서 설명한 부분은 이 변수들 중 2,3번째 변수를 변경한 것이다.

결국, 인스턴스를 생성 후

livereReply = new Livere(rep,"liveRe",title,"","mulder21c","default","openwhite",15);

이 생성된 인스턴스의 멤버 변수를 바꾸는 것만으로 어느 정도 원하는 입맛대로 커스트 마이징이 되는 것이다.

문구에 관련된 변수들은 저것들 뿐이나, 몇가지 변수들이 더 있기는 하지만 여기에서는 따로 소개하지 않도록 하겠다.
LiveRe가 로드하는 파일들 중 livere.jsp 파일을 열어보면 쉽게 찾을 수 있을 것이다.

여기에 추가적으로 더 입맛에 맛게 이미지등의 CSS 처리로 디자인 부분을 처리도 가능하다.
다만, 몇가지 방법을 시도해 보았는데 웹표준에는 썩 맞지 않는 방법으로 밖에는 처리가 되지 않았다.

방법은 아래와 같으나, 적용법은 직접 찾아보시길 권한다 ^^; 일일이 다 적어가며 설명하기에는 너무 양이 크다 ;;;

LiveRe의 리소스들이 전부 로딩이 되면, 그 중 default.css 및 스킨의 CSS 파일 (코드 발급을 받아보면 openwhite가 기본으로 잡혀 있어 openwhite.css가 로드되게 된다.)을 분석하여 보라.
분석된 CSS Style을 기준으로 원하는 대로 재작성 한다.
재작성된 style을 <body>내 Livere가 위치할 곳 보다 상단에
```
<style type="text/css">
	재작성된 스타일
</style>
```
이런 식으로 정의해 둔다.
LiveRe에서는 jQuery를 이용하여 <head>에 append 하게 되어 있는데, init() 이후에 아무리 작성을 해도 LiveRe의 것이 맨 마지막에 작성되어 표준에는 맞지 않는 방법이기는 하지만 분명한 렌더링 효과는 가져올 수 있다. ㅠㅠ (사실 이런 방법은 개인적으로 정말 싫어한다...)

무튼, 위와 같은 방법들을 통하면 LiveRe의 문구라든지 디자인 요소들을 원하는 입맛대로 바꿀 수 있다.
단!! LiveRe 로고들은 남겨두자 ^^ 이건 서비스 이용자로서 반드시 지켜야 할 사항이다.

Posted By 멀더끙