생각과 행동(IDEA on Action)

안녕하세요! 정보관리기술사 수험생 여러분과 개발에 관심 있는 분들을 위해 저희 정보관리기술사 서술형 문제 은행 시스템 MVP 개발 프로젝트의 여정을 회고하고자 합니다. 이 프로젝트는 수험생들이 서술형 문제를 풀고 답안 이미지를 업로드하면, AI가 OCR을 통해 텍스트를 추출하고 채점 및 피드백을 제공하는 혁신적인 시스템을 목표로 합니다.

1. 프로젝트 개요 및 목표

저희 프로젝트의 핵심 목표는 정보관리기술사 서술형 시험 준비 과정을 효율적으로 지원하는 것입니다. 기존의 주관식 시험 준비 방식의 한계를 극복하고, AI 기반의 자동 채점 및 맞춤형 피드백을 제공하여 수험생들의 학습 경험을 혁신하는 데 중점을 두었습니다. 특히, MVP (Minimum Viable Product) 개발을 통해 핵심 기능을 빠르게 구현하고 실제 사용자 피드백을 반영하여 서비스를 고도화하는 것을 목표로 했습니다.

2. 주요 구현 기능 및 성과 (2025-09-07 기준)

현재까지 프로젝트는 다양한 핵심 기능들을 성공적으로 구현했습니다.

• 시스템 핵심 전환: 초기 React + Vite 환경에서 Next.js 14 App Router로의 마이그레이션을 완료하여, 더 강력한 성능과 개발 편의성을 확보했습니다.
• 프로덕션 환경 구축: Vercel에 dev/staging/prod 3환경 배포를 완료하고, CDN, Edge Functions, Analytics 등을 활용하여 안정적인 프로덕션 환경을 구축했습니다.
• 데이터베이스 및 인증: Supabase와 완벽하게 연동하여 데이터베이스, 인증, Edge Functions 기능을 활용하고 있습니다. 사용자 로그인/회원가입 UI 또한 Supabase Auth와 연동되어 구현되었습니다.
• 성능 최적화: SSR/SSG/ISR(서버 사이드 렌더링, 정적 사이트 생성, 점진적 정적 재생성)을 적용하고, Next.js Image 최적화 및 번들 분석을 통해 초기 로딩 속도를 50% 향상시키는 등 탁월한 성능 개선을 이루어냈습니다.
• 모니터링 및 CI/CD: Sentry를 통한 에러 추적과 Vercel Analytics를 통한 성능 분석 시스템을 적용하여 안정적인 운영 기반을 마련했습니다. 또한, GitHub Actions를 활용한 자동 배포 파이프라인을 완성하여 개발 효율성을 극대화했습니다.
• 프론트엔드 핵심 구조: Header, 메인 페이지, 카테고리 페이지 등 기본 구조와 함께 문제 목록 조회, 문제 상세 페이지, 답안 작성 기능을 포함한 연습 모드를 구현했습니다.
• 답안 제출 시스템: 텍스트 및 이미지 답안 제출 기능과 중복 제출 방지 시스템을 완성하여 사용자 편의성을 높였습니다.
• 내 답안 관리: 답안 목록 조회, 상태별 필터링, 채점 결과 확인 등 사용자가 자신의 답안을 효율적으로 관리할 수 있는 기능을 제공합니다.
• 디자인 시스템: 20개 이상의 컴포넌트와 다크 테마를 지원하는 커스텀 디자인 시스템을 구축하여 일관된 UI/UX를 제공합니다.

3. 기술 스택

이 프로젝트는 최신 웹 기술 스택을 적극적으로 활용하여 구축되었습니다.

• 개발 환경: Cursor (AI Assistant)
• 프레임워크: Next.js 14 (App Router, SSR/SSG/ISR)
• 라우팅: 파일 기반 라우팅 (App Router)
• 백엔드: Supabase (PostgreSQL + RLS, Edge Functions) + Next.js API Routes
• 배포: Vercel (자동 배포, CDN, Edge Functions, Analytics)
• CI/CD: GitHub Actions
• 모니터링: Sentry (에러 추적) + Vercel Analytics (성능 분석)
• AI: OpenAI API (GPT-4), Google Cloud Vision API (OCR) (예정 작업 포함)
• 스타일링: Tailwind CSS + 커스텀 디자인 시스템
• 상태 관리: TanStack Query + Server State
• 폼 관리: React Hook Form + Zod
• UI 컴포넌트: Radix UI + 커스텀 디자인 시스템
• 언어: TypeScript

4. 개발 과정의 도전과 해결

개발 과정에서는 여러 도전 과제가 있었지만, 체계적인 접근과 원칙 준수를 통해 성공적으로 해결했습니다.

• Next.js 14 마이그레이션: React + Vite에서 Next.js 14 App Router로의 전환은 큰 작업이었지만, 이를 통해 SSR/SSG/ISR 적용, 이미지 최적화, 번들 분석 구축 등의 성능 개선을 이루어냈습니다.
• 안정성 강화: Cannot read properties of undefined (reading 'map') 에러와 같은 안정성 문제를 해결하기 위해 모든 배열 처리에 (array || []).map() 패턴을 적용하고, Optional chaining (?.) 및 기본값 제공 패턴, 그리고 타입 안전성을 강화하는 노력을 기울였습니다. any 타입 제거 및 구체적 타입 적용을 통해 코드의 견고함을 높였습니다.
• 개발 가이드라인 준수: /docs 폴더 내에 디자인 시스템, 개발 가이드, API 문서, 아키텍처 문서 등 상세한 문서를 구축하고, 코딩 컨벤션, 브랜치 전략, PR 워크플로우 등의 엄격한 개발 가이드라인을 준수하여 프로젝트의 일관성과 품질을 유지했습니다.
• 데이터 모델 구축: mockQuestions.ts와 mockAnswers.ts를 통해 완전한 데이터 모델을 구축하고, 현재는 이 Mock 데이터를 Supabase 실제 데이터로 전환하는 작업을 진행 중입니다.

5. 현재 작업 및 앞으로의 계획

현재 프로젝트는 MVP의 핵심 기능 구현을 넘어, AI 기반의 실제 연동 단계로 나아가고 있습니다.

• 현재 작업:
  • Mock 데이터를 Supabase 실제 데이터로 전환하는 작업.
  • Google Cloud Vision API를 활용한 OCR 및 AI 채점 실제 API 연동 작업.
  • 성능 모니터링 및 사용자 피드백 수집을 통한 운영 최적화.
• 예정 작업:
  • 베타 테스트: 실제 사용자를 대상으로 한 테스트 및 피드백 수집.
  • 성능 튜닝: 실사용 데이터를 기반으로 한 추가 최적화.
  • 기능 확장: 사용자 요구사항을 반영한 추가 기능 개발.
  • 정식 런칭: 최종 프로덕션 서비스 오픈.

6. 마무리하며

정보관리기술사 AI 문제은행 시스템 MVP 개발은 기술적인 도전과 학습의 연속이었습니다. Next.js 14 마이그레이션, Supabase 연동, CI/CD 구축, 성능 최적화 등 수많은 마일스톤을 달성하며 시스템의 기반을 단단히 다졌습니다. 이제 AI 기능 연동과 사용자 테스트를 통해 더욱 완벽한 서비스를 제공할 수 있도록 최선을 다할 것입니다.

이 시스템이 정보관리기술사를 준비하는 수험생 여러분의 학습 효율을 극대화하고, 합격에 큰 도움이 되기를 기대합니다. 저희 프로젝트의 다음 단계에도 많은 관심과 응원 부탁드립니다. 감사합니다!