일본어 웹서비스를 위한 폰트와 문장 부호 설명서


웹 서비스의 다국어 지원 프로젝트에서 주요 키워드로 "i18n"과 "Font"가 있을 텐데, 그중에서 폰트(font) 선택에 대한 글입니다.

우리는 한국어/중국어/일본어의 폰트 용량은 크기 때문에 웹폰트보다는 시스템 폰트를 사용하는 것이 유리하다는 것은 알고 있습니다.
하지만 OS별 일본어 시스템 폰트를 모르고 있기 때문에 정리했으며, 일본어 번역 작업 시 알면 좋은 내용도 포함했습니다.

먼저 번역 작업 시 알면 좋은 내용으로 서론을 시작합니다.


일본어는 띄어쓰기를 하지 않는다.

일본어는 띄어쓰기 없지만 규칙이 있어 불편하지 않다고 합니다.
그 이유는 한자를 섞어 쓰는 한자혼용표기를 하는데, 문장의 주어/목적어/술어 등은 한자고 주격조사/목적격 조사/동사 어미/형용사 어미는 히라가나로 사용하기 때문에 띄어쓰기와 같은 효과가 있다고 합니다.
(출처: 일본어는 왜 띄어쓰기를 하지 않는가?)



그러나 편의성을 확보하기 위해 띄어쓰기를 적용하는 경우도 있다고 합니다.
자세한 정보는 일본 국회 도서관의 띄어쓰기 기준를 참고하세요.

참고로 한국도 띄어쓰기를 사용하지 않았으나 배재학당 주시경 선생과 호머 헐버트(Homer Bezaleel Hulbert)가 함께 한글 표기에 띄어쓰기와 점찍기를 도입했다고 알려졌습니다.


전각과 반각을 이해하자.

번역팀과 소통하면서 힘들었던 부분인데, 일본어는 전각과 반각을 혼용 표기합니다.
전각(全角)과 반각(半角)은 인쇄 용어이며 세로 쓰기 문화가 있던 곳에서 개념이 존재한다고 합니다.

간단하게 설명하자면,
전각은 정사각형 판에 문자가 가운데 있는 것이고, 반각은 정사각형의 절반인 판에 문자가 있는 것입니다.

개발자 용어로 비교하자면,
전각은 고정폭 폰트이며 반각은 가변폭 폰트입니다.

그러나 이것은 비교일 뿐 고정폭 폰트는 반각에 속하는데, 흔히 특수 문자라고 부르는 것을 전각, 그 외는 반각이라고 생각하면 됩니다.
더 자세한 설명은 위키백과의 전각과 반각를 참고하세요.


문장 부호로 따옴표를 사용하지 않는다.

큰따옴표("")를 겹낫표(『 』)로 표기하며, 작은따옴표('')는 낫표(「 」)를 사용합니다.


대표적인 부호 비교표

부호 이름한국어일본어부호 이름
큰따옴표" "『 』겹낫표
작은따옴표' '「 」홑낫표
마침표.。전각 마침표
쉼표,、전각 쉼표
물음표?？전각 물음표
느낌표!！전각 느낌표

더 자세한 문장 부호 정보


여기까지 조금은 길었던 서론입니다.
이제 본론입니다.

OS 시스템 폰트

OS 설치 후 개인이 설정을 변경하지 않았다면 기본으로 설정되는 폰트입니다.
각 OS의 시스템 폰트는 라이선스가 있기 때문에 다른 OS에서 사용 시 구매 후 사용해야 합니다.

서론이 길었으니 결론부터 말하겠습니다. 고민하지 마시고 지원하고자 하는 디바이스에 맞춰 아래 font-family를 사용하세요.

/* PC와 Mobile등 모든 디바이스를 지원한다면  */
body {
  font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* PC만 지원한다면  */
body {
  font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* Mobile만 지원한다면  */
body {
  font-family: sans-serif;
}

위 결론에 대해서 간략하게 설명하자면, 가장 많은 디바이스에 기본으로 있을만한 폰트를 우선으로 지정했으며 현재 일본어 사이트에서 사용하고 있는 폰트입니다.
  • 우선순위가 높은 폰트를 먼저 적습니다.
  • 일본어 폰트와 다른 로마자 폰트를 쓰고 싶다면, 로마자 폰트를 먼저 적습니다.
  • 일본어 폰트 이름은 영어 이름 표기가 가능하지만, 함께 쓰고 싶다면 일본어 이름을 먼저 적습니다.
  • 일부 오래된 브라우저는 영어로 된 글꼴 이름을 인식할 수 없으며 일부 언어는 일본어로 된 이름을 인식하지 못하기 때문에 일본어와 영어로 모두 쓰는 것이 안전합니다.
  • Verdana 폰트는 Windows, OS X, iOS 제품에서 사용되며 로마자(영/숫자)를 위해 적습니다. Arial, Helvetica도 자주 사용됩니다.
  • Roboto 폰트는 Google이 공개한 폰트로 Android 및 Chrome OS에서 사용합니다.
  • Droid Sans 폰트는 Android 사용자를 위해 적습니다.
  • 游ゴシック, YuGothic 같은 폰트로 Windows와 OS X에서 사용합니다.
  • メイリオ, Meiryo 같은 폰트로 Windows에서 사용합니다.
  • ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN 같은 폰트로 OS X, iOS에서 사용합니다.
  • ＭＳ Ｐゴシック, MS PGothic 같은 폰트로 MS 제품에서 사용합니다.
  • sans-serif 폰트를 반드시 마지막에 넣어 앞에 명시된 폰트가 없는 환경에도 대응한다.
  • "Mobile만 지원한다면"에서 지정된 폰트가 없는 것은 모든 모바일 환경을 대응하기 어렵기에 기본만 지정합니다.


실제 일본어 사이트 정보

📝 Yahoo japan


/* 메인 //www.yahoo.co.jp */
body{font-family: MS PGothic,Arial,Hiragino Kaku Gothic ProN,Osaka,sans-serif;}

/* 쇼핑 //shopping.yahoo.co.jp */
body{font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, emoji;}

/* 여행 //travel.yahoo.co.jp */
body{font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic";}

/* 뉴스 //headlines.yahoo.co.jp */
body{font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;}

📝 Amazon japan


/* 메인 //amazon.co.jp */
body{font-family: 'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;}

📝 Gmail japan


/* 메인 //gmail.com */
body{font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;}

📝 Nicovideo


/* 메인 //www.nicovideo.jp */
body{"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

📝 Rakuten


/* 메인 //www.rakuten.co.jp */
body{font-family: Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;}

/* 카드 //www.rakuten-card.co.jp */
body{font-family: Roboto,Arial,'Hiragino Sans','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Osaka,Meiryo,'メイリオ','MS PGothic','MS Pゴシック','Hiragino Sans GB','Helvetica Neue',HelveticaNeue,Helvetica,'Arial Unicode MS',sans-serif;}


웹 폰트를 사용하고 싶다면

"Noto Sans CJK"는 좋은 선택이며 Google과 Adobe가 공동 개발 후 무료로 공개한 폰트입니다.
(Adobe는 Source Han 이라는 이름으로 배포하고 있습니다.)
아래와 같이 사용가능하지만 역시나 웹 폰트는 가볍지 않습니다.

@import url (https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
  font-family: 'Noto Sans Japanese', sans-serif;
}

그런데 Google은 연구를 많이합니다. 가장 많이 사용하는 단어만 모아서 웹 폰트를 제작하여 공개했습니다.



완전한 단계라고 할 수 없지만 아름다운 웹 폰트 사용이 가능합니다.
자세한 정보는 Google Fonts + 日本語早期アクセス 사이트에서 확인해보세요.
그리고 日本語Webフォントの使い方とリスク이 문서도 도움됩니다.

일본어 폰트 다운로드

일본어 폰트 다운로드하는 곳입니다.
Windows10 사용자라면 "windows 설정 > 앱 > 선택적 기능 관리 > 기능 추가 > 일본어 추가 글꼴"를 통해 Meiryo(メイリオ<) 폰트를 포함한 다수의 기본 폰트을 간편하게 설치할 수 있습니다.



마무리하겠습니다.

OS의 시스템 기본 폰트는 버전이 바뀌면 변경되기도 합니다.
기본 폰트는 변경되지만 구 버전에서 사용되었던 기본 폰트는 삭제되지 않고 지원 폰트로 존재하기 때문에 그 기준으로 폰트를 지정해야 합니다.
참고로 windows10에서 Yu Gothic UI 폰트로 시스템 폰트가 변경되었지만 굳이 font-family에 적지 않아도 됩니다.


함께보기