0. 기획

1. 기획 의도

좀 오래 전 부터 생각했었던 아이디어다.

감정을 간단하게 기록하는 서비스를 만들고 싶었다. 어느샌가부터 감정을 기록하는 일기장 어플이 뜨기 시작하더라.

본인은 또한, 음악에 의미를 많이 두는 편이라, 감정과 맞는 노래를 기록하는 서비스를 만들기로 했다.

 

---

 

2. 프로젝트 생김새(레이아웃)

레이아웃은 피그마(Pigma)로 만들었다. 포토샵으로 디자인하는 것 보다 피그마가 UI 디자인에 최적화 되고, CSS코드로 원하는 모양의 코드를 바로 알려주기 때문에 쉽고 편하다. 나중에 맥북 사면 제발 스케치 써보고싶다ㅠㅠ

 

디자인도 중시하기 때문에 핀터레스트와 시중에 판매되는 감정일기장 앱의 레이아웃을 참고하여 디자인했다. 디자이너만큼 획기적인 디자인은 아닐지라도 최소한 글씨 크기나 사용자가 이용하는데 있어 불편함은 없을 정도로 디자인했다.

기본적인 모바일 디자인은 Material.io에서 글씨 크기와 화면 마진값을 참고했다.

 

몇달 전 떴었던 mbti 연애 심리테스트 웹앱과 맞는 대학교 학과 찾기 테스트 사이트도 참고하였다.

 

디자인에 관련해서도 조만간 게시글을 올리도록 하겠다.

https://material.io/design/typography/the-type-system.html#applying-the-type-scale

Material Design

https://myuniversitytest.com/

대학교 학과 테스트

http://mbti.glam.am/intro

연애 능력치 테스트 | 글램

아이폰 기본 앱들의 화면을 캡쳐해서 투명도를 조정해 위에서 편집하기도 하였다.

웹앱이기 때문에 지속해서 깃을 업데이트하여 깃허브 링크로 휴대폰에 창을 띄워 실시간으로 확인하였다. 

 

1> 로그인

로그인 기능을 이용하려고 했는데 그것은 아직 이르고, 이름을 적으면 다음 화면에 ~님 안녕하세요 식으로 뜨게끔 할 것.

2> 메인화면

메인화면은 가장 중요한 글쓰기, 기록확인하기 그리고 이 서비스만의 특징인 기분별로 들었던 노래 리스트 뽑기 파트로 나누었다.

1. 로그인 / 2. 메인화면

3> 감정기록

간단히 필수 감정들을 선택할 수 있게 했다. 

무언가를 적는 것 자체가 은근히 귀찮아서 기록을 잘 하지 않는 사람들도 있고, 감정을 직접 나누게 되면 해당 감정과 관련한 음악 리스트를 뽑아내기 힘들기 때문이다.

 

기분에 맞는 음악 리스트는 last.fm의 음악 검색 api를 이용한다. Spotify의 api는 한국에서 이용하려면 vpn을 켜서 우회접속을 해야한다고 하며, 국내 서비스는 api 서비스가 중지됐다. 

 

일기처럼 스토리의 기록은 굳이 기록할 필요는 없기 때문에 기록을 하지 않겠다는 버튼을 넣었다. 

일기장의 색은 바꿀 수 있다. 꼭필요하진 않음. 

저장하기를 누르면 db에 저장한다.

 

3. 기록하기

4> 일기기록

일기장은 펼쳐서 볼 수 있게 한다.

5> 음악기록

감정에 따라 들었던 노래들을 리스팅한다. 

4. 일기 기록 확인 5. 노래 기록 확인 

---

3. 필요한 기능들

- 음악 검색 api. Last.fm api 이용

- 데이터 베이스에 기록들 저장시키기

- ajax로 GET 매개변수 전달을 통한 데이터 전달

---

4. 결론

막상 적어보니 눈에 띄는 기능은 없는 것 같다.

그러나 첫 프로젝트가 될 만큼, 끝까지 완주했으면 좋겠다.