해양 예측 데이터 시각화 서비스 DanMap, 웹 화면을 처음부터 다시 만든 2주 — 비회원 체험부터 AI 질의까지

안녕하세요. 단감에서 혼자 서비스들을 만들고 있는 개발자입니다. 지난 2주는 거의 통째로 DanMap 의 웹 화면을 처음부터 다시 만드는 데 썼습니다. 예제 화면만 그려 주던 서비스를, 내 자료를 직접 올려서 바로 써 보는 서비스로 바꾸고 운영에도 반영했어요.

👋 오늘의 개발 근황

곧 있을 발표용 시연 영상을 다시 찍어야 해서, 그 전에 화면을 제대로 손보기로 했습니다. 대표님이 직접 써 보고 남긴 피드백을 받아 하루에만 여러 차례 고쳐 나갔고, 결국 첫 화면부터 지도·비교·보고서·AI 질의까지 거의 모든 화면을 다시 짰습니다. 이번 주에 그 개편판을 운영 서버에 올려 danmap.co.kr 에서 바로 쓸 수 있게 됐습니다.

🎯 이 프로젝트는 무엇인가

DanMap 은 해양·기상 예측 자료를 다루는 사람을 위한 웹 서비스입니다. 가지고 있는 예측 자료 파일을 올리면 바다 지도 위에 그려 주고, 예측과 실제 관측을 나란히 비교해 오차(RMSE)를 내고, 지도의 한 지점을 누르면 시간별 그래프를 보여 줍니다. 자연어로 바다 상태를 물어보면 자료를 근거로 답하고, 결과를 보고서 형식으로 내려받을 수도 있습니다. 저희가 내건 문구는 "분석 결과가 아니라, 분석이 가능한 상태의 데이터를 드립니다" 입니다.

원래는 해양 분야의 전문 용역으로 하던 일을, 누구나 자기 자료로 직접 써 볼 수 있는 웹 서비스 형태로 바꿔 가는 중입니다. 그래서 "전문가가 아니어도 자료를 올리면 바로 뭔가를 볼 수 있어야 한다"는 것이 이번 개편의 가장 큰 기준이었습니다.

🛠️ 이번 주 뭐가 바뀌었나

이번 개편에서 실제로 손본 것들입니다.

• 첫 화면을 비웠습니다. 가짜 예제를 그려 주던 것을 없애고, 빈 바다 지도와 "예측 자료를 올려 보세요" 카드만 남겼습니다.
• 로그인 없이 브라우저당 세 번까지 자료를 올려 볼 수 있게 했습니다. 처음 온 사람이 가입 전에 먼저 써 볼 수 있도록요.
• 탭 구조를 없앴습니다. 왼쪽에 올린 자료 목록, 오른쪽에 비교·보고서·내려받기·지점 그래프 작업 창, 아래에 AI 입력창을 상시 두는 한 화면으로 정리했습니다.
• 지도의 한 점을 누르면 그 지점의 시간별 그래프가 뜨고, 자료를 두 개 올리면 두 모델을 좌우로 비교하거나 예측과 관측의 오차를 계산합니다.
• 지도에 한글 지명 층을 넣었습니다. 동해·독도·울릉도·이어도가 제대로 나오도록 바꿨고, 등치선은 확대해도 깨지지 않게 벡터로 그리고 색도 더 또렷하게 바꿨습니다.
• AI 질의를 지도와 한 화면에 합쳐, 답의 근거가 되는 지점들이 지도 위에 함께 표시되도록 했습니다. 보고서는 PDF·문서·웹 등 여러 형식으로 내려받을 수 있습니다.

📸 화면으로 보는 변화

아래는 개편한 웹의 실제 공개 화면입니다. 자료를 올리기 전의 첫 화면, 사용법 안내, 현재 게시된 요금 안내 순서입니다. 자료를 업로드해 분석한 결과 화면은 이번 캡처에 포함하지 않았습니다.

💭 만들면서 느낀 점

가장 크게 배운 건 "직접 끝까지 써 보라"는 말이었습니다. 처음 온 사람처럼 안내부터 올리기·그래프·비교·보고서·AI 질의까지 쭉 돌려 보니, 시각을 넘길 때마다 확대가 풀리거나 같은 색이 자료마다 다른 값을 가리키는 식의 불편이 줄줄이 나왔습니다. 혼자 만들다 보면 "되는 것"에서 멈추기 쉬운데, 쓰는 사람 눈으로 보면 "되지만 불편한 것"이 훨씬 많더군요. 운영에 올리기 전 로컬에서 수십 항목을 매번 다시 시험하는 습관, 그리고 아직 준비 안 된 기능은 "준비 중"이라고 정직하게 적는 원칙은 이번에도 지켰습니다.

🔗 직접 써보기

개편한 화면은 아래에서 바로 확인하실 수 있습니다. 로그인 없이도 세 번까지 자료를 올려 볼 수 있으니, 가지고 계신 예측 자료로 한 번 돌려 보셔도 좋습니다. DanMap 바로가기