들어가기에 앞서
3월 어느 날, 친구가 나에게 와서 말했다.
"나 파이썬 코드 공유 사이트 만드려고"
서비스를 만들게 된 계기
대구소프트웨어마이스터고등학교 1학년은 정규 시간에 파이썬 과목을 이수한다.
파이썬 수업 시간에는 조건문, 반복문, 클래스 같은 기본 개념을 배우고, 선생님이 내주신 문제를 푼 뒤 구글 클래스룸에 본인이 푼 코드를 올리고 발표하는 방식으로 수업이 진행된다.
하지만...
코드를 구글 클래스룸에 올리려면 파일로 제출해야 하고, 문법 하이라이팅도 안 되고, 폰트 사이즈 조절도 안 돼서 여러모로 불편함이 많았다.
이렇게 불편함을 느끼던 어느 날, 대소고 1학년 짱짱맨 대형이가 나에게 와서
"파이썬 코드 공유 사이트를 같이 만들어볼래?"
라고 제안했다.
나 역시 수업 시간에 같은 불편을 겪고 있었고, 이론 공부에 약간 지쳐 있던 터라 프로젝트를 하면 분명 재밌을 것 같아서 바로 수락했다.
내가 맡은 역할
팀원은 총 3명, 프론트 1(본인), 백엔드 1, 디자인 1명으로 시작했다.
기획의 시작
3월과 4월 초에는 학교 행사도 많았고, 4월 말엔 시험기간이라 프로젝트를 잠시 미뤄둘 수밖에 없었다.
하지만 5월 3일 시험이 끝나고, 바로 다음 날인 5월 4일부터 본격적으로 기획을 시작했다.
프로젝트명은 코드를 공유한다는 의미로 Sh4re!로 결정!
간단한 서비스 소개도 작성하고,
구현할 기능도 정리했다.
개발 시작
개발을 시작해서 뷰를 만드는 중, 첫 번째 큰 문제를 만났다.
바로 코드 하이라이팅을 어떻게 할지였는데, 구글링을 해보니 highlight.js라는 라이브러리가 있어서 언어와 코드만 입력하면 자동으로 하이라이팅이 되어 완전 편했다.
자동 변환 개쩜
두 번째 문제는 ‘로그인 페이지를 어떻게 구현할 것인가’였다. 리액트 같은 라이브러리 없이, 순수 HTML과 JS로 만들기로 해서 고민이 많았다.
결국 모달 창 형태로 구현하기로 하고, 쿠키를 활용해서 로그인 상태를 유지하고, 로그인/회원가입/로그아웃 같은 주요 동작을 처리했다. 헤더와 모달의 상태도 동적으로 업데이트하는 구조로 만들었다.
기능 개발에 집중하던 중, 서버 담당 친구에게 서버비가 무려 한 달에 6만 6천원이나 나온다는 이야기를 들었다.
비싸지만 투자라고 생각하고 반띵했다. ~~나중에 매우 오버스펙이였다는걸 들었지만..~~
실사용??
개발을 이어가던 중 선생님께 “제가 친구랑 이런 서비스 만들고 있는데, 수업시간에 쓰면 편할 것 같지 않나요?”라고 물어봤더니
“원래 코드 공유 방식이 너무 불편했는데, 완성되면 충분히 쓸 수 있겠다!”라는 긍정적인 답변을 받았다.
그래서 개발 속도를 높이기 시작했다.
우리 서비스의 주요 기능인 코드 공유와 발표는 진도 나갈 때만 쓸 수 있는 구조라, 파이썬 문법 진도가 얼마 남지 않은 상황에서 최대한 빨리 끝내야 1~2주라도 수업에 활용할 수 있었다.
그래서 기존 일정과 할 일의 우선순위를 뒤로 미루고, 일주일간 쉐어 개발에만 시간을 썼다.
서버 친구와 5월 11일부터 18일까지 집중 개발 기간을 잡고 모든 시간을 쏟아부었다.
학교 커밋 랭킹을 보니 우리가 나란히 1등, 2등을 차지했다
프로젝트에 미친 1학년 둘
평일에는 수업시간, 쉬는시간 가리지 않고 개발했고,
주말엔 17시간 동안 밥 먹는 시간 빼고 개발만 했다.
그렇게 완성된 서비스는...
이런 다양한 기능들을 갖추게 됐다.
이 외에도 티처 페이지, 유저 페이지를 만들었고, 서버 친구가 시간이 남아서 코멘트 기능까지 구현해줬다.
서비스 소개
개발이 끝난 뒤 1학년 반을 돌며 서비스 소개도 했다.
1학년들의 반응은 생각보다 좋았고,
깃허브 ⭐️도 무려 17개나 받았다!
드디어 실사용!
이 때 기분이 정말 좋았다.
내가 만든 서비스가 실제로 사용되다니...
두 번의 수업 후 DB에 코드가 200개나 쌓였다.
마무리하며
이 프로젝트를 시작하기 전엔 내가 뭘 배우는지도 잘 모르겠고, 이 길이 과연 내게 맞는지 고민도 많았다.
그런데 직접 무언가를 만들어보고, 그 결과물을 친구들이 실제로 사용하는 걸 보니 정말 뿌듯하고 재밌었다!
개발 잘하는 서버 담당 친구 덕분에 서버와의 통신, DB 다루는 법, 협업 방식, SEO 등 이론으로만 접했던 다양한 것들을 직접 경험할 수 있었다.
V1 그 이후
몇 차례 실사용 후, 선생님께서
“아이디어가 너무 좋아서 다른 학교 선생님들도 쓸 수 있게 개발해보면 좋겠다”
라는 피드백을 주셔서 V2 개발을 시작하게 되었다.
V1을 만들며 정말 많은 걸 배웠지만, 시간에 쫓겨 개발하다 보니 라이브러리 없이 HTML과 JS만으로 구현해야 했고, 한계도 많이 느꼈다.
모든 기능을 한 페이지에 몰아넣으니 컴포넌트 단위로 코드를 나눠야겠다는 필요성을 엄청 절실히 느꼈고, 코드 재사용성도 많이 떨어졌다.
V2는 프로젝트 규모가 더 커질 예정이라 오류가 많은 JS 대신 타입 안정성이 더 좋은 TypeScript를 도입하기로 했다.
그래서 V2는 React, Styled-Components, TypeScript를 활용해서 훨씬 체계적이고 안정적으로 개발할 예정이다.
Sh4re!가 더 궁금하다면?
개발자가 궁금하다면?
52개의 댓글
좋은 글 잘 읽었습니다!
사용자 피드백을 받고, 없는 데이터 박박 긁어가며 제품을 개선해나가는 과정은 정말 재미있는 것 같아요
저도 같은 관점에서 대나무숲을 개발했었고, 실제로 취업 단계에서 큰 도움이 됐었거든요
잘만 만든다면 학생 모두가 유저가 되는 환경이라 제품 만들기엔 너무 좋은 환경인 것 같아요
앞으로도 멋진 제품 많이 만들어주세요 화이팅!
Bothbest is a FSC certified bamboo factory based in China starting the manufacturing since 2001, mainly supplying bamboo flooring, bamboo decking and bamboo plywood.
와우 정말 대단하네요... !!! bbb 잘 읽었습니다.
앞으로도 사용자 의견 받아서 요구사항 분석하고 그런 식으로 운영하시면 나중에 귀중한 자산이 될 거 같습니다.~~ 응원합니다!
추신:
게시글 들어가서 하트 수 0일때 클릭하면 옆 버튼이 살짝 밀려납니다.
하트 수가 3일 때도 비슷한 이런 버그(?)가 있는 거봐선, 아마도 Proportional Spacing 현상 때문에 그런 거 같네요. like-box의 CSS에서 padding이나 gap 등을 살펴보시면 좋을 거 같습니다.
사랑해 근영아