나의 첫 웹프로젝트, humans of 42 홈페이지 제작기(1)

 

humansof42.com 이라는 웹사이트를 운영하고 있다. 나의 첫 웹프로젝트였으며, 42서울 사람들의 이야기를 담는 인터뷰 채널이다. 기획 단계에서부터 지금까지 약 반년이라는 시간이 흘렀다. 개발한 시간 2개월, 운영한 시간 4개월 정도. 매주 한건의 인터뷰를 발행하고 있고, 이 콘텐츠를 위해 참여하고 있는 팀원은 9명으로 늘어났다. 그간의 과정을 기록해보려 한다.

 

💪 시작

시작은 42에서 채워주지 못한 것을 해봐야겠다는 생각에서였다. 42에서는 주로 C/C++로 로우한 레벨의 프로젝트를 한다. 공식적인 교육과정 상에서 웹프로젝트를 경험할 수 있는 건 공통과정의 마지막에서다. (지금은 웹피신이 생겨서 일찍 경험해볼 기회가 만들어지긴 했지만 그 당시에는 그랬다.) 그러니까 교육을 시작하고 1년 6개월쯤 웹프로젝트를 한다는 건데, 그때 웹개발을 해본다는 건 너무 늦다는 판단이 들었다.

42의 본과정을 병행하면서 웹 프로젝트를 사이드프로젝트로 하기로 마음 먹고 아이템 선정에 들어갔다. 선정할 때 고려한 것들은 이렇다.

• 내가 재밌는 것
• 너무 어렵지 않은 것
• 실제로 유저들이 발생하는 것

일단 내가 재밌는 것. 나는 사람들의 이야기를 듣고 정리하는 걸 좋아한다. 이전 직업으로 하던 일이기도 하기에 익숙하기도 하다. 이런 일을 하기에 42는 정말 좋은 곳이다. 입학에 나이, 학력 등등 아무런 제한 조건이 없기 때문에 다양한 사람들이 모여있다. 이런 사람들의 이야기를 전하면 얼마나 재밌을까. 이런 생각에 '인터뷰'라는 콘텐츠를 떠올렸다.

너무 어렵지 않은 것. 처음 해보는 웹프로젝트인만큼, 도전적인 것을 하기보다는 익숙해지는 데 주안점을 뒀다. 이 기준은 언어와 프레임워크를 선택하는 데 큰 영향을 미쳤다. 이전에 Go로 restful api를 만드는 프로젝트에 발을 담궈본 적이 있었는데, 레퍼런스 자체가 많지 않고 거의 공식 문서에만 의존하다보니 여간 힘든 게 아니었다. 이 때의 경험을 떠올리며 사람들에게 진입장벽이 낮아서 이미 레퍼런스가 많은 언어와 프레임워크인 Python과 Django를 택했다.

또한 복잡하고 다양한 기능은 그만큼 설계할 때 고려해야 할 것이 많기 때문에, 심플한 모델을 가져가고 싶었다. 이 관점에서도 '인터뷰'를 연재하는 웹사이트는 적합했다. 모델 자체는 모든 언어들이 기본적으로 가지고 있는 예제인 '게시판' 만들기와 다르지 않았기 때문이다.

지속적으로 유저를 끌어당기기도 적합했다. 현재 본교육에 참여하고 있는 교육생(카뎃)은 900여명이다. 이들을 타겟 독자로 삼을 수 있다. 실제로 현재 홈페이지의 주 사용자는 42서울 내부 인원이고, 주당 평균 200명의 유저가 방문하고 있다.

 

 

🖋 준비

당시 나는 C만 배워왔던 입장이어서 웹프로젝트에 대한 지식이 전무한 상태였다.

앞선 기준에 따라 프로젝트의 언어와 프레임워크를 Python과 Django를 택하고 나서, 알아야 했던 건 크게 CSS/HTML, Django 사용법이었다. (Python은 코딩테스트 언어로 사용하고 있던 중이었는데 그 정도로 충분했다.)

 

CSS/HTML

codecademy의 Build a Website with HTML, CSS, and Github Pages 를 들으면서 기초지식을 배웠다. 유료강좌이나 당시에 코로나 프로모션으로 무료 체험을 할 수 있었기 때문에, 이를 활용해서 공부했다. 실습하면서 학습할 수 있다는 게 장점이었다.

이게 아니더라도 CSS/HTML에 있어서는 좋은 자료가 차고 넘치는 것 같으니, 원하는 커리큘럼을 택하면 될 듯하다.

 

Django

장고는 두개 정도의 실습을 해봤다.

• Django 공식 튜토리얼
• 게시판 만들기

Django의 공식 튜토리얼은 간단한 MVC 모델을 만들어보는 데 도움됐다.

게시판 만들기 실습을 추가로 진행한 건 만들고자 하는 모델과 비슷한 실습을 미리 한번 해보기 위함이었다. 딱히 어느 한가지 소스를 참고하지는 않았고, 구글링을 해가면서 그때그때 필요한 기능을 만들었다.

 

 

💻 본격적인 개발

Bootstrap으로 화면 구성 부담 덜기

HTML과 CSS를 학습하긴 했지만, Javascript에 대한 이해도가 부족한 상황이었기 때문에 직접 화면 구성을 하기에는 어려움이 있었다.

그래서 Bootstrap의 도움을 받기로 했고, 미리 만들어진 Theme 중 홈페이지와 잘 어울리는 것을 선택해 수정하는 것으로 방향을 잡았다.

인터뷰에서 사진을 직접, 공들여 찍을 계획이었기 때문에 '인스타그램'처럼 사진을 그리드로 담는 구성을 생각했고, 다행히도 비슷한 테마가 있었다.

출처: https://startbootstrap.com/previews/freelancer

이런 템플릿을 변형해서 아래와 같이 구성했다.

 

 

기본적인 뼈대가 갖춰있어도 내 마음에 들게끔 조정하는 과정에서 CSS에 대해 더 자세히 알 수 있었던 시간이었다.

 

Bootstrap Theme은 아래와 같은 사이트에서 참고할 수 있다. 

Bootstrap Themes Built & Curated by the Bootstrap Team.

 

Free Bootstrap Themes, Templates, Snippets, and Guides

 

 

각종 기능들 더해가며 이런저런 개발 지식 채우기

앞서서 경험한 건 정말 기본적인

• Django 활용법
• MVC 패턴
• DB 연결 
• REST API

이 정도였던 것 같다.

 

내가 원하는 기능을 구현하기 위해서 더 알아야 했던 것들은 아래와 같다. 

• Oauth2 (42 API 로그인 -  회원가입과 로그인에 사용)
• Ajax / Javascript를 활용한 비동기 통신
• 위지윅 에디터(Summernote - 인터뷰 Create와 Update에 사용)
• Django 권한 생성(인터뷰 작성 권한 부여)
• 썸네일 적용(메인화면에서 이미지 로딩을 효율적으로 하기 위함)

자잘자잘해보이지만 앞서 말한 사전 학습보다 양이 많다. 또 하나하나 퀘스트 해결하는 듯한 즐거움도 있었던 과정.
특히 Oauth2나 비동기에 관한 이해는 지금 진행하고 있는 웹프로젝트에서도 중요해서, 미리 경험해본 것을 다행이라고 생각하고 있다. 
다만 자바스크립트에 대한 이해가 없이 '작동하는 코드'로 만드는 데 집중했던터라 리팩토링이 필요하다. 

여기까지 진행하면서 웹프로젝트에 대한 이해가 이전에 비해선 굉장히 높아졌고,
누가 웹프로젝트 얘기하면 물음표 띄우던 사람🤔 에서 공감하고 대화나눌 수 있는 사람🙂 으로 진화했다.
비전공자라면 42과정 하면서 과제만 하기에도 벅찰 수 있는데, 꼭 시간 내서 자신만의 웹프로젝트 했으면 좋겠다

 

➰ 다음편에 이어서...

2편에는 배포와 기능 추가를 내용으로 작성해볼까 한다.