JH Link: 우리 지역 청소년 센터를 연결하고 참여시키는 PWA

Source: Dev.to

이 글은 DEV Weekend Challenge: Community 에 대한 제출물입니다

커뮤니티

이 프로젝트는 내 지역 청소년 센터를 위한 것입니다. 주요 대상은 10‑19세 청소년에게 활기찬 허브를 제공하는 것이지만, 센터는 전체 커뮤니티에 개방적이고 환영하는 분위기를 유지합니다. 모든 연령대의 사람들이 대화를 나누러, 카페에서 음료를 마시러, 혹은 활동에 참여하러 자유롭게 방문할 수 있습니다. 그러나 소통과 참여는 입소문과 흩어진 소셜 미디어 게시물에 의존해 파편화되기 쉽습니다. 회원들은 활동을 추적하거나 누가 참석했는지 확인하거나, 센터에 직접 있지 않을 때 지속적인 소속감을 느끼기 어려울 수 있습니다. 관리자 또한 체크인 및 참여도 추적과 같은 수동 작업에 많은 시간을 할애합니다.

내가 만든 것

이러한 문제를 해결하기 위해 JH Link라는 프로그레시브 웹 앱(PWA)을 만들었습니다. 이는 우리 청소년 센터의 디지털 중심이 되도록 설계되었습니다.

모바일 퍼스트 애플리케이션으로 다음을 제공합니다:

• 활동 피드: 실시간으로 다가오는 이벤트와 활동 목록을 제공하며, 회원은 한 번의 탭으로 등록할 수 있습니다.
• 회원 프로필: 회원이 자신을 표현하고 참여 이력을 확인할 수 있는 공간.
• 디지털 회원 카드: QR 코드 기반 가상 카드로, 물리적 카드를 대체해 손쉽게 체크인할 수 있습니다.
• 게이미피케이션: 활동에 참여하면 포인트와 레벨이 상승하는 시스템으로, 친근한 경쟁과 지속적인 참여를 유도합니다.
• 관리자 대시보드: 직원이 활동을 관리하고, 회원을 체크인하며, 포인트 시스템을 감독할 수 있는 종합 백엔드.

목표는 참여를 더 쉽고 보람 있게 만들며, 회원들이 떨어져 있어도 커뮤니티 유대를 강화하는 것입니다.

데모

앱의 라이브 데모를 여기서 체험해 보세요:

앱의 영상 walkthrough:

코드

전체 소스 코드는 GitHub에서 확인할 수 있습니다:

구현 방법

주말 동안 JH Link를 개발했으며, 최신 풀스택 TypeScript 방식을 활용했습니다.

• 프레임워크: Next.js (App Router 사용)
• 백엔드 및 데이터베이스: 인증, Row Level Security가 적용된 PostgreSQL 데이터베이스, 스토리지를 제공하는 Supabase
• 배포: Vercel
• 스타일링: Tailwind CSS
• UI/UX: 완전한 프로그레시브 웹 앱(PWA)으로, 모바일 기기에 설치해 네이티브와 같은 경험 제공. 페이지 전환 애니메이션과 네비게이션 진행 바 포함.
• 툴링: 패키지 매니저로 bun 사용; VS Code Dev Container 안에서 개발 진행.

개발 과정의 큰 부분은 AI 어시스턴트와 함께 작업한 것이었습니다. 이 공동 개발 모델은 매우 효율적이었으며, AI가 초기 스캐폴딩, 보일러플레이트 코드, 복잡한 서버 액션 등을 담당해 제가 아키텍처, 사용자 경험, 핵심 코드 리뷰에 집중할 수 있게 했습니다. 함께 기능을 구현하고, SQL 정책을 디버깅하며, 비동기 JavaScript를 다듬어 짧은 시간 안에 풍부한 기능을 갖춘 애플리케이션을 완성했습니다.