개요
2025 서울 시립대학교 ECE IF 웹 소스코드 입니다.
IOT smart home을 주제로 은상을 수상하였습니다.

구조

1. aws 프로젝트의 주요 모듈들이 올라간 곳입니다. redis, proxy용 nginx, frontend용 nginx, nest.js 로 총 네개의 컨테이너를 docker-compose로 띄웠습니다. 해당 컨테이너들은 aws EC2에 배포되었고 추가로 데이터베이스를 위해 aws RDB 서비스를 이용했습니다.

   1. frontend react로 제작되었고 RN webview를 위해 모바일 대응을 하였습니다. 랜더링 될 때 backend와 소켓통신을 연결하여 센서 정보, 스트리밍 정보, 제어 신호 등을 주고받게 하였습니다.
   2. backend nest.js로 제작하였고 기상청에서 날씨 api를 받아오는 모듈, 메일 인증을 수행하는 모듈, 스트리밍 모듈, 소켓 통신 모듈 등이 존재합니다.
   3. proxy frontend와 backend 앞단에 배치해 http와 https 사이의 변환을 수행하고 서버 뒷단의 부하를 줄였습니다. 또한 frontend와 backend간의 주요 통신에는 소켓통신을 사용해 최초 연결 이후에는 proxy를 경유하지 않게 설계하여 오버헤드를 줄였습니다.
   4. redis 회원들의 token 정보들을 빠르게 주기 위해 두었습니다.
   5. RDS mysql로 설정하였고 이름, 이메일, 비밀번호, 얼굴벡터 주소, 블루투스 mac주소 등의 유저 정보를 저장하는 테이블, 메일인증 번호를 저장하는 테이블이 존재합니다. 비밀번호는 backend 단에서 해싱해서 저장하도록 하였습니다. 얼굴벡터는 저장하기에는 너무 커서 라즈베리파이에 파일 형식으로 저장하고 저장된 경로를 저장하게 했습니다.

2. app 어플이 설치된 모바일 환경으로 react native로 개발하여 expo로 테스트 한뒤 android studio와 jdk를 이용해 apk로 빌드하여 배포했습니다.

   1. webview component frontend의 웹 화면을 띄우는 컴포넌트입니다. 모바일 대응이 되어 네이티브 앱처럼 동작합니다.
   2. blutooth component 스마트워치의 블루투스 모듈과 블루투스 통신을 수행하는 컴포넌트입니다.

3. Pi aws에 아두이노의 정보를 aws에 전달하고 aws의 제어신호를 아두이노에 전달하는 역할을 수행하는 곳입니다. 사전에 등록된 휴대폰의 핫스팟에 연결되어 인터넷에 접속하고 접속에 성공하면 aws와 소켓을 연결합니다. usb 포트로 웹캠, 아두이노와 물리적으로 연결되어 시리얼 통신을 수행합니다. 동작하는 모듈은 node.js로 작성되었고 pm2을 사용해 백그라운드에서 동작하고 전원 공급시 스스로 켜지게 설계습니다.

   1. serial module 아두이노, 웹캠과 시리얼 통신을 수행하는 모듈로 동시에 aws backend와 소켓 연결로 데이터를 주고받습니다. 또한 특정 이벤트 발생시 python module을 호출하고 내부적으로 bluetooth module의 동작을 포함합니다.
   2. bluetooth module 주변 bluetooth 장치들을 주기적으로 감시하며 aws RDS 에 저장된 bluetooth mac 주소들을 읽어와서 겹치는 주소가 있다면 수동 모드가 아닐 시 모드를 외출 모드로 바꾸게 합니다.
   3. python module backend에서 얼굴 벡터 비교 요청이나 얼굴벡터 저장 요청이 왔을 때 수행되는 모듈입니다. python 가상머신 안에서 동작하며 openCV와 face_recognization 라이브러리를 사용하였습니다.

시행착오들
처음에는 워치 <-> 앱 <-> front-end <-> back-end <-> 라즈베리 파이 구조의 일직선 소켓통신 구조를 구상하였지만 앱 <-> front-end간에 통신이 이루어지지 않았고 시행착오 끝에 back-end에 요청하게 로직을 수정했습니다.
그에 따라 처음에는 front-end에서만 하드웨어의 상태를 관리하였지만 back-end에서도 하드웨어의 상태를 관리하게 변경했습니다.
React Native를 빌드하기에 JDK의 버전이 너무 높아 17버전으로 다운그레이드 하였습니다.
웹뷰를 사용해 개발시간을 크게 단축했고 웹뷰 로직과 Native 로직이 얽혀있는 문제는 Native 앱에서 웹뷰와 Native 기능 화면을 분리하여 해결했습니다.
웹캠을 대상으로 webRTC를 시도하였고 실패하여 소켓통신으로 스트리밍을 수행하게 수정하였습니다.
핫스팟을 이용한 인프라 환경이 dev 시에는 정상작동 하였으나 시연 당일 트래픽 문제로 인해 속도가 크게 느려졌습니다.
부분랜더링을 통한 완전한 싱글 페이지 front-end를 구성했으나 input 컴포넌트 클릭시 페이지가 멈추는 현상이 나타났고 react-router으로 이를 해결했습니다.
이미지를 직접 파이썬 모듈에 주입하려 하였으나 구현이 어려웠고 정적파일을 생성하고 그 경로를 인자로 건네주게 수정했습니다.
처음에는 파이썬 가상머신을 직접 was에 서빙하였으나 빌드가 압도적으로 오래걸려 라즈베리파이로 옮겼습니다.
http를 사용하면 각종 브라우저 api를 사용할 수 없었고 Certbot을 이용해 프록시 단에만 https를 적용해 이를 해결했습니다.
docker compose를 이용해 front-end와 back-end의 유기적 연결을 쉽게 구현하고 빠른 배포환경을 만들어 개발시간을 크게 단축했습니다.
처음에는 라즈베리파이에 모든 서버를 올리고 ngrok를 사용해 외부와 연결하려 했으나 최종적으로는 다수의 로직을 aws로 옮겼고 이로인해 도메인 문제와 라즈베리 파이 성능문제가 크게 개선되었습니다.
mongo db 아틀라스로 db를 구성하려 했으나 핫스팟을 켜고 끌때마다 ip가 변경되는 문제가 발생했고 서버를 aws에 올린뒤 aws의 RDB를 이용하여 문제를 해결했습니다.
라즈베리 파이의 블루투스를 감시하는 모듈의 트래픽이 증가함에 따라 aws와의 소켓 통신이 지연되거나 중지되는 문제가 발생했고 블루투스 감시 주기를 낮춰 해결했습니다.
라즈베리파이->아두이노 단에서 json을 이용한 시리얼 통신을 실시할 때 아두이노가 제대로 파싱을 하지 못하는 문제가 발생했고 }문자를 발견할 때까지 버퍼에 담은 뒤 파싱하게 하여 이를 해결했습니다.