코딩 학습 플랫폼
코딩 학습웹 IDE 서비스
service
overview
초중등 학생을 대상으로 파트너 학원·기관에 제공하는 코딩 교육 플랫폼의 학생 실습 환경을 디자인했습니다. 강의실 입장 후 브라우저에서 Python 코드를 작성·실행하고, Streamlit으로 만든 웹 앱을 확인하는 흐름을 설계했습니다. 학습 콘텐츠와 파일 탐색, 코드 에디터, 콘솔, 미리보기를 하나의 작업 화면으로 구성했습니다.
project goal
코딩을 처음 배우는 학생이 도구 사용보다 실습에 집중할 수 있는 화면을 만드는 것이 목표였습니다. 학습 내용과 실행 결과를 오가는 부담을 줄이고, 오류가 발생했을 때 확인할 내용을 쉬운 문장으로 안내했습니다. 실습 환경의 준비부터 연결 중단·복구·수업 종료까지 상태별 화면을 설계해, 학생이 현재 상황과 다음 행동을 이해할 수 있도록 했습니다.
학습·코드·결과를 연결하는 통합 실습 화면
왼쪽의 학습 콘텐츠를 보며 중앙에서 코드를 작성하고, 하단 콘솔과 오른쪽 미리보기에서 실행 결과를 확인하는 구조로 화면을 설계했습니다. 파일 탐색과 저장·실행 기능을 작업 영역에 모으고, 웹 앱의 입력과 선택 결과를 같은 화면에서 살펴볼 수 있도록 구성했습니다. 미리보기 확대 화면도 마련해 학생이 자신이 만든 결과물에 집중할 수 있도록 했습니다.
오류를 다음 시도로 연결하는 피드백 디자인
영문 오류 메시지만으로는 문제를 파악하기 어려운 학생을 위해, 오류가 발생한 줄 번호와 원문 메시지, 확인할 내용을 함께 보여주었습니다. 변수 이름 오류에는 비교해야 할 부분을 쉬운 문장으로 안내하고, 실행 시간이 초과되면 30초 제한과 반복문 점검 안내를 제공했습니다. 오류를 구분하는 색상과 설명의 위계를 적용해 수정 방향을 찾기 쉽도록 설계했습니다.
실습 중단과 복구 과정을 안내하는 상태 설계
실습 환경 준비, 연결 끊김, 환경 복구, 수업 종료를 각각의 화면으로 구분했습니다. 준비·복구 중에는 진행 단계를 보여주고, 연결이 끊겼을 때는 재시도 상황과 다음 행동을 안내했습니다. 저장된 파일과 이어서 작업할 수 있는 상태를 설명해, 갑작스러운 중단 상황에서도 학생이 무엇을 해야 하는지 이해할 수 있도록 구성했습니다.
