1. 프로젝트 개요 및 주요 핵심 기능 설명
‘WRITERS’는 일대일 주문 제작형 글 거래 플랫폼이다. 사용자가 원하는 형태의 글( 창작 소설, 시, 문구 등 )을 작가에게 의뢰 후에 창작 비용을 지불하고, 작가는 의뢰 받은 내용을 바탕으로 글을 창작하여 사용자에게 전달하는 일련의 커미션 과정을 제공함으로써 누구나 자신이 원하는 글을 복잡하지 않은 방법으로 얻을 수 있다.
즉, ‘WRITERS’는 세상에 단 하나뿐인 글 작품 제작을 돕는 customizing 서비스 플랫폼이다.
‘WRITERS’는 ‘커미션 신청하기’, ‘이런 글 부탁해요’, ‘관심 글 및 관심 작가’, ‘카테고리별 작가
리스트’ 등 다양한 기능을 제공하고 있다.
‘커미션 신청하기’는 독자가 작가에게 글 의뢰를 신청할 수 있는 기능으로, 독자가 특정 작가에게
커미션을 신청하면 작가가 수락함으로써 독자와 작가의 일대일 주문 제작이 진행이 된다.
‘이런 글 부탁해요’는 누구나 자신이 원하는 작품을 제작해줄 작가를 요청하는 커뮤니티 형식의 기능이다. 사용자는 원하는 작품에 대한 요청 게시글을 등록할 수 있다.
‘관심 글 및 관심 작가’ 기능은 사용자가 작가와 작가의 포트폴리오를 좋아요 함으로써 자신의 관심 리스트에 추가할 수 있는 기능이다.
‘카테고리별 작가 리스트’ 기능은 카테고리별로 모든 작가 리스트를 확인할 수 있는 기능이다.
작가 등록 순서와 베스트 작가 등 다양한 형태로 작가 리스트를 확인할 수 있다.
2. 기술 개발의 개요
2-1. 개발의 목적
누구나 자신이 원하는 글 작품을 복잡하지 않은 방법으로 얻을 수 있도록 접근성이 좋고, 사용하기 어렵지 않은 플랫폼은 기존에 존재하지 않는다. 즉, 세상에 단 하나뿐인 자신만의 글 작품 제작을 돕는 customizing 서비스 플랫폼인 ‘WRITERS’를 구현하는 것이 목표이다.
2-2. 프로젝트 배경
우리는 개인의 개성이 중시되는 '초 개인화' 시대에 살고 있다. 현재 자신의 취향을 분석해 상품과 서비스 등을 예측하고 제공받는 것뿐만 아니라 자신의 취향을 반영하는 커스터마이징(주문제작형) 서비스가 인기를 끌고 있다.
돈을 주고 원하는 창작물을 거래하는 형식은 개인 블로그, 트위터, 소규모 사이트에서부터 진행되었다. ‘WRITERS’는 작가가 자신만을 위해 자신이 보고자 하는 소설, 그림, 만화 등의 창작물을 만들어준다는 초 개인화 시대에 걸 맞는 서비스 형태다. 그래서 우리는 ‘글’이라는 매개체로 MZ 세대에게 주목받는 커스터마이징 서비스 플랫폼을 구상하게 되었다.
2-3. 기존 개발된 시스템과 차별성
‘WRITERS’는 오로지 ‘글’만을 세분화하여 다루는 창작물 거래 플랫폼이다. 또한 기존 개발된 그림 커미션 플랫폼에서 아쉽게 느껴졌던 카테고리의 모호함을 개선해 세분화하고, UI/UX를 간편화 하여 누구나 쉽고, 편리하게 글 작품을 얻을 수 있도록 기존 시스템과 차별성을 두었다.
2-4. 기대 효과 및 활용 방안
- 주 소비층인 MZ 세대 사용자가 자신이 원하는 창작물을 합리적인 가격에 구매할 수 있다.
- 다양한 아마추어 작가들이 작품을 창작할 수 있는 기회와 자신을 알릴 수 있는 기회를 얻게 된다.
- 카테고리를 세분화함으로써 사용자는 각 카테고리에 대해 정확도가 높은 장르와 작가를 확인할 수 있다.
- 독자와 작가의 일대일 채팅 기능을 통해 글 작품의 품질을 향상시킬 수 있다.
3. 상세 활동 및 기여 내역
담당 활동이 주로 프론트엔드였기 때문에 담당 위주로 작성하겠습니다.
1. 프론트엔드 전체 개발
- React을 사용한 페이지 구현
- useEffect를 활용해 컴포넌트 mount 시점 백엔드 API 호출
- React Hooks 활용
2. 멘토링 지원 신청 및 관리
- 1/2차 보고서 작성, 멘토링 회의 일정 조율
3. 설계
- UI/UX 디자인 제작
4. 발표
- 프로젝트 소개 및 시연 과정 전체 진행
5. 최종 보고서 작성
- 팀원 파트 취합 및 전체 내용 작성
- 미 구현 기능에 대한 요구사항 수정
4. 개발 내용
4-1. 전체 시스템 구성도
4-2. Use Case Diagram
4-3. ERD 설계
4-4. UI/UX 디자인 설계
5. 개발 일정
5-1. 개발 전체 일정
1, 2차시 | 아이디어 구상, 제안서 작성, 환경 구축 |
3, 4차시 | 개념 설계, 상세 설계, 소프트웨어 구현 |
5~9차시 | 소프트웨어 구현 |
10차시 | 소프트웨어 테스트 |
11차시 | 소프트웨어 보완 |
12차시 | 성능 점검 및 분석 |
13, 14차시 | 성능 평가 및 시연 |
15차시 | 최종 발표 |
5-2. 버전 관리 방법 - Github
프로젝트용 GitHub Repository를 생성하여 프론트엔드와 백엔드를 분리하여 각각 push를 진행하였습니다.
버전을 업데이트 시 history 내용에 무슨 업데이트 내용이 진행되었는지 명시 후, 업데이트 내용에 따라 branch를 활용하였습니다.
5-3. 프로젝트 진행 방법 - notion
프로젝트 용 notion을 활용해 팀원들이 API와 User Story, Infra을 언제든지 확인 가능하고, 모두 참여할 수 있도록 했습니다.
또한 회의마다 회의록을 작성해 그날 회의했던 내용이나, 개인 아이디어, 수업 시간 교수님 피드백 등을 각자 정리하는 형식으로 진행했습니다.
6. 주요 핵심 기술
6-1. 개발 환경, 툴
6-2. 프론트엔드 주요 핵심 기술
1. 프론트엔드 구현에 필요한 모든 요소들을 컴포넌트화해서 재사용할 수 있도록 구현했습니다. 컴포넌트화 방식을 통해 컴포넌트에 오류가 있거나 수정해야하는 상황이 생겼을 때, 대처하기가 수월했고, 유지보수하기가 매우 편리했습니다.
2. useState, useEffect, useRef 등 리액트에서 제공하고 있는 React Hooks을 다양하게 활용하여 컴포넌트들마다 존재하는 길어지는 코드 길이 문제, 중복 코드, 가독성 문제를 보완하였습니다.
3. 리액트 어플리케이션 성능 최적화를 위해 Memoization 방식을 활용하여 베스트 작가 선정에 대한 연산 과정을 최적화해주었습니다. 최적화에 사용한 React Hooks 방식은 useMemo입니다.
4. 프론트엔드 구현에 필요한 모든 컴포넌트들을 트리로 표현해서 state data가 어떻게 흐르는지 파악하며 구현했습니다.
5. useEffect를 이용하여 컴포넌트가 mount되는 시점에 API를 호출하고, 해당 API 결과 값을 커미션 관련 데이터의 초기 값으로 사용했습니다.
6. 작가와 독자 권한에 따라 접근할 수 있는 페이지 제한했습니다.
작가와 독자는 각각 접근할 수 있는 페이지가 다릅니다. 예를 들면 독자는 자신이 신청한 커미션에 대해서 확인을 해야 하고, 작가는 자신에게 온 커미션 리스트를 확인해야 하는 등 권한이 다릅니다. 그래서 로그인 시 인증 과정을 통해 사용자마다 접근할 수 있는 페이지를 구별하였습니다.
7. 구현 결과물
1) 메인 페이지
‘WRITERS’ 시작 페이지입니다. ‘WRITERS’ 소개 글, 이용하는 방법, 제휴 작가 신청하기의 기능을 이용할 수 있습니다
2) 로그인 및 회원 가입 페이지
회원 가입 시, 저작권 문제에 대한 동의와 성인 인증에 대한 동의를 거치고 회원가입을 진행할 수 있습니다.
3) 카테고리 페이지
카테고리 페이지에서는 ‘WRITERS’에 등록된 모든 작가들을 확인할 수 있습니다. 또한 카테고리 별로 지정된 작가들의 목록을 확인할 수 있으며, 전체 혹은 특정 카테고리에서 베스트 작가 및 작가의 순서 등록에 따라 최신 순, 오래된 순으로 작가 리스트를 확인할 수 있습니다.
4) 작가 프로필 페이지
작가 리스트에서 특정 작가를 클릭하면 작가의 상세 프로필 페이지를 확인할 수 있습니다. 작가의 프로필에서 독자는 해당 작가를 또 찾아보고 싶으면 관심 작가로 등록할 수 있으며, 커미션을 신청하고 싶은 경우 커미션을 신청할 수 있습니다.
커미션을 신청하는 경우에는 반드시 접수 중이 되어있는 상태여야 합니다.
5) 커미션 신청 폼
전체 작가 리스트나 작가의 상세 프로필에서 커미션 신청하기 버튼을 통해 커미션을 신청하는 폼으로 이동할 수 있습니다. 신청 제목과 내용을 반드시 입력해야만 신청이 접수될 수 있습니다.
① 독자 접속 화면
Commission 창에서 자신이 등록한 관심작가나 커미션 신청 목록을 확인할 수 있습니다. 커미션이 수락되기 전이라면 내용을 수정할 수 있으며, 취소도 가능합니다 또한 등록한 관심 작가에 대해서는 프로필을 확인할 수 있으며, 관심 작가 삭제도 가능합니다.
② 작가 접속 화면
작가는 Commission 창에서 자신에게 들어온 커미션 신청 리스트를 확인할 수 있습니다. 커미션을 진행하고 싶을 경우 수락을 하면 되고, 진행하고 싶지 않을 경우 거절을 할 수 있습니다.
수락을 하게 된다면 해당 신청 폼이 커미션 진행 리스트로 넘어가게 되며, 작가와 독자 모두 커미션 진행 중 항목에서 진행 중인 커미션에 대한 정보를 확인할 수 있습니다. 정보 확인을 통해 커미션을 진행 중인 독자와 작가의 이메일을 일대일 커미션을 진행 중인 작가 1명과 독자 1명만이 서로의 정보를 확인할 수 있습니다.
커미션이 종료될 경우 작가는 종료하기를 통해 모든 커미션 과정을 마칠 수 있습니다.
6) 이런 글 부탁해요
사용자는 누구나 자신이 원하는 작품에 대해 이런 글 부탁해요 기능을 통해 커미션을 요청할 수 있습니다.
요청된 글은 이런 글 부탁해요 게시글 창에서 확인이 가능하며 상세 보기를 통해 작성 내용을 확인할 수 있습니다.
7) 마이 페이지
마이 페이지에서 자신의 정보를 확인할 수 있으며, 작가는 자신의 프로필을 바로 확인할 수 있습니다. 또한 비밀번호 변경, 계정 탈퇴가 가능합니다