[가이드] 외부 스타일로 롤20 로그 백업하기
목차
- 외부 스타일이란⋯⋯
- 기초편: 로그 올리기
- 심화편: 로그 편집하기
- 응용편: 커스텀 시트 넣기
외부 스타일이란⋯⋯
간단하게 말하자면, 서식 정보를 다른 곳에(티스토리의 경우 스킨 파일에) 둔 것입니다.
대강 이런 차이가 생깁니다. 단순 복붙인 인라인 스타일은 표 템플릿이 들어가면 더욱 길어지기 때문에 10페이지 이상의 로그 긁기가 어렵습니다. 편집기에서 직관적인 수정이 가능하다는 장점이 있지만, 대신 제한적이고 불안정합니다. 서식 하나 바꾸려면 전체 찾아 바꾸기를 해야 한다든가⋯⋯ 위치만 좀 옮기려고 했는데 갑자기 줄이 통째로 무너진다든가⋯⋯.
그래서 저는 이렇게 주장합니다.
“무거운 서식은 이제 스킨에 맡기고 내용만 옮겨 오세요!”
Q. 그럼 스킨 바꾸면 깨지는 건가요?
A. 그건 그렇네요⋯⋯가 아니라, 다양한 방법이 있습니다. 따로 제공해 드린 서식 파일을 함께 옮길 수도 있고, 내부 스타일 방식으로 바꿀 수도 있고(이 글 하단에서 설명합니다), 그냥 롤20에서 긁어 오듯 긁어서 가져가실 수도 있습니다. 티스토리에 적용하면서 코드를 간추렸기 때문에 롤20에서 긁는 것보다 더 안정적인 서식이 나옵니다(!).
어떻게 알았냐면 스킨 제작 목적 짤 만들면서 티스토리에서 복사했더니 멀쩡하게 나와서 당황했거든요⋯⋯. (결국 롤20에서 새로 긁음)
외부 스타일로 백업 시 장점?
- 코드 길이가 단축되어 10페이지 이상의 로그도 한 번에 옮길 수 있다.
- 주사위 템플릿 크기 편집 과정을 거치지 않아도 된다.
- (코드 편집 프로그램이 있다면) 수정이 간편하다.
- (원한다면) 로그 서식 일괄 변경이 가능하다.
- Rollstory20 스킨 사용 시 무너진 서식과 씨름하지 않아도 된다!
단점은 편집하려면 HTML 코드와 대면해야 한다. 정도가 있겠습니다.
기초편: 로그 올리기
크롬 브라우저를 사용합니다.
반드시 <div class="textchatcontainer" ~~>부터 끝까지 포함된 풀 버전으로 올려주세요. 서식 적용에 필요합니다.
※ 작성 모드를 변경할 때 순수 HTML이 아닌 코드는 전부 날아갑니다. 따라서 인라인 CSS를 사용하는 주사위 시트 내지 CSS 롤꾸가 포함된 로그의 경우, 한 번이라도 기본 모드로 변경하면 서식이 사라지니 유의해 주세요.
이렇게 간단하게 로그 업로드는 끝났지만, 성향에 따라 오타 등을 수정하고 싶은 경우도 있습니다.
심화편: 로그 편집하기
여기서부터는! 코드 편집 프로그램이 있으면 좋습니다. 없어도 가능은 합니다만 실수할 가능성이 높아지고 눈이 아픕니다. 저는 Visual Studio Code를 쓰고 있습니다. 무료 프로그램이니 없으신 분은 이참에 받아가셔도 좋겠습니다.
너무 원론적으로 들어가면 머리 아프니까 딱 로그 편집에 필요한 만큼만 설명하겠습니다.
파일 만들기
처음 들어가면 폴더를 열라고 합니다. 새로 만들든 하나 지정하든 해서 열면 됩니다.
(아마도) 가장 빠르게 새 파일을 만드는 버튼입니다. 이름이 .html로 끝나야 합니다.
그리고 만들어진 공간에 코드를 붙여넣고 Ctrl 키를 누른 채 K, F를 순서대로 눌러주시면 코드가 보기 좋게 정렬됩니다.
편집하기
편집할 땐 옆에 채팅 로그 실물을 띄워놓고 합니다. Ctrl+H(찾아 바꾸기)를 활용하면 없어진 이미지 대체도 수월하게 할 수 있습니다. 이미지 링크 따는 법은 이걸 보고 있을 정도의 롤20 유저라면 이미 알고 계실 거라 생각하고 생략하겠습니다.
메시지를 통째로 이동/삭제하려는 경우, 한 메시지의 시작이 <div class="message ~~" ~~>라는 것만 기억하면 쉽습니다. 메시지의 시작부터 그 다음 메시지의 시작 직전까지를 쭉 선택하면 그게 메시지 하나가 됩니다!
한편 메시지 내부를 편집하려면 위와 같은 구조를 이해해야 합니다. GM인 경우 대사 뒤에 <div ~~ class="flyout"></div>(메시지 숨기는 버튼)가 붙어 나오는데, 타임스탬프와 마찬가지로 가려지도록 해둬서 있으나 없으나 차이는 생기지 않습니다.
편집 시 주의 사항
최종본 첫 부분에는 반드시 <div class="textchatcontainer" ~~><div class="content">까지가 포함되어 있어야 합니다. 편집한 파일은 혹시 또 수정할 게 생각나거나 이사하게 될 때를 대비해 저장해서 가지고 있는 것을 추천드립니다.
응용편: 커스텀 시트 넣기
스킨에서 지원하지 않는 시트 템플릿이 있는 경우 백업하기가 난감할 수 있습니다.
이때 선택지는 총 3가지가 있습니다.
인라인 스타일 사용하기
로그가 짧다면 이 방법이 경제적입니다. 혹은 CSS 파일이 제공되지 않는 내장 시트인 경우에도 소스를 뜯지 않는 이상 이 방법을 써야 합니다.
편집기에 단순 복붙하기. 롤20 로그 백업 치면 많이 나오고 이 글 서두에서도 언급한 그 방법입니다.
내부 스타일 사용하기
로그는 길지만, 특정 세션에서만 한두 번 쓰고 만 시트라면 이 방법이 경제적입니다.
- 백업할 로그 HTML 맨 위에 <style></style>을 추가합니다.
- 커스텀 시트 CSS 파일을 열어서 내용을 복사합니다. 이때 채팅 로그에 사용되지 않는, 잠재적으로 오류를 일으킬 수 있는 내용이 많으므로 주사위 템플릿만 발췌하는 것이 안전합니다. 보통 주사위 템플릿 관련은 .sheet-rolltemplate-으로 시작합니다.
- 복사한 CSS를 <style>과 </style> 사이에 붙여넣습니다.
- 그대로 업로드합니다. 이 방법을 쓰는 경우 티스토리에서 작성 모드를 바꿀 때 서식이 증발하니 주의하세요.
외부 스타일 사용하기
여러 세션에 걸쳐 많이 사용한 시트라면 이 방법을 권장합니다. 다만 이렇게 넣은 시트가 늘어나면 블로그가 점점 무거워지니 적당히 조절해야 합니다.
1. CSS 파일 업로드하기
블로그관리 > 꾸미기 > 스킨 편집 > html 편집 (팝업은 용감하게 패스하세요) > 파일업로드로 들어가 커스텀 시트 CSS 파일을 추가합니다. 이때 채팅 로그에 사용되지 않는, 잠재적으로 오류를 일으킬 수 있는 내용이 많으므로 주사위 템플릿만 발췌하는 것이 안전합니다. 보통 주사위 템플릿 관련은 .sheet-rolltemplate-으로 시작합니다.
2. 코드 추가하기
HTML 탭으로 전환해 ##_article_rep_desc_##를 찾습니다. Rollstory20 v1.3.2 기준 421번째 줄에 있습니다. 그 위에 <link rel="stylesheet" href="./images/파일명.css">를 추가합니다. 겸사겸사 안 쓰는 템플릿 코드는 지우셔도 됩니다.
3. 업로드하기
이제 커스텀 시트도 스킨의 일부가 되었습니다! 기존 템플릿 백업할 때처럼 하시면 됩니다.