로고와 배경을 하나의 이미지로 합치는 것보다 ‘따로 올리는 것’이 훨씬 좋습니다.

워드프레스 디자인을 세팅할 때 많은 분이 고민하시는 부분이죠. 결론부터 말씀드리면, 로고와 배경을 하나의 이미지로 합치는 것보다 ‘따로 올리는 것’이 훨씬 좋습니다.

시각 디자이너이자 웹 퍼블리셔의 관점에서 그 이유를 3가지로 명확히 설명해 드릴게요.

로고와 배경을 ‘따로’ 올려야 하는 3가지 이유

1. 모바일 화면에서의 완벽한 호환성 (반응형 웹) 가장 큰 이유입니다. 로고와 배경을 하나로 합쳐서 통째로 올리면, 스마트폰처럼 좁은 화면에서 볼 때 전체 이미지가 작게 쪼그라들어 글씨(로고)가 아예 안 보일 수 있습니다.

• 따로 올리면: 워드프레스가 모바일 화면에서는 알아서 배경 이미지의 오른쪽(글자 있는 부분)이나 중앙을 예쁘게 잘라서 보여주고, 로고는 원래 크기를 유지하며 그 위에 선명하게 둥둥 떠 있게 만들어줍니다.

2. 클릭(링크) 기능 활성화 웹사이트의 기본 룰 중 하나는 “어느 페이지에 있든 상단 로고를 클릭하면 무조건 홈(메인)으로 돌아간다”는 것입니다.

• 통째로 올리면: 전체 배경이 하나의 거대한 버튼이 되어버리거나, 클릭 자체가 안 될 수 있습니다.
• 따로 올리면: 로고(마중물 웹키즈뉴스 원형 로고) 영역에만 깔끔하게 홈버튼 링크가 걸립니다.

3. 검색엔진 최적화 (SEO) 구글이나 네이버는 이미지 속에 있는 글자를 잘 읽지 못합니다. 대신 우리가 따로 올린 ‘로고’ 이미지 파일에 달아둔 이름표(“마중물 웹키즈뉴스 로고”)를 읽고, 이곳이 어떤 사이트인지 파악합니다. 배경과 하나로 합치면 이러한 SEO 점수를 얻기 어렵습니다.

워드프레스에 최적화로 세팅하는 방법

지금 대표님께서 가지고 계신 두 이미지는 각각 완벽하게 준비되었습니다. (배경 이미지의 왼쪽 여백이 아주 이상적으로 빠졌네요!)

1. 로고 (원형 이미지): 이미 세팅하신 대로 [사용자 정의하기] -> [사이트 아이덴티티] -> 로고에 올립니다.
2. 배경 (WEBKIDS 슬로건 이미지): [사용자 정의하기] -> [배경 이미지(Background Images)] -> 헤더(Header)에 올려줍니다.
   • 배경 이미지를 올린 후, 설정 창에서 배경 크기(Background Size)를 ‘Cover’로 맞추고, 배경 위치(Background Position)를 ‘Center Right’ (또는 상황에 맞게 조정)로 맞춰주시면 로고는 왼쪽에, 슬로건은 오른쪽에 완벽하게 배치됩니다.