TRPG Roll20 채팅로그를 전자책으로 백업해봅시다

최종 업데이트일 : 2024.08.03.

전자책 파일인 epub을 작성하고 수정할 수 있는 툴인 sigil을 이용해서 롤20에서 진행한 로그를 백업해봅시다.

티스토리 등을 이용한 백업보다는 손이 많이 가고, 다소 복잡합니다. 대신 전자책 뷰어에서 볼 수 있고, 지문이나 대사를 이미지로 멋지게 공유할 수 있다는 장점이 있어요.

저 역시 html에 능통한 사람이 아니고, 여기저기 검색해가며 알아낸 방식이라 오류에 대해서는 크게 도와드리지 못할 수 있습니다. 그래도 최대한 아는 오류에 대해서는 알려드릴 테니, 백업 진행 도중 오류가 있다면 댓글 남겨주세요.

목차

1. 툴 소개 : sigil과 pageEdit

2. sigil과 pageEdit 실행

3. 롤20 채팅로그 가져오기

4. 깨진 이미지 수정하기

5. 다이스 테이블 크기 수정

6. 기타 설정 및 마무리

7. 예상되는 오류에 대한 해결법

1. 툴 소개 : sigil

sigil은 대표적인 epub 제작/편집 프로그램입니다. 무료 툴이며, html 기반이기 때문에 같은 html 구문을 이용하는 롤20의 채팅로그를 여기서 편집하고, 백업할 수 있습니다. 프로그램 설치는 아래 링크에서 가능합니다.

작성일 기준 윈도우 최신 버전은 2.2.1이며, 이전 버전인 0.9.10 이후로는 북뷰 미리보기가 빠져 있습니다. 대신, 이 기능을 pageEdit라는 별도의 플러그인 프로그램으로 구동할 수 있도록 되어 있습니다. html에 익숙하지 않거나 북뷰가 필요하다면 pageEdit을 같이 다운로드 한 후, sigil과 연결해주세요.

sigil 실행 > 편집 > 설정 > 일반설정 > 선호하는 외부 xhtml 편집기 설정

에서 pageEdit을 찾아서 설정하면 플러그인 연결이 완료됩니다.

2. sigil과 pageEdit 실행

제대로 플러그인이 연결되었다면, sigil을 실행했을 때 위와 같은 아이콘을 찾을 수 있습니다. 이 아이콘을 클릭하면 연결된 플러그인인 pageEdit가 자동 실행됩니다.

pageEdit가 실행된 화면입니다. mode:편집 상태인지 확인해주시고, 편집 모드가 맞다면 프로그램 준비는 끝입니다!

3. 롤20 채팅로그 가져오기

롤방에 들어가서 내용 > 채팅기록에 들어갑니다. 들어간 후 show on one page를 클릭해 모든 로그를 한 페이지에 띄워주세요. 그후 백업할 내용을 전부 쭉 드래그하고 ctrl+C 해줍니다.

로그를 복사했다면, 이것을 pageEdit에 붙여넣기 한 후, crtl+S 해주면 sigil에 그대로 명령어와 미리보기가 입력됩니다. 여기까지 했다면 이제 pageEdit 창은 닫아도 됩니다.

4. 깨진 이미지 수정하기

미리 보기 창을 보시면 아시겠지만, 붙여넣기를 했을 시, 캐릭터 인장을 포함한 모든 이미지는 위처럼 깨진 상태로 출력이 됩니다.

왜냐하면 롤20 로그의 이미지는 위와 같이 캐릭터시트 등에서 따온 "이미지 링크"를 출력하는 형태이기 때문입니다. 따라서 이것을 수정해야 깨진 이미지를 백업에서 보이게 적용할 수 있습니다.

먼저, sigil의 메뉴 탭 > 편집 > 설정 으로 들어갑니다.

그 후, 일반설정 > 보안 > EPUB에서 모든 유형의 외부 자원 허용을 체크 해줍니다.

가져온 채팅로그의 이미지는 앞서 말했듯이 롤20 자체에서 이미지를 1차 저장하고, 이것의 이미지 주소를 따와서 출력하는 방식이기 때문에 sigil에서는 이것을 외부 자원으로 인식, 미출력하는 것입니다.

떄문에 이를 허용해주어야 합니다.

pageEdit도 같은 식으로 설정을 변경해주세요.

메뉴 탭 > 파일 > 설정 > 일반 설정 > HTML 파일에서 모든 형태의 원격 리소스 허용을 체크 합니다.

이것만 해주면 끝입니다.

설정이 이상없이 수정되었다면 깨져있던 인장, 이미지 매크로 등이 정상적으로 표시되는 것을 확인할 수 있습니다.

만약 설정을 변경했는데도 이미지가 출력이 안된다면 다음과 받은 방법으로 코드를 수정해주세요.

이 문제는 안드로이드가 아닌 ios 기반 기기에서 파일을 열었을 때 발생하는 것으로 확인하였습니다!

먼저 sigil에서 검색 > 찾기&바꾸기 메뉴를 열어주세요.

롤20의 채팅창에 올라가는 캐릭터 인장은

형태로 되어 있습니다. 이 부분의 코드를 ctrl+C하고 찾기 창에 ctrl+V 해주세요.

그리고 이 부분에 들어갈 이미지를 별도로 준비한 후, sigil의 책 탐색기 > Images 폴더 우클릭 > 기존파일 추가 로 추가해서 준비합니다.

이미지 파일을 준비할 때에는 파일이름과 확장자(jpg, png)를 확인해야 합니다. 파일이름은 영문이어야 sigil에서 인식이 됩니다.

롤20의 채팅로그 창에서 캐릭터 인장을 우클릭해서 다른 이름으로 저장하면 이미지 저장이 됩니다.

파일이 추가되었다면 인장에 해당하는 코드를

으로 수정해야 합니다. 파일이름에는 저장한 이미지 이름을, 확장자에는 이미지의 확장자(png 또는 jpg)를 입력합니다. 이 명령어를 바꾸기 창에 입력해주고, 바꿔주면 됩니다. 오류가 없다면 정상적으로 출력됩니다.

각 캐릭터마다 원래의 롤20 이미지 주소가 다르므로, 각각 모두 검색>바꾸기 기능으로 고쳐주세요.

이미지 파일 이름은 대소문자를 구분합니다. 대소문자가 달라지면 별개의 이미지로 인식되어서 이미지 출력이 안될 수 있으니 꼭 같이 확인해주세요.

인장이 아닌 채팅창에 출력한 이미지 매크로 역시 동일하게 수정해주시면 됩니다. 이 경우에는 style 부분을

로 수정해주셔야 꽉 찬 크기로 출력됩니다. 인트로 롤꾸 코드의 경우 100%가 적당하고, 그 외 핸드아웃 등의 출력은 80%가 적당한 것 같습니다. 취향껏 조절해주세요.

5. 다이스 테이블 크기 수정

CoC에만 해당하는 사항입니다.

이대로 저장하면 끝이냐? 아닙니다. 제 주력룰들의 채팅로그를 사용해 시험해본 결과, CoC의 경우 다이스 테이블의 코드를 수정하지 않으면 백업 후 파일을 e북 리더기에서 열었을 때 화면에서 다이스 테이블이 빠져나가 잘려 보이는 일이 있었습니다.

이렇게요. 때문에 이 역시 코드를 조금 손 봐주어야 합니다. 이 역시 해당하는 코드만 찾아주면 쉽습니다.

다이스 테이블의 코드는 위와 같습니다. 여기서 중요한 것은 저 뒤의 table style 부분입니다. 이 부분의 따옴표 안에

를 추가해주시면 됩니다.

이렇게요. 삽입 위치는 상관 없습니다만 <table style="~~~">에서 저 따옴표 안에만 들어가면 됩니다.

맞게 수정했다면 이렇게 채팅창 안에 잘 들어간 형태로 빠져나간 부분 없이 보입니다.

여기까지 했다면 중요한 수정은 모두 끝입니다!

6. 기타 설정 및 마무리

이 외에는 자잘하게 목차 설정, 커버 이미지 삽입, 메타데이터 설정 등이 있습니다. 이 설정들은 크게 중요한 부분은 아니어서 취사선택하여 수정해주시면 되겠습니다.

(1) 목차 설정

목차에 추가할 부분을 선택한 후, 메뉴 탭에서 h* > heading 크기 선택을 해 줍니다. 그리고 도구 > 차례 > 차례 만들기를 열어주시면 heading 설정한 부분이 목록에 뜹니다. 여기서 추가할 부분에만 체크 표시를 하고, 각 목차 이름을 수정한 다음 확인을 눌러주면 목차 설정이 완료됩니다.

CoC는 각 챕터 별로, 인세인이나 마기카로기아는 사이클 별로 목차 설정해주시면 좋습니다.

(2) 커버 이미지 삽입

커버=전자책 어플이나 프로그램에서 보여주는 표지 이미지를 의미합니다.

커버로 쓸 이미지를 sigil의 책 탐색기 > Images 폴더 우클릭 > 기존파일 추가 로 추가해줍니다. 그 후 책 탐색기 > 해당 커버 이미지 우클릭 > 표지 그림으로 설정해줍니다. 마지막으로 메뉴 탭의 도구 > 표지 추가 로 들어가서 해당 이미지를 선택하고 확인 눌러주시면 커버 이미지 설정이 완료됩니다.

이때 커버로 사용할 이미지의 파일이름은 반드시 영문이어야 합니다! 아니면 sigil에서 인식이 안되서 설정해도 커버가 보이지 않습니다.

(3) 메타데이터 설정

메뉴 탭의 도구 > 메타데이터 편집 으로 들어가서 수정하면 됩니다.

저는 제목은 시나리오 이름, 저자는 시나리오 라이터, 생성일은 세션 시작일, 기여자는 PC와 GMPC 이름을 주로 넣습니다.

(4) CSS 설정

저처럼 user CSS 등의 확장 프로그램을 사용하신다면, 로그를 불러왔을 때 폰트가 적용되지 않습니다.

이 부분을 적용하고 싶다면 sigil의 책 탐색기 > Styles 폴더 우클릭 > 빈 스타일시트 추가 로 CSS 시트를 추가해줍니다. 이때 생성된 CSS 시트에 설정한 웹폰트 등의 CSS 명령어를 작성해준 후, 책 탐색기 > Text 폴더 > 적용할 xHTML 파일 우클릭 > 스타일시트 연결 > 연겷한 시트 체크 후 확인 해주시면 적용됩니다.

sigil 미리보기 설정에 따라 적용이 안된 것처럼 보일 수 있으나, 코드만 제대로 되어있다면 리더기에서 읽었을 때는 정상적용 됩니다.

여기까지 모두 완료 되었다면 정말로 끝입니다! ctrl+S를 눌러 저장해주세요. 그리고 완성된 로그 파일을 열어서 발견하지 못한 오류는 없는지, 한 번 확인해주시고 오류가 있다면 다시 수정을 거쳐 주세요.

7. 예상되는 오류에 대한 해결법

다음은 제가 지인분의 백업 시도를 도와드리면서 받은 질문 몇가지에 대한 해결법입니다. 이 외에도 다양한 오류가 발생할 수 있으며, 저 역시 그 모든 걸 다 해결할 수는 없으므로.. 참고만 해주시고 html 관련한 사항은 저보다는 구글의 힘을 빌리시는 것이 빠릅니다. 그래도 문의 남겨주신다면 아는 한에서 최대한 도와드리겠습니다.

(1) 오류창만 뜨고 미리보기가 정상적으로 나오지 않아요!

다양한 원인이 있을 수 있습니다만, 제가 백업하는 과정에서 발견한 오류 사항에 대해서 해결 방법을 적어두겠습니다.

첫번째, 채팅로그가 아닌 채팅로그의 코드를 붙여넣기 한 것은 아닌지 확인해주세요. 제 백업 안내글에서는 채팅로그 자체를 복사해서, pageEdit를 통해 불러오는 방식을 이용합니다. 때문에 코드를 pageEdit에 붙여넣기 한 경우 미리보기가 정상 출력되지 않습니다. pageEdit에 붙여넣기 한 후, ctrl+S로 sigil로 보냈는지도 확인해주세요.

두번째, 반대로 채팅로그를 pageEdit가 아닌 sigil에 붙여넣기 한 것은 아닌지 확인해주세요. sigil은 html 코드만 인식하기 때문에 채팅로그를 pageEdit에 붙여넣은 다음에 sigil로 보내야 합니다.

세번째, sigil을 처음 열었을 때 이미 작성되어 있는 코드를 삭제하면 안됩니다. sigil을 처음 열면 다음과 같은 코드가 작성되어 있습니다.

여기서 우리가 pageEdit으로 채팅로그를 입력하면, <body>부터 </body> 사이에 채팅로그의 코드가 들어가게 됩니다. 이 서식이 삭제되거나 수정되면 정상 출력되지 않으므로, 이 부분은 건드리지 말고 채팅로그를 입력해주세요.

(2) 외부 자원/리소스 허용을 체크했는데도 미리보기에서 이미지가 안보여요!

단순한 미리보기 오류입니다! 파일 저장 후 리더기에서 확인하면 정상적으로 이미지가 잘 출력됩니다.

위는 sigil과 pageEdit의 설정을 변경한 후에도 이미지가 보이지 않는 미리보기 창입니다.

하지만 이 파일을 전자책 어플에서 열어보면 정상적으로 이미지가 보입니다. (리디북스, 모바일 환경에서 확인하였습니다.) 때문에 미리보기가 여전히 나오지 않는다 하여 이상이 있는 것은 아닙니다.

(3) 이미 티스토리 등에 백업을 했어요. 이것도 sigil로 옮길 수 있나요?

가능합니다.

내가 백업해서 코드를 직접 가져올 수 있는 경우 : 백업한 글의 수정창을 열어주세요. 에디터 모드를 기본 > html 모드로 바꾼 후 코드 전체를 ctrl+C, sigil로 넘어와서 <body>부터 </body> 사이에 코드를 ctrl+V 해줍니다. 이후 과정은 본 가이드의 설명과 동일합니다.

다른 사람이 백업해서 코드를 직접 가져올 수 없는 경우 : 이 경우에는 본문 드래그와 ctrl+C, ctrl+V가 가능해야 합니다. 본문을 드래그하여 ctrl+C 합니다. sigil 실행 > pageEdit 플러그인 실행 > pageEdit에 ctrl+V한 후 저장합니다. 이후 과정은 본 가이드의 설명과 동일합니다.

작성자입니다. 가이드글을 몇번이나 수정하고 있는 건지 모르겠네요... 하지만 이것저것 조금 더 편하고 쉬운 방법이 없나 시험해보다보니 수정사항이 계속 생기고 있습니다.

이전에는 깨진 이미지를 수정하기 위해... 일일히 코드를 찾기/바꾸기 하는 매우 복잡하고 번거로운 방식을 썼는데 sigil에 저 기능이 있는 것을 처음 알았습니다. 이게 이렇게 쉽게 해결될 줄은 몰랐습니다.

다만... 안드로이드 기반 기기와 ios 기반 기기에서 확인했을 때 출력이 되는 경우가 있고, 안되는 경우가 있어서 안될 경우 이전 버전 가이드에서 설명한 것처럼 코드 수정 노가다를 조금 해주셔야 합니다.

모쪼록 재미있게 즐긴 세션의 추억을 남기는 데에 도움이 되길 바랍니다. 위에도 재차 써두었지만, 백업 하시면서 막히거나 문제가 생긴다면 댓글 남겨주세요! 아는 한에서 최대한 답변해드리도록 하겠습니다.

이상으로 롤20 채팅로그 epub으로 백업하기 가이드를 마칩니다.

아래는 아무 내용 없는 후원용입니다.

후원해주시면 제가 츄파츕스를 하나 사 먹습니다.