사례 5 · 도선표 강조기능 북마크릿

1 프로젝트 핵심 요약

🎯 개발 목적 빽빽한 도선 스케줄 표에서 현재 시각 기준 가장 중요한 일정을 즉시 식별 — 시각 피로 제거

⚙️ 주요 기능 1시간 이내 스케줄 자동 탐색 · 녹색 하이라이트 · 화면 중앙 자동 스크롤 · 3분 주기 자동 갱신

🛠️ 기술 스택 Pure JavaScript ES6 · DOM Manipulation · CSS Injection · Browser Bookmarklet

javascript: DOM API scrollIntoView setInterval

✅ 기대 효과 핵심 선박 인지 시간 2~3초 → 0.2초 · 스크롤 탐색 완전 제거 · 무설치·무서버

2 도입 전 / 후 비교

⚠️ Before · 기존 방식

무채색 텍스트 도선표에서 수십 행을 눈으로 직접 스캔
현재 시각과 스케줄 시간을 하나씩 비교하며 찾기
마우스 휠로 위아래 스크롤하며 탐색
24시간 교대 근무 중 누적되는 시각 피로

핵심 정보 찾는 데 2~3초 + 시각 피로

✅ After · 자동화 후

북마크릿 클릭 한 번으로 즉시 실행
현재 시각 기준 가장 임박한 도선 일정 자동 탐색
녹색 테두리 하이라이트 + 화면 중앙 자동 스크롤
3분마다 자동 갱신 — 계속 클릭 불필요

🎯 핵심 정보 인지 시간 → 0.2초 이하

3 실제 시연 · 지금 바로 테스트

💡 설치 방법: 아래 노란 버튼을 브라우저 즐겨찾기 바로 드래그해서 놓으면 설치 완료입니다.

🔖 도선표 하이라이트 — 여기를 즐겨찾기 바로 드래그!

📖 사용 방법

1 위 노란 버튼을 브라우저 상단 즐겨찾기 바로 드래그 → 자동 저장
(또는 "코드 복사" 클릭 후 즐겨찾기 추가 시 URL 입력란에 붙여넣기)

2 도선 스케줄 테이블이 있는 웹 페이지로 이동

3 즐겨찾기 바의 "도선표 하이라이트" 버튼 클릭
→ 현재 시각 기준 가장 가까운 도선 일정 행이 녹색으로 강조되며 화면 중앙으로 이동

4 3분마다 자동으로 재탐색 — 탭을 유지하는 한 계속 작동

📟 하이라이트 효과 미리보기 (실제 적용 시와 유사)

선박명	구분	항로	날짜	시각
STAR PHOENIX	입항	2항로	05-20	07:30
OCEAN BRAVE	출항	1항로	05-20	09:15
KOREA PILOT	입항	3항로	05-21	--:--
SAEBOM	출항	1항로	05-21	15:00
GRAND PEACE	입항	2항로	05-21	18:30

↑ 녹색 행이 현재 시각 기준 가장 임박한 도선 일정으로 자동 선택됩니다

0.2초 핵심 일정 인지 시간

3분 자동 갱신 주기

무설치 순수 브라우저 작동

+ 소스코드 전문 공개

실제 구동되는 북마크릿 소스코드 원본입니다 (주석 포함 가독성 버전).

도선표 강조기능 북마크릿.txt

⬇ 다운로드

javascript:(function(){
  // 중복 실행 시 기존 타이머 클리어
  if(window.ptT) clearInterval(window.ptT);
  if(window.scT) clearInterval(window.scT);

  function h(){
    var n=new Date(),
        m=String(n.getMonth()+1).padStart(2,'0'),
        d=String(n.getDate()).padStart(2,'0'),
        tm=new Date(n);
    tm.setDate(n.getDate()+1);
    var tM=String(tm.getMonth()+1).padStart(2,'0'),
        td=String(tm.getDate()).padStart(2,'0'),
        d2=m+'-'+d, t2=tM+'-'+td,
        nx=null, mD=Infinity, fC=0;

    // CSS 하이라이트 스타일 동적 주입
    if(!document.getElementById('ps_s')){
      var s=document.createElement('style');
      s.id='ps_s';
      s.innerHTML='.t-hi td{background:#e8f5e9!important;border-top:2px solid #4caf50!important;border-bottom:2px solid #4caf50!important;font-weight:bold!important;color:#1b5e20!important;transition:all 0.3s;}';
      document.head.appendChild(s);
    }

    // 전체 tr 순회하며 시각 비교
    document.querySelectorAll('tr').forEach(function(r){
      r.classList.remove('t-hi');
      var tds=r.querySelectorAll('td');
      if(tds.length<5) return;
      var dt=tds[3].innerText.trim(),
          tt=tds[4].innerText.trim(),
          iT=dt.includes(d2), iN=dt.includes(t2);
      if(iT||iN){
        var mt=tt.match(/(\d{2}):(\d{2})/);
        if(mt){
          var st=new Date(n);
          if(iN) st.setDate(n.getDate()+1);
          st.setHours(parseInt(mt[1]),parseInt(mt[2]),0,0);
          var df=st-n;
          // 1시간(3,600,000ms) 이내 스케줄 하이라이트
          if(iT&&df>=0&&df<=3600000){
            r.classList.add('t-hi'); fC=1;
          } else if(!fC&&df>0&&df<mD){
            mD=df; nx=r;
          }
        }
      }
    });
    if(!fC&&nx) nx.classList.add('t-hi');
  }

  // 타겟 행을 화면 정중앙으로 부드럽게 스크롤
  function sC(){
    var t=document.querySelector('.t-hi');
    if(t) t.scrollIntoView({behavior:'smooth', block:'center'});
  }

  h();
  setTimeout(sC, 100);
  // 3분마다 자동 갱신
  window.ptT=setInterval(h, 180000);
  window.scT=setInterval(sC, 180000);
})();

실시간 도선 정보 시인성 극대화북마크릿

📖 사용 방법

실시간 도선 정보 시인성 극대화
북마크릿