Best Weather

* 이미지를 클릭하여 확대하실 수 있습니다.

프로젝트 소개

• 제작 인원: 2명 (개발 1명, 디자인 1명)
• 제작 기간: 2021.07 — 2021.12

특정 기간을 목표로 잡아 기술을 이해하고 최대한 완성도를 높이는 챌린지 형식의 프로젝트입니다. Vue 2에서 3으로 올라가며 새롭게 추가된 Composition API를 실제로 적용해보기 위해 시작했고, 프론트엔드뿐 아니라 Docker·Prisma·MySQL을 활용한 서버 구축까지 풀스택으로 확장했습니다.

주요 구현

Vue 3 Composition API

기존 Options API에서 Composition API로 전환하며 로직 재사용성과 코드 구조를 개선했습니다. 컴포넌트 간 공통 로직을 composable 함수로 분리하여, 위치 조회·기상 데이터 가공 등의 로직을 여러 화면에서 재사용할 수 있도록 설계했습니다.

백엔드 인프라 구축

• Docker: 개발 환경을 컨테이너로 구성하여 로컬과 서버 간 환경 차이 문제를 해결
• Prisma + MySQL: 기상 정보를 가공·저장하기 위한 데이터 모델을 Prisma ORM으로 설계하고, MySQL에 좌표 정보를 포함한 지역 데이터를 구축

위치 기반 기상 정보

브라우저의 Geolocation API로 사용자의 현재 위치를 얻고, 데이터베이스에 저장된 좌표 정보와 비교하여 가장 가까운 지역을 계산합니다. 이를 통해 사용자가 별도 입력 없이 접속만으로 현재 위치의 기상 정보를 바로 확인할 수 있도록 구현했습니다.

복수 기상 API 비교

기상청 공공데이터뿐만 아니라 외부 기상 정보 API를 함께 호출하여, 여러 제공사의 예보를 한 화면에서 비교할 수 있도록 했습니다. 하나의 기상 정보에만 의존하지 않고 교차 확인할 수 있다는 점이 이 서비스의 핵심 차별점이었습니다.

사용자 관점 UX 설계

주변 지인들과 여러 사람의 설문을 통해 기상 정보 이용 시 가장 자주 확인하는 항목을 조사했습니다. 그 결과를 반영하여 현재 날씨와 당일 최저/최고 기온을 가장 크게 배치하고, 습도·풍속·시간별 예보·주간 예보 순으로 정보를 구성했습니다.

배운 점

• Composition API를 통해 Vue의 로직 재사용 패턴을 이해하고, 컴포넌트 설계 방식의 변화를 체감했습니다.
• Docker 기반의 개발 환경 구축과 Prisma ORM을 활용한 데이터 모델링 경험을 통해 백엔드·인프라에 대한 기초적인 이해도를 높였습니다.
• 실제 사용자 설문을 바탕으로 UI를 구성하며, 기능 구현과 사용자 경험 사이의 균형을 고민하는 계기가 되었습니다.

지금 돌아보면

당시에는 Docker와 Prisma를 처음 다루며 “서버를 직접 띄워본다”는 것 자체에 의미가 있었지만, 지금이라면 컨테이너 오케스트레이션, 환경별 설정 분리, 모니터링까지 고려하는 방향으로 접근할 것입니다. 이 프로젝트에서의 인프라 경험은 이후 실무에서 AWS 인프라 최적화와 비용 절감 업무를 수행할 때 기반이 되었습니다. 개인 프로젝트에서의 인프라 고민이 실무의 대규모 비용 절감으로 이어진 출발점이었습니다.