IchiMozzi

JLPT 일본어 학습을 위한 AI 기반 맞춤형 학습 앱

  • 🎯 프로젝트 개요

    프로젝트 기간: 2024.01 - 06 (6개월)
    개발 형태: 개인 프로젝트
    역할: 풀스택 개발자 (기획, 설계, 개발, 배포, 운영)
    플랫폼: Android (Google Play Store 출시), iOS (App Store 출시)

    IchiMozzi는 JLPT 시험 준비생들을 위한 맞춤형 일본어 학습 애플리케이션입니다. 일본어 학습자의 실력을 객관적으로 분석하고, 개인별 취약점에 맞춘 효율적인 학습 경험을 제공하는 것을 목표로 합니다.

    어플리케이션 홈

    IchiMozzi 홈 화면

    시스템은 React Native 모바일 앱, NestJS 백엔드 서버, PostgreSQL 데이터베이스로 구성되어 있으며, JWT, REST API, Firebase 등 다양한 기술을 통해 유기적으로 연결되어 있습니다.

    핵심 성과 요약

    • Frontend (React Native): 모바일 앱 UI/UX, 상태 관리
    • Backend (NestJS): API 서버, 데이터베이스 설계
    • DevOps & 인프라: AWS 배포, Firebase 연동
    • 기획 & 설계: 사용자 스토리, 시스템 설계

    해결한 핵심 문제들

    • 객관적 실력 측정의 어려움 → 영역별 세분화된 점수 시스템 (어휘/문법/독해)
    • 개인화된 학습 경로 부재 → 사용자 레벨별 맞춤형 문제 추천
    • 체계적인 복습 시스템 부족 → 유연한 오답 노트 그룹 관리

    프로젝트 자료

  • 🛠️ 기술 스택

    모바일 앱 개발

    • React Native v0.76.6 - 크로스 플랫폼 모바일 개발
    • TypeScript v5.3.3 - 정적 타입 안전성 보장
    • Expo v52.0.27 - 개발 도구 및 배포 최적화
    • React Navigation v7.0.14 - 화면 라우팅 및 네비게이션
    • React Native Paper v4.11.2 - Material Design UI 컴포넌트

    백엔드 시스템

    • NestJS v9.1.0 - Node.js 기반 서버 프레임워크
    • TypeORM v0.3.10 - 객체 관계형 매핑 (ORM)
    • PostgreSQL v16.1 - 관계형 데이터베이스
    • JWT - 사용자 인증 및 토큰 관리
    • bcrypt v5.1.0 - 비밀번호 암호화

    클라우드 인프라

    • AWS RDS - PostgreSQL 데이터베이스 호스팅
    • AWS EC2 - 백엔드 서버 호스팅
    • Firebase - 푸시 알림 서비스
    • Expo Application Services (EAS) - 앱 빌드 및 배포

    개발 도구 & 협업

    • GitHub - 버전 관리 및 소스 코드 관리
    • Axios v1.7.9 - HTTP 클라이언트 라이브러리
    • Context API - React Native 전역 상태 관리

    데이터베이스 설계

    // 사용자 엔티티 - 세분화된 점수 시스템
    @Entity()
    export class User {
        @PrimaryGeneratedColumn()
        id!: number;
    
        @Column({ unique: true })
        email!: string;
    
        @Column()
        passwordHash!: string;
    
        // JLPT 레벨별 관리
        @Column({ default: 'N5' })
        currentLevel!: string;
    
        // 영역별 세분화된 점수 (각 최대 1000점)
        @Column({ default: 0 })
        vocabScore!: number;      // 어휘 점수
    
        @Column({ default: 0 })
        grammarScore!: number;    // 문법 점수
    
        @Column({ default: 0 })
        readingScore!: number;    // 독해 점수
    
        // 푸시 알림 관리
        @Column({ nullable: true })
        pushToken!: string;
    
        @OneToMany(() => WrongNoteGroup, (group) => group.user, { cascade: true })
        wrongNoteGroups!: WrongNoteGroup[];
    }
    
  • 🚀 주요 구현 기능

    1. 개인화된 학습 관리 시스템

    IchiMozzi 홈 화면

    구현 특징:

    • 실시간 학습 데이터: useFocusEffect로 화면 진입 시마다 최신 데이터 반영
    • 직관적 정보 표시: 점수를 1000점 기준으로 정규화하여 이해하기 쉽게 표시
    • 맞춤형 학습 경로: 사용자 JLPT 레벨에 따른 개인화된 문제 추천
    • Context API 상태 관리: 앱 전체 인증 상태와 푸시 토큰 효율적 관리

    2. 사용자 정보 관리 시스템

    사용자 정보 화면

    구현 특징:

    • 개인 프로필 관리: 사용자 정보, 학습 설정, 알림 설정 통합 관리
    • 서비스 등급 표시: 프리미엄, 베이직, 게스트 사용자별 차별화된 정보 제공
    • 학습 통계 요약: 현재 레벨, 총 점수, 문제 풀이 수 등 핵심 지표 표시

    3. 학습 분석 및 시각화

    좌: 영역별 실력 분석 차트 | 우: 일별/주별/월별 학습 로그 관리

    구현 특징:

    • 영역별 세분화 분석: 어휘, 문법, 독해 영역별 상세 점수 추적
    • 시계열 학습 데이터: 일별, 주별, 월별 학습 활동 기록 및 분석
    • 취약점 식별: 사용자의 약한 영역을 시각적으로 명확히 표시

    4. 학습 로그 상세 분석

    학습 로그 상세

    구현 특징:

    • 상세 학습 기록: 각 학습 세션별 문제 유형, 정답률, 소요 시간 등 종합 분석
    • 진도 추적: 학습 목표 대비 실제 달성도 모니터링
    • 성과 시각화: 그래프와 차트를 통한 직관적인 학습 성과 표시

      5. 오답 노트 시스템

    좌: 사용자 정의 오답 노트 그룹 | 우: 오답 문제 상세 분석 및 복습

    구현 특징:

    • 유연한 그룹화: 사용자가 주제별, 난이도별로 자유롭게 오답 문제 그룹 생성
    • 다대다 관계: 하나의 문제가 여러 그룹에 속할 수 있는 유연한 데이터 구조
    • 맞춤형 복습: 취약점 기반 복습 문제 자동 추천 시스템

    6. 집중 학습 모드

    좌: 몰입도 높은 집중 학습 모드 | 우: 실시간 피드백 제공 문제 풀이

    구현 특징:

    • 미니멀 UI: 학습 집중도를 높이는 깔끔한 인터페이스 설계
    • 실시간 피드백: 문제 풀이 즉시 정답/오답 여부와 해설 제공
    • 학습 데이터 수집: 사용자의 문제 풀이 패턴을 백엔드로 실시간 전송
  • 📈 개발 프로세스 & 성과

    6개월 개발 일정

    개발 단계별 주요 성과:

    단계 기간 주요 작업 완료율
    기획 & 설계 1월 1-2주 사용자 스토리, 시스템 설계 100%
    백엔드 개발 1월 3주 - 3월 NestJS API, 데이터베이스 구축 100%
    프론트엔드 개발 2월 - 4월 React Native 앱 UI/UX 100%
    기능 통합 4월 - 5월 API 연동, 테스트 100%
    배포 & 운영 5월 - 6월 AWS 배포, Play Store 출시 100%

    개발 규모 및 품질

    코드 통계:

    • Frontend (React Native): 약 8,000줄 (TypeScript)
    • Backend (NestJS): 약 5,000줄 (TypeScript)
    • 총 코드량: 13,000+줄
    • 화면 수: 20+ 화면 (홈, 학습, 분석, 설정 등)

    아키텍처 특징:

    // Context API 기반 전역 상태 관리
    export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
        const [accessToken, setAccessToken] = useState<string | null>(null);
        const [pushToken, setPushToken] = useState<string | null>(null);
    
        // 앱 시작 시 자동으로 푸시 알림 토큰 등록
        useEffect(() => {
            (async () => {
                const token = await registerForPushNotificationsAsync();
                setPushToken(token);
            })();
        }, []);
    
        return (
            <AuthContext.Provider value=>
                {children}
            </AuthContext.Provider>
        );
    };
    

    인증 시스템 구현

    // 다중 인증 방식 지원 (일반/게스트)
    @Injectable()
    export class AuthService {
        // 1. 일반 회원가입 - JLPT 레벨별 초기 점수 설정
        async register(registerDto: RegisterDto) {
            // JLPT 레벨에 따른 초기 점수 설정
            let vocabScore = 0, grammarScore = 0, readingScore = 0;
            switch(level) {
                case 'N4': vocabScore = grammarScore = readingScore = 200; break;
                case 'N3': vocabScore = grammarScore = readingScore = 400; break;
                case 'N2': vocabScore = grammarScore = readingScore = 600; break;
                case 'N1': vocabScore = grammarScore = readingScore = 800; break;
            }
            // bcrypt 암호화 및 사용자 생성 로직
        }
    
        // 2. 게스트 로그인 - 가입 없이 체험 가능
        async guestLogin() {
            const randomSuffix = Date.now() + '_' + Math.floor(Math.random() * 100000);
            const tempEmail = `guest_${randomSuffix}@temp.guest`;
            // 임시 사용자 생성 및 토큰 발급
        }
    }
    

    데이터베이스 설계 성과

    핵심 엔티티 관계:

    // 오답 노트 시스템 - 유연한 다대다 관계
    @Entity('wrong_note_groups')
    export class WrongNoteGroup {
        @PrimaryGeneratedColumn()
        id!: number;
    
        @Column()
        name!: string; // 사용자 정의 그룹 이름
    
        @ManyToOne(() => User, (user) => user.wrongNoteGroups, { onDelete: 'CASCADE' })
        user!: User;
    
        @ManyToMany(() => Problem)
        @JoinTable({
            name: 'wrong_note_group_problems',
            joinColumn: { name: 'groupId', referencedColumnName: 'id' },
            inverseJoinColumn: { name: 'problemId', referencedColumnName: 'id' },
        })
        problems!: Problem[];
    }
    

    배포 및 운영 경험

    클라우드 인프라 구축:

    // AWS RDS PostgreSQL 연동
    export const typeORMConfig: TypeOrmModuleOptions = {
        type: 'postgres',
        host: 'ichimozzi.cxkekoe889ud.ap-northeast-2.rds.amazonaws.com',
        port: 5432,
        username: 'postgres',
        database: 'IchiMozzi',
        ssl: {
            rejectUnauthorized: false,
        },
        entities: [__dirname + '/../**/*.entity{.ts,.js}'],
        synchronize: true,
    };
    

    성과:

    • Google Play Store, App Store 성공 출시: 실제 사용자 대상 서비스 운영
    • AWS 클라우드 배포: EC2, RDS 기반 안정적인 인프라 구축
    • Firebase 푸시 알림: 사용자 재참여 유도 시스템 구축
  • 💡 핵심 기술 성과

    1. 풀스택 개발 역량 완성 ⭐

    도전: 기획부터 배포까지 모든 과정을 혼자서 완주

    해결: 모듈화된 아키텍처와 체계적인 개발 프로세스 적용

    // NestJS 모듈 기반 백엔드 아키텍처
    @Module({
        imports: [
            TypeOrmModule.forRoot(typeORMConfig),
            AuthModule,          // 사용자 인증 관리
            UsersModule,         // 사용자 정보 관리
            AnalysisModule,      // 학습 분석 시스템
            LearningModule,      // 학습 콘텐츠 관리
            WebhookModule,       // 외부 서비스 연동
            WrongNoteGroupModule,// 오답 노트 관리
            NotificationsModule, // 푸시 알림 시스템
        ],
    })
    export class AppModule {}
    

    성과:

    • Frontend & Backend: TypeScript 기반 타입 안전성 확보
    • 데이터베이스: PostgreSQL + TypeORM 복잡한 관계 모델링
    • 클라우드 배포: AWS 기반 프로덕션 환경 구축

    2. React Native 크로스 플랫폼 개발 ⭐

    도전: 하나의 코드베이스로 iOS/Android 호환 모바일 앱 개발

    해결: Expo + React Native Paper 조합으로 일관된 UI/UX 구현

    // 반응형 UI 구현 - 다양한 디바이스 대응
    const styles = StyleSheet.create({
        greetingCard: {
            backgroundColor: '#fff',
            borderRadius: normalize(8, 8, 12),
            padding: normalize(20, 20, 24),
            marginVertical: normalize(10, 10, 15),
            elevation: 3,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: normalize(2, 2, 3) },
            shadowOpacity: 0.1,
            shadowRadius: normalize(4, 4, 6),
        },
    });
    

    성과:

    • 크로스 플랫폼: 하나의 코드로 Android, iOS 앱 출시
    • Expo 활용: OTA 업데이트로 빠른 배포 사이클
    • Material Design: 직관적이고 일관된 사용자 경험

    3. 사용자 중심 데이터 모델링 ⭐

    도전: 복잡한 학습 데이터를 효율적으로 관리할 수 있는 데이터베이스 설계

    해결: 영역별 세분화된 점수 시스템과 유연한 오답 노트 구조

    // 세분화된 학습 데이터 모델
    @Entity()
    export class User {
        // 영역별 세분화된 점수 시스템 (각 최대 1000점)
        @Column({ default: 0 })
        vocabScore!: number;      // 어휘 점수
    
        @Column({ default: 0 })
        grammarScore!: number;    // 문법 점수
    
        @Column({ default: 0 })
        readingScore!: number;    // 독해 점수
    
        // 유연한 오답 노트 관계
        @OneToMany(() => WrongNoteGroup, (group) => group.user, { cascade: true })
        wrongNoteGroups!: WrongNoteGroup[];
    }
    

    성과:

    • 정확한 실력 분석: 영역별 취약점 명확한 식별
    • 개인화된 학습: 사용자별 맞춤형 문제 추천 가능
    • 확장 가능한 구조: 새로운 학습 영역 추가 시 유연한 확장

    4. 보안 강화된 인증 시스템 ⭐

    도전: 사용자 접근성과 보안을 동시에 만족하는 인증 시스템

    해결: JWT + bcrypt + 게스트 로그인 다중 인증 방식 구현

    // 안전한 비밀번호 처리
    const salt = await bcrypt.genSalt();
    const passwordHash = await bcrypt.hash(password, salt);
    
    // JWT 토큰 기반 인증
    const payload = { userId: user.id, email: user.email };
    const token = this.jwtService.sign(payload);
    
    // 게스트 사용자 자동 생성
    const randomSuffix = Date.now() + '_' + Math.floor(Math.random() * 100000);
    const tempEmail = `guest_${randomSuffix}@temp.guest`;
    

    성과:

    • 보안: bcrypt 솔트 기반 안전한 비밀번호 저장
    • 접근성: 게스트 로그인으로 진입 장벽 최소화
    • 확장성: JWT 토큰 기반 무상태 인증 시스템

    5. 실제 서비스 운영 경험 ⭐

    도전: 개발한 앱을 실제 사용자들이 사용할 수 있도록 배포 및 운영

    해결: Google Play Store 출시와 AWS 클라우드 기반 안정적인 서비스 운영

    성과:

    • 실제 출시: Google Play Store, App Store에서 다운로드 가능한 완성된 앱
    • 클라우드 운영: AWS RDS, EC2 기반 24시간 서비스 운영
    • 사용자 피드백: 실제 사용자들의 피드백을 통한 지속적 개선

    기술적 성장 지표

    프로젝트 진행에 따른 기술 역량 향상:

    영역 프로젝트 시작 3개월 경과 프로젝트 완료
    React Native 개발 30% 70% 90%
    NestJS 백엔드 20% 80% 95%
    데이터베이스 설계 40% 75% 85%
    클라우드 배포 10% 60% 80%
    프로젝트 관리 50% 80% 90%

    혁신성 포인트:

    • 🚀 개인 프로젝트 완주: 6개월간 풀스택 개발 완성
    • 📱 실제 서비스 출시: Google Play Store, App Store 정식 출시
    • 🔒 보안과 접근성: 게스트 로그인으로 진입 장벽 해결
    • 📊 데이터 기반 학습: 개인화된 학습 분석 시스템
  • 🎬 프로젝트 갤러리

    메인 학습 인터페이스

    좌: 개인화된 학습 대시보드 | 우: 사용자 프로필 및 설정 관리

    학습 분석 및 데이터 시각화

    좌: 어휘/문법/독해 영역별 실력 분석 | 우: 시계열 학습 활동 기록

    오답 노트 관리 시스템

    좌: 유연한 오답 문제 그룹화 | 우: 상세 문제 분석 및 맞춤형 복습

    집중 학습 모드

    좌: 미니멀한 집중 학습 인터페이스 | 우: 즉시 피드백 제공 문제 풀이

    상세 학습 분석

    학습 세션별 상세 분석 - 문제 유형, 정답률, 소요 시간 종합 추적

    개발 성과 요약

    "6개월간의 개인 프로젝트를 통해 React Native 모바일 앱NestJS 백엔드 시스템을 완전히 마스터하고, Google Play Store 정식 출시까지 성공적으로 완주했습니다."

    풀스택 개발자로서의 역량 완성
  • 🔮 향후 개선 계획 & 학습

    기술적 확장 계획

    1. AI 기능 고도화
      • Gemini API 외 다양한 AI 모델 연동
      • 사용자 학습 패턴 기반 문제 생성 알고리즘 개선
      • 음성 인식 기반 발음 연습 기능 추가
    2. 소셜 기능 확장
      • 학습자 간 경쟁 및 협업 기능
      • 학습 성과 공유 시스템
      • 커뮤니티 기반 문제 공유 플랫폼

    개인 역량 성장

    기술적 성장

    • 모바일 개발: React Native 전문성 확보
    • 백엔드 개발: NestJS 기반 대규모 시스템 설계 역량
    • 데이터베이스: PostgreSQL 성능 최적화 및 고급 쿼리 작성
    • 클라우드 운영: AWS 서비스 통합 활용 (Lambda, CloudFront 등)

    프로젝트 관리

    • 개인 프로젝트 완주: 6개월 장기 프로젝트 성공적 완료
    • 실제 서비스 운영: Play Store 출시 및 사용자 피드백 관리
    • 품질 관리: TypeScript 기반 타입 안전성 확보

    비즈니스 가치

    IchiMozzi 프로젝트를 통해 다음과 같은 실무 적용 가능한 역량을 갖추었습니다:

    • 모바일 앱 개발: React Native + Expo 기반 크로스 플랫폼 개발
    • 백엔드 시스템: NestJS + TypeORM 기반 확장 가능한 API 서버
    • 데이터베이스 설계: 복잡한 관계형 데이터 모델링 및 최적화
    • 클라우드 배포: AWS 기반 프로덕션 환경 구축 및 운영
    • 보안 구현: JWT 인증, bcrypt 암호화 등 보안 강화
    • 사용자 경험: 직관적인 UI/UX 설계 및 접근성 고려

    개선 예정 기능

    기술적 개선:

    • 오프라인 지원: 네트워크 연결 없이도 기본 학습 기능 제공
    • 성능 최적화: 메모이제이션 확대 및 번들 크기 최적화
    • 테스트 커버리지: 단위 테스트 및 통합 테스트 확대

    사용자 경험 개선:

    • 애니메이션: 부드러운 마이크로 인터랙션 추가
    • 다크 모드: 사용자 선호도에 따른 테마 선택
    • 접근성: 시각 장애인을 위한 스크린 리더 지원

    이 프로젝트는 개인 개발자로서의 완전한 역량을 보여주는 대표작으로, 기획부터 배포까지의 전체 개발 생명주기를 성공적으로 완주한 경험을 담고 있습니다.