멋쟁이 사자처럼 인하대학교 12기로 활동하면서 진행한 해커톤에 대한 회고록이다.
멋쟁이 사자처럼 인하대학교 12기 교내 해커톤 '썸머톤'
프로젝트 주제
주제는 자율이었지만, 우리 팀은 사회적 약자를 타겟으로 겨냥하여 서비스를 고안하였다.
각 팀원들이 아이디어를 하나씩 생각해오고 회의를 통해 최종적으로 주제를 선정한 결과,
디지털 격차로 인해 택시를 부르기 어려워 하는 사회적 취약계층을 위한 간편한 택시 호출 서비스(SAFE-T)를 개발하기로 결정했다.
주제 선정 배경
- 늘어나는 취약 계층의 비율
- 현재 우리나라는 취약계층이라 부를수 있는 노인 및 장애인 등의 인구가 급격히 증가하고 있고, 2070년이 되면 취약계층의 비율이 50% 이상이 될 것으로 예측된다. </span >경제 양극화로 인해 취약계층은 계속 증가할 것으로 보인다.</span >
- 통계에 따르면 2021 년도 기준 일반 국민과 취약계층의 정보생산 및 공유 활동에선 약 14% 가량의 차이를 보였다.
- [경남대학보] 취약계층, 우리 사회의 문제
- 이로 인한 디지털 격차의 심화
- 특히 취약계층은 스마트폰 사용 미숙, 화면과 조작 방법의 복잡함으로 인해 디지털 격차가 심화되고 있다.
- 택시 호출 앱 사용이 어려워 즉석에서 택시를 잡으시는 어르신들은 아무리 기다려도 예약택시밖에 보이지 않아서 불편을 겪기도 한다.
- 석재은 한림대 사회복지학과 교수는 고령자 대상 디지털 교육도 당연히 필요하지만 더 중요한 건 앱이나 기기가 고령자 편의적으로 바뀌어야 한다고 강조했다.
- [연합뉴스] '앱은 쓸 줄 몰라'…뙤약볕 아래 손짓으로 택시 잡는 노인들
프로젝트 일정
~ 6월 25일: 주제 선정 회의 및 플로우 차트 그리기
~ 6월 30일: 피그마 프로토타입 작업, DB 설계 및 API 명세서 작성
~ 7월 5일: 개발 및 배포
이렇게 대충 기획 1주, 개발 1주 총 2주 정도 소요했다.
개발 기간 동안은 정말 밥 먹고 개발하고 잠들고.. 이것만 반복했다.
기획 및 아키텍처 디자인
애석하게도 우리 팀은 Figma를 사용해본 팀원이 한 명도 없었다.
찾아보니 유튜브에 피그마 기초 강의가 많아서 1시간 정도 대충 본 다음에 디자인을 시작했다.
평소 디자인하는 것을 좋아하기도 하고, PPT 발표 자료를 만들어본 경험이 많아 사용이 어렵진 않았다.
플로우차트
회의 당시 draw.io로 그렸으나, 디자인이 마음에 들지 않아 그대로 피그마로 옮겼다.
조건에 따른 분기점을 강조하기 위해 보라색 색상을 사용해 나타냈다. 또 Yes는 파란색, No는 빨간색 계열 색상의 화살표를 사용하여 프로세스를 더 이해하기 쉽게 만들기 위해 노력했다.
직접 그려본 건 처음이었는데 생각보다 재밌었음!
뭔가 알고리즘 공부하는 기분? 부족한 실력으로 열심히 그렸다..ㅎㅎ
와이어프레임
여름방학 기간이다보니 계절학기 및 여행 일정으로 인해 다함께 모여서 회의하기 어려운 부분이 있었다.
따라서 시간이 되는 팀원들만 그냥 피그마의 보드 기능을 이용해 의견을 주고 받았다.
열렬한 회의 기록이다😊 난 방학 기간에 따로 일정이 없어서 열심히 참여할 수 있었다.
피그마 자체에 댓글 기능이 있어서 원하는 부분에 딱 코멘트를 달 수 있어 아주 편리했다!
프로토타입
아래 링크에서 볼 수 있다:)
Figma
Created with Figma
www.figma.com
기술 스택
React 주요 라이브러리
- styled-components: 컴포넌트 스타일링에 사용
- axios: 백엔드와 GET, POST하여 데이터 주고 받기 위해 사용
- buffer, path-browserify, os-browserify: webpack 모듈 버전 맞추기 위해 사용
- react-modal: 주소지 추가, 보호자 추가, 택시 호출 취소할 때 모달 창 사용
- xml-js: XML 데이터를 JSON으로 변환
외부 API
카카오 디벨로퍼스를 중점적으로 활용하였다.
- Daum 우편번호 서비스: 회원가입 시 도로명 주소 검색 가능
- Kakao Rest API: 위도,경도와 도로명주소 양방향 변환
- Kakao 지도 API: 출발지 → 목적지 길찾기, 경로 표시
- Kakao 모빌리티 API: 다중 출발지 길찾기 API를 활용해 여러 택시들 중 가까운 택시를 배차
주요 기능
기본적인 로그인 및 회원가입 기능을 포함하여 카카오 지도 API를 기반으로 택시를 호출하고 배차한다.
자세한 기능 설명 및 코드는 프로젝트 깃허브 리드미를 참고!
기존 서비스와 뭐가 다른데?
우리는 어떻게 취약계층에게 편의성을 제공할 수 있을까를 고민했다.
누구나 쉽게 서비스를 이용할 수 있게 하려면 현재 존재하는 택시 서비스와 차별화되어야 한다고 생각했다.
일단 미리 주소지를 저장해두고 바로 클릭해 택시를 호출하면 편할 것 같다는 의견이 있었다.
실제 서비스라고 가정한다면 병원이나 요양원, 공공장소 등에 QR을 붙여놓고 카메라로 스캔만 하면 해당 위치에서 바로 택시를 호출할 수 있게 해야한다고 생각했다.
위 두 가지 의견을 기반으로, QR 스캔 호출과 주소지 클릭 호출 기능을 구현했다.
또 택시를 호출하는 것 뿐만 아니라, 위급 상황 시 버튼만 누르면 해당 위치에서 바로 보호자에게 알림이 가는 기능도 구현했다.
알림은 처음엔 문자 메시지를 생각했으나 실질적인 구현의 어려움으로 인해 이메일로 변경했다...!
발표 및 해커톤 마무리
해커톤 당일은 무박 2일로 진행되어서 팀원들끼리 모여 마지막 점검도 하고 발표 자료도 준비했다.
커피를 4샷 이상 마셨더니 생각보다 버틸만했다. 그런데 아침쯤 되어가니까 정신이 혼미해지긴 했음.🤣
우리 팀은 개발 및 배포가 끝난 상태여서 솔직히 엄청 힘들진 않았다!
아침 발표 시간까지 최대한 발표자료를 가다듬고 예상 질문 리스트도 선정했다.
처음에 발표 자료 만들 때는 별 거 없었는데 이것 저것 추가하다보니 30장 정도나 되었다.
줄일까 고민했는데, 사전에 운영진님께 여쭤본 결과 그냥 준비한만큼 전부 보여달라고 하셔서 그대로 가기로 결정!
결과는 1등!! 일주일동안 거의 밤을 새다시피 작업했는데 너무 보람찬 결과였다.
다른 팀들도 열심히 작업하고 발표도 너무 잘해서 듣는 재미가 있었다.
그래도 우리 팀이 제일 열심히 준비해오고 완벽히 배포까지 마쳐서 수상할 수 있었던 것 같다🙂
배운 점과 실천한 부분 (Keep)
첫 해커톤, 첫 팀 프로젝트이기에 협업 과정 그 자체를 배우는데 의미가 있었다.
그 중에서도 내가 중점적으로 기여하여 개발 과정에 참여한 부분에 대해 말해보자면 다음과 같다.
✅ Figma로 기획하고 디자인하기
학교와 기수마다 다른 것으로 알고있는데, 이번 우리 학교멋사 12기에서는 디자인 팀원이 따로 없었기에 </span >더욱 프론트엔드의 역할이 중요했다.
여태 해왔던 개발 단계에서는 이렇게 세세한 디자인 단계 없이 개발하면서 그때 그때 디자인을 수정해왔지만,
규모가 좀 있는 프로젝트에서는 여러 페이지와 컴포넌트를 만들고 조합해야 하는 경우가 많아져 px 단위 하나까지 신경써서 디자인해야만 했다.
기획 단계애서 피그마로 작업해 둔 프로토타입에서 Dev Mode를 켜서 참고하여 효율적으로 디자인할 수 있었다.
이것이 개발 기간이 촉박했음에도 불구하고 다른 팀들보다 작업을 더 빠르게 끝낼 수 있었던 이유이다.
✅ axios를 이용해 API 연결 및 모듈화
교육 세션 마지막 과제에서 axios를 사용해보긴 했지만 거의 따라치는 수준이라 제대로 사용할 줄 안다고 말하기는 어려웠다. 일단 내가 프론트 팀 개발 과정 자체를 이끌어야 하는 상황이어서, axios 연결도 자연스럽게 맡게 되었다.
따로 강의나 자료를 찾아보지 않고 코드를 작성하며 배우다보니 하루종일 매달리기도 했지만 백엔드 팀원들이 작성해준 API 명세서가 워낙 정교해서 도움이 많이 되었다. 처음에는 정말 어려웠따...ㅎ 요청 메소드 url에 따라 데이터 형식도 설정하고, Swagger에서 테스트도 하면서 원하는 방식으로 데이터를 가공하는 과정이 나름 재미있었다.
특히 카카오 디벨로퍼스 API를 사용하는데 굉장히 많은 애를 먹었다! 일단 예시 코드가 html이어서 React 코드로 바꾸는 것도 일이었다. 해커톤 당일에는 갑자기 지도 이미지가 뜨지 않아 당황했는데 알고보니 배포한 도메인 주소를 디벨로퍼스 사이트에 추가하지 않아서 발생한 에러였음.. 저거 발견한 것도 내가 그냥 지나가면서 "혹시 저기에 도메인이 없어서 그런가?"하고 말했는데 그게 원인이었다😂
그리고 코드에서 계속 fetch하여 가져오기 보다는 폴더를 하나 파서 함수로 모듈화해서 사용하는 방법을 도입했다.
개발하다보니 같은 API를 재사용하는 일이 많았는데 그때마다 작성하니 불편했기 때문. 깔끔하게 작성하지는 못했지만 이렇게 분리하는 방법을 사용한 것만으로도 프로세스를 이해하는데 많은 도움이 되었다.
✅ JWT 토큰 인증에 대한 이해
백엔드에서 JSON Web Token 인증 방식을 사용하여 로그인을 구현한다고 했을 때, </span >처음에는 어떻게 이걸 처리해야할지 굉장히 난감했다.
일단 인증 관련 지식이 아예 0이어서 아래 링크를 통해 공부를 하고 코드를 작성하기 시작했다.
서버에 요청을 보낼때 Authorization 헤더에 Access Token을 함께 담아서 보내야한다는 점이 핵심이었다.
이를 참고하여 로그인까지 성공했으나, 로그인 이후 토큰이 있어야만 이용할 수 있는 API를 이용하려면 추가적으로 인터셉터 요청 처리가 필요함을 알게되어 나중에 로컬 스토리지에 저장하는 부분도 추가했다.
이와 관련된 코드는 apis/ authApi.js 파일에서 확인할 수 있다.
✅ 컴포넌트 구조 설계
컴포넌트 설계 시 SOLID 원칙을 지키기 위해 노력했다. 특히 주목한 부분은 아래 2개.
- 단일 책임 원칙: 하나의 컴포넌트는 하나의 역할을 하도록 하자.
- 의존성 역전 원칙: 변경이 생겼을 때 다른 컴포넌트에 영향을 주지 않도록 해야 한다.
그래서 최대한 간단하고 작은 단위부터 컴포넌트로 만들었다. ex. display-flex 중 direction을 간단하게 적용하기 위한 Flex 컴포넌트, 텍스트 입력을 위한 글씨 박스 Typo 컴포넌트, </span >입력 라벨과 필드를 한꺼번에 처리하기 위한 Input 컴포넌트 등..</span ></i >
더 발전시킬 부분이 있다면? (Problem & Try)
✅ 현실적인 기능 구현
특히 API를 이용하여 현재 위치를 받아오려고 시도했으나, 인천에서 현 위치를 불러옴에도 불구하고 미국으로 위치가 뜨는 등 오차가 너무 커서 그 부분은 보류했다. 현재는 위치를 고정해놓고 그 주변에 택시 목록을 만들어서 불러오므로 무조건 배차가 된다.
해당 프로젝트를 더 발전 시킨다면 다중 경유지 길찾기 API 등을 활용하여 택시 운전하는 기사님들도 서비스를 활용할 수 있도록 기사 입장에서 호출 수락하는 기능, 결제 기능 등이 있겠다. 해당 부분을 구현하기엔 우리가 아직 주니어 수준의 개발자들이고 시간이 너무 부족하여 과감히 포기했지만...ㅎ
✅ 코드 포매터의 부재
프론트엔드 개발 시 vscode로 모두 작업했는데, 서로의 Prettier 익스텐션 설정이 달라서 혼란이 생겼던 적이 있다. 정확히는 따옴표 관련인데, 큰따옴표와 작은 따옴표를 통일해서 쓰지 않았기 때문. 이런 사소한 설정도 통일하지 않아서 불편했던 것으로 보아 </span >다음에는 코드포매터를 통일하거나 미리 세팅하여 팀원들 간 동일한 환경에서 작업할 수 있도록 해야 겠다고 생각했다.
✅ 뒤늦은 레이아웃 리팩토링
해커톤 전날 급하게 프로젝트를 반응형으로 수정하게 되었다. 디자인 기획 시 아이폰 15 프로 기준으로 작업하는 바람에 급하게 모바일 환경을 고려하게 되었는데 알고보니 작은 핸드폰 사이즈로 맞추는 것이 유리했다.. 이 점을 뒤늦게 깨달아 레이아웃을 다 갈아 끼웠는데 정말 힘들었다.. 이건 기획 단계부터 반응형으로 생각하고 화면 사이즈에 따라 프로타입을 제대로 디자인하지 않아서 발생한 문제였기 때문에 다음부터는 꼭 레이아웃부터 작업하기로 결심했다!
Github
이렇게 우여곡절 끝에 완성한 첫번째 프로젝트인 SAFE-T!
아래에서 더 자세히 확인할 수 있으니 더 확인해보고 싶다면 아래로 이동😋
GitHub - likelion-inha-hackathon-2/Summerthon-FE: 빠르고 간편한 취약계층 특화 택시 호출 서비스, SAFE-T🚕
빠르고 간편한 취약계층 특화 택시 호출 서비스, SAFE-T🚕. Contribute to likelion-inha-hackathon-2/Summerthon-FE development by creating an account on GitHub.
github.com
회고록 작성을 위해 아래 링크의 내용을 참고했습니다.