앱 개발보다 앱 출시가 더 어려운 이유

홈페이지를 개발하는 사람들은 종종 앱 개발도 비슷할 것이라고 생각합니다. 하지만 실제로는 전혀 다릅니다. 홈페이지는 개발이 끝나면 서버에 업로드하는 순간 바로 서비스가 가능합니다. 반면 앱은 개발이 끝난 후에도 넘어야 할 과정이 많습니다. 홈페이지는 내가 결정한다 홈페이지는 개발자가 수정하고 서버에 업로드하면 바로 반영됩니다. 문제가 있으면 다시 수정해서 업로드하면 됩니다. 누군가의 승인을 받을 필요도 없습니다. 앱은 스토어가 결정한다 앱은 개발이 끝났다고 바로 공개할 수 없습니다. Apple App Store와 Google Play Store의 심사를 통과해야 합니다. 개발자가 보기에는 아무 문제가 없어도 심사 과정에서 수정 요청이 들어올 수 있습니다. 경우에 따라서는 기능 삭제나 정책 변경이 필요할 수도 있습니다. 개발보다 심사가 더 오래 걸릴 수 있다 특히 최근 구글 플레이 신규 개인 개발자 계정은 비공개 테스트 절차까지 거쳐야 합니다. 제가 최근 출시한 앱의 경우는 개발보다 출시 절차에 더 많은 시간이 소요되었습니다. 내부 테스트, 비공개 테스트, 프로덕션 심사, 스토어 반영까지 거치다 보니 실제 정식 출시까지 약 20일 정도가 필요했습니다. 출시 후에도 끝이 아니다 정식 출시가 완료되면 모든 것이 끝날 것 같지만 그렇지 않습니다. 실제 사용자가 앱을 사용하기 시작하면 다양한 의견과 수정 요청이 들어옵니다. 문구 수정, 안내 메시지 변경, 사용 방법 개선 등 작은 요청들이 이어집니다. 개발자는 수정뿐 아니라 테스트와 검증도 함께 진행해야 합니다. 그래서 앱은 홈페이지와 다르다 홈페이지는 개발이 끝나면 바로 공개할 수 있습니다. 하지만 앱은 개발이 끝난 후부터가 진짜 시작이라고 해도 과장이 아닙니다. 심사, 출시, 운영, 유지보수까지 모두 포함해서 생각해야 하기 때문입니다. 그래서 많은 개발자들이 "앱 개발보다 앱 출시가 더 어렵다"는 말을 하게 되는 것 같습니다.

구글 블로거(Blogger)에서 syntax highlight(코드 문법 강조) 적용하기

블로거(Blogger)는 구글에서 운영하는 블로그입니다. 이름은 블로거지만 도메인이 블러그스팟이라  블로그스팟이라고 많이 들 부릅니다.

블러거를 사용해 보시면 글을 작성할 때 아쉬운 기능이 몇 가지 있습니다. 그중에서 가장 아쉬운 기능은 제공하는 에디터에서 프로그래밍 언어를 작성할 때 코드를 입력하는 메뉴가 없다는 것 이였습니다. 프로그래밍 소스는 코드에 따라 알록 달록 색깔이 바뀌어야 제 맛인데 말이죠.

알아보니 몸으로 때워서 syntax highlight(코드 문법 강조)를 적용하는 방법이 몇 가지 있더군요.그 중에서 기능도 막강하고 적용하기도 쉬운 highlight.js를 사용하는 방법을 알아보겠습니다.


1. highlight.js 코드 가져오기

highlight.js 는 구문 번호는 제공하지 않습니다. 구문 번호가 필요하다면 다른 방법을 알아 보셔야 합니다. 하지만 기능은 막강합니다. 그 이유는 조금 있다 알게 되십니다. 다음의 링크로 이동합니다.

https://highlightjs.org/

링크를 쭉 내리시면 아래 그림과 같이 첫 번째 cdnjs 탭이 보이실 겁니다. 

거기에 보이는 다섯 줄의 코드를  복사합니다. 제가 복사해 왔으니 지금은 아래 코드를 사용하셔도 됩니다. 가장 최근 버전입니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"></link>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>

제가 복사해 온 코드는 <link> 태그 끝에 </link> 태그로 막아줘서 에러가 안 나는데 직접 코드를 복사해 오셨다면  <link> 태그 끝에 </link> 태그 막는 부분이 없습니다. 꼭 </link> 이 부분 넣어 주세요.

2. 나의 Blogger에 적용하기

블로거에 로그인 후 테마를 클릭합니다. 테마를 클릭하고 우측을 보시면 아래 그림과 같이 맞춤 설정 버튼이 보입니다.






버튼을 클릭하면 메뉴가 열리는 데 거기에서 HTML 편집 메뉴를 클릭하시고 html 페이지를 엽니다.

아래 복사해 온 코드를 </head> 바로 위에 붙여 넣습니다. </head> 코드를 찾기 어려우시면 라인 번호가 있는 곳에 보면 <head>와 <body> 등을 접을 수 있는 기능이 있는데 이 기능을 사용하시면 </head>를 쉽게 찾을 수 있습니다

복사해온 코드를 </head> 위에 붙여 넣으셨나요? 이제 저장만 해 주면 끝입니다


사용법: <pre><code>프로그래밍 코드</code></pre>


사용법은 위와 같이 <pre><code>태그로 감싸 주시면 됩니다. 반드시 명심해야 할 것은 HTML 모드에서 작성해야 syntax highlight가 적용된다는 것입니다. 아래 그림에 있는 HTML 보기 버튼을 클릭해야 HTML 모드로 작성하실 수 있습니다.






가장 기초적인 자바 소스로 syntax highlight가 잘 적용 되었는지 확인 해 보겠습니다. 아래는 적용 화면입니다.


적용은 잘 되었는데 화면이 너무 밋밋합니다. 우리가 복사해 넣은 코드 중에 첫 번째 링크 태그 안에 있는 href 속성을 확인해 보십시오. 다음의 url이 보이실 겁니다. 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css

default.min.css 로 되어 있습니다. default.min.css 대신에 아래 링크로 들어가서 아무 css나 골라 옵니다.

github.com

저는 stackoverflow-dark.css를 선택해서 아래와 같이 교체했습니다. default.min.css만 지우고 stackoverflow-dark.css라 적어 주시면 됩니다. 아래와 같이 말이죠.

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/stackoverflow-dark.css

stackoverflow-dark.css를 적용 후의 syntax highlight입니다.

이제 좀 마음에 드네요. 마음에 안들면 마음에 드는 syntax highlight로 css를 교체하시면됩니다. 이 점이 highlight.js 의 강력함 입니다.

PS : 다른 코드는 문제가 없는데 html 코드를 삽입 할 때는 <> 이 태그들이 문제가 되어서 정상 작동을 안 합니다. 꼭 html 태그를 치환해서 사용해야 합니다

https://accessify.com/ 여기가 html 태그를 치환할 수 있는 사이트인데 치환할 수 있는 페이지에 쉽게 가시라고 아래 링크 걸어 둡니다.

https://accessify.com

댓글