UUMMAI 유저 가이드북

03 - 기본 정보 및 HTML

기본 정보 탭은 작품의 첫인상을 정하는 곳입니다. 처음 시작할 때 이 탭부터 채워보는 것이 가장 부담이 적습니다.

할 수 있는 일

  • 썸네일 업로드

  • 성인용 여부 설정

  • 작품명 입력

  • 작품 소개 작성

  • 상세 작품 소개(HTML) 작성

화면 구성

입력창별 제한

  • 작품명: 최대 20자

  • 작품 소개: 최대 10,000자

  • 상세 작품 소개(HTML): 최대 100,000자

  • 썸네일 이미지: JPEG, PNG, WebP, GIF (최대 10MB)

  • 권장 썸네일 비율: 3:4

캡션: 기본 정보 탭에서는 작품의 첫인상과 기본 소개를 정리할 수 있습니다.

썸네일 업로드

작품을 대표하는 이미지를 등록하는 영역입니다.

  • 먼저 채워두고 나중에 언제든 편하게 바꾸셔도 괜찮습니다.

  • 권장 비율인 3:4를 맞추면 작품 목록에서 훨씬 안정적으로 보입니다.

성인용 여부

작품의 성인 인증 필요 여부를 체크하는 항목입니다.

  • 제작하려는 작품 성격에 맞게 선택해 주세요.

  • 안내 문구에 따라 발행 이후 관리자에 의해 조정될 수도 있습니다.

작품 소개

작품명

작품의 이름을 정하는 입력칸입니다.

  • 최대 20자까지 작성 가능합니다.

  • 목록에서 한눈에 들어오도록 짧고 분명하게 적는 것이 유리합니다.

작품 소개

작품이 어떤 내용인지 가볍게 설명하는 영역입니다.

  • 최대 10,000자까지 입력할 수 있습니다.

  • 처음에는 짧게 적어도 충분합니다. 스토리, 분위기, 핵심 포인트 위주로 적어 주세요.

상세 작품 소개(HTML)

작품 소개 페이지에 표시되는 긴 설명 영역입니다. 최대 100,000자까지 작성할 수 있고, HTML 태그로 자유롭게 꾸밀 수 있습니다.

캡션: 상세 작품 소개 영역을 펼치면 HTML 태그를 활용한 설명을 작성할 수 있습니다.

  • HTML 작성이 처음이시라면, 에이전트와 함께 만들어보세요!

두 가지 방식

상세 작품 소개는 작성한 코드에 따라 자동으로 두 가지 방식 중 하나로 표시됩니다. 어떤 방식으로 표시되느냐에 따라 사용할 수 있는 태그와 스타일 방법이 달라집니다.

간단 서식 방식

포스터 방식

전환 조건

아래 조건에 해당하지 않을 때

코드에 <style>, <!doctype>, <html> 중 하나라도 있을 때

CSS 작성법

태그마다 style="..." 인라인만

<style> 블록 + class/id 선택자 사용 가능

적합한 경우

문단·표·이미지 위주의 간단한 소개

배경·레이아웃을 갖춘 포스터형 소개 페이지

class 기반으로 예쁘게 꾸미고 싶다면, 코드 맨 위에 <style> 블록을 넣어 포스터 방식으로 만들어 주세요. <style> 없이 class만 쓰면 스타일이 적용되지 않습니다.

간단 서식 방식에서 사용할 수 있는 태그

  • 텍스트: b i strong em u s del mark small sub sup span abbr code

  • 구조: div p br hr blockquote pre h1~h6

  • 목록: ul ol li

  • 표: table thead tbody tfoot tr th td caption colgroup col

  • 미디어·링크: a img figure figcaption

  • 접기: details summary

사용할 수 있는 속성은 style, href, target, rel, src, alt, width, height, open, colspan, rowspan, title 입니다. (class, id는 이 방식에서 동작하지 않습니다.)

포스터 방식에서 추가로 사용할 수 있는 것

  • <style>, class, id

  • 문서 구조 태그: html head body meta title link header section footer main article nav aside

  • 포스터 방식은 독립된 영역에서 표시되므로, 배경색이나 레이아웃이 페이지의 다른 요소를 침범하지 않습니다.

공통으로 사용할 수 없는 것

  • <script> 및 자바스크립트는 보안상 실행되지 않습니다. onclick 같은 이벤트 속성, javascript: 링크도 제거됩니다.

  • <button>, <svg>, <video>, <audio>, <iframe>, <canvas>, <form>, <input> 등 상호작용·미디어 태그

  • 외부 이미지는 <img src="https://..."> 형태로 사용 가능합니다.

포스터 방식에서 알아두면 좋은 점

  • vh 단위(100vh 등)는 화면 높이에 맞춰 자동 변환되며, 영역 자체에는 스크롤이 생기지 않고 내용 길이에 맞춰 늘어납니다.

  • 기본 글꼴(Pretendard)이 자동으로 적용됩니다. 다른 글꼴이 필요하면 <style> 안에서 @import url('...')로 불러와 주세요.

  • target="_blank" 링크에는 안전 속성이 자동으로 붙습니다.

자주 막히는 부분

Q. HTML 파일로는 잘 보이는데 우마이에 올리면 화면이 비어 보여요.

  • 가장 흔한 원인은 자바스크립트 의존 구조입니다. 예를 들어 요소를 opacity: 0으로 숨겨 두고 스크롤 시 스크립트로 나타나게 하는 코드는, 스크립트가 실행되지 않으므로 계속 투명한 상태로 남습니다.

    • opacity: 0처럼 스크립트가 있어야 보이는 초기 상태를 제거해 주세요.

    • 등장 효과가 필요하면 CSS 애니메이션(@keyframes)으로 대체해 주세요. CSS 애니메이션은 정상 동작합니다.

    • 스크립트로 생성하던 장식 요소는 HTML에 직접 태그로 넣고 CSS로 움직여 주세요.

Q. 버튼이나 아이콘(SVG)이 사라져요.

  • <button>, <svg>, <video> 등은 표시되지 않습니다. 버튼처럼 보이는 요소가 필요하다면 <div>나 <a>를 style로 꾸며 주세요. 아이콘은 이미지(<img>)나 이모지로 대체할 수 있습니다.

Q. 외부에 올려둔 이미지를 소개에 넣을 수 있나요?

  • 가능합니다. <img src="https://..."> 형태로 주소를 입력하면 그대로 표시됩니다. 이미지 탭에 등록한 이미지를 쓰려면 {{이미지코드}}를 사용하세요.

Q. 코드에 주석을 넣어도 되나요?

  • 가급적 주석(<!-- -->)은 제거하고 올리는 것을 권장합니다. 주석 내부 구조에 따라 표시가 어긋나는 경우가 있습니다.

Q. 소개에서는 되는 태그가 플레이 가이드에서는 안 돼요.

  • 플레이 가이드는 간단 서식 방식으로만 표시됩니다. <style> 블록이나 class 기반 스타일 대신 인라인 style을 사용해 주세요.

Q. 채팅 중에도 이렇게 꾸며진 화면을 보여줄 수 있나요?

  • 채팅 화면에 지속적으로 표출되는 UI를 붙이려면 JSX 컴포넌트 탭을 사용하는 것이 더 안정적입니다. 자세한 내용은 JSX 컴포넌트 탭 문서를 참고해 주세요.