[Javascript독학] meditation 앱 만들기

'Dev Ed'의 유튜브를 보면서 Javascript 실습을 진행하고 있습니다. 실습을 계속 진행하면서 감 잡는 것이 중요하다고 생각하여 앱 만들기를 따라 하면 공부하였습니다.

 

이번에 진행한 영상은 Build A Meditation App with Javascript HTML&CSS입니다.

위 영상은 Dev 가 미리 만든 Git-hub MeditationApp_Tutorial을 재구현 하는 내용입니다. 

 

이 APP의 내용은 빗소리나 해변가의 소리를 들려주며 명상에 도움을 주는 앱입니다. 소리를 몇 분 동안 들려줄 것이며 남은 시간을 중앙 디스플레이에 원형 띠와 숫자로 표시해줍니다.

 

HTML

중요 HTML Tag는 audio와 video입니다. audio와 video는 앱에 원하는 소리와 동영상을 넣을 수 있습니다. 따라서 빗소리, 해변 소리를 mp3로 다운로드하여 놓고 사용하였고 비 오는 영상과 해변 영상을 mp4 형식으로 다운로드하였습니다. 해당 오디오와 비디오는 git-hup에 올라와 있습니다. 또한 원형 띠 디스플레이를 통해 시간 줄어드는 것을 표시하기 위해 원형 띠 모양 SVG 파일을 사용했습니다.

CSS

재미있는 CSS 표현을 공유드리자면 button에 적용되는 transition입니다. button:hover를 적용하면에 커서를 댈 때 다른 CSS를 적용하게 되면 커서를 대는 것만으로 버튼이 활성화되고 다른 디자인으로 활성화된 것을 표현합니다. 여기서 button에 ex) transition:{all 0.5s ease}; 이 있다면 모든 버튼에 0.5초 동안 ease의 시간차로 hover CSS가 적용되게 됩니다. transition 사용해보시는 것을 추천합니다.

Javascript

진행되는 음에 타이머를 적용해주기 위해서는 ontimeupdate 메서드를 사용해야 합니다. ontimeupdate에 있는 currentTime은 오디오 재생 시간을 표시해 줍니다. 따라서 1분 진행하고 싶으면 1분-currentTime을 하면서 얼마나 남았는지 보여주게 됩니다. 이러한 원리로 시각적으로 남은 양을 표현해주는 원형 디스플레이도 보여줄 수 있습니다. 원형 디스플레이 총길이 - (currentTime/1분)*총길이를 한다면 경과시간을 길이로 표현해줌으로 시각적으로도 보여줄 수 있습니다.

 

한번 앱을 만들어보는 실습을 하니 자신감이 더 생기는 것 같습니다. 단순히 문법만 배울 때는 이것을 어떻게 써야 할지 막막했는데 한번 써보니 필요한 것을 검색하는 방법만 잘 익히면 시간은 오래 걸리겠지만 다 해볼 수 있다는 생각이 드네요. 여러 예제를 반복하면서 다양한 적용 방법을 익히고 반복 작업에서 익힌 것으로 원하는 앱을 만들어 보는 식으로 공부하면 재미있게 공부할 수 있을 듯합니다.

 

하기는 제가 실습하여 만든 앱입니다. 좌측 분 버튼을 통해 재생시간을 결정해주고 우측 비, 태양 버튼으로 빗소리, 해변 소리를 고를 수 있습니다. 그리고 중앙에는 경과시간을 디스플레이와 숫자를 통해 나타내고 있고 배경은 빗소리에 대한 동영상과 해변 소리에 대한 동영상이 나옵니다.

 

Calm이라는 세계적으로 유명한 명상 어플은 다 이런 작은 앱에서부터 시작했다고 합니다. 이 작은 시작이 제 삶에 어떤 변화를 줄지 기대가 됩니다. 이상으로 마치겠습니다.

 

더 많은 정보와 리뷰를 원하시면 여기로!

모바일은 여기로!