박우빈
사이드 프로젝트 기반 IT 커뮤니티인 '가치'에서 사전 모집 신청을 받는 중입니다!
가치는 기획자와 개발자, 디자이너가 모여서 서비스를 만들며 기록하고 성장하는 클럽입니다. 가치는 여러 직군의 사람들과 교류하면서, 프로젝트와 함께 가치 있는 시간을 보낼 수 있는 곳이에요. 크루원들과 똑같은 방향을 바라보며 성장하고, 클럽원들과 만나고 대화하며 모든 가치 클럽원들과 커뮤니케이션하는 것을 지향해요.
가치는 함께 모여야 생기니까요!
✅ 사이드 프로젝트, 포트폴리오에 관심 있으신 분
✅ 매주 프로젝트와 함께 회고를 통해 성장하고 싶으신 분
✅ 다양한 IT 직군 종사자들과 자유롭게 커피챗 & 커뮤니케이션하고 싶으신 분
지금 바로 지원해보세요! 사전 신청 마감까지 D-1 🔥🔥🔥
박우빈
한국에서 인터넷을 사용하며 나무위키를 모르는 사람은 거의 없을 것이다.
나무위키는 유명인과 화제가 되었던 사건/사고에 대해 문서 형식으로 다루고,
그 문서를 인터넷 사용자라면 누구나 편집할 수 있게 만든 서비스이다.
필자는 소프트웨어와 관련된 기숙사 학교에 다니면서, 일반적인 학교보다
더 황당하고 재미있는 에피소드와 스토리가 많이 나온다는 것을 느꼈다.
이와 관련된 예시를 하나 들고 싶지만, 해당 커플이 이별 상태여서 생략하겠음.
위처럼, 따라서 내 친구들의 흑역사를 문서처럼 박제하는 위키가 필요했다.
하지만 나무위키는 어느정도의 유명세가 있어야만 작성할 수 있는 위키였기에,
우리가 직접 우리 학교만의 위키를 만들어보자는 생각을 했다.
나는 해당 프로젝트에서 프론트엔드 분야를 도맡아 개발을 진행했다.
따라서 기술적인 부분에서는 주로 프론트엔드와 관련된 이야기를 서술할 것이다.
조금 서운할 수도 있겠지만, 이해해 주시오... ㅎㅎ..
## 프로젝트 개발 시작
함께 학교를 다니며 나와 비슷한 생각을 하던 같은 반의 친한 친구 3명과,
말로만 하던 우리 만의 나무위키, 즉 학교의 이름을 딴 부마위키를 실제로
만들어보자고 이야기했다.
그 당시는 1학년이었던 2022년, 여름방학이 끝나고 9월 초 쯤이었다.
프론트엔드를 맡은 나와 내 친구 한 명은 여름방학 동안 공부했던
리액트와, 타입스크립트를 가지고 프론트엔드 개발을 시작했고,
또 다른 친구 2명은 스프링 부트로 백엔드 개발을 시작했다.
아무런 세팅도 하지 않은 cra template typescript 환경으로
프로젝트를 시작했다.
9월 14일에 이니셜라이즈한 프로젝트를 깃에 커밋하며 프로젝트를 시작했다.
우리는 프로젝트를 진행하며, 생각보다 많은 회의가 필요했다.
프로젝트를 만들며 "만들자!"하면 뚝딱 만들어지는 것이 아니었고
생각보다 많은 사항들을 회의를 통해 협의하고 규칙을 정해야했다.
그 당시 우리에게 제일 넘기 어려웠던 난관은 바로 실력이었다.
제대로 된 경험도 다들 없었지만, 위키같은 어떻게 보면 조금 큰
서비스를 만든다고 하니, 팀원 모두 막막해하는 눈치이긴 하였다.
그러던 찰나, 부마위키를 기획하며 가장 큰 난관에 봉착했다.
말 그대로 위키는 기록이 남아야 한다. 단순하게 문서가 편집만 되는
것이 아니라, 저번 버전과 이번 버전에서는 어떤 변경사항이 있는지,
또 누가 해당 문서를 편집해야하는지 등의 기록이 남아야한다.
그리고 당시 우리는 생각했다.
"이거 어케함??????"
진짜 혼돈의 도가니였다. 도대체 기록을 어떻게 남게 하냐는 것이다.
회의를 통해 여러가지의 방법을 도출하기는 했다.
부마위키 문서 기록 전용 레포지토리를 깃허브에 만든 다음,
사용자가 서비스에서 문서를 편집할 경우 셸 스크립트를 이용하여
깃허브에 커밋 후 그 내용들을 가져온다던지 등등...
그나마 위의 방법이 도출된 방법 중 제일 나은 방법이었고,
우리는 "아니 그럼 그걸 또 어떻게 하는데?"라고 생각하며
프로젝트의 진행이 완전히 멈추게 되었다.
우리보다 먼저 교내 위키를 만들었던 선린 인터넷 고등학교의 7layer라는 팀이 있었는데,
지인의 도움으로 연락이 닿아 위키 버전 관리 시스템에 대해 질문을 했지만,
돌아오는 답변은 그 때 기수가 아니라서 잘 모른다 였다.
그래서 팀원 4명 모두 의욕을 상실하여 "아 이건 불가능한 프로젝트다."라고 판단을 했다.
몇 주 동안은 그렇게 부마위키의 개발을 중단하고, 각자 공부할 것들과
다른 프로젝트에 매진하기 바빴다. 그러던 어느 날...
백엔드 개발을 맡아서 하던 팀원 중 한 명은 내 기숙사 룸메이트였는데,
어느날 "야 부마위키 버전 관리 하는 법 알았다!" 라고 이야기했다.
그래서 나는 그나마 희망을 가져보며 "뭔데?"라고 물었고, 답변은
"그냥 데이터베이스에 같이 넣으면 되는 거였다!"라고 이야기했다.
그 때 당시는 조금 의아했다. 데이터베이스에 대한 지식도 SQLD 기출 정도의
기본적인 지식 밖에 없었을 뿐더러, 그렇게 해도 성능이 괜찮은 지도 몰랐었다.
아직도 기억나는데, 그 때 그게 가능하냐고 세 번은 연달아 물어본 것 같았다.
"그게 가능하다고?"
"가능함."
"진짜 가능하다고??"
"어 가능함."
"그게??"
"어."
어쨌건 이슈 처리가 급했던 우리에게 성능은 지금 막 다급한 문제가 아니었다.
신뢰도는 조금 떨어지지만, 그래도 어떻게 방법을 찾은 우리는 다시 개발을 시작했다.
본격적으로 아무 것도 없는 cra 환경에서, 개발을 하며 필요한
여러가지 세팅을 시작하고 개발을 진행했다!
개발에 사용하던 기술이나 이슈, 여러가지 등을 짧게 짧게 서술하겠다.
백엔드와 프론트엔드가 있는 프로젝트를 처음 시작하면 가장 먼저 겪게 되는
이슈가 CORS이다.
나는 당시 교내 대나무숲을 같이 개발하고 있었기에, CORS에 대한 지식까지는
아니지만 이해와 어떻게 해결해야하는지 정도는 구글링을 통해 알고 있었다.
당시에는 프론트엔드가 어떤 설정을 해야 이와 같은 CORS 이슈가 해결되는 줄
알고, 프론트엔드 단에서 프록시를 설정하려 했다.
당시 리액트를 막 갓 뗀 시기였고 cra 환경으로 프로젝트를 생성했기에,
당장 웹팩으로 프로젝트를 세팅하기에는 기술적으로 무리가 있었다.
그래서 cra환경에서도 웹팩 설정을 해주게 하는 craco라는 라이브러리를 사용했다.
라이브러리를 설치하고, init을 통해 프록시를 설정하여 CORS를 미리 대비했다.
이 당시 앞서 설명했던 버전 기록 이슈로 인해 커밋이 일시적으로 끊겼었다.
또한, 상대 경로로 import 구문이 복잡해지는 이슈를 대비해서,
미리 tsconfig.json을 통해 골뱅이로 import를 불러오는 절대경로를 세팅했다.
그리고 당시 동아리 선배님들이 작성하신 프론트엔드 코드를 많이 참고했는데,
이중 allFiles라는 모듈이 굉장히 인상깊었다.
이 모듈은 import할 수 있는 컴포넌트나 모듈들을 전부 import한 다음,
다시 export로 내보내 다른 곳에서 이를 사용할 때 allFiles에서
꺼내 사용할 수 있게 하는 모듈이다.
선배들의 코드를 보며 내 실력으론 읽지도 못하던 코드가 대부분이었으나,
이 모듈만큼은 코드를 보고 감명을 받아 우리 프로젝트에도 적용시키기로 했다.
폰트를 어떤 것을 사용할지에 대해서도 굉장히 고민을 많이 했었는데,
당시 깃허브 폰트가 매우 깔끔하다고 생각했던 우리는 깃허브가 사용하는
폰트인 구글의 Open Sans 폰트를 사용하기로 했다.
또한 index의 스타일시트를 css가 아닌 scss로 마이그레이션하고,
Sass를 사용하여 부마위키 페이지를 퍼블리싱하는 것으로 정했다.
당시 우리는 학생, 선생님, 사건/사고, 교내 동아리 이렇게 총 4개로 섹션을
나누어 개발을 진행하자고 기획했다.
또, 문서를 클릭했을 때는 카테고리/문서명 으로 라우팅을 넘겨주기로 했다.
스타일드 컴포넌트의 상속과 비슷하게 사용할 수 있는 mixin 기능을
이용하여 리팩토링을 진행했고, 그 덕에 코드의 양을 매우 많이 줄일 수 있었다.
mixin은 블록처럼 어떠한 css코드를 선언해두고, 이를 다른 css코드에서
include 키워드를 통해 불러오는 문법이다.
이 때까지는 내 친구와 직접 구두로 협의를 하여 규칙에 맞게 협업을 진행하였으나,
직접 말을 하니 까먹는 부분도 있었고 서로 지키지 못한 부분도 있었다.
그래서 컨벤션을 만들어 README에 올리고, 해당 컨벤션에 따라 개발을 진행했다.
당시 같이 협업을 하던 친구의 git이 꼬여버려서 커밋이 안되는 이슈가 발생했다.
그래서 커밋이 오가니제이션에서만 안되는 것인지 확인하기 위해서,
그 친구의 계정으로 임시로 본인 레포지토리를 생성하고 커밋을 했는데
분명 remote를 이 친구의 레포지토리로 설정을 했음에도 불구하고 갑자기
오가니제이션에 커밋이 되어버렸다.
당시 우리는 계속 24시간 돌아갈 수 있는 서버가 필요했다.
하지만 대나무숲을 개발하며 겪어본 결과, AWS 클라우드를 사용하기에는
무언가 하나라도 설정을 잘못 건드리면 갑자기 돈이 몇 십 만원 단위로
쭉쭉 빠진다는 두려움이 있었다.
그래서 우리는 라즈베리파이나, 라떼판다같은 소형 컴퓨터를 구매하고,
그 컴퓨터에 우분투를 설치하여 서버를 돌리면 좋겠다는 생각을 했다.
이 생각을 동아리 선생님께 말씀드리자, 동아리 선생님은 안 그래도 마침
동아리 예산이 많이 남았다며 흔쾌히 50만원이나 되는 라떼판다 최신형을
학교에 신청하여 사주셨다... 다시 생각해도 너무 감사하다.
그래서 우리는 라떼판다에 우분투를 설치하고, ssh 설정을 통해
우리의 컴퓨터에서 원격으로 접속할 수 있게 세팅하여 서버를 구축했다.
그래서 프론트엔드는 한결 편하게 API와 관련된 것들을 개발할 수 있었다.
당시 처음으로 라떼판다의 서버로 API를 연결했다.
매일 공공 API를 가져와서 만드는 프로젝트만 진행하다가,
진짜 백엔드와 처음 연결을 해보니 감회가 매우 새로웠다.
당시 1번 문서의 수정 기록을 불러오는 코드였다.
우리는 당시 브라우저 쿠키를 통해 액세스 토큰과 리프래시 토큰을 저장하기로 했다.
이를 더 쉽게 불러오기 위해 getCookie라는 쿠키를 파싱해주는 함수의 코드를
구글링을 통해 가져온 다음, 로그인 로직을 처리할 때 유용하게 사용했다.
막 18살이 되었을 때이다.
문서를 편집하는 함수를 만들고, early return 방식을 사용하여
문서 형식의 예외를 처리한 다음, 서버에 put 요청을 보내는 코드이다.
가만보면 PUT 메서드인데 변경되는 내용이 하나도 안 들어간.. 무언가
이상한 코드이긴 하다.
이런 코드도 짜보며 오류를 직접 겪고 고치고, 구글링하고 하며 실력을
쌓아왔던 것 같다.
부마위키의 프론트엔드를 담당하며 가장 시달렸던 것은 바로 파싱이었다.
우리는 처음에 위키를 만들 때에는 문서 엔진으로 마크다운을 사용하자고 했다.
하지만 마크다운 문법상, 너무 자유분방하고 위키와 안맞을 것 같다는 의견이 있었다.
그래서 우리는 HTML과 비슷하게 우리만의 태그를 만들어서 사용하자고 했다.
그래서 프론트엔드는 딱히 문서 엔진에 지식이 없어 replace로 이 태그들을
HTML 태그로 바꾸어서 사용자에게 보여주는 식으로 처리했다.
당시 우리가 정해두었던 부마위키 만의 문법들이다.
실제 부마위키의 코드를 보면 이런 식으로 이루어져있다.
당시 날짜를 연월일시분초로 파싱하는 것도 생각보다 가벼운 작업은 아니었다.
오전과 오후를 판단하는 것도 그 당시에는 힘들었고, 날짜와 관련된 라이브러리에
관한 지식도 없었기에 직접 날짜를 파싱하는 함수를 만들어 사용했다.
우리는 최근 수정된 문서에서, 몇 초 전, 몇 분 전, 며칠 전과 같이
현재 시간을 기준으로 얼마나 전에 작성되었는지를 띄워주고 싶었다.
이를 구하는 방법이 거의 없다고 생각했지만... 나의 피눈물나는 파싱을 통해
어찌저찌 로직을 구현했다.
당시 백엔드 친구들이 코드를 보고 미친거 아니냐면서 찬사를 보냈다.
이런 코드를 짜고 자부심을 가지고 있었는데, moment나 dayjs같은 라이브러리를
사용하면 두 세줄로 줄여진다는 것을 알고난 후로는 조금 민망했다.
이렇게 여러가지의 시행착오를 겪으며 결국 서비스를 거의 완성했고,
우리는 서비스에 어떤 점들이 필요하고 어떤 부분에서 오류가 나는지를 확인하기
위해 베타 테스트로 서비스를 배포하였다.
친구들에게 홍보를 했고, 사용해보면서 어떤 불편한 점이 있고 어떤 오류가 있는지
알려달라고 하며, 이슈에 대해 계속 회의하고 부족한 점을 보완해갔다.
당시 라우팅 이슈로 인해 2:2로 열띤 토론이 일어났다.
당시에는 문서를 생성된 숫자로 라우팅을 진행했다. 예를 들면 23번째로
생성된 문서라면 /docs/23과 같은 형식으로 id를 통해 라우팅을 진행했다.
그러다 학생들의 문서를 세팅하던 중, 실수로 문서를 잘못 세팅하여
1번~20번 정도의 문서를 삭제했었다.
문제는 이 문서를 삭제하고나면 이 1번~20번이 영원히 비게 되는 것이었다.
그래서 나는 이 문제가 서비스의 결함이라고 생각했고, 같이 프론트엔드를 맡아
개발을 하던 친구에게도 이야기했다.
그래서 라우팅을 문서의 이름으로 하자고 제안했고, 테스트 버전이 끝나면 DB를
싹 삭제한 다음 다시 배포를 하자고 했다.
하지만 백엔드를 맡은 친구들의 의견은 조금 달랐다.
당시에 베타 테스트 버전임에도 만들어진 사건이나 재미있는 문서들이 생각보다 많았고, 이 친구들은 문서 아이디로 라우팅을 하다가 해당 문서가 삭제되었을 때
그 문서 번호가 영원히 빈다는 것에 대해 "괜찮지 않나?"라는 의견을 가졌었다.
그렇게 토론 후, 결국 "일단 한번 DB를 밀어야 하는 건 맞다"라는 의견으로
협의를 보며 베타 테스트 버전을 닫고, 라우팅을 문서 이름으로 하기로 했다.
그래서 1월 중순 ~ 2월 중순까지는 꾸준히 백엔드와 프론트엔드 모두
리팩토링을 하고 구조를 바꾸며, 사용자들이 아쉬워했던 부분도 보완을 해가며
개발을 했다.
우리는 마케팅에 대해서도 굉장히 고민을 많이 했었다. 당시 우리가 학교의
2번째 기수였기 때문에 바로 위에 선배들 외에는 3학년 선배는 없었다.
그래서 선배들도 어떻게 이 위키를 쓰게 하느냐가 관건이었고, 신입생 또한 그랬다.
우리는 신입생들이 입학하기 전 미리 서비스를 돌려서, 어느 정도 문서가 채워져
있어야 할 것이라고 생각했다.
그래서 입학하기 1~2주 전 즈음에 서비스를 정식으로 배포했다.
정식 배포였음에도 우리가 생각치 못한 여러가지 이슈들이 많았다.
제일 먼저 다가온 이슈는 동명이인 이슈였다.
동명이인으로 문서를 두 개 생성하자, 서버에서 오류가 발생하여
해당 이름으로 등록된 문서를 둘 다 불러오지 못하는 이슈였다.
우리는 로그인을 한 학생들만의 문서가 있는 것이 아니라, 전교생의
문서가 존재했었기에, 이를 고유 id와 이름으로 같이 비교할 방법도 없었다.
그래서 현재까지도 난제로 남게 되었다. 그래서 당시 동명이인이었던 두 명의
문서를 삭제하고, 박우빈1, 박우빈2와 같은 형식으로 문서의 이름을 다르게 생성했다.
덕분에 별 탈 없이 잘 사용하고 있는 듯 함.
베타 테스트 때 친구들이 열심히 써둔 문서들이 깨끗하게 사라지자 실망했던 터인지,
부마위키의 초기 사용자는 전교생의 숫자인 120명 중 6명도 채 안될 정도로
매우 적었다.
당시 매우 프로젝트를 열심히 만들었는데 사용자가 적은 것을 보고, 굉장히
회의감이 들고 의욕이 없어졌다.
나는 학교에서 방송부로 활동하고 있는데, 시간이 날 때 방송부에서 방송부장
선배님과 이야기를 나누었던 적이 있다.
여러가지 이야기를 하던 중, 선배가 그래도 1학년 때 자기들끼리 모여서
대나무숲, 부마위키같은 교내 서비스를 만든다는게 대단한 것 같다고 하셨다.
그 때 나는 감사했지만, 만들었는데 선배님들이 잘 안써주셔서 속상하다고 좀 찡찡댔다.
또 선배님이 그 찡찡댐을 받아주시면서 써주겠다고 약속하셨었던 기억이 난다.
당연히 빈 말인줄 알고 별로 기대는 하지 않고 있었다.
여기부터는 소마고 회고록에서도 나오는 내용과 비슷하다.
선배님께서 실제로 친구들에게 부마위키에 대해서 이야기해주셨고,
여러 선배들이 서로 친구들의 문서를 채워가며 부마위키를 많이 이용해주셨다.
갑자기 사용자 수가 급증하고 선배들의 문서가 꽉꽉 채워지니,
우리 학년 친구들도 그 것을 보고 부마위키를 너도나도 가입했다.
그러자 자연스럽게 신입생들에게도 부마위키가 알려져, 아직 신입생들은 계정이
없었을 시기인데도 불구하고 부마위키를 언제 쓸 수 있냐는 문의가 많이 들어왔다.
신입생들도 학교 이메일을 발급받고, 학교 관련 모든 정보를 제공하는 BSM이라는
서비스의 계정이 생기자 부마위키를 가입하기 시작했다.
지금 현재는, 165명 즈음 되는 전교생 중 161명이 부마위키에 가입해있다.
당시 수업 시간에도 부마위키 글이 올라왔으며, 최근 수정된 문서의 텀은
새벽을 제외하고 1시간 전을 거의 넘지 않았다.
7일 간의 웹사이트 조회수가 6만회를 찍는 등 엄청난 성장세를 보여주었다.
위키 특성상, SEO가 굉장히 중요했지만 서비스 초기에는 부마위키를 검색해도
검색창에 부마위키가 뜨지 않아 도메인을 몰라서 이용하지 못하는 학생들도 있었다.
이는 리액트가 CSR 렌더링 방식을 사용하기 때문에, 크롤링 봇이 웹사이트를
크롤링할 때 빈 페이지를 크롤링해서 SEO가 향상되지 않는 문제가 있었다.
위에서 말한 것처럼, 위키 서비스 특성상 SEO가 가장 중요한데
CSR 렌더링 방식을 쓰고있다는 것 자체가 역설이기도 했다.
당시에 새로 동아리를 개설하고, 우리를 직속으로 도와주시는 선배님께서는
부마위키를 넥스트로 마이그레이션하는 것이 어떻냐고 제안하셨다.
그래서 나와 내 친구는 선배님의 도움을 받아 프로젝트를 마이그레이션했다.
마이그레이션을 진행하며 선배는 동시에 코드 리뷰도 해주셨는데, 당시 리뷰할
사항들이 너무 많아서 나름 잘 만들었다고 생각했었는데 조금 충격을 받았다.
확실히 코드 리뷰를 받으면서 여러가지 몰랐던 개념도 공부하고 하다보니,
내 실력이 쭉쭉 올라가고 있다는 것을 느꼈다.
당시 PR을 올리며 기술적으로 회고도 하며 리팩토링을 진행했다.
제일 처음 마이그레이션을 할 당시에는, 넥스트가 리액트의 프레임워크이기에
리액트 프로젝트를 넥스트로 옮기기만 하는 것은 그리 큰 일이 아니었다.
그래서 후딱 옮긴 다음, SEO를 최적화시키자는 우매한 마인드가 있었다.
그렇기에 한 일주일 정도만에 넥스트로 마이그레이션을 할 수 있다는 생각을
했는데, 리팩토링과 같이 마이그레이션을 진행하고, 렌더링 방식에 대해서도
비교적 쉬운 SSR보다 설정할 것들이 많은 SSG를 사용해보니 거의 2000줄을
넘게 코드를 삭제하고 추가했던 것 같다.
엉켜있고 복잡한 코드들을 도려내고, 예외 처리는 더 세세하게,
유저 정보 관리는 더욱 효율적으로 바꾸어가며 부마위키의 코드를 안정화시킬
수 있었다.
당시 SSG로 서비스할지 SSR로 서비스할지 굉장히 고민했었다.
선배님께서는 위키의 문서가 자주 수정이 되지는 않고, 그 외에도 여러 이유와
함께 SSG로 렌더링을 할 것을 강추하셨다.
솔직히 말하면 당시 SSR로 하고 싶었던 이유가, SSR이 더 쉬웠기 때문이다^^..
그렇게 SSG로 마이그레이션을 했는데, 문서가 편집되거나 생성되어도 업데이트가
되지 않는 이슈가 발생했다.
그래서 다급하게 ISR 렌더링 방식을 채택하려 했지만, 너무 비효율적이고
ISR를 사용한다 해도 revalidate 시간이 지나야만 사이트가 다시 렌더링된다는
점도 서비스의 결함이었다.
그래서 선배님의 도움을 받아서, next에서 백엔드 api도 만들 수 있었기에,
이를 이용하여 문서가 생성/수정/삭제 되었을 때 자동으로 서버를 업데이트 시켜주는
코드를 작성했다.
이를 통해 렌더링 방식은 SSG지만, 사용자가 느끼기로는 SSR로 느낄 수 있게
마이그레이션을 했고, SSG인 만큼 첫 로딩 이외에는 웹사이트 속도가 매우 빨라져
사용자들의 만족도도 리액트를 사용할 때보다 훨씬 늘었다.
이 선배는 신한은행에 합격하셨다. 항상 잘 되셨으면 좋겠다^^..
다시 한번 존경하는 마음과 감사하다는 마음을 표합니다...
반년간 크다고 하면 크다고 볼 수 있는 부마위키라는 프로젝트를 진행하며
얻은 점은 굉장히 많았다.
큰 프로젝트를 진행하다보니 여러가지의 모르던 라이브러리나 개발방법에 대해서도
알게 되었으며, 무엇보다도 트러블 슈팅 능력이 굉장히 높아진 것 같았다.
다른 프로젝트들에서도, 에러가 발생하면 어떤 원인으로 인해 발생한 오류인지
더욱 빠르게 분석하고 해당 에러를 해결할 수 있었다.
또 이론적으로만 공부해보았던 넥스트의 렌더링 방식에 대해서도 프로젝트를
진행하며 직접 느껴보니 더욱 잘 이해하고 어떤 장단점이 있는지 알 수 있었다.
여러 멘토 선생님들도 말씀해주셨던게, 직접 사용자들을 상대로 서비스를 운영해본
경험 자체가 매우 귀하고 중요한 경험이라고 이야기하셨다.
현재도 부마위키가 운영되고 있는 것처럼, 많은 사용자들이 오고 가며 진짜
사용할 수 있는 서비스를 운영했다는 경험을 얻은 것이 굉장히 큰 것 같았다.
필자는 부산에 위치한 소프트웨어 마이스터고(이하 소마고 )에 다닌다.
부마위키라는 서비스가 유명해지자 다른 소마고에서도 이를 알게 되어,
"야 부산소마고에는 쟤네 학교 안에서 쓸 수 있는 위키가 따로 있대!"라는 식으로
유명해졌고, 다른 학교에서도 부마위키의 문서들을 구경했다는 내용도 들었다.
또한 레포지토리에 캐시워크 개발자님과, 서울에 위치한 기업에서 근무하시는
여러 개발자님들의 스타, 그리고 경북 소프트웨어고등학교 등 다른 학교에서
개발을 잘 한다 하시는 분들의 스타도 받게 되었다.
또한 멘토 선생님께서 다른 학교에 멘토링을 하러 다니실 때도, 여담으로
부마위키에 대해서 이야기해주셔서 몇몇 학교에서 인지도 있는 서비스가 되었다.
이와 관련된 만큼, 부마위키를 개발한 나의 인지도도 올라갔다는 장점이 있다.
선생님들께서 나에 대해서 더 잘 아시게 되었고, 여러 학교의 중요한 업무를
처리하시는 선생님들께서도 재미있는 프로젝트를 만들었다는 나를 이뻐해주셨다.
이에 따른 만큼, 학교의 이름을 걸고 학생을 대표해서 서는 자리들에서도 나를
초대해주셨다.
예를 들면 직업박람회 부스 운영이나, 입학설명회에서 재학생 인터뷰
를 맡기시는 등 여러가지 학교 행사에 참여했다.
나에겐 정말 과분한 기회들이었고, 많은 사람들 앞에서 발표를 하거나 교육감님 같은
중요한 인물들 앞에서 발표를 하는 등 나를 성장시키에 좋은 기회들이 많이 찾아왔다.
이를 통해 처음에는 미숙하고 발표를 할 때 발표자의 입장에서 보기 안좋은 습관이
있는 등, 미숙했던 내가 많은 사람들 앞에서 발표를 해고 내 생각을 표출하니,
곧 다가오는 회사의 면접에도 영향을 끼칠 수 있는 말하기 스킬을 늘리고 내 단점을
보완할 수 있었다.
프로젝트를 진행하고 난 뒤, 무언가 만들지 못하는 것은 거의 없다고 느꼈다.
물론 오만함에서 나온 말이 아니라, 시간이 오래 걸릴지라도 어떻게든 개발을
하는 방법은 어딘가에 존재한다는 것을 알게 되었다.
또한, 리팩토링을 하는 것이 얼마나 중요한 경험인지, 얼마나 실력을 더욱
올릴 수 있는 작업인지에 대해서도 알게 되었다.
또 나름 우리가 협업할 수 있는 환경은 매우 좋았는데,
같은 기숙사 학교였기에 원하기만 한다면 모여서 마음껏 회의를 할 수 있었다.
이를 통해 개발자 간의 협업과 기획이 얼마나 중요한지에 대해서도 깨달았다.
부마위키 회고록을 조금 빨리 하긴 했어야 하는데, 이제야 시간이 나서
이 프로젝트를 회고를 해본다. 마침표를 찍은 것은 아니다. 아직까지도
리팩토링할 것들이 남아있지만, 내가 서비스를 운영하며 겪었던 어려움과
여러 경험들에 대해 한 번 글로 정리를 해보고 싶었다.
한 편의 회사에서 사용할 수 있는 포트폴리오도 생기고, 값진 경험이 될 수 있었다.
나와 비슷한 고등학교를 다니며, 친구들과 협업을 경험하고 프로젝트를 개발하는
모든 사람들을 응원한다.
다들 열심히 했으면 좋겠고, 어려운 이슈가 발생하더라도 중간에 프로젝트를
포기하지 말고 끝까지 개발하여 프로젝트를 완성시켰으면 좋겠다.
모두 화이팅! 깃허브 맞팔하실분ㅎㅎ
부마위키
부산 소프트웨어 마이스터고 위키 서비스
박우빈
소프트웨어마이스터고 학생으로 살아가며 느낀 모든 점을 회고해볼까 한다.
글이 매우 길기 때문에 (약 18000자) 챕터별로 보고 싶은 내용만 집어서
보는 것을 추천한다^^..
필자는 현재 전국에 4곳 있는 소마고 중, 부산에 위치한 부산소프트웨어마이스터고(이하 부산소마고)
에 2023년 기준 2학년으로 재학하고 있다. 지금의 내가 생각하는 관점에서 입시 준비 때로 돌아가보자.
먼저, 이 학교 입시를 준비하게 된 계기부터 설명해볼까한다.
당시 학기 초 3월, 중학교 3학년이었던 나는 학년에 250명 정도 있던 학교에서 110등 정도의 중위권에 있던 학생이었다.
그때 난 일반 인문계 고등학교에 진학하여 대학을 간다고 했을 때 좋은 대학을 갈 성적도 아니었으며,
그 당시 경제적 형편으로 인해 대학을 다녀도 여러가지 아르바이트를 병행하며 학비를 내야하는 상황이었다.
그렇다고 해서 공업/상업 쪽이 내 관심사 밖이라서 공고나 상고에 가기도 썩 내키지 않는 상황이었다.
그 때 같은 반 사회 경제에 빠삭한 친구에게 내 성적으로 갈 수 있는 괜찮은 학교가 없을지 물어보았고,
친구는 여러가지의 학교를 추천해주었는데, 그 때 한 곳이 바로 부산소프트웨어마이스터고등학교였다.
신설 학교여서 깔끔한데다가, 사진으로만 보아도 학교 시설이 정말 고급지고 세련되어있었다.
또 4차 산업 혁명인 프로그래밍을 가르치는 학교라고 하니 이 학교에 진학한다면 취업과 관련해서
여러가지 걱정을 하지 않아도 될 것 같았다.
그래서 코딩의 ㅋ자도 몰랐던 나는 계속 학교에 대해 알아보며 이 학교에 들어가야겠다고 마음먹었다.
이런저런 고민 끝에 이 학교에 들어가야겠다고 마음 먹은 나는, 부모님과 담임 선생님, 진로 상담 선생님께
학교에 대해 말씀드리고 내 주관을 설명드렸다. 세 분 모두 학교에 대해 매우 긍정적으로 생각하셨으며,
무엇보다도 담임 선생님께서 제일 학교에 관심이 많으셨다.
진로 상담 선생님과 상담을 하던 도중, 성적 이야기가 나오게 되었는데, 선생님께서 알아보신 뒤 내 성적으로는
가능은 하지만 약간 애매한 성적이라고 말씀하셨다. 마이스터고는 특성상 2학년 1학기와 2학기, 3학년 1학기의 성적을
요구하고 3학년 2학기는 성적을 보지 않는다. 그래서 나는 다가오는 1학기 중간고사와 기말고사에 목숨을 걸어서
성적을 올리고, 고등학교 문을 박차고 들어가자고 마음먹었다.
그렇게 시험기간 한 달간, 학원 없이 오후 4시에 하교하면 바로 휴대폰 전원을 끄고 오후 11시까지 공부를 한 다음,
휴대폰을 켜 30분 정도의 자유시간을 가지다가 잠을 자는 일상을 반복했다.
당시 다른 과목들은 전부 커버가 가능했지만, 수학과 영어는 정말 학원 없이는 너무나도 처참한 정도였다.
내 친구들이 학원에 가 서너시간 동안 수업을 듣고 개념을 이해할 때, 그리 똑똑하지 않았던 나는 혼자서
똑같은 내용을 이해하는데 여서일곱시간을 소요해야했기 때문이었다.
그렇게 나름 열심히 공부해서 받았던 등수는 57등이었다. 열심히 했는데도 내 위에 50명이나 있다는 게 나를 허탈하게 만들었다.
당시 정말 친하게 지내던 2명이 있었는데, 나를 포함해 차례대로 56등, 57등, 58등을 받아 약간 신기할 따름이었다.
허나 그 두 명은 학원을 다니며 공부를 했던 친구들이기에, 친구들에게 학원비를 아꼈다면서 장난을 치고 놀리기도 했다.
하지만 결국 학원을 다니고 안다니고, 열심히 하고 안하고를 떠나 내 노력이 숫자 두 자리로 치부된다는 점이 참 비참했었다.
살아생전 몇 달 밖에 노력해본 적이 없으면서, 학원을 다니면 2등급이다 같은 말을 했던 나 자신이 정말 어리석고 찌질해보였다.
인문계 고등학교에 갔다면 비슷한 평범한 성적을 받았을 것이고, 평범한 대학에 진학해 평범한 인생을 살았을 거라고 생각했다.
그래도 비록 등수는 낮았지만, 어찌저찌 부산소마고에 들어갈 성적은 만들었으니 기분이 썩 나쁘지는 않았다.
이제 본격적으로 3학년 2학기 때는 인문 공부를 하지 않고 학교 입시를 준비했다.
학교에서도 입시 준비하는 학생들을 반기듯, 때마침 입학 설명회가 진행되었다. 당시 코로나가 유행하던 시절이라
온라인 줌 미팅으로 입학 설명회가 진행되었었는데, 당시 학교에 많은 관심이 있던 나는 5번 진행된 입학 설명회 중,
학부모/교사 입학설명회를 제외한 4번의 설명회를 모두 참석했다.
학교의 시설 사진과 급식, 가르치는 커리큘럼과 운영하는 제도 들을 새겨들으면 새겨들을 수록 학교에 대한 정이 많이 갔다.
친구들에게 어떻게 학교가 이렇게 카페같이 생길 수 있냐며 입학하지도 않았는데 자랑하기도 했고, 정말 학교가 좋아보였다.
제일 좋았던 점은 학교에서 거의 모든 비용을 무료로 해준다는 것이었다. 급식비 무료, 기숙사도 무료 제공에 심지어 코딩을
할 수 있는 노트북까지 무료로 제공하고, 현장체험학습 등을 갈 때에도 모두 학교에서 비용을 내준다는 것이었다.
그렇게 열심히 면접을 준비헀던 나는, 주변 어른들에게 도움을 받으며 지원서를 작성하고 내 성적과 지원서가 담긴 서류를 보냈다.
결과는 1차 합격이었다. 기쁜 마음도 잠시, 바로 2차 면접인 대면 면접과 NCS 시험을 준비했다.
마이스터고 면접 준비와 관련된 모든 것을 담은 책을 하나 구입해서 공부했는데, 막상 시험을 칠 때 딱히 도움이 되진 않았다.
시험을 치기 위해 학교에 도착했는데, 시설이 정말 좋았다. 책상과 의자는 바퀴가 달려있으며, 중학교 때 사용하던 책상보다 1.5배는
넓어보였고, 의자에도 시트가 달려있으며 칠판도 정말 넓었다.
면접을 보러 온 학생들은 하나같이 모범생같아보였고, 칼같은 자세로 앉아 시험을 치루었다. 당시 난 내 앞에 면접을 보러 온 친구에게
굉장히 기죽었었는데, 진짜 정말 완전 모범생같아보였기 때문에... 추후에 알고보니 그 친구가 우리 기수 수석 입학자였다..
뭐 어쨌든 그래서 갑자기 학교에 면접을 보러 오자마자 이 학교에 대한 정이 확 떨어졌다. 왜냐하면 하나같이 나보다 공부 잘할 것 같았기
때문...^^.. 입학해서 본전만 챙기고 괜찮은 기업 들어가서 효도하자는 생각이었는데, 이 친구들이랑 같이 있으면 완전 바닥에서 길 것만
같은 느낌이었다.
NCS 시험을 마치고 점심시간이 되었는데, 당시 코로나로 인한 문제도 있고 해서 점심은 각자 챙겨오는 것이었다. 근데 당시 너무 긴장했던
나는 까먹고 밥을 챙겨오지 않아서.. 그냥 있기도 좀 그래서 면접 준비하는 척 하면서 노트에 쓸데없는 낙서 끄적거렸다..
그렇게 면접 시간이 다가오고, 준비했던 질문들을 다시 생각해보며 면접실에 들어갔다. 면접은 생각보다 간단했는데, 커피챗 느낌이 아니라
준비된 질문에 제한 시간 동안 내 생각을 답하는 형식이었다. 내가 준비한 질문들과 너무 다른 질문들이 나와 정말 많이 당황했지만,
나는 숨을 가다듬고 생각을 정리하며 질문에 대한 답변을 하나하나 차례대로 했다.
딱히 특별한 사항은 없었고, 면접이 끝난 후 니코틴, 알코올 검사를 했다. 거기서 잘못 걸리면 퇴학처리한다고 그러더라.. 난 넘어갔다.
그렇게 집에 와서 머리가 엄청 띵해졌다. 그래서 갑자기 인문계 가고 싶어져서 학교에 가서 담임 선생님께 급하게 여쭤보았다.
붙어도 인문계 갈 수 있냐고... 그래서 알아봤는데 복학하면 갈 수 있다고 그러더라^^.. 눈물...
그렇게 마음을 다지고 "괜찮아! 얘네가 잘하니까 내가 배우면서 크면 되지!"란 마인드로 합격 결과를 기다리며 살았다.
합격했다. 딱히 감흥은 없었다. 붙어도, 떨어지더라도 별 감흥이 없었을 것 같다. 그렇게 붙은 겸 이제 열심히 살아가야겠다고 다짐했다.
하지만^^.. 당시 10월, 11월 즈음이었을까, 아무런 목표가 없었던 나는 친구들과 흥청망청 놀다가 2월 즈음에야 위기감을 느꼈다.
학생들의 패기에 한껏 주눅들어있었던 나는, 입학 전에 코딩을 미리 배워야겠다고 생각하고 여러 학원을 찾아보았다.
그렇게 알아본 곳이 HTML/CSS/JS를 가르치는 학원과 C언어를 가르치는 학원이었는데, 둘 다 수업을 한 번 들어보고 결정했었다.
먼저 간 C언어 학원은 동시에 학생들은 많지만 선생님 한 분이서 개별로 코치를 해주시는 알고리즘을 가르치는 학원이었고,
HTML을 가르치는 학원은 어눌한 대학생 정도 되어보이는 사람이 따라치라면서 코드를 따라치고, 설명하는 그런 맥없는 학원이었다.
그래서 난 C언어 학원만 꾸준히 다니기로 했고, 2월에서 3월 중순 약 두 달간 학원을 다니며 C언어를 공부했다.
그래서 학교에서 배우는 수업들은 전부 학원에서 배웠던 것들이었기에, 학원을 끊기 전까지는 C언어 수업만은 그리 벅차지 않았었다.
학교는 정말 신기했다. 아이들은 노는 아이들 없이 하나 다 착한 아이들밖에 보이지 않았고, 선배들은 정말 멋져보였다.
시설은 보았던 사진과 같이 정말 고급지고 세련되며, 배정받은 기숙사 방의 침대도 너무 푹신했다.
부모님 없이 룸메이트와 두 명이서 생활하는 점, 아침에 일어났을 때 낯선 천장이 보이고 기상송을 통해 일어나는 점 등,
내게 어색한 부분은 정말 많았지만, 그래도 더할 나위 없이 행복했다.
솔직히 말하면 정말 힘들었다. 정보처리산업기사 과정평가형 자격증을 이수하려면 500시간의 훈련시간이 필요했는데,
우리 학교에서는 내 기수인 2기를 대상으로 1학년에 500시간을 모두 채워 바로 자격증을 이수시키겠다는 계획이었다.
그래서 집에 귀가하는 금요일을 제외하고 월,화,수,목 빠지지않고 8교시부터 11교시까지 방과후 수업을 전교생이 이수했다.
오전 6시에 일어나 일과를 시작하고, 9시에 수업을 시작해 오후 9시까지 12시간 동안 수업을 들은 후, 오후 11시에 일과를 마쳤다.
진짜 정말 지옥같았는데, 수업이 쉽고 어렵고를 떠나 몸이 남아나질 않았다. 너무 피곤하고 힘들었으며, 주말에 오후 4시쯤
집에 도착할 때마다 잠깐 침대에 눈을 붙이고 뜨면 다음날 아침이 되기 마련이었다.
아는 친구가 한 명도 없는 새로운 환경에서 적응하고 새로운 친구를 사귀는 것조차 체력을 소모하는 일이었으며, 안전을 위해서 기숙사 복도에
CCTV가 설치되어있었기에 내가 친구들과 어떤 일을 하는지 다 감시받는다는 느낌이 들어 피곤하기도 했다.
3월달엔 개인적인 친구와의 문제로 인해 정신적으로도 힘들었으나, 4월달이 되자 한 달 쯤 이 생활에 몸이 적응하니 나름
정신도 차려지고 몸도 버틸만 했다. 코딩을 점점 배우니 소프트웨어공학적인 사고력이 내 머리에 들어와 안착하기 시작했다.
지금은 잘 이해가 안가지만 컴퓨터에 오라클을 설치할 때 정말 많은 시련이 있었는데.. 오류가 터지고 설치 프로그레스 바가 역주행하는 등
말도 아니었다. 그러던 중 블루스크린에 걸린 컴퓨터가 3시간 동안 조작해보았는데도 똑같은 스크린을 띄워 멘탈이 터져버린 상태였다.
당시 진짜 너무 화나서 노트북 360도로 접고 망치로 부순다음에 자퇴하고 싶은 마음이 들었는데, 그날 저녁 임베디드과의 한 선배님이
블루스크린이 뜬 이유를 분석해주시고 공장 초기화를 통해 내 노트북을 살려주신 다음, 오라클을 설치해주셨다. 진짜 사랑고백하고싶었다.
부산소마고에서는 여러가지 자격증을 학교에서 지원해주고 가르친다. 대표적으로는 SQLD, 정보처리산업기사, AZ-900등이 있다.
당시 1학년 4월 말 즈음에, AZ-900이라는 난이도가 낮은 클라우드 자격증을 학교에서 지원해주었고, 나는 코피가 나도록 밤을 새가며
미친듯이 공부를 했었다.
결과는 좋았다. 1000점 만점에 904점을 받았었는데, 받은 점수가 선배들까지 통틀어 1기, 2기 통합 전교 1등이었다.
904점이든 700점이든 똑같은 자격증이었지만, 이 학교에서 내가 노력해서 무언가를 이루어냈다는 점이 정말 뿌듯했다.
당시 C언어 수업시간에 한 달에 한 번 격으로 배웠던 개념들을 다루는 코딩 테스트를 한 시간마다 치루었다.
처음 코딩 테스트 수행평가를 치루었을 당시.. 나는 기억상 10문제 중 7문제 정도를 풀었던 것 같다.
코딩 테스트 1등을 정말 하고 싶었는데 3문제나 못 풀다니.. 자책하며 한 7~8등 정도 하겠구나 라고 생각했다.
그렇게 테스트가 끝나고 결과를 보니 1등이었다. 왜지? 약간 어리둥절하면서도 행복했다.
그 당시에는 내가 우러러보던 이 학교 학생들을 꺾었다는 사실이 너무나도 행복했던 것 같다. 그래서 당시
오만방자했던 그 우물 안의 개구리는 자신의 동네 친구들에게까지 자랑질을 하고 다니며 찌질한 삶을 살았다^^..
그 때도 내가 너무 오만방자했던 것 같단 생각이 들어서, 첫 수행평가 이후로는 딱히 남들에게 자랑을 하지 않고
언급하지도 않으며 1등을 했다는 티를 내지도 않았다.
그 후에도 1등을 유지하고 싶어 열심히 공부했고, 그렇게 1학년 동안은 코딩 테스트에서 한 번 2등한 것을 제외하고
반 내에서는 1등을 뺏겨본 적이 없었던 것 같다. 1학년 전교에서는 최종 2등 정도 했던 걸로 기억한다.
한번은 선생님께서 코딩테스트로 내신 12문제를 50분 중 20분을 남기고 다 푼 적이 있었다.
그 때 선생님이 나를 정말 이뻐하시며 손에다가 초코파이를 몇 개 쥐어주시고 나가서 놀다오라고 농담을 던지셨다.
그 후에도 학년 단위로 진행하는 알고리즘 대회에서 내 옆에 있던 친구와 호각을 다툰 끝에 1문제 차이로 1등을 따며
알고리즘에 대한 입지를 높였다. 다시 돌아보면 그 당시 내 자존감을 가장 많이 높여주었던 게 알고리즘이 아닐까 생각한다.
부산소마고에는 마이스터역량인증제라는 시스템이 있다. 짧게 요약하면 학교 생활을 잘하면, 즉 성적 잘 받고, 자격증 잘 따고,
교내나 교외 대회도 열심히 참여하고 하면 주는 점수인데, 생각보다 메리트가 크다. 학교에서 대표로 소수 인원을 선발해야할 때
기준표로 삼기도 하며, 2학년 때 과 선택을 할 때의 기준이 되기도 한다.
당시 중간고사가 끝났던 나는 친구들과 대회를 하나 나가보자는 생각이었고, 그 중 내 눈에 띈 게 자신의 고등학교를 소개하는
홍보 영상을 만드는 대회였다.
그때 매우 친하게 지냈던 친구와 편집을 정말 잘하던 친구 총 세 명이서 대회에 나갔고, 우리는 그 때 핫하던 아마존 익스프레스
아마존송을 패러디한 "소마고 익스프레스!"라는 제목으로 영상을 제출했고, 최우수상을 탔다.
기말고사가 끝난 7월달 즈음에는 방과후에 듣던 웹 수업을 시작으로 프론트엔드에 관심이 생겨 자바스크립트를 깊게 파기 시작했다.
노마드코더의 무료 강의들을 챙겨보며 모멘텀과 그림판을 만들어보고, 토이 프로젝트로 팝캣을 패러디한 내 캐릭터를 넣은 팝빈을 만들었다.
조금 더 크지만 간단한 프로젝트를 해보고 싶었던 나는 위의 대회에 같이 나갔던 친한 친구에게 프로젝트를 추천받았는데, 바로 도박 게임이었다.
보통 도박 게임들 중에서도 간단하지만 재미있는 게임들이 많았기에, 나는 그 중에서도 하이로우라는 게임을 웹으로 구현해보아야겠다는 생각을 했다.
하이로우는 처음 한 카드를 보여주고, 그 다음 나올 랜덤한 카드의 숫자가 보여준 카드보다 높은지 낮은지를 베팅하는 간단한 게임이었다.
여러 우여곡절 끝에 게임을 만들었고, 조금 비효율적이지만 당시 500줄 정도의 자바스크립트 코드를 짰다.
진짜 빙산의 일각..? 아니 일각도 안되는 수준의 프로그래밍이었지만 나 자신이 500줄을 작성해 이런 프로그램을 만들었다는 뿌듯함으로 인해
그 때부터 프론트엔드 개발에 두 발을 모두 딛게 되었던 것 같다.
여름방학 때는 공부했던 JS를 필두로 리액트와 타입스크립트, 알고리즘을 공부했다. 당시 딱히 친했던 선배가 없었던 나는 모든 개념들을 인터넷을
찾아보며 혼자 숙지해야했고, 같이 프론트엔드를 공부하던 한 친구는 좋은 선배가 있는 동아리에서 꾸준한 지원을 받고 있었기에 당시 많이 부러워했었던 기억이 난다.
프론트엔드 입문 강의는 노마드코더만한 강사가 없는 것 같았다. 강의를 쭉 보며 영화 서비스를 리액트로 만들어보고, 파이어베이스를 통해 유사 백엔드를 구성해
익명으로 사이트에 메세지를 남기는 어플리케이션을 타입스크립트와 섞어서 만드는 등 여러가지 프로젝트를 강의를 보며 따라해보았다.
여름방학이 끝나자, 나름 공부했던 것들이 빛을 발했다. 다들 나같이 공부한 줄 알았으나, 막상 전교생 64명 중 프론트나 백엔드를 열심히 공부했던 사람은
10명도 채 되지 않았던 것 같다. 그 때, 선배들을 필두로 운영하던 동아리에 1학년들이 적절히 가입하여 목요일 방과후마다 동아리 활동을 진행했었다.
나를 포함한 1학년 동아리원은 6명, 2학년 선배님들은 4명 총 10명이었다. 그 때 나름 실력 있는 동아리인 'T자형 인재'라는 동아리에 가입했었는데,
우리가 리액트 조물조물거리면서 아장아장 걷고 있을 때, 선배들은 화상통화를 지원하고 채팅을 지원하는 협업 플랫폼을 만들고 있었다.
그래서 당시 멘토 선생님의 판단 하에 1학년은 1학년들끼리 따로 프로젝트를 만들어보자고 했고, 그 때 만들어보자고 이야기 나왔던 프로젝트가 대나무숲이었다.
지금 보았을 때는 일주일 안에도 완성 가능한 조그마한 프로젝트지만, 당시에는 내 첫 프로젝트이기도 하고 굉장히 대나무숲이라는 시스템이 크게 다가왔다.
관건은 백엔드였는데, 백엔드가 인스타그램 그래프 API를 사용해서 웹사이트에 글을 수락하면 인스타그램 공식 계정에도 자동으로 글이 올라가는 기능을 구현해야했다.
나는 프론트엔드를 맡았기에, 열심히 디자인을 한 다음, 퍼블리싱을 진행하고 틀을 만들어갔다.
당시 리액트를 할 줄 아는 사람이 1학년 6명에서 프론트엔드 3명 중 나 혼자 밖에 없었기에, 딱히 지정하진 않았지만 내가 리더가 되어 친구들을 끌고 나갔던 것 같다.
당시 학교에서 학생들에게 수험료를 지원해주며 TOPCIT 시험을 지원했던 적이 있는데, 하필 대나무숲 개발 기간과 겹치는 바람에 시험을 노쇼했던 적이 있다.
대나무숲 개발이 거의 끝자락을 달릴 때 오후 7시부터 앉아서 새벽 4시까지, 총 9시간 동안 쉬지 않고 백엔드 친구와 디스코드를 하며 개발을 진행했다.
당시 협업 방식이 정말 웃겼는데, CORS 설정을 제대로 잡지 못해서 기능을 만들어 git push하면 AWS 서비스에서 풀해서 배포하고, 배포한 사이트를 확인하는
정말 어이없고 웃긴 방식으로 협업을 했었다. 당시 내 커밋이 기하급수적으로 늘어난 이유도 이 때문이다.
API를 처음 핸들링해보았던 나는 정말 애를 먹고 스트레스를 받아가며 백엔드 친구와 사소한 말싸움을 계속 벌이며 프로젝트를 진행했던 기억이 난다.
그렇게 새벽 4시까지 퀭하게 서비스를 완성했다. 허나 디스코드를 하던 동아리원은 총 나 포함해서 두 명이었다.
백엔드 3명, 프론트 3명으로 분배했으나, 결국엔 한 명이 거의 모든 작업을 하는 협업 부재 이슈가 발생하게 되었고, 레포지토리의 600커밋 중 내가 한 커밋만
570커밋에 달하는 불상사가 발생하게 되었다. 심지어 20커밋 정도는 백엔드 친구가 API 설정해준다고 한 커밋이었으니..
그 땐 정말 동아리원들이 미웠지만, 오히려 전화위복이 되지 않았을까싶다. 그 때 내가 그 서비스의 3분의 1만 개발했다면, 지금처럼 계속 개발에 대한 열정이 있었을까.
그렇게 인스타그램 홍보를 통해 공식적으로 대나무숲을 배포하고 서비스 출시를 알렸다. 서비스는 별 탈 없이 잘 작동이 되었다.
허나 정말 실망했던 점은, 학생들이 대나무숲을 용도에 맞게 사용해주지 않았다. 딱히 대나무숲에 올라오는 제보가 많지도 않았는데다가,
대부분 모두 한 줄에서 두 줄 정도 하는 장난스러운 글 뿐이었다.
서비스를 살리기 위해 일부러 익명의 학생인 척, 대나무숲에 걸맞는 글을 제보하고 아닌 척 했던 적도 있다. 그렇게 열심히 만든 서비스였는데,
사용률이 매우 저조해 그 때 엄청나게 실망하고 슬럼프가 찾아왔다.
당시 1학기와 여름방학 때 만들었던 내 프로젝트를 우연히 교무부장 선생님께서 보시고, 나에게 입학설명회 도우미를 하는 것이 어떻겠냐고 말씀하셨다.
간단하게 입학설명회에 참석한 학생과 학부모들에게, 어떤 서비스를 개발하고 만들며 공부했는지를 짧게 5분 정도로 PPT로 발표하는 일이었다.
학교의 대표가 된 것 같아 정말 기분이 좋았고, 그렇게 난 4번의 입학설명회 중 3번을 참여해 학생과 학부모들 앞에서 나의 토이 프로젝트들과 공부한
것들을 발표했었다.
대나무숲을 개발한 후로, 프로젝트를 내가 원하는 친구들과 해보고 싶었다. 정말 공교롭게도 나와 친하게 지내던 나 포함 4명의 절친들은,
두 명이 백엔드 개발을 공부하고 있었고, 나 포함 나머지 두 명이 프론트엔드 개발을 공부하고 있었다.
당시에 하도 이상한 사건이 많았던 우리 학교에서, 친구들과 교내 위키를 만들자는 이야기를 했다. 학생과 선생님, 학교에서 일어나는 사건사고를
학생들이 자유롭게 편집할 수 있는 위키를 만들어서, 이상한 짓 하는 친구들 다 박제시켜버리자고...
그 당시에, 기숙사 입소를 막 했을 일요일 저녁, 한 친구가 자신의 여자친구와 기숙사에 들어가있어야할 저녁 8시 즈음에 교실에서 불을 꺼놓고
교실에 들어가자 숨어버리는 의심을 살 만한 행동을 했던 적이 있다. 물론 자초지종을 듣고보니 그냥 교실에서 대화하다가 사람이 오길래 놀래서
불 끄고 숨었다고 이야기했다. 그 때부터 "어?? 너 부마위키!"라는 말이 유행했다. 친구들도 다 어떤 친구가 이상한 발언이나 행동을 할 때마다
"어??? 너 부마위키!!!!"라고 이야기했고, 우리에게 빨리 만들어달라는 요청이 많이 있었다.
그렇게 우리는 장난스레 말하던 부마위키를 실제로 개발하기로 마음먹었다.
프론트엔드는 디자인을 시작하고 백엔드는 ERD와 도메인을 분석하고 기획하며 프로젝트가 시작되었다.
대나무숲은 비교도 안되는 대형 프로젝트에 백엔드도, 프론트엔드도 서로 "이걸 어떻게 개발하지..?"라는 생각에 차 넋이 나가 있었다.
우리가 막혔던 부분은 버전 관리 시스템이었다. 미연에 사고를 방지하기 위해서 누가 어떤 내용을 편집했는지를 보여주는
버전 관리 시스템이 필요했는데, 도대체 이를 어떻게 효율적으로 구현하냐는 것이다. 그래서 처음에는 깃허브를 이용해 문서가 편집될 때마다
셸스크립트로 커밋을 시켜 관리를 하자는 의견도 있었고, 깃 비슷한 시스템을 만들어 그 시스템을 돌리며 관리하자는 의견도 있었다.
그렇게 이건 불가능한 프로젝트라고 단정지어가며 전의를 상실하던 그 때...
그냥 무지성으로 데이터베이스에 박으면 되는 거였다!!!! 그렇게 개발을 다시 시작했다.
솔직히 말하면 CRUD가 다인 서비스이다. 근데 그게 엄청 큰 CRUD ^^.. 그 때 난 아직 숙련되지 않은 리액트 쿼리나 타입스크립트, 리코일 등을
프로젝트에 적용시켜보며 실험적인 개발을 진행했다. 그렇게 친구와 열심히 개발을 진행했고, 동아리 예산으로 라떼판다를 구입해 AWS 대신 온프레미스
서버를 구축하여 부마위키를 서버 위에 올렸다. ssh로 접근해서 서비스를 제어하고 하는 식으로 위키를 구동시켰다.
그렇게 400커밋 정도로 부마위키가 완성되었고, 배포했다. 친구들에게 사용해달라고. 나름 기대했지만, 결과는 역시나 절망적이었다.
나와 친한 친구들만 부마위키를 사용하고, 실제 사용자는 6명 정도 채 되지 않았다. 너무 슬펐다. 진짜 열심히 만든 프로젝트였는데..
그래도 열심히 홍보를 한 탓에 같은 학년엔 사용자가 꽤 늘어 10~15명 정도 부마위키를 사용했고, 전교생들에게도 인지도는 높아진 상황이었다.
나름 비어있던 문서들이 채워질 즈음... 갑자기 데이터베이스가 자고 일어나니까 흔적도 없이 삭제되었다. 백엔드 친구들과 프론트엔드 친구들 모두
너무 당황하며 이게 무슨 일인지 이유를 찾았다. 근데 진짜 이유가 없었다. 그냥 귀신처럼 싹 사라졌다. 누가 해킹해서 털어간거 말고는 설명이 안됐다.
그래서 전의를 상실한 부마위키 개발 팀은 모두 멍을 때리고 각자의 방식으로 멘탈을 치유했다. 자세한건 부마위키 사건에 기재되어 있다..
2월 20일 즈음, 서비스에 결함 등을 수정함과 동시에 베타테스트를 끝내고 다시 정식으로 서비스를 출시했다.
다시 출시하자 더 사용해주는 사용자들이 없었다^^... 그렇게 슬픈 마음으로 학교에 등교했다.
당시 방송부였던 나는 선배와 동아리 시간에 여러 이야기를 나누던 중, 부마위키에 대한 이야기가 나왔다.
그래서 나는 선배들이 부마위키 안써줘서 엄청 서운하다고 약간 찡찡 아닌 찡찡으로 찡찡댔다.
착하신 선배님은 기분이 나쁘셨을 법도 한데 "알았어^^.. 써줄게^^..."라며 한 마디 던지셨고, 물론 빈 말인 줄 알고 있어
별 기대는 안했다.
그런데 그것이 실제로 일어났습니다. 그 선배님이 정말로 선배님들에게 부마위키를 알려 붐을 오게 만드신 것이었다.
갑자기 사용자 수가 급증하고 선배들의 문서가 꽉꽉 채워지며 부마위키가 되살아나며 교내 최고 인기 서비스로 급상승했다.
당시 수업 시간에도 부마위키 글이 올라왔으며, 여러가지의 사건/사고들이 즐비했을 정도이니... 당시 조회수도 일주일에 61000회를 찍는 등
진짜 미친듯한 성장을 보여주었다.
그렇게 프로젝트를 끝내고 나서, 2학년이 되었다는 것을 비로소 직감했다. 신입생들이 학교에 들어오고, 처음 보는 선생님들도 많이 들어오셨으며,
듣던 수업들의 구조도 많이 바뀌어있었다. 또 1학년 때는 내가 정말 작은 일만 해도 잘한다 잘한다 해주시던 선생님들도 나를 보면 성적을 챙겨야한다,
알고리즘 공부를 해야한다, 프로젝트를 더 많이 진행해야 한다 등 나에게 여러가지를 요구하셨다. 비로소 계속 그런 말들을 듣고, 공부하는 수준이 높아졌다는
점도 직감하니 진짜 취업이 얼마 안남았다는 것을 직감하게 되었다.
이제 우리 학년이 2학년이 되었으니, 전공동아리를 새로 개설해야했다. 나는 그 전에 속해있던 동아리인 T자형인재의 선배 한 분이 만드셨던 BSM이라는 서비스에
눈독을 들이고 있었다. BSM은 마이스터역량인증제나 급식, 시간표, 게시판 등 학교와 관련된 모든 학생들의 정보를 관리해주는 대형 서비스였다.
이 서비스를 물려받아 내가 코드를 직접 리팩토링해보고 싶다는 의지가 매우 강했다. 그렇게 나는 친구와 함께 선배들에게 찾아가 협상을 진행했다.
3학년이신 선배들께, 곧 취업을 나가시는데 마땅히 서비스를 물려받을 학생들은 없지 않냐는 것을 필두로, 2학년이 동아리를 만들테니 이 동아리에 BSM을 관리할
권한을 주신다면 더욱 좋은 서비스를 만들겠다는 협상이었다.
선배는 조금 생각해보신다고 했으며, 선배들의 생각은 약간 달랐다.
선배와 친하시고 기술력이 좋으신 자기자신을 포함한 6명의 선배님들과 같이 동아리를 만들어, 다른 소마고의 유서깊은 동아리처럼 동아리를 물려주고 싶다는 생각이셨다.
그래서 우리는 그 동아리를 우리 명의로 이름만 넣어 전공 동아리로 등록한 후, 같이 활동을 하는게 어떻냐는 제안을 하였고 제안이 받아들여졌다.
조건은 선배들이 동아리명을 짓는다는 조건으로. 그렇게 INSERT라는 팀이 개설되었다.
그렇게 인서트가 개설되고 나서 학교의 거의 모든 시스템이 한 동아리로 통합이 되었다. BSM, 포트폴리오 사이트, 대나무숲, 부마위키 등.
이런 여러가지의 대형 서비스들을 관리하기 위해서 동아리원 10명이 같이 모여 계속 꾸준히 동아리 시간마다 회의를 진행했고, 그렇게 어느정도
서비스들을 언제 어떻게 리팩토링하고 운영할지에 대한 여러가지의 방안과, 기술적인 부면에서도 워크플로우와 아키텍처 등을 정했다.
전공동아리 발표회를 진행할 당시, 13개 정도 되는 동아리들 중 유일하게
우리 동아리만 멘토 선생님들의 질문이 하나도 없었다.
진행하시는 선생님께서 "질문 있으신가요?"라고 했을 때 5초간 정적이 흐르자
전교생들이 "오오오~~~"하며 감탄을 내질렀다. 기분이 정말 좋았다.
뭐 잘해서라기보단, 기존 서비스를 유지보수하고 기능을 추가한다는 점에 있어
질문이 없는 것도 있었다. 새로운 서비스를 만든다 했으면 공격을 받았겠지..?
그러던 도중 갑자기 교감 선생님께서 손을 번쩍 들고 우리에게 질문하셨다.
만약 이 서비스들을 코드 그대로 후배들에게 물려줄거냐고. 우린 그렇다고 대답했고,
교감 선생님께서는 "1학년 여러분 그렇답니다 이건 박수쳐야돼요~!!"라고 띄워주셨다.
당시 너무 얼떨떨했던 탓에 선명하게 기억은 남지 않지만, 어떻게 보면 화려한 데뷔였다.
부마위키는 당시 리액트로 만들어져있었기에 리팩토링이 필요했다. 위키 서비스 특성상 SEO가 가장 중요한데 CSR을 쓰고있다는 점이 참 역설이었다.
그래서 나와 내 친구는 선배님의 도움을 받아 넥스트로 프로젝트를 리팩토링했다. 처음 리팩토링할 당시에는 그냥 넥스트로만 프로젝트를 옮기고 말자
라는 생각이었는데, 당시 선배가 리뷰하신 부마위키의 코드는 나름 충격적이었다. 지금 생각해보면 정말 더럽고, 많이 엉켜있는 부분이 많았다.
그런 부분들을 싹 도려내고 추가적으로 더 좋은 서비스를 관리해주는 라이브러리들을 배우고 사용해보며 부마위키의 코드가 안정화되었다.
넥스트로 서버를 돌리니 CSR일 때보다 렌더링 속도도 빨라져 사용자 경험도 개선하는 계기가 되었다.
당시 SSG로 서비스할지 SSR로 서비스할지 굉장히 고민했었는데, 위키의 문서가 잘 수정이 되지 않냐는 선배의 조언을 듣고 문서의 대부분은
SSG로 서비스가 되었다. 따로 Node.JS 코드를 작성해서 문서가 생성/수정될 때마다 revalidate를 해주는 로직을 통해 SSG를 SSR처럼
효율적으로 사용했다.
리팩토링이 끝난 부마위키 V2는 정말 만족스러웠고, 내 실력도 코드 리뷰를 받은 만큼 부쩍 늘어난게 보였다.
작년에는 아는 선배가 없어 혼자 공부를 했었는데, 배울 수 있는 선배가 한 분이라도 있으니 이렇게 실력이 단기간 내에 빠르게 늘어난다는 것을
느끼고 약간 또 1학년때의 내가 생각나서 약간 또 서럽고 울컥해졌다.
대형 서비스가 너무 많은 데에 비해, 3학년 선배님들이 취업을 통해 학교를 나가시게 되면 우리 4명이서 큰 대형 서비스들을 다 관리해야했다.
인력 부족으로 인해 우리는 신입생 중에서 빛이 나는 원석들을 인턴으로 뽑아 가르친 다음 동아리원으로 투입시키자는 생각을 했다.
그래서 우리는 인턴 모집을 진행했고, 당시 동아리발표회에서 나름 선방한 발표를 진행해 인기있었던 동아리..?였지만 64명 중 12명 정도밖에
지원하지 않아 약간 실망했던 감도 없잖아 있었다.
그 중에서 정말 지원서에서 혼자 빛이 나던 친구 한 명과, 혼자서 자기소개 웹사이트를 열심히 만들고 깃허브에 꾸준히 커밋도 하는 한 명이 눈에 띄었다.
대면 면접을 통해 12명을 면접보았고, 면접을 본 이후로도 마음에 딱히 변동이 없어 프론트엔드는 그 두 명을 채용해 총 백엔드 2명, 프론트 2명으로 인턴은 4명이 채용되었다.
이 친구들에게 어떻게 코딩을 가르쳐야하나 우리는 매우 고민했고, 고민 끝에 미션을 내주자는 생각을 했다. 부끄럽지만 우아한코스처럼,
미션을 내준 다음, 제출한 코드를 리뷰하여 실력을 두 배로 올리는 그런 전략이었다.
프론트엔드는 첫 미션이 인스타그램 클론코딩이었는데, 우린 아직 1학년들의 수준을 모르니 맛배기로 HTML과 CSS 공부해서 오세요! 라는 미션이었다.
기한을 정하는 게 정말 어려웠는데, 그래서 우린 우리가 만든 미션을 타이머를 키고 나 포함 내 친구 두 명이서 직접 미션을 수행했다.
그리고 둘 다 비슷하게 대략 1시간 20분정도 걸린 것을 보고, "대충 일주일 주면 넉넉하겠네!" 라고 생각하고 미션을 냈다.
그런데 후에 이야기를 들어보니 진짜 너무 힘들었다면서.. 심지어 이 친구들이 풀리퀘스트를 처음 해보아서 미션은 수행했는데 깃허브를 어려워해서
미션 제출 기한을 넘는 경우가 있었다. 그 때 난 이걸 왜 못하지..라는 생각에 사로잡혀 열심히 하겠다고 다짐했던 친구들인데 첫 번째 미션도 수행하지
못한다는 점에 있어서 약간 화가 났다.
나중에 조금 아이스브레이킹을 한 후 친해졌을 때 이야기를 들어보니 진짜 눈물흘리면서 코딩했다고 너무 빡셌다고 그러더라... 그때부터 미션에 설명들을 넣었다.
어떤 강의를 들으라고 두루뭉슬하게 이야기하기보다는, 직접 우리가 가진 지식으로 강의 예제들을 손수 하나하나 다 작성해서 미션과 함께 넣어둔 것이었다.
미션을 만들면서도 다시 한번 내가 가진 개념들을 머릿속에서 정리하는 계기가 되었다. 사실 너무 기초라서 이렇게 말할 수 있을 만큼 딱히 도움되진 않았는데,
그래도 안하는 것보단 나았다.
인턴들은 우리가 놀라울 정도로 기하급수적으로 성장했고, 코드도 정말 질이 높은 코드를 작성해 두 번째 미션에서는 정말 놀랐었다.
첫 번째 미션에서는 평균 코드 리뷰 수가 40개였는데, 두 번째 미션에서는 14개, 세 번째에서는 6개, 네 번째에서는 5개 이런 식으로 점점 리뷰 수가 줄어들었다.
물론 애들이 너무 힘들어하길래 사소한 것들은 안 건드린 것도 있지만, 그래도 정말 대단한 속도로 내용들을 배워갔다.
그렇게 이 친구들은 약 한달 반 만에 아무것도 모르던 상태에서 리액트와 타입스크립트를 다룰 수 있게 되었고, 1학년에서 프론트 잘하는 애 이야기하면 다섯 손가락에
꼽을 정도로 커져 있었다.
너무 뿌듯했고, 기말고사가 끝나면 실제로 서비스들 중에서 작은 부분들을 직접 맡길까 생각 중이다.
이렇게 약 1년 반 동안 소마고를 다니다보니, 여러가지 생각이 들었다. 막상 내가 이렇게 여러가지의 프로젝트를 개발하고 리팩토링했는데도,
성적은 좋은데 코딩을 포기한 친구보다 취업의 폭이 좁다는 점이 너무 속상하고 나를 힘없게 만들었다.
나도 처음부터 코딩을 포기하고 성적만 챙겼다면 어땠을까라는 생각이 들기도 했지만, 이 회고록을 쭉 써내려가보니 나름 괜찮고 재밌는 인생이었던 것 같다.
1학년 때는 학교가 안좋다며 정말 학교 욕을 많이 하고 살았으나, 2학년 때는 해탈의 경지에 이르렀는지는 잘 모르겠으나, 학교를 굉장히 긍정적으로 바라보고있다.
사실 내가 학교를 욕한다고 해서 나에게 득이 될 것도 없다. 그래서 지금 학교를 욕하고 있는 1학년들을 보면 약간 안쓰러워보이기도 한다.
결국 사람이 모든 것들을 잘할 수는 없지만, 난 이런 학교에서는 하나를 정말 특출나게 잘하거나, 또는 성적, 코딩, 알고리즘 등을 균등하게 모두 잘하는 것이 제일
베스트라고 생각한다.
기술 스택을 공부한다고 시험 공부를 버렸던 과거의 내 모습을 생각하니 약간 오만한 것 같았다. 하지만 딱히 그 행동을 후회하진 않는다. 그로 인해 얻은 것들이
단순히 생기부에 찍히는 딱딱한 숫자들보다는 훨씬 가치있기 떄문이다.
코딩도 좋지만, 취업을 위해서 시험공부도 열심히 해 성적을 어느정도 챙겨볼까 한다. 그 후에 시험기간이 끝나면 내가 원하는 여러가지의 프로젝트들을 관리하고 진행하며,
행복하게 협업하는 그런 삶을 반복하며 살아가고 싶다.
좋은 기업, 돈 많이 주는 기업, 유명한 기업을 가지 못하더라도, 나는 영원히 행복하게 개발하고 협업하는 그런 기업들에만 있고 싶다.
물론 사회가 내 말대로 그렇게 호락호락하진 않겠지만, 그런 어떻게 보면 소소하고 어떻게 보면 정말 큰 꿈을 위해 난 계속 달려나갈 것이다.
결국에 나는, 남이 아닌 내가 객관적으로 나를 바라보았을 때 성공한 인생을 사는 사람이 되고 싶다.
이 글을 보는 모두가 각자 자신이 원하는 목표를 이루고 성공하기를 바란다. 화이팅.