게시판 비밀글 개발중에

비밀번호 입력방식

처음에 글에 비밀번호를 설정할 수 있게 하여, 비밀번호를 설정할 시, 글쓴이, 운영자, 비밀번호를 아는 사용자만 볼 수 있게 하는 구조를 만들었었다.

그리고, 이를 위해 비밀글로 접근시 글쓴이, 운영자가 아닐 경우 비밀번호 입력 화면으로 이동하게 만들었는데, 보통 유명 사이트들에서 인증코드 입력 화면을 참고하여 6자리 코드를 영문 및 숫자로만 입력할 수 있게 만들었다.

이때, 각 6자리에 한글이나 특수문자가 입력되지 않게 해야했는데, 문제는 onchange나 oninput 이벤트에서 한글이나 특수문자를 걸러도, 화면에선 잠깐 나왔다가 사라지는 형식으로 사용자에게 있어서 불편함을 일으킬 수 있다고 판단했다.

그래서, 각 6자리를 div로 글자만 출력하게 하였고, 따로 input을 보이지 않게 만들고, 동적으로 매번 포커스가 가게 만들었다.

그리고, 데스크톱 환경에선 훌륭하게 성공하였으나, 문제는 모바일이었다. 먼저, 이 방식에선 input이 readonly이고, 보이지 않아서인지 포커스를 주어도 모바일에선 가상키보드가 나타나지 않았다.

그리고, 2번째 문제는 oninput 이벤트에서 처음엔 keycode 속성을 이용해 아스키코드 값으로 분류하였는데, input에서 readonly를 없애고 모바일에서 입력해보아도 숫자와 영문자 모두 229 값이 나왔다.

백스페이스나 엔터 값등은 특정 조건 하에서 제대로 나왔지만, 숫자와 영문자가 특히 문제였다.

그래서, keycode가 더 이상 추천되는 방식이 아님을 알고, key 속성으로 분류하려고 시도하였으나, 역시 숫자나 영문자가 undefined로 나왔다.

이 문제는 모바일 imei 쪽에 따른 것이기에 key 입력 방식으로는 불가능하다고 판단하고, 방식을 바꾸기로 했다.

다음 생각한 것은 oninput에서 onchange 이벤트를 통해 들어오는 문자열 마지막 문자를 기준으로 판단하기는 것은 어떤가 생각해봤다.

2번째 문제는 해결하더라도 결국 input이 readonly로 숨겨놓으면, 가상키보드가 뜨지 않아서 골치 아픈 것은 마찬가지였다.

이때, 생각해서 해결한 것이 width와 height를 0px로 하고, 커서를 없애면 결국 안보이는 건 똑같지 않은가였고, 이덕분에 해결하였다.

결론

생각해보면 비밀글 방식 자체보단 공개범위를 통한 것이 더 많이 쓰이고, 좋다는 생각이 들었다.

실제로 페이스북이나 인스타 같은 유명 사이트에선 글을 공개범위로 제어하는 모습을 볼 수 있었다.

그래도 비밀번호 방식 자체의 유용성이 아예 없는 것은 아니기에 혼용해서 쓰는 것으로 결론을 내렸다.

-수정 width와 height를 0px로 하면 모바일에서 input값이 역순으로 나오는 것이 확인되었다.

심지어 1234a와 같이 입력하면 출력이 1234a4321 같이 역순뿐 아니라 이상하게 나왔다.

이때, direction, unicode-bidi 등 여러 속성을 건들여봐도 계속 이상하게 출력되었기에 width와 height를 1px로 하고 color만 transparent로 투명하게 만들어봤더니 이제 정상적으로 출력이 되었다.