워드프레스 대시콘: dashicons.min.css 3.8 공식 아이콘 글꼴 | 2020년 SVG 아이콘으로 교체

워드프레스 대시콘은 워드프레스 3.8 버전(2013년) 에서 도입된 공식 아이콘 글꼴입니다. 관리자 화면 전반에서 메뉴와 버튼 등에 아이콘을 표시하기 위해 사용되었지만, 폰트 기반 아이콘의 한계와 해상도 문제로 인해 2020년경부터 SVG 아이콘 체계로 전환되었습니다.

현재 대부분의 최신 테마와 플러그인은 SVG 아이콘이나 커스텀 아이콘 세트를 사용하는 추세입니다.

Ⅰ. 워드프레스 대시콘의 역사

2013년도의 워드프레스 3.8 버전에서 공식으로 도입되었던 아이콘 글꼴인 대시콘은 워드프레스 관리자 화면에서 사용된 아이콘 글꼴 입니다.

당시에는 관리자 메뉴, 버튼, 툴바 등 인터페이스 전반에 걸쳐 일관된 시각적 요소를 제공하기 위해 개발되었습니다.
대시콘은 경량성과 호환성을 장점으로 빠르게 확산 되었습니다.

🔲 워드프레스 대시콘 사용 방법

대시콘은 지금도 사용 가능합니다. functions.php 파일에 아래의 코드를 붙여 넣은 후 활성화 할 수 있습니다.

function enqueue_dashicons_front_end() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'enqueue_dashicons_front_end');

워드프레스 html을 사용해서 아래와 같이 게시글 또는 페이지에서 입력 후 설정할 수 있습니다.

<span class="dashicons dashicons-admin-home"></span> 관리자 홈

각 아이콘은 글꼴 형태로 제공되며, 클래스 이름(dashicons-아이콘이름)을 통해 쉽게 삽입할 수 있습니다. 이를 통해 테마나 플러그인 개발자는 별도의 이미지 없이도 일관된 UI와 시각적 통일성을 구현할 수 있습니다.

🔲 워드프레스 대시콘 모음

현재 대시콘은 관리자 메뉴, 게시물 형식, 미디어, 데이터베이스, 블록 편집기 등 다양한 관리자 화면의 다양한 요소에 적용됩니다.

Ⅱ. 대시콘의 한계와 워드프레스 SVG

대시콘은 폰트 기반 아이콘으로 경량성과 호환성이라는 장점이 있었지만, 시간이 지나면서 몇 가지 한계가 드러났습니다.

1. 해상도 문제
   • 폰트 기반 아이콘이기 때문에 고해상도 디스플레이(레티나)에서 선명도가 떨어질 수 있었습니다.
2. 확장성 부족
   • 새로운 아이콘을 추가하거나 색상, 크기, 애니메이션 등을 세밀하게 제어하기 어려웠습니다.
3. 프론트엔드 사용 제한
   • 기본적으로 관리자 영역 전용이므로, 방문자 화면에서 사용하려면 추가 로딩과 코드 삽입이 필요했습니다.

이러한 이유로 워드프레스는 2020년경부터 SVG(Scalable Vector Graphics) 기반 아이콘 체계로 점진적으로 전환을 시작했습니다.

• SVG 아이콘은 크기와 색상 조절이 자유롭고, 해상도에 상관없이 선명하게 표시됩니다.
• 또한 코드 내 직접 삽입이 가능하여 불필요한 CSS나 폰트 로딩 없이 아이콘을 구현할 수 있습니다.
• 최신 테마와 블록 기반 플러그인(예: Kadence, GeneratePress, Elementor)도 대부분 SVG 아이콘 시스템을 채택하고 있습니다.

결과적으로, 워드프레스 생태계에서는 이제 대시콘은 레거시 관리자용, 프론트엔드와 신규 개발에서는 SVG 아이콘이나 커스텀 아이콘을 사용하는 것이 표준이 되었습니다. 대부분의 무료 및 유료 테마와 플러그인은 워드프레스에 삽입하는 아이콘으로 SVG를 사용합니다.

Ⅲ. 대시콘의 프론트엔드에서의 속도 저하 문제

워드프레스 관리자 페이지에서 대시콘이 사용되는 것은 문제되지 않습니다. 아이콘 글꼴을 통해 메뉴, 버튼, 툴바 등 시각적 요소를 일관되게 제공할 수 있어 가독성과 사용자 경험 측면에서 오히려 장점이 있습니다.

하지만 프론트엔드(방문자 화면)에서는 상황이 다릅니다.

• 로그인 상태가 아니거나, 실제로 Dashicons를 사용하지 않는 페이지에서도 dashicons.min.css가 불필요하게 로드될 수 있습니다.
• 이로 인해 페이지 초기 렌더링 속도(FCP, LCP)에 영향을 주며, 특히 모바일 환경이나 저사양 기기에서는 체감 속도가 느려질 수 있습니다.

따라서 프론트엔드에서 Dashicons를 그대로 로드하는 것은 성능 최적화 관점에서 주의가 필요합니다. 필요하지 않은 경우 조건부 로드하거나,SVG 아이콘 등으로 대체하는 방식이 권장됩니다. 대시콘 비활성화는 perfmatters와 같은 워드프레스 최적화 플러그인으로 프론트엔드에서 비활성화가 가능합니다.