지난 편에서 글자를 다루는 세밀한 기법을 익혔습니다. 이번에는 요소에 우리만의 정보를 붙이는 방법을 다룹니다. 문서의 태그에는 정해진 속성들이 있습니다. 이미지의 주소, 링크의 목적지 같은 것들이죠. 그런데 개발을 하다 보면 이런 정해진 속성으로는 담을 수 없는, 우리만 필요로 하는 정보를 요소에 붙여 두고 싶을 때가 있습니다. 이번 편의 주제인 커스텀 데이터 속성이 바로 그것을 위한 도구입니다.
제가 초보 시절에는 요소에 우리만의 정보를 붙이려고 정해진 속성을 엉뚱하게 갖다 쓰거나, 눈에 보이지 않는 숨은 요소에 정보를 몰래 담는 편법을 썼습니다. 그러다 이런 용도를 위해 마련된 정식 방법이 있다는 것을 알고 나서, 훨씬 깔끔하게 정보를 다룰 수 있게 되었습니다. 이번 편에서 그 정식 방법을 정리하겠습니다.
1. 커스텀 속성이 필요한 이유
문서의 태그가 제공하는 정해진 속성들은 저마다 정확한 의미를 갖습니다. 그래서 우리만의 정보를 담으려고 이 속성들을 원래 용도와 다르게 쓰면 문제가 생깁니다. 예를 들어 제목을 담는 속성에 엉뚱한 관리용 정보를 넣으면, 브라우저나 화면 낭독 프로그램이 그것을 진짜 제목으로 오해합니다. 정해진 속성은 그 의미대로만 써야 합니다.
그렇다고 우리만의 정보를 담을 곳이 없는 것은 아닙니다. 이런 필요를 위해 마련된 것이 커스텀 데이터 속성입니다. 정해진 이름 규칙만 지키면, 우리가 원하는 이름으로 우리가 원하는 정보를 요소에 붙일 수 있습니다. 이 속성은 브라우저가 특별히 해석하지 않으므로, 우리가 자유롭게 뜻을 정해 쓸 수 있습니다.
이 커스텀 속성의 이름은 정해진 접두어로 시작합니다. 이 접두어 뒤에 우리가 원하는 이름을 붙이는 규칙이죠. 이 접두어 덕분에 브라우저는 이것이 표준 속성이 아니라 개발자가 임의로 붙인 정보라는 것을 알고, 자기 나름의 해석을 시도하지 않습니다. 그래서 안전하게 우리만의 뜻으로 쓸 수 있습니다.
이 방식이 편법과 다른 점은 정식으로 허용된 방법이라는 것입니다. 숨은 요소에 정보를 몰래 담거나 정해진 속성을 오용하는 것은 언젠가 부작용을 냅니다. 반면 커스텀 데이터 속성은 표준이 이 용도로 마련해 준 정식 통로라, 부작용 없이 마음 놓고 쓸 수 있습니다. 저는 우리만의 정보가 필요할 때 항상 이것을 씁니다.
이 속성이 유용한 대표적인 경우가 화면의 상태나 동작에 필요한 정보를 요소에 붙여 둘 때입니다. 이 버튼이 무엇을 여는지, 지금 열려 있는지 닫혀 있는지, 어떤 항목을 가리키는지 같은 정보를 요소 자체에 담아 두면, 나중에 그 정보를 꺼내 쓰기가 편합니다. 정보와 그 정보가 딸린 요소가 한 몸이 되는 것이죠.
정리하면 커스텀 데이터 속성은 정해진 속성으로 담을 수 없는 우리만의 정보를 요소에 붙이는 정식 방법입니다. 정해진 접두어로 시작하는 이름 규칙만 지키면 자유롭게 쓸 수 있습니다. 이제 이 정보를 어떻게 꺼내 쓰는지 살펴보겠습니다.
2. 정보를 꺼내 쓰기
요소에 붙여 둔 커스텀 정보는 나중에 코드로 꺼내 쓸 수 있습니다. 각 요소는 자신에게 붙은 커스텀 데이터들을 모아 둔 통로를 제공합니다. 이 통로를 통해 우리가 붙여 둔 정보를 읽어 오거나, 새 값으로 바꿀 수 있습니다. 요소에 담아 둔 정보와 코드가 이 통로로 연결되는 것이죠.
여기서 이름이 조금 바뀌는 규칙이 있습니다. 속성에서는 여러 단어를 이을 때 붙임표로 잇는데, 코드에서 그 정보를 꺼낼 때는 붙임표가 사라지고 뒤 단어의 첫 글자가 대문자로 바뀝니다. 이 변환 규칙을 알아 두어야, 속성에 붙인 이름과 코드에서 부르는 이름을 올바르게 짝지을 수 있습니다. 처음에는 헷갈리지만 익숙해지면 자연스럽습니다.
이 통로의 편리함은 정보를 읽는 것뿐 아니라 바꾸는 것도 된다는 점입니다. 예를 들어 어떤 요소의 상태 정보를 열림에서 닫힘으로 바꾸면, 그 변화가 요소의 속성에도 반영됩니다. 그러면 그 속성 상태에 따라 모양을 다르게 하는 처리와도 자연스럽게 연동됩니다. 정보와 모양이 함께 움직이는 것이죠.
이 방식이 좋은 이유는 정보가 요소에 딱 붙어 다니기 때문입니다. 여러 요소가 각자 자기 정보를 지니고 있으면, 어떤 요소를 다룰 때 그 요소에 딸린 정보를 바로 꺼내 쓸 수 있습니다. 정보를 별도의 어딘가에 따로 관리하며 어떤 정보가 어떤 요소의 것인지 짝을 맞추는 수고가 사라집니다.
제가 이 통로를 활용하기 시작한 뒤로 코드가 한결 깔끔해졌습니다. 전에는 요소와 정보를 따로 관리하며 둘을 연결하느라 복잡했는데, 정보를 요소에 직접 붙이니 그런 복잡함이 사라졌습니다. 요소를 잡으면 그에 딸린 정보가 함께 잡히니, 다루기가 훨씬 직관적이었습니다.
아래는 요소의 커스텀 정보를 꺼내고 바꾸는 예시입니다. 붙임표 이름이 대문자 이름으로 바뀌는 것을 보세요.
<button data-state="closed" data-target="menu">열기</button>
// 코드에서는 dataset.state, dataset.target 으로 접근
3. 값은 언제나 글자
커스텀 데이터 속성을 쓸 때 반드시 기억할 점이 있습니다. 이 속성에 담기는 값은 언제나 글자로 취급된다는 것입니다. 숫자처럼 보이는 값을 넣어도 코드가 그것을 꺼낼 때는 글자로 읽힙니다. 참과 거짓 같은 값도 마찬가지로 글자입니다. 이 사실을 잊으면 뜻하지 않은 오류를 만나게 됩니다.
왜 이것이 문제가 될까요. 예를 들어 어떤 수량을 이 속성에 담아 두고 그것을 꺼내 다른 수와 더하려 하면, 글자로 읽힌 값이 숫자처럼 더해지지 않고 엉뚱하게 이어 붙는 일이 생깁니다. 그래서 숫자로 다룰 값은 꺼낸 뒤에 숫자로 바꾸는 처리를 거쳐야 합니다. 이 한 단계를 빠뜨리면 계산이 어긋납니다.
참과 거짓을 나타내는 값도 조심해야 합니다. 거짓을 나타내려고 거짓이라는 글자를 넣어도, 코드가 그것을 꺼내면 비어 있지 않은 글자라서 참으로 취급될 수 있습니다. 그래서 참과 거짓을 이 속성으로 다룰 때는, 값이 특정 글자와 같은지를 비교하는 방식으로 판단하는 것이 안전합니다. 글자라는 성질을 늘 염두에 두어야 합니다.
이런 성질 때문에 커스텀 데이터 속성은 단순한 값에 어울립니다. 짧은 상태 표시나 식별용 이름 같은 것을 담기에는 좋지만, 복잡한 구조를 가진 정보를 담기에는 적합하지 않습니다. 복잡한 정보를 억지로 글자로 눌러 담으면 꺼낼 때 다시 풀어야 해서 번거롭고 실수도 잦아집니다.
제가 이 글자 성질 때문에 초보 시절 한참 헤맨 적이 있습니다. 수량을 담아 두고 계산했는데 결과가 이상해서 원인을 못 찾다가, 값이 글자로 읽혀 더해지지 않고 이어 붙었다는 것을 뒤늦게 알았습니다. 숫자로 바꾸는 한 줄을 넣자 바로 해결되었죠. 그 뒤로 이 속성의 값은 항상 글자라는 것을 잊지 않습니다.
정리하면 커스텀 데이터 속성의 값은 언제나 글자입니다. 숫자나 참과 거짓으로 다룰 값은 꺼낸 뒤 알맞게 변환해야 합니다. 이 속성은 단순한 값에 어울리며, 복잡한 정보에는 다른 방법이 낫습니다.
4. 모양 처리와의 연동
커스텀 데이터 속성은 코드에서만 쓰이는 것이 아닙니다. 요소의 모양을 정하는 처리에서도 이 속성을 활용할 수 있습니다. 어떤 요소의 커스텀 속성이 특정 값일 때 그 요소를 다르게 보이게 하는 식으로, 속성의 상태에 따라 모양을 바꿀 수 있습니다. 정보와 모양이 이 속성을 통해 연결되는 것이죠.
예를 들어 어떤 항목의 상태를 나타내는 커스텀 속성이 있다고 합시다. 이 속성이 활성이라는 값일 때는 그 항목을 도드라지게 보이고, 비활성일 때는 흐리게 보이도록 정할 수 있습니다. 그러면 코드로 이 속성 값만 바꾸면, 모양도 그에 따라 자동으로 바뀝니다. 모양을 일일이 코드로 지정하지 않아도 되는 것이죠.
이 연동의 장점은 역할이 깔끔하게 나뉜다는 것입니다. 코드는 요소의 상태 정보만 바꾸고, 그 상태가 어떻게 보일지는 모양 처리가 맡습니다. 상태를 바꾸는 일과 그 상태를 표현하는 일이 분리되어, 각각을 독립적으로 다룰 수 있습니다. 이렇게 나뉘면 나중에 모양만 바꾸고 싶을 때 코드는 건드리지 않아도 됩니다.
이 방식은 여러 상태를 오가는 요소에 특히 유용합니다. 열림과 닫힘, 선택과 미선택, 로딩 중과 완료 같은 상태를 커스텀 속성으로 표현하고, 각 상태의 모양을 미리 정해 두면, 상태 전환이 매끄럽게 이루어집니다. 상태가 바뀔 때마다 모양이 자연스럽게 따라오니 사용자에게도 일관된 경험을 줍니다.
제가 이 연동을 활용하면서 코드와 모양의 경계가 분명해졌습니다. 전에는 코드가 모양까지 직접 주무르느라 뒤섞였는데, 상태는 커스텀 속성으로 표현하고 모양은 모양 처리에 맡기니 각자의 자리가 생겼습니다. 이 분리가 유지보수를 크게 편하게 해 주었습니다. 역할을 나누는 것의 가치를 실감한 사례였습니다.
아래는 커스텀 속성 값에 따라 모양을 다르게 하는 예시입니다. 상태 값에 따라 표현이 갈립니다.
<style>
.item[data-state="active"] { font-weight: bold; }
</style>
5. 남용하지 않기
커스텀 데이터 속성은 편리하지만 남용하면 안 됩니다. 먼저 이 속성은 문서에 그대로 드러납니다. 페이지의 내용을 들여다보면 누구나 이 속성과 그 값을 볼 수 있습니다. 그래서 남에게 보이면 안 되는 민감한 정보를 이 속성에 담아서는 절대 안 됩니다. 이것은 정보를 숨기는 곳이 아니라 그저 요소에 붙여 두는 곳입니다.
또 이 속성에 대량의 정보를 담는 것도 피해야 합니다. 이 속성은 화면의 상태나 짧은 식별 정보를 담는 용도이지, 많은 데이터를 저장하는 창고가 아닙니다. 대량의 정보를 여기에 담으면 문서가 무거워지고 관리도 어려워집니다. 많은 데이터가 필요하다면 그에 맞는 다른 방법을 써야 합니다.
이 속성의 이름을 지을 때도 신중해야 합니다. 뜻이 분명한 이름을 붙여야 나중에 그 정보가 무엇인지 알 수 있습니다. 뜻 모를 짧은 이름을 붙이면 시간이 지난 뒤 자기가 붙인 정보인데도 무슨 뜻인지 헷갈립니다. 저는 이 속성 이름을 지을 때 다른 사람이 봐도 뜻이 통하는지를 기준으로 삼습니다.
커스텀 속성을 지나치게 많이 붙이는 것도 경계할 일입니다. 한 요소에 여러 커스텀 속성이 덕지덕지 붙으면 문서가 지저분해지고 관리가 어려워집니다. 정말 필요한 정보만 골라 붙이고, 다른 방법으로 해결할 수 있는 것은 그쪽에 맡기는 절제가 필요합니다. 편하다고 무작정 붙이면 나중에 후회합니다.
제가 실무에서 지키는 기준은, 이 정보가 정말 요소에 딸려 있어야 하는가를 먼저 묻는 것입니다. 그 요소를 다룰 때 함께 필요한 짧은 상태나 식별 정보라면 커스텀 속성이 제격입니다. 반면 요소와 무관하거나 크거나 민감한 정보라면 다른 방법을 찾습니다. 이 기준으로 판단하면 남용을 피할 수 있었습니다.
이번 편에서는 커스텀 데이터 속성의 필요성, 정보를 꺼내 쓰는 법, 값이 글자라는 성질, 모양 처리와의 연동, 그리고 남용하지 않기까지 살펴봤습니다. 다음 편에서는 시리즈의 마지막으로, 만든 문서가 올바른지 검증하고 흔한 실수를 피하는 법을 다루겠습니다. 요소에 정보를 담는 법을 익혔으니, 이제 문서 전체의 건강을 점검하는 법을 배울 차례입니다.