고1이 직접 만든 실사용 코드 공유 서비스

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *고등학교 프로그래밍 교육 참여자 및 교사** (난이도: 중간, 실제 프로젝트 경험을 통한 개발 기초 학습)

핵심 요약

• 문제 인식: 구글 클래스룸 코드 제출 시 문법 하이라이팅, 폰트 조절 등의 기능 부재로 사용 불편
• 핵심 기술: highlight.js 라이브러리 활용한 코드 하이라이팅, HTML/JS 기반 모달 로그인 시스템 구현
• 프로젝트 성과: 17개의 깃허브 스타, 200개 이상의 코드 공유 실적, V2 개발 계획 (React + TypeScript)

섹션별 세부 요약

1. 문제 인식 및 프로젝트 기획

• 구글 클래스룸 제출 방식의 한계: 파일 업로드만 가능, 문법 하이라이팅 및 폰트 조절 기능 부재
• 프로젝트 기획: Sh4re! 서비스 개발로 수업 시간에 활용 가능한 코드 공유 플랫폼 구축
• 팀 구성: 프론트엔드, 백엔드, 디자인 3명으로 구성, 5월 4일부터 집중 개발 시작

2. 기술적 도전 및 해결

• 코드 하이라이팅 기능: highlight.js 라이브러리 사용으로 자동 하이라이팅 구현
• 로그인 시스템: HTML + JS 기반 모달 창으로 구현, 쿠키를 통해 로그인 상태 유지
• 서버 비용: 월 6만 6천원의 서버 비용 발생, 투자 결정 후 V2 개발 계획 수립

3. 서비스 개발 및 성과

• 기능 구현: 티처/유저 페이지, 코멘트 기능 추가, 1학년 수업 활용 가능성 확보
• 사용자 반응: 17개의 깃허브 스타, 200개 이상의 코드 공유 실적, 선생님의 긍정적 피드백
• V2 개발 계획: React, TypeScript, Styled-Components 도입으로 확장성 및 안정성 향상

결론

• 실무 적용 팁: highlight.js와 같은 라이브러리 활용으로 개발 시간 절약, TypeScript 도입으로 타입 안정성 확보
• 프로젝트 운영: 짧은 기간에 집중 개발 및 사용자 피드백 반영이 핵심, V2에서는 아키텍처 개선 필요
• 성과 요약: 고등학생이 직접 개발한 서비스가 교육 현장에 실질적 활용 가능하며, 팀 협업 및 기술 습득 성과를 거두었다.