체육관 협업 어플 코덱스로 '해줘''로 만들기 도전

소개

<사례글 작성 도우미로 작성하였습니다>

체육관에서 중요 공지를 자꾸 놓쳐 일이 꼬이는 걸 보고, “핸드폰에서 꼭 봐야 할 글만 한 번에 보여주고, 알림으로 챙겨주면 어떨까?”라는 마음으로 시작했습니다.

이번 목표(딱 3가지)

  • 2주 안에 돌아가는 것 하나 만들기

  • 홈·게시글·채팅·알림 4개 화면 돌려보기(읽음, 즐겨찾기, DM 확인)

  • 카카오 로그인(간단 버전) + Firebase 연결 준비🚦

(추천 스크린샷: 홈 탭 / 알림 배지 / 온보딩 화면)


진행 방법

1) 시작 준비 — “일단 보이게” 🧩

  • Expo 템플릿으로 시작 → 앱 이름·아이콘만 바꿨습니다.

  • 비밀 키는 .env에 넣었습니다. (어려우면 파일명만 맞추고 값은 나중에!)

  • iOS/Android 식별자는 설정 파일에서 읽히게 했습니다.

  • 규칙: 코드는 최소, 화면부터 보이게. 고급 설정은 전부 메모로 남겼습니다.

내가 만든 문서

  • docs/DEPLOYMENT.md — 빌드 순서, 체크리스트, 제출 절차를 따라 하기용으로 적었습니다.


2) 탭 만들기 — 한글로 깔끔하게 📱

  • 하단에 홈·게시글·채팅·알림 탭을 만들고 한글 라벨로 통일했습니다.

  • 설정온보딩(초대 코드 + 카카오 로그인) 화면도 추가했습니다.

  • 배운 점: 파일이 폴더처럼 보여서 어디에 뭐가 있는지 눈에 보이는 게 초보에게 좋았습니다.

간단 체크 ✅

  • 탭 전환 잘 되는지

  • 온보딩에서 로그인 화면까지 흐름이 끊기지 않는지


3) 데이터 연결 — MOCK ↔ LIVE 스위치 🔄

  • 처음엔 목데이터로 화면만 완성했습니다.

  • 나중에 옵션을 LIVE로 바꾸면 Firestore에서 실제 데이터를 읽어오게 했습니다.

  • 인터넷이 끊겨도 앱이 안 튀지 않게: 실패하면 빈 상태로 보이게 했습니다.

초보 팁 📝

  • 빈 목록도 설명 문구를 넣어두면 당황하지 않습니다. (예: “아직 공지가 없어요”)


4) 화면 최소기능 — 많이 말고, 꼭 필요한 것만 🎯

  • : 필수 글 / 최근 공지, 읽음 표시

  • 게시글: 검색 + 즐겨찾기(★/☆), 상세에 작성자·수정 시간

  • 채팅: DM 목록, 메시지 보내면 입력창 비우기

  • 알림: 목록 + 모두 읽음, 탭 배지 숫자 표시

작은 운영 규칙 🧭

  • 공지는 필수 / 참고 두 가지 태그만 사용 (읽음 배지 의미가 명확)

  • 제목은 [지점] 카테고리 - 주제로 통일 (검색이 쉬워짐)


5) 배포 준비 — 팀원이 그대로 따라 하도록 📦

  • docs/DEPLOYMENT.md에 이런 걸 넣었습니다:

    • .env.production 예시(이름만, 실제 값은 비공개)

    • EAS 빌드 순서: development → preview → production

    • 15분 QA 체크리스트: 로그인 / 탭 전환 / 읽음·즐겨찾기 / 오프라인 / 재실행

    • 스토어 제출 절차: 아이콘, 스플래시, 스크린샷, 개인정보 처리방침

  • eas.json으로 development / preview / production 프로필을 나눠, 빌드마다 MOCK/LIVE가 자동으로 맞춰지게 했습니다.


결과와 배운 점

지금 되는 것

  • 4개 탭 + 온보딩이 실기기에서 돌아갑니다

  • MOCK/LIVE 전환 가능합니다

  • 카카오 로그인(라이트) 동작, 다음 단계(서버 기능) 연결 준비 완료

  • 배포 과정이 문서로 정리되어 팀원이 그대로 따라 할 수 있습니다

배운 점(초보 관점)

  • 완벽보다 동작. 오늘은 화면, 내일은 데이터, 모레는 알림.

  • 앱은 안 깨지는 것이 먼저. 네트워크가 끊겨도 조용히 빈 상태로.

  • 헷갈리면 문서. 다음에 내가 봐도 이해되는 말로 쓰기.

다음 할 일

  • Cloud Functions: 초대 코드 사용, 카카오 토큰 발급 같은 진짜 인증 만들기

  • Firestore 보안 규칙·데이터 구조 확정 → LIVE 데이터로 최종 점검

  • expo-notifications로 공지/멘션 푸시 알림 연결, QA

  • 스토어 제출 준비: 스크린샷, 소개 문구, 개인정보 처리방침 확인

1
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요