워드프레스 사이트 화면 옆에 배치된 손그림 캐릭터

워드프레스 사이트에 나만의 캐릭터를 만들 때 고려할 것

워드프레스 사이트에 캐릭터를 넣고 싶은데, 그림부터 그리면 될까요? 막상 시작하면 로고에 넣을지, 글 사이에 둘지, 작은 화면에서도 보일지부터 막막해집니다.

답은 간단합니다. 그림보다 먼저 사이트의 목적과 캐릭터의 역할을 정하고, 대표 위치 한 곳과 보조 위치 한 곳에서 시험해야 합니다.

예쁜 그림만으로는 부족합니다.

캐릭터에게 사이트에서 맡길 일을 먼저 정합니다

사이트의 캐릭터는 크게 세 가지 일을 할 수 있습니다. 로고처럼 정체성을 보여 주거나, 본문과 버튼 주변에서 분위기를 만들거나, 작게 줄여도 사이트를 알아보게 하는 표지가 되는 일입니다.

워드프레스에서 사이트 로고는 사이트를 대표하는 이미지입니다. 사이트 아이콘은 브라우저 탭, 북마크, 모바일 화면에서 사이트를 알아보게 하는 별도의 이미지입니다.

블록 테마를 쓴다면 모양과 설정에 따라 사이트 제목, 태그라인, 로고, 사이트 아이콘을 관리하는 영역도 확인할 수 있습니다.

따라서 첫 질문은 “어떤 캐릭터가 예쁠까?”가 아닙니다. “이 캐릭터는 방문자에게 무엇을 알려 줄까?”에 가깝습니다.

역할을 먼저 정해야 합니다.

이름과 글만 있던 사이트가 달라 보이는 순간

네이버나 티스토리에서 옮겨 온 뒤, 글 목록과 제목만 있는 워드프레스 화면을 보고 “사이트는 열렸는데 아직 내 집 같지 않다”고 느끼는 사람이 많습니다.

이때 반복해서 등장하는 손그림 캐릭터는 단순한 장식 이상의 표지가 될 수 있습니다. 글을 읽기 전에도 사이트의 분위기와 운영자의 인상을 빠르게 보여 주기 때문입니다.

작은 가게나 매체도 비슷합니다. 가게 이름만 있는 화면보다 같은 캐릭터가 소개 페이지와 안내 문장에 이어서 나타날 때, 방문자는 사이트의 분위기를 한눈에 파악하기 쉽습니다.

다만 캐릭터가 검색 순위를 올리거나 방문자를 자동으로 늘려 주는 것은 아닙니다. 캐릭터의 역할은 발견보다 기억과 식별에 가깝습니다.

캐릭터는 방문자를 데려오지 않습니다.

처음에는 대표 위치 하나와 보조 위치 하나면 충분합니다

처음부터 캐릭터를 사이트 곳곳에 도배하지 마세요. 누구에게 어떤 인상을 남길지 정한 뒤, 대표 위치 한 곳과 보조 위치 한 곳에만 배치하는 편이 현실적입니다.

개인 블로그라면 소개 페이지의 프로필 옆에 캐릭터를 두고, 본문에는 작은 안내 그림 하나만 넣어도 충분합니다. 독자가 글을 읽는 흐름을 끊지 않는 것이 우선입니다.

가게나 작은 매체라면 로고 또는 사이트 아이콘처럼 반복해서 보이는 위치를 먼저 정하는 편이 좋습니다. 그다음 필요할 때 글 속 안내 그림을 추가합니다.

사이트 아이콘으로 쓸 때는 더 어려운 시험을 통과해야 합니다. 정사각형 이미지가 필요하고, 워드프레스 공식 문서는 최소 512×512픽셀을 안내합니다.

가로로 긴 전신 캐릭터를 그대로 줄이면 얼굴도 특징도 사라질 수 있습니다. 사이트 아이콘용으로는 얼굴이나 실루엣만 따로 단순하게 만든 버전이 필요합니다.

작게 보일수록 더 단순해야 합니다.

작은 화면에서도 알아보이는 구조가 오래 갑니다

좋은 캐릭터는 한 장의 멋진 그림보다 반복해서 쓸 수 있는 구조를 가집니다. 얼굴이나 외곽선이 작아져도 알아보이고, 표정 몇 가지로 글의 상황을 도울 수 있어야 합니다.

밝은 배경과 어두운 배경에서 모두 무너지지 않는지도 살펴보세요. 로고에서는 또렷했는데 본문에 넣자 선이 흐려지는 일이 생각보다 쉽게 생깁니다.

본문에 넣을 때는 캐릭터가 설명해야 하는 이미지인지, 분위기만 더하는 장식인지 나눠야 합니다. 설명하는 이미지라면 핵심 내용을 대체 텍스트에 적고, 장식이라면 불필요한 설명을 넣지 않는 편이 좋습니다.

워드프레스의 이미지 블록에서는 이미지의 정렬, 크기, 자르기, 캡션, 링크, 대체 텍스트를 조정할 수 있습니다. 다만 실제 모습은 사용하는 테마와 화면 크기에 따라 달라집니다.

특히 고정된 높이로 이미지를 억지로 맞추면 화면이 바뀔 때 어색하게 잘릴 수 있습니다. 특별한 이유가 없다면 이미지 높이를 고정하지 않는 편이 안전합니다.

글 옆에 큰 캐릭터를 세우는 배치도 조심해야 합니다. 데스크톱에서는 귀여워 보여도 모바일에서는 글을 좁혀 읽기 어렵게 만들 수 있습니다.

모바일에서 먼저 확인하세요.

직접 꾸밀 때 가장 자주 막히는 지점

손으로 캐릭터를 그리고 워드프레스에 올리는 과정은 생각보다 여러 번의 판단을 요구합니다. 원본 그림, 투명 배경 그림, 작은 아이콘용 그림을 따로 준비해야 하고, 같은 캐릭터를 위치마다 다시 잘라야 할 때도 있습니다.

이미지를 올린 뒤에는 “왜 로고에서는 괜찮은데 글에서는 너무 큰가?”라는 문제가 생깁니다. 정렬을 바꾸고 크기를 줄여도 테마의 여백과 모바일 표시 방식 때문에 결과가 달라질 수 있습니다.

직접 해결하는 방식은 작은 사이트에서 시험하기에는 좋습니다. 하지만 글이 쌓이고 캐릭터가 여러 페이지에 반복되면 매번 크기와 간격을 손으로 맞추는 시간이 커집니다.

문제는 그림보다 반복 작업입니다.

이때는 기본 이미지 블록으로 한두 곳을 시험한 뒤, 본문 장식을 자주 조정해야 하는지 판단하세요. 꾸미기 도구를 쓰더라도 캐릭터 배치와 장식처럼 실제로 필요한 기능만 골라야 합니다.

캐릭터와 글의 흐름을 함께 조정하는 DecoBlocks

캐릭터를 글 안에서 대화나 강조와 함께 표현해야 한다면 DecoBlocks가 맡을 수 있는 범위가 분명합니다. 설치한 스티커 팩의 캐릭터 이미지를 Insert Character Sticker로 넣고, 말풍선으로 캐릭터의 말과 본문 설명을 나눌 수 있습니다. 관련 내용은 Section Box에 묶고 중요한 문장은 Highlight로 표시해 장식과 정보를 구분할 수 있습니다.

이 기능은 Block Editor의 블록과 Classic Editor의 숏코드에서 사용할 수 있습니다. 다만 원하는 스티커 팩이 마켓플레이스에 항상 제공되는 것은 아니며, 실제 표시 결과는 테마와 다른 플러그인에 따라 달라질 수 있습니다. 모바일 화면 확인과 대체 텍스트 판단은 별도로 남겨 두고, 글에 필요한 장식만 적용하는 방식이 맞습니다.

귀여움이 글을 방해하지 않게 고르는 기준

캐릭터가 크고 자주 나타날수록 사이트가 더 친근해지는 것은 아닙니다. 모든 문단 사이에 감정 표현을 넣으면 독자는 글보다 장식을 먼저 보게 됩니다.

정보를 전달해야 하는 자리에서 캐릭터가 설명 없이 놀라거나 울고 있다면 오히려 신뢰를 깎을 수 있습니다. 특히 안내문이나 중요한 절차를 다루는 글에서는 표정보다 내용이 앞서야 합니다.

캐릭터의 이름이나 일반적인 아이디어와 구체적으로 그려진 표현은 권리의 범위가 다를 수 있습니다. 다른 사람의 그림이나 유명 캐릭터를 허락 없이 쓰지 말고, 이름과 로고 사용 문제는 별도로 살펴야 하며 개별 판단은 전문가에게 확인하는 것이 안전합니다.

개인 블로그라면 캐릭터 한 명과 표정 두세 가지로 시작하세요. 소상공인이나 작은 매체라면 작아져도 알아보이는 형태를 먼저 만들고, 그다음 본문 장식을 더하는 순서가 좋습니다.

결국 기준은 그림의 화려함이 아닙니다. 로고나 아이콘에서는 식별이 되는지, 본문에서는 글을 가리지 않는지, 정보 이미지에는 대체 텍스트를 넣었는지를 확인하면 됩니다.

본문 장식이 목적이라면 DecoBlocks에서 설치한 스티커 팩의 캐릭터 이미지를 글 안에 넣을 수 있습니다. 캐릭터가 등장하는 대화는 Speech Bubble로, 별도로 강조할 문장은 Highlight로 표시해 서로 다른 역할을 나눌 수 있습니다.

Block Editor에서는 블록으로, Classic Editor에서는 숏코드로 처리합니다. 다만 이 기능이 로고나 사이트 아이콘용 이미지를 대신 준비해 주는 것은 아니므로, 사이트 대표 이미지와 본문 스티커는 따로 판단해야 합니다.

식별성과 읽기 흐름이 기준입니다.

그래서 어디부터 시작할까

개인 블로그라면 소개 페이지의 프로필 옆을 대표 위치로 정하고, 본문 속 작은 안내 그림을 보조 위치로 두세요. 캐릭터 한 명과 표정 두세 가지면 초기 운영에는 충분합니다.

가게나 작은 매체라면 로고 또는 사이트 아이콘처럼 반복해서 보이는 위치에 먼저 적용하세요. 사이트 아이콘으로 사용할 때는 얼굴이나 실루엣 중심의 단순한 정사각형 버전을 따로 준비하는 편이 좋습니다.

본문에 넣을 때는 이미지 블록으로 크기와 정렬을 조정한 뒤, 데스크톱과 실제 모바일 화면에서 글의 폭과 읽는 흐름을 확인하세요. 정보 이미지에는 핵심 내용을 대체 텍스트로 적고, 장식 이미지는 설명을 덜어 내면 됩니다.

캐릭터는 적게 시작하고, 필요할 때만 늘리세요.

자주 묻는 질문

Q. 개인 블로그는 어디부터 시작하면 좋나요?

A. 소개 페이지의 프로필 옆과 본문 속 작은 안내 그림부터 시작하세요. 캐릭터 한 명과 표정 두세 가지면 초기 운영에는 충분합니다.

Q. 모바일에서 캐릭터가 글을 가리면 어떻게 하나요?

A. 먼저 이미지 크기를 줄이고 글 옆 배치를 피하세요. 이미지 블록의 정렬과 크기를 조정한 뒤, 실제 모바일 화면에서 글의 폭과 읽는 흐름을 확인해야 합니다.

Q. 이 문제를 도구로 쉽게 해결할 수 있나요?

A. 기본 이미지 블록만으로도 업로드, 크기, 정렬, 캡션, 링크, 대체 텍스트를 설정할 수 있습니다. 배치를 자주 바꿔야 한다면 사용 중인 테마와 맞는 꾸미기 도구를 비교하되, 필요한 기능부터 확인하세요.

Q. 캐릭터 스티커와 말풍선을 같은 글에 넣을 수 있나요?

A. 가능합니다.

DecoBlocks의 Insert Character Sticker로 설치한 스티커 팩의 캐릭터 이미지를 넣고, Speech Bubble로 캐릭터의 말풍선을 구성할 수 있습니다. Block Editor에서는 블록으로, Classic Editor에서는 숏코드로 사용할 수 있지만 모바일에서 글을 가리지 않는지는 게시 후 따로 확인해야 합니다.

이 글은 데코블럭스를 이용하여 디자인한 글입니다.

구매하기