← 전체 프로젝트

회원 앱 · iOS·Android

엎드림 청년부

공동체와 성찰, 다음 작은 실천을 위한 공간.

출석, 공지, 일정, 공간 예약, 기도제목, 개인 성찰과 성경 읽기를 한곳에 모은 교회 청년부 서비스입니다. 회원 앱을 iOS와 Android에 출시하고, 관리자 웹·관리자 앱이 함께 쓰는 공용 백엔드까지 혼자 개발해 운영하고 있습니다.

담당 범위
기획·디자인·개발·출시 전 과정 단독 진행
주요 기술
  • TypeScript
  • React Native
  • Expo
  • PostgreSQL

만든 이유

청년부실 예약은 네이버 달력에서, 소통은 카카오톡 오픈채팅에서 따로 이루어져 정보가 흩어져 있었습니다. 공지·일정·예약·출석·기도제목을 하나의 서비스로 모으고, 재적 확인과 관리자 승인을 거쳐야 가입되도록 만들었습니다.

실제 사용

2025년 12월 1일부터 2026년 11월 3일까지, 주일 청년예배 48회를 기준으로 집계했습니다.

67.2%
48회 중 24회 이상 출석한 정기 출석 청년 61명 중 41명이 사용
49.1%
한 번 이상 출석한 청년 114명 중 56명이 가입

사람 수는 중복 없이 세고 목회자와 테스트 계정은 제외했습니다. 가입은 필수 정보 입력과 약관 동의를 마친 계정 기준입니다. 출석은 앱에 저장된 기록 기준이며, 입력되지 않은 주는 결석으로 세지 않았습니다.

하나의 서비스, 네 개의 화면

관리 업무는 사용 상황에 따라 웹과 네이티브 앱으로 나누고, 권한 판단은 서버 한 곳에서만 하도록 설계했습니다.

01

회원 앱

iOS · Android

청년부원이 평소에 쓰는 공지, 일정, 예약, 출석 확인, 기도제목, QT·성경 읽기. 하나의 Expo 코드베이스로 두 스토어에 출시했습니다.

TypeScript · React Native · Expo

02

관리자 웹

브라우저

책상에서 하는 무거운 업무를 맡습니다. 가입 승인, 회원 기록 관리, 계정 병합. 2단계 인증을 사용합니다.

TypeScript · React

03

관리자 앱

iPhone · iPad

주일 출석처럼 현장에서 바로 하는 업무를 맡습니다. Face ID·Touch ID로 확인하고, 서버가 허용한 작업만 보여줍니다.

Swift · SwiftUI

04

공용 API

AWS ECS Fargate

세 클라이언트의 세션, 권한, 업무 규칙을 한곳에서 처리합니다. 출석 변경은 트랜잭션으로 저장합니다.

TypeScript · PostgreSQL · S3

서비스 웹사이트, 이용약관·개인정보처리방침·아동 안전 정책, 앱 안의 계정 삭제 절차, 성경 본문 사용허락도 직접 운영하고 관리합니다.

서비스 웹사이트

공개 데모

직접 체험하기

공개 데모 계정으로 앱의 주요 화면을 살펴보세요.

로그인 방법

  1. App Store에서 앱을 설치합니다. 회원 앱은 Google Play에서도 설치할 수 있습니다.
  2. 로그인 화면에서 “데모 계정으로 로그인”을 선택합니다.
  3. 아래 아이디와 비밀번호를 입력합니다.
App Store에서 설치하기

살펴볼 기능

  • 감사·묵상 기록을 날짜별로 열람하기
  • 공지와 일정을 확인하기

공개 데모 계정

입력란의 내용을 직접 선택해 복사할 수도 있습니다.

여러 사람이 함께 사용하는 예시 데이터입니다. 다른 방문자가 내용을 변경할 수 있으며, 변경 내용이 남을 수 있습니다. 개인정보나 사적인 기도 제목을 입력하지 마세요.

시스템 연결 구조

기술 설명은 2026년 9월 17일 확인한 소스 기준입니다. App Store 출시 버전에는 일부 변경이 아직 포함되지 않을 수 있습니다.

  1. 01React Native 회원 앱 · React 관리자 웹 · SwiftUI 관리자 앱
  2. 02인증과 권한을 확인하는 TypeScript API
  3. 03PostgreSQL · 비공개 S3

회원 앱, 관리자 웹, 관리자 앱이 같은 백엔드를 공유합니다. 데이터베이스 기록과 사용허락을 받은 성경 본문은 저장소와 접근 범위를 분리합니다.

화면 뒤의 구현 선택

01

안심하고 다시 시도할 수 있는 세션 복구

앱 시작 시 일시적인 연결 실패와 유효하지 않은 인증 정보를 구분합니다. 새로고침 중에는 마지막으로 확인한 화면을 유지할 수 있고, 계정이나 권한이 바뀌면 이전 데이터를 비우고 늦게 도착한 응답을 무효화합니다.

02

동시에 수정한 출석 기록의 충돌 처리

출석 저장 시 예상 버전을 대조해 수정 충돌을 감지합니다. 서버는 작업 잠금을 얻은 뒤 권한을 다시 확인하고, 출석 기록·버전·감사 이력을 함께 저장합니다.

03

새로고침에도 현재 권한 적용

실시간 메시지는 변경이 발생했다는 신호를 보냅니다. 클라이언트는 API에서 실제 기록을 다시 가져와 현재 권한을 적용합니다. 요청을 통합하고 짧은 무작위 지연을 두어 중복 요청을 줄입니다.

엎드림 청년부

AI를 활용한 방법

AI와 일하는 방식

  1. 요구사항은 직접 정합니다. 베타 피드백과 운영에서 생긴 필요가 출발점입니다.
  2. 범위를 정합니다. 바꿔도 되는 화면과 건드리면 안 되는 로직을 먼저 정합니다.
  3. 구현을 맡깁니다. 범위가 정해진 프론트엔드 작업과 통합에 Claude Code와 Codex를 씁니다.
  4. 검증합니다. 데이터·권한 규칙과 대조하고 회귀 테스트와 CI로 확인합니다.
  5. AI가 틀린 곳을 기록하고 직접 고칩니다.
  6. 어려운 판단은 맡기지 않습니다. 계정, 권한, 동시성, 출시 범위는 제가 결정합니다.

범위를 정한 프론트엔드 작업과 통합에 Claude Code와 Codex를 활용했습니다. 일반회원 신앙 정원 개선에서는 Claude Code가 성장·사명 화면의 초기 변경안을 준비했고, Codex가 홈 화면, 공통 테마, 달력·읽기 흐름 개선과 통합 검증을 담당했습니다.

정원과 사명 편지의 정적 일러스트는 ImageGen으로 만들었습니다. 글자, 버튼, 기록 표시와 상호작용은 네이티브 React Native 요소로 유지합니다. 여기에 소개한 화면은 이전 청년회원 인터페이스입니다. 제품 요구사항과 출시 범위는 제가 정합니다.

AI가 틀렸던 사례: 관리자 웹의 계정 병합

01상황
같은 청년부원이 서로 다른 OAuth(예: 카카오와 Apple)로 각각 로그인해 계정이 둘로 나뉘었습니다. 이 회원의 재적 데이터에는 이미 출석 기록이 쌓여 있었고, 관리자 웹에서 기록 손실 없이 하나로 합쳐야 했습니다.
02AI에 맡긴 범위
관리자 웹의 계정 병합 기능 구현을 AI 코딩 도구에 맡겼습니다.
03무엇이 실패했나
동일인으로 보이는 계정을 찾는 데이터 탐색까지는 동작했지만, 병합을 실행하면 계정이 합쳐지지 않았고 출석 기록이 엉뚱한 계정에 남았습니다.
04원인
AI의 구현은 OAuth 계정을 기준으로 한 계정의 데이터를 다른 계정으로 옮기는 방식이었습니다. 하지만 출석 기록은 로그인 계정이 아니라 재적 데이터에 연결되어 있었습니다. 데이터가 실제로 어디에 묶여 있는지를 고려하지 않아, 계정 정보만 옮겨지고 출석 기록은 원래 자리에 남았습니다.
05해결: 기준 축을 바꾸다
병합의 기준을 로그인 계정에서 재적 데이터로 옮겼습니다. 재적을 ‘한 사람’을 나타내는 기준 기록으로 두고, OAuth 계정은 그 사람에게 연결되는 로그인 수단으로 병합했습니다. 출석 기록은 처음부터 재적에 붙어 있으므로 옮기거나 다시 쓸 필요가 없어졌습니다.
06이후 바뀐 작업 방식
계정과 권한처럼 한 번 잘못되면 되돌리기 어려운 코드는 AI 결과를 그대로 쓰지 않고 직접 수정하고 검토합니다. AI는 범위가 명확한 화면 작업에, 데이터의 정체성과 권한을 다루는 판단은 제가 맡습니다.

성경 본문: 사용허락과 제공 방식

엎드림에서 사용하는 한국어 개역개정 성경의 저작권 검토와 사용허락을 확보하는 절차를 직접 진행했습니다. 프로젝트 체크리스트에 사용허락 확인이 기록되어 있습니다. 저작권은 대한성서공회에 있으며, 관련 증빙 문서는 비공개로 보관합니다.

승인된 회원에게 성경 66권 전체를 제공합니다. 전체 본문은 앱 번들과 공개 저장소에 포함하지 않고, 인증된 API를 통해 비공개 AWS S3에서 전달하며 무결성을 검증합니다. 앱에는 저작권 고지를 표시하고, 로그아웃과 계정 변경 시 정리되는 계정별 임시 캐시를 사용합니다.

기술 상세

코드와 검증

기술 상세 문서에는 세션 복구, 캐시 분리, 동시 저장, Android 첫 레이아웃 크래시 수정을 비롯한 코드의 책임 범위와 설계상 선택·제약, 날짜별 테스트 결과를 기록했습니다.

다른 프로젝트