넘블 소개
home
리서치 목록
🏆

가이드라인[디자인-프론트-백엔드 연계 모바일용 웹 서비스 만들기 챌린지]

디자이너-프론트엔드-백엔드 연계 챌린지에 참여해주신 넘블러 여러분 안녕하세요! 저는 이번 챌린지 안내를 맡게된 넘블단의 멋쟁이 개발자, 로이예요!
만약 FAQ까지 읽고 난 뒤에도 궁금한 점이 있다면, '넘블의 채널톡'에 질문 부탁드려요.

목차

1.
기본 기획서
2.
실력이 좋은 넘블러를 위한 upgrade 기능
3.
FAQ
가이드라인은 위와 같은 순서로 작성되었어요. 누르면 해당 페이지로 이동하니 빠르게 찾아 활용해 보세요!

숏폼(15분 이내) 영상 서비스 기획서

안녕하세요! 넘블입니다!
숏폼 영상 서비스 제작 챌린지에 참여해주셔서 정말 감사드려요!
이번 챌린지는 한 달만에 서비스를 런칭해야 하기 때문에 참여자 분들의 아이디에이션 시간을 줄이기 위해 기획서를 제공해드려요!
단, 세부 브랜딩 컨셉을 팀 내에서 스스로 정해야 된다는 점도 인지해주세요!
그럼 함께 힘차게 넘블해봐요!

꼭 읽어주세요!

앱이 아닌 웹으로 구현해주세요. 모바일 웹 화면에 맞게 구현해주세요. 만약 팀내 여유가 되신다면 데스크탑 화면도 구현하셔도 괜찮지만 우선순위는 아니에요.

야망 넘치는 넘블러들을 위한 챌린지 KeyPoint

1. 고객이 이용할 수 있을 정도의 오류 없는 MVP 런칭 2. 고객이 사용 할만한 브랜드 컨셉 3. (여유가 된다면) 추가 기능 구현

구현 필수 기능

1. MVP 기본 기능 2. 서버 배포 * 필수기능 개발을 진행하신 후에 여유가 되신다면, 추가 기능을 개발하시거나 추가 로직을 설정하셔도 좋아요. (해당 경우 가산점이 부여돼요!)

결과물 제출은 필수!

만약 서버 배포에서 막히거나 기본 기능을 100% 구현하지 못하더라도 괜찮아요. 열심히 노력한 결과물만 제출만 하면 당신은 넘블러!

결과물 제출양식

Step 1 배포한 서비스 URL
Step 2 Github 주소
Step 3 Figma 혹은 PDF 형태의 디자인 결과물
Step 4 서비스 컨셉에 대한 이유를 정리한 PDF 서비스 컨셉에 대한 이유에는 타겟 고객(영상 업로드 고객, 영상 시청 고객), 장기적인 비즈니스 모델 등이 정리되어 있어야 해요. 노션에 정리해서 제출하셔도 괜찮습니다. 비즈니스 모델 정립이 어려우실 경우, 넘블 측 담당자가 팀 당 1주일에 30분~1시간 정도 도움을 드릴 수 있어요.
Step 5 회고록을 작성한 블로그 URL
블로그는 Notion에 작성하고 제출하는 것을 권장합니다.
블로그를 작성할 때는 개발자분들은 다음과 같은 내용을 포함해주세요.
주요 코드에 대한 설명
주요 로직과 그 이유
코드 내에서 고려한 특정 유저 행동과 그에 대한 대처
활용한 라이브러리와 그 이유
프로젝트를 진행할 때 어려웠던 점 / 고민했던 부분과 해결방법
Step 6 위 내용을 담아 이메일로 발송해주세요.
결과물 제출 이메일 numble.challenge@gmail.com
이메일 제목 [연계 챌린지/팀 이름/팀장 이름]의 형식으로 제출해주세요.
제출할 때 이메일 본문에 반드시 기재해주셔야 할 사항은 아래와 같아요.
1.
성함(팀원 전원)
2.
전화번호(팀원 전원)
3.
넘블 가입 이메일(팀원 전원)
4.
닉네임(팀원 전원)
상위 10%로 선정되면 결과물과 함께 공개될 이름이에요. 가명, 실명 모두 가능해요.
5.
결과물에 공헌하지 않은 사람
만약 결과물에 공헌하지 않은 사람이 있을 경우 작성해주세면 해당 인원에겐 결과물 제출에 따른 환급이 진행되지 않고 나머지 팀원들에게 환급이 진행됩니다.

기본 기획서(유저 스토리)

와이어프레임(유저 Flow 기반)

위의 와이어프레임에서 보여지는 기본 기능 및 화면을 구축해주세요.
디자이너님은 와이어프레임을 기반으로 마음껏 수정해주세요.

크롬 개발자화면에서 모바일화면 기준(ex. Galaxy S9+)으로 채점합니다.

Prototype

화면 ZIP 파일

연계챌린지 와이어프레임 (공유_최종)_2x.zip
1299.4KB
연계챌린지 와이어프레임 (공유_최종).fig
109.7KB

MVP(Minimum Viable Product)

기본 기능 및 유저 스토리

1. 메인페이지

메인 페이지
메인 페이지 콘텐츠 로직(수정가능)

2. 회원가입/로그인

회원가입

로그인

3. 영상 등록 기능

영상 등록

영상 수정/삭제

4. 영상 재생 페이지

영상 재생 페이지

5. 좋아요 기능

좋아요 기능

6. 관심영상 페이지

관심영상 페이지

7. 프로필 페이지

프로필 페이지

8. 관리자 페이지(Admin) - DESKTOP용

Figma

관리자 페이지

9. Google Analytics 설치

유저 행동 데이터를 확인하기 위해 GA를 설치해주세요.
Google 애널리틱스 고객센터를 참고해주세요.

10. 예외 사항 처리

Q. 만약 고객이 데스크탑으로 서비스를 이용한다면?
데스크탑으로 서비스에 접속했을 경우, ‘이 서비스는 모바일에 최적화된 서비스이므로 모바일로 이용해주세요’라는 팝업을 띄워주세요.
Q. 만약 admin에서 영상을 삭제한다면 고객은 어떻게 알 수 있을까?
영상을 삭제했을 때 영상을 업로드한 회원에게 따로 알림을 보내진 않습니다.
다만, 여유가 된다면 삭제된 영상을 올린 회원이 마이 비디오 페이지에서 해당 영상의 썸네일에 ‘운영정책에 맞지 않는 영상이어서 삭제처리 되었습니다.’라는 썸네일을 뛰워주는 것을 개발하면 좋을 것 같습니다.(정상적인 영상과는 달리 클릭해도 영상 재생 페이지로 넘어가지 않고 클릭이 안됩니다.)

추가기능

실력이 좋은 넘블러를 위한 Upgrade 기능

서버 배포 및 블로그 작성이 다소 시간이 걸릴 수 있으므로 너무 무리하지 마시고 먼저 서버배포부터 완료하고 Upgrade 기능에 도전해봐요!

회원가입시 핸드폰 인증 추가+회원 유형에 블랙리스트 추가

여유가 되신다면 핸드폰 인증기능을 추가해보는건 어떨까요?
핸드폰 인증기능을 만들어야 블랙리스트로 등록하는게 의미가 있기 때문에 제안드려요
만약 원하지 않는 동영상을 올리는 회원이 있다면 블랙리스트로 설정해 영상 업로드를 막고, 추가 가입도 막아보세요

영상 용량제한/길이 제한

영상이 너무 무거우면 서버비용이 부담되죠? 용량제한이 없다면 일부러 어뷰징하는 유저가 있을 수도 있으니 200MB이상인 영상은 upload가 안되게 설정해보는건 어떨까요?
영상의 용량이 200MB를 넘는지 검사해 200MB가 넘는다면 ‘200MB이상은 업로드할 수 없습니다’라는 경고 문구를 띄워주세요.
숏폼 영상이다보니 15분 이하로 영상을 제한해보는건 어떨까요? 15분 이상의 영상은 업로드를 막아주세요!
영상의 길이가 15M를 넘는지 검사해 15M가 넘는다면 ‘영상은 15분을 넘을 수 없습니다. 15분 이하의 영상만 올려주세요’라는 경고 문구를 띄워주세요.

댓글 기능

영상 페이지에서 댓글을 남길 수 있으면 어떨까요?
대댓글 기능은 아니더라도 간단한 댓글을 남길 수 있으면 더 소통이 활발해지지 않을까요?
유튜브를 참고해보세요!

대규모 트래픽 견딤

만약 10만명 이상이 동시접속한다고 가정했을 때 트래픽을 견딜 수 있게 개발해보면 어떨까요?

메인 페이지 큐레이션 알고리즘 개발

메인 페이지에서 수동적인 큐레이션이 아닌 자동화 큐레이션 로직을 만들어보면 어떨까요?

메인 페이지 개인별 맞춤형 큐레이션

MVP 기능은 모든 사람에게 똑같은 콘텐츠가 뜨는데 유저의 행동 기반으로 맞춤형 영상을 띄워주는 로직을 개발해보면 어떨까요?

메인 페이지 카테고리 분류에 따른 영상 큐레이션

메인 페이지에서 세부 카테고리에 따라 영상을 나눠볼 수 있게 하면 어떨까요?
처음에 영상을 올릴 때부터 카테고리를 선택할 수 있어야겠죠?
영상 업로드시 다음과 같이 카테고리를 고를 수 있게 하면 어떨까요?
세부 카테고리를 만드신다면 팝업창이 떠서 다음의 카테고리 중 하나를 선택할 수 있게 만들어주세요.
카테고리는 브랜드에 알맞는 세부 카테고리를 고민해서 넣어주세요.

Admin 추가 기능 개발

관리가 편하게 Admin에 추가적으로 필요한 기능을 개발해보면 어떨까요?

팔로우, 팔로잉 기능 개발

유튜브나 인스타그램처럼 다른 사람을 팔로우할 수 있고 해당 사람이 올리는 콘텐츠를 볼 수 있게 팔로우, 팔로잉 기능을 개발해보면 어떨까요? 만약 이 기능을 개발한다면 my profile에서 이 기능을 관리하는 페이지가 추가되야겠죠?

드로그앤드랍 기능 개발

지금은 show id값을 수동으로 바꿔 보이는 순서를 조작하는데 드로그앤 드랍으로 훨씬 쉽게 영상의 순서를 바꿀 수 있다면 어떨까요?

유저 이상행동에 대한 대처

유저가 비정상적인 행동을 했을 때, 혹은 예상치 못한 행동을 했을 때도 서비스가 돌아가는데 문제가 없게 미리 대처하면 어떨까요?
넘블러 여러분! 이제 도전할 준비 되셨나요? 도전하는 것만으로 넘블러인 당신은 이미 상위 1%! 도전한 여러분을 뿌듯해하며 스스로를 한 번 안아주는건 어떤가요?
혹시 결과물을 만들어내지 못할까봐 걱정되신다고요? No humble! 자신을 믿어봐요!
이제 넘블과 함께 초기 당근마켓을 구축해 볼 시간이에요! 도전 Start!!

FAQ

Q. 이미지나 아이콘은 제공 안해주시나요?

이미지나 아이콘은 저작권 문제가 있어 제공해 드리기 어려워요.
디자인-개발 연계 챌린지이다보니 디자이너분들께서 사용하시는 서비스가 있을 것 같아 별도의 추천을 드리지 않는 점 이해부탁드려요

Q. 첨부한 이미지와 똑같이 구현해야 하나요?

아니요, 참고하셔서 만들기만 하면 됩니다! 똑같이 만들어야 하는건 아니에요 단, 숏폼 영상 서비스로서 기본 기능이 동작해야 합니다.

궁금하신 내용은 언제든 채널톡을 통해 문의주세요 :)

TOP