MBTI 기반 오늘의 행운 문장 추천기 🎯
방문자 체류시간을 늘리기 위한 참여형 콘텐츠 3번째는 바로 MBTI 기반의 한 줄 응원 문장 추천기입니다.
사용자가 자신의 MBTI를 선택하면, 그에 맞는 한 줄 문장이 무작위로 출력되는 구조입니다. 이런 도구는 감성적인 공감을 유도하며 반복 방문을 유도할 수 있어, **블로그 체류시간** 증가에 매우 효과적입니다.
💡 설치 전 참고사항
- 해당 위젯은 JavaScript 기반이므로 티스토리에서는 작동하지 않습니다.
- 블로그스팟(Blogger)이나 워드프레스(.org)에서 정상적으로 작동합니다.
- 방문자가 버튼 클릭 시 매번 랜덤 문장을 확인할 수 있습니다. (매번 바뀜)
📌 실사용 미리보기
아래 셀렉트를 눌러 본인의 MBTI를 선택하고, 버튼을 클릭해보세요! 그에 맞는 오늘의 한 줄 문장을 보여줍니다.
🎯 MBTI 오늘의 행운 문장
📥 직접 복사해서 내 블로그에 붙여넣기
아래 코드를 복사하여, 블로그스팟 HTML 편집에 붙여넣으면 바로 설치할 수 있습니다.
<div style="background:#f0f8ff; padding:20px; border-radius:10px; max-width:500px; margin:30px auto; font-family:'Noto Sans KR', sans-serif;">
<h3 style="text-align:center; color:#34495e;">🎯 MBTI 오늘의 행운 문장</h3>
<label for="mbti-select" style="display:block; margin:15px 0 10px;">당신의 MBTI를 선택하세요:</label>
<select id="mbti-select" style="padding:8px 10px; border-radius:5px; width:100%;">
<option value="">-- 선택 --</option>
<option value="INTJ">INTJ</option>
<option value="INTP">INTP</option>
<option value="ENTJ">ENTJ</option>
<option value="ENTP">ENTP</option>
<option value="INFJ">INFJ</option>
<option value="INFP">INFP</option>
<option value="ENFJ">ENFJ</option>
<option value="ENFP">ENFP</option>
<option value="ISTJ">ISTJ</option>
<option value="ISFJ">ISFJ</option>
<option value="ESTJ">ESTJ</option>
<option value="ESFJ">ESFJ</option>
<option value="ISTP">ISTP</option>
<option value="ISFP">ISFP</option>
<option value="ESTP">ESTP</option>
<option value="ESFP">ESFP</option>
</select>
<button onclick="showMbtiQuote()" style="margin-top:15px; padding:10px 20px; background:#3498db; color:white; border:none; border-radius:5px; cursor:pointer;">결과 확인</button>
<div id="mbti-result" style="margin-top:20px; font-size:16px; font-weight:bold; color:#2c3e50; text-align:center;"></div>
</div>
<script>
const mbtiQuotes = {
INTJ: ["오늘은 멀리 돌아가더라도 정답에 가까운 날입니다.", "계획은 있지만 때로는 감정에 따라 움직여도 괜찮습니다."],
INTP: ["질문하는 당신, 오늘도 멋집니다.", "생각은 깊고, 표현은 담백하게 해보세요."],
ENTJ: ["당신의 추진력이 오늘의 키입니다.", "주변 사람들과의 협업이 새로운 기회를 엽니다."],
ENTP: ["호기심이 당신을 멀리 데려갑니다.", "장난처럼 시작한 일이 진짜가 될지도 몰라요."],
INFJ: ["오늘은 감정에 솔직해져도 괜찮아요.", "당신이 지키는 조용한 진심이 빛날 날입니다."],
INFP: ["작은 상상이 큰 위로가 됩니다.", "누군가에겐 당신의 말 한마디가 하루를 바꿉니다."],
ENFJ: ["당신의 리더십이 모두를 따뜻하게 합니다.", "감정도 전략이 될 수 있어요."],
ENFP: ["오늘은 감정의 물결을 믿고 따라가보세요.", "누군가와의 우연한 대화가 큰 영감을 줄 수 있어요."],
ISTJ: ["하루가 계획대로 흘러갑니다. 자신감을 가지세요.", "사소한 습관이 큰 신뢰를 만듭니다."],
ISFJ: ["당신의 배려는 반드시 돌아옵니다.", "누군가 당신의 조용한 헌신을 보고 있어요."],
ESTJ: ["정리정돈이 오늘의 열쇠입니다.", "당신의 직설이 때로는 가장 필요한 진심이에요."],
ESFJ: ["따뜻한 말 한마디가 관계를 바꿉니다.", "오늘은 누군가의 하루를 책임질 수 있어요."],
ISTP: ["즉흥적인 결정이 의외의 행운을 가져옵니다.", "문제를 해결할 때 직관을 믿으세요."],
ISFP: ["조용한 감성이 사람들을 감동시킵니다.", "오늘은 나만의 시간을 가져도 좋아요."],
ESTP: ["실행력이 당신의 매력입니다.", "오늘은 도전하는 만큼 보답이 올 거예요."],
ESFP: ["에너지 넘치는 하루가 될 거예요.", "당신의 웃음이 주변을 밝게 합니다."]
};
function showMbtiQuote() {
const mbti = document.getElementById("mbti-select").value;
const resultBox = document.getElementById("mbti-result");
if (mbti && mbtiQuotes[mbti]) {
const quotes = mbtiQuotes[mbti];
const randomIndex = Math.floor(Math.random() * quotes.length);
resultBox.textContent = quotes[randomIndex];
} else {
resultBox.textContent = "MBTI를 선택해 주세요!";
}
}
</script>
※ 전체 코드는 위에 있는 것을 그대로 복사해서 붙여넣으시면 됩니다!
