본문으로 건너뛰기

1. 월드 소개

월드의 기본 정보를 입력하는 단계입니다.

Step 1: 홈화면에서 이렇게 보여요​

썸네일 미리보기와 함께 홈화면에 표시될 정보를 입력합니다.

항목설명필수 여부제한
월드 대표이미지월드를 대표하는 썸네일 이미지✅9:16 비율 권장
월드 제목월드의 이름✅최대 15자
월드 소개클릭을 부르는 매력적인 줄거리✅최대 100자

월드 대표이미지​

월드를 대표하는 이미지입니다. 사용자가 월드 목록에서 가장 먼저 보게 되는 요소입니다.

권장 사항

  • 월드의 분위기를 잘 나타내는 이미지 선택
  • 9:16 비율 권장
  • 고화질 이미지 권장

월드 제목​

월드의 이름입니다. 간결하면서도 월드의 특성을 잘 나타내는 제목을 선택하세요.

  • 최대 15자까지 입력 가능

월드 소개​

월드에 대한 간단한 설명입니다. 사용자가 월드에 입장하기 전 확인하는 정보입니다.

작성 팁

  • 월드의 배경과 설정을 간략히 설명
  • 클릭을 부르는 매력적인 줄거리 작성
  • 최대 100자까지 입력 가능

Step 2: 상세페이지에서 보일 화면을 입력해요​

월드 상세 페이지에 표시될 정보를 입력합니다.

항목설명필수 여부제한
월드 상세설명월드 세계관, 주인공의 상황 등 상세 설명⬜최대 15,000자, HTML/마크다운 지원

월드 상세설명 (선택)​

마크다운 또는 HTML 형식으로 월드에 대한 상세한 설명을 작성할 수 있습니다.

미리보기 기능

상세 설명 미리보기 기능은 업데이트 예정입니다.

활용 예시

  • 세계관 설명
  • 플레이 가이드
  • 주의사항 안내
  • 주인공의 상황 설명

Step 3: 팬들과 소통할 공식 프로필을 만들어요​

월드의 공식 프로필을 설정합니다.

항목설명필수 여부제한
월드 프로필 아이디월드의 공식 프로필 핸들✅최대 20자, 중복확인 필요

월드 프로필 아이디​

IF는 크리에이터와 월드의 브랜딩을 위해 SNS 기능을 제공합니다. 월드 프로필 아이디는 SNS에서 월드를 식별하는 고유 핸들입니다.

규칙

  • 영문 대소문자, 숫자, 언더스코어(_), 하이픈(-) 사용 가능
  • 공백 사용 불가
  • 다른 월드와 중복 불가
  • 최대 20자
팁

내 월드의 팔로우를 모을 프로필을 설정하세요. 개설 이후 SNS에서 언제든지 프로필 수정이 가능해요.

실제 예시: NEXT MISSION​

예시 월드

아이돌 서바이벌 프로젝트 "NEXT MISSION: 스타라이트 프로젝트"의 실제 설정 예시입니다.

월드 제목​

NEXT MISSION: 스타라이트 프로젝트

월드 소개​

사라진 천재 프로듀서의 뒤를 이어, 위기에 빠진 아이돌 서바이벌 프로젝트의
메인 PD가 되어 9명의 연습생 중 5명을 데뷔시키세요!

월드 상세설명 (일부 발췌)​

월드 상세설명은 마크다운 또는 HTML 형식으로 작성할 수 있습니다.

마크다운 버전 (간단)​

# World Tutorial

## 갑자기 아이돌 데뷔 메인 프로듀서가 되다?

치지직... 환영해. 지금부터 간단하게 갑데프 월드를 소개하도록 하지.

### <1> NEXT MISSION 프로젝트
NEXT MISSION 프로젝트는 `스타라이트` 엔터테인먼트의 천재 프로듀서
나인이 기획한 아이돌 서바이벌 오디션 프로젝트이다.

### <2> 현재 상황
`NEXT MISSION`을 기획한 천재 프로듀서 나인의 잠적으로 프로젝트의
메인 PD가 되었다. 9명의 연습생의 운명이 내 손에 달려있다.

### <3> 캐릭터 설명
9명의 연습생 각각이 다른 재능과 사연을 가지고 있습니다.

---

**주요 캐릭터**
- **안도현** - 귀공자 스타일의 비주얼 멤버
- **고결** - 무대 공포증을 가진 천재 보컬
- **유건** - 춤에 대한 자부심이 강한 츤데레 댄서

HTML 버전 (고급 스타일링)​

HTML을 사용하면 커스텀 폰트, 애니메이션, 슬라이드 카드, SVG 차트 등 고급 스타일링이 가능합니다.

전체 HTML 코드 보기 (클릭하여 펼치기)
<div style="display:flex;justify-content:center;align-items:flex-start;min-height:100vh;margin:0;padding:0;font-family:'Courier Prime','Noto Sans KR',monospace;color:#cccccc;background-color:transparent;">
  <!-- 커스텀 폰트 및 애니메이션 정의 -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Noto+Sans+KR:wght@300;500;700&display=swap');
    @keyframes blink { 50% { opacity:0; } }
    .hide-scrollbar::-webkit-scrollbar { display:none; }
    .hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
  </style>

  <!-- 메인 컨테이너 -->
  <div style="width:100%;max-width:500px;background-color:#1a1a1a;border:1px solid #4ff06d;box-sizing:border-box;position:relative;overflow-x:hidden;margin:0 auto;">
    <div style="padding:40px 20px 20px 20px;">

      <!-- 헤더 섹션 -->
      <div style="color:#4ff06d;font-size:12px;margin-bottom:25px;letter-spacing:1px;">World Tutorial</div>
      <div style="color:#4ff06d;font-size:24px;font-weight:bold;margin-bottom:10px;">&lt;tutorial/&gt;</div>
      <div style="color:#4ff06d;font-size:clamp(22px, 6vw, 26px);font-weight:700;line-height:1.4;margin-bottom:30px;text-shadow:0 0 5px rgba(79,240,109,0.3);">
        갑자기 아이돌 데뷔<br>메인 프로듀서가 되다?
      </div>

      <!-- 인트로 텍스트 (깜빡이는 커서 애니메이션) -->
      <p style="font-size:14px;line-height:1.6;margin-bottom:15px;color:#eee;margin-top:0;">
        치지직...<br>환영해. 지금부터 간단하게 갑데프 월드를 소개하도록 하지.
        <span style="display:inline-block;width:8px;height:16px;background-color:#4ff06d;animation:blink 1s step-end infinite;vertical-align:middle;margin-left:2px;"></span>
      </p>

      <hr style="border:0;border-top:1px solid #333;margin:30px 0;">

      <!-- 섹션 1: NEXT MISSION 프로젝트 -->
      <div style="font-size:18px;color:#4ff06d;font-weight:bold;margin-bottom:15px;display:flex;align-items:center;gap:10px;">
        <span style="font-family:'Courier Prime',monospace;">&lt;1&gt;</span>
        <span style="text-decoration:underline;text-underline-offset:5px;">NEXT MISSION 프로젝트</span>
      </div>
      <p style="font-size:14px;line-height:1.6;margin-bottom:15px;color:#eee;">
        NEXT MISSION 프로젝트는 <span style="color:#4ff06d;">`스타라이트`</span> 엔터테인먼트의 천재 프로듀서 나인이 기획한 아이돌 서바이벌 오디션 프로젝트이다.
      </p>

      <hr style="border:0;border-top:1px solid #333;margin:30px 0;">

      <!-- 섹션 2: 현재 상황 -->
      <div style="font-size:18px;color:#4ff06d;font-weight:bold;margin-bottom:15px;display:flex;align-items:center;gap:10px;">
        <span style="font-family:'Courier Prime',monospace;">&lt;2&gt;</span>
        <span style="text-decoration:underline;text-underline-offset:5px;">현재 상황</span>
      </div>
      <p style="font-size:14px;line-height:1.6;margin-bottom:15px;color:#eee;">
        <span style="color:#4ff06d;">`NEXT MISSION`</span>을 기획한 천재 프로듀서 나인의 잠적으로 프로젝트의 메인 PD가 되었다. 9명의 연습생의 운명이 내 손에 달려있다.
      </p>

      <hr style="border:0;border-top:1px solid #333;margin:30px 0;">

      <!-- 섹션 3: 캐릭터 설명 -->
      <div style="font-size:18px;color:#4ff06d;font-weight:bold;margin-bottom:15px;display:flex;align-items:center;gap:10px;">
        <span style="font-family:'Courier Prime',monospace;">&lt;3&gt;</span>
        <span style="text-decoration:underline;text-underline-offset:5px;">캐릭터 설명</span>
      </div>
      <p style="font-size:11px;color:#666;margin-bottom:15px;">옆으로 슬라이드 하여 9명의 연습생을 확인하세요 ➔</p>
    </div>

    <!-- 슬라이드 가능한 캐릭터 카드 영역 -->
    <div class="hide-scrollbar" style="display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;gap:15px;margin-bottom:40px;">

      <!-- 캐릭터 카드: 안도현 -->
      <div style="flex:0 0 85%;scroll-snap-align:center;">
        <div style="border:1px solid #333;padding:20px;background:#151515;border-radius:4px;height:100%;box-sizing:border-box;">
          <img src="https://ifcc-resource.abovetechcdn.com/idol_world/situation_image/1-man-andohyun-00001.png" style="width:100%;height:auto;border:1px solid #4ff06d;margin-bottom:15px;">
          <div style="color:#4ff06d;font-weight:bold;font-size:18px;margin-bottom:5px;">안도현</div>
          <p style="font-size:12px;color:#bbb;margin-bottom:15px;min-height:3.6em;">`금수저` 편견에 맞서 실력으로 인정 받길 원하는 귀공자 스타일의 비주얼 멤버</p>

          <!-- SVG 능력치 오각형 차트 -->
          <div style="text-align:center;">
            <svg width="100%" height="180" viewBox="0 0 120 120">
              <polygon points="60,20 98,48 83,92 37,92 22,48" fill="none" stroke="#444" stroke-width="0.5"/>
              <polygon points="60,32 67.6,45.6 66.9,57.6 54.2,58 48.6,46.4" fill="rgba(79,240,109,0.3)" stroke="#4ff06d" stroke-width="1.5"/>
              <text x="60" y="12" text-anchor="middle" fill="#4ff06d" font-size="8" font-weight="bold">보컬</text>
              <text x="102" y="48" text-anchor="start" fill="#777" font-size="8">랩</text>
              <text x="85" y="105" text-anchor="middle" fill="#777" font-size="8">댄스</text>
              <text x="35" y="105" text-anchor="middle" fill="#777" font-size="8">프로듀싱</text>
              <text x="18" y="48" text-anchor="end" fill="#777" font-size="8">재치</text>
            </svg>
          </div>
        </div>
      </div>

      <!-- 추가 캐릭터 카드들... (유건, 고결 등) -->
    </div>
  </div>
</div>

HTML 주요 기법​

기법설명코드 예시
커스텀 폰트Google Fonts를 import하여 사용@import url('https://fonts.googleapis.com/...')
애니메이션깜빡이는 커서 효과@keyframes blink { 50% { opacity:0; } }
다크 테마배경 #1a1a1a, 포인트 컬러 #4ff06dbackground-color:#1a1a1a;color:#4ff06d;
슬라이드 카드가로 스크롤 + 스냅 효과overflow-x:auto;scroll-snap-type:x mandatory;
SVG 차트능력치 오각형 그래프<svg><polygon points="..."/></svg>
어떤 형식을 선택할까요?
  • 마크다운: 빠르게 작성하고 싶을 때, 간단한 서식만 필요할 때
  • HTML: 커스텀 폰트, 애니메이션, 슬라이드 카드, SVG 차트 등 고급 스타일링이 필요할 때
HTML 작성 시 주의사항
  • 인라인 스타일(style="")을 사용해야 합니다
  • 외부 CSS 파일은 지원되지 않습니다
  • 복잡한 HTML은 미리보기에서 확인하며 작성하세요

월드 프로필 아이디​

starlight_project