서두에서는 조금 헛소리를 해야지
블로그가 세개가 있어요 이 블로그랑 자료백업용 블로그, 스킨테스트용 블로그
그런데 이 블로그 파비콘을 바꾸려니까 뜬금없이
해당 닉네임은 사용이 불가능합니다 이러면서 안되는거예요?
문의했더니 닉네임이 셋다 똑같아서 그렇대 다 다르게 해야하는걸로 바뀌었다고 하더라고
아니 .. 그럼 어떡하라는거야 .... 어떤 닉네임을 쳐도 안된다는데 어떡하라고 ... ...
아니. 사람이 살면서 이름이 좀 겹칠 수도 있는 거 아니야? 더군다나 싸이버-세상에서?
그래서 이 블로그 닉이 갑자기 바뀔지도 몰라요 와르르 이런건 안될거같고 와르르 개발자 이런거?
아니면 지금 닉이랑 합쳐서 김시루와르르 (하... 왜 이런 쓸데없는.. 시련을?
사실 백업용 블로그에 일본어를 좀 쓰게 되었는데 이번에도 글자 깨짐이 있더라고요
나에게 간단한 번역 일을 넣어볼사람 일본어 한국어 양방 된다 (이렇게 갑자기!)
나눔스퀘어 서체의 글자 사라짐 현상에 대해선 전에 쓴 바 있습니다
[폰트/ CSS] 글자 사라짐(깨짐?) 없는 나눔스퀘어 웹폰트 + woff 폰트 파일 CSS 적용
나눔스퀘어의 장점! 용량이 가볍다. 용량이 가벼운 이유는 공식 사이트에서도 말하고 있지만 "꼭 필요한 2,350자만을 추려 용량을 가볍게 줄였"기 때문인데요 이게 용량에선 가벼워져서 좋고, 사
drybone-developer.tistory.com
이걸 해결하고 나면 이제 시스템 기본 서체로 대체되는 한자와 평소에 쓰는 한국어 서체를
어떻게 어울리게 할 것인가? 등의 문제가 새롭게 생기죠.
그리고 저처럼 일본어를 쓸 경우에는,
한국어 서체가 포함하고 있는 가나 문자 글리프와 한자를 어떻게 어울리게 할 것인가? 하는 문제도 있습니다.
이 글에서는 두 가지 문제 각각의 해결법을 기록합니다.
1. 서체 적용 우선순위를 이용하기
1-1. 다른 언어의 서체를 1순위 폰트로 적용
흔하게 알려진 방법.
영어만 따로 설정하고싶으신 분들은 이런 방법을 많이 쓰시는것같더라고요.
|
1
2
3
|
body {
font-family: 'Koruri', normal, 'NanumSquare', normal;
}
|
cs |
Koruri(쇠유리새)는 일본어 가나문자와 한자를 포함한 폰트, NanumSquare는 한국어 폰트 나눔스퀘어입니다.
body의 서체 설정을 이렇게 하면 가장 앞에 있는 폰트가 기본 폰트로 지정됩니다.
그래서 Koruri 폰트가 모든 글자를 먼저 살펴보게 되죠. 그리고 자기한테 없는 글자는 다음 선수에게 넘깁니다.
보통 외국어만을 겨냥하고 만들어진 폰트(영어나 일본어 등)에서는 한글 글리프가 없기때문에
그건 전부 다음 선수인 NanumSquare에게 가게 되는거죠.
그래서 일본어를 표현하는 쇠유리새는 한국어 글자를 깨먹지 않으면서 일본어 글자를 바꿔줍니다.
그런데 이러면 문제가 있습니다. 외국어 서체에 포함된 기호 등도 전부 그 언어를 기준으로 맞춰집니다.
일본어의 경우 흔히 쓰는 「」, 『』등의 괄호 문자가 그렇죠. (참고로 국어에선 이친구들을 낫표라고 부릅니다.)
홑낫표, 겹낫표는 국어에서도 심심찮게 쓰이는 친구들인데 ... 어색하게 보일 수도 있습니다.
여담이지만, 영어라면 몰라도 일본어에서는 낫표 한쪽씩이 전각문자로 취급되므로 더 어색해보이기도 하죠.
이 문제를 해결하고자 한다면 1-2, 가장 완벽한 해결법을 원한다면 2로 갑시다.
1-2. 다른 언어의 서체를 2순위 폰트로 적용
흔하게 알려진 방법 2. 다른 언어가 영어이신 분들은 이렇게 하면 안 될 확률이 높습니다.
한국어 서체는 대부분 영어 알파벳까지를 포함하고 있으니까요 ... 일본어라면 이래도 되긴 하죠.
|
1
2
3
|
body {
font-family: 'NanumSquare', normal,'Koruri', normal;
}
|
cs |
NanumSquare는 한국어 폰트 나눔스퀘어, Koruri(쇠유리새)는 일본어 가나문자와 한자를 포함한 폰트입니다.
이렇게 하면 나눔스퀘어가 갖고있는 글리프가 있을 때 먼저 나눔스퀘어 폰트가 적용되고,
나눔스퀘어에 없는 글리프(예: 한자 등)의 문자는 쇠유리새로 해결합니다.
그런데 이렇게 하면 문제가 있습니다 (또!)
나눔스퀘어에는 일본어의 가나 문자도 포함되어 있으므로,
쇠유리새로 변경된 한자 서체와 나눔스퀘어의 가나 문자가 어울리지 않는다는 점!!!
이러면 1-1로 하면 되는거 아냐? 하시겠지만...
낫표 등의 기호까지 바꾸고자 하시는 분들은 이것도 영 시원찮을 수 있습니다. 제가 그랬거든요.
이래도 저래도 문제밖에 발생하지 않는군요!
하지만 그래서 바로 이 글의 목적! 2번 해결법이 있습니다.
2. 유니코드 문자 범위를 표현 범위로 입력하기
진짜 소개하려고 한거! 솔직히 위에걸로 끝날거였으면 글로 쓰지도 않았다!
제 문제는 한국어 서체를 기본으로 하고 일본어 서체를 2순위로 설정했을때,
해당 서체가 갖고있는 히라가나의 글리프나 낫표 등의 기호가
일본어 서체의 한자라든가와 어울리지 않는 게 문제였습니다.
그런데 또 1순위로 설정하면 한국어에서 “특수문자 따옴표”가 일본어식으로 나와서 한글이랑 어울리질 않고...
아주 난장판이었어요 양자택일 극단적이야 넌이 뭔지 절절하게 깨닫던 중 ...
이걸 유니코드 범위로 세세하게 설정할 수 있다는 말을 듣고 후다닥 실천해보게 됐습니다.
2-1. 유니코드 범위 조사하기
일단 어느 유니코드 범위를 어느 폰트에 줄 지 생각해야 합니다.
대표적으로 몇 개 뽑아보자면...
한국어
U+AC00-D7A3
한중일
통합 한자
공통
U+4E00-9FEA
확장 A
U+3400-4DB5
호환용
U+F900-FA6D
일본어
히라가나
U+3041-3096, U+309D, U+309E
가타카나
U+30A1-30FA, U+30FC
라틴어 (알파벳)
소문자
U+0061-007A
대문자
U+0041-005A
숫자
0-9
U+0030-0039
정도고, 여기 없는 유니코드는 이런저런 사이트에서 조사해보시면 될것같습니다.
저는 특수기호 조사를 위해서 아래 사이트에서 검색해봤어요.
여기 범위도 잘 돼있고 문자 입력하면 유니코드 몇번인지 알려주는 기능도 있어서 좋아요
유니 코드
유니 코드 문자 검색 웹 서비스. 즐겨 찾는 문자를 찾아서 복사하십시오 : 😎 에모지, ️ 화살표, ✪ 별, 💲 통화, 🈂️ 글쓰기 시스템 및 기타 🚩
unicode-table.com
제가 일본어 설정에 쓴 범위는 아래에 나오니 그걸 보고 가져가셔도 되고요...
2-2. CSS에 입력
이제 이 범위를 CSS의 @font-face 부분에 설정해주면 됩니다.
일본어 유니코드 범위를 조사했다면 일본어 폰트에 넣어주면 되겠죠...
1
2
3
4
5
6
7
@font-face {
font-family: 'KleeOne';
...
unicode-range: U+3001, U+3002, U+300C-300F, U+3041-3096,
U+309D, U+309E, U+30A1-30FA, U+30FC,
U+4E00-9FEA, U+3400-4DB5, U+FF5E, U+F900-FA6D;
}
cs
이렇게 @font-face 부분에 unicode-range를 입력해주면 됩니다. (요거는 복붙가능해요~)
제가 여기서 설정한 범위는 、。등의 점, 낫표(쌍), 겹낫표(쌍), 일본어 가나 문자, 한중일 통합 한자입니다.
단 저는 가로쓰기를 전제로 했기때문에 세로쓰기의 범위나 전각 문자는 넣지 않았어요.
세로쓰기나 전각 문자는 위 사이트에서 수직 양식, 반 폭 및 전체 폭 양식 으로 찾아보시면 나옵니다.
2-3. 순위 설정하기
|
1
2
3
|
body {
font-family: 'KleeOne', normal, 'RIDIBatang', normal;
}
|
cs |
2-2까지 해주셨으면 이제 KleeOne이라는 폰트는 제가 설정한 유니코드 범위만 표현합니다.
나머지는 없는 글자 취급을 하고, 다음 선수에게 넘겨주게 되죠.
그러니까 이렇게 하시면, 범위를 설정한 폰트를 1순위로 주시는게 좋습니다.
설정한걸 우선해서 1순위 서체가 설정하고, 나머지는 그 뒤 서체가 해주도록요.
결과물. 비교해보시면 따옴표가 제가 원하는대로 한국어에 맞춰져있습니다.
말줄임표를 비롯한 문장부호 대부분은 한국어에서도 쓰는 문장부호라 한국어쪽으로 줬습니다 (ㅋㅋ)
대신 낫표는 잘 안 쓰는 것 같아서 ... 일본어쪽으로...
어쨌든 이렇게 원하는대로 유니코드를 검색해서 범위에 계속 추가해주시면 됩니다~
이걸로 한 건 해결!
댓글