☕ 시작
이번 글에서는 Keycloak의 커스텀 테마를 만들어보도록 하겠다.
공식문서가 매우 잘되어있어서 상세한 내용은 공식문서를 참고하면 좋을 것 같다.
Keycloak에 대한 설명과 설치, 실행방법등등은 이미 작성한 글이 있어서 이 글을 참고하면 좋을 것 같다.
나의 Keycloak 실행 환경
OS: window 11 wsl2
IDE: Visual Studio code
설치한 Keycloak 버전: 20.0.2 (ZIP파일 다운로드 후 압축 해제)
🧐 무엇을 할것이냐
먼저 본격적인 내용을 시작하기 전에 Keycloak의 기본 로그인 화면을 살펴보자.
디자이너가 봤을 때는 그렇지 않겠지만, 내 눈에는 충분히 예쁘고 잘만들어진 로그인 화면이다. 🤭
하지만, 예쁜게 중요한 것이 아니다.
Keycloak을 회사에서 런칭할 서비스에 접목해야한다고 생각하면, 수정되어야할 것이 많이 있다.
로고도 수정해야하고,
폰트도 런칭할 서비스에 맞게 수정해야하고,
한글로 텍스트를 수정하고,
색깔도 바꾸고,
등등등그리하여, 이번 글에서는 Keycloak의 UI를 커스텀하는 방법을 알아 보겠다.
먼저! Keycloak의 UI는 어떻게 커스텀할 수 있는지 알아보자.
🌠 커스텀할 수 있는 5가지
결론적으로 이야기하면, 위에 나와 있는 다섯가지를 개발자는 커스텀할 수 있다.
- 로그인 화면
- 계정 관리 화면 (관리자가 계정들을 관리할 때 쓰이는 건지 '나'의 계정을 관리할 때 쓰이는건지는 잘 모르겠음)
- 관리자 콘솔 UI
- 이메일 테마
- Welcome 페이지
이 것들 모두 커스텀하는 방식 자체는 동일한데, 이번 글에서는 로그인 화면을 커스텀하는 방법을 집중적으로 다뤄보도록 하겠다.
🤔 어떻게 커스텀하지?
어떻게 커스텀하는지 궁금해서 이렇게 저렇게 검색을 해보다가 일단 소스코드를 까보자라는 생각이 들어서 소스코드를 살펴봤다.
폴더구조는 이렇게 생겼는데, 하나 하나 까보면 .jar파일들만 가득있다 ㅎㅎ
그리고 자연스럽게 저기 보이는 theme에 눈이 갔다.
이 폴더를 열어보았더니 의문의 Readme파일만 덩그러니 있었다.
Readme파일의 내용을 대충 요약하면 이렇다.
build하면 너가 만든 커스텀 테마가providers폴더에.jar파일로 만들어질거야.start-dev명령어로 개발 서버를 실행할 때는 커스텀 테마를 수정하고 서버를 재시작할 필요 없어. 새로고침만 하면 바로 적용될거야.- Built-in 테마는 수정할 수 없고, 커스텀을 원하면 새로운 테마를 만들어야해. 공식문서에 자세하게 설명이 되어 있어.
개인적으로는 뭔가 단서를 찾았더니 다음 단서를 알려주고 그래서 방탈출하는 느낌이였다 🤭
어쨋든 그렇다면, 위에서 안내해준 공식문서를 살펴보자.
🧐 커스텀 테마를 만드는 방법
공식문서를 읽어보면, 하나의 커스텀 테마를 구성하는 요소들은 아래와 같다고 한다.
HTML 템플릿 (Freemarker 템플릿 엔진을 사용)
이미지
메세지 또는 텍스트에 대해서 정의한 파일들 (i18n느낌이라고 보면 된다.)
스타일 시트 (css)
스크립트 파일 (js)
테마 설정 파일또, 이전 섹션에서 언급한 커스텀할 수 있는 5가지 중에서 로그인 화면에 대한 테마를 만들고 싶다면 아래와 같이 파일을 구성하면 된다고 한다.
themes폴더 하위에 새롭게 만들 테마의 이름으로 폴더 생성- 그 하위에 커스텀하고자 하는 항목의 폴더를 생성 (ex. login)
- 그 하위에 HTML템플릿 파일, 이미지등등을 생성
흠~ 이제 어떻게 커스텀하는 지 알았으니 한번 실제로 나만의 로그인화면을 만들어보자.
⭐ 나만의 로그인 테마 만들기
1) theme.properties파일 생성
먼저 theme.properties파일을 위와 같이 생성해주자.
그리고 로그인화면에 접속하면 위와 같은 화면이 보여지는 것을 확인할 수 있다.
커스텀할 수 있는 뼈대가 갖춰진 것이다.
2) css 파일 추가하기
뼈대가 갖춰졌으니 css를 수정해보자.
css 파일은 커스텀 폴더/resources/css폴더 하위에 생성하면 된다고 한다.
css파일을 이렇게 생성해주고,
설정파일에서 css파일을 import하는 설정을 추가해주자.
그리고 로그인 화면을 다시 확인해보면 이렇게 내가 적용하고자 하는 css가 잘 적용된 것을 확인할 수 있다.
디자인을 커스텀할 수 있다는 것을 알았는데, 화면에 적혀있는 텍스트들과 html태그를 다시 작성하고 싶다는 생각도 든다.
3) HTML 템플릿 작성하기
Keycloak의 템플릿은 Freemarker 템플릿 엔진을 사용한다.
나는 thymeleaf 밖에 할 줄 모르는데... 🤔
그렇다면! 기존에 만들어진 템플릿을 참고해보자! ㅎㅎ
찾아보니 Alfresco라는 누군가 만든 템플릿이 있었다. 깃헙에서 확인해보자.
이 템플릿을 확인해보니 template.ftl파일과 login.ftl파일을 활용해서 로그인페이지를 구현하였다.
이것을 참고해서 나도 한번 해보겠다.
짜잔 🌠
ㅋㅋㅋㅋ 나만의 커스텀 로그인 페이지를 만들어보았다! 🔥
☕ 마무리
이번 글에서는 Keycloak에 커스텀 로그인 페이지를 구성해보았다 ㅎㅎ
내가 만든 키클락 서버의 레포지토리 링크를 남기고 이번 글은 마무리해보도록 하겠다 🤭
그럼 이만!
