Camino de Santiago 고도 그래프 시각화 프로젝트

산티아고 순례길(Camino de Santiago)의 각 구간별 고도 프로필을 시각화한 웹 그래프 모음입니다.

프로젝트 개요

산티아고 순례길의 주요 구간을 일별로 나누어 각 구간의 고도 변화를 직관적이고 아름다운 그래프로 시각화한 프로젝트입니다. 총 32개 이상의 구간(Day_1A부터 Day_32까지)을 포함하며, 각 HTML 파일은 독립적으로 실행 가능한 완성된 웹 페이지입니다.

납품물

• HTML 파일: 각 구간별 고도 그래프 (Day_1A.html ~ Day_32.html)
• 로고 이미지: 프로젝트 로고 (logo.png)
• 문서: 프로젝트 설명서 (README.md)

주요 기능 및 특징

시각적 디자인

• 우측에서 좌측으로 읽는 방향성: 순례길의 진행 방향을 직관적으로 표현
• 부드러운 베지어 곡선: 고도 변화를 자연스럽게 표현
• 노란색/오렌지 계열 색상: 따뜻한 톤의 그라데이션 디자인
• 모던한 UI: 깔끔한 카드 디자인과 부드러운 그림자 효과

기능

• 구간별 거리 표시: 각 구간 사이의 거리를 배지 형태로 표시
• 지점 정보 표시: 각 주요 지점의 한글명, 영문명, 고도 정보 제공
• 로고 이미지: 그래프 내부 우측 상단에 로고 배치
• START/END 마커: 출발지와 도착지를 명확하게 표시
• 고도 눈금선: 배경 그리드를 통한 고도 레벨 가이드
• Hidden 포인트 지원: 중간 지점을 표시하지 않고 거리 계산에만 활용 가능

기술 사양

• HTML5 Canvas: 고성능 그래픽 렌더링
• JavaScript (Vanilla): 순수 JavaScript로 구현된 그래프 로직
• Pretendard 폰트: 한글과 영문 모두 아름답게 표현되는 웹 폰트 (CDN 사용)

파일 구조

graph_33-main/
├── Day_1A.html      # 생장 → 론세스바예스 (1일차 A구간)
├── Day_1B.html      # 1일차 B구간
├── Day_2.html       # 2일차 구간
├── Day_3.html       # 수비리 → 팜플로나
├── Day_4.html       # 팜플로나 → 푸엔테라레이나
├── Day_5.html       # 푸엔테라레이나 → 에스떼야
├── Day_6.html       # 에스떼야 → 로스아르코스
├── Day_7.html       # 로스아르코스 → 로그로뇨
├── Day_8.html       # 로그로뇨 → 나헤라
├── Day_9.html       # 나헤라 → 산토도밍고
├── Day_10.html      # 10일차 구간
├── Day_11.html      # 11일차 구간
├── Day_12.html      # 12일차 구간
├── Day_13.html      # 13일차 구간
├── Day_14.html      # 14일차 구간
├── Day_15.html      # 15일차 구간
├── Day_16.html      # 16일차 구간
├── Day_17.html      # 17일차 구간
├── Day_18.html      # 18일차 구간
├── Day_19.html      # 19일차 구간
├── Day_20.html      # 20일차 구간
├── Day_21.html      # 21일차 구간
├── Day_22.html      # 아스토르가 → 폰세바돈
├── Day_23.html      # 폰세바돈 → 폰페라다
├── Day_24.html      # 폰페라다 → 비야프랑카
├── Day_25.html      # 비야프랑카 → 오 세브레이로
├── Day_26.html      # 오 세브레이로 → 트리아카스텔라
├── Day_27A.html     # 트리아카스텔라 → 사리아 (A루트)
├── Day_27B.html     # 트리아카스텔라 → 사리아 (B루트)
├── Day_28.html      # 사리아 → 포르토마린
├── Day_29.html      # 포르토마린 → 팔라스 데 레이
├── Day_30.html      # 팔라스 데 레이 → 아르수아
├── Day_31.html      # 아르수아 → 오 페드로우소
├── Day_32.html      # 오 페드로우소 → 산티아고 데 콤포스텔라
├── logo.png         # 프로젝트 로고 이미지
└── README.md        # 프로젝트 설명서

사용 방법

1. 원하는 구간의 HTML 파일을 선택합니다 (예: Day_32.html)
2. 파일을 웹 브라우저에서 엽니다
3. 그래프가 자동으로 렌더링되어 표시됩니다

참고: 각 HTML 파일은 독립적으로 작동하며, 외부 서버 없이도 로컬에서 바로 실행 가능합니다. 인터넷 연결이 필요합니다 (Pretendard 폰트 CDN 사용).

주요 구간 예시

Day_1A: 생장 → 론세스바예스

• 출발지: Saint-Jean-Pied-de-Port (생장 피에드포르)
• 도착지: Roncesvalles (론세스바예스)
• 총 거리: 24.2km
• 최고 고도: 1,430m (Collado de Lepoeder)

Day_4: 팜플로나 → 푸엔테라레이나

• 출발지: Pamplona (팜플로나)
• 도착지: Puente la Reina (푸엔테라레이나)
• 총 거리: 23.9km
• 주요 지점: 용서의 언덕 (Alto del Perdón)

Day_29: 포르토마린 → 팔라스 데 레이

• 출발지: Portomarín (포르토마린)
• 도착지: Palas de Rei (팔라스 데 레이)
• 총 거리: 24.8km
• 주요 지점: 곤사르, 오스피탈 다 크루스, 리곤데

Day_32: 오 페드로우소 → 산티아고 데 콤포스텔라 (최종 구간)

• 출발지: O Pedrouzo (오 페드로우소)
• 도착지: Santiago de Compostela (산티아고 데 콤포스텔라)
• 총 거리: 19.4km
• 주요 지점: 아메날, 라바코야, 몬테 도 고소

그래프 구성 요소

1. 고도 곡선: 부드러운 베지어 곡선으로 표현된 고도 변화
2. 그라데이션 채우기: 곡선 아래 영역의 그라데이션 채우기
3. X축 (거리): 5km 단위로 표시되는 거리 눈금 및 진행 방향 화살표
4. Y축 (고도): 배경 그리드로 표현되는 고도 레벨
5. 지점 마커: 각 주요 지점을 표시하는 원형 마커
6. 거리 배지: 구간별 거리를 표시하는 흰색 배지
7. 로고: 그래프 우측 상단에 배치된 프로젝트 로고

구현 사항

• 모든 그래프는 동일한 디자인 시스템을 따릅니다
• 좌우 반전된 좌표계를 사용하여 우측에서 좌측으로 읽는 방향성을 구현했습니다
• 각 구간의 고도 범위는 해당 구간의 최소/최대 고도에 맞춰 자동 조정됩니다
• 로고 이미지는 Canvas API를 사용하여 그래프 위에 오버레이됩니다
• 반응형 디자인으로 다양한 화면 크기에 대응합니다
• Hidden 타입 포인트를 지원하여 중간 지점을 표시하지 않고 거리 계산에만 활용할 수 있습니다