NAYA
개요
NAYA는 "NA(나)를 소개하는 가장 쉬운 방법"이라는 콘셉트의 소개 카드 관리 서비스입니다. 멀티미디어 소개 카드(Naya)와 명함(Business Card)을 제작하고, QR코드·카카오톡·Instagram 스토리로 공유할 수 있습니다.
Android 앱을 중심으로 React 웹 뷰어와 Spring Boot 백엔드를 결합한 크로스 플랫폼 구조이며, SSAFY 7기 자율 프로젝트로 6인 팀에서 약 7주간 개발하여 Google Play Store에 출시했습니다. 최우수상(1위) 수상.
주요 기능
Naya 소개 카드 제작
- CameraX 기반 촬영 또는 갤러리에서 이미지 선택
- 드로잉(DrawBox), 텍스트, 스티커 오버레이로 커스터마이징
- 색상 피커, 폰트 선택, 카드 프레임 자동 인식
- 제작된 카드는 Room DB + MediaStore에 저장
명함 OCR 인식
- DocumentScanner로 명함 앞·뒷면 촬영
- ML Kit (Korean) + Tesseract 이중 OCR 파이프라인
- 이름, 이메일, 전화번호, 회사, 직함 등 자동 필드 추출
- 인식 결과 확인 후 수정·저장
다채널 카드 공유
- QR코드: ZXing 라이브러리로 생성, 웹 URL 연동
- 카카오톡: Kakao Link API 연동
- Instagram: 스토리 공유 연동
- 웹에서 3D 원근 효과로 공유된 카드 조회 (마우스/터치 기반 회전)
일정 관리
- 커스텀 캘린더 UI (자체 구현)
- 스케줄 생성·수정·삭제, 알람 설정
- 일정 참석자에 소개 카드(Naya)·명함 연동
- 위치 정보 연동 (Google Maps)
기술 스택
| 분류 | 기술 |
|---|---|
| Android | Kotlin, Jetpack Compose, CameraX, Room, Hilt, Navigation Compose |
| Frontend | React 18, TypeScript, Redux Toolkit, React Router, Axios, Styled Components, Framer Motion |
| Backend | Java 8, Spring Boot 2.7, JPA, MySQL |
| OCR | ML Kit (Korean Text Recognition), Tesseract, OpenCV (스캔 전처리) |
| 공유 | ZXing (QR), Kakao SDK, Instagram 스토리 (Facebook SDK) |
| 미디어 | ExoPlayer (Media3), Glide, Coil, DrawBox |
| 인증/저장 | Firebase Auth, Firebase Storage |
| 인프라 | Docker, Jenkins CI/CD, Nginx, Let's Encrypt SSL |
아키텍처
카드 유형
| 유형 | 설명 |
|---|---|
| Naya | 내가 만든 멀티미디어 소개 카드 |
| Nuya | 상대방이 공유한 소개 카드 |
| Business Naya | 내 명함 (OCR 또는 템플릿으로 등록) |
| Business Nuya | 상대방이 공유한 명함 |
담당 역할
Android 개발을 담당했습니다.
- 카드 제작 UI: Jetpack Compose 기반 카드 커스터마이징 화면, 이미지 편집 기능 구현
- CameraX 연동: 촬영, 렌즈 전환, EXIF 회전 처리, 프론트 카메라 미러링
- OCR 파이프라인: ML Kit + Tesseract 이중 인식, 필드 자동 추출 로직
- Room DB 설계: Card, Schedule, Member, Alarm 엔티티 및 DAO 설계
- 공유 기능: QR코드 생성, 카카오톡·Instagram 스토리 공유 연동
- 네비게이션: Navigation Compose 기반 화면 전환 그래프 설계
회고
SSAFY 자율 프로젝트에서 최우수상을 받은 프로젝트입니다. Jetpack Compose가 아직 초기이던 시점에 전면 도입했고, 캘린더처럼 라이브러리를 붙여 보려다 결국 직접 만든 UI도 있었습니다.
명함 OCR이 가장 까다로웠습니다. CameraX로 찍은 이미지에서 OpenCV로 명함 경계를 먼저 잡고, 그 안의 글자를 ML Kit와 Tesseract 두 엔진에 태우는 구조로 만들었습니다. 한 엔진만 쓰면 명함 디자인에 따라 인식률이 들쭉날쭉해서 결과를 비교하는 방식을 택했습니다.
공유는 QR코드·카카오톡·Instagram 스토리가 각각 동작이 다른데, 쓰는 사람 입장에서는 같은 흐름으로 보이도록 묶었습니다. 데이터를 Room에 먼저 쓰고 나중에 동기화하는 구조라 네트워크가 없어도 카드를 열고 고칠 수 있습니다.