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


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




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


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


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

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


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

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


다시말해서, 마치 웹표준=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 

자신이 만든 페이지를 모바일 기기에서 열어본적이 있는가?

web1.jpg

웹에선 잘나오는 이런화면도. 모바일에서는

mobile1.PNG 

이런식으로 자주 작게..나오는 현상이 발생한다.


이럴때 사용하는 태그가


meta태그의 viewport이다.


<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />


이렇게 한줄만 넣어주면,


mobile2.PNG 

모바일 화면에 맞춰서 나오게 된다.


또 중요한게


user-scalable인데, yes를 주면 사용자가 기기에서 화면크기를 줄이거나 확대할수있다.



아이폰의 경우 사파리에서 웹 사이트를 홈화면(=바탕화면)에 추가 할수 있다.


웹 앱의 경우 홈버튼에 추가된 형태로 이용되어지도록 의도되어 많이 개발되기도 한다.


home2.pnghome1.png  


저렇게 아이콘이 나오게되는데, 그러면 홈화면에 저 아이콘이 해당 웹앱의 모양으로 추가된다.


방법은..


<link rel="apple-touch-icon" href="Sample.png">


저번에 알아보았던 파비콘과 달리 png파일을 이용할수 있다.


참고로 아이폰3GS의 경우 57X57 사이즈를 앱 아이콘으로 이용하며


아이폰4, 아이폰4S에서는 114X114(retina)크기로 제작하면 된다.


그리고 곧 출시될 아이폰5에서는 double retina display로 228X228로 하면될거같네요.


*iOS에서 바로가기 아이콘의 경우 기본적으로 위에서 부터 아래로 선명도를 달리하여 광택효과를 주게 되는데 만약 이 효과를 금지하려면 rel에 apple-touch-icon 대신 apple-icon-precomposed 를 설정하면 됩니다.

브라우저를 이용하다보면 


fav3.png 


이렇게 탭에 웹 사이트 타이틀이 나오고


왼쪽에 아이콘이 하나 나오는데 저 아이콘을 파비콘이라 부른다.


파비콘은 브라우저마다 다르지만 타이틀 앞에도 있지만


이렇게


fav1.png fav2.png 

↑인터넷 익스플로러에서의 즐겨찾기 ↑크롬에서의 북마크


즐겨찾기,북마크,책갈피 등에서도 쓰이고 있다.


이 파비콘을 우리 웹사이트에도 적용해보려고 한다.


준비물 -> 먼저 파비콘 파일이 필요한데,


파비콘은 png,jpg,gif 등의 이미지 파일이 아닌 'ico'확장자를 가진 파일이어야 한다.


(웹검색을 하다보면 png를 ico로 바꾸는 방법이 많이 나와 있으니 참고하세요.)


필자같은 경우는 '애플웹'이라는 컨셉의 페이지를 운영하고 있으므로. 애플 아이콘을 파비콘으로 쓰고 있다.


fav4.png 


파비콘 파일을 준비했으면 각자 호스팅에 올려주시고.


<link rel="shortcut icon" href="favicon.ico" />


href 속성내에 파비콘 경로를 써주면 된다.


*파비콘은 기본적으로 루트에 favicon.ico를 쓰면 해당 페이지의


파비콘이 자동적으로 지정되지만, link 태그를 이용해 지정해 주는것이 일반적이다. 

프런트 엔드 영역에서 개발을 하다보면,

HTML, CSS의 마크업 언어만으로 코딩을 해주는 '퍼블리셔'의 파일을 넘겨 받아서 js, php등의


개발을 적용하는 경우가 많다. (물론 직접 마크업 하는 경우도 있다.)


그런데, 이 퍼블리셔라는 사람들이 만들어 놓은 파일들을 보면,


개발자로서는 참 난감한 경우가 많다.


여러가지가 있지만, 나열해보면


1.웹 표준, 접근성에 맞지 않게 코딩.


2.테이블을 이용한 막코딩


3.js, php 활용을 고려하지 않은 모양만 갖춘 코딩.


등이 있다. 


여기서 1번,2번은 개인적으로는 퍼블리셔라고 불러주고 싶지도 않은, 

기본적 소양도 갖추지 못한 퍼블리셔라고 본다. 그냥 코더라고 부르겠다.


그런데...3번은 보자. 3번 같은 경우도 정말 자주 있는 일이다. 저런 경우에는 결국

개발자가 다 뜯어서 마크업부터 다시한다. 일을 두번하게 되는 샘이다.

왜 이런 일이 발생할까? 


그렇다! 그는 html, css에도 능숙하고, 웹표준, 접근성 마크도 여러번 달아봤지만, javascript와 php의 j, p 자도 몰랐던 것이다. 내가 만든 이 html에 어떤 조작이 가해져서

어떤 효과를 내고, 어떤 데이터를 가져올지 전혀 모르는 상태에서 마크업을 하니, 오히려

넘겨받은 파일이 정상인 것이 기적인 샘이다.

(물론, js도 능숙하게 다루지만 업무적 포지션이 퍼블리셔인, 진정한 퍼블리셔 분들도 많이 계신다.)


다시 말해서, 퍼블리셔가 js나 php, jsp가 어떻게 돌아가는지 전혀 알지 못하면, 이러한 사태가 빈번히 발생 할 수 있다.

퍼블리셔는 js와 서버 언어에 대한 지식을 키우는 데 게을리 하지 않아야 한다는게 프론트 엔드 개발자로서의 입장이다.


일부 퍼블리셔는 말한다.  (그러면서 그들이 할줄 아는 것에 덧붙여 js도 할줄 아는 ui 개발자와 동등한 대우를 받기를 원한다.)


"웹 접근성, 표준 지키고 크로스 브라우징 레이아웃 마크업 하기도 바쁜데 js도 해야하나요? 내가 왜 js를 해야하나요?

그거 개발자가 하는 거잖아요?"


그러면 이렇게 답변해주고 싶다.


"그러면 퍼블리셔는 프론트 엔드 개발자가 아니네요? 똑같은 대우 해달라고 하지마세요."



바쁘다는 핑계로 자기가 왜 js를 해야 하냐고 주장하지만, 필자의 느낌은,


솔직히 말해서, js를 하고 싶지않고, 변화를 강요받고 싶지 않은 퍼블리셔가 많은것 같다.

주변에서 계속해서 js를 권유하기 때문에 js 자체게 반감을 갖고, 비하하는 퍼블리셔도 종종 보인다.

(실제로 주변 지인 퍼블리셔들의 이야기를 들어보면, js부터는 다양한 개발 방법론이 있는 언어 단계로 접어들어,

그 장벽이 결코 낮지 않다고 한다.)


 분명히 위의 말에서, '이것저것 하느라 바쁜데'라는 말은


누가 들어도 공감 할 수 있는 사실이다. 그러나 필자가 요구하는 것은 js의 업무적인 추가를 요구하는 것은 아니다.


기본적으로 js가 어떻게 구동되며, 퍼블리싱 된 제품을 어떻게 이용 하는지를 알고 퍼블리싱하기를 바라는 것이다.


퍼블리셔라는 포지션은 분명 사라질 수 없는 포지션임은 틀림 없으며, 퍼블리셔도 마크업을 전문적으로 하는


프론트 엔드 개발자의 일환임에도 틀림없다.


그러나 js만을 다루며 html, css를 무시하는 사람이 프론트 엔드 개발자가 아닌 js 코더이듯, 

html, css를 다루며 웹표준, 웹접근성 마크 다는 것을 어떤 대단한 기술을 가진 것인 냥 유세를 부리는

퍼블리셔는 프론트 엔드 개발자가 아니다. 그냥 마크업 코더일 뿐이다. 그런 사람들에겐 이렇게 말 해주고 싶다.


"표준이랑 접근성 그거 난 옛날부터 할줄 알아서 다음단계로 넘어온 거거든요?"


  • Unknown 2012.12.18 02:47

  • 지나가다 2012.12.23 01:15

    퍼블리셔가 개발자로 대접받으려면 최소한 저 위의 3개는 정말 기초적인 건데... 저 기본소양마저 갖추지 않은 경우가 허다합니다.
    현실은 할거없는 사람들 중 학원 교육이나 대충 받고 일하게 된 퍼블리셔들이 대부분이니...
    백엔드쪽에서 개발하는 저도 최근 UI/UX 등이 주목받고 있고, 웹 페이지에서 웹 어플화로의 급속한 발전 단계에 있기에 프론트엔드쪽에 큰 관심을 보이고 있지만... 현실이 이러하니 쉽게 그 분야로 진출을 못하고 있습니다.
    요즘 느끼는 것이 IT 학원들이 한국 IT를 오히려 망치고 있는 것 같아요. 전공자만큼 대접받게 하려면 장기적으로 체계적인 교육 과정을 갖추던가... 자극적인 선동 문구로 호갱 유치에 바쁘니 원...

    • 이나라학생 2012.12.23 10:07 신고

      예. 저도 지나가다님의 말에 적극 동감합니다. 모 카페에서 본 어떤 퍼블리셔는 "'웹 접근성'이 웹 개발의 궁극적 목적이다" 라는 발언도 대단한 자랑인냥 일삼더군요. 웹 프런트 엔드 개발 기술의 범위가 다양해졌음에도 우리나라는 HTML5 브라우저를 사용 할 일이 없다는 것 때문인지(IE) 웹 접근성, 표준 크로스 브라우징 등이 모든 웹 프론트 엔드 개발의 대다수 인냥 엄청난 집착을 하더군요.(오해의 여지가 있지만 이것이 중요하지 않다는 것은 아닙니다.) 실제로 외국의 웹 경향을 보면 UI/UX나 HTML5등의 신 기술이 핫이슈인것에 반하면 말입니다. 제가 모바일에 관심이 많아서 최근에 스마트폰 UX/UI에 관련된 국가기관에서 교육을 받은 적 있는데, 달마다 차비,식비, 생활비까지 모두 주는 무료교육인데, 정작 나오는 사람들의 수준은 한심하기 그지없습니다. 게다가 과정제목과 달리 단순 '퍼블리싱'을 가르치고 모바일적인 요소는 10% 정도더군요. 그렇다고 퍼블리싱을 제대로 가르치는 것도 아니니.. 저런 사람들이 퍼블리셔랍시고 취업을 하게 된다고 생각하니 웹 프론트 업계가 백엔드에 비해 무시받는 것도 이상할 것이 없다는 생각도 들었습니다. 분명 웹 프론트 엔드 영역에서의 기술과 그 다양성은 밝고 무궁무진하지만, 저런 양산형 퍼블리셔들이 계속해서 생산되는 한 우리나라에서의 웹 프론트 엔드 개발 환경의 개선은 없을 것으로 생각됩니다.

  • insook 2012.12.29 19:54

    하코사에서 글 보구 어찌어찌 여기까지 오게 되었네요
    많은 부분 공감하고 갑니다.
    새해복많이 받으세요 :-)

    • 이나라학생 2012.12.30 00:34 신고

      예 누추한곳까지 와주셔서 댓글까지 써주시니 감사하네요.
      새해 복 많이 받으세요~

  • 나그네~ 2013.01.07 13:35

    안녕하세요.... 웹퍼블리셔 와 프론트엔드 개발자로 검색하다보니 여기까지 오게 되었어욤..
    저역시 웹개발만 몇년째하고 있는데욤...
    님이 올려주신 개발이야기 쪽 글들 다 공감합니다. ㅋ
    실제로 겪어보기도 했구염.. 웹디가 코딩까진 하는데 js는 자기 영역 아니고 웹개발 영역 아니냐고 해서.... 난감해
    했던 적도 잇엇구욤.. 웹개발이라고 해서 js를 다 라이브러리로 가지고 있어 뚝닥 하면 나오는 줄 아는....
    여튼 님 글 잼있게 잘 보고 갑니다.!!!! 새해 복 많이 받으세욤.

    • 이나라학생 2013.01.07 18:53 신고

      사실 돌 좀 맞을 각오하고 쓴 글들이 많은데 제전부다 공감해주시니 기쁩니다.

  • 치프 2013.02.27 11:15

    좋은글 잘읽었습니다.

    하지만 웹개발도 일종의 팀플레이라고 저는 생각합니다.
    js 를 잘 못하는 웹ui 개발자와 일한다고 가정할경우,
    같이 psd 를 보며 어떤 마크업을 원한다고 웹개발자가 먼저 제의를 할 수 있고,
    웹ui 개발자도 동의하고 따라올 필요가 있습니다.
    작업물 넘어올때까지 마냥 넋 놓고 기다렸다가 작업물 받고 다시 웹ui 개발자한테
    마크업 맘에 안든다고 고쳐달라고하면 서로 감정싸움에 시간만 소요되겠죠...
    작업 시작전에 서로 기획서와 psd 를 보며 잠깐이나마 커뮤니케이션 한다면
    더 좋은 결과가 나옵니다.

  • EveR™ 2013.03.14 17:13

    좋은글 잘 읽고 갑니다.
    아니라학생님께서 작성하신 글에 공감합니다.
    하지만 제 블로그에서도 언급했다 싶히히 스크립트를 앞새워 HTML,CSS를 별 대수롭지 않게 보는 일반적인 UI(스크립트)개발자는 않좋다는걸 다시한번 말씀드리고 싶어요.
    저도 회사내에서 스크립트 개발자로 점점 성장하고 있지만 그러면서도 웹표준,웹접근성에 대한 공부 또한 소홀히 하지 않고 있습니다.
    아무리 퍼블리셔가 개발을 공부하고 개발자가 아무리 마크업을 공부해도 HTML,CSS,JS,서버사이드언어에 대한 접근방법에 대한 한계는 존재하는거 같습니다. 고로 개발자와 퍼블리셔간에 제일 중요한건 서로의 입장을 고려하여 최대한 협업을 어떻게 잘할지에 대한 고민인거 같습니다.

  • 지나가는사람 2013.03.27 22:26

    글 잘봤습니다. 지금 하는 프로젝트에서 웹에이전시가 들어와서 작업하는데 jquery는 들고 다니네요.
    접근성보장 마크업에서 시작해서 CSS브라우저 호환성, 화면에서 인터랙션이 일어나는 스크립트영역까지는 커버해주네요.
    퍼블리셔는 맨날 에디트플러스로 html만 만드니까...jsp같은 서버페이지로 옮길때 개발자가 html 부분부분 잘라 써야하는 건 어쩔 수 없나봐요.
    또한 상세한 부분에서 개발팀과의 R&R싸움은 끝이 없다는...ㅜㅜ

  • 진실을 말해줄게 2013.07.22 00:36

    그렇게 무시하지 마세요.
    그런 논리라면 SI 업계에서 웹 프로그래머 무시하는거 인정하시든지요.

  • 진실을 말해줄게 2013.07.22 00:37

    당신이 진짜 원하는건 자바스크립트 만지기 싫은거에요

    • 병신인가 2016.04.20 19:39

      이새낀 구글번역기 쓰나? 뭔 말도안되는소리야

  • 진실을 말해줄게 2013.07.22 00:39

    오히려 퍼블리셔들은 프로젝트 나가서 웹개발자들 뒷다마 많이 듣습니다.
    커뮤니케이션 능력이 없는 사람들이 남들 책임으로 몰아가는 전형적인 예를 보네요 ㅎ

    • 이나라학생 2013.07.22 21:47 신고

      퍼블리셔 신거같은데 떳떳하면 이름 밝히고
      논리적으로 승복시키길. 아무논리도없고 감돔도없고
      이뭐병.

  • 마요네즈송 2014.01.26 01:01

    흐음.. 이글을 보니 ㅋㅋ 제가 일하는 곳에서는 개발자가 답답한게..
    디자인의 의도를 제대로 표현하고자 js까지 코딩해서 보내는데..
    개발자들은 그런거 하지말고 디자인이나 하라고 그러네요..
    그리고 자바스크립트가 jQuery가 다인줄 아는것도 답답하고요.. ㅋㅋ

    • 이상하신분 2016.07.31 20:27

      아무리 신입 초짜 개발자라도 jQuery와 Javasript를 모르지 않습니다.
      jQuery가 지 아무리 날뛰어봤자 부처님 손바닥 안에 있는 것처럼 Javascript코드지 뭐냐는 얘기는 할 수 있어도요.

  • 퍼블리셔지만 2014.03.23 04:21

    흠.. 퍼블리셔의 문제보단 개인 마찰로 인한 원한글에 가까워 보이네요.
    퍼블리셔 자바스크립트 하고 싶어하는 사람도 굉장히 많고 잘하는 사람 굉장히 많습니다.
    나이대가 어떻게 되신 분들이랑 다퉜는지는 모르겠습니다만... 요즘은 js 다 하려하고 다 합니다.
    제 경험엔 대게 고집쌔고 그닥 능력도 없는분들이 디자이너와 퍼블리셔를 욕했습니다.
    js를 건내주면 땡큐지만 그거부터 안되니 뿔이 나기 시작한거죠. 개발자 천대받을 에이전시같은곳에 알면서 있으면서 말이죠.

  • 개발자1 2014.07.11 10:55

    저도 개발자인데 3번이 특히 공감가네요. 1,2번 같은 분들은 바로퇴출되는 경우가 많아서 그런지, 전 거의 못본듯... 3번같은 경우는 퍼블리셔분들의 나름 고충이 있다고 생각합니다. 애초에 기획자나 디자이너 개발자 퍼블리셔 4명이 같이 회의를.해야 제대로된 코드가 나오는데 대게는 그런 기획자가 1:1로 일을 진행할때가 많으니 서로 생각하는 바가 다르겠죠. 하지만 퍼플리셔분들이 개발자 입장을 최대한 존중했으면 싶은건 결국엔 거의 모든 마무리 내지는 책임을 개발자가 진다는 겁니다. 가끔 저도 책임이 너무 무거워서 퍼블리셔 내지는 js개발만 하고 싶더라구요.

  • 공부중 2014.12.26 09:44

    프론트 앤드 개발자가 무엇인지 공부하다가 들리게 됐네요.. 마지막이 말이...매우 확 꽂힙니다... 열심ㅎ ㅣ공부해야 겠어요....

  • 퍼블리셔 2015.06.05 13:45

    어느정도 공감이 가는 부분이 많네요.
    글을 읽으면서 느낀건 제대로 된 퍼블리셔와의 협업은 아니었던 듯합니다.
    전 퍼블리셔인데 개인적으로 주석에 이곳에 무엇을 뿌려달라라고만 씁니다. 그외 서로 설명할 필요가 없거든요.
    퍼블리셔라 불리는 사람이라면 대부분 저와 같은 거라고 생각합니다.
    개발자는 데이타만 뿌리면 되거든요.
    실력 있는 퍼블리셔 만나셔서 스트레스 덜 받으며 작업할 수 있길 바랍니다.

  • 2015.06.06 01:20

    비밀댓글입니다

  • 김스카 2015.06.06 01:24

    120% 공감합니다. 퍼블리셔입니다 저는.. 1,2,3을 다 갖춘 퍼블리셔와 일하기가 너무 힘듭니다. 모양만 대충 뽑아놓고 복붙하고 생각없이 코딩해놓은 사이트를 운영하려면 여간 힘든게 아니네요.. 게다가 웹 구성 3요소는 구조 표현 동작인데 ... 그 어느하나도 제대로 하는 사람 보기가 손에꼽을 정도 입니다.. ㅠㅠ. Js를 바라기 이전에 html/css나 제대로 개발했으면 하는 바램이 크네요.. ㅜㅜㅜ

    • 한마디 2016.07.31 20:33

      구조, 표현, 동작을 몰라서 하지 않는 것이 아닌 경우도 있습니다.
      너무 심하게 나누다보면, 유지보수가 더 어려워 집니다. 아무리 좋은 이상적인 기술도 상황에 따라 적용해야지 무조건 이상을 따라갈 수는 없어요.

  • 훈솔 2015.06.18 15:58 신고

    사실 퍼블리셔라는 직군이 상당히 기형적이죠

    디자이너도 아닌것이 그렇다고 개발자도 아니고...
    새로생겼다고 하지만 나누는 기준이 너무 얇았다고봐요

    전 프론트 - 백 으로 나누는걸 지향합니다.

    • 두솔 2016.08.14 03:29

      님 얘기가 옳다면, 개발자는 백단만 해야 하고 프론트단은 건들지도 말아야 하는 겁니다. 그런데 그렇게 되면, 개발 초기 이후 빠져나가는 퍼블리셔의 작업물을 누가 확인하겠습니까? 중간 역할이 없어서 개발자가 문제를 확인하고 이의를 제기해서 다시 수정될 수 있도록 조정할 수밖에 없는 겁니다. 개발 초기에 나타나는 프론트 작업물의 문제점을 발견 못 하면 개발이 안 되기 때문에 그 모든 것을 개발자들이 떠안게 되는 겁니다. 조금 더 이야기를 확장해서 덧붙이자면, 개발 기간이 끝나고 개발자도 빠지는 형태라면, 결국 프론트와 백단을 만질 수 있는 인력으로 최소화될 수밖에 없으므로 프론트와 백단 개발은 나누어지지 않는 겁니다.

  • 나그네 2016.04.25 19:49

    저도 개인적으로 작성자 분풀이로 보입니다. 개발자든 퍼블이든 서로 이해를 해야하는데 본문에서처럼 나 저거 다 할줄 알아서 넘어온건데요.... 라는 문장을 보니깐 쫌 그렇네요 ㅎㅎ... 개발자든 퍼블이든 서로의 까내리는건 안됩니다 ^^;

    • 난시소 2016.08.14 04:17

      '개발자(든)'이 아니라 개발자(던) 퍼블이(던) 서로 이해를 해야 한다는 것을 잘 아시는 분께서 작성작가 의도한 글의 내용을 분풀이로 보시면 곤란하죠.
      실질적으로 이해해야 하는 것이 무엇입니까?
      html, CSS를 다루며 웹 표준, 웹 접근성 마크 다는 것을 어떤 대단한 기술을 가진 것인 양 유세를 부리는 사람이 서로 다른 업무에 대한 이해가 높은 사람으로 비치던가요? 벼는 익을수록 고개를 숙인다는 옛 속담처럼, 작성자가 하려는 얘기도 다르지 않다고 봅니다.

      당신이 퍼블리셔라면, 한 번도 좋고 두 번도 좋으니 되돌아보시기 바랍니다.
      내 업무는 여기까지라고 선을 긋고, 뒷일은 나 몰라라 했던 적은 없었는가 생각해보시기 바랍니다.
      유세 부리는 것을 이해할 필요도 없고, 말로만 이해를 외치는 것도 이해가 아닙니다.

  • 개발자 2016.07.18 23:45

    퍼블리셔 작업물에 JS까지는 하는거 안 좋게 생각하지 않습니다.

    그런데 말이죠, 경력 꽤나 된다는 퍼블리셔도 딱 자기가 하는 선까지에요.

    퍼블리셔가 외주다 보면, 참 난감합니다.

    일단 화면에만 잘 작동하면 퍼블결과물 나오고 끝이라는 마인드가 있어요.

    그걸 끝까지 완성해나아가야 하는 개발자는 빡칠 때가 한 두번이 아닙니다.

    API를 여러개 사용하다보면 호환성 문제가 있습니다. 그런데 그런 호환성 문제를 충분히 확인하지 않았거나 API 사양만으로는 요건에 충족하지 못하거나 실제 개발 과정에서의 데이터 연동에서의 어떠한 문제점이 있는지 확인도 안 하더군요.

    위에 댓글 중에 마요네즈송님의 예화처럼 잘 모르실 수 있는데요, 그러니 JS하지 말라는 모 개발자의 심정이 이해가 가는 겁니다.


자바스크립트는 객체 중심 언어이다.


그래서 자바스크립트는 항상 변수를 만들고, 그 변수에 인스턴스(객체형 혹은 자료형 변수)를 생성하여 담아서 이용하는 것으로 부터 시작된다.

자바스크립트의 데이터 타입의 종류는 요약하면 다음과 같다.


-숫자(number)

 ex ) var no = new Number(); (기본 값은 0)

-문자열(string)

 ex ) var str = new String();

-참거짓(boolean)

 ex ) var isTrue = new Boolean();(기본 값은 false)

-객체(object) 

  ex ) var obj = new Object();

-함수(function)

 ex ) var func = new function(){};

-배열(array)

 ex ) var arr = new Array();

-정규식(regexp)

 ex ) var reg = new RegExp();


그런데, 이 객체들을 생성 할 떄 

우리는 생성 연산자 'new'를 이용하여 생성 한 후, 그 다음 라인에

생성한 객체(혹은 자료)에 대한 정보를 추가로 담는 식으로 활용한다.


여기까지가 자바스크립트에서의 변수의 유형과 생성 방법이다.


그런데, 자바스크립트와 같은 객체 중심, 혹은 지향 언어에서는 객체의 리터럴(literal) 표기법을 지원하게 되는데,

이 리터럴이라는 것의 사전적 의미를 보면 '문자 그대로의' 라는 의미이다.

즉, (위에서 예제를 살펴봤던 순서대로) 자바스크립트에서 리터럴 표기법을 살펴보면 다음과 같다.


var no=3;

var str='';

var isTrue=true;

var obj={nation:'korea',age:15};

var func=function(){
}

var arr=[];

var reg=/[a-z]/g;


사실, 우리가 흔히 써오던 변수를 선언하고, 데이터를 담는  일반적인 방식이다.

그런데, 이렇게 쓰면 무언가 정규적이지 않고, 비 공식적인 것 같으며, 심지어

성능을 저하하는 코딩을 하고있다는 느낌이 들기도 한다.


위의 방식처럼 'new' 연산자를 이용하여 먼저 객체를 만들고, 그 값을 수정 해 나가는 것이

정규적이고, 절차를 지키는 방법이며, 성능 향상에 기여하는 것처럼 보인다. 


하지만 우리가 생각 한 것과 다르게 리터럴 표기법은 비 정규적인 (흔히 말하는 야매)도 아니고,

성능 저하를 불러오지도 않으며, 코드는 더 짧으며, 엔진의 해석 속도 면에서도 오히려 더 빠르다.


몇가지 장점이 있는데, 우선 코드가 더 짧으며, (몇 바이트, 몇 라인이라도 줄지 않겠는가?),

자바스크립트 인터프리터의 해석분량도 줄어들며,(데이터를 생성 함과 동시에 담는다. 위의 생성방식으로는 먼저

생성을 한 후, 데이터를 한땀한땀 담아야 한다.) 더 쉽고,  더 빠르다.(실제로 소위 말하는 모던브라우저들의 엔진에서는

자바스크립트의 리터럴 표기법에 대한 최적화가 되어있다고 한다.)


조금은 복잡한 내용이지만 동적 데이터 접근에 대한 호환성도 제공한다.

(이는 new 연산자를 이용하여 인자를 동적으로 제공 할 시 문제가 생기기도 한다는 이야기가 있다.)


어쨌든 결론은 '생성자 사용을 지양하고 리터럴 표기법을 사용하자'라는 것이다.


JavaScript event.keyCode 자바스크립트 이벤트 키코드표


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

키코드표

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

←(백스페이스) = 8

TAB = 9

ENTER = 13

SHIFT = 16

CTRL = 17

ALT = 18

PAUSEBREAK = 19

CAPSLOOK = 20

한/영 = 21

한자 = 25

ESC = 27

스페이스 = 32


PAGEUP = 33

PAGEDN = 34

END = 35

HOME =36

←(중간) = 37

↑(중간) = 38

→(중간) = 39

↓(중간) = 40

INSERT = 45

DELETE = 46


0 = 48

1 = 49

2 = 50

3 = 51

4 = 52

5 = 53

6 = 54

7 = 55

8 = 56

9 = 57


A = 65

B = 66

C = 67

D = 68

E = 69

F = 70

G = 71

H = 72

I = 73

J = 74

K = 75

L = 76

M = 77

N = 78

O = 79

P = 80

Q = 81

R = 82

S = 83

T = 84

U = 85

V = 86

W = 87

X = 88

Y = 89

Z = 90


윈도우(왼쪽) = 91

윈도우(오른쪽) = 92

기능키 = 93


0(오른쪽) = 96

1(오른쪽) = 97

2(오른쪽) = 98

3(오른쪽) = 99

4(오른쪽) = 100

5(오른쪽) = 101

6(오른쪽) = 102

7(오른쪽) = 103

8(오른쪽) = 104

9(오른쪽) = 105


.(오른쪽) = 110

/(오른쪽) = 111

*(오른쪽) = 106

+(오른쪽) = 107

-(오른쪽) = 109


F1 = 112

F2 = 113

F3 = 114

F4 = 115

F5 = 116

F6 = 117

F7 = 118

F8 = 119

F9 = 120

F10 = 121

F11 = 122

F12 = 123


NUMLOCK = 144

SCROLLLOCK = 145

=(중간) = 187

-(중간) = 189

`(왼쪽콤마) = 192

\(중간) = 220


비록 IE 6,7의 득세(?)로 인하여 display:inline-block을 사용 할 일은 많지 않지만,


native style이 인라인 블럭인 요소를 다루며 겪었을 몇가지 이슈를 소개하고자 한다.

(img, input 등이 있다.)


인라인 블럭 요소라 하면,


글자 그대로, 인라인 요소의 특성과 블럭 요소의 특성을 합쳐 놓은 요소라 할 수 있다.


다시말해서,


블럭 요소의 '면적 가질수 있는 것과 마진 패딩 등의 특성'과

인라인 요소의 줄바꿈 되지 않고 텍스트 처럼 취급 특성 (엄밀히 말하면 텍스트도 인라인이다. 요소가 아닐뿐..)


을 가진 요소가 인라인-블럭 요소라고 볼 수 있다.


근데 이 인라인 블럭을 다루다 보면 겪는 문제가 있다.





위 네모 박스들은  50X50의 인라인 블럭(span) 요소들이다.


분명히 마진, 패딩에 0을 주었는데 위와 같이 간격이 벌어진다.


무슨 짓을 해도 소용 없다.


우연히 부모 요소에 font-size:0을 주니 붙는다. 왜 이러한 현상이 발생할까?


십중 팔구 다음과 같이 마크업 되어 있을 것이다.


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


<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>


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

그렇다! 저 공백은 '엔터 한칸' 때문에 발생하는, inline-block은 텍스트 이기 때문에, 스페이스를 무시하지 못해서


발생하는 문제인 것이다. 스페이스 한칸은 font-size에 비례해서 나타나기 때문에,


font-size가 0이라면 스페이스도 0 처리되어 공백이 사라졌던 것이다.


여러가지 해결 방법이 있겠지만, 굳이 들여쓰기를 해야한다면 다음과 같이 코딩 하는 방법도 있다.


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


<span></span

><span></span

><span></span

><span></span

><span></span

><span></span> 


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


그러나 필자라면..그냥 다 붙여서 쓰고만다.