안녕하세요? Nurd Worker입니다! 반갑습니다.😊 이번에 소개해드릴 프로젝트는 acsap프로젝트입니다! 프로젝트 계기는 국비교육과정을 들으면서 스터디를 만들게 되었는데요. 이때 팀원분들과 저 또한 자격증 공부를 더욱 효율성 있게 하기위해서 제작했던 프로젝트입니다ㅎㅎ 스터디를 진행하면서 최대한의 퍼포먼스를 내기위해 만들었고 스터디원분들 전원 자격증 취득하신 보람찼던 경험이었어요.
프론트엔드는 제가 주로 사용하던 vue.js를 사용하여 제작을 하였습니다. 사실 이 프로젝트가 거의 프론트엔드로만 구성되었다고 보셔도 됩니다 ㅎㅎ
백엔드는 역시 주로 사용하였던 nodejs의 express 프레임워크로 개발하였구요.
데이터베이스는 mysql을 사용하였습니다.
실제 배포한 인프라는 aws lightsail을 사용하였습니다.
인프라에 대해서 더 소개해드리자면요~ 돈이 없는 취준생이라 aws 월 5달러짜리 lightsail인스턴스로 배포를 하였고 역시나 돈이없기때문에 ㅋㅋ 인스턴스 하나에 web, was, db를 싹다 쑤셔박았습니다 ㅎㅎ 그래서 원티어 구조입니다.
프론트엔드로 거의 동작하는 프로그램이기때문에 백엔드와 db는 보조로써 역할만 했어요.
실제로 현재 체험용으로 배포된 acsap웹은 프론트엔드로만 배포된 정적사이트입니다.
어떤 목적으로 만들었나요?
처음 스터디를 모집하였을때, 저희는 자격증 시험에 대한 정보가 전혀 없던 상태였습니다ㅠㅠ
때문에 시험정보를 모아서 공부를 차근차근 하던중에 문제풀이앱이 있으면 굉장히 효율적이라는 생각이 들더라구요?
그래서 급하게 최대한 빨리 해당 어플리케이션을 만드려고 했습니다.
일단 제가 주목하였던 요소들은 이렇습니다.
국비교육과정을 병행하며 자격증 시험을 준비하여야 하기에, 시간이 굉장히 모자르다고 판단하였습니다. 때문에 훈련기관까지 출퇴근하는 시간에 지하철, 버스 등에서 공부할 수 있도록 모든 기기에서 접속이 가능한 어플리케이션이어야 했습니다. → web기반 웹 어플리케이션으로 제작
문제량이 상당히 많았습니다.(약 400개) 때문에 자주 틀리는 문제등을 따로 저장하여 공부할수 있는 기능이 필요했습니다 → 오답노트 기능
실제 본인의 공부를 테스트할수 있는 기능이 필요했어요 → semi test기능
너무 바쁘므로 최대한 빨리 프로그램을 완성해야했습니다 → 유저인증, 백엔드 로직 등은 최대한 간소화하고 프론트엔드 기반으로 돌아가게 설계, 익숙한 언어 및 프레임워크 활용
vce프로그램과 상당히 유사한데?
vce 프로그램
객관식 문제 자격증을 준비하신 분들은 많이들 아시는 vce프로그램이있습니다.
저희는 정보가 상당히 부족한 상태로 스터디를 모집했기에 초기에 vce프로그램의 존재조차 몰랐어요 ㅋㅋ
때문에 처음에는 a4용지로 문제들을 인쇄하여 같이 공부하는 식으로 시작을 하다가 acsap프로젝트를 만들어서 공유해드렸습니다. 그러다보니 vce프로그램이 있다는것을 알게되었습니다ㅎㅎㅎ 사람들 생각하는건 다 비슷한가봐요.
암튼 중요한건 막상 만들고 보니, vce프로그램보다 acsap어플리케이션이 더욱 좋았습니다.
vce는 exe프로그램입니다. 컴퓨터환경에서 동작하죠. 하지만 acsap는 웹기반 어플리케이션이라 모든 기기에서 공부가 가능했습니다. 저희는 국비과정을 병행하기에 제가 여러번 스터디원분들께 학원에서는 수업에 집중하고 자격증공부는 출퇴근시간에 acsap로 공부하라고 수차례 강조드렸습니다. 저역시도 자격증 공부의 90퍼센트는 출퇴근시간에 공부하였습니다.
vce는 틀린문제만 다시 확인하게 해주는 기능이 있긴 하지만, 자주 틀리는 문제를 따로 담을 수 있는 오답노트 기능이 없었습니다. acsap는 초기설계부터 오답노트기능을 만들었어요.
스터디를 하다보니 문제에 대한 키워드를 정하는 방식이 굉장히 효과적이었습니다. 근데 저희 스터디에는 어플리케이션의 운영자가 팀원이잖아요? 그래서 바로 개발해드렸습니다. 문제량이 400개가 넘었어서 공부할수록 정말 혼란스러운데, 키워드기능을 정말 좋아하셨습니다. vce프로그램은 키워드 기능이 없습니다.
1번에서 말씀드렸듯이 모바일이나 태블릿으로 출퇴근 시간에 공부를 해야한다고 수차례 강조를 드렸습니다. vce는 휴대폰으로는 작동이 안되는걸로 아는데, 안드로이드버전은 있다고 하더라구요. 하지만 acsap는 아이폰 ios기기에서도 웹기반이기떄문에 브라우저만 동작하면 문제없이 동작을 합니다.
이러한 장점들로 뒤늦게 vce프로그램이 있다는 사실을 알게되었으나, 제가만든 acsap프로그램이 더욱 장점이 많았습니다 ㅎㅎㅎ
훈련기간이 끝나고 취직을 하신 몇 팀원분들도 추가 자격증 취득을 준비하신다고 재배포해달라고 요청하셨던 프로그램입니다.
어떤 구조로 동작합니까?
자잘한 프레임워크의 코드나 함수는 일일히 설명을 안드리겠습니다.
acsap 웹어플리케이션의 동작방식은 단순해요.
대부분의 데이터들을 브라우저 스토리지인 local storage에 저장하고 이 데이터를 자바스크립트가 가져와서 동적 렌더링을 해줍니다. 실제로 데스크탑 브라우저로 개발자도구를 키시면 확인가능하세요.
setting에서 json파일을 넣어주면 local strorage에 question_data와 answer_data를 json strinigify로 스트링으로 변환하여 넣어준다음 이걸 자바스크립트로 parsing해서 사용을 한답니다.
때문에 브라우저를 닫았다 켜도 도메인에 대한 영구적인 데이터가 남아있는 localStorage특성상 매번 따로 데이터를 설정해줄 필요가 없는거죠. 스터디 팀원분들에게도 문제데이터를 처음 입력만 해주고 이후로는 따로 설정해드린게 없었습니다.
또한 오류가생기면 setting에서 delete 데이터 버튼으로 어느정도 해결이 가능한겁니다. (모바일은 개발자도구를 못키기때문에 만들었어요)
소개 영상에는 안나온 기능들
테스트를 보던중에 브라우저를 닫거나, 다른 메뉴에 다녀와도 테스트 데이터가 남아있습니다. 지속적으로 계속 테스트를 보실 수 있어요.
키워드기능은 전역데이터로 저장되므로, 소개영상에서 나온 general questions뿐 아니라 semi test, 오답노트 등에서도 해당 문제에 저장한 키워드를 확인 가능해요.
현재 배포된 acsap는 한 기기에서의 한 브라우저단위로 데이터가 저장되어 다른 기기로 공부를 병행할경우 keyword데이터를 매번 새로 설정해줘야합니다. 실제로 사용하였던 acsap어플은 setting에서 bring put keyword data 버튼으로 키워드 데이터를 db에 저장 후, 다른 기기에서 import해서 데이터를 가져오는 방식으로 사용했습니다. (백엔드 db구축 필요)
question.json데이터 양식을 보시면 img url프로퍼티도 있으나 실제 코드에선 안썼습니다. 초반에 사용하게했는데 굳이 필요없을것같아서 걍 뺐어요. 필요하신분들은 github코드를 클론하셔서 이미지를 따로 외부스토리지같은곳에 저장하시고 url로 임포트하는 이미지 태그를 작성하셔서 사용하시면됩니다.
답변보기 버튼을 누르면 다음 문제로 넘어가도 답이 보이지만, 키워드는 다음 문제로 넘어갈때 자동으로 꺼집니다. 잘모르는 문제에대한 힌트같은 기능이라 꺼지게 만들었어요~
semi test를 보실경우 설정한 문제범위의 문제들이 랜덤으로 섞입니다.
현재 배포된 acsap프로젝트는 어떻게 사용하나요?
문제 데이터 넣기
acsap를 사용하시기 위해선 먼저 question.json데이터와 answer json데이터를 setting에서 넣어주어야합니다.
양식은 이렇습니다.
// question.json
[
{
"question_number": 1,
"correct_answer_index": "A",
"question_ko": "무찌는 처음 데려왔을 때 몸무게는 몇 kg이었습니까?",
"question_en": "What was Muzzi's weight when he was first adopted?",
"reference_link": null,
"img_src": null,
"etc": null
},
{
"question_number": 2,
"correct_answer_index": "A",
"question_ko": "무찌의 가장 좋아하는 과일은 무엇입니까?",
"question_en": "What is Muzzi's favorite fruit?",
"reference_link": null,
"img_src": null,
"etc": null
}
]
이렇게 question.json파일과 answer.json파일을 제작하셔서 넣어주시면 됩니다.
저희 스터디는 처음 문제데이터가 pdf파일로 준비되어있어서 제가 python으로 급하게 코드를 짜서 json데이터를 만들었습니다.
question은 문제고, answer는 객관식 문제 보기입니다.
적절하게 문제데이터를 json파일로 만든 후, setting에서 업로드하셔서 사용하시면 됩니다.
초기 한번만 셋팅해놓으면 계속 사용가능하세요~
현재 배포된 acsap어플리케이션은 기본 데이터가 muzzi에 대한 퀴즈로 저장되어있는데요.
본인이 원하는 문제와 답변 json데이터를 setting에서 한번 입력해주시면 로컬스토리지에 저장되어 우선적으로 사용되기에 무찌문제는 안보이실거에요. 커스텀하실 수 있습니다.
유저 인증기능을 사용하고싶어요
현재 배포된 acsap에서는 유저가 기본 tester으로 설정하게 되어있는데요. 이 방식에서도 문제없이 사용가능하시나, 소개영상에서의 유저인증 기능을 원하시면 acsap의 깃허브 코드를 클론하셔서 배포하신 후 사용하시면 됩니다. 다만 백단과 데이터베이스를 필요로 하므로, 데이터베이스구축과 .env 시크릿은 알맞게 하셔야 합니다.
다른기기도 병행해서 사용하고싶어요. 키워드가 공유가 안되서 불편합니다!
키워드기능을 다른기기와 병행해서 쓰시고싶으시면 백엔드와 db가 있어야합니다. 때문에 따로 배포를 하시거나 로컬로 배포후 사설네트워크내에서 사용하시면 됩니다.
구축이 되셨으면 setting에서 두가지 버튼을 누르시면 현재기기의 키워드데이터를 db에 덮어쓰기하고 불러오기 가능합니다. 사실 더욱더 정교하게 하고싶었으나 당시에 교육과정과 자격증 준비를 병행하는중 만든 어플이라 제가 시간이 너무없었습니다 ㅠ
여러가지 기능들은 알아서 추가 삭제하시고 사용하시면 됩니다 ㅎㅎ
이렇게 하기 불편하시면, 그냥 로컬스토리지 키워드 데이터 스트링을 복사하신후 원하시는 기기의 로컬스토리지 값을 추가하시면 됩니다 ^^
어떤 trouble이 있었고 어떻게 해결하셨나요?
저비용으로 만든 프로그램이다보니 생긴 트러블인데요. 처음에는 백엔드단에서 바로 question data와, answer데이터를 api로 응답해주는 방식으로 설계했습니다. 하지만 월 5달러짜리 인스턴스이기에 400문항의 데이터를 스트링으로 한번에 넘겨주는데 인스턴스가 계속 폭파되었습니다 ㅠ 그래서 프론트엔드에서 데이터를 등록하는 방식으로 바꿨습니다. 때문에 setting이라는 메뉴가 따로 생긴겁니다.
프론트엔드에서 데이터를 입력하는 방식으로 바꿨으나, 초기에는 스트링을 복붙해서 입력하는 형식이었는데요. 말씀드렸듯이 데이터가 워낙 크다보니 붙여넣기 하는데에도 몇십초씩 기다리고 먹통이되어 question, answer데이터로 따로 나눠서 입력하게 바꿨습니다.
이렇게해도 데이터가 워낙 커서 복붙방식으로는 렉이 많이 걸리더라구요. 그래서 json파일자체를 임포트하는 현재 방식으로 최종적으로 바뀌었습니다.
Conclusion
매우 급하게 만든 프로젝트라 모달같은거도 따로 안만들고 alert나 prompt등 브라우저 기본기능을 사용하였어요(진짜 싫어함 ㅋㅋ) 코드도 정리가 잘 안되어있어서 부끄럽네요. 유저인증기능은 나 해킹해줘~정도로 단순합니다 ㅋㅋㅋ
하지만 acsap는 제가 처음으로 스터디를 하면서 개발을 접목시킨 프로젝트라 의미가 큽니다ㅎㅎㅎ 스터디원 분들도 전부 활용을 잘 해주셨어요. 때문에 고민없이 프로젝트로 등록을 하게 되었습니다.
또한 스터디를 진행하면서 팀장으로써 어떤 자세로 팀을 이끌어가야하는지 많이 배운 경험이기도 했었습니다.
