개인 프로젝트 설계 - DB 설계와 와이어프레임 만들기

 

 

개인 프로젝트 설계 - 요구사항과 플로우차트

 

 

ERD 다이어그램

 

 

 

ERD 다이어그램의 초안을 위와 같이 작성했다.

회원 데이터가 들어갈 Member와 노래 데이터를 담을 Music이 메인 테이블이 될 것이다.

Album과 Music이 다대다 관계가 될 수밖에 없는데, 이를 방지하고자 SelectedMusic을 두 테이블 사이에 넣어 일대다, 다대일로 풀었다.

 

아직 추가할지 고민 중인 기능이 있어 나중에 테이블이 변경될 수도 있지만 현재는 이런 상태다.

 

 

 

와이어프레임

 

 

Figma로 만든 와이어프레임. 처음 써보는 툴이지만 쉽게 적응할 수 있어 다행이었다.

총 35페이지가 나왔다.

 

 

1. 시작페이지

 

 

• 로그인한 회원만 이용할 수 있도록 설계했기 때문에 첫 화면에서 로그인하기, 가입하기를 선택한다.
• 유효성 검사를 이후 이메일 인증까지 끝내면 회원가입이 완료된다. 이후 로그인하여 서비스를 이용할 수 있다.

 

 

 

시작페이지

 

로그인 페이지

 

 

 

2. 메인페이지

 

 

• 메인페이지 홈: 주간 랭킹, 노래 추천, 다른 회원들의 앨범 추천, 최신곡을 확인할 수 있다. 클릭하면 상세 페이지로 이동한다.
• 노래 및 앨범은 회원가입 시 입력한 성별과 연령 등의 정보를 기반으로 추천된다.
• 각 데이터에 맞는 필터 및 정렬 조건으로 데이터를 조회할 수 있다.

 

 

 

회원 앨범 추천 페이지

 

노래 추천 페이지 - 앨범에 노래 추가하기

 

 

 

3. 검색 페이지

 

 

• 제목 또는 가수명으로 검색한 결과를 조회한다.
• 조회된 노래를 클릭하면 상세 페이지로 이동한다.

 

 

 

4. 나의 앨범 페이지

 

 

• 나의 앨범 페이지
  • 사용자가 생성한 앨범 목록을 조회한다.
  • 앨범 등록과 선택한 앨범의 공개여부 변경 및 삭제가 가능하다.
• 나의 앨범 페이지 상세
  • 각 앨범의 노래 목록을 조회한다. 
  • 앨범 타이틀, 대표 이미지, 공개여부, 태그 변경이 가능하다.
  • 등록한 노래의 삭제가 가능하다.

 

 

 

나의 앨범 상세 페이지

 

나의 앨범 상세 페이지 - 태그 변경

 

 

 

5. 마이페이지

 

 

• 마이페이지: 프로필 이미지, 닉네임, 팔로우 정보, 앨범 등의 데이터를 포함한다.
• 설정: 계정 설정, 고객센터 문의, 로그아웃, 회원 탈퇴의 기능이 있다.

 

 

 

마이페이지

 

 

 

 

현업에서 개발자가 이걸 만들진 않겠지만😂 어차피 실제로 만들 때 고민해야 할 문제이기도 하고,

저번 프로젝트 때는 코드 작성과 컴포넌트 배치에 대한 구상을 동시에 해나갔기 때문에 이번에는 미리 해야겠다 생각이 들었다.

대학교 UI&UX 수업 들었던 때가 생각나 힘들지만 재밌게 만들었다.

어쨌든 많은 고민을 하며 와이어프레임을 만들었으니 코드를 수정할 일이 덜 생기지 않을까 한다.

 

 

 

이제부터 코딩 시작!!