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

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

검증: JavaScript 문법 및 변경 공백 검사 통과

README.md

@@ -91,3 +91,7 @@ python3 -m http.server 8000 --bind 127.0.0.1
 - 본문 바로가기, 포커스 표시, 이미지 대체 텍스트, 의미 있는 HTML 구조
 
 외부 CDN이나 폰트 라이브러리를 사용하지 않아 다운로드한 파일만으로 홈페이지 화면을 확인할 수 있습니다. 지도 모달은 외부 지도 서비스를 불러옵니다.
+
+## 연혁 편집
+
+연혁 내용은 `index.html`과 `index-form.html`의 `#journey` 안에 있습니다. 각 `timeline-panel-연도`의 제목과 설명을 수정하고, 설명 안의 핵심 기술은 `<strong>`으로 강조합니다. `script.js`는 탭 전환과 키보드 이동만 담당하고, 강조 스타일은 `journey.css`에서 관리합니다. 두 페이지의 연혁은 함께 수정합니다.

index-form.html

@@ -18,13 +18,14 @@
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="portfolio.css?v=780175b64ad9">
   <link rel="stylesheet" href="company.css">
-  <script src="script.js?v=20261006-contact-email" defer></script>
+  <script src="script.js?v=55c672584ac0" defer></script>
   <script src="portfolio.js" defer></script>
   <link rel="stylesheet" href="map-dialog.css">
   <script src="map-dialog.js" defer></script>
  <link rel="stylesheet" href="image-viewer.css">
  <script src="image-viewer.js" defer></script>
   <link rel="stylesheet" href="icons.css">
+  <link rel="stylesheet" href="journey.css?v=4a370cc28a98">
   <link rel="stylesheet" href="contact-form.css">
   <script src="contact-form.js" defer></script>
 </head>
@@ -318,7 +319,55 @@
       </div>
     </section>
 
-    <section id="journey" class="journey section" aria-labelledby="journey-title"><div class="wrap"><div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">A CONTINUOUS JOURNEY OF INNOVATION</span></div><div class="journey-heading reveal"><h2 id="journey-title">새로운 길은,<br>계속됩니다.</h2><p>첫 서버에서 글로벌 모빌리티까지.<br>기술이 바뀌어도, 더 나은 답을 찾는 우리의 태도는 같습니다.</p></div><div class="timeline-tabs reveal" role="tablist" aria-label="트론트 주요 연혁"><button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2008">2008<span>THE BEGINNING</span></button><button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2012">2012<span>NEW CONNECTIONS</span></button><button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2018">2018<span>MOVING FORWARD</span></button><button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2022">2022<span>EVERYDAY IMPACT</span></button><button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel" tabindex="0" data-year="2025">2025<span>WHAT'S NEXT</span></button></div><div id="timeline-panel" class="timeline-panel reveal" role="tabpanel" aria-labelledby="year-2025" tabindex="0"><span class="timeline-year" aria-hidden="true">2025</span><div class="timeline-detail"><p class="eyebrow">WHAT'S NEXT</p><h3>더 넓은 연결, 다음의 가능성</h3><p class="timeline-description">블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.</p><div class="tags"><span>Web3</span><span>관제 시스템</span><span>디지털 플랫폼</span></div></div></div></div></section>
+    <section id="journey" class="journey section" aria-labelledby="journey-title">
+      <div class="wrap">
+        <div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">TECHNOLOGY & EXPERIENCE</span></div>
+        <div class="journey-heading reveal"><h2 id="journey-title">프로젝트로 쌓아온<br>기술과 경험.</h2><p>서버·업무 시스템부터 내비게이션 HMI,<br>모바일·웹 플랫폼과 관제까지.</p></div>
+        <div class="timeline-tabs reveal" role="tablist" aria-label="트론트 연도별 개발 역량">
+          <button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel-2008" tabindex="-1" data-year="2008">2008<span>서버·업무 시스템</span></button>
+          <button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel-2012" tabindex="-1" data-year="2012">2012<span>사이니지·자산 관리</span></button>
+          <button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel-2018" tabindex="-1" data-year="2018">2018<span>내비게이션 HMI</span></button>
+          <button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel-2022" tabindex="-1" data-year="2022">2022<span>앱·웹·통합 관제</span></button>
+          <button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel-2025" tabindex="0" data-year="2025">2025<span>블록체인·관제</span></button>
+        </div>
+        <!-- 연도별 제목과 설명을 아래 HTML에서 수정합니다. -->
+        <div id="timeline-panel-2008" class="timeline-panel" role="tabpanel" aria-labelledby="year-2008" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2008</span>
+          <div class="timeline-detail">
+            <h3>서버와 업무 시스템 개발의 시작</h3>
+            <p class="timeline-description">2008년 12월 1일 설립 이후, 도메인 연결을 위한 DDNS 서버와 기업의 협업을 지원하는 그룹웨어, 원격강의 지원 시스템(LMS)을 개발했습니다. <strong>차량용 미들웨어</strong> 개발에도 참여하며 서버와 차량 소프트웨어 분야의 경험을 쌓았습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2012" class="timeline-panel" role="tabpanel" aria-labelledby="year-2012" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2012</span>
+          <div class="timeline-detail">
+            <h3>영상 안내부터 자산 관리까지</h3>
+            <p class="timeline-description">건물 내 여러 화면에 콘텐츠를 배포하는 <strong>디지털 사이니지</strong>와 <strong>NFC·RFID 기반 자산 관리</strong> 솔루션을 개발했습니다. 청라 U-CITY 환경 서비스에도 참여하며 현장의 정보를 연결하는 시스템을 구현했습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2018" class="timeline-panel" role="tabpanel" aria-labelledby="year-2018" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2018</span>
+          <div class="timeline-detail">
+            <h3>현대오토에버 국내외 내비게이션 HMI 개발</h3>
+            <p class="timeline-description">운전자와 차량 시스템을 연결하는 내비게이션 화면과 인터페이스를 개발했습니다. <strong>C++·Qt 기반 GUI</strong> 구현을 통해 국내외 시장을 위한 차량용 소프트웨어 개발에 참여했습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2022" class="timeline-panel" role="tabpanel" aria-labelledby="year-2022" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2022</span>
+          <div class="timeline-detail">
+            <h3>커뮤니티 플랫폼과 건물 에너지 관제 개발</h3>
+            <p class="timeline-description">약사의 구인·구직과 약국 매물, 약 정보를 나누는 <strong>모두의약국</strong>의 모바일 앱·웹·백엔드를 개발했습니다. 반려동물의 일상과 산책 활동을 기록하는 SNS 앱 <strong>BISPET</strong>, 건물의 온·습도와 공조기 가동 정보, 사용 전력을 관리하는 <strong>빌딩 에너지 관리 시스템(BEMS)</strong>도 구현했습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2025" class="timeline-panel" role="tabpanel" aria-labelledby="year-2025" tabindex="0">
+          <span class="timeline-year" aria-hidden="true">2025</span>
+          <div class="timeline-detail">
+            <h3>기부 플랫폼과 기관차 관제 개발</h3>
+            <p class="timeline-description">블록체인 기반 기부 플랫폼 <strong>GivOn</strong>의 관리자 시스템을 개발했습니다. 소규모 기관차 관제 프로그램 개발에도 참여하며 플랫폼 운영과 산업 현장에 필요한 소프트웨어를 구현했습니다.</p>
+          </div>
+        </div>
+      </div>
+    </section>
 
     <section id="contact" class="contact contact-form-section section" aria-labelledby="contact-title">
       <div class="wrap">

index.html

@@ -18,13 +18,14 @@
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="portfolio.css?v=780175b64ad9">
   <link rel="stylesheet" href="company.css">
-  <script src="script.js?v=20261006-contact-email" defer></script>
+  <script src="script.js?v=55c672584ac0" defer></script>
   <script src="portfolio.js" defer></script>
   <link rel="stylesheet" href="map-dialog.css">
   <script src="map-dialog.js" defer></script>
  <link rel="stylesheet" href="image-viewer.css">
  <script src="image-viewer.js" defer></script>
   <link rel="stylesheet" href="icons.css">
+  <link rel="stylesheet" href="journey.css?v=4a370cc28a98">
   <link rel="stylesheet" href="contact-email.css">
   <script src="contact-email.js" defer></script>
 </head>
@@ -318,7 +319,55 @@
       </div>
     </section>
 
-    <section id="journey" class="journey section" aria-labelledby="journey-title"><div class="wrap"><div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">A CONTINUOUS JOURNEY OF INNOVATION</span></div><div class="journey-heading reveal"><h2 id="journey-title">새로운 길은,<br>계속됩니다.</h2><p>첫 서버에서 글로벌 모빌리티까지.<br>기술이 바뀌어도, 더 나은 답을 찾는 우리의 태도는 같습니다.</p></div><div class="timeline-tabs reveal" role="tablist" aria-label="트론트 주요 연혁"><button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2008">2008<span>THE BEGINNING</span></button><button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2012">2012<span>NEW CONNECTIONS</span></button><button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2018">2018<span>MOVING FORWARD</span></button><button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2022">2022<span>EVERYDAY IMPACT</span></button><button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel" tabindex="0" data-year="2025">2025<span>WHAT'S NEXT</span></button></div><div id="timeline-panel" class="timeline-panel reveal" role="tabpanel" aria-labelledby="year-2025" tabindex="0"><span class="timeline-year" aria-hidden="true">2025</span><div class="timeline-detail"><p class="eyebrow">WHAT'S NEXT</p><h3>더 넓은 연결, 다음의 가능성</h3><p class="timeline-description">블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.</p><div class="tags"><span>Web3</span><span>관제 시스템</span><span>디지털 플랫폼</span></div></div></div></div></section>
+    <section id="journey" class="journey section" aria-labelledby="journey-title">
+      <div class="wrap">
+        <div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">TECHNOLOGY & EXPERIENCE</span></div>
+        <div class="journey-heading reveal"><h2 id="journey-title">프로젝트로 쌓아온<br>기술과 경험.</h2><p>서버·업무 시스템부터 내비게이션 HMI,<br>모바일·웹 플랫폼과 관제까지.</p></div>
+        <div class="timeline-tabs reveal" role="tablist" aria-label="트론트 연도별 개발 역량">
+          <button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel-2008" tabindex="-1" data-year="2008">2008<span>서버·업무 시스템</span></button>
+          <button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel-2012" tabindex="-1" data-year="2012">2012<span>사이니지·자산 관리</span></button>
+          <button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel-2018" tabindex="-1" data-year="2018">2018<span>내비게이션 HMI</span></button>
+          <button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel-2022" tabindex="-1" data-year="2022">2022<span>앱·웹·통합 관제</span></button>
+          <button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel-2025" tabindex="0" data-year="2025">2025<span>블록체인·관제</span></button>
+        </div>
+        <!-- 연도별 제목과 설명을 아래 HTML에서 수정합니다. -->
+        <div id="timeline-panel-2008" class="timeline-panel" role="tabpanel" aria-labelledby="year-2008" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2008</span>
+          <div class="timeline-detail">
+            <h3>서버와 업무 시스템 개발의 시작</h3>
+            <p class="timeline-description">2008년 12월 1일 설립 이후, 도메인 연결을 위한 DDNS 서버와 기업의 협업을 지원하는 그룹웨어, 원격강의 지원 시스템(LMS)을 개발했습니다. <strong>차량용 미들웨어</strong> 개발에도 참여하며 서버와 차량 소프트웨어 분야의 경험을 쌓았습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2012" class="timeline-panel" role="tabpanel" aria-labelledby="year-2012" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2012</span>
+          <div class="timeline-detail">
+            <h3>영상 안내부터 자산 관리까지</h3>
+            <p class="timeline-description">건물 내 여러 화면에 콘텐츠를 배포하는 <strong>디지털 사이니지</strong>와 <strong>NFC·RFID 기반 자산 관리</strong> 솔루션을 개발했습니다. 청라 U-CITY 환경 서비스에도 참여하며 현장의 정보를 연결하는 시스템을 구현했습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2018" class="timeline-panel" role="tabpanel" aria-labelledby="year-2018" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2018</span>
+          <div class="timeline-detail">
+            <h3>현대오토에버 국내외 내비게이션 HMI 개발</h3>
+            <p class="timeline-description">운전자와 차량 시스템을 연결하는 내비게이션 화면과 인터페이스를 개발했습니다. <strong>C++·Qt 기반 GUI</strong> 구현을 통해 국내외 시장을 위한 차량용 소프트웨어 개발에 참여했습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2022" class="timeline-panel" role="tabpanel" aria-labelledby="year-2022" tabindex="0" hidden>
+          <span class="timeline-year" aria-hidden="true">2022</span>
+          <div class="timeline-detail">
+            <h3>커뮤니티 플랫폼과 건물 에너지 관제 개발</h3>
+            <p class="timeline-description">약사의 구인·구직과 약국 매물, 약 정보를 나누는 <strong>모두의약국</strong>의 모바일 앱·웹·백엔드를 개발했습니다. 반려동물의 일상과 산책 활동을 기록하는 SNS 앱 <strong>BISPET</strong>, 건물의 온·습도와 공조기 가동 정보, 사용 전력을 관리하는 <strong>빌딩 에너지 관리 시스템(BEMS)</strong>도 구현했습니다.</p>
+          </div>
+        </div>
+        <div id="timeline-panel-2025" class="timeline-panel" role="tabpanel" aria-labelledby="year-2025" tabindex="0">
+          <span class="timeline-year" aria-hidden="true">2025</span>
+          <div class="timeline-detail">
+            <h3>기부 플랫폼과 기관차 관제 개발</h3>
+            <p class="timeline-description">블록체인 기반 기부 플랫폼 <strong>GivOn</strong>의 관리자 시스템을 개발했습니다. 소규모 기관차 관제 프로그램 개발에도 참여하며 플랫폼 운영과 산업 현장에 필요한 소프트웨어를 구현했습니다.</p>
+          </div>
+        </div>
+      </div>
+    </section>
 
     <section id="contact" class="contact contact-email-section section" aria-labelledby="contact-title">
       <div class="wrap">

journey.css

@@ -0,0 +1,6 @@
+.timeline-panel[hidden] { display: none; }
+.timeline-description strong { color: var(--ink); font-weight: 700; }
+.timeline-tabs button > span { font-family: var(--font); font-size: 11px; letter-spacing: 0; line-height: 1.5; }
+@media (max-width: 600px) {
+  .timeline-tabs button > span { font-size: 9px; }
+}

script.js

@@ -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) => {