~시연이의 우주~

[2024OSP]Gitto:벗터 기술블로그4-해설 본문

프로젝트/오픈SW플랫폼:벗터

[2024OSP]Gitto:벗터 기술블로그4-해설

us2xince 2024. 12. 3. 21:55

이화여자대학교 2024-2학기 오픈SW플랫폼 과목수강을 바탕으로 작성된 기술블로그이며 총 다섯개의 포스팅으로 이루어져 있습니다.(개념, 팁&디버깅, 가이드, 해설1, 해설2)
 


개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask


지금까지 개념, 팁, 가이드까지 기술블로그를 작성해봤습니다. 이런 지식들과 경험들을 가지고 저희가 대체 한학기 동안 무엇을 했냐...!!!에 대해서 소개하고 전반적인 개발과정에 대해 써보겠습니다.

'설명'은 두개 챕터로 이루어집니다. 

  1. '벗터'에 대한 전반적인 소개
  2. '벗터' 에서 눈여겨볼만한 디테일

1.벗터 서비스 소개

1)벗터

벗터는 '들의 장'의 줄임말이자 이화여자대학교 학우들이 서로를 부르는 순우리말 '벗'과 마찬가지로 순우리말인 '터'를 합친 이름입니다.

Butter라는 단어와도 발음이 비슷하다는 점을 이용했습니다. 이 점 덕분에 기억하기 쉬운 이름이 되지 않았나 생각합니다. 발음이 귀엽기도 하고요. 또한 버터를 활용한 캐릭터를 제작해 우리 서비스만의 색을 더욱 확실히 했습니다.

 

2)벗터는 어떤 서비스를 제공하나요?

벗터는 벗들을 위한 중고거래 플랫폼입니다.

🧐에브리타임에 동문 간의 중고거래 게시판이 있기는 하지만 에브리타임 자체는 대학생들을 위한 커뮤니티라 물건을 거래하기에는 불편한 점이 많다고 생각했습니다. 또한 철저히 '벗'들이 물품을 사고 파는 서비스가 필요하다고 생각했습니다.(배꽃지수로 평가받는 기능 추가)

여기에 저희는 벗터만의 추가적인 기능을 기획했습니다.


(1)기획 단계에서는 지구의 날, 환경의 날 등 국제적인 기념일마다 중고물품 중 관련된 물품을 sorting해서 보여주는 서비스를 제안했습니다. 하지만 '이화인들을 위한 마켓'이라는 제시된 주제에 맞게 이화의 기념일,행사마다 관련된 시즌 상품을 메인화면에 보여주는 것으로 수정했습니다.

 

(2)또한 커뮤니티에서 중고거래 뿐만 아니라 학잠 등의 공동구매도 활발히 진행된다는 점을 고려하여 공동구매 진행 서비스도 추가했습니다.

🧐 기존의 공동구매는 홍보글에서 재학생 인증을 하고 카카오톡 오픈 채팅방 링크를 받으면 거기서 공동구매를 진행하는 벗의 안내에 따라 공동구매가 진행되었습니다.

하지만 벗터에서는 가입부터 이화여자대학교 학생임을 인증해 '총대'의 부담을 줄이고 '총대'가 공동구매 물품을 등록할 때 진행에 필요한 정보를 미리 등록하도록 해 공구 달력과 공구 진행 프로그레스 바를 제공합니다. 이를 통해 원활하게 공구를 진행할 수 있도록 하였습니다.

 

(3)벗들의 브랜드를 홍보합니다.

이화에는 졸업 후에 자신의 브랜드를 창업하거나 재학 중에 품질 좋은 물건들을 제작해 판매하는 벗들이 많습니다. 이 벗들이 홍보를 위해 들이는 노력을 조금이라도 줄여주기 위해 벗터에 동문 브랜드를 등록하고 상품을 판매할 수 있는 서비스를 추가했습니다.


2.벗터 기획

(1)노션을 활용한 회의

저희는 노션 페이지에 회의록과 일정달력을 만들어두고 개발했습니다. 그리고 매주 수업시간에 약소한 회의를 진행했습니다. 카카오톡을 통해 활발히 소통했고 변경사항과 진행상황을 수시로 공유했습니다.

(2)Figma를 활용한 화면설계

각자 담당한 화면의 설계를 수합했고 Figma로 통일감 있는 디자인으로 재탄생했습니다.

https://www.figma.com/design/rv6feoZmBGNftzMXHkCoiw/OpenSW2024-2?node-id=19-313&node-type=frame

 

Figma

Created with Figma

www.figma.com

초록,연두, 회색을 조합한 메인컬러와 검정색의 깔끔한 글씨를 사용했습니다.

3.벗터 개발

개발에 사용한 툴

  • Github :협업 툴
  • Figma: 화면 설계 디자인 툴
  • VS code: 프로그래밍 툴
  • HTML,CSS,JS: Frontend
  • Flask, Pyerbase: Backend
상품 판매 화면(전체, 상세) 시즌/대동제, 중고물품, 공동구매, 동문브랜드
상품 등록 화면 위의 카테고리 별 상품 전체 조회 화면에서 등록할 수 있도록 함
리뷰조회(전체, 상세) (전체 조회화면에서 작성자 클릭 시) 한 작성자가 작성한 리뷰 전체조회 
마이페이지 회원가입,로그인,로그아웃 // 관심글//참여한 공동구매,주최한 공동구매// 내가 작성한 리뷰//작성한 판매글
기타 배꽃지수(리뷰 작성 시 받은 리뷰를 기반으로 결정됨)

왼쪽이 대분류이고 오른쪽이 속하는 디테일한 화면입니다.


다음 마지막 포스팅에서 벗터에서 가장 내세우고 싶은! 특별한 기능을 소개하겠습니다.