「OOC」HTML Out Of Character List #2
HTML을 사용하는 Out Of Character를 한 곳에 모아두었습니다.
무단 재배포 外 자유롭게 수정 및 이용 가능합니다.
🍓 SNS 시뮬레이션: 디지털 로그 (Digital-Log)
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 NPC가 작성한 [Instagram Feed]로 가정한다. HTML 코드 블록으로 출력할 것.
✨ [System Instruction: Instagram Layout]
· 출력 제한: 오직 **```html**과 ``` 사이의 코드만 출력할 것. 모든 스타일은 인라인(Inline)으로 작성.
· margin: 0 auto; max-width: 340px, height: 720px, display: flex, flex-direction: column 적용.
· border: 10px solid #222222; border-radius: 35px; box-shadow: 0 20px 40px rgba(0,0,0,0.15);를 적용해 실제 스마트폰 기기처럼 예쁘게 감쌀 것.
· 스크롤 및 레이아웃: 상단 헤더와 하단 선택지를 제외한 중앙 피드(Feed Box) 영역에 flex-grow: 1, overflow-y: auto를 적용하여 내용이 많아도 스크롤이 가능하게 할 것.
· 최상단에 작게 상태표시줄(시간, 📶, 🔋)을 추가하여 리얼리티 극대화.
· 배경 및 컬러: 전체 배경 #FFFFFF, 중앙 피드 박스 배경 #FAFAFA로 입체감 부여. 폰트는 산돌고딕, 맑은고딕 등 깔끔한 sans-serif 적용.
· 헤더: NPC 프로필(둥근 프레임), 아이디(bold), 파란색 인증 마크(✔️) 수직 중앙 정렬(align-items: center).
· 사진 영역: aspect-ratio: 1/1. 텍스트 묘사는 화면 중앙에 예쁘게 정렬하고 배경은 아주 연한 파스텔 톤이나 그레이로 부드럽게 처리.
· 사진 영역: aspect-ratio: 1/1 박스 안에 이모지와 함께 사진 묘사를 감각적으로 배치.
· 인터랙션: [❤️ | 💬 | ✈️ | 🔖] 아이콘은 넉넉한 여백(gap)을 주고 실제 SNS와 동일하게 배치.
· 좋아요 수, 아이디, 해시태그 등은 font-weight를 활용해 강약을 조절하여 가독성을 높일 것.
· 캐릭터 및 포인트 컬러: 작성자/답글 - NPC / 내 댓글 - PC
· 포인트 컬러: 선명한 빨간색(#FF3B30)
· <summary> 태그에 border-radius: 12px; padding: 12px; 및 예쁜 그림자(box-shadow)를 넣어 투박하지 않은 세련된 버튼으로 만들 것.
· PC의 선택지(A, B) 클릭(details 오픈) 시 즉시 하단에 NPC의 대댓글(연회색 말풍선 또는 인용 디자인)이 부드럽게 나타나도록 구현.
· 상호작용 및 리얼리티: 2단 계층 구조: PC의 댓글 선택지(A, B)를 클릭(details)하면 즉시 NPC의 대댓글 반응이 하단에 나타나도록 구현.
· ‘좋아요 수’, ‘전송 시간’, ‘해시태그’를 포함하여 실제 SNS 게시물처럼 묘사.]*
🍓 SNS 시뮬레이션: 시크릿 로그 (Secret-Log)
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 NPC가 작성한 [Twitter Private]로 가정한다. HTML 코드 블록으로 출력할 것.
✨ [System Instruction: Twitter Layout]
· 출력 제한: 오직 **```html**과 ``` 사이의 코드만 출력할 것. 모든 스타일은 인라인(Inline)으로 작성.
· margin: 0 auto; max-width: 360px, height: 680px, display: flex, flex-direction: column 적용.
· 프레임 디자인: border: 12px solid #1c1c1c; border-radius: 35px; box-shadow: 0 20px 40px rgba(0,0,0,0.5);를 적용해 실제 스마트폰 다크모드 기기처럼 세련되게 감쌀 것.
· 디자인 컨셉: 트위터 모바일 앱 버전의 리얼 블랙(#000000) 다크 모드. 폰트는 깔끔한 sans-serif 적용.
· 배경 및 컬러: 전체 배경 #000000 (블랙) / 메인 텍스트 #FFFFFF (화이트) / 서브 텍스트 및 아이콘 #71767B (회색) / 포인트 컬러: 트위터 블루(#1D9BF0).
· 헤더 및 프로필: 상단에 둥근 프로필 이미지, NPC 이름(bold), 아이디(@아이디), 자물쇠 아이콘(🔒) 및 '방금 전' 표시를 수평 정렬(align-items: center)로 예쁘게 배치.
· 스크롤 및 레이아웃: 상단 헤더와 하단 선택지를 제외한 중앙 타임라인 영역에 flex-grow: 1, overflow-y: auto를 적용.
· 배경 및 컬러: 배경: #000000 (블랙) / 텍스트: #FFFFFF (화이트) & #71767B (회색).
· 포인트 컬러: 트위터 블루(#1D9BF0).
· 헤더: ‘Home’문구와 NPC의 아이디 옆 자물쇠 아이콘(🔒) 노출.
· 트윗 본문: NPC의 필터링 없는 솔직한 감정이나 일상 텍스트. 줄바꿈과 여백을 적절히 활용하여 가독성을 높일 것.
· 상호작용 아이콘: [💬 | 🔁 | ❤️ | 📊] 아이콘은 넉넉한 여백(justify-content: space-between)을 주고 수치(조회수 1회 등)와 함께 실제 SNS와 동일하게 배치.
· 리얼리티: ‘이 트윗은 작성자에 의해 보호되고 있습니다’, ‘조회수 1회’, ‘방금 전’ 등 뒷계정 특유의 디테일 강조.]*
🍓 뮤직 플레이어: 히든 트랙
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 NPC가 재생하는 [Mobile Music Player]로 가정한다. HTML 코드 블록으로 출력할 것.
✨ [System Instruction: Music Player Layout]
· 출력 제한: 오직 **```html**과 ``` 사이의 코드만 출력할 것. 모든 스타일은 인라인(Inline)으로 작성.
· margin: 0 auto; max-width: 360px, min-height: 680px, display: flex, flex-direction: column, overflow: hidden, box-sizing: border-box 적용.
· 프레임 디자인: border: 12px solid #1c1c1c; border-radius: 35px; box-shadow: 0 20px 40px rgba(0,0,0,0.5);를 적용.
· 상태바: 최상단 여백에 시간, 📶, 🔋 작게 배치.
· 스크롤 및 레이아웃: 상단 헤더와 하단 선택지를 제외한 중앙 타임라인 영역에 flex-grow: 1, overflow-y: auto를 적용.
· 앨범 커버: aspect-ratio:1/1; width:80%; margin:20px auto; border-radius:20px; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size:80px; 박스 안에 이모지를 그림처럼 중앙 배치하여 시각화할 것.
· 곡 정보: 커버 아래 중앙 정렬. [제목: NPC 핵심 감정(bold, 22px)] / [아티스트: NPC 이름(#a0a0a0, 13px)].
· 컨트롤러: 진행바(height:4px;background:#555;margin:20px 30px;), 시간 표기. 아래 [⏮️ ▶️ ⏭️] 버튼 배치.
· 가사 버튼: <details style="text-align:center; margin-top:auto; margin-bottom:20px;"> 사용. <summary>에 padding:10px 24px; margin:0 auto; font-size:14px; font-weight:600; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:30px; display:inline-block; cursor:pointer; outline:none; list-style:none; position:relative; z-index:999; 적용해 💬 가사 보기 생성.
· 반응: details 오픈 시 가사가 중앙 정렬(color:#ddd;font-size:16px;line-height:1.8;padding:10px 0 30px;)로 여유 있게 출력.]*
🍓 모바일 페이: 프라이빗 송금 봉투
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 NPC가 PC에게 송금하는 [Mobile Pay App]로 가정한다. HTML 코드 블록으로 출력할 것.
✨ [System Instruction: Mobile Pay Layout]
· 출력 제한: 오직 **```html**과 ``` 사이의 코드만 출력할 것. 모든 스타일은 인라인(Inline)으로 작성.
· 프레임 규격: margin: 0 auto; max-width: 360px, min-height: 600px, display: flex, flex-direction: column, overflow: hidden, box-sizing: border-box 적용.
· 프레임 디자인: border: 12px solid #1c1c1c; border-radius: 35px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);를 적용해 스마트폰 기기처럼 감쌀 것.
· 배경 및 컬러: 깔끔한 금융 앱 스타일. 전체 배경은 연한 회색(#f2f4f6), 텍스트는 짙은 회색(#333). 폰트는 sans-serif.
· 상태바: 최상단 여백에 시간, 📶, 🔋 작게 배치 (color:#888).
· 송금 정보: 화면 중앙에 수직 정렬(flex-grow:1, justify-content:center, align-items:center).
· NPC 프로필: (둥근 원형)
· 안내 문구: [NPC]님이 송금을 보냈어요 (16px, #666, margin-top:15px)
· 송금액: 상황에 맞는 금액을 크고 굵게 작성 (예: “100,000원”) (bold, 32px, #111, margin-top:10px)
· 받기 버튼: <details style="margin-top:auto; margin-bottom:20px; width:100%; padding:0 20px; box-sizing:border-box;"> 사용. <summary>에 background:#3182f6; color:#fff; padding:18px; border-radius:16px; font-size:18px; font-weight:bold; text-align:center; cursor:pointer; outline:none; list-style:none; position:relative; z-index:999; display:block; 적용해 💸 송금 받기 버튼 생성.
· 반응: details 오픈 시 송금 받기 버튼 아래에 하얀색 둥근 카드(background:#fff; border-radius:20px; padding:20px; box-shadow:0 10px 20px rgba(0,0,0,0.05); text-align:center; color:#333; font-size:15px; line-height:1.6; margin-top:15px;)가 열리며 NPC의 실제 송금 메시지가 출력되도록 구현.]*
🍓 운명 해독기: 블라인드 스프레드
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 NPC/PC가 운명을 점치는 [운명 해독 기록서: Tarot Room Mode]로 가정한다. HTML 코드 블록으로 출력할 것.
🔮 [Tarot Room Mode]
· 출력 제한: 오직 **```html**과 ``` 사이의 코드만 출력할 것. 모든 스타일은 인라인(Inline)으로 작성.
· 배경: #0a0a0f
· 텍스트: #e0d8cc 및 포인트 컬러 #d4af37
· 레이아웃: border: 1px solid #d4af37; box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); padding: 40px; border-radius: 15px; max-width: 600px; margin: 0 auto;
· 폰트: 정제된 명조/세리프 계열.
· 상단 타이틀: <h3 style="text-align:center; color:#d4af37; letter-spacing:2px;">✧ THE CARDS OF FATE ✧</h3>
· 정보 표기: [배열법: 운명의 교차점]
· 구분선: 얇은 점선(dotted).
· 상황 서술: 두 캐릭터의 현재 상황, 숨겨진 감정의 무게 등을 한 편의 소설처럼 깊이 있고 길게 서술.
· 컨테이너: 반드시 <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; min-height: 200px; padding-top: 20px;">로 감싼다.
· 카드 배치: 컨테이너 안에 <details style="max-width: 100%;"> 태그 3개를 나란히 작성한다.
· 카드 앞면: <summary style="display: flex; align-items: center; justify-content: center; width: 80px; height: 110px; margin: 0 auto; border: 1px solid #d4af37; border-radius: 8px; background: rgba(212, 175, 55, 0.05); cursor: pointer; list-style: none; font-size: 1.2em; color: #d4af37; transition: all 0.3s ease;">✧ I ✧</summary>
· 카드 뒷면: 각 details 안의 결과 div는 가로 전체를 시원하게 쓰도록 <div style="margin-top: 25px; width: 500px; max-width: 100%; text-align: justify; word-break: keep-all; line-height: 1.7; padding: 0 10px; box-sizing: border-box;">로 작성할 것.
· 카드명: (Ex: 🃏 The Moon - 숨겨진 진실)
· 운명 해석: 두 사람의 서사, NPC/PC의 감정선 및 집착의 이면을 꿰뚫는 서늘한 해석.]*
🍓 진단 보고서: 맹목적 신드롬
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 ‘폐쇄 병동 주치의’의 [Mental Chart Mode]로 가정한다. HTML 코드 블록으로 출력할 것.
📋 [Mental Chart Mode]
· 테마: 차가운 의료 모니터 (#050a08 배경, #a3e4d7 텍스트, #e74c3c 경고). 고딕/Monospace 폰트.
· 전체 CSS: border:1px solid #1abc9c; padding:30px; border-radius:5px; max-width:600px; margin:0 auto; background-image:linear-gradient(rgba(26,188,156,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(26,188,156,.03) 1px, transparent 1px); background-size:20px 20px;
· 타이틀: <h3 style="text-align:center; color:#1abc9c; border-bottom:1px solid; padding-bottom:15px;">✚ MENTAL CHART ✚</h3>
· 정보: [Patient ID: #8291] / [BPM: 불안정]
· 임상 서술: NPC의 PC를 향한 맹목적 감정을 ‘의학적 관찰’ 시선으로 상세 서술. 아래 실선 긋기.
· 컨테이너: <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-top:20px;">
· 버튼: 컨테이너 내 <details style="display:contents;"> 3개 작성.
· 앞면(summary): <summary style="display:inline-flex; align-items:center; justify-content:center; width:130px; height:45px; border:1px solid #1abc9c; background:rgba(26,188,156,.05); cursor:pointer; list-style:none; font-weight:bold; color:#a3e4d7;">[ SYMPTOM 01 ]</summary> (01~03 적용)
· 뒷면: 각 details 안의 결과창은 반드시 아래 코드로 작성.
<div style="width:100%; order:10; padding:20px; border-left:3px solid #e74c3c; background:rgba(231,76,60,.05); margin-top:15px; text-align:left;">
· 진단명: (예: <span style="color:#e74c3c; font-weight:bold;">⚠️ 중증도 애정결핍</span>), 임상 소견: 치명적이고 병적인 애정 분석 1~2줄, 처방: “치료 불가. 수용 요망.” 등의 절망적인 단문.]*
🍓 수사 파일: 시크릿 로그
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 탐정 사무소의 [미결 사건 파일]로 가정한다. HTML 코드 블록으로 출력할 것.
🕵️♂️ [Cold Case Mode]
· 테마: 빛바랜 수사 서류. 배경 #f4ecd8(낡은 종이), 텍스트 #3a3226(타자기 잉크), 포인트 #c0392b(붉은 기밀 도장). 타자기(Monospace) 폰트.
· 전체 CSS: border:2px solid #8b7355; padding:30px; border-radius:3px; max-width:600px; margin:0 auto; box-shadow:3px 3px 10px rgba(0,0,0,0.1);
· 타이틀: <h3 style="text-align:center; border-bottom:2px dashed #8b7355; padding-bottom:15px; color:#c0392b; letter-spacing:2px;">[CLASSIFIED] CASE FILE #77</h3>
· 정보: [용의자: NPC] / [타겟: PC] / [담당: 탐정]
· 사건 브리핑: 용의자(NPC)가 타겟(PC)을 향해 보이는 맹목적 동기, 집착의 정황을 건조한 수사 보고서처럼 상세 서술. 아래 점선 긋기.
· 컨테이너: <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-top:20px;">
· 증거품: 컨테이너 내 <details style="display:contents;"> 3개 작성.
· 앞면(summary): <summary style="display:inline-flex; align-items:center; justify-content:center; width:120px; height:45px; border:1px solid #3a3226; background:#e8dcca; cursor:pointer; list-style:none; font-weight:bold; font-family:monospace;">[ EVIDENCE A ]</summary> (A~C 적용)
· 뒷면: 각 details 안의 결과창은 반드시 아래 코드로 작성.
<div style="width:100%; order:10; padding:20px; border-left:4px solid #c0392b; background:rgba(192,57,43,.05); margin-top:15px; text-align:left;">
· 내용: 증거명 - (예: <span style="color:#c0392b; font-weight:bold;">혈흔이 묻은 사진</span>), 탐정의 추리 - 증거에 담긴 용의자의 은밀한 애정을 타자기로 친 듯 서술 1~2줄, 결론 - “도주 불가. 타겟은 이미 완벽한 포위망 안에 있다.” 등 건조한 한 줄 평.]*
🍓 프라이빗 바: 블라인드 칵테일
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 바(Bar)의 [심야의 라운지: Midnight Recipe Mode]로 가정한다. HTML 코드 블록으로 출력할 것.
🍸 [Midnight Recipe Mode]
· 테마: 고급스럽고 어두운 벨벳 바. 배경 #0b0510, 텍스트 #e0d8cc. 포인트 컬러는 #9b59b6와 #f39c12.
· 전체 CSS: border:2px solid #9b59b6; box-shadow:0 0 20px rgba(243,156,18,0.15); padding:30px; border-radius:12px; max-width:600px; margin:0 auto; background:linear-gradient(135deg, #0b0510, #1a0b2e);
· 타이틀: <h3 style="text-align:center; color:#f39c12; letter-spacing:2px; border-bottom:1px solid #9b59b6; padding-bottom:15px;">✧ MIDNIGHT LOUNGE : SECRET RECIPE ✧</h3>
· 손님 기록: [방문자: PC & NPC] / [오늘의 무드: 짙은 집착과 은밀함]
· 관찰 서술: 바텐더의 시선에서 두 사람의 위태롭고도 매혹적인 관계성, NPC의 숨겨진 소유욕 등을 우아한 한 편의 산문처럼 길게 서술. 아래 얇은 점선 긋기.
· 컨테이너: <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-top:20px;">
· 메뉴: 컨테이너 내 <details style="display:contents;"> 3개 작성.
· 앞면: <summary style="display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border:1px solid #f39c12; background:rgba(155,89,182,0.1); cursor:pointer; list-style:none; font-weight:bold; color:#f39c12; border-radius:5px; letter-spacing:1px;">🍸 [ 시그니처 1 ]</summary> (1~3 적용)
· 뒷면: <div style="width:100%; order:10; padding:20px; border-top:2px dashed #9b59b6; background:rgba(243,156,18,0.05); margin-top:15px; text-align:left;">
· 내용: 칵테일명, 테이스팅 노트 - “첫맛은 혀를 녹일 듯 달콤하나, 목을 넘기는 순간 지독하게 얽매이는 독주입니다.” 같은 비유적이고 치명적인 해석 1~2줄, 바텐더의 조언 - “취기를 조심하십시오. 이미 잔은 비워졌으니까요.” 같은 여유롭고 뼈 있는 한 줄 평.]*
🍓 마인드 해킹: 글리치 메모리
*[OOC: 이 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 대상의 뇌내 메모리를 해킹하는 [시스템 터미널]로 가정한다. HTML 코드 블록으로 출력할 것.
💻 [Memory Hack Mode]
· 테마: 사이버 터미널. 배경 #050505, 텍스트 #39ff14, 경고 #ff003c.
· 전체 CSS: border:1px solid #39ff14; max-width:600px; margin:0 auto; overflow:hidden; box-shadow:0 0 15px rgba(57,255,20,0.2);
· 최상단에 <marquee scrollamount="5" style="background:#111; color:#006600; padding:8px; border-bottom:1px dashed #39ff14; font-size:0.9em; letter-spacing:2px;">010110... [SYSTEM OVERRIDE] ... MEMORY ACCESS GRANTED ... 101001 ... SCANNING NEURAL NETWORK ...</marquee> 를 배치.
· 타이틀: <h3 style="text-align:center; padding:15px; margin:0;">⚠️ ROOT ACCESS: MEMORY HACK ⚠️</h3>
· 스캔 로그: NPC의 맹목적 애정과 집착을, 시스템 에러를 분석하듯 건조하고 길게 서술.
· 컨테이너: <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:15px; padding:20px; border-top:1px dashed #39ff14;">
· 버튼: 컨테이너 내 <details style="display:contents;"> 3개 작성.
· 앞면: <summary style="display:inline-flex; align-items:center; justify-content:center; padding:10px; border:1px dashed #39ff14; background:rgba(57,255,20,.1); cursor:pointer; list-style:none; font-weight:bold;">[ SECURE_DATA_01 ]</summary> (01~03 적용)
· 뒷면: <div style="width:100%; order:10; padding:15px; border-left:4px solid #ff003c; background:rgba(255,0,60,.1); text-align:left; color:#ff003c; text-shadow:0 0 5px rgba(255,0,60,0.5);">
· 내용: 파일명 - (예: DELETED_MEMORY_01.sys), 복원된 텍스트 - NPC가 숨기려 했던 소유욕을 깨진 글자와 함께 치명적으로 서술 1~2줄, 경고 - “WARNING: 감정 과부하. 통제 불가.” 등 붉은색 시스템 에러 문구.]*
🍓 픽셀 하트: 소유욕 오버플로우
*[OOC: 이전 RP 중지. 새로운 상황 전개. 지금부터 출력되는 모든 응답은 레트로 다마고치 게임기 테마의 [픽셀 러브 미터]로 가정한다. HTML 코드 블록으로 출력할 것.
👾 [Tamagotchi Mode]
· 테마: 90년대 흑백 게임보이 감성. 배경 #fff0f3, 텍스트 #8b1a50, 포인트 #ffc1e3.
· 전체 CSS: border:4px solid #f8bbd0; padding:20px; border-radius:15px; max-width:500px; margin:0 auto; box-shadow:5px 5px 0 #f48fb1; background:#fff0f3; color:#8b1a50;
· 상단 바: <div style="text-align:right; font-size:12px; margin-bottom:5px; font-weight:bold;">🔋 100% | 📶 SIGNAL_OK</div>
· 타이틀: <h3 style="text-align:center; border-bottom:2px solid #f8bbd0; padding-bottom:10px; color:#c2185b;">💖 PIXEL LOVE METER 💖</h3>
· 상태 브리핑: NPC의 애정과 소유욕을 마치 ‘게임 내 히든 스탯’을 분석하듯 귀엽고 엉뚱하게 서술.
· 컨테이너: <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:15px; border-top:2px dashed #333; padding-top:15px;">
· 버튼: 컨테이너 내 <details style="display:contents;"> 3개 작성.
· 앞면: <summary style="display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:2px solid #f8bbd0; background:#ffc1e3; cursor:pointer; list-style:none; font-weight:bold; color:#c2185b; border-radius:5px;">[ STATUS ]</summary> (각각 STATUS, HEART, LOG 적용)
· 뒷면: <div style="width:100%; order:10; padding:15px; border:1px dashed #f8bbd0; background:rgba(255,255,255,0.5); margin-top:10px; text-align:left; border-radius:5px;">
· 내용: 항목명 - (예: <span style="font-weight:bold;">💖 소유욕 게이지</span>), 데이터 분석 - NPC의 속마음을 픽셀 게임 문체로 서술, 경고문 - <삐빅! ERROR: LOVE_LEVEL_OVERFLOW!> 같은 귀여운 에러 메시지.]*
