[React Native] iOS 폰트(Font-Family) 적용하기

일전에 React로 토이 프로젝트를 만드려고 한 적이 있었다. 그 때는 폰트 적용하는 것이 그닥 어렵지 않았던 것 같았는데..

React Native로 iOS 어플리케이션의 폰트를 적용하는 방법이 약간 번거로웠다.

이 또한 기록해두면 나중에 또 폰트 적용할 때 도움이 되지 않을까 싶어 포스팅해본다.

 

1. 서체 설치

 

당연한 것이지만 먼저 앱에 적용하고 싶은 폰트를 찾아, 맥에 설치해야 한다.

트루타입 파일(ttf)이든, 오픈타입 파일(otf)이든 찾아서 설치해주면 된다.

해당 파일을 클릭하고 '서체 설치' 버튼을 누른다.

 

2. 서체 파일 앱 내에 추가

프로젝트 디렉터리로 이동하여 해당 디렉터리의 ios 파일 내에 폰트 파일을 추가해야 한다.

Finder로 직접 추가해줘도 되고, 해당 포스팅에서는 터미널에서 처리해준 방법을 소개할 것이다.

 

cd 프로젝트 디렉터리 명

위 명령어를 통해 프로젝트 디렉터리로 이동한다.

 

cd ios

mkdir Fonts

그리고 ios 폴더로 이동해서 여기서 Fonts 폴더를 만들어준다.

 

cp 폰트 파일 경로/폰트 파일.ttf(혹은 otf) ./

cp 명령어를 통해서 폰트 파일을 해당 디렉터리에 복사해준다.

폰트 파일 경로의 경우, Finder에서 해당 폰트가 있는 위치에서 폰트를 터미널로 드래그하면 쉽게 적을 수 있다.

 

예시는 아래와 같다.

 

위와 같이 진행해주면 프로젝트 디렉터리 내, ios 디렉터리 내, Fonts 디렉터리 내에 폰트 파일이 복사된다.

중간에 mkdir 명령어가 적용되지 않은 것은, 이미 Fonts 폴더를 만들어놓아서 그런 것이다.

 

3. 프로젝트 Info.plist 파일 설정

폰트 설정의 가장 핵심적인 단계다.

XCode로 해당 프로젝트의 .xcworkspace 혹은 .xcodeproj 파일을 연다.

 

프로젝트를 열었으면, 왼쪽 상단의 폴더 아이콘을 클릭하여 Project navigator를 본다.

그렇다면 프로젝트 명이 적힌 폴더와 Pod 파일 폴더가 나올 것이다.

그 중 프로젝트 명을 클릭한다.

 

그렇다면 오른쪽에 위와 같은 화면이 나올 것이다.

단, TARGETS이 프로젝트 명으로 적용이 되어 있어야 하고, Build Phases 를 클릭해야 한다.

 

Build Phases 에서 Copy Bundle Resources를 클릭하여 열어본다.

위 사진과 같이 여러 목록이 나오게 된다.

 

지금 화면에서는 폰트 파일이 추가되어 있지만 원래는 폰트 파일이 추가되어 있지 않을 것이다.

따라서 아래의 + 를 클릭해준다.

 

+ 를 클릭해주었다면 위와 같은 화면을 보게 될 것이다.

여기서 폰트 파일을 찾아 추가해주어야 한다.

Add other를 눌러서, 2. 단계에서 만들어준 Fonts 파일 내의 폰트를 추가해준다.

 

폰트가 추가 되었다면 Copy Bundle Resources 목록 내에도 폰트 파일이 추가되었을 것이다.

 

이번에는 Bundle Phases가 아니라 Info로 가서 설정을 해줘야 한다.

 

위 사진처럼 Key라고 되어있는 것을 추가해주어야 한다.

 

 Key 목록 중에서 아무 행이나 마우스를 갖다 대면, 위 사진과 같이 +, - 표시가 나온다.

그 중 + 를 클릭하여 Key를 추가해준다.

 

+ 를 누르면 App Category를 선택하게 된다.

Fonts provided by application 카테고리를 추가해도록 하자.

 

해당 카테고리 내의 아이템을 추가해줘야 폰트가 적용이 된다.

+ 를 누르고 오른쪽의 폰트 파일 명이 적혀있는 부분은 원래 비어있을 것이다.

따라서 위 사진과 같이 아이템마다 오른쪽 부분을 폰트 파일명으로 채워준다.

 

4. 프로젝트 내에서 Font Family 적용

드디어 적용하는 단계다. 그말은 즉슨 마지막 단계라는 말이다.

 

(StyleSheet를 사용해서 CSS를 적용시켜주었기 때문에 위와 같은 형태가 나온다)

styled-components의 경우, font-family로 폰트 명을 적어주면 적용이 될 것이다.

 

이때 주의해야 할 점이 fontFamily의 속성 값을 적어줄 때 조심해야 한다.

서체 관리자에 있는 PodScript 이름과 같게 속성 값을 적어주어야 한다.

 

서체 관리자에 들어가서, 가장 왼쪽의 목록 중 모든 서체를 클릭하여 맥 내의 모든 서체를 불러온다.

모든 서체 중에서, 프로젝트에 적용할 서체를 찾는다.

해당 폰트를 클릭하면, PodScript 이름이 나온다.

PodScript 이름을  fontFamily의 속성 값으로 적용시켜주도록 하자.

 

생각보다 과정이 번거로워서 당황스러웠다.

하지만 우리에게는 많은 정보들(구글)이 있으니 그닥 두려워하지 않아도 된다!

 

참조

• JuzeroSpace