인터뷰 콘텐츠는 한 사람의 경험과 판단을 질문의 흐름으로 드러냅니다. 긴 녹음은 주제별 구간과 핵심 인용으로 정리해 독자가 필요한 답을 찾게 할 수 있습니다.
짧은 인용을 제목으로 쓸 때는 앞뒤 설명을 확인하세요. 편집으로 의미가 달라지지 않도록 발언자의 검토와 공개 동의 범위를 정합니다.
언제 쓰나
현장 경험이나 의사결정 과정을 당사자의 말로 설명할 때 씁니다.
인터뷰 콘텐츠
Interview content
질문별 답변을 나눠 원문 맥락과 함께 다시 읽고 듣게 합니다.
···
<div class="interview"><div class="timeline"><i></i><b>00:00</b><b>06:20</b></div><div class="questions"><button class="on">01 WHY?</button><button>02 HOW?</button><button>03 LEARNED?</button></div><div class="quote"><small>SELECTED ANSWER</small><strong id="interview-answer">THE PROBLEM WE SAW</strong></div></div>.interview{width:min(89%,620px);font:800 clamp(12px,3vmin,18px) var(--font-sans);display:grid;gap:clamp(5px,2vmin,12px)}.timeline{height:clamp(24px,7vmin,40px);border-bottom:3px solid var(--fg);display:flex;justify-content:space-between;align-items:center;position:relative}.timeline i{position:absolute;bottom:-6px;left:8%;height:10px;width:10px;background:var(--accent);border-radius:50%;animation:scrub 6s infinite}.timeline b{font-size:12px}.questions{display:flex;gap:4px}.questions button{flex:1;min-width:0;background:var(--surface);border:2px solid var(--fg);padding:clamp(5px,2vmin,12px) 1px;color:var(--fg);font:800 12px var(--font-sans);cursor:pointer}.questions button.on{background:var(--accent-2);color:#211b19}.quote{background:var(--fg);color:var(--bg);min-height:clamp(53px,18vmin,90px);display:grid;align-content:center;gap:3px;padding:clamp(7px,2vmin,15px)}.quote small{font-size:12px;color:var(--accent-2)}.quote strong{font-size:clamp(12px,3vmin,18px)}@keyframes scrub{0%,12%{left:8%}45%{left:47%}78%,100%{left:88%}}const answers=['THE PROBLEM WE SAW','THE CHANGE WE MADE','WHAT WE LEARNED'];const tabs=[...document.querySelectorAll('.questions button')];let active=0;function show(i){active=i;tabs.forEach((t,n)=>t.classList.toggle('on',n===i));document.getElementById('interview-answer').textContent=answers[i]}tabs.forEach((t,i)=>t.onclick=()=>show(i));setInterval(()=>show((active+1)%3),2600);