Do it! 웹 사이트 따라 만들기

핵심적인 팁과 원리를 알아갈 수 있는 책

Dong-gri
Dong-gri
Dec 22, 2019 · 7 min read

올해 신입 디자이너로 입사하면서 예기치 않게 약간의 웹 퍼블리싱 또한 담당하게 되었습니다. 물론 Back-end 와 섞인 부분에서는 레거시로 동작하는 부분만 담당하고, 보통은 정적인 페이지를 위주로 진행하고 있습니다.

대형 포털사이트들의 소스코드를 뜯어보거나 구글링을 통해 독학해온 저로서는 퍼블리싱을 진행하면서 실무와 많이 다름을 느꼈습니다. 그 와중에 이지스퍼블리싱에서 따끈따끈한 새 책의 리뷰어를 모집한다는 소식을 들었고 합격해 읽어볼 수 있었습니다.

책에 대한 전체적인 설명보다는 제가 읽고 좋았다고 생각하는 핵심적인 부분만 간추려 이야기 해보려 합니다.

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


사실 전달 받은 디자인 그대로 웹 페이지로 만든다면 목적에 맞는 엘리트먼트를 사용한 배치와 점진적 기능향상과 최적화, SEO등을 신경쓸 필요가 전혀 없습니다.

10년 전 처럼 슬라이스 친 이미지 혹은 통이미지에 이미지 맵만 연결시키면 되니까요…

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

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

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

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

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

롤링 슬라이드 동작 원리

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

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

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


반대로 아쉬웠던 점에 대해 적어보고자 합니다. 아래 내용은 지극히 주관이 담긴 개인적인 내용이라 그 점은 감안하고 봐주시면 감사하겠습니다.

책을 읽으면서 양끝정렬이긴 한데 글리프마다 자간이 넓고 좁은게 너무 느껴져서 읽는데 살짝 거슬렸습니다. 또한 단어의 앞부분을 대문자로 쓰는것 같은데 두단어로 이루어진 부분에서는 어떤 부분은 앞쪽만 대문자로 표기하고 뒷 부분은 소문자로 표기하는 등이 아쉬었습니다.

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

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

다만 실무를 접하면서 느낀점은 레거시 코드 빼고는 Jquery를 아예 사용하지 않습니다. 혹은 React로 컨버팅 된 버전을 사용하는 식으로 대체해 이러한 부분에서 애를 먹고 있습니다.

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

예제에 사용되는 프로그램들이 크로스플렛폼을 지원하는지라 큰 문제는 없지만 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를 다루기를 요구합니다.

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

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

guleum

Dong-gri LAB

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade