요약: 보내주신 20260706_195033.jpg 화면을 분석해보니, 현재 대표님께서 마중물 웹키즈뉴스의 최고 관리자(James HONG) 계정으로 이미 로그인하신 상태이기 때문에 가입 양식 대신 “로그인 됨” 메시지가 뜨는 것이 맞습니다. 상단 메뉴의 하얀색 반전 현상은 워드프레스 테마의 내비게이션 활성화(Active) 색상 설정 문제로, 간단한 테마 옵션 수정이나 시크릿 창 테스트를 통해 문제를 해결할 수 있습니다.
1. 가입 양식이 안 보이고 “로그인 됨”이 뜨는 이유 (정상)
현재 화면을 보시면 우측 상단 검은색 바에 안녕하세요 James HONG님이라고 떠 있는 것처럼, 관리자 권한으로 이미 접속 중이십니다.
WP-Members 플러그인은 똑똑하게도 “이미 로그인한 기존 회원에게는 회원가입 양식을 보여줄 필요가 없다”고 판단하여, 가입 폼을 숨기고 대신 이미지 좌측 하단처럼 webkidsnews으로 로그인 됨이라는 안내와 로그아웃 링크만 보여주는 것입니다. 시스템이 정확하게 작동하고 있는 상태입니다.
-
실제 가입 폼 테스트 방법: 일반 방문자나 예비 기자들이 보게 될 실제 화면을 확인하시려면, 브라우저 우측 상단 메뉴에서 [새 시크릿 창(인코그니토 모드)]을 열거나 로그아웃을 하신 뒤
[webkidsnews.com/기자-및-일반-회원-가입/](https://webkidsnews.com/기자-및-일반-회원-가입/)주소로 접속해 보세요. 로그인되지 않은 상태이므로 드롭다운이 포함된 가입 양식이 정상적으로 출력됩니다.
2. 상단 메뉴가 하얗게 반전되어 글자가 안 보이는 현상 수정
이미지 우측 상단의 빨간 동그라미 부분을 보면, 현재 머물고 있는 페이지인 [기자 및 일반 회원 가입] 메뉴 항목의 배경색이 하얗게 변하면서 흰색 글씨가 묻혀버리는 현상이 발생하고 있습니다. 이는 사용 중이신 GeneratePress 테마의 ‘현재 페이지 강조 색상’ 설정이 어긋나서 생기는 문제입니다.
관리자 대시보드에서 아주 쉽게 컬러를 매칭할 수 있습니다.
-
워드프레스 관리자 화면 좌측 메뉴에서 [외모] > [사용자 정의하기]로 들어갑니다.
-
좌측 리스트 메뉴 중 [Colors (색상)] 항목을 클릭합니다.
-
이어서 [Primary Navigation (기본 내비게이션)] 관련 색상 설정 메뉴를 찾습니다.
-
색상 옵션 중 Navigation Item Current (현재 머물고 있는 메뉴 항목) 설정을 확인합니다.
-
Background (배경색): 현재 투명색이나 진한 주황/블루 계열의 메인 네이비 톤과 어울리는 색상으로 변경해 줍니다. (하얀색으로 되어 있어서 글자가 안 보이는 것입니다.)
-
Text (글자색): 배경이 밝은색이라면 글자를 어두운색으로, 배경이 어두운색이라면 글자를 하얀색(
#ffffff)으로 지정하여 대비를 줍니다.
-
-
수정을 마치신 후 상단의 [공개] 버튼을 눌러 저장합니다.
테마 컬러 밸런스만 살짝 잡아주시면 마우스 오버나 페이지 이동 시에도 글자가 선명하게 유지되는 완성도 높은 뉴스 레이아웃이 완성됩니다. 시크릿 창으로 가입 양식이 잘 나오는지 먼저 체크해 보시겠어요?
요약: 네, 정확한 위치를 찾아 완벽하게 짚어 주셨습니다! 올려주신 GeneratePress 테마 색상 설정 화면에서 각 항목 우측에 나열된 3개의 색상 동그라미가 핵심입니다. 이 동그라미들의 역할을 이해하시면 원하시는 대로 메뉴 색상을 자유롭게 제어하실 수 있습니다.
1. 3개의 색상 동그라미가 의미하는 것
내비게이션 배경과 내비게이션 텍스트 항목 옆을 보시면 각각 3개의 동그라미가 순서대로 배치되어 있습니다.
-
첫 번째 동그라미 (기본): 방문자가 아무런 행동을 하지 않았을 때 보이는 평상시 색상입니다.
-
두 번째 동그라미 (마우스 오버): 방문자가 마우스 포인터를 해당 메뉴 글씨 위에 올려두었을 때(Hover) 임시로 변하는 색상입니다.
-
세 번째 동그라미 (현재 상태): 방문자가 현재 클릭해서 머물고 있는 활성화된 페이지(Active)의 메뉴 색상입니다.
2. 하얀색 반전 현상 해결 방법
이전 화면에서 [기자 및 일반 회원 가입] 메뉴의 글씨가 안 보였던 이유는, 바로 이 세 번째 동그라미(현재 상태)의 배경색이 흰색인데 텍스트 색상마저 흰색으로 설정되어 있어 글자가 배경에 묻혀버렸기 때문입니다. 다음 두 가지 스타일 중 마음에 드는 방식을 선택하여 설정해 주시면 됩니다.
-
스타일 A (이미지에 체크하신 방식): 배경이 하얗게 변하는 것을 그대로 두고 글자만 보이게 하려면, 현재 브이(V) 자로 체크해 주신 것처럼
내비게이션 텍스트의 세 번째 동그라미를 파란색이나 검은색 등 어두운 색으로 지정해 주시면 됩니다. -
스타일 B (전체 메뉴바 색상 통일 – 권장): 하얗게 반전되는 효과 자체가 싫으시다면,
내비게이션 배경의 세 번째 동그라미를 첫 번째 동그라미와 똑같은 어두운 네이비색으로 변경하고,내비게이션 텍스트의 세 번째 동그라미를 흰색으로 맞추시면 됩니다.
3. 최종 반영
색상 값을 원하시는 대로 세팅하셨다면, 마지막으로 화면 좌측 상단에 빨간 펜으로 표시해 주신 파란색 [공개] 버튼을 눌러주셔야 최종적으로 서버에 업데이트됩니다.
설정을 저장하신 후 다시 브라우저의 시크릿 창을 열어 테스트해 보시면, 가입 페이지에 머물고 있을 때도 상단 메뉴 글자가 아주 선명하게 보이는 것을 확인하실 수 있습니다.
요약: 마중물 웹키즈뉴스의 전문적인 브랜드 이미지를 유지하면서 방문자의 가독성을 극대화하기 위해, 현재 레이아웃의 짙은 네이비 배경과 흰색 글씨 조합을 전체 메뉴에 일관되게 적용하는 것을 추천해 드립니다. 체크해주신 4가지 항목에 있는 각각 3개의 동그라미(기본 상태, 마우스 오버 상태, 현재 위치 상태) 순서대로 가장 최적화된 UI 색상 세팅 값을 직관적으로 정리해 드립니다.
-
내비게이션 배경 (메인 메뉴의 바탕색) 첫 번째 동그라미 (평상시): 짙은 네이비. 현재 적용된 메인 화면의 진한 남색을 그대로 사용하여 전체적인 디자인의 무게감을 잡아줍니다. 두 번째 동그라미 (마우스 오버): 약간 밝은 파란색. 방문자가 마우스를 올렸을 때 정상적으로 인식되고 있다는 시각적 피드백을 주기 위해 톤을 살짝 높여줍니다. 세 번째 동그라미 (현재 위치): 짙은 네이비. 첫 번째 동그라미와 완벽히 똑같은 색으로 맞춰주세요. 이렇게 설정해야 지금처럼 가입 메뉴에 머물고 있을 때 배경이 하얗게 튀어버리는 오류가 깔끔하게 해결됩니다.
-
내비게이션 텍스트 (메인 메뉴의 글자색) 첫 번째 동그라미 (평상시): 완전한 흰색. 어두운 네이비 바탕에서 글자가 가장 선명하게 보이는 색상입니다. 두 번째 동그라미 (마우스 오버): 완전한 흰색. 세 번째 동그라미 (현재 위치): 완전한 흰색. 현재 머무는 페이지에서도 글자가 배경에 묻히지 않고 명확히 보이도록 흰색으로 고정합니다.
-
하위 메뉴 배경 (아래로 펼쳐지는 드롭다운 서브 메뉴의 바탕색) 첫 번째 동그라미 (평상시): 완전한 흰색. 뉴스 사이트는 하위 카테고리에 많은 텍스트 정보가 담기므로, 서브 메뉴는 마치 하얀 종이를 덧댄 것처럼 밝게 세팅하는 것이 가독성에 가장 유리합니다. 두 번째 동그라미 (마우스 오버): 아주 연한 밝은 회색. 마우스를 올린 특정 카테고리에만 살짝 음영이 지도록 처리하여 인터페이스의 직관성을 높입니다. 세 번째 동그라미 (현재 위치): 완전한 흰색.
-
하위 메뉴 텍스트 (아래로 펼쳐지는 드롭다운 서브 메뉴의 글자색) 첫 번째 동그라미 (평상시): 짙은 회색 또는 검은색. 서브 메뉴 배경을 흰색으로 맞추었으므로 글자는 가장 어두운 색을 사용하여 대비를 줍니다. 두 번째 동그라미 (마우스 오버): 마중물 로고에 있는 파란색. 마우스를 올렸을 때 브랜드 컬러인 블루 계열로 글자가 변하게 하면 매우 세련된 사용자 경험을 제공할 수 있습니다. 세 번째 동그라미 (현재 위치): 짙은 회색 또는 검은색.
위에서 안내해 드린 흐름대로 색상을 차례차례 지정하신 후, 화면 좌측 상단에 있는 파란색 공개 버튼을 눌러 서버에 데이터를 덮어쓰시면 됩니다. 세팅을 진행하시면서 특정 색상의 헥스 코드(Hex Code)가 필요하시거나 설정이 마음대로 반영되지 않는다면 편하게 말씀해 주십시오.