BLEX : 블렉스  개발 중간(?) 회고

'블렉스 이야기' 시리즈BLEX : 블렉스 개발 중간(?) 회고

baealex

  • 95%
  • 2

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 😀

Sign in to view email

블렉스의 개발을 잠정적으로 마무리하면서 개발을 되돌아보고자 한다. 아직 개선해야 할 부분이라던지 현재 블렉스의 개발자는 초반에 비해서 매우 사소한 수정 작업만 하면서도 오늘도 공부했다는 착각에 빠져있다. 이는 매우 심각한 상황이므로 하루라도 빠르게 서브 프로젝트를 진행해야 할 것 같다! 아, 물론 블렉스에 새로운 아이디어가 떠오른다면 계속해서 붙여나갈 생각이다.



BLEX — BLOG EXPRESS ME

블렉스는 왜 만들어 졌는가? 나는 블로그라는 서비스를 예전부터 좋아했다. 관심을 끌고 싶거나, 돈을 벌고 싶거나, 기록을 위해서거나 이유는 다양했지만 공통적으로 블로그라는 서비스는 이러한 변덕스러운 "나를 표현하는"데 가장 적합한 서비스라 생각했다. 그래서 다양한 서비스를 사용해 보면서 각 블로그 서비스의 장점과 단점을 파악하고 블로그라는 본연의 기능에 충실한 서비스를 만들고 싶었다.

나는 가입형 블로그 서비스에 대해서 그다지 좋지 않은 감정을 가지고 있었다. 네이버 블로그를 보라. 정말 개성없는 블로그 같다. 우리는 모두 각기 다른 형태와 생각을 지녔는데 어찌 블로그는 그리 일관적이란 말인가? 그랬던 나의 생각을 외국의 블로그 서비스인 @미디엄이 깨부셨다. 미디엄은 개성없지만(?) 사이트 자체가 특색있고 그런 블로그를 누구나 쉽게 시작할 수 있다는 점이 매력적이었다. 그래도 약간의 자유로움은 남아있어야 한다는 생각과 깃허브 블로그의 마크다운으로 글을 쓴다는게 블로그라는 특성에 정말 잘 맞는것 같아 이 세가지를 조합하는 것을 목표로 개발하였다.


시작된 개발

수업시간에 Python 자유 프로젝트를 진행하라고 하셨는데 그 당시 막연하게 웹 개발이 너무나 해보고 싶다는 생각뿐이었던 난 파이썬으로 웹 개발을 하는 방법이 궁금해 검색을 찾아나섰다. 그러던 중 DjangoFlask를 발견할 수 있었는데 Django를 선택한 이유는 Django의 기본 튜토리얼이 블로그를 제작하는 것이라서 정말 흥미로웠다. 사실 Django가 아니었다면 블렉스를 만들 생각이나 해봤을까? 여전히 깃허브 블로그를 운영하고 있었을 것 같다.

처음에 장고의 튜토리얼을 따라하며 개발을 시작했는데 상당히 어렵다고 느껴졌다. 필자가 해본 웹 개발이라곤 PHP을 약간 다뤄본게 전부였고 장고는 그와는 매우 다른 구조로 동작하여 튜토리얼을 따라하고 또 따라해도 뭔가 머릿속에 확 박히지가 않았다. 어떤 원리, 어떤 과정으로 동작되는지도 모르겠고... 그나마 장고의 프론트엔드 개발이 Jekyll과 똑같아서 프론트를 빠르게 만들 수 있음에 장고를 계속 붙잡을 수 있었다. 블로그를 옮긴다는 생각으로 깃허브 블로그에 존재하는 모든 기능을 담아내려 했다. 그렇게 공부를 이어갔다.


장고에서 살아남기

결과적으로 나는 장고에서 살아남았다. 처음엔 흐름과 과정이 잘 이해되지 않았지만 웹개발과 파이썬의 문법에 깊은 이해가 생긴 뒤 개발이 쉬워졌고 매우 재밌어졌다.


마크다운

처음 마크다운을 적용하기 위해서 GitHub API를 사용하였다. 다만 해당 API는 횟수 제한이 존재하였고 글을 읽을 때마다 마크다운을 HTML로 변환하는 방법을 사용하고 있었기에 좀만 글을 읽어도 제한이 걸렸다. 그래서 내가 사용해봤던 Parsedown이라는 PHP 라이브러리를 사용해서 직접 서버를 열었고 그 서버와 통신을 시도했다. 결과는 아주 만족스러웠으나 동적으로 변환하면 로딩이 매우 느려져 새로운 모델을 하나 더 만드는게 훌륭한 선택으로 보였다. 이 기능은 수정할 부분 없이 완벽에 가까우나 PHP 코드를 Python으로 변환해 볼 예정이다. BLEX 만드는 것 보다도 오래 걸릴듯...


이미지 업로드

Python 그리고 Django에 대한 이해도가 낮았기 때문에 동적으로(AJAX) 이미지를 업로드하는 방법이 마땅히 떠오르지 않아 이 부분도 PHP를 사용하였다. 덕분에 크로스 도메인에 대한 개념을 얻을 수 있었다. 다만 최근에 봤던 글인 폴리글랏을 지양하라는 글을 보고 납득한 뒤 Python의 지식을 충분히 갖추고 Python으로 변경하였다. 이 기능도 딱히 개선할 부분은 없다.


비동기 통신

알림은 Toast로 구성되어 있다. AJAX에 대해서 어느정도 이해했지만 JSON에 대해서 무지했던 나는 그냥 문자열만 비동기로 주고 받는 정도로 AJAX를 활용했다. 그래서 알림 역시 서비측에서 모두 렌더링을 해주고 HTML만 넘겨서 사용자가 볼 수 있도록 구성했다. 그러다 JSON에 대해서 알게되고 Python의 딕셔너리와 Django의 JSON 응답에 익숙해 지면서 고쳤다. 데이터를 딕셔너리에 담아 JSON으로 응답하면 사용자가 그려서 볼 수 있도록 말이다. 그러면서 JSON과 JavaScript에 흥미가 생겼고 지금은 React를 공부하고 있다.

위 부분을 개선하면서 댓글에 대해서도 완전하게 변경했다. 기존에는 어처구니 없게도 댓글이 수정되거나 삭제되면 페이지를 다시 불러와서 댓글 부분만 잘라서 다시 붙이는 식이었다. 그러므로 서버에서 쓸데없이 트레픽을 낭비하고 있었던 셈이다. 이를 JSON 응답으로 바꿔서 처음에는 서버에서 댓글을 그려줬지만(SEO를 위해서) 수정이나 삭제는 사용자 측에서 그려주는 방식으로 전환하였다.


소셜 로그인

이 시점에서 개발할 당시에는 나와 유사한 환경에서 무언가를 추가하는 사람은 없었다. 독자적인 개발환경이 되어 소셜 로그인 예제를 찾아도 쉽게 이식할 수 없었다. 몇 개의 글을 보고 종합하여 어떤 원리로 소셜 로그인이 되는지 알게 되고 넣었는데 (사실 크게 어려운 건 없었다. all-auth라는 라이브러리를 사용해서) 이게 내부적으로 어떻게 돌아가지는지 몰라서 난감하다. 토큰 주고 받은 다음 토큰을 저장하고 사용자가 사용할 아이디를 입력하도록 해야하는데... 그냥 알아서 만들어진다. 이걸 어디서 가로채야 하는지 모르겠다. 반드시 개선이 필요한 부분이다. 소셜 로그인을 직접 구현하던가 해야겠다.


메일

메일 전송도 아주 간단하게 넣을 수 있었고 전송도 나름 잘 된다. 스레드를 사용해서 비동기 전송도 할 줄 알게 되었고 다만, 메일이 즉각즉각 보내지지 않는다. 이것도 고쳐야 되는데 검색해도 잘 나오지 않는다... (+2020-03-06) 이 부분을 최근 개선했다고 해야할지 말지는 모르겠는데, HTML로 렌더링한 결과를 전송하면 굉장히 오래걸리는 반면, 텍스트만 전송했을떈 전송이 매우 빨랐다. 그래서 일단 인증메일은 텍스트로만 보내기로 하였다...


트레픽

GIF 이미지의 용량이 너무 과도하게 크다고 판단해서 개인 블로그에도 항상 MP4로 전환하여 업로드했었다. 일반 사용자 입장에서도 그냥 지나가듯이 보는 이미지일 뿐이며 품질도 차이가 거의 없었기에 필수적인 작업이다. 그래서 BLEX에도 GIF를 MP4로 변환시켰다. FFmpeg라는 소프트웨어를 활용해서 전환을 시켰는데 결과가 아주 만족스럽다. (+2020-03-06) 썸네일 이미지를 생성하도록 하여 전체적인 퍼포먼스 향상과 트레픽 절약을 가능케 하였다!


조언구하기

처음에는 남들에게 무작정 조언을 구하는 건 무례하며 실례되는 행동이라고 생각했지만, 혼자서 개발하다보니 나의 개발 진척 상황과 앞으로의 방향등이 너무나 불안했다. 그래서 @OKKY에 부끄러움을 무릎쓰고 질문을 올렸다. 다만 지속적으로 해당 사이트에서 링크되어 있으면 트레픽을 빨아먹는 것 같아서 글은 내리도록 하였다. 여하튼 댓글을 달아주신 분들에게 너무나 감사하여 댓글을 보면서 무슨 생각과 감정을 느꼈는지 기록으로 남겨두었다.


회원가입하자말자 500에러가....ㅠ 카카오 로그인도 작동안하는건가요? — meaway님

처음 사이트의 링크를 올리면서 Analytics도 열어놓고 있었다. 사람들이 갑자기 쏟아지듯 들어오는데 심장이 되게 두근거렸다. 재밌다고 해야될지... 여하지간 그러면서 댓글도 실시간으로 보고 있었는데 위와같이 말씀해 주셔서 정말 긴장감이 말로 표현할 수 없을 정도였다. 메일 인증을 급격하게 지우느라 약간의 로직 에러가 남아 있었다. 여하지간 빠르게 고칠 수 있어서 다행이었다. 그리고 소셜 로그인도 추가했었지만 왠지 모르게 500 에러가나서 추가중이라고 괴변하였다...


이쁘네용 — 햇개발자님
디자인 잘하시네옹 ㅠ — black_p님
너무 퀄리티 있는데요;;; ㄷㄷ 디자인 감각이 정말 부럽네요.. — 개꿀님
와우.. ㅠ ㅠ 디자인 감각 있으시네요 부럽... 사이트 잘보고갑니다. 전체적으로 매우 깔끔하네요 — 로직X님

사실 필자는 디자인 감각이 뛰어나진 않지만 더 나은 디자인을 위해 노력했기에 위 말씀은 매우 기분좋은 칭찬으로 들렸다. 또한 지금처럼 직접 디자인을 할 수 있기까지 정말 많은 시간이 걸렸다. 티스토리나 깃허브 블로그의 테마를 수정하거나 만들면서 무지한 내가 할 수 있는 거라곤 몇 날 몇 일 밤을 지새며 코드를 바꿔보는 것 뿐이었다. 그러면서 많은 실력이 쌓인 건 사실이지만 종종 허무하다고 느꼈던 적도 있었는데 이런 칭찬은 그 시간이 헛되지 않음을 말해주는 것 같아 다행이다.


회원가입버튼누르면 submit 되는 action url은 스크립틀릿으로 해주셨나요? — Autowired님

해당 페이지의 action이 공백으로 나타나 있어서 물어보신 것이라 생각된다. 같은 페이지에 post 방식으로 전달한 것이어서 action url은 안써도 됐는데 있어서 놀랬다.


글 하나 남겨봤어요ㅎㅎㅎ 좋습니덩 — 드디어회원님

많은 분들이 회원가입을 시도해 주셨는데 안타깝게(?) 글쓰기는 많이 시도해 보시지 않은 것 같다. 마크다운 글쓰기라는 아주 멋진 방법을 사용하고 있는데 말이다. 아쉽다... ㅎㅎ


장만월!!!!! 합격!!!!!! — 초보.님

아이유는 역시...?


위에 #태그 표시하는 부분 꼭 넣으셔야 하는 부분인지.... 전체적으로 깔끔, 심플한 컨셉에 안 맞는거 같아서요. 개인적인 의견입니다.... — 사회초년생입니다님

방문자가 처음 사이트를 들어오면 어떤 글들이 주로 작성되는지 보여주기 위해서 메인 화면의 상단에 태그를 랜덤으로 배치했는데(미디엄 느낌으로...) 위와같은 의견을 내주셔서 빠르게 삭제했다.


음........................................ 일단 RESTful 대한 개념과 설계방법을 학습하시고 개선해보시공..(https://meetup.toast.com/posts/92) 홈페이지를 만든 포플을 쓰고싶은거잖아요? 그러면 내가 어떤 기술을 사용하고? 내 코드는 이렇게 짯어 이 알고리즘을 이용하여 최적화했어 뭐 이런걸 어필하면 좋고 백엔드 쪽도 표현하고싶으면 ERD 설계도를 보여주면서 이렇게 설계햇어~ 라고 표현하는 것도 좋고용. 그냥 난 이 기술로 이렇게 만들었어 봐봐 홈페이지만 보여주면 음 디자인을 보여주고싶은건지 프론트 기술을 보여주고 싶은건지 알 수 없지 않을까... 끄적끄적해봤습니다~ 물론 제 말이 답이 아니지만요 ㅎㅎ 아래 글을 참고하면 취업하시는데 도움이 되실거라 생각이 들어요~ https://okky.kr/article/368504, https://github.com/jojoldu/junior-recruit-scheduler, (형식만 참고??) https://www.sl — 후닥후닥님

정말 친절하게 링크와 의견을 달아주셔서 정말 감사했다. 비동기 통신을 적극적으로 추가한 것도 이분의 의견을 덕분이었다.


혹시 장고 공부 어떻게하셨나요 ..? 파이썬 실력은 어느정도 되야할까용?? — Wu님
저도 저번 학기에 Django 했었는데요 고생하셨네요 ㅠ 디자인이 진짜 너무 깔끔하고 예쁘게 잘하셨네요! — Vors님

장고는 로그인, 회원가입, CRUD 정도만 인터넷에서 익히면 나머지는 파이썬 실력인 것 같다.


도메인 구매한건가요? 어디서 구매했는지 알수있을까요? — 쭈구리님

닷홈의 무제한 웹호스팅이 너무 고마웠고 익숙한 이름이었기에 사용하였다. 안타깝게도 지금은 구글 도메인즈로 옮겨가고 있지만...


이미지 carousel 부분 어떻게 구현하셨나 봤더니 플러그인 없이 css 애니메이션만으로도 저렇게 할수가 있네요..ㄷㄷ 사이트 정말 잘 만드셨습니다~ — 새드맨님

인터넷에서 가져다 쓴 거라서... 할 말이 마땅히 없다. CSS 만으로 구현한게 신기해서 넣었던 디자인이다.


잘만드셨네요 — ISA님
신입 지망생이요?? ㅠㅠ 저는 6개월의 국비과정을 거치고 신입으로 일한지 한달이 좀 넘었는데 아직 저정도는 엄두도 못낼꺼같습니다. ㄷㄷㄷ 저도 더더 노력해야겟네요. — leean_님
"취업 시즌이 다가오니 많은 걱정이 생겼습니다" 걱정 안하셔도 될듯 ㄷㄷ 진짜 개~잘만들었네요 — 24_26님

이런 말씀을 해주시면 한편으론 안도가 되지만... 걱정은 여전하다. 하지만 걱정이 없어질 정도로 개발에 몰두해 볼 생각이다.


저도 올해 내로 개인 블로그 사이트를 만드는 게 목표였는데, baealex님의 사이트를 보고나니 더 의욕이 생깁니다. 열심히 공부하시고 포폴을 쌓아가시는 모습이 존경스러워요! 디자인도 깔끔하고 통일성 있고, 여러모로 센스가 넘치십니다. ㅎㅎ — 큐킴님

부담스럽기도 하지만... 정성스레 칭찬해주시니 너무 좋다 ❤


우와 프레임워크 react나 vue 없이 만드신건가요??? — Yeon93님

내 입장에선 사용하지 않은게 부끄러웠는데... 놀라신건지 놀리신건지 잘 모르겠다...


블렉스의 개발은 이렇게 마무리 되었고 앞으로도 지속적인 개발은 계속 될 것이다. 아직 추가하고 싶은게 너무 많다. 현재 나는 내가 깃허브 블로그를 계속 사용할지 BLEX로 옮겨올지 깊은 고민에 빠져 있었는데 나조차도 고민되는 서비스였다는 생각에 아차! 싶었다. 사용자에게 매력적인 서비스를 만들기 위해서 노력해야겠다. 이사를 할 수 밖에 없는 매력적인 서비스로 거듭나자!

작성된 댓글이 없습니다!
로그인된 사용자만 댓글을 작성할 수 있습니다.