연혁을 개발 역량 중심으로 정리하고 내용을 HTML로 분리

- 연도별 제목을 프로젝트와 개발 역량 중심으로 변경
- 모두의약국, BISPET, BEMS 등 서비스의 대상과 기능을 설명해 이해도 개선
- 반복되는 분류명, 강조 문구와 기술 태그를 제거하고 제목과 설명으로 간소화
- 설명 안의 핵심 기술과 서비스명을 강조하고 별도 연혁 스타일 추가
- 연혁 내용을 두 HTML 페이지로 옮기고 공통 스크립트는 탭 전환과 키보드 이동만 담당
- 변경된 스크립트와 연혁 스타일에 버전 URL을 적용하고 README에 편집 방법 기록

검증: JavaScript 문법 및 변경 공백 검사 통과
This commit is contained in:
2026-10-07 11:35:04 +09:00
parent 7b4badf5a4
commit 7748eb2973
5 changed files with 118 additions and 23 deletions

View File

@@ -201,29 +201,16 @@
updateScroll();
}));
const history = {
2008: { label: 'THE BEGINNING', title: '기술로 여는 첫 번째 길', description: '2008년 12월 1일, 주식회사 트론트의 여정이 시작되었습니다. DDNS 서버, 그룹웨어, LMS 원격강의 지원 시스템과 차량용 미들웨어 개발로 기반을 다졌습니다.', tags: ['DDNS Server', 'Groupware', 'LMS'] },
2012: { label: 'NEW CONNECTIONS', title: '현장과 데이터를 연결하다', description: '디지털 사이니지와 NFC 자산 관리, 청라 U-CITY 환경 서비스 등으로 기술의 영역을 확장했습니다. 이후 RFID 기반 IT 자산 관리 솔루션으로 연결의 범위를 넓혔습니다.', tags: ['Digital Signage', 'NFC / RFID', 'U-CITY'] },
2018: { label: 'MOVING FORWARD', title: '세계의 도로 위로, 기술의 확장', description: '현대오토에버 국내외 내비게이션 HMI 개발을 시작했습니다. C++와 Qt 기반 GUI 및 인터페이스 기술로 다양한 시장의 차량용 사용자 경험 구현에 참여했습니다.', tags: ['Hyundai AutoEver', 'C++ / Qt', 'Navigation HMI'] },
2022: { label: 'EVERYDAY IMPACT', title: '기술이 일상에 가까워지는 순간', description: '약사 커뮤니티 모두의약국 개발을 시작으로 전문 플랫폼 역량을 확장했습니다. 빌딩 에너지 통합 관제 BEMS와 반려동물 커뮤니티 BISPET 등 산업과 일상을 위한 프로젝트를 이어갔습니다.', tags: ['모두의약국', 'BEMS', 'BISPET'] },
2025: { label: "WHAT'S NEXT", title: '더 넓은 연결, 다음의 가능성', description: '블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.', tags: ['Web3', '관제 시스템', '디지털 플랫폼'] }
};
// Timeline content lives in HTML; JavaScript only switches accessible panels.
const yearTabs = $$('.timeline-tabs [role="tab"]');
function selectYear(button, focus = false) {
const year = button.dataset.year;
const data = history[year];
yearTabs.forEach(tab => {
tab.setAttribute('aria-selected', String(tab === button));
tab.tabIndex = tab === button ? 0 : -1;
const selected = tab === button;
tab.setAttribute('aria-selected', String(selected));
tab.tabIndex = selected ? 0 : -1;
const panel = document.getElementById(tab.getAttribute('aria-controls'));
if (panel) panel.hidden = !selected;
});
$('#timeline-panel').setAttribute('aria-labelledby', button.id);
$('.timeline-year').textContent = year;
$('.timeline-detail .eyebrow').textContent = data.label;
$('.timeline-detail h3').textContent = data.title;
$('.timeline-description').textContent = data.description;
$('.timeline-detail .tags').replaceChildren(...data.tags.map(tag => {
const span = document.createElement('span'); span.textContent = tag; return span;
}));
if (focus) button.focus();
}
yearTabs.forEach((button, index) => {