백업

롤20용 APNG -> WebM 변환 프로그램 배포

wakku0201 — Thu, 15 Jan 2026 14:56:16 +0900

‼️롤꾸는 필수가 아닙니다 ‼️

롤20 에서도 예쁜 APNG를 쓰고 싶어서

그냥 악으로 깡으로 GIF 변환해서 버티고 있었는데

ㄴ코코포리아를 쓰라고

ㄴㄴ인세인을 코코포에서 하고 싶지 않아요오...

이거 근데 용량은 둘째치고 너무 깨지더라고요...

어차피 GIF 많이 올려서 렉을 먹을거라면

차라리 예쁘게 렉을 먹고 싶어서...!!!

이제 보편적으로 써봅시다

그래서 그냥 APNG 원본 화질을 보장할 수 있는

WebM 확장자로 변환해주는 프로그램을 배포합니다.

이게 APNG -> GIF는 많던데 WebM은 없더라고요..^_ㅠ;;;

https://drive.google.com/file/d/1KiaQkOk3SKJDVUwKmzqU7kP9I390iyw4/view?usp=sharing

APNG_to_WebM_Converter.exe

drive.google.com

용량보다는 프레임이 많으면 그만큼 변환 시간이 오래 걸리더라고요 (당연하겠지만...)

변환모드가 2개가 있는데 용량 차이입니다 사실상 화질은 비슷한거 같습니다...

너무 간단한 프로그램이라 사용법은 생략하겠습니다...

당연하지만 맵에 움짤을 너무 많이 올리면 롤20이 버벅거릴 확률이 높습니다...

모쪼록 즐거운 세션 되길 바랍니다!

오류 관련 문의는 편하게 남겨주세요!

상단 GIF사진에서 사용한 소재 :

침식표 좌측상단의 깜빡이는 화살표:

https://booth.pm/ko/items/2651239

단삭님의 더블크로스 코코포리아 세팅 모듈:

https://www.postype.com/@lazylife/post/6570086

라코님의 APNG 전투배치도:

https://x.com/Laco_TRPG/status/1507267202025930752?s=20

그외 배경 반짝이들나 효과... booth 무료배포해주시는 apng 다운받았습니다.

이 프로그램은 오픈소스 프로젝트인 FFmpeg을 사용하여 제작되었습니다.
https://ffmpeg.org/

https://github.com/waSANkku/APNG_to_WebM_Converter.git

롤20 인세인 자동 핸드아웃 추가 확장 프로그램

wakku0201 — Mon, 20 Oct 2025 16:46:17 +0900

완전 딸깍은 아닙니다

혹시 롤20에서 인세인 핸드아웃을 넣어보신 적 있나요?

새 핸드아웃 > 구글문서 복사 > 붙여넣기 > 저장...

핸드아웃 템플릿 > 복제 > 수제 타이핑 > 저장...

아무튼 롤20 인세인 세팅할 때 핸아 넣는게

제일 귀찮다는 건 모두가 동의할 거 같네요

참고로 저는 이번에 인세인 캠페인을 가는데,

4인 2사이클 핸아 * 5를 직접 넣기엔 너무 귀찮더라고요!!

그래서 직접 만들어서 배포합니다

롤20 인세인 매크로.zip

0.02MB

▼ 사용법

브라우저 설정 - 확장앱 관리자 진입

개발자 모드 켜신 후 압축해제 된 확장앱 설치를 눌러 압축해제 한 폴더를 지정합니다.

롤방 접속 후 우측의 ▷버튼을 눌러 확장 플러그인을 펼칩니다.

3. 사용할 템플릿을 핸드아웃으로 넣어둡니다.

*쥬나님의 배포 핸드아웃 템플릿을 사용했습니다.

(https://www.postype.com/@zyuna-trpg/post/11391387)

텍스트가 들어갈 자리에 각각

핸드아웃 이름/핸드아웃 부연설명/핸드아웃 내용으로 맞춰주시면 됩니다.

꼭 맞춰주셔야 작동합니다!!!

완성된 템플릿 이미지

4. 이후 플러그인에서 핸드아웃을 추가해줍니다.

비밀 핸드아웃 체크 시 비밀 템플릿을 사용합니다.

추가된 핸드아웃은 하단 리스트에서 간략하게 표시됩니다.

클릭시 해당 핸드아웃을 수정할 수 있습니다.

*이름이 변경될 경우 새로운 핸드아웃으로 간주해 핸드아웃이 추가됩니다.

전부 작성하신 후 확장 프로그램의 설정에서 생성/복제 방식을 선택합니다.

(2025.10.28 내용추가)

설정의 경우 상단 주소창 우측의

퍼즐모양 아이콘을 눌러주시면 나옵니다(고정해두시는 걸 추천)

(방식을 변경하는 경우 새로고침해야 반영됩니다...)

복제 방식을 선택할 경우 해당 핸드아웃의 아이콘까지 복사가 되며,

생성 방식을 선택할 경우 Handouts 폴더에 순서대로 핸드아웃을 생성합니다.

*복제 방식을 선택하신 경우 폴더로 옮기는 건 수제로 해주셔야 합니다...

일괄 실행을 누르면 자동으로 핸드아웃이 추가됩니다.

작동화면

점프게이트 / 구버전 모두 동작을 확인했으나,

미처 확인하지 못한 오류가 있을 수 있습니다...

~~저도 일단 캠페인 세팅 한번 하고 배포합니다~~

오류 관련 문의는 편하게 남겨주세요!

껍질 미리깐 롤20 로그 편집기

wakku0201 — Thu, 18 Sep 2025 10:44:33 +0900

간단하게 롤20 로그를 백업할 수 있도록 플러그인을 만들어보았어요

https://wasankku.github.io/TRPGBackUP/OneClickR20Log.html

원클릭 롤20 스타일

wasankku.github.io

*크롬 사용을 추천합니다. 웨일에서는 스크롤바가 잘 안보여요...

다른 편집기와 비교하면...

빠릅니다!!

코드에디터를 적용해놔서...

그것뿐입니다...

시중에 좋은 편집기가 많으니 취사선택하세요><

사용법

1. 롤20 로그 한 페이지로 보기 후 복사

플레이어 인장 백업을 원하는 경우 상단의 코드를 미리 적용한 후 복사합니다.

+25.06.10 추가

더이상 data:text/html, <html contenteditable>을 거치시지 않아도 됩니다...

만 다수의 메세지를 삭제할 때 쓰시면 편하므로 접은글로 추가해둘게요^_^

2. data:text/html, <html contenteditable> 에 붙여넣기 후

F12 눌러서 body 태그만 복사

3. 웹페이지에 접속 후 코드 에디터에 붙여넣기

4. 이후 스타일 적용을 클릭하면 우측에 미리보기 화면이 출력됩니다.

구현된 기능은 다음과 같습니다.

- 커스텀 표의 너비를 창에 맞게 변경

- 내가 보낸 채팅 색상 통일

-양천일염님의 사담 API 일괄 제거

- 숨긴 메세지(This message has been hidden) 일괄제거

- 시스템 저널 등록

(저널명을 입력하면 해당 저널로 보낸 모든 채팅을 desc로 변경)

-오너 채팅 일괄삭제(콤마로 구분)

(플레이어명을 입력하면 해당 이름으로 보낸 모든 채팅을 삭제)

-더블클릭으로 텍스트 수정 가능

-한줄 삭제

업데이트 내역

250610

(1) 귓속말색상, emas 색상을 원하는 색으로 변경할 수 있게 수정

(2) 롤20 한페이지보기 > Ctrl+A 전체 복사 > 플러그인 붙여넣기 시 바로 편집 가능하도록 수정

250628

(1) 더블클릭으로 텍스트 수정 시 줄바꿈 허용 (shift + Enter)

(2) 이미지 붙여넣기 시 용량 개선

(*<html contenteditable>에서 이미지를 붙여넣기 하는 경우 적용이 안됩니다!!)

(3) 분할 기능 추가

삭제 버튼 옆에 분할 버튼 추가

버튼 클릭 시 해당 라인을 기준으로 로그 분할 (*일괄 저장 지원 X)

쓰다가 개선사항이나 추가기능을 원하시는 경우

편하게 멘션(@waSANkku)보내주시거나 덧글남겨주세요~

https://pale-blue-dot.space/ < 방명록에 남겨주시면 빠릅니다...

즐거운 TRPG 되시길 바랍니다^_^

갠홈 IMGUR/ImgBB API로 이미지 업로드

wakku0201 — Wed, 11 Jun 2025 19:40:09 +0900

요즘 로그 백업은 갠홈에 하고 있는데...

https://pale-blue-dot.space/

Space Oddity

pale-blue-dot.space

깨알 갠홈홍보(배너교환해요 ♥)

갠홈 서버 용량...을 이미지로 채우기엔 너무 아깝고

그래서 이미지 같은 경우에는 외부 URL을 걸어야하는데

문제: URL을 걸려면 IMGUR에 업로드 하고 다시 주소복사해야함

이게 너 무 귀찮아서... 가져오는 법을 공유해드려요

API는 Imgur / ImgBB 둘 중 하나 선택

Imgur의 경우 대리 호스팅으로 사용하면 정지될 수도 있다고 하는데

ImgBB도 10GB이상 올리면 모든 이미지가 삭제될 수도 있다고..

선택은 자유롭게 (본 글에서는 두 API 사용하는 법을 각각 다룰 예정)

참고로 imgBB의 경우 용량 제한이 있고 저작권에 걸리는 이미지의 경우 삭제함

(32MB 이하 이미지만 업로드 가능)

~~근데 체감상 Imugr보다 ImgBB가 속도는 훨씬!! 더 빠릅니다~~

(2025.11.15 수정)

ImgBB가 업로드 속도는 빠르지만 로딩속도가 너무 느리더라고요;;

Imgur 쓰시길...

IMGUR

1. Imgur API 클라이언트 ID 발급

IMGUR 회원가입이 필요합니다

저는 그냥 구글 계정 연동했어요

https://api.imgur.com/oauth2/addclient

가입 후 해당 링크에서 클라이언트 ID를 발급받습니다.

적당히 입력해요

클라이언트 추가를 끝내면 클라이언트 ID와 클라이언트 시크릿 키를 발급받을 수 있습니다.

여기서 ID를 복사해주세요.

2. 글쓰기 스킨

각자 쓰고 계신 글쓰기 스킨(write.skin.php) 파일을 열어줍니다.

위치는 적당히 알아서 삽입하시길...

<button type="button" id="imgurUploadBtn"><i class="fas fa-upload"></i> Imgur 업로드</button>
<input type="file" id="imgurFileInput" accept="image/*" style="display:none;" />

HTML 내부에 삽입

기존에 이미지 주소 링크를 입력하던 Input 요소의 ID값이 필요해요.

F12 눌러서 빠르게 확인하는 법

주소 입력란의 ID를 확인하셨으면 아래의 코드를 입력해주시면 됩니다.

	$(function () {
		const CLIENT_ID = 'CLIENT ID'; // ← 여기에 본인의 Imgur Client ID 입력
		const URL_INPUT_ID = $('#URL INPUT ID'); // ← 여기에 URL 입력란 ID 입력


		// 업로드 버튼 클릭 시 파일 선택창 띄우기
		$('#imgurUploadBtn').on('click', function () {
			$('#imgurFileInput').click();
		});

		// 파일 선택 시 업로드 실행
		$('#imgurFileInput').on('change', function () {
			const file = this.files[0];
			if (!file) return;

			URL_INPUT_ID.val('⏳ 업로드 중...');

			const formData = new FormData();
			formData.append('image', file);


			fetch('https://api.imgur.com/3/image', {
			method: 'POST',
			headers: {
				Authorization: 'Client-ID ' + CLIENT_ID
			},
			body: formData
			})
			.then(res => res.json())
			.then(data => {
			if (data.success) {
				URL_INPUT_ID.val(data.data.link);
			} else {
				URL_INPUT_ID.val('❌ 업로드 실패');
			}
			})
			.catch(err => {
			console.error(err);
				URL_INPUT_ID.val('❌ 네트워크 오류');
			});
		});
  	});

자바스크립트 삽입

적용 후 버튼 클릭 - 파일 선택하시면 작동됩니다!

ImgBB

1. Imgur API 클라이언트 ID 발급

ImgBB 회원가입이 필요합니다

https://api.imgbb.com/

가입 후 해당 링크에서 API key를 발급받습니다.

2. 글쓰기 스킨

각자 쓰고 계신 글쓰기 스킨(write.skin.php) 파일을 열어줍니다.

위치는 적당히 알아서 삽입하시길...

<button type="button" id="imgurUploadBtn"><i class="fas fa-upload"></i> Imgur 업로드</button>
<input type="file" id="imgurFileInput" accept="image/*" style="display:none;" />

HTML 내부에 삽입

기존에 이미지 주소 링크를 입력하던 Input 요소의 ID값이 필요해요.

F12 눌러서 빠르게 확인하는 법

주소 입력란의 ID를 확인하셨으면 아래의 코드를 입력해주시면 됩니다.

	const CLIENT_ID = 'ImgBB API Key'; // ← 여기에 본인의 ImgBB API Key 입력
	const URL_INPUT_ID = $('#URL INPUT ID'); // ← 여기에 URL 입력란 ID 입력

	$(function () {
		// 업로드 버튼 클릭 시 파일 선택창 띄우기
		$('#imgurUploadBtn').on('click', function () {
			$('#imgurFileInput').click();
		});

		// 파일 선택 시 업로드 실행
		$('#imgurFileInput').on('change', function () {
			const file = this.files[0];
			if (!file) return;

			URL_INPUT_ID.val('⏳ 업로드 중...');

			const reader = new FileReader();

			reader.onloadend = function () {
			const base64Image = reader.result.split(',')[1]; 

			const formData = new FormData();
			formData.append('key', CLIENT_ID); 
			formData.append('image', base64Image);

			fetch('https://api.imgbb.com/1/upload', {
				method: 'POST',
				body: formData
			})
				.then(res => res.json())
				.then(data => {
				if (data.success) {
					URL_INPUT_ID.val(data.data.url);
				} else {
					URL_INPUT_ID.val('❌ 업로드 실패');
					console.error(data);
				}
				})
				.catch(err => {
				console.error(err);
					URL_INPUT_ID.val('❌ 네트워크 오류');
				});
			};

			reader.readAsDataURL(file); // base64 인코딩
		});
	});

자바스크립트 삽입

다들 즐거운 갠홈 되시길!

롤20 플레이어 인장 백업 (+딸깍 백업)

wakku0201 — Thu, 5 Jun 2025 18:13:06 +0900

CORS 때문에 백업할 때 플레이어 인장 깨지는게

너 무 거슬려서... 가져오는 법을 연구해봤어요

~~(저는 명령만 했고, 실제로는 지피티가 짜주긴 했습니다)~~

일단 최종 리다이렉션 url로 치환되도록 변경한 코드라서,

아마 롤20에서 추가로 업데이트 되어도 잘 작동할 거...라고 생각해요(아마도)

1. CORS 허용 확장 프로그램을 다운받습니다

저는 최상단에 뜨는 거로 다운받았어요~

뭘 쓰셔도 상관은 없을 듯합니다

https://chromewebstore.google.com/detail/lhobafahddgcelffkeicbaginigeejlf?utm_source=item-share-cb

Allow CORS: Access-Control-Allow-Origin - Chrome 웹 스토어

Easily add (Access-Control-Allow-Origin: *) rule to the response header.

chromewebstore.google.com

2. 확장 프로그램 설치 후 롤20 채팅 내역 페이지로 들어갑니다.

확장프로그램 실행 후 토글 버튼을 클릭합시다.

빨간 네모를 클릭합니다(회색 - 비활성화)

클릭 후 활성화 된 모습

3. F12키를 눌러 콘솔창으로 진입합니다.

아래의 코드를 복사해서 붙여넣기 해주세요.

(꼭 롤20 채팅 내역에서 진행해주셔야 합니다!)

이 화면에서 코드를 복사>붙여넣기 합니다

(async () => {
  const imgTags = document.querySelectorAll('img');
  const urlCache = new Map();

  for (const img of imgTags) {
    const rawSrc = img.getAttribute('src');
    if (!rawSrc || !rawSrc.startsWith('/users/avatar/')) continue;

    const match = rawSrc.match(/^\/users\/avatar\/(\d+)\//);
    if (!match) continue;

    const avatarId = match[1];

    // 이미 캐시된 경우 → 그대로 대체
    if (urlCache.has(avatarId)) {
      img.src = urlCache.get(avatarId);
      continue;
    }

    try {
      const response = await fetch(rawSrc, { method: 'HEAD', redirect: 'follow' });
      if (response.ok) {
        const finalUrl = response.url;
        urlCache.set(avatarId, finalUrl);
        img.src = finalUrl;
      }
    } catch (e) {
      console.error(`❌ ${rawSrc} 처리 중 오류 발생:`, e);
    }
  }
})();

이후 전체복사 후 data:text/html 등의 편집기에 넣으면

깨지던 플레이어 인장이 정상적으로 출력되는 것을 확인하실 수 있습니다.

출력화면

늘 대신 백업해주시는 고마운 지인분을 위해