다이어리 앱 모지또의 플로우차트와 DB 분석 (2탄) | 코드스테이츠 PMB 14기

👇 지난번 글을 회고하며, 작성된 내용입니다. 👇

모지또의 플로우차트를 그려 DB를 짜보자! | 코드스테이츠 PMB 14기

지난 번 다이어리 앱 '모지또'를 사용하는 고객의 페르소나와 그에 따른 플로우 차트, 화면의 흐름 및 DB를 추측해보았다. 키노트로 도식화했는데 이번에는 미로 서비스로 플로우 차트를 업데이트 해보았다.

플로우 차트를 확인하기 전 모지또를 처음 접하는 경우 감정을 어떻게 선택하는 건데? '쉐킷'이 뭐야?라고 할 수 있으므로 화면의 흐름을 먼저 첨부하였다 :)

모지또 화면 흐름 

 

모지또 Flow Chart ver.2

플로우의 시작과 끝은 검은색으로, 행동은 노란색, 행동에 따른 결과 화면은 분홍색으로 구분했다. 선택에 따라 결과가 달라지는 조건 기호는 일반적으로 마름모꼴로 표현한다고 한다! (순서도 기호)
지난번 도식화했던 플로우차트와 크게 달라진 것은 없다. 다만 앱이 실행되면 바로 홈 화면이 뜨기 때문에 '홈'을 제외하고, 감정 선택시 조건이 붙기 때문에 해당 부분을 수정하였다.

* 지난 번 작성한 플로우 차트는 비교를 할 수 있도록 아래 접어두었습니다.

선택한 감정들은 데이터 량이 많지도 않을뿐더러 민감한 정보가 포함된 것이 아니라 클라이언트에서 GET 방식으로 데이터를 넘길 것이다. 이때 감정을 선택하지 않고 '쉐킷'을 누르는 경우 넘어간 데이터가 없기 때문에 클라이언트에서 '아직 감정이 없어요' 카피를 뜨게 설정하여 감정을 선택하도록 유도하고 있다.
감정을 선택한 경우 선택한 감정의 색이 모두 혼합되고, 혼합된 색의 코드에 따라 결과 화면에 노출되는 결과값, 즉 칵테일 종류가 달라진다.
혼합되는 기능은 조색 앱 Paleto의 기능을 활용했다고 한다.

조색 앱 Paleto

서버에는 혼합된 색의 경우의 수를 모두 따져 색상 별 칵테일에 대한 정보를 입력해두었다. 칵테일 테이블의 '칵테일 색상 코드' 칼럼과 클라이언트에서 넘어온 혼합 값의 코드를 대조하여 일치하는 칵테일 정보를 클라이언트에 반환한다.

결과 화면 확인 후 추가적으로 스토리(일기)를 간단하게 작성할 수 있는데, 작성하지 않으면 데이터가 공란이니 null 값으로, 작성되었다면 작성된 내용이 서버를 통해 DB로 넘어가 축적될 것이다.

DB 구성하기

지난번 글에서는 단순하게 어떤 정보가 담길까? 에 초점을 두고 추측해보았다면, 이번에는 한층 업그레이드하여 테이블 별 데이터로 나눠보았다. 지난번엔 그냥 지나쳤던 Primary Key와 Foreign Key도 표기하였다.

1. 회원 정보 테이블

아이디 (메일 형식, PK)

비밀번호 (암호화)

닉네임 (FK)

유료회원 유무 (Y/N)

🆕 회원 정보 데이터 관련하여 유료회원인지 아닌지에 대한 데이터 값도 있어야 할 것 같아 추가하였다.

2. 회원 칵테일 테이블

등록일 (PK)

닉네임 (FK)

화남

짜증

멘붕

행복

아픔

신남

평온

슬픔

피곤

걱정

뿌듯

설렘

감동

덤덤

우울

답답

칵테일명 (FK)

스토리 제목

스토리 본문

🆕 하루에 한 번만 생성할 수 있으며 수정될 수 업손 값인 등록 날짜가 Primary Key라고 생각했다.
🆕 '닉네임'을 통해 [회원 정보 테이블]과 연결되고, '칵테일명'으로 [칵테일 테이블]과 연결되므로 FK를 각각 표시하였다.
🆕 감정을 먼저 선택하여 결과 화면을 본 다음 스토리를 작성하는 것이기 때문에 감정 선택이 GET으로 넘어가고 스토리는 작성 유무에 따라 UPDATE 될 것이라 예상된다.
🆕 스토리를 미작성 시 '스토리 제목'과 '스토리 본문'에 null 값이, 스토리를 작성하였지만 제목만 등록했을 경우 '스토리 본문'만 null 값이, 제목과 본문 모두 작성하였다면 모든 데이터가 등록될 것이다.
🆕 등록된 날짜의 월에 해당되는 정보가 클라이언트에서 보이게 된다.

회원 칵테일 월별 리포트 화면 UI

🆕 결과 화면에서 가장 많이 선택된 감정 TOP2의 감정명이 화면에 노출된다.

[쉐킷] 후 결과 화면 UI

 

3. 칵테일 테이블

칵테일 명 (FK)

도수

레시피

잔타입

칵테일 설명

색상 코드 (PK)

모지또의 한마디

🆕 칵테일 테이블은 지난번엔 작성하지 않았는데 이번에 추가하였다. 혼합색을 기준으로 칵테일 결과가 달라지므로 색상 코드가 Primary Key라 판단했다.
🆕 테이블 내 어떤 데이터가 있을지 고민하다가 유료 회원이 볼 수 있는 화면을 토대로 작성하였다.

좌 : 무료 회원에게 노출되는 결과화면 UI / 우 : 유료 회원에게 추가로 제공되는 칵테일 세부 정보 UI

* 지난번에 작성한 DB에 대한 내용은 아래 접어두었다. (되돌아보니 정말 간단하게 작성했었구나..)

DBMS를 예측해봤으니 이제 DB를 짜 보자! DB에 담겨야 할 정보의 테이블을 크게 2가지라고 보았다.

• 유저 정보 (ID, PW, 닉네임)
• 일기 내용 (날짜, 선택된 감정 이모지 각각의 갯수, 결과값, 스토리 제목, 스토리 내용)

조금 더 구체적으로 데이터의 속성을 생각을 해보자면 크게 필수 값과 선택 값이 있을 것이다.
* 필수 값은 초록색으로 강조하였다. 강조하지 않은 것은 선택 값.

• 유저 정보 Data
  
  • ID (Primary Key)
  • PW - 암호화 필요
  • 닉네임
• 일기 내용 Data
  • 입력 날짜
  • 선택된 감정 - 감정 16개를 각각의 Data로 취급하여 각각의 갯수를 Data로 저장
  • 칵테일명(결과값)
  • 스토리 제목(일기 제목)
  • 스토리 내용(일기 본문)

추가적으로 일기 작성하는 화면에서 노출되는 카피라이트가 계속 교체되는 데, 이 부분은 따로 데이터가 DB에 쌓여있다기 보단 프론드 엔드단에서 내용이 랜덤으로 바뀌도록 설정되어 있을 듯하여 제외하였다!