[공통프로젝트] 플랫폼 제작 일지 1
총 개발기간 : 01월 08일 ~ 02월 16일
SSAFY 2학기를 맞아서 진행하는 공통 프로젝트에 대한 일지를 작성한다.
총 개발 기간은 약 5주이며, WebRTC를 사용하는 웹 플랫폼을 6인이서 제작하게 된다.
나는 프론트엔드 파트장을 맡게 되었다.
우선 대략적으로 사용하기로 한 기술 스택은 아래와 같다.
- React
- Git
- JIRA
그래서 협업을 위해서 JIRA, Git 사용법을 우선 익혔다.
JIRA 사용하기
우선 JIRA가 무엇인가에 대해서 살펴볼 필요가 있다.
JIRA란? 내가 정리한 결론부터 말하면 협업을 위한 도구인데,
할 일 목록을 정하고 팀원들에게 할당해서 스프린트 진행을 도와주는 도구이다.
그러면 스프린트는 또 뭘까?
참고링크에 따르면, 스프린트는 프로젝트를 작은 주기로 쪼갠 기간이다.
즉, 작은 개발 주기를 일컫는 말이다.
아무튼, JIRA에서 이슈를 보고하고(작성하고), 담당자를 할당할 수 있다.
쉽게 말해서 할 일을 정하고, 얼마나 비중을 둘지, 스토리 포인트를 배치하면서 하루 8시간 일 할때 무슨일을 몇 시간동안 할 지 정할 수 있다.
이번 프로젝트를 하면서 JIRA를 처음 쓰면서 배우게 되었다.
프론트엔드 1주차 스프린트 배치하기
공통 프로젝트 기간 동안 스프린트는 1주일이다.
사실 이 포스트를 작성하고 있는 시점에는 이미 1주차가 지났지만 회고를 한다는 느낌으로 작성해본다.
프론트엔드 파트는 1주차 스프린트 동안 할 일을 이렇게 배치했다.
- React 공부하기
- 서비스 기획(백엔드 파트와 같이 진행)
- 피그마 작성하기
- 화면정의서 작성하기
리액트 공부하기
우선, 프론트엔드 기술 스택을 리액트(JS, 추후 가능하면 TS로 교체)로 정했으니
이 부분은 매주 진행할 것이다.
서비스 기획
우선 결론적으로 우리 팀의 서비스는 신인작가를 위한 플랫폼이다.
이 서비스의 목적은 아래와 같다.
- 신인 작가의 작품을 온라인을 통해 경매를 진행한다. (WebRTC)
- 좋아요 기능을 통해 신인 작가의 작품을 알린다.
- 신인 작가와 팬들의 소통을 늘린다.
어떻게 보면 기존에 있는 사이트 중 에서 픽시브라는 사이트가 있는데
거기에다가 거래 기능을 붙인 것이라고 보면 될 것 같다.
맘 같아서는 NFT, 저작권이랑 연결하면 일러스트까지 범위를 확장할 수 있을 것이라 생각하지만
6주 안에 NFT와 저작권과 같은 법적 문제까지 다루기엔 시간이 촉박하기에 실물 그림을 대상으로 서비스를 구축하기로 하였다.
한편, 이 서비스가 제공하는 기능을 러프하게 나타내면 아래와 같다.
- 실시간 경매 기능
- 작품 판매 및 구매 기능
- 좋아요 기능
- 작가의 미니홈페이지 구축 기능
- 미니홈페이지를 통한 포트폴리오 업로드 기능
- 리뷰 작성 및 제공 기능
갈등?
팀 프로젝트를 하게 되다보면 갈등을 피할 순 없는데 심각한건 아니고 소소한 갈등이 있었다.
어떤 서비스를 제공할지를 정하는 과정에서 작은 갈등이 있었다.
온라인 환경이고 신인 작가는 요즘에는 실물 환경보다는 2D 일러스트 쪽에서 더 많을 것이라고 생각해서
커미션을 할 권리를 경매한다던지, 아니면 그리는 과정을 실시간 스트리밍하는 서비스가 어떨까?
그래서 신인작가를 더 홍보하는 효과를 가져올 수 있지 않을까? 생각을 해서 의견을 제시했다.
하지만 의견에 반대했던 백엔드 파트장이 아래와 같은 근거를 제시해주었다.
- 실시간 경매 시스템이 구현 난이도가 높아 기술적인 로직을 더 고민할 수 있는 기회가 많다.
- 일러스트는 NFT, 법적 문제 등 신경쓸 요소가 많은데 6주 안에 진행하긴 촉박하다.
그리고 이 외에도 좋아하는 것을 하라는 컨설턴트님의 의견까지 덧붙여서
지금의 서비스를 구축하는 것으로 방향을 잡기로 하였다.
그리고 컨설턴트님의 의견을 듣고 스스로 생각하기를,
좋아하는 것을 하다 보면 고민도 많이 하게 되면서 나중에 더 말할 거리가 많아질 것이다.
그래서 나의 의견은 접어두고, 프로젝트가 원활하게 진행될 수 있도록 준비하기로 했다.
나는 기획자가 아니고 개발자다보니 공헌 보다는 기술적인 고민을 할 기회를 더 잡는 것이 더 낫지 않은가?
피그마 작성하기
프론트엔드 파트를 맡게 되면서 UI/UX를 설계하기 위해서 피그마를 사용했다.
이 부분은 나 보다는 팀원이 굉장히 수고를 많이 했다.
간단하게 설명하면 작가와 일반회원으로 나뉘어 있는데,
로그인을 한 뒤 작가 회원이면 작가 회원이 볼 수 있는 형태로 홈페이지가 보이도록,
일반 회원이면 일반 회원이 볼 수 있는 형태로 홈페이지가 보이도록 구현하였다.
화면 정의서 작성하기
그리고 나는 피그마 보다는 피그마를 기반으로 화면 정의서를 작성하는데 집중하였다.
화면 정의서는 노션에 정리하였다.
SSAFY 보안 이슈 때문에 전체 및 링크를 공유할 수 없어서 일부만 공개한다.
전체적으로 이용자 구분, 페이지 이름, 진행 과정, 정의, 구현시 유의사항(비고), UI 배치를 작성하였다.
원래대로라면 어떤 버튼을 누르면 어떤 기능을 하는지, 어디로 이동하는지 까지 작성해야 하는데 백엔드 파트와 연계를 해야했고,
피그마의 플로우가 대체할 수 있을 것이라 생각하여 거기까진 작성하지 않았다.
그리고 백엔드 측도 알고있고, 화면정의서 자체는 우리 팀 내에서 소통을 하기 위한 수단이니,
백엔드 측에도 물어보니까 잘 알아볼 수 있다 라고 답변이 돌아와서 이 상태로 두기로 했다.
하지만 명심해야지. 실제 회사에서 화면정의서는 이것보다 더욱 더 꼼꼼해야 한다.
이렇게 1주차 회고를 마친다.
2주차에 하기로 한 내용은 아래와 같다.
- 백엔드 : ERD, API 명세서 작성
- 프론트엔드 : 리액트 프로젝트 및 기본 템플릿 생성
뼈대를 구성하고, 나중에 Three.js, GSAP 등 추가 애니메이션 기능을 공부하면서 붙여나갈 궁리를 하고,
백엔드가 완성되면 살을 붙일 준비를 하는 것이 2주차에 할일이겠다.
