MediPrice

문제

무엇을 만들었나

이렇게 정했습니다

• 평균과 비교해서 보여줍니다

  가격만 보면 싼지 비싼지 알기 어려워서,
  같은 종류 병원의 평균보다 몇 % 싸고 비싼지 함께 적었습니다.

• 거리와 가격, 무엇이 중요한지 직접 고릅니다

  가까운 곳이 좋은 사람도, 싼 곳이 좋은 사람도 있어서
  둘의 비중을 슬라이더로 조절할 수 있게 했습니다.

• 데이터의 한계를 숨기지 않습니다

  2025년 공개 자료 기준이라는 것과
  수록된 지역을 검색 화면에 그대로 적어 두었습니다.

기초부터

제가 맡은 화면

• 핀을 묶어서 보여줍니다

  병원이 많은 곳은 가까운 핀끼리 묶고, 확대하면 풀어서 보여줍니다.
  병원이 몰려 있어도 지도가 버벅이지 않습니다.

• 위치를 허용하지 않아도 됩니다

  위치 권한을 거절해도
  검색은 그대로 쓸 수 있습니다.

• 서버 요청은 한 곳에서 처리합니다

  모든 요청을 하나의 함수로 보내서,
  오류가 나도 화면마다 다르게 처리되지 않게 했습니다.

• 다크 모드를 직접 만들었습니다

  색을 CSS 변수로 정리하고 Tailwind 색을 그 변수에 다시 연결해서,
  화면 코드를 고치지 않고도 테마가 바뀝니다.

• 단점도 알고 골랐습니다

  Tailwind를 빌드 없이 CDN으로 불러와서 첫 화면이 조금 늦어질 수 있습니다.
  수업 과제 범위에서는 구조를 단순하게 두는 쪽이 낫다고 판단했습니다.

함께 만들며 배운 것

• 주고받을 형식부터 정했습니다

  화면과 서버가 주고받을 데이터 형식을 먼저 정하고,
  서버가 완성되기 전에는 가짜 데이터로 화면을 먼저 만들었습니다.
  서로 기다리지 않고 동시에 작업할 수 있었습니다.

• 브랜치를 나누고 서로 코드를 봤습니다

  기능마다 Git 브랜치를 따로 만들고, 합치기 전에 서로 코드를 확인했습니다.
  충돌이 나면 어느 쪽을 살릴지 함께 정했고, 작게 자주 합칠수록 충돌이 줄어든다는 걸 배웠습니다.

• 역할과 일정을 나눴습니다

  누가 무엇을 언제까지 하는지 정해 두고, 진행 상황을 자주 공유했습니다.
  막힌 곳을 일찍 말하는 게 일정을 지키는 가장 쉬운 방법이었습니다.

• 규칙을 먼저 맞췄습니다

  이름 짓는 방법, 화면 조각을 나누는 기준, 색과 간격 같은 디자인 규칙을 먼저 정했습니다.
  네 명이 만들어도 한 사람이 만든 것처럼 보이게 하기 위해서입니다.

빠르고 안전하게

• 데이터를 미리 저장해 둡니다

  검색할 때마다 공공 API를 부르지 않고 DB에 저장해 두어,
  결과가 바로 나옵니다.

• 서버를 밖에 드러내지 않았습니다

  Cloudflare Tunnel로만 연결해서
  서버의 IP와 포트를 외부에 열어 두지 않습니다.

• 이상한 요청은 막습니다

  검색어와 요청 값을 검사해서
  SQL 인젝션 같은 공격을 막습니다.

운영

• 개인정보처리방침을 직접 썼습니다

  무엇을 받고, 얼마나 보관하고, 언제 지우는지
  템플릿을 베끼지 않고 실제 동작에 맞춰 정리했습니다.

• 멈춰도 스스로 돌아옵니다

  오류는 기록으로 남기고,
  서버가 멈추면 자동으로 다시 켜지게 했습니다.

• 데이터는 따로 백업합니다

  서버에 문제가 생겨도 되돌릴 수 있게
  데이터를 주기적으로 백업합니다.

기술