소개
딸이 좋아하는 동물의 숲 캐릭터를 이해하고자 만들어 보았습니다.
진행 방법
제미나이와 클로드를 사용햇습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
https://claude.ai/public/artifacts/524265ee-7767-4fd3-a9a1-325b932c2f30
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MBTI 추천 동숲 캐릭터</title>
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #7cb342;
--bg-color: #f9fbe7;
--card-bg: #ffffff;
--text-color: #5d4037;
}
body {
background-color: var(--bg-color);
font-family: 'Gaegu', cursive;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: var(--text-color);
}
#app {
background: var(--card-bg);
width: 90%;
max-width: 450px;
padding: 40px 20px;
border-radius: 30px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border: 5px solid #dce775;
text-align: center;
}
h1 { font-size: 2.2rem; color: var(--primary-color); margin-top: 0; }
p { font-size: 1.3rem; line-height: 1.4; }
.btn {
background-color: #9ccc65;
color: white;
border: none;
padding: 15px 20px;
font-size: 1.4rem;
border-radius: 15px;
cursor: pointer;
width: 100%;
margin-bottom: 12px;
transition: all 0.2s;
font-family: 'Gaegu', cursive;
box-shadow: 0 4px 0 #7cb342;
}
.btn:active {
transform: translateY(4px);
box-shadow: none;
}
.progress-bar {
width: 100%;
height: 10px;
background: #eee;
border-radius: 5px;
margin-bottom: 20px;
}
#progress {
height: 100%;
background: var(--primary-color);
width: 0%;
border-radius: 5px;
transition: 0.3s;
}
#result-img {
width: 180px;
height: 180px;
object-fit: contain;
margin: 20px 0;
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}
.hidden { display: none; }
</style>
</head>
<body>
<div id="app">
<div id="start-screen">
<h1>MBTI 추천<br>동숲 캐릭터</h1>
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/leaf.png" width="50" alt="leaf">
<p>당신은 어떤 주민과 닮았을까요?<br>10개의 퀴즈로 알아보세요!</p>
<button class="btn" onclick="start()">테스트 시작하기</button>
</div>
<div id="quiz-screen" class="hidden">
<div class="progress-bar"><div id="progress"></div></div>
<p id="q-text" style="font-weight: bold; font-size: 1.5rem;"></p>
<div id="options">
<button class="btn" onclick="next(1)" id="opt1"></button>
<button class="btn" onclick="next(2)" id="opt2"></button>
</div>
</div>
<div id="result-screen" class="hidden">
<p style="font-size: 1.1rem; margin-bottom: 5px;">당신과 어울리는 주민은...</p>
<h2 id="mbti-type" style="margin: 0; color: #7cb342; font-size: 2rem;"></h2>
<img id="result-img" src="" alt="캐릭터 이미지">
<h1 id="char-name" style="margin: 5px 0;"></h1>
<p id="char-desc" style="background: #f1f8e9; padding: 15px; border-radius: 15px; font-size: 1.2rem;"></p>
<button class="btn" style="background: #ff8a65; box-shadow: 0 4px 0 #e64a19;" onclick="location.reload()">다시 하기</button>
</div>
</div>
<script>
const questions = [
{ q: "모르는 주민이 말을 걸어오면?", a1: "반갑게 인사를 나눈다", a2: "어색하게 인사하고 지나간다", type: "E" },
{ q: "집을 꾸밀 때 나는?", a1: "컨셉을 미리 정하고 가구를 배치한다", a2: "그때그때 예쁜 걸 놓아본다", type: "J" },
{ q: "박물관에 기증할 때 나는?", a1: "화석과 곤충의 생김새를 관찰한다", a2: "이게 실제 세상에 있으면 어떨까 상상한다", type: "S" },
{ q: "친구가 벌에 쏘여 울고 있다면?", a1: "괜찮아? 많이 아프겠다!", a2: "약 먹었어? 상점가서 약 사줄까?", type: "F" },
{ q: "섬을 탐험할 때?", a1: "다른 섬에 가서 주민들을 만나는게 즐겁다", a2: "조용히 낚시하거나 꽃에 물 주는게 좋다", type: "E" },
{ q: "레시피를 얻었을 때?", a1: "필요한 재료를 바로 체크한다", a2: "일단 배워두고 나중에 생각한다", type: "J" },
{ q: "너굴 사장의 제안을 들으면?", a1: "현실적으로 빚을 갚을 계획을 세운다", a2: "무인도에서의 낭만적인 삶을 꿈꾼다", type: "S" },
{ q: "누군가 내 섬을 칭찬해주면?", a1: "그의 마음이 느껴져서 감동받는다", a2: "내 섬의 어떤 부분이 좋은지 궁금해한다", type: "F" },
{ q: "나무를 흔들 때?", a1: "나뭇가지가 몇 개 나오는지 확인한다", a2: "갑자기 돈이 떨어지는 상상을 한다", type: "S" },
{ q: "이벤트가 열리면?", a1: "미리 시간을 확인하고 준비한다", a2: "마침 열렸네? 하고 참여한다", type: "J" }
];
const results = {
"ESTJ": { name: "너굴", desc: "철저한 계획과 리더십! 섬의 발전을 이끄는 당신은 진정한 리더!", img: "https://acnhapi.com/v1/images/villagers/361" },
"ISTJ": { name: "콩돌이", desc: "성실하고 꼼꼼한 당신, 주어진 일을 묵묵히 해내는 신뢰의 아이콘!", img: "https://acnhapi.com/v1/images/villagers/363" },
"ENFP": { name: "릴리안", desc: "어디서나 인기 폭발! 긍정 에너지가 넘치는 당신은 진정한 아이돌!", img: "https://acnhapi.com/v1/images/villagers/297" },
"INFP": { name: "패치", desc: "풍부한 상상력과 따뜻한 마음, 당신은 섬의 소중한 낭만주의자!", img: "https://acnhapi.com/v1/images/villagers/96" },
"ENTP": { name: "대장", desc: "똑똑하고 말재주가 좋은 당신, 가끔은 짓궂지만 미워할 수 없어요!", img: "https://acnhapi.com/v1/images/villagers/378" },
"INTP": { name: "부엉", desc: "박학다식하고 탐구심이 강한 당신, 섬의 지식인을 담당해보세요!", img: "https://acnhapi.com/v1/images/villagers/364" },
"ENFJ": { name: "카라멜", desc: "모두를 챙기는 따뜻한 리더, 당신 곁에는 늘 친구들이 가득해요!", img: "https://acnhapi.com/v1/images/villagers/106" },
"INFJ": { name: "사이다", desc: "조용하지만 통찰력 있는 당신, 깊은 배려로 모두를 감동시켜요!", img: "https://acnhapi.com/v1/images/villagers/246" },
"ESTP": { name: "벤", desc: "행동이 먼저! 에너제틱한 당신은 섬의 활력소 그 자체!", img: "https://acnhapi.com/v1/images/villagers/110" },
"ISTP": { name: "늑태", desc: "무심한 듯 시크하지만 손재주가 좋은 당신, 진정한 츤데레!", img: "https://acnhapi.com/v1/images/villagers/381" },
"ESFP": { name: "애플", desc: "당신이 나타나면 분위기가 밝아져요! 섬의 분위기 메이커!", img: "https://acnhapi.com/v1/images/villagers/172" },
"ISFP": { name: "메이첼", desc: "예술적 감각과 온화한 성품, 당신의 섬은 늘 아름답게 빛나요.", img: "https://acnhapi.com/v1/images/villagers/72" },
"ENTJ": { name: "시베리아", desc: "카리스마 넘치는 조언자, 목표를 향해 나아가는 모습이 멋져요!", img: "https://acnhapi.com/v1/images/villagers/382" },
"INTJ": { name: "잭슨", desc: "지적이고 분석적인 매력, 당신만의 독특한 스타일이 돋보여요!", img: "https://acnhapi.com/v1/images/villagers/64" },
"ESFJ": { name: "여울", desc: "친절함의 끝판왕! 당신 덕분에 우리 섬의 하루가 평화로워요.", img: "https://acnhapi.com/v1/images/villagers/362" },
"ISFJ": { name: "뽀야미", desc: "조용히 뒤에서 모두를 챙기는 천사, 당신은 섬의 안식처예요.", img: "https://acnhapi.com/v1/images/villagers/168" }
};
let idx = 0;
let score = { E: 0, S: 0, F: 0, J: 0 };
function start() {
document.getElementById('start-screen').classList.add('hidden');
document.getElementById('quiz-screen').classList.remove('hidden');
show();
}
function show() {
if (idx === 10) return result();
const q = questions[idx];
document.getElementById('q-text').innerText = q.q;
document.getElementById('opt1').innerText = q.a1;
document.getElementById('opt2').innerText = q.a2;
document.getElementById('progress').style.width = (idx * 10) + "%";
}
function next(num) {
const q = questions[idx];
if (num === 1) score[q.type]++;
idx++;
show();
}
function result() {
document.getElementById('quiz-screen').classList.add('hidden');
document.getElementById('result-screen').classList.remove('hidden');
let mbti = "";
mbti += score.E >= 1 ? "E" : "I";
mbti += score.S >= 1 ? "S" : "N";
mbti += score.F >= 1 ? "F" : "T";
mbti += score.J >= 2 ? "J" : "P"; // 문항 수에 따른 조정
const res = results[mbti];
document.getElementById('mbti-type').innerText = mbti;
document.getElementById('char-name').innerText = res.name;
document.getElementById('char-desc').innerText = res.desc;
document.getElementById('result-img').src = res.img;
}
</script>
</body>
</html>결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
딸과의 유대가 좋아졌고 피드백도 받을 수 있어 좋았습니다.
과정 중에 어떤 시행착오를 겪었나요?
처음에는 퀴즈를 만들기만 해보려다 앱이면 좋을 거 같아 앱으로 구현해보았습니다.
도움이 필요한 부분이 있나요?
이미지로 연결
앞으로의 계획이 있다면 들려주세요.
실제 사용가능한 생활이나 교육적으로 유용한 앱을 만들고 싶습니다.
