내 스타일로
나만의 테마를 만드세요.
PixelyChat 테마는 작은 파일 하나로 구성됩니다. 코딩할 필요가 없습니다. 원하는 스타일을 설명하고 Claude나 ChatGPT 같은 AI 어시스턴트에게 기존 테마를 수정하게 한 뒤 결과물을 가져오면 됩니다.
채팅 모양을 바꾸고 싶으신가요? 채팅 스타일 만들기 ↓
1. 시작점 준비하기
- 아무 테마나 테마 라이브러리 에서 다운로드하세요. 원하는 느낌과 비슷한 테마를 고르면 좋습니다.
- 또는 PixelyChat에서 씬 테마을 열고 테마를 선택한 다음 편집용으로 내보내기 크리에이터 도구에서 선택하세요.
.pixelytheme 파일은 이름만 다른 일반 ZIP 압축 파일입니다. AI 채팅이 업로드를 거부한다면 파일 이름을 .zip로 바꾸세요. 모든 패키지에는 README.md 가 들어 있으며 AI에 형식을 설명합니다.
2. AI에게 요청하기
업로드된 파일을 읽을 수 있고 파일을 다시 만들어 전달할 수 있는 어시스턴트(파일 생성 기능이 있는 Claude 또는 파일 업로드 및 코드 실행 기능이 있는 ChatGPT)를 사용하세요. 테마 파일을 첨부하고 아래 프롬프트를 붙여넣은 다음 표시된 부분을 채우세요.
PixelyChat 테마(.pixelytheme 파일이며 ZIP 압축 파일)를 첨부했습니다. 열 수 없다면 .zip 파일로 취급해 주세요. 이 파일을 나만의 새 테마로 바꿔 주세요.
먼저 압축을 풀고 README.md를 읽으세요. README.md는 PixelyChat 테마 형식의 공식 가이드이며 모든 CSS 훅을 설명합니다. 그런 다음 theme.json, theme.css, fields.json을 읽으세요.
내가 원하는 스타일:
[여기에 테마를 설명하세요: 분위기, 색상, 모양, 글꼴, 애니메이션. 예: "네온 신스웨이브 - 짙은 보라색 패널, 핫핑크와 시안 포인트, 빛나는 테두리, 알림에 천천히 맥동하는 글로우."]
규칙
- theme.json: 새롭고 고유한 "id"(소문자 영문, 숫자, 하이픈)와 새 "name"을 지정하세요. "author"를 {"name": "[내 이름]", "type": "creator"}, "version"을 "1.0.0"으로 설정하고 오늘 날짜를 YYYY-MM-DD 형식의 "released"로 추가하세요. "basedOn"과 "supports"를 포함한 다른 필드는 유지하세요.
- 테마는 외형만 변경합니다: CSS, JSON 및 포함된 파일만 사용하세요. JavaScript, @import, 외부 URL은 사용할 수 없습니다. 이미지와 글꼴은 assets/에 넣고 상대 경로로 참조해야 합니다.
- "supports"에 나열된 모든 영역(알림, 리워드, 위젯, Starting Soon / Be Right Back / Shoutout 화면)을 스타일링하세요. 어떤 방송 배경에서도 글자가 잘 읽혀야 하며 가로·세로 레이아웃 모두에서 작동해야 합니다.
- 파일은 작게 유지하세요. 사용 권한이 있는 이미지, 글꼴, 사운드만 사용하세요. 기존 preview.webp가 새 스타일과 맞지 않고 새 미리보기(작은 WebP, 약 1280x720, 150KB 이하)를 렌더링할 수 없다면 삭제하세요.
- 패키징: 테마 폴더 자체가 아니라 폴더 안의 내용물을 압축해 theme.json이 압축 파일 최상위에 오도록 하고 파일 이름을 [id].pixelytheme로 지정하세요.
완료되면 완성된 .pixelytheme 파일을 다운로드할 수 있게 제공하고, 변경한 내용과 확인하지 못한 내용을 목록으로 알려 주세요.
3. 가져와서 테스트하기
- AI가 제공한 파일을 다운로드하세요.
- PixelyChat에서 씬 테마 을 열고 클릭하세요. 테마 가져오기.
- 미리보기를 확인한 다음 알림, 위젯 및 화면도 확인하세요. 아직 원하는 모습이 아니라면 AI에게 수정할 내용을 알려 주세요(스크린샷을 함께 보내면 도움이 됩니다). 새 파일을 가져오면 이미 설치된 테마를 업데이트할지 묻습니다.
- 가져온 테마는 언제든 다시 삭제할 수 있으며 기본 제공 테마는 그대로 유지됩니다.
4. 공유하기(선택 사항)
결과가 마음에 드나요? 다음 .pixelytheme 파일을 [email protected] 로 보내고 제작자로 표시할 이름을 알려 주세요. 일부 검토 후 적합하면 테마 라이브러리 에 추가해 모두가 사용할 수 있게 합니다.
공유할 권리가 있는 항목만 제출하세요. 테마를 보내면 귀하가 해당 테마를 직접 만들었거나 배포할 권리를 보유하고 있으며, 허가 없이 제3자의 저작권 보호 자료(이미지, 글꼴, 사운드, 로고, 캐릭터)를 포함하지 않았음을 확인하는 것입니다. 제출된 테마는 사용자 제작 콘텐츠이며 PixelyChat에서 일부만 검토합니다. 콘텐츠에 대한 책임은 제작자에게 있으며, 당사는 언제든 어떤 테마든 삭제할 수 있습니다.
채팅 스타일
나만의 채팅 스타일을 만들어 보세요.
채팅 스타일은 채팅 오버레이에 표시되는 메시지의 모양을 바꿉니다. 이름표, 카드, 테두리, 배지, 장식 등이 포함됩니다. 테마와 같은 방식으로, 작은 .pixelystyle 파일 하나이며 AI 어시스턴트가 대신 만들어 줄 수도 있습니다.
1. 시작점 준비하기
- 채팅 스타일 라이브러리에서 원하는 스타일을 다운로드하세요.
- 또는 PixelyChat에서 채팅 → 스타일을 열고 설치된 채팅 스타일을 선택한 다음 스타일 옵션에서 편집용으로 내보내기를 클릭하세요. 이 사본에는 모든 종류의 메시지를 보여 주는 테스트 페이지(
dev/test.html)도 들어 있습니다.
.pixelystyle 파일은 이름만 다른 일반 ZIP 압축 파일입니다. AI 채팅에서 업로드를 거부하면 파일 확장자를 .zip으로 바꾸세요. 모든 패키지에는 AI에게 형식을 설명하는 README.md가 들어 있습니다.
2. AI에게 요청하기
스타일 파일을 첨부하고, 이 프롬프트를 붙여 넣은 뒤 표시된 부분을 채우세요:
PixelyChat 채팅 스타일(.pixelystyle 파일이며 ZIP 압축 파일입니다. 열 수 없다면 .zip으로 취급해 주세요)을 첨부했습니다. 이것을 나만의 새 채팅 스타일로 바꿔 주세요.
먼저 압축을 풀고 README.md를 읽어 주세요. PixelyChat 채팅 스타일 형식의 공식 가이드로, 메시지 구조와 모든 클래스 및 data 속성, CSS 변수가 정리되어 있습니다. 그다음 chat-style.json, style.css, fields.json을 읽어 주세요.
원하는 모양:
[여기에 채팅 스타일을 설명하세요: 분위기, 색상, 모양, 이름표, 배지, 장식. 예: "아늑한 가을 - 따뜻한 갈색 카드, 주황색 이름표, 메시지마다 모서리에 작은 나뭇잎, 모더레이터에게는 단풍잎 아이콘."]
규칙
- chat-style.json: 새롭고 고유한 "id"(영문 소문자, 숫자, 하이픈)와 새 "name"을 지정하세요. "author"는 {"name": "[내 이름]"}, "version"은 "1.0.0"으로 설정하고 오늘 날짜를 YYYY-MM-DD 형식으로 "released"에 추가하세요. "format", "schemaVersion", "styleApiVersion"은 그대로 두세요.
- 채팅 스타일은 모양만 바꿉니다: CSS, JSON, 포함된 파일만 사용하세요. JavaScript, @import, 외부 URL은 사용할 수 없습니다. 이미지와 글꼴은 assets/ 안에 두고 상대 경로로 참조해야 합니다.
- 배경, 모서리, 테두리, 강조색 CSS 변수(README.md에 나열됨)를 적절한 곳마다 사용해 PixelyChat의 스타일 설정이 계속 작동하게 하세요. 장식은 강조색으로 칠해(단색 SVG를 마스크로 사용) 스트리머의 색상을 따라가게 하세요.
- 모든 종류의 메시지를 꾸며 주세요: 역할별(스트리머, 모더레이터, VIP, 구독자, 시청자) 일반 메시지, 이모트만 있는 메시지, 이벤트(팔로우, 구독, 선물, 레이드 등). 어떤 방송 배경에서도 글자가 잘 읽혀야 합니다.
- 가볍게 유지하세요: 반복 애니메이션, backdrop-filter, 블러는 사용하지 말고 등장 애니메이션은 짧은 것 하나까지만 사용하세요. 패키지는 작게(최대 5 MB) 유지하세요. 제가 사용할 수 있는 이미지와 글꼴만 사용하세요. 기존 preview.webp가 새 모양과 맞지 않고 새로 만들 수 없다면(작은 WebP, 약 960x540, 150 KB 미만) 삭제하세요.
- 패키징: chat-style.json이 압축 파일의 최상위에 오도록(하위 폴더 안이 아니라) 스타일 폴더의 내용을 ZIP으로 압축하고, dev/ 폴더는 제외한 뒤 파일 이름을 [id].pixelystyle로 지정하세요.
완료되면 완성된 .pixelystyle 파일을 다운로드할 수 있게 주고, 변경한 내용과 확인하지 못한 부분을 알려 주세요.
3. 가져와서 확인하기
- AI가 준 파일을 다운로드하세요.
- PixelyChat에서 채팅 → 스타일 → 스타일 라이브러리를 열고 스타일 가져오기를 클릭하세요.
- 오버레이에서 스타일을 선택하고 미리보기를 확인하세요. 배경, 모서리, 테두리, 강조색 설정도 함께 작동합니다. 아직 마음에 들지 않나요? AI에게 바꿀 점을 알려 주고(스크린샷이 도움이 됩니다) 새 파일을 가져오세요. 이미 설치한 스타일을 업데이트할지 물어봅니다.
- 가볍게 유지하세요: 메시지는 방송 내내 화면에 남아 있으므로 반복 애니메이션과 블러는 OBS 성능을 소모합니다.
4. 공유하기(선택)
결과가 마음에 드시나요? .pixelystyle 파일(최대 5 MB)을 제작자로 표시할 이름과 함께 [email protected]으로 보내 주세요. 일부 검토 후 적합하면 모두가 사용할 수 있도록 채팅 스타일 라이브러리에 추가합니다.
공유할 수 있는 것만 제출하세요. 채팅 스타일을 보내면 직접 만들었거나 배포할 권리가 있으며, 허가 없이 제3자의 저작물(이미지, 글꼴, 로고, 캐릭터)을 포함하지 않음을 확인하는 것입니다. 제출된 채팅 스타일은 사용자 제작 콘텐츠이며 PixelyChat은 일부만 검토합니다. 내용에 대한 책임은 제작자에게 있으며, 저희는 언제든지 스타일을 삭제할 수 있습니다.