사이트 이름을 정했다면 방문자가 어떤 블로그인지 알아볼 수 있도록 짧은 설명과 로고, 사이트 아이콘을 준비합니다.
처음에는 세 항목이 비슷하게 느껴질 수 있지만 표시되는 위치와 역할이 다릅니다.
이 글에서는 WP-start에 실제로 적용한 화면을 바탕으로 사이트 설명을 입력하고, Twenty Twenty-Five 테마에 로고와 사이트 아이콘을 설정하는 방법을 설명합니다.
화면에 나오는 이름과 디자인, 크기는 이 사이트의 예시이므로 자신의 블로그에 맞게 선택합니다.
1. 사이트 설명·로고·아이콘의 차이 알아보기
- 사이트 설명: 블로그에서 어떤 정보를 다루는지 짧게 소개하는 문장
- 사이트 로고: 사이트 상단이나 하단에 표시하는 이름 또는 그림
- 사이트 아이콘: 브라우저 탭과 북마크 등에 작게 표시되는 정사각형 이미지
워드프레스 일반 설정에서는 사이트 설명을 태그라인이라고 표시합니다.
태그라인을 저장해도 테마에 표시용 블록이 없다면 화면에 나타나지 않을 수 있습니다.
이 사이트에서는 기존 바닥글의 사이트 태그라인 블록에 설명이 표시됐습니다.
2. 자신의 사이트에 맞는 로고와 아이콘 준비하기
로고와 사이트 아이콘은 자신의 사이트 이름과 주제에 맞게 준비합니다.
직접 만들기 어렵다면 ChatGPT나 제미나이에 사이트 이름과 주제, 원하는 분위기를 알려주고 로고 후보를 만들어 달라고 요청하면 됩니다.
WP-start는 워드프레스를 배우는 사이트이므로 책과 W가 함께 있는 디자인을 선택했습니다.
이 글의 로고를 그대로 따라 사용할 필요는 없으며 요리, 여행, 생활 정보 등 자신의 주제가 드러나는 디자인을 고릅니다.
다른 사이트나 브랜드의 로고를 그대로 복사해 자신의 로고로 사용하지 않습니다.
2-1. AI에 요청하는 문장 예시
설명용 요청 예시는 다음과 같습니다.
괄호 안의 내용은 자신의 사이트에 맞게 바꿉니다.
“사이트 이름은 (자신의 사이트 이름)이고, 주제는 (자신의 사이트 주제)입니다.
초보자도 친근하게 느낄 수 있는 로고 후보 3개를 만들어 주세요.
사이트 이름이 들어간 가로형 로고와, 작은 브라우저 탭에서도 알아보기 쉬운 정사각형 아이콘을 각각 제안해 주세요.
다른 브랜드 로고를 그대로 복제하지 말고 글자는 정확하게 표시해 주세요.”
AI가 만든 이미지도 사이트 이름의 철자와 글자 모양을 직접 확인합니다.
배경을 투명하게 요청했다면 체크무늬가 이미지에 그려진 것은 아닌지 확인합니다.
체크무늬 자체가 들어간 파일은 사이트에 올려도 무늬가 그대로 보입니다.
2-2. 로고와 아이콘은 별도 파일로 준비하기
가로형 로고에는 그림과 사이트 이름을 함께 넣을 수 있습니다.
사이트 아이콘은 작게 표시되므로 긴 이름을 넣기보다 알아보기 쉬운 심볼을 중심으로 준비합니다.
이 사이트는 가로형 로고를 1000×375px WebP로, 아이콘을 512×512px PNG로 준비했습니다.
로고 파일 크기는 설명용 예시이며 모든 사이트에서 같은 크기를 사용할 필요는 없습니다.
현재 워드프레스 설정 화면에서는 사이트 아이콘을 정사각형으로 준비하고 최소 512×512px를 사용하도록 안내합니다.
이미지 바깥에 빈 공간이 너무 많으면 설정한 너비에 비해 로고가 작게 보일 수 있습니다.
로고가 잘리지 않을 정도의 여백을 남기되 불필요하게 넓은 여백은 줄여 준비합니다.
3. 사이트 설명을 태그라인에 입력하기
워드프레스 관리자 화면에서 설정 → 일반으로 이동합니다.
사이트 제목 아래의 태그라인 입력란을 찾습니다.
블로그가 누구에게 어떤 정보를 제공하는지 짧은 문장으로 입력합니다.
이 사이트에 입력한 설명 예시는 다음과 같습니다.
워드프레스 설치부터 블로그 운영까지, 초보자를 위한 따라하기 안내
자신의 사이트가 여행 블로그라면 여행 정보를, 요리 블로그라면 요리 정보를 다룬다는 내용으로 작성합니다.
여러 검색어를 나열하기보다 방문자가 읽고 이해할 수 있는 문장으로 작성합니다.
입력한 뒤 화면 아래의 변경 사항 저장을 누릅니다.
설정이 저장되었습니다 안내를 확인합니다.
같은 화면에 있는 워드프레스 주소, 사이트 주소, 관리자 이메일과 회원 가입 설정은 이번 작업과 관련이 없으므로 변경하지 않습니다.
4. 정사각형 사이트 아이콘 설정하기
설정 → 일반 화면에서 사이트 아이콘 선택을 누릅니다.
이미 아이콘이 지정돼 있다면 버튼이 사이트 아이콘 변경으로 표시됩니다.
새 파일을 올리려면 파일 업로드 탭에서 파일 선택을 누릅니다.
이미 올린 파일을 사용하려면 미디어 라이브러리에서 해당 이미지를 선택합니다.
아래는 이 사이트에서 사용한 512×512px 아이콘을 선택한 실제 화면입니다.
선택한 이미지에 체크 표시가 생겼는지 확인하고 오른쪽 아래의 사이트 아이콘 설정을 누릅니다.
이미지 자르기 화면이 나오면 심볼이 잘리지 않는지 확인한 뒤 안내에 따라 확정합니다.
이 사이트는 처음부터 정사각형 파일을 준비해 별도의 자르기 없이 지정했습니다.
일반 설정으로 돌아오면 아이콘 미리보기를 확인하고 변경 사항 저장을 누릅니다.
사이트 로고와 사이트 아이콘을 따로 사용할 예정이라면 다음 단계에서 가로형 로고로 아이콘을 덮어쓰지 않도록 주의합니다.
5. Twenty Twenty-Five 헤더에 로고 넣기
5-1. 현재 사용하는 헤더 열기
관리자 화면에서 모양 → 테마 편집기 → 패턴으로 이동합니다.
왼쪽의 템플릿 부분 영역에서 헤더를 선택합니다.
여러 헤더가 보이면 현재 사이트에서 사용하는 헤더를 엽니다.
이 사이트에서는 이름이 헤더인 템플릿 부분을 사용했습니다.
큰 제목이 있는 헤더나 수직 헤더를 무조건 선택하는 것이 아닙니다.
다른 테마를 사용하면 메뉴 이름과 로고 설정 위치가 달라질 수 있습니다.
헤더 편집 화면에서는 로고와 메뉴를 각각의 블록으로 선택해 편집합니다.
5-2. 사이트 로고 블록과 이미지 지정하기
헤더에 사이트 로고 블록이 있으면 해당 블록을 선택합니다.
없다면 화면 왼쪽 맨 위에서 뒤로가기 화살표 오른쪽에 있는 파란색 + 블록 삽입기 버튼을 누릅니다.
열린 검색창에 사이트 로고를 입력하고 해당 블록을 선택해 헤더 안의 원하는 위치에 추가합니다.
일반 이미지 블록이 아니라 사이트 로고 블록을 선택하는 것이 중요합니다.
블록의 로고 선택을 누른 뒤 업로드 또는 미디어 라이브러리 열기를 선택합니다.
준비한 가로형 로고를 올리거나 미디어 라이브러리에서 선택해 적용합니다.
이미 지정된 로고를 바꾸는 경우에는 교체 버튼을 사용합니다.
이 사이트는 로고 이미지에 WP-start 이름이 들어 있으므로 헤더의 기존 사이트 제목 블록 대신 로고를 표시하도록 구성했습니다.
로고에 이름이 없다면 사이트 제목을 함께 두어도 됩니다.
헤더에서 제목 블록을 빼는 것과 설정 → 일반의 사이트 제목 값을 지우는 것은 다른 작업이므로 사이트 제목 값은 그대로 유지합니다.
5-3. 로고 너비와 홈 링크 확인하기
오른쪽 블록 설정에서 이미지 너비를 조절합니다.
이 사이트는 240으로 설정했지만 자신의 로고와 메뉴 길이에 맞게 조절합니다.
홈으로 이미지 링크를 켜면 방문자가 로고를 눌러 홈으로 이동할 수 있습니다.
이 사이트에서는 같은 탭에서 홈으로 이동하도록 새 탭에서 열기는 끈 상태로 두었습니다.
앞에서 별도의 정사각형 아이콘을 지정했으므로 사이트 아이콘으로 사용은 끕니다.
가로형 로고 전체를 작은 아이콘으로 사용하면 글자가 작아지거나 심볼이 잘릴 수 있습니다.
5-4. 로고와 헤더 저장하기
오른쪽 위의 저장을 누릅니다.
저장 확인 화면이 열리면 변경 대상이 의도한 항목인지 확인합니다.
이 사이트에서는 로고와 헤더 두 항목이 표시됐습니다.
저장 대상이 맞으면 확인 화면의 저장을 한 번 더 눌러 완료합니다.
다른 템플릿이나 메뉴 변경이 함께 표시된다면 의도한 변경인지 확인한 뒤 진행합니다.
6. 실제 사이트에서 로고·아이콘·설명 확인하기
편집기 안에서만 확인하지 말고 (자신의 사이트 주소) 를 브라우저에서 직접 엽니다.
사이트 상단에 로고가 정상적으로 보이고 메뉴와 겹치지 않는지 확인합니다.
개별 글이나 소개 페이지를 연 뒤 로고를 직접 눌러 홈으로 이동하는지도 확인합니다.
화면에 비해 로고가 크다면 파일을 다시 만들기 전에 로고 블록의 표시 너비를 조절해 봅니다.
사이트 설명은 테마의 사이트 태그라인 블록이 있는 위치에 나타납니다.
이 사이트에서는 아래처럼 바닥글에 표시됐습니다.
태그라인을 저장했는데 보이지 않는다면 테마에 사이트 태그라인 블록이 있는지 확인합니다.
설명 문장을 입력했다고 모든 테마의 상단에 자동으로 나타나는 것은 아닙니다.
브라우저 탭에서도 새 사이트 아이콘을 확인합니다.
이전 아이콘이나 로고가 남아 있으면 페이지를 새로고침하고, 캐시 플러그인을 사용한다면 캐시를 비운 뒤 다시 확인합니다.
브라우저가 아이콘을 따로 저장해 두는 경우도 있으므로 새 탭이나 다른 브라우저에서도 확인합니다.
7. 글을 쓸 때마다 다시 설정해야 하나요?
사이트 설명과 로고, 아이콘은 사이트 공통 설정이므로 글을 쓸 때마다 다시 지정할 필요는 없습니다.
다만 테마를 변경하거나 다른 헤더 템플릿을 사용하면 로고와 태그라인의 표시 위치가 달라질 수 있습니다.
이때는 사이트 공통 설정과 실제 화면을 다시 확인합니다.
최종 확인 목록
- 사이트 설명을 자신의 블로그 주제에 맞게 작성했는지
- 예시 로고를 그대로 따라 쓰지 않고 자신의 이름과 주제에 맞는 디자인을 준비했는지
- AI로 만든 로고의 철자와 배경을 확인했는지
- 사이트 아이콘이 정사각형이며 최소 512×512px인지
- 가로형 로고와 사이트 아이콘을 별도로 지정했는지
- 헤더의 사이트 로고 너비가 메뉴와 어울리는지
- 로고를 누르면 홈으로 이동하는지
- 공개 화면에서 로고와 태그라인의 표시 위치를 확인했는지
- 브라우저 탭에서 사이트 아이콘을 확인했는지
마무리
처음부터 복잡한 로고를 만들기보다 자신의 사이트가 어떤 곳인지 알아볼 수 있는 단순한 디자인으로 시작하면 됩니다.
직접 만들기 어렵다면 ChatGPT나 제미나이의 도움으로 후보를 만들고, 작은 크기에서도 알아보기 쉬운지 직접 확인해 선택합니다.
설정을 저장한 뒤에는 (자신의 사이트 주소) 를 열어 방문자에게 보이는 결과까지 확인합니다.