프로그램 (XSplit) 지연현상 해결해드립니다! - Text 대체용 소스 컴포넌트

나나네_식사
2018-04-16 19:10:45 603 9 8

안녕하세요. 하나나 방송 시청자 나나네_식사입니다

이전에 하나나님 트게더에 방송 지연 현상 개선 관련해서 글을 올렸었는데, (링크)

이제보니 이런 용도의 게시판이 아예 따로 있네요

하나나님 방송화면 개선해드릴겸 제작한건데, 기왕 제작한거 한명 쓰고 마는것보단 여러 명이 사용해주시는게 서로 좋은 일인지라 게시판에 업로드합니당


다운로드는 여기서 받으시면 됩니다

적당한 위치에 압축을 푸신 후, index.html을 이미지파일 올리듯 엑스플릿에 드래그하시면 작동합니다.

HTML이라 소스코드 전체를 공개해야 하는 부분인데, 소스코드 공개하는 대신, GPL3.0 라이센스를 걸겠습니다.

사용 및 배포는 자유롭게 하시면 되고, 이 소스 컴포넌트의 소스코드 전체 혹은 일부를 변형하거나 포함시켜 프로그램을 개발하여 재배포하실 경우 해당 프로그램 역시 GPL라이센스를 가지며, 전체 소스코드를 공개된 장소에 배포해야 합니다. 또한, 프로그램에는 반드시 이전 제작자들의 목록이 "디스플레이"되어야 합니다.

추가로, GPL3.0의 특징 중 하나가 추가 제약사항을 걸 수 있는걸로 되어있는데, 원본이건 변형본이건 상용으로 사용할 수 없다는 제약사항을 하나 더 걸겠습니다.


아래는 GPL3.0 라이센스 하 배포에 대한 의무 고지사항입니다

 - 소스 컴포넌트 사용 중 문제가 발생했을 때 제게 요청해주시면 검토 후 처리해드릴 수 있으나, 기본적으로 발생한 문제에 대한 책임은 사용자 본인에게 있습니다.

 - 이 소스의 일부 혹은 전체를 이용한 파생 저작물 제작 시 특허라이센스의 계약 체결이 불가합니다

 - 이 소스의 일부 혹은 전체를 이용한 파생 저작물 제작 시 수정일시를 고지해야 합니다

 - 기타 GPL3.0에 대한 내용은 여기서 확인하실 수 있습니다




우선 개선이고 뭐고 구버전 Title 소스처럼 외관상 별로면 사용하기에도 껄끄러우실테니 동작되는 모습부터 보여드릴게요

91314b87286e58d9404525b9651434dd.jpg

기존 Text 컴포넌트와 굉장히 유사한 외관에, 설정하기에 따라 그보다 더 예쁘게도 사용하실 수 있습니다 :D


우선 기존 Text에서 변경되는 부분 비교해드리고, 성능에서 어느정도 이점이 있는지 알려드릴게요


2b732a1ee6232de698fd632920eb702f.jpg


설정창입니다. 기존 Text와 최대한 유사하게 사용하실 수 있도록 디자인했어요.

위에서부터 Text와 다른 부분만 언급하면서 넘어갈게요


먼저 텍스트 불러오는 방식은 기존 Text처럼 직접 문구를 지정할 수도, 외부로부터 불러올 수도 있습니다. 다만 Text는 굉장히 다양한 위치에서 다양한 방법으로 문자열을 불러올 수 있는데, 요건 무조건 컴퓨터에 있는 파일로부터 불러옵니다. Twippy 대응용으로 제공되는 기능이에요

또, Html 기반으로 제작된 컴포넌트라 웹 보안 정책상 로컬 파일 경로를 직접 불러올 수 없습니다. 플래시를 제작해 연동하는 식으로 개발하면 충분히 구현이 가능하긴한데, 귀찮았음바이러스로 제작 가능한 포맷을 포함해서 제작하는것보단 아예 바이러스로 제작이 불가능한 환경에서 개발하는게 스트리머분들 입장에서도 믿고 사용하기 좋지 않을까요?

그래서 경로를 직접 입력해주셔야 하는데요. 대상 파일의 바로가기를 만드신 후, 우클릭-속성에서 대상(T)에 나오는 내용을 그대로 붙여넣으시면 됩니다.



형식 탭에서 가장 위에 보시면 기존과 달리 색상 선택하는 부분이 2개가 연달아 나오는데요. 이 색상을 서로 다르게 지정하시면 위에서부터 아래로, 좌측 색상에서 우측 색상으로 흘러가는 그래디언트 색상이 적용됩니다. (맨 위 이미지 참고)


글꼴은 웹기반이라 컴퓨터에 설치된 폰트를 지원할 수 없습니다. 정확히는 이것도 플래시 쓰면 되긴 하지만;;; 굳이 그렇게까지 할 이유는 없는듯하네요. 폰트는 구글 웹 폰트 중 한글을 지원하는 폰트 전체를 집어넣어놨구요. 기본적으로 구글 폰트 API는 상업적 이용 가능을 전제로 하고 있다고 알고 있는데, 구체적인 부분은 저도 모르겠습니다. 사용하실 폰트 정하시면 기왕이면 한번쯤 찾아보셔요 하하


크기는 제가 개발상에도 불편하고, 평소 Text를 사용할때도 불편해서 집어넣은 기능입니다. OBS의 텍스트에 비해 엑스플릿의 텍스트에서 가장 아쉬웠던게 줄을 늘리려면 Text 자체를 더 생성해야되는거였는데, 굉장히 번거롭더라구요

그래서 멀티라인을 지원하게끔 개발하고, 글자 크기를 조절할 수 있게 제작했습니다.

단독라인으로 사용하더라도 글꼴이 화면을 넘치게 출력되면 조금 줄이시면 되고, 멀티라인으로 사용하시면 글꼴크기를 줄 수에 맞춰서 집어넣어주시면 됩니다.


그림자 투명도는 사용하시는 분들이 있는지 모르겠는데, 제 개인적인 기준에서는 도저히 불필요해보여서 제외했습니다.


스크롤 부분은 기존 Animation에서 None/Scroll/Fade 세 개 선택자 중 선택해서 사용하는 걸 아예 밖으로 빼냈는데요.

Fade 저건 도대체 무슨 기능인지 이해도 되지 않고, 굳이 None / Scroll 선택하실 필요 없이 스크롤링 하실거면 방향 선택한 후 속도를 1 이상으로 두시면 스크롤 되구요, 속도 0으로 두시면 스크롤 꺼집니다.


마지막으로 주기는 1초당 몇번 스크롤계산을 수행할것인지를 선택할 수 있어요

기본적으로 HTML5 캔버스에 더블버퍼링을 걸어놔서 어떻게 쓰시든 Text보다 훨씬 빠르게 사용하실 수 있는데, 사실 텍스트 흘러가는 효과는 어지간하게 텍스트를 빠르게 굴리지 않는 한 프레임 좀 떨어져도 티 별로 안나요.

기본적으로 10FPS로 지정되어있고, 성능과 외관을 종합적으로 볼 때 권장하는 프레임수는 8~15FPS입니다. 최소 1FPS, 최대 30FPS까지 설정 가능해요




기존 Text에 비해 달라지는 부분은 이정도구요

여기서부턴 성능 비교입니다


동일한 컴퓨터에서, 동일한 실행환경에 대해 빈 화면에서의 CPU사용율과 비교 대상의 CPU 사용율을 XSplit 하단에 보여지는 값 기준으로 수집하여, 서로 비교하는 방식으로 진행했습니다

테스트용 컴퓨터에서 실행되는 다른 프로그램으로 인한 오차를 줄이기 위해 모든 표본은 항목 당 102개(100개 수집하려했는데 수집하고 보니 102개)씩 수집했으며, 1개 항목 수집 시 동일한 소스 10개를 띄워놓고 테스트했습니다. (링크되지 않은 상태로 복사)

소스를 복사하거나 씬을 옮긴 직후에는 엑스플릿 자체에서 초기화작업이 수행되어, 모든 소스를 씬에 올린 후 CPU 사용율이 안정되기 시작하는 시점부터 표본 수집을 시작했습니다.


표본 중 Title은 엑스플릿 1버전부터 지원한 Title(Legacy) 컴포넌트에 그림자 효과를 먹이고, 스크롤 시 기본 폰트가 아닌 설정값에서 지정한 폰트로 출력되게끔 커스텀한 플러그인인데, 기본 Title과 동작과 성능이 거의 유사하니 동일한 소스라고 생각하셔도 됩니다.



수집한 항목 별 컴포넌트 1개 당 CPU 사용율은 다음과 같습니다 (표본테이블은 하단에 첨부)


Title (Legacy)

정지+그림자 : 0.048% (부하가 없는 수준)

스크롤+그림자 : 2.23%


Text

정지+그림자 : 0.74%

스크롤+그림자 : 6.06%


커스텀 Text 컴포넌트

풀옵션은 [그림자+외곽선+굵게+기울임꼴+밑줄+취소선+그래디언트] 입니다

정지+그림자 : -0.01% (부하가 원체 낮아 마이너스로 수집되었네요;;; 실화입니다)

정지+풀옵션 : 0.57%

스크롤(30fps)+그림자 : 3.31%

스크롤(8fps)+풀옵션 : 0.99%

스크롤(30fps)+풀옵션 : 3.61%


스크롤 기능을 사용하지 않은 경우 동일한 옵션에서 엑스플릿1에서 제공된 Title과 유사한 성능을 내고, 모든 옵션을 적용한 상태에서 Text보다 약 25%정도의 성능향상이 있습니다

스크롤 기능을 사용하면 Fps(스크롤 주기)를 어떻게 설정하냐에 따라 다른데, 30Fps에서는 동일한 옵션에서 Title보다 50%정도 느리고, Text보다는 2배 가량 빠릅니다.

8Fps 스크롤(0.99%)을 적용하면 Text(6.06%)보다 빠른 건 물론, Title(2.23%)보다도 빠른 게 확인되네요



아래는 표본 테이블입니다.


 빈화면풀옵션스크롤30fpsTitleText풀옵션정적단순그림자정적단순그림자스크롤풀옵션스크롤8fpsText정적Title정적
CPU 사용율26695699283068374027
27604898242873403728
27644490283062383424
2860519227266440329
30674885232863333627
30585190302573403728
33635487303056383729
27634990262863343027
27654584272767384030
29615089272770413333
31694991253266353727
36614683292860364031
28654989313060453630
30664990252767403827
28634489282667384036
27675288292564363028
30655293232869383433
35644987282262384130
27635088252653413428
24655496272764333526
30635086284251343929
30575289272856353526
28675090283062313328
27614790263254424232
25864890282857423324
32895890282961442923
33804992282953403931
30905088282857373530
32835187273060353425
28874389322964353628
26874886262963404030
27865893283065373826
33734685283161333631
32584390372859443634
28635289383163383335
32625686403063433932
33634888422859433527
34674989403054413929
29645388383357423929
24655190392557413327
32654789403255413728
27655688422750424135
23644792402961383223
28645186402857404027
27644888402854393736
30604592413063413729
31685585393163423630
32604990392755444335
34594785432857413327
26645590362968373427
33594189413265393931
28575288422656433727
29624589402872373827
30614887462755404133
31585293412954413127
33605490433060393433
34595285412861363835
23535393412662463329
30604489412563393529
27584785442960333832
27634990432667403333
29645092423368373830
26594887382860413728
28604890412762403631
27575188412669354024
26605089442953373628
29584789412661453236
27645888412649413333
26594888402458413728
27615194413061423529
26805287412851363334
33664588403061393028
33515295412754383530
29605792372757373827
32624888382754363927
30595889383055384028
28575693412769384129
27625788452757383627
25614889433060383728
26604088432867394129
26646788452865373430
26685691382664393933
30645493403072403426
29634391423065333627
29596290383561393729
35635193383464363528
26635392383458343529
27655290272654364135
27595992272464383527
28655091252659373728
26765283262965404230
26715789313162363530
25605190293157393428
24675487303264354131
27674687292668433626
29674993253067383427
28655187273066343830
27794988302764413326
27625592222866363529
28685193302784393933
28656684282783373827
26648089292884393625
사용율 계2926661652019111350929146307393636802975
평균 사용율28.6862764.862745150.990289.3235334.401960828.5686274561.8333333338.5882352936.0784329.16667
빈화면과의 차이 36.1764705922.3039260.637255.71568627-0.11764705933.147058829.9019607847.3921570.480392
컴포넌트 1개당 CPU 사용율 3.6176470592.2303926.0637250.57156863-0.0117647063.3147058820.9901960780.7392160.048039













사용 중 개선되었으면 하는 사항이 있으면 언제든 트위치(canny708)로 귓속말 주세요. 트게더에 귓속말이나 쪽지같은 기능이 있는지는 모르겠는데, 제가 트게더를 주로 사용하는 유저가 아닌지라 확인하지 못할 수 있습니다!

일단 요거 올려두고, 반응 괜찮으면 트윕에서 제공하는 Chat Box를 대체할 수 있는 개선된 버전을 추가로 제작해서 올리겠습니당!

댓글 8개  
이전 댓글 더 보기
새 댓글
광고
방송하기프로그램채팅/봇업데이트
3
04-24
2
방송하기
이어폰 없이 방송하는 법. [4]
비드
04-22
0
04-22
1
방송하기
XSPLIT vs 캡쳐보드 화질 [7]
비드
04-16
20
04-12
27
04-05
25
방송하기
무료 폰트 모음사이트 [5]
달토끼
04-01
2
03-27
인기글 글 쓰기