Bootstrap과 Showdown을 이용한 초간단 CMS

Posted in Frontend Written by 강동혁Comments off

문서 공유가 필요한 경우 Google Docs 나 Dropbox, Microsoft OneDrive 같은 클라우드 파일 서비스를 이용할 수 있다. 누구나 접근 가능한 문서이면서, 웹사이트 형식으로 운영을 할 때는 WordPress 나 Joomla, Ghost 같은 설치형 블로깅 CMS나, MediaWiki 같은 위키 형태의 CMS도 고려해볼 수 있다. 최근에는 파일 기반의 정적 사이트 생성기(static site generator)인 Jekyll 이나 Hugo 등도 많이 이용되고 있다. 프로젝트 관리 시스템(PMS)을 이용하고 있다면, PMS 에서 제공하는 문서 도구를 이용할 수 있다.

그런데, 상황에 따라 보안 상의 이유로 Dropbox 같은 외부 파일 공유 서비스를 이용할 수 없을 수 있다. 혹은 설치형 CMS 또는 Static site generator 를 이용하기 위해 서버에 PHP 나 Python 등 프로그래밍 언어를 설치하고 사용하는 것이 어렵거나, 문서 공유만을 위해 CMS, PMS 를 사용하는 것이 부담스러울 수 있다.

본 문서에서는 웹UI 프레임웍으로 많이 사용되고 있는 Bootstrap 과 Markdown 을 HTML 로 변환해주는 도구인 Showdown 을 이용해 간단한 CMS를 제작할 수 있는 방법에 대해 소개한다.

작동 원리

작동 원리는 매우 간단하다. 먼저 Bootstrap으로 웹문서 HTML 템플릿을 생성한다. 그 다음, 마크다운 포맷의 문서 파일을 작성한다. AJAX로 마크다운 문서를 로딩하고, Showdown을 통해 HTML로 변환한 다음, 문서의 특정 element에 삽입한다.

Bootstrap 설치 및 템플릿 작성

Bootstrap 은 CDN으로 제공되는 CSS 와 Javascript 를 삽입한다. jQuery 도 추가한다.

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
	<nav class="col-md-2 d-none d-md-block bg-light sidebar">
	  <div class="sidebar-sticky pt-2 navigation">  <!-- 네비게이션 영역 -->
	  </div>
	</nav>

	<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
		<div class="row">
			<div class="col-md-9 main-content">  <!-- 본문 영역 -->
			</div>
		</div>
	</main>
  </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Showdown 설치

Bootstrap은 트위터에서 오픈소스로 개발한 웹UI 프레임웍이다. 반응형웹과 다양한 UI컴포넌트들을 제공하며, 쉽게 사용할 수 있는 장점이 있다. Showdown은 Javascript로 작성된 마크다운(markdown) 문서를 HTML 문서로 변환해주는 도구이다. Javascript로 작성되었기 때문에 웹 브라우저에서 실행할 수 있으며, NodeJS를 통해 서버에서도 실행이 가능하다.

Showdown은 CDN으로 제공되는 스크립트를 웹페이지에 삽입한다. 그리고, 마크다운을 HTML로 변환하기 위해 Converter 객체를 생성한다. 본 문서에서는 table 마크다운을 사용하기 위해 tables 옵션을 추가하였다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js" 
    integrity="sha256-dwhppIrxD8qC6lNulndZgtIm4XBU9zoMd9OUoXzIDAE=" crossorigin="anonymous"></script>
<script type="text/javascript">
var converter = new showdown.Converter({
    tables: true
});
</script>

Navagation 로딩

템플릿 HTML 파일을 브라우저에서 로딩한 다음 네비게이션 파일을 로딩하여 표시한다. 네비게이션 파일 역시 마크다운으로 작성한다. 아래는 네비게이션 마크다운 문서 예이다.

###### Simple Markdown CMS

[Overview](overview.md)
[Bootstrap Template](bootstrap.md)
[Showdown](showdown.md)
[네비게이션](navigation.md)
[본문](content.md)

---

###### Examples

[REST API Document](rest-api.md)
[Markdown Example](markdown-example.md)

위 문서를 Showdown으로 HTML로 변환하고, 사이드바 영역에 추가한다.

var html = converter.makeHtml(md);
$('.sidebar').html(html);

본문

네이게이션 클릭 시 링크 URL을 jQuery의 get 함수로 로딩하고, Showdown 으로 변환한 뒤 본문 영역에 추가한다.

$('.sidebar').on('click', '.nav-link', function() {
    $.get($(this).attr('href'), function(md) {
        var html = converter.makeHtml(md);
        $('.main-content').html(html);
    });

    return false;
});

Bootstrap 의 스타일을 적용하기 위해 변환된 HTML 태그에 Bootstrap 의 class 를 추가해준다.

var classmap = new Map([
    // ['<태그>', '<부트스트랩 클래스>'],
    ['h1', 'h2 py-3 mb-3 border-bottom'],
    ['table', 'table table-striped table-bordered'],
    ['pre', 'alert alert-secondary']
]);

$('.sidebar').on('click', '.nav-link', function() {
    $.get($(this).attr('href'), function(md) {
        var html = converter.makeHtml(md);
        classmap.forEach(function(value, key) {
            html = html.replace(
                new RegExp(`<${key}(.*)>`, 'g'), `<${key} class="${value}" $1>`);
        })
        $('.main-content').html(html);
    });

    return false;
});

결론

문서 URL 이나 SEO(Search Engine Optimization) 측면에서 좀 더 보완할 사항이 있다. 하지만, HTML, CSS, Javascript 와 마크다운 파일로 이루어진 CMS 이므로, AWS S3 같은 파일 스토리지 서비스를 통해서도 CMS 를 운영할 수 있는 장점이 있다.

Shoplic Code