techsolayw 님의 블로그 https://livinghope7.tistory.com/ techsolayw 님의 블로그 입니다. ko Wed, 10 Jun 2026 22:53:22 +0900 TISTORY 100 techsolayw techsolayw 님의 블로그 https://tistory1.daumcdn.net/tistory/8319845/attach/7f52058974c94cbd8e14d0a09dc3112a https://livinghope7.tistory.com UP DOWN 챌린지 게임 https://livinghope7.tistory.com/91 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UP DOWN 챌린지</title> <style> @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); *{ margin:0; padding:0; box-sizing:border-box; font-family:'Pretendard',sans-serif; } body{ background:#ffffff; color:#1e293b; min-height:100vh; padding:20px; } .container{ max-width:700px; margin:0 auto; } .card{ background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:25px; box-shadow:0 10px 30px rgba(0,0,0,.06); } h1{ text-align:center; margin-bottom:25px; font-size:2rem; } .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; } .stat{ background:#f8fafc; border-radius:14px; padding:15px; text-align:center; } .label{ color:#64748b; font-size:13px; } .value{ font-size:24px; font-weight:700; margin-top:5px; } .input-wrap{ display:flex; gap:10px; margin-bottom:20px; } input{ flex:1; height:55px; border:2px solid #cbd5e1; border-radius:12px; text-align:center; font-size:20px; } button{ border:none; border-radius:12px; cursor:pointer; font-weight:700; transition:.2s; } button:hover{ transform:translateY(-2px); } .guess-btn{ background:#2563eb; color:white; width:140px; } .reset-btn{ width:100%; margin-top:15px; height:50px; background:#16a34a; color:white; } .result{ text-align:center; padding:25px; background:#f8fafc; border-radius:16px; font-size:30px; font-weight:800; margin-bottom:20px; min-height:90px; display:flex; justify-content:center; align-items:center; } .history{ border:1px solid #e2e8f0; border-radius:16px; padding:15px; } .history h3{ margin-bottom:10px; } .logs{ max-height:250px; overflow-y:auto; } .logs div{ padding:8px 0; border-bottom:1px solid #f1f5f9; } .win{ animation:pulse .8s infinite alternate; } @keyframes pulse{ from{transform:scale(1);} to{transform:scale(1.05);} } .footer{ text-align:center; color:#94a3b8; margin-top:15px; font-size:13px; } @media(max-width:640px){ .stats{ grid-template-columns:1fr; } .input-wrap{ flex-direction:column; } .guess-btn{ width:100%; height:55px; } } </style> </head> <body> <div class="container"> <div class="card"> <h1> UP DOWN 챌린지</h1> <div class="stats"> <div class="stat"> <div class="label">남은 기회</div> <div class="value" id="chance">10</div> </div> <div class="stat"> <div class="label">시도 횟수</div> <div class="value" id="tries">0</div> </div> <div class="stat"> <div class="label">최고 기록</div> <div class="value" id="best">-</div> </div> </div> <div class="input-wrap"> <input id="guessInput" type="number" min="1" max="100" placeholder="1~100"> <button class="guess-btn" id="guessBtn"> 추측하기 </button> </div> <div class="result" id="result"> 숫자를 맞혀보세요! </div> <div class="history"> <h3> 시도 기록</h3> <div class="logs" id="logs"> </div> </div> <button class="reset-btn" id="resetBtn"> 새 게임 시작 </button> <div class="footer"> 1 ~ 100 사이의 숫자를 맞춰보세요. </div> </div> </div> <script> const BEST_KEY = "updown_best_record"; let answer; let chances; let tries; let gameOver; const chanceEl = document.getElementById("chance"); const triesEl = document.getElementById("tries"); const bestEl = document.getElementById("best"); const resultEl = document.getElementById("result"); const logsEl = document.getElementById("logs"); const inputEl = document.getElementById("guessInput"); function loadBest(){ const best = localStorage.getItem(BEST_KEY); bestEl.textContent = best ? best + "회" : "-"; } function addLog(text){ const div = document.createElement("div"); div.textContent = text; logsEl.prepend(div); } function startGame(){ answer = Math.floor(Math.random()*100)+1; chances = 10; tries = 0; gameOver = false; chanceEl.textContent = chances; triesEl.textContent = tries; resultEl.textContent = "숫자를 맞혀보세요!"; resultEl.classList.remove("win"); logsEl.innerHTML = ""; inputEl.value = ""; loadBest(); } function guess(){ if(gameOver) return; const value = parseInt(inputEl.value); if(isNaN(value)){ alert("숫자를 입력하세요."); return; } if(value < 1 || value > 100){ alert("1~100 사이 숫자를 입력하세요."); return; } tries++; chances--; triesEl.textContent = tries; chanceEl.textContent = chances; if(value === answer){ resultEl.innerHTML = ` 정답! (${answer})`; resultEl.classList.add("win"); addLog("정답 : " + value); const best = localStorage.getItem(BEST_KEY); if(!best || tries < Number(best)){ localStorage.setItem(BEST_KEY, tries); loadBest(); addLog(" 최고 기록 갱신!"); } gameOver = true; return; } if(value < answer){ resultEl.textContent = " UP"; addLog(value + " → UP"); }else{ resultEl.textContent = " DOWN"; addLog(value + " → DOWN"); } if(chances <= 0){ resultEl.innerHTML = ` 게임 오버<br>정답 : ${answer}`; gameOver = true; } inputEl.value = ""; inputEl.focus(); } document .getElementById("guessBtn") .addEventListener("click", guess); document .getElementById("resetBtn") .addEventListener("click", startGame); inputEl.addEventListener("keydown", function(e){ if(e.key === "Enter"){ guess(); } }); startGame(); </script> </body> </html> 무료게임 techsolayw https://livinghope7.tistory.com/91 https://livinghope7.tistory.com/91#entry91comment Mon, 8 Jun 2026 01:51:04 +0900 현대인의 인간 관계 : 왜 우리는 '적당한 거리' 를 두어야 하는가 https://livinghope7.tistory.com/88 <p data-ke-size="size16"><span style="font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;"><span style="font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;"></span>현대인의 인간 관계 : 왜 우리는 '적당한 거리'를 두어야 하는가 <br />현대&nbsp;사회를&nbsp;살아가며&nbsp;우리는&nbsp;이전&nbsp;시대보다&nbsp;훨씬&nbsp;더&nbsp;많은&nbsp;사람과&nbsp;연결되어&nbsp;있습니다.&nbsp;스마트폰&nbsp;하나로&nbsp;지구&nbsp;반대편에&nbsp;있는&nbsp;사람과&nbsp;소통하고,&nbsp;SNS를&nbsp;통해&nbsp;타인의&nbsp;일상을&nbsp;실시간으로&nbsp;엿보며,&nbsp;메신저를&nbsp;통해&nbsp;24시간&nbsp;언제든&nbsp;연락이&nbsp;닿는&nbsp;'초연결&nbsp;사회'에&nbsp;살고&nbsp;있죠.&nbsp;하지만&nbsp;역설적이게도&nbsp;오늘날&nbsp;우리는&nbsp;그&nbsp;어느&nbsp;때보다&nbsp;더&nbsp;큰&nbsp;고독과&nbsp;관계의&nbsp;피로감을&nbsp;느낍니다. <br /><br />이러한&nbsp;시대적&nbsp;맥락에서&nbsp;에릭&nbsp;프롬이&nbsp;『사랑의&nbsp;기술』에서&nbsp;강조했던&nbsp;'분리'와&nbsp;'결합'의&nbsp;개념은&nbsp;지금&nbsp;우리에게&nbsp;매우&nbsp;중요한&nbsp;통찰을&nbsp;줍니다.&nbsp;진정으로&nbsp;타인과&nbsp;건강한&nbsp;관계를&nbsp;맺기&nbsp;위해서는&nbsp;역설적으로&nbsp;'건강한&nbsp;거리&nbsp;두기'가&nbsp;선행되어야&nbsp;한다는&nbsp;사실입니다.&nbsp;왜&nbsp;현대&nbsp;사회에서&nbsp;관계의&nbsp;거리&nbsp;두기가&nbsp;필수적인지,&nbsp;그&nbsp;유익함을&nbsp;네&nbsp;가지&nbsp;측면에서&nbsp;살펴보고자&nbsp;합니다. <br /><br />1.&nbsp;자아의&nbsp;경계&nbsp;회복과&nbsp;정체성&nbsp;확립 <br />현대인은&nbsp;타인의&nbsp;시선과&nbsp;기대라는&nbsp;거대한&nbsp;파도&nbsp;속에서&nbsp;자신의&nbsp;본모습을&nbsp;잃기&nbsp;쉽습니다.&nbsp;특히&nbsp;SNS는&nbsp;끊임없이&nbsp;타인과&nbsp;나를&nbsp;비교하게&nbsp;만들고,&nbsp;사회가&nbsp;규정한&nbsp;'이상적인&nbsp;인간관계'에&nbsp;나를&nbsp;맞추려&nbsp;노력하게&nbsp;합니다. <br /><br />관계에서의&nbsp;거리&nbsp;두기는&nbsp;바로&nbsp;이&nbsp;'타인과&nbsp;나&nbsp;사이의&nbsp;경계'를&nbsp;다시&nbsp;세우는&nbsp;행위입니다.&nbsp;우리가&nbsp;타인과&nbsp;과도하게&nbsp;밀착되어&nbsp;있으면,&nbsp;내&nbsp;감정과&nbsp;상대의&nbsp;감정이&nbsp;뒤섞여&nbsp;무엇이&nbsp;진정한&nbsp;내&nbsp;욕구인지&nbsp;파악하기&nbsp;어렵습니다.&nbsp;물리적,&nbsp;심리적&nbsp;거리를&nbsp;확보할&nbsp;때&nbsp;비로소&nbsp;우리는&nbsp;타인의&nbsp;목소리를&nbsp;잠시&nbsp;끄고&nbsp;내면의&nbsp;목소리에&nbsp;집중할&nbsp;수&nbsp;있게&nbsp;됩니다.&nbsp;내가&nbsp;무엇을&nbsp;좋아하는지,&nbsp;어떤&nbsp;가치관을&nbsp;가지고&nbsp;있는지,&nbsp;어떤&nbsp;관계를&nbsp;지향하는지를&nbsp;스스로&nbsp;정의할&nbsp;여유가&nbsp;생기는&nbsp;것이죠.&nbsp;나라는&nbsp;사람의&nbsp;중심이&nbsp;단단히&nbsp;잡혀&nbsp;있을&nbsp;때,&nbsp;비로소&nbsp;타인과도&nbsp;온전한&nbsp;존중을&nbsp;바탕으로&nbsp;한&nbsp;관계가&nbsp;가능해집니다. <br /><br />2.&nbsp;관계의&nbsp;피로도&nbsp;감소와&nbsp;'질적&nbsp;향상' <br />우리는&nbsp;종종&nbsp;'많은&nbsp;사람과&nbsp;두루두루&nbsp;잘&nbsp;지내는&nbsp;것'을&nbsp;성숙한&nbsp;인간관계의&nbsp;지표로&nbsp;오해합니다.&nbsp;그러나&nbsp;좁고&nbsp;얕은&nbsp;관계가&nbsp;무수히&nbsp;많은&nbsp;것보다,&nbsp;좁더라도&nbsp;깊고&nbsp;신뢰할&nbsp;수&nbsp;있는&nbsp;관계를&nbsp;맺는&nbsp;것이&nbsp;현대인의&nbsp;정신&nbsp;건강에&nbsp;훨씬&nbsp;유익합니다. <br /><br />불필요한&nbsp;관계의&nbsp;다이어트는&nbsp;에너지의&nbsp;총량을&nbsp;아껴줍니다.&nbsp;에너지가&nbsp;분산되지&nbsp;않아야&nbsp;정말&nbsp;소중한&nbsp;사람들에게&nbsp;나의&nbsp;마음을&nbsp;온전히&nbsp;쏟을&nbsp;수&nbsp;있습니다.&nbsp;모든&nbsp;연락에&nbsp;즉각&nbsp;반응하고,&nbsp;모든&nbsp;관계의&nbsp;갈등에&nbsp;감정을&nbsp;소모하며,&nbsp;타인의&nbsp;기분을&nbsp;끊임없이&nbsp;살피는&nbsp;일은&nbsp;에너지를&nbsp;고갈시키는&nbsp;주범입니다.&nbsp;적절한&nbsp;거리&nbsp;두기는&nbsp;'모든&nbsp;사람에게&nbsp;좋은&nbsp;사람'이기를&nbsp;포기하는&nbsp;용기이기도&nbsp;합니다.&nbsp;이를&nbsp;통해&nbsp;우리는&nbsp;관계의&nbsp;양을&nbsp;줄이는&nbsp;대신&nbsp;관계의&nbsp;질을&nbsp;높일&nbsp;수&nbsp;있습니다.&nbsp;거리를&nbsp;두어&nbsp;확보한&nbsp;여유로움은&nbsp;상대방을&nbsp;더&nbsp;너그럽게&nbsp;바라보게&nbsp;하고,&nbsp;관계에서의&nbsp;불필요한&nbsp;마찰을&nbsp;줄여주는&nbsp;완충재&nbsp;역할을&nbsp;합니다. <br /><br />3.&nbsp;상호&nbsp;독립성을&nbsp;바탕으로&nbsp;한&nbsp;성숙한&nbsp;사랑 <br />에릭&nbsp;프롬은&nbsp;사랑을&nbsp;'자신의&nbsp;힘을&nbsp;타인에게&nbsp;쏟아붓는&nbsp;능동적인&nbsp;활동'이라고&nbsp;정의했습니다.&nbsp;그러나&nbsp;많은&nbsp;경우,&nbsp;사람들은&nbsp;외로움을&nbsp;견디지&nbsp;못해&nbsp;타인을&nbsp;'도구'처럼&nbsp;사용하거나,&nbsp;상대에게&nbsp;의존함으로써&nbsp;자신의&nbsp;불안을&nbsp;해소하려&nbsp;합니다. <br /><br />건강한&nbsp;거리&nbsp;두기는&nbsp;의존적인&nbsp;사랑에서&nbsp;독립적인&nbsp;사랑으로&nbsp;나아가는&nbsp;징검다리입니다.&nbsp;상대방과&nbsp;물리적으로&nbsp;떨어져&nbsp;있거나,&nbsp;혼자&nbsp;있는&nbsp;시간을&nbsp;존중할&nbsp;때&nbsp;우리는&nbsp;'나&nbsp;자신의&nbsp;힘으로&nbsp;살아가는&nbsp;법'을&nbsp;익힙니다.&nbsp;이렇게&nbsp;독립적인&nbsp;개인이&nbsp;만났을&nbsp;때&nbsp;비로소&nbsp;집착이&nbsp;아닌&nbsp;존중이&nbsp;가능해집니다.&nbsp;"너&nbsp;없이는&nbsp;살&nbsp;수&nbsp;없어"라는&nbsp;말은&nbsp;로맨틱하게&nbsp;들릴지&nbsp;모르지만,&nbsp;실상은&nbsp;상대에게&nbsp;자신의&nbsp;삶을&nbsp;통째로&nbsp;짊어지게&nbsp;하는&nbsp;무거운&nbsp;짐이&nbsp;될&nbsp;수도&nbsp;있습니다.&nbsp;"너와&nbsp;함께여서&nbsp;좋지만,&nbsp;너&nbsp;없이도&nbsp;나는&nbsp;나로서&nbsp;충분히&nbsp;온전하다"는&nbsp;독립적인&nbsp;태도가&nbsp;바탕이&nbsp;될&nbsp;때,&nbsp;비로소&nbsp;관계는&nbsp;구속이&nbsp;아닌&nbsp;성장을&nbsp;돕는&nbsp;도구가&nbsp;됩니다. <br /><br />4.&nbsp;사유하는&nbsp;시간과&nbsp;인간적&nbsp;성숙 <br />관계에&nbsp;매몰되어&nbsp;있을&nbsp;때는&nbsp;보이지&nbsp;않던&nbsp;것들이,&nbsp;한&nbsp;발짝&nbsp;물러설&nbsp;때&nbsp;비로소&nbsp;보이기&nbsp;시작합니다.&nbsp;우리가&nbsp;숲속에&nbsp;너무&nbsp;깊이&nbsp;들어가&nbsp;있으면&nbsp;숲&nbsp;전체를&nbsp;볼&nbsp;수&nbsp;없는&nbsp;것과&nbsp;같은&nbsp;이치입니다. <br /><br />적당한&nbsp;거리를&nbsp;두고&nbsp;타인과&nbsp;나를&nbsp;관조하는&nbsp;시간은&nbsp;우리를&nbsp;한층&nbsp;더&nbsp;성숙하게&nbsp;만듭니다.&nbsp;갈등&nbsp;상황에서&nbsp;즉각적으로&nbsp;반응하기보다&nbsp;한&nbsp;템포&nbsp;쉬고&nbsp;생각할&nbsp;시간을&nbsp;갖는&nbsp;것,&nbsp;타인의&nbsp;말에&nbsp;무조건&nbsp;휘둘리지&nbsp;않고&nbsp;내&nbsp;안에서&nbsp;한&nbsp;번&nbsp;더&nbsp;곱씹어&nbsp;보는&nbsp;것,&nbsp;이러한&nbsp;과정&nbsp;자체가&nbsp;인간적&nbsp;성숙의&nbsp;핵심입니다.&nbsp;현대&nbsp;사회의&nbsp;빠른&nbsp;속도&nbsp;속에서&nbsp;'거리&nbsp;두기'는&nbsp;우리가&nbsp;잃어버린&nbsp;'사유의&nbsp;힘'을&nbsp;되찾아줍니다. <br /><br />맺음말:&nbsp;연결되기&nbsp;위해&nbsp;잠시&nbsp;떨어지기 <br />결국&nbsp;현대&nbsp;사회에서&nbsp;인간관계의&nbsp;거리&nbsp;두기는&nbsp;타인을&nbsp;배척하는&nbsp;것이&nbsp;아니라,&nbsp;타인과&nbsp;나를&nbsp;모두&nbsp;살리기&nbsp;위한&nbsp;가장&nbsp;배려&nbsp;깊은&nbsp;방식입니다. <br /><br />우리는&nbsp;서로에게&nbsp;너무&nbsp;가까이&nbsp;다가가&nbsp;서로의&nbsp;가시를&nbsp;찌르고&nbsp;있지는&nbsp;않은지&nbsp;돌아봐야&nbsp;합니다.&nbsp;너무&nbsp;멀면&nbsp;추위가&nbsp;느껴지고,&nbsp;너무&nbsp;가까우면&nbsp;가시가&nbsp;찌르는&nbsp;고슴도치처럼,&nbsp;우리에게는&nbsp;적절한&nbsp;온기를&nbsp;유지할&nbsp;수&nbsp;있는&nbsp;지혜로운&nbsp;거리가&nbsp;필요합니다. <br /><br />지금&nbsp;당장&nbsp;주변의&nbsp;모든&nbsp;인간관계를&nbsp;정리할&nbsp;필요는&nbsp;없습니다.&nbsp;다만,&nbsp;오늘&nbsp;하루&nbsp;내가&nbsp;타인의&nbsp;기대에&nbsp;맞추느라&nbsp;나&nbsp;자신을&nbsp;소홀히&nbsp;하지는&nbsp;않았는지,&nbsp;혹은&nbsp;외로움을&nbsp;피하기&nbsp;위해&nbsp;의미&nbsp;없는&nbsp;관계에&nbsp;에너지를&nbsp;낭비하고&nbsp;있지는&nbsp;않은지&nbsp;생각해보는&nbsp;것만으로도&nbsp;충분합니다.&nbsp;혼자만의&nbsp;시간을&nbsp;확보하고,&nbsp;적당한&nbsp;심리적&nbsp;거리를&nbsp;유지하며,&nbsp;나를&nbsp;온전히&nbsp;사랑하는&nbsp;연습을&nbsp;시작해&nbsp;보세요.&nbsp;그렇게&nbsp;단단해진&nbsp;내가&nbsp;타인에게&nbsp;손을&nbsp;내밀&nbsp;때,&nbsp;그&nbsp;관계는&nbsp;비로소&nbsp;더&nbsp;깊고&nbsp;아름다운&nbsp;결실을&nbsp;맺게&nbsp;될&nbsp;것입니다. <br /><br />이&nbsp;글의&nbsp;내용&nbsp;중&nbsp;본인의&nbsp;평소&nbsp;생각이나&nbsp;경험과&nbsp;가장&nbsp;일치하는&nbsp;부분은&nbsp;어느&nbsp;지점인가요?</span></p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">"본 글은 에릭 프롬의 저서 『사랑의 기술』에서 영감을 받아 현대인의 인간관계에 대한 저의 생각을 정리한 글입니다."</p> 웰빙 라이프 &amp; 헬스 인간관계 현대인의 인간관계 techsolayw https://livinghope7.tistory.com/88 https://livinghope7.tistory.com/88#entry88comment Sun, 7 Jun 2026 21:19:14 +0900 숫자 기억력 테스트 게임 https://livinghope7.tistory.com/87 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> <div id="memoryTest"> <div class="game-card"> <h2> 숫자 기억력 테스트</h2> <p class="subtitle"> 숫자를 기억하고 입력해보세요! </p> <div class="stats"> <div class="stat-box"> <span>현재 레벨</span> <strong id="level">1</strong> </div> <div class="stat-box"> <span>최고 레벨</span> <strong id="bestLevel">1</strong> </div> </div> <div id="display"> 게임 시작 버튼을 눌러주세요 </div> <input type="tel" inputmode="numeric" id="answer" placeholder="숫자를 입력하세요" autocomplete="off" > <button id="submitBtn"> 확인 </button> <button id="startBtn"> 게임 시작 </button> <div id="result"></div> </div> </div> <style> #memoryTest, #memoryTest *{ box-sizing:border-box; font-family:'Pretendard',sans-serif; } #memoryTest{ max-width:800px; margin:30px auto; } #memoryTest .game-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } #memoryTest h2{ margin:0; text-align:center; font-size:clamp(28px,5vw,42px); font-weight:800; } .subtitle{ text-align:center; color:#666; margin:12px 0 24px; } .stats{ display:flex; gap:12px; margin-bottom:20px; } .stat-box{ flex:1; text-align:center; padding:12px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; } .stat-box span{ display:block; font-size:13px; color:#666; } .stat-box strong{ display:block; margin-top:4px; font-size:24px; } #display{ height:120px; border-radius:18px; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:clamp(20px,5vw,36px); font-weight:800; margin-bottom:20px; padding:10px; letter-spacing:3px; word-break:break-all; } #answer{ width:100%; padding:16px; border:2px solid #e5e7eb; border-radius:14px; font-size:18px; text-align:center; margin-bottom:12px; } #submitBtn, #startBtn{ width:100%; border:none; border-radius:14px; padding:15px; font-size:16px; font-weight:700; cursor:pointer; } #submitBtn{ background:#111827; color:#fff; margin-bottom:10px; } #startBtn{ background:#e5e7eb; } #result{ margin-top:18px; text-align:center; font-size:20px; font-weight:800; min-height:30px; } @media(max-width:768px){ #memoryTest .game-card{ padding:18px; } .stats{ gap:8px; } #display{ height:100px; font-size:clamp(18px,6vw,30px); letter-spacing:2px; } } </style> <script> (function(){ const levelEl = document.getElementById('level'); const bestLevelEl = document.getElementById('bestLevel'); const display = document.getElementById('display'); const answer = document.getElementById('answer'); const submitBtn = document.getElementById('submitBtn'); const startBtn = document.getElementById('startBtn'); const result = document.getElementById('result'); let level = 1; let currentNumber = ''; let playing = false; let bestLevel = parseInt( localStorage.getItem('memory_best_level') ) || 1; bestLevelEl.textContent = bestLevel; function randomNumber(length){ let num=''; for(let i=0;i<length;i++){ num += Math.floor( Math.random()*10 ); } return num; } function startRound(){ playing = true; answer.value=''; result.textContent=''; const length = level + 2; currentNumber = randomNumber(length); display.textContent = currentNumber; setTimeout(function(){ display.textContent = '입력하세요'; answer.focus(); },3000); } function startGame(){ level = 1; levelEl.textContent = level; startRound(); } function checkAnswer(){ if(!playing) return; if( answer.value.trim() === currentNumber ){ level++; levelEl.textContent = level; if(level > bestLevel){ bestLevel = level; bestLevelEl.textContent = bestLevel; localStorage.setItem( 'memory_best_level', bestLevel ); } result.textContent = ' 정답! 다음 레벨'; setTimeout( startRound, 1000 ); } else{ playing = false; display.textContent = '게임 종료'; result.innerHTML = '❌ 오답!<br>정답 : ' + currentNumber; } } startBtn.addEventListener( 'click', startGame ); submitBtn.addEventListener( 'click', checkAnswer ); answer.addEventListener( 'keydown', function(e){ if(e.key==='Enter'){ checkAnswer(); } }); })(); </script> 무료게임 게임 모바일 게임 무료 게임 숫자 기억력 게임 techsolayw https://livinghope7.tistory.com/87 https://livinghope7.tistory.com/87#entry87comment Sun, 7 Jun 2026 07:59:40 +0900 행운의 룰렛 게임 https://livinghope7.tistory.com/86 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> <div id="rouletteGame"> <div class="game-card"> <h2> 행운의 룰렛</h2> <p class="subtitle"> 버튼을 눌러 오늘의 행운을 확인해보세요! </p> <div class="pointer">▼</div> <div id="wheelWrap"> <div id="wheel"> <div class="icon i1"> </div> <div class="icon i2"> </div> <div class="icon i3"> </div> <div class="icon i4"> </div> <div class="icon i5"> </div> <div class="icon i6"> </div> </div> </div> <button id="spinBtn"> 룰렛 돌리기 </button> <div id="result"> 행운을 시험해보세요! </div> <div class="history-box"> <h3>최근 결과</h3> <div id="historyList"> 기록 없음 </div> </div> </div> </div> <style> #rouletteGame, #rouletteGame *{ box-sizing:border-box; font-family:'Pretendard',sans-serif; } #rouletteGame{ max-width:900px; margin:30px auto; } #rouletteGame .game-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } #rouletteGame h2{ margin:0; text-align:center; font-size:clamp(28px,5vw,42px); font-weight:800; } .subtitle{ text-align:center; color:#666; margin:10px 0 25px; } .pointer{ text-align:center; font-size:34px; margin-bottom:-8px; color:#111827; font-weight:900; } #wheelWrap{ display:flex; justify-content:center; } #wheel{ position:relative; width:min(80vw,360px); height:min(80vw,360px); border-radius:50%; border:8px solid #111827; background: conic-gradient( #ef4444 0deg 60deg, #f59e0b 60deg 120deg, #22c55e 120deg 180deg, #3b82f6 180deg 240deg, #8b5cf6 240deg 300deg, #ec4899 300deg 360deg ); transition: transform 5s cubic-bezier(.15,.75,.15,1); } .icon{ position:absolute; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:28px; left:50%; top:50%; margin-left:-20px; margin-top:-20px; } /* 6등분 중앙 배치 */ .i1{ transform: translate(0,-130px); } .i2{ transform: translate(112px,-65px); } .i3{ transform: translate(112px,65px); } .i4{ transform: translate(0,130px); } .i5{ transform: translate(-112px,65px); } .i6{ transform: translate(-112px,-65px); } #spinBtn{ display:block; margin:25px auto; border:none; border-radius:14px; background:#111827; color:#fff; padding:14px 30px; font-size:16px; font-weight:700; cursor:pointer; } #result{ margin-top:15px; text-align:center; font-size:24px; font-weight:800; min-height:40px; } .history-box{ margin-top:25px; text-align:center; } .history-box h3{ margin-bottom:12px; } #historyList{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; } .history-item{ background:#f3f4f6; border-radius:999px; padding:8px 12px; font-size:14px; font-weight:700; } @media(max-width:768px){ #rouletteGame .game-card{ padding:18px; } .icon{ font-size:24px; } .i1{transform:translate(0,-105px);} .i2{transform:translate(90px,-52px);} .i3{transform:translate(90px,52px);} .i4{transform:translate(0,105px);} .i5{transform:translate(-90px,52px);} .i6{transform:translate(-90px,-52px);} #result{ font-size:20px; } } </style> <script> (function(){ const prizes=[ {icon:' ',text:'대박'}, {icon:' ',text:'100점'}, {icon:' ',text:'50점'}, {icon:' ',text:'행운'}, {icon:' ',text:'꽝'}, {icon:' ',text:'보너스'} ]; const wheel= document.getElementById('wheel'); const spinBtn= document.getElementById('spinBtn'); const result= document.getElementById('result'); const historyList= document.getElementById('historyList'); let spinning=false; let rotation=0; function renderHistory(){ const history= JSON.parse( localStorage.getItem('roulette_history') || '[]' ); if(history.length===0){ historyList.innerHTML='기록 없음'; return; } historyList.innerHTML=''; history.forEach(item=>{ const div= document.createElement('div'); div.className='history-item'; div.textContent=item; historyList.appendChild(div); }); } function saveHistory(text){ let history= JSON.parse( localStorage.getItem('roulette_history') || '[]' ); history.unshift(text); history=history.slice(0,5); localStorage.setItem( 'roulette_history', JSON.stringify(history) ); renderHistory(); } spinBtn.addEventListener( 'pointerdown', function(){ if(spinning) return; spinning=true; const index= Math.floor( Math.random()*6 ); const prize= prizes[index]; const sector=60; const stopAngle= (index*sector)+30; rotation+= 2160+ (360-stopAngle); wheel.style.transform= 'rotate('+rotation+'deg)'; setTimeout(function(){ result.innerHTML= ' 결과 : '+ prize.icon+ ' '+ prize.text; saveHistory( prize.icon+ ' '+ prize.text ); spinning=false; },5000); }); renderHistory(); })(); </script> 무료게임 게임 룰렛 게임 모바일 게임 무료 게임 techsolayw https://livinghope7.tistory.com/86 https://livinghope7.tistory.com/86#entry86comment Sun, 7 Jun 2026 07:51:38 +0900 가위 바위 보 배틀 게임 https://livinghope7.tistory.com/85 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> <title>가위바위보 배틀</title> <style> *{ box-sizing:border-box; margin:0; padding:0; font-family:'Pretendard',sans-serif; } body{ background:#f3f4f6; padding:30px 15px; } #rpsGame{ max-width:900px; margin:0 auto; } .game-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } h2{ text-align:center; font-size:clamp(28px,5vw,42px); font-weight:800; } .subtitle{ text-align:center; color:#666; margin:12px 0 24px; } .stats{ display:flex; gap:10px; margin-bottom:20px; } .stat-box{ flex:1; text-align:center; padding:12px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; } .stat-box span{ display:block; color:#666; font-size:13px; } .stat-box b{ display:block; margin-top:4px; font-size:24px; } .streak-wrap{ display:flex; justify-content:center; gap:20px; margin-bottom:25px; font-weight:700; } .battle-area{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:20px; } .player-box{ flex:1; text-align:center; } .label{ margin-bottom:10px; font-weight:700; } .hand{ font-size:80px; min-height:100px; display:flex; align-items:center; justify-content:center; } .vs{ font-size:24px; font-weight:800; } #result{ text-align:center; font-size:22px; font-weight:800; margin-bottom:20px; min-height:35px; } .buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .choice-btn{ border:none; border-radius:14px; background:#111827; color:#fff; padding:16px 10px; font-size:16px; font-weight:700; cursor:pointer; transition:.15s; } .choice-btn:hover{ opacity:.9; } .choice-btn:active{ transform:scale(.97); } #resetBtn{ width:100%; margin-top:14px; border:none; border-radius:14px; padding:14px; background:#e5e7eb; cursor:pointer; font-weight:700; } #resetBtn:hover{ background:#d1d5db; } @media(max-width:768px){ .game-card{ padding:18px; } .hand{ font-size:60px; min-height:80px; } .streak-wrap{ flex-direction:column; align-items:center; gap:6px; } #result{ font-size:18px; } .choice-btn{ font-size:15px; padding:14px 8px; } } </style> </head> <body> <div id="rpsGame"> <div class="game-card"> <h2>✊✋✌️ 가위바위보 배틀</h2> <p class="subtitle"> 컴퓨터를 이기고 연승 기록에 도전하세요! </p> <div class="stats"> <div class="stat-box"> <span>승리</span> <b id="wins">0</b> </div> <div class="stat-box"> <span>패배</span> <b id="losses">0</b> </div> <div class="stat-box"> <span>무승부</span> <b id="draws">0</b> </div> </div> <div class="streak-wrap"> <div> 현재 연승 : <b id="currentStreak">0</b></div> <div> 최고 연승 : <b id="bestStreak">0</b></div> </div> <div class="battle-area"> <div class="player-box"> <div class="label"> 플레이어</div> <div id="playerHand" class="hand">❔</div> </div> <div class="vs">VS</div> <div class="player-box"> <div class="label"> 컴퓨터</div> <div id="computerHand" class="hand">❔</div> </div> </div> <div id="result"> 아래 버튼을 눌러 승부를 시작하세요. </div> <div class="buttons"> <button class="choice-btn" data-choice="rock"> ✊ 바위 </button> <button class="choice-btn" data-choice="paper"> ✋ 보 </button> <button class="choice-btn" data-choice="scissors"> ✌️ 가위 </button> </div> <button id="resetBtn"> 기록 초기화 </button> </div> </div> <script> document.addEventListener('DOMContentLoaded',function(){ const hands={ rock:'✊', paper:'✋', scissors:'✌️' }; const playerHand=document.getElementById('playerHand'); const computerHand=document.getElementById('computerHand'); const result=document.getElementById('result'); const winsEl=document.getElementById('wins'); const lossesEl=document.getElementById('losses'); const drawsEl=document.getElementById('draws'); const currentStreakEl=document.getElementById('currentStreak'); const bestStreakEl=document.getElementById('bestStreak'); let wins=parseInt(localStorage.getItem('rpsWins'))||0; let losses=parseInt(localStorage.getItem('rpsLosses'))||0; let draws=parseInt(localStorage.getItem('rpsDraws'))||0; let currentStreak=parseInt(localStorage.getItem('rpsCurrentStreak'))||0; let bestStreak=parseInt(localStorage.getItem('rpsBestStreak'))||0; function updateUI(){ winsEl.textContent=wins; lossesEl.textContent=losses; drawsEl.textContent=draws; currentStreakEl.textContent=currentStreak; bestStreakEl.textContent=bestStreak; localStorage.setItem('rpsWins',wins); localStorage.setItem('rpsLosses',losses); localStorage.setItem('rpsDraws',draws); localStorage.setItem('rpsCurrentStreak',currentStreak); localStorage.setItem('rpsBestStreak',bestStreak); } function play(player){ const choices=['rock','paper','scissors']; const computer= choices[Math.floor(Math.random()*3)]; playerHand.textContent=hands[player]; computerHand.textContent=hands[computer]; if(player===computer){ draws++; result.textContent=' 무승부!'; }else if( (player==='rock' && computer==='scissors') || (player==='paper' && computer==='rock') || (player==='scissors' && computer==='paper') ){ wins++; currentStreak++; if(currentStreak>bestStreak){ bestStreak=currentStreak; } result.textContent=' 승리!'; }else{ losses++; currentStreak=0; result.textContent=' 패배!'; } updateUI(); } document .querySelectorAll('.choice-btn') .forEach(btn=>{ btn.addEventListener('click',function(){ play(this.dataset.choice); }); }); document .getElementById('resetBtn') .addEventListener('click',function(){ wins=0; losses=0; draws=0; currentStreak=0; bestStreak=0; playerHand.textContent='❔'; computerHand.textContent='❔'; result.textContent='기록이 초기화되었습니다.'; updateUI(); }); updateUI(); }); </script> </body> </html> 무료게임 가위 바위 보 게임 게임 모바일 게임 무료 게임 techsolayw https://livinghope7.tistory.com/85 https://livinghope7.tistory.com/85#entry85comment Sun, 7 Jun 2026 07:47:35 +0900 주사위 배틀 게임 https://livinghope7.tistory.com/84 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> <div id="diceBattle"> <div class="game-card"> <h2> 주사위 배틀</h2> <p class="subtitle"> 컴퓨터보다 높은 숫자를 굴려 승리하세요! </p> <div class="scoreboard"> <div class="score-box"> <span>승리</span> <b id="winCount">0</b> </div> <div class="score-box"> <span>패배</span> <b id="loseCount">0</b> </div> <div class="score-box"> <span>무승부</span> <b id="drawCount">0</b> </div> </div> <div class="battle-area"> <div class="player"> <h3> 플레이어</h3> <div id="playerDice" class="dice"> </div> </div> <div class="vs">VS</div> <div class="computer"> <h3> 컴퓨터</h3> <div id="computerDice" class="dice"> </div> </div> </div> <div id="result"> 주사위를 굴려보세요! </div> <div class="button-wrap"> <button id="rollBtn"> 주사위 굴리기 </button> <button id="resetBtn"> 기록 초기화 </button> </div> </div> </div> <style> #diceBattle, #diceBattle *{ box-sizing:border-box; font-family:'Pretendard',sans-serif; } #diceBattle{ max-width:900px; margin:30px auto; } #diceBattle .game-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } #diceBattle h2{ margin:0; text-align:center; font-size:clamp(28px,5vw,42px); font-weight:800; } .subtitle{ text-align:center; color:#666; margin:10px 0 24px; } .scoreboard{ display:flex; justify-content:center; gap:12px; margin-bottom:25px; } .score-box{ flex:1; max-width:140px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:16px; padding:12px; text-align:center; } .score-box span{ display:block; font-size:13px; color:#666; } .score-box b{ display:block; margin-top:4px; font-size:26px; font-weight:800; } .battle-area{ display:flex; align-items:center; justify-content:center; gap:20px; margin:30px 0; } .player, .computer{ flex:1; text-align:center; } .vs{ font-size:24px; font-weight:900; } .dice{ width:120px; height:120px; margin:auto; border-radius:20px; background:#f8fafc; border:2px solid #e5e7eb; display:flex; align-items:center; justify-content:center; font-size:70px; } .roll{ animation:spin .7s linear; } @keyframes spin{ 0%{transform:rotate(0deg);} 100%{transform:rotate(720deg);} } #result{ text-align:center; font-size:24px; font-weight:800; margin-bottom:20px; } .button-wrap{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } button{ border:none; border-radius:14px; padding:14px 24px; font-size:15px; font-weight:700; cursor:pointer; } #rollBtn{ background:#111827; color:#fff; } #resetBtn{ background:#e5e7eb; } @media(max-width:768px){ .dice{ width:90px; height:90px; font-size:55px; } #result{ font-size:20px; } } </style> <script> document.addEventListener('DOMContentLoaded',function(){ const diceFaces=[ '⚀','⚁','⚂','⚃','⚄','⚅' ]; const playerDice= document.getElementById('playerDice'); const computerDice= document.getElementById('computerDice'); const result= document.getElementById('result'); const rollBtn= document.getElementById('rollBtn'); const resetBtn= document.getElementById('resetBtn'); const winCount= document.getElementById('winCount'); const loseCount= document.getElementById('loseCount'); const drawCount= document.getElementById('drawCount'); let wins= Number(localStorage.getItem('diceWins'))||0; let loses= Number(localStorage.getItem('diceLoses'))||0; let draws= Number(localStorage.getItem('diceDraws'))||0; function updateBoard(){ winCount.textContent=wins; loseCount.textContent=loses; drawCount.textContent=draws; localStorage.setItem('diceWins',wins); localStorage.setItem('diceLoses',loses); localStorage.setItem('diceDraws',draws); } updateBoard(); rollBtn.addEventListener('click',function(){ rollBtn.disabled=true; playerDice.classList.add('roll'); computerDice.classList.add('roll'); setTimeout(function(){ const player= Math.floor(Math.random()*6)+1; const computer= Math.floor(Math.random()*6)+1; playerDice.textContent= diceFaces[player-1]; computerDice.textContent= diceFaces[computer-1]; if(player>computer){ wins++; result.innerHTML= ' 승리! ('+player+' : '+computer+')'; }else if(player<computer){ loses++; result.innerHTML= ' 패배! ('+player+' : '+computer+')'; }else{ draws++; result.innerHTML= ' 무승부! ('+player+' : '+computer+')'; } updateBoard(); playerDice.classList.remove('roll'); computerDice.classList.remove('roll'); rollBtn.disabled=false; },700); }); resetBtn.addEventListener('click',function(){ wins=0; loses=0; draws=0; updateBoard(); playerDice.textContent=' '; computerDice.textContent=' '; result.textContent= '기록이 초기화되었습니다.'; }); }); </script> 무료게임 게임 모바일 게임 무료 게임 주사위 게임 techsolayw https://livinghope7.tistory.com/84 https://livinghope7.tistory.com/84#entry84comment Sun, 7 Jun 2026 07:29:51 +0900 카드 짝맞추기 https://livinghope7.tistory.com/83 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> <div id="memoryGame"> <div class="game-wrap"> <h2> 카드 짝맞추기</h2> <p class="desc"> 같은 이모지 카드를 모두 찾아보세요! </p> <div class="stats"> <div class="box"> <span>이동 횟수</span> <b id="moves">0</b> </div> <div class="box"> <span>플레이 시간</span> <b id="timer">00:00</b> </div> </div> <button id="restartBtn"> 새 게임 </button> <div id="board"></div> <div id="result"></div> </div> </div> <style> #memoryGame, #memoryGame *{ box-sizing:border-box; font-family:'Pretendard',sans-serif; } #memoryGame{ max-width:900px; margin:30px auto; } #memoryGame .game-wrap{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } #memoryGame h2{ margin:0; text-align:center; font-size:clamp(28px,5vw,42px); font-weight:800; } #memoryGame .desc{ text-align:center; color:#666; margin:12px 0 20px; } #memoryGame .stats{ display:flex; justify-content:center; gap:12px; margin-bottom:20px; } #memoryGame .box{ min-width:130px; padding:12px; text-align:center; border-radius:14px; background:#f8fafc; border:1px solid #e5e7eb; } #memoryGame .box span{ display:block; font-size:13px; color:#666; } #memoryGame .box b{ display:block; margin-top:5px; font-size:24px; font-weight:800; } #restartBtn{ display:block; margin:0 auto 20px; border:none; background:#111827; color:#fff; padding:12px 24px; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; } #board{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .card{ aspect-ratio:1; background:#0f172a; border-radius:16px; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; font-size:36px; transition:.25s; } .card::before{ content:"❓"; font-size:32px; } .card.flipped::before, .card.matched::before{ display:none; } .card.flipped{ background:#fff; border:2px solid #e5e7eb; } .card.matched{ background:#22c55e; color:#fff; } .card .emoji{ display:none; } .card.flipped .emoji, .card.matched .emoji{ display:block; } #result{ margin-top:20px; text-align:center; font-size:20px; font-weight:800; } @media(max-width:768px){ #memoryGame .game-wrap{ padding:18px; } #board{ gap:8px; } .card{ font-size:28px; } .card::before{ font-size:28px; } #memoryGame .box{ min-width:100px; } } </style> <script> document.addEventListener('DOMContentLoaded',function(){ const board = document.getElementById('board'); const movesEl = document.getElementById('moves'); const timerEl = document.getElementById('timer'); const restartBtn = document.getElementById('restartBtn'); const result = document.getElementById('result'); const icons = [ ' ',' ',' ',' ', ' ','⚽',' ',' ' ]; let flipped = []; let lock = false; let moves = 0; let matchedPairs = 0; let timer = null; let seconds = 0; function shuffle(arr){ for(let i=arr.length-1;i>0;i--){ const j = Math.floor(Math.random()*(i+1)); [arr[i],arr[j]] = [arr[j],arr[i]]; } return arr; } function startTimer(){ clearInterval(timer); seconds = 0; timerEl.textContent = '00:00'; timer = setInterval(function(){ seconds++; const min = String(Math.floor(seconds/60)) .padStart(2,'0'); const sec = String(seconds%60) .padStart(2,'0'); timerEl.textContent = min + ':' + sec; },1000); } function createCard(icon){ const card = document.createElement('div'); card.className = 'card'; card.dataset.icon = icon; const emoji = document.createElement('div'); emoji.className = 'emoji'; emoji.textContent = icon; card.appendChild(emoji); card.addEventListener( 'click', flipCard ); return card; } function createGame(){ clearInterval(timer); board.innerHTML = ''; result.innerHTML = ''; moves = 0; matchedPairs = 0; flipped = []; lock = false; movesEl.textContent = '0'; const cards = shuffle([...icons,...icons]); cards.forEach(function(icon){ board.appendChild( createCard(icon) ); }); startTimer(); } function flipCard(e){ const card = e.currentTarget; if(lock) return; if(card.classList.contains('flipped')) return; if(card.classList.contains('matched')) return; card.classList.add('flipped'); flipped.push(card); if(flipped.length !== 2) return; moves++; movesEl.textContent = moves; const first = flipped[0]; const second = flipped[1]; if( first.dataset.icon === second.dataset.icon ){ first.classList.add('matched'); second.classList.add('matched'); flipped = []; matchedPairs++; if(matchedPairs === icons.length){ clearInterval(timer); result.innerHTML = ' 게임 완료!<br>' + moves + '회 이동 · ' + timerEl.textContent; } }else{ lock = true; setTimeout(function(){ first.classList.remove( 'flipped' ); second.classList.remove( 'flipped' ); flipped = []; lock = false; },800); } } restartBtn.addEventListener( 'click', createGame ); createGame(); }); </script> 무료게임 게임 모바일 게임 무료 게임 카드 게임 카드 짝 맞추기 게임 techsolayw https://livinghope7.tistory.com/83 https://livinghope7.tistory.com/83#entry83comment Sun, 7 Jun 2026 07:27:08 +0900 반응속도 테스트 게임 https://livinghope7.tistory.com/82 <p data-ke-size="size16">&nbsp;</p> <div id="reaction-game"> <div class="card"> <h2 data-ke-size="size26">⚡ 반응속도 테스트</h2> <p class="desc" data-ke-size="size16">화면이 초록색으로 바뀌는 순간 터치하세요!</p> <div id="result">평균적인 사람의 반응속도는 250~300ms 정도입니다.</div> <button id="startBtn"> 테스트 시작 </button> <div id="gameArea">시작 버튼을 눌러주세요</div> </div> </div> <div> <style> #reaction-game, #reaction-game *{ font-family:'Pretendard',sans-serif; box-sizing:border-box; } #reaction-game{ max-width:800px; margin:30px auto; } #reaction-game .card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } #reaction-game h2{ text-align:center; margin:0; font-size:clamp(26px,5vw,40px); font-weight:800; } #reaction-game .desc{ text-align:center; color:#666; margin:12px 0 20px; } #reaction-game #result{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; padding:16px; text-align:center; margin-bottom:16px; font-weight:600; } #reaction-game #startBtn{ display:block; margin:0 auto 20px; border:none; background:#111827; color:#fff; padding:14px 30px; border-radius:14px; cursor:pointer; font-size:16px; font-weight:700; } #reaction-game #gameArea{ height:min(55vh,420px); min-height:280px; border-radius:20px; border:2px solid #e5e7eb; background:#ef4444; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-size:24px; font-weight:800; cursor:pointer; user-select:none; touch-action:manipulation; transition:.15s; } @media(max-width:768px){ #reaction-game .card{ padding:18px; } #reaction-game #gameArea{ min-height:260px; font-size:20px; } } </style> </div> <script> (function(){ const gameArea = document.getElementById('gameArea'); const startBtn = document.getElementById('startBtn'); const result = document.getElementById('result'); let startTime; let timeout; let waiting = false; let ready = false; startBtn.addEventListener('click', startGame); function startGame(){ clearTimeout(timeout); waiting = true; ready = false; gameArea.style.background = '#ef4444'; gameArea.innerHTML = '초록색이 될 때까지 기다리세요'; result.innerHTML = '준비 중...'; const delay = Math.random() * 4000 + 2000; timeout = setTimeout(function(){ waiting = false; ready = true; gameArea.style.background = '#22c55e'; gameArea.innerHTML = '지금 터치!'; startTime = Date.now(); }, delay); } function handleClick(){ if(ready){ const reaction = Date.now() - startTime; ready = false; gameArea.style.background = '#3b82f6'; gameArea.innerHTML = '다시 측정하려면 시작 버튼'; let rank = ''; if(reaction < 180){ rank = ' 프로게이머급'; } else if(reaction < 250){ rank = ' 매우 빠름'; } else if(reaction < 320){ rank = ' 평균 이상'; } else{ rank = ' 보통'; } result.innerHTML = '반응속도 <strong>' + reaction + 'ms</strong><br>' + rank; } else if(waiting){ clearTimeout(timeout); waiting = false; gameArea.style.background = '#111827'; gameArea.innerHTML = '너무 빨랐습니다 '; result.innerHTML = '초록색이 되기 전에 눌렀습니다.'; } } gameArea.addEventListener('click', handleClick); gameArea.addEventListener('touchstart', handleClick); })(); </script> 무료게임 게임 무료 게임 반응속도 게임 techsolayw https://livinghope7.tistory.com/82 https://livinghope7.tistory.com/82#entry82comment Sun, 7 Jun 2026 07:22:49 +0900 30초 클릭 챌린지 게임 https://livinghope7.tistory.com/81 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> <div id="clickGame"> <div class="game-card"> <h2> 30초 클릭 챌린지</h2> <p class="subtitle"> 빨간 원을 최대한 많이 터치하세요! </p> <div class="info-wrap"> <div class="info-box"> <span>점수</span> <b id="score">0</b> </div> <div class="info-box"> <span>남은 시간</span> <b id="time">30</b> </div> </div> <button id="startBtn"> 게임 시작 </button> <div id="playArea"> <div id="target"></div> <div id="message"> START 버튼을 눌러주세요 </div> </div> <div id="result"></div> </div> </div> <style> #clickGame, #clickGame *{ box-sizing:border-box; font-family:'Pretendard',sans-serif; } #clickGame{ max-width:900px; margin:30px auto; } #clickGame .game-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } #clickGame h2{ margin:0; text-align:center; font-size:clamp(28px,5vw,42px); font-weight:800; } #clickGame .subtitle{ text-align:center; color:#666; margin:10px 0 20px; } #clickGame .info-wrap{ display:flex; justify-content:center; gap:12px; margin-bottom:20px; } #clickGame .info-box{ min-width:130px; text-align:center; padding:12px; border-radius:14px; background:#f8fafc; border:1px solid #e5e7eb; } #clickGame .info-box span{ display:block; font-size:13px; color:#666; } #clickGame .info-box b{ display:block; margin-top:4px; font-size:24px; font-weight:800; } #startBtn{ display:block; margin:0 auto 20px; border:none; border-radius:12px; background:#111827; color:#fff; padding:14px 28px; font-size:15px; font-weight:700; cursor:pointer; } #playArea{ position:relative; height:min(60vh,500px); min-height:320px; border-radius:20px; border:2px solid #e5e7eb; background:#f8fafc; overflow:hidden; touch-action:manipulation; } #target{ position:absolute; width:70px; height:70px; border-radius:50%; background:#ef4444; display:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; box-shadow:0 10px 25px rgba(239,68,68,.35); transition:transform .08s; } #target:active{ transform:scale(.9); } #message{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#888; font-size:18px; font-weight:600; text-align:center; padding:20px; } #result{ margin-top:20px; text-align:center; font-size:22px; font-weight:800; } @media(max-width:768px){ #clickGame .game-card{ padding:18px; } #clickGame .info-box{ flex:1; min-width:auto; } #target{ width:64px; height:64px; } } </style> <script> document.addEventListener('DOMContentLoaded',function(){ const scoreEl = document.getElementById('score'); const timeEl = document.getElementById('time'); const target = document.getElementById('target'); const startBtn = document.getElementById('startBtn'); const playArea = document.getElementById('playArea'); const message = document.getElementById('message'); const result = document.getElementById('result'); let score = 0; let timeLeft = 30; let timer = null; let playing = false; function moveTarget(){ const maxX = playArea.clientWidth - target.offsetWidth; const maxY = playArea.clientHeight - target.offsetHeight; const x = Math.random() * maxX; const y = Math.random() * maxY; target.style.left = x + 'px'; target.style.top = y + 'px'; } function hitTarget(){ if(!playing) return; score++; scoreEl.textContent = score; moveTarget(); } target.addEventListener( 'click', hitTarget ); function startGame(){ clearInterval(timer); score = 0; timeLeft = 30; playing = true; scoreEl.textContent = '0'; timeEl.textContent = '30'; result.innerHTML = ''; message.style.display = 'none'; target.style.display = 'block'; moveTarget(); timer = setInterval(function(){ timeLeft--; timeEl.textContent = timeLeft; if(timeLeft <= 0){ clearInterval(timer); playing = false; target.style.display = 'none'; message.style.display = 'flex'; message.innerHTML = '게임 종료 <br>다시 플레이하려면 게임 시작 버튼을 누르세요'; result.innerHTML = ' 최종 점수 : ' + score + '점'; } },1000); } startBtn.addEventListener( 'click', startGame ); }); </script> 무료게임 30초 클릭 게임 게임 모바일 게임 무료게임 techsolayw https://livinghope7.tistory.com/81 https://livinghope7.tistory.com/81#entry81comment Sun, 7 Jun 2026 07:18:39 +0900 2026 IT 인프라 전략: 온프레미스 vs 클라우드 심층 분석 https://livinghope7.tistory.com/80 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2026 IT 인프라 전략: 온프레미스 vs 클라우드 심층 분석</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" /> <style> body { margin: 0; background-color: #ffffff; font-family: 'Pretendard', sans-serif; color: #1e293b; line-height: 1.8; padding: 20px; } .full-width-container { width: 100%; max-width: 900px; margin: 0 auto; } h1 { color: #0f172a; font-size: 2.8rem; text-align: center; margin-bottom: 50px; } h2 { color: #2563eb; border-bottom: 2px solid #2563eb; padding-bottom: 10px; margin-top: 60px; font-size: 1.8rem; } p { font-size: 1.15rem; margin-bottom: 25px; text-align: justify; } .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; } .card { background: #f8fafc; border: 1px solid #e2e8f0; padding: 30px; border-radius: 12px; } .stat { font-size: 2.5rem; font-weight: 800; color: #2563eb; } </style> </head> <body> <div class="full-width-container"> <h1>2026 IT 인프라 트렌드: 온프레미스 vs 클라우드, 무엇이 정답인가?</h1> <div class="dashboard-grid"> <div class="card"> <h3>클라우드 비용 효율성 지표</h3> <div class="stat">68%</div> <p>전년 대비 하이브리드 인프라 도입 기업의 운영 효율성 증대 수준</p> </div> <div class="card"> <h3>데이터 주권 및 보안 만족도</h3> <div class="stat">92%</div> <p>금융/공공 섹터의 온프레미스 유지 결정에 대한 만족도</p> </div> </div> <h2>1. 서론: 인프라 전략의 패러다임 변화</h2> <p>2026년 현재, 기업 IT 인프라의 중심축이 요동치고 있습니다. 지난 10년간 '클라우드 우선 전략(Cloud-First)'은 거스를 수 없는 대세였습니다. 그러나 기술의 성숙과 함께 클라우드 구독 모델의 비용 효율성에 대한 의문이 제기되기 시작했습니다. 저는 SI 프로젝트를 수행하며 요구사항 정의 단계에서 인프라 구성을 고민할 때, 항상 '확장성'과 '비용' 사이의 딜레마를 마주합니다. 클라우드로의 전환은 초기 구축의 민첩성을 제공하지만, 프로젝트 규모가 커질수록 기하급수적으로 늘어나는 데이터 전송 비용과 구독료는 기업의 재무적 부담으로 직결됩니다.</p> <h2>2. 클라우드 비용의 함정과 FinOps의 필요성</h2> <p>클라우드 서비스 제공자(CSP)들의 과금 체계는 매우 복잡합니다. 사용한 만큼 지불한다는 원칙은 매력적이지만, 실제 엔터프라이즈 환경에서는 '예측 불가능한 청구서'라는 리스크를 동반합니다. 특히 고성능 데이터 처리를 요하는 AI 모델 학습이나 대규모 배치 작업 시 클라우드 비용은 예산 범위를 훌쩍 넘어서기 일쑤입니다. 따라서 2026년의 핵심 역량은 클라우드를 도입하는 능력이 아니라, 클라우드 비용을 통제하는 'FinOps(Financial Operations)' 능력입니다. 인프라 설계 시점에 데이터의 특성을 분류하고, 캐싱 전략을 최적화하며, 컴퓨팅 파워의 낭비를 제거하는 세밀한 설계가 뒷받침되지 않으면 클라우드는 '비용의 블랙홀'이 될 수 있습니다.</p> <h2>3. 온프레미스의 재발견: 물리적 제어권과 장기적 가치</h2> <p>데이터 주권과 보안이 강조되는 시대에 온프레미스는 다시금 핵심 자산으로 떠오르고 있습니다. 특히 금융, 의료, 제조 등 민감 데이터를 다루는 산업군에서는 보안 사고 시의 책임 소재와 데이터 통제권 측면에서 온프레미스를 고집하는 경향이 뚜렷합니다. 5년 이상의 장기적인 TCO(총소유비용) 관점에서 볼 때, 고사양 서버 하드웨어를 직접 도입하여 운영하는 비용이 클라우드의 월 구독료를 상쇄하고도 남는 경우가 많습니다. 이는 기업의 자산 구조를 운영비(OpEx)가 아닌 자본비(CapEx)로 전환하여 기업 가치를 방어하려는 경영적 판단이기도 합니다.</p> <h2>4. 2026년의 정답: 전략적 하이브리드 인프라</h2> <p>온프레미스냐 클라우드냐의 이분법적 사고는 이제 과거의 유물이 되었습니다. 2026년의 성공적인 기업들은 '전략적 하이브리드 아키텍처'를 채택합니다. 핵심 비즈니스 로직과 민감 데이터는 온프레미스 환경에서 견고하게 관리하고, 트래픽 변화가 심하거나 실험적인 서비스는 클라우드를 활용하는 방식입니다. 인프라 담당자들은 이제 클라우드만을 바라보는 것이 아니라, 기업 내부의 온프레미스 환경과 외부 클라우드를 하나의 유기체처럼 통합 관리할 수 있는 가시성(Visibility) 확보에 집중해야 합니다.</p> <h2>5. 맺음말: 인프라 아키텍트의 미래 역량</h2> <p>결국 IT 인프라는 비즈니스의 성장 속도에 맞춰 끊임없이 변주해야 합니다. 앞으로의 인프라 아키텍트는 단순한 서버 운영자가 아닌, 비즈니스 가치와 기술 인프라 사이의 비용-성능 균형을 설계하는 전략가여야 합니다. 현재 어떤 인프라 고민을 하고 계신가요? 그 고민이 깊어질수록 당신의 프로젝트는 더 단단해질 것입니다.</p> <div class="disclaimer">※ 본 포스팅은 작성자의 개인적인 견해와 분석을 바탕으로 작성되었으며, 특정 투자나 사업 결정을 권유하는 목적이 아닙니다. 모든 의사결정의 책임은 본인에게 있음을 알려드립니다.</div> <div class="footer">&copy; 2026 kr.techsolayw. All Rights Reserved.</div> </body> </html> IT High Tech IT 인프라 온프레미스 클라우드 techsolayw https://livinghope7.tistory.com/80 https://livinghope7.tistory.com/80#entry80comment Sun, 7 Jun 2026 07:12:29 +0900