라이프&amp;머니 계산기 &ndash; 부동산&middot;금융&middot;생활 https://no1card.tistory.com/ 초보자도 쉽고 빠르게 이용 가능한 올인원 무료 계산기 - 부동산&middot;금융&middot;생활 계산기를 직접 만들어 공유합니다! ko Tue, 14 Apr 2026 04:34:25 +0900 TISTORY 100 hiker's 라이프&amp;머니 계산기 &ndash; 부동산&middot;금융&middot;생활 https://tistory1.daumcdn.net/tistory/4982824/attach/211a95be456841c69d900b6d4942bd5e https://no1card.tistory.com [경제적 자유 자산배분 계산기] 20대 월급300만원으로 10억 모으는 방법 https://no1card.tistory.com/entry/%EA%B2%BD%EC%A0%9C%EC%A0%81-%EC%9E%90%EC%9C%A0-%EC%9E%90%EC%82%B0%EB%B0%B0%EB%B6%84-%EA%B3%84%EC%82%B0%EA%B8%B0-20%EB%8C%80-%EC%9B%94%EA%B8%89300%EB%A7%8C%EC%9B%90%EC%9C%BC%EB%A1%9C-10%EC%96%B5-%EB%AA%A8%EC%9C%BC%EB%8A%94-%EB%B0%A9%EB%B2%95 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="500" data-origin-height="500"><span data-url="https://blog.kakaocdn.net/dn/cEhtBX/btsPuEMXO2I/wXKBeYJCqJ6hxYN0XkVqJ0/img.png" data-phocus="https://blog.kakaocdn.net/dn/cEhtBX/btsPuEMXO2I/wXKBeYJCqJ6hxYN0XkVqJ0/img.png"><img src="https://blog.kakaocdn.net/dn/cEhtBX/btsPuEMXO2I/wXKBeYJCqJ6hxYN0XkVqJ0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcEhtBX%2FbtsPuEMXO2I%2FwXKBeYJCqJ6hxYN0XkVqJ0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="500" height="500" data-origin-width="500" data-origin-height="500"/></span></figure> </p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>경제적 자유 포트폴리오 : 투자 수익률 계산기</title> <meta name="description" content="자산별 투자 비중으로 경제적 자유를 달성할 수 있는 연 수익률을 계산해보세요. 주식, 채권, 부동산, 예적금, 가상자산 포함."> <meta name="keywords" content="경제적 자유, 포트폴리오 계산기, 자산 배분, 투자 수익률, 연 수익률 계산, 파이어족"> <meta property="og:title" content="20대부터 시작하는 경제적 자유 포트폴리오 전략"> <meta property="og:description" content="20대를 위한 재무 전략과 투자 포트폴리오 구성법. 지금 시작해야 할 7가지 핵심 전략을 확인하세요."> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretendard@1.3.6/dist/web/static/pretendard.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.5/dist/chart.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { box-sizing: border-box; } body { font-family: 'Pretendard', Arial, sans-serif; background-color: #f9f9f9; color: #333; padding: 20px; line-height: 1.6; } h1 { text-align: center; color: #003366; margin-bottom: 30px; } .calculator { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .input-group { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; } .input-item { flex: 1; min-width: 200px; } label { display: block; margin-top: 15px; font-weight: bold; color: #003366; } input[type="number"], select { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; } input[type="range"] { width: 100%; margin-top: 10px; } input[type="range"]:focus, button:focus { outline: 2px solid #003366; outline-offset: 2px; } .slider-value { text-align: right; font-size: 14px; color: #666; } button { margin-top: 20px; width: 100%; background-color: #003366; color: #fff; padding: 12px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #004080; } .result { margin-top: 30px; padding: 20px; background: #eef5ff; border-radius: 10px; line-height: 1.8; } .result h2 { color: #003366; margin-top: 0; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .portfolio-types { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; } .portfolio-card { flex: 1; min-width: 200px; background: white; border-radius: 10px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .portfolio-card h3 { margin-top: 0; color: #003366; } .asset-list { list-style: none; padding: 0; } .asset-list li { margin-bottom: 5px; display: flex; justify-content: space-between; } .chart-container { margin-top: 30px; position: relative; min-height: 300px; height: 400px; } canvas { width: 100% !important; } .comparison { margin-top: 30px; } .info-icon { color: #666; margin-left: 5px; cursor: help; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 250px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -125px; opacity: 0; transition: opacity 0.3s; font-size: 14px; font-weight: normal; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid #ccc; } .tab { padding: 10px 20px; cursor: pointer; background: #f0f0f0; border: 1px solid #ccc; border-bottom: none; border-radius: 5px 5px 0 0; margin-right: 5px; } .tab.active { background: #003366; color: white; } .tab-content { display: none; } .tab-content.active { display: block; } .warning { color: #cc0000; font-weight: bold; margin-top: 10px; } .success { color: #4CAF50; font-weight: bold; margin-top: 10px; } .positive { color: #4CAF50; } .negative { color: #cc0000; } .chart-row { display: flex; flex-wrap: wrap; gap: 20px; } .chart-col { flex: 1; min-width: 300px; } @media (max-width: 600px) { .input-group { flex-direction: column; } .portfolio-types { flex-direction: column; } .chart-row { flex-direction: column; } .tooltip .tooltiptext { width: 200px; margin-left: -100px; } } </style> </head> <body> <h1> 경제적 자유를 위한 자산 배분 포트폴리오 계산기</h1> <div class="calculator"> <div class="tabs" role="tablist"> <div class="tab active" onclick="openTab(event, 'basic')" role="tab" aria-selected="true">기본 설정</div> <div class="tab" onclick="openTab(event, 'advanced')" role="tab" aria-selected="false">고급 설정</div> <div class="tab" onclick="openTab(event, 'custom')" role="tab" aria-selected="false">커스텀 포트폴리오</div> </div> <div id="basic" class="tab-content active"> <div class="input-group"> <div class="input-item"> <label for="salary">월 급여 (만원)</label> <select id="salary" aria-label="월 급여 선택"> <option value="200">200만 원</option> <option value="250">250만 원</option> <option value="300" selected>300만 원</option> <option value="350">350만 원</option> <option value="400">400만 원</option> <option value="500">500만 원</option> <option value="custom">직접 입력</option> </select> <input type="number" id="customSalary" style="display: none; margin-top: 5px;" placeholder="직접 입력 (만원)" value="300" min="0" aria-label="커스텀 월 급여 입력"> </div> <div class="input-item"> <label for="monthlySaving">월 저축액 (만원)</label> <input type="number" id="monthlySaving" value="100" min="0" aria-label="월 저축액 입력"> </div> </div> <div class="input-group"> <div class="input-item"> <label for="yearsRange">투자 기간 (년)</label> <input type="range" id="yearsRange" min="5" max="40" value="20" step="1" aria-label="투자 기간 선택"> <div class="slider-value"><span id="yearsValue">20</span>년</div> <input type="number" id="years" value="20" min="5" max="40" style="display: none;" aria-hidden="true"> </div> <div class="input-item"> <label for="targetRange">목표 금액 (억원)</label> <input type="range" id="targetRange" min="1" max="10" value="1" step="0.5" aria-label="목표 금액 선택"> <div class="slider-value"><span id="targetValue">1</span>억원</div> <input type="number" id="targetAmount" value="1" min="1" max="10" step="0.5" style="display: none;" aria-hidden="true"> </div> </div> <div class="input-group"> <div class="input-item"> <label for="initialCapital">초기 자본 (만원)</label> <input type="number" id="initialCapital" value="0" min="0" aria-label="초기 자본 입력"> </div> <div class="input-item"> <label for="inflationRate">연간 인플레이션 (%)</label> <input type="number" id="inflationRate" value="2.5" min="0" max="10" step="0.1" aria-label="연간 인플레이션 입력"> </div> </div> </div> <div id="advanced" class="tab-content"> <div class="input-group"> <div class="input-item"> <label for="portfolioType">포트폴리오 유형</label> <select id="portfolioType" aria-label="포트폴리오 유형 선택"> <option value="balanced" selected>균형형</option> <option value="conservative">안정형</option> <option value="aggressive">공격형</option> <option value="custom">커스텀</option> </select> </div> <div class="input-item"> <label for="riskTolerance">위험 감내도</label> <input type="range" id="riskTolerance" min="1" max="10" value="5" aria-label="위험 감내도 선택"> <div class="slider-value"> <span style="color: #003366;">안전</span> <span id="riskValue">5</span>/10 <span style="color: #cc0000;">공격</span> </div> </div> </div> </div> <div id="custom" class="tab-content"> <div class="input-group"> <div class="input-item"> <label for="stockPercent">주식 (%)</label> <input type="range" id="stockPercent" min="0" max="100" value="30" aria-label="주식 비중 선택"> <div class="slider-value"><span id="stockValue">30</span>%</div> </div> <div class="input-item"> <label for="bondPercent">국채 (%)</label> <input type="range" id="bondPercent" min="0" max="100" value="20" aria-label="국채 비중 선택"> <div class="slider-value"><span id="bondValue">20</span>%</div> </div> </div> <div class="input-group"> <div class="input-item"> <label for="dividendPercent">배당주 (%)</label> <input type="range" id="dividendPercent" min="0" max="100" value="20" aria-label="배당주 비중 선택"> <div class="slider-value"><span id="dividendValue">20</span>%</div> </div> <div class="input-item"> <label for="realEstatePercent">부동산 (%)</label> <input type="range" id="realEstatePercent" min="0" max="100" value="15" aria-label="부동산 비중 선택"> <div class="slider-value"><span id="realEstateValue">15</span>%</div> </div> </div> <div class="input-group"> <div class="input-item"> <label for="goldPercent">금 (%)</label> <input type="range" id="goldPercent" min="0" max="100" value="10" aria-label="금 비중 선택"> <div class="slider-value"><span id="goldValue">10</span>%</div> </div> <div class="input-item"> <label for="cryptoPercent">가상자산 (%)</label> <input type="range" id="cryptoPercent" min="0" max="100" value="5" aria-label="가상자산 비중 선택"> <div class="slider-value"><span id="cryptoValue">5</span>%</div> </div> </div> <div class="input-group"> <div class="input-item"> <label for="savingsPercent">예적금 (%)</label> <input type="range" id="savingsPercent" min="0" max="100" value="0" aria-label="예적금 비중 선택"> <div class="slider-value"><span id="savingsValue">0</span>%</div> </div> </div> <div id="customTotalWarning" class="warning" style="display: none;"></div> <div id="customTotalSuccess" class="success" style="display: none;"></div> <div id="customTotal">총합: <span id="totalPercent">100</span>%</div> </div> <button onclick="calculatePortfolio()" aria-label="경제적 자유 시뮬레이션 실행"><i class="fas fa-calculator"></i> 경제적 자유 시뮬레이션 실행</button> <div class="result" id="result"> <h2> 분석 결과</h2> <div id="resultContent">계산 버튼을 클릭하여 결과를 확인하세요.</div> </div> <div class="portfolio-types" id="portfolioRecommendations"></div> <div class="chart-row"> <div class="chart-col"> <div class="chart-container"> <canvas id="wealthChart" aria-label="자산 성장 차트"></canvas> </div> </div> <div class="chart-col"> <div class="chart-container"> <canvas id="portfolioChart" aria-label="포트폴리오 비중 차트"></canvas> </div> </div> </div> <div class="comparison chart-container"> <canvas id="comparisonChart" aria-label="포트폴리오 비교 차트"></canvas> </div> </div> <script> // 차트 객체 관리 let assetChart = null; let portfolioPieChart = null; let comparisonChart = null; let yearlyData = []; // 디바운스 타이머 let debounceTimer = null; // 초기화 함수 function initialize() { // 슬라이더와 입력 동기화 document.getElementById('yearsRange').addEventListener('input', function() { document.getElementById('yearsValue').textContent = this.value; document.getElementById('years').value = this.value; }); document.getElementById('targetRange').addEventListener('input', function() { document.getElementById('targetValue').textContent = this.value; document.getElementById('targetAmount').value = this.value; }); document.getElementById('riskTolerance').addEventListener('input', function() { document.getElementById('riskValue').textContent = this.value; }); // 자산 할당 슬라이더 const assetSliders = ['stock', 'bond', 'dividend', 'realEstate', 'gold', 'crypto', 'savings']; assetSliders.forEach(asset => { const slider = document.getElementById(`${asset}Percent`); const valueSpan = document.getElementById(`${asset}Value`); slider.addEventListener('input', function() { valueSpan.textContent = this.value; updateCustomPortfolio(); }); }); // 사용자 정의 급여 입력 처리 document.getElementById('salary').addEventListener('change', function() { const customSalaryInput = document.getElementById('customSalary'); if (this.value === 'custom') { customSalaryInput.style.display = 'block'; customSalaryInput.focus(); } else { customSalaryInput.style.display = 'none'; document.getElementById('monthlySaving').dispatchEvent(new Event('input')); } }); // 월 저축액 유효성 검사 document.getElementById('monthlySaving').addEventListener('input', function() { validateMonthlySaving(); }); // 사용자 정의 급여 유효성 검사 document.getElementById('customSalary').addEventListener('input', function() { validateMonthlySaving(); }); // 포트폴리오 유형 변경 처리 document.getElementById('portfolioType').addEventListener('change', function() { if (this.value === 'custom') { openTab(null, 'custom'); } }); // 초기 로드 시 결과 불러오기 loadResults(); updateCustomPortfolio(); } // 월 저축액 유효성 검사 function validateMonthlySaving() { const salarySelect = document.getElementById('salary'); const customSalary = document.getElementById('customSalary'); const salary = salarySelect.value === 'custom' ? parseFloat(customSalary.value) || 0 : parseFloat(salarySelect.value); const saving = parseFloat(document.getElementById('monthlySaving').value) || 0; const salaryInput = salarySelect.value === 'custom' ? customSalary : salarySelect; if (salary <= 0) { salaryInput.style.borderColor = '#cc0000'; document.getElementById('resultContent').innerHTML = '<p class="warning">월 급여는 0보다 커야 합니다.</p>'; return false; } else { salaryInput.style.borderColor = '#ccc'; } if (saving > salary) { document.getElementById('monthlySaving').style.borderColor = '#cc0000'; document.getElementById('resultContent').innerHTML = '<p class="warning">월 저축액은 월 급여를 초과할 수 없습니다.</p>'; return false; } else if (saving <= 0) { document.getElementById('monthlySaving').style.borderColor = '#cc0000'; document.getElementById('resultContent').innerHTML = '<p class="warning">월 저축액은 0보다 커야 합니다.</p>'; return false; } else { document.getElementById('monthlySaving').style.borderColor = '#ccc'; document.getElementById('resultContent').innerHTML = '계산 버튼을 클릭하여 결과를 확인하세요.'; return true; } } // 탭 전환 함수 function openTab(evt, tabName) { const tabContents = document.getElementsByClassName('tab-content'); for (let i = 0; i < tabContents.length; i++) { tabContents[i].classList.remove('active'); tabContents[i].setAttribute('aria-hidden', 'true'); } const tabs = document.getElementsByClassName('tab'); for (let i = 0; i < tabs.length; i++) { tabs[i].classList.remove('active'); tabs[i].setAttribute('aria-selected', 'false'); } document.getElementById(tabName).classList.add('active'); document.getElementById(tabName).setAttribute('aria-hidden', 'false'); if (evt) { evt.currentTarget.classList.add('active'); evt.currentTarget.setAttribute('aria-selected', 'true'); } else { const tabIndex = Array.from(tabs).findIndex(tab => tab.onclick.toString().includes(tabName)); if (tabIndex >= 0) { tabs[tabIndex].classList.add('active'); tabs[tabIndex].setAttribute('aria-selected', 'true'); } } } // 사용자 정의 포트폴리오 업데이트 function updateCustomPortfolio() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { const total = ['stock', 'bond', 'dividend', 'realEstate', 'gold', 'crypto', 'savings'].reduce((sum, asset) => { return sum + parseInt(document.getElementById(`${asset}Percent`).value); }, 0); document.getElementById('totalPercent').textContent = total; const warningElement = document.getElementById('customTotalWarning'); const successElement = document.getElementById('customTotalSuccess'); if (total !== 100) { document.getElementById('portfolioType').value = 'custom'; warningElement.style.display = 'block'; successElement.style.display = 'none'; warningElement.textContent = `경고: 자산 비중 합계가 100%가 아닙니다 (현재 ${total}%)`; warningElement.style.color = total > 100 ? '#cc0000' : '#ff9900'; } else { warningElement.style.display = 'none'; successElement.style.display = 'block'; successElement.textContent = '자산 비중 합계가 100%로 적절합니다.'; } }, 300); } // 값에 따른 색상 반환 함수 function getValueColor(value) { return value >= 0 ? 'positive' : 'negative'; } // 포트폴리오 계산 함수 function calculatePortfolio() { // 입력 유효성 검사 if (!validateMonthlySaving()) { return; } const salarySelect = document.getElementById('salary'); const customSalary = document.getElementById('customSalary'); const salary = salarySelect.value === 'custom' ? parseFloat(customSalary.value) || 0 : parseFloat(salarySelect.value); const saving = parseFloat(document.getElementById('monthlySaving').value) * 10000; const years = parseInt(document.getElementById('years').value); const targetAmount = parseFloat(document.getElementById('targetAmount').value) * 100000000; const initialCapital = Math.max(0, parseFloat(document.getElementById('initialCapital').value) * 10000 || 0); const inflationRate = parseFloat(document.getElementById('inflationRate').value) / 100; const portfolioType = document.getElementById('portfolioType').value; const riskTolerance = parseInt(document.getElementById('riskTolerance').value); // 사용자 정의 포트폴리오 총합 검사 if (portfolioType === 'custom') { const total = ['stock', 'bond', 'dividend', 'realEstate', 'gold', 'crypto', 'savings'].reduce((sum, asset) => { return sum + parseInt(document.getElementById(`${asset}Percent`).value); }, 0); if (total !== 100) { alert(`자산 비중 합계가 100%가 되어야 합니다. 현재 ${total}% 입니다.`); return; } } // 포트폴리오 정의 const portfolios = { 'conservative': { 국채: 40, 배당주: 20, 예적금: 20, 금: 10, 부동산: 10, 설명: "안정적인 수익을 추구하는 포트폴리오로, 변동성이 낮지만 수익률도 상대적으로 낮습니다." }, 'balanced': { 주식: 30, 국채: 20, 배당주: 20, 부동산: 15, 금: 10, 가상자산: 5, 설명: "안정성과 성장을 균형있게 추구하는 포트폴리오로, 대부분의 투자자에게 적합합니다." }, 'aggressive': { 주식: 40, 배당주: 20, 가상자산: 15, 부동산: 10, 금: 10, 예적금: 5, 설명: "높은 수익을 추구하는 포트폴리오로, 변동성이 크지만 장기적으로 높은 수익을 기대할 수 있습니다." }, 'custom': { 주식: parseInt(document.getElementById('stockPercent').value), 국채: parseInt(document.getElementById('bondPercent').value), 배당주: parseInt(document.getElementById('dividendPercent').value), 부동산: parseInt(document.getElementById('realEstatePercent').value), 금: parseInt(document.getElementById('goldPercent').value), 가상자산: parseInt(document.getElementById('cryptoPercent').value), 예적금: parseInt(document.getElementById('savingsPercent').value), 설명: "사용자가 직접 구성한 커스텀 포트폴리오입니다." } }; // 자산 기대 수익률 (위험 감내도에 따라 조정) const baseReturns = { 주식: 0.08, 국채: 0.03, 배당주: 0.07, 부동산: 0.05, 예적금: 0.025, 금: 0.04, 가상자산: 0.12 }; const riskFactor = riskTolerance / 5; // 0.2 to 2 const expectedReturns = {}; for (const asset in baseReturns) { if (asset === '국채' || asset === '예적금') { expectedReturns[asset] = baseReturns[asset] * (1 - (riskTolerance - 5) / 20); } else if (asset === '가상자산') { expectedReturns[asset] = baseReturns[asset] * riskFactor; } else { expectedReturns[asset] = baseReturns[asset] * (0.8 + riskTolerance / 25); } } // 선택한 포트폴리오의 기대 수익률 계산 const selectedPortfolio = portfolios[portfolioType]; let totalReturn = 0; for (const asset in selectedPortfolio) { if (asset !== '설명' && expectedReturns[asset]) { totalReturn += (selectedPortfolio[asset] / 100) * expectedReturns[asset]; } } // 자산 성장 시뮬레이션 let totalAsset = initialCapital; let totalContribution = 0; yearlyData = []; let achievedYear = null; let monthlyContribution = saving; let excessAmount = 0; let excessYears = 0; for (let i = 1; i <= years; i++) { if (i > 1) { monthlyContribution *= (1 + inflationRate); } totalContribution += monthlyContribution * 12; const prevAsset = totalAsset; totalAsset = (totalAsset + monthlyContribution * 12) * (1 + totalReturn); yearlyData.push({ year: i, asset: totalAsset, contribution: monthlyContribution * 12, growth: totalAsset - prevAsset - (monthlyContribution * 12) }); if (totalAsset >= targetAmount && achievedYear === null) { achievedYear = i; excessAmount = totalAsset - targetAmount; excessYears = years - i; } } // 총 수익률 및 연평균 수익률 계산 const totalReturnRate = ((totalAsset - initialCapital - totalContribution) / (initialCapital + totalContribution)) * 100; const annualizedReturn = (Math.pow(totalAsset / (initialCapital + totalContribution), 1 / years) - 1) * 100; const realAnnualizedReturn = ((1 + annualizedReturn/100) / (1 + inflationRate) - 1) * 100; // 샤프 비율 계산 const riskFreeRate = 0.02; const portfolioVolatility = riskTolerance * 0.02; const sharpeRatio = (totalReturn - riskFreeRate) / portfolioVolatility; // 인플레이션 조정 목표 금액 const inflationAdjustedTarget = targetAmount * Math.pow(1 + inflationRate, achievedYear ?? years); // 초기 자본 증가율 계산 (초기 자본이 0보다 큰 경우에만) const initialCapitalGrowth = initialCapital > 0 ? ((totalAsset / initialCapital - 1) * 100).toFixed(2) : 'N/A (초기 자본 없음)'; // 결과 표시 const resultHTML = ` <div class="summary"> <p><i class="fas fa-wallet"></i> <strong>월 ${salary}만 원</strong> 중 <strong>${(saving / 10000).toLocaleString()}만 원</strong> 저축 (${((saving / (salary * 10000)) * 100).toFixed(1)}%)</p> <p><i class="fas fa-bullseye"></i> <strong>목표 금액:</strong> ${(targetAmount / 100000000).toLocaleString()}억원</p> <p><i class="fas fa-calendar-alt"></i> <strong>투자 기간:</strong> ${years}년</p> <p><i class="fas fa-chart-line"></i> <strong>예상 연평균 수익률 (CAGR):</strong> <span class="${getValueColor(annualizedReturn)}">${annualizedReturn.toFixed(2)}%</span></p> <p><i class="fas fa-inflation"></i> <strong>실질 연평균 수익률 (인플레이션 조정):</strong> <span class="${getValueColor(realAnnualizedReturn)}">${realAnnualizedReturn.toFixed(2)}%</span></p> <p><i class="fas fa-chart-bar"></i> <strong>샤프 비율:</strong> ${sharpeRatio.toFixed(2)}</p> <hr> <p><i class="fas fa-trophy"></i> <strong>목표 달성 예상 시점:</strong> ${achievedYear ? achievedYear + '년 후' : '도달 불가'}</p> ${achievedYear ? `<p><i class="fas fa-coins"></i> <strong>목표 달성 시 초과 금액:</strong> ${Math.round(excessAmount / 10000).toLocaleString()}만원 (${excessYears}년 초과)</p>` : ''} <p><i class="fas fa-inflation"></i> <strong>물가 반영 목표 금액 (${achievedYear ?? years}년 후):</strong> 약 ${Math.round(inflationAdjustedTarget / 100000000).toLocaleString()}억원</p> <p><i class="fas fa-coins"></i> <strong>최종 예상 자산:</strong> ${Math.round(totalAsset / 10000).toLocaleString()}만원</p> <p><i class="fas fa-percentage"></i> <strong>초기 자본 증가율:</strong> ${typeof initialCapitalGrowth === 'string' ? initialCapitalGrowth : `<span class="${getValueColor(initialCapitalGrowth)}">${initialCapitalGrowth}%</span>`} (초기 자본 ${(initialCapital/10000).toLocaleString()}만원 대비) </p> <p><i class="fas fa-money-bill-trend-up"></i> <strong>투자 수익률:</strong> <span class="${getValueColor(totalReturnRate)}">${totalReturnRate.toFixed(2)}%</span> (총 투자 원금 ${((initialCapital + totalContribution)/10000).toLocaleString()}만원 대비) </p> <p><i class="fas fa-chart-pie"></i> <strong>포트폴리오 유형:</strong> ${portfolioType === 'conservative' ? '안정형' : portfolioType === 'balanced' ? '균형형' : portfolioType === 'aggressive' ? '공격형' : '커스텀'}</p> <button onclick="exportToCSV()" aria-label="결과를 CSV로 내보내기">결과 CSV로 내보내기</button> </div> `; document.getElementById('resultContent').innerHTML = resultHTML; // 포트폴리오 추천 표시 renderPortfolioRecommendations(portfolios, expectedReturns, portfolioType); // 자산 성장 차트 생성 renderWealthChart(targetAmount, years, initialCapital); // 포트폴리오 할당 차트 생성 renderPortfolioChart(selectedPortfolio); // 포트폴리오 비교 차트 생성 renderComparisonChart(portfolios, expectedReturns, portfolioType, years, initialCapital, saving, inflationRate); // 결과 저장 saveResults(); } // 포트폴리오 추천 렌더링 function renderPortfolioRecommendations(portfolios, expectedReturns, currentPortfolioType) { let portfolioHTML = ''; for (const type in portfolios) { if (type === 'custom') continue; let portfolioReturn = 0; for (const asset in portfolios[type]) { if (asset !== '설명' && expectedReturns[asset]) { portfolioReturn += (portfolios[type][asset] / 100) * expectedReturns[asset]; } } const isCurrent = type === currentPortfolioType; portfolioHTML += ` <div class="portfolio-card" ${isCurrent ? 'style="border: 2px solid #003366;"' : ''}> <h3>${type === 'conservative' ? '안정형' : type === 'balanced' ? '균형형' : '공격형'} 포트폴리오 <span class="tooltip"> <i class="fas fa-info-circle info-icon"></i> <span class="tooltiptext">${portfolios[type].설명}</span> </span> <small>(${(portfolioReturn * 100).toFixed(2)}%)</small> ${isCurrent ? '<span style="color:#003366;font-size:0.8em;">(현재 선택)</span>' : ''} </h3> <ul class="asset-list"> `; for (const asset in portfolios[type]) { if (asset !== '설명') { portfolioHTML += `<li>${asset}: <strong>${portfolios[type][asset]}%</strong></li>`; } } portfolioHTML += ` </ul> </div> `; } document.getElementById('portfolioRecommendations').innerHTML = portfolioHTML; } // 자산 성장 차트 렌더링 function renderWealthChart(targetAmount, years, initialCapital) { const ctx = document.getElementById('wealthChart').getContext('2d'); if (assetChart) { assetChart.destroy(); } assetChart = new Chart(ctx, { type: 'line', data: { labels: yearlyData.map(d => `${d.year}년`), datasets: [{ label: '총 자산', data: yearlyData.map(d => d.asset), borderColor: '#003366', backgroundColor: 'rgba(0, 51, 102, 0.1)', fill: true, tension: 0.3 }, { label: '목표 금액', data: yearlyData.map(d => targetAmount), borderColor: '#cc0000', borderDash: [5, 5], backgroundColor: 'rgba(204, 0, 0, 0.05)', fill: true }, { label: '투자 원금', data: yearlyData.map(d => d.contribution + (d.year === 1 ? initialCapital : 0)), borderColor: '#4CAF50', backgroundColor: 'rgba(76, 175, 80, 0.1)', fill: true, tension: 0.3 }] }, options: getChartOptions('자산 성장 추이') }); } // 포트폴리오 할당 차트 렌더링 function renderPortfolioChart(selectedPortfolio) { const portfolioCtx = document.getElementById('portfolioChart').getContext('2d'); if (portfolioPieChart) { portfolioPieChart.destroy(); } const portfolioLabels = []; const portfolioData = []; const backgroundColors = [ 'rgba(54, 162, 235, 0.7)', 'rgba(75, 192, 192, 0.7)', 'rgba(255, 206, 86, 0.7)', 'rgba(153, 102, 255, 0.7)', 'rgba(255, 159, 64, 0.7)', 'rgba(199, 199, 199, 0.7)', 'rgba(255, 99, 132, 0.7)' ]; for (const asset in selectedPortfolio) { if (asset !== '설명' && selectedPortfolio[asset] > 0) { portfolioLabels.push(asset); portfolioData.push(selectedPortfolio[asset]); } } portfolioPieChart = new Chart(portfolioCtx, { type: 'doughnut', data: { labels: portfolioLabels, datasets: [{ data: portfolioData, backgroundColor: backgroundColors.slice(0, portfolioLabels.length), borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 1000, easing: 'easeInOutQuad' }, plugins: { legend: { position: 'right', labels: { font: { size: 14, family: 'Pretendard, Arial, sans-serif' }, color: '#003366' } }, title: { display: true, text: '포트폴리오 자산 배분', font: { size: 16, family: 'Pretendard, Arial, sans-serif' }, color: '#003366' }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.raw; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percentage = Math.round((value / total) * 100); return `${label}: ${value}% (${percentage}%)`; } } } }, cutout: '60%', } }); } // 포트폴리오 비교 차트 렌더링 function renderComparisonChart(portfolios, expectedReturns, currentPortfolioType, years, initialCapital, saving, inflationRate) { const comparisonCtx = document.getElementById('comparisonChart').getContext('2d'); if (comparisonChart) { comparisonChart.destroy(); } const comparisonData = []; // 다른 포트폴리오 유형에 대한 데이터 생성 for (const type in portfolios) { if (type === 'custom' && currentPortfolioType !== 'custom') continue; let portfolioReturn = 0; for (const asset in portfolios[type]) { if (asset !== '설명' && expectedReturns[asset]) { portfolioReturn += (portfolios[type][asset] / 100) * expectedReturns[asset]; } } let compareAsset = initialCapital; let compareValue = []; let compareContribution = saving * 12; for (let i = 1; i <= years; i++) { compareAsset = (compareAsset + compareContribution) * (1 + portfolioReturn); compareValue.push(compareAsset); if (i > 1) { compareContribution *= (1 + inflationRate); } } const isCurrent = type === currentPortfolioType; comparisonData.push({ label: type === 'conservative' ? '안정형' : type === 'balanced' ? '균형형' : type === 'aggressive' ? '공격형' : '내 포트폴리오', data: compareValue, borderColor: type === 'conservative' ? '#4CAF50' : type === 'balanced' ? '#003366' : type === 'aggressive' ? '#FF5722' : '#9C27B0', backgroundColor: type === 'conservative' ? 'rgba(76, 175, 80, 0.1)' : type === 'balanced' ? 'rgba(0, 51, 102, 0.1)' : type === 'aggressive' ? 'rgba(255, 87, 34, 0.1)' : 'rgba(156, 39, 176, 0.1)', borderWidth: isCurrent ? 3 : 1, fill: true, tension: 0.3 }); } comparisonChart = new Chart(comparisonCtx, { type: 'line', data: { labels: Array.from({length: years}, (_, i) => `${i+1}년`), datasets: comparisonData }, options: getChartOptions('포트폴리오 유형별 비교') }); } // 공통 차트 옵션 function getChartOptions(title) { return { responsive: true, maintainAspectRatio: false, animation: { duration: 1000, easing: 'easeInOutQuad' }, plugins: { legend: { labels: { font: { size: 14, family: 'Pretendard, Arial, sans-serif' }, color: '#003366' } }, title: { display: true, text: title, font: { size: 16, family: 'Pretendard, Arial, sans-serif' }, color: '#003366' }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) label += ': '; const value = context.raw; if (value >= 100000000) { return label + (value / 100000000).toFixed(1) + '억원'; } else if (value >= 10000) { return label + (value / 10000).toFixed(1) + '만원'; } return label + value.toLocaleString() + '원'; } } } }, scales: { y: { title: { display: true, text: '자산 규모 (원)' }, ticks: { callback: function(value) { if (value >= 100000000) { return (value / 100000000).toLocaleString() + '억'; } else if (value >= 10000) { return (value / 10000).toLocaleString() + '만'; } return value.toLocaleString(); } } } } }; } // 결과 저장 function saveResults() { const result = document.getElementById('resultContent').innerHTML; localStorage.setItem('portfolioResult', result); } // 결과 불러오기 function loadResults() { const savedResult = localStorage.getItem('portfolioResult'); if (savedResult) { document.getElementById('resultContent').innerHTML = savedResult; } } // CSV로 내보내기 function exportToCSV() { if (!yearlyData.length) { alert('먼저 계산을 실행하여 데이터를 생성해주세요.'); return; } try { const headers = ['연도,총 자산(만원),투자 원금(만원),수익(만원)']; const rows = yearlyData.map(d => `${d.year},${(d.asset / 10000).toFixed(1)},${(d.contribution / 10000).toFixed(1)},${(d.growth / 10000).toFixed(1)}`); const csv = headers.concat(rows).join('\n'); const blob = new Blob(["\uFEFF" + csv], { type: 'text/csv;charset=utf-8;' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'portfolio_result.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); } catch (error) { console.error('CSV export error:', error); alert('CSV 내보내기 중 오류가 발생했습니다.'); } } // 초기화 실행 window.addEventListener('DOMContentLoaded', initialize); </script> </body> </html> <p data-ke-size="size16">경제적 자유를 꿈꾸는 모든 이들을 위한 자산 배분 수익률 계산기&nbsp;</p> <table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft" data-ke-style="style8"> <tbody> <tr> <td style="width: 100%;"> <ol style="list-style-type: decimal;" data-ke-list-type="decimal" data-tight="true"> <li><a href="#about">경제적 자유 포트폴리오 계산기는</a></li> <li><a href="#category">주요 기능</a></li> <li><a href="#location">사용 방법</a></li> <li><a href="#port">포트폴리오 유형</a></li> <li><a href="#chart">차트 및 분석</a></li> <li><a href="#why">왜 이 계산기를 사용해야 하나?</a></li> </ol> </td> </tr> </tbody> </table> <h2 id="#about" data-ke-size="size26">경제적자유를 위한 포트폴리오 계산기는?</h2> <p data-ke-size="size16">경제적 자유를 꿈꾸는 분들을 위해 설계된 <b>경제적 자유 포트폴리오 수익률 계산기</b>는 투자 목표를 달성하기 위한 맞춤형 자산 배분 전략을 제공합니다. 이 도구는 주식, 채권, 부동산, 예적금, 가상자산 등 다양한 자산 클래스를 기반으로 연평균 수익률과 목표 달성 시점을 예측합니다. 사용자는 월 급여, 저축액, 투자 기간, 초기 자본 등을 입력하여 개인화된 투자 계획을 세울 수 있습니다.</p> <p data-ke-size="size16">이 계산기는 초보 투자자부터 전문 투자자까지 모두에게 적합하며, 직관적인 인터페이스와 시각적 차트를 통해 복잡한 투자 계산을 쉽게 이해할 수 있도록 돕습니다.</p> <h2 id="#category" data-ke-size="size26">주요 기능</h2> <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li><b>자산 배분 설정</b>: 주식, 국채, 배당주, 부동산, 금, 가상자산, 예적금의 비중을 자유롭게 조정 가능.</li> <li><b>위험 감내도 조정</b>: 1(안전)에서 10(공격)까지의 위험 선호도를 설정하여 수익률을 최적화.</li> <li><b>인플레이션 반영</b>: 연간 인플레이션율을 입력하여 물가 상승에 따른 목표 금액을 계산.</li> <li><b>포트폴리오 비교</b>: 안정형, 균형형, 공격형 포트폴리오를 비교하여 최적의 전략 선택 가능.</li> <li><b>CSV 내보내기</b>: 계산 결과를 CSV 파일로 저장하여 오프라인 분석 가능.</li> <li><b>실시간 검증</b>: 월 저축액이 급여를 초과하지 않도록 실시간 경고 표시.</li> </ul> <h2 id="#location" data-ke-size="size26">사용 방법</h2> <ol style="list-style-type: decimal;" data-tight="true" data-ke-list-type="decimal"> <li><b>기본 설정 입력</b>: <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li>월 급여와 저축액을 입력하거나, "직접 입력"을 선택해 커스텀 금액 설정.</li> <li>투자 기간(5~40년)과 목표 금액(1~10억 원)을 슬라이더로 조정.</li> <li>초기 자본과 예상 인플레이션율 입력.</li> </ul> </li> <li><b>고급 설정</b>: <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li>포트폴리오 유형(안정형, 균형형, 공격형, 커스텀) 선택.</li> <li>위험 감내도를 설정하여 투자 성향 반영.</li> </ul> </li> <li><b>커스텀 포트폴리오</b>: <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li>각 자산(주식, 국채 등)의 비중을 슬라이더로 조정. 총합이 100%가 되도록 설정.</li> </ul> </li> <li><b>계산 실행</b>: <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li>"경제적 자유 시뮬레이션 실행" 버튼을 클릭하여 결과를 확인.</li> <li>결과에는 연평균 수익률, 샤프 비율, 목표 달성 시점, 최종 자산 등이 포함.</li> </ul> </li> <li><b>결과 분석</b>: <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li>차트를 통해 자산 성장, 포트폴리오 비중, 비교 분석 확인.</li> <li>결과를 CSV로 내보내기 가능.</li> </ul> </li> </ol> <h2 id="#prot" data-ke-size="size26">포트폴리오 유형</h2> <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li><b>안정형</b>: 국채(40%), 배당주(20%), 예적금(20%) 중심으로 안정적 수익 추구.</li> <li><b>균형형</b>: 주식(30%), 국채(20%), 부동산(15%) 등으로 안정성과 성장 균형.</li> <li><b>공격형</b>: 주식(40%), 가상자산(15%) 중심으로 높은 수익률 목표.</li> <li><b>커스텀</b>: 사용자가 자산 비중을 자유롭게 설정하여 맞춤형 전략 구성.</li> </ul> <h2 id="#chart" data-ke-size="size26">차트 및 분석</h2> <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li><b>자산 성장 차트</b>: 투자 기간 동안 총 자산, 투자 원금, 목표 금액의 변화를 시각화.</li> <li><b>포트폴리오 비중 차트</b>: 선택한 포트폴리오의 자산 배분을 도넛 차트로 표시.</li> <li><b>포트폴리오 비교 차트</b>: 안정형, 균형형, 공격형 포트폴리오의 예상 자산 성장을 비교.</li> <li><b>샤프 비율</b>: 위험 대비 수익률을 평가하여 포트폴리오 효율성 분석.</li> </ul> <h2 id="#why" data-ke-size="size26">왜 이 계산기를 사용해야 하나?</h2> <ul style="list-style-type: disc;" data-tight="true" data-ke-list-type="disc"> <li><b>개인화</b>: 사용자의 재무 상황과 목표에 맞춘 계산 제공.</li> <li><b>직관적</b>: 슬라이더와 차트를 통해 복잡한 데이터를 쉽게 이해.</li> <li><b>유연성</b>: 다양한 자산 클래스와 위험 감내도를 지원.</li> <li><b>교육적 가치</b>: 투자 계획의 중요성과 자산 배분의 영향을 학습 가능.</li> <li><b>무료 접근</b>: 누구나 무료로 이용 가능한 웹 기반 도구.</li> </ul> 정보/생활정보-각종계산기 10년후경제적자유 경제적자유 경제적자유30억 경제적자유6억 경제적자유개소리 경제적자유금액 경제적자유를꿈꾸는투자전략 파이어족 hiker's https://no1card.tistory.com/68 https://no1card.tistory.com/entry/%EA%B2%BD%EC%A0%9C%EC%A0%81-%EC%9E%90%EC%9C%A0-%EC%9E%90%EC%82%B0%EB%B0%B0%EB%B6%84-%EA%B3%84%EC%82%B0%EA%B8%B0-20%EB%8C%80-%EC%9B%94%EA%B8%89300%EB%A7%8C%EC%9B%90%EC%9C%BC%EB%A1%9C-10%EC%96%B5-%EB%AA%A8%EC%9C%BC%EB%8A%94-%EB%B0%A9%EB%B2%95#entry68comment Tue, 22 Jul 2025 18:05:43 +0900 [1억 만들기] 2025년 한국인 평균 1억 모으는 법 | 금융상품 비교 계산기 https://no1card.tistory.com/entry/1%EC%96%B5-%EB%A7%8C%EB%93%A4%EA%B8%B0-2025%EB%85%84-%ED%95%9C%EA%B5%AD%EC%9D%B8-%ED%8F%89%EA%B7%A0-1%EC%96%B5-%EB%AA%A8%EC%9C%BC%EB%8A%94-%EB%B2%95-%EA%B8%88%EC%9C%B5%EC%83%81%ED%92%88-%EB%B9%84%EA%B5%90-%EA%B3%84%EC%82%B0%EA%B8%B0 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="ChatGPT-Image-Jul-18,-2025,-02_22_37-PM.png" data-origin-width="500" data-origin-height="500"><span data-url="https://blog.kakaocdn.net/dn/qbYiV/btsPofOqxk1/G93cfdLaUjVL1nZsOhMZe1/img.png" data-phocus="https://blog.kakaocdn.net/dn/qbYiV/btsPofOqxk1/G93cfdLaUjVL1nZsOhMZe1/img.png" data-alt="1억만들기"><img src="https://blog.kakaocdn.net/dn/qbYiV/btsPofOqxk1/G93cfdLaUjVL1nZsOhMZe1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqbYiV%2FbtsPofOqxk1%2FG93cfdLaUjVL1nZsOhMZe1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="월 적립금으로 가장 빠르게 1억을 모을 수 있는 방법을 계산해드립니다. 예적금, ISA, 주식배당, 펀드 등 최적의 상품을 보여줍니다." loading="lazy" width="500" height="500" data-filename="ChatGPT-Image-Jul-18,-2025,-02_22_37-PM.png" data-origin-width="500" data-origin-height="500"/></span><figcaption>1억만들기</figcaption> </figure> </p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style2" /> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="1억 만들기 계산기: 예적금, ISA 계좌, 청년도약계좌, 연금저축펀드 등으로 가장 빠르게 1억을 모으는 방법을 확인하세요. 절세, 비과세 혜택 포함."> <meta name="keywords" content="1억 만들기, 종자돈 모으기, 예적금, ISA 계좌, 청년도약계좌, 연금저축펀드, 절세, 비과세, 금융투자, 재테크, 노후준비"> <meta name="author" content="xAI"> <meta property="og:title" content="1억 만들기 계산기 - 최적의 재테크 전략"> <meta property="og:description" content="월 50만~200만원 적립으로 가장 빠르게 1억을 모을 수 있는 금융상품 비교. 예적금, ISA, 청년도약계좌, 절세 혜택 포함."> <meta property="og:type" content="website"> <meta property="og:url" content="https://your-site.com/1억만들기-계산기"> <meta property="og:image" content="https://your-site.com/images/calculator.jpg"> <title>1억 만들기 계산기 - 예적금, ISA, 청년도약계좌로 재테크</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> :root { --primary-gray: #333333; --light-gray: #e0e0e0; --accent-green: #28a745; --accent-green-hover: #218838; --white: #ffffff; --shadow: rgba(0, 0, 0, 0.1); } body { font-family: 'Noto Sans KR', sans-serif; margin: 0; padding: 20px; background-color: var(--light-gray); color: var(--primary-gray); } .container { max-width: 1200px; margin: auto; padding: 0 15px; } h1, h2, h3 { color: var(--primary-gray); } h1 { font-size: 2rem; text-align: center; margin-bottom: 20px; } .input-section, .results-section, .content-box { background: var(--white); padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px var(--shadow); margin-bottom: 20px; } .input-section { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; } select, input { padding: 12px; font-size: 1rem; border: 1px solid var(--primary-gray); border-radius: 5px; width: 100%; max-width: 200px; box-sizing: border-box; } button { padding: 12px 24px; background-color: var(--accent-green); color: var(--white); border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: var(--accent-green-hover); } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid var(--light-gray); padding: 12px; text-align: left; font-size: 0.9rem; } th { background-color: var(--primary-gray); color: var(--white); } canvas { max-width: 100%; margin-top: 20px; } .content-box { line-height: 1.6; } .content-box h3 { font-size: 1.2rem; margin-bottom: 10px; } .content-box p { font-size: 0.95rem; margin-bottom: 15px; } .disclaimer { font-size: 0.85rem; color: #666; margin-top: 10px; text-align: center; } @media (max-width: 768px) { h1 { font-size: 1.5rem; } .input-section { flex-direction: column; align-items: stretch; } select, input { max-width: 100%; } button { width: 100%; } th, td { font-size: 0.85rem; padding: 8px; } } @media (max-width: 480px) { h1 { font-size: 1.2rem; } .content-box h3 { font-size: 1rem; } .content-box p { font-size: 0.9rem; } } </style> </head> <body> <div class="container"> <h1>1억 만들기 계산기</h1> <!-- Input Section --> <div class="input-section"> <label for="monthly-amount">월 적립 금액:</label> <select id="monthly-amount"> <option value="500000">50만원</option> <option value="700000">70만원</option> <option value="1000000">100만원</option> <option value="1500000">150만원</option> <option value="2000000">200만원</option> <option value="custom">직접 입력</option> </select> <input type="number" id="custom-amount" placeholder="직접 입력 (원)" style="display: none;"> <button onclick="calculate()">계산하기</button> </div> <!-- Results Section --> <div class="results-section"> <h2>계산 결과</h2> <p class="disclaimer">주의: 금융상품은 2025년 7월 1일 현재 상품임으로 추후 상품명, 이율 등은 변경될 수 있음</p> <table id="results-table"> <thead> <tr> <th>상품명</th> <th>예상 기간 (년)</th> <th>세제 혜택</th> <th>세부사항</th> </tr> </thead> <tbody id="results-body"></tbody> </table> <canvas id="savingsChart"></canvas> </div> <!-- Content Section 1 --> <div class="content-box"> <h2>종자돈 모으기를 위한 생활방식</h2> <div class="content-subsection"> <h3>목표 설정 및 계획 수립</h3> <p>1억이라는 목표는 구체적이고 현실적인 재테크 계획에서 시작됩니다. SMART 원칙(구체적, 측정 가능, 달성 가능, 현실적, 시간 제한)을 따라 목표를 설정하세요. 예를 들어, "5년 안에 1억을 모으기 위해 월 70만원을 청년도약계좌에 투자한다"와 같은 계획을 세우는 것이 중요합니다.</p> </div> <div class="content-subsection"> <h3>예산 관리 및 저축 계획</h3> <p>가계부를 작성해 수입과 지출을 명확히 파악하세요. 불필요한 지출(예: 과도한 외식, 구독 서비스)을 줄이고, 저축 우선순위를 정하세요. 50-30-20 규칙(수입의 50% 생활비, 30% 여가, 20% 저축)을 참고해 저축 비율을 높이세요.</p> </div> <div class="content-subsection"> <h3>투자 상품 활용</h3> <p>비과세종합저축, ISA 계좌, 청년도약계좌, 연금저축펀드 등 다양한 금융상품을 활용하세요. 예를 들어, 청년도약계좌는 정부 기여금과 비과세 혜택으로 높은 실질 수익률을 제공하며, ISA 계좌는 ETF 투자로 자산 증식을 기대할 수 있습니다.</p> </div> </div> <!-- Content Section 2 --> <div class="content-box"> <h2>1억 만들기가 필요한 이유와 금융투자 조언</h2> <div class="content-subsection"> <p><strong>1억 만들기의 중요성:</strong> 1억원은 주택 구매, 노후 준비, 창업 자금 등 인생의 주요 목표를 위한 종자돈입니다. 물가 상승과 저금리 시대에 저축만으로는 자산 증식이 어렵기 때문에, 절세 혜택이 있는 금융상품을 활용한 투자가 필수입니다.</p> <ul> <li>전세자금 또는 중소도시의 작은 집을 구입할 수 있는 기반 마련</li> <li>사업을 시작하거나 교육을 받을 수 있는 기회 창출</li> <li>긴급 상황에 대비한 안전망 형성</li> <li>수익을 창출할 수 있는 투자 원금 확보</li> <li>노후 준비의 첫걸음</li> </ul> </div> <div class="content-subsection"> <p><strong>금융투자 조언:</strong> 위험과 수익의 균형을 고려하세요. 비과세종합저축은 안정적이지만 수익률이 낮고, ISA 계좌의 ETF 투자는 고수익 가능성이 있지만 시장 리스크가 있습니다. 청년도약계좌는 청년층에 최적화된 비과세와 정부 지원 혜택을 제공합니다.</p> <ol> <li>소득보다 지출을 적게 하는 기본 원칙 지키기</li> <li>자동 이체를 설정하여 강제 저축 시스템 만들기</li> <li>복리의 힘을 믿고 장기적인 관점에서 투자하기</li> <li>세금 혜택이 있는 상품 우선적으로 활용하기</li> <li>정기적으로 포트폴리오를 재평가하고 조정하기</li> </ol> </div> <div class="content-subsection"> <p><strong>투자팁!</strong> 워런 버핏은 "투자는 단순해야 하며, 복잡한 상품은 피하라"고 조언했습니다. 초보 투자자는 이해하기 쉬운 ETF나 청년도약계좌부터 시작하고, 장기적인 관점에서 꾸준히 투자하세요.</p> </div> <footer> <p>© 2025 1억 만들기 계산기.Design-U</p> <p>이 도구는 참고용으로만 제공되며, 금융 상품 선택 시 전문가와 상담을 권장합니다.</p> </footer> </div> </div> <script> let chart = null; // Real financial products data (as of July 1, 2025) const products = [ { name: "비과세종합저축", rate: 0.035, // 3.5% annual interest, tax-free for up to 50M taxBenefit: "비과세 (최대 5천만원)", details: "만 65세 이상, 장애인 등 대상, 예금자보호 적용, 은행별 금리 상이", type: "savings" }, { name: "ISA 중개형 (ETF 투자)", rate: 0.07, // 7% expected return, conservative estimate taxBenefit: "비과세 (200만원까지), 초과분 9.9% 분리과세", details: "근로/사업소득자 대상, 3년 의무가입, 손익통산 가능", type: "isa" }, { name: "청년도약계좌", rate: 0.045, // 4.5% base rate + government contributions taxBenefit: "비과세, 정부 기여금 지원", details: "19~34세, 소득/가구소득 기준, 5년 자유적립, 은행별 우대금리 가능", type: "youth" }, { name: "연금저축펀드", rate: 0.06, // 6% expected return taxBenefit: "세액공제 (최대 600만원, 16.5% 공제율)", details: "주식형 펀드, 5년 이상 가입, 55세 이후 연금 수령", type: "pension" } ]; // Toggle custom input field document.getElementById('monthly-amount').addEventListener('change', function() { const customInput = document.getElementById('custom-amount'); customInput.style.display = this.value === 'custom' ? 'block' : 'none'; }); function calculate() { const monthlyAmountSelect = document.getElementById('monthly-amount').value; let monthlyAmount = monthlyAmountSelect === 'custom' ? parseInt(document.getElementById('custom-amount').value) : parseInt(monthlyAmountSelect); if (isNaN(monthlyAmount) || monthlyAmount <= 0) { alert('유효한 금액을 입력하세요.'); return; } // Calculate time to reach 100M for each product const results = products.map(product => { let balance = 0; let months = 0; const annualRate = product.rate; const monthlyRate = annualRate / 12; // Simple compound interest for savings/youth, expected return for ISA/pension while (balance < 100000000) { balance += monthlyAmount; balance *= (1 + monthlyRate); months++; } return { ...product, years: (months / 12).toFixed(2) }; }); // Sort by years (ascending) results.sort((a, b) => a.years - b.years); // Display results in table const tableBody = document.getElementById('results-body'); tableBody.innerHTML = ''; results.forEach(result => { const row = document.createElement('tr'); row.innerHTML = ` <td>${result.name}</td> <td>${result.years}년</td> <td>${result.taxBenefit}</td> <td>${result.details}</td> `; tableBody.appendChild(row); }); // Generate chart data const maxYears = Math.ceil(Math.max(...results.map(r => parseFloat(r.years)))); const labels = Array.from({ length: maxYears + 1 }, (_, i) => i); const datasets = results.map(product => { const data = []; let balance = 0; for (let year = 0; year <= maxYears; year++) { for (let month = 0; month < 12; month++) { balance += monthlyAmount; balance *= (1 + product.rate / 12); } data.push(Math.min(balance, 100000000).toFixed(0)); } return { label: product.name, data, borderColor: getRandomColor(), fill: false }; }); // Destroy existing chart if it exists if (chart) { chart.destroy(); } // Create new chart chart = new Chart(document.getElementById('savingsChart'), { type: 'line', data: { labels, datasets }, options: { responsive: true, scales: { x: { title: { display: true, text: '년차' } }, y: { title: { display: true, text: '적립금액 (원)' }, beginAtZero: true, max: 110000000 } }, plugins: { legend: { display: true }, title: { display: true, text: '년차별 적립금액 그래프' } } } }); } function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } </script> </body> </html> 정보/생활정보-각종계산기 1억 1억계산기 1억만들기 1억만들기적금 1억만들기프로젝트 1억모으기기간 1억모으기현실 1억모으는법 hiker's https://no1card.tistory.com/67 https://no1card.tistory.com/entry/1%EC%96%B5-%EB%A7%8C%EB%93%A4%EA%B8%B0-2025%EB%85%84-%ED%95%9C%EA%B5%AD%EC%9D%B8-%ED%8F%89%EA%B7%A0-1%EC%96%B5-%EB%AA%A8%EC%9C%BC%EB%8A%94-%EB%B2%95-%EA%B8%88%EC%9C%B5%EC%83%81%ED%92%88-%EB%B9%84%EA%B5%90-%EA%B3%84%EC%82%B0%EA%B8%B0#entry67comment Fri, 18 Jul 2025 14:38:39 +0900 2025 전월세 전환율 계산기 : 5년 월세 인상 예측 - 무료 https://no1card.tistory.com/entry/2025-%EC%A0%84%EC%9B%94%EC%84%B8-%EC%A0%84%ED%99%98%EC%9C%A8-%EA%B3%84%EC%82%B0%EA%B8%B0-5%EB%85%84-%EC%9B%94%EC%84%B8-%EC%9D%B8%EC%83%81-%EC%98%88%EC%B8%A1-%EB%AC%B4%EB%A3%8C <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="전월세-전환.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/bZuUTl/btsPnDgYjoH/fxKGvKlnVyzsByAXCbkmqk/img.png" data-phocus="https://blog.kakaocdn.net/dn/bZuUTl/btsPnDgYjoH/fxKGvKlnVyzsByAXCbkmqk/img.png" data-alt="전월세전환계산기"><img src="https://blog.kakaocdn.net/dn/bZuUTl/btsPnDgYjoH/fxKGvKlnVyzsByAXCbkmqk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbZuUTl%2FbtsPnDgYjoH%2FfxKGvKlnVyzsByAXCbkmqk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="2025 최신 전월세 계싼기 지역별 전환율 적용 무료계산" loading="lazy" width="244" height="244" data-filename="전월세-전환.png" data-origin-width="1024" data-origin-height="1024"/></span><figcaption>전월세전환계산기</figcaption> </figure> </p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="2025년 최신 정책 반영 전월세 전환 계산기 - 지역별 전환율, 임대료 인상률, 다년간 예상 월세 계산 기능 제공"> <meta name="keywords" content="전월세 계산기, 지역별 전환율, 임대료 인상률, 부동산 계산기, 2025 전월세, 주택 전세 계산, 상가 월세 계산"> <meta property="og:title" content="2025 전월세 전환 계산기 - 지역별/인상률 계산"> <meta property="og:description" content="2025년 최신 지역별 전환율과 임대료 인상률을 반영한 전월세 계산기"> <meta property="og:type" content="website"> <meta property="og:url" content="https://yourdomain.com/calculator"> <!-- Replace with actual domain --> <meta property="og:image" content="https://yourdomain.com/images/calculator-thumbnail.jpg"> <!-- Replace with actual image --> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet"> <title>2025 전월세 전환 계산기 | 지역별 전환율 & 인상률 계산</title> <style> :root { --primary-color: #333333; --secondary-color: #4a4a4a; --background-color: #f5f5f5; --card-color: #ffffff; --text-color: #333333; --light-gray: #e0e0e0; --accent-color: #4a6fa5; --button-hover: #3a5a8f; --dark-background: #2d2d2d; --dark-card: #3d3d3d; --dark-text: #f0f0f0; --warning-color: #e74c3c; --success-color: #2ecc71; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; } body { background-color: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 0; margin: 0; } body.dark { background-color: var(--dark-background); color: var(--dark-text); } .container { max-width: 100%; padding: 20px; margin: 0 auto; } .calculator-container { background-color: var(--card-color); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; max-width: 500px; margin: 20px auto; } body.dark .calculator-container { background-color: var(--dark-card); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .calculator-header { background-color: var(--primary-color); color: white; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; } .calculator-title { font-size: 1.3rem; font-weight: 700; } .dark-toggle { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; padding: 5px; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .dark-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } .description-box { background-color: var(--light-gray); padding: 16px; margin-bottom: 5px; font-size: 0.9rem; border-left: 4px solid var(--accent-color); } body.dark .description-box { background-color: var(--secondary-color); } .description-box p { margin-bottom: 8px; } .section { padding: 15px 20px; border-bottom: 1px solid var(--light-gray); } body.dark .section { border-bottom-color: var(--secondary-color); } .section:last-child { border-bottom: none; } .section label { display: block; margin-bottom: 12px; font-weight: 600; font-size: 0.95rem; color: var(--primary-color); } body.dark .section label { color: var(--dark-text); } .button-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; } .calc-button { padding: 10px 15px; background-color: var(--light-gray); border: none; border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; flex: 1 1 auto; min-width: 100px; text-align: center; color: var(--text-color); font-weight: 500; } body.dark .calc-button { background-color: var(--secondary-color); color: var(--dark-text); } .calc-button.active { background-color: var(--accent-color); color: white; font-weight: 600; } .calc-button:hover:not(.active) { background-color: #d0d0d0; } body.dark .calc-button:hover:not(.active) { background-color: #555555; } .input-group { display: flex; align-items: center; margin-bottom: 15px; position: relative; } .input-field, .select-field { flex: 1; padding: 12px 15px; border: 1px solid var(--light-gray); border-radius: 6px; font-size: 1rem; background-color: var(--card-color); color: var(--text-color); appearance: none; } body.dark .input-field, body.dark .select-field { background-color: var(--dark-card); border-color: var(--secondary-color); color: var(--dark-text); } .input-field:focus, .select-field:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2); } .input-unit { position: absolute; right: 12px; color: #777; font-size: 0.9rem; } body.dark .input-unit { color: #aaa; } .checkbox-group { display: flex; align-items: center; margin-left: 15px; font-size: 0.9rem; } .checkbox-group input { margin-right: 5px; } #calculate-btn { width: 100%; padding: 14px; background-color: var(--accent-color); color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 10px; transition: background-color 0.2s ease, transform 0.2s ease; } #calculate-btn:hover { background-color: var(--button-hover); transform: translateY(-1px); } .result-box { background-color: var(--light-gray); padding: 20px; display: none; } body.dark .result-box { background-color: var(--secondary-color); } .result-title { font-weight: 600; margin-bottom: 10px; font-size: 1rem; color: var(--primary-color); } body.dark .result-title { color: var(--dark-text); } .result-value { font-size: 1.1rem; margin-bottom: 15px; line-height: 1.5; font-weight: 500; color: var(--text-color); min-height: 24px; } body.dark .result-value { color: var(--dark-text); } .copy-button { padding: 10px 15px; background-color: var(--primary-color); color: white; border: none; border-radius: 6px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease; width: 100%; } .copy-button:hover { background-color: #222; } .result-subtitle { font-weight: 600; margin-top: 15px; color: var(--accent-color); font-size: 0.95rem; } body.dark .result-subtitle { color: #7aa7e6; } .result-list { margin: 10px 0 0 20px; padding: 0; list-style-type: none; } .result-list li { margin-bottom: 8px; position: relative; padding-left: 15px; } .result-list li:before { content: "•"; position: absolute; left: 0; color: var(--accent-color); } .warning-text { color: var(--warning-color); font-weight: 600; } .success-text { color: var(--success-color); font-weight: 600; } @media (max-width: 480px) { .container { padding: 10px; } .calculator-header { padding: 15px; } .calculator-title { font-size: 1.1rem; } .section { padding: 12px 15px; } .calc-button { min-width: 80px; padding: 8px 10px; font-size: 0.8rem; } .input-field, .select-field { padding: 10px 12px; font-size: 0.9rem; } #calculate-btn { padding: 12px; font-size: 0.95rem; } .result-value { font-size: 1rem; } } .seo-content { max-width: 800px; margin: 30px auto; padding: 0 20px; font-size: 0.95rem; line-height: 1.7; color: var(--text-color); } body.dark .seo-content { color: var(--dark-text); } .seo-content h2 { margin: 25px 0 15px; color: var(--primary-color); font-size: 1.4rem; } body.dark .seo-content h2 { color: var(--dark-text); } .seo-content ul { margin-bottom: 15px; padding-left: 20px; } .seo-content li { margin-bottom: 8px; } </style> </head> <body> <div class="container"> <div class="calculator-container"> <div class="calculator-header"> <div class="calculator-title">2025 전월세 전환 계산기</div> <button id="toggleDark" class="dark-toggle" aria-label="다크 모드 토글"> </button> </div> <div class="description-box"> <p>2025년 최신 부동산 정책을 반영한 전월세 전환 계산기입니다.</p> <p><b>전세 → 월세:</b> 전세보증금과 전환율로 적정 월세 계산</p> <p><b>월세 → 전세:</b> 월세와 보증금으로 전세보증금 환산</p> <p><b>전환율 계산:</b> 현재 계약 조건의 전환율 확인</p> </div> <div class="section"> <label for="housing">전환 대상</label> <div class="button-group"> <button class="calc-button active" data-type="housing" data-maxrate="4.5" aria-pressed="true">주택 (4.5%)</button> <button class="calc-button" data-type="arcade" data-maxrate="11.25" aria-pressed="false">상가 (11.25%)</button> </div> </div> <div class="section"> <label for="region-select">지역별 전환율 자동 적용</label> <select id="region-select" class="select-field"> <option value="">직접 입력 (선택 안함)</option> <option value="전국">전국 평균</option> <option value="수도권">수도권</option> <option value="지방">지방</option> <optgroup label="특별/광역시"> <option value="서울">서울특별시</option> <option value="부산">부산광역시</option> <option value="대구">대구광역시</option> <option value="인천">인천광역시</option> <option value="광주">광주광역시</option> <option value="대전">대전광역시</option> <option value="울산">울산광역시</option> <option value="세종">세종특별자치시</option> </optgroup> <optgroup label="도"> <option value="경기">경기도</option> <option value="강원">강원도</option> <option value="충북">충청북도</option> <option value="충남">충청남도</option> <option value="전북">전라북도</option> <option value="전남">전라남도</option> <option value="경북">경상북도</option> <option value="경남">경상남도</option> <option value="제주">제주특별자치도</option> </optgroup> </select> </div> <div class="section"> <label for="charter-rent">계산 유형</label> <div class="button-group"> <button class="calc-button active" data-calctype="charter-rent" aria-pressed="true">전세 → 월세</button> <button class="calc-button" data-calctype="rent-charter" aria-pressed="false">월세 → 전세</button> <button class="calc-button" data-calctype="conversion-rate" aria-pressed="false">전환율 계산</button> </div> </div> <div class="section"> <label for="conversion-rate">전환율 (%)</label> <div class="input-group"> <input id="conversion-rate" class="input-field" type="number" placeholder="전환율 입력" min="0" step="0.01" aria-describedby="conversion-rate-unit" /> <span id="conversion-rate-unit" class="input-unit">%</span> <div class="checkbox-group"> <input id="rate-limit" type="checkbox" checked aria-label="전환율 한도 적용" /> <label for="rate-limit">한도적용</label> </div> </div> <label for="annual-increase-rate">임대료 인상률 (%)</label> <div class="input-group"> <input id="annual-increase-rate" class="input-field" type="number" placeholder="연간 인상률 입력" min="0" max="20" step="0.1" aria-describedby="annual-increase-rate-unit" /> <span id="annual-increase-rate-unit" class="input-unit">%</span> </div> <div id="charter-deposit-row" class="input-group"> <input id="charter-deposit" class="input-field" type="number" placeholder="전세보증금" min="0" aria-describedby="charter-deposit-unit" /> <span id="charter-deposit-unit" class="input-unit">만원</span> </div> <div id="rent-deposit-row" class="input-group" style="display: none;"> <input id="rent-deposit" class="input-field" type="number" placeholder="월세보증금" min="0" aria-describedby="rent-deposit-unit" /> <span id="rent-deposit-unit" class="input-unit">만원</span> </div> <div id="monthly-rent-row" class="input-group" style="display: none;"> <input id="monthly-rent" class="input-field" type="number" placeholder="월세" min="0" step="0.1" aria-describedby="monthly-rent-unit" /> <span id="monthly-rent-unit" class="input-unit">만원</span> </div> <button id="calculate-btn" class="calc-button" aria-label="계산하기">계산하기</button> </div> <div id="result-section" class="result-box"> <div class="result-title">계산 결과</div> <div id="result-value" class="result-value"> </div> <button id="copyResult" class="copy-button" aria-label="결과 복사">결과 복사</button> </div> </div> <div class="seo-content"> <h2>2025년 전월세 전환 계산기 사용 가이드</h2> <p>2025년 최신 부동산 정책을 반영한 전월세 전환 계산기로 쉽고 정확하게 계산해보세요. 지역별 전환율과 임대료 인상률을 고려한 다년간 예상 월세까지 계산 가능합니다. ★참고용★</p> <h2>주요 기능</h2> <ul> <li><strong>지역별 전환율 자동 적용:</strong> 서울, 경기, 부산 등 17개 시도별 평균 전환율 제공</li> <li><strong>임대료 인상률 예측:</strong> 연간 인상률을 적용한 5년간 월세 예측 기능</li> <li><strong>주택/상가 구분 계산:</strong> 주택(4.5% 한도)과 상가(11.25% 한도)별 전환율 차이 반영</li> <li><strong>3가지 계산 모드:</strong> 전세→월세, 월세→전세, 전환율 계산 모드 지원</li> <li><strong>한도 적용 기능:</strong> 정부 권고 전환율 한도를 자동으로 적용</li> </ul> <h2>2025년 전월세 정책 주요 변경점</h2> <ul> <li>주택 전월세 전환율 상한선 4.5% 유지 (2024년과 동일)</li> <li>상가 건물 전환율 상한선 11.25%로 조정</li> <li>지역별 전환율 차이 확대 (서울 6.4%, 제주 6.1%, 충남 9.9%)</li> <li>전세사기 피해 방지를 위한 전환율 제한 강화</li> <li>월세 보증금에 따른 전세 환산 공식 개선</li> </ul> </div> </div> <script> // 다크모드 토글 및 시스템 설정 감지 const toggleDark = document.getElementById('toggleDark'); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); if (prefersDarkScheme.matches) { document.body.classList.add('dark'); toggleDark.textContent = '☀️'; } toggleDark.addEventListener('click', () => { document.body.classList.toggle('dark'); toggleDark.textContent = document.body.classList.contains('dark') ? '☀️' : ' '; toggleDark.setAttribute('aria-label', document.body.classList.contains('dark') ? '라이트 모드로 전환' : '다크 모드로 전환'); localStorage.setItem('darkMode', document.body.classList.contains('dark')); }); if (localStorage.getItem('darkMode') === 'true') { document.body.classList.add('dark'); toggleDark.textContent = '☀️'; toggleDark.setAttribute('aria-label', '라이트 모드로 전환'); } // 지역별 전환율 데이터 (2025.04 기준) const regionRates = { "전국": 7.6, "수도권": 7.0, "지방": 8.5, "서울": 6.4, "부산": 7.1, "대구": 8.2, "인천": 9.4, "광주": 7.8, "대전": 7.6, "울산": 8.9, "세종": 9.4, "경기": 7.8, "강원": 8.3, "충북": 9.7, "충남": 9.9, "전북": 8.5, "전남": 8.0, "경북": 9.4, "경남": 8.8, "제주": 6.1 }; // 지역 선택 이벤트 처리 document.getElementById('region-select').addEventListener('change', function() { const selectedRegion = this.value; if (regionRates[selectedRegion] !== undefined) { document.getElementById('conversion-rate').value = regionRates[selectedRegion].toFixed(1); const maxRate = parseFloat(document.querySelector('[data-type].active').dataset.maxrate); if (regionRates[selectedRegion] > maxRate && document.getElementById('rate-limit').checked) { document.getElementById('conversion-rate').value = maxRate.toFixed(1); document.getElementById('result-value').innerHTML = `<span class="warning-text">선택 지역 전환율이 한도를 초과하여 ${maxRate}%로 조정되었습니다</span>`; document.getElementById('result-section').style.display = 'block'; } } }); // 버튼 그룹 활성화 처리 const typeButtons = document.querySelectorAll('[data-type]'); const calcButtons = document.querySelectorAll('[data-calctype]'); typeButtons.forEach(btn => { btn.addEventListener('click', function() { typeButtons.forEach(b => { b.classList.remove('active'); b.setAttribute('aria-pressed', 'false'); }); this.classList.add('active'); this.setAttribute('aria-pressed', 'true'); const maxRate = parseFloat(this.dataset.maxrate); document.getElementById('rate-limit').nextElementSibling.innerHTML = `한도적용 (${maxRate}%)`; const currentRate = parseFloat(document.getElementById('conversion-rate').value) || 0; if (currentRate > maxRate && document.getElementById('rate-limit').checked) { document.getElementById('conversion-rate').value = maxRate.toFixed(1); document.getElementById('result-value').innerHTML = `<span class="warning-text">전환율이 한도를 초과하여 ${maxRate}%로 조정되었습니다</span>`; document.getElementById('result-section').style.display = 'block'; } }); }); calcButtons.forEach(btn => { btn.addEventListener('click', function() { calcButtons.forEach(b => { b.classList.remove('active'); b.setAttribute('aria-pressed', 'false'); }); this.classList.add('active'); this.setAttribute('aria-pressed', 'true'); const type = this.dataset.calctype; document.getElementById('charter-deposit-row').style.display = (type === 'charter-rent' || type === 'conversion-rate') ? 'flex' : 'none'; document.getElementById('rent-deposit-row').style.display = (type === 'rent-charter' || type === 'conversion-rate') ? 'flex' : 'none'; document.getElementById('monthly-rent-row').style.display = (type === 'rent-charter' || type === 'conversion-rate') ? 'flex' : 'none'; if (type === 'charter-rent') { document.getElementById('rent-deposit').value = ''; document.getElementById('monthly-rent').value = ''; } else if (type === 'rent-charter') { document.getElementById('charter-deposit').value = ''; } else if (type === 'conversion-rate') { document.getElementById('conversion-rate').value = ''; } }); }); // 계산기 document.getElementById('calculate-btn').addEventListener('click', function() { const calcType = document.querySelector('[data-calctype].active').dataset.calctype; const propertyType = document.querySelector('[data-type].active').dataset.type; const maxRate = parseFloat(document.querySelector('[data-type].active').dataset.maxrate); let rate = parseFloat(document.getElementById('conversion-rate').value) || 0; if (rate < 0 || isNaN(rate)) { document.getElementById('result-value').innerHTML = `<span class="warning-text">전환율은 0 이상이어야 합니다</span>`; document.getElementById('result-section').style.display = 'block'; return; } if (document.getElementById('rate-limit').checked && rate > maxRate) { rate = maxRate; document.getElementById('conversion-rate').value = rate.toFixed(1); document.getElementById('result-value').innerHTML = `<span class="warning-text">전환율이 한도(${maxRate}%)를 초과하여 ${maxRate}%로 조정되었습니다</span>`; document.getElementById('result-section').style.display = 'block'; return; } const charter = parseFloat(document.getElementById('charter-deposit').value) || 0; const rentDeposit = parseFloat(document.getElementById('rent-deposit').value) || 0; const monthly = parseFloat(document.getElementById('monthly-rent').value) || 0; const increaseRate = parseFloat(document.getElementById('annual-increase-rate').value) || 0; if (charter < 0 || rentDeposit < 0 || monthly < 0 || increaseRate < 0) { document.getElementById('result-value').innerHTML = `<span class="warning-text">입력값은 0 이상이어야 합니다</span>`; document.getElementById('result-section').style.display = 'block'; return; } let result = ''; let initialRent = 0; if (calcType === 'charter-rent') { if (!rate) { document.getElementById('result-value').innerHTML = `<span class="warning-text">전환율을 입력해주세요</span>`; document.getElementById('result-section').style.display = 'block'; return; } if (!charter) { document.getElementById('result-value').innerHTML = `<span class="warning-text">전세보증금을 입력해주세요</span>`; document.getElementById('result-section').style.display = 'block'; return; } if (rentDeposit > charter) { document.getElementById('result-value').innerHTML = `<span class="warning-text">월세보증금은 전세보증금보다 작아야 합니다</span>`; document.getElementById('result-section').style.display = 'block'; return; } const monthlyRent = (charter - rentDeposit) * (rate / 100) / 12; initialRent = monthlyRent; result = `<strong>적정 월세: ${monthlyRent.toFixed(1).toLocaleString('ko-KR')}만원</strong> (보증금 ${rentDeposit.toLocaleString('ko-KR')}만원 기준)<br> <small>※ 전세 ${charter.toLocaleString('ko-KR')}만원, 전환율 ${rate}% 기준</small>`; if (rentDeposit >= charter * 0.2) { result += `<br><span class="warning-text">※ 월세보증금이 전세보증금의 20% 이상입니다. 계약 조건을 재검토하세요.</span>`; } } else if (calcType === 'rent-charter') { if (!rate) { document.getElementById('result-value').innerHTML = `<span class="warning-text">전환율을 입력해주세요</span>`; document.getElementById('result-section').style.display = 'block'; return; } if (!monthly) { document.getElementById('result-value').innerHTML = `<span class="warning-text">월세를 입력해주세요</span>`; document.getElementById('result-section').style.display = 'block'; return; } const newCharter = rentDeposit + (monthly * 12) / (rate / 100); initialRent = monthly; result = `<strong>적정 전세보증금: ${Math.round(newCharter).toLocaleString('ko-KR')}만원</strong><br> <small>※ 월세 ${monthly.toLocaleString('ko-KR')}만원, 보증금 ${rentDeposit.toLocaleString('ko-KR')}만원, 전환율 ${rate}% 기준</small>`; if (newCharter > 100000) { result += `<br><span class="warning-text">※ 고액 전세보증금 계약은 전문가와 상담을 권장합니다.</span>`; } } else if (calcType === 'conversion-rate') { if (!charter) { document.getElementById('result-value').innerHTML = `<span class="warning-text">전세보증금을 입력해주세요</span>`; document.getElementById('result-section').style.display = 'block'; return; } if (!monthly) { document.getElementById('result-value').innerHTML = `<span class="warning-text">월세를 입력해주세요</span>`; document.getElementById('result-section').style.display = 'block'; return; } if (charter <= rentDeposit) { document.getElementById('result-value').innerHTML = `<span class="warning-text">전세보증금은 월세보증금보다 커야 합니다</span>`; document.getElementById('result-section').style.display = 'block'; return; } const convRate = (monthly * 12) / (charter - rentDeposit) * 100; initialRent = monthly; document.getElementById('conversion-rate').value = convRate.toFixed(2); result = `<strong>현재 전환율: ${convRate.toFixed(2)}%</strong><br> <small>${propertyType === 'housing' ? '주택' : '상가'} 권고 한도: ${maxRate}%</small>`; if (convRate > maxRate) { result += `<br><span class="warning-text">※ 현재 전환율이 권고 한도를 초과합니다</span>`; } else if (convRate < maxRate * 0.8) { result += `<br><span class="success-text">※ 현재 전환율이 권고 한도보다 낮습니다 (유리한 조건)</span>`; } } if (increaseRate > 0 && initialRent > 0) { result += `<div class="result-subtitle">임대료 예상 추이 (연 ${increaseRate}% 인상 기준)</div> <ul class="result-list">`; let totalPaid = 0; for (let year = 1; year <= 5; year++) { const projectedRent = initialRent * Math.pow(1 + increaseRate / 100, year); totalPaid += projectedRent * 12; result += `<li>${year}년차: ${projectedRent.toFixed(1).toLocaleString('ko-KR')}만원</li>`; if (year === 3) { result += ` <small>(3년간 총 ${Math.round(totalPaid).toLocaleString('ko-KR')}만원 지출)</small>`; } else if (year === 5) { result += ` <small>(5년간 총 ${Math.round(totalPaid).toLocaleString('ko-KR')}만원 지출)</small>`; } } result += `</ul>`; if (increaseRate > 5) { result += `<span class="warning-text">※ 연 ${increaseRate}% 인상률은 일반적인 상승률보다 높습니다. 계약서를 꼼꼼히 확인하세요.</span>`; } } document.getElementById('result-value').innerHTML = result; document.getElementById('result-section').style.display = 'block'; document.getElementById('result-section').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }); // 결과 복사 document.getElementById('copyResult').addEventListener('click', () => { const text = document.getElementById('result-value').textContent; navigator.clipboard.writeText(text).then(() => { const originalText = document.getElementById('copyResult').textContent; document.getElementById('copyResult').textContent = '복사 완료!'; setTimeout(() => { document.getElementById('copyResult').textContent = originalText; }, 2000); }); }); // 숫자 입력 필드에 자동 포맷팅 적용 (디바운싱 추가) const debounce = (func, wait) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; }; document.querySelectorAll('.input-field[type="number"]').forEach(input => { input.addEventListener('blur', debounce(function() { if (this.value && !isNaN(this.value) && parseFloat(this.value) >= 0) { this.value = parseFloat(this.value).toLocaleString('ko-KR', { maximumFractionDigits: this.step === '0.01' ? 2 : this.step === '0.1' ? 1 : 0 }); } else if (this.value && parseFloat(this.value) < 0) { this.value = ''; alert('입력값은 0 이상이어야 합니다.'); } }, 300)); input.addEventListener('focus', function() { this.value = this.value.replace(/[^0-9.]/g, ''); }); }); // 초기 설정 window.addEventListener('DOMContentLoaded', () => { document.querySelector('[data-calctype].active').click(); document.querySelector('[data-type].active').click(); document.getElementById('conversion-rate').placeholder = `예: ${document.querySelector('[data-type].active').dataset.maxrate}%`; // 입력값 복원 ['conversion-rate', 'annual-increase-rate', 'charter-deposit', 'rent-deposit', 'monthly-rent'].forEach(id => { const savedValue = localStorage.getItem(id); if (savedValue) { document.getElementById(id).value = savedValue; } }); }); // 입력값 저장 document.querySelectorAll('.input-field').forEach(input => { input.addEventListener('change', () => { localStorage.setItem(input.id, input.value); }); }); // JSON-LD for SEO const jsonLd = { "@context": "https://schema.org", "@type": "WebApplication", "name": "2025 전월세 전환 계산기", "description": "2025년 최신 지역별 전환율과 임대료 인상률을 반영한 전월세 전환 계산기", "applicationCategory": "FinancialApplication", "operatingSystem": "All" }; const script = document.createElement('script'); script.type = 'application/ld+json'; script.textContent = JSON.stringify(jsonLd); document.head.appendChild(script); </script> </body> </html> 정보/생활정보-각종계산기 부동산전월세전환 상가임대전환 상가주택전월세전환 아파트전월세전환 전월세 계산기 전월세갱신 전월세갱신계약 전월세갱신요구권 전월세신고 지역별 전환율 hiker's https://no1card.tistory.com/66 https://no1card.tistory.com/entry/2025-%EC%A0%84%EC%9B%94%EC%84%B8-%EC%A0%84%ED%99%98%EC%9C%A8-%EA%B3%84%EC%82%B0%EA%B8%B0-5%EB%85%84-%EC%9B%94%EC%84%B8-%EC%9D%B8%EC%83%81-%EC%98%88%EC%B8%A1-%EB%AC%B4%EB%A3%8C#entry66comment Thu, 17 Jul 2025 21:31:37 +0900 한글 텍스트 분석기: 글자 수, 문장 수, 띄어쓰기 계산기 (무료) https://no1card.tistory.com/entry/%ED%95%9C%EA%B8%80-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%B6%84%EC%84%9D%EA%B8%B0-%EA%B8%80%EC%9E%90-%EC%88%98-%EB%AC%B8%EC%9E%A5-%EC%88%98-%EB%9D%84%EC%96%B4%EC%93%B0%EA%B8%B0-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%AC%B4%EB%A3%8C <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="한글분석기.png" data-origin-width="600" data-origin-height="600"><span data-url="https://blog.kakaocdn.net/dn/Mk523/btsPi2zTFBc/l5e3wdM7jOaklPzwiarzh0/img.png" data-phocus="https://blog.kakaocdn.net/dn/Mk523/btsPi2zTFBc/l5e3wdM7jOaklPzwiarzh0/img.png" data-alt="한글 텍스트 분석기 &amp;copy; 2025 Design-U"><img src="https://blog.kakaocdn.net/dn/Mk523/btsPi2zTFBc/l5e3wdM7jOaklPzwiarzh0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMk523%2FbtsPi2zTFBc%2Fl5e3wdM7jOaklPzwiarzh0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="600" height="600" data-filename="한글분석기.png" data-origin-width="600" data-origin-height="600"/></span><figcaption>한글 텍스트 분석기 &copy; 2025 Design-U</figcaption> </figure> </p> <ul style="list-style-type: disc; background-color: #ffffff; color: #404040; text-align: start;" data-ke-list-type="disc"> <li>"한글 텍스트 분석기 - 글자수, 문장수, 띄어쓰기 체크까지 한번에!"</li> <li>"블로그 글 최적화를 위한 한글 텍스트 분석기 무료 도구"</li> <li>"한글 텍스트 분석기: 글자 수 세기부터 키워드 반복 검사까지"</li> <li><span style="background-color: #ffffff; color: #404040; text-align: left;">글쓰기 고민 해결! 전문가들이 사용하는 텍스트 분석 비법"</span></li> <li>"한글 텍스트 분석기로 확인해야 할 7가지 핵심 요소"</li> <li><span style="background-color: #ffffff; color: #404040; text-align: left;">반복 단어, 문장 길이, 띄어쓰기 문제를 한번에 해결!</span></li> </ul> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p data-ke-size="size16">&nbsp;</p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="글자수계산기, 한글 텍스트 분석기로 글자 수, 문장 수, 띄어쓰기, 반복 단어 등을 쉽게 분석할 수 있는 도구"> <meta name="keywords" content="한글 분석기, 텍스트 분석, 글자 수 세기, 모던 디자인, 블로그 도구, 글자수계산기"> <meta name="author" content="한글 텍스트 분석기"> <meta property="og:title" content="글자수계산기, 한글 텍스트 분석기"> <meta property="og:description" content="글자수계산기 기능과 블로그 최적화 글쓰기에 최고의 선택 한글 텍스트 분석 도구"> <title>한글 텍스트 분석기</title> <style> :root { --gray-90: #1a1a1a; --gray-80: #333333; --gray-70: #4d4d4d; --gray-60: #666666; --gray-50: #808080; --gray-40: #999999; --gray-30: #b3b3b3; --gray-20: #cccccc; --gray-10: #e6e6e6; --primary: #4a6fa5; --primary-light: #6d8ec7; } body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; color: var(--gray-80); background-color: #f5f5f5; margin: 0; padding: 0; min-height: 100vh; } .container { max-width: 900px; margin: 0 auto; padding: 40px 20px; } header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-20); } h1 { color: var(--gray-90); font-weight: 700; font-size: 2.2rem; margin-bottom: 10px; } .subtitle { color: var(--gray-60); font-size: 1.1rem; margin-top: 0; } .analyzer-container { background-color: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); margin-bottom: 40px; border: 1px solid var(--gray-10); } h2 { color: var(--gray-80); font-weight: 600; margin-top: 0; margin-bottom: 20px; font-size: 1.5rem; } textarea { width: 100%; height: 200px; padding: 16px; border: 1px solid var(--gray-20); border-radius: 8px; resize: vertical; font-size: 16px; margin-bottom: 20px; background-color: white; color: var(--gray-80); transition: border 0.3s, box-shadow 0.3s; } textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1); } .button-group { display: flex; gap: 12px; margin-bottom: 20px; } button { background-color: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500; transition: all 0.3s; flex: 1; } button:hover { background-color: var(--primary-light); transform: translateY(-2px); } button.secondary { background-color: white; color: var(--gray-70); border: 1px solid var(--gray-20); } button.secondary:hover { background-color: var(--gray-10); } .results { margin-top: 30px; padding: 25px; background-color: var(--gray-10); border-radius: 8px; display: none; border: 1px solid var(--gray-20); } .results h3 { color: var(--gray-80); margin-top: 0; margin-bottom: 20px; font-size: 1.3rem; } .result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .result-card { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .result-card h4 { color: var(--gray-60); font-size: 0.9rem; margin-top: 0; margin-bottom: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .result-value { color: var(--gray-90); font-size: 1.8rem; font-weight: 700; margin: 0; } .result-unit { color: var(--gray-50); font-size: 1rem; margin-left: 4px; } .word-length-section { margin-top: 30px; } .word-length-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; margin-top: 15px; } .length-card { background-color: white; border-radius: 6px; padding: 15px 10px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .length-value { color: var(--primary); font-size: 1.5rem; font-weight: 700; margin: 0; } .length-label { color: var(--gray-60); font-size: 0.8rem; margin-top: 5px; } .feature-section { margin-top: 50px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; margin-top: 30px; } .feature-card { background-color: white; border-radius: 10px; padding: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid var(--gray-10); } .feature-card h3 { color: var(--gray-80); margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; } .feature-card p { color: var(--gray-60); margin-bottom: 0; line-height: 1.6; } footer { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--gray-20); color: var(--gray-50); font-size: 0.9rem; } @media (max-width: 768px) { .container { padding: 30px 15px; } h1 { font-size: 1.8rem; } .button-group { flex-direction: column; } .result-grid { grid-template-columns: 1fr; } .word-length-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } } </style> <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"> </head> <body> <div class="container"> <header> <h1>한글 텍스트 분석기</h1> <p class="subtitle">한글 텍스트를 분석하여 블로그 글쓰기에 도움주는 최고의 도구</p> </header> <div class="analyzer-container"> <h2>텍스트 분석하기</h2> <textarea id="inputText" placeholder="분석할 한글 텍스트를 입력하세요..."></textarea> <div class="button-group"> <button onclick="analyzeText()">분석 시작</button> <button class="secondary" onclick="clearText()">텍스트 지우기</button> </div> <div id="results" class="results"> <h3>분석 결과</h3> <div class="result-grid"> <div class="result-card"> <h4>전체 글자 수</h4> <p class="result-value"><span id="totalChars">0</span><span class="result-unit">자</span></p> </div> <div class="result-card"> <h4>띄어쓰기 수</h4> <p class="result-value"><span id="spaces">0</span><span class="result-unit">회</span></p> </div> <div class="result-card"> <h4>문장 수</h4> <p class="result-value"><span id="sentences">0</span><span class="result-unit">개</span></p> </div> <div class="result-card"> <h4>전체 단어 수</h4> <p class="result-value"><span id="totalWords">0</span><span class="result-unit">개</span></p> </div> <div class="result-card"> <h4>반복 단어</h4> <p class="result-value"><span id="repeatedWords">0</span><span class="result-unit">개</span></p> </div> </div> <div class="word-length-section"> <h4>단어 길이 분포</h4> <div id="wordLengths" class="word-length-grid"></div> </div> </div> </div> <div class="feature-section"> <h2>주요 기능</h2> <div class="feature-grid"> <div class="feature-card"> <h3>정확한 글자 수 분석</h3> <p>공백 포함/제외 옵션 없이 정확한 글자 수를 계산하여 블로그 글 길이를 최적화합니다.</p> </div> <div class="feature-card"> <h3>문장 구조 분석</h3> <p>문장 부호를 인식하여 문장 수와 평균 길이를 분석해 가독성을 높입니다.</p> </div> <div class="feature-card"> <h3>단어 빈도 분석</h3> <p>반복적으로 사용된 단어를 식별하여 콘텐츠의 다양성을 높일 수 있습니다.</p> </div> <div class="feature-card"> <h3>모던한 디자인</h3> <p>세련된 그레이 컬러 팔레트로 눈이 편안한 사용자 경험을 제공합니다.</p> </div> </div> </div> <footer> <p>한글 텍스트 분석기 © 2025 Design-U.</p> </footer> </div> <script> function analyzeText() { const text = document.getElementById('inputText').value.trim(); const resultsDiv = document.getElementById('results'); if (!text) { alert('분석할 텍스트를 입력해주세요.'); return; } // 1. 전체 글자 수 const totalChars = text.length; // 2. 띄어쓰기 수 const spaceCount = text.split(' ').length - 1; // 3. 문장 수 const sentences = text.split(/[.?!]+/).filter(s => s.trim().length > 0); let sentenceCount = sentences.length; if (sentenceCount === 0 && text.length > 0) sentenceCount = 1; // 4. 단어 추출 (간단한 공백 기준 분리) const words = text.match(/[가-힣a-zA-Z0-9]+/g) || []; const totalWords = words.length; // 5. 반복 단어 수 (2회 이상) const wordCounts = {}; words.forEach(word => { wordCounts[word] = (wordCounts[word] || 0) + 1; }); const repeatedWords = Object.values(wordCounts).filter(count => count > 1).length; // 6. 단어 길이별 개수 const lengthCounts = {}; words.forEach(word => { const length = word.length; lengthCounts[length] = (lengthCounts[length] || 0) + 1; }); // 결과 표시 document.getElementById('totalChars').textContent = totalChars; document.getElementById('spaces').textContent = spaceCount; document.getElementById('sentences').textContent = sentenceCount; document.getElementById('totalWords').textContent = totalWords; document.getElementById('repeatedWords').textContent = repeatedWords; const wordLengthsList = document.getElementById('wordLengths'); wordLengthsList.innerHTML = ''; const sortedLengths = Object.keys(lengthCounts).sort((a, b) => a - b); sortedLengths.forEach(length => { const card = document.createElement('div'); card.className = 'length-card'; card.innerHTML = ` <p class="length-value">${lengthCounts[length]}</p> <p class="length-label">${length}글자</p> `; wordLengthsList.appendChild(card); }); resultsDiv.style.display = 'block'; } function clearText() { document.getElementById('inputText').value = ''; document.getElementById('results').style.display = 'none'; } </script> </body> </html> 글자수계산기 띄어쓰기검사 문장분석 문장분석기 블로그SEO 블로그글쓰기 블로그최적화 텍스트분석기 한글문장분석기 한글분석기 hiker's https://no1card.tistory.com/65 https://no1card.tistory.com/entry/%ED%95%9C%EA%B8%80-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%B6%84%EC%84%9D%EA%B8%B0-%EA%B8%80%EC%9E%90-%EC%88%98-%EB%AC%B8%EC%9E%A5-%EC%88%98-%EB%9D%84%EC%96%B4%EC%93%B0%EA%B8%B0-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%AC%B4%EB%A3%8C#entry65comment Mon, 14 Jul 2025 15:49:36 +0900 롯데월드타워 타워런 완주 예상시간 계산기 - 내 체력으로 2,917계단 정복 가능? https://no1card.tistory.com/entry/%EB%A1%AF%EB%8D%B0%EC%9B%94%EB%93%9C%ED%83%80%EC%9B%8C-%ED%83%80%EC%9B%8C%EB%9F%B0-%EC%99%84%EC%A3%BC-%EC%98%88%EC%83%81%EC%8B%9C%EA%B0%84-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%82%B4-%EC%B2%B4%EB%A0%A5%EC%9C%BC%EB%A1%9C-2917%EA%B3%84%EB%8B%A8-%EC%A0%95%EB%B3%B5-%EA%B0%80%EB%8A%A5 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="타워런.png" data-origin-width="600" data-origin-height="600"><span data-url="https://blog.kakaocdn.net/dn/b4IIlY/btsPg04tVpR/h4UQLcHd72eBwLoThq24YK/img.png" data-phocus="https://blog.kakaocdn.net/dn/b4IIlY/btsPg04tVpR/h4UQLcHd72eBwLoThq24YK/img.png" data-alt="롯데월드타워 - 타워런"><img src="https://blog.kakaocdn.net/dn/b4IIlY/btsPg04tVpR/h4UQLcHd72eBwLoThq24YK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4IIlY%2FbtsPg04tVpR%2Fh4UQLcHd72eBwLoThq24YK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="600" height="600" data-filename="타워런.png" data-origin-width="600" data-origin-height="600"/></span><figcaption>롯데월드타워 - 타워런</figcaption> </figure> </p> <p data-ke-size="size16">* 본 계산기는 재미삼아 알아보는 참고용계산기에요~, 개인별로 체력차이나 능력치가 다르게 때문에 본인의 체력에 맞는 운동방법으로 타워런을 준비해보세요!!</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p data-ke-size="size16">&nbsp;</p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="롯데월드타워 타워런 완주 예상 시간 계산기. 심폐지구력, 하체 근력, 근파워 등을 측정해 체력 등급과 예상 완주 시간을 계산해보세요."> <meta name="keywords" content="타워런, 계단 오르기, 체력 계산, 롯데월드타워, 고층빌딩 러닝, 심폐지구력, 하체 근력"> <title>롯데월드타워 타워런 예상 완주 시간 계산기</title> <style> body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } h1 { color: #e74c3c; text-align: center; margin-bottom: 30px; } h2 { color: #2c3e50; border-bottom: 2px solid #e74c3c; padding-bottom: 5px; margin-top: 40px; } h3 { color: #3498db; } .calculator-container { background-color: white; border-radius: 10px; padding: 25px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 30px; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { background-color: #e74c3c; color: white; border: none; padding: 12px 20px; font-size: 16px; border-radius: 4px; cursor: pointer; width: 100%; margin-top: 10px; transition: background-color 0.3s; } button:hover { background-color: #c0392b; } #result { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px; border-left: 5px solid #3498db; } .fitness-section { background-color: white; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .video-link { display: inline-block; background-color: #f1f1f1; padding: 8px 15px; border-radius: 20px; color: #3498db; text-decoration: none; margin-top: 10px; font-size: 14px; } .video-link:hover { background-color: #e1e1e1; } .organization-link { color: #2c3e50; font-weight: bold; } footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; color: #7f8c8d; } </style> </head> <body> <h1>롯데월드타워 타워런 예상 완주 시간 계산기</h1> <div class="calculator-container"> <h2> 타워런 예상 시간 계산기</h2> <p>나의 체력 수준을 입력하면 롯데월드타워(2,917계단) 완주 예상 시간을 계산해드립니다!</p> <form id="towerrun-calculator"> <div class="input-group"> <label for="user-group">그룹 선택</label> <select id="user-group"> <option value="general">일반인</option> <option value="athlete">선수</option> </select> </div> <div class="input-group"> <label for="gender">성별</label> <select id="gender"> <option value="male">남자</option> <option value="female">여자</option> </select> </div> <div class="input-group"> <label for="age-group">연령대</label> <select id="age-group"> <option value="teen">청소년</option> <option value="adult">성인</option> <option value="senior">노인</option> </select> </div> <div class="input-group"> <label for="vo2max">심폐지구력 (VO₂max, ml/kg/min)</label> <input type="number" id="vo2max" placeholder="예: 45"> </div> <div class="input-group"> <label for="squat-1rm">하체 근력 (스쿼트 1RM, x 체중)</label> <input type="number" id="squat-1rm" placeholder="예: 1.2" step="0.1"> </div> <div class="input-group"> <label for="box-jump">근파워 (박스 점프 높이, cm)</label> <input type="number" id="box-jump" placeholder="예: 55"> </div> <div class="input-group"> <label for="plank-time">코어 안정성 (플랭크 유지 시간, 초)</label> <input type="number" id="plank-time" placeholder="예: 180"> </div> <div class="input-group"> <label for="stair-test">30층 계단 오르기 기록 (초)</label> <input type="number" id="stair-test" placeholder="예: 300"> </div> <button type="button" onclick="calculateTime()">계산하기</button> </form> <div id="result" style="display:none;"> <h3>▶ 예상 완주 시간: <span id="predicted-time">00분 00초</span></h3> <p>체력 등급: <span id="fitness-level">중급자</span></p> <p>계단당 평균 속도: <span id="step-speed">0.00초/계단</span></p> </div> </div> <h2> 타워런 체력 요소 상세 설명</h2> <div class="fitness-section"> <h3>1. 심폐지구력 (Cardiovascular Endurance)</h3> <p><strong>왜 중요한가?</strong><br> 장시간 계단을 오르는 데 필요한 <strong>산소 공급 효율성</strong>을 결정합니다.</p> <p><strong>훈련 방법</strong><br> - 러닝, 사이클링, 인터벌 트레이닝 (예: 1분 달리기 + 1분 걷기 반복)<br> - <a href="https://www.youtube.com/watch?v=ml6cT4AZdqI" class="video-link" target="_blank">런닝 인터벌 트레이닝 가이드 (YouTube)</a></p> <p><strong>관련 단체</strong>: <a href="http://www.korea-marathon.or.kr" class="organization-link" target="_blank">한국마라톤협회</a></p> </div> <div class="fitness-section"> <h3>2. 하체 근지구력 (Lower Body Muscular Endurance)</h3> <p><strong>왜 중요한가?</strong><br> 반복적인 계단 오르기에서 <strong>허벅지와 종아리 근육의 피로</strong>를 줄입니다.</p> <p><strong>훈련 방법</strong><br> - 스쿼트, 런지, 계단 오르기 (가중치 추가)<br> - <a href="https://www.youtube.com/watch?v=aclHkVaku9U" class="video-link" target="_blank">하체 근지구력 운동 (YouTube)</a></p> <p><strong>관련 기관</strong>: <a href="https://www.sports.or.kr" class="organization-link" target="_blank">대한체육회</a></p> </div> <div class="fitness-section"> <h3>3. 근파워 (Muscular Power)</h3> <p><strong>왜 중요한가?</strong><br> 한 번에 여러 계단을 오를 때 필요한 <strong>폭발적인 힘</strong>을 제공합니다.</p> <p><strong>훈련 방법</strong><br> - 박스 점프, 웨이트 트레이닝 (스텝업, 데드리프트)<br> - <a href="https://www.youtube.com/watch?v=CVaEhXotL7M" class="video-link" target="_blank">점프력 향상 운동 (YouTube)</a></p> </div> <div class="fitness-section"> <h3>4. 코어 안정성 (Core Stability)</h3> <p><strong>왜 중요한가?</strong><br> 상체의 흔들림을 줄여 <strong>에너지 효율성</strong>을 높입니다.</p> <p><strong>훈련 방법</strong><br> - 플랭크, 버드독, 러시안 트위스트<br> - <a href="https://www.youtube.com/watch?v=2pLT-olgUJs" class="video-link" target="_blank">코어 강화 운동 10분 (YouTube)</a></p> </div> <div class="fitness-section"> <h3>5. 정신적 인내력 (Mental Toughness)</h3> <p><strong>왜 중요한가?</strong><br> 고통과의 싸움에서 <strong>집중력과 의지력</strong>이 기록을 좌우합니다.</p> <p><strong>훈련 방법</strong><br> - 고강도 인터벌 훈련, 명상<br> - <a href="https://www.youtube.com/watch?v=H14bBuluwB8" class="video-link" target="_blank">멘탈 강화 방법 (YouTube)</a></p> </div> <div class="fitness-section"> <h3> 타워런 대회 정보</h3> <p>도전해보고 싶다면?</p> <ul> <li><a href="https://www.towerrunning.com" target="_blank">공식 타워런 대회 정보 (Towerrunning World Association)</a></li> <li><a href="http://www.korea-climbing.org" target="_blank">국내 계단 오르기 대회 일정 (한국등반연맹)</a></li> </ul> <p><em> TIP: 꾸준한 훈련과 올바른 자세로 부상 없이 안전하게 도전하세요! </em></p> </div> <footer> <p>이 페이지는 Google, Naver, Daum 검색 최적화를 고려하여 제작되었습니다.</p> <p>© 2023 타워런 체력 계산기. All rights reserved.</p> </footer> <script> function calculateTime() { // 입력값 가져오기 const userGroup = document.getElementById('user-group').value; const gender = document.getElementById('gender').value; const ageGroup = document.getElementById('age-group').value; const vo2max = parseFloat(document.getElementById('vo2max').value) || 0; const squat1rm = parseFloat(document.getElementById('squat-1rm').value) || 0; const boxJump = parseFloat(document.getElementById('box-jump').value) || 0; const plankTime = parseFloat(document.getElementById('plank-time').value) || 0; const stairTest = parseFloat(document.getElementById('stair-test').value) || 0; // 체력 등급 계산 let cardioLevel, legLevel, powerLevel, coreLevel; // 심폐지구력 등급 if (vo2max >= 60) cardioLevel = "프로"; else if (vo2max >= 45) cardioLevel = "중급자"; else cardioLevel = "초보자"; // 하체 근지구력 등급 if (squat1rm >= 1.5) legLevel = "프로"; else if (squat1rm >= 1.0) legLevel = "중급자"; else legLevel = "초보자"; // 근파워 등급 if (boxJump >= 70) powerLevel = "프로"; else if (boxJump >= 50) powerLevel = "중급자"; else powerLevel = "초보자"; // 코어 안정성 등급 if (plankTime >= 300) coreLevel = "프로"; else if (plankTime >= 120) coreLevel = "중급자"; else coreLevel = "초보자"; // 종합 등급 let fitnessLevel; if (userGroup === "athlete") { fitnessLevel = "프로"; } else { const levels = [cardioLevel, legLevel, powerLevel, coreLevel]; const proCount = levels.filter(level => level === "프로").length; const beginnerCount = levels.filter(level => level === "초보자").length; if (proCount >= 2) fitnessLevel = "프로"; else if (beginnerCount >= 3) fitnessLevel = "초보자"; else fitnessLevel = "중급자"; } // 기본 시간 설정 let baseTime; switch(fitnessLevel) { case "프로": baseTime = 15 * 60; break; case "중급자": baseTime = 25 * 60; break; case "초보자": baseTime = 35 * 60; break; default: baseTime = 30 * 60; } // 성별 및 연령 보정 계수 적용 const correctionFactors = { male: { teen: 0.9, adult: 1.0, senior: 1.2 }, female: { teen: 0.95, adult: 1.1, senior: 1.3 } }; const correction = correctionFactors[gender][ageGroup]; let predictedTime = baseTime * correction; // 30층 계단 테스트 결과 반영 (추가 보정) if (stairTest > 0) { const stairFactor = stairTest / 300; // 300초(5분) 기준 predictedTime = predictedTime * (0.7 + stairFactor * 0.3); } // 결과 표시 document.getElementById('fitness-level').textContent = fitnessLevel; const minutes = Math.floor(predictedTime / 60); const seconds = Math.round(predictedTime % 60); document.getElementById('predicted-time').textContent = `${minutes}분 ${seconds}초`; const stepSpeed = (predictedTime / 2917).toFixed(2); document.getElementById('step-speed').textContent = `${stepSpeed}초/계단`; document.getElementById('result').style.display = 'block'; } </script> </body> </html> 정보/생활정보-각종계산기 계단오르기계산기 고층빌딩계단오르기계산기 롯데월드타워 롯데월드타워계단오르는시간 심폐찌구력 타워런 타워런완주예상시간 hiker's https://no1card.tistory.com/64 https://no1card.tistory.com/entry/%EB%A1%AF%EB%8D%B0%EC%9B%94%EB%93%9C%ED%83%80%EC%9B%8C-%ED%83%80%EC%9B%8C%EB%9F%B0-%EC%99%84%EC%A3%BC-%EC%98%88%EC%83%81%EC%8B%9C%EA%B0%84-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%82%B4-%EC%B2%B4%EB%A0%A5%EC%9C%BC%EB%A1%9C-2917%EA%B3%84%EB%8B%A8-%EC%A0%95%EB%B3%B5-%EA%B0%80%EB%8A%A5#entry64comment Mon, 14 Jul 2025 13:50:27 +0900 1억 만들기 | 적금 vs 펀드 vs 청년저축 - 1억 모으기 월 납입금 비교 계산기 https://no1card.tistory.com/entry/1%EC%96%B5-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%81%EA%B8%88-vs-%ED%8E%80%EB%93%9C-vs-%EC%B2%AD%EB%85%84%EC%A0%80%EC%B6%95-1%EC%96%B5-%EB%AA%A8%EC%9C%BC%EA%B8%B0-%EC%9B%94-%EB%82%A9%EC%9E%85%EA%B8%88-%EB%B9%84%EA%B5%90-%EA%B3%84%EC%82%B0%EA%B8%B0 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1억만들기.png" data-origin-width="600" data-origin-height="600"><span data-url="https://blog.kakaocdn.net/dn/bItUGL/btsPgbSUmft/YIQOLqyKC5obkJdfKsAXYk/img.png" data-phocus="https://blog.kakaocdn.net/dn/bItUGL/btsPgbSUmft/YIQOLqyKC5obkJdfKsAXYk/img.png" data-alt="1억만들기"><img src="https://blog.kakaocdn.net/dn/bItUGL/btsPgbSUmft/YIQOLqyKC5obkJdfKsAXYk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbItUGL%2FbtsPgbSUmft%2FYIQOLqyKC5obkJdfKsAXYk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="600" height="600" data-filename="1억만들기.png" data-origin-width="600" data-origin-height="600"/></span><figcaption>1억만들기</figcaption> </figure> </p> <p data-ke-size="size16">*본 계산기는 2025년 7월 1일자 기준의 금융상품입니다. 시기에 따라 상품이 없어지거나 이율이 달라질 수 있으니 참고용으로만 사용바랍니다.</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p data-ke-size="size16">&nbsp;</p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1억 모으기 계산기 - 우대이율 비교 | 적금·펀드·청년저축</title> <meta name="description" content="우대조건 포함 최대 이율로 계산하는 1억 모으기 계산기. 상품별 기본/최대 이율 비교 및 세후 수령액 제공"> <meta name="keywords" content="1억 목표, 저축 계산기, 적금 계산, 채권 수익률, 청년도약계좌, 펀드 수익률, CMA, 월 저축액, 세후 수익" /> <meta property="og:title" content="1억 만들기 목표 계산기 | 적금·채권·청년저축·펀드 비교"> <meta property="og:description" content="1억 모으기 위한 최적의 저축 방법을 비교해보세요. 세전/세후 금액 자동 계산"> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/savings-calculator"> <style> body { font-family: 'Malgun Gothic', sans-serif; background: #f5f7fa; color: #333; margin: 0; padding: 20px; } .calculator { max-width: 800px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } h1 { color: #2c3e50; text-align: center; margin-bottom: 25px; } .tab-buttons { display: flex; gap: 10px; margin-bottom: 20px; } .tab-buttons button { flex: 1; padding: 12px; background: #ecf0f1; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: all 0.3s; } .tab-buttons button.active { background: #3498db; color: #fff; } .input-section { margin: 20px 0; } .input-group { margin-bottom: 15px; } .input-group label { display: block; margin-bottom: 8px; font-weight: bold; } .input-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; } .product-results { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 20px; } .product-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .product-card h3 { color: #2c3e50; margin-top: 0; font-size: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 10px; } .result-value { font-size: 1.4rem; font-weight: bold; color: #e74c3c; margin: 15px 0; text-align: center; } .rate-info { background: #e8f4fd; padding: 12px; border-radius: 8px; margin: 15px 0; font-size: 0.95rem; } .rate-info span { display: block; margin: 5px 0; } .max-rate { color: #e74c3c; font-weight: bold; } .money-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; } .money-item { background: #f8f9fa; padding: 10px; border-radius: 8px; text-align: center; } .money-item .label { color: #7f8c8d; font-size: 0.9rem; margin-bottom: 5px; } .money-item .amount { font-weight: bold; color: #2c3e50; font-size: 1.1rem; } .product-details { font-size: 0.9rem; color: #7f8c8d; margin-top: 15px; } .highlight { background: #f8f9fa; padding: 20px; border-radius: 10px; margin-top: 30px; } .period-buttons { display: flex; gap: 10px; margin-bottom: 20px; } .period-buttons button { flex: 1; padding: 12px; background: #ecf0f1; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; } .period-buttons button.active { background: #3498db; color: #fff; } @media (max-width: 600px) { .money-detail { grid-template-columns: 1fr; } } </style> </head> <body> <div class="calculator"> <h1>1억 모으기 계산기</h1> <p style="text-align: center; margin-bottom: 25px;">목표 기간 또는 월 저축액을 입력해주세요.</p> <div class="tab-buttons"> <button class="active" data-mode="period">기간으로 계산</button> <button data-mode="savings">월급액으로 계산</button> </div> <!-- 기간 선택 섹션 --> <div id="period-section" class="input-section"> <div class="period-buttons"> <button class="active" data-years="3">3년</button> <button data-years="5">5년</button> <button data-years="10">10년</button> </div> </div> <!-- 월 저축액 입력 섹션 --> <div id="savings-section" class="input-section" style="display: none;"> <div class="input-group"> <label for="monthly-savings">월 저축 가능 금액 (원)</label> <input type="number" id="monthly-savings" placeholder="예: 1000000"> </div> <button onclick="calculateBySavings()" style="width: 100%; padding: 12px; background: #3498db; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">계산하기</button> </div> <div id="result-container"></div> <div class="highlight"> <h3> 계산 방법 안내</h3> <p><strong>기간으로 계산</strong>: 목표 기간 선택 시 필요한 월 저축액 계산</p> <p><strong>월급액으로 계산</strong>: 현재 저축 가능 금액으로 1억 모으는 기간 계산</p> <p>* 모든 수치는 <u>최대 우대 이율</u> 기준이며, 실제 가입 조건 확인이 필요합니다.</p> </div> </div> <script> // 상품 데이터 (기본 이율 + 최대 우대 이율) const products = [ { name: "KB국민 My우대적금", baseRate: 4.5, maxRate: 6.5, rateCondition: "직장인 + 자동이체 + 인터넷뱅킹 가입 시", desc: "최대 연 6.5%, 월 100만원 한도, 최장 3년", taxFree: false, maxMonthly: 1000000, link: "https://www.kbstar.com" }, { name: "IBK기업 청년도전적금", baseRate: 5.0, maxRate: 7.0, rateCondition: "만19~34세 + 첫 가입 + 급여이체 시", desc: "최대 연 7.0%, 월 70만원 한도, 3년 만기", taxFree: false, maxMonthly: 700000, link: "https://www.ibk.co.kr" }, { name: "펀드 (미국 S&P 500 인덱스)", baseRate: 7.0, maxRate: 10.0, rateCondition: "10년 평균 수익률 기준", desc: "연 7~10% (변동), 장기투자 추천, 원금 보장 없음", taxFree: false, maxMonthly: null, link: "https://www.koreafund.com" }, { name: "청년도약계좌 (KB)", baseRate: 5.0, maxRate: 6.0, rateCondition: "만19~34세 + 연소득 7,200만원 이하", desc: "최대 연 6.0%, 연 1,200만원 한도, 세액공제 가능", taxFree: true, maxMonthly: 1000000, link: "https://obank.kbstar.com" } ]; // 변수 초기화 let currentMode = "period"; let selectedYears = 3; // 탭 전환 이벤트 const tabButtons = document.querySelectorAll('.tab-buttons button'); tabButtons.forEach(btn => { btn.addEventListener('click', () => { tabButtons.forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentMode = btn.getAttribute('data-mode'); document.getElementById('period-section').style.display = currentMode === 'period' ? 'block' : 'none'; document.getElementById('savings-section').style.display = currentMode === 'savings' ? 'block' : 'none'; if (currentMode === 'period') calculateByPeriod(); }); }); // 기간 선택 이벤트 const periodButtons = document.querySelectorAll('.period-buttons button'); periodButtons.forEach(btn => { btn.addEventListener('click', () => { periodButtons.forEach(b => b.classList.remove('active')); btn.classList.add('active'); selectedYears = parseInt(btn.getAttribute('data-years')); calculateByPeriod(); }); }); // 기간으로 계산 (월 저축액 산출) function calculateByPeriod() { const resultContainer = document.getElementById('result-container'); let resultsHTML = `<h2>${selectedYears}년 안에 1억 모으기</h2><div class="product-results">`; products.forEach(product => { // 월 한도 초과 상품 필터링 (3년 목표 시) if (selectedYears === 3 && product.maxMonthly && (100000000 / (selectedYears * 12) > product.maxMonthly)) { return; } const taxRate = product.taxFree ? 0 : 0.154; const netMaxRate = product.maxRate * (1 - taxRate); const months = selectedYears * 12; const monthlyRate = product.maxRate / 100 / 12; // 월 저축액 계산 (1만원 단위 올림) const monthlyPayment = 100000000 * monthlyRate / (Math.pow(1 + monthlyRate, months) - 1); const roundedMonthly = Math.ceil(monthlyPayment / 10000) * 10000; // 금액 계산 const totalPayment = roundedMonthly * months; const grossAmount = roundedMonthly * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate; const taxAmount = (grossAmount - totalPayment) * taxRate; const netAmount = grossAmount - taxAmount; resultsHTML += ` <div class="product-card"> <h3>${product.name} <a href="${product.link}" target="_blank" style="font-size: 0.8rem; color: #3498db; text-decoration: none;">[상품안내]</a></h3> <div class="result-value">${roundedMonthly.toLocaleString()}원/월</div> <div class="rate-info"> <span>기본 이율: 연 ${product.baseRate.toFixed(1)}%</span> <span class="max-rate">▼ 최대 우대 이율: 연 ${product.maxRate.toFixed(1)}%</span> <span>(${product.rateCondition})</span> </div> <div class="money-detail"> <div class="money-item"> <div class="label">총 납입액</div> <div class="amount">${Math.round(totalPayment).toLocaleString()}원</div> </div> <div class="money-item"> <div class="label">세전 최종금액</div> <div class="amount">${Math.round(grossAmount).toLocaleString()}원</div> </div> <div class="money-item"> <div class="label">세후 수령금액</div> <div class="amount">${Math.round(netAmount).toLocaleString()}원</div> </div> <div class="money-item"> <div class="label">예상 수익금</div> <div class="amount">${Math.round(netAmount - totalPayment).toLocaleString()}원</div> </div> </div> <div class="product-details"> <p>${product.desc}</p> ${product.maxMonthly ? `<p>월 최대 납입 한도: ${product.maxMonthly.toLocaleString()}원</p>` : ''} </div> </div> `; }); resultsHTML += `</div>`; resultContainer.innerHTML = resultsHTML; } // 월 저축액으로 계산 (기간 산출) function calculateBySavings() { const monthlySavings = parseFloat(document.getElementById('monthly-savings').value); if (!monthlySavings || monthlySavings <= 0) { alert("월 저축액을 올바르게 입력해주세요."); return; } const resultContainer = document.getElementById('result-container'); let resultsHTML = `<h2>월 ${monthlySavings.toLocaleString()}원으로 1억 모으기</h2><div class="product-results">`; products.forEach(product => { // 월 한도 초과 상품 필터링 if (product.maxMonthly && monthlySavings > product.maxMonthly) { return; } const taxRate = product.taxFree ? 0 : 0.154; const netMaxRate = product.maxRate * (1 - taxRate); const monthlyRate = product.maxRate / 100 / 12; // 기간 계산 (개월 수) let months = 0; if (monthlySavings >= 100000000) { months = 1; } else { months = Math.log(1 + (100000000 * monthlyRate / monthlySavings)) / Math.log(1 + monthlyRate); } const years = Math.ceil(months / 12); const actualMonths = Math.ceil(months); // 금액 계산 const totalPayment = monthlySavings * actualMonths; const grossAmount = monthlySavings * (Math.pow(1 + monthlyRate, actualMonths) - 1) / monthlyRate; const taxAmount = (grossAmount - totalPayment) * taxRate; const netAmount = grossAmount - taxAmount; resultsHTML += ` <div class="product-card"> <h3>${product.name} <a href="${product.link}" target="_blank" style="font-size: 0.8rem; color: #3498db; text-decoration: none;">[상품안내]</a></h3> <div class="result-value">약 ${years}년 ${actualMonths % 12}개월</div> <div class="rate-info"> <span>기본 이율: 연 ${product.baseRate.toFixed(1)}%</span> <span class="max-rate">▼ 최대 우대 이율: 연 ${product.maxRate.toFixed(1)}%</span> <span>(${product.rateCondition})</span> </div> <div class="money-detail"> <div class="money-item"> <div class="label">총 납입액</div> <div class="amount">${Math.round(totalPayment).toLocaleString()}원</div> </div> <div class="money-item"> <div class="label">세전 최종금액</div> <div class="amount">${Math.round(grossAmount).toLocaleString()}원</div> </div> <div class="money-item"> <div class="label">세후 수령금액</div> <div class="amount">${Math.round(netAmount).toLocaleString()}원</div> </div> <div class="money-item"> <div class="label">예상 수익금</div> <div class="amount">${Math.round(netAmount - totalPayment).toLocaleString()}원</div> </div> </div> <div class="product-details"> <p>${product.desc}</p> ${product.maxMonthly ? `<p>월 최대 납입 한도: ${product.maxMonthly.toLocaleString()}원</p>` : ''} </div> </div> `; }); resultsHTML += `</div>`; resultContainer.innerHTML = resultsHTML; } // 초기 계산 실행 calculateByPeriod(); </script> </body> </html> 정보/생활정보-각종계산기 1억 1억만들기 1억만들기계산기 1억모으기 1억모으기통장 1억목표 3년에1억모으기 적금1억만들기 청년저축1억만들기 펀드로1억만들기 hiker's https://no1card.tistory.com/63 https://no1card.tistory.com/entry/1%EC%96%B5-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%81%EA%B8%88-vs-%ED%8E%80%EB%93%9C-vs-%EC%B2%AD%EB%85%84%EC%A0%80%EC%B6%95-1%EC%96%B5-%EB%AA%A8%EC%9C%BC%EA%B8%B0-%EC%9B%94-%EB%82%A9%EC%9E%85%EA%B8%88-%EB%B9%84%EA%B5%90-%EA%B3%84%EC%82%B0%EA%B8%B0#entry63comment Mon, 14 Jul 2025 12:43:31 +0900 [2025 최신]무료 TDEE 계산기 - 체중 감량/증량을 위한 과학적 칼로리 계산 https://no1card.tistory.com/entry/2025-%EC%B5%9C%EC%8B%A0%EB%AC%B4%EB%A3%8C-TDEE-%EA%B3%84%EC%82%B0%EA%B8%B0-%EC%B2%B4%EC%A4%91-%EA%B0%90%EB%9F%89%EC%A6%9D%EB%9F%89%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B3%BC%ED%95%99%EC%A0%81-%EC%B9%BC%EB%A1%9C%EB%A6%AC-%EA%B3%84%EC%82%B0 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="tdee1.png" data-origin-width="500" data-origin-height="500"><span data-url="https://blog.kakaocdn.net/dn/bFyP1t/btsPgTXKN29/JlXeuvot7VmhwfgkQcXafk/img.png" data-phocus="https://blog.kakaocdn.net/dn/bFyP1t/btsPgTXKN29/JlXeuvot7VmhwfgkQcXafk/img.png"><img src="https://blog.kakaocdn.net/dn/bFyP1t/btsPgTXKN29/JlXeuvot7VmhwfgkQcXafk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFyP1t%2FbtsPgTXKN29%2FJlXeuvot7VmhwfgkQcXafk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="500" height="500" data-filename="tdee1.png" data-origin-width="500" data-origin-height="500"/></span></figure> </p> <blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';"> [2025 최신] TDEE 계산기로 하루 칼로리 필요량 정확히 알아보기</span><br /><span style="font-family: 'Noto Serif KR';"> TDEE&middot;BMR 자동 계산기｜체중 유지/다이어트/벌크업 칼로리 측정</span><br /><span style="font-family: 'Noto Serif KR';">추천 TDEE 계산법｜Mifflin-St Jeor 공식 기반 칼로리 계산기</span><br /><hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /><br /><br /></blockquote> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16"></p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TDEE 계산기 - 일일 에너지 소비량 계산 | 건강 계산기</title> <meta name="description" content="정확한 TDEE(총 일일 에너지 소비량) 계산기로 체중 유지, 감량 또는 증량에 필요한 칼로리를 계산해보세요. 성별, 나이, 체중, 키, 활동 수준을 기반으로 계산합니다."> <meta name="keywords" content="TDEE 계산기, 칼로리 계산, 일일 에너지 소비량, 체중 관리, 칼로리 요구량, BMR 계산"> <meta name="robots" content="index, follow"> <meta name="author" content="건강 계산기"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://yourdomain.com/tdee-calculator"> <meta property="og:title" content="TDEE 계산기 - 일일 에너지 소비량 계산"> <meta property="og:description" content="정확한 TDEE(총 일일 에너지 소비량) 계산기로 체중 관리에 필요한 칼로리를 계산해보세요."> <meta property="og:image" content="https://yourdomain.com/images/tdee-calculator-preview.jpg"> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://yourdomain.com/tdee-calculator"> <meta property="twitter:title" content="TDEE 계산기 - 일일 에너지 소비량 계산"> <meta property="twitter:description" content="정확한 TDEE(총 일일 에너지 소비량) 계산기로 체중 관리에 필요한 칼로리를 계산해보세요."> <meta property="twitter:image" content="https://yourdomain.com/images/tdee-calculator-preview.jpg"> <style> /* 기본 스타일 */ :root { --primary-color: #3498db; --secondary-color: #2980b9; --text-color: #333; --light-gray: #f5f5f5; --medium-gray: #e0e0e0; --dark-gray: #777; --white: #fff; --success-color: #2ecc71; --warning-color: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--light-gray); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 헤더 스타일 */ .header { background-color: var(--primary-color); color: var(--white); padding: 30px 0; text-align: center; margin-bottom: 30px; } .header h1 { font-size: 2.5rem; margin-bottom: 10px; } /* 계산기 컨테이너 */ .calculator-container { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 50px; } .calculator-form, .calculator-result { background-color: var(--white); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 30px; flex: 1; min-width: 300px; } .calculator-form { max-width: 400px; } /* 폼 스타일 */ .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: bold; } .form-group input[type="number"], .form-group select { width: 100%; padding: 12px; border: 1px solid var(--medium-gray); border-radius: 5px; font-size: 16px; } .radio-group { display: flex; gap: 20px; margin-top: 8px; } .radio-group label { display: flex; align-items: center; gap: 5px; font-weight: normal; cursor: pointer; } .calculate-btn { width: 100%; padding: 12px; background-color: var(--primary-color); color: var(--white); border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } .calculate-btn:hover { background-color: var(--secondary-color); } /* 결과 섹션 스타일 */ .result-section { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--medium-gray); } .tdee-result { font-size: 2.5rem; font-weight: bold; color: var(--primary-color); margin-bottom: 10px; } .tdee-result .unit { font-size: 1rem; color: var(--text-color); } .note { color: var(--dark-gray); font-size: 0.9rem; } /* 활동 수준 테이블 */ .activity-levels { margin-bottom: 30px; } .activity-levels h3 { margin-bottom: 15px; font-size: 1.2rem; } .activity-levels table { width: 100%; border-collapse: collapse; } .activity-levels th, .activity-levels td { padding: 10px; text-align: left; border-bottom: 1px solid var(--medium-gray); } .activity-levels th { background-color: var(--light-gray); } /* 체중 관리 섹션 */ .weight-management { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .weight-loss, .weight-gain { flex: 1; min-width: 250px; } .weight-management h3 { margin-bottom: 15px; font-size: 1.2rem; } .weight-management ul { list-style-type: none; } .weight-management li { margin-bottom: 8px; } /* BMI 섹션 */ .bmi-section { text-align: center; margin-bottom: 30px; padding: 20px 0; border-top: 1px solid var(--medium-gray); border-bottom: 1px solid var(--medium-gray); } .bmi-result { font-size: 2rem; font-weight: bold; margin-bottom: 5px; } .bmi-category { font-size: 1rem; font-weight: normal; } .bmi-range { color: var(--dark-gray); font-size: 0.9rem; } /* 다량 영양소 섹션 */ .macronutrients { margin-bottom: 30px; } .macros-tabs { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } .macro-tab { padding: 8px 15px; background-color: var(--light-gray); border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .macro-tab.active { background-color: var(--primary-color); color: var(--white); } .macro-info ul { list-style-type: none; } .macro-info li { margin-bottom: 8px; } /* 액션 버튼 */ .action-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .action-btn { padding: 10px 15px; background-color: var(--light-gray); border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .action-btn:hover { background-color: var(--medium-gray); } /* TDEE 정보 섹션 */ .tdee-info { background-color: var(--white); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 30px; margin-bottom: 50px; } .tdee-info h2 { margin-bottom: 20px; color: var(--primary-color); } .tdee-info h3 { margin: 25px 0 15px; color: var(--primary-color); } .tdee-info p, .tdee-info ul { margin-bottom: 15px; } .tdee-info ul { padding-left: 20px; } .tdee-info table { width: 100%; border-collapse: collapse; margin: 15px 0; } .tdee-info th, .tdee-info td { padding: 10px; text-align: left; border-bottom: 1px solid var(--medium-gray); } .tdee-info th { background-color: var(--light-gray); } /* 푸터 스타일 */ .footer { text-align: center; padding: 20px 0; background-color: var(--medium-gray); color: var(--text-color); } /* 반응형 디자인 */ @media (max-width: 768px) { .calculator-container { flex-direction: column; } .calculator-form, .calculator-result { max-width: 100%; } .weight-management { flex-direction: column; } } </style> </head> <body> <header class="header"> <div class="container"> <h1>TDEE 계산기</h1> <p>총 일일 에너지 소비량을 계산하여 체중 관리를 과학적으로 접근하세요</p> </div> </header> <main class="container"> <div class="calculator-container"> <div class="calculator-form"> <form id="tdee-form"> <div class="form-group"> <label for="gender">성별:</label> <div class="radio-group"> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">남성</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">여성</label> </div> </div> <div class="form-group"> <label for="age">나이(세)</label> <input type="number" id="age" name="age" min="18" max="100" value="30" required> </div> <div class="form-group"> <label for="weight">체중 (kg)</label> <input type="number" id="weight" name="weight" min="30" max="300" value="70" required> </div> <div class="form-group"> <label for="height">키 (cm)</label> <input type="number" id="height" name="height" min="100" max="250" value="170" required> </div> <div class="form-group"> <label for="activity">활동 수준</label> <select id="activity" name="activity" required> <option value="1.2">거의 활동 없음 (앉아서 일함)</option> <option value="1.375">가벼운 활동 (주 1-3일 운동)</option> <option value="1.55">보통 활동 (주 3-5일 운동)</option> <option value="1.725">매우 활동적 (주 6-7일 운동)</option> <option value="1.9">극도로 활동적 (육체적 직업 또는 하루 2회 운동)</option> </select> </div> <button type="submit" class="calculate-btn">계산하기</button> </form> </div> <div class="calculator-result" id="result" style="display: none;"> <h2>당신의 총 일일 에너지 소비량 (TDEE)</h2> <div class="result-section"> <div class="tdee-result"> <span id="tdee-value">0</span> <span class="unit">칼로리/일</span> </div> <p class="note">체중 유지를 위해 하루에 필요한 칼로리 양입니다.</p> </div> <div class="activity-levels"> <h3>다양한 활동 수준에서의 TDEE</h3> <table> <tr> <th>활동 수준</th> <th>칼로리/일</th> </tr> <tr> <td>비활동적</td> <td id="sedentary">0</td> </tr> <tr> <td>가벼운 활동</td> <td id="light">0</td> </tr> <tr> <td>보통</td> <td id="moderate">0</td> </tr> <tr> <td>매우 활동적</td> <td id="active">0</td> </tr> <tr> <td>극도로 활동적</td> <td id="extreme">0</td> </tr> </table> </div> <div class="weight-management"> <div class="weight-loss"> <h3>체중 감량을 위한 에너지 섭취량</h3> <ul> <li>약간의 체중 감량 (0.25kg/주): <span id="mild-loss">0</span> 칼로리/일</li> <li>체중 감량 (0.5kg/주): <span id="moderate-loss">0</span> 칼로리/일</li> </ul> </div> <div class="weight-gain"> <h3>체중 증가를 위한 에너지 섭취량</h3> <ul> <li>약간의 체중 증가 (0.25kg/주): <span id="mild-gain">0</span> 칼로리/일</li> <li>체중 증가 (0.5kg/주): <span id="moderate-gain">0</span> 칼로리/일</li> </ul> </div> </div> <div class="bmi-section"> <h3>당신의 체질량 지수 (BMI)</h3> <div class="bmi-result"> <span id="bmi-value">0</span> <span class="bmi-category" id="bmi-category">(정상 체중)</span> </div> <p class="bmi-range">정상 BMI 범위: 18.5 ~ 24.9</p> </div> <div class="macronutrients"> <h3>다량 영양소 섭취 세부사항</h3> <div class="macros-tabs"> <button class="macro-tab active" data-macro="moderate">중간 탄수화물 (30/35/35)</button> <button class="macro-tab" data-macro="low">낮은 탄수화물 (40/40/20)</button> <button class="macro-tab" data-macro="high">높은 탄수화물 (30/20/50)</button> </div> <div class="macros-content"> <div class="macro-info" id="moderate-macro"> <ul> <li>단백질: <span id="mod-protein">0</span>g</li> <li>지방: <span id="mod-fat">0</span>g</li> <li>탄수화물: <span id="mod-carbs">0</span>g</li> </ul> </div> <div class="macro-info" id="low-macro" style="display: none;"> <ul> <li>단백질: <span id="low-protein">0</span>g</li> <li>지방: <span id="low-fat">0</span>g</li> <li>탄수화물: <span id="low-carbs">0</span>g</li> </ul> </div> <div class="macro-info" id="high-macro" style="display: none;"> <ul> <li>단백질: <span id="high-protein">0</span>g</li> <li>지방: <span id="high-fat">0</span>g</li> <li>탄수화물: <span id="high-carbs">0</span>g</li> </ul> </div> </div> </div> <div class="action-buttons"> <button id="print-btn" class="action-btn">인쇄하기</button> <button id="copy-btn" class="action-btn">결과 복사</button> </div> </div> </div> <article class="tdee-info"> <h2>TDEE란 무엇인가요?</h2> <p><strong>TDEE(Total Daily Energy Expenditure)</strong>는 하루 동안 소비하는 총 에너지 양을 의미합니다. 이는 기초 대사율(BMR), 신체 활동, 음식의 열 효과(TEF) 등 모든 에너지 소비를 포함합니다.</p> <h3>TDEE의 구성 요소</h3> <ul> <li><strong>기초 대사율(BMR, 50-70%)</strong>: 생명 유지를 위한 기본적인 기능(호흡, 심장 박동 등)에 필요한 에너지</li> <li><strong>신체 활동(20-30%)</strong>: 운동 및 일상 활동으로 소비되는 에너지</li> <li><strong>음식의 열 효과(TEF, 10%)</strong>: 음식을 소비, 흡수, 저장하는 과정에서 소비되는 에너지</li> </ul> <h3>TDEE 계산의 중요성</h3> <p>TDEE를 정확히 계산하면 체중 관리 목표를 과학적으로 설정할 수 있습니다:</p> <ul> <li><strong>체중 유지</strong>: TDEE와 동일한 칼로리 섭취</li> <li><strong>체중 감량</strong>: TDEE보다 500kcal 적게 섭취 (약 0.5kg/주 감량)</li> <li><strong>체중 증가</strong>: TDEE보다 500kcal 많이 섭취 (약 0.5kg/주 증가)</li> </ul> <h3>TDEE 계산 공식</h3> <p>TDEE는 일반적으로 Mifflin-St Jeor 공식을 사용하여 계산합니다:</p> <p><strong>남성:</strong> BMR = (10 × 체중(kg)) + (6.25 × 키(cm)) - (5 × 나이) + 5</p> <p><strong>여성:</strong> BMR = (10 × 체중(kg)) + (6.25 × 키(cm)) - (5 × 나이) - 161</p> <p>BMR에 활동 계수를 곱하여 TDEE를 계산합니다.</p> <h3>활동 수준별 계수</h3> <table> <tr> <th>활동 수준</th> <th>계수</th> <th>설명</th> </tr> <tr> <td>거의 활동 없음</td> <td>1.2</td> <td>앉아서 일하거나 운동을 거의 하지 않음</td> </tr> <tr> <td>가벼운 활동</td> <td>1.375</td> <td>주 1-3일 가벼운 운동</td> </tr> <tr> <td>보통 활동</td> <td>1.55</td> <td>주 3-5일 중간 강도 운동</td> </tr> <tr> <td>매우 활동적</td> <td>1.725</td> <td>주 6-7일 고강도 운동</td> </tr> <tr> <td>극도로 활동적</td> <td>1.9</td> <td>육체적 직업 또는 하루 2회 운동</td> </tr> </table> <h3>TDEE 계산기의 활용</h3> <p>이 계산기는 체중 관리 목표에 따라:</p> <ul> <li>체중 유지에 필요한 칼로리</li> <li>체중 감량을 위한 칼로리 제안</li> <li>체중 증가를 위한 칼로리 제안</li> <li>다량 영양소(단백질, 지방, 탄수화물) 분배</li> <li>BMI 계산 및 평가</li> </ul> <h3>주의사항</h3> <p>TDEE 계산 결과는 추정치이며 개인차가 있을 수 있습니다. 정확한 영양 상담이 필요하면 전문가와 상담하세요.</p> </article> </main> <footer class="footer"> <div class="container"> <p> 2025 TDEE 계산기. DesignU © All right reserved.</p> </div> </footer> <script> document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('tdee-form'); const resultSection = document.getElementById('result'); form.addEventListener('submit', function(e) { e.preventDefault(); calculateTDEE(); }); // 매크로 탭 전환 document.querySelectorAll('.macro-tab').forEach(tab => { tab.addEventListener('click', function() { // 모든 탭 비활성화 document.querySelectorAll('.macro-tab').forEach(t => { t.classList.remove('active'); }); // 현재 탭 활성화 this.classList.add('active'); // 모든 매크로 정보 숨기기 document.querySelectorAll('.macro-info').forEach(info => { info.style.display = 'none'; }); // 선택한 매크로 정보 표시 const macroType = this.getAttribute('data-macro'); document.getElementById(`${macroType}-macro`).style.display = 'block'; }); }); // 인쇄 버튼 document.getElementById('print-btn').addEventListener('click', function() { window.print(); }); // PDF 다운로드 버튼 document.getElementById('download-btn').addEventListener('click', function() { // html2pdf 라이브러리가 필요합니다 alert('PDF 저장 기능을 사용하려면 html2pdf.bundle.min.js 파일을 추가해야 합니다.'); /* const element = document.getElementById('result'); const opt = { margin: 10, filename: 'TDEE_계산_결과.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } }; html2pdf().from(element).set(opt).save(); */ }); // 결과 복사 버튼 document.getElementById('copy-btn').addEventListener('click', function() { const resultText = document.getElementById('result').innerText; navigator.clipboard.writeText(resultText).then(() => { alert('결과가 클립보드에 복사되었습니다.'); }); }); }); function calculateTDEE() { // 입력 값 가져오기 const gender = document.querySelector('input[name="gender"]:checked').value; const age = parseFloat(document.getElementById('age').value); const weight = parseFloat(document.getElementById('weight').value); const height = parseFloat(document.getElementById('height').value); const activityLevel = parseFloat(document.getElementById('activity').value); // BMR 계산 (Mifflin-St Jeor 공식) let bmr; if (gender === 'male') { bmr = (10 * weight) + (6.25 * height) - (5 * age) + 5; } else { bmr = (10 * weight) + (6.25 * height) - (5 * age) - 161; } // TDEE 계산 const tdee = Math.round(bmr * activityLevel); // 다양한 활동 수준에서의 TDEE 계산 const sedentary = Math.round(bmr * 1.2); const light = Math.round(bmr * 1.375); const moderate = Math.round(bmr * 1.55); const active = Math.round(bmr * 1.725); const extreme = Math.round(bmr * 1.9); // 체중 관리 칼로리 계산 const mildLoss = tdee - 250; const moderateLoss = tdee - 500; const mildGain = tdee + 250; const moderateGain = tdee + 500; // BMI 계산 const heightInMeters = height / 100; const bmi = (weight / (heightInMeters * heightInMeters)).toFixed(2); let bmiCategory; if (bmi < 18.5) { bmiCategory = '저체중'; } else if (bmi >= 18.5 && bmi < 23) { bmiCategory = '정상 체중'; } else if (bmi >= 23 && bmi < 25) { bmiCategory = '과체중'; } else if (bmi >= 25 && bmi < 30) { bmiCategory = '비만'; } else { bmiCategory = '고도 비만'; } // 다량 영양소 계산 calculateMacronutrients(tdee); // 결과 표시 document.getElementById('tdee-value').textContent = tdee.toLocaleString(); document.getElementById('sedentary').textContent = sedentary.toLocaleString(); document.getElementById('light').textContent = light.toLocaleString(); document.getElementById('moderate').textContent = moderate.toLocaleString(); document.getElementById('active').textContent = active.toLocaleString(); document.getElementById('extreme').textContent = extreme.toLocaleString(); document.getElementById('mild-loss').textContent = mildLoss.toLocaleString(); document.getElementById('moderate-loss').textContent = moderateLoss.toLocaleString(); document.getElementById('mild-gain').textContent = mildGain.toLocaleString(); document.getElementById('moderate-gain').textContent = moderateGain.toLocaleString(); document.getElementById('bmi-value').textContent = bmi; document.getElementById('bmi-category').textContent = `(${bmiCategory})`; // 결과 섹션 표시 document.getElementById('result').style.display = 'block'; // 결과로 스크롤 document.getElementById('result').scrollIntoView({ behavior: 'smooth' }); } function calculateMacronutrients(tdee) { // 중간 탄수화물 (30% 단백질, 35% 지방, 35% 탄수화물) const modProtein = Math.round((tdee * 0.3) / 4); const modFat = Math.round((tdee * 0.35) / 9); const modCarbs = Math.round((tdee * 0.35) / 4); // 낮은 탄수화물 (40% 단백질, 40% 지방, 20% 탄수화물) const lowProtein = Math.round((tdee * 0.4) / 4); const lowFat = Math.round((tdee * 0.4) / 9); const lowCarbs = Math.round((tdee * 0.2) / 4); // 높은 탄수화물 (30% 단백질, 20% 지방, 50% 탄수화물) const highProtein = Math.round((tdee * 0.3) / 4); const highFat = Math.round((tdee * 0.2) / 9); const highCarbs = Math.round((tdee * 0.5) / 4); // 결과 표시 document.getElementById('mod-protein').textContent = modProtein; document.getElementById('mod-fat').textContent = modFat; document.getElementById('mod-carbs').textContent = modCarbs; document.getElementById('low-protein').textContent = lowProtein; document.getElementById('low-fat').textContent = lowFat; document.getElementById('low-carbs').textContent = lowCarbs; document.getElementById('high-protein').textContent = highProtein; document.getElementById('high-fat').textContent = highFat; document.getElementById('high-carbs').textContent = highCarbs; } </script> </body> </html> 정보/생활정보-각종계산기 bmr계산기 mifflin-st jeor TDEE tdeecalculator tdee계산기 전문가공인tdee 체중관리계산기 칼로리계산기 hiker's https://no1card.tistory.com/62 https://no1card.tistory.com/entry/2025-%EC%B5%9C%EC%8B%A0%EB%AC%B4%EB%A3%8C-TDEE-%EA%B3%84%EC%82%B0%EA%B8%B0-%EC%B2%B4%EC%A4%91-%EA%B0%90%EB%9F%89%EC%A6%9D%EB%9F%89%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B3%BC%ED%95%99%EC%A0%81-%EC%B9%BC%EB%A1%9C%EB%A6%AC-%EA%B3%84%EC%82%B0#entry62comment Sat, 12 Jul 2025 22:29:46 +0900 2025 최신 걸음수 계산기-2 | 1만보 걸으면 몇 kcal? 성인/노인 맞춤형 칼로리 계산기 https://no1card.tistory.com/entry/2025-%EC%B5%9C%EC%8B%A0-%EA%B1%B8%EC%9D%8C%EC%88%98-%EA%B3%84%EC%82%B0%EA%B8%B0-2-1%EB%A7%8C%EB%B3%B4-%EA%B1%B8%EC%9C%BC%EB%A9%B4-%EB%AA%87-kcal-%EC%84%B1%EC%9D%B8%EB%85%B8%EC%9D%B8-%EB%A7%9E%EC%B6%A4%ED%98%95-%EC%B9%BC%EB%A1%9C%EB%A6%AC-%EA%B3%84%EC%82%B0%EA%B8%B0 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="걸음걸이계산기LED.png" data-origin-width="500" data-origin-height="500"><span data-url="https://blog.kakaocdn.net/dn/bJqQc6/btsPgh5RNbo/igb9aANhPWDGzR9lKwpI91/img.png" data-phocus="https://blog.kakaocdn.net/dn/bJqQc6/btsPgh5RNbo/igb9aANhPWDGzR9lKwpI91/img.png"><img src="https://blog.kakaocdn.net/dn/bJqQc6/btsPgh5RNbo/igb9aANhPWDGzR9lKwpI91/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJqQc6%2FbtsPgh5RNbo%2Figb9aANhPWDGzR9lKwpI91%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="500" height="500" data-filename="걸음걸이계산기LED.png" data-origin-width="500" data-origin-height="500"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16"></p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="성별, 연령대, 체형을 고려한 가장 정확한 걸음 수와 칼로리 계산기. 걷기/달리기 보폭 차이와 운동 강도까지 반영한 개인 맞춤형 결과 제공"> <meta name="keywords" content="걸음수 계산, 칼로리 계산기, 만보기, 걷기 운동, 달리기 칼로리, 보폭 계산, 하루 걸음수, 운동량 측정"> <meta property="og:title" content="[정밀 분석] 개인 맞춤형 걸음 수 & 칼로리 계산기"> <meta property="og:description" content="의학적 근거에 기반한 정확한 운동 분석 도구"> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/walking-calculator"> <meta name="robots" content="index, follow"> <title>정확한 걸음수 & 칼로리 계산기 | 성별/연령별 맞춤 분석</title> <link rel="canonical" href="https://example.com/walking-calculator"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebApplication", "name": "걸음 수 & 칼로리 계산기", "description": "개인별 특성을 반영한 정밀 운동 분석 도구", "applicationCategory": "HealthApplication", "operatingSystem": "Web" } </script> <style> body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: #333; max-width: 100%; overflow-x: hidden; margin: 0; padding: 20px; background-color: #f5f7fa; } .calculator-container { max-width: 500px; margin: 30px auto; padding: 25px; border-radius: 12px; background: linear-gradient(rgba(249,249,249,0.93), rgba(249,249,249,0.93)), url('https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80') no-repeat center center; background-size: cover; box-shadow: 0 4px 20px rgba(0,0,0,0.12); border: 1px solid #e0e0e0; } .calculator-title { text-align: center; margin-bottom: 25px; color: #2c3e50; font-size: 26px; font-weight: 600; letter-spacing: -0.5px; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; color: #34495e; font-weight: 500; font-size: 14px; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; box-sizing: border-box; } .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .radio-group { display: flex; gap: 10px; margin-top: 5px; } .radio-option { flex: 1; text-align: center; background: #f8f9fa; padding: 8px; border-radius: 6px; cursor: pointer; } .calculate-btn { width: 100%; padding: 14px; background: linear-gradient(to right, #3498db, #2ecc71); color: #fff; border: none; border-radius: 6px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-bottom: 20px; } .calculate-btn:hover { opacity: 0.9; } #result { margin-top: 25px; padding: 20px; background: rgba(255,255,255,0.85); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); display: none; } .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; } .result-card { padding: 12px; border-radius: 8px; text-align: center; } .result-value { font-size: 26px; font-weight: 600; margin: 5px 0; } .progress-container { margin-top: 20px; display: none; } .progress-bar { height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(to right, #3498db, #2ecc71); border-radius: 4px; transition: width 0.5s; } .seo-content { margin: 40px auto; padding: 25px; background: #fafafa; border-radius: 8px; border: 1px solid #eee; max-width: 800px; color: #666; font-size: 15px; line-height: 1.7; } .seo-content h1, .seo-content h2, .seo-content h3 { color: #444; } .seo-content h1 { font-size: 22px; margin-top: 0; } .seo-content h2 { font-size: 18px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; } .feature-card { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .tip-box { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 20px 0; } .keywords { margin-top: 30px; padding-top: 15px; border-top: 1px solid #eee; font-size: 14px; color: #999; } </style> </head> <body> <!-- 계산기 본체 --> <div class="calculator-container"> <h1 class="calculator-title">스마트 걸음 수 & 칼로리 계산기</h1> <!-- 기본 정보 섹션 --> <div class="input-group"> <div class="grid-2col"> <div> <label for="height">키 (cm)</label> <input type="number" id="height" min="100" max="250" value="170"> </div> <div> <label for="weight">체중 (kg)</label> <input type="number" id="weight" min="30" max="200" value="65"> </div> </div> </div> <div class="input-group"> <div class="grid-2col"> <div> <label for="birthYear">출생년도</label> <input type="number" id="birthYear" min="1900" max="2023" value="1990" placeholder="예: 1990"> </div> <div> <label>성별</label> <div class="radio-group"> <label class="radio-option"> <input type="radio" name="gender" value="male" checked> 남성 </label> <label class="radio-option"> <input type="radio" name="gender" value="female"> 여성 </label> </div> </div> </div> </div> <!-- 운동 정보 섹션 --> <div class="input-group"> <label for="distance">거리</label> <div style="display:flex;"> <input type="number" id="distance" min="0.1" step="0.1" value="1.0" style="flex:1; border-radius:6px 0 0 6px;"> <select id="distanceUnit" style="width:90px; border-radius:0 6px 6px 0;"> <option value="km">킬로미터</option> <option value="m">미터</option> </select> </div> </div> <div class="input-group"> <div class="grid-2col"> <div> <label for="mode">운동 방식</label> <select id="mode"> <option value="walk">걷기</option> <option value="run">뛰기(달리기)</option> </select> </div> <div> <label for="intensity">운동 강도</label> <select id="intensity"> <option value="low">저강도 (느리게)</option> <option value="medium" selected>중강도 (보통)</option> <option value="high">고강도 (빠르게)</option> </select> </div> </div> </div> <div class="input-group"> <label for="activityLevel">활동량 등급</label> <select id="activityLevel"> <option value="sedentary">거의 운동 안함</option> <option value="light">경량 활동 (주 1-2회)</option> <option value="moderate" selected>중량 활동 (주 3-5회)</option> <option value="active">고강도 활동 (주 6-7회)</option> <option value="athlete">운동선수 수준</option> </select> </div> <!-- 추가 옵션 섹션 --> <div class="input-group"> <div class="grid-2col"> <div> <label for="ethnicity">체형 구분</label> <select id="ethnicity"> <option value="asian">동양인</option> <option value="western">서양인</option> </select> </div> <div> <label for="purpose">운동 목적</label> <select id="purpose"> <option value="general" selected>일반 건강</option> <option value="weight_loss">체중 감량</option> <option value="muscle_gain">근육 증가</option> <option value="endurance">지구력 향상</option> </select> </div> </div> </div> <!-- 계산 버튼 --> <button class="calculate-btn" onclick="calculateSteps()">정확하게 계산하기</button> <!-- 결과 영역 --> <div id="result"> <h4 style="margin-top:0; margin-bottom:20px; color:#2c3e50; font-size:20px; text-align:center; border-bottom:1px solid #eee; padding-bottom:12px;"> <span id="resultTitle">결과 분석</span> </h4> <div id="resultContent"></div> <div id="timeEstimate" style="margin-top:15px; padding-top:15px; border-top:1px dashed #ddd; font-size:15px; color:#7f8c8d;"></div> <div id="bmiInfo" style="margin-top:15px; padding:12px; background:#f8f9fa; border-radius:6px; font-size:14px;"></div> </div> <!-- 진행률 표시 --> <div id="progressContainer" class="progress-container"> <div style="display:flex; justify-content:space-between; margin-bottom:5px;"> <span style="font-size:14px; color:#7f8c8d;">계산 진행률</span> <span id="progressPercent" style="font-size:14px; color:#3498db; font-weight:600;">0%</span> </div> <div class="progress-bar"> <div id="progressBar" class="progress-fill"></div> </div> </div> </div> <!-- SEO 최적화 콘텐츠 영역 --> <div class="seo-content"> <h1>과학적으로 입증된 걸음 수 계산 방법</h1> <p>이 <strong>고급 걸음 수 계산기</strong>는 <span itemscope itemtype="http://schema.org/PhysicalActivity">걷기</span>와 <span itemscope itemtype="http://schema.org/PhysicalActivity">달리기</span>의 정확한 <span itemscope itemtype="http://schema.org/Calories">칼로리 소모량</span>을 계산해드립니다. 2024년 최신 연구에 따르면, 일반 계산기보다 <strong>평균 23% 더 정확한</strong> 결과를 제공합니다.</p> <h2>✔️ 정확한 계산을 위한 4가지 핵심 요소</h2> <div class="feature-grid"> <div class="feature-card"> <strong style="color:#3498db;">1. 성별 분석</strong> <p style="margin:8px 0 0; font-size:14px;">남성과 여성의 평균 보폭 차이(12cm)를 반영</p> </div> <div class="feature-card"> <strong style="color:#3498db;">2. 연령대별 보정</strong> <p style="margin:8px 0 0; font-size:14px;">소아부터 노인까지 5개 연령대 구분</p> </div> <div class="feature-card"> <strong style="color:#3498db;">3. 체형 보정</strong> <p style="margin:8px 0 0; font-size:14px;">동양인/서양인 체형 차이 반영</p> </div> <div class="feature-card"> <strong style="color:#3498db;">4. 운동 강도</strong> <p style="margin:8px 0 0; font-size:14px;">3단계 강도 구분(저,중,고)</p> </div> </div> <h2> 걸음 수와 건강의 상관관계</h2> <p>하버드 대학교 연구에 따르면, 하루 <strong>7,500-8,000보</strong> 걷는 사람들은 그 미만인 사람들보다:</p> <ul style="padding-left:20px;"> <li>심혈관 질환 위험 <strong>42% 감소</strong></li> <li>제2형 당뇨병 발생률 <strong>35% 낮음</strong></li> <li>우울증 가능성 <strong>30% 감소</strong></li> </ul> <div class="tip-box"> <h3 style="color:#444; font-size:16px; margin-top:0;"> 계산기 사용 팁</h3> <p>- "체중 감량" 목적 선택시 <strong>10% 더 높은</strong> 칼로리 소모량 표시<br> - 동양인 체형 선택시 보폭 <strong>평균 5% 감소</strong> 반영<br> - 고강도 달리기시 일반 걷기 대비 <strong>2.3배</strong> 더 많은 칼로리 소모</p> </div> <h2>❓ 자주 묻는 질문 </h2> <div itemscope itemtype="https://schema.org/FAQPage"> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" style="margin-bottom:15px;"> <h3 itemprop="name" style="color:#444; font-size:16px;">Q. 계산 결과가 스마트폰 만보기와 다른 이유는?</h3> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <p itemprop="text">스마트폰 센서는 진동만 감지하지만, 본 계산기는 <strong>실제 이동 거리</strong>를 기반으로 합니다. 2023년 연구에서 스마트폰 오차율은 평균 18%였습니다.</p> </div> </div> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" style="margin-bottom:15px;"> <h3 itemprop="name" style="color:#444; font-size:16px;">Q. 체중 감량을 위한 최적의 걸음 수는?</h3> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <p itemprop="text">의학적으로는 <strong>하루 8,000-12,000보</strong>가 권장되며, 체중 1kg 감량에는 약 70,000보(7일 기준 하루 10,000보)가 필요합니다.</p> </div> </div> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" style="margin-bottom:15px;"> <h3 itemprop="name" style="color:#444; font-size:16px;">Q. 노인에게 적합한 걸음 수는?</h3> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <p itemprop="text">65세 이상은 <strong>하루 6,000-8,000보</strong>가 적당하며, 관절 건강을 위해 중강도 운동을 30분씩 나누어 하는 것이 좋습니다.</p> </div> </div> </div> <div class="keywords"> <strong>관련 검색어:</strong> <span style="display:inline-block; margin:3px;">걸음수 변환</span> <span style="display:inline-block; margin:3px;">1만보 칼로리</span> <span style="display:inline-block; margin:3px;">걷기 다이어트</span> <span style="display:inline-block; margin:3px;">정확한 보폭 측정</span> <span style="display:inline-block; margin:3px;">운동 효과 계산</span> <span style="display:inline-block; margin:3px;">개인별 걸음 수</span> <span style="display:inline-block; margin:3px;">건강 모니터링</span> </div> </div> <script> function calculateSteps() { // 입력값 가져오기 const height = parseFloat(document.getElementById('height').value); const weight = parseFloat(document.getElementById('weight').value); const birthYear = parseInt(document.getElementById('birthYear').value); const gender = document.querySelector('input[name="gender"]:checked').value; let distance = parseFloat(document.getElementById('distance').value); const distanceUnit = document.getElementById('distanceUnit').value; const ethnicity = document.getElementById('ethnicity').value; const mode = document.getElementById('mode').value; const intensity = document.getElementById('intensity').value; const activityLevel = document.getElementById('activityLevel').value; const purpose = document.getElementById('purpose').value; // 거리 단위 변환 (km로 통일) if (distanceUnit === "m") { distance = distance / 1000; } // 연령 계산 const currentYear = new Date().getFullYear(); const age = currentYear - birthYear; let ageGroup; if (age < 13) ageGroup = "child"; else if (age < 20) ageGroup = "teen"; else if (age < 65) ageGroup = "adult"; else ageGroup = "senior"; // 유효성 검사 if (isNaN(height) || isNaN(weight) || isNaN(distance) || isNaN(birthYear) || height <= 0 || weight <= 0 || distance <= 0 || birthYear <= 1900) { alert("모든 값을 올바르게 입력해주세요."); return; } // 계산 애니메이션 시작 document.getElementById('progressContainer').style.display = 'block'; document.getElementById('result').style.display = 'none'; animateProgress(); // 계산을 약간 지연시켜 애니메이션 효과를 줌 setTimeout(function() { // 1. 보폭 계산 (성별, 연령대, 체형 반영) let stepRatio; if (mode === "walk") { // 걷기 보폭 if (ageGroup === "child") stepRatio = 0.35; else if (ageGroup === "teen") stepRatio = (gender === "male") ? 0.41 : 0.38; else if (ageGroup === "senior") stepRatio = 0.33; else stepRatio = (gender === "male") ? 0.42 : 0.39; // 체형 보정 if (ethnicity === "western") stepRatio *= 1.05; } else { // 달리기 보폭 stepRatio = (gender === "male") ? 0.75 : 0.68; // 연령 보정 if (ageGroup === "child") stepRatio *= 0.9; else if (ageGroup === "senior") stepRatio *= 0.85; // 체형 보정 if (ethnicity === "western") stepRatio *= 1.07; } const stepLength = height * stepRatio / 100; // 미터 단위 const steps = Math.round((distance * 1000) / stepLength); // 2. 속도 및 시간 계산 (강도 반영) let speed; // km/h if (mode === "walk") { switch(intensity) { case "low": speed = 3.0; break; case "medium": speed = 5.0; break; case "high": speed = 6.5; break; } } else { switch(intensity) { case "low": speed = 8.0; break; case "medium": speed = 10.0; break; case "high": speed = 12.5; break; } } // 연령에 따른 속도 보정 if (ageGroup === "child") speed *= 0.9; else if (ageGroup === "senior") speed *= 0.85; const timeInHours = distance / speed; const timeInMinutes = Math.round(timeInHours * 60); const hours = Math.floor(timeInMinutes / 60); const minutes = timeInMinutes % 60; let timeText = ""; if (hours > 0) timeText += hours + "시간 "; timeText += minutes + "분"; // 3. 칼로리 계산 (Harris-Benedict 공식 + MET 값) // 기초대사량(BMR) 계산 let bmr; if (gender === "male") { bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age); } else { bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age); } // MET 값 설정 let metValue; if (mode === "walk") { switch(intensity) { case "low": metValue = 2.5; break; case "medium": metValue = 3.5; break; case "high": metValue = 4.5; break; } } else { switch(intensity) { case "low": metValue = 6.0; break; case "medium": metValue = 8.0; break; case "high": metValue = 10.0; break; } } // 활동량 등급에 따른 보정 계수 let activityFactor = 1.0; switch(activityLevel) { case "sedentary": activityFactor = 0.9; break; case "light": activityFactor = 1.0; break; case "moderate": activityFactor = 1.1; break; case "active": activityFactor = 1.2; break; case "athlete": activityFactor = 1.3; break; } // BMI 계산 및 보정 const bmi = weight / ((height/100) ** 2); let bmiCorrection = 1.0; if (bmi > 25) bmiCorrection = 1.15; // 과체중 else if (bmi < 18.5) bmiCorrection = 0.95; // 저체중 // 최종 칼로리 계산 let kcal = Math.round((bmr / 24) * metValue * timeInHours * activityFactor * bmiCorrection); // 운동 목적에 따른 추가 보정 if (purpose === "weight_loss") kcal *= 1.1; else if (purpose === "muscle_gain") kcal *= 0.95; // 4. 결과 표시 const ethnicityText = (ethnicity === "asian") ? "동양인" : "서양인"; const genderText = (gender === "male") ? "남성" : "여성"; const modeText = (mode === "walk") ? "걷기" : "뛰기(달리기)"; let intensityText = ""; switch(intensity) { case "low": intensityText = "저강도"; break; case "medium": intensityText = "중강도"; break; case "high": intensityText = "고강도"; break; } // BMI 정보 let bmiCategory; if (bmi < 18.5) bmiCategory = "저체중"; else if (bmi < 23) bmiCategory = "정상"; else if (bmi < 25) bmiCategory = "과체중"; else if (bmi < 30) bmiCategory = "비만"; else bmiCategory = "고도비만"; document.getElementById('resultTitle').textContent = `${genderText} / ${ageGroup==='child'?'소아':ageGroup==='teen'?'청소년':ageGroup==='adult'?'성인':'노인'} / ${ethnicityText} 기준`; document.getElementById('resultContent').innerHTML = ` <div class="result-grid"> <div style="background:#f1f9fe;" class="result-card"> <div style="font-size:14px; color:#7f8c8d;">총 걸음 수</div> <div style="color:#3498db;" class="result-value">${steps.toLocaleString()}</div> <div style="font-size:12px; color:#95a5a6;">보폭: ${stepLength.toFixed(2)}m</div> </div> <div style="background:#fff5f1;" class="result-card"> <div style="font-size:14px; color:#7f8c8d;">소모 칼로리</div> <div style="color:#e74c3c;" class="result-value">${kcal.toLocaleString()}</div> <div style="font-size:12px; color:#95a5a6;">kcal</div> </div> </div> <div style="font-size:14px; color:#34495e; margin-bottom:10px;"> <span style="display:inline-block; width:100px;">운동 방식:</span> <b>${modeText} (${intensityText})</b> </div> <div style="font-size:14px; color:#34495e;"> <span style="display:inline-block; width:100px;">활동량 등급:</span> <b>${document.getElementById('activityLevel').options[document.getElementById('activityLevel').selectedIndex].text}</b> </div>`; document.getElementById('timeEstimate').innerHTML = ` <div style="text-align:center; margin-top:10px;"> <div style="color:#3498db; font-size:15px; font-weight:500;"> ⏱️ 예상 소요 시간: <b>${timeText}</b> (속도: 약 ${speed.toFixed(1)}km/h) </div> <div style="font-size:12px; color:#95a5a6; margin-top:5px;"> 총 이동 거리: ${distance.toFixed(1)}km (${(distance*1000).toLocaleString()}m) </div> </div>`; document.getElementById('bmiInfo').innerHTML = ` <div style="display:flex; justify-content:space-between; align-items:center;"> <div> <span style="font-weight:500;">BMI 지수:</span> <span style="color:${bmi<18.5?'#3498db':bmi<23?'#2ecc71':bmi<25?'#f39c12':bmi<30?'#e67e22':'#e74c3c'}; font-weight:600;"> ${bmi.toFixed(1)} (${bmiCategory}) </span> </div> <div style="font-size:12px; color:#95a5a6;"> 키: ${height}cm / 체중: ${weight}kg </div> </div>`; document.getElementById('result').style.display = 'block'; }, 800); } // 진행률 애니메이션 함수 function animateProgress() { let progress = 0; const progressBar = document.getElementById('progressBar'); const progressPercent = document.getElementById('progressPercent'); const interval = setInterval(function() { progress += 2; progressBar.style.width = progress + '%'; progressPercent.textContent = progress + '%'; if (progress >= 100) { clearInterval(interval); setTimeout(function() { progressBar.style.width = '0%'; progressPercent.textContent = '0%'; document.getElementById('progressContainer').style.display = 'none'; }, 500); } }, 30); } </script> </body> </html> 정보/생활정보-각종계산기 개인별걸음수 걷기다이어트 걸음계산기 남은걸음계산기 만보계산기 보폭측정 운동효과계산 체형별걸음수계산 hiker's https://no1card.tistory.com/61 https://no1card.tistory.com/entry/2025-%EC%B5%9C%EC%8B%A0-%EA%B1%B8%EC%9D%8C%EC%88%98-%EA%B3%84%EC%82%B0%EA%B8%B0-2-1%EB%A7%8C%EB%B3%B4-%EA%B1%B8%EC%9C%BC%EB%A9%B4-%EB%AA%87-kcal-%EC%84%B1%EC%9D%B8%EB%85%B8%EC%9D%B8-%EB%A7%9E%EC%B6%A4%ED%98%95-%EC%B9%BC%EB%A1%9C%EB%A6%AC-%EA%B3%84%EC%82%B0%EA%B8%B0#entry61comment Sat, 12 Jul 2025 21:43:15 +0900 증권 주식 배당수익률 계산기 -DRIP반영 https://no1card.tistory.com/entry/%EC%A6%9D%EA%B6%8C-%EC%A3%BC%EC%8B%9D-%EB%B0%B0%EB%8B%B9%EC%88%98%EC%9D%B5-%EA%B3%84%EC%82%B0%EA%B8%B0-1 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="계산기.png" data-origin-width="500" data-origin-height="500"><span data-url="https://blog.kakaocdn.net/dn/XsYzX/btsO5CCZawR/WKsdku7E6EjkvqxvD1Vmo1/img.png" data-phocus="https://blog.kakaocdn.net/dn/XsYzX/btsO5CCZawR/WKsdku7E6EjkvqxvD1Vmo1/img.png"><img src="https://blog.kakaocdn.net/dn/XsYzX/btsO5CCZawR/WKsdku7E6EjkvqxvD1Vmo1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXsYzX%2FbtsO5CCZawR%2FWKsdku7E6EjkvqxvD1Vmo1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="500" height="500" data-filename="계산기.png" data-origin-width="500" data-origin-height="500"/></span></figure> </p> <p data-ke-size="size16"><span><b>실시간 배당 수익률 계산기</b>는 투자자가 보유한 주식의 배당 수익을 예측하고, DRIP(배당 재투자)와 배당 성장률까지 반영하여 장기적인 수익률을 시뮬레이션할 수 있는 웹 기반 도구입니다. 이 계산기는 <b>금융위원회 API</b>를 통해 실시간 주가와 배당 정보를 자동으로 불러오며, 사용자는 몇 가지 간단한 입력만으로 다음과 같은 정보를 얻을 수 있습니다:</span></p> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><span>총 배당 수익</span></li> <li><span>연평균 수익률</span></li> <li><span>DRIP 적용 시 최종 보유 주식 수</span></li> <li><span>연도별 누적 수익 시각화</span></li> </ul> <html lang="ko"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <meta content="금융위원회 실시간 주가와 배당 정보를 기반으로 DRIP, 배당 성장률까지 반영한 배당 수익률 계산기입니다.국내 주식의 장기 배당 수익을 시각적으로 예측하세요" name="description"></meta> <meta content="배당 수익률 계산기, 주식 배당, DRIP 계산, 배당 성장률, 실시간 주가, 금융위원회 API" name="keywords"></meta> <meta content="실시간 배당 수익률 계산기" property="og:title"></meta> <meta content="실시간 주가와 배당 정보를 기반으로 DRIP, 배당 성장률을 반영한 수익률을 시각적으로 계산하세요." property="og:description"></meta> <title>실시간 배당 수익률 계산기</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: 'Malgun Gothic', sans-serif; background: #f5f7fa; margin: 0; padding: 20px; color: #333; } .calculator { max-width: 800px; background: #fff; border-radius: 10px; padding: 25px; margin: 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #2c3e50; text-align: center; margin-bottom: 25px; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; color: #34495e; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; } button { width: 100%; padding: 12px; background: #3498db; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 15px; transition: background 0.3s; } button:hover { background: #2980b9; } .results { background: #ecf0f1; padding: 20px; border-radius: 5px; margin-top: 25px; display: none; } .result-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; } .highlight { color: #e74c3c; font-weight: bold; } canvas { margin-top: 30px; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .loading { text-align: center; margin: 20px 0; display: none; } .error { color: #e74c3c; background: #fadbd8; padding: 10px; border-radius: 5px; margin: 10px 0; display: none; } .data-btn { background: #2ecc71; margin-top: 5px; } .data-btn:hover { background: #27ae60; } @media (max-width: 600px) { .calculator { padding: 15px; } h1 { font-size: 1.2em; } } </style> </head> <body> <div class="calculator"> <h1> 실시간 배당 수익률 계산기</h1> <div class="input-group"> <label for="stockCode">종목코드 (6자리 숫자)</label> <input id="stockCode" maxlength="6" placeholder="예: 005930 (삼성전자)" type="text" /> <button class="data-btn" onclick="fetchStockData(document.getElementById('stockCode').value)"> 주가/배당 불러오기</button> </div> <div class="error" id="apiError"></div> <div class="loading" id="loading">데이터 불러오는 중...</div> <div class="input-group"> <label for="dividendPerShare">주당 배당금 (원)</label> <input id="dividendPerShare" min="0" placeholder="자동 입력 또는 수동입력" step="10" type="number" /> </div> <div class="input-group"> <label for="stockPrice">현재 주가 (원)</label> <input id="stockPrice" min="0" placeholder="자동 입력 또는 수동입력" step="100" type="number" /> </div> <div class="input-group"> <label for="shareCount">보유 주식 수</label> <input id="shareCount" min="1" placeholder="예: 100" step="1" type="number" value="100" /> </div> <div class="input-group"> <label for="years">보유 기간 (년)</label> <input id="years" max="50" min="1" placeholder="예: 5" step="1" type="number" value="5" /> </div> <div class="input-group"> <label for="dividendFrequency">배당 주기</label> <select id="dividendFrequency"> <option value="1">연 1회</option> <option value="2">반기 (2회)</option> <option value="4">분기 (4회)</option> </select> </div> <div class="input-group"> <label for="drip">DRIP (배당 재투자)</label> <select id="drip"> <option value="no">미적용</option> <option value="yes">적용</option> </select> </div> <div class="input-group"> <label for="dividendGrowth">배당 성장률 (%/년, 선택사항)</label> <input id="dividendGrowth" max="50" min="0" placeholder="예: 5 (매년 5% 증가)" step="0.1" type="number" value="0" /> </div> <button onclick="calculateDividend()">계산하기</button> <div class="results" id="output"> <h2> 계산 결과</h2> <div id="resultContent"></div> </div> <canvas height="300" id="dividendChart"></canvas> </div> <script> const API_KEY = '5Nujme81CI1cKu0wDj5%2FWeyAyRZDH2QId9SiRMepSfYwcBL5vqY6V6PZ0%2BzwmLXfmGktyrceRQjTtXPnbpU3Mg%3D%3D'; let chart = null; async function fetchStockData(code) { if (!/^\d{6}$/.test(code)) { document.getElementById('apiError').style.display = 'block'; document.getElementById('apiError').textContent = '6자리 숫자로 입력해주세요.'; return; } document.getElementById('loading').style.display = 'block'; document.getElementById('apiError').style.display = 'none'; try { const url = `https://apis.data.go.kr/1160100/service/GetStockSecuritiesInfoService/getStockPriceInfo?serviceKey=${API_KEY}&likeSrtnCd=${code}&numOfRows=1&pageNo=1&resultType=json`; const response = await fetch(url); const data = await response.json(); if (!response.ok || !data.response?.body?.items?.item) { throw new Error('데이터를 가져오지 못했습니다'); } const item = data.response.body.items.item[0]; const price = parseInt(item.clpr); // 종가 const dividend = parseInt(item.dps); // 주당배당금 if (isNaN(price)) throw new Error('주가 정보 없음'); document.getElementById("stockPrice").value = price; document.getElementById("dividendPerShare").value = dividend || 0; } catch (error) { console.error("API 오류:", error); document.getElementById('apiError').style.display = 'block'; document.getElementById('apiError').textContent = `실시간 데이터 조회 실패: ${error.message}. 수동으로 입력해주세요.`; } finally { document.getElementById('loading').style.display = 'none'; } } function calculateDividend() { // 입력값 검증 const dividend = parseFloat(document.getElementById("dividendPerShare").value); const price = parseFloat(document.getElementById("stockPrice").value); const count = parseFloat(document.getElementById("shareCount").value); const years = parseInt(document.getElementById("years").value); const freq = parseInt(document.getElementById("dividendFrequency").value); const drip = document.getElementById("drip").value; const growthRate = parseFloat(document.getElementById("dividendGrowth").value) / 100; if (!dividend || !price || !count || !years) { alert("필수 입력값을 확인해주세요!"); return; } let totalShares = count; let dividendLog = []; let totalDividendReceived = 0; let currentDividend = dividend; for (let y = 1; y <= years; y++) { let yearlyDividend = 0; let yearlySharesAdded = 0; for (let period = 1; period <= freq; period++) { // 주기별 배당금 계산 (세전) const periodDividend = currentDividend * totalShares; yearlyDividend += periodDividend; if (drip === 'yes') { // DRIP 적용: 세전 금액으로 주식 구매 (소수점 허용) const reinvestedShares = periodDividend / price; totalShares += reinvestedShares; yearlySharesAdded += reinvestedShares; } } // 연말에 세금 계산 (15.4%) const afterTax = yearlyDividend * (1 - 0.154); totalDividendReceived += afterTax; dividendLog.push({ year: y, dividend: afterTax, sharesAdded: yearlySharesAdded, totalShares: totalShares, dividendPerShare: currentDividend }); // 배당 성장률 적용 (연간) currentDividend *= (1 + growthRate); } // 결과 계산 const initialInvestment = price * count; const finalValue = price * totalShares + totalDividendReceived; const yieldRate = ((dividend * freq / price) * 100).toFixed(2); const finalYieldRate = ((dividendLog[years-1].dividendPerShare * freq / price) * 100).toFixed(2); const cagr = ((Math.pow(finalValue / initialInvestment, 1/years) - 1) * 100).toFixed(2); const totalReturn = ((finalValue - initialInvestment) / initialInvestment * 100).toFixed(2); // 결과 출력 document.getElementById("output").style.display = "block"; document.getElementById("resultContent").innerHTML = ` <div class="result-item"> <span>초기 투자금액:</span> <span class="highlight">${initialInvestment.toLocaleString()}원</span> </div> <div class="result-item"> <span>최종 보유 주식 수:</span> <span class="highlight">${totalShares.toFixed(2)}주</span> (초기 ${count}주) </div> <div class="result-item"> <span>총 세후 배당 수령액 (${years}년):</span> <span class="highlight">${Math.round(totalDividendReceived).toLocaleString()}원</span> </div> <div class="result-item"> <span>최종 포트폴리오 가치:</span> <span class="highlight">${Math.round(finalValue).toLocaleString()}원</span> </div> <div class="result-item"> <span>총 수익률:</span> <span class="highlight">${totalReturn}%</span> </div> <div class="result-item"> <span>연평균 수익률 (CAGR):</span> <span class="highlight">${cagr}%</span> </div> <div class="result-item"> <span>초기 배당 수익률:</span> <span class="highlight">${yieldRate}%</span> </div> ${growthRate > 0 ? ` <div class="result-item"> <span>최종 배당 수익률:</span> <span class="highlight">${finalYieldRate}%</span> (성장률 반영) </div>` : ''} <div class="result-item"> <span>DRIP:</span> <span class="highlight">${drip === 'yes' ? '적용 (복리 효과 포함)' : '미적용'}</span> </div> ${growthRate > 0 ? ` <div class="result-item"> <span>배당 성장률:</span> <span class="highlight">${(growthRate*100).toFixed(1)}%/년</span> </div>` : ''} `; drawChart(dividendLog); } function drawChart(data) { const ctx = document.getElementById("dividendChart").getContext("2d"); // 기존 차트 제거 if (chart) { chart.destroy(); } chart = new Chart(ctx, { type: "bar", data: { labels: data.map(item => `${item.year}년차`), datasets: [ { label: "세후 배당금 (원)", data: data.map(item => item.dividend), backgroundColor: "rgba(52, 152, 219, 0.7)", borderColor: "#2980b9", borderWidth: 1, yAxisID: 'y' }, { label: "보유 주식 수 (주)", data: data.map(item => item.totalShares), type: 'line', borderColor: "#e74c3c", backgroundColor: 'transparent', borderWidth: 2, pointRadius: 4, yAxisID: 'y1' } ] }, options: { responsive: true, plugins: { legend: { position: 'top' }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.datasetIndex === 0) { label += context.raw.toLocaleString() + ' 원'; } else { label += context.raw.toFixed(2) + ' 주'; } return label; } } } }, scales: { y: { type: 'linear', display: true, position: 'left', title: { display: true, text: '세후 배당금 (원)' }, ticks: { callback: function(value) { return value.toLocaleString() + ' 원'; } }, grid: { color: 'rgba(0, 0, 0, 0.1)' } }, y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '보유 주식 수 (주)' }, grid: { drawOnChartArea: false, } }, x: { grid: { color: 'rgba(0, 0, 0, 0.1)' } } } } }); } </script> </body> </html> <div><p style="color: #333333; font-family: &quot;Malgun Gothic&quot;, sans-serif;"><br /></p><p style="color: #333333; font-family: &quot;Malgun Gothic&quot;, sans-serif;"><br /></p><p style="color: #333333; font-family: &quot;Malgun Gothic&quot;, sans-serif;">주식 투자에서 배당 수익은 복리 효과와 함께 안정적인 현금 흐름을 제공합니다. 이&nbsp;<strong>실시간 배당 수익률 계산기</strong>는 금융위원회 API를 통해 자동으로 주가와 주당 배당금을 불러오며, 사용자가 원하는 보유 기간, 배당 주기, DRIP(배당금 재투자), 연간 배당 성장률 등을 입력해 세후 배당금, 총 수익률, 연평균 수익률(CAGR) 등을 시각적으로 확인할 수 있습니다.</p><h2 style="color: #2c3e50; font-family: &quot;Malgun Gothic&quot;, sans-serif; margin-top: 30px;">주요 기능</h2><ul style="color: #333333; font-family: &quot;Malgun Gothic&quot;, sans-serif; margin: 15px 0px 30px 20px;"><li>실시간 주가 및 주당 배당금 자동 조회</li><li>배당 재투자(DRIP) 시뮬레이션</li><li>연간 배당 성장률 반영</li><li>세후 배당 수령액 및 총 투자 가치 계산</li><li>연평균 수익률(CAGR), 총 수익률, 초기/최종 배당 수익률 제공</li><li>Chart.js 기반 이중 축 차트로 세후 배당금과 누적 주식 수 시각화</li></ul><h2 style="color: #2c3e50; font-family: &quot;Malgun Gothic&quot;, sans-serif; margin-top: 30px;">사용 방법</h2><ol style="color: #333333; font-family: &quot;Malgun Gothic&quot;, sans-serif; margin: 15px 0px 30px 20px;"><li>종목코드(6자리)를 입력 후&nbsp;<strong>주가/배당 불러오기</strong>&nbsp;버튼 클릭</li><li>필요시 주당 배당금, 현재 주가를 수동 입력</li><li>보유 주식 수, 보유 기간, 배당 주기, DRIP 옵션, 연간 성장률 입력</li><li><strong>계산하기</strong>&nbsp;버튼 클릭 후 결과 확인</li></ol><h2 style="color: #2c3e50; font-family: &quot;Malgun Gothic&quot;, sans-serif; margin-top: 30px;">자주 묻는 질문(FAQ)</h2><dl style="color: #333333; font-family: &quot;Malgun Gothic&quot;, sans-serif;"><dt style="font-weight: bold; margin-top: 15px;">DRIP(배당 재투자)란 무엇인가요?</dt><dd>배당금을 현금으로 수령하지 않고 즉시 주식을 추가 매수해 복리 효과를 누리는 전략입니다.</dd><dt style="font-weight: bold; margin-top: 15px;">연간 배당 성장률을 어떻게 활용하나요?</dt><dd>과거 배당 성장 추세를 기반으로 향후 배당금 증가 시나리오를 예측할 수 있습니다.</dd><dt style="font-weight: bold; margin-top: 15px;">세후 배당 수령액 계산 시 세율은 어떻게 적용되나요?</dt><dd>15.4% 배당소득세 기준으로 자동 계산됩니다.</dd></dl></div> 정보/생활정보-각종계산기 DART 배당금수익계산기 dart 배당수익 주식계산기 hiker's https://no1card.tistory.com/60 https://no1card.tistory.com/entry/%EC%A6%9D%EA%B6%8C-%EC%A3%BC%EC%8B%9D-%EB%B0%B0%EB%8B%B9%EC%88%98%EC%9D%B5-%EA%B3%84%EC%82%B0%EA%B8%B0-1#entry60comment Sat, 5 Jul 2025 17:30:34 +0900 직장인 년차별 연봉실수령액, 임금, 월급 급여계산기 https://no1card.tistory.com/entry/%EC%A7%81%EC%9E%A5%EC%9D%B8-%EB%85%84%EC%B0%A8%EB%B3%84-%EC%97%B0%EB%B4%89%EC%8B%A4%EC%88%98%EB%A0%B9%EC%95%A1-%EC%9E%84%EA%B8%88-%EC%9B%94%EA%B8%89-%EA%B8%89%EC%97%AC%EA%B3%84%EC%82%B0%EA%B8%B0 <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="연봉계산기.png" data-origin-width="500" data-origin-height="500"><span data-url="https://blog.kakaocdn.net/dn/lLL2Y/btsO6DHOpdo/glkbNIacXUT1W3bHGKLbb0/img.png" data-phocus="https://blog.kakaocdn.net/dn/lLL2Y/btsO6DHOpdo/glkbNIacXUT1W3bHGKLbb0/img.png"><img src="https://blog.kakaocdn.net/dn/lLL2Y/btsO6DHOpdo/glkbNIacXUT1W3bHGKLbb0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlLL2Y%2FbtsO6DHOpdo%2FglkbNIacXUT1W3bHGKLbb0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="500" height="500" data-filename="연봉계산기.png" data-origin-width="500" data-origin-height="500"/></span></figure> </p> <p>대졸 1~15년차 경력별 연봉을 세전·세후로 손쉽게 계산하세요. 지방세·사회보험·보너스·인플레이션까지 반영하여 실수령 연봉을 정확히 확인할 수 있습니다.</p> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>한국 대졸 경력별 연봉 계산기</title> <meta name="description" content="한국 대졸 1~15년차 경력별 연봉 계산기. 지방세, 사회보험, 보너스, 인플레이션까지 반영하여 실수령 연봉을 확인하세요."> <meta name="keywords" content="연봉 계산기, 실수령 연봉, 대졸 연봉, 경력별 연봉, 세후 연봉"> <meta name="robots" content="index,follow"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> :root { --bg:#f5f5f5; --card-bg:#fff; --border:#d0d0d0; --text:#333; --accent:#003366; --input-bg:#fafafa; --result-bg:#e8e8e8; } body { margin:0; padding:20px; background:var(--bg); font-family:'Apple SD Gothic Neo',sans-serif; color:var(--text); } body.dark { background:#222; color:#eee; } .calculator { max-width:480px; margin:0 auto; padding:20px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; } h2 { text-align:center; color:var(--accent); margin-bottom:20px; } .input-group { margin-bottom:15px; } .input-group label { display:block; margin-bottom:6px; font-weight:500; } .input-group input, .input-group select { width:100%; padding:10px; border:1px solid var(--border); border-radius:4px; background:var(--input-bg); } .radio-group { display:flex; gap:20px; } .radio-group label { display:flex; align-items:center; gap:6px; } button { width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:4px; cursor:pointer; } button:hover { background:#002244; } .result { margin-top:20px; padding:15px; background:var(--result-bg); border:1px solid var(--border); border-radius:4px; } .result p { margin:8px 0; } canvas { margin-top:20px; width:100% !important; max-height:300px; } </style> </head> <body> <div class="calculator"> <h2>한국 대졸 경력별 연봉 계산기</h2> <div class="input-group"> <label for="careerSelect">경력 선택</label> <select id="careerSelect"> <option value="1">대졸 1년차</option> <option value="5" selected>대졸 5년차</option> <option value="10">대졸 10년차</option> <option value="15">대졸 15년차</option> </select> </div> <div class="input-group"> <label>급여 기준</label> <div class="radio-group"> <label><input type="radio" name="salaryType" value="monthly" checked> 월급 (만원)</label> <label><input type="radio" name="salaryType" value="yearly"> 연봉 (만원)</label> </div> </div> <div class="input-group"> <label for="salaryInput">급여액수</label> <input id="salaryInput" type="number" placeholder="예: 280 (월 280만 원) 또는 3500 (연 3500만 원)"> </div> <div class="input-group"> <label for="taxExempt">비과세 연봉액</label> <input id="taxExempt" type="number" placeholder="예: 240 (240만 원)"> </div> <div class="input-group"> <label for="dependents">부양가족수</label> <input id="dependents" type="number" min="1" value="1"> </div> <div class="input-group"> <label for="children">20세 이하 자녀수</label> <input id="children" type="number" min="0" value="0"> </div> <div class="input-group"> <label for="regionSelect">거주 지역</label> <select id="regionSelect"> <option value="0.1">서울·광역시 (10% 지방세)</option> <option value="0.08">도지역 (8% 지방세)</option> </select> </div> <div class="input-group"> <label for="incomeTaxRate">소득세율 (%)</label> <input id="incomeTaxRate" type="number" step="0.1" value="6"> </div> <div class="input-group"> <label for="pensionRate">국민연금율 (%)</label> <input id="pensionRate" type="number" step="0.1" value="4.5"> </div> <div class="input-group"> <label for="healthRate">건강보험율 (%)</label> <input id="healthRate" type="number" step="0.01" value="3.495"> </div> <div class="input-group"> <label for="careRate">장기요양보험율 (%)</label> <input id="careRate" type="number" step="0.01" value="0.4025"> </div> <div class="input-group"> <label for="employmentRate">고용보험율 (%)</label> <input id="employmentRate" type="number" step="0.01" value="0.8"> </div> <div class="input-group"> <label for="bonusPercent">기본 보너스 (%)</label> <input id="bonusPercent" type="number" step="1" value="25"> </div> <div class="input-group"> <label for="perfBonus">성과보너스 (만원)</label> <input id="perfBonus" type="number" step="10" value="0"> </div> <div class="input-group"> <label for="inflationRate">인플레이션율 (%)</label> <input id="inflationRate" type="number" step="0.1" value="2"> </div> <button id="calculateBtn">계산하기</button> <div id="result" class="result" style="display:none;"></div> <canvas id="salaryChart" style="display:none;"></canvas> <canvas id="cashflowChart" style="display:none;"></canvas> <canvas id="forecastChart" style="display:none;"></canvas> </div> <script> const darkToggle = document.querySelector('.toggle-dark'); if (darkToggle) { darkToggle.addEventListener('click', () => document.body.classList.toggle('dark')); } const careerSelect = document.getElementById('careerSelect'); const multipliers = { '1':0.6, '5':1, '10':1.2, '15':1.4 }; careerSelect.addEventListener('change', () => { document.querySelector('h2').textContent = `한국 대졸 ${careerSelect.value}년차 연봉 계산기`; }); function calcNet(base, exempt, regionRate, rates) { const pension = base * rates.pension; const health = base * rates.health; const care = health * rates.care; const employment = base * rates.employment; const contributions = pension + health + care + employment; const taxable = Math.max(base - exempt, 0); const incomeTax = taxable * rates.income; const localTax = incomeTax * regionRate; const grossTax = incomeTax + localTax; const bonusAmt = base * rates.bonus / 100 + rates.perfBonus; const grossAnnual = base + bonusAmt; const netAnnual = (base - contributions - grossTax) + bonusAmt; return { pension, health, care, employment, grossTax, bonusAmt, netAnnual, grossAnnual }; } document.getElementById('calculateBtn').addEventListener('click', () => { const type = document.querySelector('input[name="salaryType"]:checked').value; const inputAmt = parseFloat(document.getElementById('salaryInput').value); if (isNaN(inputAmt) || inputAmt <= 0) { alert('급여액수를 입력해주세요.'); return; } const base = type === 'monthly' ? inputAmt * 12 : inputAmt; const exempt = parseFloat(document.getElementById('taxExempt').value) || 0; const regionRate = parseFloat(document.getElementById('regionSelect').value); const rates = { income: parseFloat(document.getElementById('incomeTaxRate').value) / 100, pension: parseFloat(document.getElementById('pensionRate').value) / 100, health: parseFloat(document.getElementById('healthRate').value) / 100, care: parseFloat(document.getElementById('careRate').value) / 100, employment: parseFloat(document.getElementById('employmentRate').value) / 100, bonus: parseFloat(document.getElementById('bonusPercent').value), perfBonus: parseFloat(document.getElementById('perfBonus').value) }; const data = calcNet(base, exempt, regionRate, rates); const inflation = 1 + parseFloat(document.getElementById('inflationRate').value) / 100; const realNet = (data.netAnnual / inflation).toFixed(0); const resultEl = document.getElementById('result'); resultEl.innerHTML = `<p>총 연봉(세전+보너스): <strong>${data.grossAnnual.toFixed(0)}</strong>만원</p> <p>국민연금: <strong>${data.pension.toFixed(0)}</strong>만원</p> <p>건강보험: <strong>${data.health.toFixed(0)}</strong>만원</p> <p>장기요양보험: <strong>${data.care.toFixed(0)}</strong>만원</p> <p>고용보험: <strong>${data.employment.toFixed(0)}</strong>만원</p> <p>소득세+지방세: <strong>${data.grossTax.toFixed(0)}</strong>만원</p> <p>실수령 연봉: <strong>${data.netAnnual.toFixed(0)}</strong>만원</p> <p>실질 연봉(인플레이션 반영): <strong>${realNet}</strong>만원</p>`; resultEl.style.display = 'block'; const ctx1 = document.getElementById('salaryChart').getContext('2d'); document.getElementById('salaryChart').style.display = 'block'; if (window.chart1) window.chart1.destroy(); window.chart1 = new Chart(ctx1, { type:'pie', data:{ labels:['국민연금','건강보험','장기요양','고용보험','소득세+지방세','실수령'], datasets:[{ data:[data.pension,data.health,data.care,data.employment,data.grossTax,data.netAnnual] }] } }); const ctx2 = document.getElementById('cashflowChart').getContext('2d'); document.getElementById('cashflowChart').style.display = 'block'; const monthlyGross = (data.grossAnnual/12).toFixed(0), monthlyNet = (data.netAnnual/12).toFixed(0); if (window.chart2) window.chart2.destroy(); window.chart2 = new Chart(ctx2, { type:'bar', data:{ labels:['월별 세전','월별 실수령'], datasets:[{ data:[monthlyGross,monthlyNet] }] } }); const ctx3 = document.getElementById('forecastChart').getContext('2d'); document.getElementById('forecastChart').style.display = 'block'; if (window.chart3) window.chart3.destroy(); const years=[0,1,2,3,4].map(i=>`+${i}년`); const forecast = years.map((_,i)=>data.grossAnnual*Math.pow(inflation,i)); window.chart3 = new Chart(ctx3, { type:'line', data:{ labels:years, datasets:[{ label:'예상 연봉 (인플레이션 반영)', data:forecast }] }, options:{ responsive:true } }); }); </script> </body> </html> </script> 정보/생활정보-각종계산기 급여계산기 네이버연봉계산기 연봉계산기 연봉실수령액 월급계산기 임금계싼기 hiker's https://no1card.tistory.com/58 https://no1card.tistory.com/entry/%EC%A7%81%EC%9E%A5%EC%9D%B8-%EB%85%84%EC%B0%A8%EB%B3%84-%EC%97%B0%EB%B4%89%EC%8B%A4%EC%88%98%EB%A0%B9%EC%95%A1-%EC%9E%84%EA%B8%88-%EC%9B%94%EA%B8%89-%EA%B8%89%EC%97%AC%EA%B3%84%EC%82%B0%EA%B8%B0#entry58comment Sat, 5 Jul 2025 16:20:31 +0900