1. 배경(Problem)
CS24는 개발자들이 필수적으로 알아야 할 컴퓨터 과학(CS, Computer Science)을 효과적으로 학습을 위한 플랫폼입니다. 기존의 학습 시스템은 자료 제공에 중점을 두어 사용자가 지속적으로 학습하고 피드백을 받을 수 있는 환경이 부족했습니다. 또한, 바쁜 일정 속에서 주기적으로 문제를 풀고 피드백을 받기 어려웠습니다.
이러한 문제를 해결하기 위하여 카카오톡 메시지를 활용한 AI 피드백 기반의 스마트 문제 풀이 플랫폼, CS24를 만들었습니다. 사용자는 매일 CS 문제를 받고, 문제를 풀면서 나만을 위한 AI 피드백을 받을 수 있습니다. 능동적이고 지속적인 학습이 가능하며, 오답 원인 분석 및 개선 방안으로 지속적인 발전이 가능합니다.
2. 서비스 소개(Solution)
[CS24] 시연영상
CS24는 컴퓨터 과학(CS) 기초 지식을 효과적으로 학습하고 복습할 수 있도록 설계된 학습 서비스입니다. 바쁜 일상 속에서도 지속적인 학습을 지원하기 위하여 카카오톡 메시지를 활용한 문제 알림 서비스를 제공합니다. 사용자는 매일 자동으로 제공되는 CS 문제를 풀고, AI로부터 나만의 피드백을 받을 수 있습니다.
주요 기능으로는 카카오톡을 통한 문제 풀이 알림, ChatGPT를 활용한 문제 및 해설 제공이 있습니다. 매일 문제를 풀고, 오답 원인 분석 및 개선 방안을 통해 자신의 학습을 지속적으로 발전시킬 수 있습니다.
AS-IS / TO-BE
[CS24] AS-IS / TO-BE
유사 서비스의 이메일 시스템은 사용자에게 즉각적인 알림을 제공하지 않아 메일을 통해 문제와 답안을 확인하는 데 시간이 소요되며, 문제 풀이에 대한 부족한 점과 개선할 점을 파악하기 어렵습니다. 또한, 스팸 차단의 위험성이 있고, 직접 문제 목록을 정리하지 않으면 이전에 풀었던 문제들을 다시 확인하기 어려운 불편함이 있습니다.
CS24는 카카오톡 알림을 통해 사용자에게 알림을 제공함으로써, 메일보다 빠르고 쉽게 문제를 확인할 수 있도록 개선하였습니다. 답안과 함께 AI 피드백으로 사용자가 문제 풀이 과정에서의 부족한 점과 개선할 점을 지원합니다. 사용자의 문제 풀이 목록을 제공하여, 사용자가 간편하게 복습할 수 있는 환경을 조성하였습니다.
사용자 시나리오
[CS24] 사용자 시나리오
CS24의 예상 사용자 분석 및 시나리오를 아래와 같이 설정하였습니다.
첫 번째 사용자, 김민준씨는 컴퓨터공학과 학생으로 취업을 위해 코딩테스트를 준비하고 있습니다. 취업 준비 과정에서 CS 개념을 탄탄하게 다지고 싶지만, 학습 습관을 유지하는 데 어려움을 겪고 있습니다. 김민준씨는 CS24를 활용하여 매일 문제를 풀고, 자신의 취약한 개념과 부족한 부분을 보완할 수 있습니다.
두 번째 사용자, 박지은씨는 스타트업에서 2년차 개발자로 근무하고 있으며, 실무에서 놓치고 있던 CS 개념을 학습하고자 합니다. 그러나 바쁜 업무 일정으로 인해 공부할 시간을 내기가 어렵습니다. CS24를 활용함으로써 박지은씨는 부담 없이 매일 CS를 학습할 수 있으며, 자신에게 부족한 CS 개념을 효과적으로 복습할 수 있습니다.
3. 시스템 구조 및 기술 스택
[CS24] 시스템 구조도
•
프론트엔드: React, TypeScript, Vite, Yarn
•
백엔드: Spring Boot, MySQL
•
기타 도구: GitHub, GitHub Actions, OpenAI Text Generation
시스템 흐름
프론트엔드는 React를 사용하여 사용자 인터페이스를 구축하고, 백엔드는 Spring Boot를 사용하여 API를 제공합니다. 데이터베이스는 MySQL을 통해 관리됩니다.
사용자는 OpenAI Text Generation으로 생성된 문제를 풀고, 선택한 답을 Axios를 통해 백엔드로 전송합니다. 백엔드는 Spring Boot로 작성된 API를 통해 요청을 처리하고, MySQL 데이터베이스에서 필요한 데이터를 조회하거나 저장합니다. 이후, 사용자가 선택한 답안에 맞춰 OpenAI Text Generation으로 생성된 해설을 확인할 수 있습니다.
4. 핵심 기능
1) 카카오톡 알림
매일 사용자에게 카카오톡을 통해 문제 풀이 알림을 전송합니다. 사용자가 정기적으로 문제를 풀도록 유도하여 자연스럽게 학습 습관을 형성하는 데 큰 도움을 줍니다. 알림을 통해 사용자는 학습을 지속적으로 이어갈 수 있으며, 문제 풀이에 대한 동기 부여를 받을 수 있습니다.
2) 문제 풀이 및 힌트
채팅 형식의 직관적이고 편안한 인터페이스가 제공되어, 사용자는 CS 문제를 쉽게 풀 수 있습니다. 사용자 친화적으로 설계되어 있어 복잡한 기능이나 설정 없이도 문제를 선택하고 풀이할 수 있습니다. 매일 출제되는 3가지 문제를 풀면서, 선택한 문제를 다시 풀이하거나 AI가 제공하는 힌트를 확인할 수 있습니다. 각 문제는 4지 선다형으로 구성되어 있어 다양한 선택지를 제공합니다.
3) 문제 및 해설 생성 기능
OpenAI의 텍스트 생성 기술을 활용하여 문제와 사용자 맞춤형 해설을 생성합니다. 사용자가 푼 문제에 대한 해설을 제공할 뿐만 아니라, 사용자의 취약한 개념을 분석합니다. AI 답안지를 통해 사용자가 문제를 이해하는 데 도움을 주고, 특정 개념에 대한 부족한 부분을 학습할 수 있도록 지원합니다.
5. 활용 라이브러리 및 개발 환경
Programming Languages | TypeScript, Java |
Frameworks | React, SpringBoot |
Databases | MySQL |
Version Control | Git, Github |
Cloud Services | AWS |
Deployment Tools | Docker |
Testing Frameworks | Jest |
API | RESTful API, OpenAI Text Generation |
개발 도구
•
VS Code: 프론트엔드 개발을 위한 IDE로 다양한 확장 기능을 통해 개발 환경을 최적화.
•
IntelliJ: 백엔드 개발을 위한 IDE로 Spring Boot 프로젝트에 최적화된 기능 제공.
•
AWS: 클라우드 서비스로 인프라를 관리하고 배포하는 데 사용.
•
GitHub: 버전 관리 및 협업을 위한 플랫폼으로 코드의 변경 이력을 관리.
•
GitHub Actions: CI/CD 파이프라인을 구축하여 자동화된 배포 및 테스트 환경을 제공.
프론트엔드
•
React: 사용자 인터페이스를 구축을 위해 선택. 컴포넌트 기반 구조로 재사용성과 유지보수성이 뛰어남.
•
TypeScript: 정적 타입 검사를 통해 코드의 안정성을 높임.
•
Vite: 빠른 빌드 및 개발 서버를 제공하여 개발 효율성을 높임.
•
Axios: API 호출을 위한 HTTP 클라이언트로, 간편한 요청 및 응답 처리를 위해 선택.
•
Styled Components: CSS-in-JS 방식으로 스타일링을 관리하여 컴포넌트와 스타일을 결합.
백엔드
•
Java: 백엔드 개발을 위한 주요 프로그래밍 언어로, 안정성과 성능이 뛰어남.
•
Spring Boot: RESTful API를 구축하기 위해 선택. 강력한 생태계와 다양한 기능을 제공.
•
MySQL: 관계형 데이터베이스로, 데이터의 일관성과 무결성을 보장하기 위해 사용.
•
RESTful API: 클라이언트와 서버 간의 통신을 위한 아키텍처 스타일로, HTTP 프로토콜을 기반으로 함.
•
OpenAI Text Generation: 문제 및 해설 생성을 위해 활용. AI 기반의 자동화된 콘텐츠 생성이 가능.
6. 트러블 슈팅
1) 어려움
1.
인프라 & 배포 환경 구축의 어려움
•
팀원들이 EKS & ECS 같은 클라우드 배포 환경을 처음 다뤄보면서 설정 및 운영에 어려움을 겪었습니다.
•
배포 자동화 및 서버 설정 최적화가 필요했지만, 경험 부족으로 인해 예상보다 시간이 많이 걸렸습니다.
2.
디자인 & 기획 단계에서의 협업 문제
•
반응형 디자인과 일관된 UI/UX를 유지하는 것이 쉽지 않았습니다.
•
개발 전에 IA(Information Architecture)를 세워 전체적인 흐름을 정리했지만, 세부적인 디자인과 개발 우선순위 조정이 필요했습니다.
•
카카오 API 활용을 염두에 두고 기획을 진행했으나, 구체적인 아이디어를 도출하는 과정에서 시간이 걸렸습니다.
3.
개발 프로세스에서의 비효율성
•
초기에는 워터폴 방식으로 개발을 진행하면서 일정이 밀릴 경우 프론트엔드 개발에 영향을 미쳤습니다.
•
API 명세 변경이 잦았고, 명세 변경 시 즉각적인 공유가 이루어지지 않아 개발 과정에서 혼선이 발생했습니다.
•
API 데이터와 예상 데이터 간 차이로 인해 프론트엔드 개발 과정에서 예상보다 많은 수정 작업이 필요했습니다.
4.
GPT 사용에서의 토큰과 답변 생성 시간 문제
•
초기에 GPT 사용 시에 답변 생성 시간이 6~7초 정도 걸리는 문제가 발생했습니다.
2) 극복 과정
1.
배포 환경 최적화
•
팀원들이 협력하여 EKS & ECS 기반의 배포 환경을 구축하고, 최적화 작업을 수행했습니다.
•
서버 및 인프라 성능 개선을 위해 로그 시스템과 AOP 적용을 고려했습니다.
2.
디자인 & 기획 개선
•
IA를 활용해 기획 단계에서 전체적인 화면 흐름을 명확하게 정의했습니다.
•
WireFrame을 제작하여 페이지 배치와 주요 컴포넌트를 사전에 결정함으로써 디자인 협업을 수월하게 진행했습니다.
3.
개발 프로세스 개선
•
API 송수신 데이터의 형태를 미리 정해두고, 이를 기반으로 빠르게 API를 개발하는 방식으로 변경했습니다.
•
오피스 시간을 정해 팀원 간 소통을 강화하고 개발 지연을 방지했습니다.
•
커밋 컨벤션, PR 템플릿 등을 활용하여 코드 관리 및 협업을 체계적으로 진행했습니다.
4.
토큰 수 조정 및 프롬프트 최적화 시도
•
초기 문제를 해결하기 위해 토큰 수를 줄이고 프롬프트를 간결하게 작성하는 등의 최적화를 시도했습니다. 이를 통해 불필요한 연산을 최소화하고 응답 속도를 개선하고자 했습니다.
7. 팀 소개
전체 팀 & 협업방식
CS24 프로젝트는 기획, 디자인, 프론트엔드, 백엔드 팀이 협업하여 진행되었습니다. 원활한 소통과 효과적인 개발을 위해 Notion, GitHub, Discord를 적극 활용하였으며, 실시간 UI 공유 및 피드백을 위해 Figma를 사용하였습니다. 또한, 백엔드팀은 Swagger를 활용하여 프론트엔드팀과 API 명세를 공유함으로써 개발 효율성을 극대화하였습니다.
•
김다애 | 디자인 | 1325680q@gmail.com
•
김서윤 | 프론트엔드 | pookey1104@gmail.com
•
김택천 | 백엔드 | 10cheon00@gmail.com
•
마재훈 | 기획, 프론트엔드 | bluekmky@gmail.com
•
이재혁 | 기획, 백엔드 | hazardous10@naver.com
•
임채민 | 백엔드 | antraxmin@sch.ac.kr
•
조희우 | 기획, 디자인, 프론트엔드 | huiwoo.jo@gmail.com
디자인(Design)
디자인팀은 서비스의 UI/UX를 기획하고 사용자 친화적인 인터페이스를 제작하는 역할을 담당하였습니다. Figma를 활용하여 UI 디자인을 진행하였으며, 프론트엔드팀과 협력하여 디자인이 원활하게 구현될 수 있도록 피드백을 주고받았습니다.
•
김다애: Figma 초기 세팅 및 랜딩 페이지 디자인 기획
•
조희우: 전반적인 디자인 작업 및 UI 개선
프론트엔드(Frontend)
프론트엔드팀은 디자인을 기반으로 사용자 인터페이스를 개발하고, 사용자 경험을 최적화하는 역할을 수행하였습니다. React를 활용하여 서비스 화면을 구현하였으며, API와의 연동을 통해 동적인 기능을 개발하였습니다.
•
김서윤: 프로젝트 초기 세팅, 배포, 카카오 로그인 구현
•
마재훈: 전반적인 페이지 UI 제작 및 서비스 기획
•
조희우: 문제 풀이 페이지 개발 및 서비스 기획
백엔드(Backend)
백엔드팀은 데이터베이스 설계, API 개발, 인프라 구축 등을 담당하여 서비스의 핵심 기능을 구현하였습니다. Spring Boot와 MySQL를 활용하여 서버를 개발하였으며, OpenAI API를 연동하여 문제 및 해설 생성 기능을 구축하였습니다.
•
김택천: GPT 연동 및 문제 생성과 풀이 기능 개발
•
이재혁: 인프라 구축, 카카오톡 메시지 알림, 피드백 페이지 개발 및 서비스 기획
•
임채민: 카카오톡 로그인 및 마이페이지 기능 구현