퍼블리싱] input type password 입력 값 안보일 때 해결법 (feat. 사파리 브라우저 / 나눔스퀘어 웹 폰트)

input[type=password] 입력 값이 안 보이는 현상 발생

GS인증을 받으려고 사이트를 수정하던 중, 비밀번호 입력 창에 비밀번호 입력 시 사파리 브라우저에서만 input[type=password]에 입력한 글자가 안 보이는 현상이 발생했다. 

 

팀장님이 CSS문제가 아닌지 확인해보라고 하셨지만, 설마하는 마음으로 검색해 보던 중 특정 웹 폰트를 사용할 때 인코딩 지원이 되지 않아서 이와 같은 문제가 발생할 수 있다는 사실을 알게 됐다!!

지금까지 웹 폰트를 많이 사용해왔지만 이런 경험은 처음이었고, 미처 생각조차 못했던 부분이었다.
팀장님은 안되는 걸 왜 썼냐고 하셨지만 아마 html 문서를 만들었던 작업자도 이런 부분까지는 예상치 못하고 사용했을 것이다.

어쨌든 검색 결과에 따르면 그 특정 웹 폰트라는 것이 대부분 '나눔 스퀘어' 웹 폰트였는데, 이런 특수 문자(●)를 지원하지 않아서 깨진다고 했다.
그 밖에도'나눔 스퀘어' 웹 폰트는 한자를 지원하지 않는 문제가 있으니, 공공기관 등 한자가 많이 들어가는 웹 사이트 제작 시에는 가급적 다른 폰트를 사용하는 것이 좋을 것 같다. 

input[type=password] 입력 값 안보이는 현상 해결법

문제가 발생한 사이트에도 '나눔 스퀘어' 웹 폰트가 적용되어 있었는데 input[type=password] 영역에 다른 폰트를 적용하여 문제를 해결할 수 있었다.

css에서 input[type=password]에만 다른 폰트를 적용해 준다.
나는 맑은 고딕을 사용했지만 다른 폰트 중 지원되는 어떤 폰트를 사용해도 무방하다.
그리고 placeholder를 사용 중이라면 그 부분에는 기존에 적용돼 있던 폰트를 다시 한번 적용해준다.

input[type=password]{
	font-family:'맑은 고딕', 'malgun gothic', '돋움', Dotum, sans-serif; 
}
input[type=password]::placeholder {
	font-family: '기존 적용 폰트'; 
}

 

input[type=password] 에 나눔스퀘어 폰트 제거 후 비밀번호 input 창에서 변화를 확인할 수 있다