HTML/CSS/JS 프로그래밍 문제 만들기
HTML/CSS/JS 프로그래밍 문제는 채점모드, 제출모드, 실행모드로 문제를 생성할 수 있습니다.
이 문서에서는 HTML/CSS/JS 프로그래밍 문제를 입력하는 내용만을 다룹니다. 새로 문제를 만들 때 기본적으로 입력하는 사항들에 대해서는 "문제 가져오기 및 공통 설정" 도움말을 참고해주세요.
HTML/CSS/JS 프로그래밍 문제에서는 웹 개발에서 사용자에게 드러나는 UI부분(=프론트엔드)을 담당하는 클라이언트 사이드의 개발 능력을 평가하거나 실습을 유도하기 위한 문제 형태입니다.
해당 문제에서는 서버사이드 프로그래밍에 대한 내용은 포함되지 않으며, 웹 서비스/어플리케이션 개발 문제와 비슷하게, 웹 프로젝트 zip 파일을 업로드 한 뒤, 수정 및 열람 가능한 파일 리스트를 정해주는 방식으로 문제를 만들게 됩니다. 채점모드의 채점 기능도 웹 서비스/어플리케이션 개발 문제와 같이 자동화된 웹 UI 테스트 툴인 나이트워치를 이용하여 이루어집니다.
1. 문제 해결 언어
문제 해결 언어란에서 수강자가 작업할 웹 프로젝트에 관련된 내용을 설정할 수 있습니다.
HTML/CSS/JS 프로그래밍 문제는, 출제자가 여러개의 파일들로 이루어진 프로젝트 형태의 zip파일을 업로드하고, 파일들 중 수강자가 열람 및 수정 가능한 파일을 지정하는 방식으로 출제됩니다. 수강자는 요구 사항에 맞게 주어진 파일들을 올바르게 수정하면 됩니다. (수강자는 추가적인 파일을 생성하거나 기존에 존재하는 파일을 삭제할 수 없습니다.)
2. 라이브러리 추가
jQuery나 Bootstrap과 같이 클라이언트 사이드에서 자주 쓰이는 라이브러리와 디자인 프레임 워크를 쉽게 포함할 수 있도록 기능을 제공합니다.
외부 라이브러리 추가란에서 추가할 라이브러리를 선택하면 나타나는 HTML 태그를 업로드하는 프로젝트의 html 파일에 삽입하면 해당 라이브러리를 사용할 수 있습니다.
기본 프로젝트란에서 zip 형식으로 압축된 웹 프로젝트 파일을 업로드하면, 프로젝트 설정에 해당 압축파일 내부에 있는 파일 리스트가 나타납니다.
프로젝트 설정에서 응시자가 열람 및 수정할 수 있는 HTML, CSS, JS 관련 파일들을 선택합니다.
Ctrl(Mac OS 기준 cmd)키를 이용하여 복수개의 파일을 선택할 수 있으며,
현재는 최대 5개까지 선택이 가능하도록 설정되어있습니다.
웹 서버 프로젝트 경로 설정 및 실행해보기
프로젝트 설정 하단에 웹 서버 실행 시에 연결될 프로젝트 경로(기본:/) 라고 쓰여 있는 문자열 입력란은,
웹 서버 확인 경로입니다. 기본 값은 '/' (루트 경로)이며, 설정하지 않을 경우 자동으로 루트 경로로
입력됩니다. 예를 들어 로컬 호스트에서 웹 서버 실행시 다음 경로에 메인 페이지가 나타나게 된다면,
웹 서버 확인 경로는 /main.php가 될 것입니다 (http://localhost/main.php).
가장 하단의 실행해보기 버튼을 눌러서, 업로드한 웹 서버가 잘 동작하고, 웹 서버 실행 확인 로직이 잘 동작하는지 확인할 수 있습니다.
실행해보기 버튼을 누르면, 웹 서버가 팝업 형태로 나타나게 되므로, 만약 작업중인 웹 브라우저에 팝업차단이 설정되어 있다면, 잠시라도 해당 기능을 해제시킨 뒤 실행해보기를 하셔야 합니다. 팝업 창을 종료하게 되면 해당 웹 서버가 종료되게 됩니다.
3. 채점 답안
HTML/CSS/JS 개발 문제는 UI 테스트 자동화 툴인 나이트워치를 이용하여 정답여부를 판단하고 작성한 답안을 채점합니다. 그러므로 채점모드의 HTML/CSS/JS 개발 문제를 작성하기 위해서는 나이트워치 채점 스크립트를 작성할 수 있어야 합니다.
나이트워치와 관련된 자세한 내용은 다음 챕터 채점 스크립트 작성하기에서 확인해주세요!
Last updated
