본문 바로가기

대가리 쪼개기/Photon 대가리 쪼개기

Photon Chat Webhook 대가리 쪼개기 001 - 클라우드 앱만들기, 데모 구동

반응형

포톤 챗 대가리 쪼개기를 시작하게 된 계기는 정말 간단합니다.

 

이전 회사에서 포톤챗 웹훅 연동을 했었는데, 정말, 진짜로 다신 쓸일이 없을줄 알았습니다 ㅠㅠㅠ

그래서 인수인계 문서만 정리하고, 그대로 나왔었는데,

다시 연동할 일이 생겼더군요.

 

문제는 왜?인지 모르게 그 당시와 데모클라이언트에 자잘한 버그가 많이 생겨났다는 느낌이 많이 들었고

좀더 자세한 스펙과 동작을 파헤치기 위해 정말 대가릴 쪼개버려야겠단 마음을 먹게되었습니다.

(궁극적으로, 공식문서가 부실한 문제가 제일 큽니다.)

같은 실수를 두번 반복하지 않기위해... 저를 위해서라도... 고생하실지도 모르는 분들을 위해서 간단한 가이드를 남겨봅니다.... 문서가 정말 불친절하고 데모도 불친절하며, 직접 고쳐가면서 테스트해봐야 알수있는 부분이 너무 많습니다 ㅠㅠ


 

 

 

 

 

 

 

 

먼저 photon 서비스에 가입해줍니다.

이런식으로 기입하시면, 


 

 

 

 

 

이메일로 가입을 할 수있는 링크가 전송이 될껍니다.


 

 

 

 

어...음...비밀번호만 설정하면 끝나네요?

생각보다 간단히 설정할 수 있습니다.


 

 

 

'관리화면으로 이동'을 눌러 새 어플리케이션을 만들어 주세요.

  1. Photon 종류
     포톤에서 제공하는 어플리케이션 종류입니다. BOLT, Chat, PUN, Realtime, Voice, Fusion이 있는데, 저희는 Chat을 사용할 예정이니 Chat을 선택합니다.
  2. 이름
     식별하기 위한 이름입니다. 실제론 앱을 생성하면 나오는 AppId란 것을 이용해 소스코드나 웹훅에서 앱을 식별합니다. 즉, 알아보기 쉽게 설정해주세요. 보통 {서비스이름-dev}나 test 머 이정도가 적당하지 않을까? 싶습니다.
  3. 어플리케이션 설명
     마찬가지로 어플리케이션에 대해 설명을 적어주시면 됩니다.
  4. URL
     처음엔 웹훅이나 웹서버 관련url인줄 알았으나, 별 상관없는 url 이므로 공란을 해두셔도 됩니다.
    작성하기 클릭!

다음과 같은 화면이 나오면 성공입니다!


 

 

 

 

모자이크 된 앱 이름이 읽히는 거 같은 착각은 무시해주세요;;;;

 

photon 플랫폼 사이트에서의 작업은 잠시 여기서 멈춰주시구요,

일반적으로 포톤 플랫폼을 연동하시는 경우라면 유니티 클라이언트 인 경우가 많을껍니다.


.

 

 

 

 

 

3D 코어 프로젝트면 될꺼라고 생각합니다...아마도요(....)

유니티 에디터를 실행 시키시고, 적당히 빈 프로젝트를 만들어주세요.

제가 예전에 유니티 써봤을때와 다르게, 요즘엔 유니티 허브에서 프로젝트 목록을 관리해주더라구요


 

 

 

 

 

백앤드 개발자는 mac이 유리하다고 들었는데...선입견일까요..? windows가 더 편한 나...

에셋스토어에 가면 포톤 sdk와 함께 포톤sdk 데모가 함께 들어있어서 우린 그걸 찾으러 갈껍니다.

유니티 에셋스토어는 윈도우os 기준으로 window => asset store에 있습니다.


 

 

 

 

어..? 아마 최근에 유니티를 설치하셨으면 이런 화면을 마주치게 되실껍니다.

 놀라시지 마시고 당황하지마세요.

대충 2020.1버전부터 브라우저로 열린다는거 같네요. 'Search online' 버튼을 눌러주시면 에셋 스토어로 이동합니다.


 

 

 

 

 

열린 에셋스토어에서, 여기서 정말 중요한데요, 

photon 을 검색하시면 photon chat 에셋이 있을겁니다.

이걸 무시해주세요.

photon PUN 2 FREE, 이걸 다운로드 합시다.

간단히 설명드리자면, PUN(Photon Unity Networking) SDK는 안에 Photon Chat Sdk와 Photon Chat Demo를 포함하고  있습니다.

 포톤 챗 에셋은 제가 마지막으로 확인했을때, 사소한 버그가 있어서(치명적인건 아닙니다.)

데모시연 자체가 잘 안되고 경우에 따라서 '이게 왜 안될까' 하고 엄청나게 삽질을 할 여지가 있습니다.

그리고 포톤챗을 사용하는 프로젝트의 경우 필연적으로 PUN이나 RealTime 역시 사용하게 될 여지가 있다고 보여지니까, 기왕 받는거 상위 SDK를 받는게 낫다고 보여집니다.

 궁극적으로 Photon Chat 에셋은 마지막 업데이트가 2020, PUN은 2021인 부분도 있습니다.

'Add to my Asset'을 눌러 추가하신후, 'Open in Unity' 를 눌러, 유니티 에디터로 불러와주세요.


 

 

 

 

그럼 패키지 매니저가 열리게 되는데요, 다운르도를 눌러주시게 되면, 진행바가 생기면서 다운로드가 진행됩니다.

다운로드가 완료되면, 다운로드 버튼 위치에 'Re-Download' 버튼이 생기고, 그 왼쪽에 'Import'버튼이 생깁니다.

Import 버튼을 누르면, 프로젝트 공간으로 에셋을 가져오게 됩니다. Import 버튼을 눌러주세요.


 

 

 

 

 

네.. 에셋 내부 상세 파일목록이 뜨는데요, 당연히 전부 임포트..해줘야 합니다..? 

포톤쳇만 임포트하면 좋겠지만, 메인데모가 있고 메인데모에서 각종 키와 다른 씬들을 로드하게 되어있어서,

SDK를 쓰는건 따로 가져가도 상관없지만 ㅎㅎㅎ 데모는 다 임포트하고 진행을 해야합니다..ㅎㅎ;;;;

Import 버튼을 눌러주세요.


 

 

 

 

임포트하면 PUN Wizard가 나오면서, PUN AppID를 입력하라고 나옵니다. 어..우린 챗의 AppId밖에 없는데;;;;

일단 스킵을 눌러주세요. 스킵을 누르시면 하단에 Close 버튼이 생깁니다. Close 버튼을 누르시면됩니다.

 그 후에 패키지 매니저도 닫으신 후에 에디터로 돌아와주세요.


 

 

 

 

프로젝트 세팅을 위해 하단부의 프로젝트 탐색기? 에서 위 사진과 같은 경로로 이동을 해주시면 위 사진처럼

'PhotonServerSettings.asset' 이라는 파일을 만날수 있습니다. 클릭을 하시면 우측에 'Inspector' 라는 탭에 정보들이 보여지게 되는데요..!


 

 

 

 

인스펙터는 오브젝트나 스크립트 따위의 데이터 정보? 정도를 보여주는 탭이라고 생각하시면 되겠습니다.
(인스펙터가 궁금하신가요? 유니티 공식문서 : 인스펙터 창)

각 프로퍼티 위에 마우스오버를 해보시면, 각 프로퍼티들에 대해 간략한 설명이 나옵니다.

여기서 저희가 수정 할 부분은

  • App Id Chat
     포톤 플랫폼 사이트에서의 Application Id 값을 얻어와서 넣습니다.
  • App Version
     임의의 사용자 설정값을 넣습니다. 기왕이면... 여러분 서비스의 클라이언트 버전과 맞추는게 좋겠죠..?
  • Fixed Region
     포톤 플랫폼 지역을 고정할 것인지 유무를 정합니다. 리전이 다르면 서로 채팅이 불가능했던거로 기억합니다. 데모 시연시엔 혼란스러울 수 있으니, eu로 고정하겠습니다. (사실, 소스코드에 접속할 때 region을 지정해서 접속하기 때문에, 관계없긴 합니다. :> )

입니다.

잠깐 넣어두었던, 포톤 플랫폼의 어플리케이션 설정화면, 그 화면으로 다시 돌아가볼까요..?


 

 

 

 이 부분을 클릭하시면, 포톤챗의 AppId를 얻을 수 있습니다. 복사 하셔서 Inspector의 App Id Chat에 넣어주세요.

이제 대망의, 데모 채팅 씬으로 가보겠습니다.


 

 

 

 

 

프로젝트 탐색기에서 위 경로로 이동하시면 데모챗 씬이 위치해 있습니다. 더블 클릭하시면, Hiearchy 탭에 씬이 로드됩니다. 더블클릭 해주세요.


 

 

 

 

 

 

Scene 탭이 이렇게 무언가 보여지고 있다면, 씬이 로드된겁니다. 만약 씬이 확대되어 있어서 무언가 잘안보인다면, Hiearchy 탭의 최상위에 'DemoChat - Scene' 이 로드되었는지 확인해주시고, 빨간 버튼을 누르면 구동 할 수 있습니다.


 

 

 

 

 

놀라지마세요-2

경고창이 뜰껍니다. 놀라지마세요. PUN SDK인데, PUN의 appId를 설정하지 않아서 접속이 불가능 하단 경고내용입니다. 우린 Photon Chat을 이용할꺼라 관계가 없습니다. 쿨하게 Ok.


 

 

 

 

이런 화면이 나오시면 구동에 성공하신겁니다.

챗인트로 화면입니다. 유저아이디(닉네임?정도로 생각하시면됩니다. 데모니까요)를 입력하시고,

커넥트를 누르면 접속을 시도합니다.

아래 내용은, Joe, Jane, Bob은 미리 정의되어있는 유저 아이디란 내용입니다.

접속해볼까요?


 

 

 

 

 

 

채팅을하면 정상적으로 전송되는 모습을 볼 수있습니다.

간략하게 설명드리자면, 왼쪽 상단은 구독된 채널(채널에 참가를 '구독', 채널에서 퇴장함을 '구독해제'라고 정의하고 있습니다.) 왼쪽 하단은 친구 시스템에 추가된 친구목록입니다. (사실 Joe, Jane, Bob,으로도 접속이 가능합니다)

 물음표? 를 누르면 명령어가 나옵니다. photon chat에서 제공하는 기능들을 간단히 테스트 해 볼 수 있습니다.

진짜 채팅이 되는건가? 해보기 위해서는 에디터 뿐만 아니라 실행파일이 있어야하지 않을까요..?

 실행파일을 빌드해보겠습니다.


 

 

 

 

 

File-> Build Settings 로 이동합니다.

 

1번을 눌러 Add Open Scenes 를 누르면, 데모 채팅 씬을 추가할 수 있습니다.

빌드 버튼을 누르시면 빌드 할 디렉토리를 지정 할 수 있습니다. 원하시는 위치에 디렉토리를 생성 후, 

해당디렉토리를 선택하시면 됩니다.


 

 

 

 

 

 프로젝트 이름과 동일한 실행파일이 생기며, 이 파일을 실행시켜 유니티 데이터 클라이언트와, 실행파일 클라이언트로 테스트해보시면 됩니다.

  다음엔 본격적으로 웹훅 테스트 서버를 올려, 테스트를 진행해보겠습니다.

반응형