[멋쟁이 사자처럼] 12기 중앙 해커톤 회고록

멋쟁이 사자처럼 대학 12기 중앙 해커톤 'GROWL TO WORLD'

프로젝트 주제

강아지와 함께 즐겁게 산책할 수 있도록 도그워커와 견주를 매칭시켜주는 플랫폼, 강쥐시그널

현대 사회에서 많은 견주들이 바쁜 일정을 이유로 강아지를 산책시키는 데 어려움을 겪는다. 이는 강아지의 신체적, 정신적 건강에 부정적인 영향을 미칠 수 있으며, 견주들은 강아지의 운동 부족에 대한 걱정과 불안을 느끼게 된다. 또한, 강아지와 함께 산책을 하고 싶은 사람들 중 일부는 보수를 목적으로 하는 도그워커와는 다른 형태로, 순수하게 강아지와의 교감을 원하는 경우도 존재한다.

강쥐시그널은 견주와 도그워커를 연결하는 플랫폼으로, 바쁜 생활 속에서도 강아지에게 충분한 운동을 제공하기 위해 만들어졌다. 단순히 강아지 산책을 돕는 것을 넘어, 강아지와 사람 모두에게 즐거운 시간을 제공하며, 사용자의 건강과 행복을 동시에 추구하는 산책의 새로운 접근 방식을 제시한다.

프로젝트 일정(기간)

2024.07.15 - 2024.08.03

아이디어 회의 | 07.15
기획, 피그마 작업 | 07.15 ~ 07.18
개발, 테스트 | 07.18 ~ 08.03

팀원 소개

멋쟁이 사자처럼 인하대학교 12기 중앙해커톤 1팀

팀 구성: 총 5명 (백엔드 팀원 2명, 프론트엔드 팀원 3명)

기획 및 아키텍처 디자인

아이디어 기획과 프로토타입 디자인은 각각 Notion과 Figma 툴을 이용했다.

모든 소통은 Slack을 기반으로 하고, 필요 시 오프라인 만남을 가졌다.

플로우차트

프로토타입 (Figma)

프로토타입은 용량 이슈로 인해 피그마 링크에서 더 자세히 확인 가능합니다.

기술 스택

주요 기능

사용자 위치 기반 지도

도그워커의 현재 위치를 기반으로 주변의 강아지 정보를 불러옵니다.
견주의 집 위치를 기반으로 강아지 정보를 생성합니다.
도그워커가 견주의 강아지와 산책 중일 때, 견주는 도그워커의 현재 위치를 원격으로 볼 수 있습니다.
도그워커가 이동한 경로가 지도에 표시되며, 이동 거리와 소모 칼로리가 계산됩니다.

실시간 채팅

도그워커가 지도에서 강아지의 정보를 확인하고, 견주와 채팅을 시작할 수 있습니다.
채팅방 안에서 날짜와 시간, 약속명을 설정하여 약속을 생성할 수 있습니다.
약속이 생성되면, 채팅방 목록에서 곧 다가오는 산책 약속을 확인할 수 있습니다.

다양한 재미 요소

다양한 업적을 달성하고, 칭호를 획득할 수 있습니다.
강아지와 산책하는 것만으로 챌린지를 달성하고, 재화를 획득할 수 있습니다.
획득한 재화는 물건 구매나 리뷰 작성 시 상대방에게 선물할 수 있습니다.
산책 기록 데이터를 통해 내가 얼마나 산책했는지 확인할 수 있습니다.

더 자세한 설명 및 사용 가이드는 프로젝트 깃허브 리드미를 참고해주세요!

프로젝트 홍보 및 시연 영상

영상에서 견주로 참여했습니다 많관부..ㅎㅎ

협업 규칙

Commit Convention

커밋 유형: #이슈번호 설명

ex) 
Feat: #2 회원정보 수정 api 구현
Design: #6 회원 정보 페이지 버튼 디자인 변경

Feat	새로운 기능을 추가할 경우
Fix	버그를 고친 경우
Design	CSS 등 사용자 UI 디자인 변경
Style	코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
Refactor	프로덕션 코드 리팩토링
Comment	필요한 주석 추가 및 변경
Docs	문서를 수정한 경우
Test	테스트 추가, 테스트 리팩토링(프로덕션 코드 변경 X)
Chore	빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X)
Rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
Remove	파일을 삭제하는 작업만 수행한 경우
!HOTFIX	급하게 치명적인 버그를 고쳐야하는 경우

Isuue Template

Issue 템플릿을 지정하여 코드에 대한 오류사항, 변경사항, 질의사항 등을 등록하고 관리함.

PR Template

해당 기술 블로그의 링크를 참조하여, PR 요청 템플릿을 지정했다.

이를 통해 연관된 이슈와 연결하여 문제를 효율적으로 해결하고 에러를 발견했다.

## #️⃣연관된 이슈

> #이슈번호 형식으로 작성

## 📝작업 내용

> 이번 PR에서 작업한 내용을 간략히 설명해주세요.
> 
## 💬리뷰 요구사항(선택)

> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요.

배운 점과 실천한 부분 (Keep)

✅ 보다 정교한 프로토타입 기획 및 디자인

이전 프로젝트에서 프로토타입 디자인 시 규격을 맞추지 않아 많은 어려움을 겪었던 경험이 있었다.

그때의 교훈을 바탕으로 이번 프로젝트에서는 디자인 단계부터 명확하게 프레임 규격을 iPhone SE 크기(375*667)에 맞춰 진행했다. 이 덕분에 반응형 웹 구현이 훨씬 수월해졌다.

또한 초기에는 레이아웃(Layout) 컴포넌트를 해당 규격에 맞춰 설계한 뒤, 해당 블로그 링크를 참고하여 먼저 피그마에서 기본적으로 레이아웃 그리드를 설정했다.

레이아웃을 설정한 이후, 필요한 페이지에 따라 재사용이 많은 컴포넌트들을 기획하고 개발을 진행했다. 덕분에 저번보다 훨씬 더 대규모의 프로젝트임에도 불구하고 비슷한 속도로 작업할 수 있었다.

✅ 폰트와 포맷팅에 대한 초기 설정

협업을 원활하게 진행하기 위해 .eslintignore, .prettierrc, eslint.config.mjs, settings.json 파일을 추가적으로 설정하여 코드 규칙을 통일했다. CSS 초기화는 reset.css로 처리하고, npx eslint --fix . 명령어로 eslint 포매팅을 자동화했다.

폰트는 프리텐다드(Pretendard)로 정의하고, 가중치별로 B, S, M, R, L을 사용해 명명했다.

색상은 기본적으로 컬러시스템을 미리 정의했다. 또한 :root(가상 선택자) 변수를 선언해 일관성 있게 사용하며, 필요 시 추가 가능하도록 설정했다.

이 설정들을 통해 다른 프엔 팀원들이 일관된 스타일을 유지하며 효율적으로 작업할 수 있도록 할 수 있었다.

✅ 웹소켓 실시간 통신에 대한 이해

MapStatus.jsx 파일에서는 웹소켓을 통해 실시간으로 방을 생성하여, 견주와 도그워커를 연결한다.

웹소켓은 처음 사용해보아서 많은 어려움과 시행착오가 있었다. 백엔드 팀원들이 알려준 참고 자료들을 통해 실시간 통신이 웹소켓에서 어떻게 이루어지고, 방을 어떻게 생성하고 나가는 것까지 처리하는 지 따로 학습할 수 있었다.

먼저 생성된 방에서는 현재 견주가 보유한 강아지 중 산책 중인 강아지가 있다면 도그워커, 즉 강아지와 함께 있는 산책자의 위치(위도, 경도 정보)를 일정시간마다 견주에게 보낸다. 견주는 이를 통해 현재 내 강아지가 어디에 있는지 쉽게 파악할 수 있도록 한다.

구현한 로직을 간단히 설명하면 다음과 같다.

방 생성 - 웹소켓 연결

아래는 wss://<백엔드 도메인>/ws/walkroom/{roomId}/locations을 통해 웹소켓 서버와 연결하는 부분이다.

const setUpWebSocket = (roomId) => {
  const newSocket = new WebSocket(
    "wss://" + process.env.REACT_APP_BACKEND_DOMAIN + `/ws/walkroom/${roomId}/locations`,
  );

selectedDog이 선택되었고, 그 강아지가 다른 사용자(산책자)와 산책 중이라면 (selectedDog.walk_user_id !== ownerId), createRoom 함수를 호출한다.

createRoom(dogId) 함수에서는 먼저 이전에 열린 웹소켓을 종료하고, 새로운 방을 생성한다.

웹소켓 이벤트 핸들러

newSocket.onmessage = (e) => {
  let data = JSON.parse(e.data);
  console.log("소켓에서 받아온 현재 강아지 위치:", data);

  if (data.latitude && data.longitude) {
    setCurrentLocation({
      latitude: data.latitude,
      longitude: data.longitude,
    });
    console.log("setCurrentLocation 수정");
  }
};

웹소켓이 연결되면 이벤트 핸들러가 실행된다. onmessage에서는 서버에서 메시지가 도착하면 이를 파싱하여 강아지의 위치 데이터(latitude, longitude)를 받아와 이를 setCurrentLocation 함수를 통해 상태로 업데이트한다.

위치에 따라 MapUser(지도)에 렌더링

{currentLocation ? (
  <MapUser
    latitude={currentLocation.latitude}
    longitude={currentLocation.longitude}
    width="300px"
    height="300px"
    dogId={selectedDog.dog_id}
  />
) : (
  <p>위치를 불러오는 중...</p>
)}

위의 경우처럼 견주에게 currentLocation의 값을 사용하여 만약 현재 위치값이 존재한다면 MapUser 컴포넌트에 강아지의 위치를 표시한다.

✅ 적극적으로 협업에 참여해 프론트엔드 팀의 실질적 리더 역할 수행

프론트엔드 팀의 기획, 개발 전반적으로 관리하고 문서 정리를 맡았다. 아무래도 리액트를 다뤄본 경험이 가장 많은 내가 어느정도 주도할 수 밖에 없어서 당연히 내가 맡아야겠다고 생각했다.

또한 배포된 이후 변경된 환경변수에 따라 .env 파일을 관리하고 수정하는 부분에 대해 왜 이 환경변수를 Github에 바로 업로드하면 안되는지에 대해 모르는 팀원들이 있었다. 보안 상의 이유라는 것을 알려주고 설정 방법도 차근차근 설명하여 팀원들이 프로젝트 보안에 대해 더 제대로 인식할 수 있도록 했다.

그 밖에도 추가적으로 공부를 원하는 팀원들이 있을 때에는, 온라인 슬랙 채팅이나 오프라인 페어 프로그래밍을 통해 적극적으로 옆에서 기본적인 세팅이나 에러 해결을 도왔다.

더 발전시킬 부분(Problems & Try)

✅ 완벽하지 못한 기능 구현

실시간 위치 추적 기능에서, 카카오맵 API를 사용하여 마커를 지도에 표시하는 부분에서 문제가 발생했다. 자바스크립트와 REST API를 조합해서 사용했는데, 마커와 지도가 겹칠 경우 움직임이 제대로 나타나지 않거나, 짧은 움직임에도 마커가 무한히 나타나 화면을 뒤덮는 버그가 있었다.

해커톤 마지막날까지도 이 문제를 계속 해결하려 시도했으나, 촬영된 영상에서는 여전히 고쳐지지 않은 상태여서 아쉬움이 남았다. ~~사실 당일 밤을 새면서라도 해결하고 싶었는데 현장 와이파이 상황이 너무나도 좋지 않았다 ㅎㅎ..~~

또한 우리 프로젝트에서는 실시간으로 위치를 갱신하기 위해 3초마다 geolocation API를 호출하도록 설계했지만, 네트워크 지연이나 기타 환경적 요인으로 인해 갑자기 30초에 10번 이상 갑자기 위치를 마구마구 받아오는 경우가 발생했다.. 이로 인해 실시간 위치 추적이 불안정하게 동작하는 경우가 다소 있었다. 성능 개선을 위해 API 설계를 좀 더 고민해보면 좋았을 것 같은데 시간이 부족해서 고치치 못한 점이 아쉽다.

✅ 커스텀 훅과 로직의 비효율적인 분리

초기 계획으로 hooks 폴더를 따로 만들었음에도 불구하고, 실제로 기능들이 제대로 분리되지 않았다. 플랫폼 서비스 기능 구현에 집중하다 보니, 훅과 로직을 처음부터 완벽하게 분리하지 못한 점이 아쉬웠다. 아무래도 주니어 개발자들이 협업하는 환경에서 여러 기능을 구현해야 했기 때문에, 자연스럽게 로직과 함수가 엉켜버린 부분이 많았다. 이럴 거면 hooks 폴더를 만든 의미가 없었던 것 같다. 다음 프로젝트에서는 초기 단계에서부터 로직과 UI를 명확히 분리하여, 코드 유지보수성을 높이고 협업 효율성을 개선하고 싶다.

✅ 비일관적인 디자인

디자인 요소에서 여전히 일관성이 부족했다. 특히 margin과 padding 값이 일정하지 않아 레이아웃이 어수선하게 느껴졌다. reset.css를 처음 적용했는데, 이미 정의되어 있는 템플릿을 그대로 적용했더니 일부분 적용되지 않는 부분이 있어 태그마다 리셋이 제대로 되지 않았다. 이후 페이지마다 디자인을 최대한 일관되게 수정했는데 이는 매우 비효율적인 작업이었다.

따라서 작은 버튼이나 박스같은 요소들이더라도 margin, padding 등을 팀 내에서 미리 정의하고 일관되게 사용하는 것이 중요하다는 점을 깨달았다. 또한 이를 해결하기 위해서는 프론트엔드 팀끼리 사용하는 디자인 템플릿을 미리 정해두고 사용하는 것이 훨씬 효율적일 것 같다고 생각했다.

Github Link

GitHub - likelion-inha-hackathon-2/Meong-Signal-FE: 더 건강하개, 더 재미있개! 당신을 위한 귀여운 산책메이

더 건강하개, 더 재미있개! 당신을 위한 귀여운 산책메이트, 강쥐시그널🐶. Contribute to likelion-inha-hackathon-2/Meong-Signal-FE development by creating an account on GitHub.

github.com

Notion Link

[멋쟁이 사자처럼 중앙 해커톤] 강쥐시그널 | Notion

✅ 멋쟁이 사자처럼 중앙 해커톤

abyss-2.notion.site

돌아보면서 느낀 점은 수상 여부와 관계없이 중앙 해커톤에 참여했던 것만으로도 매우 큰 도전이었다. 멋사를 통해 두달간 프로젝트에 몰입할 기회를 가지게 되어서 너무 감사했고, 좋은 팀원들을 만나 프로젝트를 진행할 수 있었기에 더 감사했다. 여담이지만 해커톤 부스에서 받은 체크오 아르타민이었나 그거 맛있었다.. 추천 ㅎㅎ

또한 훌륭한 팀원들과 프로젝트를 할 수 있음에 감사했다.

한달동안 온라인과 오프라인을 오가며 거의 함께 생활했다.

이 과정에서 의미있고 가치있는 피드백을 받으며 서로 성장할 수 있었다.

졸업하며 멋사 대학 12기는 떠나게되었지만, 좋은 사람들과 재밌는 경험들을 했다...!

인하대 아기사자님들 그동안 감사했습니다!!

저작자표시 비영리 동일조건

'Activities > 멋쟁이 사자처럼' 카테고리의 다른 글

[멋쟁이 사자처럼] 교내 해커톤 '썸머톤' 회고록 (0)	2024.09.01

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`