멀티포맷 콘텐츠 분해

Multi-format atomization

긴 원본의 주장과 근거를 작은 단위로 나눠 각 형식에 맞게 재구성합니다.

···
html
<div class="atom"><div class="source"><b>FIELD REPORT</b><span>01 CLAIM</span><span>02 CHART</span><span>03 CASE</span></div><div class="branch">→</div><div class="atoms"><div>VIDEO <i></i></div><div>CHART <i></i></div><div>EMAIL <i></i></div></div></div>
css
.atom{width:min(90%,640px);display:flex;align-items:center;gap:clamp(5px,2vmin,15px);font:800 clamp(12px,3vmin,18px) var(--font-sans)}.atom .source{width:48%;min-width:0;display:grid;gap:clamp(3px,1.5vmin,9px);padding:clamp(7px,2vmin,16px);border:2px solid var(--fg);background:var(--surface)}.atom .source b{font-size:clamp(12px,3.5vmin,21px)}.atom .source span{border-bottom:1px solid var(--line);padding:3px 0}.atom .branch{color:var(--accent);font-size:clamp(20px,6vmin,36px)}.atom .atoms{width:42%;display:grid;gap:clamp(4px,1.8vmin,10px)}.atom .atoms div{position:relative;overflow:hidden;border:2px solid var(--fg);padding:clamp(5px,2vmin,12px);background:var(--accent-2);color:#211b19;animation:atom-enter 4.5s infinite}.atom .atoms div:nth-child(2){animation-delay:.4s}.atom .atoms div:nth-child(3){animation-delay:.8s}.atom .atoms i{position:absolute;right:5%;top:25%;height:50%;width:18%;background:var(--accent)}@keyframes atom-enter{0%,12%{opacity:.25;transform:translateX(-12px)}35%,85%{opacity:1;transform:none}100%{opacity:.25}}

멀티포맷 콘텐츠 분해는 보고서나 긴 인터뷰에서 독립적으로 이해할 수 있는 주장·사례·도표를 골라 영상, 카드, 메일 등으로 만듭니다. 원본의 한 문장을 그대로 여러 채널에 복사하는 작업과는 다릅니다.

조각마다 원본 맥락과 근거를 확인하세요. 짧아진 형식에서 조건이나 단서가 빠지면 처음의 주장과 다른 의미가 될 수 있습니다.

언제 쓰나

깊은 자료 한 편을 여러 독자 접점에서 이해 가능한 작은 콘텐츠로 만들 때 씁니다.

페이지로 열기 ↗