Do it! 프런트엔드 웹 디자인 입문

By | 2018/03/24
프런트엔드 웹 디자인 입문

프런트엔드 웹 디자인 입문

처음 웹개발에 입문한 것이 99년도, 중학생 시절 부모님께서 사주신 비싼 컴퓨터를 게임용도로만 사용하는 것이 죄송스러워 컴퓨터공부를 한답시고 HTML, Javascript라는 것을 공부했었다. 깊이 공부한 것도 아니고, 편집기로 기본 HTML소스에 여기저기 다른 사람들이 올려놓은 Javascript 소스들을 베껴 개인홈페이지도 만들어 봤었는데, 지금까지도 확실히 기억나는 것은 나는 웹 "디자인"에는 감각이 없다는 사실이다. 대학에서도 컴퓨터과학을 전공하고, 지금은 대학원까지 진학하면서 10년 넘게 컴퓨터 관련 전공으로 학교에 남아있엇지만, 그 "디자인" 감각은 쉽사리 늘질 않는다. 계속해서 학교에서만 지낸터라 웹 개발을 전문적으로 하지는 않았지만, 지금은 나름 연구목적 또는 취미로 웹서버 기반으로 동적으로 동작하는 간단한 웹사이트들을 만들고 있다. Flask 프레임워크에 제일 친숙하고, 최근에는 ReactJS를 이용하여 간단한 사진 브라우징 웹서비스를 만들어봤다. 그래도 이정도면 웹개발에서는 초급 딱지는 뗏지 않았을까 싶은데... 디자인은 확실히 젬병이다. 그래서다. 프런트엔드 웹 디자인 입문은 내가 프런트엔드 웹 디자인에 "입문"하는데 큰 도움이 되었다.

책의 초반부에서는 웹디자인 트렌드를 설명하면서, 반응형웹과 요즘 많이 쓰이는 디자인 기법 및 이론에 대해 설명한다. 미디어 쿼리란 무엇인지부터, 그리드 시스템, 패러랙스 스크롤링, 캐러셀 등. 이런 디자인 기본 이론에 별 관심이 없었는데, 여기서 많은 사실을 새롭게 알았다. 미디어 쿼리가 무엇인지는 대충 알고 있었지만, 그냥 Bootstrap의 그리드시스템의 사용법만 익히고 적절히 갖다쓰기만하는 정도였기때문에, 이를 입맛에 맞게 커스터마이징 할 엄두도 내지 못했다. 이 책에서는 미디어 쿼리의 기본부터 예시를 들어가며 잘 설명해주고 있어서 쉽게 이해할 수 있었다. 이제 필요에 따라 직접 커스터마이징해서 쓸 수 있다. 부끄럽다, 이런 기본도 모르고 있었다니.

책 중반부는 실습이다. 초반부에서 배운 이론들을 토대로, 여러가지 프론트엔드 디자인 기법들을 구현하는 방법을 소개한다. 그리드 레이아웃, 풀스크린 랜딩, 캐러셀, 웹폰트 등의 다양한 기법들을 직접 구현하거나 유명한 플러그인을 사용하는 방법 등에 대해 잘 설명하고 있다. 저자가 깃헙에 실습 소스를 다 공개하고 있고, 실습 코드들은 효과 적용 전/후 별로 따로 파일들을 제공하고 있어서 내가 하나하나씩 따라하면서 최종 결과와 비교해볼 수 있도록 준비되어있어 책 예제를 실습하기가 굉장히 편했다. HTML/CSS 기본지식만 있으면 따라하는데 지장이 없고, 각 예제도 5분안에 다 해볼 수 있을 정도로 쉽고, 유용하게 써먹을 수 있도록 예제가 좋다.

후반부는 지금까지 배운 내용을 바탕으로 실전에 돌입한다. 개발자도구를 이용한 웹사이트를 분석 하는 방법, Bootstrap을 이용한 프런트엔드 디자인구현 등이 준비되어있다. 있다. 부끄럽지만 크롬 개발자도구를 아주 오래동안 써왔음에도 불구하고, 이 책을 읽기 전까지 크롬 개발자도구에 device toolbar가 존재하는지도 모르고 있엇다. 웹사이트를 개발하면서 Responsive를 테스트 하기위해서 브라우저를 직접 크기조절해가면서 확인했었는데, 각 device 크기별로 맞춰서 볼 수 있는 device toolbar가 이미 제공되고 있었을줄이야. Bootstrap은 워낙 오래전부터 써왔던 터라 이미 익숙해서 따로 실습을 따라해보지는 않았다.

터미널/콘솔이나 좋아하고 편집기는 Vim 즐겨쓰는 탓인지 디자인 감각이 매우 부족하다. 이런 나의 디자인 감각 이슈를 해결하기 위해, 직접 웹사이트를 꾸미기보다는 이미 잘 정리된 Bootstrap을 오래동안 써왔다. 특히 Bootstrap에서 기본으로 Responsive를 구현하고 있으니 내가 직접 구현할 필요가 없어서 기반 지식에 대해 관심을 갖지 않게되고, 디자인 요소를 고려할 때도 Bootstrap에서 제공하는 기능에만 한정하여 웹사이트를 디자인해왔다. 다행히도 내가 만드는 웹사이트들이 상업적인 서비스들도 아니고, 소소하게 연구목적으로 쓰이는 경우가 대부분이라 디자인이 크게 중요하지는 않았지만, 항상 내가 이쪽에 부족하다는 생각은 갖고 있었다. 다행히도, 이 책이 나의 프런트엔드디자인 능력 확장에 큰 도움을 주었다. 여러 기본 이론들도 습득할 수 있었고, 다른 웹사이트들에서나 보던 다양한 기법들도 예제코드를 따라 직접 실습하면서, 나도 구현할 수 있다는 자신감이 생겼다. 사실 이 책 개정판이 나오기 전, 2015년도에 이 책이 나온것을 알고 장바구니에 넣어뒀었는데 나중에 보려고 게속 미루던 것이 이제까지 와버렸다. 진작에 이 책을 읽어봤다면, 내가 만들었던 웹사이트들 디자인이 훨씬 이뻐졌을텐데하는 아쉬움이 생긴다. 이제라도 이 책을 통해 업그레이드 된 디자인 내공으로 내 웹사이트들을 손봐야겠다.

웹개발 입문자들에게, HTML/CSS, 그리고 Javascript (jQuery까지 알면 금상첨화)를 어느 정도 이해했다면 이 책을 강력추천한다.