https://planfully.ai.kr/tags/%EC%A7%91-%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-krSat, 25 Jul 2026 00:00:00 +0900https://planfully.ai.kr/tests/house-drawing/Sat, 25 Jul 2026 00:00:00 +0900https://planfully.ai.kr/tests/house-drawing/<p>사람은 &lsquo;집&rsquo;을 그릴 때 자기도 모르게 내면의 안정감, 가족과 관계에 대한 태도, 세상을 향한 마음의 문을 종이 위에 옮깁니다. 임상에서 쓰이는 <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,strokes:strokes.filter(function(s){return s.mode==='pen'}).length,secs:startTime?Math.round((Date.now()-startTime)/1000):0}; } var QS=[ {id:'door',q:'집에 <b>문</b>을 그렸나요?',opts:[['big','크게 그렸다'],['normal','보통 크기'],['small','작게 그렸다'],['none','안 그렸다']]}, {id:'window',q:'<b>창문</b>은 몇 개 그렸나요?',opts:[['many','3개 이상'],['few','1–2개'],['none','없다']]}, {id:'chimney',q:'<b>굴뚝이나 연기</b>가 있나요?',opts:[['smoke','굴뚝+연기'],['chim','굴뚝만'],['none','없다']]}, {id:'path',q:'집으로 향하는 <b>길, 또는 울타리·담</b>이 있나요?',opts:[['path','길이 있다'],['fence','울타리·담이 있다'],['both','둘 다'],['none','없다']]}, {id:'extra',q:'집 주변에 <b>해·나무·꽃·구름</b> 같은 걸 그렸나요?',opts:[['many','여러 개'],['some','한두 개'],['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.38?'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.door,{big:'열린 문',normal:'적당한 문',small:'작은 문',none:'문 없음'}),text:pick(a.door,{big:'크게 그린 문은 <b>사람과 이어지고 싶은 강한 욕구</b>를 보여줍니다. 관계에 개방적이지만, 때로 인정과 애정에 대한 갈망이 클 수 있습니다.',normal:'적당한 문은 <b>건강한 소통 태도</b>입니다. 필요할 때 마음을 열고, 지킬 때는 지키는 균형 잡힌 대인관계를 맺습니다.',small:'작은 문은 <b>수줍음과 신중함</b>을 나타냅니다. 마음을 여는 데 시간이 필요하며, 가까운 소수와 깊게 관계 맺는 편입니다.',none:'문을 그리지 않은 것은 <b>심리적 거리두기, 자기 보호</b>의 신호입니다. 지금은 타인의 접근에 다소 경계하거나, 혼자만의 공간이 필요한 시기일 수 있습니다.',_:'—'})}); dims.push({tag:'창문 · 개방성',val:pick(a.window,{many:'많은 창',few:'적당한 창',none:'창 없음'}),text:pick(a.window,{many:'창문이 많은 집은 <b>사교적이고 세상과 교류하고 싶은 마음</b>이 큽니다. 호기심이 많고 여러 사람과 어울리길 즐깁니다.',few:'한두 개의 창문은 <b>적절한 사회성과 정서 표현</b>을 뜻합니다. 자신을 열되 과하지 않게 조율할 줄 압니다.',none:'창문 없는 집은 <b>정서 표현의 절제, 내면 보호</b>를 시사합니다. 감정을 안으로 갈무리하는 편이며, 지금 마음을 닫아두고 싶은 상태일 수 있습니다.',_:'—'})}); dims.push({tag:'굴뚝·연기 · 정서',val:pick(a.chimney,{smoke:'따뜻한 연기',chim:'굴뚝',none:'없음'}),text:pick(a.chimney,{smoke:'피어오르는 연기는 <b>가정의 온기와 풍부한 정서적 에너지</b>를 상징합니다. 마음이 따뜻하고 애정을 소중히 여기지만, 연기가 짙다면 내면의 긴장이나 채우고 싶은 갈망일 수도 있습니다.',chim:'굴뚝은 있으나 연기가 없는 것은 <b>따뜻함을 지향하되 표현은 절제</b>하는 태도입니다. 정서적 안정을 갖추고 있습니다.',none:'굴뚝·연기가 없는 집은 <b>담백하고 현실적인 정서</b>를 뜻합니다. 감정을 과장하지 않으며, 차분함을 유지합니다.',_:'—'})}); var detail=(a.path==='both'||a.extra==='many'||m.strokes>=14)?'rich':((a.path==='none'&&a.extra==='none'&&m.strokes<7)?'sparse':'balanced'); var boundary=(a.path==='fence'||a.path==='both')?'guarded':(a.path==='path'?'open':'neutral'); dims.push({tag:'세부 · 태도',val:pick(detail,{rich:'섬세한 그림',sparse:'간결한 그림',balanced:'균형 잡힌 그림'}),text:pick(detail,{rich:'길·울타리·주변 요소까지 담은 섬세한 그림은 <b>꼼꼼하고 신중하며 정서가 풍부한 성향</b>입니다. 완벽을 기하려는 마음이 강하고, 때로 그만큼 걱정도 많습니다.',sparse:'집만 간결하게 그린 것은 <b>대범하고 직관적이며 핵심을 보는 성향</b>입니다. 군더더기를 싫어하고 효율을 중시합니다.',balanced:'필요한 만큼 담아낸 그림은 <b>현실과 정서의 균형</b>을 보여줍니다. 상황에 따라 유연하게 자신을 조절합니다.'})+(boundary==='guarded'?' 담·울타리를 그린 것은 <b>자기 영역을 지키려는 방어적 태도</b>가 있음을 덧붙여 말해줍니다.':(boundary==='open'?' 집으로 난 길은 <b>관계에 대한 개방과 다가섬</b>을 보여줍니다.':''))}); var head=m.sizeRatio>0.30?'넓게 자리 잡은, 당당한 마음의 집':((a.door==='none'||a.window==='none')?'조용히 자신을 지키는, 사색의 집':((a.chimney==='smoke'||a.window==='many')?'온기와 교류가 흐르는, 따뜻한 집':((posv==='center'&&sz==='mid')?'균형과 안정 위에 선, 단단한 집':'지금의 당신을 닮은, 고요한 집'))); 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-house.png';el.click();}; } })(); </script> </div>