@ -62,7 +62,7 @@ ${styles}
}
return (
< div className = "flex flex-col h-full overflow-hidden " style = { { background : 'var(--bg0)' } } >
< div className = "flex flex-col h-full overflow-hidden bg-bg-0" >
< div className = "flex-1 overflow-y-auto scrollbar-thin p-5" ref = { contentRef } >
{ /* 헤더 */ }
@ -150,7 +150,7 @@ function SystemOverviewPanel() {
< span className = "text-sm font-bold" > 유 출 유 확 산 모 델 이 란 ? < / span >
< / div >
< div style = { { . . . bodyText , fontSize : '12px' , lineHeight : '1.8' } } >
해 상 에 서 유 출 된 < b style= { { color : 'var(--orange)' } } > 원 유 및 유 류 < / b > 가 해 수 면 위 에 서 이 동 · 확 산 · 풍 화 되 는 과 정 을 물 리 · 화 학 적 이 론 에 기 반 해 전 산 으 로 모 의 하 는 프 로 그 램 입 니 다 . < b style= { { color : 'var(--cyan)' } } > 라 그 랑 지 안 입 자 추 적 법 < / b > 을 기 반 으 로 해 류 · 바 람 · 조 류 의 복 합 영 향 을 시 뮬 레 이 션 합 니 다 .
해 상 에 서 유 출 된 < b className= "text-status-orange" > 원 유 및 유 류 < / b > 가 해 수 면 위 에 서 이 동 · 확 산 · 풍 화 되 는 과 정 을 물 리 · 화 학 적 이 론 에 기 반 해 전 산 으 로 모 의 하 는 프 로 그 램 입 니 다 . < b className= "text-primary-cyan" > 라 그 랑 지 안 입 자 추 적 법 < / b > 을 기 반 으 로 해 류 · 바 람 · 조 류 의 복 합 영 향 을 시 뮬 레 이 션 합 니 다 .
< / div >
< / div >
< div >
@ -163,7 +163,7 @@ function SystemOverviewPanel() {
< span style = { { color : 'var(--red)' , fontWeight : 700 } } > ① < / span > 유 출 사 고 시 < b > 오 염 확 산 범 위 신 속 예 측 < / b >
< / div >
< div className = "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(249,115,22,.04)' , border : '1px solid rgba(249,115,22,.12)' } } >
< span style= { { color : 'var(--orange)' , fontWeight : 700 } } > ② < / span > < b > 방 제 자 원 배 치 < / b > 및 오 일 펜 스 전 략 수 립
< span className= "text-status-orange font-bold" > ② < / span > < b > 방 제 자 원 배 치 < / b > 및 오 일 펜 스 전 략 수 립
< / div >
< div className = "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(34,197,94,.04)' , border : '1px solid rgba(34,197,94,.12)' } } >
< span style = { { color : 'var(--green)' , fontWeight : 700 } } > ③ < / span > 해 안 선 도 달 예 측 및 < b > 피 해 최 소 화 < / b > 대 응
@ -180,7 +180,7 @@ function SystemOverviewPanel() {
< div className = "absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold"
style = { { background : 'rgba(249,115,22,.15)' , color : 'var(--orange)' , fontFamily : 'var(--fM)' } } > 1 < / div >
< div style = { labelStyle ( 'var(--orange)' ) } > 🛢 ️ 유 류 물 성 반 영 < / div >
< div className = "text-[11px] mb-2.5 " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > 유 류 종 류 별 < b > 물 리 · 화 학 적 특 성 < / b > 을 모 델 에 반 영 하 여 실 제 거 동 을 재 현 합 니 다 . < / div >
< div className = "text-[11px] mb-2.5 text-text-2 leading-[1.7]" > 유 류 종 류 별 < b > 물 리 · 화 학 적 특 성 < / b > 을 모 델 에 반 영 하 여 실 제 거 동 을 재 현 합 니 다 . < / div >
< div className = "flex flex-wrap gap-1" >
{ [
{ label : '비중(API)' , color : 'var(--orange)' } , { label : '점도' , color : 'var(--red)' } ,
@ -194,8 +194,8 @@ function SystemOverviewPanel() {
< div className = "absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold"
style = { { background : 'rgba(6,182,212,.15)' , color : 'var(--cyan)' , fontFamily : 'var(--fM)' } } > 2 < / div >
< div style = { labelStyle ( 'var(--cyan)' ) } > 🌊 해 양 환 경 데 이 터 수 집 < / div >
< div className = "text-[11px] mb-2.5 " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > < b > 실 시 간 해 양 · 기 상 관 측 데 이 터 < / b > 를 수 집 하 여 모 델 강 제 력 으 로 입 력 합 니 다 . < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[11px] mb-2.5 text-text-2 leading-[1.7]" > < b > 실 시 간 해 양 · 기 상 관 측 데 이 터 < / b > 를 수 집 하 여 모 델 강 제 력 으 로 입 력 합 니 다 . < / div >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
< div style = { { padding : '4px 8px' , background : 'rgba(6,182,212,.05)' , border : '1px solid rgba(6,182,212,.12)' , borderRadius : '4px' } } > 🌬 ️ 표 층 바 람 ( KMA · ECMWF ) < / div >
< div style = { { padding : '4px 8px' , background : 'rgba(59,130,246,.05)' , border : '1px solid rgba(59,130,246,.12)' , borderRadius : '4px' } } > 🌊 해 류 · 조 류 ( KHOA 조 위 표 ) < / div >
< div style = { { padding : '4px 8px' , background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , borderRadius : '4px' } } > 🌡 ️ 수 온 · 파 고 ( NIFS 수 치 예 보 ) < / div >
@ -206,8 +206,8 @@ function SystemOverviewPanel() {
< div className = "absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold"
style = { { background : 'rgba(34,197,94,.15)' , color : 'var(--green)' , fontFamily : 'var(--fM)' } } > 3 < / div >
< div style = { labelStyle ( 'var(--green)' ) } > 🧮 수 치 시 뮬 레 이 션 < / div >
< div className = "text-[11px] mb-2.5 " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > < b > 라 그 랑 지 안 입 자 시 뮬 레 이 션 < / b > 으 로 유 출 유 이 동 · 확 산 · 풍 화 를 동 시 계 산 합 니 다 . < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[11px] mb-2.5 text-text-2 leading-[1.7]" > < b > 라 그 랑 지 안 입 자 시 뮬 레 이 션 < / b > 으 로 유 출 유 이 동 · 확 산 · 풍 화 를 동 시 계 산 합 니 다 . < / div >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
< div style = { { padding : '4px 8px' , background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , borderRadius : '4px' } } > 📍 수 만 ~ 수 십 만 가 상 입 자 추 적 < / div >
< div style = { { padding : '4px 8px' , background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , borderRadius : '4px' } } > ⏱ ️ 1 시 간 스 텝 반 복 계 산 < / div >
< div style = { { padding : '4px 8px' , background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , borderRadius : '4px' } } > 🗺 ️ 농 도 분 포 · 해 안 도 달 예 측 < / div >
@ -235,8 +235,8 @@ function SystemOverviewPanel() {
< div className = "text-[10px] text-text-3" > { m . sub } < / div >
< / div >
< / div >
< div className = "text-[10px] mb-2 " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > { m . desc } < / div >
< div className = "flex flex-col gap-0.5 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[10px] mb-2 text-text-2 leading-[1.7]" > { m . desc } < / div >
< div className = "flex flex-col gap-0.5 text-[10px] text-text-2" >
< div className = "px-1.5 py-0.5 rounded" style = { { background : ` ${ m . color } 0F ` , color : 'var(--t2)' } } > 📍 개 발 : { m . org } < / div >
< div className = "px-1.5 py-0.5 rounded" style = { { background : ` ${ m . color } 0F ` , color : 'var(--t2)' } } > 🗓 ️ { m . year } < / div >
< div className = "px-1.5 py-0.5 rounded" style = { { background : ` ${ m . color } 0F ` , color : 'var(--t2)' } } > 🎯 강 점 : { m . strength } < / div >
@ -291,8 +291,8 @@ function SystemOverviewPanel() {
< div className = "mt-3.5 px-3.5 py-3 rounded-lg flex items-start gap-2.5"
style = { { background : 'rgba(168,85,247,.04)' , border : '1px solid rgba(168,85,247,.15)' } } >
< span className = "text-lg flex-shrink-0" > ⚡ < / span >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< b style= { { color : 'var(--purple)' } } > 3 종 앙 상 블 운 용 방 식 < / b > : WING 시 스 템 은 KOSPS · POSEIDON · OpenDrift를 동 시 구 동 하 여 각 모 델 의 예 측 결 과 를 중 첩 · 비 교 합 니 다 . 3 종 결 과 의 공 통 영 역 을 < b > 고 신 뢰 오 염 범 위 < / b > 로 , 최 외 곽 범 위 를 < b style= { { color : 'var(--orange)' } } > 불 확 실 성 경 계 < / b > 로 표 출 하 여 방 제 의 사 결 정 의 위 험 도 를 정 량 화 합 니 다 .
< div className = "text-[10px] text-text-2 leading-[1.7]" >
< b className= "text-primary-purple" > 3 종 앙 상 블 운 용 방 식 < / b > : WING 시 스 템 은 KOSPS · POSEIDON · OpenDrift를 동 시 구 동 하 여 각 모 델 의 예 측 결 과 를 중 첩 · 비 교 합 니 다 . 3 종 결 과 의 공 통 영 역 을 < b > 고 신 뢰 오 염 범 위 < / b > 로 , 최 외 곽 범 위 를 < b className= "text-status-orange" > 불 확 실 성 경 계 < / b > 로 표 출 하 여 방 제 의 사 결 정 의 위 험 도 를 정 량 화 합 니 다 .
< / div >
< / div >
< / div >
@ -313,12 +313,12 @@ function KospsPanel() {
< div className = "flex items-center gap-3 mb-3" >
< div className = "w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style = { { background : 'rgba(6,182,212,.15)' , border : '1px solid rgba(6,182,212,.3)' } } > 🔷 < / div >
< div >
< div className = "text-[15px] font-bold " style = { { color : 'var(--cyan)' } } > KOSPS ( Korea Oil Spill Prediction System ) < / div >
< div className = "text-[15px] font-bold text-primary-cyan" > KOSPS ( Korea Oil Spill Prediction System ) < / div >
< div className = "text-[11px] mt-0.5 text-text-3" > 한 국 해 양 연 구 원 ( KORDI ) 개 발 · 한 국 해 역 특 화 유 출 유 확 산 예 측 상 시 운 용 시 스 템 < / div >
< / div >
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
김 혜 진 · 이 문 진 · 오 세 웅 · 강 준 묵 ( 2011 ) 이 개 발 한 KOSPS는 유 류 오 염 사 고 발 생 즉 시 신 속 하 게 모 델 을 구 동 할 수 있 도 록 < b style= { { color : 'var(--cyan)' } } > 상 시 운 용 체 계 < / b > 를 구 축 한 국 내 유 출 유 확 산 예 측 시 스 템 입 니 다 . 정 적 자 료 ( 수 심 · 해 안 선 ) 와 동 적 자 료 ( KMA 바 람 · HYCOM 해 류 · KORDI 조 류 ) 를 외 부 FTP 연 계 로 자 동 갱 신 하 여 < b style= { { color : 'var(--green)' } } > 실 시 간 예 측 상 시 활 용 < / b > 을 가 능 하 게 합 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
김 혜 진 · 이 문 진 · 오 세 웅 · 강 준 묵 ( 2011 ) 이 개 발 한 KOSPS는 유 류 오 염 사 고 발 생 즉 시 신 속 하 게 모 델 을 구 동 할 수 있 도 록 < b className= "text-primary-cyan" > 상 시 운 용 체 계 < / b > 를 구 축 한 국 내 유 출 유 확 산 예 측 시 스 템 입 니 다 . 정 적 자 료 ( 수 심 · 해 안 선 ) 와 동 적 자 료 ( KMA 바 람 · HYCOM 해 류 · KORDI 조 류 ) 를 외 부 FTP 연 계 로 자 동 갱 신 하 여 < b className= "text-status-green" > 실 시 간 예 측 상 시 활 용 < / b > 을 가 능 하 게 합 니 다 .
< / div >
< div className = "mt-2.5 px-3 py-2 rounded-md text-[10px]" style = { { background : 'rgba(6,182,212,.06)' , border : '1px solid rgba(6,182,212,.15)' , color : 'var(--t3)' } } >
📚 참고문헌 : 김혜진 · 이 문 진 · 오 세 웅 · 강 준 묵 , & quot ; 유 출 유 확 산 예 측 모 델 의 상 시 운 용 체 계 개 발 에 관 한 연 구 & quot ; , 해 양 환 경 안 전 학 회 지 17 권 4 호 , pp . 375 - 382 , 2011 .
@ -339,20 +339,20 @@ function KospsPanel() {
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(6,182,212,.2)' , display : 'grid' , gridTemplateColumns : 'auto 1fr' , gap : '12px' } } >
< div className = "px-2.5 py-1.5 rounded-md text-center whitespace-nowrap" style = { { background : 'rgba(6,182,212,.12)' , border : '1px solid rgba(6,182,212,.25)' , fontFamily : 'var(--fM)' } } >
< div className = "text-[10px] text-text-3" > 등 록 번 호 < / div >
< div className = "text-[11px] font-bold " style = { { color : 'var(--cyan)' } } > 10 - 1567431 < / div >
< div className = "text-[10px] mt-0.5 " style = { { color : 'var(--t3)' } } > 2015.11 . 03 < / div >
< div className = "text-[11px] font-bold text-primary-cyan" > 10 - 1567431 < / div >
< div className = "text-[10px] mt-0.5 text-text-3" > 2015.11 . 03 < / div >
< / div >
< div >
< div className = "text-[11px] font-bold mb-1" > 해 양 유 류 오 염 사 고 발 생 시 효 율 적 인 방 제 방 안 수 립 을 위 한 유 출 유 확 산 예 측 방 법 < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' } } >
< span style= { { color : 'var(--cyan)' } } > 발 명 자 < / span > : 이 문 진 · 김 혜 진 · 이 승 현 · 전 태 병 | < span style= { { color : 'var(--cyan)' } } > 특 허 권 자 < / span > : 한 국 해 양 과 학 기 술 원
< div className = "text-[10px] text-text-2" >
< span className= "text-primary-cyan" > 발 명 자 < / span > : 이 문 진 · 김 혜 진 · 이 승 현 · 전 태 병 | < span className= "text-primary-cyan" > 특 허 권 자 < / span > : 한 국 해 양 과 학 기 술 원
< / div >
< div className = "flex flex-wrap gap-1 mt-1.5" >
{ [ 'ESI 방제정보지도' , 'CHARRY 실시간 조류모델' , '취송류 경험식' , 'Monte Carlo 입자추적' , '풍화 5단계' ] . map ( t = >
< span key = { t } style = { tag ( 'var(--cyan)' ) } > { t } < / span >
) }
< / div >
< div className = "text-[10px] mt-1.5 " style = { { color : 'var(--t3)' } } >
< div className = "text-[10px] mt-1.5 text-text-3" >
국 가 R & amp ; D : ① 3 차 원 유 출 유 확 산 예 측 기 반 방 제 지 원 기 술 개 발 ( 기 여 율 65 % ) ② HNS 유 출 거 동 예 측 및 대 응 정 보 지 원 기 술 개 발 ( 기 여 율 35 % ) | 해 양 수 산 부
< / div >
< / div >
@ -365,23 +365,23 @@ function KospsPanel() {
{ /* CHARRY 모델 */ }
< div className = { card } style = { { background : 'var(--bg0)' , border : '1px solid rgba(6,182,212,.2)' } } >
< div style = { labelStyle ( 'var(--cyan)' ) } > 🌀 CHARRY 모 델 ( 실 시 간 조 류 예 측 핵 심 알 고 리 즘 ) < / div >
< div className = "text-[11px] mb-2.5 " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
< div className = "text-[11px] mb-2.5 text-text-2 leading-[1.8]" >
< b > CHARRY < / b > 는 조 화 분 석 에 의 한 검 조 소 실 시 간 조 위 와 조 석 수 치 모 델 링 에 의 한 조 류 공 간 분 포 를 변 조 조 석 ( Modulated Tide ) 을 매 개 로 결 합 하 여 , 실 제 시 간 대 의 전 해 역 조 류 를 실 시 간 으 로 재 현 하 는 핵 심 알 고 리 즘 입 니 다 .
< / div >
< div className = "grid grid-cols-2 gap-2.5" >
< div className = { codeBox } >
< span style= { { color : 'var(--t3)' , fontSize : '10px' } } > /* 변조조석 수식 */ < / span > < br / >
< span className= "text-text-3 text-[10px]" > /* 변조조석 수식 */ < / span > < br / >
ζ ( t ) = A ( t ) cos [ σ t − θ ( t ) ] < br / >
A ² ( t ) = Σ Yᵢ ² + 2 Σ YᵢYⱼ cos [ ( σ ᵢ − σ ⱼ ) t − ( φ ᵢ − φ ⱼ ) ]
< / div >
< div className = "flex flex-col gap-1.5 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[10px] text-text-2" >
< div className = "px-2 py-1.5 rounded" style = { { background : 'rgba(6,182,212,.05)' , border : '1px solid rgba(6,182,212,.12)' } } >
< span style= { { color : 'var(--cyan)' , fontWeight : 700 } } > ① 진 폭 등 비 증 가 < / span > < br / >
< span style= { { color : 'var(--t2)' } } > 검 조 소 조 위 진 폭 f배 → 전 격 자 동 일 f배 증 가 < / span >
< span className= "text-primary-cyan font-bold" > ① 진 폭 등 비 증 가 < / span > < br / >
< span className= "text-text-2" > 검 조 소 조 위 진 폭 f배 → 전 격 자 동 일 f배 증 가 < / span >
< / div >
< div className = "px-2 py-1.5 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' } } >
< span style= { { color : 'var(--orange)' , fontWeight : 700 } } > ② 위 상 차 일 정 < / span > < br / >
< span style= { { color : 'var(--t2)' } } > 기 준 점 - 격 자 점 간 위 상 차 는 진 폭 에 무 관 하 게 일 정 < / span >
< span className= "text-status-orange font-bold" > ② 위 상 차 일 정 < / span > < br / >
< span className= "text-text-2" > 기 준 점 - 격 자 점 간 위 상 차 는 진 폭 에 무 관 하 게 일 정 < / span >
< / div >
< / div >
< / div >
@ -391,7 +391,7 @@ function KospsPanel() {
< div className = "grid grid-cols-2 gap-3 mb-4" >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--cyan)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--cyan)' ) } > 📊 동 적 입 력 자 료 체 계 < / div >
< div className = "flex flex-col gap-1.5 text-[11px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[11px] text-text-2" >
{ [
{ icon : '🌬️' , label : '바람·기온' , detail : 'KMA UM · ~12km · 2회/일' , bg : 'rgba(6,182,212,.04)' , bd : 'rgba(6,182,212,.12)' } ,
{ icon : '🌊' , label : '해류(표층)' , detail : 'HYCOM · ~9km · 1회/일' , bg : 'rgba(59,130,246,.04)' , bd : 'rgba(59,130,246,.12)' } ,
@ -408,14 +408,14 @@ function KospsPanel() {
< / div >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--green)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--green)' ) } > 🗂 ️ 정 적 입 력 자 료 < / div >
< div className = "flex flex-col gap-1.5 text-[11px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[11px] text-text-2" >
< div className = "px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(34,197,94,.04)' , border : '1px solid rgba(34,197,94,.12)' } } >
< div className = "font-semibold mb-0.5" > 📍 수 심 · 해 안 선 < / div >
< div style= { { color : 'var(--t3)' } } > 전 자 해 도 ( ENC ) → 500 m 격 자 보 간 < / div >
< div className= "text-text-3" > 전 자 해 도 ( ENC ) → 500 m 격 자 보 간 < / div >
< / div >
< div className = "px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(34,197,94,.04)' , border : '1px solid rgba(34,197,94,.12)' } } >
< div className = "font-semibold mb-0.5" > 🗺 ️ 격 자 구 성 < / div >
< div style= { { color : 'var(--t3)' } } > 좌 표 변 환 → 영 역 추 출 → 격 자 보 간 표 준 화 < / div >
< div className= "text-text-3" > 좌 표 변 환 → 영 역 추 출 → 격 자 보 간 표 준 화 < / div >
< / div >
< / div >
< / div >
@ -427,23 +427,23 @@ function KospsPanel() {
< div className = "grid grid-cols-2 gap-3" >
< div >
< div className = { ` ${ codeBox } mb-2 ` } >
< span style= { { color : 'var(--t3)' , fontSize : '10px' } } > /* 취송류 유속 (이·강, 2000) */ < / span > < br / >
V_WDC = < span style= { { color : 'var(--orange)' } } > 0.029 < / span > × V_wind
< span className= "text-text-3 text-[10px]" > /* 취송류 유속 (이·강, 2000) */ < / span > < br / >
V_WDC = < span className= "text-status-orange" > 0.029 < / span > × V_wind
< / div >
< div className = { codeBox } >
< span style= { { color : 'var(--t3)' , fontSize : '10px' } } > /* 취송류 유향 */ < / span > < br / >
θ _WDC = θ _wind + < span style= { { color : 'var(--cyan)' } } > 18.6 ° < / span >
< span className= "text-text-3 text-[10px]" > /* 취송류 유향 */ < / span > < br / >
θ _WDC = θ _wind + < span className= "text-primary-cyan" > 18.6 ° < / span >
< / div >
< / div >
< div className = "flex flex-col gap-1.5 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[10px] text-text-2" >
< div className = "px-2 py-1.5 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.15)' } } >
< span style= { { color : 'var(--orange)' , fontWeight : 700 } } > V_WDC < / span > : 표 면 취 송 류 유 속 ( m / s ) — 바 람 의 약 2.9 %
< span className= "text-status-orange font-bold" > V_WDC < / span > : 표 면 취 송 류 유 속 ( m / s ) — 바 람 의 약 2.9 %
< / div >
< div className = "px-2 py-1.5 rounded" style = { { background : 'rgba(6,182,212,.05)' , border : '1px solid rgba(6,182,212,.15)' } } >
< span style= { { color : 'var(--cyan)' , fontWeight : 700 } } > 18.6 ° < / span > : Ekman 편 향 각 — 북 반 구 기 준 풍 향 우 편 향
< span className= "text-primary-cyan font-bold" > 18.6 ° < / span > : Ekman 편 향 각 — 북 반 구 기 준 풍 향 우 편 향
< / div >
< div className = "px-2 py-1.5 rounded" style = { { background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.15)' } } >
< b style= { { color : 'var(--green)' } } > 출 처 < / b > : 이 문 진 · 강 용 균 ( 2000 ) , 해 양 표 면 취 송 류 라 그 랑 지 안 측 류 및 모 델 링
< b className= "text-status-green" > 출 처 < / b > : 이 문 진 · 강 용 균 ( 2000 ) , 해 양 표 면 취 송 류 라 그 랑 지 안 측 류 및 모 델 링
< / div >
< / div >
< / div >
@ -472,16 +472,16 @@ function KospsPanel() {
< / div >
) ) }
< / div >
< div className = "text-[10px] text-center mt-1 " style = { { color : 'var(--t3)' } } >
< div className = "text-[10px] text-center mt-1 text-text-3" >
FTP 자 동 갱 신 → DB 정 규 화 → 격 자 재 구 성 → 모 델 구 동 → 결 과 표 출
< / div >
< div className = "mt-2.5 p-2 rounded-md" style = { { background : 'rgba(234,179,8,.05)' , border : '1px solid rgba(234,179,8,.15)' } } >
< div className = "text-[10px] font-bold mb-1 " style = { { color : 'var(--yellow)' } } > ⚠ ️ 예 측 신 뢰 도 한 계 < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.6' } } >
< div className = "text-[10px] font-bold mb-1 text-status-yellow" > ⚠ ️ 예 측 신 뢰 도 한 계 < / div >
< div className = "text-[10px] text-text-2 leading-[1.6]" >
조류 : 무한 예 보 가 능 < br / >
해 류 ( HYCOM ) : < b > 5 일 치 < / b > 제 한 < br / >
기 온 · 취 송 류 : < b style= { { color : 'var(--orange)' } } > 3 일 치 < / b > 제 한 < br / >
→ < b style= { { color : 'var(--red)' } } > 72 h 초 과 예 측 시 신 뢰 도 저 하 < / b >
기 온 · 취 송 류 : < b className= "text-status-orange" > 3 일 치 < / b > 제 한 < br / >
→ < b className= "text-status-red" > 72 h 초 과 예 측 시 신 뢰 도 저 하 < / b >
< / div >
< / div >
< / div >
@ -494,22 +494,22 @@ function KospsPanel() {
< div className = "flex items-center gap-2.5 mb-3.5" >
< div className = "w-[34px] h-[34px] rounded-lg flex items-center justify-center text-[17px]" style = { { background : 'rgba(6,182,212,.15)' , border : '1px solid rgba(6,182,212,.3)' } } > 📜 < / div >
< div >
< div className = "text-[13px] font-bold " style = { { color : 'var(--cyan)' } } > 이 문 진 박 사 특 허 기 반 핵 심 기 술 ( 등 록 특 허 10 - 1567431 ) < / div >
< div className = "text-[10px] mt-0.5 " style = { { color : 'var(--t3)' } } > 해 양 유 류 오 염 사 고 발 생 시 효 율 적 인 방 제 방 안 수 립 을 위 한 유 출 유 확 산 예 측 방 법 · 한 국 해 양 과 학 기 술 원 · 2015 년 등 록 < / div >
< div className = "text-[13px] font-bold text-primary-cyan" > 이 문 진 박 사 특 허 기 반 핵 심 기 술 ( 등 록 특 허 10 - 1567431 ) < / div >
< div className = "text-[10px] mt-0.5 text-text-3" > 해 양 유 류 오 염 사 고 발 생 시 효 율 적 인 방 제 방 안 수 립 을 위 한 유 출 유 확 산 예 측 방 법 · 한 국 해 양 과 학 기 술 원 · 2015 년 등 록 < / div >
< / div >
< / div >
{ /* 특허 개요 */ }
< div className = "rounded-lg p-3 mb-3.5 text-[11px]" style = { { background : 'rgba(6,182,212,.04)' , border : '1px solid rgba(6,182,212,.12)' , color : 'var(--t2)' , lineHeight : '1.8' } } >
본 특 허 는 < b style= { { color : 'var(--cyan)' } } > 방 제 정 보 지 도 ( ESI , Environmental Sensitivity Index Map ) < / b > 를 기 반 으 로 실 시 간 조 류 · 취 송 류 · 해 수 유 동 을 산 출 하 고 , 이 를 유 출 유 확 산 예 측 에 직 결 하 는 통 합 방 법 론 을 특 허 화 한 것 입 니 다 . 기 상 예 측 시 스 템 · 위 성 영 상 수 신 시 스 템 · 검 조 소 를 인 터 넷 으 로 연 결 하 여 실 시 간 기 상 · 수 온 · 조 석 정 보 를 자 동 수 신 하 고 , < b style= { { color : 'var(--orange)' } } > CHARRY 모 델 < / b > 로 실 시 간 조 류 를 예 측 하 여 유 출 유 확 산 에 적 용 합 니 다 .
본 특 허 는 < b className= "text-primary-cyan" > 방 제 정 보 지 도 ( ESI , Environmental Sensitivity Index Map ) < / b > 를 기 반 으 로 실 시 간 조 류 · 취 송 류 · 해 수 유 동 을 산 출 하 고 , 이 를 유 출 유 확 산 예 측 에 직 결 하 는 통 합 방 법 론 을 특 허 화 한 것 입 니 다 . 기 상 예 측 시 스 템 · 위 성 영 상 수 신 시 스 템 · 검 조 소 를 인 터 넷 으 로 연 결 하 여 실 시 간 기 상 · 수 온 · 조 석 정 보 를 자 동 수 신 하 고 , < b className= "text-status-orange" > CHARRY 모 델 < / b > 로 실 시 간 조 류 를 예 측 하 여 유 출 유 확 산 에 적 용 합 니 다 .
< / div >
{ /* 3단계 처리 프로세스 */ }
< div className = "text-[11px] font-bold mb-2.5" > ⚙ ️ 특 허 청 구 항 3 단 계 처 리 프 로 세 스 < / div >
< div className = "grid grid-cols-3 gap-2 mb-3.5" >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(249,115,22,.2)' , borderTop : '3px solid var(--orange)' } } >
< div className = "text-[11px] font-bold mb-1.5 " style = { { color : 'var(--orange)' } } > ① 실 시 간 자 료 수 신 ( S10 ) < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] font-bold mb-1.5 text-status-orange" > ① 실 시 간 자 료 수 신 ( S10 ) < / div >
< div className = "text-[10px] text-text-2 leading-[1.7]" >
• < b > 기 상 자 료 < / b > : 바 람 · 기 온 · 기 압 분 포 < br / >
• < b > 수 온 자 료 < / b > : NGSST 위 성 원 격 탐 사 ( 일 본 토 호 쿠 대 학 , 5 km 해 상 도 ) < br / >
• < b > 조 석 정 보 < / b > : 검 조 소 실 시 간 조 위
@ -517,9 +517,9 @@ function KospsPanel() {
< div className = "mt-1 p-1 rounded text-[10px]" style = { { background : 'rgba(249,115,22,.06)' , color : 'var(--t3)' } } > FTP 자 동 접 속 · 수 신 · 좌 표 변 환 · DB구축까지 자 동 화 < / div >
< / div >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(6,182,212,.2)' , borderTop : '3px solid var(--cyan)' } } >
< div className = "text-[11px] font-bold mb-1.5 " style = { { color : 'var(--cyan)' } } > ② 조 류 · 취 송 류 예 측 ( S20 ) < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
• < b style= { { color : 'var(--cyan)' } } > CHARRY 모 델 < / b > 로 실 시 간 조 류 예 측 < br / >
< div className = "text-[11px] font-bold mb-1.5 text-primary-cyan" > ② 조 류 · 취 송 류 예 측 ( S20 ) < / div >
< div className = "text-[10px] text-text-2 leading-[1.7]" >
• < b className= "text-primary-cyan" > CHARRY 모 델 < / b > 로 실 시 간 조 류 예 측 < br / >
• 2 D 해 수 유 동 방 정 식 기 반 조 화 상 수 DB 구 축 < br / >
• 취 송 류 경험식 : V_WDC = 0.029 × V_wind , θ _WDC = θ _wind + 18.6 ° < br / >
• M2 · S2 · K1 · O1 주 요 4 대 분 조 조 화 분 해
@ -527,8 +527,8 @@ function KospsPanel() {
< div className = "mt-1 p-1 rounded text-[10px]" style = { { background : 'rgba(6,182,212,.06)' , color : 'var(--t3)' } } > 계산격자 : 15초 ( 약 463 m ) 등 간 격 · 총 3 , 225 , 600 격 자 < / div >
< / div >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(34,197,94,.2)' , borderTop : '3px solid var(--green)' } } >
< div className = "text-[11px] font-bold mb-1.5 " style = { { color : 'var(--green)' } } > ③ 유 출 유 확 산 예 측 ( S30 ) < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] font-bold mb-1.5 text-status-green" > ③ 유 출 유 확 산 예 측 ( S30 ) < / div >
< div className = "text-[10px] text-text-2 leading-[1.7]" >
• 클 라 이 언 트 로 부 터 < b > 유 출 유 량 · 유 출 지 점 < / b > 입 력 수 신 < br / >
• 몬 테 카 를 로 ( Monte Carlo ) 입 자 추 적 기 법 < br / >
• fBm 기 반 난류확산 : σ ² = Atᵐ ( m ≈ 2 H ) < br / >
@ -541,9 +541,9 @@ function KospsPanel() {
{ /* 해수유동 방정식 & 풍화 5단계 */ }
< div className = "grid grid-cols-2 gap-2.5 mb-3" >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(59,130,246,.2)' } } >
< div className = "text-[11px] font-bold mb-2 " style = { { color : 'var(--blue)' } } > 📐 2 차 원 해 수 유 동 방 정 식 < / div >
< div className = "text-[10px] mb-2 " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > 극 좌 표 계 ( Polar Coordinate ) 적 용 · 지 구 구 면 효 과 반 영 < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[11px] font-bold mb-2 text-primary-blue" > 📐 2 차 원 해 수 유 동 방 정 식 < / div >
< div className = "text-[10px] mb-2 text-text-2 leading-[1.7]" > 극 좌 표 계 ( Polar Coordinate ) 적 용 · 지 구 구 면 효 과 반 영 < / div >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
{ [
{ label : '기조력' , desc : '제1(Love Number 0.69) + 제2(α } ,
{ label : '4대 분조' , desc : 'M2(1.405× } ,
@ -551,28 +551,28 @@ function KospsPanel() {
{ label : '조간대' , desc : 'Flather & Heaps(1975) 처리기법' } ,
] . map ( r = > (
< div key = { r . label } className = "px-2 py-1 rounded" style = { { background : 'rgba(59,130,246,.05)' } } >
< span className = "font-bold " style = { { color : 'var(--blue)' } } > { r . label } < / span > : { r . desc }
< span className = "font-bold text-primary-blue" > { r . label } < / span > : { r . desc }
< / div >
) ) }
< / div >
< / div >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(249,115,22,.2)' } } >
< div className = "text-[11px] font-bold mb-2 " style = { { color : 'var(--orange)' } } > 🔁 유 출 유 풍 화 ( Weathering ) 5 단 계 < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[11px] font-bold mb-2 text-status-orange" > 🔁 유 출 유 풍 화 ( Weathering ) 5 단 계 < / div >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.1)' } } >
< span className = "font-bold " style = { { color : 'var(--orange)' } } > ① 퍼 짐 < / span > : Fay ( 1969 ) + Mackay et al . ( 1980 ) · 두 께 별 3 단 계 모 델
< span className = "font-bold text-status-orange" > ① 퍼 짐 < / span > : Fay ( 1969 ) + Mackay et al . ( 1980 ) · 두 께 별 3 단 계 모 델
< / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(239,68,68,.05)' , border : '1px solid rgba(239,68,68,.1)' } } >
< span className = "font-bold " style = { { color : 'var(--red)' } } > ② 증 발 < / span > : Stiver & amp ; Mackay ( 1984 ) · 증 류 데 이 터 기 반 해 석 ( 1 ~ 10 일 , 25 % )
< span className = "font-bold text-status-red" > ② 증 발 < / span > : Stiver & amp ; Mackay ( 1984 ) · 증 류 데 이 터 기 반 해 석 ( 1 ~ 10 일 , 25 % )
< / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(168,85,247,.05)' , border : '1px solid rgba(168,85,247,.1)' } } >
< span className = "font-bold " style = { { color : 'var(--purple)' } } > ③ 소 산 < / span > : 쇄 파 에 너 지 · 풍 속 함 수 · 수 면 하 수 직 분 산 ( 15 % )
< span className = "font-bold text-primary-purple" > ③ 소 산 < / span > : 쇄 파 에 너 지 · 풍 속 함 수 · 수 면 하 수 직 분 산 ( 15 % )
< / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(234,179,8,.05)' , border : '1px solid rgba(234,179,8,.1)' } } >
< span className = "font-bold " style = { { color : 'var(--yellow)' } } > ④ 유 상 화 < / span > : Mackay et al . ( 1980 ) + Mooney ( 1951 ) · water - in - oil
< span className = "font-bold text-status-yellow" > ④ 유 상 화 < / span > : Mackay et al . ( 1980 ) + Mooney ( 1951 ) · water - in - oil
< / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.1)' } } >
< span className = "font-bold " style = { { color : 'var(--green)' } } > ⑤ 침 강 < / span > : 용 해 · 생 물 분 해 포 함 · 초 기 유 출 량 선 형 감 소 율 적 용
< span className = "font-bold text-status-green" > ⑤ 침 강 < / span > : 용 해 · 생 물 분 해 포 함 · 초 기 유 출 량 선 형 감 소 율 적 용
< / div >
< / div >
< / div >
@ -581,38 +581,38 @@ function KospsPanel() {
{ /* Akima 수심 보간 & NGSST 수온 */ }
< div className = "grid grid-cols-2 gap-2.5 mb-3" >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(34,197,94,.2)' } } >
< div className = "text-[11px] font-bold mb-2 " style = { { color : 'var(--green)' } } > 🗺 ️ Akima 수 심 보 간 기 법 < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
전 자 해 도 ( ENC ) 무 작 위 수 심 자 료 를 계 산 격 자 로 보 간 할 때 < b style= { { color : 'var(--green)' } } > Akima ( 1978 ) 2 차 원 5 차 다 항 식 < / b > ( Bivariate Quintic Polynomial ) 을 사 용 합 니 다 . 삼 각 망 ( TIN ) 을 구 성 하 여 각 꼭 지 점 의 편 미 분 연 속 성 조 건 으 로 21 개 계 수 를 결 정 합 니 다 .
< div className = "text-[11px] font-bold mb-2 text-status-green" > 🗺 ️ Akima 수 심 보 간 기 법 < / div >
< div className = "text-[10px] text-text-2 leading-[1.7]" >
전 자 해 도 ( ENC ) 무 작 위 수 심 자 료 를 계 산 격 자 로 보 간 할 때 < b className= "text-status-green" > Akima ( 1978 ) 2 차 원 5 차 다 항 식 < / b > ( Bivariate Quintic Polynomial ) 을 사 용 합 니 다 . 삼 각 망 ( TIN ) 을 구 성 하 여 각 꼭 지 점 의 편 미 분 연 속 성 조 건 으 로 21 개 계 수 를 결 정 합 니 다 .
< / div >
< div className = "mt-1.5 p-1.5 rounded" style = { { . . . codeBox , padding : '6px' } } >
z ( x , y ) = Σ Σ qᵢⱼ xⁱ yʲ < span className = "text-[10px] text-text-3" > ( i ≤ 5 , i + j ≤ 5 ) < / span >
< / div >
< / div >
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(6,182,212,.2)' } } >
< div className = "text-[11px] font-bold mb-2 " style = { { color : 'var(--cyan)' } } > 🌡 ️ NGSST 실 시 간 수 온 자 료 < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
일 본 토 호 쿠 대 학 Kawamura 교 수 팀 의 < b style= { { color : 'var(--cyan)' } } > New Generation SST ( NGSST ) < / b > 를 FTP 자 동 수 신 합 니 다 . 열 적 외 선 ( AVHRR · MODIS ) + 마 이 크 로 파 ( AMSR - E ) 융 합 으 로 구 름 무 관 일 별 수 온 제 공 .
< div className = "text-[11px] font-bold mb-2 text-primary-cyan" > 🌡 ️ NGSST 실 시 간 수 온 자 료 < / div >
< div className = "text-[10px] text-text-2 leading-[1.7]" >
일 본 토 호 쿠 대 학 Kawamura 교 수 팀 의 < b className= "text-primary-cyan" > New Generation SST ( NGSST ) < / b > 를 FTP 자 동 수 신 합 니 다 . 열 적 외 선 ( AVHRR · MODIS ) + 마 이 크 로 파 ( AMSR - E ) 융 합 으 로 구 름 무 관 일 별 수 온 제 공 .
< / div >
< div className = "flex flex-col gap-1 mt-1.5 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' } } > < span className = "font-bold " style = { { color : 'var(--cyan)' } } > 영 역 < / span > : 116 ~ 166 ° E , 13 ~ 63 ° N ( 북 서 태 평 양 ) < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' } } > < span className = "font-bold " style = { { color : 'var(--cyan)' } } > 해 상 도 < / span > : 3 분 ( 약 5 km ) · 일 1 회 갱 신 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' } } > < span className = "font-bold " style = { { color : 'var(--cyan)' } } > 변 환 식 < / span > : SST ( ℃ ) = 0.15 × DN − 3.0 < / div >
< div className = "flex flex-col gap-1 mt-1.5 text-[10px] text-text-2" >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' } } > < span className = "font-bold text-primary-cyan" > 영 역 < / span > : 116 ~ 166 ° E , 13 ~ 63 ° N ( 북 서 태 평 양 ) < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' } } > < span className = "font-bold text-primary-cyan" > 해 상 도 < / span > : 3 분 ( 약 5 km ) · 일 1 회 갱 신 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' } } > < span className = "font-bold text-primary-cyan" > 변 환 식 < / span > : SST ( ℃ ) = 0.15 × DN − 3.0 < / div >
< / div >
< / div >
< / div >
{ /* 특허 기여율 */ }
< div className = "rounded-lg p-3" style = { { background : 'rgba(234,179,8,.04)' , border : '1px solid rgba(234,179,8,.2)' } } >
< div className = "text-[11px] font-bold mb-2 " style = { { color : 'var(--yellow)' } } > 📋 특 허 지 원 국 가 연 구 개 발 사 업 및 기 여 율 < / div >
< div className = "grid grid-cols-2 gap-2 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[11px] font-bold mb-2 text-status-yellow" > 📋 특 허 지 원 국 가 연 구 개 발 사 업 및 기 여 율 < / div >
< div className = "grid grid-cols-2 gap-2 text-[10px] text-text-2" >
< div className = "p-2 rounded-md" style = { { background : 'rgba(6,182,212,.05)' , border : '1px solid rgba(6,182,212,.12)' } } >
< div className = "font-bold mb-1 " style = { { color : 'var(--cyan)' } } > 🔷 과 제 ① ( 기 여 율 65 % ) < / div >
< div style= { { color : 'var(--t2)' , lineHeight : '1.6' } } > 3 차 원 유 출 유 확 산 예 측 기 반 해 양 유 류 오 염 방 제 지 원 기 술 개 발 < br / > < span style= { { color : 'var(--t3)' } } > 해 양 수 산 부 | 2013.01 ~ 2013.12 < / span > < / div >
< div className = "font-bold mb-1 text-primary-cyan" > 🔷 과 제 ① ( 기 여 율 65 % ) < / div >
< div className= "text-text-2 leading-[1.6]" > 3 차 원 유 출 유 확 산 예 측 기 반 해 양 유 류 오 염 방 제 지 원 기 술 개 발 < br / > < span className= "text-text-3" > 해 양 수 산 부 | 2013.01 ~ 2013.12 < / span > < / div >
< / div >
< div className = "p-2 rounded-md" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' } } >
< div className = "font-bold mb-1 " style = { { color : 'var(--orange)' } } > 🔶 과 제 ② ( 기 여 율 35 % ) < / div >
< div style= { { color : 'var(--t2)' , lineHeight : '1.6' } } > 주 요 위 험 유 해 물 질 ( HNS ) 유 출 거 동 예 측 및 대 응 정 보 지 원 기 술 개 발 < br / > < span style= { { color : 'var(--t3)' } } > 해 양 수 산 부 | 2013.01 ~ 2013.12 < / span > < / div >
< div className = "font-bold mb-1 text-status-orange" > 🔶 과 제 ② ( 기 여 율 35 % ) < / div >
< div className= "text-text-2 leading-[1.6]" > 주 요 위 험 유 해 물 질 ( HNS ) 유 출 거 동 예 측 및 대 응 정 보 지 원 기 술 개 발 < br / > < span className= "text-text-3" > 해 양 수 산 부 | 2013.01 ~ 2013.12 < / span > < / div >
< / div >
< / div >
< div className = "mt-2 p-1.5 rounded text-[10px]" style = { { background : 'rgba(255,255,255,.02)' , border : '1px solid var(--bd)' , color : 'var(--t3)' } } >
@ -628,7 +628,7 @@ function KospsPanel() {
< div className = "w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-sm shrink-0" style = { { background : 'rgba(6,182,212,.12)' , border : '1px solid rgba(6,182,212,.25)' } } > 📄 < / div >
< div className = "flex-1" >
< div className = "text-xs font-bold" > KOSPS관련 유 출 유 확 산 예 측 논 문 < span className = "text-[11px] ml-1" style = { { color : 'var(--t3)' , transition : 'transform .2s' , display : 'inline-block' , transform : kospsPapersOpen ? 'rotate(180deg)' : 'rotate(0)' } } > ▼ < / span > < / div >
< div className = "text-[10px] mt-0.5 " style = { { color : 'var(--t3)' } } > KOSPS 개 발 · 허 베 이 스 피 리 트 검 증 · 3 D 확 산 예 측 시 스 템 · 방 제 효 과 모 델 링 — 한 국 해 양 환 경 · 에 너 지 학 회 < / div >
< div className = "text-[10px] mt-0.5 text-text-3" > KOSPS 개 발 · 허 베 이 스 피 리 트 검 증 · 3 D 확 산 예 측 시 스 템 · 방 제 효 과 모 델 링 — 한 국 해 양 환 경 · 에 너 지 학 회 < / div >
< / div >
< / div >
{ kospsPapersOpen && < div className = "flex flex-col gap-2 mt-3.5" >
@ -646,8 +646,8 @@ function KospsPanel() {
< span className = "text-[10px] text-text-3" > { paper . year } < / span >
< / div >
< div className = "text-[11px] font-bold mb-1" > { paper . title } < / div >
< div className = "text-[11px] mb-1.5 " style = { { color : 'var(--t3)' } } > { paper . authors } < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > { paper . desc } < / div >
< div className = "text-[11px] mb-1.5 text-text-3" > { paper . authors } < / div >
< div className = "text-[11px] text-text-2 leading-[1.7]" > { paper . desc } < / div >
< / div >
) ) }
< / div > }
@ -659,7 +659,7 @@ function KospsPanel() {
< span style = { { . . . tag ( 'var(--cyan)' ) , fontWeight : 700 , fontSize : '12px' } } > 📄 국 내 학 술 논 문 < / span >
< span className = "text-[11px] ml-1" style = { { color : 'var(--t3)' , transition : 'transform .2s' , display : 'inline-block' , transform : papersOpen ? 'rotate(180deg)' : 'rotate(0)' } } > ▼ < / span >
< / div >
{ papersOpen && < div className = "flex flex-col gap-1.5 mb-3.5 text-[10px] " style = { { color : 'var(--t2)' } } >
{ papersOpen && < div className = "flex flex-col gap-1.5 mb-3.5 text-[10px] text-text-2" >
{ [
{ num : '①' , title : '유출유 확산 예측 모델의 상시 운용 체계 개발에 관한 연구' , authors : '김혜진 · 이문진 · 오세웅 · 강준묵' , journal : '해양환경안전학회지' , detail : '제17권 4호, pp.375-382 | 2011' , desc : 'KOSPS 상시 운용 체계 구축 · 정적/동적 자료 FTP 자동 연계 · 서해·남해 시범 운용 성능 평가' , color : 'var(--cyan)' } ,
{ num : '②' , title : '해양오염 방제지원시스템 구축을 위한 실시간 조류 예측 기술 개발' , authors : '이문진 · 강용균 외' , journal : '해양환경안전학회 춘계학술발표회' , detail : '| 2008' , desc : 'CHARRY 모델 인천·서해 적용 검증 · 창조/낙조 실시간 조류 재현 결과' , color : 'var(--cyan)' } ,
@ -676,8 +676,8 @@ function KospsPanel() {
< div className = "w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0" style = { { background : ` ${ paper . color } 1F ` } } > { paper . num } < / div >
< div >
< div className = "font-bold mb-0.5" > { paper . title } < / div >
< div style= { { color : 'var(--t3)' , lineHeight : '1.6' } } > { paper . authors } | < b style = { { color : paper.color } } > { paper . journal } < / b > { paper . detail } < / div >
< div className = "mt-1 " style = { { color : 'var(--t2)' } } > { paper . desc } < / div >
< div className= "text-text-3 leading-[1.6]" > { paper . authors } | < b style = { { color : paper.color } } > { paper . journal } < / b > { paper . detail } < / div >
< div className = "mt-1 text-text-2" > { paper . desc } < / div >
{ paper . tags && (
< div className = "flex flex-wrap gap-1 mt-1" >
{ paper . tags . map ( t = > < span key = { t } style = { tag ( paper . color ) } > { t } < / span > ) }
@ -695,7 +695,7 @@ function KospsPanel() {
< span style = { { . . . tag ( 'var(--green)' ) , fontWeight : 700 , fontSize : '12px' } } > 🌐 국 외 핵 심 논 문 < / span >
< span className = "text-[11px] ml-1" style = { { color : 'var(--t3)' , transition : 'transform .2s' , display : 'inline-block' , transform : intlPapersOpen ? 'rotate(180deg)' : 'rotate(0)' } } > ▼ < / span >
< / div >
{ intlPapersOpen && < div className = "flex flex-col gap-1.5 text-[10px] " style = { { color : 'var(--t2)' } } >
{ intlPapersOpen && < div className = "flex flex-col gap-1.5 text-[10px] text-text-2" >
{ [
{ num : '①' , title : 'OpenDrift v1.0: a generic framework for trajectory modelling' , authors : 'Dagestad et al.' , journal : 'Geoscientific Model Development' , detail : 'Vol.11, pp.1405-1420 | 2018' , desc : 'OpenDrift 프레임워크 전체 설계·구현·검증 · Python 모듈화 구조 · OpenOil 유출유 모듈 포함' , color : 'var(--green)' } ,
{ num : '②' , title : 'Observation-based evaluation of surface wave effects on oil spill trajectories' , authors : 'Röhrs et al.' , journal : 'J. Geophys. Res. Oceans' , detail : '| 2013' , desc : 'Stokes drift 파랑 기여 효과 · OpenOil 유출유 확산 현장 검증' , color : 'var(--green)' } ,
@ -709,8 +709,8 @@ function KospsPanel() {
< div className = "w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0" style = { { background : ` ${ paper . color } 1F ` } } > { paper . num } < / div >
< div >
< div className = "font-bold mb-0.5" > { paper . title } < / div >
< div style= { { color : 'var(--t3)' , lineHeight : '1.6' } } > { paper . authors } | < b style = { { color : paper.color } } > { paper . journal } < / b > { paper . detail } < / div >
< div className = "mt-1 " style = { { color : 'var(--t2)' } } > { paper . desc } < / div >
< div className= "text-text-3 leading-[1.6]" > { paper . authors } | < b style = { { color : paper.color } } > { paper . journal } < / b > { paper . detail } < / div >
< div className = "mt-1 text-text-2" > { paper . desc } < / div >
< / div >
< / div >
) ) }
@ -731,12 +731,12 @@ function PoseidonPanel() {
< div className = "flex items-center gap-3 mb-3" >
< div className = "w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style = { { background : 'rgba(59,130,246,.15)' , border : '1px solid rgba(59,130,246,.3)' } } > 🔵 < / div >
< div >
< div className = "text-[15px] font-bold " style = { { color : 'var(--blue)' } } > POSEIDON ( 입 자 추 적 최 적 화 예 측 시 스 템 ) < / div >
< div className = "text-[15px] font-bold text-primary-blue" > POSEIDON ( 입 자 추 적 최 적 화 예 측 시 스 템 ) < / div >
< div className = "text-[11px] mt-0.5 text-text-3" > 한 국 환 경 연 구 원 · ( 주 ) 아 라 종 합 기 술 · 한 국 해 양 기 상 기 술 공 동 개 발 · MOHID 해 양 순 환 모 델 기 반 · 뜰 개 관 측 매 개 변 수 자 동 최 적 화 < / div >
< / div >
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
김 충 기 · 김 도 연 외 ( 등 록 특 허 10 - 1868791 , 2018 ) 가 개 발 한 POSEIDON은 실 제 해 양 에 투 하 한 < b style= { { color : 'var(--blue)' } } > 뜰 개 ( Drifter ) 관 측 경 로 < / b > 와 수 치 모 델 예 측 값 을 비 교 하 여 , 입 자 추 적 모 델 의 매 개 변 수 를 < b style= { { color : 'var(--purple)' } } > GA · DE · HS · PSO 알 고 리 즘 으 로 자 동 최 적 화 < / b > 하 는 핵 심 기 술 을 보 유 합 니 다 . 해 양 순 환 기 반 모 델 은 포 르 투 갈 IST / MARETEC이 개 발 한 < b style= { { color : 'var(--cyan)' } } > MOHID 3 D 순 환 모 델 < / b > 을 사 용 합 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
김 충 기 · 김 도 연 외 ( 등 록 특 허 10 - 1868791 , 2018 ) 가 개 발 한 POSEIDON은 실 제 해 양 에 투 하 한 < b className= "text-primary-blue" > 뜰 개 ( Drifter ) 관 측 경 로 < / b > 와 수 치 모 델 예 측 값 을 비 교 하 여 , 입 자 추 적 모 델 의 매 개 변 수 를 < b className= "text-primary-purple" > GA · DE · HS · PSO 알 고 리 즘 으 로 자 동 최 적 화 < / b > 하 는 핵 심 기 술 을 보 유 합 니 다 . 해 양 순 환 기 반 모 델 은 포 르 투 갈 IST / MARETEC이 개 발 한 < b className= "text-primary-cyan" > MOHID 3 D 순 환 모 델 < / b > 을 사 용 합 니 다 .
< / div >
< div className = "mt-2.5 px-3 py-2 rounded-md text-[10px]" style = { { background : 'rgba(59,130,246,.06)' , border : '1px solid rgba(59,130,246,.15)' , color : 'var(--t3)' } } >
📚 참 고 문 헌 ① : 김 도 연 · 김 용 혁 , & quot ; 유 출 유 확 산 예 측 을 위 한 입 자 추 적 모 듈 최 적 화 방 법 및 이 를 이 용 한 예 측 시 스 템 & quot ; , 등 록 특 허 10 - 1868791 , 2018 . < br / >
@ -752,13 +752,13 @@ function PoseidonPanel() {
< div className = "rounded-lg p-3" style = { { background : 'var(--bg0)' , border : '1px solid rgba(59,130,246,.2)' , display : 'grid' , gridTemplateColumns : 'auto 1fr' , gap : '12px' } } >
< div className = "px-2.5 py-1.5 rounded-md text-center whitespace-nowrap" style = { { background : 'rgba(59,130,246,.12)' , border : '1px solid rgba(59,130,246,.25)' , fontFamily : 'var(--fM)' } } >
< div className = "text-[10px] text-text-3" > 등 록 번 호 < / div >
< div className = "text-[11px] font-bold " style = { { color : 'var(--blue)' } } > 10 - 1868791 < / div >
< div className = "text-[10px] mt-0.5 " style = { { color : 'var(--t3)' } } > 2018 등 록 < / div >
< div className = "text-[11px] font-bold text-primary-blue" > 10 - 1868791 < / div >
< div className = "text-[10px] mt-0.5 text-text-3" > 2018 등 록 < / div >
< / div >
< div >
< div className = "text-[11px] font-bold mb-1" > 유 출 유 확 산 예 측 을 위 한 입 자 추 적 모 듈 최 적 화 방 법 및 이 를 이 용 한 예 측 시 스 템 ( POSEIDON ) < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' } } >
< span style= { { color : 'var(--blue)' } } > 발 명 자 < / span > : 김 도 연 · 김 용 혁 · 김 충 기 외 | < span style= { { color : 'var(--blue)' } } > 출 원 인 < / span > : ( 주 ) 아 라 종 합 기 술
< div className = "text-[10px] text-text-2" >
< span className= "text-primary-blue" > 발 명 자 < / span > : 김 도 연 · 김 용 혁 · 김 충 기 외 | < span className= "text-primary-blue" > 출 원 인 < / span > : ( 주 ) 아 라 종 합 기 술
< / div >
< div className = "flex flex-wrap gap-1 mt-1.5" >
{ [ 'GA(유전알고리즘)' , 'DE(차분진화)' , 'HS(화음탐색)' , 'PSO(입자군집최적화)' , '뜰개 자동 동화' ] . map ( t = >
@ -773,21 +773,21 @@ function PoseidonPanel() {
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--cyan)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--cyan)' ) } > 🌊 MOHID 해 양 순 환 모 델 ( 기 반 모 델 ) < / div >
< div className = { ` ${ bodyText } mb-2.5 ` } > 포 르 투 갈 IST / MARETEC에서 1985 년 부 터 개 발 한 3 D 수 치 해 양 순 환 모 델 . 60 여 개 모 듈 을 보 유 하 며 조 류 · 폭 풍 해 일 · 수 온 · 염 분 · 난 류 · 유 출 유 확 산 등 을 통 합 모 의 합 니 다 . < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
{ [
{ label : '격자 구성' , desc : '동아시아 9km + 한반도 3km (Nesting)' } ,
{ label : '수직 좌표' , desc : 'σ } ,
{ label : '검증 결과' , desc : 'SST RMSE 0.42~0.78°C, SLA RMSE 0.11~0.17m' } ,
{ label : '경계조건' , desc : 'HYCOM 재분석 (MYOCEAN 대비 우수)' } ,
] . map ( t = >
< div key = { t . label } className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.04)' , border : '1px solid rgba(6,182,212,.12)' , color : 'var(--t2)' } } > < span style= { { color : 'var(--cyan)' , fontWeight : 700 } } > { t . label } < / span > : { t . desc } < / div >
< div key = { t . label } className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.04)' , border : '1px solid rgba(6,182,212,.12)' , color : 'var(--t2)' } } > < span className= "text-primary-cyan font-bold" > { t . label } < / span > : { t . desc } < / div >
) }
< / div >
< / div >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--purple)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--purple)' ) } > ⚙ ️ 입 자 추 적 매 개 변 수 자 동 최 적 화 < / div >
< div className = { ` ${ bodyText } mb-2.5 ` } > 뜰 개 관 측 경 로 와 제 1 모 델 예 측 값 의 단 위 시 간 별 변 화 량 을 비 교 하 여 제 2 모 델 의 매 개 변 수 를 반 복 최 적 화 합 니 다 . < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
{ [
{ label : '최적화 알고리즘' , desc : 'GA · DE · HS · PSO 중 선택' } ,
{ label : '입력 데이터' , desc : '유속·풍속 벡터 + 제1모델 변화량' } ,
@ -805,21 +805,21 @@ function PoseidonPanel() {
< div style = { labelStyle ( 'var(--blue)' ) } > 📐 POSEIDON 입 자 추 적 핵 심 수 식 < / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< div className = "text-[11px] font-semibold mb-1.5 " style = { { color : 'var(--t3)' } } > 제 1 입 자 추 적 모 델 ( 기 본 ) < / div >
< div className = "text-[11px] font-semibold mb-1.5 text-text-3" > 제 1 입 자 추 적 모 델 ( 기 본 ) < / div >
< div className = { codeBox } >
Model_x = Δ t × current_u + Δ t × c × wind_u < br / >
Model_y = Δ t × current_v + Δ t × c × wind_v
< / div >
< div className = "text-[10px] mt-1.5 " style = { { color : 'var(--t3)' } } > c : 풍속 가 중 치 ( 예 : c = 0.3 → 바 람 의 30 % 반 영 ) < / div >
< div className = "text-[10px] mt-1.5 text-text-3" > c : 풍속 가 중 치 ( 예 : c = 0.3 → 바 람 의 30 % 반 영 ) < / div >
< / div >
< div >
< div className = "text-[11px] font-semibold mb-1.5 " style = { { color : 'var(--t3)' } } > 제 2 입 자 추 적 모 델 ( 최 적 화 후 ) < / div >
< div className = "text-[11px] font-semibold mb-1.5 text-text-3" > 제 2 입 자 추 적 모 델 ( 최 적 화 후 ) < / div >
< div className = { codeBox } >
Revised_x = a1 · current_u + a2 · current_v < br / >
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; + a3 · wind_u + a4 · wind_v < br / >
& nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; + a5 · Model_x + a6 · Model_y + a7
< / div >
< div className = "text-[10px] mt-1.5 " style = { { color : 'var(--t3)' } } > a1 ~ a7 : GA · DE · PSO로 최 적 화 된 매 개 변 수 < / div >
< div className = "text-[10px] mt-1.5 text-text-3" > a1 ~ a7 : GA · DE · PSO로 최 적 화 된 매 개 변 수 < / div >
< / div >
< / div >
< / div >
@ -828,7 +828,7 @@ function PoseidonPanel() {
< div style = { labelStyle ( 'var(--t1)' ) } > 🔄 POSEIDON_V2 상 시 운 용 체 계 < / div >
{ /* 외부 입력 자료 */ }
< div className = "text-[10px] font-bold mb-1.5 mt-1 " style = { { color : 'var(--t3)' } } > 외 부 입 력 자 료 < / div >
< div className = "text-[10px] font-bold mb-1.5 mt-1 text-text-3" > 외 부 입 력 자 료 < / div >
< div className = "flex items-center justify-center gap-0 mb-3" >
{ [
{ label : 'HYCOM' , sub : '해류·수온·염분' , detail : 'YYYYMMDD.nc' , color : 'var(--blue)' } ,
@ -841,7 +841,7 @@ function PoseidonPanel() {
background : ` ${ node . color } 14 ` , border : ` 1px solid ${ node . color } 33 `
} } >
< div className = "font-bold text-[11px]" style = { { color : node.color } } > { node . label } < / div >
< div style= { { color : 'var(--t2)' } } > { node . sub } < / div >
< div className= "text-text-2" > { node . sub } < / div >
< div className = "mt-0.5" style = { { color : 'var(--t3)' , fontSize : '9px' } } > { node . detail } < / div >
< / div >
{ i < 3 && < div className = "w-[20px] h-px" style = { { background : 'var(--bdL)' } } / > }
@ -850,10 +850,10 @@ function PoseidonPanel() {
< / div >
{ /* 중앙 화살표 */ }
< div className = "text-center text-[10px] mb-2 " style = { { color : 'var(--t3)' } } > ▼ DATA → PREP → 격 자 보 간 / 좌 표 변 환 ▼ < / div >
< div className = "text-center text-[10px] mb-2 text-text-3" > ▼ DATA → PREP → 격 자 보 간 / 좌 표 변 환 ▼ < / div >
{ /* 4대 도메인 실행 모듈 */ }
< div className = "text-[10px] font-bold mb-1.5 " style = { { color : 'var(--t3)' } } > POSEIDON 4 대 실 행 모 듈 ( EA012 대 격 자 → KO108 연 안 상 세 격 자 ) < / div >
< div className = "text-[10px] font-bold mb-1.5 text-text-3" > POSEIDON 4 대 실 행 모 듈 ( EA012 대 격 자 → KO108 연 안 상 세 격 자 ) < / div >
< div className = "grid grid-cols-4 gap-2 mb-3" >
{ [
{ label : 'HYDR' , script : 'RUN-HYDR.sh' , engine : 'MOHID 3D' , desc : '해류·수온·염분·수위' , color : 'var(--cyan)' , icon : '🌊' } ,
@ -867,15 +867,15 @@ function PoseidonPanel() {
} } >
< div className = "text-base mb-1" > { m . icon } < / div >
< div className = "text-[12px] font-bold" style = { { color : m.color } } > { m . label } < / div >
< div className = "text-[9px] mt-0.5 " style = { { color : 'var(--t2)' } } > { m . engine } < / div >
< div className = "text-[9px] mt-0.5 text-text-2" > { m . engine } < / div >
< div className = "text-[9px] mt-0.5 px-1 py-0.5 rounded" style = { { background : ` ${ m . color } 14 ` , color : 'var(--t3)' } } > { m . script } < / div >
< div className = "text-[9px] mt-1 " style = { { color : 'var(--t2)' } } > { m . desc } < / div >
< div className = "text-[9px] mt-1 text-text-2" > { m . desc } < / div >
< / div >
) ) }
< / div >
{ /* 화살표 + 최적화 */ }
< div className = "text-center text-[10px] mb-2 " style = { { color : 'var(--t3)' } } > ▼ HYDR + WAVE + TIDE → OILS 강 제 력 입 력 ▼ 뜰 개 관 측 → GA / DE / PSO 매 개 변 수 자 동 최 적 화 ▼ < / div >
< div className = "text-center text-[10px] mb-2 text-text-3" > ▼ HYDR + WAVE + TIDE → OILS 강 제 력 입 력 ▼ 뜰 개 관 측 → GA / DE / PSO 매 개 변 수 자 동 최 적 화 ▼ < / div >
{ /* 출력·활용 */ }
< div className = "flex items-center justify-center gap-0" >
@ -901,12 +901,12 @@ function PoseidonPanel() {
HYCOM ( . nc ) + GDAPS ( . grib2 ) → 격 자 보 간 ( EA012 / KO108 ) → MOHID ( 해 류 ) + SWAN ( 파 랑 ) + 조 석 → OILS 입 자 추 적 → 뜰 개 동 화 최 적 화 → HDF5 결 과 → 방 제 의 사 결 정
< / div >
< div className = "mt-2.5 p-2 rounded-md" style = { { background : 'rgba(234,179,8,.05)' , border : '1px solid rgba(234,179,8,.15)' } } >
< div className = "text-[10px] font-bold mb-1 " style = { { color : 'var(--yellow)' } } > ⚠ ️ 예 측 신 뢰 도 한 계 < / div >
< div className = "text-[10px] " style = { { color : 'var(--t2)' , lineHeight : '1.6' } } >
< div className = "text-[10px] font-bold mb-1 text-status-yellow" > ⚠ ️ 예 측 신 뢰 도 한 계 < / div >
< div className = "text-[10px] text-text-2 leading-[1.6]" >
조류 : 무한 예 보 가 능 < br / >
해 류 ( HYCOM ) : < b > 5 일 치 < / b > 제 한 < br / >
기 온 · 취 송 류 : < b style= { { color : 'var(--orange)' } } > 3 일 치 < / b > 제 한 < br / >
→ < b style= { { color : 'var(--red)' } } > 72 h 초 과 예 측 시 신 뢰 도 저 하 < / b >
기 온 · 취 송 류 : < b className= "text-status-orange" > 3 일 치 < / b > 제 한 < br / >
→ < b className= "text-status-red" > 72 h 초 과 예 측 시 신 뢰 도 저 하 < / b >
< / div >
< / div >
< / div >
@ -918,7 +918,7 @@ function PoseidonPanel() {
< div className = "w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-sm shrink-0" style = { { background : 'rgba(59,130,246,.12)' , border : '1px solid rgba(59,130,246,.25)' } } > 📄 < / div >
< div >
< div className = "text-xs font-bold" > POSEIDON관련 유 출 유 확 산 예 측 논 문 < / div >
< div className = "text-[10px] mt-0.5 " style = { { color : 'var(--t3)' } } > 포 세 이 돈 시 스 템 소 개 · 활 용 · 최 적 방 제 전 략 · 원 격 탐 사 연 동 · MOHID 검 증 — 한 국 해 양 환 경 · 에 너 지 학 회 외 < / div >
< div className = "text-[10px] mt-0.5 text-text-3" > 포 세 이 돈 시 스 템 소 개 · 활 용 · 최 적 방 제 전 략 · 원 격 탐 사 연 동 · MOHID 검 증 — 한 국 해 양 환 경 · 에 너 지 학 회 외 < / div >
< / div >
< / div >
< div className = "flex flex-col gap-2" >
@ -936,8 +936,8 @@ function PoseidonPanel() {
< span className = "text-[10px] text-text-3" > { paper . year } < / span >
< / div >
< div className = "text-[11px] font-bold mb-1" > { paper . title } < / div >
< div className = "text-[11px] mb-1.5 " style = { { color : 'var(--t3)' } } > { paper . authors } < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } > { paper . desc } < / div >
< div className = "text-[11px] mb-1.5 text-text-3" > { paper . authors } < / div >
< div className = "text-[11px] text-text-2 leading-[1.7]" > { paper . desc } < / div >
< / div >
) ) }
< / div >
@ -956,12 +956,12 @@ function OpenDriftPanel() {
< div className = "flex items-center gap-3 mb-3" >
< div className = "w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style = { { background : 'rgba(34,197,94,.15)' , border : '1px solid rgba(34,197,94,.3)' } } > 🟢 < / div >
< div >
< div className = "text-[15px] font-bold " style = { { color : 'var(--blue)' } } > OpenDrift ( 오 픈 소 스 라 그 랑 지 안 확 산 프 레 임 워 크 ) < / div >
< div className = "text-[15px] font-bold text-primary-blue" > OpenDrift ( 오 픈 소 스 라 그 랑 지 안 확 산 프 레 임 워 크 ) < / div >
< div className = "text-[11px] mt-0.5 text-text-3" > 노 르 웨 이 MET Norway · OpenOil 공 개 프 레 임 워 크 · Python 기 반 · IMO / IPIECA 검 증 < / div >
< / div >
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
Dagestad et al . ( 2018 ) 이 개 발 한 OpenDrift는 유 출 유 · SAR · 표 류 물 · 부 유 입 자 등 다 양 한 해 양 확 산 현 상 을 모 의 하 는 < b style= { { color : 'var(--blue)' } } > Python 기 반 오 픈 소 스 라 그 랑 지 안 프 레 임 워 크 < / b > 입 니 다 . NEMO · ROMS · HYCOM 등 다 양 한 해 양 모 델 출 력 값 을 강 제 력 으 로 사 용 하 며 , < b style= { { color : 'var(--cyan)' } } > OpenOil 모 듈 < / b > 을 통 해 유 출 유 거 동 을 상 세 모 의 합 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
Dagestad et al . ( 2018 ) 이 개 발 한 OpenDrift는 유 출 유 · SAR · 표 류 물 · 부 유 입 자 등 다 양 한 해 양 확 산 현 상 을 모 의 하 는 < b className= "text-primary-blue" > Python 기 반 오 픈 소 스 라 그 랑 지 안 프 레 임 워 크 < / b > 입 니 다 . NEMO · ROMS · HYCOM 등 다 양 한 해 양 모 델 출 력 값 을 강 제 력 으 로 사 용 하 며 , < b className= "text-primary-cyan" > OpenOil 모 듈 < / b > 을 통 해 유 출 유 거 동 을 상 세 모 의 합 니 다 .
< / div >
< div className = "flex gap-2 flex-wrap mt-2.5" >
< span className = "px-3.5 py-1.5 rounded-md text-[11px] font-semibold" style = { { border : '1px solid rgba(34,197,94,.3)' , background : 'rgba(34,197,94,.08)' , color : 'var(--green)' } } > 🔗 공 식 문 서 ( opendrift . github . io ) < / span >
@ -988,7 +988,7 @@ function OpenDriftPanel() {
] . map ( s = > (
< div key = { s . title } className = { ` ${ card } ${ cardBg } ` } style = { { borderTop : ` 3px solid ${ s . color } ` , margin : 0 } } >
< div style = { labelStyle ( s . color ) } > { s . title } < / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
{ s . items . map ( ( item , idx ) = > (
'html' in item
? < div key = { idx } className = "px-2 py-1 rounded" style = { { background : ` ${ s . color } 0A ` , border : ` 1px solid ${ s . color } 1F ` , color : 'var(--t2)' } } dangerouslySetInnerHTML = { { __html : sanitizeHtml ( item . html ) } } / >
@ -1042,7 +1042,7 @@ function OpenDriftPanel() {
< / div >
) ) }
< / div >
< div className = "text-[10px] text-center mt-1 " style = { { color : 'var(--t3)' } } >
< div className = "text-[10px] text-center mt-1 text-text-3" >
해 양 모 델 ( NEMO · ROMS · HYCOM ) + 기 상 자 료 ( ECMWF · GFS ) → NOAA Oil Library 유 종 매 칭 → OpenDrift / OpenOil 모 듈 구 동 → NetCDF 결 과 출 력 · 시 각 화
< / div >
< / div >
@ -1054,7 +1054,7 @@ function OpenDriftPanel() {
< div className = "w-8 h-8 rounded-lg flex items-center justify-center text-base shrink-0" style = { { background : 'rgba(59,130,246,.12)' , border : '1px solid rgba(59,130,246,.25)' } } > 📄 < / div >
< div >
< div className = "text-xs font-bold" > OpenDrift / OpenOil 국 내 해 역 적 용 연 구 논 문 < / div >
< div className = "text-[10px] mt-0.5 " style = { { color : 'var(--t3)' } } > 한 국 연 안 유 출 유 확 산 수 치 모 의 관 련 핵 심 논 문 3 편 — WING 모 델 이 론 근 거 < / div >
< div className = "text-[10px] mt-0.5 text-text-3" > 한 국 연 안 유 출 유 확 산 수 치 모 의 관 련 핵 심 논 문 3 편 — WING 모 델 이 론 근 거 < / div >
< / div >
< / div >
< div className = "flex flex-col gap-2.5" >
@ -1067,26 +1067,26 @@ function OpenDriftPanel() {
< span key = { t . label } className = "whitespace-nowrap" style = { { padding : '2px 8px' , background : ` ${ t . color } 1F ` , border : ` 1px solid ${ t . color } 40 ` , borderRadius : '4px' , fontSize : '10px' , fontWeight : 700 , color : t.color } } > { t . label } < / span >
) }
< / div >
< span className = "text-[10px] whitespace-nowrap " style = { { color : 'var(--t3)' } } > 2024 < / span >
< span className = "text-[10px] whitespace-nowrap text-text-3" > 2024 < / span >
< / div >
< div className = "text-[11px] font-bold mb-1" style= { { lineHeight : '1.5' } } > Numerical Model Test of Spilled Oil Transport Near the Korean Coasts Using Various Input Parametric Models < / div >
< div className = "text-[11px] mb-2 " style = { { color : 'var(--t3)' } } > Hai Van Dang , Suchan Joo , Junhyeok Lim , Jinhwan Hur , Sungwon Shin | Hanyang University ERICA | Journal of Ocean Engineering and Technology , 2024 < / div >
< div className = "text-[11px] font-bold mb-1" className= "leading-normal" > Numerical Model Test of Spilled Oil Transport Near the Korean Coasts Using Various Input Parametric Models < / div >
< div className = "text-[11px] mb-2 text-text-3" > Hai Van Dang , Suchan Joo , Junhyeok Lim , Jinhwan Hur , Sungwon Shin | Hanyang University ERICA | Journal of Ocean Engineering and Technology , 2024 < / div >
< div className = "grid grid-cols-2 gap-2 mb-2" >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] text-text-2 leading-[1.7]" >
< b > 연 구 목 적 < / b > < br / >
OpenOil 모 델 에 다 양 한 해 양 - 기 상 강 제 력 ( Met - Ocean ) 조 합 을 적 용 하 여 한 국 연 안 유 출 유 이 동 예 측 정 확 도 를 비 교 평 가 . 허 베 이 스 피 리 트 ( 2007 ) 사 고 를 대 상 으 로 6 개 조 합 검 증 .
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] text-text-2 leading-[1.7]" >
< b > 주 요 결 과 < / b > < br / >
CMEMS 해 류 모 델 + ECMWF 기 상 조 합 이 최 고 성 능 . 동 황 해 조 석 특 성 ( 수 심 & lt ; 60 m 천 해 ) 고 려 시 정 확 도 향 상 . Envisat ASAR 위 성 실 측 과 수 치 비 교 검 증 완 료 .
< / div >
< / div >
< div className = "mb-2" >
< div className = "text-[11px] mb-1 " style = { { color : 'var(--t2)' } } > < b > 적 용 강 제 력 모 델 6 종 조 합 < / b > < / div >
< div className = "grid grid-cols-3 gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "text-[11px] mb-1 text-text-2" > < b > 적 용 강 제 력 모 델 6 종 조 합 < / b > < / div >
< div className = "grid grid-cols-3 gap-1 text-[10px] text-text-2" >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(59,130,246,.05)' , border : '1px solid rgba(59,130,246,.12)' , color : 'var(--t2)' } } > < b style = { { color : '#3b82f6' } } > 해 류 < / b > HYCOM / CMEMS < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--green)' } } > 파 랑 < / b > CMEMS / ECMWF - ERA5 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--orange)' } } > 기 상 < / b > NCEP - GFS / ECMWF < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , color : 'var(--t2)' } } > < b className= "text-status-green" > 파 랑 < / b > CMEMS / ECMWF - ERA5 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' , color : 'var(--t2)' } } > < b className= "text-status-orange" > 기 상 < / b > NCEP - GFS / ECMWF < / div >
< / div >
< / div >
< div className = "p-2 rounded-md text-[10px]" style = { { background : 'rgba(59,130,246,.04)' , border : '1px solid rgba(59,130,246,.1)' , color : 'var(--t2)' , lineHeight : '1.7' } } >
@ -1102,24 +1102,24 @@ function OpenDriftPanel() {
< span key = { t . label } className = "whitespace-nowrap" style = { { padding : '2px 8px' , background : ` ${ t . color } 1F ` , border : ` 1px solid ${ t . color } 40 ` , borderRadius : '4px' , fontSize : '10px' , fontWeight : 700 , color : t.color } } > { t . label } < / span >
) }
< / div >
< span className = "text-[10px] whitespace-nowrap " style = { { color : 'var(--t3)' } } > 1998 < / span >
< span className = "text-[10px] whitespace-nowrap text-text-3" > 1998 < / span >
< / div >
< div className = "text-[11px] font-bold mb-1" style= { { lineHeight : '1.5' } } > 한 국 동 남 해 역 에 서 의 유 출 유 확 산 예 측 모 델 ( Oil Spill Behavior Forecasting Model in South - eastern Coastal Area of Korea ) < / div >
< div className = "text-[11px] mb-2 " style = { { color : 'var(--t3)' } } > 류 청 로 , 김 종 규 , 설 동 관 , 강 동 욱 | 부 경 대 학 교 해 양 공 학 과 | 한 국 해 양 환 경 공 학 회 지 Vol . 1 No . 2 , pp . 52 – 59 , 1998 < / div >
< div className = "text-[11px] font-bold mb-1" className= "leading-normal" > 한 국 동 남 해 역 에 서 의 유 출 유 확 산 예 측 모 델 ( Oil Spill Behavior Forecasting Model in South - eastern Coastal Area of Korea ) < / div >
< div className = "text-[11px] mb-2 text-text-3" > 류 청 로 , 김 종 규 , 설 동 관 , 강 동 욱 | 부 경 대 학 교 해 양 공 학 과 | 한 국 해 양 환 경 공 학 회 지 Vol . 1 No . 2 , pp . 52 – 59 , 1998 < / div >
< div className = "grid grid-cols-2 gap-2 mb-2" >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] text-text-2 leading-[1.7]" >
< b > 연 구 목 적 < / b > < br / >
한 국 동 남 해 역 ( 부 산 - 울 산 ) 긴 급 방 제 용 실 시 간 유 출 유 확 산 예 측 모 델 OILSPILLFM 개 발 . 알 렉 산 드 리 아 호 ( 1995 ) 실 제 사 고 힌 드 캐 스 팅 으 로 모 델 검 증 .
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] text-text-2 leading-[1.7]" >
< b > 핵 심 수 식 < / b > < br / >
라 그 랑 지 안 입 자 추 적 + 2 D 해 수 유 동 모 델 ( ADI법 ) . 취 송 류 Vw = 0.03 × V10 . 난 류 확 산 Random Walk . 증 발 1 차 반 응 식 .
< / div >
< / div >
< div className = "grid grid-cols-3 gap-1 text-[10px] mb-2 " style = { { color : 'var(--t2)' } } >
< div className = "grid grid-cols-3 gap-1 text-[10px] mb-2 text-text-2" >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(6,182,212,.05)' , border : '1px solid rgba(6,182,212,.12)' , color : 'var(--t2)' } } > < b style = { { color : '#06b6d4' } } > 해 수 유 동 < / b > Navier - Stokes 2 D 연 속 · 운 동 방 정 식 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(168,85,247,.05)' , border : '1px solid rgba(168,85,247,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--purple)' } } > 조 류 < / b > 조 화 분 석 실 시 간 조 류 DB 구 축 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--orange)' } } > 풍 화 < / b > 퍼 짐 · 증 발 · 유 상 화 · 생 분 해 5 단 계 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(168,85,247,.05)' , border : '1px solid rgba(168,85,247,.12)' , color : 'var(--t2)' } } > < b className= "text-primary-purple" > 조 류 < / b > 조 화 분 석 실 시 간 조 류 DB 구 축 < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' , color : 'var(--t2)' } } > < b className= "text-status-orange" > 풍 화 < / b > 퍼 짐 · 증 발 · 유 상 화 · 생 분 해 5 단 계 < / div >
< / div >
< div className = "p-2 rounded-md text-[10px]" style = { { background : 'rgba(6,182,212,.04)' , border : '1px solid rgba(6,182,212,.1)' , color : 'var(--t2)' , lineHeight : '1.7' } } >
< b style = { { color : '#06b6d4' } } > WING 적 용 의 의 < / b > : OpenDrift · KOSPS의 라 그 랑 지 안 입 자 추 적 이 론 적 원 전 . 조 류 영 향 미 약 해 역 에 서 취 송 류 · 해 류 성 분 이 확 산 에 결 정 적 역 할 — OpenDrift 한 국 해 역 적 용 정 당 성 근 거 .
@ -1134,37 +1134,37 @@ function OpenDriftPanel() {
< span key = { t . label } className = "whitespace-nowrap" style = { { padding : '2px 8px' , background : ` ${ t . color } 1F ` , border : ` 1px solid ${ t . color } 40 ` , borderRadius : '4px' , fontSize : '10px' , fontWeight : 700 , color : t.color } } > { t . label } < / span >
) }
< / div >
< span className = "text-[10px] whitespace-nowrap " style = { { color : 'var(--t3)' } } > 2008 < / span >
< span className = "text-[10px] whitespace-nowrap text-text-3" > 2008 < / span >
< / div >
< div className = "text-[11px] font-bold mb-1" style= { { lineHeight : '1.5' } } > 태 안 기 름 유 출 사 고 의 유 출 유 확 산 특 성 분 석 ( Analysis of Oil Spill Dispersion in Taean Coastal Zone ) < / div >
< div className = "text-[11px] mb-2 " style = { { color : 'var(--t3)' } } > 정 태 성 , 조 형 진 | 한 남 대 학 교 토 목 환 경 공 학 과 | 한 국 해 안 · 해 양 공 학 회 학 술 발 표 논 문 집 제 17 권 pp . 60 – 63 , 2008 < / div >
< div className = "text-[11px] font-bold mb-1" className= "leading-normal" > 태 안 기 름 유 출 사 고 의 유 출 유 확 산 특 성 분 석 ( Analysis of Oil Spill Dispersion in Taean Coastal Zone ) < / div >
< div className = "text-[11px] mb-2 text-text-3" > 정 태 성 , 조 형 진 | 한 남 대 학 교 토 목 환 경 공 학 과 | 한 국 해 안 · 해 양 공 학 회 학 술 발 표 논 문 집 제 17 권 pp . 60 – 63 , 2008 < / div >
< div className = "grid grid-cols-2 gap-2 mb-2" >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] text-text-2 leading-[1.7]" >
< b > 연 구 목 적 < / b > < br / >
2007 년 12 월 태 안 허 베 이 스 피 리 트 기 름 유 출 사 고 후 15 일 간 조 류 · 취 송 류 에 의 한 유 출 유 확 산 패 턴 을 2 D 수 치 모 형 으 로 재 현 . 조 류 · 취 송 류 기 여 도 분 리 분 석 .
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.7' } } >
< div className = "text-[11px] text-text-2 leading-[1.7]" >
< b > 핵 심 발 견 < / b > < br / >
취 송 류 풍 속 비 율 α = 2 % 가 실 제 관 측 확 산 과 가 장 유 사 ( 3 % 과 대 , 2.5 % 다 소 빠 름 ) . 취 송 류 편 향 각 θ = 20 ° 최 적 . 조 류 는 남 북 확 산 거 리 , 취 송 류 는 해 안 부 착 에 기 여 .
< / div >
< / div >
< div className = "grid grid-cols-3 gap-1 text-[10px] mb-2 " style = { { color : 'var(--t2)' } } >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--orange)' } } > 해 역 < / b > 군 산 ~ 영 흥 도 ( 서 해 중 부 ) < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(239,68,68,.05)' , border : '1px solid rgba(239,68,68,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--red)' } } > 격 자 < / b > 유 한 요 소 삼 각 형 , 최 소 150 m < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , color : 'var(--t2)' } } > < b style= { { color : 'var(--green)' } } > 방 출 < / b > 50 입 자 / 9 시 간 · 총 5 일 모 의 < / div >
< div className = "grid grid-cols-3 gap-1 text-[10px] mb-2 text-text-2" >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.12)' , color : 'var(--t2)' } } > < b className= "text-status-orange" > 해 역 < / b > 군 산 ~ 영 흥 도 ( 서 해 중 부 ) < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(239,68,68,.05)' , border : '1px solid rgba(239,68,68,.12)' , color : 'var(--t2)' } } > < b className= "text-status-red" > 격 자 < / b > 유 한 요 소 삼 각 형 , 최 소 150 m < / div >
< div className = "px-2 py-1 rounded" style = { { background : 'rgba(34,197,94,.05)' , border : '1px solid rgba(34,197,94,.12)' , color : 'var(--t2)' } } > < b className= "text-status-green" > 방 출 < / b > 50 입 자 / 9 시 간 · 총 5 일 모 의 < / div >
< / div >
{ /* 취송류 파라미터 비교 */ }
< div className = "p-2.5 rounded-[7px] mb-2" style = { { background : 'var(--bg0)' , border : '1px solid var(--bd)' } } >
< div className = "text-[10px] font-bold mb-1.5 " style = { { color : 'var(--t2)' } } > 취 송 류 매 개 변 수 비 교 ( 태 안 사 고 수 치 실 험 ) < / div >
< div className = "grid grid-cols-4 gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(239,68,68,.06)' , border : '1px solid rgba(239,68,68,.12)' } } > < div className = "font-bold " style = { { color : 'var(--red)' } } > α = 3 % < / div > < div style= { { color : 'var(--t3)' } } > 과 대 확 산 < / div > < / div >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(234,179,8,.06)' , border : '1px solid rgba(234,179,8,.12)' } } > < div className = "font-bold " style = { { color : 'var(--yellow)' } } > α = 2.5 % < / div > < div style= { { color : 'var(--t3)' } } > 다 소 빠 름 < / div > < / div >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(34,197,94,.08)' , border : '1px solid rgba(34,197,94,.2)' } } > < div className = "font-bold " style = { { color : 'var(--green)' } } > α = 2 % ✓ < / div > < div style= { { color : 'var(--t3)' } } > 최 적 일 치 < / div > < / div >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(6,182,212,.06)' , border : '1px solid rgba(6,182,212,.12)' } } > < div className = "font-bold" style = { { color : '#06b6d4' } } > θ = 20 ° ✓ < / div > < div style= { { color : 'var(--t3)' } } > 최 적 편 향 각 < / div > < / div >
< div className = "text-[10px] font-bold mb-1.5 text-text-2" > 취 송 류 매 개 변 수 비 교 ( 태 안 사 고 수 치 실 험 ) < / div >
< div className = "grid grid-cols-4 gap-1 text-[10px] text-text-2" >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(239,68,68,.06)' , border : '1px solid rgba(239,68,68,.12)' } } > < div className = "font-bold text-status-red" > α = 3 % < / div > < div className= "text-text-3" > 과 대 확 산 < / div > < / div >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(234,179,8,.06)' , border : '1px solid rgba(234,179,8,.12)' } } > < div className = "font-bold text-status-yellow" > α = 2.5 % < / div > < div className= "text-text-3" > 다 소 빠 름 < / div > < / div >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(34,197,94,.08)' , border : '1px solid rgba(34,197,94,.2)' } } > < div className = "font-bold text-status-green" > α = 2 % ✓ < / div > < div className= "text-text-3" > 최 적 일 치 < / div > < / div >
< div className = "px-2 py-1 rounded text-center" style = { { background : 'rgba(6,182,212,.06)' , border : '1px solid rgba(6,182,212,.12)' } } > < div className = "font-bold" style = { { color : '#06b6d4' } } > θ = 20 ° ✓ < / div > < div className= "text-text-3" > 최 적 편 향 각 < / div > < / div >
< / div >
< / div >
< div className = "p-2 rounded-md text-[10px]" style = { { background : 'rgba(249,115,22,.04)' , border : '1px solid rgba(249,115,22,.1)' , color : 'var(--t2)' , lineHeight : '1.7' } } >
< b style= { { color : 'var(--orange)' } } > WING 적 용 의 의 < / b > : 서 해 ( 조 류 강 한 해 역 ) 취 송 류 매 개 변 수 α = 2 % · θ = 20 ° 최 적 값 은 OpenDrift 서 해 운 용 시 wind drift factor 설 정 의 직 접 근 거 . 허 베 이 스 피 리 트 사 고 는 POSEIDON ( 특 허 10 - 1868791 ) 의 검 증 데 이 터 로 도 활 용 .
< b className= "text-status-orange" > WING 적 용 의 의 < / b > : 서 해 ( 조 류 강 한 해 역 ) 취 송 류 매 개 변 수 α = 2 % · θ = 20 ° 최 적 값 은 OpenDrift 서 해 운 용 시 wind drift factor 설 정 의 직 접 근 거 . 허 베 이 스 피 리 트 사 고 는 POSEIDON ( 특 허 10 - 1868791 ) 의 검 증 데 이 터 로 도 활 용 .
< / div >
< / div >
< / div >
@ -1181,8 +1181,8 @@ function LagrangianPanel() {
style = { { background : 'linear-gradient(135deg,rgba(6,182,212,.05),rgba(59,130,246,.04))' , border : '1px solid rgba(6,182,212,.2)' } } >
< div className = "absolute top-0 left-0 right-0 h-[3px]" style = { { background : 'linear-gradient(90deg,var(--cyan),var(--blue))' } } / >
< div style = { labelStyle ( 'var(--t1)' ) } > 🧭 라 그 랑 지 안 입 자 추 적 법 ( Lagrangian Particle Tracking ) < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
유 출 유 를 수 많 은 < b style= { { color : 'var(--cyan)' } } > 가 상 입 자 ( Virtual Particle ) < / b > 로 표 현 하 여 , 각 입 자 의 이 동 경 로 를 시 간 단 계 마 다 추 적 하 는 방 법 입 니 다 . KOSPS · POSEIDON · OpenDrift 3 종 모 두 이 방 식 을 채 택 합 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
유 출 유 를 수 많 은 < b className= "text-primary-cyan" > 가 상 입 자 ( Virtual Particle ) < / b > 로 표 현 하 여 , 각 입 자 의 이 동 경 로 를 시 간 단 계 마 다 추 적 하 는 방 법 입 니 다 . KOSPS · POSEIDON · OpenDrift 3 종 모 두 이 방 식 을 채 택 합 니 다 .
< / div >
< / div >
@ -1193,11 +1193,11 @@ function LagrangianPanel() {
dx / dt = U_c + α · U_w + U_stokes + U & apos ; < br / >
dy / dt = V_c + α · V_w + V_stokes + V & apos ;
< / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex gap-2" > < span style = { { color : 'var(--orange)' , fontWeight : 700 , width : '60px' } } > U_c , V_c < / span > < span style= { { color : 'var(--t2)' } } > 표 층 해 류 · 조 류 속 도 ( m / s ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--blue)' , fontWeight : 700 , width : '60px' } } > α · U_w < / span > < span style= { { color : 'var(--t2)' } } > 풍 류 기 여 ( α ≈ 0.03 ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--green)' , fontWeight : 700 , width : '60px' } } > U_stokes < / span > < span style= { { color : 'var(--t2)' } } > 스 토 크 스 표 류 ( 파 랑 영 향 ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--purple)' , fontWeight : 700 , width : '60px' } } > U & apos ; < / span > < span style= { { color : 'var(--t2)' } } > 난 류 확 산 ( 랜 덤 워 크 ) < / span > < / div >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
< div className = "flex gap-2" > < span style = { { color : 'var(--orange)' , fontWeight : 700 , width : '60px' } } > U_c , V_c < / span > < span className= "text-text-2" > 표 층 해 류 · 조 류 속 도 ( m / s ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--blue)' , fontWeight : 700 , width : '60px' } } > α · U_w < / span > < span className= "text-text-2" > 풍 류 기 여 ( α ≈ 0.03 ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--green)' , fontWeight : 700 , width : '60px' } } > U_stokes < / span > < span className= "text-text-2" > 스 토 크 스 표 류 ( 파 랑 영 향 ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--purple)' , fontWeight : 700 , width : '60px' } } > U & apos ; < / span > < span className= "text-text-2" > 난 류 확 산 ( 랜 덤 워 크 ) < / span > < / div >
< / div >
< / div >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--blue)' , margin : 0 } } >
@ -1206,10 +1206,10 @@ function LagrangianPanel() {
U & apos ; = R · √ ( 2 K_h / Δ t ) < br / >
V & apos ; = R · √ ( 2 K_h / Δ t )
< / div >
< div className = "flex flex-col gap-1 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex gap-2" > < span style = { { color : 'var(--purple)' , fontWeight : 700 , width : '60px' } } > R < / span > < span style= { { color : 'var(--t2)' } } > [ - 1 , 1 ] 균 등 분 포 난 수 < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--blue)' , fontWeight : 700 , width : '60px' } } > K_h < / span > < span style= { { color : 'var(--t2)' } } > 수 평 확 산 계 수 ( m ² / s ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--t2)' , fontWeight : 700 , width : '60px' } } > Δ t < / span > < span style= { { color : 'var(--t2)' } } > 시 간 스 텝 ( 일 반 1 시 간 ) < / span > < / div >
< div className = "flex flex-col gap-1 text-[10px] text-text-2" >
< div className = "flex gap-2" > < span style = { { color : 'var(--purple)' , fontWeight : 700 , width : '60px' } } > R < / span > < span className= "text-text-2" > [ - 1 , 1 ] 균 등 분 포 난 수 < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--blue)' , fontWeight : 700 , width : '60px' } } > K_h < / span > < span className= "text-text-2" > 수 평 확 산 계 수 ( m ² / s ) < / span > < / div >
< div className = "flex gap-2" > < span style = { { color : 'var(--t2)' , fontWeight : 700 , width : '60px' } } > Δ t < / span > < span className= "text-text-2" > 시 간 스 텝 ( 일 반 1 시 간 ) < / span > < / div >
< / div >
< / div >
< / div >
@ -1220,20 +1220,20 @@ function LagrangianPanel() {
< div className = "grid grid-cols-2 gap-3" >
< div >
< div className = { ` ${ codeBox } mb-2 ` } >
< span style= { { color : 'var(--t3)' , fontSize : '10px' } } > /* 중력-관성 체제 (초기) */ < / span > < br / >
R ( t ) = < span style= { { color : 'var(--orange)' } } > K ₁ < / span > · ( < span style= { { color : 'var(--cyan)' } } > Δ ρ gV ² < / span > / < span style= { { color : 'var(--blue)' } } > ρ w < / span > ) < sup > ¼ < / sup > · t < sup > ½ < / sup >
< span className= "text-text-3 text-[10px]" > /* 중력-관성 체제 (초기) */ < / span > < br / >
R ( t ) = < span className= "text-status-orange" > K ₁ < / span > · ( < span className= "text-primary-cyan" > Δ ρ gV ² < / span > / < span className= "text-primary-blue" > ρ w < / span > ) < sup > ¼ < / sup > · t < sup > ½ < / sup >
< / div >
< div className = { codeBox } >
< span style= { { color : 'var(--t3)' , fontSize : '10px' } } > /* 중력-점성 체제 (후기) */ < / span > < br / >
R ( t ) = < span style= { { color : 'var(--orange)' } } > K ₂ < / span > · ( < span style= { { color : 'var(--cyan)' } } > Δ ρ gV ² < / span > / < span style= { { color : 'var(--purple)' } } > ν w < / span > ) < sup > ⅙ < / sup > · t < sup > ¾ < / sup >
< span className= "text-text-3 text-[10px]" > /* 중력-점성 체제 (후기) */ < / span > < br / >
R ( t ) = < span className= "text-status-orange" > K ₂ < / span > · ( < span className= "text-primary-cyan" > Δ ρ gV ² < / span > / < span className= "text-primary-purple" > ν w < / span > ) < sup > ⅙ < / sup > · t < sup > ¾ < / sup >
< / div >
< / div >
< div className = "flex flex-col gap-1.5 text-[10px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[10px] text-text-2" >
< div className = "px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(249,115,22,.05)' , border : '1px solid rgba(249,115,22,.15)' } } >
< span style= { { color : 'var(--orange)' , fontWeight : 700 } } > Δ ρ < / span > : 유 류 - 해 수 밀 도 차 ( kg / m ³ )
< span className= "text-status-orange font-bold" > Δ ρ < / span > : 유 류 - 해 수 밀 도 차 ( kg / m ³ )
< / div >
< div className = "px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(6,182,212,.05)' , border : '1px solid rgba(6,182,212,.15)' } } >
< span style= { { color : 'var(--cyan)' , fontWeight : 700 } } > g < / span > : 중 력 가 속 도 9.81 m / s ²
< span className= "text-primary-cyan font-bold" > g < / span > : 중 력 가 속 도 9.81 m / s ²
< / div >
< div className = "px-2.5 py-1.5 rounded-md" style = { { background : 'rgba(59,130,246,.05)' , border : '1px solid rgba(59,130,246,.15)' } } >
< span style = { { color : 'var(--blue)' , fontWeight : 700 } } > V < / span > : 유 출 체 적 ( m ³ )
@ -1256,8 +1256,8 @@ function WeatheringPanel() {
style = { { background : 'linear-gradient(135deg,rgba(249,115,22,.05),rgba(239,68,68,.04))' , border : '1px solid rgba(249,115,22,.2)' } } >
< div className = "absolute top-0 left-0 right-0 h-[3px]" style = { { background : 'linear-gradient(90deg,var(--orange),var(--red),var(--yellow))' } } / >
< div style = { labelStyle ( 'var(--t1)' ) } > 🔁 유 출 유 풍 화 ( Weathering ) 프 로 세 스 < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
유 출 유 는 해 면 에 유 출 된 직 후 부 터 < b style= { { color : 'var(--orange)' } } > 물 리 · 화 학 · 생 물 학 적 풍 화 과 정 < / b > 을 거 쳐 지 속 적 으 로 특 성 이 변 화 합 니 다 . WING 시 스 템 은 주 요 풍 화 프 로 세 스 를 통 합 모 의 하 여 시 간 경 과 에 따 른 유 류 상 태 변 화 를 추 적 합 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
유 출 유 는 해 면 에 유 출 된 직 후 부 터 < b className= "text-status-orange" > 물 리 · 화 학 · 생 물 학 적 풍 화 과 정 < / b > 을 거 쳐 지 속 적 으 로 특 성 이 변 화 합 니 다 . WING 시 스 템 은 주 요 풍 화 프 로 세 스 를 통 합 모 의 하 여 시 간 경 과 에 따 른 유 류 상 태 변 화 를 추 적 합 니 다 .
< / div >
< / div >
@ -1271,7 +1271,7 @@ function WeatheringPanel() {
< div style = { labelStyle ( w . color ) } > { w . title } < / div >
< div className = { ` ${ bodyText } mb-2 ` } > { w . desc } < / div >
< div className = { codeBox } > { w . formula } < / div >
< div className = "mt-2 text-[10px] " style = { { color : 'var(--t3)' } } > { w . note } < / div >
< div className = "mt-2 text-[10px] text-text-3" > { w . note } < / div >
< / div >
) ) }
< / div >
@ -1309,14 +1309,14 @@ function OceanInputPanel() {
style = { { background : 'linear-gradient(135deg,rgba(34,197,94,.05),rgba(6,182,212,.04))' , border : '1px solid rgba(34,197,94,.2)' } } >
< div className = "absolute top-0 left-0 right-0 h-[3px]" style = { { background : 'linear-gradient(90deg,var(--green),var(--cyan))' } } / >
< div style = { labelStyle ( 'var(--t1)' ) } > 🌊 해 양 환 경 입 력 데 이 터 체 계 < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
유 출 유 확 산 예 측 의 정 확 도 는 < b style= { { color : 'var(--cyan)' } } > 입 력 해 양 · 기 상 데 이 터 의 품 질 < / b > 에 크 게 좌 우 됩 니 다 . WING 시 스 템 은 국 내 외 수 치 예 보 모 델 과 실 시 간 관 측 데 이 터 를 연 동 하 여 모 델 정 확 도 를 향 상 시 킵 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
유 출 유 확 산 예 측 의 정 확 도 는 < b className= "text-primary-cyan" > 입 력 해 양 · 기 상 데 이 터 의 품 질 < / b > 에 크 게 좌 우 됩 니 다 . WING 시 스 템 은 국 내 외 수 치 예 보 모 델 과 실 시 간 관 측 데 이 터 를 연 동 하 여 모 델 정 확 도 를 향 상 시 킵 니 다 .
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--green)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--green)' ) } > 🌬 ️ 기 상 입 력 < / div >
< div className = "flex flex-col gap-1.5 text-[11px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[11px] text-text-2" >
{ [
{ label : 'KMA RDAPS' , desc : '동아시아 12km 해상도 · 24h 예보' } ,
{ label : 'ECMWF ERA5' , desc : '전지구 0.25° 재분석 데이터' } ,
@ -1324,14 +1324,14 @@ function OceanInputPanel() {
] . map ( t = >
< div key = { t . label } className = "rounded-md" style = { { padding : '7px 10px' , background : 'rgba(34,197,94,.04)' , border : '1px solid rgba(34,197,94,.12)' } } >
< div className = "font-semibold mb-0.5" > { t . label } < / div >
< div style= { { color : 'var(--t3)' } } > { t . desc } < / div >
< div className= "text-text-3" > { t . desc } < / div >
< / div >
) }
< / div >
< / div >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--cyan)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--cyan)' ) } > 🌊 해 양 입 력 < / div >
< div className = "flex flex-col gap-1.5 text-[11px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-1.5 text-[11px] text-text-2" >
{ [
{ label : 'NIFS ROMS' , desc : '한국 근해 1km 해류·수온 예보' } ,
{ label : 'HYCOM' , desc : '전지구 1/12° 해양 순환 모델' } ,
@ -1339,7 +1339,7 @@ function OceanInputPanel() {
] . map ( t = >
< div key = { t . label } className = "rounded-md" style = { { padding : '7px 10px' , background : 'rgba(6,182,212,.04)' , border : '1px solid rgba(6,182,212,.12)' } } >
< div className = "font-semibold mb-0.5" > { t . label } < / div >
< div style= { { color : 'var(--t3)' } } > { t . desc } < / div >
< div className= "text-text-3" > { t . desc } < / div >
< / div >
) }
< / div >
@ -1358,8 +1358,8 @@ function VerificationPanel() {
style = { { background : 'linear-gradient(135deg,rgba(59,130,246,.05),rgba(34,197,94,.04))' , border : '1px solid rgba(59,130,246,.2)' } } >
< div className = "absolute top-0 left-0 right-0 h-[3px]" style = { { background : 'linear-gradient(90deg,var(--blue),var(--green))' } } / >
< div style = { labelStyle ( 'var(--t1)' ) } > ✅ 모 델 검 증 사 례 < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
WING 시 스 템 의 유 출 유 확 산 모 델 은 < b style= { { color : 'var(--blue)' } } > 과 거 실 제 사 고 재 현 시 뮬 레 이 션 < / b > 을 통 해 정 확 도 가 검 증 되 었 습 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
WING 시 스 템 의 유 출 유 확 산 모 델 은 < b className= "text-primary-blue" > 과 거 실 제 사 고 재 현 시 뮬 레 이 션 < / b > 을 통 해 정 확 도 가 검 증 되 었 습 니 다 .
< / div >
< / div >
@ -1375,7 +1375,7 @@ function VerificationPanel() {
{ value : '±8h' , label : '해안 도달 시간 오차' , color : 'var(--orange)' } ,
{ value : '3종' , label : '비교 검증 모델 수' , color : 'var(--purple)' } ,
] . map ( s = > (
< div key = { s . label } className = "text-center p-2 rounded-md " style = { { background : 'var(--bg0)' } } >
< div key = { s . label } className = "text-center p-2 rounded-md bg-bg-0" >
< div className = "font-bold" style = { { fontSize : '14px' , color : s.color , fontFamily : 'var(--fM)' } } > { s . value } < / div >
< div className = "text-[10px] text-text-3" > { s . label } < / div >
< / div >
@ -1388,8 +1388,8 @@ function VerificationPanel() {
< div style = { labelStyle ( 'var(--t1)' ) } > 2014 년 우 이 산 충 돌 사 고 재 현 < / div >
< span className = "text-[10px] px-2 py-0.5 rounded" style = { { background : 'rgba(6,182,212,.12)' , color : 'var(--cyan)' , fontWeight : 600 } } > 검 증 완 료 < / span >
< / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.6' } } >
여 수 오 동 도 인 근 원 유 유 출 사 고 를 KOSPS 모 델 로 재 현 한 결 과 , 실 제 위 성 SAR 영 상 과 비 교 시 < b style= { { color : 'var(--cyan)' } } > 유 막 중 심 이 동 경 로 일 치 율 82.1 % < / b > 확 인 . 남 해 특 유 의 복 잡 한 조 류 패 턴 반 영 이 관 건 .
< div className = "text-[11px] text-text-2 leading-[1.6]" >
여 수 오 동 도 인 근 원 유 유 출 사 고 를 KOSPS 모 델 로 재 현 한 결 과 , 실 제 위 성 SAR 영 상 과 비 교 시 < b className= "text-primary-cyan" > 유 막 중 심 이 동 경 로 일 치 율 82.1 % < / b > 확 인 . 남 해 특 유 의 복 잡 한 조 류 패 턴 반 영 이 관 건 .
< / div >
< / div >
@ -1399,7 +1399,7 @@ function VerificationPanel() {
< span style = { { . . . tag ( 'var(--blue)' ) , fontWeight : 700 , fontSize : '12px' } } > 📄 모 델 검 증 관 련 논 문 < / span >
< span className = "text-[11px] ml-1" style = { { color : 'var(--t3)' , transition : 'transform .2s' , display : 'inline-block' , transform : papersOpen ? 'rotate(180deg)' : 'rotate(0)' } } > ▼ < / span >
< / div >
{ papersOpen && < div className = "flex flex-col gap-1.5 text-[10px] " style = { { color : 'var(--t2)' } } >
{ papersOpen && < div className = "flex flex-col gap-1.5 text-[10px] text-text-2" >
{ [
{ num : '①' , title : '허베이스피리트호 유출유 확산예측 검증 분석' , authors : '이문진 · 김선동 · 김혜진 · 오세웅' , journal : '한국해양과학기술협의회 공동학술대회' , detail : 'pp.3154 | 2010' , desc : 'Radarsat 인공위성영상 비교 분석 · NOAA GNOME과 동일 입력조건 하 비교 검증' , color : 'var(--red)' , system : 'KOSPS' } ,
{ num : '②' , title : '3차원 유출유 확산예측 시스템 연구' , authors : '이문진 · 김혜진 · 강관근' , journal : '한국해양과학기술협의회 공동학술대회' , detail : 'pp.17-18 | 2013' , desc : 'Monte Carlo Simulation 기반 3D 확산모델 · 허베이 스피리트호 720시간 적용 검증' , color : 'var(--purple)' , system : 'KOSPS' } ,
@ -1419,8 +1419,8 @@ function VerificationPanel() {
< div className = "font-bold" > { paper . title } < / div >
< span style = { { . . . tag ( paper . color ) , fontSize : '9px' , padding : '1px 5px' } } > { paper . system } < / span >
< / div >
< div style= { { color : 'var(--t3)' , lineHeight : '1.6' } } > { paper . authors } | < b style = { { color : paper.color } } > { paper . journal } < / b > { paper . detail } < / div >
< div className = "mt-1 " style = { { color : 'var(--t2)' } } > { paper . desc } < / div >
< div className= "text-text-3 leading-[1.6]" > { paper . authors } | < b style = { { color : paper.color } } > { paper . journal } < / b > { paper . detail } < / div >
< div className = "mt-1 text-text-2" > { paper . desc } < / div >
< / div >
< / div >
) ) }
@ -1438,8 +1438,8 @@ function EnsemblePanel() {
style = { { background : 'linear-gradient(135deg,rgba(168,85,247,.05),rgba(6,182,212,.04))' , border : '1px solid rgba(168,85,247,.2)' } } >
< div className = "absolute top-0 left-0 right-0 h-[3px]" style = { { background : 'linear-gradient(90deg,var(--purple),var(--cyan))' } } / >
< div style = { labelStyle ( 'var(--t1)' ) } > ⚡ 앙 상 블 예 측 ( Ensemble Prediction ) < / div >
< div className = "text-[11px] " style = { { color : 'var(--t2)' , lineHeight : '1.8' } } >
WING 시 스 템 은 3 종 의 유 출 유 확 산 모 델 ( KOSPS · POSEIDON · OpenDrift ) 을 동 시 운 용 하 여 < b style= { { color : 'var(--purple)' } } > 앙 상 블 결 과 < / b > 를 생 산 합 니 다 . 단 일 모 델 대 비 불 확 실 성 을 정 량 화 하 고 신 뢰 구 간 을 제 공 합 니 다 .
< div className = "text-[11px] text-text-2 leading-[1.8]" >
WING 시 스 템 은 3 종 의 유 출 유 확 산 모 델 ( KOSPS · POSEIDON · OpenDrift ) 을 동 시 운 용 하 여 < b className= "text-primary-purple" > 앙 상 블 결 과 < / b > 를 생 산 합 니 다 . 단 일 모 델 대 비 불 확 실 성 을 정 량 화 하 고 신 뢰 구 간 을 제 공 합 니 다 .
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
@ -1452,7 +1452,7 @@ function EnsemblePanel() {
< / div >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderLeft : '3px solid var(--orange)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--orange)' ) } > 🎯 최 악 시 나 리 오 ( Worst Case ) < / div >
< div className = { bodyText } > 방 제 전 략 수 립 을 위 해 3 종 모 델 중 < b style= { { color : 'var(--orange)' } } > 가 장 넓 은 오 염 범 위 < / b > 를 예 측 한 결 과 를 최 악 시 나 리 오 로 별 도 표 시 합 니 다 . 의 사 결 정 자 에 게 보 수 적 방 제 계 획 수 립 근 거 를 제 공 합 니 다 . < / div >
< div className = { bodyText } > 방 제 전 략 수 립 을 위 해 3 종 모 델 중 < b className= "text-status-orange" > 가 장 넓 은 오 염 범 위 < / b > 를 예 측 한 결 과 를 최 악 시 나 리 오 로 별 도 표 시 합 니 다 . 의 사 결 정 자 에 게 보 수 적 방 제 계 획 수 립 근 거 를 제 공 합 니 다 . < / div >
< / div >
< / div >
< / div >
@ -1466,7 +1466,7 @@ function RoadmapPanel() {
< div className = "grid grid-cols-2 gap-3 mb-4" >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderTop : '3px solid var(--red)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--red)' ) } > ⚠ ️ 현 재 모 델 한 계 < / div >
< div className = "flex flex-col gap-2 text-[11px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-2 text-[11px] text-text-2" >
< div className = "rounded-md" style = { { padding : '8px 10px' , background : 'rgba(239,68,68,.04)' , border : '1px solid rgba(239,68,68,.12)' , color : 'var(--t2)' } } > 2 D 표 층 확 산 모 의 위 주 → < b > 3 D 수 직 구 조 반 영 미 흡 < / b > < / div >
< div className = "rounded-md" style = { { padding : '8px 10px' , background : 'rgba(239,68,68,.04)' , border : '1px solid rgba(239,68,68,.12)' , color : 'var(--t2)' } } > 기 상 · 해 양 결 합 피 드 백 미 적 용 → < b > 대 규 모 유 출 시 정 확 도 저 하 < / b > < / div >
< div className = "rounded-md" style = { { padding : '8px 10px' , background : 'rgba(239,68,68,.04)' , border : '1px solid rgba(239,68,68,.12)' , color : 'var(--t2)' } } > 조 류 조 화 상 수 분 해 능 한 계 → < b > 항 만 · 연 안 세 부 예 측 오 차 < / b > < / div >
@ -1474,7 +1474,7 @@ function RoadmapPanel() {
< / div >
< div className = { ` ${ card } ${ cardBg } ` } style = { { borderTop : '3px solid var(--green)' , margin : 0 } } >
< div style = { labelStyle ( 'var(--green)' ) } > 🚀 발 전 방 향 < / div >
< div className = "flex flex-col gap-2 text-[11px] " style = { { color : 'var(--t2)' } } >
< div className = "flex flex-col gap-2 text-[11px] text-text-2" >
{ [
{ title : 'ROMS 3D 해양모델 결합' , desc : '광역→상세역 Nesting 200m급 고해상도 구현' } ,
{ title : 'AI/ML 서로게이트 모델' , desc : '수치모델 학습 기반 수초 내 근사 예측' } ,