앱인벤터 원하는 폰트(글꼴)로 변경(추가)하기
안녕하세요. 이지이지입니다.
이번 시간에는 앱인벤터2에서 사용자가 원하는 폰트로 변경하는 방법에 대해 알아보도록 하겠습니다.
앱인벤터2에서는 다음 화면과 같은 네 가지 기본 폰트가 제공되며, 사용자가 마음대로 추가할 수는 없습니다.
하지만 앱인벤터에서도 확장기능(Extension)을 추가하여 사용자가 원하는 폰트를 사용할 수 있습니다.
몇 단계만 거치면 아주 쉽게 적용가능하니 다음 단계를 잘 따라와보세요.
| MyFonts 확장기능(Extension) 추가하기 |
1. 다음 아래의 MyFonts 확장 프로그램을 다운로드합니다.
============================================================================
Update 2022. 2. 26. : Android 저장소 정책이 변경되어 이전에 MyFonts 확장 프로그램을 다운 받으신 분께서는 위의 업데이트된 파일을 내려받으시기 바랍니다.
============================================================================
2. 다음 화면을 따라 다운로드한 MyFonts 확장기능을 추가합니다.
3. 추가된 MyFonts 확장기능을 사용하기 위해 컴포넌트 요소에 추가합니다.
확장기능 아래에 추가된 MyFonts를 드래그하여 핸드폰 화면으로 가져오면 됩니다.
그러면 ②처럼 컴포넌트 창과,
핸드폰 화면 아래쪽 Non-visible components에 MyFonts기능이 추가된 것을 확인할 수 있습니다.
4. MyFonts 확장기능에 사용하고 싶은 폰트를 추가합니다.
컴포넌트창에서 MyFonts1을 클릭한 다음 속성창(Properties)에서 폰트를 선택하면 됩니다.
저는 여기서 나눔고딕체를 사용해보도록 하겠습니다.
※ TTF 폰트만 지원합니다. OTF 형식의 폰트는 지원하지 않습니다.
5. 폰트가 추가되면 다음 그림에서 처럼 속성창(Properties)과 Media창 아래 추가된 폰트를 확인할 수 있습니다.
| 화면 구성하기 |
사용자가 원하는 폰트의 적용 예를 보여주기 위해 다음과 같이 앱인벤터 화면을 구성해 보았습니다.
기본폰트(default)는 사용자 핸드폰에 설정된 폰트를 사용하라는 것으로
● 레이블 이름: lbl_default
● 폰트(FontTypeface): default
로 설정을 해두었습니다.
사용자가 추가한 나눔고딕 폰트가 적용된 예를 보기 위해
● 레이블 이름: lbl_nanum
● 폰트(FontTypeface): default
여기서 폰트가 왜 default지? 라고 생각할 수 있을텐데요.
우리가 여기서 사용할 MyFont 확장 기능은 속성창(Properties)에서 변경할 수 있는 것이 아니라,
블록코딩을 통해서 바꾸어 주어야 합니다!!!
그래서 일단 default값으로 해둡니다. (다른 폰트로 지정해도 상관없습니다.)
| 블록코딩 하기 |
1. 먼저 [Screen1]을 선택하고, [when Screen1.Initialize(Screen1.초기화되었을때)]를 선택합니다.
2. [MyFonts1]을 선택하고, [Call MyFonts1.SetFont]를 선택합니다.
3. 블록창에서 [lbl_nanum]을 선택하고, [lbl_nanum]을 선택합니다.
4. 이로써 코딩은 모두 끝이 났습니다.
코딩이 완료된 블록의 모습은 다음과 같습니다.
이 코딩에 대해서 짧게 설명드리자면
→ 이 앱이 처음 실행되었을 때
→ lbl_nanum레이블의 폰트를 MyFonts1의 폰트로 변경해라입니다.
한 마디로, component에 여러분이 변경하고자 하는 요소의 이름을 끼우시면 되는 것입니다.
만약 여러 요소의 이름을 MyFont의 폰트로 변경하고자 한다면
바꾸려는 요소의 개수만큼
call MyFonts1.SetFont를 가져와 추가하시면 됩니다.
위와 같은 과정을 거친 후, AI Companion을 실행시켜 보시면
다음과 같은 화면을 보실 수 있을 것입니다.
(※ 보기 좋게 하기 위해 위의 설명에서 디자이너 화면을 조금 바꾸었습니다.
코딩은 동일합니다.)
그림이 많아 조금 복잡해 보일 수도 있지만, 시도해 보시면 정말 쉽게 적용해 볼 수 있을 것입니다.
앱인벤터 폰트 여러분 마음대로 바꾸셔서 더 예쁜 UI를 꾸미시기 바랍니다.~
혹시나 필요하신 분이 계실까 소스 남깁니다.~