Preview: Making Session Timer Using Phoenix LiveView

제가 최근에 즐겨 사용하는 앱은 Session입니다. 일종의 포모도로 앱으로, 시간에 맞춰 작업을 진행할 수 있게 도와주는 서비스죠. 여러 포모도로 앱을 사용해봤는데 ‘Session’의 기능이 다른 앱보다 저에게 더 잘 맞는 것 같아 많이 사용하고 있습니다. ‘Session’ 앱은 아이폰, 아이패드, 맥OS에서 사용할 수 있는걸로 보아 애플 생태계에 초점을 맞춘 앱이라는 것을 짐작할 수 있습니다. 저는 현재 위 세 기기를 모두 가지고 있기 때문에 세 기기 간에 ‘Session’ 앱을 동기화할 수 있어서 매우 유용합니다. ‘Session’은 구독 모델을 사용해서 다른 앱보다 가격이 조금 높은 것 같지만 그만한 가치가 있다고 생각합니다.

몇 주 전 자투리 시간에 피닉스 라이브뷰를 사용하여 ‘세션’ 타이머를 만들기로 했습니다. UI가 멋져 보이고 좋은 사용자 경험을 제공한다고 생각했기 때문에 만들어보고 싶었습니다. 하지만 전체 기능이 아니라 타이머만요. 이참에 피닉스 라이브뷰로 만들면 좋을 것 같아서 한번 해봤습니다.

깔끔단순한 결과물은 다음과 같습니다.

작은 피닉스 라이브뷰 페이지에 불과하지만 꽤 괜찮아 보입니다 😄!

사용한 건,

• 당연히, Phoenix LiveView
• Tailwind CSS,
• Drag and Drop 기능을 위한 약간의 JS
• 타이머 기능을 위한 간단한 GenServer 하나 (처음엔 Agent도 괜찮아 보였지만, 결국 Agent로는 구현이 어려웠었습니다)

나중에 이걸 만드는 전체 과정에 대한 포스트 시리즈를 업로드할 수도 있습니다. 아니면 ‘세션’의 더 많은 기능을 복제할 수 있을지도 모릅니다. 하지만 지금은 일단 그냥 결과물을 보여드리죠.

제 repo에서 전체 코드를 볼 수 있습니다.