미니 프로젝트 시작
⚙️협업을 위한 개발 환경세팅
- 회의 진행 순서
- Github repository 생성
- Git Flow 전략 회의
- 구현해야하는 기능 작성
- 서비스를 하기위해서 꼭 필요한 기능과 차후 추가해도 되는 기능 구분하기
- 기능에 필요한 기술 스택에 대한 회의
- 와이어 프레임 회의
- 단위 기능에 대한 API 정의서 작성
- 단위 기능별로 역할 분배 및 최종 제출까지 스케줄 계획
아이디어 선정이 끝난 후, 팀원들이 협업 경험이 많이 없어, 경험이 조금이라도 있는 나의 주도하에 Github organizations을 만들고 repository를 생성해서 issue 등록하였다. 그리고 commit convention을 정하고 README에 기록했다. 그리고 각자 Github 사용 방법도 설명하면서, gitflow 전략을 같이 만들었다.
해당 서비스를 구성하기 위해 필요한 기능들을 하나씩 적어보면서 짧은 프로젝트 기간동안 구현 해야하기 때문에 꼭 필요한 기능만 필터하여 아래와 같은 결과가 나왔다.
- Frontend 기능
- 로그인 페이지
- 회원가입 페이지
- 질문 게시판 전체 페이지
- 질문 게시물 페이지
- Backend 기능
- 로그인 API (/api/login)
- 회원가입 API (/api/join)
- 질문 Create API
- 질문 Read API
- ChatGPT 답변 API
기능 회의가 마무리 한 이후 화면을 어떻게 구성하면 좋을지 회의를 하며, 와이어프레임을 함께 작성했다.
Figma를 사용한 와이어프레임 회의
다음으로 기능 및 해야하는 것들을 적어보고 각자의 역할 분배를 하고, 최종 제출까지의 팀프로젝트 계획을 만들었다.
우선 크게는 프론트와 백엔드로 나눠서 진행해보았고, 프론트 개발을 조금 해본 경험으로 내가 전체적인 뷰를 구성하였고, 그리고 로그인과 회원가입 파트와 ChatGPT API를 공부하고 기능을 구현하는 파트 로 나눠서 프로젝트를 진행했다.
🖼️제안 발표 준비
모든 회의가 끝나고, 1차 발표를 해야하기 때문에 회의를 하며 나왔었던 내용을 바탕으로 PPT를 만들었다. 이미 회의 때 논의한 내용을 바탕으로 발표를 하면 되기 때문에 큰 시간을 투자하지는 않았다.
제안 발표 PPT에 포함된 내용
- 왜 이 서비스가 필요한가?
- 와이어프레임
- 아키텍처 기술스택
- 각 팀원 역할 및 팀 전체일정
🕓개발 시작
와이어프레임 기반으로 화면 그리기
개발 환경설정과 회의를 마치고, HTML과 JS를 사용해서 화면 구성을 빠르게 개발하기 위해서 tailwindcss 를 사용하여 우선 뷰를 먼저 그려나갔다.
tailwindcss 를 활용해서 좋은 점은 class를 통해서 화면 구성을 빠르게 할 수 있어서 좋았지만, Docs에 나와있지 않는 크기의 숫자나 방식을 사용하지 않으면 적용되지 않는 점이 불편했었던 것 같다. 그래서 왜 배우기는 어렵지만, 적응해서 자주 사용하게 되면 뷰를 빠르게 그릴 수 있는 점이 있었는지 이해가 되었다.
✒️회고
오늘 하루는 와이어프레임 기반으로 뷰 그리기 까지 가 목표였기 때문에, 목적 달성은 하였고, 빠르게 그린 후에 내일은 백엔드 쪽과 함께 기능을 합치고 API 기능서 대로 연결할 예정이다.
