<aside>
🎥
앱 시연 영상
![Frame 150.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/70e8d6b3-3f41-450e-8bf7-1916adcbb076/104f2655-f5ce-4eed-b2d5-3ff366a2f021/Frame_150.png)
</aside>
<aside>
🐱
Github Links
본인이 작업한 범위만 업로드했습니다.
앱 기획 배경
학원 생활의 전반에 걸쳐 학생과 선생님의 편의성을 증대하고자 했습니다.
학생들의 고충
선생님의 고충
- 학생들의 출석을 일일이 검사하고 관리해야 합니다.
- 공지사항이 있을 시 유료 대량 문자 발송 서비스를 이용해 수강생들에게 문자를 전달해야합니다.
주요 기능
입실 등록
저렴하지만 부정사용이 쉬운 QR 코드 스캔이나 값비싼 인프라를 구축해야 하는 NFC 대신, 간편하게 설치가 가능한 iBeacon을 교실 입구에 설치하면 학생이 앱에 접속 시 Bluetooth 신호를 감지함으로 입실 등록이 버튼 활성화됩니다.
게시판
수업의 안내사항을 등록해 수강생들에게 일괄 전달하는 공지사항 게시판과, 학생이 선생님에게 궁금한 점을 묻고 답변을 들을 수 있는 문의글 게시판을 구축했습니다. 게시판에 새 글이나 댓글이 달릴 시에 알림을 받아야할 대상에게 실시간 Push 알림이 전송됩니다.
AI 학습 도우미
ChatGPT-4 모델을 사용한 챗봇으로 학생에게 궁금한 점이 생기면 언제든지 답변을 들을 수 있습니다. 또한 음성을 문자로 변환하는 TTS와 답변을 음성으로 변환하는 STT를 탑재해 편의성을 도모했습니다.
기술 스택
백엔드 & 데이터베이스
로컬 환경에서 기본 기능들을 구현하고 테스트한 후, Azure Cloud에 업로드해 서버를 구성했습니다.
- Node.js ( Express ) : DAO, Service, Controller, Router 계층으로 나누어 최대한 함수 재활용이 가능하도록 설계했습니다.
- PostgreSQL : ORM ( Sequelize ) 를 활용했습니다.
프론트엔드
- SwiftUI : API 응답을 디코딩하기 위한 Model 계층과 ViewModel, View 계층으로 나누어 구현했습니다.
기타
- 협업 및 형상 관리 : Git, Github Action
- WBS 및 업무 관리 : Notion
- API 테스트 : Postman
- UI/UX 설계 및 디자인 : Figma
나의 역할
회원 관련 기능
- 회원가입 ( 자체/애플/카카오 )
유저가 선택한 로그인 방식에 따라 이메일 또는 애플/카카오에서 전달받은 회원의 고유번호를 DB의 각 컬럼에 저장합니다.
소셜 로그인의 경우 애플/카카오에서 제공한 메서드를 실행해 DB에서 고유번호를 조회합니다. 일치하는 값이 없을 경우 회원가입, 있을 경우 로그인으로 처리합니다. 회원가입 시에는 도메인 값과 고유번호를 백엔드로 전달하고, 애플/카카오 중 알맞은 컬럼에 저장합니다.
- JWT를 이용한 로그인 처리
토큰을 생성하고 검증하는 미들웨어를 각각 구현했습니다. 로그인 시 로그인 결과와 토큰을 프론트엔드로 전달해 앱의 UserDefaults에 회원 정보와 토큰을 저장합니다. 입퇴실 등록 및 게시글 작성 등의 보안 작업 시, 토큰을 백엔드 서버로 전송해 토큰 일치 여부를 검증합니다.
- 프로필 이미지 등록/수정
유저가 iOS 카메라롤에서 이미지를 선택하면 Azure Blob Container에 파일을 업로드하고, 회원 DB에 파일의 URL을 저장합니다. 이후 적절한 화면에서 asyncImage를 이용해 프로필 이미지를 로드합니다.
초기에는 등록/수정 View 로드 시 API를 호출해 이미지 URL을 fetch했으나, 필요에 따라 다양한 곳에서 이미지를 사용할 수 있게 하기 위해 프로필 이미지 View 로드 시 회원의 ID를 인자로 받아 fetch를 실행하도록 수정했습니다.
- 회원정보 수정
회원의 이름, 전화번호, 닉네임 수정 기능을 구현했습니다. 비밀번호의 경우 입력 필드를 항상 비어둬야 하므로 별도의 메뉴로 구현했습니다.
알림 관련 기능
게시판 작업에 따라 알림을 받아야할 대상에게 두 가지 형태의 알림을 생성합니다.
- 게시판 작업의 종류
- 공지사항 등록 : 선생님이 공지사항을 등록하면 해당 강좌를 듣는 모든 수강생들에게 알림이 일괄적으로 생성됩니다.
- 문의글 등록 : 문의글이 등록되면 해당 강좌의 담당 선생님에게 알림이 생성됩니다.
- 문의글 답변 등록 : 선생님이 문의글에 답변을 등록하면 문의글의 최초 등록자에게 알림이 생성됩니다.
- 알림의 종류
- 실시간 Push 알림 : 앱 최초 설치 시 알림 권한을 요청하며, 유저가 승낙 시 APNs 서버에서 발급된 기기의 토큰을 UserDefaults에 저장합니다. 로그인을 통해 회원 정보가 식별되면 DB에 해당 토큰을 저장하며, 게시판 이벤트 발생 시 알림의 내용과 알림 대상의 토큰을 APNs로 전송합니다.
- 알림 모아보기 탭 메뉴 : Push 알림의 경우 터치 시 사라지므로, 알림들을 누적해 언제든지 확인할 수 있게 하는 알림 모아보기 탭 메뉴를 구현했습니다. 게시판을 작업하시는 다른 팀원분이 게시글 등록 처리 시 함께 호출할 수 있도록 알림 생성 기능을 별도의 함수로 구현했습니다.
공통 컴포넌츠 개발
앱 내에서 공통적으로 사용되는 UI를 반복적으로 개발하지 않도록 모듈화해 팀과 공유했습니다.