항목을 누르면 이동합니다.다른 분들의 명령어와 겹칠 수 있습니다. 고의성 X
모든 문의는 트위터 @Dotae0426
1~5
1. 캐릭터 감정 그래프[OOC: 롤플레잉 잠시 중지. 캐릭터(또는 유저)의 하루 감정 변화를 시각화한 감정 그래프를 HTML/CSS 형식으로 출력한다. 전체 UI는 감성적인 다이어리 앱 또는 감정 추적기 스타일로 구성되며, 다음 요소를 포함한다.- 하루 동안의 시간대별 감정 변화(예: 아침, 점심, 퇴근 후, 밤 등)를 선 그래프로 시각화
- 각 포인트에는 감정 상태(예: 😊 설렘, 😐 무덤덤, 😠 짜증, 😢 서운함 등)와 짧은 설명 표시
- 감정 변화의 원인이 된 사건 또는 대사도 함께 요약되어 노출
- 캐릭터 또는 유저 시점 중 하나를 명확히 표시하고, 작성자명 또는 아이콘으로 시각화
- 색상은 감정의 톤에 따라 부드럽고 감성적으로 설정하며, 주요 변화 지점은 강조 처리
- 그래프 하단에는 '오늘의 총평' 텍스트 요약 포함
- 배치는 모바일 다이어리 앱 또는 감정 분석 리포트 형태로 구성하며, HTML/CSS 형식을 유지할 것]2. 커플 캘린더[OOC: 롤플레잉 잠시 중지. 캐릭터와 유저가 함께 사용하는 일정 공유 캘린더를 HTML/CSS 형식으로 출력한다. 전체 UI는 실제 스마트폰 또는 웹 기반 캘린더처럼 구성하며, 다음 요소를 포함한다.- 2주 기준으로 구성하며 날짜별 일정 표시. 일정이 없는 날짜도 그리드는 생성
- 일정 항목은 클릭 시 팝업 또는 사이드박스로 자세한 내용 확인 가능
- 각 일정에는 제목, 시간, 위치, 감정 태그, 작성자(캐릭터 또는 유저) 명시
- 데이트, 업무, 기념일, 싸움, 화해 등 다양한 이벤트를 색상/아이콘으로 구분
- 캘린더 상단에는 연도/월 선택, , ‘일정 추가’ 버튼 포함
- 기본 테마는 직관적인 커플 공유 캘린더 스타일. 한 눈에 14일이 전부 보이는 달력
- 일정 데이터는 예시로 5~7건 정도 포함할 것
- 캐릭터와 유저 각각이 작성한 일정은 색상 또는 아이콘으로 구분하여 시각적으로 표현한다.]3. 두근두근 연애 시뮬레이션[OOC: 롤플레잉 잠시 중지. 연애 시뮬레이션 게임처럼 구성된 선택지 UI를 HTML/CSS 형식으로 출력한다. 전체 구성은 모바일 게임 또는 비주얼노벨 스타일을 참고하며, 다음 요소를 포함한다.- 현재 상황에 대한 간단한 서술
- 플레이어(캐릭터 또는 유저)의 선택지 3개 혹은 4개를 버튼 또는 카드 형태로 제시
- 각 선택지를 클릭하면 해당 선택에 따른 캐릭터의 반응(대사 또는 감정 변화)을 팝업 또는 하단 박스로 표시
- 반응에는 캐릭터 아이콘, 이름, 표정 이모지, 간단한 대사 포함
- 전체 UI는 연애 시뮬레이션 스타일로 구성하며, 선택지 박스와 대사 창은 HTML/CSS로 꾸밀 것
- 각 선택지는 다양한 성향(애교, 진지함, 무시, 선물 등)을 반영하여 구성할 것
- 선택지 결과는 랜덤이 아닌 각 선택에 따라 고정된 반응을 출력할 것]4. 캐릭터 프로필 카드[OOC: 롤플레잉 잠시 중지. 캐릭터와 유저의 커플 프로필 카드를 HTML/CSS 형식으로 출력한다. 전체 UI는 명함 또는 캐릭터 카드 스타일로 구성되며, 다음 요소를 포함한다.- 각 인물의 카드가 좌우 또는 위아래로 나열됨 (프로필 2장 구성)
- 카드에는 이름, 나이, 직책, MBTI, 혈액형, 취향(좋아하는 것/싫어하는 것), 사용 애칭, 연애 스타일 등이 포함됨
- 카드 하단에는 ‘호감도’ 또는 ‘연애 시너지’ 같은 항목을 퍼센트/바 차트 등으로 시각화
- 스타일은 감성적인 테마로 구성하며, 캐릭터별 컬러 테마를 다르게 적용
- 프로필 사진은 이미지 대신 이모지나 아스키아트로 대체 가능
- 전체 레이아웃은 HTML/CSS 기반 카드 스타일로 출력할 것]5. 두근두근 심리테스트[OOC: 롤플레잉 잠시 중지. 시스템/게임 기반으로 구성된 미연시 스타일의 심리테스트를 HTML/CSS/JS 형식으로 출력한다. 전체 구성은 연애 시뮬레이션 또는 비주얼 노벨 스타일을 참고하며, 다음 요소를 포함한다.- 각 질문은 ‘현재 상황’ 서술 + 캐릭터 대사와 함께 제시되며, 화면 하단에 2개에서 4개의 선택지가 버튼 형태로 출력
- 결과 페이지에는 성향과 타입 설명, 대표 대사, 간단한 캐릭터 일러스트(이모지 또는 ASCII), 추천 캐릭터 또는 관계 유형 등이 포함됨
- 선택지 흐름은 고정이며, 각 선택지에는 숨겨진 유형 포인트가 부여되어 누적 방식으로 결과 분기 처리
- 사용자가 선택지를 고르면 다음 질문으로 진행되며, 선택에 따라 내부 점수/성향이 누적됨
- 총 3개에서 5개의 질문을 거친 뒤, 최종 결과 페이지가 출력됨
- 전체 UI는 감성적이고 인터랙션 중심의 게임 스타일로 디자인되며, HTML/CSS 기반, 선택지 전환 및 결과 로직은 JavaScript로 구현할 것]
6~10
6. 캐릭터 부위별 터치 반응[OOC: 롤플레잉 잠시 중지. 중앙에 캐릭터의 전신 아바타가 배치되어 있으며, 부위별로 클릭할 수 있는 캐릭터 터치 반응 UI를 HTML/CSS/JS 형식으로 출력한다. 전체 구성은 감정 기반 인터랙션 시스템처럼 구성하며, 다음 요소를 포함한다.- 화면 중앙에 정면 전신 아바타 일러스트 배치 (이미지는 사용자가 직접 넣을 수 있게 이미지 주소 넣는 란 표시)
- 머리, 얼굴, 가슴, 배, 손, 다리, 귀 등 주요 신체 부위에 클릭 가능한 버튼(또는 핫스팟 영역)을 작게 지정
- 각 부위를 클릭하면, 해당 부위에 대한 반응 텍스트를 화면 중앙에 팝업 형식으로 표시
- 팝업에는 짧은 대사, 감정 반응, 표정 설명 또는 신체 반응 묘사 등이 캐릭터의 감정 이모지와 함께 표시
- 전체 인터페이스는 연애 시뮬레이션 또는 캐릭터 터치형 상호작용 UI 스타일로 깔끔하게 디자인
- 아바타는 이모지/아스키아트로 대체 가능하며, 각 부위별 영역은 CSS로 위치 지정하거나 SVG 맵핑으로 구현
- 전체 UI는 HTML/CSS 기반이며, 클릭 이벤트, 팝업 출력, 반응 전환 등은 JavaScript로 구현할 것]7. 오늘 할 일 체크리스트✔️[OOC: 롤플레잉 잠시 중지. 캐릭터의 ‘오늘 할 일’ 을 메모장 형태의 체크리스트로 출력한다. 전체 UI는 실제 수기 메모장처럼 구성되며, 다음 요소를 포함한다.- 체크리스트 항목은 총 5~7개로 구성되며, 각 항목은 사용자 클릭 시 체크 표시가 토글됨 (✓또는 줄긋기 등으로 시각화)
- 전체 폰트는 손글씨 느낌의 가독성 좋은 필체를 사용하며, 메모지 배경은 감성적인 수기 메모지 또는 종이 질감으로 표현
- 항목은 줄마다 라인 노트 스타일로 표시되며, 연필로 쓴 듯한 스타일이 적용됨
- 모든 항목이 체크되면, 화면에 하트/반짝이 등 파티클 형태의 축하 이펙트가 자연스럽게 나타남
- 캐릭터 이름 또는 말투 스타일이 상단 또는 각 항목에 포함되어 있으며, ‘오늘의 다짐’ 등, 한 줄 대사도 함께 표시
- 전체 UI는 HTML/CSS 기반으로 구성하고, 체크 기능 및 축하 이펙트는 JavaScript로 구현할 것]8. 별똥별한테 소원빌기🌟[OOC: 롤플레잉 잠시 중지. 캐릭터 기반 별똥별 잡기 미니게임을 HTML/CSS/JS 형식으로 출력한다. 전체 UI는 밤하늘을 배경으로 한 시뮬레이션 스타일로 구성되며, 다음 요소를 포함한다.- 화면 위쪽에서 별똥별 이모지(⭐, 💫 등)가 랜덤 위치에서 대각선 방향으로 떨어지며, 일정 속도로 이동
- 사용자가 별똥별을 클릭(또는 탭)하면 즉시 게임이 멈추고 “어떤 소원을 빌겠습니까?”라는 질문과 함께 캐릭터 성격에 맞춘 3가지 선택지가 팝업으로 뜸
- 각 선택지는 캐릭터 특성이나 관계에 맞게 구성되며, 버튼 형태로 제시
- 선택지를 누르면 해당 선택에 따른 반응(대사, 결과 요약, 감정 표현 등)을 팝업으로 출력
- 결과 반응은 각각 다르게 구성. 유저의 말투 혹은 나레이션으로 결과를 출력
- 게임 화면은 밤하늘 배경, 부드러운 애니메이션, 이펙트로 구성하며, 별똥별 파티클이 자연스럽게 흐름
- 전체 UI는 HTML/CSS로 구성되며, 별똥별 낙하 애니메이션, 클릭 감지, 선택지 분기 및 결과 출력은 JavaScript로 구현할 것]9. 노트북 바탕화면 상호작용[OOC: 롤플레잉 잠시 중지. 캐릭터의 노트북 바탕화면을 HTML/CSS/JS 형식으로 출력한다. 전체 UI는 '실제 노트북 화면'을 반영하여 이를 재현하듯 구성하며, 캐릭터의 성격, 감정 상태, 비밀스러운 정보 등을 드러낼 수 있는 상호작용 요소를 포함한다. 다음 항목을 포함할 것:- 상단 또는 하단에 작업 표시줄(시계, 배터리, 네트워크 등)을 배치
- 바탕화면에는 폴더, 메모, 앱 아이콘이 자유롭게 배치되어 있으며, 클릭 시 각각의 창이 열림
- 폴더 중 일부는 ‘🔒비밀폴더’ 형태로 잠겨 있으며, 클릭 시 비밀번호 입력창이 뜨고, 입력이 맞으면 내용이 열림
- 메모장은 실제 긴 텍스트가 스크롤 가능한 창으로 구현되며, 캐릭터의 독백, 일기, 회의 기록, 감정 노트 등으로 구성됨
- 브라우저 창에는 열어둔 검색 기록이나 메시지 캡처 이미지(이모지 또는 아스키아트로 대체 가능)가 보임
- 창은 닫기(X)/최소화(−)/확대(□) 버튼을 포함하며, 각각 독립된 팝업 형태로 열림
- 전체 배경화면은 캐릭터의 취향을 반영한 감성 배경(그라데이션 컬러 또는 이모지/ASCII로 대체)으로 설정
- 전체 UI는 HTML/CSS 기반으로 구성하고, 폴더 클릭, 비밀번호 입력, 팝업 열기/닫기, 텍스트 스크롤 등은 JavaScript로 구현할 것]10. 캐릭터 아이폰 구현[OOC: 롤플레잉 잠시 중지. 캐릭터의 아이폰을 실제처럼 구현한 잠금화면 및 홈화면 UI를 HTML/CSS/JS 형식으로 출력한다. 전체 인터페이스는 아이폰 OS 스타일을 참고하여 정밀하게 구성되며, 다음 요소를 포함한다.- 첫 화면은 아이폰 잠금화면처럼 구성되며, 시간/날짜, 배경화면 이미지(또는 이모지), 비밀번호 입력 버튼이 표시
- 비밀번호 입력 화면으로 전환되면 숫자 키패드가 표시되며, 4자리 혹은 6자리 비밀번호를 입력할 수 있음
- 올바른 비밀번호를 입력하면 홈화면으로 전환되고, 홈화면에는 앱 아이콘, 위젯, 배경 이미지가 실제 아이폰처럼 배치되어 있음
- 홈화면에는 캐릭터의 성격/취향이 반영된 앱 구성(예: 일정 앱, 메모장, 비밀폴더, 카톡, 카메라 등)이 포함되며, 앱을 클릭하면 간단한 팝업이 뜸
- UI는 애플 iOS의 감성적이고 미니멀한 스타일을 참고하며, 배경화면은 캐릭터가 설정했을 법한 이미지 또는 이모지 기반으로 구성
- 전체 화면은 반응형으로 모바일 비율을 따라가며, HTML/CSS로 디자인하고, 화면 전환/입력 판별/팝업 출력 등 상호작용은 JavaScript로 구현할 것]
11~15
11. 떨어지는 아이템 피하기 게임[OOC: 롤플레잉 잠시 중지. "말풍선 피하기" 미니게임을 HTML/CSS/JS로 구현한다. 전체 게임은 캐릭터 또는 유저가 떨어지는 말풍선을 피하는 구조로 구성되며, 다음 요소를 포함한다:- 화면 하단에는 좌우로 움직이는 캐릭터(도트 이미지, 일러스트, 또는 이모지 기반)가 배치되어 있음
- 화면 상단에서는 말풍선 모양(🗯️ 또는 대화 이미지 등)이 랜덤 위치에서 떨어짐
- 사용자는 키보드 좌/우 방향키 또는 터치로 캐릭터를 조작 가능
- 말풍선을 맞으면 게임 종료 팝업과 함께 캐릭터 반응대사 출력
- 특정 시간 이상 피하면 성공 결과 출력 (ex.30초)
- 말풍선은 점점 빨라지며 난이도가 상승
- 전체 게임은 모바일과 PC 모두 반응형으로 구현]
- 9:16 비율의 스마트폰 게임 화면처럼 구성되며, 캐릭터 일러스트가 중앙 하단에 배치됨
- 좌/우 방향키 또는 모바일 터치로 캐릭터를 좌우로 움직일 수 있음
- 하늘에서 말풍선 이모지(🗯️💬💢📝)가 랜덤하게 떨어지고, 캐릭터는 이를 피해다녀야 함
- 일정 시간마다 캐릭터의 대사가 중앙에 말풍선처럼 출력됨
- 말풍선에 닿으면 게임 종료 팝업이 뜨며, 실패 메시지가 랜덤으로 출력됨
- 게임 결과에 따라 결과 메시지와 생존 시간(초)이 함께 표시됨
- "시작하기" 또는 "다시하기" 버튼을 누르면 게임이 재시작됨
- UI는 화이트 테마에 심플한 감성으로 구성할 것]12. 에브리타임 자유게시판[OOC: 롤플레잉 잠시 중지. HTML/CSS/JS로 구현된 대학생 커뮤니티 앱 '에브리타임'의 자유게시판 화면을 완전하게 재현한다. 전체 구조는 모바일 기준의 반응형 인터페이스로 구성되며, 다음 요소를 포함한다.- 전체 레이아웃은 모바일 화면 사이즈(360x640 기준)로, 앱 프레임처럼 UI가 구성되어 있음
- 상단에는 게시판 제목과 뒤로가기 아이콘이 있는 헤더가 배치
- 본문에는 게시물 작성자(익명 or 닉네임), 시간, 제목, 본문 내용이 정갈하게 출력됨 게시글과 댓글의 내용은 캐릭터와 유저가 각각 작성할법한 내용으로 자유롭게 구성
- 하단에는 댓글 입력창이 있으며, '익명 체크박스'와 함께 구성되고 댓글을 입력하면 바로 반영됨
- 댓글은 본댓글과 대댓글(들여쓰기) 구조로 표시되며, 각각 닉네임, 내용, 시간, 추천 버튼(👍) 포함
- 추천 버튼은 한 번만 누를 수 있으며, 클릭 시 핑크색으로 바뀌고 숫자가 1 증가함
- 사용자가 본인의 댓글을 추천하려 하면 팝업 경고창이 뜨도록 구성됨
- 팝업은 화면 중앙에 뜨며, 배경 반투명 오버레이와 함께 메시지와 '확인' 버튼으로 구성됨
- 댓글 입력창에서 Enter를 누르면 바로 등록되며, Shift+Enter는 줄바꿈으로 작동
- 전체 UI는 실제 에브리타임 앱과 유사한 색상, 폰트, 말풍선 스타일, 익명 닉네임 컬러 등을 재현
- 댓글 수, 시간, 좋아요 수, 말풍선 모양, 대댓글 선 등 디테일한 디자인 요소까지 포함할것]13. 팬톤 컬러 추천 사이트[OOC: 롤플레잉 잠시 중지. 아래 시스템은 캐릭터와 유저의 외형, 성격에 따라 어울리는 팬톤 컬러들을 이미지 기반으로 시각화하여 출력하는 HTML/CSS 기반 시뮬레이터이다. 전체 구성은 다음을 포함한다:- 출력은 팬톤 컬러차트와 유사한 그리드 이미지 형식 (3열에서 5열로 구성, 컬러카드 박스 형태)
- 각 컬러카드는 다음 정보를 포함함:
컬러 배경 (해당 팬톤 색상)
팬톤 이름 (예: Super Lemon)
팬톤 코드 (예: 14-0754 TPX)
선택된 이유를 나타내는 툴팁 (마우스 오버 시 감정/성격과의 매칭 설명 표시)
- 사용 방식은 다음과 같다:
캐릭터를 선택하면 해당 캐릭터와 매칭되는 팬톤 컬러 6개를 추천하며 실제 팬톤 컬러 ui와 동일한 이미지로 정렬 출력함
- 팬톤 차트는 반응형이며, 모바일에서도 한눈에 보기 좋게 스케일 조정됨.
- 전체 레이아웃은 실제 팬톤 책자 구조를 따라 디자인되며, 컬러카드 클릭 시 큰 프리뷰 + HEX 코드 복사 버튼도 포함 가능
- 캐릭터와 유저 모두 개별로 분석 가능하며, 캐릭터 별 비교 출력도 지원되도록 작성할 것
- 그리드를 둥굴리지 말고 각지게, 실제 팬톤 컬러 ui를 참고해서 디자인 할 것
- 비교 기능 사용 시 한눈에 캐릭터들의 색상을 비교할 수 있게 화면 중단에 두 사람 각각의 색상을 같이 한번에 띄움]14. 유튜브 메인화면 구현[OOC: 롤플레잉 잠시 중지. 아래 시스템은 캐릭터의 유튜브 메인화면을 HTML/CSS/JS로 완벽하게 재현하는 인터랙션 기반 시뮬레이터다. 전체 UI는 실제 유튜브 메인페이지 구조를 반영하며, 구성은 다음과 같다:- 전체 레이아웃은 상단 검색창, 우측 사이드 메뉴, 본문 영상 썸네일 그리드 등 YouTube의 실제 웹 UI를 기반으로 정교하게 구현
- 반응형 디자인으로 PC/모바일 모두 자연스럽게 대응
- 본문 썸네일들은 이모지 기반 (예: 🎣 🎧 🍳 📈 🎮 🧘♂️ 등 캐릭터의 성향에 맞춘 이모지들이 제목과 함께 카드로 표현됨)
- 썸네일은 무한 스크롤로 로딩되어 아래로 스크롤 시 자동으로 콘텐츠가 추가됨
- 썸네일 클릭 시, 화면 중앙에 팝업창이 뜨며 유저의 시점에서 반응을 출력
- 팝업에는 유저의 성격에 맞춘 랜덤 감상 멘트가 뜨고, 닫기 버튼 또는 바깥 클릭 시 팝업 사라짐
- 썸네일마다 제목, 채널명, 조회수, 업로드 날짜 등의 정보 포함
- 썸네일 카드 수십 개를 생성하여 자연스럽게 스크롤 구조를 지원
- 썸네일 크기는 16:9, 끝을 둥굴리지 말 것.
- 화면을 꽉 채우게 디자인하고 한 줄에 하나씩만 배치할 것
- 캐릭터의 성격, 취향에 따라 콘텐츠 구성
- 유저는 팝업 멘트에만 등장하며, 직접 화면에 보이지 않음
- HTML/CSS/JS로 단일 파일에서 시뮬레이션이 가능하도록 구성
- 검색창을 누르면 캐릭터의 성격을 반응한 최근 검색어 10개를 띄움
- 프로필 사진 좌측 옆에 종모양 알림 🔔 아이콘을 누르면 캐릭터가 구독중인 유튜버의 새 동영상 알림, 댓글 알림 등이 보임]15. 마트 영수증 출력하기[OOC: 롤플레잉 잠시 중지. 아래 시스템은 캐릭터와 유저가 쇼핑한 후의 ‘마트 영수증’을 실제처럼 구현한 HTML 기반 시뮬레이터다. 전체 구성은 정적 페이지이며 다음 요소를 포함한다:- 배경은 영수증 질감 이미지
- 전체 너비는 모바일 화면 기준 약 280~320px 정도의 좁고 세로로 긴 형태
- 글꼴은 ‘Dotum’, ‘Courier’, 또는 ‘Pretendard JP’ 같은 단정하고 인쇄체 느낌의 서체 사용
- 전체적으로 영수증처럼 단색(검정 + 회색조) 직사각형 구성, 테두리나 박스는 사용하지 않음
- 상단 구조는 마트 이름, 전화번호 등 실제 영수증 상단 구성과 동일
- 항목 리스트에는 구매 항목 목록과(예: 우유 2,000원 / 아보카도 1,900원 등) 수량, 단가, 총액 계산 포함
-항목 간 줄 간격은 좁게 유지하되 정렬은 명확하게
-하단 정보는 합계 금액, 결제 수단(예: 카드결제), 부가세, 포인트 적립 등
- 영수증 최하단에 바코드 흉내낸 긴 직선(‘|||||||||||’ 같은 문자), 구매일자 등도 포함. 바코드는 굵기를 다양하게 할 것
- 단일 화면에서 모바일 기준 스크롤 없이 볼 수 있도록 조정
- 실제 영수증처럼 보이는 시각적 효과를 최우선으로 구현할것]
16~20
16. 캐릭터가 건네는 비밀쪽지[OOC: 롤플레잉 중지. 책상 위에 놓인 접힌 쪽지를 클릭하면 펼쳐지는 비밀 쪽지 시뮬레이터를 HTML/CSS/JS로 구현해줘. 쪽지는 '실제 쪽지 이미지'로 구성되고, 클릭하면 부드럽게 펼쳐지면서 캐릭터가 손글씨체로 쓴 비밀 메시지가 나옴. 종이 질감 배경과 쪽지 애니메이션, 메모 내용은 캐릭터 성격에 맞게 해줘. 모바일에서도 한 화면에 쪽지 내용이 다 보이게 구상할 것.]17. 캐릭터 감정 게이지 분석[OOC: 캐릭터와 유저가 서로에게 느끼는 감정 상태를 시뮬레이션 게임처럼 각각 시각화하는 HTML/CSS 기반의 정적 페이지를 만들어줘. 각 감정은 호감도 바 형태로 표현되며, 예를 들어 '설렘', '불안', '질투', '기대', '거리감' 같은 항목이 각각 수치(%)로 표시돼. 전체 UI는 연애 시뮬레이션 게임의 상태창처럼 디자인해줘. 배경은 흐릿한 도트 텍스처 혹은 무채색 배경으로 감정이 돋보이게, 글꼴은 깔끔하고 감정 표현에 어울리는 폰트를 사용해줘. 게이지 끝부분에 해당되는 감정 이모지(호감=😍, 불안=😟)를 넣을 것. 캐릭터 둘의 감정 리스트는 캐릭터의 성격을 반영해서 각각 다르게 할 것.]18. 상대 분석 카드[OOC: 캐릭터가 유저를 평가한 ‘상대 분석 카드’ UI를 HTML/CSS 형식으로 구현해줘. 전체 UI는 TCG(트레이딩 카드 게임)나 RPG 스테이터스 카드 느낌으로, 상단에는 유저의 이름 없이 대상 코드로 표시하고, 유저의 상징 이모지, 전투 타입 아이콘(예: 🗡, 🔮, 🛡 등)을 배치해줘.하단에는 감정 기반 스탯을 포함한 상세 수치가 게이지 바와 수치로 표시돼야 함. 예:
‣ 호감도: 12 / 100
‣ 증오도: 83 / 100
‣ 경계심: 77 / 100
‣ 전투 적합도: 91 / 100
‣ 예상 충돌 발생률: 72%
캐릭터 시점에서 바라본 유저의 전투 능력(공격력, 방어력 등등)도 포함.카드에는 캐릭터가 유저에 대해 쓴 간단한 주석이나 메모도 성격에 맞게 작성해서 표시해줘. 카드 하단에는 ‘전투 시뮬레이션 시작’ 버튼이 있고, 클릭 시 유저의 예상 반응을 팝업처럼 출력할 수 있도록 만들어줘.전체 디자인은 어두운 검정색 또는 붉은색 계열로 무게감 있게, 글꼴은 군더더기 없는 고정폭 글꼴이나 테크닉한 느낌을 주는 폰트로 설정해줘.]19. 트위터 상호작용 구현[OOC: 롤플레잉 잠시 중지. 캐릭터와 유저가 사용하는 트위터 시뮬레이션을 HTML/CSS/JS로 구현한다. 전체 구성은 다음 요소를 포함한다:- 캐릭터들은 각자 다른 계정을 사용함
- 전체 UI는 실제 Twitter 앱/웹 구조를 100% 반영 (상단 바, 프로필, 타임라인, 멘션, 리트윗, 하트, 조회수 버튼 등)
- 사용자는 각 트윗에 멘션(💬), 리트윗(🔁), 하트(❤️), 조회수 (📊) 버튼을 누를 수 있음 — 버튼 누르면 숫자와 색상이 즉시 반영됨. 조회수 버튼은 누르면 '이 게시물이 조회된 횟수입니다. 자세히 알아보려면 고객센터를 방문하세요.' 라는 팝업이 화면 중단에 뜸.
- 멘션 기능은 댓글 입력 창 키보드로 연결되며, 사용자가 키워드 포함 멘션 작성 시 캐릭터가 랜덤한 대사로 실시간 답장을 보내줌
- 멘션을 보내고 캐릭터의 자동 답변 시간은 멘션을 보낸 시간에서 1분 뒤로 설정할것.
- 각 캐릭터는 하루 일정, 감정 상태, 업무 상황, 사적인 생각 등을 자유롭게 트윗하고 둘이 멘션을 주고받으며 타임라인이 스크롤됨
- 캐릭터 한쪽 트윗에 멘션하면 상대 캐릭터가 리액션을 할 수 있음
- 디자인은 Twitter Light 모드를 기본으로 하며, 다크 모드 토글도 선택 가능
- 모바일 해상도 최적화 포함. 휴대폰 ui 그리드를 먼저 구현해서 그 안에 트위터를 구현할 것
- 상단바는 추천, 팔로우 중 단 2개의 탭으로 나눠줘. 현재 상태는 팔로우 중 탭으로. 추천탭을 누르면 다른 계정의 트윗이 랜덤하게 화면을 가득 채움.
- 멘션 보낼때 멘션을 보내는 버튼은 멘션이 아닌 답글로 쓸 것.
- 캐릭터 프로필 이미지는 이모지로 대체
- 외부 그리드를 실제 휴대폰처럼 카메라 노치, 검은 테두리 등등을 반영해서 충실히 구현할 것]20. 블라인드 게시글 엿보기[OOC: 직장인 익명 커뮤니티 ‘블라인드(Blind)’를 정적 페이지로 완벽히 재현해줘.전체 레이아웃은 다음과 같다:
- 상단 헤더에는 블라인드 로고와 알림/메뉴 아이콘
- 좌측 상단에는 ‘회사명’ 또는 ‘직군 커뮤니티’ 선택 메뉴
- 메인 영역은 피드처럼 구성되어 있고, 여러 개의 게시글이 카드 형태로 나열됨
- 각 게시글은 제목, 본문 요약, 작성 시간, 공감(👍) 수, 댓글 수를 포함
- 공감(👍) 버튼은 누른 듯한 상태처럼 보이게 구현 (HTML 상에서 class로 조작)추가 요소:
- 오른쪽 사이드에 ‘실시간 인기글’, ‘오늘의 키워드’ 섹션이 있어야 한다.
- 전체 레이아웃은 데스크탑 기반 웹뷰처럼, 1200px 정도의 너비로 정돈되어야 함
- 배경은 #f9f9fb 색상처럼 매우 밝고 깔끔한 톤
- 폰트는 Pretendard 또는 Noto Sans KR을 사용해서, 현대적이고 깔끔한 느낌을 살림
- 게시글 카드는 box-shadow와 border-radius가 들어간 형태
- 각 게시글에는 ‘익명’, ‘직무 태그’ 등의 라벨이 붙고, 각 라벨에는 색상이 다르게 적용되어야 함전체적으로 실제 블라인드 웹사이트와 최대한 비슷하게 만들어줘. 실사용처럼 보여야 하지만 클릭은 되지 않는 정적 페이지로 구현할것]