일론 머스크는 자동봇을 살려내라.
대사를 랜덤으로 출력하는 트위터 UI의 html 코드를 배포합니다. 티스토리 / 라공 에디션 등 html 편집이 가능한 게시판에서 사용할 수 있습니다. 아보카도 에디션, 나루 등 기타 플랫폼에서도 사용 가능합니다. (할 겁니다. 테스트하지 않았습니다.)
해당 코드는 바이브 코딩으로 작성되었습니다. 수정 후 재배포는 자유롭습니다.
(1) 일반 게시판
프로필 사진 이미지 링크를 변경하고, textarea 태그 안에 백업된 대사를 넣어주세요. 이후 전체를 복사해서 html 편집 환경에 붙여 넣으면 됩니다. (폰트어썸 라이브러리는 따로 삽입하지 않았습니다. 스킨에 없다면 넣어주세요.)
닉네임, 아이디, 기본 대사 등은 게시글에서 편집할 수 있습니다. 날짜는 자동으로 오늘 날짜를 출력합니다.
(2) 라공 에디션 메인 스킨
(이미지 텍스트 출처는 이영주 시인의 <광인 마그네틱> 입니다.)
스킨에서 제공하는 박스를 채우고, 버튼 위치를 고정했습니다. 텍스트가 길어지면 스크롤이 생깁니다.
대사 업로드가 조금 귀찮습니다. 게시판용 코드처럼 줄바꿈으로 구분이 되지 않아 하나하나 따옴표로 구분해주어야 합니다.
아래 더보기 칸은 간단하게 만든 변환기 코드입니다. 복사 후, html로 저장해서 실행해주세요. 변환된 대사를 코드에 붙여 넣으면 됩니다.
메인 화면에서 복수의 코드를 쓸 때는 "jjkr01"로 작성된 부분을 jjkr02, 03 혹은 구분할 수 있는 캐릭터 이름 등으로 바꿔주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>대사 변환</title>
<style>
body { font-family: sans-serif; padding: 20px; background: #f5f5f5; color: #333; }
textarea { width: 100%; height: 250px; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
button { margin: 15px 0; padding: 10px 20px; font-size: 16px; font-weight: bold; background: #1d9bf0; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #1a8cd8; }
h3 { margin-top: 20px; }
</style>
</head>
<body>
<h2>대사 변환기</h2>
<p>여기에 엔터(줄바꿈)가 포함된 대사를 그대로 붙여넣으세요.</p>
<textarea id="input" placeholder="여기에 대사를 입력하세요... 대사 1번입니다 대사 2번입니다"></textarea>
<button onclick="convert()">🚀 변환하기</button>
<h3>👇 결과 (복사해서 메인 박스 스크립트에 넣으세요)</h3>
<textarea id="output" readonly placeholder="변환된 코드가 여기에 출력됩니다."></textarea>
<script>
function convert() {
var input = document.getElementById("input").value;
var lines = input.split(/\r?\n/);
var resultArray = [];
for (var i = 0; i < lines.length; i++) {
var trimmed = lines[i].trim();
if (trimmed !== "") {
var safeLine = trimmed.replace(/"/g, '\\"');
resultArray.push(' "' + safeLine + '"');
}
}
var finalResult = "[\n" + resultArray.join(",\n") + "\n]";
document.getElementById("output").value = finalResult;
}
</script>
</body>
</html>
죽은 자동봇도 다시 보자.
해두면 즐겁습니다...... 무한 딸깍 놀이를 즐겨보세요.
'-' 카테고리의 다른 글
| 라공 에디션으로 웹앱 만들기 (0) | 2026.07.25 |
|---|---|
| 자동봇 예시 (0) | 2026.06.17 |
| 의지 커미션 자료 (0) | 2024.10.13 |