[KeyCloak] 로그인, 회원가입 페이지 로고(타이틀) 변경하기

안녕하세요! 오늘도 열심히 개발중입니다. 최근 keycloak에 푹 빠져서 이것저것 설정을 해보고 있습니다. 아무래도 한국 자료로는 적절한 레퍼런스가 없어 공식 문서를 뒤지거나 영어 사이트들을 찾아보면서 설정을 만지고 있는데요. 이번 포스팅에서는 keycloak에서 대표 로고를 변경하는 방법에 대해서 알아보겠습니다.

 

Keycloak Realm 대표 로고 변경하기

<div id="kc-header-wrapper" class="">
	[realm 페이지에서 설정한 대표 로고]
</div>

keycloak에서는 어드민 페이지에서 설정한 대표 타이틀이 해당 태그 안에 들어갑니다.

 

 

대표 타이틀의 경우 default 값으로 realm의 이름이 설정되는데요. 따라서 설정하지 않는다면 로그인이나 회원가입 페이지에서 realm 이름이 나올 것입니다. 

 

물론 로고를 바꾸는 방법 중 직접 각 로그인,회원가입 ftl 파일을 열어 수동으로 설정해줄 수 있습니다. 하지만 keycloak에서는 로고를 간단히 변경할 수 있게 도와주고 있습니다.

 

admin 페이지의 realm 설정 페이지에 보면 HTML Display name이 있는데요. 여기다가 html 요소를 입력해주면 해당 요소가 모든 페이지 타이틀 로고에 들어가는 모습을 볼 수 있습니다.

 

저같은 경우에는 img 태그를 삽입하여 이미지 로고를 등록해주었습니다. 로그인과 회원가입 페이지에서 잘 적용된 모습을 볼 수 있습니다.

 

아무래도 파란색이다 보니 배경색과 안맞는군요. 적절히 설정해주어 배경색도 바꿔야 겠습니다.