Do it! 웹 사이트 따라 만들기 - 핵심적인 팁과 원리를 알아갈 수 있는 책

Do it! 웹 사이트 따라 만들기 - HTML, CSS, 자바스크립트, JQuery, Ajax로 웹 퍼블리싱 ㅣ Do it! 시리즈
김윤미 지음 / 이지스퍼블리싱 / 2019년 11월

올해 신입 디자이너로 입사하면서 예기치 않게 약간의 웹 퍼블리싱 또한 담당하게 되었습니다. 

물론 Back-end 와 섞인 부분에서는 레거시로 동작하는 부분만 담당하고, 보통은 정적인 페이지를 위주로 진행하고 있습니다. 대형 포털사이트들의 소스코드를 뜯어보거나 구글링을 통해 독학해온 저로서는 퍼블리싱을 진행하면서 실무와 많이 다름을 느꼈습니다. 

그 와중에 이지스퍼블리싱에서 따끈따끈한 새 책의 리뷰어를 모집한다는 소식을 들었고 합격해 읽어볼 수 있었습니다. 책에 대한 전체적인 설명보다는 제가 읽고 좋았다고 생각하는 핵심적인 부분만 간추려 이야기 해보려 합니다. 

대상 

신입 및 처음 웹 퍼블리싱을 접하는 초보들에 초점을 맞춰 하나의 웹 사이트를 만들어 나가는 과정으로 구성되어 있습니다. 독학 혹은 강의를 통해 공부했었던(혹은 알고 있던) 내용이라도 자세한 내용과 함께 차근차근히 곱씹어볼 수 있어서 좋았습니다. 

시맨틱 웹, SEO, 브라우저에 렌더링되는 간략한 과정들에 대한 설명 사실 전달 받은 디자인 그대로 웹 페이지로 만든다면 목적에 맞는 엘리트먼트를 사용한 배치와 점진적 기능향상과 최적화, SEO등을 신경쓸 필요가 전혀 없습니다. 

10년 전 처럼 슬라이스 친 이미지 혹은 통이미지에 이미지 맵만 연결시키면 되니까요… 또 모든 분들이 그러는 것은 아니지만, 가끔 button의 역할을 하는 요소도 무작정 div 혹은 span으로 구현하시는 분들이 계시는데 그러한 사례를 담고 있지는 않지만 어떻게 렌더링되는지에 대한 간략한 과정과 시맨틱, SEO에 대한 중요성들을 설명함으로써 목적에 맞는 엘리트먼트를 사용해 퍼블리싱해야한다는 기본기(?)를 일깨워 주는 점을 높게 사고 싶습니다. (대부분의 관련 서적들은 이러한 부분에 대해 지나치게 가볍게 다루거나 생략합니다.) 

다만, 접근성에 대한 부분이 없는 점은 아쉬웠습니다. 밀접하게 관련되어 있는 부분이니까요. 

홍보문구 그대로 실무에서 가장 많이 쓰이거나 헷갈릴 만한 부분을 담음 

inline과 block에 대한 차이를 일러스트를 사용해 쉽게 풀어 설명하고 있으며, 가장 많이 쓰이는 가상선택자에 대해서도 잘 나와 있습니다. 

CSS Reset, box model, inline과 inline-block에 대한 차이, flex, 가상선택자, CDN 등 실무에서 가장 많이 쓰이고, 처음 마크업을 배울때 햇갈리는 부분(display 속성) 에 대한 설명이 잘 나와 있어 처음 웹퍼블리싱을 접하는 분들께 많은 도움이 될것 같습니다. 

과거에 비해 쉬워진 크로스브라우징 관련 부분도 어떻게 최소 지원 브라우저를 결정하는지, 사용하는 요소에 대한 브라우저 지원범위는 어떻게 확인하는지 등 어떻게 보면 면접에 나올법한 가장 중요한 부분들을 꼼꼼하게 알려주고 있습니다. 

가장 많이 사용하는 UI Interaction에 대한 javascript 구현 방식 설명

롤링 슬라이드 동작 원리 Q&A와 메뉴에 자주 사용되는 Toggle 및 아코디언, 롤링페이지에 대해 어떻게 작동되는지 그 원리가 담겨있는 점이 가장 좋았습니다. 

보통은 이러현 요소들을 이미 만들어져 있는 외부 라이브러리를 가져다 쓰는 경우가 많아 어떻게 구현되는지도 모르고 사용합니다. (실제로 제가 그렇습니다.) 

개발자분들은 이를 커스텀하거나 직접 개발하면서 사용하는 모습을 보고 직접 소스코드를 작성하지는 못하더라도 어떻게 구현되는지는 알아야 한다고 생각했는데 책을 읽으면서 많은 도움이 되었습니다. 

반대로 아쉬웠던 점에 대해 적어보고자 합니다. 

아래 내용은 지극히 주관이 담긴 개인적인 내용이라 그 점은 감안하고 봐주시면 감사하겠습니다. 

자간이 일정하게 적용되어있지 않아 거슬림.

책을 읽으면서 양끝정렬이긴 한데 글리프마다 자간이 넓고 좁은게 너무 느껴져서 읽는데 살짝 거슬렸습니다. 

또한 단어의 앞부분을 대문자로 쓰는것 같은데 두단어로 이루어진 부분에서는 어떤 부분은 앞쪽만 대문자로 표기하고 뒷 부분은 소문자로 표기하는 등이 아쉬었습니다. 

다만, 이 부분은 편집상의 아쉬움이지 책 내용에는 전혀 관련이 없는 부분입니다. 

Jquery 말고 ES6 중심으로 구현을 했으면… 

저는 왜 책에서 Jquery를 사용했는지 알고 있습니다. (입문자가 접하기엔 쉬우니까요…) 저 또한 온라인 포트폴리오를 만들며 Jquery를 사용했고, 유명 에이전시들의 구축 결과물을 보면 지금도 Jquery를 기반으로 하고 있습니다. 

다만 실무를 접하면서 느낀점은 레거시 코드 빼고는 Jquery를 아예 사용하지 않습니다. 

혹은 React로 컨버팅 된 버전을 사용하는 식으로 대체해 이러한 부분에서 애를 먹고 있습니다. Javascript가 ES6으로 버전업 되면서, 일부 Jquery에서 사용하는 문법과 비슷해진 부분이 많은데 차라리 ES6 기반으로 예제를 구현했으면 실무중심이라는 측면에서 좋았을것 같습니다. 

Windows 중심의 예제 

예제에 사용되는 프로그램들이 크로스플렛폼을 지원하는지라 큰 문제는 없지만 Ajax 관련부분에서 문제되는 부분이 있습니다. 

로컬에서는 Cross domain 정책으로 관련 코드가 동작을 안하는데, 이에 대한 해결책을 Windows 버전만 기재했습니다. 

open /Applications/Google\ Chrome.app/ — args — allow-file-access-from-files 

mac에서 터미널을 통해 위의 코드를 입력하라는 내용이 책에 없는데, 

mac에서 예제를 따라하는 일부 독자들은 해당 부분에서 막혀서 벙찔것 같습니다. 

디자인-퍼블리싱 사이에 어떻게 작업이 이루어지는지에 대한 부족한 설명

보통 Invision이나 Zeplin이 모바일 앱 디자인에서만 사용하는 것처럼 보일 수도 있겠다는 생각이 들지만 실제로 웹디자인에서도 많이 사용하고 있습니다. 

책에서는 단순히 PSD 파일을 전달받아 퍼블리싱을 진행한다고 하는데, 아직도 그렇게 진행하는 회사가 있는 것은 사실이지만 새로 변화하고 있는 방식에 대해, 그리고 디자인 가이드를 정해 사용한다는 부분을 간략하게라도 담았으면 좋지 않았을까 합니다. 

책을 읽으면서 웹 퍼블리싱에 대한 기본기를 다시 되잡는 시간을 갖기도 했지만, 

퍼블리셔라는 직군에 대한 역할에 대해 생각해보았습니다. 대형 포털사이트 위주로 UI개발 직군이 따로 운영되고 있고, 더 심도깊게 마크업과 접근성, 시맨틱에 대해 다르고 있습니다. 또 Front-end에서 Back-end바로 앞부분까지 다루고 있구요. (이부분은 [TECH@NAVER] 프런트엔드 개발 시작하기를 보면 도움이 되리라 생각합니다.) 디자인 직군도(저는 사실 좋게 생각하지는 않지만) 점차 단순 1차원적인 디자인만 다루는 것 뿐만 아니라 그 안의 인터렉션등 구동에 관한 부분까지 관련해서 심도깊지는 않지만 어느정도의 퍼블리싱과 Javascript를 다루기를 요구합니다. 

웹퍼블리싱이라는 영역을 단순히 마크업만 하는 개발직군으로 생각하는 것이아니라 앞으로 점차 디자인과 개발의 중간 접점영역으로써 알아두어야 하지 않을까란 생각을 하며 글을 마칩니다. 

본 서평은 이지스퍼블리싱으로 부터 무상으로 도서를 지원받아 작성되었습니다.

리눅스를 처음 접하는 초보들에게 추천하고 싶은 책

이것이 우분투 리눅스다 - 설치부터 서버 & 네트워크 관리까지
우재남 지음 / 한빛미디어 / 2017년 2월

들어가기

2~3번 한빛미디어의 리더스에 지원했지만 아쉽게도 떨어졌습니다. 그 대신에 책 한권을 받아보고 리뷰할 수 있는 기회가 제게 주어졌습니다.

리뷰할 책을 선택할 수 있는 목록에서 ‘이것이 우분투 리눅스다’를 선택한 이유는 현재 집에서 운영중인 Windows 기반 서버가 두대이기 때문입니다.

하나는 nas용, 다른 하나는 webserver 용으로 돌리고 있습니다. (최근 windows server에서 cui기반을 제공한다는 것은 넘어가고) 보통 타 운영체제에 비해 cui 기반인 linux가 전력과 자원소모적인 부분에서 강하기 때문에 linux 기반으로 가려고 했으나, 많은 난관에 부딪혔습니다.

1. 당시 Redhat 기반 CentOS를 시도했으나, 하드웨어를 많이 가린다.
2. 일단 CUI기반이라 무섭다.
3. 우리가 알고있는 파티션의 개념과 달라 많이 어렵다. (boot, root, home 등…)
4. 온라인에 공개된 한글 레퍼런스들이 최신 배포판과 많이 달라 이를 보고 따라하기가 상당히 어렵다.

아직까지는 리눅스 서버의 표준이 Redhat 기반으로 잡혀있지만, 한쪽에서 Debian 기반인 Ubuntu를 이용한 서버구축이 대새가 되면서 이 책에 관심을 갖고 선택하게 되었습니다.

기본적인 구성

책의 구성은 크게 3개로 나누어 집니다.

- 가상 머신인 VMware에 대한 설명과 Ubuntu 설치 방법

여러번 리눅스를 설치해보았기 때문(이라 쓰고 실패라 읽습니다.)에 패스

- 기본 리눅스 명령어와 스크립트, X Windows(그놈기반) 사용방법

X windows 를 빼고 기본 명령어와 쉘 스크립트 작성법에 관해서 알려주기 때문에 상당히 유용하다고 생각합니다.

- 서버 구축에 관한 방법들

당연히 추후 Windows 기반 서버들을 Linux로 바꿀거라 필수적인 부분이고, 이 책의 원래 목적과 같은 가장 중요한 부분입니다.

전반적인 평가

사실 관련 전공자와 실무자들은 영문 레퍼런스를 참고하고 자격증을 취득하지, 상세한 설명이 적혀있는 책을 접하지 않습니다. 이 때문에 그동안 저와 같은 비전공자들은 높은 진입장벽때문에 도저히 엄두도 낼 수 없었던 것이 사실입니다.

그런면에서 ‘이것이 우분투 리눅스다’는 처음 설치방법부터 하나하나 상세히 설명해줘서 큰 감동이었습니다. 아무래도 저와 같은 일반인들은 Windows의 설치방법과 많이 다르기 때문이니까요…

개인적으로 생각하기에 기본 개념들을 꼼꼼이 설명해 줘서 좋았습니다.

또한, 단순히 서버를 구축하기만 하면 된다는 내용이 아닌 리눅스와 네트워크에 필수적이고 바탕이 되는 역사와 개념을 짚어줘서 좋았습니다.

특히 웹호스팅만 이용했던 독자라면, 게시판을 올리기 위해 FTP상에서 707로 설정하라고만 했지 그게 정확히 뭔지 몰랐는데 이런 부분에서 도움이 되지 않을까요? (물론, 서버 운영에서 권한은 필수로 알아야 하는 부분입니다.)

다만 아쉬운 것은 너무 초보에 맞추다 보니 X windows을 베이스로 깔고 간다는 점입니다.

무조건 쓰지 말아야 하는 것은 아니지만, 저와 같은 비전공자들은 취미로 혹은 개인 nas 제작을 위한 목적으로 서버 구축을 합니다. 이런 목적으로 구축하는 서버에는 좋은 성능의 하드웨어를 사용하지 않습니다.

이런점에서 낮은 성능에 자원을 많이 잡아먹는 X windows를 기반으로한 것은 조금 아쉽습니다. 하지만 터미널을 키고 일반 cui와 동일하게 작업하기 때문에 큰 문제가 되지는 않고, 이 책을 통해 추후 cui로 진입하는데 도움이 될 수도 있겠다는 생각도 들었습니다.

서버와 네트워크를 다루는 책인데 갑자기 튀어나오는 쌩뚱 맞은 내용

또한 책의 부재목 자체가 서버&네트워크를 다루는 것인데 쌩뚱맞게 Adobe Reader, Office 프로그램에 대한 소개가 나옵니다. 초보를 대상으로 하다보니 욕심이 담겨서 저렇게 된 것 같습니다.

위의 단점들도 있고, 책 목적이 데스크탑 목적용의 리눅스 활용서가 아닌 서버와 네트워크에 초점이 잡혀있는 책이지만, 처음 리눅스를 접하는 사람들에게는 큰 도움이 되지 않을까 생각합니다.

단순히 책만 보고 따라하는 것이 아니라, 온라인 무료 동영상 강의까지 제공하기 때문입니다. 책과 동영상을 보고 따라하면서 리눅스에 대한 막연한 무서움을 없애는데에 큰 도움과 자신감이 차오르게 도와주는 워밍업 같은 책이라고 평하고 싶습니다.

장점

• 리눅스에 대해 아무것도 모르는 사용자도 이 책과 동영상 강의를 보며 따라할 수 있다.
• 필수적인 기본 개념이나 역사에 대해 친절하게 설명한다.
• 책의 처음부분에 ‘필자가 리눅스를 처음 사용했을 때’가 너무 공감되고 어떻게 쉽고 거부감 없이 리눅스를 배울 수 있을까 고민한 필자의 진심이 느껴진다.

단점

• X windows 기반으로 설명합니다. (정작 Ubuntu server 배포판은 그놈이 포함되어있지 않는데 말이죠.)
• 갑자기 쌩뚱맞게 나오는 데스크탑용 어플리케이션들… (Adobe Reader, Office)
• 서버 구축방법은 좋으나, 유지보수 방법에 대해선 언급이 적거나 없다.

생활코딩의 좋은 웹서버 구축강의가 있지만, 아마존 웹 서비스를 기반으로 하는지라… 실제 오프라인 하드웨어로 실습하기에는 많은 차이가 있습니다. (세팅) 리눅스를 처음 접하면서 또 웹서버를 구축하고 싶으신 분들은 한번쯤 읽어보시면 좋을것 같습니다.

본 리뷰는 한빛 미디어로부터 도서를 지원받아 작성되었음을 알립니다. 또한 ≪이것이 우분투 리눅스다 ≫에 대한 자세한 사항은 한빛 미디어 홈페이지에서 확인 가능합니다.