문제 풀고, 대회 나가고, 숙제까지 — 초 · 중 · 고 온라인 코딩 학습 플랫폼

주요 기능

1. 문제 풀이와 웹 코드 에디터 — 1~10단계 · 알고리즘 10분류 · 왕초급 100제로 문제를 고르고, 문제 옆 코드 에디터에서 C · C++ · Python · Java 로 바로 풀어 제출합니다. 제출하면 맞았어요 · 틀렸어요 · 시간 초과가 곧바로 나오고 채점 현황에 올라갑니다.
2. 코딩 대회와 실시간 순위 — 참가비(포인트)를 내고 대회에 들어가 A~F 문제를 풉니다. 순위표는 맞힌 문제 수 → 총 점수 → 총 시간 순으로 바뀌고, 1~5등에게 상금 포인트가 지급됩니다.
3. 채점 현황과 코드 보기 — 모든 제출의 결과 · 시간 · 메모리 · 언어를 보고, 다른 사람의 정답 코드는 포인트를 써서 열어 봅니다.
4. 포인트 상점 · 동영상 강의 — 문제 · 출석 · 대회로 모은 포인트를 기프티콘으로 바꾸고, 알고리즘 · 파이썬 · C언어 · 대회 대비 강의를 사서 연습 문제와 함께 듣습니다.
5. 그룹 숙제 · 시험 — 선생님께 받은 그룹 코드로 반에 들어가면, 제출 기한이 있는 숙제와 시험 일정이 「내 수업」에 모입니다. 숙제 문제를 맞히면 바로 제출 완료로 바뀝니다.

이 서비스가 해결하는 문제

학원 · 학교의 코딩 수업은 문제를 내고, 학생 코드를 하나하나 실행해 보고, 숙제 제출을 확인하는 데 선생님 시간이 대부분 들어갑니다. 학생은 집에서 개발 환경을 설치하다 막히고, 혼자 푼 답이 맞았는지 바로 알 길이 없어 흥미를 잃기 쉽습니다.

loopa 는 설치 없이 웹에서 바로 코드를 쓰고 제출하면 즉시 채점되는 환경에, 단계별 문제 · 대회 · 랭킹 · 포인트를 더해 「풀고 → 바로 확인하고 → 겨루는」 흐름을 만들었습니다. 선생님은 그룹 코드 하나로 반을 만들어 숙제와 시험을 내고, 학생은 「내 수업」에서 기한과 제출 상태를 한눈에 봅니다.

핵심 가치 제안

• 처음 배우는 학생 — 왕초급 100제와 1단계 「순한 맛」부터 시작하고, 문제마다 동영상 풀이와 온라인 컴파일러로 막힌 곳을 바로 확인합니다.
• 실력을 겨루고 싶은 학생 — 대회 순위표 · 전일/전주/전월 랭킹 · 배지 · 월별 활동 잔디로 꾸준히 푸는 동기를 얻고, 상금 포인트를 기프티콘으로 바꿉니다.
• 선생님 · 학원 — 그룹 코드로 반을 만들고, 숙제 제출 기한 · 시험 일정을 걸어 두면 채점과 제출 확인이 자동으로 됩니다.

사용자 시나리오

알고리즘 대회 1등이 목표인 해솔중 윤하린 님 (harin_code · LV.100)

1. 메인에서 「내 수업」을 눌러 코딩숲 A반 숙제를 확인합니다. 오늘 13:00 에 열린 「Hello World!」 · 「상수 (Constant)」가 제출 대기입니다.
2. 「상수」를 눌러 코드 에디터로 가서 Python 으로 풀어 제출 → 「맞았어요」. 숙제가 제출 완료로 바뀌고 남은 숙제가 1개로 줄어듭니다.
3. 진행 중인 「도전하라! 제3회 loopa 코딩 대회」에 100 POINT 를 내고 참가해 A번 「출석 번호 정렬」을 맞히면, 순위표에 하린의 줄이 바로 올라갑니다.
4. 상태 화면에서 codingjun 의 코드를 100 POINT 로 열어 보고, 남은 포인트로 상점에서 아이스 아메리카노 기프티콘을 삽니다. 내 포인트에 차감 내역과 바코드가 생깁니다.
5. 강의 「알고리즘 기초 깨부수기」(99,000원)를 사서 마이페이지 강의 탭에서 6강을 차례로 봅니다.

코딩을 처음 시작하는 초등 · 중등 학생

1. 회원가입에서 「학생 회원」을 고르고 아이디 · 비밀번호 · 학교를 입력해 가입합니다.
2. 문제 › 난이도별에서 1단계를 눌러 「Hello World!」부터 풀고, 틀리면 예시 출력과 비교해 다시 제출합니다.
3. 선생님께 받은 그룹 코드 CODE2025A 를 마이페이지 › 소속 그룹에 입력해 반에 들어갑니다.

기획자 관점의 인사이트

• 문제와 에디터를 한 화면에. 왼쪽에 문제 · 예시, 오른쪽에 어두운 코드 에디터를 붙여 두고 결과 칩을 에디터 아래에 띄워, 읽고 → 쓰고 → 제출하고 → 결과를 보는 동작이 화면 이동 없이 끝납니다.
• 포인트가 학습을 돌린다. 출석 · 문제 · 대회 상금으로 모은 포인트를 대회 참가비 · 다른 사람 코드 보기 · 기프티콘에 쓰게 해, 「더 풀면 더 쓸 수 있는」 순환을 만들었습니다.
• 숙제는 문제 풀이와 같은 길로. 숙제 목록에서 문제를 누르면 일반 문제와 같은 에디터로 가고, 맞히는 순간 숙제가 제출 완료로 바뀝니다. 학생은 따로 「제출」 절차를 배울 필요가 없습니다.
• 로봇 마스코트로 긴장을 푼다. 포인트가 빠지는 순간(대회 참가 · 코드 보기)과 끝난 순간(구매 완료)에 마스코트 팝업을 띄워, 결제 같은 확인 단계도 학생에게 부담 없이 읽히게 했습니다.

이 프로젝트에서 배울 수 있는 것

온라인 저지는 「채점기」만으로는 학생을 붙잡지 못합니다. loopa 는 단계별 문제 → 대회 · 랭킹 → 포인트 · 상점 → 그룹 숙제로 이어지는 흐름 안에서, 한 번의 제출이 채점 현황 · 내 기록 · 대회 순위 · 숙제 상태에 함께 반영되는 구조를 보여 줍니다.

서비스 개요

학생 웹

• 로그인 · 회원가입 (학생 / 선생님) · 메인 (배너 · 사이트 숫자 · 랭킹 · 새 문제 · 그룹 랭킹 · 새 학생)
• 문제 (전체 · 왕초급 100제 · 난이도별 · 알고리즘별) · 문제 풀이 코드 에디터 (4개 언어 · 테마 · 온라인 컴파일러 · 동영상 풀이)
• 대회 (목록 · 상세 · 참가 · 공지 · 질문 · 문제 · 상태 · 순위표) · 상태 (채점 현황 · 코드 보기) · 랭킹
• 강의 (목록 · 상세 · 구매) · 상점 (목록 · 상세 · 포인트 구매)
• 마이페이지 (프로필 · 배지 · 월별 활동 · 정보 수정 · 포인트 · 결제 내역 · 강의 · 소속 그룹) · 내 수업 (숙제 · 시험)

선생님 관리 · 최고 관리자 (Figma 에만, 데모 제외)

• 선생님: 그룹 관리 홈 · 문제 등록 · 문제 승인 요청 · 학생 · 숙제 관리 · 새 숙제 등록 · 시험 목록 · 시험 등록
• 최고 관리자: 대시보드 · 일반 회원 · 문제 승인 · 대회 목록

주요 화면

• 01 — 로그인
• 02 — 회원가입 · 유형 선택 (학생 / 선생님)
• 03 — 학생 회원가입
• 04 — 선생님 회원가입 (자격 서류 첨부)
• 05 — 메인 — 배너 · 사이트 숫자 · 랭킹 · 새로운 문제 · 그룹 랭킹 · 새로운 학생
• 06 — 전체 문제 (난이도 · 정답률 거르기, 검색)
• 07 — 왕초급 100제
• 08 — 난이도별 (1~10단계)
• 09 — 알고리즘별 (10분류)
• 10 — 문제 풀이 · 코드 에디터
• 11 — 대회 목록 · 이번 대회 수상자
• 12 — 대회 상세
• 13 — 대회 · 랭킹 (공지 · 질문 / 문제 / 상태 / 랭킹)
• 14 — 대회 참가 팝업
• 15 — 상태 · 채점 현황
• 16 — 코드 보기 결제 팝업
• 17 — 코드 보기 결과
• 18 — 랭킹 (전체 · 전일 · 전주 · 전월 · 그룹)
• 19 — 강의 목록
• 20 — 강의 상세
• 21 — 강의 구매 완료
• 22 — 상점 목록
• 23 — 상점 상세
• 24 — 상점 구매하기
• 25 — 마이페이지 · 내 프로필 (배지 · 월별 활동)
• 26 — 마이페이지 · 내 정보 수정
• 27 — 마이페이지 · 내 포인트
• 28 — 마이페이지 · 결제 내역
• 29 — 마이페이지 · 강의
• 30 — 마이페이지 · 소속 그룹 (가입 전)
• 31 — 마이페이지 · 소속 그룹 (가입 후)
• 32 — 내 수업 · 숙제
• 33 — 내 수업 · 시험

선생님 관리 화면(그룹 관리 · 문제 등록 · 문제 승인 · 학생 · 숙제 관리 · 시험 등록)과 최고 관리자 화면(대시보드 · 회원 · 문제 승인 · 대회 목록)은 데모에 넣지 않았습니다.