태어나 처음으로 만드는 웹페이지 개발기

g_choi·2021년 8월 6일
0

Others

목록 보기
1/2
post-thumbnail

오늘 하루도 코딩으로 수고하시고 심신의 피로를 느끼시는 분들을 위해 코드이야긴 안 나옵니다 ^^

그래서 뭘 개발한 거야?


사실 옛날부터 서버를 개발해보고 싶었던 욕심은 항상 있었습니다. 뭔가 엄청나고 무지막지한 서버를 만들어서 많은 사용자들에게 서비스를 제공해보고 싶다! 같은 좋은(?) 마음을 품고 있었지만 아이디어와 현실적인 코딩 양과 실력의 부재로 이루지 못했었습니다. Node.js의 압도적인 생산성은 제가 지금까지 만져본 어떤 프레임워크보단 빨랐지만 그래도 무엇인가를 만들고 배포한다는 것은 약간 다른 차원이더라구요 ㅠㅠㅠ 그러다가 한 영상을 보았습니다.

조코딩-SNS테스트 개발기
당연히 홍보 아닙니다 그냥 영감을 받은 영상이에요

의외로 간단한 사이트를 만들면서도 수많은 사이트 동접자와 컨텐츠 제공과 광고수익 등등을 할 수가 있는 거구나 싶었습니다. 생각이 여기에 미치니 친구들과 이야기를 나누고 여러 의견 중 가장 간단하게 실현 가능한 아이디어로

랜덤으로 해시태그를 뿌리는 사이트를 만드는 건 어때?

란 아이디어가 나왔습니다.

아이디어의 현실성 고려는 어때?


저는 잘 몰랐는데 트위터에선 사용자들이 특정 해시태그로 소통하는 문화가 있고, 그런 문화를 조준해서 사이트를 만들어보는 게 어떻냐는 생각이었습니다. 페이스북, 인스타그램(참고로 두개도 잘 안합니다만;;)에서는 해시태그를 특정할 때 사용하는 문화로 인해 잘 통하지 않을까 싶었지만, 트위터의 저런 특수한 문화를 보고 친구들과의 이야기에서 여기라면 가능할 만하겠다 싶어서 그냥 저질러보고 불질러보고 해보자! 란 마인드로 제작을 시작했습니다.

만들기 전에 뭔가 생각한 건 있어?


제공하는 컨텐츠가 복잡하면 출시도 못하고 저란 인간은 GitHub에서 살포시 Delete Repository 버튼을 누르는 게 너무나 당연했기에 다음과 같은 전제를 세웠습니다.

1. 개발기간이 2-3주내여야한다.
2. 관리가 간편해야하며, 유지보수도 쉬워야한다.
3. 단기간적으로 관심을 끌 수 있어야한다. 한번 방문 후 버려져도 괜찮다.

제작을 어떻게 했어?


간단하게만 스펙을 말하면 다음과 같습니다

  • Node.js + MongoDB(mongoose) + Boilerplate
  • Vultr (싸기도 하고, AWS는 카드 문제땜에 계정 임시정지ㅠㅠ)
  • Docker로 최대한 무중단 배포
  • Jquery + Bootstrap(무료 템플릿)

가장 제가 익숙하면서도 다루기 쉬운 도구들로 제작해야 시간과 생산성이 가장 좋을 꺼 같아서 선정했습니다.
초기엔 별 문제가 없었지만, 개발을 하면 할수록 Boilerplate의 구조 때문에 애를 먹게 된다던지, 구조가 난잡해지는 문제가 발생하기도 했습니다. 그래도 어찌어찌 스파게티를 묶고 풀며 1주하고도 반만에 완성에 성공했습니다.

결과는 어떻게 되었어?


사실 생각 외여서 놀랐습니다. 이런 별 거 없는 사이트에 (해시태그를 올리고 뽑는 거 이외엔 할 수 있는게 없어요..) 런칭 하루 뒤에 대략 1300명의 접속자가 나온 것입니다.

아이디어가 신선했는지 많은 분들이 접속하면서 다양한 반응이 오갔고, 친구와 반응을 하나하나 살펴보면서 스크롤도 막 1초마다 내리면서 엄청 웃었습니다. 아, 이게 코딩하는 맛이구나, 컴퓨터 배우길 잘했다란 생각이 오가면서 새로운 기분이 들었습니다. 다만 오픈빨(?)이 넘 강력했는지 이후론 사용자분들이 많이 빠져나갔습니다.(그래도 섭섭하지 않아요!)

뭔가 얻은 건 있어?


첫번째로 코딩 스타일이었습니다. 시간에 쫒기다 보니 확실히 코드가 난잡해지는 문제가 있더라구요.. 다음에 코딩할 땐 잘 쌓아야겠단 생각이 들었습니다.

두번째론 Node.js의 공부량이었습니다. 물론 애초에 잘나온 프로그램이라 엉성하게 짜도 어떻게든 쌩쌩 굴러가지만 라이브러리나 Non-blocking I/O의 개념이 많이 부족하단 걸 느끼고, 특히 테스트 코드를 작성을 거의 하지를 못했습니다..

세번째론 조금 웃겼는데 사용자들의 행동패턴 예측의 실패였습니다. 해시태그를 올리는 기능을 제공하면서 사용방법 설명문도 써넣어야지! 하고 하단에 설명서를 배치했는데 아무도 스크롤을 내리지 않아 그 부분까지 읽지 않아서 사용자분들이 올리시는 모든 요청이 서버로그에 계속 실패! 실패! 로만 뜨는 걸 보고 얼굴이 파래져서 긴급히 핫픽스를 올렸던 기억이 있습니다 ㅎㅎ;;

아냐...그거 그렇게 올리는 게 아니야..!

이외에도 부가적으로 많은 것을 직접적으로 체험했고, 다양한 경험을 두루 갖춘 것 같습니다. 즉, 스타트가 매우 괜찮은 데뷔를 했다고 해야겠지요.

다음엔 뭘 할꺼야?


자세한 아이디어는 비밀이지만 재정비하고 조금 더 수련을 쌓으면 친구와 나눈 아이디어 중 하나를 또 런칭할 예정입니다! 대략적으로는 사용자 취향을 분석해 가장 알맞는 것을 추천해주는 사이트를 개발할 예정입니다. 그러기 위해 Javascript -> Typescript로 언어지식을 배우면서 SPA도 함께 배워가고 있습니다. (틈틈히 알고리즘이랑 자료구조도요) 또한 서버 배포에서 이번엔 Docker+Git의 조합으로 배포를 진행했지만 다음엔 아마 젠킨스를 이용하여 배포하게 되지 않을까 싶네요:) 그 중간중간 Github에 사이드 프로젝트도 계속 배포할 생각입니다!

마지막으로, 만든 서버는

https://randomhash.site/
입니다 :)

긴 글 읽어주셔서 감사합니다!

profile
해외에서 공부중인, 다양한 걸 배울려 하는, 항상 모자름을 느끼기에 성장하는 학생 :D

0개의 댓글