Vue 3용 Vuestic UI 1.10.3, @quasar/extras 2.1.0을 통해 로컬에 포함된 Material Icons. · 구현 레퍼런스
02
Vuestic UI 디자인 시스템 디자인 참고 자료
Vuestic UI 1.10.3. 프리셋 값은 설치된 색상 서비스에서 읽고, 컴포넌트 변수는 해당 서비스의 CSS에서 가져옵니다. 워크시트는 기본 밝은 프리셋을 유지하지만 --va-font-family를 system-ui로 의도적으로 재정의합니다. 장식용 도형과 주변의 크기 체계는 독창적으로 구성했습니다.
Vuestic UI 디자인 시스템: 이름이 지정된 색상 프리셋을 제공하는 구성 가능한 Vue 라이브러리
이름이 지정된 색상 프리셋을 제공하는 구성 가능한 Vue 라이브러리
Vuestic은 createVuestic을 통해 공통 서비스를 등록합니다. 이 예제는 vuestic-ui에서 가져온 네이티브 컴포넌트와 기본 밝은 색상 프리셋을 사용합니다. 평점, 버튼, 진행률 표시 및 성공 알림은 동일한 서비스를 통해 의미 있는 색상 이름을 해석합니다.
이 워크시트는 해당 컴포넌트를 실제로 적용한 예제로, 세 가지 검토 질문을 구분하고 근거가 되는 의견을 수집하며 평균을 계산한 뒤 저장된 로컬 결과를 잠급니다. 색상으로 구분된 평가 기준 표시와 2열 구성은 독창적인 애플리케이션 디자인이며, Vuestic 컴포넌트를 추가로 사용한 것은 아닙니다.
검증된 라이트 프리셋은 primary #154EC1, success #3D9209, textPrimary #262824를 정의합니다. 다크 프리셋은 라이트 페이지의 색상을 단순히 반전하는 대신 primary, text, surface에 서로 다른 값을 사용합니다. 참조 표에는 두 프리셋이 모두 기록되어 있지만, 미리보기는 의도적으로 라이트 모드로 유지됩니다.
컴포넌트의 형태는 --va-button-border-radius와 --va-form-element-border-radius 같은 CSS 변수를 통해 설정하며, 설치된 스타일시트에서 두 변수의 값은 모두 0.25rem입니다. 색상 프리셋과 CSS 변수 재정의는 서로 다른 문제를 해결합니다. 의미 역할에는 서비스를 사용하고, 지원되는 컴포넌트의 형태를 조정할 때는 문서화된 변수를 사용하세요.
Vuestic의 기본 --va-font-family는 Source Sans Pro를 지정합니다. 예제에서는 로드하지 않은 글꼴에 암묵적으로 의존하지 않고 해당 변수를 system-ui로 재정의합니다. 따라서 기본 컴포넌트의 레이블과 애플리케이션 문구 모두 사용 가능한 글꼴 스택을 명시적으로 공유합니다.
기본 평점 아이콘은 star, star_outline 같은 Material Icons 이름을 사용합니다. 아이콘의 로컬 글꼴 스타일시트는 @quasar/extras에서 가져오며 글꼴 파일과 함께 번들링됩니다. 해당 에셋이 없으면 별 모양 대신 아이콘 이름이 텍스트로 표시될 수 있습니다. 아이콘 글꼴은 애플리케이션의 텍스트 글꼴 재정의와 별도로 유지됩니다.
각 VaRating은 하나의 평가 기준에 숫자 값을 연결합니다. 최댓값은 5이고 초기화가 가능하므로 현재 점수를 다시 선택하면 해당 기준을 0으로 되돌릴 수 있습니다. UI에서는 0을 완료된 0점 평가로 표시하지 않고 ‘평가 안 됨’으로 표시합니다.
평균은 양수 평점의 개수로 나눠 계산합니다. 따라서 작성 중인 평가표에서 미응답 기준이 평균에 불이익을 주지 않습니다. 다만 저장하려면 세 기준 모두에 답해야 하므로 최종 평균은 항상 전체 평가를 나타냅니다. 평점을 변경하면 완료 상태 칩, 진행률 표시줄, 요약이 즉시 업데이트됩니다.
Vuestic UI 디자인 시스템 의미 있는 의견을 작성하고 충분한 입력 공간을 제공하세요
유용한 관찰을 위해서는 의미 있는 텍스트와 충분한 공간이 필요합니다
VaTextarea에는 표시되는 레이블과 400자 제한, 글자 수 카운터가 있습니다. 저장을 시도한 뒤 애플리케이션은 앞뒤 공백을 제거한 값이 20자 이상인지 확인합니다. 따라서 공백만 입력하면 글자 수가 형식상 충분하더라도 요구사항을 충족할 수 없습니다.
textarea는 자동 크기 조절을 사용하며 최소 4행, 최대 12행으로 설정되어 있습니다. 이는 단순한 예시용 prop이 아니라 기능 설정입니다. 자동 크기 조절이 없으면 최소 행 설정만으로는 의도한 대로 입력 영역이 확장되지 않습니다. 수정된 버전은 좁은 화면에서도 의견을 확인할 수 있게 하며, 예외적으로 긴 메모는 일반 스크롤로 볼 수 있게 합니다.
Vuestic UI 디자인 시스템 평점 평균이 아니라 완료 상태를 기준으로 진행률을 계산하세요
평균 점수가 아니라 완료 여부를 기준으로 진행률을 계산하세요
진행률 표시줄은 답변한 기준의 수를 측정하며, 평점을 입력한 기준 수를 3으로 나눈 뒤 100을 곱해 나타냅니다. 옆의 큰 숫자는 평균 점수를 나타냅니다. 두 값은 분모가 다르므로 혼동해서는 안 됩니다. 점수가 모두 낮더라도 세 기준에 모두 답했다면 완료율은 100%입니다.
완료 안내 문구에는 분자와 분모가 직접 표시됩니다. 평균에는 ‘평가한 기준의 평균’이라는 레이블이 붙고, 요약에는 각 기준의 점수가 다시 표시됩니다. 이러한 레이블 덕분에 독자는 설명 없는 진행률 표시줄을 전반적인 품질 평가로 오해하지 않고 계산 방식을 이해할 수 있습니다.
저장을 누르면 먼저 attempted를 설정한 다음 모든 평점과 의견을 확인하고, 조건을 충족하면 저장 상태를 활성화합니다. 저장 상태에서는 평점과 textarea가 읽기 전용이 되고 저장 버튼이 비활성화됩니다. 성공 알림에는 평가가 로컬에 저장되었으며 아무것도 전송되지 않았다고 표시됩니다.
‘다시 시작’은 하나의 핸들러에서 모든 평점, 메모, 유효성 검사 표시, 저장 상태를 초기화합니다. 저장 후 값을 하나라도 변경하면 확인 메시지가 실제 상태와 달라질 수 있으므로 초기화 동작을 명시적으로 제공합니다. 이 예제는 백엔드, 계정 또는 평가를 받을 대상을 전제하지 않습니다.
Vuestic UI 디자인 시스템 각 평점 항목에 평가 기준과 값을 포함한 이름을 지정하세요
각 평점 항목에 평가 기준과 값을 포함한 이름을 지정하세요
기본 VaRating 항목은 접근성 트리에서 버튼으로 표시됩니다. aria-item-label에는 평가 기준 이름과 값 및 최댓값을 나타내는 플레이스홀더가 포함되므로 ‘명확성 점수 5점 만점에 4점’과 같은 레이블이 만들어집니다. 이렇게 하면 한 페이지에 평점 3개가 있을 때 별 버튼 15개가 모두 구분되지 않는 문제를 피할 수 있습니다.
textarea에는 자체 표시 레이블이 있고, 진행률 표시줄에는 완료 상태 레이블이 있으며, 저장 알림은 상태 영역으로 제공됩니다. 장식용 평가 기준 표시는 보조 기술에서 숨깁니다. 로컬 검사에서는 ARIA 속성의 존재만 확인하는 데 그치지 않고 레이블이 지정된 실제 평점 버튼을 클릭하고, 유효성 검사를 실행하며, 280px 화면에서 최종 레이아웃을 확인했습니다.
Vuestic UI 디자인 시스템 플러그인, 컴포넌트 CSS, 로컬 아이콘 에셋을 포함하세요
플러그인, 컴포넌트 CSS 및 로컬 아이콘 에셋을 포함하세요
진입점에서는 createVuestic을 등록하고 vuestic-ui/css를 가져온 다음 기존 레이아웃 스타일시트를 불러옵니다. App.vue는 사용하는 모든 컴포넌트를 가져오므로 문서화되지 않은 자동 가져오기 설정에 의존하지 않습니다. 공통 글꼴 재정의는 라이브러리 CSS 다음에 적용됩니다.
패키지 명령에서 @quasar/extras는 로컬 Material Icons 글꼴을 가져오는 용도로만 포함합니다. Quasar을 등록하거나 해당 컴포넌트를 평가표에 섞어 사용하지 않습니다. 위의 완전한 SFC와 스타일시트는 아래 Vite Vue 설정에 그대로 추가할 수 있습니다. 생성된 독립형 미리보기에는 필요한 에셋이 인라인으로 포함되므로 원격 글꼴을 가져오지 않습니다.
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar, VaAlert가 하나의 평가 모델로 연결됩니다.
vue
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
Vuestic UI 1.10.3과 @quasar/extras 2.1.0의 로컬 Material Icons를 확인했습니다. 전체 소스 예제 두 가지를 모두 제공하므로 외부 글꼴 서비스가 필요하지 않습니다.
자바스크립트
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install [email protected] @quasar/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
Vuestic UI 1.10.3을 사용해 네이티브 VaRating 평가 항목 세 개, VaTextarea, 진행률, 상태, 저장 및 초기화 컨트롤을 갖춘 디자인 평가 워크시트를 재현합니다. 평가한 항목을 기준으로 평균을 계산하고, 저장 전 세 항목 모두 점수를 매기고 공백을 제외한 메모를 20자 이상 입력하도록 합니다. 자동 크기 조정 텍스트 영역을 유지해 평가 내용 전체가 표시되도록 하고, 저장 후 읽기 전용 상태와 초기화 동작도 일관되게 구현합니다. createVuestic, 네이티브 CSS, 로컬 아이콘 글꼴을 포함합니다. 이 기능은 로컬 평가 기록이며 검사 배치 서비스가 아닙니다.
05
Vuestic UI 디자인 시스템의 출처와 범위
기본 라이트 색상 프리셋과 명시적인 시스템 글꼴 재정의를 사용하는 Vuestic UI 1.10.3. 원본 평가 질문 및 아트워크. 저장 상태는 로컬에만 적용되며, 외부 평가 제출 기능이나 새로고침 후에도 유지되는 기능은 없습니다.
