[SSAFYcial] 1학기 프로젝트 최우수상 수상자가 말해주는 ⭐프로젝트 Tip⭐ - tool편

안녕하세요 !! SSAFYcial 이지혜 기자입니다 <3

 

1학기를 무사히 마치고 거기다 관통 프로젝트 최우수상을 수상하게 되어서 정말 기쁜데요 !

 

이제 들어오게 되는 12기 분들을 위한 1학기 관통 프로젝트 tip을 알려드리고자 오늘의 기사를 작성하게 되었습니다 ~~

 

제가 관통 프로젝트를 진행하며 사용한 tool을 다루어 보았으니 더 궁금하신 점이 있다면 댓글로 남겨주세요 :-)

 

사랑스러운 내 최우수 상장 💋💋

 

---

 

🤔 관통 프로젝트란 ?

SSAFY에서의 관통프로젝트는 1학기동안 배운 웹 기술을 바탕으로 2인 팀이 만드는 프로젝트를 말합니다. 즉, 1학기를 관통하는 프로젝트입니다. 👏🏻👏🏻

 

이 관통프로젝트는 싸피에 들어와서 처음하게 되는 실질적인 프로젝트이자, 내가 얼마정도 성장했는지 점검할 수 있는 기회이기 때문에 꽤 중요하다고 볼 수 있습니다.

 

사실 관통 프로젝트 이전에도 몇번의 프로젝트를 하지만 대부분 하루 내에 모두 끝마칠 수 있고, 구현해야 할 기능까지 미리 정해져 있기 때문에 이전까지의 프로젝트는 과제의 개념에 가깝습니다.

 

관통 프로젝트 주제 및 일정🚨

 

이번 11기 java 트랙의 관통 프로젝트주제는 '운동'이었습니다. 💪🏻💪🏻

 

주제가 운동이라니 조금 광범위해 보이지만, 이전까지 있었던 몇 번의 작은 프로젝트가 모두 '운동 영상 추천 웹 사이트'였기 때문에 이와 관련된 프로젝트를 완성하면 되는 것이었습니다.

 

그리고 프로젝트 일정은 5/16 ~ 5/23으로, 주말 포함하여 총 8일 정도의 시간이 있었습니다.

---

🔧 사용한 툴

 

우선적으로, 저희 팀이 프로젝트에 걸쳐 사용한 tool을 소개해드리겠습니다.

 

일단 저희 프로젝트는 여러 기능을 완성도 있게 구현하려는 목표가 있었습니다. 그 때문에 여러 툴을 사용하기 보다는 이용해본 경험이 있고, 그때그때 효과적이고 빠르게 사용할 수 있는 것들을 이용하였습니다.

 

 

 

1. 피그마🖼️

 

첫번째로는, mockup을 위해 사용한 피그마 입니다.

 

mockup은 개발 전체에서 방향성을 잡게 해주고, Front는 물론 API 설계에서도 역시 어떠한 기능이 필요한지 직관적으로 알 수 있기 때문에 아주 중요한 단계라고 볼 수 있습니다. 

 

피그마 이미지

 

위 화면은 저희가 초기 구상 단계에서 피그마를 통해 작업한 mockup 중 하나입니다.

 

figma를 이용해 기획 단계에서부터 디테일한 버튼, 로고, 내용 등을 담고자 노력하였습니다.

 

프로젝트에서 보여지는 부분이 굉장히 중요할 수밖에 없기 때문에 figma를 통해서 front end를 미리 구상해보는 것도 좋은 전략이라고 할 수 있습니다. 저희도 이렇게 구체적이고 잘 짜여진 mockup이 추후 front end 개발에 아주 큰 도움이 되었습니다. 👍🏻

 

2. 노션📑

노션 홈

 

노션 역시 가장 자주 이용한 툴 중 하나입니다. 

 

노션은 API 문서 같이 표를 이용한 작업을 하기에 편리하고, 목데이터나 erd 같이 함께 참고하면 좋은 파일을 관리하기에도 간편해서 추천드려요 !

 

메신저 앱을 이용해서 파일을 주고 받으면 나중에 찾기 어려운 상황이 생기는데, 노션에 올려두면 쉽게 관리할 수 있습니다.

 

노션은 무료 팀 스페이스의 경우 블록 제한이나 파일 용량 제한이 있어서 저희는 그냥 프로로 업그레이드해서 사용했습니다.

 

아마 프로젝트에서 notion을 사용하게 된다면 거의 프로로 업그레이드 하실 수 밖에 없을텐데, 한달 결제해서 다같이 나눠 내고 해지하는 방식으로 사용하시면 될 것 같습니다.

 

저희는 이미지처럼 왼쪽에는 설계에 활용할 문서들을 페이지로 걸어두고, 오른쪽에는 회의해야 할 사항들에 대해 적어두었습니다. 만나서 대부분 진행하겠지만, 집에 가서 따로 작업해야 하는 경우도 있을테니까 이렇게 회의 사항들을 잘 보이는 곳에 적어두면 급한 내용들을 잊어버리지 않게 메모해둘 수 있어요 ~

 

3. github📂

 

지금까지 작은 프로젝트를 할 때는 공유할 내용이 많지 않아 거의 github를 이용하지 않았는데, 이번에는 2학기 프로젝트 대비도 할겸 github를 이용하였습니다.

 

기간이 짧은 프로젝트인만큼 최대한 충돌없이 깃허브를 사용하기 위해 노력하였습니다.

 

첫번째로는, 가장 중요한 작업 시작 전 미리 상황 공유하기 !!

 

github에서 충돌이 나는 경우는 같은 파일을 다른 유저가 동시에 수정한 경우이기 때문에 결국에는 서로가 어떤 파일을 수정할지 알고 있는 것이 중요합니다. 그래서 "나 ~ 기능 만들어야 해서, 새 브랜치 만들고 ~Controller 수정할게" 또는 "나 이제 이 기능 다 만들어서 pull request 날릴게, main pull 해줘" 등의 상황 공유가 필요합니다.

 

두번째로는, controller 단위마다 새로운 브랜치를 파기

 

상황 공유만큼 중요하게 생각한 부분인데, 새로운 기능 단위를 만들 때마다 commit을 하고 controller 마다 새 브랜치를 만들기로 약속했습니다. commit은 바쁘게 진행하다 보니 잘 안지쳐진 부분도 있지만(ㅎㅎ), 브랜치는 항상 약속을 지켜 진행했습니다.

 

마지막으로 충돌이 났을 때는 빠르게 전달하고 필요한 부분과 수정할 내용 등을 함께 논의해 해결하기

 

저희는 깃허브를 협업하며 사용하는 게 익숙치 않아서 더 조심히 작업하다보니 충돌이 거의 나지 않았는데, 그럼에도 불구하고 충돌이 난 경우에는 빨리 한 명의 컴퓨터로 모여서 해결했습니다.

 

4. swagger📝

 

swagger

 

 

BackEnd API 테스트를 위해 사용한 swagger. 위 이미지와 같이 요청에 들어갈 data들을 임의로 설정해 요청을 날려볼 수 있습니다.

 

swagger는 controller 별로 나누어져 있어 직관적이고 간편하게 테스트 해볼 수 있어 좋습니다.

 

테스트 외에 API 문서에도 활용할 수도 있으니 사용법을 익혀두면 편리할 것 같아요 :)

 

5. chat gpt🤖

 

저희에게 많은 도움을 주었던 chat 선생님 .... 🙏🏻🙏🏻🙏🏻

 

이번 프로젝트는 생성형 ai인 chat gpt를 사용해야 했기 때문에 chat gpt 4를 결제하고 사용했습니다. 사용하면서 느낀 거지만 앞으로 개발자가 되려면 chat gpt를 잘 쓸 줄 알아야겠다는 생각이 많이 들었습니다.

 

4부터는 이미지를 포함하여 질문도 할 수 있어서 이 부분도 조금(?) 도움을 받을 수 있었습니다. 물론 chat gpt는 항상 확실한 정답만을 말하지 않기 때문에 필요한 부분에 대해 잘 질문하고, 잘 사용하는 것도 중요하겠죠 ?!

 

그리고 저희는 목데이터를 위한 query문을 chat gpt를 이용해 만들기도 하였습니다.

 

chat gpt 활용 화면

 

6. canva🎨

 

마지막으로 발표 준비를 하면서 목업화면을 만들고자 이용한 사이트인데, canva에서 깔끔한 노트북 목업 이미지를 다운 받을 수 있어서 해당 사이트를 이용해서 목업 화면을 디자인 했습니다.

 

아래 이미지는 목업 이미지를 넣은 발표 화면 중 일부입니다.

 

발표 자료

 

7. 그 외 개발에 필요한 프로그램🖥️

 

이 외에는 개발에 필요한 여러가지 프로그램 역시 사용하였고, 아래와 같습니다.

 

- workbench

- vscode

- sts ...

 

+ 메신저 앱

---

 

이렇게 모아두고 보니, 최소한으로 이용하려 했어도 꽤 여러 tool의 도움을 받아 프로젝트를 완성하게 된 것 같네요 ~

 

1학기에서 나름 비중있는 프로젝트이다 보니 이 글을 보시게 될 분들도 많은 고민이 있으실 것 같은데요, 제가 언급한 사이트, 프로그램 등을 활용해서 더욱 완성도 있는 프로젝트를 만들어 보시는 건 어떨까요 ?? 

 

그럼 지금까지 ssafycial의 이지혜 기자였습니다 ❣️