개발자를 위한 번아웃 방지 PWA DevStretch 출시!
개발자들의 고질적인 문제인 번아웃(Burnout)을 해결하기 위해 개발된 PWA(Progressive Web App) DevStretch 소개
터미널 테마 UI(Terminal-themed UI)를 통해 개발자 친화적인 경험 제공 및 11단계 스트레칭 프로토콜 제공
Web Speech API, Screen Wake Lock API, Web Notifications API 등 다양한 웹 API를 활용하여 기능 구현
오프라인 지원(Offline Support)을 위해 Service Worker를 사용하고, 알림(Notification) 문제 해결을 위한 시행착오 겪음
향후 맞춤형 운동 편집기(Custom Exercise Editor), 휴식 시간 설정, 손목 및 눈 운동 세트 추가 예정
개발자 친화적인 UI/UX 디자인
DevStretch는 개발자들이 익숙하게 느끼는 터미널(Terminal) UI를 채택하여 거부감을 줄이고, 사용성을 높였다.
JetBrains Mono 폰트(Font), 스캔라인(Scanlines), 깜빡이는 커서(Blinking Cursor) 등 디테일한 요소들을 통해 몰입도를 높임
각 스트레칭 동작에 개발 관련 용어(Developer-related Terms)를 사용하여 친근함을 더함
PWA(Progressive Web App)로 제작되어 오프라인 환경에서도 사용 가능하며, 모바일 환경에 최적화된 UI 제공
이처럼 DevStretch는 개발자들의 사용 경험(User Experience)을 극대화하기 위해 디자인되었다.
의존성 없는 순수 자바스크립트(Vanilla JavaScript) 구현
DevStretch는 React, Vite, node_modules와 같은 프레임워크나 라이브러리 없이 순수 자바스크립트(Vanilla JavaScript)로 구현되었다.
Web Speech API를 활용하여 음성 안내 기능 구현
Screen Wake Lock API를 통해 화면 꺼짐 방지
Web Notifications API를 사용하여 백그라운드 알림 기능 구현
Service Worker를 통해 오프라인 지원
이러한 선택은 프로젝트의 경량화(Lightweight)를 추구하고, 의존성 관리(Dependency Management)의 복잡성을 줄이기 위한 전략으로 보인다.
PWA(Progressive Web App) 기술의 활용
DevStretch는 PWA(Progressive Web App) 기술을 적극적으로 활용하여 사용자 경험을 향상시켰다.
오프라인 지원(Offline Support): Service Worker를 통해 인터넷 연결 없이도 스트레칭 루틴을 이용 가능
백그라운드 알림(Background Notifications): Web Notifications API를 사용하여, 앱을 닫아도 알림을 받을 수 있도록 구현
홈 화면 추가(Add to Home Screen): 모바일 환경에서 앱처럼 사용할 수 있도록 지원
이러한 PWA 기술은 DevStretch의 접근성(Accessibility)과 사용 편의성(Usability)을 높이는 데 기여한다.
알림(Notification) 문제 해결 과정
DevStretch 개발 과정에서 알림(Notification) 기능 구현에 어려움을 겪었다.
메인 스레드(Main Thread)에서 호출된 new Notification()은 종종 차단되는 문제 발생
Service Worker를 통해 알림을 전송하는 방식으로 해결 시도
OS 레벨(OS Level)의 알림 설정(Focus Assist, 배터리 최적화)으로 인해 알림이 표시되지 않는 문제 발생
이러한 문제들을 해결하기 위해, 개발자는 다양한 환경(Various Environments)에서의 테스트와 디버깅을 진행했다.
향후 기능 개선 계획
DevStretch는 사용자 편의성을 높이기 위해 지속적인 기능 개선을 계획하고 있다.
맞춤형 운동 편집기(Custom Exercise Editor): 사용자가 직접 스트레칭 동작을 추가하고 편집할 수 있도록 지원
휴식 시간 설정(Configurable Rest Time): 사용자의 필요에 따라 휴식 시간을 조절할 수 있도록 기능 추가
손목 및 눈 운동 세트(Dedicated Wrist and Eye Exercise Sets): 손목 터널 증후군(Carpal Tunnel Syndrome) 및 눈의 피로를 덜어주는 운동 세트 추가
이러한 기능들은 DevStretch를 개인 맞춤형(Personalized) 번아웃 방지 도구로 발전시킬 것이다.
