XE독학하기 그 30번째 걸음-유챗이라는 위젯으로 채팅방 만들기

안녕하세요?

이번 포스팅에서는 지난번에 Scratchat을 설치해 보았습니다만, 이게 그렇게 까지 마음에 들지 않는 문제가 발생하였습니다.

설정을 어떻게 잘못했는지, 이 채팅방은 너무 크기의 조절이 잘 안되는 감이 있었습니다. 아무튼 이것도 이것이고, 새로운 채팅창은 어떻게 설치할 수 없는지를 알아보기 위해서 한번 실험해 보기 위해서 이번 포스팅에서는 새로운 형태의 다른 형식의 채팅방을 설치해 보고자 합니다.

이번에는 유쳇이라는 위젯을 설치해서 한번 채팅방을 설치해 보고자 합니다. 우선 XE 관리자 페이지의 고급탭으로 가서 쉬운설치를 누른다음, 검색에 들어가면 위 스크린샷과 같은 화면을 얻을 수 있습니다. 여기서 유챗 채팅을 쉬운설치로 설치하도록 합니다.

다음으로는 XE 관리자 페이지에서 [사이트 제작/편집]탭으로 가서 사이트 디자인 설정 항목으로 간 다음, 새로운 메뉴를 [위젯 페이지 추가]를 이용해서 추가하도록 합니다.

그 다음 단계는 유챗이라는 홈페이지에 가서 먼저 회원가입을 합니다.

그리고 회원가입이 되었다면, 채팅방 개설 메뉴를 눌러서 필수 항목을 채워서 채팅방 개설을 신청해 보도록 합니다. 여기서 중요한 것은 토큰값인데.........

다시 XE로 만든 홈페이지로 돌아와서, 새로 추가한 위젯 페이지에다가 먼저 [유쳇]을 선택하고 [추가]버튼을 누르도록 합니다. 그렇게 하면 위 스크린샷과 같은 화면이 뜨는데, 방금 유챗 홈페이지에서 채팅방을 개설하면서 만든 채팅방의 아이디를 입력하고, 토큰값을 입력하도록 합니다.

이렇게 설정을 하고나면 채팅방이 생겨야 할 것이지만, 전혀 생성이 되지 않은 것을 볼 수 있습니다. 왜 이런가 해서 생각해 보면, 한참을 헤메었습니다만 사실은 채팅방의 사이즈를 설정하지 않아서, 아예 나타나지 않은 것입니다.

1차 시도는 100%라고 가로세로를 채웠지만, 아무것도 화면에 표시가 되지 않았습니다. 그래서 2차 시도에서는 극단적으로 큰 값을 적어 넣는 방식으로 어떻게 되는지를 알아 보았습니다.

이제서야 채팅방이 나타나기는 했습니다만, 너무 극단적으로 크기가 크게 나온 게 단점이었습니다. 이제부터는 시행착오를 거치면서 적절한 크기를 찾아가기 위해서 여러번 시도를 하였습니다.

여러번의 시행착오 끝에 데스크톱 화면에서는 그런데로 볼만한 화면의 사이즈로 출력이 되는 것을 볼 수 있었습니다. 하지만 이번에는 스마트폰에서 어떻게 나오는지를 알아보았습니다.

다만 문제가 스마트폰의 화면에서는 채팅방의 화면 일부가 잘려서 나온다는 것을 알 수 있었습니다. 그래서 이런 문제를 동시에 잡기 위해서는 애초에 채팅방의 화면 설정을 얼마나 잘 하느냐에 달려 있다고 할 수 있을 것 같습니다.