최근 모 카페의 웹 표준에 관한 게시글에 달린 댓글을 보다가,


다음과 같은 댓글을 보았다.




(현재 저 댓글은 "테이블 레이아웃도 웹 표준인지 처음 알았네요", "웹표준에 대한 이해도가 높으시네요" 등의 '댓글의 댓글'이


달리는 훈훈한(?)결론을 내고 묻힌 게시글이 되었다.)


필자는 최근에 웹 표준, 접근성, 크로스브라우징에 관한 글을 쓴 적이 있는데, 웹 표준과 크로스 브라우징의

차이에 관한 설명도 포함되어 있다. 그 차이를 잘 구분하지 못하는 사람들이 꽤나 많은 것 같다.


그런데, 위의 잘못된 댓글 혹은 그 댓글의 댓글들을 보면, 

웹표준에 관한 정의에 대해서도 잘못된 견해들을 가진사람이 많은 것 같다.


다시말해서, 마치 웹표준=W3C 유효성 검사통과 라고 생각하는 것들이다.


웹 표준의 정의를 다시 살펴보면 다음과 같다.


-웹 표준 : W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것.


W3C 명세에 맞게 통과하는 것은, 유효성 검사기 통과와는 조금 다른 내용이다.


명세에는 html 마크업의 문법 뿐만 아니라, 각 엘리먼트의 사용 용도, 의미론적 사용 등의 내용이 함께 담겨있다.


그러므로 테이블을 레이아웃을 잡는 데 사용하는 것은, 유효성 검사기의 망을 통과 할 수는 있을 지언정,

웹 표준을 통과한 것도 아니며,


그 페이지의 푸터 밑에 자랑스럽게 'W3C validator XHTML 1.0' 같은 웹 표준 인증 마크를 달아서도 안된다.

3월쯤. 앱 개발 교육과정을 이수하기 위해 서울북부기술교육원에 면접을 보러 갔다.
면접은 스마트과 담당 강사와 면접을 보게 됬는데,. 

그때 담강 강사님이 이렇게 말씀하셨던걸로 기억한다.

"앱에는 Native App, Hybrid App, Web App이 있는데 우리 과정에서 다루는 앱은 Hybrid App, Web App을 다루게 됩니다."

다시 풀어 설명하면,

"모바일용 앱은 Native App (네이티브 앱), Hybrid App (하이브리드 앱), Web App (웹 앱) 의 세 가지로 나뉘며,
엄밀히 따져보면 웹 앱과 모바일 웹은 웹에 바탕을 두고는 있으나 차이점이 좀 있다."

라는게 결론이다.


따라서 개인적인 생각에는 모바일용 앱은 네이티브 앱, 하이브리드 앱, 웹 앱 의 총 세가지, 또는 모바일 웹과 웹 앱으로 세분화 하여 네가지로 로 나누는 것이 맞지 않을까 생각한다.



1.네이티브 앱

nativaapp.png
모바일 OS제조사에서 제공하는 개발언어를 이용하여 자신들의 제품에서만 동작되는 앱을 말함.

UI 등 앱제작에 필요한 다양한 요소가 패키지화 되어있고, 편리한 개발툴 제공 및 라이브러리나 함수들이 내장되어있어 개발이 쉽고 유지가 쉽다.
가령 애플의 iOS는 개발언어가 Objective-C이며, (안드로이드의 경우는 JAVA) 개발언어를 완벽히 모르더라도 Xcode라는 개발자툴을 제공함으로서 어느정도의 간단한 앱은 쉽게 개발할 수 있는 환경을 제공한다.

단점으로는 특정 플랫폼에서만 동작하며 앱스토어를 통해 업데이트가 가능하기 때문에 업데이트가 느린 단점이 있다.
또한 안드로이드 같은 경우는 버전 별, 제조사 별 단편화가 심각하기 때문에 (가령 제품마다 다른 해상도) 모든 제품을 지원할 수 없다.




2.모바일 웹
mobileweb.png 
모바일 웹은 모바일에 최적화된 웹사이트라고 보면 된다.
(즉, 모바일 해상도에 맞춰서 웹 사이트를 만드는 것)
웹사이트 개발방식과 거의 동일하여 별도의 개발방식이 필요하지 않고 인터넷 (또는 온라인 네트워크)에 접속이 가능하다면 어떠한 모바일 플랫폼으로도 접근이 가능하다.
하지만 모바일 플랫폼에서 작동되는 API를 통한 특화된 다양한 기능들의 활용이 불가능 하다. 이를 어느정도 해결하기 위해 Sencha Touch (센차 터치)나 jQuary Mobile (제이쿼리 모바일) 등의 프레임워크를 사용하지만 어느정도 극복 가능한 상황이지만 한계가 있다.


3.웹 앱

newss.png 
보통 모바일 웹과 웹 앱을 하나로 보는 것이 지론이지만 개인적으로는 엄연히 다르다고 생각한다.  
모바일 웹이 사이즈에만 최적화 시키고 모바일 에서의 look&feel과 UI (슬라이드라던지, 버튼이라던지.) 등은
 구현하지 않는다는 점과 달리, 
웹 앱은 웹에서 작동될 뿐 실제 앱과 같이 다양한 모바일의 look&feel과 UI를 사용한다.

4.하이브리드 앱

hybrid_120423.png

장단점 모두 네이티브 앱과 모바일 웹 (웹 앱)의 중간적인 앱이며 UI나 내부구조, 하드웨어에서 지원하는 기능을 전용 API로 앱 자체를 구성하고 컨텐츠는 웹으로 구성하여 앱처럼 실행되도록 하는 경우가 많다.

앱스토어를 통해 배포 되어야 하나 컨텐츠 등의 업데이트 등은 재배포가 필요하지 않는 등의 장점도 있지만 아직까지는 단점이 더 많다.
주변의 앱 개발자들의 이야기도 그렇고, 하이브리드 앱에 대해서 회의적이거나 반대적인 입장을 취하는 개발자들도 많은편이며 개발의 용이성이나 운영상의 입장에서 좋은평가를 받지 못하기도 한다.


(현재 페이스북은 퍼포먼스상의 문제로 네이티브 앱으로 교체되었다.)


-----------------------------------------------------------------------------


mobilef.png 

여담이지만 모바일 라이브러리중 흔히 쓰이는 sencha touch와 jQuery Mobile이 있다.


두 라이브러리는 비슷하지만 지향점은 다르다고 한다.


jQuery Mobile의 경우는 모바일 웹 혹은 웹 앱 쪽에 좀더 치중을 두는 반면,


Sencha 사의 경우는 하이브리드 앱 쪽에 좀더 치중을 두어 개발한다고 한다.


어떤 것을 이용하느냐는 개발자의 몫이지만 그 결과물은 각 회사의 지향점에


맞춰서 나오지 않을까?

Camel Casing Notation, 카멜 표기법, 또는 낙타 표기법이라 한다.


단어와 단어 사이를 점이나 공백 없이 대소문자로 구별하는 방법으로,


낙타의 혹처럼 들쑥날쑥 한 모양으로 구분한다는 것에서 이름이 유래하였다한다.


자바스크립트에서는 카멜표기법이 필수인데, 예컨대,


document.getElementById('wrap').style.backgroundSize='20px 20px'


빨갛게 칠해진 곳에서 카멜표기법이 이용된 것 보이는가?


원형을 쓰자면 getelemenybyid, background-size 겠지만


자바스크립트 프로퍼티는 특수문자를 쓰지 않기 때문에 background-size라고 쓸수 없고,

-를 지움과 동시에 그 사이를 카멜표기법으로 구분해준 것이다.



간혹 '그럼 -webkit-transition 이라던지, 앞에 엔진명이 붙는 css3 속성들은 어떻게 표기하나요?'라는


궁금증을 갖는 분들이 있다. 카멜표기법의 정의에서 생각해보면,


특수문자를 지우고 단어와 단어사이 구분만 시켜주면 되기에,


'webkitTransition' 이런식으로 간단하게 표현할수 있다.

web.png