33  바쁜 개발자를 위한 디자인

작업물에 설렘을 주기 위해 꼭 디자이너가 있어야 하는 것은 아닙니다. 하지만 이는 중요합니다. 합리적이든 아니든, 사람들은 그저 디자인이 더 멋진 데모에 그렇지 않은 데모보다 더 많은 관심을 기울입니다. 이것이 바로 설렘을 주는 것의 핵심입니다. 가벼운 손길을 더해 사용자를 즐겁게 하는 것입니다!

“저는 제 자신을 디자이너라고 생각하지 않습니다. 저는 제 자신을 디자인할 줄 아는 개발자라고 생각합니다… 저는 사람들이 제 코드에 관심을 갖도록 디자인을 만듭니다.” - Sarah Drasner

백엔드 개발자에게는 있으면 좋은 정도에 그칠 수도 있지만, 프런트엔드 작업을 조금이라도 한다면 정식 디자이너의 지시 없이도 디자인 감각을 더할 수 있다는 것을 보여 주는 것은 분명히 강점이 됩니다.

33.1 설렘을 주는 저장소

아래에 소개하는 모든 항목을 정리하고 꾸준히 관리하는 전체 목록은 전용 저장소 https://github.com/sw-yx/spark-joy에서 찾을 수 있습니다. 이 섹션의 주된 목적은 모든 리소스를 빠짐없이 나열하는 것이 아니라, 포함할 수 있는 요소들을 개괄적으로 소개하는 것입니다. 여기에 언급되지 않은 것을 발견하셨다면 언제든 들러서 기여해 주십시오!

33.2 프레임워크

디자인을 즉시 끌어올리는 가장 쉬운 방법은 미리 만들어진 디자인 프레임워크를 사용하는 것입니다. 이런 프레임워크는 아주 많으므로, 마음에 드는 프레임워크를 골라 짧은 목록을 만들어 두어야 합니다. 설렘을 주는 여러분만의 “툴킷”입니다.

사용 사례에 따라 서로 다른 프레임워크를 사용해야 합니다. 저는 이를 “heavy”, “drop-in”, 그리고 CSS 리셋으로 나눕니다. 살펴볼 만한 프레임워크를 간단히 정리한 목록은 다음과 같습니다:

데모를 준비하고 있다면 재미있는 프레임워크로 손쉽게 좋은 인상을 남길 수 있습니다. 손글씨 스타일이 인기를 끌면서 XKCD에서 영감을 받은 차트와 그래픽도 등장했습니다. 이런 데모를 보면 누구나 미소를 짓지 않을 수 없습니다!

Sketch-style user-interface examples showing five irregular border treatments, colored semantic buttons, text fields, a checkbox, select menu, text area, radio buttons, and a submit button.

Sketchy UI component examples

Creative Tim이나 Tailwind UI 같은 여러 업체에서도 무료 및 프리미엄 커스텀 스타일 컴포넌트를 제공하므로, 이것들도 함께 살펴보시기 바랍니다.

33.3 레이아웃

프레임워크가 제공하는 것보다 더 세밀한 제어가 필요하다면, 디자인의 기본기를 어느 정도 익혀야 합니다.

여기서 가장 즉각적인 효과를 낼 수 있는 방법은 여백을 더 늘리는 것입니다. 개발자는 대체로 정보가 빽빽하게 모여 있는 것을 선호하는 경향이 있으므로, 일반 독자가 읽기 좋도록 우리가 편하게 느끼는 것보다 조금 더 간격을 넓혀야 합니다. 또한 사이트의 세로 “리듬”을 표준화하는 것도 고려해 보십시오. 예를 들어, 주어진 기본 크기(예: 1em 또는 16px)의 0.5배, 0.75배, 1배, 2배, 3배에 해당하는 소수의 CSS 변수만 사용하도록 스스로 제한할 수 있습니다. 마진 상쇄는 관리하기 어려울 수 있으므로, 단방향 마진 선언을 사용하여 규칙 집합을 단순화하십시오.

다음으로, 흔히 쓰이는 레이아웃 패러다임을 만들어 내는 간단한 CSS 주문들에 익숙해져야 합니다. CSSLayout과 Every Layout은 활용할 수 있는 결정판 자료입니다. 특히 Holy Grail 레이아웃은 앱과 사이트에서 매우 흔하게 쓰이기 때문에 그런 이름이 붙었습니다.

모든 이미지와 요소를 배치했다면, 디자인에 생겨나는 “선”의 개수를 살펴보십시오. 페이지 전체에 걸쳐 요소들이 최대한 일렬로 정렬되도록 해야 합니다. box-sizing: border-box를 설정해 레이아웃이 패딩과 테두리를 포함하도록 하면 이 작업을 훨씬 쉽게 할 수 있습니다.

시선을 끄는 정렬, 대칭, 앵커링을 비롯한 훌륭한 레이아웃 기법을 더 깊이 알아보려면 Sarah Drasner의 개발자를 위한 디자인(Design for Developers) 워크숍을 확인하십시오.

33.4 타이포그래피

일반적으로 권장하는 방법은 System Font Stack(다운로드가 필요 없어 더 빠른 기기 내장 폰트)을 사용하거나, 사용자 지정 폰트를 최대 두 개(제목용 하나, 본문용 하나)까지만 사용하는 것입니다. Canva의 Font Combinations 앱과 Google Fonts에서 폰트 조합을 추천받을 수 있습니다.

폰트 선택은 한번 빠지면 헤어나오기 어려운 깊은 주제이자 그 자체로 하나의 전문 분야입니다. 다만 큰 목표는 전달하고자 하는 개성에 맞춰 고르는 것이라는 점만 기억하십시오:

font-size: calc(1rem + 2px + ((100vw - 550px) / 250)) 기법을 사용하면 폰트도 반응형으로 만들 수 있다는 점을 잊지 마십시오.

33.5 색상 팔레트

색상 팔레트를 제한하면 일관된 브랜드 정체성을 유지하고 개성을 불어넣는 데에도 도움이 됩니다.

자신의 개성에 맞는 주요 “강조(accent)” 또는 “하이라이트(highlight)” 색상을 하나 고르십시오:

  • 파란색: 안전함, 친숙함
  • 금색: 비싼, 세련된
  • 분홍색: 재미있고 그다지 진지하지 않음

보조 콘텐츠에는 그 색을 회색과 섞어 쓰고, 3차 콘텐츠에는 더 밝은 회색과 섞어 쓸 수 있습니다.

색상에 시스템 기본값을 사용하지 마십시오. 너무 강렬한 경우가 많습니다. 파란색 팔레트의 예:

  • 검정: #1d1d1d
  • 보라색: #b066ff
  • 파란색: #203447
  • 연한 파란색: #1f4662
  • Blue2: #1C2F40
  • 노란색: #ffc600
  • 분홍: #EB4471
  • 흰색: #d7d7d7

Adobe Color, Coolors, FlatUI처럼 여러분만의 색상을 정하는 데 사용할 수 있는 무료 색상 선택 도구는 수십 가지나 있습니다.

색상으로 설렘을 주기 위한 두 가지 특별한 참고 사항입니다:

  • 색상 대비가 접근성 가이드라인을 충족하는지 반드시 확인하십시오. 일반적으로 밝은 배경에 어두운 텍스트를 쓰는 편이 그 반대보다 기준을 더 쉽게 통과합니다.
  • 모든 색상에 CSS 변수를 사용하면 많은 사용자가 좋아하는 다크 모드를 쉽게 구현할 수 있습니다. 미리 계획하십시오. 코드에서 --black이나 --blue 같은 변수를 사용하는 대신 --text-color나 --link-color처럼 “의미론적인” 이름을 사용해야 다크 모드용으로 색상을 바꿀 때 더 자연스럽습니다.

33.6 배경

흥미로운 배경은 작품에 풍부한 질감과 영감을 주는 느낌을 더해 줄 수 있습니다. 배경은 신중하게 사용하십시오. 사용자가 전경을 봐야 할 때 시선을 빼앗는 배경이 있으면 도움이 되지 않습니다!

그레이디언트는 CSS 몇 줄만 있으면 되므로 성능이 매우 뛰어납니다. WebGradients, UI Gradients, Gradient Animator 같은 무료 도구로 좋은 배경 그레이디언트를 만들 수 있습니다.

조금 더 흥미롭게 만들고 싶다면 더 많은 CSS, 타일처럼 반복되는 아이콘, 은은한 텍스처를 사용할 수 있습니다.

마케팅 페이지는 시선을 사로잡아야 합니다. Bootstrap의 Jumbotron이나 Hero Generator 같은 것을 Unsplash나 Pexels의 무료 스톡 사진과 함께 사용하면 즉시 시각적인 흥미를 더할 수 있습니다.

33.7 아이콘과 일러스트레이션

작은 규모에서는, 익숙하고 일관된 아이콘 세트를 갖추면 텍스트 대신 아이코노그래피로 의도를 전달하는 데 도움이 됩니다. FontAwesome이 가장 잘 알려져 있지만, Shape.so와 Streamline Icons 같은 유료 옵션뿐만 아니라 The Noun Project와 CSS.GG 같은 훌륭한 무료 대안도 다양한 상황에서 유용할 것입니다.

규모가 큰 쪽으로는 마케팅 페이지와 빈 상태(empty state)에 무료 일러스트레이션 리소스를 활용할 수 있습니다. Undraw, Humaaans, Ouch!는 데모에 쓸 수 있는 훌륭한 무료 일러스트레이션 중 몇 가지 예에 불과합니다. LottieFiles는 애니메이션 일러스트레이션을 제공합니다.

직접 그래픽을 만들려면, 디자이너가 아닌 사람이 기본적인 그래픽 디자인을 할 수 있는 시장 선도적인 무료 도구로 Canva와 Snappa가 있습니다.

33.8 애니메이션과 동영상

애니메이션을 제대로 만들려면 상당히 공이 많이 들 수 있습니다. Svgator나 Greensock 같은 전문 도구로 맞춤 애니메이션을 만들려면 따로 시간을 들여 공부해야 합니다.

시간이 없다면 로딩 스피너(CSSFX와 SpinKit)부터 버튼(Animista와 Animate.css)에 이르기까지 모든 것에 대해 기성 애니메이션을 가져다 쓸 수 있습니다. 일반적으로는 상태 변화에 애니메이션을 적용하여 사용자의 시선을 다음 상태로 부드럽게 이끄는 것이 좋습니다.

영상 형태로 더 강력한 무기가 필요하다면 Animoto, Biteable, Powtoon 같은 영상 제작 도구가 도움이 됩니다.

33.9 이스터 에그

사용자에게 뜻밖의 방식으로 보상을 주면 즐거움을 한층 더할 수 있습니다:

  • Josh W. Comeau의 useSound는 소리로 들을 수 있는 앱을 만드는 데 도움을 줍니다.
  • React-Rewards는 성공에 보상을 주는 마이크로인터랙션을 추가할 수 있도록 도와줍니다
  • Processing이나 D3를 사용한 2D, 또는 Three.js를 사용한 3D 캔버스 기반 인터랙티브 시각화(react-three-fiber에 훌륭한 React 데모가 있습니다)
  • 코나미 코드는 인기 있는 이스터 에그입니다 - GenieJS는 보다 범용적인 키 바인딩 라이브러리입니다
  • Clippy.js를 사용하면 사이트에 작은 가상 비서를 추가할 수 있습니다

전반적으로 향수 카테고리는 설렘을 불러일으키기에 아주 좋은 분야입니다. 옛 Windows와 iPod의 클론은 Reddit에서 꾸준히 좋은 순위에 오릅니다.

33.10 디자인 배우기

디자인을 제대로 배우는 일을 최대한 미뤄 왔으니, 이제 드디어 세상에 나와 있는 수많은 훌륭한 “개발자를 위한 디자인” 자료에 뛰어들 수 있습니다. 꼭 살펴봐야 할, 정평이 나 있고 매우 잘 알려진 자료는 다음과 같습니다:

실력을 연마하는 데는 Dribbble, CollectUI, Codrops 같은 인기 디자인 영감 사이트를 따라 하며 연습하는 것보다 나은 방법이 없습니다.

행운을 빕니다. 더 많은 자료를 원하신다면 spark-joy 저장소도 꼭 확인해 보십시오!