1-OCEAN · Interaction Lab

01 · 스크롤 리빌

용도: 긴 리포트 페이지에서 섹션이 시야에 들어올 때 서서히 등장. 사이트 전역에서 사용 중.

이 문장이 떠오릅니다

핵심: IntersectionObserver + .reveal → .in 클래스 전환 (site.js 참고). 임계값 threshold:.12

02 · 숫자 카운트업

용도: 핵심 수치(분석 선박 수, 리포트 쪽수)를 강조. 이징(ease-out cubic)으로 끝에서 감속.

0 척

핵심: requestAnimationFrame 루프, ease = 1−(1−p)³. data-target 속성으로 값만 바꿔 재사용 (site.js .count)

03 · 진행 바 + 슬라이더 연동

용도: 연재 진행률, 프로젝트 진척도. 슬라이더는 가정값을 실시간으로 바꾸는 연구용 입력으로도 그대로 씁니다.

VOYAGE LOG69%

핵심: input[type=range]의 oninput → width %. 그라데이션 채움은 style.css .pbar .fill

04 · 경로선 드로잉 (SVG)

용도: 항로·타임라인·플로우가 "그려지는" 오프닝. pathLength=100으로 두면 길이 계산 없이 %로 제어됩니다.

핵심: stroke-dasharray=100 + stroke-dashoffset 100→0 트랜지션. 절반만 채우려면 dasharray="26 100" (index.html 항로)

05 · 동심원 확장 (단계 시각화)

용도: "보호 대상이 넓어진다" 같은 포함 관계·단계 논리를 구조로 보여줄 때. 슬라이더로 단계를 움직여 보세요.

STAGE2

핵심: 반지름 배열을 단계 수만큼 on/new 클래스로 토글. 라벨 배열만 바꾸면 어떤 위계든 재사용

06 · 호버 툴팁 이정표

용도: 차트·지도 위 특정 지점에 규제 마일스톤이나 데이터 출처를 붙일 때. CSS만으로 동작(JS 불필요).

점 위에 마우스를 올려 보세요

핵심: .wp:hover .tip{opacity:1} + %좌표 배치. style.css의 .wp/.tip 그대로 사용 (planit-shipping.html v1 참고)

07 · 탭 필터 + 데이터 배열 렌더

용도: 글 목록·프로젝트를 분류별로. 내용은 배열 한 곳에서만 관리하므로 유지보수가 가장 쉬운 패턴.

핵심: DATA.filter(cat) → innerHTML. insight.html의 POSTS, project.html의 PROJECTS와 동일 구조

08 · 정렬 가능한 데이터 표

용도: 선사·조선소·시나리오 비교표. 헤더를 클릭하면 그 열 기준으로 정렬됩니다(다시 클릭 = 역순).

핵심: 배열 sort → 재렌더. th에 data-k, 클릭 시 방향 토글. 숫자·문자 모두 처리

09 · 파라미터 연동 차트

용도: 연구 발표의 백미. 가정(EUA 가격)을 슬라이더로 움직이면 차트가 즉시 반응합니다. "가정이 결론을 얼마나 흔드는가"를 보여줄 때.

EUA 가격: €75/tCO₂

핵심: oninput → 계산 → SVG rect 재렌더. tool.html drawChart와 같은 함수 재사용 가능

10 · 클립보드 내보내기

용도: 계산 결과를 이메일·보고서에 붙여넣을 요약 텍스트로. Decarbonizer의 "결과 요약 복사"와 동일.

→ 아무 곳에나 붙여넣어 확인

핵심: navigator.clipboard.writeText(). https 또는 로컬 파일에서 동작, 실패 시 폴백 문구

11 · 라인 드로잉 + 영역 채움

용도: 시계열의 서사적 공개. 선이 그려진 뒤 아래 영역이 차오르며 "추세의 무게"를 시각적으로 강조합니다.

핵심: 선은 dashoffset 드로잉, 영역은 그 뒤 opacity 트랜지션. 그라데이션 defs 재사용

12 · 바 차트 레이스

용도: "누가 앞서가는가"를 시간 흐름으로. 발주 잔고·선대 규모 경쟁을 보여줄 때 발표 임팩트가 가장 큽니다.

발주 잔고 (만 TEU, 예시) 2020

핵심: 연도별 데이터 → 정렬 → top/width 트랜지션(FLIP 없이 absolute+transition). setInterval로 진행

13 · 범프 차트 (순위 흐름)

용도: 국가·기업의 순위 역전 스토리. 선 위에 마우스를 올리면 그 주체만 하이라이트되어 "언제 추월당했는가"가 또렷해집니다.

핵심: 순위 = y좌표. hover 시 다른 선 opacity 낮춤. 조선 수주 점유율 역전 서사에 그대로 재사용

14 · 히트맵 매트릭스

용도: 두 축의 조합에서 뜨거운 곳 찾기. 항로 × 규제 비용, 조선소 × 시나리오 매트릭스에. 칸에 올리면 값이 표시됩니다.

예시 · 규제비용 가상값

핵심: 값→색 보간(연한 하늘→네이비). CSS grid라 데이터 크기만 바꾸면 자동 확장

15 · Gap & Trap 사분면 산점도

용도: 련의 핵심 프레임을 좌표계로. X = 체감 우위, Y = 실제 위치. 점에 올리면 이름과 좌표가 뜨고, 우하단(체감↑·실제↓)이 Trap 구역입니다.

핵심: 사분면 배경 tint + 산점 hover. 축 라벨만 바꾸면 어떤 2×2 프레임에도 재사용

16 · 링 게이지 애니메이션

용도: 목표 대비 달성률 하나를 크게. 대시보드 첫 화면의 얼굴. 버튼으로 값을 바꿔 보세요.

핵심: pathLength=100 원에 dasharray "v 100". 그라데이션 stroke + rotate(-90)로 12시 시작

17 · 캔버스 파도 (화려)

용도: 히어로·섹션 전환부의 살아있는 배경. 세 겹의 사인파가 서로 다른 속도로 흐릅니다. 마우스를 올리면 물결이 거칠어져요.

핵심: requestAnimationFrame + 3겹 sin 합성. prefers-reduced-motion이면 정지 프레임 1장만 그림

18 · 시나리오 모핑 바

용도: 두 시나리오(기준 vs 전환)를 토글하면 막대가 제자리에서 모핑됩니다. "무엇이 줄고 무엇이 새로 생기는가"가 이동으로 읽힙니다.

핵심: 같은 DOM의 width만 트랜지션. 항목이 늘거나 줄어도 배열 갱신으로 대응. 비용 구성·연료 믹스 비교에