https://planfully.ai.kr/tags/%EB%8F%99%EC%A0%81-%EA%B0%80%EC%A1%B1%ED%99%94/Recent content in 동적 가족화 on 계획대로 느긋하게Hugo -- gohugo.ioko-krMon, 27 Jul 2026 00:00:00 +0900https://planfully.ai.kr/tests/family-drawing/Mon, 27 Jul 2026 00:00:00 +0900https://planfully.ai.kr/tests/family-drawing/<p>사람은 &lsquo;가족&rsquo;을 그릴 때 자기도 모르게 <strong>마음속 가족 관계의 지도</strong>를 종이 위에 옮깁니다. 누구를 가장 먼저 그리는지, 누가 가장 크게 그려지는지, 사람들 사이가 얼마나 가까운지 — 이 모든 것이 가족 안에서 내가 느끼는 친밀함과 애착, 그리고 나의 자리를 비춰주죠. 그림심리검사인 <strong>동적 가족화(KFD)</strong> 방식으로, &ldquo;가족이 무언가를 하고 있는 그림&quot;을 편하게 그려보세요. 잘 그릴 필요는 전혀 없어요. 👨‍👩‍👧‍👦</p> <div id="kfd"> <style> #kfd{--bg:#ece7dc;--surface:#f7f3ea;--ink:#2c2e33;--muted:#6b6a63;--accent:#3f736c;--accent-ink:#2c574f;--ochre:#b0842f;--canvas:#fcfaf3;--line:#d9d2c3;--shadow:rgba(40,38,30,.13); max-width:640px;margin:8px auto;color:var(--ink); font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;line-height:1.7;} @media (prefers-color-scheme:dark){#kfd{--bg:#191b1f;--surface:#23262c;--ink:#e7e3d8;--muted:#9d9a8f;--accent:#79b0a8;--accent-ink:#a7d2cb;--ochre:#d6a850;--canvas:#f5f0e5;--line:#333840;--shadow:rgba(0,0,0,.4);}} #kfd *{box-sizing:border-box} #kfd .serif,#kfd h1,#kfd h2,#kfd h3{font-family:'Nanum Myeongjo','AppleMyungjo','Batang',serif;} #kfd .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 14px} #kfd h1{font-size:clamp(1.6rem,5.5vw,2.2rem);line-height:1.28;margin:0 0 16px;font-weight:700;color:var(--ink)} #kfd .lead{color:var(--muted);font-size:1rem;margin:0 0 8px} #kfd .screen{display:none} #kfd .screen.on{display:block;animation:kfdf .5s ease} @keyframes kfdf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #kfd .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 24px;box-shadow:0 10px 34px var(--shadow)} #kfd .btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:1rem;background:var(--accent);color:#fff;padding:14px 26px;border-radius:12px;transition:filter .15s,transform .05s} #kfd .btn:hover{filter:brightness(1.07)} #kfd .btn:active{transform:translateY(1px)} #kfd .btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)} #kfd .btn.wide{width:100%;margin-top:8px} #kfd .btn:focus-visible{outline:3px solid var(--ochre);outline-offset:2px} #kfd .note{font-size:.83rem;color:var(--muted);margin-top:18px} #kfd .divider{height:1px;background:var(--line);margin:22px 0} #kfd .prompt{font-family:'Nanum Myeongjo','AppleMyungjo',serif;font-size:1.4rem;text-align:center;margin:2px 0 4px;color:var(--ink)} #kfd .subprompt{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 16px} #kfd .canvas-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 20px var(--shadow)} #kfd canvas{display:block;width:100%;height:auto;background:var(--canvas);touch-action:none;cursor:crosshair} #kfd .tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px} #kfd .tool{appearance:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-family:inherit;font-size:.86rem;font-weight:600;padding:9px 13px;border-radius:10px;display:flex;align-items:center;gap:6px} #kfd .tool.active{border-color:var(--accent);color:var(--accent)} #kfd .sizes{display:flex;gap:6px;align-items:center;margin-left:auto} #kfd .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} #kfd .dot.active{border-color:var(--accent)} #kfd .dot i{display:block;border-radius:50%;background:var(--ink)} #kfd .timer{font-size:.8rem;color:var(--muted);text-align:center;margin-top:10px;font-variant-numeric:tabular-nums} #kfd .q{margin-bottom:22px} #kfd .q h3{font-size:1.05rem;margin:0 0 12px;font-family:inherit;font-weight:700;color:var(--ink)} #kfd .opts{display:flex;flex-wrap:wrap;gap:9px} #kfd .opt{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:600;padding:11px 16px;border-radius:11px;transition:.12s} #kfd .opt:hover{border-color:var(--accent)} #kfd .opt.sel{border-color:var(--accent);color:var(--accent-ink)} #kfd .rtype{font-family:'Nanum Myeongjo','AppleMyungjo',serif;font-size:clamp(1.4rem,4.5vw,1.9rem);color:var(--accent-ink);margin:6px 0 4px} #kfd .rsummary{color:var(--muted);margin:0 0 8px} #kfd .thumb{width:120px;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--canvas);float:right;margin:0 0 10px 14px} #kfd .dim{border-top:1px solid var(--line);padding:18px 0} #kfd .dim:first-of-type{border-top:none} #kfd .dim .k{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} #kfd .dim .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800} #kfd .dim .val{font-family:'Nanum Myeongjo',serif;font-size:1.12rem;font-weight:700} #kfd .dim p{margin:0;color:var(--ink)} #kfd .caveat{font-size:.8rem;color:var(--muted);border-left:3px solid var(--accent);padding:12px 14px;border-radius:0 8px 8px 0;margin-top:24px;background:rgba(63,115,108,.07)} #kfd .rbtns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap} #kfd .progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:22px} #kfd .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s} </style> <div class="progress" id="kfd-prog" style="display:none"><i></i></div> <section class="screen on" id="kfd-intro"> <div class="card"> <p class="eyebrow">그림심리검사 · KFD 동적 가족화</p> <h1>가족을 그려보세요.<br>마음속 관계가 보입니다.</h1> <p class="lead">정답은 없습니다. 잘 그릴 필요도 없습니다. <b>가족이 무언가를 함께 하고 있는 그림</b>을 지금 떠오르는 대로 편하게 그려주세요. 누구를 먼저·크게 그렸는지, 사람들 사이가 얼마나 가까운지를 바탕으로 가족 안에서의 당신의 마음을 비춰 드립니다.</p> <div class="divider"></div> <button class="btn wide" id="kfd-go1">시작하기</button> <p class="note">⏱ 소요 2–3분 · 그린 그림은 이 기기 밖으로 나가지 않습니다.</p> </div> </section> <section class="screen" id="kfd-draw"> <div class="card"> <p class="prompt">가족이 무언가를 하고 있는 그림을 그려보세요</p> <p class="subprompt">막대 사람이어도 좋아요. 가족들이 각자·함께 무언가 하는 모습으로.</p> <div class="canvas-frame"><canvas id="kfd-cv" width="1120" height="800"></canvas></div> <div class="tools"> <button class="tool active" id="kfd-pen">✏️ 펜</button> <button class="tool" id="kfd-era">지우개</button> <button class="tool" id="kfd-undo">↩︎ 되돌리기</button> <button class="tool" id="kfd-clr">전체 지우기</button> <div class="sizes" id="kfd-sizes"> <span class="dot active" data-size="3"><i style="width:5px;height:5px"></i></span> <span class="dot" data-size="6"><i style="width:9px;height:9px"></i></span> <span class="dot" data-size="11"><i style="width:15px;height:15px"></i></span> </div> </div> <p class="timer" id="kfd-timer">0:00</p> <button class="btn wide" id="kfd-done">다 그렸어요 →</button> </div> </section> <section class="screen" id="kfd-qs"><div class="card" id="kfd-qcard"></div></section> <section class="screen" id="kfd-result"><div class="card" id="kfd-rcard"></div></section> <script> (function(){ var R=document.getElementById('kfd'); function $(id){return document.getElementById(id);} function show(id){R.querySelectorAll('.screen').forEach(function(s){s.classList.remove('on')});$(id).classList.add('on');R.scrollIntoView({behavior:'smooth',block:'start'});} var prog=$('kfd-prog'),progBar=prog.querySelector('i'); function setProg(p){prog.style.display=p>0?'block':'none';progBar.style.width=p+'%';} var cv=$('kfd-cv'),ctx=cv.getContext('2d',{willReadFrequently:true}),W=cv.width,H=cv.height; var mode='pen',size=3,drawing=false,strokes=[],cur=null,startTime=null,timerInt=null; function paper(){ctx.fillStyle='#fcfaf3';ctx.fillRect(0,0,W,H);} paper(); function pos(e){var r=cv.getBoundingClientRect();var cx=(e.touches?e.touches[0].clientX:e.clientX),cy=(e.touches?e.touches[0].clientY:e.clientY);return{x:(cx-r.left)/r.width*W,y:(cy-r.top)/r.height*H};} function down(e){e.preventDefault();if(!startTime){startTime=Date.now();timerInt=setInterval(tick,1000);}drawing=true;var p=pos(e);cur={mode:mode,size:size,pts:[p]};ctx.beginPath();ctx.moveTo(p.x,p.y);} function move(e){if(!drawing)return;e.preventDefault();var p=pos(e);cur.pts.push(p);ctx.lineCap='round';ctx.lineJoin='round';ctx.lineWidth=cur.size*(cur.mode==='era'?4:1.6);ctx.strokeStyle=cur.mode==='era'?'#fcfaf3':'#33322e';ctx.lineTo(p.x,p.y);ctx.stroke();} function up(){if(!drawing)return;drawing=false;if(cur&&cur.pts.length)strokes.push(cur);cur=null;} cv.addEventListener('mousedown',down);cv.addEventListener('mousemove',move);window.addEventListener('mouseup',up); cv.addEventListener('touchstart',down,{passive:false});cv.addEventListener('touchmove',move,{passive:false});window.addEventListener('touchend',up); function repaint(){paper();strokes.forEach(function(s){ctx.beginPath();ctx.lineCap='round';ctx.lineJoin='round';ctx.lineWidth=s.size*(s.mode==='era'?4:1.6);ctx.strokeStyle=s.mode==='era'?'#fcfaf3':'#33322e';s.pts.forEach(function(p,i){i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y)});ctx.stroke();});} $('kfd-pen').onclick=function(){mode='pen';this.classList.add('active');$('kfd-era').classList.remove('active');}; $('kfd-era').onclick=function(){mode='era';this.classList.add('active');$('kfd-pen').classList.remove('active');}; $('kfd-undo').onclick=function(){strokes.pop();repaint();}; $('kfd-clr').onclick=function(){strokes=[];repaint();}; $('kfd-sizes').addEventListener('click',function(e){var d=e.target.closest('.dot');if(!d)return;size=+d.dataset.size;R.querySelectorAll('.dot').forEach(function(x){x.classList.remove('active')});d.classList.add('active');}); function tick(){var s=Math.floor((Date.now()-startTime)/1000);$('kfd-timer').textContent=Math.floor(s/60)+':'+String(s%60).padStart(2,'0');} $('kfd-go1').onclick=function(){show('kfd-draw');}; var metrics=null; function analyzeCanvas(){ var img=ctx.getImageData(0,0,W,H).data,minX=W,minY=H,maxX=0,maxY=0,ink=0,sx=0,sy=0; for(var y=0;y<H;y+=2){for(var x=0;x<W;x+=2){var i=(y*W+x)*4,r=img[i],g=img[i+1],b=img[i+2]; if(r<170&&g<170&&b<165){ink++;sx+=x;sy+=y;if(x<minX)minX=x;if(x>maxX)maxX=x;if(y<minY)minY=y;if(y>maxY)maxY=y;}}} if(ink<20)return null; return{sizeRatio:((maxX-minX)*(maxY-minY))/(W*H),cx:(sx/ink)/W,cy:(sy/ink)/H,strokes:strokes.filter(function(s){return s.mode==='pen'}).length,secs:startTime?Math.round((Date.now()-startTime)/1000):0}; } var QS=[ {id:'first',q:'가족 중 <b>누구를 가장 먼저</b> 그렸나요?',opts:[['me','나 자신'],['mother','엄마'],['father','아빠'],['sibling','형제·자매'],['other','다른 가족·반려동물']]}, {id:'omit',q:'그리려다 <b>빼거나 안 그린 사람</b>이 있나요?',opts:[['all','다 그렸다'],['self','나 자신을 안 그렸다'],['member','가족 중 누군가를 뺐다']]}, {id:'biggest',q:'가장 <b>크게</b> 그린 사람은 누구인가요?',opts:[['me','나 자신'],['mother','엄마'],['father','아빠'],['sibling','형제·자매'],['same','다들 비슷하다']]}, {id:'dist',q:'그림 속 인물들 <b>사이 거리</b>는 어떤가요?',opts:[['close','서로 가까이 붙어 있다'],['mid','적당히 떨어져 있다'],['far','멀찍이 떨어져 있다']]}, {id:'beside',q:'그림 속 <b>나는 누구 곁</b>에 있나요?',opts:[['mother','엄마 곁'],['father','아빠 곁'],['sibling','형제·자매 곁'],['pet','반려동물 곁'],['alone','혼자 떨어져 있다'],['noself','나를 안 그렸다']]}, {id:'act',q:'가족이 <b>무엇을 하고 있나요?</b>',opts:[['together','다 같이 한 가지 활동'],['pairs','두세 명씩 함께'],['apart','각자 따로따로']]}, {id:'wall',q:'인물 사이에 <b>선·벽·물건으로 칸막이</b>가 있나요?',opts:[['yes','있다'],['none','없다']]}, {id:'face',q:'그림 속 <b>표정</b>은 어떤가요?',opts:[['smile','다들 웃고 있다'],['neutral','무표정·담담하다'],['back','뒷모습·얼굴을 생략했다'],['mixed','사람마다 다르다']]}, {id:'mood',q:'그림 <b>전체 분위기</b>는?',opts:[['warm','따뜻하고 화목하다'],['busy','북적북적 활기차다'],['calm','조용하고 차분하다'],['tense','어딘가 서먹하다']]} ]; var answers={}; function renderQ(){ var c=$('kfd-qcard'); var html='<p class="eyebrow">거의 다 왔어요</p><h1 style="font-size:1.4rem">그린 가족 그림에 대해 알려주세요</h1><p class="lead" style="margin-bottom:20px">그림을 보면서 솔직하게 골라주세요.</p>'; QS.forEach(function(Q){html+='<div class="q" data-q="'+Q.id+'"><h3>'+Q.q+'</h3><div class="opts">'+Q.opts.map(function(o){return '<button class="opt" data-v="'+o[0]+'">'+o[1]+'</button>'}).join('')+'</div></div>';}); html+='<button class="btn wide" id="kfd-analyze" disabled style="opacity:.5">결과 보기</button>'; c.innerHTML=html; c.querySelectorAll('.q').forEach(function(qd){qd.querySelectorAll('.opt').forEach(function(b){b.onclick=function(){qd.querySelectorAll('.opt').forEach(function(x){x.classList.remove('sel')});b.classList.add('sel');answers[qd.dataset.q]=b.dataset.v;var ab=$('kfd-analyze');if(Object.keys(answers).length===QS.length){ab.disabled=false;ab.style.opacity=1;}};});}); $('kfd-analyze').onclick=function(){buildResult();show('kfd-result');setProg(100);}; } $('kfd-done').onclick=function(){metrics=analyzeCanvas();if(!metrics){alert('가족을 조금 더 그려주세요 🙂');return;}if(timerInt)clearInterval(timerInt);setProg(66);renderQ();show('kfd-qs');}; function pick(v,map){return map[v]||map._;} var PN={me:'나 자신',mother:'엄마',father:'아빠',sibling:'형제·자매',other:'다른 가족',pet:'반려동물',same:'모두',_:'그 사람'}; function pn(v){return PN[v]||'그 사람';} function buildResult(){ var m=metrics,a=answers,dims=[]; // 1) 전체 크기 · 에너지 (canvas) var sz=m.sizeRatio>0.34?'big':(m.sizeRatio<0.12?'small':'mid'); dims.push({tag:'전체 크기 · 에너지',val:pick(sz,{big:'큰 그림',mid:'알맞은 그림',small:'작은 그림'}),text:pick(sz,{big:'화면을 가득 채운 큰 가족 그림은 <b>가족을 향한 풍부한 에너지와 표현 욕구</b>를 보여줍니다. 가족이라는 주제가 당신 마음에서 크고 생생하게 자리 잡고 있다는 뜻이에요.',mid:'적당한 크기의 그림은 <b>안정되고 균형 잡힌 마음</b>을 보여줍니다. 가족을 과장하지도, 지나치게 작게 두지도 않고 편안하게 담아냈어요.',small:'작게 그린 가족 그림은 <b>조심스럽고 내향적인 표현 방식, 혹은 지금 에너지를 안으로 아끼는 상태</b>일 수 있어요. 담담하게 표현하는 것도 당신만의 결이에요.'})}); // 2) 첫 인물 dims.push({tag:'가장 먼저 그린 사람 · 마음의 무게중심',val:(a.first==='me'?'나 자신부터':pn(a.first)+'부터'),text:(a.first==='me'?'가장 먼저 <b>나 자신</b>을 그린 것은, 그림심리검사(KFD)에서는 보통 <b>자기 자신에 대한 관심과 존재감이 또렷하다</b>고 봐요. 가족 안에서 나의 자리를 분명히 느끼고 있는 편이에요.':'가장 먼저 '+pn(a.first)+'을(를) 그린 것은, KFD에서는 보통 <b>그 사람이 지금 당신에게 심리적으로 가장 가깝고 영향력이 큰 대상</b>이라고 봐요. 마음속에서 가장 크게 자리한 사람에게 자연스레 손이 먼저 간 거예요.')}); // 3) 가장 크게 그린 사람 dims.push({tag:'가장 크게 그린 사람 · 중요도',val:(a.biggest==='same'?'모두 비슷하게':pn(a.biggest)),text:(a.biggest==='same'?'모두 <b>비슷한 크기</b>로 그린 것은, 가족 구성원을 <b>고르게 소중히 여기는 균형 잡힌 시선</b>으로 볼 수 있어요. 누구 하나에 치우치지 않는 따뜻함이 느껴져요.':(a.biggest==='me'?'<b>나 자신</b>을 가장 크게 그린 것은, KFD에서는 보통 <b>가족 안에서 나의 존재감과 주도성이 크다</b>고 봐요. 자기 자신을 중심에 두는 건강한 마음일 수 있어요.':'<b>'+pn(a.biggest)+'</b>을(를) 가장 크게 그린 것은, KFD에서는 보통 <b>그 사람이 가족 안에서 심리적으로 가장 크고 중요한 존재</b>로 느껴진다고 봐요. 든든하게 기대는 대상이거나, 그만큼 영향이 큰 사람일 수 있어요.'))}); // 4) 거리 dims.push({tag:'인물 사이 거리 · 친밀감',val:pick(a.dist,{close:'가까이 붙어',mid:'적당한 거리',far:'멀리 떨어져'}),text:pick(a.dist,{close:'인물들이 <b>서로 가까이 붙어 있는</b> 그림은, KFD에서는 보통 <b>가족 사이의 정서적 친밀감과 유대</b>가 그림에 잘 담긴 것으로 봐요. 서로 가까이 두고 싶은 마음이 손끝에서 느껴져요.',mid:'<b>적당히 떨어진</b> 거리는 <b>친밀함과 각자의 공간이 함께 있는 건강한 관계</b>를 보여줘요. 붙어 있으면서도 서로를 존중하는 편안한 거리예요.',far:'인물들이 <b>멀찍이 떨어져 있는</b> 그림은, KFD에서는 <b>가족 사이의 심리적 거리감</b>을 나타낼 수 있다고 봐요. 다만 이건 오늘의 마음 상태일 수도 있고, 각자 독립적인 가족 분위기일 수도 있으니 무겁게 받아들이지 않아도 돼요.'})}); // 5) 나의 자리 (애착) if(a.beside==='noself'||a.omit==='self'){ dims.push({tag:'그림 속 나의 자리 · 소속감',val:'나를 그리지 않음',text:'그림에 <b>나 자신을 넣지 않은</b> 것을, KFD에서는 부드럽게 <b>지금은 가족이라는 그림을 한 발 떨어져 바라보고 있는 마음</b>으로 이해해요. 관찰자처럼 가족을 담아내는 사람도 많아요. 혹시 요즘 가족 속에서 내 자리가 조금 흐릿하게 느껴진다면, 그건 당신이 소중히 여기는 관계라서 더 예민하게 느끼는 것일지도 몰라요. 당신은 분명 그 그림 안에 있어요.'}); } else { dims.push({tag:'그림 속 나의 자리 · 애착',val:pick(a.beside,{mother:'엄마 곁',father:'아빠 곁',sibling:'형제·자매 곁',pet:'반려동물 곁',alone:'혼자 떨어져'}),text:pick(a.beside,{mother:'<b>엄마 곁</b>에 나를 둔 것은, KFD에서는 보통 <b>엄마에 대한 애착과 정서적 가까움</b>으로 봐요. 마음이 편안해지는 자리에 자연스레 자신을 둔 거예요.',father:'<b>아빠 곁</b>에 나를 둔 것은, KFD에서는 보통 <b>아빠에 대한 애착과 신뢰</b>로 봐요. 든든함을 느끼는 자리에 나를 둔 셈이에요.',sibling:'<b>형제·자매 곁</b>에 나를 둔 것은 <b>또래 같은 편안함과 유대</b>를 보여줘요. 함께 자란 사람 곁이 가장 마음 놓이는 자리인가 봐요.',pet:'<b>반려동물 곁</b>에 나를 둔 것은 <b>조건 없는 위로와 편안함을 주는 존재</b>에게 마음이 기대어 있음을 보여줘요. 그 곁이 당신에게 안식처예요.',alone:'나를 <b>혼자 떨어뜨려</b> 둔 것을, KFD에서는 부드럽게 <b>지금은 나만의 공간과 시간이 필요한 마음</b>으로 이해해요. 독립적인 성향일 수도 있고, 잠시 한 걸음 물러나 쉬고 싶은 신호일 수도 있어요.'})}); } // 6) 상호작용 dims.push({tag:'무엇을 하는가 · 상호작용',val:pick(a.act,{together:'다 함께',pairs:'두세 명씩',apart:'각자 따로'}),text:pick(a.act,{together:'가족이 <b>다 같이 한 가지 활동</b>을 하는 그림은, KFD에서 <b>가장 따뜻한 상호작용의 신호</b>로 봐요. 함께 어울리는 화목한 장면이 당신 마음에 담겨 있다는 뜻이에요.',pairs:'<b>두세 명씩 짝지어</b> 무언가 하는 그림은 <b>가족 안의 자연스러운 친밀 그룹</b>을 보여줘요. 가까운 사람끼리 이어진 편안한 관계가 느껴져요.',apart:'가족이 <b>각자 따로</b> 무언가 하는 그림을, KFD에서는 <b>서로 독립적인 가족 분위기</b>로 봐요. 각자의 세계를 존중하는 집일 수도 있고, 요즘 함께하는 시간이 그리운 마음일 수도 있어요.'})}); // 7) 칸막이 (only if yes) if(a.wall==='yes'){ dims.push({tag:'칸막이 · 구획화',val:'선·벽으로 나뉨',text:'인물 사이에 <b>선이나 벽, 물건으로 칸막이</b>를 둔 것을, KFD에서는 <b>구획화</b>라고 부르며 <b>가족 사이에 두고 싶은 심리적 거리나 각자의 경계</b>로 부드럽게 이해해요. 이건 나쁜 게 아니라, 서로의 공간을 존중하고 싶은 마음일 수도 있어요. 다만 요즘 누군가와 살짝 벽이 느껴진다면, 작은 대화 한 마디가 그 선을 지우는 시작이 될 수 있어요.'}); } // 8) 표정 (정서) dims.push({tag:'표정 · 정서 분위기',val:pick(a.face,{smile:'웃는 얼굴',neutral:'담담한 표정',back:'뒷모습·얼굴 생략',mixed:'제각각'}),text:pick(a.face,{smile:'다들 <b>웃고 있는</b> 그림은, KFD에서 <b>가족을 향한 밝고 따뜻한 정서</b>가 그대로 담긴 것으로 봐요. 마음속 가족의 표정이 환하다는 건 참 다행스러운 신호예요.',neutral:'<b>무표정·담담한</b> 얼굴은 감정을 과장하지 않는 <b>차분하고 담백한 정서</b>를 보여줘요. 조용한 안정감으로 볼 수 있어요.',back:'<b>뒷모습이나 얼굴을 생략</b>한 것을, KFD에서는 부드럽게 <b>지금은 감정을 살짝 아껴 두고 싶은 마음</b>으로 이해해요. 표정을 그리는 게 쑥스럽거나, 그날의 마음이 조용해서일 수도 있으니 걱정하지 않아도 돼요.',mixed:'<b>사람마다 표정이 다른</b> 그림은 <b>가족을 한 사람 한 사람 다르게 느끼고 있다</b>는 섬세한 시선을 보여줘요. 관계를 세밀하게 바라보는 사람이에요.'})}); // 9) 전체 분위기 dims.push({tag:'전체 분위기 · 오늘의 마음',val:pick(a.mood,{warm:'따뜻함',busy:'활기',calm:'차분함',tense:'서먹함'}),text:pick(a.mood,{warm:'<b>따뜻하고 화목한</b> 분위기는 <b>가족을 안전하고 편안한 울타리로 느끼고 있다</b>는 신호예요. 마음의 바탕에 온기가 흐르고 있어요.',busy:'<b>북적북적 활기찬</b> 분위기는 <b>생기 넘치고 함께하는 즐거움</b>을 소중히 여기는 마음을 보여줘요. 사람 사이의 에너지를 좋아하는 사람이에요.',calm:'<b>조용하고 차분한</b> 분위기는 <b>고요함 속의 안정감</b>을 보여줘요. 요란하지 않아도 서로 곁에 있는 것만으로 편안한 관계일 수 있어요.',tense:'<b>어딘가 서먹한</b> 분위기를, KFD에서는 부드럽게 <b>오늘의 마음이 조금 무겁거나, 관계에서 채우고 싶은 무언가가 있는 상태</b>로 이해해요. 그림은 그날의 기분을 비추는 거울일 뿐이니, 이건 언제든 달라질 수 있는 오늘의 한 장면이에요.'})}); // 헤드라인 var warmSignals=(a.act==='together'?1:0)+(a.dist==='close'?1:0)+(a.face==='smile'?1:0)+(a.mood==='warm'||a.mood==='busy'?1:0); var coolSignals=(a.act==='apart'?1:0)+(a.dist==='far'?1:0)+(a.wall==='yes'?1:0)+(a.omit==='self'?1:0)+(a.mood==='tense'?1:0)+(a.beside==='alone'?1:0); var head=warmSignals>=3?'서로 가까이 어우러지는, 따뜻한 가족':(coolSignals>=3?'각자의 자리에서 조용히 이어진, 담담한 가족':((a.act==='together')?'함께 어울리는, 다정한 한 장면':((a.beside==='mother'||a.beside==='father'||a.beside==='sibling')?'기대고 싶은 사람 곁에 선, 나의 가족':'지금의 당신을 닮은, 고요한 가족'))); var thumb=cv.toDataURL('image/png'); var html='<p class="eyebrow">KFD 동적 가족화 · 심리 해석</p><img class="thumb" src="'+thumb+'" alt="내가 그린 가족"><div class="rtype">'+head+'</div><p class="rsummary">당신이 그린 가족 그림이 이렇게 말하고 있습니다.</p><div style="clear:both"></div>'; dims.forEach(function(d){html+='<div class="dim"><div class="k"><span class="tag">'+d.tag+'</span><span class="val">'+d.val+'</span></div><p>'+d.text+'</p></div>';}); html+='<div class="dim"><div class="k"><span class="tag">마지막으로</span><span class="val">당신에게</span></div><p>가족을 그린다는 건 마음속 가장 가까운 사람들을 종이 위에 불러오는 일이에요. 오늘 당신이 그린 이 한 장면 안에는, 그 사람들을 아끼는 마음이 분명히 담겨 있어요. 어떤 그림이 나왔든, 그 마음만으로 충분히 따뜻한 가족이에요. 🌷</p></div>'; html+='<div class="caveat">이 검사는 자기 이해를 돕기 위한 것으로, 임상 진단이 아닙니다. 그림심리검사(KFD)의 해석 방향을 부드럽게 참고한 <b>재미로 보는 테스트</b>예요. 그림은 그날의 기분과 상황에 따라 달라지니, 오늘의 당신을 비추는 거울 정도로 가볍게 받아들여 주세요.</div>'; html+='<div class="rbtns"><button class="btn" id="kfd-again">다시 그리기</button><button class="btn ghost" id="kfd-save">그림 저장</button></div>'; $('kfd-rcard').innerHTML=html; $('kfd-again').onclick=function(){strokes=[];repaint();answers={};startTime=null;metrics=null;$('kfd-timer').textContent='0:00';setProg(0);show('kfd-draw');}; $('kfd-save').onclick=function(){var el=document.createElement('a');el.href=thumb;el.download='my-family.png';el.click();}; } })(); </script> </div>