유동적인 간격, CSS 색상 구성, Porsche Next 타이포그래피, 두 가지 선택이 가능한 구성 도구를 통해 Porsche Design System v4를 살펴보세요. 실제 토큰 표현식과 최신 세그먼트 컨트롤 이벤트를 사용하는 완전한 Vite 엔트리 파일이 포함되어 있습니다.
v4 토큰 역할과 분할 선택 동작을 자체적으로 오프라인에서 해석한 HTML/CSS 예시입니다. 네이티브 PDS 런타임, 원격 글꼴, 공식 모델 이미지, 실제 차량 데이터는 사용하지 않습니다. · 구현 레퍼런스
02
Porsche 디자인 시스템 디자인 참고 자료
Porsche Design System v4 문서를 참고하며, 토큰 페이지에는 v4.8.0이 표시됩니다. 최신 버전이라고 주장하는 것이 아니라 특정 버전 범위를 기준으로 한 참고 자료입니다. 자체 제작 외장 색상 견본은 애플리케이션 데이터이며, 공식 Porsche 도장 색상 코드가 아닙니다.
버전 4에서는 전역 CSS 변수를 기반으로 구성 요소 스타일을 만듭니다. 따라서 전역 스타일시트를 가져오는 것은 장식용 초기화가 아니라 아키텍처상 필수 요건입니다. 같은 가져오기에 정규화 규칙과 Porsche Next @font-face 정의도 포함됩니다.
이 참고 자료에는 v4 구성 요소와 토큰 규칙을 함께 정리했습니다. 텍스트 필드 래퍼나 구성 요소별 테마 prop을 사용하는 이전 예제를 마이그레이션 가이드 없이 그대로 가져오지 마세요. 문서 자체도 버전이 지정되어 있으므로, 이 페이지에서는 변하지 않는 API라고 주장하는 대신 적용 범위를 명시합니다.
캔버스, 표면, 기본 전경색 토큰에는 light-dark() 쌍이 포함되어 있습니다. CSS color-scheme 속성에서 적용할 색상 분기를 선택합니다. 애플리케이션에서 모드를 고정하거나 사용자의 환경설정을 따르도록 설정하려면 light, dark 또는 light dark를 지정하세요.
이 예시의 외장 색상은 별도로 제작한 견본입니다. 인터페이스를 다크 모드로 전환해도 주변의 표면과 텍스트만 바뀌며 선택한 외장 색상은 바뀌지 않습니다. 대비가 낮은 색상 역할은 장식용입니다. 이를 필수 선택 항목의 레이블에 사용하면 토큰의 의도된 사용 범위를 벗어납니다.
Porsche는 고정형과 유동형 스케일을 모두 제공합니다. 기본 엔트리는 페이지 여백에 중간 유동 표현식을 사용하고, 옵션 영역 내부에는 16px 및 32px 간격을 적용해 안정적인 관계를 유지합니다. 유동형 최댓값을 설정하면 넓은 화면에서도 여백이 끝없이 늘어나는 것을 방지할 수 있습니다.
예제는 문서화된 브레이크포인트 값 중 하나인 760px 아래에서 넓은 이미지와 컨트롤의 배치를 섹션별 세로 배치로 전환합니다. 세로 배치 여부는 애플리케이션 구성에 따른 선택이며, 브레이크포인트 값 자체는 디자인 시스템의 기준입니다.
Porsche Next에는 문서화된 대체 글꼴 스택과 작은 고정 크기 및 큰 유동형 크기로 구성된 타이포그래피 스케일이 있습니다. leadingNormal은 글꼴의 x-height에 반응하는 ex 단위에 고정 픽셀 값을 더해 사용합니다. 이를 임의의 1.5 비율로 바꾸면 의도한 리듬이 달라집니다.
오프라인 해석에서는 라이선스가 필요한 글꼴이 포함된 것처럼 가장하지 않고, 로컬 대체 글꼴과 편안하게 읽을 수 있는 줄 높이를 사용합니다. 기본 엔트리에서는 전역 스타일시트가 실제 글꼴을 정의합니다. v4 디자인 언어에서 제목은 일반 굵기를 사용하며, 계층을 표현하기 위해 큰 글꼴을 반드시 굵게 만들 필요는 없습니다.
표준 인터랙티브 요소의 반경은 12px이며, 카드와 대화상자 계열에는 24px을 사용합니다. 컴팩트 컨트롤에는 8px, 알림에는 16px을 적용합니다. 모든 요소에 가장 큰 반경을 적용하면 이러한 관계가 사라집니다.
원본 미리보기는 차량 디자인 예시를 넓은 24px 표면에 배치하고 12px 컨트롤을 사용합니다. 차량 실루엣은 독창적인 CSS 아트워크이며, Porsche 모델 렌더링이나 제품 사진이 아닙니다. 실제 구성 가능성을 암시하지 않으면서 동일한 구성을 소재 선택기에 활용할 수 있습니다.
각 p-segmented-control-item은 값을 제공합니다. 변경 이벤트는 해당 값을 event.detail로 반환하며, 예제에서는 요약을 다시 그리기 전에 이 값을 저장합니다. 그룹에는 표시되는 레이블을 지정해 마감 옵션과 휠 옵션을 구분합니다.
v4 API은 반응형 열 개수와 선택적 줄 바꿈 없는 스크롤을 지원합니다. 짧은 옵션은 한 화면에 함께 표시할 수 있으며, 현지화로 길어진 레이블은 잘라내지 말고 줄 바꿈을 적용하거나 의도적으로 스크롤할 수 있게 해야 합니다. 비활성화된 컨트롤은 폼 데이터에서 제외되므로, 이 예제를 실제 폼으로 확장할 때 유의해야 합니다.
Vite 구성은 공식 로더 부분 템플릿을 문서의 body에 삽입합니다. 메인 엔트리는 전역 스타일시트를 가져와 실제 커스텀 요소를 렌더링합니다. 범위가 지정된 :not(:defined) 규칙은 선택한 컴포넌트 태그가 등록되기 전에 깜빡이는 현상을 방지합니다.
문서화된 Vite 설정에서는 Lightning CSS의 LightDark 변환 기능을 제외합니다. 해당 폴리필에 문제가 있다고 명시되어 있기 때문입니다. 이 제외 설정은 중요합니다. 토큰 함수를 잘못 컴파일해 제거하면 컴포넌트 마크업이 올바르더라도 테마가 깨질 수 있습니다. 권장 프리로드는 나중에 문서화된 글꼴, 아이콘, 컴포넌트 부분 템플릿을 통해 추가할 수 있습니다.
마감과 휠 옵션을 선택하면 독창적인 구성기 일러스트가 업데이트됩니다. Porsche 제품 사양을 나타내지 않으며, 기본 세그먼트 컨트롤 이벤트는 별도의 v4 예제에 표시됩니다.
선택 항목 두 개를 제어하고 세션에만 요약 저장
기본 p-segmented-control 요소는 detail.value를 포함한 change 이벤트를 발생시키며, p-button은 명시적 유형과 함께 click 이벤트를 사용합니다.
타입스크립트
import './style.css';
const paints={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'};
const names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'};
type Paint=keyof typeof paints;
let paint:Paint='chalk',wheel='Classic';
document.querySelector<HTMLDivElement>('#app')!.innerHTML=`
<main><h1>Explore an original color study</h1>
<p>This specimen is not a real vehicle configurator or order.</p>
<div class="options">
<p-segmented-control id="paint" label="Finish" value="chalk">
<p-segmented-control-item value="chalk">Chalk</p-segmented-control-item>
<p-segmented-control-item value="blue">Coastal blue</p-segmented-control-item>
<p-segmented-control-item value="red">Garnet</p-segmented-control-item>
</p-segmented-control>
<p-segmented-control id="wheel" label="Wheel study" value="Classic">
<p-segmented-control-item value="Classic">Classic</p-segmented-control-item>
<p-segmented-control-item value="Aero">Aero</p-segmented-control-item>
</p-segmented-control>
</div><div class="preview"><div id="swatch" style="height:120px;border-radius:12px"></div>
<p id="summary" aria-live="polite"></p></div>
<div class="actions"><p-button id="save" type="button">Keep this combination</p-button>
<p-button id="scheme" type="button" variant="secondary">Switch color scheme</p-button></div>
<p id="saved" role="status"></p></main>`;
function render(){document.querySelector<HTMLElement>('#swatch')!.style.background=paints[paint];document.querySelector('#summary')!.textContent=`${names[paint]} · ${wheel} wheel study`;document.querySelector('#saved')!.textContent='';}
document.querySelector('#paint')!.addEventListener('change',e=>{const v=(e as CustomEvent<{value:string}>).detail.value;if(v in paints){paint=v as Paint;render();}});
document.querySelector('#wheel')!.addEventListener('change',e=>{wheel=String((e as CustomEvent<{value:string}>).detail.value);render();});
document.querySelector('#save')!.addEventListener('click',()=>{document.querySelector('#saved')!.textContent=`Kept for this page session: ${names[paint]}, ${wheel}. No order submitted.`;});
document.querySelector('#scheme')!.addEventListener('click',()=>{const root=document.documentElement;root.style.colorScheme=root.style.colorScheme==='dark'?'light':'dark';});
render();
문서화된 전역 스타일시트와 로더 부분 템플릿을 사용하는 v4 기본 Web Component 설정입니다. 오프라인 미리보기에는 원격 글꼴이나 패키지 런타임이 없습니다. 기본 패키지 컴파일은 여기서 검증하지 않았습니다.
text
# In a new Vite vanilla-ts project:
npm create vite@latest pds-specimen -- --template vanilla-ts
cd pds-specimen
npm install
npm install @porsche-design-system/components-js@4
npm install --save-dev lightningcss
// vite.config.ts
import {defineConfig} from 'vite';
import {Features} from 'lightningcss';
import {getLoaderScript} from '@porsche-design-system/components-js/partials';
export default defineConfig({
plugins:[{name:'pds-loader',transformIndexHtml(html){
return html.replace('</body>',getLoaderScript()+'</body>');
}}],
css:{transformer:'lightningcss',lightningcss:{exclude:Features.LightDark}}
});
/* src/style.css */
@import '@porsche-design-system/components-js';
html { color-scheme: light; }
:is(p-button,p-segmented-control,p-segmented-control-item):not(:defined){visibility:hidden}
main{max-width:60rem;margin:auto;padding:clamp(16px,1.25vw + 12px,36px)}
.options{display:grid;gap:32px}
.preview{padding:32px;border-radius:24px;margin-block:32px;border:1px solid currentColor}
.actions{display:flex;gap:16px;flex-wrap:wrap}
# Replace src/main.ts with the example below, then:
npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
필수 전역 스타일, 로더 부분 템플릿, color-scheme, 실제 유동형 간격, 12px 컨트롤 및 24px 컨테이너 반경을 사용하는 v4 PDS 구성을 만드세요. 독창적인 샘플 선택 항목 두 개에는 segmented-control의 change 이벤트에서 detail.value를 사용하고, 로컬 동작에는 type=button을 명시하세요. 레거시 래퍼 API를 함께 사용하지 말고, 샘플을 실제 차량 구성으로 표현하지 마세요.
05
Porsche 디자인 시스템 출처 및 범위
PDS v4에 한정된 독립적인 OpenDesign 참고 자료입니다. 오리지널 아트워크와 마감 이름은 Porsche 차량 사양, 도장 코드 또는 선택 가능한 옵션이 아닙니다. 거래는 이루어지지 않습니다.
