2017년 11월 17일 금요일

브런치에서 이동

기술이 세상을 이롭게 변화시킨다1

HTML5의 미래에 대한 개인적 견해

응용 프로그래머에게는 필수
by HAJUNHO Jan 13. 2017
아래로
Flash, JAVA FX, Active X, Silverlight는 모두 웹을 뒷받침해 주는 기능입니다. 그러나 HTML5로 오면서 더 이상 필요한 항목이 아니게 되었습니다. 이 모듈들은 클릭 한 번이면 추가로 설치할 수 있으나, 사실 그것마저도 큰 불편 사항이었습니다. 사용자 입장에서는 각기 다른 회사의 솔루션을 여러 번 설치해야 했기 때문입니다. 자유경제체제의 원리에 따라 Apple, Google, Microsoft社 等은 많은 회사들이 그들만의 표준을 추구하려고 했습니다. 그래서 사용자는 경쟁 속에 빠른 기술 발전을 경험하면서도 서로 다른 휴대폰 충전 케이블을 가지게 되었고, 모니터를 구입할 때 DVI, HDMI라는 용어를 알아야 하며, USB, IEEE 1394, 썬더볼트 等 다양한 규격도 공부해야 합니다. 사실 가만히 보면, 편리한 세상 속에서 또 불편하게 살고 있습니다.

HTML5의 미래는 간단합니다. 애플에서 iOS를 개발, Google에서 Android Framework을 만들거나 FSF에서 GCC를 개발, 혹은 ARM Instruction Set를 이용해서 펌 웨어 프로그래밍을 하거나 Veilog로 칩 설계를 한다면 몰라도 되겠습니다. 그러나 그런류(?)의 일을 하면서도 응용 프로그래밍에 전혀 관심이 없는 것이 아니라면 무조건 알아야 합니다. 왜냐면,

HTML5에서 최초로 소프트웨어 회사들의 API가 웹 표준으로 통일되었기 때문입니다.


HTML5는 HTML5만 말하지 않습니다. HTML5, CSS, JS(JAVASCRIPT)를 합해서 HTML5라고 합니다. 정적인 부분은 HTML5, 스타일 일괄 적용은 CSS, 동적인 웹페이지를 위해서는 JAVA SCRIPT가 필요합니다. 프로그래머 입장에서 명쾌하게 말해보면, CSS와 자바 스크립트의 경우 간단히 <style> 태그, <script> 태그라고 할 수 있습니다. 임베딩 하지 않고 파일을 따로 만들어, 링크로 당겨 쓸 때는 조금 다른 이야기이지만 간단히 보면 그렇습니다. 여전히 main()이 되는 부분을 텍스트 편집기로 (*. html 파일) 편집하고 크롬같이 HTML5 표준을 잘 구현한 웹 브라우저로 열어서 실행시키는 것은 동일합니다.

그럼, 행여나 모르시는 분께 설명드리기 위해 간단히 예제를 인터넷에서 긁어 봐 봅니다.
HTML5에서 자바 스크립트와 무조건 연동해서 써야 하는 기능으로 PROGRESS BAR가 있습니다.
웬만한 응용 소프트웨어 개발자들은 소스만 보고, 바로 구조를 파악할 수 있습니다.
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_2 에 보면 HTML5(HTML5+CSS+JAVA SCRIPT)를 잘 나타낸 예제가 있습니다.

<!DOCTYPE html>
<html>
<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}
#myBar {
  position: absolute;
  width: 1%;
  height: 100%;
  background-color: #4CAF50;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
</script>
</body>
</html>


주의해야 할 점은 클라우드에서 말하는 js, 혹은 Node.js 같이 이 js(java script)와 브라우저 내부에 내장된 HTML5 용 자바 스크립트는 용어는 같지만, 분명 다르다는 것입니다. 이점만 알면,

等 이런 사이트를 통해서 태그를 익히고 스킬을 배우면 금세 HTML5 의 세계에 발을 들여놓을 수 있습니다. HTML5를 생활화하면 더욱 친근하게 느낄 수 있을 것 같습니다. HTML5는 문서에 시멘틱(의미) 요소를 담습니다. 프로그래머라면 앞으로 단순히 텍스트를 작성하지 말고 HTML5 태그를 이용해서 문서를 작성하는 습관을 들이는 것도 좋겠습니다. 왜냐면 웹뷰를 통해 모든 플랫폼을 통합하는 하이브리드 앱도 빠른 성능 향상으로, 점점 주변에 쓰고 있는 프로그램의 기본 개발 방식으로 자리 잡고 있기 때문입니다. 구글이 수십억 개의 사이트를 분석해서 시멘틱 요소를 뽑아낸 HTML5 태그라면 충분히 다른 사람과의 소통을 위해 생활 속에서 쓸 만큼 괜찮은 것 같습니다.

접근성도 뛰어나고 불편했던 모듈들을 통합한, HTML5의 미래는 밝습니다. 그러나 복잡한 시장 상황에서도 무조건 성공하리란 보장이 있을까요? 크롬북의 사실상 보급 실패와 webGL의 경우 빠른 속도로 주요 기술 목록 차트의 살위로 올라오고 있으나 native API보다 뛰어나기 힘든 부분이 있는 것 等 아직 HTML5 가 native API를 넘어 갈길은 멉니다. 그러나 크롬 OS에서 크롬 브라우저의 주요 기능들은 운영체제 내부에 넣어, 만회해 줄거라 예측됩니다. 서비스에서는 HTML5가 지원되는 브라우저를 내장하지 않더라도 기술적 가능성이 시장에서 사용자와 밀접하게 구현되고 있습니다. 웹뷰, 혹은 RESTful API를 이용하는 것이 유연한 클라이언트-서버 프로그래밍을 가능케 해 주는 사실 또한 HTML5의 미래를 밝다고 설명해 줍니다. 구글의 V8 엔진을 기반으로 한 Node.js, 페이스북에서 나온 카산드라 DB, 어도비의 PhoneGAP 等 HTML5의 미래를 지속적으로 밝혀주는, 시장에서 성공한 각 분야의 Killer Framework이 있습니다. 모두 HTML5 연관 기술입니다. 사실 이런 이유보다 HTML5의 미래를 밝게 해주는 것은 BYOD(Bring Your Own Device)로 설명되었던 과거와 같이, 사용자는 사람들과의 인터렉션을 원합니다. 특정 기술 회사의 노예가 되는 것을 원하지는 않습니다. 만약, 원한다고 해도 자신과 인터렉션을 하는 사람이 모두 특정 회사에 종속되기는 힘듭니다. 각 회사마다 자신들만의 강점을 내세워 시장에서 계속 싸워나갈 것이고, 정부 역시 시장이 잘 성장할 수 있도록 그들의 조화롭고 균형 잡힌 경쟁을 도울 것입니다.

아마 완전히 새로운 개발 패러다임(생명공학을 통한 AI 같은...)이 보편화되기 전까지 HTML5는 그 어떤 기술 스택보다 더 응용 프로그래머에게 필수적인 기술로 자리 잡고 있을 것입니다. 

댓글 없음:

댓글 쓰기

국정원의 댓글 공작을 지탄합니다.

UPBIT is a South Korean company, and people died of suicide cause of coin investment.

 UPBIT is a South Korean company, and people died of suicide cause of coin. The company helps the people who control the market price manipu...