👔 서비스 소개🤔 기획 배경OOTD란?패션에 대한 관심 급증기존 SNS 서비스에서의 OOTD 태그 사용💫 핵심 기능👨🏻💻 기술스택 및 개발환경🚀 Stacks🛠 Tools👥 Collaboration🛠️ 기능 명세서유저 스토리화면 명세 & 와이어프레임협업 방식👏🏻 GitFlow
👔 서비스 소개
Styled는 OOTD를 공유할 수 있는 심플한 SNS 플랫폼입니다
🤔 기획 배경
OOTD란?
Outfit Of The Day : 오늘 입은 옷차림, 오늘의 패션
OOTD는 주로 패션에 관심있는 사람들이 자신의 스타일을 공유하고 패션 아이템을 소개하기 위해 사용하는 용어입니다. 단순히 옷차림을 공유하는 것 뿐만 아니라, 자신의 개성과 스타일을 표현하기 위한 목적이 되기도 합니다.
주로 사진과 옷 정보에 대한 링크를 기재해 공유를 하는데, 이러한 OOTD 게시글은 다양한 스타일과 트렌드를 알려주기 때문에 서로 영감을 주고받을 수 있는 커뮤니티를 형성합니다. 그렇기 때문에 주로 SNS 플랫폼에서 많이 볼 수 있는 용어입니다.
패션 트렌드를 파악하고 싶다면 OOTD를 검색해 참고할 수 있습니다.
패션에 대한 관심 급증
통계에 따르면, 2022년 홈쇼핑에서 패션 업계 시청률이 가장 높았고, 2023년 옷 구매 플랫폼(무신사)의 매출액이 전년 대비 54% 급증하는 등 남녀노소 패션에 대한 관심이 점점 늘고 있는 추세입니다.
기존 SNS 서비스에서의 OOTD 태그 사용
패션에 관심이 많은 사람들은 주로 인스타그램에서 본인의 ootd를 공유합니다. 실제로
#ootd를 검색해보면 정말 많은 게시물이 존재하는데, 아예 ootd를 공유하는 계정을 따로 생성하여 ootd만 공유하는 사람들도 많습니다. 그러나 기존 SNS의 경우 여러 사용자들이 다양한 주제를 공유하는 플랫폼이기 때문에 다른 사람의 ootd를 보기 위해서는 태그 검색이 필요합니다. 또한
#ootd의 경우 현재 기준 게시물이 약 4.3억개인데, 이는 한국 뿐만 아니라 전세계 사용자들이 사용하고 있기 때문입니다. 그래서 한국인들은 주로 #오오티디라는 한글 태그를 붙여서 공유를 하고 있습니다.이처럼 기존 서비스에서의 ootd 공유 과정에서는 불필요한 과정들이 많기 때문에, ootd만을 찾아가고 소통하는 과정이 다소 불편합니다. 그렇기 때문에 패션에만 관심이 있는 사람들끼리 공유할 수 있는, ootd만을 공유할 수 있는 플랫폼이 필요하다고 생각했습니다.
이렇듯, Styled는 자신의 ootd를 공유하며 소통하고자하는 사람들의 니즈를 충족하고자 기획된, OOTD만을 위한 패션 특화 소셜 네트워크 서비스입니다.
💫 핵심 기능
나만의 패션 네트워크
- Styled는
캐주얼,클래식,스트릿,미니멀등 스타일 별 채널을 형성하여 자신의 취향에 맞는 스타일의 유저를 팔로우하고, 자신의 ootd를 공유할 수 있습니다.
- 또한, 자신의 평소 스타일 외에도 관심이 갔던 옷 스타일에 대해 쉽게 접근하고 소통할 수 있습니다.
실시간 데일리룩
- Styled는 실시간으로 오늘의 ootd에 대해 확인하고, 공유할 수 있습니다.
자신이 원하는 스타일 검색
- Styled는 검색을 통해 원하는 스타일을 찾 고, 이를 자신의 ootd에 참고 할 수 있습니다.
👨🏻💻 기술스택 및 개발환경
🚀 Stacks
TypeScript
React.js
React-query
Zustand
🛠 Tools
Figma
Git
VSCode
👥 Collaboration
GitHub
Notion
Discord
Google Sheet
종류 | 기술 스택 | 버전 | 선택 이유 |
Language | TypeScript | ^5.2.2 | - 컴파일 과정에서 타입을 지정하므로 에러를 방지할 수 있다. |
Library | React.js | ^18.2.0 | - 활발한 생태계를 가지고 있다.
- 컴포넌트의 재사용이 쉽다. |
State management | Zustand | ^4.4.7 | - 러닝 커브가 낮다.
- 보일러 플레이트가 없다.
- redux 기반이라 익숙하다.
- 디버깅 용이 : redux Devtools |
Routing | React router | ^6.21.1 | - 현존 가장 편리한 라우팅 라이브러리 |
Data-fetching Lib | React Query | ^5.15.0 | - 캐싱 가능
- 코드 작성량이 적음 : 유지보수 용이
- 비동기 과정 선언적 관리 가능
- React Hook과 유사 |
Async HTTP | Axios | ^1.6.3 | - response timeout 가능
- Promise 기반이라 다루기 편함
- 크로스 브라우징 최적화 가능 |
Style | styled-components(CSS-in-JS) | ^6.1.3 | - CSS 컴포넌트화 가능
- Props 및 타입 지정 가능: 조건부 스타일링
- 모듈화 가능 |
Build & Deploy | Vite & Vercel | ^5.0.8 | - 빠른 빌드 및 가벼움 |
Version control | Git & Github | - | - 원격 저장소를 통해 쉽게 협업이 가능하다. |
RunTime Env | Node | 20.10.0(LTS) | - 최신 버전 |
Package Manger | npm | 10.2.3 | - 활발한 생태계, 다양한 패키지 보유 |
🛠️ 기능 명세서
유저 스토리
Epic | Story | Description |
회원 관리 | 회원 가입 | 아이디(Email), 이름(Full Name), 비밀번호를 입력하여 회원가입 성공 시 메인 페이지로 이동한다. |
ㅤ | 회원 탈퇴 | 로그인 시 탈퇴를 누르면 로그아웃 처리 후 메인 페이지로 이동한다. |
ㅤ | 로그인 | email, password 입력 후 로그인 성공 시 메인 페이지로 이동한다. |
ㅤ | 로그아웃 | 로그인 시 로그아웃하면 메인페이지로 이동한다. |
ㅤ | 회원정보 조회 | 비로그인이어도 사용자 ID에 해당하는 사용자를 조회할 수 있다. |
ㅤ | 회원 정보 수정 | 로그인 시 자신의 이름(Full Name)을 변경할 수 있다. |
ㅤ | 회원 목록 조회 | 비로그인이어도 사용자는 회원 목록을 조회할 수 있다. |
ㅤ | 회원 검색 | 비로그인이어도 사용자는 이름으로 회원을 검색할 수 있다. |
ㅤ | 비밀번호 수정 | 로그인 시 자신의 비밀번호를 변경할 수 있다. |
ㅤ | 팔로우 등록 | 로그인 시 특정 사용자를 팔로우 할 수 있다. |
ㅤ | 팔로우 취소 | 로그인 시 특정 사용자를 언팔로우 할 수 있다. |
채널 관리 | 채널 목록 조회 | 비로그인이어도 사용자는 모든 채널 목록을 조회할 수 있다. |
ㅤ | 채널 정보 조회 | 비로그인이어도 특정 채널 정보를 조회할 수 있다. (한글일 때, 인코딩 필요) |
포스트 관리 | 포스트 등록 | 로그인 시 특정 채널에 포스트를 작성할 수 있다. |
ㅤ | 포스트 검색 | 비로그인이어도 전체 포스트 목록을 조회할 수 있다. |
ㅤ | 포스트 상세 조회 | 비로그인이어도 특정 포스트의 상세 정보를 조회할 수 있다. |
ㅤ | 포스트 좋아요 등록 | 로그인 시 특정 포스트에 좋아요를 등록할 수 있다. |
ㅤ | 포스트 좋아요 삭제 | 로그인 시 특정 포스트에 좋아요를 취소할 수 있다. |
ㅤ | 포스트 댓글 작성 | 로그인 시 특정 포스트에 댓글을 작성할 수 있다. |
ㅤ | 포스트 댓글 삭제 | 로그인 시 특정 포스트에 내가 작성한 댓글을 삭제할 수 있다. |
ㅤ | 포스트 목록 조회 | 비로그인이어도 특정 채널의 포스트 목록을 조회할 수 있다. |
ㅤ | 사용자 포스트 목록 조회 | 비로그인이어도 특정 사용자의 포스트 목록을 조회할 수 있다. |
ㅤ | 포스트 수정 | 로그인 시 내가 작성한 포스트를 수정할 수 있다. |
ㅤ | 포스트 삭제 | 로그인 시 내가 작성한 포스트를 삭제할 수 있다. |
알림 관리 | 알림 목록 조회 | 로그인 시 나의 알림 목록을 조회할 수 있다. |
ㅤ | 알림 읽음 처리 | 로그인 시 나에게 온 알림을 읽음처리 할 수 있다. |
ㅤ | 댓글 알림 보내기 | 로그인 시 상대방에게 댓글 알림을 보낼 수 있다. |
ㅤ | 팔로우 알림 보내기 | 로그인 시 상대방에게 팔로우 알림을 보낼 수 있다. |
ㅤ | 좋아요 알림 보내기 | 로그인 시 상대방에게 좋아요 알림을 보낼 수 있다. |
ㅤ | 채팅 알림 보내기 | 로그인 시 상대방에게 메세지 알림을 보낼 수 있다. |
보너스 요구사항 | 현재 접속 중인 사용자 조회 | 비로그인이어도 현재 접속 중인 사용자 목록을 조회할 수 있다. |
ㅤ | 메세지 전송 | 로그인 시 특정 사용자에게 메세지를 전송할 수 있다. |
ㅤ | 메세지 목록(소통한 유저 목록) 조회 | 로그인 시 나의 메세지 목록(소통한 유저 목록)을 조회할 수 있다. |
ㅤ | 특정 사용자 메세지 목록 조회 | 로그인 시 특정 사용자와 소통한 메세지 목록을 조회할 수 있다. |
ㅤ | 메시지 확인 처리 | 로그인 시 특정 사용자와 나눈 메시지를 읽음 처리 할 수 있다. |
ㅤ | 프로필 이미지 변경 | 로그인 시 나의 프로필 이미지를 변경할 수 있다. |
ㅤ | 커버 이미지 변경 | 로그인 시 나의 커버 이미지를 변경할 수 있다. |
ㅤ | 포스트 이미지 등록 | 포스트를 생성할 때 이미지도 생성할 수 있다. |
ㅤ | 다크 모드 | 사용자는 다크모드를 사용할 수 있다. |
관리자 | 채널 생성 | 채널 이름, 채널 설명, 로그인한 사람만 볼 수 있는 여부를 통해 채널을 생성할 수 있다. |
추가 사항 | API BASE 주소 | |
ㅤ | 예외 처리 | 프론트엔드에서 Form Validation |
ㅤ | Optional | 값을 넣지 않아도 동작하는 필드 |
ㅤ | Nullable | null이 내려올 수 있는 필드 |
ㅤ | [] | 리스트 타입 |
ㅤ | 관리자 계정 | email : admin@programmers.co.kr // password : programmers |
화면 명세 & 와이어프레임
협업 방식
👏🏻 GitFlow
GitFlow 브랜치 전략을 기반으로 협업을 진행합니다.
release를 제외한main,dev,feature,hotfix브랜치를 활용합니다.
main: 실제 배포되는 프로덕트만을 관리합니다.
dev: 기능 개발을 관리하는 브랜치로, 해당 브랜치에서 Story 기준으로feature브랜치를 분기합니다.
feature:feature/#{issue-number}-{featureName}과 같은 형식으로 작명하며, 해당 기능의 구현이 완료된 후 제거합니다.
hotfix: 실제 배포 이후 발생하는 에러들을 처리합니다. 이후main브랜치와dev브랜치에 반영합니다.
SourceTree 툴을 이용하여 협업 프로세스를 시각화하고, 충돌을 관리합니다.