디자이너들을 편하게 해주는 HTML/CSS 마법 10가지

본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 사용자 경험(UX)과 관련된 다양한 정보를 다루는 UX Planet 블로그에서 발행한 글입니다. 작가인 로렌조 도레미(Lorenzo Doremi)는 웹 디자이너입니다. 본문은 디자이너를 위한 HTML/CSS 활용법에 대한 내용으로 웹 디자인 업무에 참고하시면 도움이 될 만한 글입니다.

새로운 걸 배우는 일은 즐겁기도 하고 때로는 좌절을 안겨주기도 하지만, 무언가를 개발한다는 건 그보다 훨씬 더 큰 좌절감을 안겨주는 경우가 많습니다. 안타깝게도 요즘의 웹사이트 개발에서는 디자인과 개발을 모두 해야 하는 경우가 많기 때문에, UX/UI 디자이너들도 프론트엔드(front-end, 사용자가 직접 이용하는 단말 영역)의 코딩 방식에 대해서 조금은 알고 있어야만 합니다.

이번 글에서는 제가 최근 몇 년 동안 여러 개의 웹사이트를 개발하면서 많은 도움을 받았던 몇 가지의 요령을 알려드리고자 합니다.

10) 마법의 설정

HTML을 개발할 때는 레이아웃과 관련한 문제들이 많이 발생하는데, 아래의 설정을 사용하면 그런 문제들을 대부분 방지할 수 있습니다. 페이지 내의 여러 요소들을 설정할 때는 크기를 고정해서 가로 슬라이더가 나타난다거나, 아이템의 위치를 절댓값(absolute)으로 지정한다거나, 채우기(padding) 값을 여기저기에서 모두 다르게 하면 안 됩니다.

위와 같이 설정한 다음, 뭔가 변경해야 할 필요가 있다면 해당하는 설정만 편집하면 됩니다. 그런데 때로는 디스플레이 항목을 블록으로 설정(display:block)하는 것이 좋지 않을 때도 있지만, 블록이 아닌 인라인(inline)으로 설정할 때에도 <a>와 <span>이라는 태그를 마치 블록처럼 사용하는 경우가 많습니다.

9) 라인과 각종 장식을 애니메이션으로 만들기

텍스트 위로 마우스를 가져가면 라인이 나타납니다.

디자인을 하다 보면, 애니메이션 형태의 밑줄이나 슬그머니 나타나는 배경과 같은 재미있는 효과를 만들고 싶은 경우가 많습니다. 이럴 때는 아예 새로운 요소들을 만들지 마시고, 그냥 “::after”나 “::before”라는 ‘가상 선택자(pseudo selector, HTML의 요소들을 특정한 상태로 만들어주는 선택자[1])’를 활용하면 됩니다. 애니메이션에서는 이런 가상 선택자를 사용하면 그 효과가 아주 좋습니다.

이런 작업을 할 때는 속성을 설정하는 것을 잊으면 안 됩니다. 만약 속성을 설정하지 않는다면, 가상의 요소들이 제대로 보이지 않게 됩니다.

8) 텍스트 사이즈에서 뷰포트(viewport) 높이를 적용

때로는 텍스트를 반응형으로 만들어서, 텍스트가 데스크톱의 크기에 맞게 자동으로 조절되도록 만들고 싶을 때도 있습니다. 가장 좋은 방법은 뷰포트(viewport, 사용자에게 보여지는 화면의 크기)의 높이(height)를 활용하는 것입니다. 왜 너비(width)가 아니라 높이(height)일까요? 왜냐하면 너비를 기준으로 작은 글자를 설정하면, 모바일에서는 너무 작아져서 “아예 보이지 않을 수도” 있기 때문입니다.

예를 들어보겠습니다.

1920×1080 크기의 데스크톱 화면에서 뷰포트 너비(vw)를 3으로 설정하면, 그 크기는 60픽셀로 지나치게 큽니다. 반면에 320×*** 크기의 모바일 화면에서 뷰포트 너비(vw)를 동일하게 3으로 설정하면, 이번에는 9픽셀로 너무너무 작게 보일 겁니다. 너비 대신에 뷰포트의 높이를 사용하면, 모바일과 데스크톱 환경에서 더욱 안정적으로 보이게 됩니다.

7) HTML 이미지 배경

웹 디자인을 할 때는 이미지 배경이 있는 상자를 만들고 싶은 경우가 많습니다. 이럴 때면 CSS의 배경 이미지(background-image)라는 속성을 사용해서 만드는 경우가 많지만, 제 생각으로는 아주 나쁜 방법입니다. 그 이유는 이렇습니다.

1. 검색엔진 최적화(SEO)의 측면에서 좋지 않습니다.
2. CSS를 매번 편집해야 합니다.
3. 코드를 재사용할 수 없습니다.

이럴 때는 HTML 안에 단순한 이미지를 하나 넣어 놓고, 그것을 다양한 배경으로 변환하는 것이 좋습니다!

(이미 알아차리셨을 수도 있는데, 여기에서는 우리가 앞에서 위치를 상대적(relative)으로 설정했던 것이 아주 유용하게 쓰입니다. 이미 그렇게 설정했다면 바꿀 필요가 없습니다.)

6) 텍스트에 대한 오버플로우(overflow) 효과

현대적인 웹사이트들에서는 아래쪽에서부터 나타나는 이런 종류의 오버플로우(overflow) 효과를 사용하는 경우가 많습니다. 아래는 제가 작업했던 웹사이트에서 사용했던 사례입니다.

이런 효과에 필요한 아주 간단한 예시 코드를 살펴보겠습니다.

물론 화면전환(transition) 효과도 활용할 수 있습니다.

5) 섹시한 햄버거 메뉴(hamburger menu)의 원리

이미 내비게이션 기능이 포함되어 있는 부트스트랩(Bootstrap) 같은 프레임워크를 사용하지 않는다고 생각해 보겠습니다.

이런 경우, 모바일에서는 햄버거 메뉴(hamburger menu, 애플리케이션의 인터페이스에서 햄버거 모양(三)을 누르면 나오는 메뉴)를 만드는 것이 아주 쉽습니다. 이를 위해서는 자바스크립트(JS) 코드 몇 줄만 추가하면 됩니다.

그리고 CSS도 다음처럼 아주 살짝 추가합니다.

그런데 이런 작업을 할 때는 디스플레이(display) 항목을 사용하지 않고 오히려 위치를 절댓값(absolute)으로 지정한다거나, 측면에서 내비게이션 메뉴가 나타나게 하는 것이 더 좋을 수도 있습니다. 그건 모두 여러분의 판단에 달려 있습니다.

4) HTML와 CSS의 요소들을 별도로 나누어서 작업하기

이건 디자인보다는 오히려 작업 방식과 관련된 조언입니다. 제가 제안하는 방식은 뭐냐 하면, 개발하는 과정에서는 (데스크톱과 모바일 버전 등으로) CSS 파일을 별도로 생성하고, 최종 단계에서 그것들을 전부 합치는 것입니다. 이것을 합치는 게 중요한 이유는, 웹사이트에서 처리해야 하는 HTTP의 요청을 줄일 수 있기 때문입니다.

동일한 원칙이 HTML에서도 적용될 수 있습니다. 개츠비(Gatsby)와 같은 SPA(Single Page Application, 단일 페이지 애플리케이션) 환경에서 개발하고 있는 것이 아니라면, HTML 요소들을 별도로 나누어 저장하고 필요한 경우에 PHP를 사용해서 그것들을 요청하는 것이 좋습니다.

예를 들자면 “/modules”라는 폴더를 만들어서, 여기에 내비게이션 바(navigation bar)나 푸터(footer, 바닥글) 등을 별도의 파일로 보관할 수 있습니다. 그러면 이 중에서 하나를 바꾸어야 하는 경우에도, 모든 페이지를 일일이 편집하지 않아도 됩니다. 모듈화를 더 많이 할수록, 그 결과는 더 좋아집니다.

3) 부드러운 스크롤(smooth scrolling)

현대의 멋진 웹사이트들은 모바일의 매끄러운 스크롤 방식을 데스크톱에서도 따라 하는 경우가 많습니다. “부드러운 스크롤”이라는 것에 대해서 아무리 찾아봐도, 결국엔 표준 CSS만으로는 링크 이동을 부드럽게 만들 수 있을 뿐, 마우스 스크롤을 부드럽게 만들기는 쉽지 않다는 걸 알게 됩니다.

그 이유는 “부드러운”이라는 말에 숨어 있습니다. 개발자들은 “부드러운 스크롤”을 “모멘텀 스크롤(momentum scrolling)”이나 “관성 스크롤(inertial scrolling)”이라고 부르는 걸 좋아합니다. 물론 이것도 맞는 표현이기는 합니다.

하지만 문제는 정확한 표현이 무엇인지를 알아내는 것이 아닙니다. 우리는 실제 개발 과정에서도 사용할 수 있는 스크립트를 찾아야만 합니다. 그리고 사전 제작된 웹사이트에서도 이런 스크립트가 필요한 경우가 많습니다. 그래서 제가 여러분께 도움을 드리겠습니다.

‘easy-scroll.js’는 MIT가 라이선스를 가진 스크립트로, 모든 곳에서 아주 잘 동작합니다. 인터넷에서 이걸 찾는 것이 상당히 어렵기 때문에, 아래 링크를 통해서 해당 구글 드라이브에 직접 들어가 보시기 바랍니다.[2]

두 번째의 ‘luxy.js’는 모멘텀 스크롤과 패럴랙스 효과(parallax effect, 시차를 두고 나타나는 효과)에 대한 교과서라고 할 수 있습니다. 그렇지만, 조금 무겁기 때문에 살짝 느릴 수도 있습니다.[3]

2) CSS의 전처리기(preprocessor)를 활용한다

CSS의 대표적인 전처리기(preprocessor, 컴퓨터의 코드에서 자주 사용되는 프로세스나 정의를 미리 지정해 놓는 기능)는 Less, Sass, SCSS가 있습니다. 이 중에서 여러분이 가장 좋아하는 걸 고르면 됩니다. 이 중에서는 Less가 최악이라고 말하는 개발자들이 많지만, 그래도 그것만으로도 충분한 경우가 많습니다. 하지만 어쨌든 전처리기의 사용법을 빨리 배우는 것이 좋습니다.

이런 전처리기들은 색상이나 크기 등을 한 번에 지정해서, CSS가 주기적이고 비슷한 작업을 쉽게 처리할 수 있게 해 줍니다. 또한 개발자들이라면 반드시 알고 있어야 하는 기술이기도 합니다.

1) 처음부터 개츠비(Gatsby.js)와 함께 시작한다

제가 교육에 대해서 싫어하는 것 한 가지는, 선생님들은 언제나 “일반적인” 관점에서 모든 것을 가르친다는 것입니다. 예를 들어서, 자바(Java) 코딩을 가르친다면, 그들은 우선 이클립스(Eclipse) 프로그램을 열게 한 다음, “별로 쓸모도 없는” 간단한 코드를 보여주면서 우리에게 기초를 가르치곤 합니다.

저는 이게 어마어마한 시간 낭비라고 생각하는데, 왜냐하면 저는 특정한 작업에 특화된 프레임워크로도 초보자들을 얼마든지 잘 가르칠 수 있다고 생각하기 때문입니다.

웹 개발의 경우, 저는 처음부터 개츠비(Gatsby)와 함께 배우는 것을 추천하곤 합니다. 물론 HTML과 CSS를 배우기는 해야 하지만, 개츠비와 함께라면 리액트(React)의 기초에 대해서도 동시에 파악할 수 있습니다. 그렇게 함으로써 여러 가지 다양한 실험도 더 많이 할 수 있고, ‘프레이머 모션(Framer-Motion)’과 같은 복잡한 애니메이션 라이브러리도 이용할 수 있습니다. 그런데 개츠비 내에 있는 프레이머 모션은 조금 다르기 때문에, 저는 여기 링크[4]에 있는 튜토리얼을 따라 해 보실 것을 강력하게 추천해드립니다.

보너스: SSR을 이용한 하드코어 한 방식

만약에 조금은 하드코 어한 방식을 원하신다면, 리액트(React)나 뷰(Vue)를 이용한 SSR을 배울 수도 있습니다. SSR이란 ‘서버측 렌더링(Server-Side-Rendering)’을 말하는 것입니다.

여러분은 여러 라이브러리들이 가진 잠재력을 최대한 활용하고 싶을 수도 있지만, 개츠비만으로는 한계가 있습니다. SSR은 개발하기도 힘들고 배우는 것도 어렵지만, 초보자들도 한 번 배워보는 것이 좋습니다. 만약 SSR을 순식간에 터득한다면, 당신은 천재 개발자라고 할 수 있습니다. 하지만 그전에 먼저 스택오버플로(StackOverflow)에서 그 내용을 천천히 즐겨보는 것이 좋습니다.

만약 단계별로 알려주는 것을 원하신다면, 아래 링크를 참고하셔도 좋습니다.[5]

[1] 선택자(selector)는 CSS에서 사용하는 용어로, 스타일을 적용할 대상을 말한다.

[2] https://drive.google.com/file/d/1TVvWFr2kKNi1TZb4Jo8s7TzzKlA0wFZE/view?usp=sharing

[3] https://www.cssscript.com/inertial-parallax-scroll-luxy/

[4] https://janessagarrow.com/blog/gatsby-framer-motion-page-transitions/

[5] https://www.digitalocean.com/community/tutorials/react-server-side-rendering

> 이 글은 '10 lifesaving HTML/CSS tricks for designers'을 각색하여 작성되었습니다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.