https://planfully.ai.kr/tags/%EB%82%98%EB%AC%B4-%EA%B7%B8%EB%A6%BC-%EC%8B%AC%EB%A6%AC%ED%85%8C%EC%8A%A4%ED%8A%B8/Recent content in 나무 그림 심리테스트 on 계획대로 느긋하게Hugo -- gohugo.ioko-krMon, 27 Jul 2026 00:00:00 +0900https://planfully.ai.kr/tests/tree-drawing/Mon, 27 Jul 2026 00:00:00 +0900https://planfully.ai.kr/tests/tree-drawing/<p>사람은 &lsquo;나무&rsquo;를 그릴 때 자기도 모르게 <strong>무의식 깊은 곳의 자아상</strong>을 종이에 옮깁니다. 집이 가족과 환경을 비춘다면, 나무는 <strong>생명 에너지·자아의 단단함·성장의 방향, 그리고 지나온 상처</strong>까지 드러내죠. 임상에서 쓰이는 <strong>HTP 그림검사</strong> 방식으로, 지금 떠오르는 대로 한 그루의 나무를 그려보세요. 잘 그릴 필요는 전혀 없어요. 🌳</p> <div id="htp"> <style> #htp{--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){#htp{--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);}} #htp *{box-sizing:border-box} #htp .serif,#htp h1,#htp h2,#htp h3{font-family:'Nanum Myeongjo','AppleMyungjo','Batang',serif;} #htp .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 14px} #htp h1{font-size:clamp(1.6rem,5.5vw,2.2rem);line-height:1.28;margin:0 0 16px;font-weight:700;color:var(--ink)} #htp .lead{color:var(--muted);font-size:1rem;margin:0 0 8px} #htp .screen{display:none} #htp .screen.on{display:block;animation:htpf .5s ease} @keyframes htpf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #htp .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 24px;box-shadow:0 10px 34px var(--shadow)} #htp .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} #htp .btn:hover{filter:brightness(1.07)} #htp .btn:active{transform:translateY(1px)} #htp .btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)} #htp .btn.wide{width:100%;margin-top:8px} #htp .btn:focus-visible{outline:3px solid var(--ochre);outline-offset:2px} #htp .note{font-size:.83rem;color:var(--muted);margin-top:18px} #htp .divider{height:1px;background:var(--line);margin:22px 0} #htp .prompt{font-family:'Nanum Myeongjo','AppleMyungjo',serif;font-size:1.4rem;text-align:center;margin:2px 0 4px;color:var(--ink)} #htp .subprompt{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 16px} #htp .canvas-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 20px var(--shadow)} #htp canvas{display:block;width:100%;height:auto;background:var(--canvas);touch-action:none;cursor:crosshair} #htp .tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px} #htp .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} #htp .tool.active{border-color:var(--accent);color:var(--accent)} #htp .sizes{display:flex;gap:6px;align-items:center;margin-left:auto} #htp .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} #htp .dot.active{border-color:var(--accent)} #htp .dot i{display:block;border-radius:50%;background:var(--ink)} #htp .timer{font-size:.8rem;color:var(--muted);text-align:center;margin-top:10px;font-variant-numeric:tabular-nums} #htp .q{margin-bottom:22px} #htp .q h3{font-size:1.05rem;margin:0 0 12px;font-family:inherit;font-weight:700;color:var(--ink)} #htp .opts{display:flex;flex-wrap:wrap;gap:9px} #htp .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} #htp .opt:hover{border-color:var(--accent)} #htp .opt.sel{border-color:var(--accent);color:var(--accent-ink)} #htp .rtype{font-family:'Nanum Myeongjo','AppleMyungjo',serif;font-size:clamp(1.4rem,4.5vw,1.9rem);color:var(--accent-ink);margin:6px 0 4px} #htp .rsummary{color:var(--muted);margin:0 0 8px} #htp .thumb{width:120px;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--canvas);float:right;margin:0 0 10px 14px} #htp .dim{border-top:1px solid var(--line);padding:18px 0} #htp .dim:first-of-type{border-top:none} #htp .dim .k{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} #htp .dim .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800} #htp .dim .val{font-family:'Nanum Myeongjo',serif;font-size:1.12rem;font-weight:700} #htp .dim p{margin:0;color:var(--ink)} #htp .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)} #htp .rbtns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap} #htp .progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:22px} #htp .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s} </style> <div class="progress" id="htp-prog" style="display:none"><i></i></div> <section class="screen on" id="htp-intro"> <div class="card"> <p class="eyebrow">그림심리검사 · HTP</p> <h1>나무를 그려보세요.<br>당신의 무의식이 보입니다.</h1> <p class="lead">정답은 없습니다. 잘 그릴 필요도 없습니다. 지금 떠오르는 대로 편하게 한 그루의 나무를 그려주세요. 줄기·가지·뿌리·잎을 바탕으로 당신의 자아상과 마음의 에너지를 해석해 드립니다.</p> <div class="divider"></div> <button class="btn wide" id="htp-go1">시작하기</button> <p class="note">⏱ 소요 2–3분 · 그린 그림은 이 기기 밖으로 나가지 않습니다.</p> </div> </section> <section class="screen" id="htp-draw"> <div class="card"> <p class="prompt">나무를 그려보세요</p> <p class="subprompt">떠오르는 대로 자유롭게. 줄기·가지·뿌리·잎 등 원하는 만큼.</p> <div class="canvas-frame"><canvas id="htp-cv" width="1120" height="800"></canvas></div> <div class="tools"> <button class="tool active" id="htp-pen">✏️ 펜</button> <button class="tool" id="htp-era">지우개</button> <button class="tool" id="htp-undo">↩︎ 되돌리기</button> <button class="tool" id="htp-clr">전체 지우기</button> <div class="sizes" id="htp-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="htp-timer">0:00</p> <button class="btn wide" id="htp-done">다 그렸어요 →</button> </div> </section> <section class="screen" id="htp-qs"><div class="card" id="htp-qcard"></div></section> <section class="screen" id="htp-result"><div class="card" id="htp-rcard"></div></section> <script> (function(){ var R=document.getElementById('htp'); 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=$('htp-prog'),progBar=prog.querySelector('i'); function setProg(p){prog.style.display=p>0?'block':'none';progBar.style.width=p+'%';} var cv=$('htp-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();});} $('htp-pen').onclick=function(){mode='pen';this.classList.add('active');$('htp-era').classList.remove('active');}; $('htp-era').onclick=function(){mode='era';this.classList.add('active');$('htp-pen').classList.remove('active');}; $('htp-undo').onclick=function(){strokes.pop();repaint();}; $('htp-clr').onclick=function(){strokes=[];repaint();}; $('htp-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);$('htp-timer').textContent=Math.floor(s/60)+':'+String(s%60).padStart(2,'0');} $('htp-go1').onclick=function(){show('htp-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,aspect:(maxY-minY)/Math.max(1,(maxX-minX)),strokes:strokes.filter(function(s){return s.mode==='pen'}).length,secs:startTime?Math.round((Date.now()-startTime)/1000):0}; } var QS=[ {id:'trunk',q:'<b>줄기(기둥)</b>는 어떻게 그렸나요?',opts:[['thick','굵고 튼튼하게'],['normal','보통 굵기'],['thin','가늘게'],['none','거의 안 그림']]}, {id:'branch',q:'<b>가지</b>는 어떤 모양인가요?',opts:[['up','위로 쭉 뻗음'],['wide','옆으로 넓게 퍼짐'],['down','아래로 축 처짐'],['none','가지 없음 · 잘림']]}, {id:'crown',q:'<b>잎·수관(나무 윗부분)</b>은?',opts:[['full','풍성하게'],['outline','윤곽만'],['bare','앙상하다']]}, {id:'root',q:'<b>뿌리</b>를 그렸나요?',opts:[['strong','뚜렷하게 그림'],['light','살짝 그림'],['ground','땅선만'],['none','안 그림']]}, {id:'fruit',q:'<b>열매·꽃</b>이 있나요?',opts:[['yes','있다'],['none','없다']]}, {id:'extra',q:'나무 위나 주변에 <b>새·둥지·해</b> 같은 걸 그렸나요?',opts:[['nest','둥지'],['bird','새'],['sun','해'],['other','다른 것'],['none','나무만']]}, {id:'scar',q:'줄기에 <b>옹이·상처·구멍</b>을 그렸나요?',opts:[['yes','있다'],['none','없다']]} ]; var answers={}; function renderQ(){ var c=$('htp-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="htp-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=$('htp-analyze');if(Object.keys(answers).length===QS.length){ab.disabled=false;ab.style.opacity=1;}};});}); $('htp-analyze').onclick=function(){buildResult();show('htp-result');setProg(100);}; } $('htp-done').onclick=function(){metrics=analyzeCanvas();if(!metrics){alert('나무를 조금 더 그려주세요 🙂');return;}if(timerInt)clearInterval(timerInt);setProg(66);renderQ();show('htp-qs');}; function pick(v,map){return map[v]||map._;} function buildResult(){ var m=metrics,a=answers,dims=[]; var sz=m.sizeRatio>0.30?'big':(m.sizeRatio<0.10?'small':'mid'); dims.push({tag:'크기 · 에너지',val:pick(sz,{big:'큰 나무',mid:'알맞은 나무',small:'작은 나무'}),text:pick(sz,{big:'화면을 가득 채운 큰 나무는 <b>넘치는 생명 에너지와 강한 자기 존재감</b>을 나타냅니다. 활력이 크고 세상에 자신을 드러내려는 힘이 강하지만, 때로는 그 에너지를 담아낼 방향이 필요하기도 합니다.',mid:'적당한 크기의 나무는 <b>안정된 자아상과 균형 잡힌 에너지</b>를 보여줍니다. 스스로를 과대·과소평가하지 않고 현실 속에 편안히 뿌리내린 상태입니다.',small:'작게 그린 나무는 <b>조심스럽고 내향적인 성향, 겸손함</b>을 시사합니다. 지금은 에너지를 안으로 아끼고 있거나, 다소 위축되어 스스로를 작게 느끼고 있을 수 있습니다.'})}); var posv=m.cy<0.40?'top':(m.cy>0.66?'bottom':(m.cx<0.38?'left':(m.cx>0.62?'right':'center'))); dims.push({tag:'위치 · 지향',val:pick(posv,{top:'위쪽',bottom:'아래쪽',left:'왼쪽',right:'오른쪽',center:'중앙'}),text:pick(posv,{top:'종이 위쪽에 자리한 나무는 <b>이상과 상상, 높은 목표</b>를 향합니다. 현실보다 꿈과 가능성에 마음이 기울어 있는 편입니다.',bottom:'아래쪽에 놓인 나무는 <b>현실 중심적이고 안정 지향적</b>입니다. 땅에 발을 딛고 실용을 챙기지만, 때로는 안정을 향한 갈망이 크기도 합니다.',left:'왼쪽에 치우친 나무는 <b>과거·내면·감정</b>에 무게가 실립니다. 지난 경험과 자신의 내적 세계를 소중히 여깁니다.',right:'오른쪽에 놓인 나무는 <b>미래·행동·타인</b>을 향합니다. 앞으로 나아가려는 의지와 외부에 대한 관심이 큰 편입니다.',center:'한가운데 자리한 나무는 <b>안정된 자기 중심</b>을 뜻합니다. 마음의 균형이 잘 잡혀 있고 현재에 발을 딛고 있습니다.'})}); dims.push({tag:'줄기 · 자아강도',val:pick(a.trunk,{thick:'굵은 줄기',normal:'적당한 줄기',thin:'가는 줄기',none:'약한 줄기'}),text:pick(a.trunk,{thick:'굵고 튼튼한 줄기는 <b>단단한 자아와 강한 생명력</b>을 상징합니다. 심리적으로 안정되어 있고, 어려움 속에서도 자신을 지탱하는 힘이 큽니다.',normal:'적당한 줄기는 <b>건강하고 균형 잡힌 자아강도</b>를 보여줍니다. 자신을 믿되 과하지 않은, 단단하면서도 유연한 마음입니다.',thin:'가는 줄기는 <b>섬세하고 예민한 자아</b>를 나타냅니다. 감수성이 풍부한 대신 지금은 다소 지쳐 있거나 스스로를 여리게 느낄 수 있어요. 자신을 돌볼 시간이 필요한 시기입니다.',none:'줄기를 뚜렷이 그리지 않은 것은 <b>자아의 경계가 흐릿하거나 에너지가 낮은 상태</b>일 수 있습니다. 지금의 나를 부드럽게 다독여 주세요.',_:'—'})}); dims.push({tag:'가지 · 성취와 관계',val:pick(a.branch,{up:'위로 뻗은 가지',wide:'넓게 퍼진 가지',down:'처진 가지',none:'가지 없음'}),text:pick(a.branch,{up:'위로 쭉 뻗은 가지는 <b>성취욕과 낙관, 앞으로 나아가려는 의지</b>를 보여줍니다. 목표를 향해 손을 뻗는 적극적인 에너지가 있습니다.',wide:'옆으로 넓게 퍼진 가지는 <b>사교성과 풍부한 대인관계</b>를 뜻합니다. 여러 사람·환경과 활발히 교류하며 그 속에서 만족을 얻습니다.',down:'아래로 처진 가지는 <b>지금의 피로감이나 무거운 마음</b>을 비출 수 있습니다. 잠시 힘을 빼고 쉬어가도 괜찮다는 신호로 받아들여 보세요.',none:'가지를 그리지 않았거나 잘린 형태는 <b>환경과의 상호작용을 아끼는 지금의 상태</b>를 시사합니다. 에너지를 안으로 모으며 스스로를 보호하고 있을 수 있습니다.',_:'—'})}); dims.push({tag:'뿌리 · 안정감',val:pick(a.root,{strong:'뚜렷한 뿌리',light:'옅은 뿌리',ground:'땅선',none:'뿌리 없음'}),text:pick(a.root,{strong:'뚜렷하게 그린 뿌리는 <b>안정에 대한 강한 욕구와 현실에 단단히 발 딛으려는 마음</b>을 보여줍니다. 기반을 중시하며, 때로는 안정을 향한 갈망이 그만큼 크다는 뜻이기도 합니다.',light:'살짝 그린 뿌리는 <b>현실 감각과 편안한 안정감</b>이 균형을 이룬 상태입니다. 땅에 닿아 있되 얽매이지 않습니다.',ground:'땅선만 그린 것은 <b>현실에 발을 딛되 담백한 태도</b>입니다. 기본적인 안정감 위에 서 있습니다.',none:'뿌리를 그리지 않은 것은 성인에게 흔한 일이며, <b>자유롭고 현재 지향적인 마음</b>일 수 있습니다. 다만 지금 어딘가 붕 뜬 느낌이 든다면 나만의 안정 기반을 챙겨보세요.',_:'—'})}); var mind=(a.crown==='full')?'rich':(a.crown==='bare'?'spare':'balanced'); dims.push({tag:'수관·잎 · 사고와 마음',val:pick(mind,{rich:'풍성한 수관',balanced:'차분한 수관',spare:'앙상한 수관'}),text:pick(mind,{rich:'풍성한 잎과 수관은 <b>활발한 상상력과 풍부한 정서, 지적 에너지</b>를 상징합니다. 생각이 많고 내면세계가 다채로운 사람입니다.'+(a.fruit==='yes'?' 열매·꽃까지 그린 것은 <b>성취욕과 희망, 결실을 향한 마음</b>을 더해줍니다.':''),balanced:'윤곽으로 정돈된 수관은 <b>차분하고 현실적인 사고</b>를 보여줍니다. 감정과 이성의 균형을 잘 잡습니다.'+(a.fruit==='yes'?' 열매·꽃은 <b>결실과 희망을 향한 소망</b>을 담고 있습니다.':''),spare:'앙상한 수관은 <b>지금의 에너지 소진이나 공허함</b>을 비출 수 있습니다. 마음의 자양분을 채우며 스스로를 돌볼 시기예요.'+(a.fruit==='yes'?' 그래도 열매·꽃을 그린 것은 <b>회복과 희망의 씨앗</b>이 남아 있다는 신호입니다.':'')})}); var extraMap={nest:{v:'둥지',t:'나무 위 둥지는 <b>안정과 소속에 대한 욕구, 보호받고 싶은 마음, 모성적 따뜻함</b>을 상징합니다. 기댈 곳과 가족 같은 울타리를 소중히 여기는 마음이 담겨 있어요.'},bird:{v:'새',t:'나무의 새는 <b>자유로움과 어딘가로 향하고 싶은 마음</b>을 나타냅니다. 지금의 자리를 넘어 더 넓은 곳을 꿈꾸거나, 훌쩍 떠나 쉬고 싶은 바람이 있을 수 있어요.'},sun:{v:'해',t:'해를 함께 그린 것은 <b>따뜻함·에너지, 인정받고 싶은 마음, 든든한 존재에 대한 바람</b>을 뜻합니다. 밝고 긍정적인 지향이 느껴집니다.'},other:{v:'추가 요소',t:'나무 곁에 무언가를 더 그린 것은 <b>풍부한 상상력과 정서적 표현 욕구</b>를 보여줍니다. 세상을 이야기로 채우는 사람이에요.'}}; if(a.extra&&a.extra!=='none'){dims.push({tag:'주변 요소 · 마음의 바람',val:extraMap[a.extra].v,text:extraMap[a.extra].t});} var detail=(m.strokes>=16||(a.extra!=='none'&&a.fruit==='yes'))?'rich':(m.strokes<7?'sparse':'balanced'); dims.push({tag:'획·세부 · 태도',val:pick(detail,{rich:'섬세한 그림',sparse:'간결한 그림',balanced:'균형 잡힌 그림'}),text:pick(detail,{rich:'선을 여러 번 그어 세밀하게 표현한 그림은 <b>꼼꼼하고 신중하며 정서가 풍부한 성향</b>입니다. 공들이는 만큼 마음도 세심하게 움직입니다.',sparse:'몇 번의 선으로 간결하게 그린 것은 <b>대범하고 직관적이며 핵심을 보는 성향</b>입니다. 군더더기 없이 본질을 향합니다.',balanced:'필요한 만큼 담아낸 그림은 <b>현실과 정서의 균형</b>을 보여줍니다. 상황에 따라 유연하게 자신을 조절합니다.'})}); if(a.scar==='yes'){dims.push({tag:'옹이·상처 · 지나온 마음',val:'옹이가 있는 나무',text:'줄기의 옹이나 상처는 임상적으로 <b>지나온 삶의 아픈 경험, 마음에 남은 흔적</b>과 연결됩니다. 하지만 옹이는 나무가 상처를 스스로 감싸며 자란 <b>회복과 성장의 증거</b>이기도 합니다. 당신이 겪어온 시간이 지금의 단단함을 만들었어요.'});} var vital=(a.trunk==='thick'&&(a.branch==='up'||a.branch==='wide')&&mind!=='spare'); var tired=(a.branch==='down'||mind==='spare'||a.trunk==='thin'||a.trunk==='none'); var head=vital?'하늘을 향해 뻗는, 생명력 넘치는 나무':(tired?'잠시 쉬어가는, 깊이 뿌리내린 나무':(a.root==='strong'?'단단히 땅을 딛고 선, 안정의 나무':((a.branch==='wide')?'여러 갈래로 어우러지는, 넉넉한 나무':'지금의 당신을 닮은, 고요한 나무'))); var thumb=cv.toDataURL('image/png'); var html='<p class="eyebrow">HTP 그림 심리 해석</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="caveat">이 검사는 자기 이해를 돕기 위한 것으로, 임상 진단이 아닙니다. 그림은 그날의 기분과 상황에 따라 달라집니다. 오늘의 당신을 비추는 거울 정도로 가볍게 받아들여 주세요. 🌱</div>'; html+='<div class="rbtns"><button class="btn" id="htp-again">다시 그리기</button><button class="btn ghost" id="htp-save">그림 저장</button></div>'; $('htp-rcard').innerHTML=html; $('htp-again').onclick=function(){strokes=[];repaint();answers={};startTime=null;metrics=null;$('htp-timer').textContent='0:00';setProg(0);show('htp-draw');}; $('htp-save').onclick=function(){var el=document.createElement('a');el.href=thumb;el.download='my-tree.png';el.click();}; } })(); </script> </div>