개요

픽블엽 바로가기
피크민 블룸이란 게임을 아시나요?
피크민 블룸은 포켓몬고와 같은 AR기반 게임입니다!
이 게임의 컨텐츠 중 하나는 엽서(이미지)를 얻어서 게임 친구들와 교환을 하는 것 인데 예쁜 엽서, 못난엽서(일명 똥엽서)가 있어서 많은 유저들이 예쁜엽서를 얻으려고 노력을 많이 하고 있습니다.

때문에 현실에서 사는 곳, 직장 등의 위치에 예쁜 엽서가 없으면 GPS조작으로 타지에 엽서를 얻어오기도 하는데, 이 때 엽서의 정보가 공식적으론 없어서 일반 유저들이 좌표를 공유하는 수 밖에 없습니다.

그래서 엽서의 이미지와 좌표를 유저들에게 얻어서 지도에 보여주는 픽블엽 프로젝트를 만들어 봤습니다!

프로젝트

미리보기

사용 기술 스택

• Backend: Java Spring Boot
• Frontend: Thymeleaf, JS
• DB: MySQL
• Infra: AWS EC2(t2.micro), S3, CloudWatch
• CI/CD: GitHub Actions
• 지도 시각화: OpenLayers

프로젝트 구조

1. AWS 프리티어 요금제를 사용중이라 ec2 한대에 NginX와 어플리케이션 서버를 같이 사용했습니다.
2. 이미지는 S3를 통해 저장하고 URL를 이용해서 불러옵니다.
3. 로그는 CloudWatch사용 했습니다.

프로젝트 기능

• 사용자로부터 엽서 이미지 + 위도/경도 좌표를 입력받아 저장
• 지도에는 엽서 아이콘이 표시되며, 3가지 타입을 구분
  • 🍄 버섯 엽서
  • 🌸 빅플라워 엽서
  • 🧭 탐험 엽서
• 지도는 OpenLayers 기반으로 구현되었고,
  일정 거리 이상에서는 클러스터링 처리로 성능과 가시성 확보

앞으로의 계획

엽서 조회가 주된 목적이라 많은 기능을 상정하고 만든 프로젝트는 아닙니다.
때문에 업데이트 방향성은 엽서 데이터의 정확성을 높이는 방향으로 할 것 같습니다.