[T.Viewer 개발일기] 12. Optimization

Tizen Log Viewer 개발이 어느덧? 끝나간다. 아직 넣고 싶은 기능은 많지만, 그것을 내가 결정하기 보다는 주요 기능을 갖추고 얼른 사용자들 손에 쥐어준 다음 뒷일을 결정하기로 했다. 요즘 개발 트렌드.ㅎ

마지막으로 마무리 하는 과정에서 있었던 몇 가지 이야기를 정리해 봤다.

resource pre-load

boilerplate 코드의 index.html파일을 보면 아래와 같이, font를 CDN으로부터 받아오도록 되어 있다. 용량도 얼마 안되는거 바이너리에 포함시키자. 오프라인에서도 잘 쓸 수 있게.

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

일단 아이콘 폰트는 Material Design Icons를 사용하고 있는데, 이 부분은 공식 사이트에 가이드가 잘 되어 있다. src/plugins/vuetify.js 구조가 왜 있나 했는데, 이런 식으로 Vuetify를 확장해서 사용하는 방법이라는 것을 이제서야 알게되었다.ㅋ 뭐, 워낙 잘되어 있어서...^^;

Install Material Design Icons

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.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: 'mdi', // default - only for display purposes
  },
})

다음으로 Roboto 폰트 역시 로컬에 설치해주고,

    npm install typeface-roboto --save

아까 그 위치에서 로드해 주었다.

// src/plugins/vuetify.js

import 'typeface-roboto/index.css'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader

로딩 시간을 줄일 수 있기도 하지만, 만약에 CDN의 리소스가 변경되면, 개발하면서 확인된 폰트와 아이콘과는 다른 UI가 보여질 수도 있기 때문에 하위호환성이 확실히 보장되지 않는 lib이나 리소스는 다운로드해서 패키지에 넣거나, 내 서버에 따로 올려둔다.

icon

아이콘에서 최적화를 논할만한 내용은 아닐 수도 있지만, 품질을 위해서 중요한 부분이 있다. 아이콘은 두군데에서 처리가 필요하다. 하나는 파일에 사용되는 아이콘이고, 다른 하나는 프로그램이 실행될 때 사용되는 아이콘이다.

전자는 packaging과 관련되어 있기 때문에 builder를 어떤것을 사용하는 지에 따라서 설정 방법이 다르다. 나는 약간의 시행착오를 거쳐 vue.config.js에서 설정해 주었다. 패키징 관련된 부분이기 때문에 플랫폼마다 다른 파일이 요구된다. 클라우드 변환 사이트가 많으니 편하게 사용하면 된다.

  builderOptions: {
    appId: 't.viewer',
    asar: false,
    productName: 'T.Veiwer',
    win: {
      target: [
        {
            target: 'portable',
            arch: [
            'x64',
            ],
        },
      ],
      icon: 'assets/icons/icon.ico'
    },
    linux: {
      target: [
        {
            target: 'AppImage',
            arch: [
            'x64',
            ],
        },
      ],
      icon: 'assets/icons/icon.png'
    },
  },

다음으로 런타임에 사용되는 아이콘은 BrowserWindow를 생성할 때 설정해줘야 한다.

    // Create the browser window.
    let iconPath = 'assets/icons/icon.ico';

    // linux AppImage
    if (process.platform !== 'win32') {
        if (process.env.WEBPACK_DEV_SERVER_URL)
            iconPath = 'assets/icons/icon.png';
        else
            iconPath = path.join(__dirname, '../../tviewer.png');
    }

    win = new BrowserWindow({
        width: 1024, height: 700,
        webPreferences: {
            nodeIntegration: true
        },
        icon: iconPath,
        show: false
    })
    mainWindowState.manage(win);

이 부분이 중요한데, 여기에서 png 포맷을 사용하는 가이드도 많던데, png를 쓰면 아무리 고 해상도를 해도 프로그램 아이콘이 찌그러진다. 런타임에 리사이징을 하려다보니 퀄리티가 떨어지는 것으로, 가능하면, multi-size ico를 만들어서 설정하는 것을 추천한다.

이 시점에 문제가! 리눅스는 png를 사용해야 해야 해서 플랫폼 분기문이 들어갔는데, AppImage로 배포하려니 배포패키지에서 자꾸 아이콘을 못찾아오는 이슈가 있다. 관련된 이슈가 엄청 많은걸보니 에휴...적당히 workaround 적용해 주었는데, 리눅스의 경우 package에서 실행될 때와 npm run serve로 실행될 때 또 달라서, 분기문이 또 들어갔다.

아이콘 해상도 차이 스크린샷

32px을 포함하는 ico 파일을 사용했을 때 확실히 품질이 좋았다. window 10에서!

keep preference

폰트 사이즈랑 텝 정보들을 기억해 두었다가 다시 꺼내줬야 한다. 당연한 기능인데ㅎ 사용하는데 문제는 없도록 다른 기능을 모두 다 작성하고 추가하였다. 어떤 유용한 모듈이 있을까 검색해 봤다.

electron-config vs electron-settings vs electron-store

https://www.npmtrends.com/electron-config-vs-electron-settings-vs-electron-store

기세가 좋은 electron-store를 적용했다. 모듈 분리가 잘 되어 있고, 기능과 데이터도 분리가 잘 되어 있어서 적용이 매우 쉬웠다!

거의 다 했는데, 윈도우 사이즈가 매번 초기화 된다. electron-window-state 이런 모듈이 있네? 허허. 좋구만. 마지막 위치까지 기억해주는 구만ㅋ

    // Load the previous state with fallback to defaults
    let mainWindowState = windowStateKeeper({
        defaultWidth: 1024,
        defaultHeight: 768
    });

    win = new BrowserWindow({
        'x': mainWindowState.x,
        'y': mainWindowState.y,
        'width': mainWindowState.width,
        'height': mainWindowState.height,
        webPreferences: {
            nodeIntegration: true
        },
        icon: iconPath,
        show: false
    })

마치며

최적화라고 말하기도 민망한 내용들이다. 그 만큼 별 내용이 없었다는? 쉽고 빠르게 개발 할 수 있어서 좋았다. 진짜 최적화는 공개 후 올라오는 이슈들을 상대하면서 진행하게 될듯...