by
May 07. 2023
똑똑하게 데이터 13탄 : 길이
다국어 입력 자릿수, 트위터 140자와 신호등
테이블 컬럼 자릿수를 늘렸는데
초과 입력했다고 오류가 떠요
아이쿠, 알림톡에 나아가는 안내 문구가 길어졌습니다. 주의 사항이 추가되었기 때문입니다.
(어쩌고 저쩌고)... 변경되었을 때에는 수정을 하여야 하며, 수정하지 아니하여 발생하는 문제의 책임은 회원에게 있습니다.
공백 포함해서 80자 정도가 추가되었습니다. 알림톡 전송 시 사용하는 테이블(kakaotalk) 중 내용(msg) 컬럼의 크기는 기존에 800자였습니다. 그럼 데이터 크기를 초과하니 오류가 발생하겠죠? 1,000자로 늘려봅니다.
ALTER TABLE kakaotalk MODIFY msg VARCHAR2( 1000 );
kakaotalk 테이블 수정하는데, msg라는 컬럼을 varchar2 형식으로 최대 1,000 byte 입력되게 해 줘.
출처 : 카카오 비즈니스 가이드(더 늘릴 수는 없습니다. 카카오톡 기본형 알림톡 제한이 1,000자이거든요.) 충분히 여유가 있게 1,000자 즉 200이나 컬럼 크기를 키웠는데, 전송 실패 오류가 뜹니다. 오류 메시지를 확인해 보니 너무 크다고 합니다. 왜 이런 일이 일어날까요? VARCHAR2 안의 숫자는 bytes 바이트 단위입니다.
다국어로 몇 자 입력, 시스템도 복잡한데
사용자는 더 어려워하지 않을까
한글은 인코딩 방식에 따라 1글자가 1바이트가 아니라, 2바이트 때로는 3바이트로 계산되기 때문입니다. 한글로 80자는 넉넉잡아 240 bytes를 잡는 것이 현명한 상황입니다. 한글의 경우, 라틴 알파벳과 달리 하나하나 자판을 누르면 한 개 글자로 조합되다 보니 ('ㅅ' + 'ㅏ' +'ㅇ' -> '상') 3바이트로 잡혀있습니다.
UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로 (...) 유니코드 한 문자를 나타내기 위해 1바이트에서 4바이트까지를 사용한다. (...) 인코딩은 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말한다.
이렇게 데이터를 저장하는 공간에 대해서, 영문과 숫자 외에 한글, 한자 같은 다국어 입력이 필요한지, 특수 기호가 포함되어 있는지를 고려해서 데이터 타입 수정이 필요합니다. 실제로 알림톡을 수신받는 고객의 국적이나 주로 사용하는 언어가 다양하다면, 다국어 인코딩을 고려해서 여유 있게 크기를 변경해 놓는 것이 나을 것입니다.
데이터 길이에 대한 명확한 정의는 사실 사용자 즉 서비스 내에서 정보를 입력하거나 조회를 요청하는 앞단 (Client-side, Frontend)에서 더 중요한 문제입니다. 위에서는 길게, 그 정보를 저장하고 처리하는 시스템 (Server-side, Backend)에서 필요한 작업을 설명했지만요. 사실 영미권이 아닌 다국어를 사용하는 사용자 입장에서는, 자신이 입력한 글자가 (시스템 기준으로) 몇 자인지 인지하는 것이 쉽지 않습니다.
트위터에서 140자를 알려주는
파란불, 노란불, 빨간불
'트위터' 하면 떠오르는 숫자가 있습니다. 바로 140자입니다. 그럼 전 세계 여러 언어로 사용이 가능한 트위터는 어떻게 140 자라는 길이 제한을 사용자에게 안내하고 있을까요? (트윗의 자릿수 제한이 올해 완화된 만큼 답글 기준으로 테스트해보았습니다.)
1. 파란불 : 몇 대 몇 숫자가 아니라 도넛 그래프로 보여준다.
입력한 언어의 종류와 상관없이 입력한 글자수가 늘어날 때마다, 전체 140자에 가까워질수록 우측 하단의 도넛그래프가 시계방향으로 꽉 채워집니다. 그리고 도넛 그래프의 색상은 우측 상단의 '답글' 등록하는 버튼과 같은 색상이라, 답글 달 수 있는 자릿수라고 인지가 가능합니다.
2. 노란불 : 10, 9, 8, 7.... 노란색 원이 생기며 카운트다운을 시작한다.
1번의 도넛 그래프로 눈에 확 들어오기는 하지만, 일반적인 총 자릿수 중 입력한 자릿수 '100 / 140' 이렇게 명확한 정보는 없는 상황이었습니다. 그런데 정확히 130자가 되는 순간, 숫자 10과 함께 노란색 원이 뜹니다. 그리고 한 자 한 자 입력할 때마다 10, 9, 8 거꾸로 카운트다운이 됩니다. 사실 사용자가 결국 알고 싶은 것은 '그래서 몇 자 남은 거지?'입니다. 그리고 그 정보는 임계치에 다다랐을 때 제공해도 충분합니다.
3. 빨간불 : 다시 생각해 봐, 몇 자만 줄이면 제한 풀어줄게.
친절하게 1번으로 얼마나 입력했는지, 2번으로 카운트다운도 해주었는데 괘씸하게도(!) 140자를 초과했습니다. 이 경우는 더 이상 도넛도 원 모양도 없습니다. 안 된다는 것입니다. 하지만 입력 가능한 140자를 초과했는데 마이너스 음수입니다. 보통 경험하는 '빨간 글자로 OO자를 초과했습니다.' 이렇게 선언하는 것이 아니라, 현재 상태에서 몇 자를 줄여야 입력이 가능한지 바로 보여주는 것입니다. 물론 우측 상단 '답글' 버튼은 비활성화되어서 클릭이 불가능합니다.
그럼 딱 140자를 맞췄을 때는 어떻게 표시해 줄까요? 트위터 계정이 있으신 분들은 직접 써보시면서 경험해 보셔도 재밌을 것 같습니다.
트위터의 신호등처럼
사용자가 잘 사용할 수 있게
지면 관계상 텍스트 입력하는 자릿수 제한에 대해서만, 어떻게 백엔드(서버) 단에서 프론트엔드(클라이언트) 단에서 처리를 해야 하는지 사례를 들었습니다. 하지만, 앞선 똑똑하게 데이터 시리즈에서 보았듯이, 전화번호나 이메일 주소 같이 특정 숫자나 패턴으로만 입력을 받아야 하는 등 경우의 수는 다양합니다.
이에 대해서 이미 디자인 시스템이나 많은 블로그에서 제안하듯이, 입력 중인 곳(textField) 하단에 총자릿수를 표현하거나 잘못된 입력에 대해서 경고 문구를 띄우는 것만으로도 서비스를 운영하는 데 문제는 없습니다. 하지만 좀 더 생각해 보면, 해당 제한이 사용자가 매끄럽게 서비스를 사용하는 데 걸림돌이 되지 않도록 고민해 보는 것은 어떨까요?
파란불 : Go! 잘 쓰고 있어, 전진!
노란불 : Attention! 금방이야, 속도를 줄여요 10, 9, 8...
빨간불 : Stop! 후진해, 덜어내면 다시 할 수 있어
사진: Unsplash의 ilgmyzin