블로그는 어떻게 만들까?

블로그는 어떻게 만들까?

baealex

소비적인 일보단 생산적인 일을 좋아합니다.

Sign in to view email

얼마전 위와 같은 메일을 한 통 받았다. 아마 신입 개발자 포트폴리오 준비하기 글을 보시고 연락을 하신거라 생각된다. 그래서 내가 아는 한도 내에서 설명을 드렸는데 내용을 좀 더 가다듬고 상세하게 작성하여 약소하게나마 비슷한 궁금증을 가진 사람들에게 도움이 될 수 있으면 한다.

글을 읽기 전에 첨언하자면 내가 블로그를 하면서 깨달은 건 다수의 사람들에게 무언가를 알려주고자 하더라도 결국 모든 사람들을 고려할 수 없다는 점이다. 다시 말하면, 단어 선택이나 글의 구성 요소를 내 맘대로 구성했다는 의미이기도 하다. 이 글은 블로그를 만드는 튜토리얼이 아닌 위 메일처럼 어떻게 접근할지 모르겠다는 사람들을 위한 글이다.

참고로 필자가 좋아하는 책인 '커리어 스킬'에서는 단지 블로그 운영이 목적인 경우 블로그 개발은 시간 낭비일 가능성이 높으므로 굳이 만들지 말고 존재하는 서비스를 쓰라고 한다.


WWW

당신은 이 글을 다양한 곳에서 접근할 수 있다. 구글에서 검색했을 수도 있고 어썸 데브 블로그를 통해서 들어왔을 수도 있다. 인터넷에서 볼 수 있는 모든 사이트는 거미줄처럼 얽히고 설킨 웹(Web) 사이트다. 우리는 이러한 웹 사이트를 개발하고자 하며, 모든 웹 사이트는 HTTP 프로토콜을 통해 데이터를 주고 받는다는 특징을 가지고 있다.

그렇다. 이 사이트 역시 당신이 요청한 URI에 대한 결과물을 HTTP 프로토콜을 이용해 HTML이라는 데이터를 전달했고 당신은 이 글을 읽고 있게 되었다. 이것만 기억하면 끝이다. 블로그를 비롯한 웹 사이트를 만든다는 건 다 똑같다. 레이아웃의 형태나 데이터의 구조가 조금씩 다를 뿐이다.


HTTP가 뭔데?

웹 통신에 사용되는 프로토콜의 이름이다. 그냥 이미지, HTML을 비롯한 인터넷 상에서 데이터를 주고 받기 위한 통로라고 생각하자.


HTML은 뭔데?

HTML은 그냥 텍스트 덩어리이다. 하지만 정해진 문법 및 규칙을 가지고 있으며 브라우저는 이 텍스트를 이해하고 구조화 할 수 있다. 크롬을 사용하고 있다면 주소창 맨 앞에 view-source:를 붙여보자. 그게 현재 페이지에 대한 HTML이다.


HTTP나 HTML은 컴퓨터 고수들이 합리적이고 효율적인 방법으로 약속을 정한 것이기 때문에 우리는 이것을 올바르게 이해하고 잘 사용하면 된다. 사용하다가 뭔가 불편함이 느껴진다면 새로운 규약을 만들어 볼 수도 있겠다.


BLOG

다시 본문으로 돌아오자. 그래서 블로그는 어떻게 만들까? 이 사이트는 HTTPHTML을 전달한다고 했다. 필자는 이 두개를 나누어 통상적으로 사용되는 표현인 Front-End와 Back-End로 표현할 것이다. Front-End는 HTML과 가까운 쪽으로 사용자의 눈에 직접 보여지는 부분이며 Back-End는 HTTP와 가까운 쪽으로 사용자가 전혀 볼 수 없는 부분을 의미한다. 가까운 쪽이라 표현한 이유는 해당 기술 뿐만 아니라 다양한 기술들이 복합되어 있기 때문이다.


Front-End

HTML과 가까운 쪽의 기술들은 다음과 같다.

사용자에게 보여지는 프론트엔드는 기술이 고정적이다. 저 항목을 익혀야만 원활한 개발이 가능하다. 좋은 소식은 MDN이라는 곳에 이 기술에 대해서 완벽한 문서를 제공하고 있다는 것이다. 해당 사이트에선 프론트엔드 뿐 아니라 백엔드와 같은 다양한 정보를 얻을 수 있으므로 유용하다.

계산기를 웹 상에서 구현한다고 생각해보면 HTML을 이용해서 버튼의 존재를 정의할 수 있고, CSS로 버튼의 디자인을 불어 넣을 수 있으며, JS로 각각의 버튼의 동작을 만들 수 있다. 이처럼 나열된 세 가지 기술은 레이아웃을 구성하는데 있어 모두 필수적인 기술이므로 꼼꼼한 공부가 필요하다. 흥미를 키우기 위해서 추후에 만들고자 하는 블로그의 레이아웃을 만들면서 공부하는 것도 도움이 될 듯 하다.


Back-End

웹 개발을 처음 접하는 사람들 중 자바스크립트(Client-Side 언어)와 Server-Side 언어에 대해서 혼동을 가지는 것을 많이 보았다. 어떤 기능을 추가할 때 이게 자바스크립트로 해결해야 할 문제인지 백엔드에서 처리해야 할 문제인지 결정을 어려워하더라. 아래에서 두 가지의 차이점를 나열할 것이지만 이해가 어렵대도 괜찮다. 하다보면 익숙해 질 것이다.

먼저 두 가지에 대한 정확한 분리가 필요하다. HTML, CSS, JS를 비롯한 모든 파일은 서버(Back-End)에서 내려주는게 맞다. 하지만 자바스크립트는 사용자에게 자바스크립트라는 파일 자체로 전달되며 브라우저가 이를 받아서 코드를 동작시킨다. 반면에 서버 사이드 언어의 내용은 사용자에게 넘어가지 않는다. 이 블로그는 Python으로 만들었지만 현재 당신은 단 한 줄의 파이썬 코드도 찾아볼 수 없다. Server-Side 언어는 오직 서버에 접근하고 데이터를 가공하기 위해서 사용한다. 그러므로 사용자측에서 충분히 해결할 수 있는 문제라면 자바스크립트로, 서버측의 데이터가 필요하다면 서버 사이드 언어로 처리하면 되겠다.

가령 사용자가 좋아요 버튼을 누른다. 좋아요를 했다면 서버에서 사용자가 해당 게시글을 좋아한다는 데이터를 저장해야 한다. 이때는 당연히 백엔드에서 처리를 해줘야한다. 반면 좋아요 버튼을 눌렀을 때 애니메이션이 나타나는 부분은 서버의 개입없이 사용자가 처리할 수 있으므로 자바스크립트를 사용하면 된다.


LAMP

백엔드는 존재 이유를 알았으므로 백엔드를 개발하기 위해서 어떤 기술들을 알아야 하는지 살펴보자. 우선 웹 개발에는 LAMP라고 불리우는 오래된 기술스택이 존재한다. 갑자기 이 키워드를 언급하는 이유는 이 기술스택안에 백엔드 개발에 필요한 모든 요소가 포함되어 있기 때문이다. 각각의 항목은 Linux(운영체제), Apach(웹서버), MySQL(DB), PHP(서버 사이드 언어)를 의미한다. 이 스택처럼 우리도 각각의 항목에 알맞는 스택을 선정할 것이다.



아래에서 광범위한 범위의 다양한 기술 키워드가 언급될 것이다. 각 키워드의 의미를 전혀 모르겠다면 약간의 검색이 필요하다. 아래에 나오는 부분은 블로그를 제작하기 위해 필연적으로 사용해야 하는 기술이기 때문이다. 또한 다수의 키워드 속에서 어떤 기술들로 조합할지 많은 고민과 걱정이 생길텐데 그 걱정, 고민 내려놨으면 한다. LAMP도 한때는 각광받는 기술 스택이었다. 하지만 지금 이 스택으로 웹 개발을 하겠다고 하면 다들 이런 반응을 보일거다.



무엇을 선택하든 자신에게 흥미로운 기술(단순히 이름이 맘에 들거나 특정한 회사에서 사용한다거나)을 선정하자. 어차피 기술은 바뀌기 마련이다. 자신이 선택한 기술이 오랫동안 살아 남는다면 기쁘겠지만 그럴 확률은 희박하다. 여하지간 고민만하면서 시간을 허비하지 말고 생각하고, 행동하자.


운영체제

가장 먼저 개발할 환경, 서비스를 운영할 운영체제를 선택해야 한다. 대부분의 서버들은 리눅스를 사용한다. 무료라는 이유가 가장 크며 돈이 많은 회사라면 윈도우 서버나 유닉스 서버를 사용하고 있을거다. 돈 많은 회사에 간다면 미리 공부해두자. 여하지간 리눅스를 처음 접한다면 익히기 어렵겠지만 사용자가 많은 만큼 거대한 커뮤니티가 형성되어 있으므로 문제가 생겼을 때 검색하기가 수월 한 편이다. 리눅스에는 다양한 배포판이 존재하는데 보통 다음과 같은 배포판을 사용한다.

  • Debian
  • Redhat

리눅스는 여러 배포판이 존재하지만 모두 하나의 근원에서 시작된다. 패키지 관리에 방식에 따라서 다양한 계열로 분화되었는데 데스크톱에서는 Debian 계열(대표적으로 Debian, Ubuntu, Linux Mint)이 주로 사용되며 서버에서는 Redhat 계열(대표적으로 Redhat, CentOS)이 주로 사용된다. 필자는 서버로도 Debian 계열을 선호하는 편이다.


웹 서버

웹 서버는 사용자와 HTTP 통신을 주고받을 수 있는 서버를 의미한다. 요즘은 프레임워크 자체에서 HTTP를 주고 받을 수 있게 만들지만 여전히 ApachNginx와 같은 웹 서버를 함께 사용한다. 이전에는 Apach라는 웹 서버를 많이 사용했으나 최근에는 Nginx 웹 서버를 많이들 사용한다. Apach에 비해서 경량화 되어있고 그만큼 빠르기 때문이다.

Blue : Apach, Red : Nginx


데이터베이스

블로그의 생명은 데이터베이스다. 태그와 카테고리 댓글들의 다양한 구조를 설계할 수 있다. 참고로 여기서 업급할 데이터베이스는 모두 관계형 데이터베이스이다. 이전에는 대부분의 웹 사이트에서 MySQL을 많이 사용했으나 최근에는 PostgreSQL을 많이 사용하는 추세이다. 혼자 사용할 블로그라면 SQLite를 사용해도 큰 부담은 없을거라 생각한다. 앞서 언급한 MySQL이나 PostgreSQL은 서버에 설치를 선행해야 하지만 SQLite는 한 파일에서 데이터를 관리하며 별도의 설치가 필요없다. 웹 개발을 처음 시도해 본다면 DB를 빼고 직접 블로그 글을 관리하는 방법을 개발해 보는 것도 재밌다.


언어

언어는 사실상 제한이 없다. 자신이 가장 좋아하거나 진출하고 싶은 언어를 선택하면 되겠다. 예를들어

  • C
  • PHP
  • Java
  • Python
  • JavaScript
  • Rust
  • Ruby

언어를 선택했다면 본인이 직접 모든 통신을 구현할 수도 있겠지만 필자는 프레임워크를 사용하는 것을 추천하고 싶다. 구글에 자신이 선택한 언어 + Web Framework를 검색하면 관련된 자료를 얻을 수 있을 것이다. 가령 Python을 선택했다면?

Python Web Framework

위와같이 검색할 수 있겠다. 그럼 보통은 FlaskDjango가 나온다. 그럼 두 프레임워크 중에 하나를 선택하고 해당 프레임워크로 블로그를 만드는 방법을 찾아보자.

How to make Blog in Flask

아마 튜토리얼 글에서 대부분 합리적인 기술스택을 사용하고 있을 것이며 보통은 그 기술스택을 따라가게 될 것이다. (튜토리얼에 그치지 말고 꼭 본인의 생각을 더하자) 필자가 추천하는 언어 및 프레임워크는 다음과 같다. 구조가 비슷하고 쉬운 프레임워크로 알려진 친구들이다.

  • Python, Django
  • Ruby on Rails
  • PHP, Laravel

한국에서의 취업을 목적으로 한다면 아래 프레임워크를 추천한다.

  • Java, Spring
  • Java, Spring Boot

프론트엔드 기술을 설명했듯 백엔드 기술들이 서로 어떻게 연결되는지 간략하게 설명을 덧붙히겠다. 먼저 사용자가 URL을 요청하면 웹 서버가 이 요청을 받는다. 서버 사이드 언어에 이 요청이 전달되어 작성된 코드를 처리한다. 데이터 베이스가 연결 된 경우 DB에서 데이터를 꺼낸다. 서버 사이드 언어에서 데이터를 앚맞게 구성하여 적합한 응답(ex. HTML)을 생성한다. 웹 서버가 이 응답을 요청한 사용자에게 전달한다.


알쓸신잡(선택사항)

위에서 나열한 기술들만 사용해도 왠만한 블로그는 만들어 낼 수 있게 되었다. 아래 부분은 블로그를 개선할 수 있는 방안을 몇 가지 나열하였다. 필수적으로 적용되어야 할 요소들은 아님을 참고하자.


프론트엔드

비동기 통신

자바스크립트에서 AJAX 혹은 Axios, fetch 또는 XMLHttpRequest라는 키워드를 작성한 적이 없다면 당신의 블로그는 온전히 동기식으로 만들어진 사이트다. 사용자가 조금이라도 더 머무리고 싶은 사이트로 만드려면 필자가 생각하기에 동기적으로 로딩되는 부분을 최소화 해야한다고 본다. 단순히 좋아요만 눌렀는데, 댓글만 달았는데 페이지가 새로고침 된다고 생각해보자. 최악이다...

PHP를 강조한 제목이지만 사실상 AJAX에 중점이 맞춰져 있는 글이다.


SPA

최근에는 프론트엔드 개발을 단순히 HTML, CSS, JS로 하지 않고 VueReact와 같은 프론트엔드 프레임워크를 이용하여 개발한다. 해당 프레임워크는 SPA(Single Page Application) 개발에 사용되는 프레임워크인데 HTTP 통신의 단점과 성능을 개선하기 위해서 사용된다. 다만 SPA는 대체적으로 CSR(Client Side Rendering)을 하는데 이는 SEO와 관련된 내용으로 아래 '블로그'란에서 설명하도록 하겠다.


백엔드

RESTful API

비동기 통신은 RESTful API로 구성된 백엔드와 찰떡궁합이다.


Docker

우리는 위에서 하나의 운영체제를 선택하여 개발했는데 최근에는 사실상 운영체제를 구분하는 것이 무의미하다. 도커(Docker)라는 기술의 존재 덕분인데 아래 내용으로 도커의 필요성을 한번 느껴보는 것도 좋다.


블로그

SEO

블로그의 개발은 쉽지만 블로그가 구글과 같은 검색엔진에 검색되지 않는다면 존재의 가치가 있는지 의문이다. 단순 일기장 용도가 아니라면 말이다. 구글은 정기적으로 웹 사이트를 크롤링하는데 우리는 구글이 우리의 사이트를 좀 더 효율적으로 긁어갈 수 있도록 해놔야하며 그게 SEO의 목적이다. 기존 방식으로만 개발된 블로그라면 아래 가이드를 통해서 SEO를 향상시킬 수 있다.

위에서 SPA의 특징으로 언급했던 CSR(Client Side Rendering)은 크롤링 봇이 우리의 사이트를 효율적으로 긁어가지 못하게 한다는 점인데 SPA로 블로그의 프론트엔드를 구성할 목적이라면 SSR(Server Side Rendering)에 대해서 알아야 한다.


레이지 로딩

이 사이트에서 글을 읽다보면 이미지가 뒤늦게 뜨는 것을 볼 수 있다. 이게 레이지 로딩이라고 불리는 로딩 방식인데 왜 이런 로딩 방식이 필요할까? 자신이 블로그를 탐방하던 경험을 되돌아보자. 아마도 모든 글을 진득하게 읽어보진 않을 것이다. 하지만 레이지 로딩이 적용되지 않은 블로그는 첫 로딩시 모든 이미지를 불러온다. 이는 사용자 측에선 모바일 데이터를 사용중인게 아닌 이상 문제될 게 없지만 서버측에선 글을 읽지 않을 유저에게 모든 이미지를 내려주게 되므로 상당한 트레픽 낭비로 이어진다.


gif to mp4

GIF는 이제 그만쓰자. 불필요하게 과도한 트레픽을 낭비하는 녀석이다.


그럼 다들 즐거운 블로그 개발하십쇼!

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