아이콘은 시선을 사로잡는 매력을 지니고 있습니다!
강력한 시각적 연결을 통해 보는 이들과 빠르게 소통하는 능력이 탁월하기 때문입니다.
이러한 이유로 워드프레스 웹사이트를 포함한 다양한 곳에서 아이콘이 널리 사용되고 있습니다.
하지만 웹사이트에 몇 달 동안 동일한 테마를 적용하는 것은 다소 지루하게 느껴질 수 있습니다.
그러다 보면 더 흥미로운 것을 찾아 시도하게 되지만, 결국 또다시 싫증을 느끼게 됩니다.
그리고 이런 순환은 계속 반복될 뿐입니다…
그렇다면 이 지루함의 굴레에서 어떻게 벗어날 수 있을까요?
대시아이콘(Dashicons)은 훌륭한 해결책이 될 수 있습니다!
대시아이콘은 웹사이트의 미적 감각을 향상시키고 시선을 사로잡는 데 도움을 줄 수 있습니다. 또한 페이지 로딩 속도를 저해하는 불필요한 이미지를 추가하는 번거로움 없이도 웹사이트를 돋보이게 만들 수 있습니다.
지금부터 대시아이콘과 워드프레스 웹사이트에서 효과적으로 사용하는 방법에 대해 알아보겠습니다.
워드프레스 대시아이콘이란 무엇일까요?
대시아이콘은 워드프레스 버전 3.8에서 처음 소개된 공식 아이콘 폰트입니다. 웹사이트에서 사용하면 세련되고 멋진 디자인을 연출할 수 있습니다. 픽셀 깨짐 없이 모든 크기로 확대가 가능한 고품질 SVG 파일로 구성되어 있습니다.
워드프레스 팀에서 자체적으로 제작했기 때문에 별도의 스크립트를 로드할 필요 없이 워드프레스 내에서 바로 사용할 수 있습니다. 약 350개의 아이콘 폰트가 제공되며, 공식 워드프레스 개발자 리소스에서 확인할 수 있습니다.
대시아이콘은 주제별로 분류되어 있으며, 검색 필터를 통해 원하는 아이콘을 쉽게 찾을 수 있습니다.
다음과 같은 다양한 아이콘을 사용할 수 있습니다.
- 워드프레스 대시보드
- 탐색 메뉴
- 페이지 및 게시물
- 메타데이터
- 편집기 요소
- 사용자 정의 플러그인 및 테마
- 관리자 패널
- 프런트엔드 디자인
제가 계속해서 “아이콘”이라는 단어를 반복하는 것을 눈치채셨나요?
여기서 제가 언급하는 것은 이미지 형태의 아이콘이 아닌 아이콘 폰트입니다.
네, 이 둘 사이에는 분명한 차이가 있습니다.
그 차이점을 자세히 살펴보겠습니다.
이미지 아이콘과 아이콘 폰트의 차이점은 무엇일까요?
아이콘 폰트와 이미지 아이콘은 겉으로는 비슷해 보이지만, 아이콘 폰트는 글자 대신 벡터 기호로 이루어져 있습니다.
약간 기술적인 설명이었나요?
좀 더 쉽게 설명해 드리겠습니다.
기본적으로 아이콘 폰트는 이미지와 유사하지만 실제 이미지는 아니며, 웹사이트에 기호를 추가하는 데 사용될 수 있습니다.
아이콘 폰트는 이미지 아이콘에 비해 여러 가지 이점을 제공합니다.
어떤 이점일까요?
다음 섹션에서 자세히 알아보겠습니다.
왜 아이콘 폰트를 사용해야 할까요?
- 웹사이트에서 사용되는 텍스트처럼 자유롭게 크기를 조절할 수 있습니다.
- 이미지에 비해 페이지 로딩 속도에 미치는 영향이 적은 경량입니다.
- CSS를 사용하여 아이콘 색상을 설정하고, 그라데이션, 그림자 등 다양한 추가 속성을 적용할 수 있습니다.
- 페이지 전체에서 사용할 수 있는 폰트를 한 번에 로드하여 HTTP 요청 횟수를 줄이는 데 유용합니다. 이미지를 많이 사용하는 경우 이미지를 불러오는 데 많은 요청이 필요하여 페이지 로딩 시간이 늘어날 수 있습니다.
- 이미지보다 사용 및 조정이 쉽습니다. 비디오 플레이어, 이메일, 음악 등 다양한 항목에 대한 아이콘이 필요할 때마다 아이콘을 다시 만들 필요 없이, 인식 가능하고 창의적인 기호를 손쉽게 추가할 수 있습니다.
- 워드프레스에 기본적으로 내장되어 있어 접근성이 높습니다.
아이콘 폰트는 어떻게 사용할까요?
대시아이콘을 사용하는 것은 로켓 과학처럼 복잡한 일이 아닙니다.
저를 믿으세요. 저도 잘 알고 있습니다. :0
워드프레스 대시아이콘을 사용하려면 아래 단계를 따라하세요.
1단계: 워드프레스 사이트에서 대시아이콘 활성화
시작하기 전에 대시아이콘을 사용하려는 위치(예: 테마)에서 대시아이콘을 활성화해야 합니다. 이를 위해서는 function.php 파일에 몇 가지 코드를 추가해야 합니다.
다음 단계를 따라 진행하세요.
- 먼저 워드프레스 대시보드에서 테마/외모 편집기로 이동합니다.
- function.php 파일을 엽니다.
- 파일 끝까지 스크롤한 다음, 아래 코드를 추가하여 스크립트를 큐에 넣습니다.
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
위의 예시는 프런트엔드에서 대시아이콘을 활성화하는 코드입니다.
functions.php 파일을 편집하기 전에 반드시 하위 테마를 생성해야 합니다. 테마 파일을 직접 편집할 경우, 해당 테마에 대한 업데이트가 제공되면 파일 변경 사항이 모두 덮어쓰기 되기 때문입니다.
2단계: 대시아이콘 HTML 및 CSS 코드 찾기
WordPress.org에서는 각 아이콘에 해당하는 CSS 및 HTML 코드를 쉽게 찾을 수 있도록 대시아이콘 라이브러리를 제공합니다. 워드프레스 개발자 리소스에서 사용하려는 대시아이콘을 찾은 후 다음 단계를 따르세요.
- 원하는 아이콘을 클릭합니다.
- “CSS 복사” 또는 “HTML 복사” 중 하나를 선택합니다.
- 팝업 창이 나타나면 코드를 클립보드에 복사합니다.
- 아이콘을 사용할 위치(예: 테마, 메타데이터, 탐색 메뉴 등)를 결정합니다.
- 복사한 코드를 선택한 위치의 텍스트 위젯이나 텍스트 편집기에 붙여넣습니다.
- 사용자 정의 CSS를 사용하여 아이콘 모양을 수정합니다.
이것으로 끝입니다!
참고로 기본적으로 모든 아이콘의 크기는 20픽셀입니다. Google Chrome의 Inspect Element 또는 Firefox의 FireBug와 같은 도구를 사용하여 CSS 요소를 변경할 수 있습니다.
워드프레스 대시아이콘을 최대한 활용하는 방법
이제 대시아이콘을 사용하는 방법을 배웠으니, 특정 목적에 따라 어떻게 활용할 수 있는지 살펴보겠습니다.
1. 탐색 메뉴에 사용하기
메뉴에 아이콘을 추가하려면 다음 단계를 따르세요.
- 대시보드에서 외모/메뉴로 이동합니다.
- WordPress.org에서 메뉴 아이콘으로 사용할 HTML 코드를 복사합니다.
- 대시보드의 “네비게이션 라벨”에 복사한 코드를 붙여넣습니다.
- “저장” 버튼을 클릭한 후 홈페이지를 로드합니다. 멋지고 선명한 아이콘이 표시될 것입니다.
2. 게시물 메타데이터에 사용하기
날짜, 작성자 이름, 태그 또는 표시되는 테마나 데이터를 기반으로 하는 카테고리 바로 앞에 대시아이콘을 사용할 수 있습니다.
대시아이콘이 이미 큐에 등록되어 있으므로 style.css 파일을 엽니다. 또는 테마 업데이트 후 변경 사항을 잃지 않도록 사용자 정의 CSS 편집기를 사용할 수도 있습니다. 그런 다음, 해당하는 선택자를 찾아 CSS 코드를 추가합니다.
3. 워드프레스 백엔드에서 사용하기
다른 사용자 정의 게시물 제목, 게시물 유형 또는 위젯에 대해 다른 아이콘을 쉽게 사용할 수 있습니다.
빠른 팁: 단축 코드 생성
대시아이콘을 더욱 쉽게 사용할 수 있도록 단축 코드를 생성할 수 있습니다. 특히 고객을 위해 웹사이트를 제작할 때, 코드를 직접 수정할 필요 없이 대시아이콘을 쉽게 삽입할 수 있도록 하는 데 유용합니다.
결론
워드프레스 대시아이콘에 대한 궁금증이 모두 해소되셨기를 바랍니다. 대시아이콘은 웹사이트의 미적 감각을 높여줄 뿐만 아니라 사용하기도 쉽고 페이지 로딩 속도도 향상시켜줍니다.
‘아름다움과 기능’을 모두 갖춘 드문 조합이라고 할 수 있겠죠.
서둘러 워드프레스 사이트에 눈길을 사로잡는 대시아이콘을 적용해보세요!