문서화된 HarvardSites 편집 패턴을 독립적으로 해석한 HTML/CSS 예제입니다. 색상, 크기 및 가상 콘텐츠는 독자적으로 구성했으며 공식 CMS 런타임을 사용하지 않습니다. · 구현 레퍼런스
02
HarvardSites 디자인 시스템 디자인 참고 자료
HarvardSites의 공식 편집 기준과 구성 요소 지침입니다. 공개 자료에는 구성 가능한 스타일과 요구 사항이 명시되어 있지만, 공개된 범용 CSS 토큰 패키지는 없습니다. 미리보기는 독자적으로 정한 숫자 기반 레이아웃·색상 값과 시스템 글꼴 대체 글꼴을 사용합니다.
공개 디자인 시스템 사이트에서는 재사용 가능한 편집 구성 요소와 대학 웹사이트 전반에서 선택할 수 있는 항목을 소개합니다. 이 사이트는 harvard-design-system이라는 패키지나 가져와 사용할 수 있는 React API가 존재한다는 근거가 아닙니다. 권한이 있는 사이트 편집자는 플랫폼의 구성 요소를 조합해 웹사이트를 만들고, 독립 개발자는 동일한 CMS를 사용하는 척하지 않고 문서화된 콘텐츠 패턴을 참고할 수 있습니다.
유용한 첫 단계는 페이지의 종류를 정하는 것입니다. 학회 안내 단일 페이지에는 개요, 일정, 세션 탐색, 참석자에게 필요한 추가 정보가 필요합니다. 제공된 구성 레시피는 각 요구 사항을 실제 HarvardSites 구성 요소와 연결합니다. 독립형 HTML는 가상의 콘텐츠를 사용하고 기관 식별 표시를 배제해 이러한 구성을 별도로 보여 줍니다.
플랫폼은 제목과 본문에 사용할 세 가지 글꼴 조합을 제공합니다. Baskerville과 Source Sans Pro, Merriweather와 Roboto, Inter와 Inter입니다. 이 조합은 사이트 스타일과 별개로 선택합니다. 페이지를 프레임형 레이아웃에서 둥근 레이아웃으로 바꿔도 글꼴까지 바꿀 필요는 없습니다.
그래픽 디자인 기준은 서체를 두 개로 제한하고 산세리프 글꼴을 하나 이상 사용하도록 하며, 최소 글자 크기를 1rem으로 정합니다. 메뉴, 컨트롤, 레이블을 비롯한 길 안내 요소에는 산세리프 글꼴을 사용합니다. 공개된 x-height 기준은 글자 크기 16px에서 8.3px ±5%로, 단순히 읽기 쉬운 글꼴을 권장하는 것보다 구체적인 기준입니다. 예시에서는 화면에 표시되는 대체 글꼴로 Arial과 Georgia를 사용하지만, 이를 플랫폼에서 제공하는 글꼴 조합이라고 주장하거나 해당 기준에 따라 공식적으로 검증했다고 보지 않습니다.
텍스트 블록과 제목은 가운데 정렬이나 양쪽 정렬이 아닌, 읽는 방향에 맞춰 정렬합니다. 링크가 아닌 텍스트에는 밑줄을 사용하지 않습니다. 제목은 명확하게 유지하고 강조에는 굵기를 사용합니다. 글자를 늘리거나 윤곽선을 추가하거나 자간을 넓혀 디스플레이 효과를 만들지 않습니다. 따라서 미리보기에서는 모든 레이블의 글자 크기를 1rem 이상으로 유지하고, 행사 소개 문구를 왼쪽 정렬합니다.
Light & Elegant는 개방된 섹션, 약한 둥근 모서리, 살짝 어긋난 이미지를 사용합니다. Bold & Compelling은 직선형 가장자리와 윤곽선, 구분선을 강조합니다. Friendly & Approachable는 둥근 그룹화와 알약 모양 버튼을 사용합니다. 이러한 설정은 같은 콘텐츠와 구성 요소 구조의 시각적 프레이밍에 영향을 줍니다.
예시에는 텍스트, 아코디언 상태, 포커스 동작을 바꾸지 않고 차이를 살펴볼 수 있는 레이아웃 스타일 선택기가 있습니다. 독자적으로 정한 CSS 값을 사용해 문서화된 시각적 개념을 재현한 것이며, CMS 스타일시트를 그대로 복제하지는 않습니다. 특히 테두리 너비와 모서리 반경은 애플리케이션에서 정한 값이지, HarvardSites 토큰을 추출한 값이 아닙니다.
HarvardSites는 텍스트, 배경, 버튼, 강조 요소의 역할과 밝은 테마 및 어두운 테마에서의 색상 매핑을 설명합니다. 팔레트가 달라져도 이러한 관계는 일관되게 유지할 수 있습니다. 공개 자료에는 모든 사이트에 적용되는 단일 필수 16진수 색상 집합이 명시되어 있지 않습니다. 따라서 미리보기에서는 중립적인 잉크색, 갈색 강조색, 따뜻한 배경색을 Harvard 브랜드 토큰이라고 부르지 않고 독자적으로 정한 값으로 표시합니다.
Hero 또는 Section Heading으로 행사를 소개한 다음, 인라인 표로 일정을 표시합니다. 공식 단일 페이지 가이드에서는 모바일에서 읽기 쉽도록 셀을 간결하게 작성하고 시간 표기법을 일관되게 유지하며 열 수를 제한할 것을 권장합니다. 예시에서는 Time과 Session 열을 사용합니다. 장소 및 이용 안내는 열 다섯 개로 빽빽한 일정을 만들지 않도록 표 위나 아래에 배치합니다.
추가적인 실용 정보를 제공할 때는 아코디언을 사용할 수 있습니다. 자격 요건, 장소 이용 안내, 취소 정보, 마감일처럼 꼭 알아야 하는 내용은 접힌 텍스트를 놓칠 수 있으므로 처음부터 표시해야 합니다. 단일 행사에는 짧고 독립적인 페이지를 사용할 수 있습니다. 초록이 길고 여러 트랙이 동시에 진행되는 대규모 프로그램에는 공개 항목을 끝없이 중첩하는 대신 세부 페이지로 연결해야 합니다.
50/50 카드는 이미지 또는 텍스트 영역과 설명 문구를 짝지어 보여 줍니다. 문서에 명시된 필드에는 이미지, 캡션, 선택적 상단 문구, 제목, 설명 및 행동 유도 링크가 포함됩니다. 눈에 띄게 강조할 스토리나 이벤트 하나를 소개할 때 사용하세요. 중요도가 비슷한 여러 항목에는 세로형 카드가 적합하고, 빠른 작업에는 버튼형 카드가 적합합니다.
50/50 카드가 제 기능을 하려면 충분한 공간이 필요합니다. 좁은 보조 탐색 영역에 억지로 넣지 말고, 장식용 스톡 이미지가 아닌 의미 있는 이미지를 사용하도록 안내합니다. 이 예시는 공식 사례에 소개된 변형인 텍스트 전용 분할 구성을 사용합니다. 한쪽에는 간결한 주제를, 다른 쪽에는 설명과 일정 링크를 배치합니다. 이렇게 하면 임의로 만든 캠퍼스 사진을 실제 하버드 환경인 것처럼 오해하게 만들지 않습니다.
공식 이미지 가이드에서는 Hero 이미지에 약 1920px, 50/50 카드에 800px, 세로형 카드에 600px, 목록 썸네일에 400px 크기로 내보낼 것을 권장합니다. 이는 대략적인 준비 기준이며, 고정된 CSS 렌더링 너비가 아닙니다. 대부분의 파일은 200KB 미만으로 유지하고, 사진에는 JPG, 투명도나 선화가 필요한 경우에는 PNG, 단순한 그래픽에는 SVG를 사용하도록 권장합니다.
정보를 전달하는 이미지에는 의미 있는 대체 텍스트를 제공하고, 이미지와 함께 표시할 맥락이나 출처가 있다면 캡션을 사용하세요. 장소 지도에는 시각 자료뿐 아니라 텍스트로 된 경로 안내나 그에 상응하는 위치 설명도 필요합니다. 이미지를 자르면 문구에서 언급하는 얼굴, 사물 또는 레이블이 사라질 수 있습니다. 데스크톱의 넓은 이미지가 모든 기기에 적합하다고 가정하지 말고, 업로드 후 실제로 좁은 화면에서 어떻게 보이는지 확인하세요.
HarvardSites는 자동으로 다른 항목을 닫는 아코디언과, 모든 섹션을 열거나 닫는 컨트롤이 있는 펼침 유지 변형을 모두 문서화합니다. 이 예시에서는 방문자가 이동 및 준비 정보를 함께 읽을 수 있도록 각 항목을 독립적으로 열어 둘 수 있는 동작을 선택했습니다. 각 제목은 패널을 열지 않아도 숨겨진 내용을 알 수 있게 설명합니다.
이 코드는 독립적인 구현을 위해 기본 HTML 요소인 details와 summary를 사용합니다. HarvardSites가 생성하는 마크업을 나타내는 것은 아닙니다. 모두 열기 및 모두 닫기 버튼은 각 details.open 속성을 업데이트하며, 각 summary는 브라우저의 기본 키보드 조작을 그대로 지원합니다. 중첩 아코디언은 필요하지 않으며, 필수 정보는 이 그룹 바깥에 표시합니다.
html
<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
<button type="button" id="open-all">Open all sections</button>
<button type="button" id="close-all">Close all sections</button>
<details><summary>What will I need?</summary>
<p>Bring a notebook. The fictional workshop supplies all reading material.</p>
</details>
<details><summary>Can I join part of the day?</summary>
<p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
</details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
panels.forEach(panel => { panel.open = false; });
});
</script>
승인된 HarvardSites 프로젝트에서 이벤트 페이지를 구성하기 전에 승인된 사이트 스타일, 글꼴 조합 및 색상 역할을 선택하세요. 플랫폼에 이미 있는 컴포넌트를 사용하세요. 독립 데모 HTML를 편집기에 붙여 넣고 사용자 지정 스크립트가 실행되리라 기대해서는 안 됩니다. 실제 편집기 컨트롤은 제공된 사이트에 따라 달라집니다. 이 작업 안내에서는 설정 화면을 지어내지 않고 문서화된 선택 항목만 설명합니다.
데모의 스타일 선택기는 시각적 틀만 바꿉니다. 참석자 패널 두 개를 모두 연 다음 스타일을 바꾸고 패널이 열린 상태로 유지되는지 확인하세요. 그런 다음 모두 닫고 키보드로 하나를 다시 여세요. 유용한 연속성 확인 방법입니다. 시각적 표현이 독자의 위치를 잃게 하거나 콘텐츠 모델을 바꾸어서는 안 됩니다.
검증된 이벤트 제목, 날짜, 장소, 일정, 접근성 정보와 업데이트 담당자를 준비하세요.
문서화된 컴포넌트를 사용해 소개 문구, 간결한 일정 표 및 보조 아코디언을 구성하세요.
좁은 화면과 키보드 조작을 미리 확인하고, 등록 링크가 실제 승인된 목적지로 연결되는지 검증하세요.
전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research forum — HarvardSites pattern interpretation</title><style>*{box-sizing:border-box}body{margin:0;font:1rem/1.6 Arial,sans-serif;color:#242424;background:#fff}main{max-width:70rem;margin:auto;padding:2rem 1.25rem}.config{padding:1rem 0;border-bottom:1px solid #b9b4ac;margin-bottom:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}select,button{font:inherit;color:inherit;background:white;border:1px solid #615a51;padding:.65rem .9rem}button{cursor:pointer}h1,h2{font-family:Georgia,serif;line-height:1.15}h1{font-size:clamp(2.5rem,6vw,4rem);max-width:15ch;margin:1rem 0}h2{font-size:1.75rem}a{color:#653f3a;text-underline-offset:4px}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #005fcc;outline-offset:4px}.hero{padding-bottom:2rem;border-bottom:1px solid #b9b4ac}.meta{color:#653f3a;font-weight:bold}.split{display:grid;gap:1.5rem;margin:2rem 0;padding:1.5rem;background:#f4f1ec}.split h2{margin:0}.split p{margin:0 0 1rem}table{width:100%;border-collapse:collapse;margin:1rem 0 2rem}caption{text-align:left;font-weight:bold;margin-bottom:1rem}th,td{text-align:left;padding:1rem .5rem;border-bottom:1px solid #b9b4ac;vertical-align:top}th:first-child,td:first-child{width:7rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}details{border-top:1px solid #b9b4ac;padding:1rem 0}details:last-of-type{border-bottom:1px solid #b9b4ac}summary{font-weight:bold;cursor:pointer}details p{max-width:55ch;margin-bottom:0}.note{margin:2rem 0 0;padding:1rem;border-left:4px solid #653f3a;background:#f4f1ec}footer{padding-top:2rem;margin-top:2rem;border-top:1px solid #b9b4ac}body[data-style="bold"] .split{border:2px solid #242424}body[data-style="friendly"] .split{border-radius:1.5rem}body[data-style="friendly"] button{border-radius:3rem}body[data-style="light"] .split{border-radius:.3rem;background:#faf9f6}@media(min-width:48rem){.split{grid-template-columns:1fr 1fr;padding:2rem}.body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}main{padding:2.5rem}}</style></head><body data-style="bold"><main><div class="config"><label for="style">Explore framing</label><select id="style"><option value="bold">Bold & Compelling interpretation</option><option value="light">Light & Elegant interpretation</option><option value="friendly">Friendly & Approachable interpretation</option></select></div><header class="hero"><p class="meta">An original academic event example</p><h1>Ideas across disciplines</h1><p>A one-day forum on how researchers turn shared questions into new methods.</p><p><strong>Friday, 16 October · 9:30–16:00 · Example Learning Centre</strong></p><p>Fictional programme. No registration or university affiliation is implied.</p></header><section class="split" aria-labelledby="theme"><h2 id="theme">One question.<br>Many ways of seeing.</h2><div><p>Historians, scientists, and designers compare the evidence they work with and the assumptions they bring to it.</p><a href="#agenda">Explore the day’s programme →</a></div></section><div class="body-grid"><section id="agenda" tabindex="-1"><h2>The day at a glance</h2><table><caption>Illustrative programme</caption><thead><tr><th scope="col">Time</th><th scope="col">Session</th></tr></thead><tbody><tr><td>09:30</td><td><strong>Welcome and questions</strong><br>Shared framing for the day</td></tr><tr><td>10:00</td><td><strong>Working with evidence</strong><br>A conversation across disciplines</td></tr><tr><td>13:30</td><td><strong>Methods in practice</strong><br>Small-group demonstrations</td></tr><tr><td>15:30</td><td><strong>What changes next?</strong><br>Reflection and closing discussion</td></tr></tbody></table></section><section><h2>Attendee information</h2><div class="controls"><button id="open-all" type="button">Open all sections</button><button id="close-all" type="button">Close all sections</button></div><details><summary>What will I need?</summary><p>Bring a notebook. All reading material is provided in this fictional programme, and no specialist preparation is required.</p></details><details><summary>Can I join part of the day?</summary><p>The example schedule has morning and afternoon sessions. A real event page should state whether individual sessions require separate registration.</p></details><p class="note"><strong>Access information stays visible.</strong><br>A real event must provide verified venue access details and an accommodation contact here, outside collapsed panels.</p></section></div><footer>Independent interpretation of HarvardSites editorial guidance. Original layout values and colors; Arial and Georgia fallbacks. This is not a HarvardSites CMS page.</footer></main><script>document.querySelector('#style').addEventListener('change',e=>document.body.dataset.style=e.target.value);const panels=[...document.querySelectorAll('details')];document.querySelector('#open-all').addEventListener('click',()=>panels.forEach(p=>p.open=true));document.querySelector('#close-all').addEventListener('click',()=>panels.forEach(p=>p.open=false));</script></body></html>
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
HarvardSites 디자인 시스템 에이전트 설정
구현 시작점
승인된 HarvardSites 편집자를 위한 구체적인 구성 및 제작 절차입니다. 공개 패키지 API나 검증되지 않은 토큰 규모를 지어내지 않습니다. Sources의 완전한 실행 예제 ZIP에는 정확한 미리보기 종속성과 전체 문서도 포함되어 있습니다. 해당 디렉터리에 압축을 풀고 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/harvard-sites.html을 여세요. 모듈 기반 예제를 file://로 열지 마세요.
text
HarvardSites editorial configuration recipe (not a package command)
1. In an authorized HarvardSites site, choose an available site style:
Bold & Compelling for clearly framed conference sections.
2. Choose typography separately:
Baskerville + Source Sans Pro, Merriweather + Roboto, or Inter + Inter.
3. Apply the site's approved color roles; do not hand-color every card.
4. Compose an event page from available platform components:
Section Heading/Hero -> inline schedule table -> attendee Accordion.
5. Use a 50/50 Card for one featured event or a venue map with text;
use Vertical Cards or a taxonomy-driven List for equal event records.
6. Add descriptive headings, image alternatives, verified times and locations.
Preview mobile layout and keyboard interactions before publication.
Standalone demonstration: open the supplied harvard-sites.html.
It uses ordinary HTML, CSS and JavaScript, not the HarvardSites runtime.
프로젝트를 위한 프롬프트
에이전트 프롬프트
승인된 HarvardSites 연구 이벤트 페이지를 구성할 때는 Section Heading 또는 Hero, 간결한 2열 일정 표, 그리고 열어 둔 상태를 유지하는 참석자용 Accordion을 사용하세요. 사이트 스타일, 승인된 글꼴 조합 및 색상 역할은 각각 별도로 선택합니다. 중요한 접근성 및 시간 정보는 계속 표시하세요. 본문은 최소 1rem, 글꼴은 최대 두 종류로 제한하고, 컨트롤에는 산세리프체를 사용하며, 영어 문구는 왼쪽 정렬합니다. HarvardSites용 npm 패키지, 공개 토큰 규모 또는 편집기 UI를 지어내지 마세요. 독립 프로토타입을 구현한다면 CSS 값을 독자적으로 만든 값이라고 표시하고 공식 CMS 출력물이라고 주장하지 마세요.
05
HarvardSites 디자인 시스템 출처 및 범위
HarvardSites의 편집 참고 자료와 독립적인 가상 이벤트 프로토타입입니다. 공식 기관 표장, 플랫폼 접근 권한 및 프로덕션 구성은 계속해서 Harvard의 관리 대상입니다. 예약, 제휴 관계 또는 SDK 호환성을 주장하지 않습니다.
