Github : https://github.com/wq0212/campus-compass
Site : http://campuscompass.site/
어느날 인스타를 보던 중 본교 아트앤테크놀로지(이하 아텍) 학과에서 해커톤이 개최된 공고를 확인했다. 비슷한 기획이 컴공 학생회 하면서도 말로만 나온적이 있었지만, 구체화 된적은 없었다. (게시물 사용 허락과 해커톤 기획 등을 해주신 아텍 학생회 관계자분들께 다시 한번 감사드린다.)
본인도 웹개발에 관심있고, 최근 웹보안 공부하면서 틈틈이 생각나는 프로젝트 아이디어는 뽑아둔게 몇개 있어서 참여를 결심했다. 결정적으로 대부분 혼자서 개발하거나, 프론트/백엔드 정도로만 나눠서 개발해본적이 있었기에 디자인, PM을 끼고 팀 프로젝트를 경험해보고 싶기도 했다.
직전 방학에 같이 웹 프로젝트를 했던, 서인몬을 섭외했고 팀을 구하는 오픈톡방에서 디자인과 기획 담당해주실 아텍분을 두분 더 섭외했다.
Team
본인 : Back-End(메인), Front-End(서브)
서인 : Front-End(메인), Back-End(서브)
아텍A : UI/UX, 프로토타입, Front-End(서브)
아텍B : UI/UX, 프로토타입, 아이디어, 리서치
타임라인은 다음과 같았다.
12/3 22시 - Gather Town에서 참가자들이 모였고, 주최측에서 해커톤 진행과 주제에 대해서 소개했다.
(개인적으로 게더타운을 활용하는 아이디어가 너무 좋았던거 같다)
주제는 '학교생활과 관련된 문제 해결'이었다. 30분가량 아이디어 회의가 있었고, 여러 아이디어들이 오갔다. 본인은 생각해두었던 웹 프로젝트 계획 중 주제와 연관성이 높은 '학교 주변 맛집 지도 및 리뷰 서비스'를 제시했는데, 주제와 100% 맞아 떨어지는 것은 아니였기에 아이디어 브리핑 과정에서 반려되었다.(다음에 개인 프로젝트로 트라이 해보는걸로...) 학교에 행정적으로 이슈가 있을 때, 특정 부서에 전화했을 때 계속 전화가 돌려지는 문제를 해결하기 위해 키워드에 대해 전화번호 recommend 기능과 FAQ, Q&A 기능 등을 구현하기로 했다. 접근성, 편의성을 위해 별도의 auth기능은 구현하지 않았다.
12/3 23시 - 각 팀에서 한명씩 나와서 본인팀 주제에 대해 발표를 하였고, 팀마다 개인참가자를 영입할 수 있었기에 개인 참가자들의 피칭을 했으며, 우리팀에서는 이미 각자 포지션이 정해졌기에 추가 영입은 하지 않았고, 다음날 오전 9시에 대면으로 만나기로 했다.
12/4 0시 - 본인은 내일 바로 협업 작업이 들어갈 수 있도록 기존에 사용하던 서버에 NodeJS 기본 세팅과 포트, DB, Git 설정 등을 했고, 도메인을 구매해서 아파치로 연결까지 시켜줬다.
12/4 9시 - 랩실에 모여서 아이디어 구체화와 개발 순서 등을 정했다. 특히 DB가 중요한 프로젝트였기에 DB를 어떻게 짤지 회의하고, 디자인도 다같이 가볍게 회의하면서 구체적으로 세부 개발 계획을 세웠다.
12/4 9시반 - 먼저 회의한것 바탕으로 DB부터 짰다. table name과 columns name을 간략히 적어서 프론트, 디자인과도 공유했다. 그리고 백엔드 작업을 들어갔다.
프로젝트 규모가 작아서, 10시쯤 디자인 초안을 받고, 12시쯤 되어 점심 먹기 전에 백엔드의 틀은 거의 다 잡혔다. 점심먹고와서 프론트와 병행하면서 필요한 부분부분 필요한 기능의 백엔드는 수정해나가기로 했다.
12/4 13시 - 프로토타입이 어느정도 확정났고 XD로 만들어진 디자인 링크를 받아볼 수 있었다.
https://xd.adobe.com/view/ed0b9830-8a3d-46b5-9664-08a67c78c1b7-b858/
12/4 14시 - 디자인을 바탕으로 프론트엔드 작업이 시작되고, 데이터 수집에 들어갔다. 본인은 아텍분이 수집한 데이터TXT를 SQL문으로 바꿔서 DB insert 할 수 있도록하는, 아래와 같은 python 코드를 짜서 변환했고, DB에 넣었다.
f = open("./aa.txt", 'r', encoding='UTF8')
lines = f.readlines()
s=''
for line in lines:
s = s+line
f.close()
L = s.split('\n')
print(L)
M = []
for ss in L:
M.append(ss.split('\\'))
print(M)
f = open("./bb.txt", 'w', encoding='UTF8')
for i in M:
print("INSERT INTO tb_call(c_where,c_num,c_keyword) VALUES ('{0}', '{1}','{2}');".format(i[0],i[1],i[2]))
f.write("INSERT INTO tb_call(c_where,c_num,c_keyword) VALUES ('{0}', '{1}','{2}');".format(i[0],i[1],i[2]))
f.write("\n")
f.close()
12/4 18시 - 저녁먹기전까지 예상했던 계획보다 프론트엔드 작업이 더뎌졌다. 디자인이 디테일하다보니 손댈꺼리가 많아졌고, 저녁 먹은 이후엔 본인도 CSS 일부를 같이 작업했다. 그리고 아텍중 한분이 Mac OS를 쓰셔서, Front-End 개발환경 setting이 어려웠고, 결국 랩실에 있는 윈도우 컴퓨터에 setting을 급하게 해드렸다.
12/4 22시 - 하는 과정에서 자잘한 추가 기능 요구와 잔에러들이 백엔드에서 발생했고, 이를 해결하는데 시간을 보냈다. 좋아요 기능에 대한 추가 요청이 들어왔고, DB 수정, JS 수정이 이뤄졌다. 처음 기능 요청을 듣고 이걸 할 수 있을까라는 생각이 들었는데, 막상 진행하니 그렇게 어려운 작업은 아니였다.
12/5 0시 - NodeJS에서 SQL문을 처리하는 과정에서 보안은 배제하고, 평문으로 접근하는 방식을 택했는데 문제가 생겼다. title과 content를 DB에 넣는 과정에서 제목에 물음표가 들어가면 이를 SQL문으로 인식해서 보여져서는 안되는, 데이터가 Front에 뿌려지는 심각한 보안 이슈가 발생했다. SQL Injection에 굉장히 취약해진것인데, 결국 들어오는 문자들을 암호화해서 저장하고, 뿌릴 때는 복호화하는 방식으로 해결했다.
12/5 1시 - 이제 다 끝났다라는 생각이 들었는데, 그런 나를 비웃기라도 하듯 중요한 파트인 검색 로직에서 에러가 터졌다. 검색 기능에서 SQL 기능을 사용해서 WHERE LIKE %검색어% 를 사용했는데, 앞 과정에서 문자 암호화를 추가하면서 해당 로직이 깨져버린 것이다. 결국 %암호화된 글%를 해보았지만, 암호화 로직에 문제가 있는지 space 주위의 글자는 검색하지 못하는 문제가 생겼다. 결국 SQL 단에서 검색을 포기하고 js로 하드코딩을 해서 .match() 함수를 사용해서 비교하는 방법을 사용했고, 검색 기능을 완성시킬 수 있었다.
12/5 3시 - 잔 버그와 css 디테일을 살리고 마지막 커밋을 날렸다. 서버에도 pm2를 이용해서 띄웠고, 정상적으로 사이트 호스팅을 완료했다.
12/6 21시 - 게더타운에서 각 팀마다 발표를 하고 교수님께서 평가를 진행했다. 다른팀들도 정말 아이디어가 좋았고, 재밌는 프로젝트들이 많이 나왔다.
다른팀 것들도 보는데 해커톤에서 장고로 개발하는 것도 개발 시간을 아낄 수 있어서 좋은듯하다.
다른팀들 것들 포함 -> https://ienlab.notion.site/495890eb1fba4f05842d0d6b9637012a
하루만에 정말 만족할만한 결과물이 나와서 너무 뿌듯했다. 끝나기 직전까지는 너무 피곤하고 눈도 아팠는데 마감하고 나니 성취감이 들었다. 디자인분이 레이아웃을 잡아주시니 단순히 Front/Back을 나눠서 개발을 할 때보다 훨씬 개발시간을 줄일 수 있었다. 실무적으로도 정말 많은 경험을 쌓은 대회였다. 중간중간 프론트 개발자와 디자이너분, 데이터 수집을 하시는 분과도 개발 중 커뮤니케이션을 하면서 업무를 해보니 어떤 부분을 집중해서 어필해줘야하고(특히 DB 관련된 부분) 주의해야 서로가 안힘든지 느낄수 있었다.
처음보는 분들과 협업이라 어색할까도 걱정했지만 다들 기본적인 용어들을 아시고, 기본기가 탄탄한 분들이라 의사소통이 어렵지 않았고, 업무적으로 편하게 소통할 수 있었다.
그 결과는..! 1등이였다. 팀원분들과 호흡이 좋았고 너무 뿌듯한... 하루였다. 주말이 삭제되서 우울할뻔했는데, 1등 상금 50만원도 받고 기분이 좋아졌다. 다른 팀들도 디자인적으로 좋고, 아이디어도 참신했는데 개발 완성도에서 좋은 점수를 주신 것 같다. 4명 다 포지션이 명확해서 일 분배가 잘되었던게 크게 작용했던것 같다.
다음 사이드 프로젝트를 진행할 때에도 디자이너분을 섭외할 수 있다면 이번 해커톤과 같은 형태로 진행해보는 것이 목표이다.
추가로 만든 프로젝트를 발전시키고, 보안쪽으로도 다듬어서 상용화 시켜보고자 한다.
Tech Stack & Environment
Front : Bootstrap, jQuery, HTML,CSS,JS
Back : NodeJS+express
DB : Mysql
Server : Ubuntu, Apache2
'대회' 카테고리의 다른 글
| [PS] 2022 Winter SUAPC 후기 (2022.02.26.) (1) | 2022.03.08 |
|---|
