지금까지는 단편적인 개별 화면을 구성하는 방법에 대해서 알아보았습니다. 하지만 SPA를 만들기 위해서는 개별적인 화면이 아닌 전체 Frame(틀)을 구성하고 그 안에서 동작하는 sub frame을 만들어서 동작을 시키게 됩니다. 기존의 단편적인 개별화면이 sub frame이 되겠고, 오늘부터는 main frame을 만드는 방법에 대해서 차근차근 알아보겠습니다.
Material Design에 대해서 들어보셨나요?? Google이 Android 스마트폰에 적용하면서 유행하며 널리 퍼진 방식으로 간단하게 말하면... 평면적인 디자인을 그림자 효과를 주어 입체효과를 주고 아주 최소화된 feature를 사용해서 원하는 바를 최대한으로 표현하는 디자인 방식을 말합니다.
대표적으로 Gmail, YouTube 등이 있으며, vue.js의 Material Design을 위해서 최적화된 플러그인이 바로 Vuetify가 되겠습니다.
뭔가 깔끔하면서 정돈된 디자인 방식으로 느껴집니다. 그렇다면 Material Design을 적용한 나만의 페이지를 만들어 보겠습니다. 위의 캡처이미지와 같이 상단에 구성되어 있는 것들을 Vuetify에서는 App Bar라고 합니다. App Bar의 구성을 알아보고 구현해 보도록 하겠습니다.
1. App Bar의 구성
우선 최종적으로 구성할 App Bar의 상태는 아래와 같습니다.
총 5가지의 요소로 구성이 되며, 각 요소별 기능은 아래와 같습니다.
- App Bar Navigator - 해당 페이지의 메뉴 Tree를 보여줌
- App Bar Title - 해당 사이트의 제목을 표시하는 기능을 하며, image를 적용할 수 있음
- Spacer - App Bar 내에서 구역을 나누기 위해서 사용
- Button - 상태표시를 위한 용도도 가능하고, 주 사용 메뉴로도 사용 가능
- Menu - 설정 등 나머지 기능을 사용하도록 가이드 하는 기능
아마 요즘은 하도 많이 접하게 되서 익숙하실 거라고 생각이 됩니다. 그럼 각 요소별로 간단하게 살펴보도록 하겠습니다. 물론 자세한 props에 대한 구성 및 설정에 대해서는 Vuetify 공식 사이트에서 확인이 가능합니다.
(vuetifyjs.com/en/components/app-bars/)
2. App Bar 적용
아참 App Bar는 모든 화면에 공통적으로 들어가는 main frame이기 때문에, 해당 로직은 모두 App.vue에 구성합니다. 기존에 작성했던 내용을 가볍게 터치해 보겠습니다.
현재 프로젝트의 구성이며, main.js를 기준으로 App.vue가 실행이 되고... App.vue에서는 기본적으로 작성된 template가 화면에 렌더링이 되고, <router-view/>코드를 통해서 router > index.js 내에 있는 path에 맞는 화면을 해당 부분에 뿌려주게 됩니다.
main.js -> App.vue -> router-view -> router>index.js -> path ("/")
따라서, App Bar와 같이 모든 화면에서 보여주어야 하는 main frame은 App.vue에 작성이 되어야 하는 것이지요~~ 그렇다면 지난 코드를 한번 볼까요??
[App_old.vue]
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
음청간단하죠?? 저 코드에 따라서 vue의 공식 이미지가 먼저 렌더링되고, 이어서 router-view를 통해 지정된 path ("/")인 HelloWorld.vue가 하단에 렌더링이 되었었습니다.
[App.vue]
<template>
<v-app id="App">
<v-app-bar absolute dense color="#689F38" dark>
</v-app-bar>
<v-content>
<router-view/>
</v-content>
</v-app>
</template>App Bar를 넣기 위해서는... <v-app-bar/>를 사용합니다. 몇가지 옵션이 있는데... 간단하게 설명을 해보겠습니다.
- absolute - 절대적인 크기로 지정을 하며, 해당 설정이 없으면 전체 화면에 App Bar가 적용됨
- dense - App Bar의 크기를 48px로 줄여주며, 해당 설정이 없으면 56px로 화면에 표시됨
- color - App Bar의 색상을 바꿀수 있으며... vuetify 페이지에서 (Styles and animations > Colors)로 들어가면 코드가 있어서 참조할 수 있음
- dark - white모드와 dark모드를 구분할 수 있으며, white모드에서는 텍스트가 검은색으로 dark모드에서는 흰색으로 표시됨
오!! 이렇게 App Bar가 생겨났습니다.
3. App Bar 왼쪽 구성 (Navigator, Title)
<v-app-bar/>내부에는 여러가지 구성요소가 있습니다. 그 중에서 Navigator와 Title을 사용하기 위한 tag는....
<v-app-bar-nav-icon/>, <v-app-bar-title/>
입니다... 해당 tag는 아무고민없이 사용하면 됩니다.
[App.vue]
<template>
<v-app id="App">
<v-app-bar absolute dense color="#689F38" dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>AT Project</v-app-bar-title>
</v-app-bar>
<v-content>
<router-view/>
</v-content>
</v-app>
</template>
아주 손쉽게 Navigator와 Title이 나타났습니다.
4. App Bar 분할 (Spacer)
App Bar에서는 일부메뉴는 왼쪽 정렬을... 나머지 메뉴는 오른쪽 정렬을 해야할 때가 있습니다. 이를 위해서는 별도의 Tag를 사용하게 되는데...
<v-spacer></v-spacer>
이 코드 입니다. 이 Tag를 기준으로 상단은 왼쪽 정렬이... 하단은 오른쪽 정렬이 됩니다. 그렇다면 Spacer가 없는경우와 있는 경우의 차이를 보겠습니다.
[App.vue]
<template>
<v-app id="App">
<v-app-bar absolute dense color="#689F38" dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>AT Project</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon color="white">
<v-icon>mdi-battery-charging</v-icon>
</v-btn>
</v-app-bar>
<v-content>
<router-view/>
</v-content>
</v-app>
</template>
다음과 같이, <v-spacer></v-spacer>를 기준으로 Navigator와 Title은 왼쪽에... 배터리 모양의 icon은 오른쪽에 배치되었습니다. 그렇다면 지워보면 어떻게 될까요??
연속으로 붙어서 나오게 되네요~~
5. App Bar 오른쪽 구성 (Button, Menu)
일반적으로 App Bar의 오른쪽은 퀵버튼과 설정메뉴를 제공하게 됩니다. 이를 구현하는 Tag는 다음과 같습니다.
<v-btn/>, <v-menu/>
역시나 그냥 Code로 보는게 가장 이해가 빠르죠~
[App.vue]
<template>
<v-app id="App">
<v-app-bar absolute dense color="#689F38" dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>AT Project</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon color="white">
<v-icon>mdi-battery-charging</v-icon>
</v-btn>
<v-btn icon color="white">
<v-icon>mdi-account</v-icon>
</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn icon color="yellow" v-bind="attrs" v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-for="n in 5" :key="n" @click="() => {}">
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<router-view/>
</v-content>
</v-app>
</template>
<v-btn>은 icon으로 지정이 가능하며, <v-menu>도 얼마든지 custom이 가능합니다. 향후에 각 모듈별로 자신에게 맞게 변경을 해 보겠습니다.
어떠세요... vue.js를 가지고 Vuetify로 구현을 하면 정말로 편하게 App Bar를 구현할 수 있습니다.
- Ayotera Lab -
댓글