+ Store 02

티스토리 채팅창 설치하기 - Spot.IM

그룬 2014. 10. 21. 12:48


리뷰에 앞서 먼저 채팅창의 구현 모습을 보고싶다 하시면 제 블로그 메인의 우측 하단에 동그란 버튼을 클릭해서 보시면 됩니다. 써보시면 아시겠지만 로그인을 요구합니다. 페이스북, 트위터, 구글플러스가 있다면 쓰기 좋으시겠지만 그렇지 않을 경우 사용에 불편이 좀 있을 수 있습니다. 참고바래요~


https://www.spot.im/


위 사이트를 들어가시면 상단 이미의 홈페이지가 나옵니다. 간단한 구현 모습 등의 사진들을 볼 수 있습니다. 좌측에 보이는 분홍색 버튼(Get Spot.IM Now)을 클릭합니다.



버튼을 클릭하면 위와같은 화면이 나오는데 사각박스 안의 4가지 중 한가지를 선택하시고 연동을 하시면 됩니다. 로그인을 하는 등의 행위를 말하죠. 저는 위에서 언급한데로 구글 플러스를 눌러 연결을 하였습니다. 그러면 아래와같이 나옵니다.



약간 순서가 이상할 수 있는데 상단에 보면 General, Design이 있습니다. 제일 하단의 파란버튼은 모든 설정을 끝낸 후에 눌러주시면 됩니다. 먼저 'Spot Name'으로 커뮤니티 이름을 설정해줍니다. 그리고 Spot Category로 분류를 설정해 줍니다. 이게 정확히 어떤 역할을 하는지는 잘모르겠습니다. 그리고서 Design으로 넘어갑니다.



저는 이미 이미지 로고를 선택해서 위와같이 나오는데 아마 화살표같은게 떠있을 겁니다. 클릭해서 원하는 이미지를 선택해줍니다. 선택하지 않을 경우 넘어가지가 않더군요. 아래 Positioning은 채팅창의 위치를 얘기합니다. 좌측 하단 또는 우측 하단 둘중에 하나를 골라줍니다. Brand Color은 스킨같은거라고 보면되는데 필요하면 선택하시기 바랍니다. 이렇게 설정하시고 다시 General의 하단에 있는 파란버튼을 눌러줍니다.



위와같이 소스코드가 나오는데 이것을 Html/css 편집의 skin.html 안에 있는 </body> 바로 앞에 붙여줍니다. 그냥 <body> 안에만 있으면 되니 적당히 붙여주시기 바랍니다.



적용한 화면을 보면 위와같이 나옵니다. 다른 사람에게도 같은 화면을 볼 수 있는데 글을 쓰기 위해서는 마찬가지로 로그인을 요구합니다. 글을 써지는데 보내기 버튼을 누르는 순간 아래와 같이 나오죠.



일단 로그인만 하면 간단히 쓸 수 있습니다. 사용도 편하고 디자인도 상당히 깔끔하군요. 채팅창은 완전히 닫지 않는한 계속 유지됩니다. 특정 조건하에 쓰기는 좋을 듯 합니다. 휴대폰으로 쓰고자 한다면 우측 하단에 정말 작게 핸드폰 그림이 있습니다. 클릭하고 잠깐 기다리면 코드가 뜨면서 핸드폰으로 전송시킬 수 있는데 구글플레이 같은 곳에서 spotim 어플을 받으셔서 코드를 입력하시면 휴대폰에서도 바로 이용이 가능합니다.

반응형