HTML 직접 보기
<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>면접 연습 · 수정 후</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f3ee;color:#203d35;font:17px/1.6 system-ui,-apple-system,"Noto Sans KR",sans-serif}main{max-width:900px;margin:36px auto;padding:32px;background:#fff;border:1px solid #dcded5;border-radius:24px}h1{font-size:clamp(26px,5vw,40px);line-height:1.3;letter-spacing:-.03em;margin:8px 0 12px}h2{font-size:22px}p{margin:10px 0}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.09em;color:#547060}.muted{color:#68786f;font-size:15px}.note{padding:14px 18px;background:#fff2c8;border-radius:12px;color:#4f481f}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit;border-radius:10px;padding:12px 16px}button{background:#245445;color:white;border:0;cursor:pointer;font-weight:700}button.secondary{background:#edf2ed;color:#245445}button:disabled{opacity:.45;cursor:wait}input,textarea,select{border:1px solid #bacbc2;background:#fff;color:#203d35;max-width:100%}input,textarea{flex:1;min-width:180px}textarea{width:100%;min-height:150px;resize:vertical}label{font-weight:700}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #e3ae35;outline-offset:3px}.card{border:1px solid #dce5df;padding:18px;border-radius:16px;margin:12px 0}.big{font-size:clamp(36px,8vw,72px);font-weight:800;text-align:center;padding:40px 0;background:#edf3ed;border-radius:18px}.badge{display:inline-block;background:#ecf2ed;color:#245445;padding:4px 10px;border-radius:7px;font-size:14px}.todo{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e7ece8}.todo span{flex:1;overflow-wrap:anywhere}.todo.done span{text-decoration:line-through;color:#809086}.error{color:#9c382a}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.7 system-ui,"Noto Sans KR",sans-serif}.hidden{display:none}nav{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:600px){main{margin:0;padding:22px 18px;border-radius:0;border:0;min-height:100vh}.todo{flex-wrap:wrap}button{min-height:48px}}</style></head><body><main><div class="eyebrow">02 · 한 가지씩 수정한 실행 예시</div><h1>차근차근 면접 연습</h1><p class="muted">정해진 질문과 답을 정리하는 도구예요. AI 채점이나 평가는 하지 않습니다.</p><section id="practice"><div class="row"><span id="progress" class="badge"></span><span id="timer" aria-live="off">0초</span></div><h2 id="question"></h2><label for="answer">내 답</label><p>완벽하지 않아도 괜찮아요. 생각나는 내용을 적어 보세요.</p><textarea id="answer" maxlength="2000" placeholder="가상 내용으로 연습하세요"></textarea><p id="error" class="error" role="status"></p><div class="row"><button id="next">다음 질문</button><button id="reset" class="secondary">다시 시작</button></div></section><section id="summary" class="hidden"><h2>내가 정리한 다섯 가지 답</h2><div id="answers"></div><button id="again">다시 시작</button></section></main><script>const questions=['나를 간단히 소개해 주세요.','지원한 이유는 무엇인가요?','다른 사람과 협력했던 경험은?','어려움을 해결한 경험을 말해 주세요.','앞으로 어떤 일을 하고 싶나요?'];let index=0,answers=[],started=Date.now(),ticker;const $=id=>document.getElementById(id);function show(){clearInterval(ticker);started=Date.now();$('timer').textContent='0초';$('question').textContent=questions[index];$('progress').textContent=(index+1)+' / 5';$('answer').value='';$('error').textContent='';$('next').textContent=index===4?'답 정리 보기':'다음 질문';ticker=setInterval(()=>{$('timer').textContent=Math.floor((Date.now()-started)/1000)+'초'},250)}function restart(){clearInterval(ticker);index=0;answers=[];$('answers').replaceChildren();$('practice').classList.remove('hidden');$('summary').classList.add('hidden');show()}$('next').addEventListener('click',()=>{const answer=$('answer').value.trim();if(!answer){$('error').textContent='짧게라도 답을 적어 주세요.';$('answer').focus();return}answers.push(answer);index++;if(index<5){show();return}clearInterval(ticker);$('practice').classList.add('hidden');$('summary').classList.remove('hidden');answers.forEach((answer,i)=>{const card=document.createElement('div');card.className='card';const q=document.createElement('h2'),a=document.createElement('p');q.textContent=questions[i];a.textContent=answer;card.append(q,a);$('answers').append(card)})});$('reset').addEventListener('click',restart);$('again').addEventListener('click',restart);restart();</script></body></html>