Logo가이드
슈퍼노바로 돌아가기
SUPERNOVA 가이드

홈 화면 꾸미기

내 페이지에 들어온 사람이 가장 먼저 보는 화면이 홈 화면이에요. 네이버 카페에서 쓰던 대문을 그대로 옮겨올 수도 있고, 코드를 몰라도 AI로 홈 화면 만들기로 프롬프트를 만들어 무료 LLM에게 대신 만들어 달라고 할 수 있어요.

스크린샷 준비 중
스트리머 모드 → 페이지 설정 → 홈 화면 설정하기

코드를 몰라도 만드는 방법

1AI로 홈 화면 만들기 열기

홈 화면 설정하기 화면 아래쪽 AI로 홈 화면 만들기 버튼을 누르면 프롬프트 제작기가 열려요.

2원하는 모습 고르기

구성(GitHub 표지형·카드형·잡지형), 색감, 강조색, 이모지 사용량, 넣을 영역을 고르면 오른쪽에 프롬프트가 자동으로 만들어져요. 고른 색에서 대비가 보장된 색 값을 뽑아 프롬프트에 넣기 때문에 글자가 배경에 묻히는 일이 없고, 내 페이지의 실제 링크 주소도 함께 들어가서 LLM이 엉뚱한 주소를 지어내지 않아요.

3들어갈 내용 적기

한 줄 소개, 자기소개, 공지 문구, 방송 일정을 직접 적어주세요. 비워두면 LLM이 지어내는 대신 [여기에 적어주세요] 자리표시자를 남겨요. 내가 쓰지 않은 소개 글이 페이지에 걸리는 것보다, 빈 칸을 나중에 채우는 편이 나으니까요.

4이미지 올리기 (선택)

쓰고 싶은 이미지를 제작기에서 올리면 주소가 프롬프트에 자동으로 들어가요. AI가 그 이미지를 써서 홈 화면 코드를 만들어요. 화면 폭에 맞춰 확대되니 가로 1720px 이상을 권해요.

5복사해서 LLM에 붙여넣기

복사하고 열기에서 ChatGPT·Gemini·Claude 중 하나를 누르면 프롬프트가 복사되고 해당 사이트가 새 탭으로 열려요. 거기에 붙여넣고 보내면 홈 화면 코드가 나와요.

6받은 코드를 편집창에 붙여넣기

LLM이 준 답을 그대로 복사해서 편집창에 붙여넣으세요. 코드블록 표시(```html)가 섞여 있어도 알아서 걷어내고, HTML인지 Markdown인지도 자동으로 맞춰줘요.

7미리보기 확인 후 저장

붙여넣으면 바로 미리보기로 넘어가요. 마음에 들면 저장을 누르세요.

마음에 안 드는 곳만 고치기

제작기의 수정하기 탭을 쓰면, 지금 편집창에 있는 홈 화면 코드와 함께 “맨 위 배너 색을 민트로 바꿔주세요” 같은 요청이 하나의 프롬프트로 묶여요. 요청한 곳 말고는 손대지 말라는 지시도 함께 들어가서, 멀쩡한 문구가 제멋대로 다듬어지지 않아요. 그대로 LLM에 붙여넣고 받은 코드로 편집창을 통째로 바꾸면 돼요.

홈 화면은 가로 860px 캔버스예요

HTML 홈 화면은 네이버 카페와 같은 860px 폭을 기준으로 그려요. 화면이 그보다 넓으면 홈 화면 전체가 그만큼 확대되고, 좁으면 축소돼서 좌우에 빈 여백이 생기거나 가로로 잘리지 않아요. 카페에서 쓰던 대문을 한 글자도 고치지 않고 그대로 붙여넣어도 되는 이유예요.

확대돼서 보이기 때문에 이미지는 원본을 크게 준비하는 편이 선명해요. 가로 1720px 이상을 권해요.

LLM이 지어내지 않게 하는 규칙

LLM에게 “귀여운 홈 화면 만들어줘”라고만 하면 자기소개와 방송 내용까지 그럴듯하게 지어내요. 제작기는 아래 규칙을 프롬프트에 함께 넣어서 그걸 막아요.

  • '내가 준 정보'에 없는 사실을 지어내지 마라. 자기소개, 방송 내용, 공지 문구, 시청 규칙을 상상해서 채우면 안 된다.
  • 내용을 모르는 자리는 [여기에 한 줄 소개를 적어주세요] 처럼 대괄호 자리표시자로 남겨라. 그럴듯한 가짜 문장으로 채우지 마라.
  • 이 명세에 적힌 디자인 지시어를 본문 문구에 옮겨 적지 마라. 화면을 어떻게 그릴지에 대한 설명이지 스트리머를 소개하는 말이 아니다.
  • 링크가 필요한 요소는 반드시 <a href="...">로 만든다. 주소를 모르면 그 영역을 통째로 빼라.
  • 문구는 짧게 쓴다. 한 문장이면 될 것을 세 문장으로 늘리지 마라.

LLM에게 꼭 알려줘야 하는 규격

제작기를 쓰면 아래 내용도 프롬프트에 자동으로 들어가요. 직접 프롬프트를 쓰거나 다른 곳에서 받은 코드를 붙여넣을 때 참고하세요.

  • 캔버스 가로는 860px이다. 가장 바깥 요소는 width:100%로 두고, max-width나 margin:0 auto로 다시 가운데 정렬하지 마라.
  • 모든 요소에 box-sizing:border-box를 준다.
  • 글자 크기와 여백은 px로만 지정한다. rem, em은 쓰지 마라 (바깥 글자 크기에 따라 달라진다).
  • CSS는 맨 위 <style> 태그 하나 또는 인라인 style 속성으로만 작성한다. 외부 CSS 파일·웹폰트·JS 링크는 쓰지 않는다.
  • <script> 태그와 onclick 같은 이벤트 속성은 쓰지 않는다. 넣어도 저장할 때 제거된다. 움직임이 필요하면 CSS만 쓴다.
  • 방송 일정표를 넣을 때는 가짜 표를 만들지 말고, '일정표 슬롯'의 data-nova-planner-card HTML을 그대로 넣는다. 카드 안에 /schedule/planner_show 를 src로 쓰는 <iframe>이 있어야 한다. 빈 data-nova-planner 마커만 두지 마라.
  • 바로 다음 방송 카드를 넣을 때는 data-nova-next-card HTML을 그대로 넣는다. 카드 안에 /schedule/next_show 를 src로 쓰는 <iframe>이 있어야 한다.
  • 월간 일정표를 넣을 때는 data-nova-month-card HTML을 그대로 넣는다. 카드 안에 /schedule/month_show 를 src로 쓰는 <iframe>이 있어야 한다.
  • vh, vw, svh, dvh 같은 화면 기준 단위는 쓰지 않는다. 높이가 자동 계산이라 화면이 잘리거나 끝없이 늘어난다.
  • position:fixed 와 position:sticky 는 쓰지 않는다.
  • 다크모드 대응은 하지 않는다. 위에서 준 색 값만 쓴다.
  • 글꼴은 system-ui, -apple-system, 'Segoe UI', sans-serif 를 쓴다 (따로 지시가 있으면 그쪽을 따른다).
  • 글은 모두 한국어로 쓴다.

안전을 위해 <script> 태그와 onclick 같은 이벤트 속성, 자동 이동 코드는 저장·표시할 때 제거돼요. 어디서 받은 코드인지 확실하지 않아도 홈 화면 때문에 페이지가 엉뚱한 곳으로 넘어가지는 않아요.

Markdown으로도 쓸 수 있어요

HTML이 부담스러우면 Markdown 형식을 고르세요. GitHub README처럼 제목·목록·표·배지로 간단하게 꾸밀 수 있고, 화면 너비에 맞춰 알아서 늘어나요. 샘플 넣기를 누르면 두 형식 모두 예시가 채워져요.

편집창을 완전히 비우고 저장하면 커스텀 홈 화면이 사라지고 기본 홈으로 돌아가요. 초기화버튼으로도 같은 상태가 돼요.