HTML dirname 속성 기준 정리

본문 중간의 쿠팡 추천 상품 구매시 쿠팡 파트너스에서 일정액의 수수료를 제공받습니다.

HTML dirname 속성 기준 정리

dirname은 폼 제출 시 입력값 자체뿐 아니라 그 입력값의 글자 방향까지 함께 보내고 싶을 때 쓰는 HTML 속성이다. 2026년 7월 31일 확인 기준 WHATWG HTML Living Standard는 이 속성이 폼 컨트롤의 방향성을 함께 제출하도록 만들며, 값은 비어 있으면 안 된다고 설명한다.

실무 기준은 단순하다. 다국어 댓글, 사용자 이름, 주소처럼 좌에서 우로 쓰는 언어와 우에서 좌로 쓰는 언어가 함께 들어올 수 있으면 dirname이 유용하다. 반대로 화면 표시 방향만 바꾸고 싶은 경우라면 dirname이 아니라 dir와 레이아웃 설계를 먼저 봐야 한다.

dirname은 무엇을 보내는 속성일까?

dirname을 지정한 폼 컨트롤이 제출되면 브라우저는 보통 두 개의 이름-값 쌍을 보낸다. 하나는 원래 필드의 값이고, 다른 하나는 dirname 속성값을 이름으로 쓰는 방향 정보다. 방향 값은 ltr 또는 rtl이다.

예를 들어 name="comment"와 dirname="comment-dir"를 함께 두면, 서버는 comment와 comment-dir 두 필드를 받게 된다. 입력 텍스트가 아랍어처럼 오른쪽에서 왼쪽 방향으로 판단되면 두 번째 필드 값은 rtl이 된다.

어떤 요소에서 쓸 수 있을까?

MDN 기준 dirname은 <textarea>에서 사용할 수 있고, <input>에서는 hidden, text, search, url, tel, email 타입에 적용할 수 있다. 즉 일반 텍스트 입력 계열에서 방향 정보를 함께 보내는 용도라고 보면 된다.

반대로 체크박스, 날짜 선택, 파일 업로드 같은 컨트롤의 핵심 문제는 텍스트 방향성이 아니다. 이런 입력까지 같은 기준으로 확장해 생각하면 구현 의도가 흐려진다.

dir와 dirname은 어떻게 다를까?

dir는 요소의 방향을 지정하거나 상속받게 하는 속성이고, dirname은 그 결과 방향을 제출 데이터에 포함시키는 속성이다. 둘은 역할이 다르기 때문에 대체 관계가 아니다.

실무에서는 보통 dir="auto"와 함께 보는 편이 이해하기 쉽다. 사용자가 어떤 언어로 입력하든 브라우저가 입력 텍스트를 보고 방향을 판단하게 한 뒤, 그 결과를 dirname으로 서버에 넘기는 방식이다. dir를 따로 두지 않으면 부모 요소의 방향이나 사용자 에이전트 기본 방향이 기준이 될 수 있다.

<form method="post" action="/comments">
  <label for="comment">댓글</label>
  <textarea
    id="comment"
    name="comment"
    dir="auto"
    dirname="comment-dir"></textarea>
  <button type="submit">등록</button>
</form>

서버에서는 어떤 식으로 처리하면 될까?

서버는 방향 정보를 별도 메타데이터처럼 받는다고 보면 된다. 예를 들어 검색어, 닉네임, 댓글을 저장할 때 원문과 함께 ltr/rtl 값을 같이 저장하면 나중에 관리자 화면이나 재렌더링 시 방향 문제를 줄일 수 있다.

다만 이 값이 보안 판단이나 권한 판단의 근거가 되면 안 된다. 브라우저가 보내는 방향 정보는 표현과 표시 보조에 가까우며, 서버 검증을 대체하지 않는다.

언제 쓰는 편이 좋을까?

가장 적합한 경우는 다국어 입력을 실제로 받는 폼이다. 사용자 생성 콘텐츠가 많고, 같은 서비스 안에서 영어와 아랍어, 히브리어 같은 텍스트가 섞이는 환경이라면 값만 저장하는 것보다 방향까지 함께 저장하는 편이 재사용성이 높다.

상황	판단 기준
댓글, 게시판, 채팅 입력	다국어 혼합 가능성이 크면 고려할 만함
이름, 회사명, 주소 입력	우에서 좌로 쓰는 언어 사용자가 있으면 유용함
숫자, 날짜, 파일 선택	방향 정보의 실익이 작아 보통 불필요함
단일 언어 내부 시스템	실제 다국어 입력이 없으면 우선순위가 낮음

 

 

주의할 점은 무엇일까?

첫째, dirname 값은 비어 있으면 안 된다. WHATWG 표준은 빈 문자열을 허용하지 않는다. 둘째, 서버가 이 추가 필드를 읽지 않으면 속성을 붙여도 실제 활용 효과는 없다. 셋째, 화면에서 글자 방향이 어색한 문제를 해결하려면 CSS보다 먼저 dir 상속 구조와 입력 UX를 확인해야 한다.

또한 dirname은 국제화 입력을 보조하는 수단이지 자동 번역이나 언어 감지 기능이 아니다. 텍스트가 어떤 언어인지까지 판정해 주는 것은 아니며, 단지 현재 방향성을 함께 전달하는 정도로 이해하는 편이 맞다.

브라우저 호환성은 어떤가?

MDN은 dirname을 Baseline Widely available로 표시하며, 2023년 8월부터 주요 브라우저 전반에서 사용 가능하다고 설명한다. 신규 서비스에서 호환성 때문에 바로 제외해야 하는 속성은 아니라는 뜻이다.

다만 실제 운영 기준은 "브라우저가 지원하느냐"보다 "서버와 저장 구조가 이 추가 필드를 쓰느냐"에 더 가깝다. 프런트엔드만 바꾸고 백엔드가 무시하면 도입 효과는 거의 없다.

FAQ

Q. dirname만 있으면 화면 방향도 자동으로 맞춰지나?

아니다. 화면에서 보이는 방향 제어는 주로 dir가 맡고, dirname은 그 결과를 제출 데이터에 실어 보내는 용도다.

Q. dir="auto"와 항상 같이 써야 하나?

항상은 아니다. 다만 사용자 입력에 따라 방향이 달라질 수 있는 필드라면 함께 쓰는 편이 가장 직관적이다. dir를 지정하지 않으면 부모 요소 방향을 상속할 수 있다.

Q. 서버가 받는 방향 값은 어떤 형식인가?

표준과 MDN 설명 기준으로 ltr 또는 rtl 문자열이다. 별도 필드 이름은 dirname 속성값으로 정한다.

정리

dirname은 많이 쓰이는 속성은 아니지만, 다국어 텍스트를 실제로 받는 서비스라면 꽤 실용적이다. 핵심은 "값 자체"만 저장할지, 아니면 "값과 방향 정보"를 함께 저장할지의 선택이다.

실무 기준으로는 다국어 입력이 있는 textarea나 텍스트 계열 input에만 제한적으로 적용하고, dir="auto"와 서버 측 필드 처리까지 함께 설계하는 편이 무난하다.

참고 자료

• WHATWG HTML Living Standard: dirname attribute
• MDN: dirname HTML attribute
• MDN: <input> element reference