Android에서 아이콘폰트 사용하기



지난 Android BootStrap 포스팅시 이미지리소스대신 아이콘폰트를 이용하는 것에 대해 간단하게 설명한적이있다. 해상도에 따른 여러벌의 이미지대신 아이콘 폰트를 사용해서 리소스관리와 효율적이다라는 유용성을 강조 했다. 아이콘폰트를 이용해 어떻게 안드로이드에서 사용하는지 자세히 알아보자.

아이콘폰트를 이용해서 이미지리소소 대신 사용하는 것은 이미 웹에서 흔한일이다. 정의된 문자를 통해 폰트를 생성하고 이를 웹에서 불러들여 사용한다. 안드로이드에도 이런 웹 기술을 그대로 구현가능하다. 

왜 사용해야 할까?

커스텀폰트를 만드는 것도 쉬운게 아닌데, 이렇게 어렵게 반드시 사용해야 되는 이유가 있을까라는 의문이 들 수 도 있다. 현재 안드로이드는 기기파편화로 인해 다양한 DPI들이 존재한다. 이렇게 봤을때 각각기기에 맞는 이미지를 최적화 하기 위해 각각의 DPI에 맞는 이미지를 가지게 될 것이다. 

예를 들어 아이콘 이미지가 5개가 있다면 hdpi, xhdpi, xxhdpi, xxxhdpi의 이미지를 가져야 한다. 5×4 = 20개의 이미지를 생성/관리 해야 된다. 앱의 용량 면에서도 많은 이미지들은 부담될 수 밖에 없다. 

아이콘 폰트로 대체 하게 된다면 여러벌의 이미지를 생성할 필요가 없으며, 이미지에 비해 용량을 획기적으로 줄일 수 있다. 그리고 색상, 그림자를 추가하거나 효과를 줄 수 있다. 예를들면 아이콘의 normal, pressed 이미지를 각각 가질 필요가 없다. 폰트의 색상을 변경하듯 쉽게 바꿀 수 있기 때문이다.

커스텀 아이콘 폰트 만드는 방법?

이미지 웹으로 인해 아이콘폰트를 무료로 제공하거나, 쉽게 만들 수 있는 온라인 서비스들이 많이 있다. 개인적으로 fontastic이라는 서비스를 추천한다. 무료로 1500여종의 폰트를 무료로 제공하며 쉽게 아이콘폰트제작 또는 나의 폰트 관리가 가능하다.

안드로이드 적용방법

위의 fontastic에서 원하는 폰트를 받으면 다양한 타입의 폰트와 스타일시트 파일을 볼 수 있다. 여기서 style.css에서 어떤 이미지가 어떤 유니코드로 대체 하는지 확을 하고 안드로이드에 사용 할 수 있도록 resource화 해야 한다.

 

  1. icon.ttf파일을 리소스 assets/ 위치에 복사한다. 

  1. css의 아이콘 고유의 유니코드를 대신 사용할 수 있도록 string resource로 대체한다. 

style.css

.icon-list:before {
  content: "a";
}

.icon-music:before {
  content: "b";
}

.icon-rss:before {
  content: "c";
}

안드로이드에서 사용하기 위해 아래와 같이 정의한다.

res/values/icons.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="icon-list">a</string>
    <string name="icon-music">b</string>
    <string name="icon-rss">c</string>
</resources>
  1. github에 공개된 fonticon으로 아이콘을 불러오는 작업을 해보자. 아래처럼 아이콘을 TextView에 불러오는 간단한 코드다. 

FontIconTypefaceHolder.init(getAssets(), "icons.ttf");

TextView txt = (TextView) findViewById(R.id.txt_hello);
txt.setCompoundDrawables(FontIconDrawable.inflate(getResources(), R.xml.ic_music), null, null, null);

int padding = getResources().getDimensionPixelSize(R.dimen.font_padding);
txt.setCompoundDrawablePadding(padding);
txt.setPadding(padding, 0, 0, 0);

실행 하면 아래와 같이 아이콘폰트를 가지고 TextView에 넣을 수 있다. 

이처럼 아이콘폰트를 통해 다양한 디바이스에 대한 아이콘이미지 리소스관리 뿐만 아니라 용량을 줄이는등 좋은 결과를 얻을 수 있을 것으로 판단된다. 위의 예제는 보여주기위한 방법일뿐 실제 적용시 좀 더 관리되고, 쉽게 사용할 수 있도록 만들어서 사용하면 좋을 것이다.  

코드는 아래의 링크를 통해 다운받으면 된다. 

cfile25.uf.2265AC47529883F00EB06E.zip




네이버 나눔바른고딕 안드로이드 폰트 설치

  • 폰 폰트 설치 파일은 삼성 갤럭시 시리즈 에서만 가능합니다. (최신기종인 S4, 노트3 에서는 폰트변경 방식이 바껴 지원이 안됩니다.)

네이버는 2013년 한글날을 맞이하여 PC뿐만 아니라 모바일에도 최적화가 된 “나눔바른고딕“이라는 서체를 OFL라이센스(수정 및 재배포가능)로 공개했습니다. 


“모바일에서 잘 보이는 네이버의 새로운 글꼴 ‘나눔바른고딕’

PC뿐만 아니라 모바일에도 최적화된 정통 고딕 글꼴입니다.

누구나 어디서든 잘 쓸 수 있도록 기본에 가장 충실하게 만들어 정돈된 느낌을 주며 작은 화면에서 가독성을 떨어뜨리는 돌출 형태나 곡선을 없애고,가장 깨끗한 형태를 나타내는 두께와 자간을 연구하고 적용하여 모바일에서 또렷하고 더욱 짜임새 있게 보입니다.

한글11,172자 | 한자4,888자 | 영문94자 | KS약물986자 | Regular,Bold 2종” – 네이버

네이버의 설명으로 모바일에도 최적화된 폰트라기에 안드로이드 설치파일로 만들어 보았습니다. 단 삼성 갤럭시 시리즈에서만 가능하며, 루팅은 필요하지 않습니다.

설치 방법:

아래 마켓 또는 APK파일을 다운받아 설치후 환경설정 → 디스플레이 → 서체설정에서 선택하시면 됩니다.

구글 플레이스토어에서 설치 (웹 링크)

구글 플레이스토어에서 설치 (모바일 링크)

cfile23.uf.2711023B524B56912FF21E.apk

실제로 적용 해보니 기본 폰트보다 가독성이 훨씬 좋아진것 같네요!

 

안드로이드 폰트설치 앱 만들기

폰트가 디자인의 큰 영역을 차지하는것은 사실이다. 같은 웹페이지더라도 폰트하나에 퀄리티가 확실하게 차이난다. 애플이 IOS에 산돌고딕체를 기본으로 탑제한 이유이기도하다. 안드로이드도 마찬가지다. 이번 넥서스7에는 네이버가 만든 나눔고딕을 기본으로 하고있다.


 


이 처럼 폰트에 따라 디자인이 죽고 산다. 안드로이드는 폰트에 대해 자유자체로 바꿀수 있는 점이 있으며, 삼성 갤럭시 시리즈에는 폰트 변경할 수 있는 설정페이지가 있다. 이외의 폰들이라면 루팅을 하거나 폰트를 바꿔주는 전문적인 앱을 설치 해야된다.


갤럭시 시리즈는 어떤식으로 폰트 설정을 하는 것일까라는 물음과 그 폰트를 설치하기위한 앱은 어떻게 개발하는가에 대한 궁금증이 들었다.


 


정답은 의외로 쉽다. 정해진 패키지명과 APK내부에 정해진 패턴의 폰트파일이 있으면 갤럭시는 자동으로 폰트를 감지하고 OS에서 폰트를 변경 해주는 시스템이다.


 


패키지명은 정해진 이름을 반드시 지켜야 된다. com.monotype.android.font.폰트명 으로 생성해야되며, 패키지명을 따르지 않으면 폰트 인식을 하지 못한다


assets 디렉토리에 정해진 패턴의 파일을 넣으면 된다. 폰트도 저작권이 있는 관계로 네이버에서 무료로 공개한 나눔고딕서체로 테스트를 해보겠다.


 



 


assets에 fonts와 xml 디렉토리는 각각 생성 후 fonts에는 폰트파일을 xml에는 NanumGothic.xml파일을 만든다. 단, 이름은 상관없다. 이제 xml디렉토리에 있는 xml파일을 잠시 살펴보자.


 



<?xml version=”1.0″ encoding=”utf-8″?>
<font displayname=”NanumGothic”>
<sans>
<file>
<filename>NanumGothic.ttf</filename>
<droidname>DroidSans.ttf</droidname>
</file>
<file>
<filename>NanumGothic.ttf</filename>
<droidname>DroidSans-Bold.ttf</droidname>
</file>
</sans>
</font>



 


font displayname은 폰트 선택시 사용할 이름을 적으면 된다. file에 보면 filenamedroidname이 있다.


안드로이드의 기본폰트는 일반 서체인 DroidSans.ttf와 Bold 서체인 DroidSans-Bold.ttf로 구성 되어 있는데, 여기서 filename은 기본폰트를 대체할 폰트파일이름을 적으면된다. fonts 디렉토리에 넣은 폰트파일을 적으면 되고, droidname은 대체당할 기본폰트파일명인 DroidSans.ttf로 설정한다.


 




 


설정-디스플레이-서체 설정에 보면 NanumGothic이 추가 된것을 확인 할 수있다. 한번더 말하는 거지만 삼성 갤럭시 시리즈에서만 작동한다.(다른 제조사도 이와같은 방법으로 OS를 구성했다면 될 수도있다.)





관련된 샘플코드들은 깃허브를 통해서 받아보면된다. 완성된 설치파일도 받아 보면된다.


 


Github – 샘플코드 APK 다운로드