Page colors and player skin

1. 코딩 없이 화면에서 만드는 방법

1. 메쉬멜로에 로그인한 뒤 왼쪽 ‘나의 멜로’를 누릅니다.
2. 상단의 ‘플레이어 스킨’을 누릅니다.
3. 스킨 이름과 색상 칸을 바꿉니다. 색상 칸을 누르면 브라우저의 색상 선택기를 사용할 수 있습니다.
4. 모서리 숫자·글꼴 계열·커버 모양을 고릅니다. 처음에는 모서리 20, 글꼴 system, 커버 square로 시작해도 좋습니다.
5. 배경 이미지를 사용하려면 선택 배경 이미지에 JPG·PNG·WebP 파일 한 장을 올립니다. 현재 한도는 200KB입니다.
6. ‘스킨 저장’을 누릅니다. 이때 플레이리스트의 곡이나 공개 상태는 바뀌지 않습니다.
7. 공유 코드 페이지에서 ‘공식 플레이어 열기’를 눌러 실제 플레이어를 확인합니다. 이미 외부 사이트에 삽입했다면 그 페이지를 새로고침하세요.

미리보기 이미지를 따로 만드는 기능은 없습니다. 실제 서비스 플레이어를 열어 확인합니다. 설정을 바꿔도 이미 열려 있는 다른 사람의 탭이 자동 새로고침되지는 않습니다.

2. skin.json으로 직접 만들기

외부 디자인 도구나 텍스트 편집기에서 제작하고 싶다면 아래 예제를 사용하세요. 복사할 때 첫 중괄호부터 마지막 중괄호까지만 가져옵니다. 코드 표시용 역따옴표나 ‘json’이라는 제목은 파일에 넣지 않습니다.

예제 skin.json 파일 받기

Windows 메모장으로 저장

1. 메모장을 열어 복사한 JSON을 붙여 넣습니다.
2. ‘파일 → 다른 이름으로 저장’을 누릅니다.
3. 파일 이름은 skin.json, 파일 형식은 ‘모든 파일’, 인코딩은 UTF-8을 선택합니다.
4. 탐색기에서 파일 확장명을 표시해 skin.json.txt로 저장되지 않았는지 확인합니다.

macOS에서 저장

서식 있는 문서 대신 일반 텍스트 모드의 편집기를 사용하세요. UTF-8 텍스트로 저장하고 확장자가 .json인지 확인합니다. 문서 파일(.pages, .docx, .rtf)은 스킨 파일이 아닙니다. JSON 파일은 32KB 이하여야 합니다.

각 항목의 의미

색상은 # 기호와 영문·숫자 6자리입니다. 예를 들어 #ff6633처럼 적습니다. CSS 코드·rgb 함수·url()·HTML을 넣지 않습니다. 마지막 항목 뒤에 쉼표를 붙이지 말고, 키와 문자열에는 일반 큰따옴표를 사용하세요. JSON에는 // 주석이나 /* 설명 */ 주석을 넣을 수 없습니다.

3. 배경 이미지 준비하기

배경은 선택 사항입니다. 이미지가 없어도 색상만으로 스킨을 만들 수 있습니다. 현재 스킨 배경 한도는 200KB이며 관리자가 변경할 수 있습니다. 실제 파일을 검사하므로 확장자만 .jpg로 바꾸는 것은 변환이 아닙니다.

1. 본인이 만들었거나 적절한 사용 권한이 있는 그림을 준비합니다. 다른 서비스의 표지·사진을 임의로 가져오지 마세요.
2. 처음에는 800×800px 또는 1000×600px 정도의 무늬가 단순한 이미지로 시작하는 것을 추천합니다. 이는 디자인 제안이지 필수 규격은 아닙니다.
3. 그림 안에 버튼·곡명·작은 글자를 미리 넣지 마세요. 실제 재생 버튼과 글자는 플레이어가 따로 표시합니다.
4. 사진은 JPG 또는 WebP, 투명 배경이나 단순한 그림은 PNG 등으로 내보내면서 용량을 확인합니다.
5. 파일 속성의 실제 바이트가 한도보다 작은지 확인합니다. 기본 200KB는 204,800바이트입니다. 한도에 너무 가깝다면 약간 더 압축하면 안전합니다.

한 변 4096px, 전체 1,200만 화소를 넘는 그림, GIF 애니메이션, SVG, HTML 등은 받지 않습니다. 업로드 이미지의 메타데이터·혼합 콘텐츠를 줄이기 위해 서버에서 다시 이미지로 저장하고, 변환 결과도 한도를 넘으면 거부합니다. 프로필이나 아티스트 이미지를 바꾸는 메뉴와 플레이어 배경 메뉴는 별개입니다.

읽기 좋은 색을 고르기

어두운 바탕에는 밝은 글자를, 밝은 바탕에는 어두운 글자를 사용하세요. 강조색과 재생 버튼의 흰색 기호가 서로 잘 보이도록 선택합니다. 강한 사진 위에는 플레이어가 바탕색을 반투명으로 덮어 가독성을 높입니다. 색이 예뻐도 제목이 안 읽히면 보조색을 더 진하게 바꾸세요.

4. JSON과 배경을 ZIP 하나로 묶기

배경 없이 설정만 적용한다면 .json 파일 하나를 바로 올리면 됩니다. 배경까지 함께 전달하려면 아래 두 파일을 ZIP의 최상단에 넣습니다.

skin.json
background.jpg

배경 파일은 background.jpg, background.png, background.webp 중 정확히 하나만 넣으세요. skin.json은 필수입니다. 선택한 두 파일 자체를 압축해야 하며, 폴더째 압축해서 ZIP 안에 또 폴더가 생기면 안 됩니다.

압축 전 확인

1. skin.json과 background 파일을 같은 작업 폴더에 놓습니다.
2. 다른 문서나 숨은 파일은 선택하지 않고 두 파일만 선택합니다.
3. OS의 ZIP 압축 기능 또는 ZIP 도구로 압축합니다.
4. 완성한 ZIP을 열어 첫 화면에 skin.json과 background 파일이 직접 보이는지 확인합니다.
5. __MACOSX, .DS_Store, 썸네일 파일, 중첩 폴더가 있으면 삭제하고 다시 압축합니다.

압축파일 자체는 5MB 이하이며, 압축을 풀었을 때도 JSON 32KB와 배경 한도를 각각 만족해야 합니다. 작은 ZIP으로 압축되었다고 큰 배경이 허용되는 것은 아닙니다. 스크립트·폰트·음원·실행 파일·심볼릭 링크는 넣지 마세요. 서버에서 안전한 항목만 읽으므로 사용자 ZIP을 웹 루트에 그대로 풀지 않습니다.

5. 업로드해서 적용하기

1. ‘나의 멜로 → 플레이어 스킨’을 엽니다.
2. 직접 파일을 만들었다면 JSON/ZIP 업로드 항목에서 해당 파일을 선택합니다.
3. JSON만 올리고 배경은 따로 올리고 싶으면 선택 배경 이미지도 고릅니다. ZIP에 배경이 들어 있다면 ZIP의 배경이 우선합니다.
4. 파일 업로드를 선택하면 해당 파일의 설정이 화면의 수동 입력값보다 우선합니다. 일부 항목을 다시 바꾸려면 먼저 업로드 저장을 마친 뒤 파일을 선택하지 않고 화면에서 수정하세요.
5. ‘스킨 저장’을 누릅니다. 성공 메시지를 확인한 뒤 공식 플레이어를 다시 여세요.
6. 오류가 나면 먼저 형식과 용량을 확인하세요. 기존 정상 스킨은 저장에 성공하기 전까지 유지됩니다.

모든 회원 플레이리스트는 곡 수와 관계없이 자동 공개됩니다. 공개·재생 가능한 곡은 MeshMelo 공식 외부 플레이어에서도 기본적으로 재생됩니다. 곡이 비공개·삭제 상태가 되면 플레이어가 해당 곡을 건너뜁니다. 공유 코드의 주소는 그대로이므로 스킨만 바꿨다고 코드를 다시 붙일 필요는 없습니다.

현재 설정 보관하기

설정 화면의 현재 JSON을 복사해 UTF-8 파일로 보관할 수 있습니다. JSON 내보내기에는 배경 이미지 파일 자체는 포함되지 않으므로 원본 그림도 별도로 보관하세요. 기본 상태로 되돌릴 때는 예제 값을 입력하거나 ‘기본 스킨으로 되돌리기’를 사용합니다. 배경도 없애려면 배경 삭제 항목을 함께 확인하세요.

6. 안전한 스킨과 임의 웹페이지의 차이

메쉬멜로 스킨은 정해진 JSON 속성과 이미지로 제작합니다. 누구나 임의 HTML·JavaScript·PHP·CSS를 업로드해서 다른 회원의 브라우저에서 실행하게 하는 기능은 아닙니다. 광고 추적 코드, 로그인 유도 폼, 외부 iframe, 다운로드 버튼, 음악 원본 주소, 사용자 쿠키를 읽는 기능을 추가할 수 없습니다.

곡명·재생 제어·MeshMelo 출처 링크는 기본 구조로 유지합니다. ‘스스로 제작’은 이 안전한 범위 안에서 색과 형태·배경을 만드는 방식입니다. 레이아웃 자체를 완전히 새로 코딩하려면 별도 개발 검토가 필요하며, 파일을 올리는 것만으로 실행하지 않습니다.

7. 오류 문구별 해결 방법

스킨은 JSON 객체여야 합니다

시작이 {, 끝이 }인지 확인하세요. 빈 텍스트·배열·일반 문서가 아닌지 확인하고 따옴표·쉼표 오류를 점검합니다.

지원하지 않는 스킨 속성

위 표에 있는 키만 사용할 수 있습니다. css, script, html, url, image_url 등 임의 키를 지우세요. 배경은 파일 업로드 항목으로 넣습니다.

색상 형식이 올바르지 않습니다

#과 6자리 숫자/영문을 사용하세요. #fff, red, transparent, rgba()는 이 형식에서 지원하지 않습니다.

radius 또는 version이 올바르지 않습니다

숫자에 큰따옴표를 붙이지 마세요. version은 1, radius는 0~28의 정수입니다.

폴더·실행 코드·불필요한 파일은 넣을 수 없습니다

ZIP을 열어 최상단의 skin.json과 배경 하나만 남겨 다시 압축합니다. 원본 디자인 파일이나 미리보기 파일을 넣지 마세요.

이미지 용량을 초과했습니다

해상도를 낮추거나 압축률을 높여 다시 내보내세요. 파일 이름만 바꾸지 마세요. 이미지 제한은 스킨 화면과 관리자 설정에 표시됩니다.

PHP GD 또는 zip 확장이 필요합니다

서버 관리자가 필요한 PHP 확장을 활성화해야 합니다. ZIP을 쓸 수 없는 경우에는 JSON과 이미지를 따로 선택할 수 있습니다. GD가 없으면 이미지 저장을 할 수 없습니다.

스킨을 바꿨는데 예전 색이 나옵니다

저장 성공 여부를 확인하고 공식 플레이어와 외부 삽입 페이지를 새로고침하세요. 홈페이지의 다른 회원 목록을 보고 있지는 않은지 확인합니다. 단순한 이미지 캐시 삭제로 목록 소유자가 바뀌지는 않습니다.