<output> 요소의 문제점은 기능이 반만 구현되어 있어 실제로는 거의 쓸모 없게 느껴짐
input처럼 type 속성이 있으면 훨씬 실용적일 거라 생각함
내 Sciter에서 output|type을 실험해봤고 다음과 같이 여러 타입을 추가했음
type="text": 기본값, 포맷 없음
type="number": 사용자 로케일에 맞춰 숫자 포맷
type="currency": 사용자 로케일에 맞춘 통화 포맷
type="date": 날짜로 표시, 타임존 변환 없음
type="date-local": 로컬 날짜 포맷, UTC datetime을 로컬로
type="time": 시간으로 표시
type="time-local": 로컬 시간, 값은 UTC datetime으로 처리
이런 방식이면 서버가 사용자의 로케일을 몰라도 데이터를 전달할 수 있음
아티클과 스펙에서처럼 <output>은 앱에서 계산의 결과나 사용자 행동의 결과를 보여주는 용도임
ARIA 시맨틱이 중요한 부분이고, 페이지가 업데이트될 때 스크린 리더에서 결과가 읽혀짐
<output> 안에는 원하는 타입 표현을 직접 넣을 수 있음
"text"가 기본값이며, 날짜나 시간은 <time> 태그 사용이 가능함
현재 숫자 포맷팅 전용 태그는 없지만 Intl 도입 이후로 요청이 많아짐
예를 들어:
<output>The new date is <time datetime="2025-10-11">Oct 11</time></output>
즉, <output>이 모든 타입을 처리할 필요가 없고, HTML 전체가 타입을 표현해야 함
반쪽짜리 기능 때문에 거의 쓸모없다는 말에 공감함
2025년 현재도 여전히 이런 케이스가 너무 많아 아쉬움
상당 부분은 Safari에 책임이 있다고 생각함
가장 극단적인 예는 <input type="date">임
프로덕션에 바로 써도 된다고 하지만 브라우저 간 문제 때문에 JS date picker를 더 많이 쓰게 되어 이상한 느낌임
내 개인적인 바람은 <output>이 <input>에 바로 연결되어 결과를 보여주면 좋겠다는 것임
예를 들어:
<input type="range" id="example_id" name="example_nm" min="0" max="50">
<output name="example_result" for="example_id"></output>
이런 식으로 input 값을 바로 표시해줬으면 함
"type" 지정자도 추가되고, ::before나 ::after CSS에서 content:로 내용이 바뀌는 것도 가능하면 좋겠음
다양한 <input> 타입에 대해 이런 포맷팅 기능이 있으면 쓸만할 거라 생각함
특히 type="tel" 같이 입력값을 예쁘게 포맷팅해서 보여줄 수 있으면 편리함
'checkbox, color, date, datetime-local, file, month, number, radio, range, tel, time, url, week' 등에도 다 쓸 수 있음
텍스트 계열도 특정 조건에서 유용할 수 있음
그리고 for="" 속성이 더 다양한 역할을 하면 좋겠음
지금은 대부분의 예제가 <output name="result"><form oninput="result.value=..."> 같이 변형해서 사용함
<output>을 input과 대칭적으로 타입을 두려고 생각하는 건 잘못된 접근임
output은 입력값처럼 타입이 있는 게 아니라, 페이지 상에서 내용이 바뀌는 컨테이너라는 개념임
나는 아래 형태를 선호함
<output for=input>
<!-- 커스텀 time-locale 컴포넌트 넣음 -->
<time is=time-locale datetime=2001-02-03>2001-02-03</time>
</output>
이 컴포넌트가 로케일에 따라 값을 바꿔주면 좋겠음
HTML/CSS로 가짜 내용을 만드는 건 여러 문제를 일으키기 쉬움
예를 들어 CSS ::before/:after로 주입된 걸 복사할 때나, .innerText와 실제 inner text의 차이 등이 발생함
이런 것들에 대한 의사결정을 할 필요는 있겠지만, 너무 많은 기능을 한 태그에 몰아넣으면 결국 그 태그만을 위한 DSL처럼 되어버림
값의 종류(절대/상대), 동반 데이터(통화종류 등), HTML 처리의 일부가 되어버려 JS로 유연하게 수정할 수 없게 됨
<output>? 나도 써본 적 없음
오늘 처음 알게 되어 TIL(오늘 배운 것) 목록에 추가함
깃허브 퍼블릭 레포에서 검색해도 거의 안 나오는 이유가, 아무도 안 가르치면 아무도 안 쓰기 때문임
여기서 문득 떠오른 생각은, LLM이 코드 생성할 때 이 태그를 실제 활용하는지, 혹은 아예 학습이 안 되어있는지 의문임
나도 AI가 문서(spec)를 읽지 않는 점이 걱정됨
만약 새로운 W3C 스펙이 출현해도 대부분이 "느낌표 코딩"(vibe coding) 하면 어쩌지?
AI가 최신 스펙을 반영하지 않고 옛날 코드 패턴만 반복해내면, 스펙 업데이트 확산이 오히려 지금보다 더 어려워질 것임
나는 Claude가 코드를 생성해줘서 <output> 태그를 처음 발견함
LLM은 표준 문서를 직접 읽는 게 아니라, 기존 프로젝트에서 얻은 방대한 데이터의 통계적 패턴을 기반으로 코드를 생성함
실제로 코드에서 이 태그가 거의 안 쓰이면, LLM 코드 출력에도 거의 안 나오게 됨
2025년 10월 7일 업데이트: 일부 스크린 리더가 아직 <output> 태그의 업데이트를 인식하지 못해서, role 속성을 명시적으로 사용하는 게 당분간은 나을 수 있음: <output role="status">
17년이나 된 오래된 태그 지원이 나아질 때까지 그냥 기다려야 하는 상황인지 의문임
17년 표준에도 불구하고 스크린 리더가 태그를 무시하는 문제를 개선하려면 노력이 필요함
이건 명백히 스크린 리더 쪽 문제라고 생각함
프론트엔드 웹 접근성 강의를 여러 개 이수했지만, <output> 태그를 한 번도 본 적이 없음
좋은 정보 공유해줘서 고마움
<output>도 <label>처럼 for="" 속성이 있는데, 실제로 스크린 리더 사용자는 이게 의미가 있을지 궁금함
현존하는 웹에서 거의 안 쓰여서, 스크린 리더 사용자도 익숙하지 않을 수 있지만, 결국엔 소프트웨어 UX에 따라 다를 것 같음
나는 직접 스크린 리더를 쓰진 않지만, 테스트용으로 많이 다뤄봤음
이게 보조 기술에 제대로 노출될지는 의문임
컴퓨터 앞이 아니라서 지금 바로 테스트는 불가
개인적으로는 오히려 output 값을 명확하게 라벨링하는 게 훨씬 낫다고 생각함
예를 들어:
<label for="output">Total</label>
<output id="output">£123.45</output>
이렇게 하면 스크린 리더에서 "Total, £123.45"라고 읽혀서 맥락 파악이 쉬움
시맨틱 HTML은 초심자를 위한 함정에 불과하다고 봄
고민하지 말고 aria-live처럼 실제로 동작하는 솔루션을 사용해야 함
이런 요소로 재미를 볼 수는 있지만, 개발자라면 사용자에게 실제로 동작하는 구조를 만들어주는 것이 책임이라는 생각임
널리 사용되지 않는 시맨틱 태그보다는, 브라우저와 기존 생태계가 기대하는 걸 쓰는 게 옳음
html은 브라우저만을 위한 것이 아님
epub 작업을 많이 해본 입장에서 시맨틱 페이지 구성이 전체적으로 훨씬 쉽고 좋아짐
<output>이 웹 페이지 접근성(특히 스크린 리더 지원)을 위한 태그임을 알게 됨
"ARIA"는 Accessible Rich Internet Applications의 줄임말로, 장애인 접근성을 높여주는 HTML 속성들의 집합임
리액트 아래에서 JavaScript가 무엇인지 설명하는 느낌임
접근성 기본을 몰라도 부끄러울 일은 아니지만, 그렇다고 독자가 모른다는 걸 이상하게 여기며 반응할 필요도 없다고 생각함
설명 고마움
사실 나도 구글링할 수 있었는데, 그냥 흐린 토요일 오후에 네 댓글 보는 게 더 편했음
다시 한 번 고마움
이 아티클 제목만 보고 <output>이 잘못 쓰였을 줄 알았는데, 읽어보니 아주 놀라움을 느낌
(특히 맨 위 dodgy GenAI calculator 이미지를 보고 더 심한 실패를 예상했지만, 결국 내용이 너무 좋아서 다 읽고 나서야 다시 그 이미지를 떠올렸음)
그 dodgy GenAI calculator 이미지가 너무 웃김
추가, 곱셈, 나눗셈만 되고 뺄셈은 못 함
dodgy GenAI calculator 이미지를 두고 얘기하자면
AI가 있기 전 우리 인간이 만든 더 허술한 이미지를 잊어버리는 것 같음
AI 덕분에 이제는 최소한 부끄럽지 않을 정도의 이미지를 바로 만들 수 있게 되었음
이번 경우엔 (주관적으로) 빈티지 레트로 IT 감성이 잘 드러나서 의미 있다고 생각함
모든 AI 활용이 프로 아티스트의 작업을 대체하지는 않는다고 봄
이런 내용을 볼 때마다 좋음
또 다른 팁은 form 이름을 백엔드 데이터 구조와 맞추는 식으로 지으면, JS로 값 받아오거나 데이터 재구성할 필요가 줄어든다는 것임
예를 들어 이런 식:
<input name=“entity[id]”>
<input name=“entity[relation]”>
이렇게 하면 JS로 귀찮게 따로 데이터 만들 필요 없이 폼 제출만 하면 바로 원하는 데이터가 됨
Hacker News 의견
<output> 요소의 문제점은 기능이 반만 구현되어 있어 실제로는 거의 쓸모 없게 느껴짐
input처럼 type 속성이 있으면 훨씬 실용적일 거라 생각함
내 Sciter에서 output|type을 실험해봤고 다음과 같이 여러 타입을 추가했음
이런 방식이면 서버가 사용자의 로케일을 몰라도 데이터를 전달할 수 있음
아티클과 스펙에서처럼 <output>은 앱에서 계산의 결과나 사용자 행동의 결과를 보여주는 용도임
ARIA 시맨틱이 중요한 부분이고, 페이지가 업데이트될 때 스크린 리더에서 결과가 읽혀짐
<output> 안에는 원하는 타입 표현을 직접 넣을 수 있음
"text"가 기본값이며, 날짜나 시간은 <time> 태그 사용이 가능함
현재 숫자 포맷팅 전용 태그는 없지만 Intl 도입 이후로 요청이 많아짐
예를 들어:
<output>The new date is <time datetime="2025-10-11">Oct 11</time></output>
즉, <output>이 모든 타입을 처리할 필요가 없고, HTML 전체가 타입을 표현해야 함
반쪽짜리 기능 때문에 거의 쓸모없다는 말에 공감함
2025년 현재도 여전히 이런 케이스가 너무 많아 아쉬움
상당 부분은 Safari에 책임이 있다고 생각함
가장 극단적인 예는 <input type="date">임
프로덕션에 바로 써도 된다고 하지만 브라우저 간 문제 때문에 JS date picker를 더 많이 쓰게 되어 이상한 느낌임
내 개인적인 바람은 <output>이 <input>에 바로 연결되어 결과를 보여주면 좋겠다는 것임
예를 들어: <input type="range" id="example_id" name="example_nm" min="0" max="50"> <output name="example_result" for="example_id"></output> 이런 식으로 input 값을 바로 표시해줬으면 함
"type" 지정자도 추가되고, ::before나 ::after CSS에서 content:로 내용이 바뀌는 것도 가능하면 좋겠음
다양한 <input> 타입에 대해 이런 포맷팅 기능이 있으면 쓸만할 거라 생각함
특히 type="tel" 같이 입력값을 예쁘게 포맷팅해서 보여줄 수 있으면 편리함
'checkbox, color, date, datetime-local, file, month, number, radio, range, tel, time, url, week' 등에도 다 쓸 수 있음
텍스트 계열도 특정 조건에서 유용할 수 있음
그리고 for="" 속성이 더 다양한 역할을 하면 좋겠음
지금은 대부분의 예제가 <output name="result"><form oninput="result.value=..."> 같이 변형해서 사용함
<output>을 input과 대칭적으로 타입을 두려고 생각하는 건 잘못된 접근임
output은 입력값처럼 타입이 있는 게 아니라, 페이지 상에서 내용이 바뀌는 컨테이너라는 개념임
나는 아래 형태를 선호함 <output for=input>
<!-- 커스텀 time-locale 컴포넌트 넣음 --><time is=time-locale datetime=2001-02-03>2001-02-03</time> </output> 이 컴포넌트가 로케일에 따라 값을 바꿔주면 좋겠음
HTML/CSS로 가짜 내용을 만드는 건 여러 문제를 일으키기 쉬움
예를 들어 CSS ::before/:after로 주입된 걸 복사할 때나, .innerText와 실제 inner text의 차이 등이 발생함
이런 것들에 대한 의사결정을 할 필요는 있겠지만, 너무 많은 기능을 한 태그에 몰아넣으면 결국 그 태그만을 위한 DSL처럼 되어버림
값의 종류(절대/상대), 동반 데이터(통화종류 등), HTML 처리의 일부가 되어버려 JS로 유연하게 수정할 수 없게 됨
<output>? 나도 써본 적 없음
오늘 처음 알게 되어 TIL(오늘 배운 것) 목록에 추가함
깃허브 퍼블릭 레포에서 검색해도 거의 안 나오는 이유가, 아무도 안 가르치면 아무도 안 쓰기 때문임
여기서 문득 떠오른 생각은, LLM이 코드 생성할 때 이 태그를 실제 활용하는지, 혹은 아예 학습이 안 되어있는지 의문임
나도 AI가 문서(spec)를 읽지 않는 점이 걱정됨
만약 새로운 W3C 스펙이 출현해도 대부분이 "느낌표 코딩"(vibe coding) 하면 어쩌지?
AI가 최신 스펙을 반영하지 않고 옛날 코드 패턴만 반복해내면, 스펙 업데이트 확산이 오히려 지금보다 더 어려워질 것임
나는 Claude가 코드를 생성해줘서 <output> 태그를 처음 발견함
LLM은 표준 문서를 직접 읽는 게 아니라, 기존 프로젝트에서 얻은 방대한 데이터의 통계적 패턴을 기반으로 코드를 생성함
실제로 코드에서 이 태그가 거의 안 쓰이면, LLM 코드 출력에도 거의 안 나오게 됨
2025년 10월 7일 업데이트: 일부 스크린 리더가 아직 <output> 태그의 업데이트를 인식하지 못해서, role 속성을 명시적으로 사용하는 게 당분간은 나을 수 있음: <output role="status">
17년이나 된 오래된 태그 지원이 나아질 때까지 그냥 기다려야 하는 상황인지 의문임
윈도우 환경에서는 NVDA 저장소에 issue를 올리면 꽤 잘 처리해주는 편임
https://github.com/nvaccess/nvda
17년 표준에도 불구하고 스크린 리더가 태그를 무시하는 문제를 개선하려면 노력이 필요함
이건 명백히 스크린 리더 쪽 문제라고 생각함
프론트엔드 웹 접근성 강의를 여러 개 이수했지만, <output> 태그를 한 번도 본 적이 없음
좋은 정보 공유해줘서 고마움
<output>도 <label>처럼 for="" 속성이 있는데, 실제로 스크린 리더 사용자는 이게 의미가 있을지 궁금함
현존하는 웹에서 거의 안 쓰여서, 스크린 리더 사용자도 익숙하지 않을 수 있지만, 결국엔 소프트웨어 UX에 따라 다를 것 같음
이게 보조 기술에 제대로 노출될지는 의문임
컴퓨터 앞이 아니라서 지금 바로 테스트는 불가
개인적으로는 오히려 output 값을 명확하게 라벨링하는 게 훨씬 낫다고 생각함
예를 들어: <label for="output">Total</label> <output id="output">£123.45</output> 이렇게 하면 스크린 리더에서 "Total, £123.45"라고 읽혀서 맥락 파악이 쉬움
시맨틱 HTML은 초심자를 위한 함정에 불과하다고 봄
고민하지 말고 aria-live처럼 실제로 동작하는 솔루션을 사용해야 함
이런 요소로 재미를 볼 수는 있지만, 개발자라면 사용자에게 실제로 동작하는 구조를 만들어주는 것이 책임이라는 생각임
널리 사용되지 않는 시맨틱 태그보다는, 브라우저와 기존 생태계가 기대하는 걸 쓰는 게 옳음
epub 작업을 많이 해본 입장에서 시맨틱 페이지 구성이 전체적으로 훨씬 쉽고 좋아짐
<output>이 웹 페이지 접근성(특히 스크린 리더 지원)을 위한 태그임을 알게 됨
"ARIA"는 Accessible Rich Internet Applications의 줄임말로, 장애인 접근성을 높여주는 HTML 속성들의 집합임
리액트 아래에서 JavaScript가 무엇인지 설명하는 느낌임
접근성 기본을 몰라도 부끄러울 일은 아니지만, 그렇다고 독자가 모른다는 걸 이상하게 여기며 반응할 필요도 없다고 생각함
MDN에 관련 문서가 잘 정리되어 있음
(아티클 작성자도 동일한 지침을 강조함)
"ARIA를 써야 할 첫 번째 규칙은, 이미 시맨틱과 동작이 충족되는 네이티브 HTML 요소 또는 속성이 있으면, 굳이 ARIA role이나 state, property를 추가해 재활용하지 말고 바로 그걸 쓰라는 것임"
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
설명 고마움
사실 나도 구글링할 수 있었는데, 그냥 흐린 토요일 오후에 네 댓글 보는 게 더 편했음
다시 한 번 고마움
이 아티클 제목만 보고 <output>이 잘못 쓰였을 줄 알았는데, 읽어보니 아주 놀라움을 느낌
(특히 맨 위 dodgy GenAI calculator 이미지를 보고 더 심한 실패를 예상했지만, 결국 내용이 너무 좋아서 다 읽고 나서야 다시 그 이미지를 떠올렸음)
그 dodgy GenAI calculator 이미지가 너무 웃김
추가, 곱셈, 나눗셈만 되고 뺄셈은 못 함
dodgy GenAI calculator 이미지를 두고 얘기하자면
AI가 있기 전 우리 인간이 만든 더 허술한 이미지를 잊어버리는 것 같음
AI 덕분에 이제는 최소한 부끄럽지 않을 정도의 이미지를 바로 만들 수 있게 되었음
이번 경우엔 (주관적으로) 빈티지 레트로 IT 감성이 잘 드러나서 의미 있다고 생각함
모든 AI 활용이 프로 아티스트의 작업을 대체하지는 않는다고 봄
이런 내용을 볼 때마다 좋음
또 다른 팁은 form 이름을 백엔드 데이터 구조와 맞추는 식으로 지으면, JS로 값 받아오거나 데이터 재구성할 필요가 줄어든다는 것임
예를 들어 이런 식: <input name=“entity[id]”> <input name=“entity[relation]”> 이렇게 하면 JS로 귀찮게 따로 데이터 만들 필요 없이 폼 제출만 하면 바로 원하는 데이터가 됨