Project - Rainy-player App (재구성)

사실 지난번에 기획했었던 rainy-player.
너무 UI가 유치하고 (...) 맘에 들지 않아서 초반에 다시 갈아 엎었던 프로젝트이다.

처음 기획안
그리고 제작 과정(?) 은 링크 참조!

Rainy player

나는 평소에 잠이 오지 않으면 비소리를 듣고는 한다.
그래서 내가 좋아하는 빗소리를 틀어주는 rain sound player app을 만들면 좋겠다고 생각했고,
기획을 하기 시작했다.

처음 기획안

위와 같이 나무가 보이고, 빗소리를 들을때마다 나무가 점점 자라도록 하는 컨셉으로 구상했었다.
그런데, 뭔가 심심한 느낌이 들고 디자인이 중요한 것 같아서 기능을 이것저것 고민하게 되었다.

그래서 탄생한 새로운 버전!

NEW! Rainy Player

빗소리 플레이어인 것은 동일하지만, UI가 조금 더 직관적으로 나오게 했다.
나무가 자라는 것을 구현하는것도 좋지만, 아무래도 힐링을 위해 실물 사진을 넣는 것이 더 적합해 보여서 사진을 넣어보았다.

내가 아직 피그마 툴에 익숙하진 않지만 (그래도 많이 늘었다! :) 🙋‍♀️)
디자인을 해보면서 '이정도면 내가 써보고 싶다!' 생각했다.

초기 화면

재생 버튼 눌렀을 때

세로 ver. (portrait 버튼 클릭시)

나름 깔끔해진 디자인.

하지만 난 웹디자이너가 아니므로 .. 미흡한 부분은 있겠지만,
이제 이걸 기능을 구현해야 한다.

---

고민해야 할 부분.

 

1. position 문제.
   지금 사진 부분(container)에 각각 position: absolute로 설정해야 할 것 같은데
   height를 고정해줘야 0이 되는 문제가 발생하지 않을 것 같다.
   이게 제일 큰 고민. relative로 해서 조정할지?

2. 반응형 웹.
   사실 맨 처음엔 Desktop으로만 디자인을 한 거라, (굳이 한다면 태블릿도 가능할 듯)
   mobile에서 구동하기에는 UI를 어떻게 바꿀지 고민된다.
   음 ...
   그리고 bootstrap grid system을 쓸지 고민중이다.
   (이건 차차 생각해보자)

-> 만약 한다면 모바일부터 제작해야함.

3. 추가 기능?
   이미지가 움직이거나 비내리는 효과를 주면 좋을 것 같긴 한데
   타이머가 움직이기 때문에 (위 3번째 사진 참고) 정신사나울 것 같기도 하다.

4. React 사용 여부
   사실 이 프로젝트는 vanila JS + scss 로 웹팩 설정해서 구현하는 것이 목표였다.
   웹팩에 대해 내가 아직 잘 모르기도 하고, 좀 더 배우는 계기가 되었으면 해서.
   그런데 요즘 내가 배우고 있는 React를 사용할지에 대해 고민중이다.