데이터 & 기상 서비스

Météo Climat France

색인 가능한 358개 페이지, 72개 예보 시점을 담은 애니메이션 지도 — 프레임워크 코드는 단 한 줄도 없습니다.

연도
2026
제작 기간
6주
기술 스택
JavaScript · MapLibre · HTML/CSS · Vercel
  • 정보 구조 설계
  • 인터페이스 디자인
  • 개발
  • 지도 제작
  • 프로그래매틱 SEO
  • 과학 콘텐츠 작성

Kayzen Web이 개발·운영하는 제품으로, 정식 도메인으로 옮기기 전까지 Vercel 미리보기 주소에서 제공됩니다.

https://meteo-climat-france.vercel.app/
Météo Climat France 웹사이트 메인 페이지 — 데이터 & 기상 서비스, Kayzen Web 제작
개의 색인 가능 페이지코뮌 180 · 기후 정보 141 · 해설 16 · 지도 12
358
개의 보간 격자점
247
개의 애니메이션 시간대
72
지도 API 키MapLibre와 IGN 배경 지도를 자체 호스팅
0
출발점

해결해야 했던 과제.

배경

Météo Climat France는 Kayzen Web이 운영하는 무료 전국 날씨 서비스입니다. 하나의 데이터베이스로 서로 다른 세 가지 용도를 다룹니다. 일상 날씨(48시간 시간별 예보, 10일 추세), 기후학(관측소별 평년값과 극값), 농업 기상(토양 온도와 수분, ET0, 물수지, 적산온도, 방제 작업 조건)입니다.

제약

세 가지 제약이 서로 부딪쳤습니다. 서비스는 72개 시간대에 걸친 프랑스 애니메이션 지도를 보여 줘야 했습니다. 즉 브라우저에서 무거운 계산이 필요합니다. 동시에 밭 가장자리에서 흔히 3G로 접속하는 휴대폰에서도 볼 수 있어야 했습니다. 그리고 “météo Vénissieux 69200” 같은 초지역 검색어에서 Google에 노출되어야 했습니다. 20년 전부터 자리 잡은 사업자들이 차지한 영역입니다.

해법

프레임워크부터 꺼내 드는 습관을 거부했습니다. 사이트는 순수 JavaScript로 작성했고, 필요할 때 로드되는 열한 개의 모듈로 나눴으며, 지도는 자체 호스팅한 MapLibre로 그립니다. 런타임에서 아낀 예산은 중요한 곳에 다시 투자했습니다. 247개 격자점의 보간, 358개 페이지의 사전 렌더링, 농학 용어를 정성껏 다듬는 일입니다.

디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 지도가 곧 홈

    첫 화면은 검색 양식이 아니라 현재 시각으로 이미 그려진 프랑스 지도입니다. 방문자는 아무것도 하기 전에 답을 봅니다. 코뮌이나 우편번호 검색은 바로 아래에 있으며, 어디서든 “/” 키를 누르면 검색창으로 포커스가 이동합니다.

  2. 기상 요소마다 하나의 색상 척도

    기온, 강수, 바람, 구름, 기압, 습도, 뇌우, 자외선마다 범위와 범례를 갖춘 고유한 색상 척도가 있습니다. 빨강-초록 그라데이션만으로 된 척도는 하나도 없습니다. 제2색맹(녹색약)은 남성의 6%에게 나타나며, 색을 잘못 고른 날씨 지도는 그들에게 읽을 수 없게 됩니다.

  3. 키보드로 조작하는 시간 슬라이더

    좌우 화살표로 시간을, Shift + 화살표로 날짜를 바꾸고, Space로 애니메이션을 재생하며, Home으로 현재 시각으로 돌아갑니다. 단축키는 도움말에 숨기지 않고 슬라이더 아래에 적어 두었습니다.

  4. 글로 풀어 쓴 설명

    지도 아래의 “지도를 글로 설명하기” 링크가 지도가 보여 주는 내용을 텍스트로 전달합니다. 스크린 리더에는 필수이고, 덤으로 검색 엔진도 읽을 수 있습니다. 검색 엔진에게 캔버스 지도는 빈 이미지일 뿐입니다.

  5. 자체 호스팅한 단일 서체

    사이트 도메인에서 제공하는 Nunito 가변 폰트. Google Fonts로 가는 요청은 없습니다. 매일 찾는 서비스에 외부 폰트를 쓰는 것은 네트워크 의존성이자, 법적 근거 없는 국외 데이터 이전입니다.

프로젝트 색상 팔레트

  • 스카이 블루

    #2E7BB6

    구조, 링크, 헤더

  • 슬레이트

    #1F2933

    기본 텍스트

  • 밀

    #C9A227

    농업 기상 영역

  • 경보

    #C6413B

    임계값 초과, 기상 특보

타이포그래피 체계

제목용 서체

Nunito 700

본문용 서체

Nunito 400

자체 호스팅한 가변 서체 패밀리 하나. 숫자는 고정폭으로 표시합니다. 그렇지 않으면 기온이 바뀔 때마다 시간별 표의 열 전체가 흔들립니다.

엔지니어링

보이지 않는 곳의 기술.

  • JavaScript
  • MapLibre
  • HTML/CSS
  • Vercel
  1. 순수 JavaScript, 열한 개의 모듈

    menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau, 그리고 MapLibre 벤더 모듈. 페이지마다 필요한 것만 로드합니다. 관측소의 기후 정보 페이지는 농학 엔진도, 레이더 플레이어도 싣지 않습니다.

  2. Mapbox 대신 자체 호스팅 MapLibre

    API 키도, 조회수 과금도, 로딩마다 외부로 가는 호출도 없습니다. 배경 지도는 IGN(프랑스 국립지리원)의 것입니다. 코뮌을 이야기하는 서비스와 잘 맞는 프랑스 공공 데이터입니다.

  3. 247개 격자점 보간

    공개 모델은 격자를 제공하지만, 인터페이스에는 연속된 장(場)이 필요합니다. 보간과 렌더링은 브라우저에서 시간대마다 한 번에 처리하며, 72개 시간대를 캐시해 API를 다시 부르지 않고도 애니메이션이 매끄럽게 유지됩니다.

  4. 로봇에 차단한 /api/ 경로

    robots.txt에서 /api/를 제외했습니다. 그렇지 않으면 크롤러가 방문할 때마다 Open-Meteo 할당량을 헛되이 소모합니다. 할당량이 바닥나면 실제 방문자에게 서비스가 멈춥니다.

  5. 서버 측 데이터 함수

    모델 호출은 응답을 정규화하고, 캐시하고, 범위를 제한하는 서버 함수를 거칩니다. 브라우저는 결코 공급자와 직접 통신하지 않습니다. 데이터 출처를 바꾸는 날에도 인터페이스는 그대로입니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 358개 URL, 네 개의 템플릿

    코뮌별 페이지 180개(/meteo/lyon-69001), 기후 정보 페이지 141개(/climat/…), 해설 페이지 16개(/comprendre/…), 주제별 지도 페이지 12개(/cartes/radar…). 템플릿마다 다른 의도에 답하며, 어떤 페이지도 다른 페이지를 겉모습만 바꾼 변형이 아닙니다.

  2. 코뮌마다 고유한 콘텐츠

    프로그래매틱 SEO는 중복될 때 실패합니다. 각 코뮌 페이지에는 좌표, 고도, 연결된 관측소의 평년값과 극값이 담겨 있습니다. 도시마다 실제로 다른 값입니다.

  3. 세 가지 구조화 데이터 블록

    WebApplication(날씨 카테고리, 무료 명시), 실제 사이트 내 검색을 가리키는 SearchAction이 포함된 WebSite, 그리고 페이지에서 실제로 다루는 질문으로 채운 FAQPage.

  4. 의미 있는 내부 링크

    푸터는 16개 대도시를 연결하고, 각 페이지는 해당 기후 정보 페이지, 지도, 용어집으로 이어집니다. 내부 링크는 링크를 깔아 놓은 것이 아니라 읽는 흐름을 따릅니다.

  5. 일관된 사이트맵과 canonical

    페이지마다 canonical은 하나이고, 사이트맵은 실제로 제공되는 358개 URL을 정확히 나열합니다. 사이트맵에 없는 URL은 크롤링되지 않고, 페이지 없는 사이트맵 URL은 도메인 전체를 약화시키는 소프트 404가 됩니다.

웹 접근성

누구나 사용할 수 있도록.

2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.

  1. 보지 않아도 존재하는 지도

    지도의 텍스트 설명은 alt 속성이 아닙니다. 표시 중인 시간대에 맞춰 갱신되는 생성 콘텐츠이며, 키보드로 도달할 수 있고 음성 합성으로 읽을 수 있습니다.

  2. 모든 것을 키보드로

    레이어, 코뮌, 시간대 변경과 애니메이션 재생까지, 마우스가 필요한 조작은 하나도 없습니다. 단축키는 화면에 안내되어 있습니다.

  3. 색각 이상 환경에서 검증한 색상 척도

    모든 색상 척도를 제1색맹, 제2색맹, 제3색맹 환경으로 시뮬레이션했습니다. 값은 여전히 구분되며, 범례에는 언제나 숫자로 된 경계값이 표시됩니다.

사이트 구조

납품한 결과물.

  • 홈 — 애니메이션 지도와 검색
  • /meteo/<코뮌>-<우편번호> — 코뮌별 페이지 180개
  • /climat/<관측소> — 평년값과 극값 페이지 141개
  • /cartes/<레이어> — 레이더, 적외선·가시광선 위성, 낙뢰, 자외선…
  • /meteo-agricole — 토양, ET0, 물수지, 방제 작업
  • /comprendre — 해설 페이지 16개와 용어집
  • /lune, /contact, 법적 고지, 개인정보처리방침, 이용약관/판매약관, 접근성
방법론

프로젝트 진행 과정.

  1. 데이터 모델

    공공 데이터 출처 선정(Open-Meteo, IGN), 기상 요소 정규화, 할당량.

  2. 지도 제작

    격자, 보간, 색상 척도, 시간 슬라이더.

  3. 농업 기상

    ET0 FAO-56, P − ET0 물수지, 적산온도, Delta T, 보퍼트 풍력 3 기준.

  4. 프로그래매틱 SEO

    네 개의 템플릿, 358개 페이지 생성, 사이트맵, 내부 링크.

  5. 규정 준수

    법적 고지, 농약 관련 규제상 유보 조항, 접근성, GDPR.

질문

자주 받는 질문.

사이트에서 가장 무거운 페이지가 캔버스 지도이기 때문입니다. 주된 비용은 컴포넌트 트리 갱신이 아니라 그래픽 렌더링입니다. 프레임워크는 흔히 3G로 접속하는 휴대폰에서 내려받고 실행해야 할 JavaScript만 늘릴 뿐, 아무것도 해결하지 못했을 것입니다. 이념적인 선택이 아닙니다. 인터페이스 상태가 정말로 복잡한 프로젝트에서는 React로 시작합니다.

아닙니다. 페이지에도 명시되어 있습니다. 프랑스에서 작물보호제 사용에 관한 자문은 인가가 필요한 규제 대상 활동입니다. 사이트는 예보된 기상 조건을 보여 주고 2017년 5월 4일 시행령의 풍속 기준을 상기시킬 뿐이며, 결정은 농업 경영자와 그가 선임한 인가 자문가의 몫입니다. 이 유보 조항은 법적 고지가 아니라 설계의 일부입니다.

예보는 Open-Meteo가 모은 공개 모델에서, 배경 지도는 IGN에서 옵니다. 두 출처 모두 푸터에 명시하고 링크를 걸었습니다. 숫자의 출처를 밝히지 않는 데이터 서비스는 검증할 수 없습니다.

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

공유