인용된 과거 MDS 자산 배분 색상과 시스템 글꼴을 사용한 오프라인 네이티브 HTML 해석입니다. MDS Vue 런타임, 독점 등급 정보 또는 실시간 투자 데이터는 포함하지 않습니다. · 구현 레퍼런스
02
Morningstar 디자인 시스템 디자인 참고 자료
현재 Vue 3 적용 방식과 2025 Intrinsic 지침을 살펴보고, 공개 상수 참조에는 버전을 명시합니다. 레거시 v2.37 숫자 값은 과거 참고용일 뿐 현재 Vue 3 패키지에 대한 설명이 아닙니다. 예제에는 인용된 과거 차트 색상과 자체 애플리케이션 레이아웃을 사용합니다.
원본 예시에는 가상의 자산 배분 모델 2개, 누적 막대 그래프, 정확한 값을 보여 주는 표가 있습니다. 시각적 막대는 구성 비율을 상대적으로 보여 주고, 표는 정확한 값을 확인하는 기준이 됩니다. 각 모델의 합계는 100%이며, 선택한 모델은 제목과 표 캡션에 모두 표시됩니다.
정렬하면 행 순서만 바뀌며 분모나 자산군 색상은 바뀌지 않습니다. 독자는 별도의 해석이 필요한 독자적인 등급 아이콘 없이도 전체 자산 배분을 살펴본 뒤 정확한 비율을 확인할 수 있습니다. 이는 구체적인 리서치 인터랙션을 보여 주는 예시이지, Morningstar의 실제 제품이나 추천을 만들어 낸 것이 아닙니다.
MDS는 역할에 따라 정의된 상수와 범용 색상을 구분합니다. 엔지니어 가이드에서는 같은 시각적 값이 텍스트가 아닌 요소에 필요할 때 텍스트 색상과 범용 중립 색상을 따로 사용하도록 안내합니다. 제공된 Sass 예시에서는 텍스트에 읽기 역할 색상을, 사용자 지정 표 구분선에 범용 중립 색상을 사용합니다.
참조 표에는 버전 경계가 명시되어 있습니다. constants 3.3.0은 인용된 텍스트 색상 값을 지원하고, 공개된 v2.37 아카이브는 이전 버전의 자산 배분 및 간격 값을 지원합니다. 기존 인터페이스를 살펴볼 때는 유용하지만, 현재 Vue 3의 모든 상수도 똑같이 적용된다는 근거는 아닙니다. 아카이브의 값을 현재 디자인 요구사항으로 간주하기 전에 승인된 설치 패키지를 확인하세요.
Morningstar 디자인 시스템 Morningstar Intrinsic으로 구현 기준이 바뀝니다
두 가지 굵기 체계와 이에 맞춘 컴포넌트 업데이트
2025년 Intrinsic 발표에 따르면 기존의 thin, light, regular는 regular 글꼴로, bold와 heavy는 bold 글꼴로 통합됩니다. font-family 선언만 바꾸는 것으로는 이 마이그레이션을 재현할 수 없습니다. 발표에서는 글꼴 및 타이포그래피 패키지를 포함한 컴포넌트 업데이트를 요청합니다.
기존 morningstar-design-system 모놀리식 패키지와 Morningstar Base Charts는 Intrinsic 업데이트 대상이 아닙니다. 새로운 예시에서 이 아카이브의 설치 경로와 현재 Vue 3 안내를 함께 사용하지 마세요. 오프라인 노트북은 시스템 대체 글꼴을 사용하며 독점 글꼴 파일을 포함하지 않습니다.
MDS는 모든 데이터 작업을 불투명한 그리드 하나에 맡기지 않고, 조합에 사용할 표 요소를 제공합니다. 문서에 안내된 패턴에는 행 번호, 중첩 헤더 슬롯, 다중 선택, 페이지네이션이 있습니다. 데이터 변환과 선택 상태는 애플리케이션에서 관리해야 합니다.
제공된 작동 예시는 의도적으로 상수 기반 스타일을 적용한 네이티브 표를 사용합니다. 네이티브 컴포넌트 제품군으로 옮길 때는 문서에 나온 MDS 조합 참조를 활용할 수 있습니다. 일부 선택 상태는 헤더의 indeterminate 상태로 표시하고, 각 행의 체크박스에는 행을 식별하는 multiselection-label을 지정해야 합니다.
표시 형식을 적용하기 전까지 백분율 값은 숫자 형식으로 유지하세요. 형식이 적용된 문자열을 정렬하지 마세요.
이전 버전의 자산 배분 팔레트는 주식, 채권, 현금, 대체 자산, 미분류 항목을 구분합니다. 예시에서는 모델이나 행 순서가 바뀌어도 세 가지 관련 자산 색상이 각 자산군에 그대로 연결됩니다. 어떤 구간이 첫 번째인지에 따라 색상을 바꾸지 않습니다.
표에서 모든 값을 텍스트로도 보여 주므로, 사용자가 파란색, 주황색, 초록색을 구분하지 않아도 모델을 이해할 수 있습니다. 이 예시는 Morningstar 별점, 메달리스트, 스타일 박스 이미지를 사용하지 않습니다. 공식 아이콘 참조에서는 지식재산권으로 보호되는 아이콘을 정해진 의미에만 사용하도록 안내합니다.
Morningstar 디자인 시스템 이전 버전의 간격 기준과 애플리케이션 레이아웃을 구분하세요
숨겨진 열이 없는 간결한 읽기 화면
아카이브 문서에는 8픽셀 기본 간격 단위와 4분의 1 및 절반 단위가 안내되어 있습니다. 이 예시는 그 이전 버전의 기준에서 착안해 8/16/24/32 간격 체계를 절제된 방식으로 사용합니다. 전체 너비, 누적 막대 높이, 모바일 전환 기준은 공식 상수를 임의로 만들어 낸 것이 아니라 애플리케이션에서 자체적으로 정한 값입니다.
표에는 자산군, 비율, 비교 막대의 세 열만 둡니다. 화면이 좁을 때는 작은 비교 막대만 제거하고 자산과 정확한 비율은 그대로 표시합니다. 모델 선택기는 데이터 위에 두고 레이블도 계속 표시합니다. 레이블 없이 아이콘만 있는 필터는 사용하지 않습니다.
승인된 팀은 문서에 안내된 내부 레지스트리, Vue 3 패키지 접미사, Sass 설정을 사용할 수 있습니다. CSS 모듈은 컴포넌트 스타일을 범위에 따라 구분하므로 서로 다른 버전을 함께 사용할 수 있습니다. 예시에서는 제품별 네임스페이스를 사용합니다. 호스팅된 글꼴 에셋을 사용하는 스타일보다 먼저 해당 에셋을 구성해야 합니다.
공개 미리보기에는 이러한 접근 권한이 필요하지 않습니다. 자산 배분 인터랙션을 독립적으로 보여 주는 완전한 HTML 예시로, 출처가 명시된 이전 버전의 색상과 시스템 글꼴 대체 설정을 사용합니다. 별도의 Vue 예시는 상수 기반으로 적용하는 구체적인 방법입니다. 이 페이지에서 레지스트리나 글꼴 접근 권한을 제공한다는 의미는 아닙니다.
승인된 내부 레지스트리 및 글꼴에 접근할 수 있는지 확인한 다음, 위에 나온 범위 지정 프로젝트 설정을 구성하세요.
애플리케이션 컴포넌트보다 먼저 Sass 엔트리를 컴파일한 뒤, App.vue 예시 전체를 마운트하세요.
미리보기에서 배분 모델을 전환하고, 양방향으로 정렬한 다음 레이블과 값, 합계가 계속 일치하는지 확인하세요.
MDS 재정의가 차트에도 적용된다고 가정하지 말고, 차트 요소에는 별도로 범위가 지정된 MCE 상수를 사용하세요.
04
Morningstar 디자인 시스템 AI 에이전트 설정
구현 시작점
승인된 팀을 위한 제한 레지스트리 설정입니다. 글꼴 경로는 애플리케이션에서 실제로 호스팅하는 라이선스 보유 파일을 가리켜야 합니다. 아래의 App.vue와 함께 사용하세요. 이 예제는 상수를 사용하는 네이티브 HTML 표이며, MDS 패키지를 공개적으로 사용할 수 있거나 네이티브 컴파일이 검증되었다고 주장하지 않습니다.
셸 / 자바스크립트 / SCSS
# Authorized Morningstar teams only: project .npmrc
@mds:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
@mce:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
# Within a Vite Vue 3 project with approved registry access
pnpm add @mds/constants-vue3 @mds/typography-vue3 @mds/fonts-vue3
pnpm add -D sass
// vite.config.js
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins:[vue()],
css:{modules:{generateScopedName:'[local]___researchNotebook'}}
});
// src/main.js
import {createApp} from 'vue';
import './main.scss';
import App from './App.vue';
createApp(App).mount('#app');
// src/main.scss — host licensed font files at this application path first
@use '@mds/fonts-vue3/scss/config' with ($font-path:'/fonts/morningstar-intrinsic');
@use '@mds/fonts-vue3';
@use '@mds/constants-vue3' as *;
@use '@mds/typography-vue3' as *;
h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; }
p,td,th { @include mds-body-text-m(); color:$mds-text-color-primary; }
main { margin:$mds-space-4-x; }
table { width:100%;border-collapse:collapse; }
th,td { text-align:left; border-bottom:1px solid $mds-color-neutral-37; }
.numeric { text-align:right;font-variant-numeric:tabular-nums; }
button { font:inherit;cursor:pointer; }
프로젝트를 위한 프롬프트
에이전트 프롬프트
이 가이드에서 명시한 버전 경계를 지키며 Morningstar에서 영감을 얻은 리서치 노트를 만드세요. 정확한 배분 값을 시맨틱 표에 넣고, 색상은 자산의 의미에 따라 고정하세요. 등급을 임의로 만들거나 IP 아이콘을 장식용으로 사용하지 마세요. 승인된 액세스 권한이 있을 때만 현재 승인된 Vue 3 상수 및 글꼴 설정을 사용하고, 그렇지 않으면 오프라인 구현임을 명확히 표시하세요.
05
Morningstar 디자인 시스템 출처 및 범위
독립적으로 작성된 OpenDesign 가이드입니다. 배분 예시는 허구이며 재무 조언이 아닙니다. 과거의 숫자 상수에는 출처 버전이 표시되어 있습니다. 현재 패키지와 글꼴에 대한 액세스는 Morningstar의 관리 대상입니다.
