"부산시 재생투어"의 두 판 사이의 차이
(새 문서: <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>보수동 책방골목 시맨...) |
|||
| (다른 사용자 한 명의 중간 판 4개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
| − | + | ||
<html lang="ko"> | <html lang="ko"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| − | <title>보수동 책방골목 시맨틱 데이터 | + | <title>보수동 책방골목 시맨틱 데이터 전략 보고서</title> |
| + | <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> | ||
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | ||
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | ||
| + | |||
<style> | <style> | ||
| + | :root { | ||
| + | --primary: #1a5f7a; | ||
| + | --secondary: #c7802d; | ||
| + | --accent: #ff6b6b; | ||
| + | --bg: #f0f2f5; | ||
| + | --glass: rgba(255, 255, 255, 0.8); | ||
| + | } | ||
| + | |||
body { | body { | ||
| − | font-family: 'Pretendard', - | + | font-family: 'Pretendard', sans-serif; |
| − | + | background: var(--bg); | |
| − | + | color: #2d3436; | |
| − | + | margin: 0; | |
| − | + | overflow-x: hidden; | |
| + | } | ||
| + | |||
| + | /* Hero Section */ | ||
| + | .hero { | ||
| + | height: 60vh; | ||
| + | background: linear-gradient(135deg, #1a5f7a 0%, #002d40 100%); | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | color: white; | ||
| + | text-align: center; | ||
padding: 20px; | padding: 20px; | ||
| − | background- | + | position: relative; |
| + | } | ||
| + | |||
| + | .hero h1 { | ||
| + | font-size: 3rem; | ||
| + | margin-bottom: 10px; | ||
| + | text-shadow: 2px 2px 10px rgba(0,0,0,0.3); | ||
| + | } | ||
| + | |||
| + | .hero-badge { | ||
| + | background: var(--secondary); | ||
| + | padding: 5px 20px; | ||
| + | border-radius: 50px; | ||
| + | font-weight: 600; | ||
| + | margin-bottom: 20px; | ||
} | } | ||
| − | . | + | |
| − | + | /* Container */ | |
| − | + | .container { | |
| − | + | max-width: 1100px; | |
| − | + | margin: -80px auto 50px; | |
| − | + | padding: 0 20px; | |
} | } | ||
| − | + | ||
| − | border- | + | /* Glass Card */ |
| − | padding | + | .card { |
| + | background: var(--glass); | ||
| + | backdrop-filter: blur(10px); | ||
| + | border-radius: 20px; | ||
| + | padding: 40px; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
| + | box-shadow: 0 15px 35px rgba(0,0,0,0.1); | ||
| + | border: 1px solid rgba(255,255,255,0.3); | ||
| + | transition: transform 0.3s ease; | ||
} | } | ||
| − | + | ||
| − | + | .card:hover { | |
| − | + | transform: translateY(-5px); | |
| − | |||
| − | |||
} | } | ||
| − | . | + | |
| − | + | /* Grid System */ | |
| − | + | .grid { | |
display: grid; | display: grid; | ||
| − | grid-template-columns: | + | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| − | gap: | + | gap: 25px; |
| + | } | ||
| + | |||
| + | /* Stats Section */ | ||
| + | .stat-item { | ||
| + | text-align: center; | ||
| + | padding: 20px; | ||
| + | } | ||
| + | |||
| + | .stat-number { | ||
| + | font-size: 2.5rem; | ||
| + | font-weight: 800; | ||
| + | color: var(--primary); | ||
| + | display: block; | ||
} | } | ||
| − | . | + | |
| − | + | /* Semantic Graph Visual Mockup */ | |
| − | + | .graph-area { | |
| + | height: 300px; | ||
| + | background: #fff; | ||
| + | border-radius: 15px; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | border: 1px dashed #ccc; | ||
} | } | ||
| − | + | ||
| − | + | .node { | |
| − | color: | + | width: 80px; |
| − | border- | + | height: 80px; |
| − | + | background: var(--primary); | |
| − | + | color: white; | |
| − | + | border-radius: 50%; | |
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | font-size: 0.8rem; | ||
| + | position: absolute; | ||
| + | animation: float 3s infinite ease-in-out; | ||
| + | cursor: pointer; | ||
| + | z-index: 2; | ||
} | } | ||
| − | + | ||
| − | + | @keyframes float { | |
| − | + | 0%, 100% { transform: translateY(0px); } | |
| − | + | 50% { transform: translateY(-10px); } | |
} | } | ||
| − | + | ||
| − | + | /* Strategy Items */ | |
| − | + | .strategy-card { | |
| − | + | background: white; | |
| + | border-radius: 15px; | ||
| + | overflow: hidden; | ||
| + | border-bottom: 5px solid var(--secondary); | ||
} | } | ||
| − | + | ||
| − | color: | + | .strategy-icon { |
| + | height: 100px; | ||
| + | background: #f8f9fa; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | font-size: 2.5rem; | ||
| + | color: var(--primary); | ||
} | } | ||
| − | . | + | |
| − | + | .strategy-content { | |
padding: 20px; | padding: 20px; | ||
| − | |||
| − | |||
} | } | ||
| − | . | + | |
| − | + | /* Dynamic Progress Bar */ | |
| − | + | .progress-container { | |
| − | + | width: 100%; | |
| − | margin: | + | background-color: #eee; |
| + | border-radius: 10px; | ||
| + | margin: 10px 0; | ||
} | } | ||
| − | . | + | |
| − | background- | + | .progress-bar { |
| − | border: | + | height: 10px; |
| − | + | background: var(--secondary); | |
| − | + | border-radius: 10px; | |
| + | width: 0%; | ||
| + | transition: width 1.5s ease-in-out; | ||
} | } | ||
| − | . | + | |
| − | + | /* Header Info */ | |
| − | color: # | + | .info-bar { |
| + | display: flex; | ||
| + | justify-content: space-between; | ||
| + | font-size: 0.9rem; | ||
| + | color: #636e72; | ||
| + | margin-bottom: 10px; | ||
} | } | ||
| − | . | + | |
| − | + | /* Scroll Animation Class */ | |
| − | + | .reveal { | |
| − | + | opacity: 0; | |
| − | + | transform: translateY(30px); | |
| − | + | transition: all 0.8s ease-out; | |
} | } | ||
| − | . | + | |
| − | + | .reveal.active { | |
| − | + | opacity: 1; | |
| − | + | transform: translateY(0); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <div class=" | + | <section class="hero"> |
| − | + | <div class="hero-badge animate__animated animate__fadeInDown">REPORT: 2026-04</div> | |
| − | <h1> | + | <h1 class="animate__animated animate__fadeInUp">보수동 책방골목<br>시맨틱 데이터 관광 투어 전략</h1> |
| − | <div class=" | + | <p class="animate__animated animate__fadeInUp animate__delay-1s">단절된 헌책의 역사를 데이터의 선으로 잇다</p> |
| − | + | </section> | |
| − | + | ||
| − | < | + | <div class="container"> |
| + | <div class="card reveal"> | ||
| + | <div class="info-bar"> | ||
| + | <span><i class="fas fa-paper-plane"></i> 수신: 부산관광공사</span> | ||
| + | <span><i class="fas fa-user-edit"></i> 발신: 데이터 전략 기획팀</span> | ||
| + | <span><i class="fas fa-calendar-alt"></i> 2026. 04. 03</span> | ||
| + | </div> | ||
| + | <hr style="border:0; border-top:1px solid #ddd; margin:20px 0;"> | ||
| + | <p style="font-size: 1.1rem; line-height: 1.8;"> | ||
| + | 본 보고서는 <strong>보수동 책방골목 위키 데이터</strong>와 <strong>빅카인즈 뉴스 데이터</strong>를 융합 분석하여, | ||
| + | 소멸 위기의 근대문화유산을 글로벌 체류형 관광 자원으로 전환하기 위한 <strong>시맨틱 데이터 기반 투어 로드맵</strong>을 제안합니다. | ||
| + | </p> | ||
</div> | </div> | ||
| − | |||
| − | + | <div class="grid"> | |
| − | + | <div class="card reveal" style="padding: 20px;"> | |
| − | + | <div class="stat-item"> | |
| − | + | <span class="stat-number" id="count1">0</span> | |
| − | + | <span style="font-weight: 600;">3월 보도량 증가율</span> | |
| − | < | + | <div class="progress-container"><div class="progress-bar" style="width: 85%;"></div></div> |
| − | + | </div> | |
| − | + | </div> | |
| + | <div class="card reveal" style="padding: 20px;"> | ||
| + | <div class="stat-item"> | ||
| + | <span class="stat-number" id="count2">0</span> | ||
| + | <span style="font-weight: 600;">핵심 시맨틱 엔터티</span> | ||
| + | <div class="progress-container"><div class="progress-bar" style="width: 72%;"></div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="card reveal" style="padding: 20px;"> | ||
| + | <div class="stat-item"> | ||
| + | <span class="stat-number" id="count3">0</span> | ||
| + | <span style="font-weight: 600;">글로벌 긍정 담론</span> | ||
| + | <div class="progress-container"><div class="progress-bar" style="width: 64%;"></div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| − | + | <div class="card reveal"> | |
| − | + | <h2 style="color: var(--primary);"><i class="fas fa-share-alt"></i> 시맨틱 네트워크: 보수동의 연결고리</h2> | |
| − | + | <p>위키에 기록된 <b>박다옥(인물)-피란(시대)-헌책(사물)</b>의 관계망 추출 결과</p> | |
| − | + | <div class="graph-area"> | |
| − | + | <div class="node" style="top:20%; left:40%; background:var(--accent);">보수동</div> | |
| − | + | <div class="node" style="top:50%; left:20%;">박다옥</div> | |
| − | + | <div class="node" style="top:60%; left:65%;">피란수도</div> | |
| + | <div class="node" style="top:15%; left:70%;">헌책</div> | ||
| + | <div class="node" style="top:75%; left:45%;">디지털지도</div> | ||
| + | <svg width="100%" height="100%" style="position:absolute; top:0; left:0;"> | ||
| + | <line x1="45%" y1="30%" x2="25%" y2="55%" stroke="#ccc" /> | ||
| + | <line x1="45%" y1="30%" x2="70%" y2="25%" stroke="#ccc" /> | ||
| + | <line x1="45%" y1="30%" x2="65%" y2="60%" stroke="#ccc" /> | ||
| + | <line x1="25%" y1="55%" x2="45%" y2="75%" stroke="#ccc" /> | ||
| + | </svg> | ||
| + | </div> | ||
| + | </div> | ||
| − | + | <h2 class="reveal" style="margin-top: 50px;"><i class="fas fa-lightbulb" style="color: var(--secondary);"></i> 데이터 기반 3대 투어 전략</h2> | |
| − | + | <div class="grid"> | |
| − | + | <div class="strategy-card reveal"> | |
| − | + | <div class="strategy-icon"><i class="fas fa-vr-cardboard"></i></div> | |
| − | + | <div class="strategy-content"> | |
| − | + | <h3 style="color:var(--primary);">Genesis AR 투어</h3> | |
| − | + | <p><b>근거:</b> 위키 내 인물사 데이터<br>박다옥 씨의 최초 노점을 AR로 복원하여 창업 스토리텔링 체험 제공</p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class="strategy-card reveal"> | |
| − | + | <div class="strategy-icon"><i class="fas fa-book-open"></i></div> | |
| − | + | <div class="strategy-content"> | |
| − | + | <h3 style="color:var(--primary);">Semantic Cycle</h3> | |
| − | + | <p><b>근거:</b> 헌책의 순환 데이터<br>책 속의 낙서와 전 소유자의 기록을 추적하는 디지털 도슨트 투어</p> | |
| + | </div> | ||
| + | </div> | ||
| + | <div class="strategy-card reveal"> | ||
| + | <div class="strategy-icon"><i class="fas fa-map-marked-alt"></i></div> | ||
| + | <div class="strategy-content"> | ||
| + | <h3 style="color:var(--primary);">Smart Nodes</h3> | ||
| + | <p><b>근거:</b> 재개발 위기 데이터<br>사라진 서점들을 디지털 노드로 복원한 모바일 스탬프 투어</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| − | + | <div class="card reveal" style="text-align: center; border-top: 5px solid var(--primary); margin-top: 50px;"> | |
| − | + | <h2 style="color: var(--primary);">데이터가 역사를 보존하고, 관광을 혁신합니다.</h2> | |
| − | + | <p>보수동 책방골목은 더 이상 사라질 골목이 아니라, <br>부산의 지식 생태계를 잇는 <b>디지털 아카이브 관광의 메카</b>가 될 것입니다.</p> | |
| − | + | <button style="background: var(--primary); color:white; border:none; padding:15px 40px; border-radius:30px; font-weight:700; cursor:pointer; transition: 0.3s;" onclick="alert('전략 기획서 상세본 출력을 시작합니다.')">보고서 다운로드 (PDF)</button> | |
| − | < | ||
| − | |||
| − | |||
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
| − | < | + | <footer style="padding: 50px; text-align:center; color: #999; font-size: 0.8rem;"> |
| + | © 2026 Busan Heritage Data Lab. 본 UI는 기획자 전용 데모 버전입니다. | ||
| + | </footer> | ||
| − | < | + | <script> |
| + | // Scroll Reveal Animation | ||
| + | function reveal() { | ||
| + | var reveals = document.querySelectorAll(".reveal"); | ||
| + | for (var i = 0; i < reveals.length; i++) { | ||
| + | var windowHeight = window.innerHeight; | ||
| + | var elementTop = reveals[i].getBoundingClientRect().top; | ||
| + | var elementVisible = 150; | ||
| + | if (elementTop < windowHeight - elementVisible) { | ||
| + | reveals[i].classList.add("active"); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | window.addEventListener("scroll", reveal); | ||
| − | + | // Counter Animation | |
| − | + | function animateCounter(id, target) { | |
| − | + | let current = 0; | |
| − | + | let increment = target / 50; | |
| − | + | let timer = setInterval(() => { | |
| − | + | current += increment; | |
| − | + | if (current >= target) { | |
| − | + | current = target; | |
| − | + | clearInterval(timer); | |
| − | + | } | |
| − | + | document.getElementById(id).innerText = Math.floor(current) + (id === 'count1' ? '%' : (id === 'count3' ? '%' : '')); | |
| − | + | }, 30); | |
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | // Trigger on load | ||
| + | window.onload = () => { | ||
| + | reveal(); | ||
| + | animateCounter('count1', 285); | ||
| + | animateCounter('count2', 42); | ||
| + | animateCounter('count3', 78); | ||
| + | }; | ||
| + | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
| + | |||
| + | [[분류:지역아카이브]] [[분류:박지홍]] [[분류:보수동]] | ||
2026년 4월 3일 (금) 20:49 기준 최신판
REPORT: 2026-04
보수동 책방골목
시맨틱 데이터 관광 투어 전략
단절된 헌책의 역사를 데이터의 선으로 잇다
본 보고서는 보수동 책방골목 위키 데이터와 빅카인즈 뉴스 데이터를 융합 분석하여, 소멸 위기의 근대문화유산을 글로벌 체류형 관광 자원으로 전환하기 위한 시맨틱 데이터 기반 투어 로드맵을 제안합니다.
0
3월 보도량 증가율
0
핵심 시맨틱 엔터티
0
글로벌 긍정 담론
시맨틱 네트워크: 보수동의 연결고리
위키에 기록된 박다옥(인물)-피란(시대)-헌책(사물)의 관계망 추출 결과
보수동
박다옥
피란수도
헌책
디지털지도
데이터 기반 3대 투어 전략
Genesis AR 투어
근거: 위키 내 인물사 데이터
박다옥 씨의 최초 노점을 AR로 복원하여 창업 스토리텔링 체험 제공
Semantic Cycle
근거: 헌책의 순환 데이터
책 속의 낙서와 전 소유자의 기록을 추적하는 디지털 도슨트 투어
Smart Nodes
근거: 재개발 위기 데이터
사라진 서점들을 디지털 노드로 복원한 모바일 스탬프 투어
데이터가 역사를 보존하고, 관광을 혁신합니다.
보수동 책방골목은 더 이상 사라질 골목이 아니라,
부산의 지식 생태계를 잇는 디지털 아카이브 관광의 메카가 될 것입니다.