워드프레스 7.0 관리자 링크 색상 이전처럼 되돌리는 방법
워드프레스 7.0으로 업데이트한 뒤 관리자 화면을 열어보면 가장 먼저 달라진 부분 중 하나가 링크 색상입니다. 기존보다 밝은 파란색과 보라색 계열이 적용되면서 전체적인 관리자 UI의 분위기가 이전 버전과는 다르게 느껴질 수 있습니다.
기능적인 변화는 아니지만, 매일 관리자 화면을 사용하는 운영자라면 익숙했던 인터페이스가 바뀌는 것만으로도 작업 효율이나 가독성에 영향을 받을 수 있습니다. 다행히 이 변경은 CSS를 직접 수정하지 않아도 워드프레스에서 제공하는 기능만으로 쉽게 이전 스타일에 가까운 환경으로 되돌릴 수 있습니다.
색상이 어디에서 오는지부터 확인한다
색을 되돌리기 전에 그 색이 어느 파일에서 오는지 알아야 합니다. 그래야 업데이트로 다시 바뀔 자리인지, 내 설정이 이긴 자리인지 판단할 수 있습니다. 설치된 파일을 직접 확인해 봤습니다.
관리자 색상은 색상 스킴별로 따로 정의돼 있습니다. 설치 폴더를 열어 보면 스킴이 여덟 개 들어 있습니다.
wp-admin/css/colors/
blue coffee ectoplasm light
midnight modern ocean sunrise| 스킴 | 정의된 색상 수 |
|---|---|
| light | 17종 |
| blue | 14종 |
| ectoplasm · ocean | 12종 |
| coffee · midnight · sunrise | 11종 |
| modern | 10종 |
스킴마다 정의하는 색의 개수가 다릅니다. 같은 CSS 규칙을 넣어도 스킴에 따라 결과가 달라지는 이유가 여기에 있습니다. 어떤 스킴에는 아예 없는 색을 덮어쓰려 하면 아무 일도 일어나지 않습니다.
기준이 되는 값
변수 파일에는 기준 링크 색이 이렇게 들어 있습니다.
wp-admin/css/colors/_variables.scss
$link: #0073aa !default;!default가 붙어 있다는 점이 중요합니다. 스킴이 이 값을 덮어쓰지 않았을 때만 쓰인다는 뜻입니다. 그래서 스킴을 바꾸면 같은 자리의 색이 달라집니다. 되돌리려는 색이 이 기준값인지 스킴이 정한 값인지 먼저 구분해야 합니다.
관리자 색과 사이트 색은 완전히 다른 계통이다
자주 겹치는 혼동이 하나 있습니다. 방문자가 보는 화면의 링크 색은 이 파일들과 무관합니다. 테마가 따로 정의합니다. 실제로 사이트를 열어 확인해 보면 이런 값이 나옵니다.
--global-palette1: #2B6CB0;
--global-palette2: #215387;
--global-palette3: #1A202C;관리자 화면을 아무리 손봐도 방문자 화면은 그대로이고, 반대도 마찬가지입니다. 어느 쪽 색을 되돌리려는 것인지를 먼저 정하면 건드릴 파일이 바로 좁혀집니다.
워드프레스 7.0에서 관리자 링크 색상이 변경된 이유
워드프레스 7.0에서는 관리자 화면의 색상 체계가 일부 조정됐습니다.
링크뿐 아니라 버튼, 메뉴, 알림 메시지 등 여러 UI 요소가 함께 변경되면서 전체적인 디자인이 조금 더 현대적인 느낌으로 바뀌었습니다. 따라서 단순히 링크 색상만 달라진 것이 아니라 관리자 색상 구성표 자체가 변경된 것으로 이해하는 것이 맞습니다.
새로운 색상 구성이 마음에 드는 사용자도 있지만, 오랫동안 기존 인터페이스에 익숙했던 경우에는 다소 어색하게 느껴질 수 있습니다.
스킴을 고르면 링크는 오히려 예전 색으로 돌아갑니다
설치된 CSS 파일을 직접 열어 확인해 봤습니다. 기본 상태(Fresh)에서는 색상 스킴 CSS 가 아예 로드되지 않습니다. 이때 링크 색은 wp-admin/css/common.css 한 줄에서 옵니다.
/* Any change to the default link style must be applied to button-link too. */
a {
color: #2271b1;
}그런데 색상 스킴 여덟 개의 CSS 를 열어 보면, 일곱 개가 이 색을 #0073aa 로 덮어씁니다. 7.0 이전에 쓰던 그 색입니다. 다르게 덮어쓰는 것은 modern 하나뿐입니다.
| 상태 | 링크 색 | 마우스를 올렸을 때 | 흰 배경 대비비 |
|---|---|---|---|
| 기본(Fresh, 스킴 없음) | #2271b1 | #135e96 | 5.17 → 6.84 |
| blue · coffee · ectoplasm · light midnight · ocean · sunrise | #0073aa | rgb(0, 149.5, 221) | 5.21 → 3.29 |
| modern | #3858e9 | rgb(23.69…, 58.15…, 214.31…) | 5.61 → 8.01 |
대비비는 두 색의 상대 휘도로 계산한 값입니다. 작은 글씨에 권고되는 기준은 4.5 대 1 입니다. 그러니 “7.0 에서 링크가 밝아져 눈에 거슬린다”는 느낌의 원인은 스킴을 고른 쪽이 아니라 아무것도 고르지 않은 기본 상태입니다. 스킴을 하나라도 고르면 링크는 예전 색으로 돌아갑니다. 바꾸고 싶은 것이 링크 색 하나라면 스킴 선택만으로 끝납니다.
마우스를 올리면 대비가 떨어집니다
일곱 개 스킴의 호버 색은 기본보다 밝습니다. 대비비가 5.21 에서 3.29 로 내려가서 4.5 대 1 을 넘지 못합니다. 링크를 가리키는 순간 글자가 배경에 더 가까워지는 셈입니다. modern 은 반대로 어두워져 8.01 로 올라갑니다. 이 차이는 스킴마다 손으로 정한 것이 아니라 Sass 함수가 기준색의 밝기를 10% 올리거나 내리도록 되어 있어서 생깁니다.
빌드 결과물에 소수점 색이 들어 있습니다
호버 색이 rgb(0, 149.5, 221) 입니다. 색 성분에 소수점이 붙어 있습니다. Sass 가 밝기를 계산한 결과를 반올림하지 않고 그대로 내보낸 것입니다. 압축본에도 같은 수로 남아 있습니다.
| 스킴 | 소수점 rgb() 값 | colors.css |
|---|---|---|
| sunrise | 31개 | 25,774 B |
| coffee · ectoplasm · midnight · modern · ocean | 각 22개 | 25,091~25,386 B |
| light | 16개 | 24,941 B |
| blue | 12개 | 24,823 B |
브라우저는 이 값을 반올림해서 그리기 때문에 화면에 보이는 색은 달라지지 않습니다. 다만 관리자 색을 CSS 로 직접 덮어쓰려고 할 때 #0095dd 로 검색하면 이 줄이 걸리지 않습니다. 찾을 때는 149.5 처럼 소수점 쪽을 찾아야 합니다.
가장 쉬운 해결 방법은 관리자 색상 구성표 변경
별도의 플러그인을 설치하거나 CSS를 수정할 필요는 없습니다.
워드프레스에서는 사용자별로 관리자 화면의 색상 구성표를 변경할 수 있는 기능을 기본 제공합니다.
다음 순서대로 설정하면 됩니다.
- 사용자 → 프로필 메뉴로 이동합니다.
- 관리자 색 구성표(Admin Color Scheme) 항목을 찾습니다.
- Fresh 색상 구성표를 선택합니다.
- 변경 사항을 저장합니다.
대부분의 경우 이 설정만으로도 기존 관리자 화면과 비슷한 느낌의 색상 구성을 사용할 수 있습니다.
개인 블로그나 소규모 사이트처럼 관리자 계정이 하나뿐이라면 이 방법이 가장 간단하고 안전합니다.
여러 관리자가 사용하는 사이트라면 코드로 고정할 수도 있다
사이트를 여러 명이 함께 관리하는 환경이라면 사용자마다 서로 다른 관리자 색상을 사용하는 경우가 생길 수 있습니다.
이럴 때는 워드프레스의 필터를 이용해 특정 색상 구성표를 기본값으로 고정할 수 있습니다.
다음 코드를 테마의 functions.php 파일이나 사이트 전용 플러그인에 추가하면 됩니다.
add_filter( 'get_user_option_admin_color', function( $result ) {
return 'fresh';
} );이 코드는 관리자 색상 옵션을 불러올 때 항상 Fresh 구성표를 반환하도록 동작합니다.
따라서 사용자가 개별적으로 다른 색상을 선택하더라도 지정한 색상 구성이 적용되어 관리자 화면을 일관되게 유지할 수 있습니다.
CSS 수정보다 기본 기능을 사용하는 것이 좋은 이유
링크 색상만 바꾸기 위해 관리자 CSS를 직접 수정하는 경우도 있습니다.
하지만 관리자 화면의 색상은 링크 하나만 독립적으로 적용되는 것이 아닙니다.
다음과 같은 다양한 UI 요소가 동일한 색상 체계를 공유합니다.
- 링크
- 버튼
- 메뉴
- 알림 메시지
- 입력 요소
- 인터페이스 강조 색상
일부 CSS만 수정하면 링크는 원하는 색상으로 변경되더라도 버튼이나 메뉴 색상과 어울리지 않아 디자인이 어색해질 수 있습니다.
또한 워드프레스 업데이트 이후 관리자 CSS 구조가 변경되면 직접 작성한 스타일이 정상적으로 동작하지 않을 가능성도 있습니다.
유지보수까지 고려한다면 워드프레스에서 제공하는 관리자 색상 구성표를 활용하는 것이 가장 안정적인 방법입니다.
어떤 방법을 선택하는 것이 좋을까?
사용 환경에 따라 적절한 방법이 조금 달라집니다.
| 환경 | 추천 방법 |
|---|---|
| 개인 사이트 | 프로필에서 Fresh 색상 구성표 선택 |
| 관리자 여러 명 | 필터를 이용해 Fresh 색상 강제 적용 |
| 특별한 디자인 요구 | 필요한 경우에만 CSS 수정 |
특별한 이유가 없다면 먼저 관리자 색상 구성표를 변경해 보는 것이 좋습니다. 대부분의 경우 별도 코드 수정 없이 원하는 결과를 얻을 수 있습니다.
업데이트 후 관리자 화면이 낯설다면 먼저 확인해 보자
워드프레스의 메이저 업데이트에서는 기능뿐 아니라 관리자 UI도 조금씩 변경되는 경우가 있습니다. 이러한 변화는 사용성을 개선하기 위한 것이지만, 기존 인터페이스에 익숙한 사용자에게는 오히려 불편하게 느껴질 수도 있습니다.
관리자 링크 색상이 이전과 달라졌다면 가장 먼저 사용자 프로필의 관리자 색 구성표를 확인해 보자. 대부분은 Fresh 색상 구성표를 선택하는 것만으로도 익숙했던 화면 분위기를 되찾을 수 있습니다.
여러 관리자가 함께 운영하는 사이트라면 필터를 이용해 기본 색상 구성을 통일하는 것도 좋은 방법입니다. CSS를 직접 수정하는 것보다 유지보수가 쉽고, 워드프레스 업데이트 이후에도 안정적으로 관리할 수 있다는 점에서 더욱 권장할 만한 방법입니다.
