[View] 웹폰트, vuetify 아이콘 로컬 실행으로 변경

Vue/Nuxt(Frontend)-Spring boot(Backend) 를 사용한 웹 프로젝트를 구성하여 현장 반영 도중

아이콘이 실행되지 않고 텍스트 출력 시 '_'가 보이지 않는 이슈가 발생했다.

 

1. 아이콘 출력 안되는 문제

vuetify icon을 사용한다고 알고 있었는데 프로젝트에서 검색해보니 icon을 CDN으로 링크하여 사용 중 이었다. 현장 작업자분에게 여쭤보니 인터넷이 안되는 내부 환경이라고 하셔서 CDN이 문제라고 생각 후 vuetify icon을 로컬에서 실행 가능하도록 수정하기로 했다.

 

- vuetify icon에 대한 자세한 설명은 아래 링크 참고

https://v15.vuetifyjs.com/ko/components/icons/

Icon Component — Vuetify.js

 

vuetify icon은 Material Icon을 기본으로 사용하고 있으며 사용 방법으로는 대표적으로 CDN 방식과 직접 설치해서 사용하는 방법이 있다.

 

1) CDN으로 연동 (인터넷 연결이 가능한 환경에서 사용)

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

 

2) 직접설치

npm install material-design-icons-iconfont

// src/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})

 

우리 프로젝트 환경에서는 npm으로 icon 직접 설치 후 별다른 코드 추가 없이 문제가 해결 되었다. 

 

 

2. 텍스트 출력 시 '_'가 보이지 않는 문제

현장에서 사용하는 태그명은 '_' 기준으로 정보가 출력되는데 태그명을 출력하는 화면에서 '_'가 보이지 않았다. 

정상출력 : A_B_C

현장출력 : A B C

 

무슨 또 이런 문제가 있나 싶어서 내부 로컬 환경을 구성하여 인터넷 연결을 끊고 직접 테스트 해보기로 했다.

테스트 결과.. 인터넷을 끊었을 경우 기존에 출력되는 폰트가 아닌 다른 폰트가 출력되면서 '_'가 실제로 보이지 않는걸 확인했다.

1번과 동일하게 Frontend에서 사용중인 폰트도 웹폰트를 사용하고 있었던 것이다. 

우리가 모든 Frontend 소스를 구성하지 않고 다른 곳에서 사용중이던 소스를 가져와서 수정해서 사용했더니 간과했던 부분이었다.

 

- 사용중인 웹 폰트 : SpoqaHanSans

https://spoqa.github.io/spoqa-han-sans/

Spoqa Han Sans Neo

 

1) 웹폰트

기존에 사용하던 방식으로 스타일시트 파일 상단에 추가하여 사용하면 된다.

- assets -> variables.scss 에 링크하여 사용 중

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

 

2) 폰트 다운로드하여 직접 링크

- Spoqa 사이트에서 폰트를 먼저 다운로드 받는다.

https://spoqa.github.io/spoqa-han-sans/#download

Spoqa Han Sans Neo

 

- 다운로드 받은 font 파일을 frontend 프로젝트 경로에 추가한다.

  우리는 variables.scss이 있는 assets 디렉토리 내에 fonts 디렉토리를 만들고 그 밑에 폰트 파일을 추가했다. 

 

  그 다음 assets 경로 아래 'SpoqaHanSansNeo.css' 파일을 만들어서 font 파일을 불러오게 했다.

@charset "utf-8";

/*
 * 스포카한산스네오
 */
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.eot') format('embedded-opentype'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff') format('woff'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.eot') format('embedded-opentype'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff') format('woff'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 300;
    src: local('Spoqa Han Sans Light'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.eot') format('embedded-opentype'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2') format('woff2'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff') format('woff'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 100;
    src: local('Spoqa Han Sans Thin'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.eot') format('embedded-opentype'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff') format('woff'),
    url('~assets/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.ttf') format('truetype');
  }

 

추가한 파일 경로는 아래와 같다.

assets
│  SpoqaHanSansNeo.css
│  variables.scss
├─fonts
│  └─SpoqaHanSansNeo
│          SpoqaHanSansNeo-Bold.eot
│          SpoqaHanSansNeo-Bold.ttf
│          SpoqaHanSansNeo-Bold.woff
│          SpoqaHanSansNeo-Bold.woff2
│          SpoqaHanSansNeo-Light.eot
│          SpoqaHanSansNeo-Light.ttf
│          SpoqaHanSansNeo-Light.woff
│          SpoqaHanSansNeo-Light.woff2
│          SpoqaHanSansNeo-Medium.eot
│          SpoqaHanSansNeo-Medium.ttf
│          SpoqaHanSansNeo-Medium.woff
│          SpoqaHanSansNeo-Medium.woff2
│          SpoqaHanSansNeo-Regular.eot
│          SpoqaHanSansNeo-Regular.ttf
│          SpoqaHanSansNeo-Regular.woff
│          SpoqaHanSansNeo-Regular.woff2
│          SpoqaHanSansNeo-Thin.eot
│          SpoqaHanSansNeo-Thin.ttf
│          SpoqaHanSansNeo-Thin.woff
│          SpoqaHanSansNeo-Thin.woff2

 

variables.scss 최상단에 있는 웹폰트 링크를 'SpoqaHanSansNeo.css'로 변경하여 사용하려고 했으나 view에서 font를 불러올 수 없다는 에러가 계속 발생했다.

 

그래서 variables.scss 기존 소스는 그대로 두고, 폰트파일/SpoqaHanSansNeo.css 파일만 추가한 상태에서 테스트해보니

인터넷이 끊겼을 때는 'SpoqaHanSansNeo.css'를 통해 font를 읽어오고 인터넷이 연결됐을 때는 웹폰트를 통해 폰트를 읽어오는 것 같았다.

(인터넷이 끊겼을 경우 구글 콘솔에 웹 폰트를 불러올 수 없다는 에러가 발생하는데 화면에서는 실제로 font를 불러옴)

 

'SpoqaHanSansNeo.css' 파일에 있는 font를 어떻게 읽어오지?.. 싶었는데

나의 내공은 여기까지.

언젠가 이해가 되겠지 싶어서 일단 여기서 마무리!

 

 

문제가 없을 것이라고 생각했는데

현장반영은 언제나 만만하지 않다. 의외의 복병이 많아...

여튼 해결해서 다행이다!!!