이번에는 아무런 라이브러리 없이 빈약하게 구성된 화면을 좀 정상적으로 꾸며보기로 했다.
1. Google Material Design 으로 UI구성하기
현재 사이트는 아래와 같이 단순하고 조잡한 형태를 띄고있어 흡사 정상적이지 않은 사이트처럼 보인다.
이를 위해 google의 material design을 활용하여 UI를 더 보완하기로 했으며, 우선 아래와 같이 material/web을 패키지에 추가해야한다.
npm install @material/web
그렇게 설치하고 나면, material/web은 Module JS 기반으로 동작하기 때문에, 전체프로젝트 관점에서는 Common JS 와 혼재한 상태가 된다. 그래서 이번에 webpack과 babel을 추가하여 이러한 문제를 해결하기 위한 번들링과 트랜스파일링을 진행하였다.
webpack은 아래 코드를 기준으로 설치하였고,
npm install webpack webpack-cli webpack-dev-server --save-dev
babel은 아래 코드를 통해 설치했다.
* babel은 transfiling이라고 하여, ES6+ 버전의 js 코드를 실행하지 못하는 브라우저에서도 사용하기 위한 목적으로 하위브라우저가 호환이 가능하도록 코드를 변경해주는 패키지이다.
npm install babel-loader @babel/core @babel/preset-env --save-dev
이번 프로젝트 같은 경우, 여러 .html 을 사용하면서 html 간의 번들링도 필요하여 webpack에서 사용가능한 html 번들링 관련 플러그인을 같이 설치하였다.
npm install html-webpack-plugin --save-dev
개발 도중에 아래와 같은 에러가 발생하기도 했는데, 이는 webpack에서 제대로 material/web을 인식하지 못해서 발생하는 에러로, webpack.config.js에서 해당 번들링 대상 파일 위치를 제대로 설정해줘야했던 문제이다.
Uncaught TypeError: Failed to resolve module specifier "@matrieal/web/md-outlined-button.js". Relative references must start with either "/", "./", or "../".
2. favicon 적용하기
전문성있는 사이트임을 증명하기 위해서는 favicon 설정도 중요하다.
나는 피그마(figma.com)를 활용하여 favicon을 만들었다. 사이즈는 32 x 32 px 정도의 크기로 제작해야한다. 우측 하단의 export tab을 이용하여 .png 로 export 하여 적용할 준비를 마쳤다.
디자인이 전문분야가 아니다보니 완성도 있는 디자인은 아니지만, 최대한 단순하면서도 서비스명을 담을 수 있는 형태로 구성하였다.
* 도형 여러개를 겹쳐서 그리더라도 나중에 한번에 component (그룹핑)을 시키면 하나의 아이콘처럼 보이게 된다.
아래 코드를 참고하여 favicon을 추가하면 된다.
<!-- head안에 위치해야함 -->
<head>
<!-- rel을 "icon"으로 지정하여 favicon인 것으로 인식 -->
<link rel="icon" href="favicon 파일 위치">
</head>
위 코드와 같이 적용하고 나면 favicon이 적용된 것을 확인할 수 있다.
'콤퓨타' 카테고리의 다른 글
| 웹게임 개발기 (14) - UI google material design으로 전환하기 (0) | 2025.02.03 |
|---|---|
| [javascript 탐닉] 실행컨텍스트(execution context), 클로저(closure) 알아보기 (2) | 2025.01.27 |
| [javascript 탐닉] 제너레이터와 async / await 알아보기 (1) | 2025.01.24 |
| [In process] 웹게임 개발기 (12) - Google OAuth 적용하여 회원가입/로그인 UX 향상시키기 (1) | 2025.01.24 |
| [javascript 탐닉] try/catch, promise 알아보기 (1) | 2025.01.21 |
