잘 디자인된 웹 애플리케이션은 종종 텍스트와 그래픽 요소의 집합체로 간주됩니다. 이미지는 웹 애플리케이션에 미적 매력을 더할 뿐만 아니라 시각적 보조 역할을 하며 애플리케이션에 대한 사용자 참여를 향상시킬 수 있습니다.
Iconify는 부트스트랩 및 머티리얼 디자인에 있는 아이콘과 같은 여러 아이콘 세트에서 가져온 방대한 SVG 기반 아이콘을 제공하는 포괄적인 아이콘 프레임워크입니다. 이 프레임워크는 다양한 프런트엔드 자바스크립트 프레임워크와 함께 사용할 수 있어 적응성이 뛰어납니다.
Vue 애플리케이션에 Iconify를 통합하는 방법
@iconify/vue npm 패키지를 사용하면 npm 패키지로의 통합 기능을 통해 Vue 애플리케이션 내에 Iconify 아이콘 프레임워크를 통합할 수 있습니다.
“@iconify/vue” 패키지는 Vue 애플리케이션 내에 아이콘을 손쉽게 통합할 수 있는 수단을 제공합니다. 이 패키지를 통해 사용자는 프로젝트에 아이콘을 쉽게 도입하고 개인화할 수 있습니다. “@iconify/vue”를 Vue 애플리케이션에 통합하려면 프로젝트의 루트 디렉터리에 있는 터미널로 이동하여 다음 npm 명령을 실행합니다:
npm install --save-dev @iconify/vue
주어진 명령은 Vue 프로젝트 내에서 개발 전제 조건으로 지정된 “@iconify/vue” 패키지의 설치를 전달합니다.
앞서 언급한 패키지는 Vue 3 기반 프로젝트와만 호환되며 후속 콘텐츠를 준수해야 합니다. 안타깝게도 Vue 2 프로젝트에는 적합하지 않습니다. 그러나 Vue 2 프로젝트에서 Iconify를 활용하려면 다음 npm 명령을 실행하세요:
npm install @iconify/vue2
2023년 12월 31일부터 Vue 2는 더 이상 적극적으로 유지 관리되지 않으므로 개발자는 최신 버전인 Vue 3와 그 기능에 익숙해져야 합니다. 이 조치는 Vue 개발 커뮤니티 내에서 개인이 최신 정보를 파악하고 유능한 역량을 유지하기 위한 것입니다.
Vue 컴포넌트에 아이콘을 추가하는 방법
패키지를 통해 아이콘 컴포넌트를 도입한 후 다음 절차의 구현을 통해 컴포넌트의 스크립트 섹션에 통합하여 Vue 컴포넌트 내에 아이콘을 통합할 수 있습니다:
<script setup>
import { Icon } from '@iconify/vue'
</script>
이 단계가 끝나면 Iconify 라이브러리의 모든 아이콘에 액세스할 수 있습니다. 아이콘을 추가하려면 Iconify 웹사이트로 이동합니다. 웹사이트로 이동하여 애플리케이션에 필요한 아이콘의 이름을 입력합니다.
표시된 그래픽은 인증을 나타내는 엠블럼을 얻기 위해 수행한 퀘스트의 결과를 보여줍니다.
사용자는 체크 표시 아이콘을 클릭하여 선호하는 디자인을 선택할 수 있습니다.또한 색상, 크기, 뒤집기 및 회전 설정을 조정하여 아이콘의 모양을 수정할 수 있습니다.
앞서 언급한 매개 변수를 사용하여 아이콘의 필수 색도, 치수, 위치 및 기울기를 지정할 수 있습니다. 아이콘이 개인화되면 웹 페이지에서 컴포넌트의 소스 코드를 재생성하여 Vue 애플리케이션 내에서 아이콘을 활용할 수 있습니다.
<template>
<Icon icon="ph:check-fill" color="red" width="500" height="500" />
</template>
앞서 언급한 코드 스니펫은 아이콘의 길이와 너비가 모두 500픽셀로 설정된 진홍색 색조를 갖도록 아이콘의 표현을 구성합니다.
애플리케이션을 미리 보면 다음 이미지와 유사한 시각적 표현이 표시됩니다:
“@iconify/vue” 번들을 사용하여 애플리케이션에 아이콘을 통합하는 것은 일반적으로 간단한 과정이지만, 때때로 특정 어려움이 발생할 수 있습니다. 이러한 문제 중에는 데이터 전처리, DOM(문서 객체 모델) 내 오류 알림 표시, 프레임워크가 구성 요소를 적절하게 렌더링하지 못하는 경우와 관련된 문제가 있습니다.
앞서 언급한 합병증은 심볼 표시와 함께 컴포넌트를 배치할 때 발생합니다. 언플러그인 아이콘 라이브러리를 활용하면 이러한 딜레마를 효과적으로 해결할 수 있습니다.
불플러그인-아이콘 라이브러리로 아이콘 추가하기
불플러그인-아이콘 라이브러리는 템플릿 내에서 오류를 발생시키지 않고 아이콘을 도입하고 활용할 수 있는 방법을 제시합니다.
이 방법을 통해 아이콘을 통합하면 번들 애플리케이션에 사용된 모든 아이콘이 자동으로 포함되므로 “@iconify/vue”를 사용할 때 발생하는 어려움을 제거하여 최종 제품에서 아이콘의 존재를 보장할 수 있습니다.
언플러그인 아이콘 라이브러리를 활용하기 위해서는 먼저 터미널 창을 열고 다음 npm 설치 명령을 실행해야 합니다:
npm install unplugin-icons
설치 프로세스가 완료되면 Vue 3용 빌드 도구를 설정해야 합니다. Vue 3용 빌드 도구는 Vite이며, 다음 프로그래밍 스니펫과 유사하게 조정하여 vite.config.js의 구성 파일에 주의를 기울여야 합니다:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), Icons()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
동일한 정보를 보다 정교하게 표현한 아래 수정 버전을 참조하세요: “현재 코드 블록은 ‘unplugin-icon/vite’에서 아이콘 플러그인을 가져오는 것을 포함하는 Vite의 구성 파일을 보여줍니다. 그 후 Icons() 함수가 플러그인 배열 내에 플러그인으로 등록됩니다.
여러 아이콘 세트를 설치하면 사용자에게 더 다양한 아이콘을 제공할 수 있습니다. 이러한 다양한 아이콘을 얻으려면 애플리케이션 디렉토리에 있는 터미널에서 다음 명령을 실행하면 됩니다:
npm i -D @iconify/json
실행 시 이 프로그램은 Iconify 라이브러리에 있는 모든 아이콘을 배포하며, 전체 파일 크기는 약 200메가바이트입니다. 모든 아이콘을 설치하지 않고 특정 아이콘 세트만 선택적으로 통합할 수도 있으며, 이 경우 패키지 크기가 더 작아집니다.
npm i -D @iconify-json/ph
앞서 언급한 코드 세그먼트는 Iconify에서 “ph”로 표시한 대로 Phosphor 아이콘 세트의 아이콘만 설치합니다.
설치 시 아이콘 요소를 Vue 애플리케이션에 통합할 수 있습니다. 컴포넌트 내에서 아이콘을 사용하려면 ~icons/{set}/{iconName} 형식을 사용하여 아이콘을 가져와야 합니다.
아이콘을 가져오는 절차는 다음과 같이 요약할 수 있습니다:
“~ 아이콘”이라는 용어는 아이콘의 위치 또는 경로에 대한 참조입니다.
“세트”라는 용어는 종종 아이콘 컬렉션에 대한 참조로 사용되어 아이콘을 특징짓는 데 사용됩니다.
앞서 언급한 기호는 “케밥 케이스” 명명 규칙으로 알려진 하이픈으로 문자를 구분하는 소문자로 그래픽 표현의 모니커를 나타냅니다.
다음 구절은
<script setup>
import CheckFill from "~icons/ph/check-fill"
</script>
<template>
<CheckFill color="red" width="500" height="500" />
</template>
앞서 언급한 코드 스니펫은 “~icons/ph/체크-채우기”의 라벨링 규칙을 사용하여 아이콘 컴포넌트를 가져오는 프로세스를 보여줍니다. 이 특정 아이콘 컴포넌트는 Phosphor 아이콘 세트의 CheckFill 아이콘으로 알려져 있습니다. Vue 템플릿 내에서 색상, 너비 및 높이와 같은 아이콘 구성 요소의 특성이 지정됩니다.
앞서 언급한 코드 샘플은 이전에 제시된 것과 동일한 애플리케이션을 표시할 가능성이 높습니다.
Vue 앱의 접근성 향상
Iconify는 Vue 기반 애플리케이션의 사용자 인터페이스 내에 그림 표현을 통합하는 데 없어서는 안 될 자산으로, 개인화된 디자인 향상을 위한 충분한 기회를 제공합니다.
Vue 개발 전문가는 사용자의 다양한 요구 사항을 충족하기 위해 웹 애플리케이션의 접근성을 보장하는 것이 필수적입니다. 여기에는 시각 또는 청각 장애인과 같이 애플리케이션을 다르게 활용할 수 있는 장애인이 포함됩니다. 이러한 목표를 달성하려면 이러한 사용자를 위한 접근 가능한 웹 애플리케이션을 제작할 수 있는 도구와 기술을 숙지하는 것이 필수적입니다.