PeepSo 로그인 상자 제거가 안 될 때 추가 CSS로 해결한 과정

PeepSo 로그인 상자 제거가 필요한 상황은 생각보다 자주 생깁니다. 커뮤니티 기능은 사용하고 싶지만, 비로그인 방문자에게 큰 로그인 박스와 랜딩 이미지가 먼저 보이면 페이지가 너무 무겁게 느껴질 수 있기 때문입니다.

저도 PeepSo Plugin을 설치한 뒤 처음에는 기본 화면을 그대로 두려고 했습니다. 하지만 방문자 입장에서 보면 게시글보다 로그인 영역이 먼저 크게 보였고, 특히 상단 이미지까지 함께 나오면서 실제 콘텐츠가 아래로 밀리는 느낌이 강했습니다.

당장 회원 가입을 적극적으로 받을 계획이 없다면 PeepSo 로그인 상자 제거를 먼저 해두는 편이 페이지 흐름을 정리하는 데 도움이 됩니다. 이번 글에서는 워드프레스에서 추가 CSS를 이용해 로그인 박스, 랜딩 이미지, 페이지 제목을 차례대로 숨기는 과정을 정리해보겠습니다.

PeepSo 로그인 상자 제거가 필요했던 이유

PeepSo를 설치하면 커뮤니티 페이지가 자동으로 만들어지고, 비로그인 방문자에게 로그인 또는 회원 가입을 유도하는 영역이 표시됩니다. 커뮤니티 운영 초기라면 이 기능이 나쁘지는 않지만, 게시글 목록이나 커뮤니티 콘텐츠를 먼저 보여주고 싶은 경우에는 오히려 방해가 될 수 있습니다.

특히 기본 랜딩 화면은 이미지와 로그인 입력창이 함께 나오기 때문에 공간을 꽤 많이 차지합니다. 데스크톱에서는 그나마 괜찮아 보일 수 있지만, 모바일에서는 첫 화면 대부분을 로그인 영역이 차지할 수 있습니다.

처음에는 PeepSo 설정에서 문구를 지우거나 이미지를 제거하면 해결될 줄 알았습니다. 하지만 설정 화면에서 이미지를 삭제해도 실제 페이지에서는 원하는 만큼 깔끔하게 사라지지 않았습니다. 결국 PeepSo 로그인 상자 제거는 설정 화면보다 추가 CSS로 처리하는 방식이 더 확실했습니다.

PeepSo 설정에서 먼저 확인했던 부분

워드프레스 관리자 화면에서 PeepSo 설정으로 들어가면 Appearance 관련 메뉴 안에서 랜딩 페이지 문구와 이미지를 조정할 수 있습니다. 여기에는 Callout header, Callout text, Button text 같은 입력 항목이 있고, Landing page image 영역에서 이미지를 선택하거나 제거하는 버튼도 보입니다.

이 화면만 보면 로그인 영역을 쉽게 지울 수 있을 것처럼 보입니다. 하지만 실제로는 문구를 비우거나 이미지를 제거해도 페이지 구조 자체가 남아 있는 경우가 있습니다.

저는 이 부분 때문에 처음에 조금 헷갈렸습니다. 설정을 바꿨는데도 페이지 상단에는 여전히 큰 영역이 남아 있었고, 로그인 입력창도 그대로 표시됐습니다. 그래서 단순 설정 변경보다는 CSS로 해당 영역을 직접 숨기는 방식으로 방향을 바꿨습니다.

비로그인 방문자에게 보이는 기본 화면

PeepSo 커뮤니티 페이지를 비로그인 상태로 열면 로그인 입력창과 랜딩 이미지가 함께 표시됩니다. 회원제 커뮤니티를 적극적으로 운영한다면 필요한 영역이지만, 공개형 페이지처럼 쓰고 싶다면 화면을 많이 차지하는 요소가 됩니다.

이 화면에서 가장 먼저 신경 쓰였던 부분은 로그인 입력창이었습니다. 게시글이 없거나 커뮤니티 초기 상태일 때는 로그인 박스가 더 눈에 띄고, 방문자는 실제 페이지 내용보다 로그인 요구 화면을 먼저 보게 됩니다.

그래서 PeepSo 로그인 상자 제거를 적용해 상단의 입력창부터 숨겼습니다. 이때 중요한 점은 Code Snippets 같은 PHP 코드 삽입 방식이 아니라, 테마 사용자 정의의 추가 CSS에 넣어야 한다는 점입니다.

추가 CSS에서 로그인 상자 숨기기

워드프레스 관리자 화면에서 외모 > 사용자 정의하기로 들어가면 추가 CSS 메뉴를 찾을 수 있습니다. 대부분의 테마에서 제공하는 기본 기능이라 별도 플러그인을 설치하지 않아도 됩니다.

추가 CSS 영역에 아래 코드를 넣으면 PeepSo 랜딩 페이지의 로그인 입력 박스를 숨길 수 있습니다.

.ps-landing__form {display: none;}

이 코드를 적용한 뒤 페이지를 새로고침하면 로그인 입력창이 보이지 않게 됩니다. 다만 이 설정은 로그인 박스만 숨기는 것이기 때문에 랜딩 이미지는 여전히 남아 있을 수 있습니다.

PeepSo 로그인 상자 제거만으로 화면이 충분히 정리되는 경우도 있지만, 저는 이미지까지 함께 숨기는 편이 더 깔끔했습니다. 커뮤니티 페이지를 게시글 목록처럼 보이게 만들고 싶다면 다음 CSS도 함께 적용하는 것이 좋았습니다.

랜딩 페이지 이미지까지 함께 숨기기

로그인 입력창만 제거하면 상단 이미지만 덩그러니 남을 수 있습니다. 이 경우 페이지가 완전히 정리된 느낌이 들지 않고, 오히려 빈 영역처럼 보일 수 있습니다.

랜딩 이미지까지 숨기려면 추가 CSS에 아래 코드를 함께 넣으면 됩니다.

.ps-landing__cover {display: none;}

이 코드를 적용하면 PeepSo 기본 랜딩 이미지 영역이 사라집니다. 로그인 박스와 이미지를 모두 숨기면 방문자는 더 빠르게 커뮤니티 페이지 본문으로 이동하게 됩니다.

다만 회원 가입을 적극적으로 유도해야 하는 사이트라면 이 설정이 맞지 않을 수도 있습니다. 로그인 영역은 방문자에게 가입 행동을 안내하는 역할도 하기 때문에, 사이트 운영 방향에 맞춰 적용하는 것이 좋습니다.

저는 당분간 회원 가입보다 콘텐츠 노출을 우선으로 생각했기 때문에 PeepSo 로그인 상자 제거와 랜딩 이미지 숨김을 함께 적용했습니다.

페이지 제목까지 정리했던 이유

로그인 박스와 이미지를 숨긴 뒤에도 페이지 상단에는 Home 같은 페이지 제목이 남아 있었습니다. 커뮤니티 페이지를 일반 게시판처럼 보여주고 싶다면 이 제목도 어색하게 느껴질 수 있습니다.

페이지 제목까지 숨기려면 아래 CSS를 추가하면 됩니다.

.page .entry-title {
display: none;
}

이 코드는 페이지 제목 영역을 숨기는 방식입니다. 다만 사이트 전체 페이지 제목에 영향을 줄 수 있기 때문에 적용 후 다른 페이지 화면도 함께 확인하는 것이 좋습니다.

특정 PeepSo 페이지에만 적용하려면 페이지 ID를 확인해서 더 좁은 범위로 CSS를 작성하는 방법도 있습니다. 하지만 간단히 테스트하는 단계라면 위 방식으로 먼저 변화를 확인해도 충분했습니다.

적용 후 화면에서 달라진 부분

CSS를 적용한 뒤에는 상단에 크게 보이던 로그인 입력창과 랜딩 이미지가 사라졌습니다. 페이지 첫 화면이 훨씬 단순해졌고, 방문자가 커뮤니티 영역을 더 빠르게 확인할 수 있게 됐습니다.

PeepSo 로그인 상자 제거를 적용하기 전에는 페이지가 회원 가입 안내 화면처럼 보였지만, 수정 후에는 일반 커뮤니티 목록에 가까운 느낌이 났습니다. 특히 모바일에서 첫 화면이 짧아진 점이 가장 크게 느껴졌습니다.

OpenLiteSpeed나 LiteSpeed Cache를 사용하는 환경이라면 CSS 적용 후 바로 반영되지 않을 수 있습니다. 이때는 워드프레스 캐시, LiteSpeed Cache 캐시, 브라우저 캐시를 순서대로 비우고 다시 확인하는 것이 좋습니다.

CyberPanel이나 서버 캐시를 함께 쓰는 경우에도 예전 CSS가 남아 있을 수 있으니, 수정 후에는 시크릿 창에서 다시 확인하는 편이 안전했습니다.

정리해서 넣을 CSS

아래 코드를 추가 CSS에 넣으면 로그인 박스, 랜딩 이미지, 페이지 제목을 한 번에 숨길 수 있습니다.

.ps-landing__form {display: none;}

.ps-landing__cover {display: none;}

.page .entry-title {
display: none;
}

다만 페이지 제목 숨김 코드는 다른 페이지에도 영향을 줄 수 있습니다. 적용 후 사이트의 주요 페이지를 몇 개 확인해보고, 문제가 있으면 PeepSo 페이지에만 적용되도록 범위를 좁히는 편이 좋습니다.

PeepSo 로그인 상자 제거 시 주의할 부분

PeepSo 로그인 상자 제거를 적용하면 비로그인 방문자에게 로그인 안내가 줄어듭니다. 방문자 입장에서는 화면이 깔끔해지지만, 댓글 작성이나 반응 기능을 적극적으로 쓰는 사이트라면 로그인 유도 흐름이 약해질 수 있습니다.

커뮤니티를 회원제로 키우려는 목적이라면 로그인 상자를 완전히 숨기기보다 위치나 디자인만 조정하는 방법도 생각해볼 수 있습니다. 반대로 게시글이나 자료를 먼저 보여주는 운영 방식이라면 숨기는 쪽이 더 자연스러웠습니다.

저는 초기 운영 단계에서 불필요한 가입 유도보다 페이지 흐름을 정리하는 쪽이 더 중요하다고 판단했습니다. 그래서 PeepSo 로그인 상자 제거와 랜딩 이미지 숨김을 함께 적용했고, 결과적으로 첫 화면이 훨씬 가벼워졌습니다.

자주 묻는 질문

관련 글 추천

• BuddyPress 이미지 추가 플러그인 MediaPress 설정 방법 정리
• Rank Math SEO 메타 태그 제거 방법 – 특정 페이지에서 중복 메타 해결하기
• BuddyX 테마 데모 설치 방법 – BuddyPress 커뮤니티 사이트 그대로 적용하기
• WP Staging 사용법 정리 – 워드프레스 테스트 사이트 만드는 방법