Suggestions

TrueNAS WebUI에 한글폰트 적용하기

2025년 01월 21일

시작하기

TrueNAS의 관리자 WebUI 인터페이스 한국어 번역 적용하기
시작하기 TrueNAS의 관리자 WebUI는 여러가지 언어로 번역되어 다양한 지역의 언어로 변경하여 사용할 수 있습니다. 하지만 설정에서 여타 언어들 (fr, es 등)과 다르게 Korean(ko)로 선택을 하고 적용을 하더라도 여전히 영어로만 출력되고 있습니다. 이렇게 나오는 이유는, TrueNAS의 WebUI의 한국어가 번역되어 있는 파일이 실제로 한국어 번역 텍스트로 되어 있지 않고 원본 그대로 영어로 값이 채워져 있기 때문입니다. 위와 같이 한국어 번역이 들어 있어야 할 파일에 번역이 안된 내용으로 채워져 있기 때문에, 설정에서 한국어를 설정해도 번역이 되지 않은 영문이 계속 노출 되는 이유입니다. 따라서, 이 한국어 번역파일의 내용이 올바르게 한국어로 변역 된 파일로 교체하여 적용하면 올바르게 한국어 번역이 적용 될 수 있게 됩니다. 번역파일

TrueNAS의 관리자 WebUI는 여러 언어로 번역되어 다양한 지역의 언어로 변경하여 사용할 수 있습니다. 그러나 설정에서 Korean(ko)을 선택하고 적용하더라도 여전히 영어로만 출력됩니다. 이는 TrueNAS의 WebUI 한국어 번역 파일이 실제로 한국어 번역 텍스트로 되어 있지 않고 원본 그대로 영어로 값이 채워져 있기 때문입니다. 따라서, 이 한국어 번역 파일의 내용을 올바르게 한국어로 번역된 파일로 교체하여 적용하면 올바르게 한국어 번역이 적용될 수 있습니다. 번역 파일은 이전 게시글인 ‘TrueNAS WebUI 한글 번역을 적용하기’를 참고하여 적용하시면 WebUI의 내용이 한글로 번역되어 나타납니다.

그러나 TrueNAS의 WebUI는 알파벳 기반 언어를 기본으로 하고 있기 때문에, 폰트 설정이 영문 폰트인 Roboto로 지정되어 있어 한글이 기본 폰트로 적용되지 않습니다. 따라서 좀 더 쾌적한 WebUI 환경을 위해서는 custom.css를 사용하여 한글 폰트를 우선순위로 변경해주어야 합니다.

Roboto 영문 폰트를 사용중인 TrueNAS의 WebUI

custom.css 생성

먼저 WebUI에 한글 폰트 삽입을 위한 스타일 시트가 코딩된 custom.css를 작성하고 서버에 업로드합니다. 업로드 경로는 모든 css가 모여 있는 /usr/local/www/webui/assets/styles/ 경로에 생성해 줍니다.

한글 폰트는 사용자가 희망하는 대로 어떤 것이든 상관없습니다. Noto sans KR, Pretendard, IBM Plex KR, Spoqa Han Sans 등 원하는 한글 폰트를 선택하여 custom.css에서 import 합니다. 그런 후 웹사이트 전체에 변경된 폰트를 적용하도록 Roboto 폰트를 사용하는 모든 HTML 요소들과 클래스들의 font-family를 원하는 폰트로 변경하는 css 코드를 작성합니다. 이 예제에서는 Pretendard를 사용해 보겠습니다.

CDN Font 사용

/*
    이 코드는 CDN 주소를 사용합니다. 만약 서버에 업로드된 폰트 파일을 불러오고자 한다면 아래의 src의 url 항목을 'assets/{font를 업로드한 경로}'로 변경합니다.
*/

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Thin.woff) format('woff');
}

html body,
html body div.hopscotch-bubble .hopscotch-nav-button,
html body .mat-list-item,.mat-list-option,
html body .mat-button-toggle,.mat-card,
.mat-badge-content,
.mat-h1, .mat-headline, .mat-typography h1,
.mat-h2, .mat-title, .mat-typography h2,
.mat-h3, .mat-subheading-2, .mat-typography h3,
.mat-h4, .mat-subheading-1, .mat-typography h4,
.mat-h5, .mat-typography h5,
.mat-h6, .mat-typography h6,
.mat-body-2, .mat-body-strong,
.mat-body, .mat-body-1, .mat-typography,
.mat-caption, .mat-small,
.mat-display-4, .mat-typography .mat-display-4,
.mat-display-3, .mat-typography .mat-display-3,
.mat-display-2, .mat-typography .mat-display-2,
.mat-display-1, .mat-typography .mat-display-1,
.mat-bottom-sheet-container,
.mat-button, .mat-fab, .mat-flat-button, .mat-icon-button, .mat-mini-fab, .mat-raised-button, .mat-stroked-button,
.mat-button-toggle, .mat-card,
.mat-checkbox,
.mat-table,
.mat-calendar,
.mat-dialog-title,
.mat-expansion-panel-header,
.mat-expansion-panel-content,
.mat-form-field,
.mat-menu-item,
.mat-paginator, .mat-paginator-page-size .mat-select-trigger,
.mat-radio-button, .mat-select,
.mat-slide-toggle-content, .mat-slider-thumb-label-text,
.mat-stepper-horizontal, .mat-stepper-vertical,
.mat-tab-group, .mat-tab-label, .mat-tab-link,
.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6,
.mat-tooltip,
.mat-list-item, .mat-list-option,
.mat-list-base .mat-subheader,
.mat-list-base[dense] .mat-subheader,
.mat-option,
.mat-optgroup-label,
.mat-simple-snackbar,
.mat-tree,
div.hopscotch-bubble, div.hopscotch-bubble .hopscotch-content, div.hopscotch-bubble .hopscotch-nav-button, div.hopscotch-bubble .hopscotch-title,
.c3-legend-item text,
.widget .c3 g.c3-axis-y g.tick tspan {
    font-family: 'Pretendard', 'Roboto', sans-serif !important;
}

TrueNAS 서버에 업로드된 폰트를 사용하는 경우

TrueNAS의 WebUI는 Angular로 빌드된 웹 애플리케이션입니다. 폰트 파일을 서버의 /assets 폴더 내부에 업로드한 후 이를 불러오게 되면, 기본 설정으로 인해 폰트 파일 경로가 /ui/****로 강제로 리다이렉트됩니다. 이를 방지하려면 nginx 설정 파일을 수정해야 합니다.

nginx 설정 수정 방법

  1. nginx 설정 파일 열기
    /etc/nginx/nginx.conf 파일을 엽니다.
  2. 리다이렉트 예외 처리 코드 추가
    아래 코드를 추가하여 /assets 폴더의 폰트 파일이 리다이렉트되지 않도록 설정합니다.
  3. nginx 서비스 재시작
    설정 변경을 적용하려면 nginx 서비스를 재시작합니다
http {
    server {
        # nginx 서버 설정들...
        server_name  localhost;
        listen                 0.0.0.0:443 default_server ssl http2;
        listen                 [::]:443 default_server ssl http2;

        # 추가 해야하는 코드
        location /assets/ {
            root /usr/local/www/webui;
            try_files $uri =404;
            add_header Cache-Control "public, max-age=31536000";
        }

        # 기존의 location 코드들...
        location / {
            rewrite ^.* $scheme://$http_host/ui/ redirect;
        }
    }
}
# 서비스 재시작
service nginx restart

custom.css를 웹사이트에 적용하기

생성한 custom.css 파일을 WebUI 전체에 적용하려면 index.html 파일을 수정해야 합니다. Angular 기반의 SPA(Single Page Application)이기 때문에 index.html에 추가된 스타일은 모든 페이지에 적용됩니다.

적용방법

  1. index.html 수정
    /usr/local/www/webui/ 경로에 위치한 index.html 파일을 엽니다.
  2. custom.css 링크 추가
    <head> 태그 내부에 아래 코드를 추가합니다.
  3. 파일 저장
<!-- index.html의 <head>태그 안에 추가 -->
<link rel="stylesheet" type="text/css" href="assets/styles/custom.css">

최종 확인 및 적용

모든 설정이 완료되면 변경사항을 적용하기 위해 서버의 서비스를 재시작하거나 서버를 재부팅합니다.

service middlewared restart
service nginx restart

변경사항 확인

  1. WebUI에 접속하여 설정한 폰트가 정상적으로 적용되었는지 확인합니다.
  2. 폰트가 적용되면 한글 환경에서도 깔끔하고 보기 좋은 인터페이스를 사용할 수 있습니다.

서비스 재시작 또는 서버 재부팅 후 WebUI를 확인하면 다음과 같이 설정한 폰트로 변경되어 매우 보기좋은 상태로 잘 변경된 것을 확인할 수 있습니다.

Post Views: 6

Tags:

KINA

Then, this is work for me

Related Posts

답글 남기기

Your email address will not be published.

Author

KINA

Then, this is work for me

LATEST COMMENTS

보여줄 댓글 없음.

Most Viewed

Axigen Mail Server 설치

설치 우선 Axigen 메일서버를 설치 해 보겠습니다. 대다수의 메일서버들과 다르게 Axigen 메일서버는 리눅스용과 더불어 윈도우용도 제공하고 있습니다.필자는 윈도우용을 사용 해 보지는 않았지만,

VMware vCenter Server 설치하기 – 1.INSTALL

VMware vCenter 설치 가이드 VMware vCenter는 가상화 된 환경인 ESXi 호스트들을 중앙에서 관리하고 제어할 수 있는 도구 입니다. 이번 글에서는 vCenter를 설치하는

Latest from Blog

·

동기(Synchronous) vs 비동기(Asynchronous) 실행 순서 이해하기

1. 동기와 비동기의 차이점 소프트웨어 개발에서 동기(Synchronous)와 비동기(Asynchronous) 프로그래밍의 개념은 매우 중요합니다. 특히 멀티스레딩 환경에서 실행 순서와 쓰레드 흐름을 이해하는 것은 성능 최적화와 안정적인 애플리케이션 개발에 필수적입니다. 이번 포스팅에서는 동기와 비동기의 실행 순서 차이를 이해하고, 이를 코드 예제와 함께 실제 실행 흐름을 분석해보겠습니다. 2. 동기(Synchronous) 실행 흐름 📌 동기 프로그래밍이란?
6 views
Read More
·

WinForms에서 UI 업데이트를 올바르게 처리하는 방법: 동기 vs 비동기의 진실

WinForms UI 업데이트의 핵심 원칙 WinForms 애플리케이션을 개발하다 보면 UI 컨트롤(Label, Button, ProgressBar 등)을 비동기 코드 내부에서 업데이트할 때 오류가 발생하는 경우가 있습니다. 이는 “동기(synchronous) vs 비동기(asynchronous)”의 문제가 아니라, WinForms UI 컨트롤이 반드시 UI 스레드에서 실행되어야 한다는 원칙 때문입니다. 이번 포스팅에서는 왜 WinForms에서 UI 업데이트는 특정 스레드에서 실행해야 하는지, 그리고
4 views
Read More

SPOEX 2025: 아시아 최대 스포츠레저산업 전시회, 어떤 혁신을 선보일까?

SPOEX 2025: 아시아 최대 스포츠레저산업 전시회, 어떤 혁신을 선보일까? 스포츠와 레저 산업의 미래를 한눈에 볼 수 있는 기회가 찾아옵니다. 아시아 TOP 3 국제 스포츠·레저산업 전시회 ‘SPOEX 2025’가 오는 3월 27일부터 30일까지 4일간 서울 코엑스에서 개최됩니다. 이번 전시회는 국내외 330여 개 스포츠 기업이 참가해 최신 기술과 제품을 선보일 예정이어서 업계의 관심이
4 views
Read More
·

웹사이트에 사용하는 아이콘 폰트 모음

웹사이트를 제작할 때 필수적으로 필요한 것이 바로 폰트 아이콘 입니다. 웹에서 아이콘을 검색 해 보면 매우 많은 아이콘 폰트를 찾을 수 있는데, 그 중 유명하고 훌륭한 아이콘 폰트를 정리 해 보려 합니다. FontAwesome 가장 유명한 폰트 아이콘이라고 할 수 있습니다. 버전4 까지는 전체가 무료였지만 버전5 이상부터는 유료 폰트가 많아졌지만, 그래도
4 views
Read More
·

vCenter 시작 시 No healty upstream 에러

vCenter를 ESXi 호스트에 설치하고 VM의 전원을 켜면, vCenter 관리자 페이지가 로드 되는것이 아니라 “no healty upstream” 과 같은 에러메세지만 뜨는 경우가 있습니다. 이 경우 ESXi 호스트에서 vCenter의 VM이 완전히 부팅 되었음에도 불구하고 이런 에러메세지가 뜹니다. 이런 에러는 vCenter 상의 문제가 있는것이 아니라 아직 vCenter의 VM상에서 vCenter의 리소스가 로딩중 이기 때문에
1 views
Read More