AD

 개발 [장문] 디시콘 플러그인 개발과 서버 운영하면서 들었던 생각들

웰치제로그레이프맛
2022-10-03 01:55:28 1073 31 12

뜬금없지만 8월 마지막 주부터 출시해서 지금까지 대략 한 달 정도 플러그인, 아이콘 서버 운영하면서 들었던 이런저런 것들 정리해보고 개발 방향에 대한 의견이 궁금해서 글 씁니다.

아니면 나중에 누군가가 비슷한 앱 만들 때 참고하겠죠?


개발 노트

기존에 디시콘 플러그인 살아있을 적에는 트위치 잘 안 봐서 어떻게 돌아가는지 잘 모르지만 이 플러그인을 만들면서 내가 원했던 기능은 대략 다음과 같이 정리할 수 있음.

1. 채팅 창에 깔끔하게 이미지 표시. 디시콘 외의 다른 요소를 망치면 안됨

2. 디시콘 선택 및 입력하기가 편해야 함. 자동완성을 지원해야 하고 마우스 사용 없이 키보드로만 선택과 입력이 가능해야함.

3. 어떤 상황에서도 안정적으로 구동되어야 함. 

4. 플러그인이 추가한 요소는 기존 트위치 요소 및 다른 플러그인을 방해하지 않도록 조화롭게 삽입되어야 함.

그 외의 사항은 필수 기능이 아니라 추가 기능으로 생각했음.

위 내용 고려해서 1~2주 정도로 급조하게 만든 것이 트위치 커스텀 아이콘 선택기임.


그런데 이런 문제점이 발생했다.

이런 앱을 만들어 본 경험이 별로 없어서 코드가 매우 난잡하고 가독성도 떨어지게 작성되었음. 그래서 디버깅도 어렵고 기능 추가나 앱 안정성을 테스트하기가 매우 어려웠음.

제일 첫 단계에서 크롬용 플러그인만 생각했기 때문에 파이어폭스를 지원하기 위해서 별도로 코드를 작성해야 했음 (내부 저장공간 api가 다름. 그리고 일부 디자인 요소가 다르게 표시됨). 같은 기능을 하는 앱을 두 개로 나누어서 개발하다 보니 실수도 생기고 효율적인 관리가 불가능했음.

현재 디시콘 선택은 탭 키도 아니고 키보드로 선택하는데 아무래도 직관적이지 않음. 그 이유는 내가 개발 능력이 떨어져서 어떻게 할 지를 몰라서 구현을 그렇게 한 것임.

이걸 어떻게 고쳐야 할까 고민하다가 해외에서 자주 쓰이는 betterttv 소스코드를 보면서 가닥을 잡음. 아마도 근 미래 (1~2달 후?)에 이런 식으로 코드 수정할 생각임.



플러그인 개발도 있지만 플러그인에서 불러오는 이미지 주소를 안정적으로 제공할 수 있는 앱이 필요했음. 펀즈 방송만 지원하도록 한다면 펀즈 자체 디시콘 주소를 그대로 사용할 수도 있었지만 나는 좀 더 범용적으로 사용할 수 있는 플러그인을 개발하고 싶었고 펀즈 님은 본인이 허락했지만 해당 주소나 정보를 내가 마음대로 관리할 수 있기를 원했음.

그래서 만든 것이 이미지 캐시 서버임. 정말 단순하지만 스트리머가 제공하는 opendccon이나 bridgeBBCC 형식의 데이터를 가져와서 공통된 포맷 (openDccon) 으로 json파일으로 저장한 뒤 모든 아이콘을 서버에 저장해 놓는 방식임. 그리고 공개한 주소로 이미지를 접근하면 선택한 이미지를 보여주는 api를 생성하는 서버 앱임.

현재 디시콘 플러그인이 사용하는 서버가 위 서버임. 아직은 데이터베이스 전혀 쓰지 않고 그냥 하드코딩 해놓은 스트리머만 지원하도록 한 상태임.

이렇게 사용하다가 9월 첫 주 정도에 이슈가 생겼음.

de7e7fb219cef70236ed803885f8bc12.png[220904 traffic analysis]

생각보다 서버 대역폭을 많이 차지하고 있었음.

처음에는 단순하게 이미지 때문에 트래픽 많이 차지하는구나라고 생각해서 펀즈님 허락 맡고 펀즈님이 호스팅하는 이미지 주소로 교체해서 해결하려고 했음. 근데 그래도 마찬가지도 위 짤 처럼 캐시되지 않은 대역폭 량이 많았음.

그러면 뭐가 문제였나 생각했는데 디시콘 목록 json을 전달해주는 과정에서 대역폭을 많이 차지하고 있었음. 목록 파일이 스트리머 한 명당 대략 100~400KB정도인데 압축 없이 전달한 것이 그 원인이었음. 

그래서 서버에 압축해서 전송하는 코드를 추가한 뒤에 cloudflare에서도 적극적으로 자원을 캐시하도록 설정했음. 그 결과가 아래와 같음.

b98414b144a165b039cbf3b2f666be88.png[220905]8238d83f7430508952f1f04069326b44.png[220915]
b9dcff3ac1ace3a5a6986b807734fc22.png[221003]84cc27f42d97f4ae77be418949cb1f5e.png[cloudflare rule]


위 설정으로 캐시되지 않은 대역폭이 100MB도 안되도록 매우 크게 감소했음. 그리고 cloudflare 캐시 덕에 내 서버가 잠시 죽더라도 안정적으로 이미지를 가져올 수 있게 되었음. 이렇게 이미지 서버 문제는 해결했음.

그렇지만 이미지 서버의 큰 단점이 남아있음. 개발자가 추가한 스트리머 채팅에서만 플러그인을 사용할 수 있다는 것임. 플러그인에서는 서버 값 가져와서 구동하므로 새 스트리머 추가할 때 플러그인을 버전을 업데이트 할 필요는 없음.


여기서 불편한 점이 서버 코드 수정으로 스트리머 추가, 디시콘 추가를 하는 것인데 그걸 수정하기 위해서 웹 페이지를 오픈해서 스트리머가 직접 디시콘 정보를 수정하도록 만들고 싶음. (디시콘 목록 주소를 오픈 안해놓는 스트리머도 있어서 ~불편 했음)

아무래도 선행 프로그램인 betterttv을 많이 참고하게 될 것 같음. 그렇게 하면 동일한 디시콘을 사용하는 스트리머가 많을 수록 더 효율적인 운영이 가능해짐.

그리고 betterttv와 다르게 더 원하는 것은 특정 아이콘에 대한 css를 커스텀하는 기능이 있으면 좋겠음. (~볼트공중)

지금 작업 중이긴 하지만 개발 기간이 오래 걸릴 것 같다는 생각이 많이 듦.



향후 개발 방향

디시콘 관리를 스트리머가 사이트를 통해서 할 수 있으면 자주 쓸까요..? (betterttv같이)

브라우저 플러그인에서

ㄴ 디시콘 선택기 아이콘이 [채팅창      [비트][이모티콘]] 내부가 아니라 그 아래에 톱니바퀴 모양 옆으로 옮길 생각입니다.

ㄴ 디시콘 선택을 Tab, Shift+Tab으로 이동 Enter으로 선택하도록 수정 (가능하면)

ㄴ 디시콘 자동완성을 커서가 중간에 있더라도 가능하도록 수정 (react 객체 직접 수정) (가능하면)

ㄴ 플러그인 디자인 좀 예쁘게 바꾸고싶다.

정도로 할 생각인데 더 원하는 기능 정도 있으신가요?


후원댓글 12
댓글 12개  
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
 잡담 공지 개발 아트 영상 털
4
10-03
2
 잡담
님들 이거 해도 됨? [1]
ㅇㅇ
10-03
12
10-03
2
 잡담
포멧을하려는데 [3]
매너게임합시다
10-03
2
 잡담
클라우드 무알콜은 맛이 좀 이상하네 [1]
침착한곰탱이
10-02
11
10-02
35
 잡담
튜닉 제작자 진짜 좀 무섭네 [3]
tororo2311
10-02
6
10-02
4
 잡담
야 이거 ~의도된 css 임? [2]
로오맨틱가이
10-02
4
 잡담
펀즈 야숨 다함? [6]
로오맨틱가이
10-02
4
 잡담
"헌터" [3]
리젝티브
10-02
8
 잡담
타스트게더보는데 [3]
ㅇㅇ
10-02
7
10-02
22
 잡담
머야 펀게더 언제 열렸지 [9]
새턴파이브
10-02
7
10-02
6
 잡담
어제 술존나마시고 토하고 잤는데 [4]
도저히참을수없다
10-02
4
 잡담
나니니 시마스까?
상트페트르부르크
10-02
11
10-02
11
 잡담
오늘 공부한 무언가 [1]
(익명)
10-02
1
 잡담
게임 이름이 기억이 안남 [2]
매너게임합시다
10-02
2
 잡담
어느 정도의 해상도가 최선인가... [2]
상보성금속산화막반도체
10-02
1
 잡담
트위치 720 되니까 [1]
ㅇㅇ
10-02
6
 잡담
최근 찍은 사진들 [4]
shk4444
10-02
8
 잡담
오느레 잡지식 [1]
watchingyou84
10-02
17
10-02
4
 잡담
오늘 피방 광고로 본 게임인데 [2]
침착한곰탱이
10-01
인기글 글 쓰기