웹에서 문서나 블로그 글을 보면, 심심치 않게 본문에 아이콘과 이모티콘이 사용된 것을 보게 됩니다.
아이콘과 이모티콘을 적절하게 사용하면, 내가 중요하게 생각하는 내용을 독자가 더 집중해서 볼 수 있도록 글에 가독성을 높여줍니다.
그래서 오늘은 워드프레스 글쓰기에서 아이콘과 이모티콘 사용 및 삽입 방법에 대한 내용을 정리해 보도록 하겠습니다.

이모지 활용으로 쉽게 아이콘 및 이모티콘 삽입하기
제가 가장 많이 쓰고 있는 방법입니다. 운영체제 윈도우 사용자라면 다 사용하실 수 있는 기능인데요.
‘윈도우 키 + . (마침표)’ 또는 ‘윈도우 키 + ; (세미콜론)’ 단축키를 누르면, 이모지 화면이 보여집니다.
직관적인 화면 구성과 다양한 원하는 모양을 선택해 마우스로 클릭만 하면, 글 안에 삽입이 됩니다.
정말 간단하고 쉽죠?
재미있는 움직이는 GIF 사진들도 많고, 오른쪽처럼 ASCII 이모티콘 (●’◡’●)도 다양하게 준비돼 있으니 한번 사용해 보시기 바랍니다.
CSS 활용으로 이모티콘 삽입하기
고급 기술이라 말씀드려야 될까요? 앞서 소개한 이모지는 하나하나 원하는 위치에 원하는 아이콘을 매번 골라 넣어야 하는 번거로움이 있습니다.
하지만, CSS 코드를 활용한다면, 아주 편리하게 아이콘을 넣을 수 있습니다.
이모지와 같이 원하는 위치에 아이콘 삽입은 어렵지만, 간단한 방법으로 단락이나 문장 맨 앞쪽 또는 뒤쪽에 나오게 하는 건 가능합니다.
사용 방법은 먼저 원하는 아이콘 사진을 미디어에 업로드 하는 겁니다. 워드프레스 왼쪽 메뉴 위 쪽을 보시면, ‘미디어’ 항목에 있는 ‘미디어 파일 추가’를 선택합니다.
이곳에 원하는 아이콘 사진을 업로드하고, ‘클립보드에 URL 복사’를 클릭해 주소를 복사해 둡니다.

다음으로 ‘추가 CSS’에 아래 코드를 넣습니다. 워드프레스 왼쪽 메뉴에서 ‘모양 -> 사용자 정의’ 순으로 클릭하시고 다음 나오는 메뉴에서 ‘추가 CSS’를 선택하시면 됩니다.
/* 문단 앞에 지정한 아이콘 추가하기 */
.V-ico::before { /* 'V-ico' 클래스 이름을 바꿔 사용하세요 */
content: "";
display: inline-block;
width: 1em; /* 글자 크기에 비례 */
height: 1em;
margin-right: 0.5em; /* 텍스트와 간격 */
vertical-align: middle; /* 텍스트와 수직 정렬 */
background: url("처음 복사해둔 URL 주소 붙여 넣으면 됩니다.") no-repeat center center / contain;
}

추가 CSS에 위 코드를 넣고, 앞서 복사해둔 아이콘 URL 주소를 코드 안 아래쪽에 붙여 넣습니다.
괄호 안에 제가 ‘처음 복사해둔 URL 주소 붙여 넣으면 됩니다’ 라고 글씨를 적어 놓은 곳에 붙여 넣기 하시면 됩니다.
기존 제가 써넣은 글은 꼭 지우시고요. 공개 버튼을 눌러 내용을 저장합니다.
이제 모든 준비가 끝났습니다.
워드프레스 글쓰기 하실 때, 문장 앞 아이콘이 나오게 하려면, 오른쪽 블록 에디터 편집 화면에 있는 고급 기능, 추가 CSS 클래스 안에 ‘V-ico’를 입력하시면, 미디어에 올렸던 아이콘 사진이 글 앞에 나오게 됩니다.
참고로 ‘V-ico’를 입력하는 이유는 위 코드 클래스 이름이 ”V-ico’이기 때문입니다.
저는 기억력이 나쁘기 때문에 클래스 이름을 ico-1, ico-2, 이런 식으로 간단하게 지어 사용하고 있습니다. 여러분도 취향 것 이름을 바꿔 사용해 보시기 바랍니다.

마치며
CSS 코드를 잘 다루신다면, 본문만 아닌 목록, 제목 등, 다양한 곳에 원하는 코드를 넣을 수 있습니다.
물론 코드 다루는 게, 서투르다 하여도, 챗 gpt와 같은 AI 사용으로 충분히 커버가 되지요.
개인적으로 CSS 방법은 잘 사용하지 않고, 이모지 사용을 선호합니다. 뭐 기능적인 이유는 없고, 단지 이모지 사용이 저에게는 더 편합니다.
결론적으로 앞서 알려준 두 가지 방법을 사용해보시고, 자신에게 맞는 걸 선택해 사용하시기 바랍니다.
마지막으로 플러그인으로 아이콘을 넣는 기능도 있기는 하나, 사이트 속도와 영향이 있는 관계로 본 포스팅에서는 소개하지 않겠습니다.