본문 바로가기

Tech-tips/Tistory

티스토리에 소셜 라이브 채팅방을 달아보자 - Spot.im

스팟 채팅방 설치강좌


티스토리에 채팅방을 달아보고 싶다는 생각을 해보신 적이 한번 쯤은 있으실 겁니다. (아님 말고요) 가가라이브나 유챗, d챗등 티스토리에서 사용 할 수 있는 채팅방이 여럿 있습니다. 하지만 이것들의 문제점은 무엇일까요? 그렇습니다. 최근의 시류에 전혀 따라가지 못하고 있는 채팅방이란 것이죠. 모바일에서는 접속도 안 될 뿐더러 심지어 선사시대 유물인 플래시로 되어 있는 경우도 있습니다. 관리자 기능은 빈약하기 짝이 없고, 스팸 관리도 안 되며, 사진 파일 공유 같은 간단한 기능조차도 지원하지 않습니다.


사실 국내에서 블로그에 설치하는 채팅방은 접속만 하면 크게 제한 없이 메시지를 남길 수 있는 구조로 되어 있습니다. 그래서 인지 온갖 광고나 스팸으로 도배되기 쉽습니다. 그에 비해 오늘 강좌에서 소개할 스팟im은 소셜 네트워크 아이디로 로그인 하기 때문에 일단 스팸의 가능성이 줄어들고, 관리자의 기능도 여태까지의 채팅방보다 강력해서 트롤러나 광고를 쉽게 차단 할 수 있습니다. 뿐만 아니라 사진 전송 기능도 지원 하기 때문에 좀 더 다채로운 채팅을 할 수 있습니다.


제 블로그에 달려있는 spot.im을 보면 기존의 가가라이브나 유챗같은 채팅방 보다는 페이스북에 있는 페이스북 메신저와도 비슷하다는 느낌이 듭니다. 게다가 디자인도 미려해서 설치시에 기존 채팅방 보다는 훨씬 보기 좋다는 장점이 있습니다.


spot.im


spot.im으로 접속해서 create a new spot을 누르고 자신의 소셜 네트워크 계정으로 로그인 합니다.



spot.im


프로필 사진과 닉네임을 정합니다. 닉네임은 한번 정하면 변경이 불가능한 것 같습니다.


spot.im


사진 수정 버튼을 누르면 프로필 사진을 교체 할 수 있습니다.



spot.im


이제 여기서 웹사이트 주소와 주제, 그리고 채팅방 이름을 정합니다. 커버 이미지도 지정이 가능한데 우선은 만들어 놓은 것이 없으니 일단 패스.



spot.im


가입 과정 중 새 스팟을 자동으로 생성합니다.



spot.im


화면 표시 방법을 지정 할 수 있습니다. 화면의 특정 위치에 항상 떠 있게 하거나, 특정 페이지에 임베드가 가능한데, 임베드 타입은 아직 지원하지 않습니다. 사실 이 플러그인 설치 후 로딩 속도가 소폭 하락한 감이 없지 않아 있습니다. 제 블로그는 모바일에서도 피씨 버전을 그대로 불러오기 때문에 임베드 타입이 지원되면 티스토리의 안 쓰는 페이지에 채팅방을 놓으면 좋겠다는 생각이 듭니다.



spot.im


플로팅을 선택하면 플로팅 채팅창이 뜰 위치를 지정해야 합니다. 자신의 블로그 레이아웃에 맞춰서 적용합니다.


spot.im


채팅창을 클릭하면 이렇게 확장되어 나타나게 됩니다.


spot.im


저는 Footer 바로 위에 설치했습니다. 참고로 뒤의 스크립트 코드는 따로 분리해서 페이지 맨 아래쪽에 위치해도 정상 로드가 됩니다. 스크립트를 나중에 불러와서 페이지 로딩을 조금이라도 빠르게 하기 위한 꼼수죠.

부여되는 ID인 spot-im-root을 활용해서 제한적이지만 자신만의 스타일을 적용할 수 도 있습니다. 기본적으로 아이프레임 방식이기 때문에 완전한 수정은 힘들고 위치 이동이나 화면 표시 여부 정도가 가능하겠네요.