bubbleBible-FE 프로젝트 리뷰 - 모바일 우선 성경 플랫폼 개발기

프로젝트 개요

프로젝트명: bubbleBible-FE
기간: 2025.08
기술 스택: React, TypeScript, Next.js, Tailwind CSS, PWA, Push Notifications
상태: 🔨 개발중
목적: 매일 한 구절로 신앙 루틴을 만드는 모바일 우선 성경 플랫폼

bubbleBible-FE는 제가 "성경을 읽는 습관을 만들고 싶다"는 생각에서 시작한 프로젝트입니다. 개인 묵상과 교회·소그룹 중심의 공동체 기능을 결합한 성경 서비스의 프론트엔드를 개발했습니다.

프로젝트를 시작한 이유

성경을 읽으려고 해도 매일 읽기가 어려웠습니다. "오늘 읽을 말씀이 뭐지?", "어제 어디까지 읽었지?" 같은 고민을 하면서도, 매일 꾸준히 읽기 어려웠습니다.

그래서 "매일 한 구절씩 읽고, 공동체와 나눌 수 있는 서비스"를 만들고 싶었습니다.

주요 기능 구현

1. 모바일 우선 디자인

이 프로젝트는 처음부터 모바일을 우선으로 설계했습니다.

처음 접했을 때:

• "모바일 우선이 뭐지?"라는 생각부터 시작했습니다.
• 데스크톱과 모바일의 차이를 고려해야 했습니다.
• 터치 인터페이스를 고려한 UI 설계가 필요했습니다.

배운 점:

• 모바일에서 사용하기 편한 UI가 중요합니다.
• 터치 영역을 충분히 크게 만들어야 합니다.
• 모바일에서 로딩 속도가 중요합니다.

구현:

css복사
/* 모바일 우선 미디어 쿼리 */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

2. PWA 구현

PWA(Progressive Web App)를 구현하여 앱처럼 사용할 수 있도록 했습니다.

처음 접했을 때:

• "PWA가 뭐지?"라는 생각부터 시작했습니다.
• Service Worker 개념이 처음에는 이해하기 어려웠습니다.
• 오프라인 지원을 구현하는 것이 까다로웠습니다.

구현:

typescript복사
// Service Worker 등록
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then((registration) => {
      console.log('Service Worker 등록 성공');
    })
    .catch((error) => {
      console.error('Service Worker 등록 실패:', error);
    });
}

배운 점:

• PWA는 웹이지만 앱처럼 사용할 수 있습니다.
• 오프라인에서도 일부 기능을 사용할 수 있습니다.
• 홈 화면에 추가하면 앱처럼 사용할 수 있습니다.

3. 푸시 알림

매일 말씀을 알림으로 보내는 기능을 구현했습니다.

처음 접했을 때:

• "푸시 알림을 어떻게 보내지?"라는 생각부터 시작했습니다.
• 브라우저 알림 권한 요청이 처음에는 어려웠습니다.
• 백그라운드에서 알림을 보내는 것이 까다로웠습니다.

구현:

typescript복사
// 알림 권한 요청
const requestNotificationPermission = async () => {
  if ('Notification' in window) {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      // 알림 전송
    }
  }
};

배운 점:

• 사용자에게 알림 권한을 요청해야 합니다.
• 알림은 사용자 경험을 해치지 않도록 신중하게 사용해야 합니다.
• 백그라운드에서 알림을 보내려면 서버가 필요합니다.

4. 게이미피케이션 시스템

포인트, 레벨, 업적 시스템을 구현하여 사용자 참여를 유도했습니다.

구현:

• 성경 읽기: 포인트 지급
• 댓글 작성: 포인트 지급
• 좋아요: 포인트 지급
• 포인트에 따라 레벨 업
• 특정 조건 달성 시 업적 획득

배운 점:

• 게이미피케이션은 사용자 참여를 높이는 좋은 방법입니다.
• 하지만 너무 과하면 오히려 역효과가 날 수 있습니다.
• 밸런스를 맞추는 것이 중요합니다.

5. 커뮤니티 기능

교회 그룹 커뮤니티 기능을 구현했습니다.

구현:

• 묵상 나눔
• 기도제목 공유
• 그룹 활동 통계

어려웠던 점:

• 실시간 업데이트를 구현하는 것이 까다로웠습니다.
• 사용자 권한 관리가 복잡했습니다.
• 커뮤니티 모더레이션이 필요했습니다.

해결 방법:

• WebSocket을 활용하여 실시간 업데이트를 구현했습니다.
• 역할 기반 접근 제어(RBAC)를 구현했습니다.
• 신고 기능을 추가하여 모더레이션을 지원했습니다.

어려웠던 점

1. 성경 데이터 관리

성경 본문을 어떻게 관리할지 고민이 많았습니다.

고려사항:

• 성경 본문 데이터 소스
• 하이라이트, 북마크 저장
• 검색 기능

해결 방법:

• 공개 API를 활용하여 성경 본문을 가져왔습니다.
• 사용자 데이터는 데이터베이스에 저장했습니다.
• 클라이언트 사이드 검색을 구현했습니다.

2. 성능 최적화

모바일에서 성능이 중요했습니다.

문제점:

• 초기 로딩이 느렸습니다.
• 이미지가 많아서 데이터 사용량이 많았습니다.
• 리렌더링이 많아서 성능이 저하되었습니다.

해결 방법:

• 코드 스플리팅을 적용했습니다.
• 이미지를 최적화하고 lazy loading을 적용했습니다.
• React.memo를 활용하여 불필요한 리렌더링을 방지했습니다.

3. 접근성

종교 서비스이기 때문에 접근성이 특히 중요했습니다.

고려사항:

• 다양한 연령대의 사용자
• 시각 장애인을 위한 스크린 리더 지원
• 키보드만으로도 사용 가능

해결 방법:

• 시맨틱 HTML을 사용했습니다.
• aria-label을 적절히 추가했습니다.
• 키보드 네비게이션을 지원했습니다.

개선하고 싶은 점

1. 오프라인 지원 강화

현재는 기본적인 오프라인 지원만 있습니다. 더 많은 기능을 오프라인에서 사용할 수 있도록 하고 싶습니다.

2. 다국어 지원

다양한 언어로 성경을 읽을 수 있도록 하고 싶습니다.

3. AI 기반 추천

사용자의 읽기 패턴을 분석하여 맞춤형 말씀을 추천하고 싶습니다.

총평

bubbleBible-FE는 제가 모바일 우선 개발과 PWA를 경험한 첫 프로젝트입니다. 모바일에서 사용하기 편한 UI를 설계하고, PWA를 구현하여 앱처럼 사용할 수 있도록 만든 것이 뿌듯합니다.

특히 게이미피케이션 시스템을 구현하면서 "사용자 참여를 어떻게 유도할까?"를 고민하게 되었고, 커뮤니티 기능을 구현하면서 실시간 업데이트와 권한 관리에 대한 이해도 높일 수 있었습니다.

아직 개발 중이지만, 실제로 사용할 수 있는 서비스를 만들 수 있어서 뿌듯합니다. 앞으로도 계속 개선하고 싶습니다.

링크

• GitHub 저장소
• 서비스 사이트