<output> — 폼 태그 도감

올바른 사용

사용자 입력에서 파생된 결과 표시

for 속성으로 입력 input의 id 연결

name 속성으로 form 제출에 포함 가능

live region 자동 — 변경 시 스크린리더 발화

계산기 결과

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input id="a" type="number" value="10" />
  +
  <input id="b" type="number" value="20" />
  =
  <output name="result" for="a b">30</output>
</form>

input 변경 시 output 자동 업데이트. for 속성으로 입력 식별.

환율 변환

<label for="usd">USD</label>
<input id="usd" type="number" />
<label for="krw">KRW (계산 결과)</label>
<output id="krw" for="usd">1,350,000</output>

결과는 사용자 입력 아닌 계산값. output이 시맨틱 정답.

자주 보는 안티패턴

결과를 div 또는 span으로 표시

for 속성 누락 — 어느 입력의 결과인지 모름

implicit live region을 신뢰해 aria-live 명시 안 하기 — NVDA·일부 모바일 SR는 안정적이지 않아 명시 권장

output을 input 대용으로

div로 결과

<input id="amount" type="number" />
<div className="result">{calculated}</div>

시맨틱 손실. 스크린리더가 변경을 자동 발화 안 함.

input으로 결과 표시

<input value={calculated} readonly />

시맨틱 부적절. input은 입력용. 결과는 output.

해설

사용자 입력에서 파생된 결과를 표시하는 시맨틱. 계산기의 결과, 환율 변환의 변환값, 슬라이더의 현재 값. input과 시각적으로 비슷하지만 의미는 정반대 — input은 사용자가 입력, output은 계산된 결과.

SEO 관점에서 직접 영향은 적다. 계산 결과 페이지의 시맨틱 정밀도 정도.

GEO 관점에서 AI가 사용자 입력과 계산 결과를 명확히 구분. 시리즈 #11에서 본 type 시맨틱과 결합 — input은 type별 의미, output은 결과라는 의미. AI 에이전트가 계산기나 변환기를 자동화할 때 결과 영역 식별 명확.

A11y 관점에서 output은 ARIA spec상 implicit live region(role=status·aria-live=polite). 다만 실제 스크린리더 지원이 안정적이지 않다 — NVDA에서 변경 발화가 누락되는 사례, Safari/VoiceOver의 비일관 발화가 보고되어 있다. 따라서 운영 환경에서는 aria-live="polite"를 명시해 폴백을 두는 게 안전하다. 명시는 중복이 아니라 호환성 보강.

자주 보는 안티패턴: div로 결과 표시(시맨틱 손실), for 속성 누락(어느 입력의 결과인지 추적 불가), input으로 결과 표시(input은 입력용 — readonly로 변형해도 시맨틱 부적절), implicit live region을 신뢰해 aria-live 명시 안 하기(NVDA·모바일 SR에서 발화 누락 위험).

for 속성 — output이 의존하는 입력 input들의 id. 공백으로 구분된 여러 id 가능: for="a b c". 시각적으로는 표시 안 되지만 결과의 출처를 명시. accessibility tree에서 결과와 입력의 의존 관계가 노출.

name 속성 — form 제출 시 결과도 함께 제출. 일반적으로 result는 계산값이라 서버 검증 의미가 없지만 — 기록 목적으로 함께 보내는 케이스에 활용.

JS와의 결합 — HTML5 native에서 form의 oninput 이벤트로 output 자동 업데이트 가능. React 환경에서는 일반 state로 처리: <output>{calculated}</output>. 어느 쪽이든 output 태그를 쓰면 시맨틱 + a11y 무료.

계산기·변환기 UX의 표준 — input + output 쌍. "환율 변환 계산기", "BMI 계산기", "적금 이자 계산기" 같은 페이지 대부분이 이 패턴. 시각적으로는 두 input처럼 보이지만 시맨틱은 다르다.

도감 자체에는 output이 쓰이지 않지만 — 4축 점수 영역이 일종의 계산 결과 표현으로 볼 수도. 다만 도감의 점수는 정적 데이터이지 사용자 입력에 의한 계산이 아니라 dl/dd가 더 적절.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설