(티스토리) 미넴스킨 - BGM 넣는 방법 및 스킨을 업데이트해도 스킨 설정 유지하는 방법!

오늘은 제 블로그에서 사용하고 있는 미넴 스킨의 기능 중에 하나인 BGM 넣는 방법에 대해 자세히 알려드리려고 합니다. 그리고, 만약 미넴 스킨의 버전이 업데이트되어 새롭게 적용할 때, 스킨 편집 부분의 설정 내용이 초기 설정으로 돌아가서 BGM 을 포함해 직접 설정한 값을 다시 넣어야 되는 경우가 있습니다. 어떻게 이 값을 본인의 값으로 저장할 수 있는지도 알려드리겠습니다.

미넴 스킨 BGM 적용 방법

사실 미넴 스킨 BGM 변경 방법에 대해서는 아미넴님의 블로그에 이미 포스팅이 되어있습니다. 하지만 글을 확인하지 못하신 분들이 꽤 있으신 거 같더라구요..! 그래서 어떻게 설정해야 하는지 설명드리겠습니다.

BGM 업로드

미넴 스킨에 BGM을 넣기 위해서는 당연히 .mp3 파일을 업로드해야 합니다. 해당 html 파일 업로드에 업로드하는 것이 아닌, 본인의 블로그에서 비공개 처리한 글 안에 다운 받은 .mp3 파일을 업로드해줍니다. 

 

🚨  반드시 티스토리 블로그 게시글에 파일을 업로드해주셔야 합니다. 왜냐하면 대부분 브라우저에서 CORS 정책에 따라 외부 링크 사용이 불가하기 때문입니다.

 

업로드한 파일 오른쪽 클릭 ➜ 링크 주소 복사를 눌러 링크 형식으로 클립보드에 복사합니다.

TIP

 

 

파일명 길이
.mp3 파일을 업로드하기 전, 파일명이 길면 길수록 링크 주소의 길이가 길어지기 때문에 파일의 이름은 최대한 짧게 해 주시는 게 좋습니다. ex) bgm1, bgm2, bgm3... 이유는 아래에서 설명드리겠습니다.

스킨 편집 파트

그다음으로는,

 

블로그 관리 ➜ 꾸미기 ➜ 스킨 편집 ➜ 최하단부 '배경음악 설정' 또는 Ctrl + F로 '배경음악 설정' 검색을 해줍니다.

 

그러면 일반적으로 타이틀에는 음악의 제목을 넣고 URL 부분에는 복사한 링크를 넣어주면 되는데, URL에 주소를 넣고 나면 마지막 키워드인 .mp3 까지 나오지 않고 중간에 끊긴 것을 확인할 수 있습니다.

이유는 링크의 글자 수가 100자가 넘어갔기 때문인데, 만약 100자가 넘어간 URL이라면 개발자 도구를 사용하면 됩니다.

개발자 도구 

개발자 도구를 사용하기 위해선 윈도우 : F12 / 맥 OS : 옵션 + 커맨드 + i 를 눌러서 개발자 도구를 활성화하고 아래 사진의 순서대로 진행해 줍니다.

maxlength 부분을 여유 있게 1000자로 변경하시고, 개발자 도구가 아닌 왼쪽 URL XX 부분에 복사한 mp3 파일 주소를 넣어주시면 됩니다.

그리고 이 작업을 원하시는 만큼 반복해주시면 됩니다. 이렇게 BGM 부분은 성공적으로 적용했습니다. 

index.xml

하지만! 한 가지 문제점이 있습니다. 만약, 미넴 스킨이 업데이트돼서 새롭게 적용했을 경우에 우리가 했던 모든 작업들이 초기값으로 돌아가게 됩니다. 왜냐하면 티스토리 스킨 파일에는 index.xml이라는 것이 존재하는데 이 파일이 바로 스킨 편집을 세팅하는 파일입니다. 

 

index.xml을 열어서 그곳에 BGM URL을 직접 넣어 저장해 스킨을 업로드하면 기본 설정값이 우리가 설정한 BGM주소를 포함하게 됩니다.

 

이 파일을 수정하기 위해서는 블로그 관리 ➜ 꾸미기 ➜ 스킨 변경 ➜ 최 상단 다운로드 선택

본인의 스킨을 다운로드하면 index.xml 파일을 찾을 수 있습니다.

여기서 선택지가 나눠지게 됩니다. 만약 index.xml을 더블클릭했을 때 파일이 열린다면 그 리더에서 수정하시면 되고, 파일을 찾을 수 없다고 나오면 아래 사이트에 접속하셔서 수정하셔야 합니다.

 index.xml가 열리지 않을 때 해결 방법

먼저 stackblitz 사이트에 접속해주고. 이곳에 index.xml을 드래그 앤 드롭해서 index.xml 파일에 접근해줍니다.

index.xml 수정해야 할 부분

index.xml파일을 열었으니, BGM URL를 수정해야 하는 부분을 찾아야 하는데, Ctrl + F를 누르고 '배경음악 설정'을 검색해줍니다.

 

그러면 아래와 같이 코드를 찾을 수 있습니다.

<variablegroup name="배경음악 설정 (사용 여부는 사이드바에서 설정)">

      ...
      
 </variablegroup>

그리고 아래와 같이 제목과 URL을 추가해 줄 수 있습니다. ( 작은따옴표는 빼고 입력하시면 됩니다)

 

BGM 제목 부분

<variable>
  <name>bgm-title-1</name>
  <label><![CDATA[ 타이틀 1 ]]></label>
  <description><![CDATA[]]></description>
  <type>STRING</type>
  <option />
  <default><![CDATA[ '제목 입력' ]]></default>
</variable>

URL 부분

<variable>
  <name>bgm-src-1</name>
  <label><![CDATA[ URL 1 ]]></label>
  <description><![CDATA[]]></description>
  <type>STRING</type>
  <option />
  <default><![CDATA[ '이곳에 링크 입력' ]]></default>
</variable>

모두 입력하신 후에는 Ctrl + S를 눌러 저장하신 뒤에 index.xml을 다시 다운로드한 스킨 안에 덮어 씌워줍니다.

스킨에 적용

index.xml파일을 저장했다면 이제 다시 블로그 관리 ➜ 꾸미기 ➜ 스킨 변경 ➜ 스킨 목록 ➜ 스킨 등록을 누르고 저장했던 스킨을 모두 업로드해줍니다. 그리고 저장한 스킨을 적용해주세요.

자, 이제 편집을 들어가서 확인해보면 성공적으로 우리가 설정한 BGM 타이틀 및 URL이 잘 들어가 있는 것을 확인할 수 있습니다.

 

이 방법을 통해 단순히 BGM만이 아니라 원하시는 설정을 직접 넣어주셔서 미넴 스킨의 기본 값을 변경해주시면 스킨이 업데이트될 때마다 index.xml만 따로 넣어줄 수 있습니다.

 

주의할 점은 미넴 스킨의 index.xml에 어떠한 기능이 추가된 상태로 업데이트가 되면 해당 기능을 사용할 수 없기 때문에 만약 index.xml 부분이 업데이트되었다면, 수정한 값을 복사해서 붙여 넣어주셔야 합니다.

---

혹시 미넴 스킨의 기능에 대해 궁금하시거나 미넴 스킨이 매력적으로 느껴져 다운로드하시고 싶으신 분들은 여기를 눌러 다운로드하실 수 있습니다.

티스토리 무료 최강 미넴 스킨 소개 및 설치 방법

이렇게 이번에는 미넴 스킨의 BGM 설명 방법 및 스킨을 업데이트해도 스킨 설정 유지하는 방법에 대해 알아봤습니다.

 

읽어주셔서 감사합니다🤟