|
이 책을 읽기 전에 가지고 있던 궁금증은, 웹 UI 개발이면 웹 UI 개발이지 굳이 "모바일" 웹 UI라는 것은 무엇을 말하는 것일까였습니다. 어차피 HTML에 CSS로 꾸미고 Javascript로 기능 추가해서 AJAX로 통신하면 되는것 아닌가라는 것이였죠 그렇게 의문을 가지던 차에 아주 적절한 책을 읽을 수 있었습니다. 요약하면 "모바일"이라는 것이 가지는 의미는 파편화(Fragmentation)에 대한 대응을 의미하는 것 같습니다. 저도 안드로이드 앱 개발자로서 파편화에 대한 경험은 항상 하고 있는데요, 처리가 필요하다는 것은 항상 인지하지만 막상 구현에 들어가면 수많은 상황에 대한 대응이 쉽지만은 않습니다. 마찬가지로 모바일 웹 개발도 파편화 문제를 심각하게 겪고 있습니다. 단말의 다양한 제조사, 화면 크기, OS, 웹브라우져 등으로 경우의 수를 따져보면 엄두가 안 날 지경입니다. 이 책은 크게 세 부분으로 나눌 수 있습니다. 1) 파편화로 Javascript 코드에 어떤 차이가 생기는지 2) 파편화를 실제로 어떻게 극복할 수 있는지 3) 파편화를 대응하기 위한 모바일 자바스크립트 프레임워크의 소개 그리고 웹 개발의 기본적인 내용, 즉 HTML, CSS, Javascript의 기본 문법은 다루고 있지 않습니다. 이 책의 가장 큰 장점은 파편화로 인한 생기는 여러가지 경우에 대한 상세한 정리가 되어 있다는 것입니다. 예를 들어 4~7장은 이벤트에 대한 설명인데, OS별, 단말별로 어떤 차이가 있는지를 보여줍니다. 읽으면서 이벤트의 발생 순서마저 다르다는 사실을 알고는, 모바일 웹 개발자들의 고생이 얼마나 심할지 눈에 훤했습니다. 이렇게 차이점을 정리한 후에 극복방법을 제시해 줍니다. 내용 설명뿐만 아니라 실제 코드도 충실히 포함하고 있어서 웹 개발의 경력이 짧은 분들에게도 큰 도움이 됩니다. 또한 이런 내용들을 보다 보면 저자들이 얼마나 많은 삽질을 해 왔는지 느껴지는데요, 예를 들어 10장에서 orientationchange 이벤트에 대한 설명을 하면서, 이 이벤트가 발생하지 않는 경우에는 10ms 후에 resize 이벤트를 통해 알 수 있다고 알려줍니다. 이를 비롯해서 어디에서도 찾기 힘든 깨알같은 지식들이 정리되어 있습니다. 마지막에는 파편화에 좀 더 쉽게 대응하기 위한 방법으로 모바일 자바스크립트 프레임워크를 소개하는데, 네이버에서 개발한 JMC의 소개입니다. 책에서는 꽤 분량이 되지만 자세한 내용은 담겨져 있지 않으니 따로 API 문서를 참고하시면 될 것 같습니다. 정리하자면, 다음과 같은 분들에게 추천하고 싶습니다. 1) 웹개발 경력이 짧은 분, 혹은 PC웹은 많이 해봤지만 모바일웹을 이제 막 시작하시려는 분 2) JMC로 개발을 하시려는 분 3) JMC가 아니더라도 Jquery Mobile이나 Sencha Touch 등을 사용할 예정이지만, 단순히 프레임워크를 사용하는 것이 아니라, 그 아래에서 어떤 문제들에 대해 고민하고 대응하는지에 대해 관심이 있는 분 모든 개발자들, 힘내세요! ＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞ |
|
시중에는 이미 모바일 웹 UI 개발과 관련하여 다양한 책이 쏟아져 나오고 있습니다. 하지만, 실 서비스에서 잘 활용되지 않는 기술들이 예제로 들어있거나 어려운 용어들이 나열되어 있어서 한 장을 넘기기 어려운 책이 대부분 입니다. 그런 면에서 '네이버는 이렇게 한다! 쉽고 빠른 모바일 웹 UI 개발'을초/중급자들에게 추천드릴 수 있는 장점은 다음과 같습니다.
1. 네이버에서 실제로 사용되고 있는 개발 방법이 예제로 수록 정작 열심히 배워도 어디서 어떻게 사용될지 모른다면 쉽게 잊혀지기 마련입니다. 그러나 여기서는 모든 예제가 실제 네이버에서 사용되고 있는 개발 방법들로 채워져 있습니다. 더욱이 해당 방법들이 어떻게 사용되고 있는지 그림으로 상세하게 나와 있으며, 예제 결과를 모바일기기에서 바로 확인 가능하도록 QRcode까지 지원하고 있습니다. '개발 학습 -＞ 실 기기 확인 -＞ 실 서비스와 비교' 과정을 통해서 유용한 개발방법을 빠르게 익힐 수 있습니다.
2. 자신의 난이도에 맞춰서 학습 가능 이미 모바일 웹 UI 개발에 관심이 많아서 더 높은 수준의 개발을 배우고 싶은 사람도 물론이거니와, 이제 막 발을 담근 초보 개발자 분들에게도 어렵지 않게끔 점진적으로 챕터가 설계되어 있습니다. 그리고 챕터를 반드시 처음부터 읽을 필요가 없게끔 구성되어 있기 때문에 자신의 난이도에 맞춰서 개발 방법을 배울 수 있습니다.
3. 번역도서 특유의 번역체가 없고 추후 문의 및 지원이 용이 어색한 번역체와 독자적인 용어 정의는 저자의 의도를 해치는 경우도 있고, 심할 경우에는 책 내용의 이해를 어렵게 만듭니다. 그런 면에서 저자가 말하고자 하는 바를 쉽게 이해할 수 있다는 것은 쉽게 관과할 수 없습니다. 그리고 JMC는 네이버에서 만들었기 때문에 추후 수정사항이나 업데이트가 있다고 하더라도 쉽게 파악이 가능합니다.
모바일 웹 UI 개발에 대해서 보다 전문적이고 완벽한 기술과 이해를 요구하는 사람에게는 쉽게 보일 수 있을수도 있지만, 이제 막 개발하기 시작한 초급 개발자나 다양한 기술을 접해보고 싶은 중급 개발자들에게는 아깝지 않은 서적이 될 것입니다.
＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞
|
|
모바일 웹을 개발하면서 모바일 환경, 단말기 환경에 따라 작동되고 안되는 것에 매우 지쳐있어서, 이제는 개발에 대한 셀렘보다 두려움이 더 앞서게 되었던 상태에 이 책을 보게 되었습니다. 기본적인 모바일 웹에 대한 환경설명과 동시에 문제 분석을 통해 현재 모바일 개발에 대한 이해를 도와주었습니다. 그리고 이어지는 여러가지 상황에 대한, 각 기술에 대한 설명이 곁들어져 있어 레퍼런스 책처럼 개발 시점마다 다시 보기를 통해 작업하면 편리할 것으로 생각됩니다. 이 책의 특별한 장점을 꼽는다면 3가지 정도로 꼽을 수 있습니다. 먼저, 거의 90%가 사용하는 단말기와 버젼별 정보에 대한 친절한 설명입니다. 개발자로써 테스트폰 위주의 개발이 아닌 여러버젼에 대한 고려사항을 미리 파악할 수 있어 개발하는데 편리합니다. 또한 로직의 흐름이 버젼별로 다르다는 것도 책을 통해서 처음 알게되었는데 이래서 작동이 다르게 되는구나 그리고 이것을 통합적으로 대응하려면 어떻게해야되는지에 대해 생각해볼 수 있습니다. 둘째, 간단간단하지만 직접 눈으로 보고 확인해볼 수 있는 샘플들입니다. QR코드가 이렇게 유용한 시스템인지를 깨닫게 된 책이기도 합니다. 책마다 샘플에 대한 QR코드가 제공되어지는 보통 QR코드의 사용은 문서 다운로드와 같이 부차적인 것으로 이용된 것에 반해 여기서 사용되는 것은 QR코드를 통해 샘플이 구현된 URL로 연결되어 샘플소스를 입체적으로 이해할 수 있었습니다. 셋째, 친개발자적인 책이라는 느낌이 듭니다. 이 책을 보면서 완전 초보자가 접하기에는 조금 딱딱하면이 있다고는 생각하지만 개발자가 생각하는 요소요소를 책 속에 넣어서 따로 인터넷검색을 할 생각이 안들었습니다. 앞으로 모바일 웹 개발을 할 때 많이 참고하고 유용하게 써볼 수 있는 책으로 수많은 인터넷 검색과 삽질로 투자할 시간을 아낄 수 있다고 생각합니다. 잘 보았습니다.^^ ＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞ |
|
모바일 웹에 대핸 경험이 없어, 사용자들을 위한 UI를 어떻게 구성해야 할까? 고민에 빠지다 구입한 책입니다.
책의 제목과 소개만 간략히 보고 구매했는데 사용자를 위한 UI보다는 브라우저별 특징과 스크립트를 어떻게 해야 하는지 등이 많이 나와있네요. 생각과 다른 책이지만, 그래도 처음 접하기에는 괜찮지 않았나 싶네요. |
|
본 서적은, Jindo Framework를 모바일 UI 환경에 최적화 된 Jindo Mobile Component(JMC)를 기반으로 작성된 서적이다. 기반이 되는 Javascript Framwork는 Jindo 이지만, 기본 배경 지식이나 원리는 Jindo 에만 국한되는 내용은 아니기 때문에, 모바일 웹 개발 및 UI 개발에 관심이 많은 사람들을 대상으로 추천할 만한 도서이다. 제목 그대로, 네이버의 웹 기술을 모바일에서, 어떻게 적용했는지를 살펴볼 수 있는 유일한 서적이다. 사용자들이 많이 사용하고 있는 네이버의 실서비스 요소를 분석하고 있기 때문에, 좀 더 쉽게 받아들일 수 있을 것으로 생각한다. 이전까지의 모바일 UI 서적은 특정 기능을 위한 문법이나, 레퍼런스 수준의 서적에 가까웠다면, 이 책은 내부 동작 원리가 무엇이고, 어떻게 동작하는지에 대한, 보다 세심한 설명이 돋보인다. 또한 이책의 다른 특징으로, 유용한 개발 도구에 대한 설명과 브라우저마다 어떠한 기능이 지원되고 안되는지, 어떤 이슈가 존재하는지등의 개발 관련 이슈를 상세히 설명해주고 있다. 브라우저 이슈는 개발시에, 모든 브라우저에서 테스트 해보기가 쉽지 않기 때문에, 이슈를 찾기가 쉽지 않은 부분이다. 저자들은 직접 Jindo Framework 를 개발하고 있기 때문에, 개발중 발견된 브라우저 이슈에 대한 상세하게 설명하고 있으며, 이와 유사한 개발을 진행할때 많은 시행착오를 줄여줄 것으로 생각된다. 예제 코드는 모바일 개발 서적 답게, 모바일 기기에서 QR 코드를 찍어봄으로써, 바로 실행해볼 수 있는 방식이 독창적이다. 이 책을 다 읽고 난 후에는, 네이버 모바일 서비스에서 이건 어떻게 구현되었을까 라는 부분들에 대한, 많은 부분 궁금증이 해결될 것으로 생각한다. 그리고, 누구나 손쉽게 모바일 UI 개발을 시작해 볼수 있지 않을까 기대해본다. ＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞ |
|
[네이버는 이렇게한다! 쉽고 빠른 모바일 웹 UI 개발] ＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞ |
|
국내 1위 포털인 네이버에서 오픈 소스로 제공하고 있는 자바 스크립트 프레임워크로서는 Jindo, Jindo Component, Jindo Mobile Component(JMC) 가 있으며 이 중 모바일웹 환경을 기준으로 다양한 모듈을 제공해주는 JMC에 한정하여 만든 책 이다.
|
|
모바일 시대가 도래하면서 회사에서 진행하는 각종 업무나 프로젝트들도 모바일화 되어가는 속도가 점차 빨라졌다. 갑자기 데모나 서비스 프로토타입을 모바일로 개발해야 하는데, 드넓은 초원에 던져진 토끼 같은 상황이었다고나 할까. 그러다 우연히 좋은 기회가 되어 이 책을 접하게 되었다. 이 책은 크게 4개 부분으로 나뉘어 있는데, 마치 초급-중급-고급의 단계를 차근차근 밟는 느낌이다.
1부에서는 모바일 웹과 관련된 전반적인 지식을 다룬다. 앱과 웹의 차이나, 모바일 웹을 개발하면서 마주하게 되는 각종 환경적인 문제들, 그리고 모바일 웹 개발에 사용할 수 있는 각종 프레임워크들의 특징 등을 한 눈에 확인해 볼 수 있다. 1부를 읽어보면 왠만한 모바일 웹 관련 지식들을 습득하고, 다른 정보를 찾기 위한 기초 지식으로 모자람이 없을 듯 하다.
2부부터는 책에서 간단히 설명해주기는 하지만, 기본적인 웹 개발 지식이 요구되기 시작한다. 2부에서 다루는 주요 내용은 HTML DOM 구성이나 터치와 같은 모바일 웹의 기본 이벤트, 그리고 모바일과 데스크톱에서의 이벤트의 차이점 등이다. 기본적인 HTML DOM과 이벤트 처리 지식만 있으면 2장을 이해하는데에는 크게 어려움이 없을 것이다. 하지만 여기에서 설명되는 각종 이벤트와 처리 기법 등이 뒤이은 내용들을 이해하는게 꼭 필요하므로 가벼이 여기는 것은 금물이다.
3부부터는 서서히 고급 단계로 접어드는 느낌으로, 위치 확인, 기기의 회전 확인, 고정 배너, 플리킹 등을 구현하는 use case가 설명된다. 책에서 설명된 대로 따라가면 이해하기 어려운 것은 아니나, 여기서부터는 내용도 점차 어려워지고, 코드의 양도 만만치 않기 때문에 정신을 바짝 차려야 한다. 어려우면서도, 이 부분을 읽으면서 재미있었던 것은 모바일 웹에서도 생각보다 많은 '앱스러운' 기능들을 구현할 수 있구나, 하는 생각과 동시에 그것을 구현하기 위해서 생각보다 많은 것을 고민해야 한다는 것을 알게 된 것이다. 별 생각없이 사용하던 모바일 웹과 앱의 기능들이 새삼 대단해 보인다고나 할까?
4부는 3부에서 바닥부터 직접 만들었던 코드들 중 일부를 JMC를 이용해 더 쉽고 간단하게 개발하는 법에 대해 설명한다. JMC는 Jindo Mobile Component로 네이버에서 개발해 무료로 배포하고 있는 모바일용 자바스크립트 프레임워크다. 3부에서 바닥부터 어렵게 구현했던 것들이 JMC를 통해 쉽게 구현되는 것을 보면서 새삼스럽게 프레임워크에 대한 감동은 물론, 이렇게 구현하기 위해 개발자들이 얼마나 많은 고생을 했을까 감탄스럽기도 했다.
쭉 책을 따라 읽어보면 모바일 웹 UI 개발에 대한 다양한 use case를 접하며, 미처 생각하지 못했던 고려사항들을 알게 되거나, 코딩 기법이나 알고리즘 같은 것들을 습득할 수 있어 많은 도움이 되었다. 아쉬운 점이 있다면 예시가 복잡해지면서 코드가 점점 길어지다보니, 한 눈에 흐름이 잡히지 않아 설명을 이해하는데 어려운 부분들이 좀 있었다. 저자들이 배려해 코드를 조각낸 후에 차례대로 설명해 주기는 했지만, 코드의 흐름을 아직 모르는 상황에서 코드의 자세한 설명은 오히려 해가 되는 경우가 있었다. 앞쪽의 코드에 있는 변수가 뒤쪽에 있는 코드에서 설명되는 경우도 있어, 코드 설명에 대한 부분은 큰 흐름을 파악할 수 있도록 한 후 세부적으로 파고드는 식으로 바꾸는 것을 한 번쯤 고민해주었으면 좋겠다. 그리고 간혹 차트가 흑백인데도 구분하기 어렵게 되어 있거나, 그림에서 오타가 있는 부분들이 간혹 있었다. (예를 들면 +260px 인데 -260px로 표시되어 있거나.) 이런 부분들은 다음에는 수정되었으면 좋을 것 같다.
＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞ |
|
Javascript Library인 Jindo의 실무 사용을 위해, 꼭 필요한 도서. Jindo는 오픈소스로 네이버 개발자센터에서 쉽게 받아 사용할 수 있다. (http://dev.naver.com/projects/jindo) 많은 고민을 했던 네이버의 UI구현 상의 시행착오 경험과 그로 얻은 지식을 볼 수 있다. 실무만 하다보면 궁금해지는 브라우저의 구성, 원리를 바탕으로 이에 따라 어째서 이렇게 구현하는 것이 효율적인지에 대한 논리적인 구성은 가장 마음에 드는 부분이다. 네이버는 Jindo를 사용한 동적UI를 구현하고 있는데, 프리랜서 웹 퍼블리셔인 한 친구의 말을 빌리자면 여러 라이브러리를 사용해봤지만 애니메이션 구현 후 느린 느낌이 심하여 모바일에서는 Jindo로 대체사용한 경우가 종종 있다고 한다. 효율성을 위해 고민했던 만큼 결과는 실질적인 사용에서 나타난다. 다만, 아래와 같은 몇 가지 부분이 아쉬운 점이 있다. - 흑백 그래프에서 색상만으로 구분된 그래프 선 - 마크업 예시의 접근성에 어긋나는 구성 일부 - 특정 CSS 설정이 삽입되는 구조 임의로 JS에서 삽입될 CSS 설정은 마크업 시에 다른 요소와의 영향 관계를 고려해야하는 중요한 부분이다. 이런 점에서 미리 설정하는 내용이 많을 수록, Library 사용에 따른 마크업의 자유도는 떨어지게 된다. 또, 어떤 부분에서는 GPU사용이 더욱 성능 저하를 유발하기도 하고, 어떤 곳에서는 GPU영역이 과다하게 설정되었다고 판단되는 경우도 있는데 이러한 내용은 차츰 개선되리라 기대해본다. 책은 단락별로 아래와 같은 속성이 있다. 자신의 구미와 수준에 따라 먼저 읽고 싶은 부분을 읽거나 건너뛸 내용은 건너뛰고 보아도 될 것 같다.
효율적이고 쉬운 방법에 대한 끊임없는 고민과 노력이 이 책에 담겨있다. 변화가 잦고, 유동적인 모바일 시대에 이러한 노력이 오늘의 네이버를 이끄는 원동력이 되지 않을까 생각한다. 모바일 웹 브라우저의 렌더링에 대한 이해가 없더라도, 모바일 시대에 UX/UI의 전문가가 되고 싶은 이에게는 꼭 읽어야할 필독 도서가 아닐까 생각한다. 특히, 학원만 수강한 Front-End 개발자라면 필수! ＜이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.＞ |