이 책은 기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자를 대상으로 한다. HTML, CSS, 자바스크립트 영역별로 ‘더’ 깊이 있는 개발 내용을 다룬다. 단순히 작동하는 서비스가 아닌, 다양한 기기에 최적화되고 검색 엔진에 잘 노출되며 사용자 경험을 고려한 웹을 설계하는 방법을 안내한다. 또한 인공지능 기반 솔루션을 활용하는 실용적인 인사이트를 제시한다. 이 책을 통해 웹 개발 모범 사례를 접하고 시니어 프런트엔드 웹 개발자에게 기대하는 실무 기술을 익혀 더 나은 웹을 구축할 수 있다.
저자소개
저자
고승원
24년 차 개발자이자 컨설턴트, 창업가, 작가, 번역가, 유튜버, 강사, 임팩트 투자자 등으로 활동하는 N잡러이다. 다수의 국내외 글로벌 기업 ERP 시스템을 구축하는 프로젝트에 참여했고 20개가 넘는 해외 도시에서 일한 경험이 있다. 다섯 번의 창업을 거쳐 현재는 회사 세 곳의 일원으로 일하며 끊임없이 도전하는 삶을 살고 있다.
HTML, CSS, 자바스크립트를 배웠다고 해서 효율적인 웹을 개발할 수 있는 것은 아니다. 더 나은, 더 실력 있는 웹 개발자라면 사용자를 끌어들일 수 있도록 검색 엔진에 잘 읽히는 웹을 개발해야 한다. 그리고 다양한 기기 환경에 최적화된 웹, 쉽고 빠르며 필요한 콘텐츠를 우선으로 제공하는 웹을 개발해야 한다. 이 책은 이러한 웹을 개발하는 데 반드시 알아야 할 실무 기술과 노하우를 제시하여 더 나은 개발자가 되도록 돕는다.
[서평] 더 나은 웹 개발을 위한 가이드(고승원 지음, 한빛미디어) :: 프런트엔드 웹 개발, 실무 기술 노하우
"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."
기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자
HTML, CSS, 자바스크립트 '더' 깊이 있는 개발
사용자 경험을 고려한 설계 예시
실무 지식과 사례
더 빠르고, 더 잘 읽히는 웹사이트 구축
올해 초에 개교하여 근무하게 된 대안학교의 홈페이지를 만드는 걸 도와주다가 깊이 좌절하고 있습니다. 아주 기초적인 HTML, CSS, 자바스크립트 지식을 가지고 선의로 시작하기엔 너무 거대한 일이었습니다.
부트스트랩과 그누보드를 이용해서 만들어보았는데 만들면 만들수록 디자인은 보기에 안 좋고, 기능은 기능대로 점점 엉망진창이 되어갔습니다. 여름방학 기간을 이용하여 대폭 손을 볼 계획이었는데 때마침 만난 책이 있습니다. <더 나은 웹 개발을 위한 가이드>. 책 제목만 놓고 보아도 저에게 딱! 필요한 책이라는 생각이 들었습니다.
이 책의 목차는 대략 다음과 같습니다.
1장. 웹은 어디에나 있다
2장. 웹 개발을 위한 라이프 사이클
3장. 더 나은 HTML 개발
4장. 더 나은 CSS 개발
5장. 더 나은 자바스크립트 개발
6장. 타입스크립트: 자바스크립트에 타입을 더하다
7장. 사용자 기기에 따른 고려사항
8장. 더 나은 웹 개발자 되기
9장. 개발 환경 구성
1장과 2장을 통해 아주 기초적인 웹 기술에 대한 부분과 웹 개발을 위한 전반적인 과정을 이해할 수 있었습니다. 저는 그런 기획 과정도 모르고 무작정 만들기 시작해서 아주 중요한 과정을 놓치고 있었는지도 모릅니다. 기획이 정말 중요한데...
3장은 HTML에 대한 이야기가 나오는데, HTML 문법을 소개하는 책이 아니라 브라우저가 HTML은 어떤 과정으로 랜더링 하는지를 소개하며 웹 요소를 최적화하는 전략에 대해 알려줍니다.
<b> 태그와 <strong> 태그 둘다 글씨가 진하게 나오길래 굳이 구분하지 않았었는데 이 둘 사이에도 다른 의미, 의도를 가지고 있다는 것도 처음 알았습니다. 아무튼 이 외에도 제가 고려하지 않고 있던 많은 것들이 고려해야할 대상들이라는 걸 깨닫게 되었습니다.
4장은 CSS, 5장은 자바스크립트에 대한 이야기입니다. 지금 저의 가장 큰 고민이 데스크탑과 모바일에서 모양이 다르게 나타나는 문제들인데, CSS 부분을 공부하면서 이 문제들을 점차 고쳐나가고 있는 중입니다.
특히 반응형 웹, 그리드 시스템에 대해서 더 깊이 공부해볼 수 있었습니다. 기존에 그냥 부트스트랩을 가져다 사용하기만 해서 문제가 생겼을 때 디버깅이 어려웠는데 원리도 조금 더 자세히 알 수 있었습니다.
자바스크립트에서는 메모리 관리 부분이 인상 깊었는데, 여전히 저에겐 어려운 부분이긴 했습니다. 여러 자바스크립트 라이브러리를 가져다 사용하다보니 웹페이지 로딩이 느려지는 문제들도 있었는데... 정말 공부해야 할 게 많습니다.
제가 제일 관심있게 봤던 부분은 "7장 사용자 기기에 따른 고려사항" 부분이었습니다. 각 사용자 층에 따라 고려하는 내용들(클릭 이동 시간 단축, 키보드 이동 요소 지원)이 있다는 건 정말 처음 알았습니다. 이렇게 디테일한 분야였다니! 그리고 가장 충격적(?)이었던 부분은 이것이었습니다.
"이전에는 웹을 이용하는 주 사용 기기가 데스콥이었기 때문에 데스크톱용 웹을 먼저 디자인 한 후 이를 바탕으로 모바일용 웹을 작업했습니다. 그러나 스마트폰 사용량이 데스크톱 사용량을 넘어선 이후 모바일용 웹을 테스크톱용보다 먼저 설계하는 것이 대세가 되었고 이를 모바일 퍼스트라고 합니다(p.316)"
이런 흐름도 모르고... 일단 데스크탑 디자인을 완성하느라 열심히 애를 쓰고 모바일 버전은 방치하고 있었다니... 여름방학에는 모바일 버전을 먼저 고민해서 작업해봐야겠습니다..
이 책은 웹 개발자가 되기 위해 준비해야할 기초 HTML, CSS, 자바스크립트 기술이나 문법을 가르쳐주는 책이 아닙니다. 대신 웹 개발을 위해 우리가 고려해야할 것들, 더 빠르고 잘 읽히는 웹사이트 구축을 위한 기술들에 대해 가르쳐 주는 책입니다.
웹 개발을 준비하고 있다면 꼭 읽어보면 좋을 것 같습니다. 그래야 저 처럼 무모하게 도전해서 실수하고 실패하는 경험을 줄일 수 있을테니까요.
개발이라고 하면 많은 비중을 차지하고 있는것이 웹개발입니다. 흔히 SI 라고 합니다. System Integration 즉 하나의 정보시스템을 구축하는 것이라고 할 수 있습니다. 흔히 웹개발이라고 말하는것들이 이것 입니다.
현재 SI에서 프로젝트를 진행하면서 각 일정에 맞쳐서 스케줄을 진행하고 있습니다. 이 책은 SI의 전반에 대한 진행 상태를 물론
흔히 많이 쓰이는 많은 부분을 책에서 말해주고 있습니다. 이제는 개발자를 시작하고 웹개발 분야를 시작한다면 무조건 추천하는 교재가 아닌가 싶습니다.
실무에서 얻은 지식들이 여기에 많은것이 적혀져 있고, 현재모르는 부분도 적혀져 있어서 더욱더 나은 개발자가 되기 위해서 이책은 꼭 필요한 부분이라고 생각합니다.
유튜브에서 코딩영상을 보다보면 알게 되는 개발자의 품격이라는 채널이 있습니다. 이 책의 저자 고승원 개발자님의 채널 입니다.
보다 좋은 지식을 늘 올려주시고 있습니다. 그리고 확실히 개발의 기초부터 생태계 그리고 개발의 도움이 되는 영상들로 구성되어 있습니다. 개발자를 꿈꾸거나 주니어 개발자라면 꼭 한번씩 보기 바랍니다.
더나은 개발자를 위한 가이드는 HTML CSS 그리고 프론트앤드로 다양하게 구성되어 있습니다. 그리고 하나하나 사용자의 요구조건이 어떻게 흘러가고 웹개발의 생태계에서 어떻게 진행되는지 자세히 적혀져 있습니다. 우선 웹개발을 위해서는 DOM 구조를 아는게 주중요한데 이러한 과정이 잘 적혀져 있습니다. 그러면서 시작되는 HTML, CSS, JS 프론트앤드의 중요한 것이 적혀져 있습니다. 특히 비동기 방식의 다양한 적혀져 있습니다.
흔히 개발를 맨처음 시작하면 화면에 보여지는 부분을 수정하고자 웹사이트 창에서 F12 단축키를 이용하여 이렇게 CSS 부분을 볼수가 있습니다. 그러면 이미지와 마찬가지로 다양하게 나오는데 저것이 무엇이고 어떻게 설정할수 있는지 알 수가 있습니다.
HTML, CSS를 바꾸기전에 웹에서 먼저 테스트를 해볼 수가 있는데 더 나은 웹개발자를 위한 가이드에는 이러한것들이 자세히 적혀져 있습니다.
빌드와 배포에대해서도 자세히 설명되어 있습니다. 현재 프로젝트내에서 빌드와 배포를 담당하고 있는데 매일 정혀진 시간의 빌드와 배포를 맞쳐 공유하면서 개발의 단계를 올리고 있습니다. 이로인해서 많은 구성원들이 자신이 만든 웹의 기능등을 확인할 수 있습니다. 현재는 실무에서 배웠지만 더 나은 웹개발자를 위한 가이드가 있었더라면 보다 빠르게 이해하고 생태계를 알고 배울 수 있었을것이라고 생각합니다. 그리고 웹개발 프로젝트가 단위테스트, 통합테스트, 인수테스트, 시스템테스트 순서대로 가지고 거기서 쓰이는 많은 용어들이 있습니다. 웹개발자를 위한 가이드에는 이러한 사실들이 하나하나 자세히 적혀져 있습니다. 그래서 더나은 웹개발자가 되기위해서 꼭 필요한 교재라고 할수가 있습니다.
웹개발자를 위한 가이드에는 스크립트의 중용성을 강조하고 우리가 잘 모르는 어려운promise,async,await확실히 이해시켜주기 위해 적혀져 있고 어떻게 적용해야되는지도 기입되어 있습니다. 그렇기 때문에 어떻게 공부를 해야되는지 알 수가 있습니다
현재 대세라고 불리워지는 타입스크립트의 설명을 물론 하나하나 자세히 적혀져 있어서 이책을 꼭 보시길 적극 추천합니다.
그외의 사용자기기의 따른 고려사항을 이용하여 개발를 하는 방법이 적혀져 있습니다. 사용자마다 통신기기가 다르고 그외따라서 새로운 제약이 있습니다. 그렇기 때문에 어떻게 하나하나 구성하고 하는것인지를 알 수가 있습니다. 그리고 웹개발을 통해 구축된 사이트를 유지보수, 관리가 용이한 설계 기법까지 적혀져 있어서 실력있는 웹개발자로 성장하기에 좋은 교재 입니다.
웹개발의 기본주식을 알고 한층 더 성장하고 싶은 개발자가 있다꼭 이 책을 통해서 더나은 개발자가 되기 바립니다.
#웹개발 #웹개발자를위한가이드 #개발자의품격 #한빛미디어 #고승원 #웹개발교재 #웹개잘책 #개발자책개발이라고 하면 많은 비중을 차지하고 있는것이 웹개발입니다. 흔히 SI 라고 합니다. System Integration 즉 하나의 정보시스템을 구축하는 것이라고 할 수 있습니다. 흔히 웹개발이라고 말하는것들이 이것 입니다.
현재 SI에서 프로젝트를 진행하면서 각 일정에 맞쳐서 스케줄을 진행하고 있습니다. 이 책은 SI의 전반에 대한 진행 상태를 물론
흔히 많이 쓰이는 많은 부분을 책에서 말해주고 있습니다. 이제는 개발자를 시작하고 웹개발 분야를 시작한다면 무조건 추천하는 교재가 아닌가 싶습니다.
실무에서 얻은 지식들이 여기에 많은것이 적혀져 있고, 현재모르는 부분도 적혀져 있어서 더욱더 나은 개발자가 되기 위해서 이책은 꼭 필요한 부분이라고 생각합니다.
유튜브에서 코딩영상을 보다보면 알게 되는 개발자의 품격이라는 채널이 있습니다. 이 책의 저자 고승원 개발자님의 채널 입니다.
보다 좋은 지식을 늘 올려주시고 있습니다. 그리고 확실히 개발의 기초부터 생태계 그리고 개발의 도움이 되는 영상들로 구성되어 있습니다. 개발자를 꿈꾸거나 주니어 개발자라면 꼭 한번씩 보기 바랍니다.
더나은 개발자를 위한 가이드는 HTML CSS 그리고 프론트앤드로 다양하게 구성되어 있습니다. 그리고 하나하나 사용자의 요구조건이 어떻게 흘러가고 웹개발의 생태계에서 어떻게 진행되는지 자세히 적혀져 있습니다. 우선 웹개발을 위해서는 DOM 구조를 아는게 주중요한데 이러한 과정이 잘 적혀져 있습니다. 그러면서 시작되는 HTML, CSS, JS 프론트앤드의 중요한 것이 적혀져 있습니다. 특히 비동기 방식의 다양한 적혀져 있습니다.
흔히 개발를 맨처음 시작하면 화면에 보여지는 부분을 수정하고자 웹사이트 창에서 F12 단축키를 이용하여 이렇게 CSS 부분을 볼수가 있습니다. 그러면 이미지와 마찬가지로 다양하게 나오는데 저것이 무엇이고 어떻게 설정할수 있는지 알 수가 있습니다.
HTML, CSS를 바꾸기전에 웹에서 먼저 테스트를 해볼 수가 있는데 더 나은 웹개발자를 위한 가이드에는 이러한것들이 자세히 적혀져 있습니다.
빌드와 배포에대해서도 자세히 설명되어 있습니다. 현재 프로젝트내에서 빌드와 배포를 담당하고 있는데 매일 정혀진 시간의 빌드와 배포를 맞쳐 공유하면서 개발의 단계를 올리고 있습니다. 이로인해서 많은 구성원들이 자신이 만든 웹의 기능등을 확인할 수 있습니다. 현재는 실무에서 배웠지만 더 나은 웹개발자를 위한 가이드가 있었더라면 보다 빠르게 이해하고 생태계를 알고 배울 수 있었을것이라고 생각합니다. 그리고 웹개발 프로젝트가 단위테스트, 통합테스트, 인수테스트, 시스템테스트 순서대로 가지고 거기서 쓰이는 많은 용어들이 있습니다. 웹개발자를 위한 가이드에는 이러한 사실들이 하나하나 자세히 적혀져 있습니다. 그래서 더나은 웹개발자가 되기위해서 꼭 필요한 교재라고 할수가 있습니다.
웹개발자를 위한 가이드에는 스크립트의 중용성을 강조하고 우리가 잘 모르는 어려운promise,async,await확실히 이해시켜주기 위해 적혀져 있고 어떻게 적용해야되는지도 기입되어 있습니다. 그렇기 때문에 어떻게 공부를 해야되는지 알 수가 있습니다
현재 대세라고 불리워지는 타입스크립트의 설명을 물론 하나하나 자세히 적혀져 있어서 이책을 꼭 보시길 적극 추천합니다.
그외의 사용자기기의 따른 고려사항을 이용하여 개발를 하는 방법이 적혀져 있습니다. 사용자마다 통신기기가 다르고 그외따라서 새로운 제약이 있습니다. 그렇기 때문에 어떻게 하나하나 구성하고 하는것인지를 알 수가 있습니다. 그리고 웹개발을 통해 구축된 사이트를 유지보수, 관리가 용이한 설계 기법까지 적혀져 있어서 실력있는 웹개발자로 성장하기에 좋은 교재 입니다.
웹개발의 기본주식을 알고 한층 더 성장하고 싶은 개발자가 있다꼭 이 책을 통해서 더나은 개발자가 되기 바립니다.
학교 프로젝트, 업무상 필요하여 아주 작은 html 페이지 하나 개발 등 대부분 조금은 거쳐간 경험이 있을 것이다.
하지만, 업무로 웹 개발로 뛰어든 개발자는 많지 않으며,
특히 모던 웹 개발에 들어서면서 제대로 이것을 이해하고 개발자는 드물다.
그렇다고 이해조차 안해도 되는 영역은 아니다.
내가 어떤 형태의 개발자라 하더라도 Google, StackOverflow를 경험하는 것은 아주 빈번한 일일 것이다.
이것을 경험하는 데 사용하는 것이 바로 웹 아닌가.
수많은 블로그 페이지, 이 글을 작성하고 보고 있는 이 페이지도 웹으로 작성되어 있다.
이렇게 많은 부분이 웹과 연관되어 있는데, 그런 웹을 외면하면, 설령 의도하지 않았다고 하더라도 다른 사람들에게 폭 넓은 개발자라는 평을 듣기는 어려울 것이다.
이런 웹에 대해서 폭 넓은 시각을 갖도록 도와주는 책이라고 생각한다.
> 책에 대한 간단한 정보
이 책이 주는 지식의 스펙트럼에 비해 표지는 다소 심심해보인다.
단순 에세이를 보여줄 것만 같은 표지이지만, 내용은 그렇지 않다. 기대를 갖게 만들도록 표지도 그렇게 제공되었으면 하는 아쉬움이 있다.
> 인상깊은 부분들
이 책을 통해 얻을 수 있는 것들
이 책의 저자는 확실히 체계적인 성향을 가진 것 같다.
이 책의 특징 및 대상 독자에 대해 명확하게 알려주고 시작하기 때문이다.
물론 저 내용만으로는 어떤 것을 알려주는지 사실 크게 와 닿지 않을 수도 있다.
제대로 이 책의 매력을 알기 위해서는 결국 책의 내용을 봐야만 한다..
웹 개발 라이프 사이클 전반
웹 개발에 대한 라이프 사이클을 말하고 있지만, 이것은 일반 서비스 개발과 유사하다.
애플리케이션을 개발하는 입장에서도 이런 유사한 형태로 개발을 진행하기 때문이다.
그래서 더 이해가 잘 되었다.
이런 단계를 적절하게 소화하지 않거나 무시하고 넘어간다면, 그 다음 단계에서는 매우 힘든 시간을 보내게 될 것이다.
각 단계에서 담당자들이 해야 할 역할들이 있기 때문이다.
이것을 업계 용어로는 R&R(Roles & Responsibilities)라고 하며, 각자의 역할에 소홀하거나 다음에 하면 될 것이라는 생각으로 넘겨버릴 때, 제품의 퀄리티는 급격하게 낮아질 것이다. 결국 생산의 맨 끝에 있는 개발 단계에서 고스란히 그 몫을 책임지게 될 것이기 때문이다.
웹 개발에서 빼놓을 수 없는 브라우저
모든 제품이나 서비스는 전달되는 개체에 사용되는 클라이언트는 매우 중요하다.
애플리케이션이라고 하면, 모바일 기기 및 설치되는 애플리케이션이 그에 해당하겠지만, 웹 서비스 개발은 그 역할을 브라우저가 담당하고 있다. 클라이언트를 직접 설치할 필요가 없다는 것이 장점임과 반면 그 클라이언트를 이해하지 못한다면 직접 건드릴 수 없는 클라이언트가 되므로 개발이 매우 어려워질 것이기 때문이다.
그런 브라우저에 대해 구조적으로 이해를 할 수 있도록 도와준 부분은 매우 인상적이었다.
웹 개발을 한다고 하면, js, typescript, html, css 등의 사용법에 대해서만 주구장창 설명하고 알려하지, 그것을 구동하는 브라우저에 대한 이해는 뒤늦게 인지하는 경우가 많기 때문이다.
하지만, 이 부분에 대한 이해를 소홀히 한다면 아마 이유도 모른 채 컨텐츠가 매우 늦게 delivery 되는 현상을 보고도 해결을 못할 것이다.
최적화 중 하나
여러 최적화 하는 방법에 대해서 나온 부분도 있었다. 그 중 prefetch는 인상적이었는데, 미래에 사용될 것으로 예상되는 리소스를 미리 캐싱의 목적으로 다운로드 하는 역할을 담당하기 때문이다.
렌더링을 차단하지 않기 때문에 main thread에 부하를 주지 않을 것이고, 사용자에게는 쾌적하다는 인상을 남길 것이기 때문에 좋은 기법이 될 것이라고 생각한다. 이 외에도 몇 가지 방법을 소개하고 있는데, 내가 웹 개발자라면 매우 소중한 정보가 될 것 같다고 생각한다.
코드의 실재 부분
이 책의 특징 중 하나인데, 웹 개발을 하기 위한 개념적인 전반에 대해서 다루는 것 뿐 아니라 코딩에 대해서도 말하고 있다는 사실이다.
그 중 코딩 컨벤션에 대해서 말하고 있는데, 일반적인 컨벤션을 아는 것은 매우 중요하다.
내 코드를 개발할 때 체계적으로 작성할 수 있을 뿐 아니라, 다른 사람의 코드를 볼 때에도 빠르고 이해도를 높이는 데 도움이 되기 때문이다.
이 부분으로 이 책이 더 괜찮다는 생각을 갖게 만들어 주었다.
뒷 표지
웹 사이트를 개발할 때 흔히 말하고 있는 부분이 아닌, 다른 부분에 대해서 말하고 있다.
생각보다 앞 뒷 표지에 그런 부분이 잘 어필되고 있지는 않은 듯 하여 아쉬움이 남는다.
그래도 이 책의 제목과 같이 웹 개발을 하는 입장에서 한 계단 더 성장하고 싶다면 이 책이 반드시 도움이 될 것이다.
> 괜찮은 부분
1. 웹 개발의 피상적인 면이 아닌 핵심적인 부분에 대해 말하고 있다.
웹 개발에 대한 책을 여러 권 만나보았는데, 보통은 해당 언어의 에센셜에 대해 언급하고, 그것을 일반 언어와 대비해서 구현하기 위해 어떤 특징이 있는지. 그것을 어떻게 잘 구현해야 하는지. 최신 개발 구현 기법에 대해서 알려주는 것이 일반적이다. 하지만, 이 책은 그런 것은 접어두고(아니 이미 알고 있다고 가정하고), 그 너머 있는 지식과 그 지식 틈의 사이에 비어있는 공간을 채워주려고 노력한다. 그래서 지식의 피상적인 면을 공부하면서 알기에는 어려울 수 있는 핵심적인 부분에 대해서 알려주고 있어서 매우 좋았다.
2. 웹 개발의 최적화에 대한 개념적인 부분과 실제 코드 측면에서 설명하고 있다.
웹 개발을 진행할 때 더 나은 개발을 하려면 아무래도 최적화는 빼 놓을 수 없다. 그래서 필요한 각 요소에 대해 말하다보니 ARIA(Accessible Rich Internet Applications), 웹 이미지, 웹 비디오, 웹 오디오 최적화, 렌더링 최적화 등에 대해서 잘 할 수 있는 방법을 말하고 있는 한 편, 자바스크립트 메모리 관리, 코딩 컨벤션 등 실제 코드 측면에서 어떻게 개발하는 것이 최적화를 할 수 있는지 도와주고 있기도 하다. 이런 부분은 온라인 강의나 직장 선배에게 배울만한 부분인데 이런것을 책으로 알 수 있다는 점이 매우 좋았다.
3. 핸드북으로 들고 다니기에 부담이 없다.
이 책의 매우 좋은 부분인데, 핸드북으로 들고 다니기 어렵지 않을 정도로 가볍과 얇다. 하지만 내용이 가볍다는 것은 결코 아니다. 단지 들고다니기에 부담이 없을 뿐이다. 책이 알차다는 뜻이다. 저자의 깊은 고민과 노하우가 잘 담겨있다고 생각한다.
> 아쉬운 부분
1. 이 책을 처음 접할 때엔 어떤 것을 기대할 수 있는지에 대해 감이 오지 않을 수 있다.
이런 종류의 책을 흔히 볼 수 있는 것은 아니다. 그래서 이 책에서 어떤 내용을 말하고 있는지 감이 쉽게 오지 않는다. 그래서 코드를 알려주겠다는 것인지, 아니면 개념적인 학습을 도와주겠다는 것인지 책을 1/3쯤 읽었을 때에는 감이 오지 않았다. 하지만 절반이 넘어가면서 어느정도 이해가 되었으며, 다시 이 책의 앞부터 살펴보게 되었다. 책의 구성이 좀 더 명확하게 보여졌다면 좋았을 것 같다. 제목이든, 뒷표지이든 말이다.
2. 책의 흐름에 대해 로드맵 역할을 하는 가이드가 있었다면 좋았을 것 같다.
이 책의 서두에는 로드맵이 별도로 없다. 저자가 의도했다면 그 또한 이해해야겠지만(전체를 보라는 의도), 그래도 요즘같이 바쁜 시대를 살고있는 개발자들에게 좀 더 잘 읽히려면 이 책의 전체적인 흐름을 알려주고 있다면 내가 지금 어디쯤 오고 있는지 알 수도 있을 것 같다. 반드시 필요한 부분은 아니겠지만, 무엇을 어떤 순서로 말하는지 궁금한 사람에게 도움이 될 것 같다.
IT 기술에서 제일 빠르게 변하고 있는 영역은 어디일까? 여러 곳이 있겠지만, 웹 UI를 구현하는 웹 프론트엔드(Front-end, 이하 FE)의 세계는 그 중에서도 특히 유명하다. 유저들과 직접 상호작용하는 FE의 세계는 정말 빠르게 변하고 있다. 하루가 다르게 새로운 기술이 쏟아진다. 어제 내가 알고 있던 기술이 내일은 레거시가 되어버린다. 여기서 변하지 않는 건, 웹은 결국 HTML, CSS 그리고 Javascript 위에서 동작한다는 것이다. 이를 잘 이해하고 활용할 수 있는 것은 중요하다. 그럼 어떻게 해야 이 기술들을 잘 활용할 수 있는 걸까? 이 책이 그 해답을 줄 수도 있겠다.
이 책의 주요 내용
이 책의 주요 내용은 웹 UI를 더 잘 개발할 수 있는 노하우가 담긴 책이다. 웹 UI를 만드는 FE의 핵심 기술인 HTML, CSS 그리고 Javascript를 위주로 다양한 기술과 노하우를 소개한다. 특히 FE 개발자들이 경험적으로 만나는 지식을 체계적으로 정리하는데 도움을 준다. 기술 하나하나를 깊게 다루는 건 아니지만, 평소 관심이 많지 않았다면 놓치기 쉬웠을 부분들을 잘 정리해 준다. FE 개발의 알쓸신잡, 지대넓얕이라고 할까? 각 장마다 핵심 내용을 아래에 정리해 보도록 하겠다.
1장. 웹은 어디에나 있다.
웹이 무엇인지, 웹으로 제공되는 프로그램에는 어떤 게 있는지 설명한다.
2장. 웹 개발을 위한 라이프 사이클
웹 개발이 어떤 프로세스로 이루어 지는지 설명한다.
3장. 더 나은 HTML 개발
브라우저가 HTML을 더 잘 이해할 수 있도록 최적화하는 기술을 소개한다.
시멘틱 웹에 관해서 설명한다.
각종 리소스를 최적화할 수 있는 기술을 소개한다.
4장. 더 나은 CSS 개발
CSS에서 자주 사용되는 기술들에 관해 설명한다.
CSS로 레이아웃을 잡는 방법을 설명한다.
반응형 웹을 잘 디자인 하는 방법을 설명한다.
5장. 더 나은 자바스크립트 개발
최신 자바스크립트 문법을 소개한다.
64비트 부동소수점의 정밀도에 관해 설명한다.
자바스크립트의 메모리 관리에 관해 설명한다.
Proxy 객체를 통한 단방향/양방향 데이터 바인딩에 관해 설명한다.
자바스크립트 생태계에 관해 설명한다.
6장. 타입스크립트
타입스크립트를 사용해야 하는 이유에 관해 설명한다.
타입과 인터페이스에 관해 설명한다.
컴파일 설정법을 설명한다.
7장. 사용자 기기에 따른 고려사항
웹이 구동되는 여러 가지 하드웨어에 따른 최적화 기술을 소개한다.
8장. 더 나은 웹 개발자 되기
현시대에서 웹 개발자가 필요한 역량과 기술을 소개한다.
9장. 개발 환경 구성
웹 개발자가 필요한 각종 프로그램의 설치법을 정리하였다.
이 책을 읽으면 좋을 사람
이 책은 기본서는 아니다. 웹 개발의 모든 내용을 다루지 않으므로, 이것으로 기본을 공부하기에는 내용이 부족하다. 내용 자체는 어렵지 않으나, 알면 플러스 알파가 되는 내용들이 주로 나온다. 기본기를 충분히 쌓은 웹 개발자가 디테일을 살리기 위해 이 책을 공부하면 좋다고 생각한다. 여기서 말하는 기본기란, FE 기술들에 전반적인 내용을 이해하고 있고, 이를 활용해 프로덕트를 개발해 본 경험이 있는 것을 말한다.
2년 차 이상의 개발자
이 책을 통해 그간 스택오버플로, 블로그를 전전하며 쌓았던 경험적인 지식을 정리할 수 있을 것이다.
면접을 준비중인 FE 개발자
취업이나, 이직을 준비 중인 개발자라면 좋은 레퍼런스가 될 수 있다.
면접관으로 참석하는 개발자에게도 유용할 것 같다. 괜찮은 질문 리스트를 뽑아낼 수 있을 것이다.
사수가 없는 주니어 FE 개발자
취업했더니 나 홀로 개발을 해야하는 안타까운 FE 개발자가 본다면, 좋은 가이드라인이 될 수 있을 것이다.
다만 기본기는 충분히 있는 상태에서 도전해 보는 걸 권장한다.
나가며
이 책을 읽고 느낀 점은, 저자가 기술을 잘 이해하고 있다는 것이 느껴졌다. 기술에 대해 담백하고 소개하고, 명료하게 정리해 주는 것이 좋았다. 설명이 쉽고, 분량이 많지 않았기 때문에 짧은 시간에 지식을 정리할 기회라서 좋았다.
다만, 내가 느끼기에는 불필요한 내용이 많았고, 또 개론적인 내용이 많아서 중급서로써는 살짝 부족하지 않나 하는 생각이 든다.
목차에서는 관심있는 4장 더 나은 CSS 개발에서 <레이아웃을 만들기 위한 CSS>을 먼저 읽어 봤습니다.
flexbox 레이아웃
flexbox는 웹 화면의 공간 분할과 콘텐츠가 담길 공간의 크기 및 배분 그리고 콘텐츠에 대한 배치 순서를 빠르고 쉽게 정의해주는 레이아웃 모델입니다.
flexbox를 다루려면 flexbox를 구성하는 2개의 축인 주축과 교차축을 먼저 이해해야 합니다.
flexbox를 적용하기 위해서는 스타일 속성 중 display의 속성 값을 flex로 사용합니다.
.container{
display: flex;
}
.container{
display: flex;
flex-direction: column;
}
grid 레이아웃
css 그리드 레이아웃은 2차원 형태의 구조입니다. flexbox가 한 방향, 즉 가로면 가로, 세로면 세로만 할 수 있는 1차원 레이아웃 시스템 이라면, 그리드 레이아웃은 행과 열을 동시에 배치할 수 있는 2차원적인 레이아웃 시스템입니다. 그리드 레이아웃에서 하나의 그리드는 여러 개의 열과 여러 개의 행으로 구성되며 각 행과 행 사이, 열과 열 사이에 있는 공백을 gutter라고 합니다.
float 레이아읏
float 레이아읏을 사용해서 웹 페이지의 레이아웃을 만드는 방법은 가장 오랫동안 사용되었습니다.
flexbox, 그리드 레이아웃이 CR 단계이기 때문에 아직까지는 float를 사용해서 만든 코드를 많이 접하게 됩니다.
시맨틱 요소를 사용한 레이아읏
시맨틱 요소란 요소 자체가 의미를 갖는 요소입니다.
header, nav, section, footer 등
웹 표준에 맞게 웹피이지를 제작하기 위해서 시맨틱 태그를 사용하고 있습니다.
flat 레이아웃과 시맨틱 요소를 사용한 레이아웃을 많이 사용하고 있는데 좀 더 간편한 flexbox 레이아웃을 적용해 보는 것도 좋을 것 같습니다.
알고 있는 지식에 <더 나은 웹 개발을 위한 가이드>를 읽어 보니 개념도 잘 잡히고 활용해 볼 수 있는 내용도 많아서 도움이 될 것 같습니다.
이 도서는 책 제목 그대로 더 나은 웹 개발을 위해 필요한 지식과 실무 팁을 얻을 수 있는데요.
한 번 처음부터 끝까지 완독해 보니까, 프런트엔드 웹 개발자 뿐 아니라 웹 기획자나, 백엔드 개발자도
한 번쯤 꼭 읽어볼 만한 것 같았어요.
웹 애플리케이션 개발을 시작하기 전, 또는 개발 후 해야 하는 전체적인 과정도 초장에 다루고 있는데요.
회사를 다니면서 실무를 경험해 보신 분들은 이 과정에 대해 잘 아시겠지만,
따로 웹 개발을 공부하시는 분들은 이 부분도 자세히 읽어두면 좋을 것 같아요.
더 나은 웹 개발을 위한 가이드 도서에서는 상세 실무 팁도 제공하는데, 특히 요즘 이미지 없는 웹사이트는 거의 없죠?
그럴 때 도움이 되는 이미지를 최적화하는 방법! 이 부분 유용했어요.
이미지 최적화를 왜 해야 하는지 어떤 이점이 있는지에 대한 설명은 물론,
이미지 유형별로 권장하는 크기와 비율도 알려주고 있어서 개발 시 많은 도움이 될 것 같습니다.
그러한 내용 외에도 중요한 개인정보 보호법에 관한 내용, 그리고 갈수록 발전되는 인공지능 시대에 개발자에게 필요한 역량은 무엇이고 어떻게 그 발전 속도에 대응해야 하는지에 관한 내용. 이 부분은 특히 더 자세히 읽게 되더라고요.
그리고 이 도서는 어느 정도 웹 개발 지식이 있는 독자를 대상으로 하지만 책 종장에서 vs 코드 설치나, 유용한 확장 프로그램 소개도 하고 있어서 갓 공부를 시작한 분들께도 두루두루 도움이 될 것 같습니다.
여하튼 주니어 웹 개발자 혹은 이제 막 html, css, 자바스크립트를 배우고 공부를 시작한 개발을 꿈꾸는 분들은 한 번쯤 <더 나은 웹 개발을 위한 가이드> 책을 꼭 한번 읽어보길 추천해 봐요. 웹 기획부터 개발, 운영을 어떻게 해야 하는지 전체 웹 개발 사이클을 다루고 있으니 진짜 진짜 꼭 한 번쯤 읽어보면 도움이 될 것 같습니다.
** 본 리뷰는 한빛미디어 <나는 리뷰어다> 리뷰어 활동으로 도서만을 제공받아, 리뷰어의 주관적인 견해로 작성된 리뷰입니다. **
프런트엔드 개발에 대한 기본 지식은 갖추고 있지만 더 깊이 있는 개발자가 되고 싶은 주니어 개발자들에게 추천할만한 책이 나왔습니다. 이 책 "더 나은 웹 개발을 위한 가이드"는 웹 사이트 구축과정에 대한 실무 지식과 더불어 해당 웹 사이트의 실사용자를 위한 고려사항까지 웹 개발 라이프 사이클과 관련한 주제들 전반에 대하여 다루고 있습니다. 웹 개발에 필요한 프로그램 지식에 더하여, 웹 사이트 개발 기획부터 운영까지 웹사이트 구축에 필요한 거의 모든 과정을 아우르고 있어, 웹 개발 프로젝트를 대하는 전체적인 시야를 탑재해 주는 책입니다.
아래 목차와 간략한 요약을 보는 것만으로도 더 나은 웹 개발 경력자가 되기 원하는 개발자들에게 이 책이 왜 필요한지 알 수 있습니다.
1장 - 웹은 어디에나 있다
웹 페이지는 브라우저를 통하여 이용할 수 있습니다. 웹브라우저는 데스크톱이나 스마트폰을 넘어 키오스크나 자동차 대시보드에도 설치되고 있습니다. 웹은 OS마다 별도로 개발할 필요가 없기 때문에 그 사용 영역이 점점 더 확장되어 가고 있습니다. 단순히 웹이 문서로서 기능하던 시대를 지나 다양한 디바이스와 사용자들을 연결해 줄 수 있어야 합니다.
2장 - 웹 개발을 위한 라이프 사이클
웹 사이트를 개발하는 과정 즉 웹 기획 및 개발, 운영 등 관련 과정 전반에 대하여 고찰합니다. 본격적인 개발작업 전에 고려해야 하는 프로세스들과 개발 후 테스트 및 배포과정에 대해 알아 봅니다.
3장 - 더 나은 HTML 개발
브라우저가 웹 페이지를 렌더링하는 과정과 주요 HTML 태그들 관련 각각의 최적화 방법을 자세히 설명하여 개발단계에서 좀 더 효율적인 웹페이지 렌더트리를 설계할 수 있도록 하는 아이디어를 제공합니다.
4장 - 더 나은 CSS 개발
기본적인 CSS 사용방법에 대한 설명으로 시작하여 레이아웃 구성방법에 대해 구체적으로 설명합니다. 더불어 고급수준의 CSS 사용방법에 대한 주제를 다룹니다.
5장 - 더 나은 자바스크립트 개발
수많은 자바스크립트 프레임워크와 라이브러리들은 웹 어플리케이션 개발을 빠르게 진행할 수 있도록 해 주었습니다. 하지만 실제 개발한 웹 페이지에서 사용되지 않는 많은 코드를 로드하게 되어, 웹 페이지가 필요이상으로 무거워져서 적정한 성능을 보장할 수 없게 되기도 합니다. 따라서, 어떠한 라이브러리나 프레임워크를 쓰지 않는 순수 자바스크립트인 '바닐라 자바스크립트'에 관심을 가져야 합니다 등과 같은 자바스크립트 관련 여러 주제들에 대하여 알아 봅니다.
6장 - 타입스크립트: 자바스크립트에 타입을 더하다
웹브라우저에서 타입스크립트를 바로 실행할 수는 없습니다. 자바스크립트로 컴파일하는 과정이 필요한 타입스크립트를 적극적으로 도입해야 하는 이유에 대해 설명합니다.
7장 - 사용자 기기에 따른 고려사항
웹페이지가 구현되는 디바이스를 데스크탑, 모바일, 키오스크, 모빌리티 서비스 등으로 나누어, 각각의 디바이스에서 중점적으로 고려해야 하는 UI/UX에 대하여 살펴 봅니다.
8장 - 더 나은 웹 개발자 되기
노코드, 로우코드, 인공지능 등과 관련하여 개발자에게 필요한 역량에 대해 살펴 봅니다.
9장 - 개발 환경 구성
비주얼 스튜디오 코드 설치 방법, Node.js 설치 방법을 안내 합니다. 그리고, HTML CSS 자바스크립트와 관련하여 비주얼 스튜디오 코드 사용시 유용한 확장 프로그램들을 추천 합니다.
더 빠르고 더 잘 읽히는 웹페이지에 사용자가 더 많이 유입되고, 더 오래 머무르게 됩니다. 프런트엔드 웹 개발과 관련하여 더 이용하기 쉽고 더 나은 웹사이트를 구축하기 원하는 개발자들이 한걸음 더 앞으로 나갈 수 있는 제대로 된 인사이트를 제공하는 책입니다.
가장 큰 장점 첫째로 쉽게 쓰여진 책 입니다. HTML,CSS,자바스크립트 를 모두 다루다 보니 초보자가 읽기에도 내용들이 유기적으로 연결되며 이해하기 좋았습니다. 대신 많은 내용들을 다루다 보니 다양한 예시 및 설명보단 짧게 압축해서 비교 및 설명하는 부분이 많아 한번 보면 내용들을 놓치기 쉬워 보였습니다.
개인적으로는 전체적으로 다루는 내용들을 훝어 보면서, 궁금했거나 놓친 부분이 많아 보이는 부분에 포스트잇으로 표시를 하며 빠르게 본 뒤에, 각각의 표시한 내용을 출퇴근 시간 등에 꼼꼼히 읽어보시는 방법을 추천 합니다.
조금 더 익숙해지신 분들이라면 저자가 강조한 3~6장 각각의 장을 반복해서 읽어 보시면 발견하는 부분이 점점 더 많아지는 것을 발견하실 수 있습니다.
본 포스팅은 한빛미디어 나는리뷰어다를 통해서 도서를 제공받아 작성되었으며 구매가이드(도서소개) 성격이 강합니다.
하반기인 7월도 중순을 넘어 하순으로 이동하고 있다. 더위가 시작되었고 여름 휴가철의 직전이 되겠다. 지난 상반기를 돌아보면, 3년 이상이 흐른 것 같아서 굉장히 짧게 느껴졌으며 작년 9월부터 있었던 예기치 않은 PC하드웨어 고장이 각종 가전제품 고장으로 확대되면서 어렵고 힘든 시간을 보내야 했다. 하반기를 진짜 열심히 살아야 되겠다는 생각을 해 보게 되었던 그런 하루하루 아니었을까 생각해 보게 된다.
상반기에는 새롭게 하게 된 업무에 적응하느라 도서 서평을 많이 진행하지 못했고 해야 할 도서 서평도 진행조차 하지 못한 도서가 여러 권에 이르고 있다. 앞으로 업무가 숙달되면 도서 서평 및 다른 분야 활동도 많이 하려고 한다. 최선의 노력을 다하려고 하니 많은 기대와 성원을 부탁드리겠다.
필자가 HTML 언어를 처음 배웠을 때만 해도 웹이 앞으로 어떻게 발전해서 어떤 형태로 발전할 지를 전혀 알지 못했다. 그냥 저냥 HTML 언어만 대단히 무식하게 배웠다. 그래서 알고 잇는 HTML 언어라는 것은 하나도 없이 20여 년을 보내야 했다. 필자로서는 웹 프로그래머니 웹 개발자니 더 나가지 못하고 책만 잔뜩 구매하는 바람에 지금까지도 다른 학문과 함께 계속 “아픈손가락” 으로 남아 있는 것이다.
이렇게 20여년을 그냥 흘려보낼 수가 없어서 필자는 무엇이라도 하고 싶었지만 여러가지 문제가 생겨서 결국 웹 개발에 대해서 배울 수 없었고 실의에 빠져 있을 무렵 “더 나은 웹 게발을 위한 가이드” 라고 하는 책과 마주하게 된 것이다. 필자가 웹 개발을 소홀히 하려고 했을 때 그 책이 출간됐다는 이야기이다.
“더 나은 웹 개발을 위한 가이드” 를 잘 읽고 분석해보니 필자가 그동안 의지가 부족하고 책에 대한 지나친 욕심을 부려서 화를 불렀다는 사실을 알게 되었다. 얼굴엔 온통 책 욕심으로 가득했던 필자의 과오가 이 책을 보니 드러나게 된 것이다. “더 나은 웹 개발을 위한 가이드” 는 더 빠르고, 더 잘 읽히는 웹사이트 구축을 위한 모든 것에 대해서 다뤘다고 해도 과언은 아니겠다.
이 책은 기본적인 프론트엔드 웹 개발 지식을 갖춘 개발자를 대상으로 한다. 따라서 웹에 대한 초보자 및 이제 웹 개발을 막 시작하는 분들에게는 조금 어렵고 힘들 수 있을 것이다. 초보자 HTML, CSS, 자바스크립트 영역별로 ‘더’ 깊이 있는 개발 내용을 다루고 있는 책이다. 단순히 작동하는 서비스가 아닌, 다양한 기기에 최적화되고 검색 엔진에 잘 노출되며 사용자 경험을 고려한 웹을 설계하는 방법에 대해서 잘 설명하고 있는 책이다.
도서 소개를 마치면서
“더 나은 웹 개발을 위한 가이드”는 또한 현재 챗GPT로 인해 관심이 큰 인공지능 (AI) 기반 솔루션을 활용하는 실용적인 인사이트를 제시해 주며, 이를 통해 웹 개발 모범 사례를 접하고 시니어 프론트엔드 웹 개발자에게 기대하고 요구하는 실무 기술을 익혀서 더 나은 웹을 구축할 수 있다.
이 책은 웹 개발을 위한 라이프 사이클, 더 나은 HTML, CSS, 그리고 자바스크립트 개발, 자바스크립트에 타입을 더한 타입스크립트, 그리고 사용자 기기에 따른 고려사항이 다루어져 있다. 필자는 타입스크립트에 대한 정보가 부족해서인지 타입스크립트가 어렵게 느껴졌을 뿐 그 외에는 아는 내용이어서 쉽게 접근할 수 있었다.
이 책은 HTML, CSS, 자바스크립트를 배운 독자들이 사용자를 끌어들일 수 있도록 검색 엔진에 잘 읽히고 다양한 기기 환경에 최적화되며 쉽고 빠르며 필요한 콘텐츠를 우선으로 제공하는 웹을 개발할 수 있는 방법을 알려주는 책이다. 필자 입장에서 보면 더 이상 아픈손가락 이 아닌 웹 개발자의 스페셜리스트로 성장하기 위해서 꼭 필요한 책으로 이해가 될 때까지 여러 번 인내심을 가지고 읽어보려고 한다.
웹 개발에 필요한 다양한 지식을 전달해주고 있다. 책을 읽으면서 이전에 읽었던 오늘부터 IT를 시작합니다가 생각났는데 관련 없는 비전공자들이 읽기 편한 책이었다면 더 나은 웹 개발을 위한 가이드는 현장에서 일하는 IT관련자들이 읽기 좋은 책이라 생각된다. 뭐랄까 굳이 비유를 하자면 '오늘부터 IT를 시작합니다'의 심화 편? 웹 개발의 시작부터 끝까지를 다루고 있고 깊이 있는 부분도 언급하고 있어 읽으며 재미있었다.
프런트앤드가 어떤 일을 하는지 업무에서는 어떤 식으로 접근해야 하는지 기획, HTML, CSS, JS까지 개념적인 부분부터 실제 활용하는 방법까지를 거의 총망라한 느낌이다. 덕분에 깊이는 약간 아쉽지만 전체적인 웹 프로젝트에 대한 이해가 부족한 입문, 초보가 참고하기에 좋은 책이라 생각되며 한 사람 몫을 하는 중급자부터는 좀 더 넓은 시야를 가질 수 있는 가이드가 아닐까 생각된다.
이 모든 작업들은 결국 사용자를 위한 작업이다. 본인이 만들어서 본인만 만족하고 자신만의 팬층을 두고 서비스 하는 제한적인 서비스로 끝난다면 전혀 상관없지만 결국 사용자가 모든 작업물의 끝에 위치한 작업인 만큼 사용자에 대한 이해가 필요함을 언급해 준다. 업계력이 부족한 분들이 보시기에 적합한 책이라 생각되며, 누군가를 가이드해야 하는 위치에 막 들어선 분들에게도 도움이 될 것 같은 책이다.
고승원 저자의 "더 나은 웹 개발을 위한 가이드"를 살펴볼 기회를 가졌습니다. 웹 개발에 진보를 꿈꾸는 개인으로서 이 책은 제 기대를 뛰어넘어 초보자와 숙련된 개발자 모두에게 귀중한 자료가 될 것이라고 확신하게 되었습니다.
첫 장부터 작가의 전문성이 모든 페이지에서 빛을 발한다는 것을 알 수 있습니다. 이 책은 광범위한 주제를 다루며 웹 개발의 기초적인 측면부터 고급 기술까지 독자들을 안내합니다. 이 가이드의 진정한 차별점은 주제에 대한 총체적인 접근 방식입니다. 단순한 시각적 고려 사항을 넘어 장애가 있는 사용자를 위한 접근성의 중요성을 강조합니다.
이 책의 부인할 수 없는 강점 중 하나는 웹 개발에 필요한 다양한 도구와 기술에 대한 귀중한 통찰력을 제공한다는 점입니다. 이 책은 브라우저 구조와 렌더링 프로세스를 철저히 탐구하여 독자가 코드를 최적화하고 사용자 경험을 향상시킬 수 있도록 도움을 줍니다. 또한 저자는 반응형 웹 디자인의 영역을 탐구하여 다양한 장치와 화면 크기에 맞는 반응형 웹 사이트를 만드는 방법을 효과적으로 알려 줍니다.
이 책의 분량도 적당해서 흥미 있는 개발자는 단숨에 읽어버릴지도 모르겠습니다. 자바스크립트에 대해서는 바닐라 자바스크립트로부터 ES2022 최신 구문까지 다루고 있어서 최신 정보까지 접할 수 있습니다. 기본과 최신 지식까지 두루 섭렵할 수 있는 기회를 가질 수 있을 것입니다.
이 책을 읽은 후 제 웹 개발 기술에 의심할 여지없이 성장이 따라왔습니다. 이제 반응형 디자인의 핵심 요소인 브라우저 구조, 렌더링 프로세스, 뷰포트, 미디어 쿼리에 대해 좀 더 잘 이해할 수 있게 되었습니다. 또한 웹 접근성의 중요성을 느끼고 웹 접근성이 모든 개인의 사용자 경험을 향상시키는 방법에 대해 아이디어를 얻게 되었습니다.
결론적으로 웹 개발에 관심이 있는 모든 분들께 이 책을 진심으로 추천합니다. 초보자에게는 탄탄한 토대를 마련해 주고 숙련된 개발자에게는 귀중한 통찰력을 제공합니다. 책 전반에 걸쳐 드러나는 작가의 풍부한 경험과 지식은 이 책을 정말 유익하게 읽을 수 있게 해줍니다. 이 책을 다 읽고 나면 웹 개발의 기초를 다질 수 있을 뿐만 아니라 인상적인 웹 애플리케이션을 만드는 데 필요한 도구와 기술을 갖추게 될 것입니다.
프런트엔드 개발자로서 구미가 당기는 제목의 책입니다. "웹 개발"을 위해서 알아야 할 것이라면, 정말 많은 분량의 책을 써야 하겠지만, "더 나은 웹 개발"이기 때문에, 일종의 고급 기능이라고 할만한 것들을 선정해서 설명하고 있습니다. 웹, HTML, CSS, 자바스크립트, 타입 스크립트, 그리고 올해 초 상당히 뜨거웠던 AI에 의해 파생된 주제인 노코드, 로우코드에 대한 이야기들이 나오네요.
제 경우 웹 개발에 대한 책을 꽤 오래 읽어왔기 때문에, 이 책에서 이야기하는 주제들을 어디선가 한 번쯤은 봤던 주제들이긴 합니다. 하지만, 인간은 망각의 동물이고, 저는 그중에 거의 극단에 있는 존재이기 때문에, 이런 책을 읽을 때마다 '아하 그랬었지'라는 혼잣말을 되뇌며 읽게 되는 것 같습니다.
장님과 코끼리
저는 책을 읽을 때, 장님이 코끼리를 만진다는 이야기를 자주 하는 편입니다. 아시겠지만 원래 이 비유는 대상에 대해 한 단면만 보는 좁은 시야를 빚 대어하는 말인데요. 저는 장님이 꾸준히 코끼리 전체를 만져보는 걸 상상하곤 합니다. 물론, 다리만, 코만 허리만 만지는 장님이라면, 코끼리를 파악하기 힘들겠지만, 코끼리 전체를 계속해서 만지는 장님이라면, 언젠가는 코끼리를 멀찍이 보는 사람보다 코끼리에 대해서 더 잘 알게 될 겁니다.
그래서, 제가 주로 하는 일에 대한 책은 눈에 띄면 읽으려고 노력하는 편입니다. C나 C++을 사용할 때는 주기적으로 도서관에 가서 관련 책을 빌리고, 또 책을 사서 읽었고, 자바스크립트로 업무를 보기 시작할 때는 도서관에서 자바스크립트 책을 모조리 다 빌려다 읽었습니다. 프런트엔드 업무를 하면서부터는 프런트엔드 개발에 관련된 책이라면 난이도를 떠나서 모조리 다 읽으려고 노력하죠.
소프트웨어 개발 분야에서 프런트엔드 분야는 정말 빠르게 변하는 분야 중 하나입니다. 그러다 보니, 프런트엔드 개발 책을 꾸준히 읽으면서는 점차 자라나는 어린 코끼리를 하나씩 더듬더듬 만지는 것 같은 느낌을 받게 됩니다. 그런 면에서 이 책은 꽤 흥미롭습니다. "웹 리소스 최적화"라든지, "웹 접근성" 같이 중요하게 다뤄야 하고 변화가 많은 것들을 주제로 삼고 있거든요. 사실 처음 웹 개발에 대해서 책을 읽기 시작하던 몇 년 전에는 눈에 띄지 않는 주제였거든요.
이제는 많이 알려졌지만, css에 flex, grid 같은 개념도 이해하기 쉽게 그리고 깔끔하게 정리하고 있습니다.
개발자의 미래
가장 흥미를 끌었던 주제는 뭐니 뭐니 해도 AI가 개발자라는 직업에 어떤 영향을 미치게 될지에 대한 이야기가 아닐까 싶습니다. 저자는 개발자라는 직업이 사라지지는 않을 거라 단언합니다. 대신 copilot 같이 코딩을 돕는 툴들을 개발자가 사용하게 될 거라는 식으로 설명하고 있습니다.
저도 이 주제에 대해서 꽤 많이 생각해 보았는데요. 저자의 견해에 동의합니다. 일단, AI도 일종의 "기술"이라는 걸 염두에 둬야 합니다. 그러니, AI는 인간을 대체할 수는 없습니다.
하지만 우리가 하던 작업의 방식을 상당히 바꿀 겁니다. 이미 많은 사람들이 확인했지만, AI 만으로 업무를 하는 것보다 인간이 AI와 협업하는 방식의 업무가 훨씬 효율이 좋은 것으로 나타났거든요. 즉 AI 발전으로 만들어진 도구를 사람이 사용하는 방식으로 발전하게 될 겁니다. 그 대표적인 예가 이 책에서 언급된 copilot입니다. github에서 만들고 있는 이 도구는 개발자가 원하는 코딩하는 도중 어떤 코드를 넣어야 할지 제안해 주기도 하고 주석으로 어떤 알고리즘을 구사하는 코드를 만들어 달라고 하면 그걸 해주기도 합니다.
이 책에서 이 부분을 읽으면서, 저는 수학자 푸앵카레가 했다는 말이 생각났습니다. <직관의 두 얼굴>이라는 책에서 저자는 "증명은 논리에 의해, 발견은 직관에 의해 이루어진다"라는 말을 "푸앵카레"가 했다고 전하고 있습니다.
푸앵카레는 많은 업적을 남긴 수학자인데요. 개발자들과 같이 "지식 노동자"였다고 할 수 있습니다. 푸앵카레는 자기 일을 어떻게 하면 효율적으로 할 수 있는지도 꽤 고민했던 것으로 보이는데요. 인간의 뇌가 작동하는 방식을 두 가지로 나눈 것으로 보입니다. 그건 바로 논리와 직관이지요. 여기에 푸앵카레는 논리를 직관보다는 좀 "단순 업무"같은 식으로 활용했던 것 같습니다. 수학적인 증명을 하기 위해서는 어떻게 증명해야 하는지 직관을 통해 발견을 먼저 해야 하고, 그 발견이 참 임을 논리를 통해 증명해야 하거든요.
재미있는 건, 이런 두뇌의 활동을 애자일의 프랙티스에서 응용하고 있다는 것입니다. 바로 "짝 프로그래밍"입니다. <실용주의 사고와 학습>에서 앤디 헌트는 코딩의 전체 방향을 보는 네비게이터와 코딩을 직접 하는 드라이버로 짝 프로그래밍의 역할을 설명하고 있는데요. 네비게이터가 "R 모드"라는 뇌의 활동 모드를 사용한다고 말합니다. 그리고 여기서 R 모드는 "직관"을 사용하는 두뇌의 작동 방식입니다.
짝 프로그래밍이 효율적이 되는 이유는 개발자가 혼자서 드라이버와 네비게이터로 번갈아가며 코딩을 해 나가야 하는걸, 두 사람이 분담했기 때문입니다. 드라이버에서 네비게이터로 바꿀 때 컨텍스트 스위칭이 필요하기 때문에 일종의 혼선을 격을 수 있거든요. 시간도 좀 걸리고요. 하지만 그 역할을 두 사람이 나누면 상당히 효율적으로 작업을 할 수 있고, 코드의 품질이 좋아져서 각자 작업할 때보다 더 많은 작업을 할 수 있게 됩니다.
아마도, AI 툴은 드라이버 역할로 발전해 갈 가망성이 높습니다. AI라는 게 대수의 데이터에 확률을 더해서 알고리즘을 만들어내는 기술이거든요. 다시 말해 다수의 데이터, 다수의 코드가 있는 것에 대해서 도구화할 수 있다는 말이 됩니다. github에 올라가 있는 코드 다수는 코드 자체를 타이핑하는 역할을 하는 드라이버의 작업을 대체하는 도구를 만드는 AI에게는 재료가 될 겁니다. 하지만 네비게이터의 일은 다릅니다. "데이터"가 없거든요. AI가 아무리 발전해도 네비게이터 작업은 대체할 수 없습니다. 그럼 이건 인간 개발자가 해야 하죠. 다시 말해 AI가 극단적으로 발전하면 개발자 혼자서 짝 프로그래밍 하는 효율을 만들어 내는 정도로 일을 할 수 있게 해줄 수 있겠지만 개발자를 대체하지는 못하게 될 겁니다.
이 책의 저자는 오랜 실무 경험을 통해 이 부분을 간파한 것 같습니다. 그래서 개발자는 사라지지 않는다고 단언할 수 있는 게 아닌가 싶네요.
결론
앞에서 언급했지만, 이 책을 읽으면서, 자라나는 아기 코끼리를 만져보는 것 같은 느낌을 느껴볼 수 있었습니다. 변화하고 발전하고 다시 성장하는 웹 개발 영역에서 이런 지적인 재미를 주는 책들을 읽어보는 것도, 좋은 경험이 아닐까 싶네요. 몇몇 최적화 툴들은 실무에도 적용해 보고 있습니다. 마침 최적화가 필요한 시점이었거든요.
이 책은 23년 차 소프트웨어 개발자이고 스타트업을 5개나 창업하고 ERP시스템을 구축하는 컨설턴트 및 개발자로 활동하고 러닝타입스크립트를 번역했던 고승원 저자 분이 쓴 책이다.
HTML부터 시작해서 CSS뿐만 아니라 자바스크립트, 타입스크립트까지 광범위한 내용을 다루면서 핵심 스킬들을 알려주고 있다. 단순한 프론트엔드 개발자를 넘어서 더 나은, 더 실력 있는 웹 개발자라면 사용자를 끌어들일 수 있도록 검색 엔진에 잘 읽히는 웹을 개발해야 한다. 그리고 다양한 기기 환경에 최적화된 웹, 쉽고 빠르며 필요한 콘텐츠를 우선으로 제공하는 웹을 개발해야 한다. 이 책은 이러한 웹을 개발하는 데 반드시 알아야 할 실무 기술과 노하우를 제시하여 더 나은 개발자가 되도록 돕는다.
초보자는 HTML에 대해서 공부하기도 쉽지 않은데 이렇게 광범위한 내용은 초보자에게는 쉽게 포기하는 상황이 발생할 수도 있다. 하지만 개발을 하다보면 반드시 필요한 내용들이서 알고 있어야 할 내용이고 각각의 역사뿐만 아니라 최근 트렌드까지 일목요연하게 잘 정리되어 있어서 애매했던 부분에 대해 리마인드할 수 있는 기회가 된다.
이 책에서는 사용자 편의성을 생각하면서 모바일이나 키오스크 등 각각의 기기에서 주의해야 할 사항과 자바스크립트 언어의 최신 문법까지 알 수 있다. 예제들도 깔끔하게 정리되어 있어서 오랜 시간 들이지 않아도 쉽게 따라할 수 있게 되어 있다. 실습뿐만 아니라 기초 이론도 그림과 함께 설명되어 있고 책도 가벼워서 들고 다니면서 읽기에도 정말 좋은 책이다.
IT 기본 서적 중에 하나로 활용해도 좋을만큼 꼭 필요한 내용들을 다수 포함하고 있고 부담없이 읽을 수 있는 내용이어서 개발자를 꿈꾸는 사람들에게 추천해주고 싶다.
개발을 공부하고자 하는 분들을 위한 이 책, <더 나은 웹개발을 위한 가이드>는 프런트엔드 웹 개발의 핵심을 담고 있다. 이 책은 단순히 HTML, CSS, 자바스크립트의 기본 지식을 알려주는 것이 아니라, 이들을 '더' 깊이 있게 이해하고 활용하는 방법을 제공한다.
웹 개발에 있어서 중요한 것은 사용자 경험과 최적화, 그리고 검색 엔진에 잘 노출되는 웹 페이지를 만드는 것이다. 이를 위해 이 책은 다양한 기기에 최적화된 웹 페이지를 만드는 방법과 검색 엔진에 잘 노출되도록 웹 페이지를 설계하는 방법을 제시한다. 또한, 인공지능 기반 솔루션을 활용하는 실용적인 인사이트도 함께 제공한다.
이 책의 목표는 단순히 웹 개발을 하는 사람이 아니라, '더 나은' 웹 개발자가 되도록 돕는 것이다. 기본적인 웹 개발 지식을 갖춘 개발자라면 이 책을 통해 웹 개발 모범 사례를 배우고, 실무에서 필요한 기술과 노하우를 습득할 수 있다.
이 책은 다음과 같은 주요 내용을 포함하고 있다:
프런트엔드 웹 개발 라이프 사이클
다양한 기기 환경에 최적화된 웹사이트 구축
사용자 중심 웹 개발 실무 예시
사용자를 유입시키는 검색 엔진 최적화
유지 보수 및 관리가 쉬운 설계 기법
노코드·로우코드 솔루션 활용 방법
더 나은 웹 개발자가 되기 위해 필요한 인사이트
추가로, 이 책을 추천하는 다양한 전문가들의 의견을 함께 공유하고자 한다.
추천사로 데브옵스 엔지니어는 이 책에서 실무 테크닉과 저자의 풍부한 경험을 매우 높게 평가하였다. 그는 이 책이 기획부터 디자인, 그리고 개발까지 어느 한쪽으로 치우치지 않고, '더 나은 웹페이지 만들기'를 위한 저자의 노력이 돋보이는 것을 강조하였다.
프런트엔드 개발자는 이 책이 프런트엔드 개발 기본 지식을 가지고 '더' 깊이 있는 개발자가 되고 싶은 분들에게 매우 도움이 될 것이라고 말한다.
웹 개발자는 이 책이 직접 부딪히며 경험해야 하는 실무 지식과 실 사용자를 위한 고려사항까지 웹 개발에 대한 모든 것을 다루고 있다고 칭찬하였다.
시스템 엔지니어는 이 책이 사용자 경험을 고려한 설계로 '친절한 웹'의 초석을 다지는 방향을 예시와 함께 제시한다며 이 책을 강력히 추천하였다.
마지막으로, 프런트엔드 개발자는 이 책이 웹 애플리케이션 개발 전후에 반드시 진행하는 실무 프로세스와 필수 지식을 제공하며, 또한 사용자와 서비스를 연결해주는 전 과정을 구현하는 방법을 안내한다고 말하였다.
이렇게 다양한 전문가들의 추천과 함께, 이 책은 기본 웹 개발 지식을 갖춘 개발자들이 '더 나은' 웹 개발자로 성장하는 데 도움이 될 것이다. 이 책을 통해 개발자들은 다양한 기기에 최적화된 웹, 사용자 경험을 고려한 웹, 검색 엔진에 잘 노출되는 웹 등 웹 개발의 핵심을 배울 수 있을 것이다.
