{"id":"384","title":"\uD83E\uDEAA HTML 상태창 기능이 추가되었습니다","content":"안녕하세요! 루모입니다!\n\n캐릭터의 답변마다 **날짜, 장소, 호감도 등 현재 상황을 한눈에 확인할 수 있는 HTML 상태창 기능**이 추가되었습니다.\n\n대화가 진행되면서 캐릭터와의 관계나 현재 상황이 어떻게 달라지는지 답변마다 확인해 보실 수 있습니다.\n\n---\n\n### ✅ 상태창은 이런 기능입니다\n\n![panel1](https://img.lumo.gg/announcements/panel1.png)\n\n- 캐릭터의 답변 아래에 **날짜, 장소, 호감도, 간단한 OOC 등 원하는 정보**를 작은 HTML 패널 형태로 표시할 수 있습니다.\n- 캐릭터 제작자는 자신의 캐릭터에 **전용 상태창**을 추가할 수 있습니다.\n- 유저는 채팅방에서 캐릭터가 제공하는 상태창을 그대로 사용하거나, **[상태창 관리]에서 직접 수정하거나 새로운 상태창을 만들 수 있습니다.**\n\n---\n\n### \uD83D\uDCAC 상태창 사용 방법\n\n\n**새 채팅을 시작하는 경우**\n\n![panel2](https://img.lumo.gg/announcements/panel2.png)\n\n- 상태창을 제공하는 캐릭터의 채팅 시작 화면에는 **[캐릭터 상태창 사용] 스위치**가 표시됩니다.\n- 해당 스위치를 활성화(기본: 활성화)한 후 채팅방을 생성하면 캐릭터 제작자가 설정한 상태창이 적용됩니다.\n\n**그룹 채팅을 시작하는 경우**\n\n![panel3](https://img.lumo.gg/announcements/panel3.png)\n\n- 그룹 채팅방 생성하기 → 채팅방 설정하기 → **[상태창 설정]에서 그룹에 포함된 캐릭터 중 한 명의 상태창을 선택**하여 사용할 수 있습니다.\n\n**이미 진행 중인 채팅의 경우**\n\n![panel6](https://img.lumo.gg/announcements/panel6.png)\n\n![panel9](https://img.lumo.gg/announcements/panel9.png)\n\n- 채팅방 메뉴의 [상태창 관리]에서 캐릭터가 제공하는 상태창을 가져오거나, **HTML을 이용해 원하는 상태창을 직접 만들 수 있습니다.**\n\n---\n\n### \uD83D\uDCA1 미리 알아 두시면 좋습니다\n- 상태창을 수정하거나 제거하더라도 **이미 생성된 답변의 상태창은 당시의 모습 그대로 유지됩니다.**\n- 캐릭터 제작자가 상태창을 새로 추가하거나 수정하면 **[상태창 관리]에 배지 알림이 표시됩니다.**\n- 새로 등록된 상태창을 적용할지, 현재 사용 중인 상태창을 계속 사용할지는 직접 선택하실 수 있습니다.\n\n![panel4](https://img.lumo.gg/announcements/panel4.png)\n\n![panel5](https://img.lumo.gg/announcements/panel5.png)\n\n- **상태창은 [캐릭터 정보 동기화]와 함께 바뀌지 않습니다.** 캐릭터의 상태창이 변경된 경우 [상태창 관리]에서 별도로 확인하고 적용해 주세요.\n\n---\n\n### \uD83D\uDCDD 캐릭터 상태창 만들기\n**캐릭터 생성/수정하기 → 캐릭터 탭 최하단 → [상태창]에서 캐릭터 전용 상태창**을 추가할 수 있습니다.\n\n상태창은 크게 **HTML**과 **필드** 두 가지로 구성됩니다.\n\n---\n\n#### 1. HTML로 상태창의 모양을 만듭니다\n먼저 상태창이 화면에 어떻게 표시될지 HTML로 작성합니다.\n\n![panel7](https://img.lumo.gg/announcements/panel7.png)\n\n답변마다 값이 달라져야 하는 부분에는 '{{호감도}}'와 같이 **중괄호 두 겹으로 필드 이름**을 입력해 주세요. 해당 부분은 답변이 생성될 때마다 현재 상황에 맞는 값으로 자동 생성됩니다.\n\n```html\n<div>\uD83D\uDCC5 {{날짜}} · \uD83D\uDCCD {{장소}}</div>\n<div>{{char}}의 호감도: {{호감도}}</div>\n<div>{{char}}의 현재 기분: {{기분}}</div>\n```\n\n'{{char}}'와 '{{user}}'는 별도의 필드를 만들지 않아도 자동으로 각각 **캐릭터 이름**과 **유저(페르소나) 이름**으로 변경됩니다.\n\n---\n\n#### 2. 필드를 추가합니다\n**필드**는 답변이 생성될 때마다 AI가 값을 채워 넣는 항목입니다. HTML에 작성한 '{{ }}' 항목 하나하나에 대응하는 필드를 만들어 주세요.\n\n![panel8](https://img.lumo.gg/announcements/panel8.png)\n\n위 HTML 예시에서는 다음 네 개의 필드가 필요합니다.\n- 날짜\n- 장소\n- 호감도\n- 기분\n\n**필드명**\n- HTML의 '{{ }}' 안에 입력한 이름과 **동일한 이름**을 입력합니다.\n- 한글, 영문, 숫자, 밑줄(_) 사용 가능\n- 최대 15자\n\n**필드 설명**\n- 해당 필드에 **어떤 값을 어떤 형식으로 생성해야 하는지 AI에게 알려 주는 설명**입니다.\n\n---\n\n#### 3. (예시) 필드는 이렇게 작성할 수 있습니다\n- **날짜:** 이야기 속 현재 날짜와 요일. 예: 9월 30일 (수)\n- **장소:** 지금 등장인물들이 있는 곳을 한 단어로 출력\n- **호감도:** {{char}}가 {{user}}를 얼마나 가깝게 느끼는지 1~100 숫자만 출력\n- **기분:** {{char}}의 현재 기분\n\n---\n\n#### 4. 저장하기 전에 확인해 주세요\n- **[저장 전 점검]을 통해 수정이 필요한 부분을 확인**할 수 있습니다.\n- HTML에 작성한 '{{이름}}'과 일치하는 필드가 없으면 저장할 수 없습니다.\n- **미리보기**를 통해 예시 값이 적용된 상태창의 모습을 확인할 수 있습니다.\n\n**작성 제한**\n- HTML: 최대 **30,000자**\n- 필드: 최대 **30개**\n- 전체 필드 설명: 합산 최대 **1,000자**\n\n---\n\n### \uD83D\uDCCC 참고 사항\n- 캐릭터 상태창에 작성된 **HTML과 필드 정보는 해당 캐릭터와 대화하는 유저에게 공개됩니다.**\n- 유저는 캐릭터 제작자가 제공한 상태창을 자신의 채팅방에서 자유롭게 수정하여 사용할 수 있습니다.\n- HTML 상태창은 대화 진행을 보조하기 위한 별도의 기능입니다. **상태창에 표시된 값 자체가 이후 대화 내용이나 진행에 직접적인 영향을 주지는 않습니다.**\n- 해당 기능은 이용자분들의 피드백을 바탕으로 지속적으로 개선할 예정이며, 추후 기능의 동작 방식이나 세부 사항이 변경될 수 있습니다.\n\n---\n\n#### 디자인을 추가한 상태창 HTML 예시\n\n![panel10](https://img.lumo.gg/announcements/panel10.png)\n\n```\n<div\n    style=\"\n        border: 1px solid hsl(var(--chat-message-text) / 0.15);\n        border-radius: 12px;\n        padding: 12px 14px;\n        font-size: 13px;\n        line-height: 1.6;\n    \"\n>\n    <div style=\"display: flex; gap: 12px; font-size: 12px; opacity: 0.75\">\n        <span>\uD83D\uDCC5 {{날짜}}</span>\n        <span>\uD83D\uDCCD {{장소}}</span>\n    </div>\n    <div style=\"height: 1px; background: hsl(var(--chat-message-text) / 0.12); margin: 10px 0\"></div>\n    <div style=\"display: flex; justify-content: space-between\">\n        <span>{{char}}의 호감도</span>\n        <b>{{호감도}}</b>\n    </div>\n    <div\n        style=\"\n            height: 6px;\n            border-radius: 999px;\n            background: hsl(var(--chat-message-text) / 0.12);\n            margin: 6px 0 10px;\n            overflow: hidden;\n        \"\n    >\n        <div style=\"width:{{호감도}}%; height:100%; border-radius:999px; background:#f472b6;\"></div>\n    </div>\n    <div>{{char}}의 현재 기분: <b>{{기분}}</b></div>\n</div>\n```\n\n![panel11](https://img.lumo.gg/announcements/panel11.png)\n\n```\n<div style=\"font-size: 13px; line-height: 1.6\">\n    <div style=\"display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px\">\n        <span\n            style=\"\n                padding: 2px 10px;\n                border-radius: 999px;\n                font-size: 12px;\n                background: hsl(var(--chat-message-text) / 0.1);\n            \"\n            >\uD83D\uDCC5 {{날짜}}</span\n        >\n        <span\n            style=\"\n                padding: 2px 10px;\n                border-radius: 999px;\n                font-size: 12px;\n                background: hsl(var(--chat-message-text) / 0.1);\n            \"\n            >\uD83D\uDCCD {{장소}}</span\n        >\n    </div>\n    <div\n        style=\"\n            display: flex;\n            justify-content: space-between;\n            padding: 6px 0;\n            border-top: 1px solid hsl(var(--chat-message-text) / 0.12);\n        \"\n    >\n        <span style=\"opacity: 0.7\">{{char}}의 호감도</span>\n        <b>{{호감도}}</b>\n    </div>\n    <div\n        style=\"\n            display: flex;\n            justify-content: space-between;\n            padding: 6px 0;\n            border-top: 1px solid hsl(var(--chat-message-text) / 0.12);\n        \"\n    >\n        <span style=\"opacity: 0.7\">{{char}}의 현재 기분</span>\n        <b>{{기분}}</b>\n    </div>\n</div>\n```\n\n---\n\n앞으로도 더 발전된 서비스 제공을 위해 최선을 다하겠습니다! 루모를 이용해 주시는 모든 유저분들께 깊이 감사드립니다!\n\n감사합니다!\uD83D\uDE47","type":"UPDATE","isPinned":true,"createdAt":"2026-09-30T14:48:54.323146","isRead":null}