설리번 프로젝트 2021 상반기 교육 진행 회고록

 

👋 신입 개발자가 교육 프로젝트를 진행하기까지, 5개월간 설리번 프로젝트에 참여했던 이야기를 담았습니다.

 

프론트엔드 개발자로 취업한지 3개월밖에 안되었을 때 설리번 프로젝트의 선생님 모집 글을 보았다. 설리번 프로젝트는 프로그래밍에 관심이 많지만 도움을 구하기 어려운 학생들을 위해 대학생 또는 신입 개발자가 자발적으로 모여 코딩 교육을 진행하는 프로젝트이다. 누군가에게 내가 아는 것을 설명해 보는 과정에서 큰 공부가 될 거라 생각했고, 또래 친구들과 회사 밖, 학교 밖에서 우당탕 프로젝트를 진행해 보는 게 재밌을 것 같아서 설리번 선생님에 지원했다. 며칠 뒤 회사에서 합격 메일을 확인하고는 팀장님께 자랑했다. 너무 설렜다.

 

 

학생이 주체가 되는 교육을 만들자

팀 구성 후 함께 교육 계획을 의논하기 시작했다. 나는 선생님의 코드를 가만히 따라치며 공부하는 수동적인 수업 형태를 피하고 싶었다. 개발을 공부하면서 성취감이라는 자극을 느낄 수 있어야 개발에 흥미를 갖고 스스로 동기부여하며 공부를 지속할 수 있기 때문이다. 

내가 들었던 국비지원 코딩 수업은 강사님이 스크린에 코드를 띄워 설명해 주시면 학생들이 따라치는 방식으로 진행되었다. 당일 수업 내용을 이해하지 못하면 다음날부터는 뒤쳐질 수밖에 없어서 많은 학생들이 이론수업에서부터 흥미를 잃기 시작했다. 하지만 진짜 재미는 이렇게 배운 개념으로 내가 원하는 걸 직접 구현해 볼 수 있는 팀플 시간에 있었다. 만들고 싶은 걸 각자가 역할을 담당해 실제로 구현해냈을 때의 성취감이 더 능동적으로 공부할 수 있는 힘을 주었다. 많은 학생들이 이 재미를 느껴보기도 전에 이론수업에서 흥미를 잃어버리는 게 안타까웠다.

이런 수업을 들으면서 개발에 흥미를 갖고 공부를 지속할 수 있는 방법은 일찍이 성취감을 많이 맛보는 것이라고 생각한다. 많은 친구들이 코딩을 재밌어하는 이유는 코딩이라는 도구로 내가 원하는 걸 만들어낼 수 있다는 점에 있다. 프로그래밍을 배우는 건 결코 쉽지 않다. 머리를 싸매고 공부하는 와중에도 '내가 결국 해냈어! 만들어냈다!'라고 느끼는 순간 더 공부하고자 하는 동기를 얻게 된다. 그래서 나는 많은 학생들이 수업에 능동적으로 참여할 수 있도록 실습 비율이 높은 교육을 고민해 보고 싶었고, 팀원들에게 컴포넌트 조립형 실습과 그룹형 수업 방식을 제안했다. 

그렇게 우리가 구상한 교육은 학생들끼리 주어진 문제를 토의해서 해결해보고, 자신이 이해한 내용을 서로에게 설명해 보는 소그룹 형태의 수업 그리고 우리가 제공한 컴포넌트를 학생들이 조립해서 화면에 쨘 하고 띄워보는 실습형 교육이었다. 사실 이런 참여형 수업은 오프라인 대면 수업에서 시도하기 좋은 방법인 것 같고 온라인 수업일 경우 적막만 이어질 수 있다는 걸 교육을 통해 깨달았다.

 

 

함께하는 공부

[기술스택]
Frontend: React, NextJS, Material-UI
Database: Firebase Firestore
Deployment: Vercel

 

교육에 사용될 실습 프로젝트를 개발하기 위해 먼저 기술스택을 선정했다. 우리는 리액트 기반의 Next.js 프레임워크를 활용해 프론트엔드와 백엔드 로직의 역할을 이해하고 나만의 SNS를 구현해 보는 것을 목표로 잡았다. 놀랍게도 팀원 중 아무도 리액트로 투두리스트 이상의 무언가를 구현해 본 사람이 없었다. 벨로퍼트 리액트 악마의 useEffect 구간을 넘긴 사람이 없었다. 헬렌을 위한 학습목표가 우리의 학습목표가 되었다.

 

프로젝트 산출물 개발 전 스터디 저장소

 

우리는 프로젝트 개발 기간 중 초기 3주를 활용해 기술스택을 함께 공부하는 시간을 가졌다. 몇 가지 튜토리얼을 선정해 함께 완주하는 것이 목표였다. 각자 공부하고 있는 부분을 팀원 모두가 볼 수 있도록 기록하면 좋을 것 같아서 팀원들과 깃허브를 적극 활용했다. 주차별로 공부해야 할 분량과 기록 방법 등을 정리해 이슈를 발행했고, 코드베이스에 팀원 개인별 폴더를 만들어 개인 폴더 안에서 공부한 과정을 커밋으로 기록할 수 있도록 구성했다. git에 익숙하지 않은 팀원이 실수로 git push force를 해서 저장소가 덮어쓰기 되는 등 이 때 팀원 모두가 git과 가까워졌다 멀어지기를 반복한 덕분에 프로젝트 진행 시 좀 더 능숙하게 깃허브로 협업할 수 있었다. 

 

저장소 위키에 가이드 및 기술조사 문서 기록

 

공부하면서 각자 주제를 정해서 팀원들이 이해하기 쉽도록 가이드 문서를 작성해 저장소 위키에 기록했다. 그 밖의 일정계획, 회의기록, 개발문서는 노션, 구글 드라이브를 사용했다. 이렇게 스터디를 진행하며 여러 문서를 남겨둔 덕분에 프로젝트 중간발표를 빠르게 준비할 수 있었고 교육 때 기존 문서를 교육자료로 활용하는 등 큰 도움이 되었다.

이 3주의 스터디 기간 동안 우리는 리액트 문법, Next 프레임워크의 기능, 파이어스토어 데이터베이스 사용방법 등 기초적인 부분을 익혔다. 이후 5월 말부터 7월 말까지 두 달 동안 산출물 개발과 기술 공부를 병행하면서 여러 시행착오를 통해 기술에 대한 이해도를 높일 수 있었다. 

 

 

개발 및 프로젝트 관리

프로젝트 개발에 앞서 먼저 화면을 어떻게 구현할지 화면정의서를 작성하는 시간을 가졌다. 당시 회사에서 매일 문서 작성만 했던 나보다 우리팀 대학생 친구들이 더 예쁘고 정교하게 잘 편집해줬다. 대학생의 내공이 느껴졌다. 그리고 각 화면별로 구현 담당자를 지정했다. 

 

PPT 마스터 대학생들과 침묵 속에 화면정의서 30분만에 작성

 

일하면서 어깨너머 배운 프로젝트 관리 방법을 적극 활용했다. 화면정의서를 토대로 각자 진행해야 할 작업 내용을 정리해 이슈를 발행했다. 작업 할당자는 해당 이슈 번호로 브랜치를 생성해서 작업했고, 커밋 기록을 이슈에서 참조할 수 있도록 커밋 메시지에 이슈번호를 함께 기재하는 등 이슈 단위로 작업을 진행했다. 

 

이슈 단위로 브랜치 및 작업 할당

 

CSR vs SSR의 개념도 아직 아리송한 상태로 우리는 바쁘게 산출물 개발을 시작했다. 개발 초기에는 소셜 로그인 기능, Mobx를 사용한 유저 상태관리 기능까지 우리의 모든 욕심을 다 끼워 넣었다. 하지만 설리번 사무국에 중간점검 PR로 우리의 고장난 코드베이스를 보여드린 이후로 팀원들과 개발 진행 방향에 대해 진지하게 재점검하는 시간을 가졌다. 교육목표, 교육대상을 고려해 복잡한 기능은 다 버리고 구현 가능하고 교육 가능한 최소한의 기능만 계속 작업하기로 결정했다. 이 시기에 개발에 큰 도움을 주던 한 팀원이 좋은 취업소식으로 하차해서 남은 세 명의 팀원이 발에 불 떨어진 듯 교육자료를 만들고 코딩했던 기억이 난다.

 

친구들 터미널 사용할 때 몰래 GUI 쓰기

 

팀원들 간 코드리뷰도 잊지 않았다. 개발 일정이 촉박해서 주기적으로 서로의 코드를 점검해 주진 못하고 중간, 최종 점검 전 몰아서 리뷰를 진행했다. 우리의 눈높이, 교육 대상 학생들의 눈높이에 맞춰 코드를 이해하기 쉽게 수정하는 것이 리뷰 목표였다. 테스트를 너무 꼼꼼하게 잘해준 팀원이 있어서 리뷰하면서도 많이 배울 수 있었다. 

 

두근두근 최종 리뷰

 

Next 프레임워크로 SNS 상세 화면에 서버 사이드 렌더링을 구현해 보고, 파이어스토어 데이터베이스와 소통하는 API routes를 작성해 보면서 여러 번 공식문서를 들여다보며 공부했다. 회사 밖에서도 하루종일 공부한 덕분에 이후 회사에서 새로운 기술스택으로 개발을 시작할 때 공식문서를 보고 이해하는 속도가 좀 더 빨라진 것 같아서 큰 도움이 되었다고 느낀다. 큰 에러 없이 산출물 개발이 마무리되었지만 여전히 코드베이스는 어딘가 부족하고 어설프다. 이 부족한 부분을 하나씩 해결할 수 있도록 내년의 내가 더 성장해있길 바란다.

 

팀장님이 안예쁘다고 하셨던 산출물 SNS 메인 화면

 

 

교육자료 준비

교육 진행일이 다가오면서부터 깃허브의 프로젝트 보드를 활용해 일정을 관리했다. 수업 PPT, 교육자료, 실습용 저장소, 수업 후 제공할 녹화강의를 준비했다. 정신없이 바빴지만 팀원 모두가 중압감을 덜 느끼고 분명한 우선순위에 집중할 수 있도록 항상 일정표를 만들려고 노력했다. 

 

교육 준비용 프로젝트 보드

 

처음으로 강의를 준비하다 보니 녹화강의를 준비하면서 시행착오가 많았다. 내 강의톤 목소리를 처음 듣고 좀 괴롭기도 했고, 설명을 하다가 말이 끊겨서 여러 번 다시 촬영하기도 했다. 그래도 코딩하면서 아리송했던 개념이 강의를 준비하면서 완성되는 걸 느꼈다. 내가 설명하기 위해서는 개념을 분명하게 알아야 하고, 그걸 누가 들어도 이해하기 쉬운 형태로 출력하려면 더 깊이 체화시켜야 한다. 

 

강의 준비 흔적들

 

 

교육 진행

교육 대상 모집은 순조롭게 진행되었다. 평소 자주 보는 테크 분야 관련 페이스북 그룹, 오픈채팅방에 교육 홍보 글을 올렸고, 하루 이틀 만에 예상 인원이 충족되었다. 우리는 나이와 직업이 다양한 12명의 헬렌(학생)과 함께 교육을 진행하게 되었다. 교육 대상은 html, css, javascript를 사용해 간단한 웹페이지를 만들어본 경험이 있는 분들이었지만, 해당 경험이 없는 분들도 계셨고 이미 웹 퍼블리셔나 개발자로 재직 중인 분들도 지원해 주셨다. 헬렌분들께 교육 합격 문자를 보내드린 후부터 마음이 초조해지기 시작했다. 설렘 반 긴장 반.

교육은 7월 24일부터 8월 21일까지 매주 토요일마다 3시간씩 총 5차시로 진행되었다. 교육 첫날엔 Zoom 화상채팅 플랫폼으로 오리엔테이션을 진행했다. 첫날 어색함을 깨기 위해 아이스브레이킹 타임으로 캐치마인드를 진행했다. 알아볼 수 있는 그림을 그려달라고 말씀드렸고 모두들 유쾌하게 그림으로 자기소개를 이어가셨다. 너무 재밌고 좋은 분들이 함께해 주셔서 열심히 수업 준비를 해야겠다는 동기부여를 얻을 수 있었다. 교육을 진행하면서 헬렌들과 슬랙을 통해 소통했다. 여러 채널을 생성해서 공지사항을 전달하고, 수업 전 과제를 인증하고, 실시간으로 질문과 답변을 주고받았다. 

 

슬랙을 통해 헬렌(학생 참여자)과 실시간 소통

 

2차시 교육부터는 디스코드를 사용해 수업을 진행했다. 디스코드는 화상채팅에 시간제한이 없을뿐더러 여러 개의 채널을 생성할 수 있어서 우리의 교육 목표였던 소그룹 수업방식을 진행하기 적절했다. 매 수업 시간마다 지난 수업 복습 퀴즈를 10분간 가졌고, 전반부 수업엔 녹화강의로 웹 이론수업이 진행되었고, 후반부 수업엔 SNS 만들기 실습수업이 진행되었다.

 

디스코드로 매주 실시간 교육 진행

 

실습수업은 소그룹으로 진행되었다. 4명의 헬렌과 1명의 설리번 선생님이 그룹을 구성해 주어진 미션을 해결했다. 헬렌이 직접 문제를 고민하고 해결하는 비중을 늘리고자 실습용 코드베이스는 미션을 수행해야 할 주요 코드만 비워둔 채로 제공되었다. 각 미션을 해결하면 헬렌은 채팅창에 이모지로 반응을 주고, 설리번 선생님은 이모지 개수로 헬렌들의 미션 진척상황을 파악했다. 반응이 없는 헬렌이 있다면 진행상황을 확인하고 같이 문제를 해결했다. 선생님들은 헬렌에게 바로 답을 알려주지 않고, 어떤 생각을 해보면 좋을지 가이드를 주는 역할을 했다. 3차시 수업부터는 참여인원이 줄어들어 소그룹 대신 전체 채널에서 모두 함께 미션을 진행했다.

매 차시마다 헬렌들은 실습 미션이 업데이트된 코드베이스를 원격 저장소에서 로컬 환경으로 fetch 받은 후 실습을 진행했다. 수업 진행이 예정 시간보다 늦어지면 남은 미션을 과제로 제공하기도 했다. 해당 과제가 완료되어야 다음 실습 미션을 진행할 수 있지만, 과제를 하지 않은 헬렌도 수업에 원활하게 참여할 수 있도록 지난 과제가 다 채워진 미션을 제공했다. 수업이 끝나면 미리 준비해둔 수업 녹화강의와 추가 교육 자료를 구글 공유 드라이브를 통해 제공해드렸고, 매 차시마다 구글 폼을 통해 헬렌분들께 수업 피드백을 받았다.

4차시 수업 때부터 긴장이 풀리고 강의가 재밌게 느껴졌다. 수업을 5번은 더 할 수 있을 것 같은 의욕이 생겼는데 그다음 5차시 수업이 마지막이어서 아쉬웠다. 마지막 수업에선 그동안 로컬에서 만든 앱을 Vercel에 함께 배포하고 서로의 결과물을 발표해 보는 시간을 가졌다. 그동안 배운 내용을 응용해서 자신만의 웹페이지를 만들어 보여주신 훌륭한 헬렌분도 계셨다. 하루하루 급박하게 교육을 준비해서 수업 때마다 늘 에러를 마주했지만 모두들 너그러이 이해해 주시고 열심히 따라와 주셔서 감사하고 행복했다.

 

실습 수업 미션 안내(좌), 실습용 코드베이스 (우)

 

 

상반기를 불태운 소감

아직 부족한 내가 누군가를 가르칠 수 있을까라는 의심과 함께 시작했는데 멋진 팀원들을 만나 결국 교육을 해냈고 나는 또 동기부여를 얻을 수 있었다. 내가 고작 조금 아는 지식을 다른 사람들에게 알려주고 도움을 줄 수 있다는 게 나에게 큰 가치를 느끼게 해주었다. 또 설명하기 위해 공부하다 보니 나에게도 큰 공부가 되었다. 항상 교육을 소비만 하던 신입 개발자가 직접 교육을 생산해보는 경험을 할 수 있다는 게 정말 좋은 기회였다. 

이제 막 개발에 관심을 갖게 된 학생들이 수동적인 코딩 수업에 흥미를 잃고 좌절하지 않았으면 좋겠다. 친구들과 함께 공부하고 무언가를 만들어보는 경험을 통해서 재미와 에너지를 느꼈으면 좋겠다. 학생들이 공부하면서 성취감을 느끼고 스스로 동기부여하며 성장하는 개발자가 될 수 있도록 흥미로운 교육 기회를 제공하는 것이 내가 만들 수 있는 선한 영향력이지 않을까 생각이 든다. 앞으로 더 공부해서 또 기회가 된다면 많은 사람들에게 내가 느꼈던 만큼의 에너지와 배움을 나누고 싶다.