[G-PBL] 1st Hackerton 정리

제목

• G-PBL 1st Hackerton 대회 : PFlow(Project Flow)

소개(Introduction)

• 해커톤 소개 : 미국 캘리포니아, Irvine주 400 Spectrum Center에서 실시된 2024 국민대학교 Global PBL 프로그램의 1번째 해커톤입니다. 1인 해커톤으로 진행되며, 미국 시간 기준 9월 9일부터 9월 11일까지 진행되었습니다.
• 또한 비 개발자 인원들도 많이 있어 굳이 개발이 아니더라도 UI/UX, 기획, 개발 등 주제에 부합한다면 그에 맞게 아이디어 발표를 하면 되는 대회입니다.
• 팀원 소개 : 김동연(Full-Stack)
• 프로젝트 주제와 목표 : 한국의 대학생들에게 학생들의 career를 쌓도록 도와주는 서비스

How to help University students in Korea to develop their (global) career path

문제 정의(Problem Definition)

• 해결하고자 했던 문제 또는 이슈
  • 한국의 소프트웨어학과 대학생을 타겟으로 설정
  • 초보자들끼리 프로젝트 진행 중 앞으로 해야 할 길을 잃어 프로젝트가 파기되는 상황을 해결하고자 함
  • 초보자들끼리 프로젝트 진행 시 각자 코드를 짜고 합치는 과정으로 진행되는 경우가 많은데, 주로 미리 컨벤션을 미리 정하지 않고 각자의 코드를 짜 많은 오류가 발생, 고치는 과정에서 팀원들끼리 다투는 등 프로젝트에 대한 의욕을 잃는 경우를 많이 봐왔습니다.
• 문제를 어떻게 발견했는지, 혹은 선택하게 된 배경
  • 현재 소프트웨어학과의 많은 학생들은 프로젝트를 동아리 또는 학과 수업에서 처음 경험하게 됨.
  • 프로젝트와 관련된 디테일한 부분은 가르쳐주기 힘들기 때문에 프로젝트에 대해 잘 모르는 학생들이 잘못된 방향으로 프로젝트를 하다 팀원들과 다투거나 오랜 시간을 들여도 프로젝트가 완성되지 않아 학과 전체에 대한 흥미를 잃어버리거나, 심한 경우 포기하는 경우가 발생합니다.
  • 또한 같은 이유로 신입생들이 만들고 싶은 아이디어는 있지만, 확실한 로드맵이 존재하지 않고 놓치기 힘든 부분들에 대해 피드백이 존재하지 않기 때문에 학과 공부로 바쁜 시간 속에 따로 불확실한 프로젝트를 시작하기 힘든 상황이 존재함.
  • 그렇게 미래의 소프트웨어 인재들이 앞으로의 진로를 포기하지 않고 구상한 프로젝트를 만들 수 있도록 하여 커리어의 시작을 도와주기 위해 구상

해결 방안 (Solution)

• 프로젝트의 핵심 아이디어 및 해결 방안 설명
  • 하나의 프로젝트를 7단계로 분리, 프로젝트가 얼마나 진행되었는지 직관적으로 알게 하여 동기부여를 준다.
    • 개발 진행시 어떤 것을 주로 확인하고 진행해야 하는지 알아볼 수 있음
    • 개발의 순서(1. 프론트-백 연결, 2. 프/백 각자개발 3. 중간 점검 4. 최종 마무리 합체)
    • 마무리 후 Readme 작성 등 도움을 주고 프로젝트를 완성할 수 있도록 도와줌
    • 또한 프로젝트 진행 시 각 단계에서 알아야 할 팁들 제공,
  • 개발 시작 전 컨벤션 작성 및 문서화에 용이한 기능 제공
    • 사용자들이 프로젝트 시작 전에 컨벤션을 정할 수 있도록 한다.
    • 프로젝트를 진행하는 동안 사용할 툴들을 한 눈에 볼 수 있도록 해준다.
  • 프로젝트 시 다른 사람들은 어떻게 작업하는지 및 작업의 결과물을 참고할 수 있음
    • 참고와 모방은 학습에 큰 도움이 된다.

→ 프로젝트를 시작하고 싶은 학생들이 이 서비스를 참고하여 가이드라인을 얻고 각 단계에서 놓치기 쉬운 항목들을 팁으로 제공하여 끝까지 마칠 수 있도록 도와줌

• 사용된 기술 스택 (프론트엔드, 백엔드, 데이터베이스, API 등)
  • 프론트엔드 - React
    • 다양한 기능이 존재하는 프론트엔드 프레임워크
  • 백엔드 - Node.js, Express.js
    • 빠르고 가벼운 개발을 위함
  • DB - MongoDB
    • 빠른 개발을 위함

개발 과정

• 프로젝트의 기획 및 아이디어 구체화 과정
  • (1일차)Point를 좁게 가져가는 것이 확실한 타겟층 공략에 유리할 것이라고 판단, 내가 잘 알고 있는 소프트웨어 학생들을 위한 앱을 만들기로 결심
  • Chat GPT와 대화하며 brainstorming
  • 초반엔 스타트업 관련 앱을 제작하고 싶었고, 스타트업은 거창한 것이 아니라 간단한 프로젝트부터 시작한다는 생각을 담아 팀원 매칭 + 프로젝트 진행 과정 보조 + 그렇게 완성한 프로젝트들을 올리고, 투자자들과 연결시켜주는 웹 사이트를 만들고자 하였음
  • 다만 주제를 정하는 하루 안에 투자자의 의견을 받고 프로그램을 수정하는 것이 힘들다고 판단하였고, 스타트업 또는 프로젝트를 올리는 사람들을 위한 플랫폼이 아닌 프로젝트를 처음 시작하는 학생들을 위한 보조 도구 앱으로 노선을 변경
  • 학교 후배들과 개발 과정에서 불편한 점에 대해 이야기를 나누고 주제를 확정지음
    • “만들고싶은건 있는데 뭘 어떻게 해야할지 모르겠어서 가이드라인같은게 있으면 좋겠어”라는 말에서 영감을 받음
    • 간단한 프로덕트를 만들고 싶은 사람들을(특히 초보자) 대상으로, 개발에서의 진행 절차를 도와주는 프로그램을 구상
• 개발 단계별 주요 작업 (프론트엔드, 백엔드, 통합 작업 등)
  1. 프론트엔드 프로토타입 제작
  2. 백엔드 프로토타입 제작
  3. hello world를 보내고 받는 방식으로 간단한 통신 시도
  4. 백엔드 - DB 통신 시도
  5. 프론트엔드 개발 + 데이터 정의 (원래 데이터 정의 후 개발을 시작해야 하지만 주제가 확정되기 전이라 공통된 데이터-유저 데이터-를 먼저 개발하기 위해 이러한 과정을 택했습니다.)
  6. 백엔드 개발 + 데이터 정의 (주제 확정 이후 필요한 데이터를 정의하였습니다)
  7. 통합 작업 및 테스트, 마무리
• 주요 도전 과제 및 문제 해결 과정 (어려움과 이를 해결한 방법)
  • 스택적인 면에선 어떠한 도전이 없어 크게 어려움은 없었습니다.
  • HTML 파일을 PDF로 만들어주는 jsPDF, 유저의 비밀번호를 저장할 때 hash함수로 안전하게 저장해주는 BCrypt HASH 등 새로운 기술을 사용해보았습니다.
  • 폴더의 구조를 서비스별로 나누어 개발하였습니다. (auth, users, services)
  • 대형 폴더 내부에도 controllers, routes, models 3개의 폴더로 구분해서 파일을 저장하였습니다.
  • 다만 파일의 이름을 camelCase로 저장하였는데, dot-separated naming (???.route.js)를 사용하는 편이 더 가독성이 좋아보인다고 생각하였습니다.
  • 다음 해커톤때는 OpenAI API 또는 다양한 API를 활용하여 더 재밌는 서비스를 만들고 싶다는 생각이 드네요. 기술적으론 너무 재미없는 서비스였다고 생각합니다.

기능 및 특징 (Features)

• main(/)

가장 나중에 만든 페이지인데, 시간이 없어 빠르게 개발하기 위해 Claude AI에게 외주를 주었습니다.

아래 코드 블럭에 있는 내용으로 Claude에게 맡겼는데 매우 만족스러웠던 기억이 있습니다.

리액트의 홈페이지를 만들어줄 수 있어? 주제는 초보 개발자를 위한 개발 지원 앱 - PFlow(project flow)이고,
페이지의 정가운데에 은하수같은 애니메이션이 배경으로 있었으면 좋겠어. 
정가운데에는 PFlow라는 글자가 매우 크게 있었으면 좋겠고, 아래에는 2개의 버튼이 있는데, 왼쪽 버튼은 회색이야.
그걸 누르면 "/all-projects"로 이동할 수 있어. 
오른쪽 버튼은 indigo-600 색이고, 그걸 누르면 /login으로 이동할 수 있어.

 

저 로고는 뭘 하지 하다 결국 끝까지 생각이 안나 계속 자리를 차지하게 된 그림입니다. 친동생이 옛날에 그려준 그림인데 다양한 프로젝트들에서 요긴하게 잘 쓰고 있네요. 고마워!

 

다만 나중에 든 생각인데, PFlow라는 컨셉을 잘 맞춰 흐르는 물결 또는 바람같은 UI를 만들면 어땠을까 하는 아쉬움이 좀 남습니다.

캡쳐가 잘 안되어 PFlow라는 글자가 회색으로 보이지만 사실 흰색이에요, 투명도 조절을 통해 깜빡이도록 만들어줬습니다.

• 로그인 및 회원 가입, 마이페이지(/login, /signup, /user/:id)

기본적인 내용들이라 로그인 페이지는 주제를 정하기도 전에 만들고 있었습니다.

tailwind에서부터 따왔고, 매우 편리하게 만들 수 있었습니다.

 

회원가입 페이지는 저때 어떤 페이지에서 영감을 받았는데 기억은 안 나네요, 다음엔 이런 것들도 다 메모해봐야겠습니다.

Email - Password - Username 이 3개만 받도록 짜봤습니다. 일부 페이지에선 Password double check가 UX를 해친다고 생각하는지 빼는 경우도 있어서 제 프로젝트에서도 한 번만 적도록 만들었습니다.

이메일을 적고 Continue를 누르면 약간의 애니메이션과 함께 다음 페이지로 넘어갈 수 있게 만들어 두었습니다.

다음 기회에는 이메일 인증을 할 수 있도록 기능을 만들고 싶은데, 사실 해커톤에서 로그인 기능은 안 중요하기 때문에 Firebase 쓰고 빨리 넘어가는 것이 더 나은 것 같아요 ㅋㅋ

전 그 사실을 유저 기능을 다 만들고 나서야 깨달았습니다ㅜ

 

마이페이지는 원래 Username이 나오지 않는 버그가 좀 있네요,

유저 사진도 받을 수 있도록 만들고 싶었는데 그것보다 차라리 메인 기능에 집중하자 생각해서 관뒀습니다.

다음엔 S3버킷써서 써볼게요 ㅋㅋ

 

 

• New project 7 Steps (/project/:id)

메인 기능입니다.

7 Steps로 이뤄져 있고, Continue 버튼을 누르면 다음 단계로 넘어갑니다.

프레임워크 선택은 지금 5개중에 하나 선택하는걸로 만들어졌는데, 일단 진행하고 다음에 고쳐야지 했는데 생각보다 시간이 없어 그대로 끝나게 되었습니다.

원래 생각은 여러 옵션들을 선택할 수 있게 만드는거였어요

그저 제가 부족한 탓,,

아래 팀원 추가도 가능하고, 왼쪽엔 이름, 오른쪽엔 역할을 적을 수 있게 해두었습니다.

 

Step 2, 협업 도구 설정입니다.

다양한 협업 도구를 쓰게 될 텐데 그 링크들 공유하기 귀찮을까 싶어(저 초보땐 카톡으로 공유했는데 매번 올라가서 찾기 귀찮더라구요) 만들어 두었습니다.

원래 목적은 각 도구별로 쓰임새나 추천 이유들을 적어주어야 하는데 역시 시간 문제로 구현을 못했습니다.

깃허브도 여러 리포지토리 사용할 수 있으니 추가하는 기능을 만들면 더 좋았을 거라는 생각이 드네요

 

 

Step 3 컨벤션 설정입니다.

코드 컨벤션, Github 컨벤션 등 몇 가지 컨벤션을 정할 수 있게 만들어 두었습니다.

오른쪽에 같은 코드를 하나 두고 규칙 radio button 누를 때마다 변할 수 있게 만들고 싶었는데 이것도 못했어요

 

 

파일 구조 정하는것도 어디서 안알려주는데 꽤 중요하다 생각해서 기본적인 파일 구조들을 알려줬습니다.

프론트엔드 / 백엔드 / 풀스택 3가지를 볼 수 있게 만들었습니다.

이 부분은 pdf에 어떻게 표현하지 하다가 안넣었습니다. 또 궁금하면 내 서비스 와서 보고 가는걸로...

 

 

주석 컨벤션이나 이런건 팁이에요!

 

 

Step 4. 디자인 단계에서는 도와줄게 딱히 없을 것 같아서(저도 피그마를 못하기도 하고)

GPT가 뽑아준 디자인 팁을 집어넣었습니다.

기회가 된다면 Figma로 프로토 타입 만드는 단계까진 알려주고 싶네용

 

Step 5입니다. 데이터베이스 정리 및 ERD 링크 입력이에요

좀 휑해보이는것 같긴 한데

원래는 각 데이터베이스 툴과 선택 이유들 및 ERD 만드는 방법들을 알려주고 싶었어요

그냥 그랬다구요,..

 

 

Step 6. 개발 단계입니다.

국민대 겨울 PBL에서 만난 CodeState 대장님이 알려주신 개발 단계를 적어봤어요

프론트, 백이 각자 프로토타입을 만들고 프론트-백엔드 간단한 통신을 해보고 개발을 시작해야 나중에 합칠 때 덜 귀찮아진다는 말씀을 해주셔서 저는 아직도 그렇게 하고 있네요

매우 도움이 되는 말씀이라 여기에 집어넣어봤습니다.

 

나중에 서비스가 진행된다면 프론트엔드에서는 HTML, React, Vue 정도에서 프로젝트를 시작하는 법, 백엔드에서는 node express, python Django 개발을 시작하는 방법까진 만들어서 복붙만 해도 될 정도로 해주고 싶어용

백엔드에서는 DB와 연결하는 법도 알려줘야겠죠..,? 

 

Step 7입니다.

배포를 했다면 최종 결과물의 url을 집어넣고 Readme 작성 도움말을 집어넣어봤어요

사실 매우 쉽게 배포하는 방법(github blog나 fly.io 등)을 알려줘도 괜찮을 것 같긴 한데 저땐 생각이 안나서 저렇게만 했어요

 

• 진행중인/완료된 프로젝트(/all-projects, /results)

제가 진행중인 프로젝트를 볼 수 있습니다.

삭제도 시킬 수 있고 PDF로 변환시킬수도 있어요.

PDF로 변환시키게 되면

 

이렇게 나온답니다

좀 더 이쁘게 만들어보고 싶은 생각은 있어요

 

이건 완료된 프로젝트

 

 

 

이제 기능 끝!

별거 없죠,.,.? 요즘 유행하는 AI나 Cloud가 단 한개도 들어가지 않았답니다!

ㅜㅜ 다음엔 기술도 생각해가면서 해커톤 주제를 짜야겠어요

 

성과 및 피드백(Outcome and Feedback)

• 해커톤 결과
  • 9명 중 2명 수상, 수상 실패
• 심사위원 또는 사용자로부터 받은 피드백
  • 뚜렷한 비즈니스 모델이 존재하지 않아 아쉬웠다.
  • 이외에 교수님들께 피드백을 요청드렸고 곧 말씀 해준다고 하셨습니다!
• 개인적으로 느낀 점 또는 배운 점
  • Claude.ai는 신이다
  • Chat GPT와 Claude AI와 함께 개발을 진행하였는데 ClaudeAI가 조금 더 만족스러웠음
  • ClaudeAI는 개발한 프론트엔드 디자인을 화면 안에서 보여줘 어떤 결과가 나왔는지 더욱 편리하게 볼 수 있었음

다음 단계 (Next Steps)

• 현직 생활을 경험하게 된다면 회사에서 제품을 개발하는 Step을 가져와 이 프로젝트를 다듬을 것.
• 최소한 3단계까지, 코드 컨벤션 기능만 담아 Pdf로 만들어주는 기능은 꽤 호평을 받아 3단계까지의 기능들만 모아 개발을 해 배포를 하고 사용자들의 의견을 들어보고 싶다.
• 그러한 과정에서 얻은 경험으로 이 프로젝트의 수익성을 한번 검토해볼 예쩡

마무리 (Conclusion)

인생 2번째 해커톤이 끝났습니다.

언제나 해커톤을 하면 좀 아쉬움들이 많이 남는 것 같네요, 아무래도 수상 경력이 없어서 그런 듯 싶습니다.

 

이번 대회에서도 수상을 하지 못하여 아쉬웠지만 수상하신 분들의 성과를 보니 그럴만 하다고 생각이 들기도 합니다.

일단 긍정적인 면과 부정적인 면에 대해 생각해보기로 했어요,

 

긍정적인 면으로는

개발을 완료하였다.

필요한 기능들을 다 만들었고, 발표 시에도 버그 없이 작동이 잘 되는 모습을 보여주었습니다.

 

아쉬운 면

시간 부족으로 AWS를 사용한 배포를 하지 못하였다.

SQL을 사용하지 않아 데이터의 정규화가 잘 되지 못하여 데이터가 다소 지저분해보인다.

뚜렷한 BM(Business Model)을 찾지 못해 사업성 면에서 낮은 평가를 받았을 것이라 생각된다.

코드가 매우 지저분하다.

리액트 컴포넌트 관리를 해야 한다.

 

등이 있습니다.

그리고 저땐 영어 자체에 대해 자신감이 전무한 상태 + 발표 20분 전에 대본 다 쓴 상태라많이 떨려 준비한 걸 다 보여드리지도 못 했던 것 같네요. 발표 할 때 손 덜덜 떠는사람들에 대해 이해를 못 했는데 발표 도중 제 손을 보니 대본을 들고 덜덜 떨고있더라구요 ㅋㅋ 되게 신기한 경험 했습니다.

다시 한다면 더 잘 할 수 있을 것 같습니다.

 

 

다음 2nd Hackerton에서는 더 좋은 프로젝트를 만들어 우승을 할 수 있도록 노력해보겠습니다. 화이팅!

 

참고 자료 (References)

• GitHub 링크 또는 프로젝트 관련 자료
  • front-end : https://github.com/0yeonnnn0/PFlow_ft
  • back-end: https://github.com/0yeonnnn0/PFlow_be

 

 

감사(Thankyou)

구글 폼을 통해 총 8명, 인스타그램을 통해 4명이 응답을 해준 덕분에 프로젝트에 아주 큰 도움이 되었습니다.

구글 폼에는 누가 적어주었는진 알지 못하지만, 귀찮은 설문조사였을 텐데도 적어주셔서 정말 감사하다는 말씀 드리고 싶습니다.

혹시 도움이 필요하실 때 언제든 연락 주시면 열심히 도와드리겠습니다.

이외에도 함께 대화를 나눠준 많은 친구들 덕분에 프로젝트 진행의 갈피를 잡았습니다.

도움 주셔서 정말 감사합니다! :)