---
# System prepended metadata

title: MORA 기획서

---

# MORA 기획서

> *개발자들이 모이는 라디오*

`MORA` = `보이는 라디오` + `모여서 각자 코딩`

## 배경

많은 개발자들은 개발을 할 때 노래를 듣는 경우가 많다. **MORA**는  다양한 채널을 제공해 사용자의 취향에 맞는 노래를 실시간으로 함께 듣게 한다. 원하는 컨셉의 채널이 있다면 직접 만들어 운영할 수도 있고 기존 채널에 참가하여 실시간으로 채팅을 나눌 수도 있다. 이는 한 공간에 모여 개발하는 기분을 사용자에게 제공하고 작업 효율을 높일 것이라 기대된다.

## 기능

![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/1.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/1.png?raw=true)

## 페이지

1. 공통: 모든 페이지에 공통으로 적용됨

    ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/2.png](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/2.png)

    공통 컴포넌트 와이어 프레임

    - 왼쪽 메뉴바
        - 홈버튼
        - 채널 생성
            - 채널 생성 버튼 클릭 시 채널 생성 페이지로 이동
        - 설정(프로필)
        - 하단에 프로필 이미지 제공
            - 디폴트 값 이미지 (비회원 및 사진없음)

            ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/3.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/3.png?raw=true)

            - 클릭시 드롭다운

            ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/4.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/4.png?raw=true)

    - 상단 메뉴바
        - 청취 중인 정보
2. 메인

    ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/5.jpg?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/5.jpg?raw=true)

    메인 페이지 와이어 프레임

    - 각 리스트는 가로 스와이프로 열람할 수 있다.
    - 청취자 순으로 채널 리스트 제공
    - 태그별 맞춤 리스트 제공
    - 전체 채널 리스트 제공
        - 전체 채널 검색 기능 제공 (실시간 필터링해서 렌더링)
3. 채널

    ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/6.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/6.png?raw=true)

    - 실시간 채팅
        - 채널 개설자의 메세지는 닉네임의 하이라이팅 색을 다르게 지정하여 차별화

            ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/7.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/7.png?raw=true)

        - 코드처럼 =, ; 하이라이팅을 이용해 메세지 구성 (닉네임 = "메세지 내용";)

            ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/8.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/8.png?raw=true)

        - 신청곡이 플레이리스트에 추가될때 다음 메세지 자동 생성

            ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/9.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/9.png?raw=true)

        - 다음 노래가 재생될 때 메세지 자동 생성

            ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/10.png](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/10.png)

    - 채널 정보
        - 채널 제목
        - 노래 리스트 정보(제목, 가수)
        - 채널 개설자 정보(계정 아이디)

        ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/11.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/11.png?raw=true)

4. 인증: 깃허브로 인증 할 수 있는 페이지

    ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/12.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/12.png?raw=true)

5. 채널 생성/수정 페이지 


    ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/13.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/13.png?raw=true)

    - 채널의 생성, 수정 여부에 따라 오른쪽 하단의 버튼의 텍스트가 다르게 보여진다.
    - 플레이리스트를 추가/삭제한다.
        - 왼쪽의 아이콘을 통해 드래그앤드롭으로 순서를 조정한다.
        - 오른쪽의 휴지통 아이콘을 통해 노래를 플레이리스트에서 제거한다.
        - 플레이리스트에는 노래 제목과 가수 이름을 표시한다.
    - 제목을 생성/수정한다.
    - 태그를 생성/수정한다.
6. 프로필 설정
    - 프로필
        - edit 버튼을 눌러 프로필 설정 페이지로 이동

        ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/14.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/14.png?raw=true)

    - 프로필을 수정할 수 있는 페이지
        - edit 버튼으로 프로필 사진 수정
        - 태그 삭제 및 추가
        - save 버튼을 누르면 변경 사항 저장
        - cancel 버튼을 누르면 프로필 페이지로 이동

        ![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/15.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/15.png?raw=true)

## 유저 흐름도

![https://github.com/boostcampwm-2021/relay_06/blob/main/assets/16.png?raw=true](https://github.com/boostcampwm-2021/relay_06/blob/main/assets/16.png?raw=true)

## 참여자

### 1주차
| J019   | S023   | K051   | J098   | J110   | J136   | J137   | J191   |
| ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ |
| 김동규 | 사연진 | 장성희 | 배성현 | 송은석 | 윤정현 | 윤해수 | 정현민 |
