1. 이번 주간의 요약

[완료된 작업]

  • 설계 가이드라인 정립
  • 시스템 v1.0 설계 및 개발
  • UI 및 실행 예시
  • 시스템 평가
  • 시스템 평가 집계 및 결과
  • 시스템 개선 후 성능 평가
  • 코드 리뷰 코멘트 및 응답 검증 설문
  • 코드 리뷰 코멘트 및 응답 검증 설문 결과

2. 이번 주간의 진행 상황

[완료된 작업]

설계 가이드라인 정립: 문헌 조사와 기존 사내 저지 사이트 대비 개선할 점을 바탕으로 설계 가이드라인을 도출하였습니다.

첫째, ‘학습자 친화적 코드 리뷰 제공’입니다. 기존 시스템에서는 문제의 정오답만 확인할 수 있고, 제공된 테스트 케이스 기반의 에러 메시지를 통해 학습자는 스스로 문제점을 파악해야 했습니다. 이 과정에서 영어 사용의 어려움이나 에러 메시지의 해석에 어려움을 겪는 경우가 많았습니다. GPT-4 기반의 AI 코드 리뷰 시스템을 도입하여, 신속하고 정확하며 지지적인 톤의 코드 리뷰 코멘트를 제공함으로써 학습 이탈을 방지하고 프로그래밍 학습 경험을 향상 시킬 수 있습니다.

둘째, ‘코드 리뷰 코멘트에 정답 코드 포함 제한’입니다. 학습자의 코드에 대한 코멘트만 제공하며, 정답 코드를 직접 제시하지 않음으로써 학습자가 독립적으로 사고하고 문제를 해결할 수 있도록 지원합니다.

셋째, ‘통합된 사용자 인터페이스’입니다. 이전 시스템은 문제 제시 영역과 코드 작성 영역이 서로 다른 페이지에 있어 문제를 보면서 코드를 작성하기 어려웠습니다. 이를 개선하여 문제 제시 영역과 코드 작성 영역을 한 페이지에 통합, 학습자가 효율적으로 코드를 작성하고 제출할 수 있도록 하였습니다.

넷째, ‘파이썬 코드 스타일 적용’입니다. 이전 시스템은 코드 작성 영역에서 코드 스타일이 적용되지 않아 가독성과 작성 편의성이 떨어졌습니다. 이를 개선하여 파이썬 코드 스타일을 적용하여 학습자가 더욱 가독성 높은 코드를 작성할 수 있게 하였습니다.

시스템 v1.0 설계 및 개발: 백엔드와 프론트엔드를 통합적으로 구축하여 신속한 개발을 달성하기 위해, 효율적인 개발 환경을 적극 활용했습니다.

image-20240627164318820

시스템 구성은 Figure 1에서 볼 수 있듯이, 클라이언트 앱에서 GPT 엔드포인트로의 요청 중 발생하는 CORS(Cross-origin resource sharing) 문제를 해결하기 위해 Next.js API Routes를 이용하여 프록시 서버를 설정하였습니다. 코드 리뷰 기능은 GPT-4를 활용하였으며, 시스템의 빌드와 배포는 클라우드인 Microsoft Azure를 통해 배포했습니다. 프론트엔드 개발에는 Next.js와 ANTD를 사용하여 웹 기반 인터페이스를 구축하였습니다.

UI 및 실행 예시:

image-20240627164518774

Figure 2는 개발된 시스템 v1.0의 UI를 나타내며, 각 영역의 역할과 기능은 아래와 같습니다.

  • (1) 문제 은행 영역: 사용자가 다양한 문제를 살펴보고 선택할 수 있도록 트리 형태로 구성된 문제 선택 기능을 제공합니다. 각 노드는 사내에서 개발한 파이썬 입문 교재의 목차를 키워드로 활용합니다.
  • (2) 문제 보기 영역: 선택한 문제의 세부사항을 보여주며, 문항, 입력 예시, 출력 예시로 구성되어 있습니다.
  • (3) Your Code 영역: 코드 작성을 위한 파이썬 에디터로, ‘코드 튜터 도움받기’를 클릭하면 제출한 코드의 수정이 필요한 부분에 ‘#수정 필요’라는 주석이 추가되는 것을 Figure 3에서 확인할 수 있습니다.

image-20240627164551535

  • (4) 제출하기 버튼: Your Code 영역에서 작성한 코드를 제출하며, GPT-4를 활용한 코드 정답 모듈이 정답 여부를 판단하여 Figure 4와 같이 정답, 오답, 오류 상태를 팝업으로 표시합니다.

image-20240627164619532

  • (5) 코드 튜터 도움받기 버튼: 코드 피드백 모듈 v0.3을 사용하여 GPT-4 엔드 포인트를 통해 코드 리뷰 코멘트를 요청합니다.

  • (6) 코드 튜터 영역: GPT-4로부터 받은 피드백을 지지적인 톤으로 보여주는 영역으로, Figure 5에서 확인할 수 있습니다.

image-20240627164652789

시스템 평가: 시스템 v1.0을 검증하기 위해, 초등학생과 중학생을 대상으로 활용될 예정인 본 시스템에 대한 시스템 평가를 진행했습니다. 이 평가에는 소프트웨어 교육 전문가들이 참여했으며, 모두 최소 2년 이상 프로그래밍 교육 경력을 가진 현직 강사 3인을 섭외했습니다. 평가는 참여자들이 시스템을 충분히 사용한 후 진행된 인터뷰를 통해 질적 피드백을 수집하는 방식으로 이루어졌습니다. 평가 항목은 문희정(2023)이 제안한 웹(앱)기반 인공지능 응용서비스 요소를 기준으로 인터뷰 문항을 작성하여 ‘기능 및 서비스’, ‘사용자 경험’, ‘문제 해결 및 지원’, ‘자동화 프로세스’, ‘감점 및 의견 분석’을 평가하였습니다.

시스템 평가 집계 및 결과:

빈 문서 1001

시스템 평가 결과를 바탕으로 본 연구의 시스템 고도화 전략을 정리하였으며, 핵심적인 기능인 코드 튜터 관련 이슈 위주로 개선해야 할 우선 순위를 선정하였습니다. 내용은 Table 1에 요약되어 있습니다.

기능 및 서비스 관련하여, 문자열에서는 큰 따옴표만 정답으로 인정하는 문제와 채점 시간이 길어지는 문제가 확인되었습니다. 이를 개선하기 위해, 코드 리뷰 모듈을 수정하여 큰 따옴표와 작은 따옴표 모두를 정답으로 인정하도록 하고, 채점 모듈의 응답 시간을 단축시키기 위해 효율성을 높일 계획입니다.

사용자 경험과 관련해서는 문제 영역의 가독성이 떨어지고, 작은 화면에서 내용이 제대로 보이지 않는 문제가 있었습니다. 이를 개선하기 위해 문제 영역에 문항, 입력 예시, 출력 예시에 색상을 추가하여 가독성을 향상시키고, 데스크탑 및 노트북 모니터의 해상도에 맞는 반응형 UI 디자인을 도입할 예정입니다.

문제 해결 및 지원에서는 비어있는 코드 상태에서 ‘코드 튜터 도움 받기’를 클릭할 경우 이전 문제의 코드 리뷰 코멘트가 나타나는 문제와 응답 결과가 지나치게 길어져 내용 파악이 어려운 문제, 존댓말과 반말이 혼용되어 나타나는 문제가 있었습니다. 이에 비어있는 코드 상태에서는 코드 리뷰 코멘트를 생성하지 않도록 예외 처리를 추가하고, 코드 리뷰 코멘트를 간결하게 제공하도록 모듈을 개선합니다. 그리고 코드 리뷰 코멘트 모듈에 존댓말로 응답하도록 제약 조건을 추가합니다.

자동화 프로세스와 관련해서는 사용자가 시스템 사용 전에 방법을 알 수 없어 불편함을 겪었습니다. 이 문제를 해결하기 위해 사용 방법 안내 기능을 추가하고, 영상을 통해 사용 방법을 제시할 계획입니다.

시스템의 긍정적 평가는 Table 2에서 요약되어 있습니다.

image-20240627164916221

시스템 평가를 분석한 결과, 설계 가이드에 따라 개발된 본 시스템이 사용자에게 기존 시스템보다 긍정적인 영향을 미쳤음을 확인할 수 있었습니다. 특히, 시스템 평가에서 사용자들은 AI 피드백 기능인 코드 튜터 기능을 집중적으로 사용하였습니다.

시스템 개선 후 성능 평가: 시스템 평가와 개선 전략(Table 1 참조)에서 핵심적인 기능인 코드 튜터와 채점 관련 우선 순위가 ‘높음’으로 표시된 항목을 개선하였습니다. 개선한 시스템의 흐름도는 Figure 6에서 확인할 수 있습니다.

image-20240627165134962

학습자가 코드를 입력하고 코드 피드백을 요청하면, 먼저 Code Validation Module이 파이썬에서 실행되지 않는 오류 코드를 검사합니다. 문제가 없다면 Code Review Module로 이동하여 GPT 엔드 포인트에 코드 리뷰 코멘트를 요청합니다. 개선된 버전인 v2.0의 Code Review Module에서는 응답 지연을 줄이기 위해, 가장 큰 원인인 MaxTokens 값을 최적화했습니다. 이를 위해 마크다운이 포함된 응답 결과의 토큰 수를 제한하고, 코드 리뷰 코멘트의 최대 문장 수를 세 개로 제한하여 MaxTokens 값을 최적화했습니다. 또한, 응답 시간을 줄이고 일관된 코멘트를 생성하기 위해, Temperature와 TopP 파라미터의 값을 조절했습니다.

v2.0의 성능을 측정하기 위해, 시스템에서 제공하는 전체 27개 문항에 대해 학습자가 제출한 92개의 오류 코드를 v1.0과 v2.0에서 각각 실행하여 응답 시간을 측정했습니다. 동일한 문항에 대한 오류 코드의 응답 시간은 평균값을 구해 Table 3에서 확인할 수 있는 것처럼 비교했습니다. 결과적으로, 개선된 시스템은 기존 버전에 비해 응답 시간을 최소 12%에서 최대 58까지 단축했습니다.

image-20240627165158538

image-20240627165202027

학습자가 정답 확인을 요청하면, 먼저 Code Validation Module이 파이썬에서 실행되지 않는 오류 코드 여부를 검사합니다. 오류가 발견되면 학습자에게 에러 메시지를 반환하고 프로세스가 종료됩니다. 하지만 문제가 없다면 Code Correctness Check Module로 이동하여 GPT 엔드포인트에 정답 여부를 요청합니다. 이전 시스템인 v1.0에서는 Code Correctness Check Module이 정답, 오답, 오류의 세 가지 상태로 결과를 검사했지만, 개선된 시스템에서는 로직을 단순화하여, Code Validation Module에서 오류 코드를 먼저 걸러낸 후, Correctness Check Module에서 두 가지 상태(정답, 오답)만 검사하도록 개선했습니다. 로직을 간소화 하여 기존 버전과 성능 차이는 크지 않지만 효율적인 구조를 갖게 수정했습니다.

코드 리뷰 코멘트 및 응답 검증 설문: 시스템을 개선한 뒤, 최승윤(2023)의 피드백 및 응답의 검증과 예시를 참고하여, 다섯 가지 평가 기준인 ‘정확성’, ‘관련성’, ‘구체성’, ‘피드백의 지지적인 톤’, ‘학습효과’를 도출했습니다. ‘정확성’은 코드 튜터가 코드의 오류를 정확하게 지적하고 해결책을 제시했는지, Your Code 영역의 수정이 필요한 코드 라인에 정확하게 주석이 추가되었는지를 확인하는 것입니다. ‘관련성’은 코드 튜터의 코멘트에서 제안한 개선 사항이 실제로 문제 해결에 도움이 되는지 검증하는 것입니다. ‘구체성’은 코드 튜터의 코멘트가 일반적인 내용이 아니라 구체적인 오류나 문제를 지적했는지 확인하는 것입니다. ‘피드백의 지지적인 톤’은 코드 튜터의 코멘트가 지나치게 비판적인지 확인하는 것입니다. 마지막으로 ‘학습효과’는 코드 튜터의 코멘트를 통해 학습자가 새로운 개념을 이해하거나 코드 작성 기술을 개선할 수 있는지 확인하는 기준입니다. 리커트 5점 척도를 사용하여 앞서 시스템 평가에 참여한 프로그래밍 교육 현직 강사 3인, 추가로 섭외한 프로그래밍 교육 강사 2인, 코딩 콘텐츠 기획 개발 실무자 1인 등 총 6명이 설문을 통해 평가를 진행했습니다. 평가는 문제 은행에서 제시된 각 문제에 대해 최소 2회 이상 정답과 오답코드를 제출하여 검증하였습니다.

코드 리뷰 코멘트 및 응답 검증 설문 결과: 설문 결과는 각 설문 문항별 평균을 계산하여 집계했습니다. 설문 결과는 Table 3에서 확인할 수 있습니다.

image-20240627165304132

결과를 통해 코드 리뷰 코멘트가 전반적으로 긍정적인 반응을 얻고 있지만, 특정 부분에서는 의견의 다양성이 존재할 수 있음을 확인할 수 있었습니다. 개선된 시스템에 대하여 사용자들은 초등학생과 중학생을 대상으로 프로그래밍 학습에 적합한 도구라 평가하였습니다.

“어린 학생들이 코딩을 독학할 때 외부 사이트의 도움을 받는 데 어려움을 겪는다. 하지만 인공지능을 결합한 본 시스템은 초기에는 도움을 주면서 나중에는 학생들이 스스로 문제를 해결하는 데에도 도움이 될 것 같다.” (프로그래밍 강사 1)

“출력 예시에 맞게 코드를 작성해도 제공된 옵션을 사용하지 않으면 발생하는 문제점과 해결 방안을 명확히 제시했다. 코드 튜터에 지속적으로 도움을 요청하면, 점점 더 구체적인 답변을 제공하여 코딩을 쉽게 할 수 있도록 도왔다.” (프로그래밍 강사 2)

“본 시스템의 코드 튜터 기능을 사용하면 알고리즘 오류나 특정 위치에서의 오류 해결이 더 쉬워질 것 같다.” (코딩 콘텐츠 기획/ 개발자)

“기존 저지 사이트의 힌트는 정답에 도움이 되지 않는 경우가 많았다. 하지만 본 시스템은 정답을 찾는 과정에서 효율적인 길잡이가 되어준다. 혼자 공부하는 것이 아니라, 실시간으로 채팅하듯 정답을 찾아가는 느낌을 줘서 지속적인 학습을 가능케 할 것 같다.” (프로그래밍 강사 3)

“AI를 통해 시간과 공간의 제약 없이 추가 설명을 받을 수 있어 학습자의 실력 향상에 도움될 것으로 기대된다.” (프로그래밍 강사 4)


4. 다음 주간의 계획

  • CodeValidation 로직 추가 전후의 코드 튜터 응답 시간 비교
  • 연구 결론 작성
  • 공청회 발표 자료 제작

댓글남기기