구조화 로그는 자유로운 문장 대신 시간, 수준, 요청 ID, 이벤트 이름을 구분된 필드로 남깁니다. 수집기는 필드로 검색하고 같은 요청의 사건을 묶을 수 있습니다.
데모에서는 원문 한 줄이 필드별 칩으로 펼쳐집니다. 필드 이름과 값 형식은 서비스 간 일관되게 유지하고, 사용자 입력이나 개인정보를 무심코 포함하지 않아야 합니다.
언제 쓰나
로그를 ID·수준·이벤트별로 정확히 필터링할 때 사용합니다.
구조화 로그
Structured logging
로그를 고정된 필드로 기록해 검색과 집계를 쉽게 만듭니다.
···
<div class="demo"><div class="title">PARSE ONE LOG</div><div class="scene"><div class="raw">ERROR 7f3a payment timeout</div><div class="fields"><span>level=ERROR</span><span>trace=7f3a</span><span>event=payment</span><span>reason=timeout</span></div></div></div>.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene{flex-direction:column;gap:12px}.raw{width:100%;box-sizing:border-box;padding:9px;background:var(--bg);border:1px solid var(--line);font:600 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;white-space:nowrap;overflow:hidden}.fields{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.fields span{border:1px solid var(--accent);border-radius:5px;padding:5px;font:600 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;animation:parse 2.4s infinite}.fields span:nth-child(2){animation-delay:.2s}.fields span:nth-child(3){animation-delay:.4s}.fields span:nth-child(4){animation-delay:.6s}@keyframes parse{0%,15%,100%{transform:translateY(-4px);border-color:var(--line);background:var(--bg)}35%,85%{transform:translateY(0);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}}