모바일 앱에서 아이콘 글꼴을 사용하는 방법

모바일 용 디자인은 매우 빠르게 복잡해질 수 있습니다. 다양한 화면 크기와 픽셀 밀도로 인해 네이티브 앱에 완벽한 픽셀 비주얼을 제공하는 것은 거의 불가능합니다.

모바일 앱용 아이콘을 디자인 할 때 디자인 프로세스의 두 가지 측면에 직면해야합니다. 밝은면에는 아이콘의 실제 디자인이 있습니다. 즉, 픽셀을 밀어 사람들이 인터페이스를 이해하고 만족시키는 데 도움이되는 매력적인 비주얼을 만듭니다. 하지만 어두운면에는 지루한 관료제가 있습니다. 걸작이 구성되면 개발자가 모든 다른 대상 장치에 시각 자료를 적용 할 수 있도록 각 프로젝트 전체에서 작업을 분할, 구성, 최적화 및 조정해야합니다.

  • 소스 파일 다운로드 이 튜토리얼을 위해

픽셀 푸시를 좋아하는만큼 최근에 폴더를 정리하고 대상 장치 사양을 찾는 데 너무 많은 시간을 소비하는 것을 발견했습니다. 단일 소스에서 여러 솔루션의 아이콘과 그래픽을 내보내는 데 도움이되는 다양한 플러그인이 있지만 다양한 해상도와 다양한 운영 체제의 픽셀 밀도에 대해 최적화 된 이미지를 추적하는 것은 피할 수있는 일입니다. 벡터 기반 아이콘 글꼴을 살펴 보겠습니다.



Fontello를 사용하여 몇 초 안에 아이콘 세트 추출

Fontello의 아이콘 글꼴 생성기와 아름다운 Entypo 픽토그램을 사용하여 몇 초 안에 아이콘 세트를 축소 된 라이브러리로 추출

혜택이있는 친구

프로덕션 용 사용자 인터페이스를 디자인 할 때 많은 디자이너는 가능한 한 픽셀 기반 이미지를 멀리하고 다양한 이유로 벡터 기반 소스에 대해 피치하려고합니다. 예를 들어, 팀에서 작업하려면 품질 저하없이 빠르게 변경할 수있는 능력이 필요합니다. 관리 가능한 파일 크기를 유지하고 다양한 화면 크기에 대한 UI 요소를 제공하는 기능은 더 큰 스크래치없이 장기 프로젝트를 수행 할 수있는 무시할 수있는 속성입니다.

응답 성, 로딩 시간 또는 레티 나 디스플레이와 관련하여 모든 유형의 사용자에게 고품질 UI를 제공하기 위해 웹용으로 디자인 할 때 CSS 효과와 같은 벡터 기반 접근 방식을 사용하는 것이 일반적인 관행이되고 있습니다. 최근에 사용자 정의 글꼴을 지원하는 브라우저의 향상으로 인해 많은 디자이너들은 같은 이유로 아이콘을 웹 글꼴로 바꾸는 경향이 있습니다. 네이티브 모바일 앱의 디자이너로서 그래픽을 슬라이싱, 구성 및 패키징하는 데 많은 시간을 할애하면서 웹 디자인의 기술적 발전을 사용할 수 있는지 궁금했습니다. 디자인 과정에서 해상도, 기기 크기 등을 잃어 버리고 작업의 중요한 측면에 더 집중할 수 있기를 바라며 iOS 및 Android 앱의 UI를 개선하기 위해 아이콘 글꼴을 사용하기로 결정했습니다.

응용 프로그램의 속성 목록을 사용하여

애플리케이션의 속성 목록을 사용하여 프로젝트 폴더에있는 모든 종류의 사용자 지정 글꼴을로드합니다.

아이콘 글꼴은 확장 가능한 디자인에 대한 놀라운 접근 방식입니다. 비트 맵 이미지에 비해 몇 가지 장점이 있으며 기본 앱 개발을 염두에두고 이러한 이점은 제품의 배송 품질뿐만 아니라 디자인 워크 플로에 상당한 영향을 미칩니다.

  • 확장 성 : 글꼴 기반 아이콘은 해상도에 독립적이며 원하는 범위로 크기를 조정할 수 있습니다. 레티 나, HDPI, XHDPI 등에 관계없이 아이콘이 선명하게 보입니다. 렌더링이 대상 장치에 맞게 자동으로 조정되므로 현재, 미래 또는 대부분의 임의의 장치 형식을 수용 할 수 있습니다.
  • 크기: 적절한 비율로 자르면 아이콘 글꼴은 픽셀 이미지 세트보다 파일 크기가 엄청나게 작습니다. 이 경우 다른 대상 장치를 수용 할 필요가 없으며 앱이 시작될 때만로드되는 단일 파일 만 앱에 장착하면됩니다.
  • 유지 보수성 : 아이콘이 단일 글꼴 파일로 패키징 될 것이므로 프로젝트 전체에서이 단일 파일 만 유지하면됩니다. 아이콘 세트는 언제든지 수정하거나 확장 할 수 있으며 글꼴 파일의 파일 구조를 통해 자연스럽게 구성됩니다.
  • 양자: 아이콘 글꼴을 사용하면 사용자와 동료에게 새로운 워크 플로가 부과 될 수 있지만 사용은 상당히 쉽습니다. 쉽게 통합하고 거의 모든 모바일 플랫폼, 웹 브라우저 또는 운영 체제에서 신속하게 훌륭한 결과를 볼 수 있도록 도와주는 수많은 무료 및 전문 도구가 있습니다.
  • 적응성: 아이콘 글꼴 사용의 가장 큰 이점 중 하나는이를 조작 할 수 있다는 것입니다. 색상, 크기 또는 모양 변경 요청은 즉시 수행 할 수 있으며 코드 몇 줄만 변경하여 테스트 할 수 있습니다.
  • 상호 작용 : 코드를 통해 글꼴을 유연하고 쉽게 조작 할 수 있기 때문에 아이콘 글꼴은 런타임에 조작 할 수있는 방식이 독특합니다. 아이콘 글꼴을 사용하면 아무런 노력없이 다양한 상태를 표시하고 효과를 적용하고 애니메이션을 만들 수 있습니다.

아이콘 글꼴은 많은 이점을 제공하고 몇 가지 흥미로운 디자인 가능성을 제시하지만 당연히 다목적 솔루션은 아닙니다. 디자인에 두 가지 이상의 색상이있는 복잡한 비주얼이나 아이콘이 필요한 경우이 접근 방식에는 한계가 있습니다. 그러나 아이콘 글꼴의 인기 있고 독창적 인 사용은 인터넷에서 찾을 수 있습니다. 아이콘 글꼴의 사용은 이미 웹 디자인에서 꽤 인기가 있기 때문에 환상적인 아이콘 글꼴 세트를 만드는 데 도움이되는 다양한 서비스가 있습니다.

콘센트 연결 후 뷰가로드 된 후 언제든지 라벨을 쉽게 변경할 수 있습니다.

콘센트 연결 후 뷰가로드 된 후 언제든지 라벨을 쉽게 변경할 수 있습니다.

iOS에서 아이콘 글꼴 사용

iOS 개발에 아이콘 글꼴을 사용하는 것은 매우 간단합니다. 시작하려면 다음과 같은 서비스를 사용할 수 있습니다. 폰텔로 또는 이코 문 아이콘을 수집하여 앱에 즉시 통합 할 수 있습니다. 또는 자신을 만드는 데 시간을 할애 할 수 있습니다. 결국, 이것이 필요한 모든 창의적인 작업입니다. 이제 아이콘을 앱에 통합하기 만하면됩니다.

펜 및 잉크 그림을하는 방법

이 튜토리얼에 필요한 것은 iOS 앱의 파일 구조와 아이콘 글꼴 파일에 대한 기본적인 이해뿐입니다. .ttf . 실제 앱에서 새 아이콘 세트를 자랑하기 위해 다음을 사용하여 새 Xcode 프로젝트를 만들 것입니다. 단일보기 애플리케이션 iOS 용. 프로젝트를 만든 후에는 글꼴 파일을 응용 프로그램 폴더에 복사합니다. 이상적으로는 프로젝트 네비게이터 .

가져온 파일을 어떻게 사용하고 싶은지 Xcode가 인식하도록하려면 Info.plist 귀하의 응용 프로그램의. 이 목록은 지원 파일 폴더이며 여러 키와 값을 포함하는 메타 데이터 테이블을 나타냅니다. 앱을 빌드 할 때 Xcode에 글꼴 파일이 포함되도록하려면 간단히 행을 추가합니다 (오른쪽 클릭, 행 추가 )를 목록에 추가하고 새 키의 이름을 지정합니다. 응용 프로그램에서 제공하는 글꼴 . 그런 다음 글꼴 정의로 키를 채울 수 있습니다. 우리의 경우 이것은 값이 될 것입니다 fontello.ttf ...에 대한 항목 0 . 이제 Xcode는 가져온 파일이 무엇에 적합한 지 알고 있으며 사용을 시작할 수 있습니다.

일단 당신이

라벨 지정을 마치면 시뮬레이터를 실행할 때 선명하고 명확한 아이콘이 표시됩니다.

앱의 스토리 보드로 전환하고 표시 할 아이콘을 보려는 뷰에 레이블을 지정합니다. 라벨을 만든 후에는 콘센트 레이블에 아이콘 글꼴을 연결할 수 있습니다. 스토리 보드에서 작업 할 때 다음을 선택하여 쉽게 콘센트를 만들 수 있습니다. 어시스턴트 에디터 모드 .

인터페이스가 표시됩니다 ( 전망 ) 및 관련 헤더 ViewController . 이제 컨트롤 ( Ctrl ) 키를 누르고 레이블의 연결을 ViewController 바로 아래 @상호 작용 성명서. 나중에 이름을 부여하면 콘센트가 생성됩니다. 다음과 같이 보일 것입니다.

@property (weak, nonatomic) IBOutlet UILabel *iconLabel

이제 코드를 통해 레이블을 조작 할 수 있으므로 ViewController (그만큼 .미디엄 파일) 아이콘 세트를 라벨에 적용합니다. 로 이동 viewDidLoad 기능 ViewController 다음 줄을 추가하여 글꼴을 설정하고 텍스트를 적용합니다. 너의 viewDidLoad 함수는 다음과 같아야합니다.

( void)viewDidLoad{ [super viewDidLoad]; [iconLabel setFont:[UIFont fontWithName:@'fontello' size:130]]; [iconLabel setText:[NSString stringWithUTF8String:'u2692']]; }

처음 추가 된 명령은 레이블에 사용되는 글꼴을 정의하고 크기를 설정합니다. 이 경우 130 포인트로 설정되어 있습니다. 이 명령을 사용할 때 글꼴 이름을 주시하십시오. 여기에서 글꼴의 실제 이름, 즉 글꼴 북이나 다른 글꼴 편집기에서 글꼴을 열 때 표시되는 이름을 참조해야합니다. 그러나 글꼴 이름은 파일 이름과 다를 수 있습니다.

함수 내에 두 번째로 추가 된 행은 인코딩 된 유니 코드 문자를 참조합니다. 해머 앤 픽 (2692) Fontello에서 사용하는 예제 아이콘입니다.

다소 모호하지만 글꼴 세트에서 아이콘의 유니 코드 문자를 얻는 것은 매우 쉽습니다. 선택한 글꼴 편집기로 글꼴을 열거 나 다음과 같은 서비스에 업로드 할 때 이코 문 , 아이콘 뒤에 숨어있는 유니 코드를 쉽게 표시 할 수 있습니다.

Android XML 어휘를 사용하여 원하는 모든 유형의 UI 속성을 선언 할 수 있습니다.

Android XML 어휘를 사용하여 원하는 모든 유형의 UI 속성을 선언 할 수 있습니다.

색상, 그라디언트 및 그림자

이제 아이콘이 참조되었으므로 모든 설정이 완료되었습니다. 코드를 통해 레이블을 조작 할 것이므로 작업 결과를 보려면 앱을 실행해야합니다. 결국 이것은 아이콘 세트를 앱에 통합하는 데 필요한 전부입니다. 이 시점부터 진짜 재미가 시작됩니다. 색상, 투명도, 그라디언트 및 그림자와 같은 모든 텍스트 조작이 이제 당신의 손에 있습니다. 예를 들어, 다음과 같은 명령을 적용하여 아이콘 주위에 검은 그림자가있는 빨간색으로 아이콘을 변경할 수 있습니다.

macbook pro 15 용 하드쉘 케이스
iconLabel.textColor = [UIColor redColor]; iconLabel.shadowColor = [UIColor blackColor]; iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

다른 많은 효과를 사용할 수 있습니다. 일부는 다른 것보다 복잡하지만 일반적으로 여기에서 생각할 수있는 모든 유형의 텍스트 효과, 애니메이션 또는 더 복잡한 조작을 사용할 수 있습니다.

Android에서 아이콘 글꼴 사용

같은 방식으로 iOS에서 사용자 지정 아이콘 글꼴의 이점을 활용할 수 있으며 Android 용 앱을 개발할 때 사용할 수 있습니다. 응용 분야 측면에서 볼 때 Android는이 플랫폼에서 사용할 수있는 화면 해상도와 밀도가 훨씬 더 다양하기 때문에 훨씬 더 흥미 롭습니다. 또한 Android는 기본적으로 벡터 그래픽을 지원하지 않습니다. 이는 모든 다른 Android 기기를 고려할 때 개발자와 디자이너 모두에게 상당한 펀치입니다.

새 Android 앱을 시작하려면 Android 앱의 파일 구조에 대한 기본적인 이해와 아이콘 글꼴 파일을 .ttf . 사용 이클립스 IDE , 장착 Android ADT , 당신은 새로운 Android 애플리케이션 프로젝트 와 함께 빈 활동 . 응용 프로그램을 설정 한 후 계속해서 ttf 프로젝트의 자산 폴더에 파일을 추가합니다. 성공적으로 복사되면 패키지 탐색기 .

다음으로 TextView전망 주요 활동의. 리소스의 레이아웃 폴더에있는 파일을 찾을 수 있습니다 ( 소고기 ). 그것은 호출되어야합니다 activity_main.xml . 대부분의 경우 Android SDK는 이미 TextView 당신의 전망 'Hello world!'라는 라벨이 붙어 있습니다. 우리는 이것을 사용할 수 있습니다 TextView 아이콘을 바로 적용 할 수 있습니다.

아이콘 속성을 정의한 후 시뮬레이터의 도움으로 결과를 볼 수 있습니다.

아이콘 속성을 정의한 후 시뮬레이터의 도움으로 결과를 볼 수 있습니다.

조작하려면 TextView , 그래픽 레이아웃에서 XML로 변경 전망 인터페이스 빌더 하단에 있습니다. 이제 간단히 신분증 너의 ~에게 TextView 나중에 명령으로 쉽게 액세스 할 수있는 참조를 만들 수 있습니다.

너의 TextView 다음과 같아야합니다.

ID의 도움으로 우리는 TextView Android 앱 어디에서나 이제 다음으로 전환 할 수 있습니다. MainActivity.java 파일을 열고 아이콘 글꼴을로드하는 코드를 추가하십시오. 주요 활동에는 다음과 같은 기능이 있습니다. onCreate . 글꼴을로드하고 아이콘을 적용하는 데 필요한 것은 함수 끝에 다음 줄만 있으면됩니다.

TextView iconLabel = (TextView) findViewById(R.id.iconLabel); Typeface font = Typeface.createFromAsset(getAssets(), 'fontello.ttf'); iconLabel.setTypeface(font); iconLabel.setText('u2692');

iOS 예제와 유사하게 레이블에 대한 참조를 사용하고 여기에 적용 할 사용자 정의 글꼴을 Android에 알려줍니다. TextView . 다음 줄에서 인코딩 된 유니 코드 문자를 해머 앤 픽 (2692) Java로 작성된 방식으로 Fontello에서 사용하는 예제 아이콘의 여기에서 앱을 실행하면 아이콘이 전망 주요 활동의.

아이콘을 성공적으로 적용한 후 이제 원하는 방식으로 아이콘을 조작 할 수 있습니다. Android의 UI 사양은 일반적으로 인터페이스 빌더 또는 활동과 관련된 XML 파일에서 작성됩니다. 아이콘에 몇 가지 효과를 추가하려면 이전에 ID를 추가 한 기본 활동의 XML 부분으로 돌아가서 몇 가지 명령을 더 추가하면됩니다. 예를 들어, 다음 수정 사항을 사용하면 아이콘이 약간 더 크게 표시되고 약간의 투명도와 눈에 띄지 않는 그림자가있는 빨간색으로 표시됩니다.

iphone 8 plus 및 iphone 11
android:id='@+id/iconLabel' android:textSize='120dp' android:textColor='#ccff0000' android:shadowColor='#99000000' android:shadowRadius='2' />

다른 많은 효과를 사용할 수 있습니다. iOS 예제와 마찬가지로 모든 유형의 텍스트 효과, 애니메이션 또는 더 복잡한 조작이 이제 손에 달려 있습니다. 또한 아이콘 글꼴의 이점 중 하나는 다양한 운영 체제에 사용자 정의 글꼴을 포함하는 광범위한 채택입니다. 사용자 지정 글꼴을 지원하는 모든 플랫폼을 사용하면 완전히 다양한 새로운 효과를 즐길 수 있습니다.

글꼴 편집기를 사용하면 기존 아이콘을 최적화하거나 창의력을 마음껏 발휘하고 자신 만의 걸작을 만들 수 있습니다.

글꼴 편집기를 사용하면 기존 아이콘을 최적화하거나 창의력을 마음껏 발휘하고 자신 만의 걸작을 만들 수 있습니다.

마무리

아이콘 글꼴을 사용하면 기본 앱 개발의 품질에 엄청난 영향을 미칠 수 있습니다. 아이콘 글꼴의 확장 성을 고려하면 모든 종류의 모바일 장치 용으로 디자인 할 때 화면 밀도 나 해상도를 잊어 버릴 가능성이 거의 있습니다. 또한 아이콘 글꼴은 응용 프로그램 전체에서 유연하게 사용할 수 있으며 실시간 효과 및 애니메이션을 지원하기 위해 런타임 중에 조작 할 수 있습니다. 또한 아이콘 글꼴을 디자인 워크 플로에 쉽게 적용 할 수 있고 전체적인 유지 관리가 가능하기 때문에 아이콘 글꼴을 사용하면 작업 과정을 크게 개선 할 수 있으며 해상도 나 화면 밀도에 관계없이 더 나은 결과를 제공 할 수 있습니다. 겨냥.

말: 로버트 브루어

이 기사는 원래 넷 매거진 244 호

마음에 드 셨나요? 읽어보세요!

  • 디자이너 가이드 특수 문자
  • 고품질 다운로드 무료 아이콘
  • 어떻게 앱 구축 :이 훌륭한 튜토리얼을 시도해보십시오