🎉 슴우D 팀 'OFI (OutFitIn)' 1등 🎉

결과부터 말하자면, 우리 팀은 압도적 1등을 차지하였다!

프로그램 설명과 진행 과정

🌍 전반적인 프로그램 설명

• 기간: 8.26~9.26 (4주 4일)
• 인원: 팀 당 5~6명 일정 인원이 팀을 꾸려 6주간 멘토와 함께 IT 프로덕트를 만드는 프로그램이다. '성장'이라는 주제로 진행되는 프로그램이다. 6주이지만, 사실 상 4주하고도 4일의 시간 밖에 없었다. 매 주 1회의 멘토와의 위클리, 최소 1회 모각작 (모여서 각자 작품), 주말마다 온라인 모각작을 수행한다.

🌍 우리 팀 진행 과정

🔶 모임 일정

• 월요일 오전 10시: 멘토와의 위클리 (온라인)
• 금요일 오후 1시: 모각작 (오프라인)
• 토요일: 정기 모각작 (온라인)

: 고정적인 모임 요일은 위와 같이 정해두었다. 위의 모임 시간에는 모두가 필참하게끔 하였고, 필요에 따라 모임을 더 진행하곤 하였다. 사실 상 우리 팀은 첫 주를 빼 놓고는 거의 매일 소통하고, 디스코드에서 만나고, 오프라인으로 만나고.. GDG에 full로 집중하였다.

🔶 우리 만의 rule

• 매주 일요일: 회고록, 기술 블로그 업로드
• 지각 시 벌금 (자세한 내용: https://www.notion.so/notionofso/d6a40936ee3946ecb644f46ddfb766fa) -> 우리는 6주 간 GDG에 몰입하며, 단기간 성장을 이루어내고자 하는 목표를 가지고 있었다. 따라서, 매주 회고록과 더불어 기술 블로그를 하나 씩 업로드하게끔 하였다. 위의 사진과 같이 2주차 부터는 모두가 꾸준히 기술 블로그도 업로드하였다. -> 벌금에 대한 rule을 정하였지만, 사실 소용이 없는 우리 팀이었다. 매 모임마다 지각하는 사람도 없었으며, 모두가 제 시간에 맞춰 회고록과 기술 블로그를 업로드 해주었다. 이런 사소한 규칙들을 지키는 것에 있어서도, 모든 팀원들이 협조적이고 열정적이었기 때문에 1등이라는 결과도 받을 수 있었던 것 같다.

🌍 참여 인원과 파트별 인원

: 각 파트 별 인원은 아래와 같다. 아래 카드는 디자이너가 만들어준, 우리 팀 소개 카드이다!!

• 백엔드: 3명
• 프론트엔드: 2명 (오른쪽이 나)
• 디자이너: 1명

🌍 기술 스택

백엔드, 프론트엔드, 디자인, 협업 툴과 스택은 위의 사진과 같다.

서비스 소개

🌍 OFI 서비스 설명

" OutFitIn, OFI 나만의 코디네이터"

우리 서비스는 '일반인'들 간의 소통과 거래를 중심으로 하는 서비스인 'AirBnb'와 '당근마켓'에 모티브를 두고 시작하였다. 옷에 관심이 많거나, 패션 디자인학과 학생들과 같은 사람들은 코디네이터로서 자신만의 포트폴리오를 만들고, 부업으로 돈을 벌 수 있는 수단을 마련할 수 있다. 반면에, 옷을 잘 모르는, 자신이 원하는 상황과 스타일에 따라 코디를 받을 수 있는 것이다. 즉, 코디네이터와 유저 2가지 버전이 존재하는 일반인들 간의 '옷 코디 플랫폼' 이다. 우리는 우리 서비스명인 OutFitIn에서 따와, 아래와 같이 우리 서비스 사용자를 지칭하였다.

아우터

코디를 해주는 역할인 코디네이터

피터

코디를 받기를 원하는 사용자

🌍 MVP 기능

1. 로그인

• 로그인: 아이디입력(이메일) / 비밀번호 입력/ 소셜 로그인 (카카오, 네이버, 구글)
• 회원가입: 이메일 인증/ 비번 설정/ 모드 선택 (아우터, 피터)/ 세부정보입력 (닉네임, 프로필 사진, 성별, 키와 몸무게, 체형, SNS 링크, 스타일.. etc)

-> 세부 정보는 아우터나 피터냐에 따라 입력 받는 게 조금 씩 다르다

2. 아우터

• 메인페이지: 인기 코디네이터 (평점과 코디받은 횟수, 좋아요 횟수, 코디사진), 코디네이터 상세 정보
• 검색: 스타일 별 코디네이터 필터링 (게시물, 코디네이터 상세 정보)
• 채팅: 피터와 채팅 주고 받기
• 마이페이지: 프로필 편집 (회원등급, 이름, 생년월일, 키, 몸무게, 성별, 프로필 사진 수정가능), 전체 게시물 조회, 로그아웃, 계정 삭제
• 게시물 작성: 사진, 제목, 글 내용과 함께 글 작성

3. 피터

• 메인페이지: 인기 게시물과 코디네이터 정보 (평점과 코디받은 횟수, 좋아요 횟수, 코디사진), 코디네이터 상세 정보
• 검색: 스타일 별 코디네이터 필터링 (게시물, 코디네이터 상세 정보)
• 채팅: 아우터에게 채팅 주고 받기, 결제
• 마이페이지: 프로필 편집 (회원등급, 이름, 키, 몸무게, 성별, 체형 수정가능), 전체 게시물 조회, 로그아웃, 계정 삭제

--> 아우터와 피터로 나누어 정리를 해보면 위와 같다. 채팅, 결제, 필터링, 로그인/회원가입, 후기, 정보 편집, 찜 기능, 사진 저장, 게시물 작성, 회원 등급제 -> 사실 우리 서비스의 모든 기능들이 메인 기능이라고 할 수 있다. 따라서 어떤 하나를 메인 기능으로 뽑기가 어렵다. -> 아래 디자인에서 가독성있게 다시 설명하도록 하겠다.

🌍 Task Flow

🌍 Wire Frame

🌍 UI/UX 디자인

좀 더 상세한 디자인은 맨 아래 링크를 걸어두었으니, 참고 바랍니다.

🔶 공통

1. 로그인과 이메일 인증

기본 로그인은 이메일과 비밀번호를 기반으로 한다. 계정이 없을 경우에는 '회원가입'을 실시한다. 회원가입에서는 이메일 인증을 진행을 하고, 인증 번호가 맞을 시, 비밀번호를 입력할 수 있는 칸이 렌더링되도록 하였다. -> 이메일 인증 이메일을 받으면, 위와 같은 폼으로 메일을 받게 된다. 위 또한, 우리 서비스에 맞게 커스톰하여 제작하였다.

2. 검색

-> Style (스티릿, 미니벌, 힙합, 올드머니룩..etc), 계절 (봄, 여름, 가을, 겨울), 상황 (면접, 데이트, 캠퍼스, 결혼식.. etc)에 따라 게시글을 필터링할 수 있게끔 하였다.

3. 채팅

피터가 먼저 아우터의 게시글을 보고, 채팅을 보낼 수 있다. -> 채팅 목록이다. -> 코디 의뢰서를 폼으로 직접 작성하게끔 구현하려고 하였다. 하지만, 일단은 시간 관계 상 채팅을 주고받는 것까지만 구현하였고, 사진 전송이나 폼 전송까지는 이루어지지 못했다. 이 부분은 확장해 나갈 예정이다. -> 피터의 경우에는 코디를 받은 것에 대한 값을 지불하여 결제도 할 수 있다. 결제 api를 사용하여, 어떤 결제 수단이든 이용 가능하다. 위와 같이 ui를 구현하진 않았고, 결제 버튼을 하단에 따로 만들어서 구현하였다. 이 부분도 추후 발전시켜 나갈 예정이다. -> 실제로 결제가 되었고, 카카오페이로 결제 성공했다는 인증 메시지이다.

🔶 아우터

1. 회원 가입

-> 프로필 사진, 이름, 성별, 키, 체중, sns 링크, 한 줄 소개를 입력받고, 추구하는 스타일을 입력한다.

2. 메인 화면

-> 좋아요 횟수에 따라 인기 있는 코디네이터들을 보여준다. 다른 코디네이터들의 활동들을 보면서 경쟁도 할 수 있는 구도를 만들어, 서비스를 조금 더 활성화 시킬 의도였다. 또, 각각의 코디네이터를 누르면 아우터가 작성한 게시물을 비롯한, 아우터의 상세정보를 볼 수 있다.

3. 마이페이지

-> 프로필 편집을 누르면 프로필을 수정할 수 있다. 회원가입할 때 입력했던 모든 정보들을 수정할 수 있다. -> '내가 쓴 게시물 보기'를 눌렀을 때 나오는 화면이다. 내가 작성한 모든 게시물을 한 번에 볼 수 있다. -> '내가 받은 리뷰' 클릭 시, 내가 받은 후기들을 한 번에 모아볼 수 있도록 하였다. -> '아우터 랭킹별 정찰제' 클릭 시, 볼 수 있는 화면이다. 등급제로 운영되어진다고 하였다. 그 등급에 따른 정찰제를 안내하는 페이지이다.

4. 글 작성 페이지

-> 사진과 게시물에 대한 태그를 바텀시트를 통해 선택을 받고, 제목과 게시글에 대한 설명을 작성하여 게시물을 업로드할 수 있다.

🔶 피터

1. 회원 가입

-> 이름, 성별, 키, 체중, 체형을 입력받고, 코디 받고싶은 스타일을 입력한다.

2. 메인 화면

-> 좋아요 횟수에 따라 인기 있는 게시물들을 보여준다. 그 게시물을 작성한 코디네이터 정보도 함께 보여준다. 또, 메인화면에서 필터링을 하여, 그 태그에 해당하는 게시물만 필터링되어 보여지게끔 한다.

3. 마이페이지

-> 여기서도 마찬가지로, 회원의 정보를 수정할 수 있다. 위의 디자인 사진에서는 빠졌는데, 태그도 수정할 수 있게끔 추가해두었다. -> '내가 받은 코디'를 눌렀을 때 보여지는 화면이다. 내가 받은 코디의 정보들, 게시글 정보를 볼 수 있다. -> '좋아요 누른 코디'를 누르면 볼 수 있는 화면이다. 내가 좋아요 누른 게시물들을 보여준다. -> '내가 쓴 리뷰 보기'를 누르면 보여지는 화면이다. -> 피터에서도 마찬가지로 아우터의 랭킹별 정찰제에 대한 정보를 제공해준다.

🌍 BMC (Business model canvas)

아우터, 피터 등급제를 적용하여, 등급에 따른 베네핏을 얻을 수 있게끔하였다. 우리 서비스의 BMC는 아래와 같다.

1. 고객군

• 코디네이터: 프리랜서 코디네이터, 패션디자인학과 학생, 옷에 관심있는 사람
• 소비자: 중요한 약속이있거나, 중요한 미팅이 있는 사람 혹은 옷을 잘 모르는 사람

2. 가치제안

코디네이터 – 자기가 가진 재능을 가치화 할 수 있음, 스팩이 될 수 있음. 소비자 – 재능있는 사람들에게 코디 분석을 받을 수 있음. 자신만의 스타일을 찾을 수 있도록 도와줌

3. 채널

모바일 어플리케이션, 웹

4. 고객관계

1:1 고객 맞춤 서비스 등급별 혜택

5. 수익원(매출흐름)

• 코디네이터: 코디네이터에게 입금시 2~5% 수수료 코디네이터 등급 - 0 ~ 50회 5% / 51 ~ 100회 4%/ 101 ~ 200회 3%/ 201 ~ 300회 2%

• 소비자: 소비자 결제시 0~20% 수수료 소비자 등급 – 0 ~ 5회 20% / 6 ~ 10회 15% / 11 ~ 20회 7% / 21 ~ 30회 0%

서비스의 확장성

일단 우리 팀은 계속해서 이 서비스를 확장 해나갈 예정이다. 프로덕트를 조금 더 다듬어, 실제로 상용화를 시킬 수준까지 만들어볼 예정이다. 아직 구현하지 못한 '후기' 부분을 완성 할 예정이다. 배포 후 주변 지인들에게 사용해보라고 하였고, 이 과정에서 지인들이 준 피드백 또한 반영해서 제대로 베타 테스트를 진행해볼 예정이다. 또한, 현재는 결제 시스템이 사업자 등록해야만, 실제 결제가 이루어지고 있다. (위 사진은 테스트 결제라서, 반환 되어짐) 따라서 이 부분도 실제로 이루어질 수 있도록 해 볼 예정이다. 또한, 현재는 웹 사이트 url로만 우리의 서비스에 접근할 수 있는데, 웹뷰로 어플 형태로도 출시를 할 예정이다.

느낀 점

🌍 기술 측면 (나의 역할)

우리 서비스는 할 일이 2배였다. 왜냐하면 피터와 아우터로 나뉘기 때문이다. 따라서, 디자이너, 프론트, 백엔드 할 것 없이 할 일이 2배였다. 프론트는 2명이었기 때문에 아우터와 피터로 주로 나누어서 개발을 진행하였다. 나는 '아우터'를 주로 맡아서 작업을 진행하였다. 공통적인 부분은 융통성있게 나누어 개발을 진행하였다. 나의 처음 목표와 그 달성 목표를 비교해보면서, 성과를 내보려고 한다.

나의 처음 목표

아래는 gdg 1주차 회고록에 내가 적어둔 목표이다.

• 깃허브 pull-request 방식에 대한 완벽한 이해 (협업 방식 완벽 적응)
• 기본 백엔드 지식 습득 (API 설계 방법, DB 작성 방법)
• 프론트엔드 js 완벽 익히기 (정규 표현식...)
• 프론트엔드 hook 사용법 익히기
• PM 역할 이해하기
• 프론트, 백엔드 axios 완벽 습득
• 기회가 된다면 ts나 next.js 해보기
• 꾸준한 벨로그 업로드

목표 달성 정도

결과부터 말하자면, 목표 이상의 것들을 달성해낸 것 같다. 이번 프로젝트를 통해 PR 방식을 완전히 익힐 수 있었고, 협업에 대한 두려움이 사라졌던 것 같다. 아니? 심지어 재밌기까지 하였다ㅎ 또한, 기본 백엔드 지식들에 대해서도 익힌 것 같다. 백엔드와 통신하는 과정에서 도커 사용 방법이나, 백엔드에 s3를 통해 사진을 업로드하는 방법, 백엔드에서 세션과 쿠키 통해 정보 넘겨주는 것, 도메인 설계란 무엇인지를 익힐 수 있었던 것 같다. 또, 우리 팀은 꾸준한 소통을 하였기 때문에, 백엔드 친구들이 사용하는 용어들도 자주 접했던 것 같다. 또, react hook이란 이런거구나,,, 프론트란 이런거구나를 이번 프로젝트를 통해서 뼈저리게 느낀 것 같다. 지금까진 단지 겉핥기에 불과했구나. useEffect나 useRef 사용 방법, 부모와 자식 컴포넌트 props 전달을 통한 이벤트 핸들링, 페이지 이동 시 params 전달, 상태 관리를 통한 토글링을 익히게 된 것 같다. 또, 진척도 작성하는 것들이나 PM 친구가 하는 일들을 옆에서 보면서, pm은 이런 일을 하는 구나, 디자이너와 이런 식으로 협업하는 구나 이런 것들 또한 알게 된 것 같다. 또 가장 큰 수확 중 하나는 프론트, 백엔드 axios 을 거의 완벽 습득했다는 것이다. 백엔드에서 axios로 정보를 받아오는 방법과 그 받아온 정보를 뿌려주는 방법, 통신하는 과정에서 생겨나는 cors등 각종 에러 해결 방법들, 에러 발생 시 백엔드와 소통하는 방법, 에러 발생의 시발점을 찾는 방법을 익힐 수 있었다. js 리액트를 활용하였기 때문에, ts나 next.js를 익힐 시간은 없었지만, 리액트를 완벽히 감을 잡은 것 같아 더욱 만족스럽다. 위에서 말한 내가 배운 바들은 대부분 매주, 매번 벨로그에 꾸준히 업로드 해 놓았다. 이렇게 벨로그에 업로드하고 공부하는 과정에서 단기간에 정말 많은 성장을 이루어낸 것 같다. 이후에 채팅이나 결제, 소셜 로그인 부분을 맡은 친구들에게 물어봐서 이 파트의 백엔드 지식도 조금 공부해볼 예정이다!! 이러한 지식들은 프론트를 구현하는 데에도 도움이 될 것이라고 생각되기 때문이다!

🌍 커뮤니케이션 측면

1.

우리 팀은 이미 팀이 꾸려진 상태에서 신청을 하였다. 이미 친한친구들로 꾸려진 팀이 있었고, 한 친구의 제안으로 뒤늦게 합류하게 된 것이다. 내가 아는 친구는 처음엔 단 한 명이었고, 친구의 소개로 합류하였기 때문에 "민폐를 끼치지 말아야겠다"라는 생각과, 그 친구들로 이루어진 팀의 분위기를 파악하는 데에도 시간이 조금 걸렸던 것 같다. 따라서 나도 처음에는 말 한 마디, 한 마디가 조심스러워 더욱 신경쓰는 부분이 있었고, 그 팀의 분위기를 따라가자고 하였다. 그렇기에 나는 나의 페이스대로 최선을 다해 팀 내에서 나의 역할을 수행하고자 다짐하였고, 생각보다 나의 친화력으로 빠르게 적응을 해 나갔다. 더불어, 팀원들도 굉장히 열정적이었고, 이미 친한 사이들이었어서 그런가 소통이 원활하게 이루어졌던 것 같다. 특히, 나는 백엔드 쪽 지식들은 아는 것이 많이 없어서 초반에 도메인 설계하고 할 때 모르는 용어들도 꽤나 있었기 때문에, 나의 실력이 여기까지인가..라며 혼자 자책하기도 하였다. 하지만, 이런 과정도 배움이라 생각하고, 백엔드의 지식들 (도메인 설계란 무엇인지,,.etc)도 차근히 공부하며 벨로그에 정리해 나갔고, 같은 팀원 친구들에게 열심히 물어가며 공부했던 것 같다. 이 프로젝트를 진행하면서, **난 생각보다 적응력이 더 뛰어나고, 커뮤니케이션 능력이 나쁘지 않다는 사실을 깨닫게 되었던 것 같다. 또, 내 한계를 인식한 상황에서도 좌절하지 않고, 배움의 자세를 취하려는 내 모습을 발견했던 것 같다. **

2. 팀에서 나의 역할은?

팀에서 나의 역할은 무엇이었을까, 나는 프로젝트를 진행할 때 팀을 어떤 방향으로 이끄는 편인가 곰곰히 생각해보았다. 이를 위해서 같이 프로젝트를 진행한 팀원들한테도 물어보았다. "프로젝트 같이해보면서, 나는 어떤 팀원인 것 같아??" 난 매사 열정적인 게 나의 장점이라는 생각은 해 왔다. 하지만 이렇게 같이 프로젝트를 진행한 팀원들을 통해 전해들으니까, 나의 강점을 명확히 알 수 있었던 것 같다. 내 강점에 따른 팀 내에서, 내 역할은 2가지로 표현할 수 있을 것 같다.

동기부여

나의 강점은 내 주변 사람들에게 열정을 심어주고, 동기부여를 주는 것 같다. 사실 3~4주차 정도부터는 해결되지 않는 에러들과 방대한 작업량에 번아웃이 올 듯한 시기도 있었다. 또, 어느 날은 정말 하기 싫은 날도 있었다. 그럴 때마다 나는 내가 끝까지 그 에러를 해결하고 말겠다는 태도나, 같이 일하는 친구가 지쳐할 때 '화이팅! 고생했어!'라는 말들을 건냈던 것 같다. 나는 팀 프로젝트를 수행하는 데에 있어서, 마지막의 결과물보다는 끝까지 팀원들이 팀워크를 유지해나가며 성장을 해 나가는 것을 중요하게 생각하는 것 같다. 나는 이런 상황에서 팀을 격려하여 팀을 움직이는 역할을 수행해낸 것 같다. 이를 통해 우리 팀이 끝까지 안정적으로 목표에 도달할 수 있게끔 이끌어낸 것 같다는 생각이 든다. 초반에는 나만 알지 못하던 사람이었기 때문에 적응의 시간도 있었지만, 그 속에서도 내 역할로 최선을 다하고자하는 진심이 팀원들에게 잘 전달이 되어진 것 같아, 더불어서 우리 모두가 만족스러운 결과를 얻게되어 너무나 감사할 따름이다.

완성

또 나는 '완성'의 강점을 살려 조금 더 완벽한 결과물을 나을 수 있게 한 것 같다. 나는 무언가를 완벽하게 해내고자하는 욕구가 있다. 조금 더 신중하게, 꼼꼼하게 높은 품질의 결과물을 추구하는 경향이 있다. 중간중간 폴더들을 정리하고, 네이밍 규칙을 적용하는 것과 같이 체계적으로 일을 수행하고자 했다. 따라서, 나는 끈기있게 마지막까지 테스트를 수차례 진행하며, 세부적인 것까지 꼼꼼하게 체크하고 빈 틈을 찾으려고 하였다. 그 사소한 디테일들까지 잡고자 하였던 것 같다. 사소한 UI가 사용자에게는 크게 느껴질 것이라고 생각하였기 때문이다.

🌍 전반적인 느낀 점

1.

솔직히 말하자면 우리 팀이 1등을 할 것 같았다. 그냥 느낌이 그랬던 것 같다. 그 만큼 우리의 노력에 후회가 없었고, 자신이 있었던 것 같다. 대학교 4년 동안 이렇게 몰입해서 수행했던 프로젝트 경험은 거의 처음이었던 것 같다. 눈 뜨자마자 책상에 앉아 코딩을 하고, 시간 가는 줄 모르게 코딩을 하다보면, 하루가 끝나 있었다. 그렇게 새벽 늦게까지 코딩을 하다보니, 운동도 하지 못하고 피로도 누적되어, 6주가 마무리될 무렵에는 온 몸이 쑤셨던 것 같다...

2.

또, 6주 간의 과정이었지만, 실제로는 4주 4일 뿐이었다. 이 많은 기능들을 약 5주만에 완성해낼 수 있을까 의구심이 들었지만, 완벽한 팀워크와 끝까지 식지 않는 팀원들의 열정 덕분에 모두 해낼 수 있었던 것 같다. '성장'이라는 프로그램의 취지를 달성하는 경험이었던 것 같다. 이를 계기로 도전하는 것에 대한 두려움으로부터 벗어난 것 같다. 이 전에는, 무언가를 공부하기 시작하는 데 있어서, 미리 지레 겁을 먹고 섣불리 시작하지 못 했던 것도 있다. '어려울거야....' 라면서 말이다. 하지만 이제는 별의 별 트러블 슈팅을 해결하면서, 또 단기간에 완성도 높은 서비스를 완성해보면서 이젠 어떤 토이 프로젝트던지 과감히 해낼 수 있을 것 같다는 자신감이 생겼다. 특히나, 이번 프로젝트를 통해 나의 몰입도와 집중력이 꽤나 상당하는 사실을 깨닫게 된 것 같다. 프로젝트 말고도 어떤 일을 할 때에도 이 경험이 큰 밑거름이 될 것 같다.

3.

나는 지금껏 프로젝트를 진행할 때에, 주어진 기간에 완성을 해낼 수 있느냐와 같은 구현 가능성에 집중하여 주제를 선정했던 것 같다. 하지만, 이번에는 실제 창업을 한다는 마음가짐으로 주제를 선정하였고, 구현 가능성은 뒷전이었다. 하지만 이 많은 기능들을 이 단기간에 수행해낸 것을 보면, 구현 가능성보다는 창의성 서비스에 중점을 두고 아이디어를 내는 것의 중요한 것 같다는 생각이 든다. 자신을 과소 평가 하지말자:) 너무너무 고생했다 우리 팀! 앞으로는 어떻게 더 확장할까 고민해보고 기회가 된다면 진짜 사업까지~~?

이러한 프로그램을 진행하고 기획해주신 GDG Whatever 분들 고생하셨고, 감사합니다:)

각종 링크

• 시현 영상: https://www.youtube.com/watch?v=cz7dGH-0AtM

• Instagram: https://www.instagram.com/outfitin_official/?igshid=NzZhOTFlYzFmZQ%3D%3D

• 최종 발표 PPT: https://www.notion.so/notionofso/PPT-1d4a40396f454a48acc475e08a63b858

• notion: https://www.notion.so/notionofso/GDG-2117ffdb202e49c3906190262e623803

• github: https://github.com/orgs/OutFitIn/repositories

• figma: https://www.figma.com/file/qStAdcM6dhGwdAS7O8uNFC/Whateverthon-design?node-id=0%3A1&mode=dev