iOS에서 아이콘 폰트 로드하기

얼마전 Alarmy를 작업하면서 용량과 깨지지 않는 디자인을 위해 아이콘 폰트를 만들어 사용하게 되었다.
하지만 암호화되지 않은 OTF파일을 제한하는지 일반적인 방법으로 로드가 되지 않아서 포기한 적이 있었다.
(일반적인 방법이란 Info.plist의 UIAppFonts키에 등록하는 방법을 말한다)

하지만, 여러 장점을 가지고 있는 아이콘 폰트를 포기할 순 없었고, 그래서 Apple Reference를 찾아보았다.
그러던 도중 CoreText.framework에서 CTFontManagerRegisterGraphicsFont라는 함수를 제공함을 알게되었다.

외부 폰트를 사용하는 방법은 간단했다.

1. 먼저 폰트를 리소스에 등록한다.


2. CoreText.framework를 추가한다.


3. AppDelegate에 헤더 파일을 로드시킨다.

#import <CoreText/CoreText.h>


4. 폰트를 로드하는 코드를 작성한다.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        CFErrorRef error;
        NSURL *url = [[NSBundle mainBundle] URLForResource:@"iconFont" withExtension:@"otf"];
        CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url);
        CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider);

        if(!CTFontManagerRegisterGraphicsFont(newFont, &error))
        {
            CFStringRef errorDescription = CFErrorCopyDescription(error);
            NSLog(@"Failed to load font: %@", errorDescription);
            CFRelease(errorDescription);
        }
        CGFontRelease(newFont);
        CGDataProviderRelease(fontDataProvider);
    });
}



Reference:

  1. Core Text Font Manager Reference

Alarmy 2.0

-

Alarmy 2.0  |  2013.12.18 - AM05:13

-

오늘 새벽 드디어 DelightRoom에 들어와서
새롭게 디자인하고 개발했던 서비스인
Alarmy를 런칭했다.

8월쯤부터 서비스의 방향성을 고민하고,
트렌드에 맞추어 새롭게 디자인하고,
만들었다가 완전히 갈아엎기도 하면서,
정말 많은 고민을 거쳐서 만든 서비스이다.

-

처음 앱이름은 Sleep If U Can으로
나는 iOS 개발쪽으로 처음 들어왔다.
사실 그래서 디자인을 이렇게 주분야로써
작업하게 될 줄은 생각도 못했었다.

직원이 나를 포함해서 총 2명이었기에
홈페이지부터 명함 등 디자인과 관련된 모든 부분을
내가 직접 담당할 수 밖에 없었다.

2013/08/25 - [디자인작품] - DelightRoom Logo
2013/09/10 - [디자인작품] - DelightRoom Website
2013/09/12 - [디자인작품] - Sleep If U Can Website
2013/10/04 - [디자인작품] - DelightRoom Business Card

하지만 일이라는게
내가 하고 싶은 부분만 할 수는 없기에
프로 의식을 가지고 집중해서 작업했다.

-

사실 디자인을 하다보면
개발자가 할 수 있는 부분과 못하는 부분을
고려하지 않게되고, 미적인 요소를 쫒다보니
사용성을 깨는 경우도 발생한다.

그래서 그런지 내가 디자인한 것을
스스로 만드는 과정에서도 상당히 힘들었었고,
스스로 너무 부끄러워 몇번이고
새롭게 디자인을 한 적도 있었다.

-

실제로 개발을 했다가 새롭게 갈아엎은 적도 있었다.
그래서 10월 중순 쯤이었는데,

2013/09/16 - [디자인작품] - Sleep If U Can Flat Design

처음에는 이 디자인으로 아이폰을 개발했었었다.
그런데 사실 사용성은 좋을지 모르겠지만
디자인이 좋은 다양한 iOS 앱들과의 경쟁에서
밀릴 것 같다는 생각이 들었다.
(물론 내 맘에 안든 것도 있지만)

지금까지 만들었던 코드를 버리고
새롭게 디자인부터 시작했었다.
지금까지 없던 방식으로 앱을 디자인하기란 정말 어려웠고,

하나의 방식에 대해서 사용자가 생각할 수 있는
경우의 수를 모두 대입해보면서
고민하며 방식을 추가해나갔다.

-

그렇게 고민을 했음에도 불구하고
불편하다고 느끼는 사용자들이 있었다.
완전히 다른 부분에서 접근하는 경우도 있었고,
같은 부분에 대해서도 이렇게 생각할 수 있구나 하는 등 말이다.

그렇지만 이런 경험은 정말
많은 것을 배울 수 있도록 해주었다.

-

시간이 지나 벌써 런칭을 하고나니
힘든 시기가 지나면 모두 추억이 된다는 말이 깊이 와닫는다.

사실 앞으로도 해야할 일도 도전해야할 것도 많지만
Loose해지지 않고 지금의 기분으로 꾸준히 노력하고 싶다.

Alarmy Advertise

-

Alarmy Advertise  |  2013.12.11 - AM00:33

-

Alarmy 광고할 때 쓰일 이미지로
하나가 아니라 몇가지 종류로 디자인했다.

첫번째 디자인은 티저광고처럼
사람들이 궁금해서 들어가 볼 수 있으면 좋겠다는 생각에
세련된 보석과 같은 느낌의 푸른색으로 작업하였다.

디자인은 깔끔하게 아이콘 하나와
FORCES YOU OUT OF BED라는 텍스트만으로 표현하여
"얼마나 자신만만하길래?"라고 생각할 수도 있도록
도발적인 메시지를 담았다.

-

두번째 디자인은 전광판같은 느낌을 표현하기위해,
배경에 가로줄을 넣어 전자적인 느낌과
아이콘의 주위에 빛이 비추는 느낌을 주었다.

그리고 크리스마스 할인이라는 것을 강조하기 위해
붉은색/초록색/흰색으로 표현했다.

그리고 X-MAS SALE이라는 텍스트의 배경에
줄무늬를 넣어 텍스트가 좀 더 강조될 수 있도록 했고,
50%의 50 부분을 크게하여
반 값이라는 느낌을 크게 받을 수 있도록 하였다.

-

세번째 디자인은 Alarmy가 소비자에게 선물로
준다는 느낌으로 배경과 패턴을 맞춤으로써 포장지와 같은 느낌과
텍이 붙어있는 형태로 디자인하였다.

텍에는 크리스마스 기념 50%할인을 한다는 내용이 적혀있고,
밑의 텍스트를 통해 Alarmy의 강점을 설명하고 있다.

-

마지막 네번째 디자인은 일반적인 광고 느낌으로
크리스마스 밤의 느낌을 살리기 위해
어두운 바탕에 밝은 빛으로 느낌을 주었고,
점선 테두리를 통해 가운데 글씨를 강조하도록 하였다.

CHRISTMAS와 BIG SALES의 사이에 선물 아이콘을 주어
할인 이벤트가 구매하는 사람들을 위해
DelightRoom이 선물을 주는 것과 같은 느낌을 받을 수 있도록 했다.

Alarmy Icon

-

Alarmy Icon  |  2013.10.02 - PM11:17

-

시기적으로는 한 번 지났던 디자인이지만
명확하게 알람이라는 Identify를 표현할 수 있도록
작업했었던 아이콘이다.

그런데 Flat 느낌이 전달되지 않는다는 점과
눈에 확 띄지 않다는 점이 있었었다.

-

2013.10.02 - PM11:17

-

처음의 아이콘을 디자인하면서 같이 만들었던 아이콘으로
귀여움을 강조하여 크기를 잡았던 아이콘이다.

Simple을 중심으로 시계를 강조했고,
시계앱이 아니라 알람앱이라는 것을 강조하기 위해 띠를 달았다.

하지만 실제 우리앱과는 디자인이 너무 동떨어졌기에
포기하고 다시 디자인했었다.

-

2013.12.03 - PM04:52

-

새로 디자인한 아이콘은 Flat보다는
앱의 Identify에 좀 더 초점을 두고 디자인했다.

큰 시계를 가운데두어 알람이라는 느낌을 주고,
카메라를 시계 옆에 둠으로써
사진을 찍는 알람이라는 느낌을 강조했다.

동시에 테두리에 그림자와 빛을 표현함으로써
둥글게 튀어나온 느낌을 주어 실제 폰에 넣었을 때
눌러보고 싶게 끔 디자인했다.

그런데 iOS7으로 올라오면서 앱들이 전체적으로
Flat한 아이콘을 가게되면서 어울리지 않는다는 점이 있었다.

-

2013.12.08 - PM12:44

-

최종적으로 사용한 아이콘으로
Identify 컬러인 블루를 강조하면서
알람이라는 느낌을 전달하도록 디자인하였다.

그리고 세련된 패턴을 넣음으로써 앱의 느낌을 전달해주었고,
밋밋함을 없앨 뿐만 아니라
다른앱과의 차별성도 주었다.

DelightRoom Business Card

-

DelightRoom Business Card  |  2013.09.06 - PM02:54

-

이 명함의 디자인은 회사의 목표인
Creativity, Delight, Sensation를 포함한 여러 의미를 담고있다.

먼저 다양한 모양의 패턴은 Creativity를 나타내고,
두 가지 모양의 패턴의 차이는 서로 다른 차이의 조화를 나타낸다.

어두운 색과 밝은 색의 경계는 Sensation한 활동을 통해
재미없는(어두운) 세상에 재미로써 빛을 비춘다는 의미를 나타내며
이는 Delight를 의미한다.

명함의 푸른색 띠는 각자의 개성을 나타내며
각자의 멤버마다 다른 색을 가지고 있다.

-

예전에 개인 명함을 뽑았을 때 CMYK로 작업했지만
프린터마다 색이 다르게 보인다는 것을 생각하지못해
명암이 제대로 표현되지 않았었다.

그래서 이번에 명함을 뽑을 때는 색깔 간의 차이를 크게둬서
경계가 잘 보이도록 디자인을 했더니
명함이 생각보다 잘 나온 것 같다.