Europa Component Library 디자인 시스템 Europa EC 프리셋 및 버전 선택
에셋을 가져오기 전에 EC 또는 EU를 선택하세요
Europa는 기관별 프리셋을 각각 제공합니다. 이 예제는 연결된 EC 문서에 해당하는 @ecl/preset-ec 4.11.2를 사용합니다. EU 마크업, 과거 EC 스크린샷, 버전이 고정되지 않은 스타일시트를 함께 사용하지 않습니다. 패키지는 dist/styles/ecl-ec.css와 dist/scripts/ecl-ec.js를 제공하므로, 프런트엔드 프레임워크를 추가하지 않고도 정적 예제를 제공할 수 있습니다.
여기에 나온 EC 구현에는 EC 프리셋을 사용하세요.
CSS과 JavaScript의 버전을 동일하게 유지하세요.
아코디언 항목을 재사용할 때 소스 ID가 고유하도록 유지하세요.
버전이 지정된 구현으로 다루세요
이 참고 자료는 4.11.2 버전을 대상으로 하며, 이후 모든 릴리스의 토큰이나 동작이 동일하다고 단정하지 않습니다. 업그레이드할 때는 선택한 프리셋, 컴포넌트 마크업, 초기화 방식을 함께 비교해야 합니다. 패키지 이름이나 버전 번호가 바뀌었다는 사실만으로 이전에 복사한 패턴이 여전히 올바르게 동작한다고 볼 수는 없습니다.
Europa Component Library 디자인 시스템 Europa 색상 역할 및 기관 아이덴티티
브랜딩과 기본 동작 색상을 구분하세요
프리셋의 브랜딩 색상은 #004494이고 기본 색상은 #3860ed입니다. 원본 브리프에서는 브랜딩 색상을 상단의 얇은 선에만 사용하고, 컴포넌트 자체의 기본 동작 스타일을 따릅니다. Neutral-20은 페이지 배경을, neutral-60은 콘텐츠 구분을 위한 색상입니다. 이렇게 하면 기관을 나타내는 강조색과 인터랙티브 컨트롤의 색상을 구분할 수 있습니다.
예시에 공식적인 의미를 임의로 부여하지 마세요
이 페이지는 가상의 상담 메모를 사용한 OpenDesign 연구 자료입니다. 유럽연합 집행위원회 로고가 없으며, 자금 지원 공고나 서비스 또는 법적 요건을 나타내지 않습니다. 오류, 경고 및 성공 팔레트 항목은 실제 토큰으로 나열되어 있지만, 모든 색상을 보여 주기 위해 미리보기에 인위적인 작업 성공 메시지를 표시하지는 않습니다.
Europa Component Library 디자인 시스템 Europa 타이포그래피 및 간격 척도
완전한 글꼴 축약 표기를 사용하세요
EC 프리셋은 기본 화면용 글꼴로 Arial을 지정합니다. m 역할은 글자 크기 1rem, 줄 높이 1.5rem, 굵기 400으로 정의되며, 더 큰 역할에는 각각 고유한 줄 높이가 지정되어 있습니다. 참고 자료에는 개별 글자 크기만이 아니라 완전한 선언이 포함되어 있습니다. 이 예제의 제목 굵기는 제공된 역할에 더한 독자적인 강조 선택이며, 컴포넌트 텍스트는 기본 스타일시트의 제어를 따릅니다.
rem 간격과 콘텐츠 너비를 명확히 드러내기
간격 단계는 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4rem으로 구성됩니다. 기본 최대 가독 너비는 80ch입니다. 원본 레이아웃은 가운데 정렬된 1080px 외곽 너비와 반응형 패딩을 사용하며, 각 아코디언은 프리셋 고유의 간격을 유지합니다. 외곽 너비는 구성상의 선택이지 새로운 공식 토큰이 아닙니다.
Europa Component Library 디자인 시스템 Europa 아코디언 마크업과 기본 동작
실제 패널을 제어하는 제목 버튼 만들기
모든 .ecl-accordion__item에는 .ecl-accordion__toggle 버튼이 포함된 제목이 있습니다. 버튼의 aria-controls는 해당 .ecl-accordion__content 패널을 가리킵니다. 예제의 각 영역에는 고정된 트리거 ID와 aria-labelledby가 지정되어 있습니다. 기본 스크립트는 ID로 대상을 찾아 aria-expanded를 변경하고 panel.hidden을 설정합니다. 항목을 재정렬하거나 복사하더라도 이러한 연결이 올바르게 유지되어야 합니다.
외부 스프라이트 없이 명시적 표시자 사용하기
Europa Component Library 디자인 시스템 Europa 아코디언 이벤트와 모두 열기 동작
기본 컴포넌트에서 상태 가져오기
ECL.autoInit()은 초기화된 컴포넌트를 root.ECLAccordion으로 제공합니다. 애플리케이션은 컴포넌트의 onToggle 이벤트를 수신하고, 현재 aria-expanded="true"인 트리거 버튼의 수를 계산합니다. 이벤트 페이로드에는 대상 항목과 isOpening 값이 포함되어 있어 패널별 처리에 유용합니다. 이 카운트는 표시된 텍스트를 바탕으로 상태를 추측하거나 별도의 열린 상태 배열을 유지하지 않습니다.
일괄 동작을 예측 가능하게 유지하기
모든 패널이 열려 있으면 일괄 동작으로 패널을 닫고, 그렇지 않으면 모두 엽니다. 핸들러는 상태를 변경해야 하는 기본 버튼만 활성화합니다. hidden이나 aria-expanded를 직접 설정하지 않으므로 기본 이벤트와 계산된 카운트가 일관되게 유지됩니다. 다음 동작을 알리도록 컨트롤 레이블은 Open all sections와 Close all sections 사이에서 바뀝니다.
Europa Component Library 디자인 시스템 Europa 키보드 조작과 점진적 콘텐츠 표시
일반적인 버튼 조작 방식 사용하기
Tab 키로 제목 버튼에 초점을 맞추고, Enter 또는 Space 키를 누르면 브라우저의 기본 버튼 동작으로 패널이 열리거나 닫힙니다. 이 컴포넌트는 탭 목록이 아니므로 탭 목록의 키보드 조작 방식을 참고해 화살표 키 탐색을 추가하지 않아야 합니다. 여러 패널을 동시에 열어 둘 수 있어 내용을 비교하기 좋습니다. 초점 표시는 컴포넌트 스타일시트에서 제공되며 밝은 표면에서도 계속 잘 보입니다.
JavaScript 없이도 텍스트를 읽을 수 있게 하기
원본 HTML에서는 모든 패널이 표시되고 aria-expanded="true"로 설정되어 있습니다. 기본 초기화가 성공한 뒤 애플리케이션은 각 버튼을 활성화해 패널을 닫습니다. 따라서 JavaScript을 사용할 수 없는 경우에도 텍스트가 계속 표시되며, no-js 스타일에서는 비활성 일괄 도구 모음이 숨겨집니다. 이 대체 동작은 소스에 문단이 있는지만 확인한 것이 아니라 실제 표시 여부를 확인해 테스트했습니다.
Europa Component Library 디자인 시스템 Europa 반응형 패널과 긴 콘텐츠
높이와 줄바꿈을 자연스럽게 허용하기
문서에서 아코디언 높이를 고정하지 않습니다. 펼친 패널은 제목, 번호 목록, 강조된 결정 사항을 담을 수 있도록 높이가 자연스럽게 늘어납니다. 작은 화면에서는 원본의 바깥쪽 패딩이 줄어들고 제목에는 제공된 더 작은 글자 역할이 적용됩니다. 트리거 텍스트가 길면 줄바꿈되며 표시자는 계속 사용할 수 있습니다. 데스크톱, 태블릿, 휴대전화 너비는 물론 280px 너비에서도 확인했습니다.
읽기 컨트롤을 승인 절차로 바꾸지 않기
패널을 열거나 닫아도 표시 방식만 바뀝니다. 카운트는 열린 섹션 수를 나타낼 뿐, 완료된 섹션이나 충족된 요구 사항을 나타내지 않습니다. 바닥글에는 의견 제출이나 공식 승인이 이루어지지 않는다고 명시되어 있습니다. 실제 서비스에는 별도의 자격 요건, 데이터 유지 및 백엔드 동작이 필요하지만, 이러한 기능은 컴포넌트 데모에 포함되어 있지 않습니다.
Europa Component Library 디자인 시스템 Europa 전체 정적 설정
해당 프리셋을 설치하고 모든 파일 저장하기
제공된 index.html은 고정된 프리셋 스타일시트와 브라우저 스크립트를 ecl-app.js보다 먼저 불러옵니다. 함께 제공된 ecl.css와 ecl-app.js를 같은 디렉터리에 저장하고 폴더를 HTTP로 제공하세요. 콘텐츠, 표시자 SVG, 상태 핸들러가 모두 포함되어 있으므로 이 예제를 구성하는 데 별도의 앱 스캐폴드나 아이콘 다운로드는 필요하지 않습니다.
고정된 EC 프리셋을 설치합니다.
index.html, ecl.css, ecl-app.js를 한곳에 저장합니다.
디렉터리를 제공하고 개별 토글과 일괄 토글을 테스트합니다.
키보드, 좁은 화면, JavaScript 비활성화 조건에서도 다시 테스트합니다.
컴포넌트 업그레이드를 검토할 수 있게 하기
Europa Component Library 디자인 시스템 컴포넌트 예제
ecl-index.html — 전체 소스
전체 컴포넌트 마크업, 콘텐츠, 인라인 표시자, 프리셋 에셋 경로입니다.
html
<!doctype html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Public conversation brief</title><link rel="stylesheet" href="./node_modules/@ecl/preset-ec/dist/styles/ecl-ec.css"><link rel="stylesheet" href="./ecl.css"></head><body><main><header class="mast"><p class="eyebrow">European Commission preset / original study</p><h1>A clear brief for a public conversation</h1><p>Explore three preparation notes with native ECL expandable sections and an explicit open-all control.</p></header><p class="scope">ECL EC 4.11.2 CSS and native Accordion runtime. Original OpenDesign sample text; this is not an EU service, funding programme or legal guide.</p><div class="toolbar"><p id="count" role="status">0 of 3 sections open</p><button id="all" type="button" class="ecl-button ecl-button--secondary">Open all sections</button></div><div class="ecl-accordion" data-ecl-accordion data-ecl-auto-init="Accordion"><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="purpose" aria-expanded="true" id="toggle-purpose" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Define the purpose before collecting information</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="purpose" role="region" aria-labelledby="toggle-purpose"><p>This fictional planning note describes a small community consultation. It is sample editorial content, not an EU funding call, legal requirement or official application process.</p><h3>Make a decision possible</h3><ol><li>State which decision the conversation will inform.</li><li>List information already available before asking participants for more.</li><li>Name what remains outside the consultation.</li></ol><aside class="decision"><h3>Keep the outcome proportionate</h3><p>A short conversation may support a next step; it does not by itself prove consent, eligibility or public support.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="participation" aria-expanded="true" id="toggle-participation" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Make participation understandable and accessible</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="participation" role="region" aria-labelledby="toggle-participation"><p>Give participants enough context to decide whether and how to take part. The invitation should explain the topic, expected duration, available formats and the use of any notes.</p><h3>Provide usable alternatives</h3><ol><li>Offer a plain-language explanation of the activity.</li><li>Allow a person to contribute without speaking to the whole group.</li><li>Explain how to ask for an accessible format.</li></ol><aside class="decision"><h3>Check the invitation itself</h3><p>A technically accessible page is only one part of participation. Timing, language and the route for asking a question also affect who can join.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="record" aria-expanded="true" id="toggle-record" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Record decisions and unresolved questions separately</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="record" role="region" aria-labelledby="toggle-record"><p>After the session, distinguish what was agreed from what still needs investigation. A clean record helps the next reader understand how a proposal changed and why.</p><h3>Prepare a readable follow-up</h3><ol><li>Write the next action with an owner and review date.</li><li>Make open questions visible alongside conclusions.</li><li>Invite participants to correct an inaccurate summary.</li></ol><aside class="decision"><h3>Avoid a false completion signal</h3><p>Closing these panels is a reading action only. This preview sends no consultation response and records no formal approval.</p></aside></div></section></div><p class="footer">Each heading is a native button. Use Tab to move between headings and Enter or Space to toggle; several sections can remain open. Without JavaScript the notes remain readable.</p></main><script src="./node_modules/@ecl/preset-ec/dist/scripts/ecl-ec.js"></script><script src="./ecl-app.js"></script></body></html>
HTML 파일을 index.html로 저장하고 나머지 제공 파일의 이름은 변경하지 마세요.
ecl-app.js — 전체 소스
기본 초기화와 이벤트 기반 일괄 동작을 제공하며, 초기에는 HTML이 읽을 수 있는 상태로 표시됩니다.
자바스크립트
document.documentElement.classList.remove('no-js');ECL.autoInit();const root=document.querySelector('[data-ecl-accordion]');const buttons=[...root.querySelectorAll('[data-ecl-accordion-toggle]')];const all=document.querySelector('#all');function sync(){let open=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').length;document.querySelector('#count').textContent=open+' of '+buttons.length+' sections open';all.textContent=open===buttons.length?'Close all sections':'Open all sections';}root.ECLAccordion.on('onToggle',sync);buttons.forEach(b=>b.click());all.addEventListener('click',()=>{let close=buttons.every(b=>b.getAttribute('aria-expanded')==='true');buttons.filter(b=>(b.getAttribute('aria-expanded')==='true')===close).forEach(b=>b.click());});sync();
HTML 파일을 index.html로 저장하고 나머지 제공 파일의 이름은 변경하지 마세요.
04
Europa Component Library 디자인 시스템 에이전트 설정
구현 시작점
http://localhost:8000/을 엽니다. 이 예제는 EC 프리셋을 사용하며 아이콘이나 글꼴을 추가로 다운로드하지 않습니다.
sh
npm init -y
npm install @ecl/[email protected]
# Save index.html, ecl.css and ecl-app.js from the supplied examples.
python3 -m http.server 8000
프로젝트를 위한 프롬프트
에이전트 프롬프트
제공된 ECL EC 4.11.2 아코디언 요구사항을 세 개의 완전한 파일을 모두 사용해 구현합니다. 기본 트리거와 패널의 관계, onToggle 기반 개수 표시, 모두 열기/닫기 동작, 키보드 버튼 활성화, JavaScript를 사용하지 않는 읽기 방식, 원본 샘플의 범위를 명시적으로 유지합니다. 공식 EU 서비스나 정식 제출 절차인 것처럼 표현하지 않습니다.
05
Europa Component Library 디자인 시스템의 출처와 범위
ECL EC 4.11.2를 위한 OpenDesign 적용 가이드입니다. 원본 샘플의 안내와 페이지 구성은 유럽연합 집행위원회의 서비스, 자금 지원 공고 또는 법적 요건을 나타내지 않습니다.
