직접 개발한 블로그 서비스 : BLEX 잠정적으로 개발을 마무리하면서 왜 개발했고 어떤걸 개발했고 어떤게 문제였고 여전히 문제인지 기록해 두고자 한다. 해당 서비스 내에 작성된 ‘서비스 개요’보다도 많은 양으로 아주 Toooooo Much하게 내용을 작성할 것이다.


개발을 시작한 이유

나는 예전부터 꾸준히(?) 블로그를 운영했었다. 네이버 블로그로 시작하여 티스토리와 Jekyll 블로그를 운영하였다. 그러다 대학교 4학년의 임베디드 미들웨어 수업시간에 Python 자유 프로젝트를 진행하라고 하셔서 그 당시에 큰 관심을 가지고 있었던 웹 개발을 해보고자 하였다. Django와 Flask를 발견할 수 있었는데 Django를 선택한 이유는 Django의 기본 튜토리얼이 블로그를 제작하는 것이라서 매우 흥미로웠다. 또한 Django에서 사용하는 Template 문법에 Jekyll과 마찬가지로 Liquid 문법을 사용하고 있었기에 선택하였다. 뭔가 엄청난 서비스를 개발할 수 있을 것 같았다.


시작된 개발

처음에는 튜토리얼을 따라하며 개발을 시작했는데 상당히 어렵다고 느껴졌다. 튜토리얼을 따라하고 또 따라하고 또 따라해도 뭔가 머릿속에 확 박히지가 않았다. 어떤 원리, 어떤 과정으로 동작되는지도 모르겠고… 그래도 끝까지 완독해서 그냥 글이 작성되는 블로그? 정도는 만들어졌다. 당시 Jekyll 블로그를 운영하면서 할 수 있던 모든 기능들은 만들고 싶었다. 블로그를 이전한다는 생각으로 말이다. 또한 나는 이 블로그처럼 Medium의 감성을 좋아하므로 Medium에 존재하는 다양한 기능을 만들고 싶었다.


장고에서 살아남기

처음에 장고의 view와 template의 흐름이 잘 이해되지 않았다. 그저 인터넷에 검색하면서 사람들의 글을 따라했다. model을 만들고 form을 만들고 url을 만들고 view를 작성하고 template를 만들고 해야될 게 왜 이렇게 많고 나눠져 있는지 짜증이 나기도 했었는데 정말 신기하게도 계속 하다보니 늘었다. 가장 큰 부분은 Python 문법에 깊은 이해를 하고난 뒤 개발이 쉬워졌다. 갑자기 장고의 구조도 이해되고 과정도 이해되면서 재밌어지기 시작했다.


마크다운 적용 일대기

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


이미지 비동기 업로드

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


AJAX / JSON

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

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


처절한 소셜 로그인

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


메일좀… 젭라

메일 전송도 아주 간단하게 넣을 수 있었고 전송도 나름 잘 된다. 스레드를 사용해서 비동기 전송도 할 줄 알게 되었고 다만, 메일이 즉각즉각 보내지지 않는다. 이것도 고쳐야 되는데 검색해도 잘 나오지 않는다. 이걸 완료해야 이 블로그의 뉴스레터도 정상적으로 구현할 텐데…


트레픽과의 사투

사실 BLEX에서 사용자와 블로거는 단 1명 뿐이므로 자신과의 싸움이라고 보는게 맞다. GIF 이미지의 용량이 너무 과도하게 크다고 판단해서 개인 블로그에도 항상 MP4로 전환하여 업로드했었다. 일반 사용자 입장에서도 그냥 지나가듯이 보는 이미지일 뿐이며 품질도 차이가 거의 없었기에 필수적인 작업이다. 그래서 BLEX에도 GIF를 MP4로 변환시켰다. FFmpeg라는 소프트웨어를 활용해서 전환을 시켰는데 결과가 아주 만족스럽다.


조언구하기

처음에는 남들에게 무작정 조언을 구하는 건 무례하며 실례되는 행동이라고 생각했지만 물어볼만한 곳이 이곳(OKKY)밖에 없다고 생각했다. 그럼에도 댓글을 달아주신 분들에게 너무나 감사하여 현재 댓글을 보면서 무슨 생각과 감정을 느꼈는지 기록으로 남겨두고자 한다.

위클리에 올라가는 영광까지 😂


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

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


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

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


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

해당 페이지의 action이 공백으로 나타나 있어서 물어보신 것이라 생각된다. 장고에서는 같은 페이지를 post 방식으로 전달할 수 있어서 action url은 안써도 됬었는데 있어서 놀랬다. 여하지간 위 말씀을 듣고나서 action url을 완전히 없앴다.


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

많은 분들이 회원가입을 시도해 주셨는데 안타깝게(?) 글쓰기는 많이 시도해 보시지 않은 것 같다. 마크다운 글쓰기라는 아주 멋진 방법을 사용하고 있는데 말이다. 아쉽다… ㅎㅎ 글쓰는 화면의 디자인은 나의 뮤즈인 밸로그 참고했지만 디자인을 보고나서 쉽게 따라 만들 수 있는 내가 너무 대견하다!


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

아이유는 역시…?


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

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


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

REST를… 결국엔 해야겠구나라는 생각이 들었다. 적어도 포트폴리오 용도로 제출하려면 말이다. 이 분의 댓글을 보면서 감이 잡히지 않던 사이트의 개발 방향을 바로 잡을 수 있었다. 처음 이 블로그를 만들면서 가졌던 생각은 예쁘면 그만, 글써지면 그만, 블로그 처럼 쓸 수 있으면 그만이라고 생각했기에 포트폴리오 용도로 내기에는 별로라고 생각했는데 사용자를 위한 다양한 알고리즘을 추가하고 기록하면서 사이트만의 아이덴티티도 찾으면서 포트폴리오로 제출하기 부끄럽지 않은 퀄리티로 만들어 볼 생각이다. 친절히 여러 링크까지 주셔서 정말정말 감사했다.


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

솔직히 처음에 장고는 정말 공부하기 어려웠다. 어느순간 갑자기 감이 잡히고 자연스럽게 쓸 수 있게 되었는데 이는 파이썬의 실력이 많이 늘어났기 때문이라고 생각된다. 파이썬으로 자료구조를 구현하면서 파이썬 문법에 많이 익숙해져 실력이 늘었고 그로인해 자연스럽게 장고를 다루는 실력도 올라갔다고 본다. 여하지간 장고는 로그인, 회원가입, CRUD 정도만 인터넷에서 익히면 나머지는 파이썬 실력인 것 같다.


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

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


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

인터넷에서 이런 디자인을 어떻게 구현하는지 찾아보다가 사진 4개를 연속으로 붙이고 마진을 바꾸면서 전환하는 걸 보고 너무 좋아보였다. 성능도 좋을 것 같았고 그래서 넣어보았다.


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

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


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

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


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

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


위 조언을 통해서 공부할 부분은 공부하고 개선할 부분은 개선하고 이 블로그만의 강점을 많이 만들어서 나만의 포트폴리오로 만들었다. 트렌드 알고리즘이나 뭐 그런거 (사실 트렌드 알고리즘이라 부를만한 것도 없지만) 새로운 것을 도입했고 사실 신입 개발자가 혼자 풀사이클 개발을 했다는 것에 의미를 두려고 한다. 남들과 비교하거나 내 창작물의 가치가 없다고 생각해봐야 나만 손해니까.


결론

  • 만든이유
    • 블로그가 좋아서, Django가 좋아서
  • 개발한 것
    • 트렌드 알고리즘
    • 마크다운 글쓰기
    • GIF 이미지 변환
    • 알림 클라이언트 렌더링
    • 댓글 비동기 토신
    • 소셜 로그인
    • 메일 전송
  • 개선할 것
    • 소셜 로그인
    • 메일 전송

0_aivZqFWhQQvyjh5

1_ODQ1W2haJHl463h

2_fW6oYalS4fzhOI7

4_e95WF6goojY74A0

5_Y7RuulhKG4feYOa

6_JF0c0iRaATx79KR

7_GIFZNl7H4QndTn5

8_NvnYNsgAgeZ31S1

9_ATaBR29MY2iBt6E

WRITTEN BY

배진오

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 :D
im@baejino.com