개발자의 UX/UI 디자인 기초

최근 UX/UI 개선 작업을 했다. 일정 관리 프로그램을 업데이트하는 일이었다. 프로그램에 오류가 많았는데, 코드는 큰 문제가 없었다. 대신 의도하지 않는 사용자 조작이 문제였다. 그래서 코드 개선뿐만 아니라 UX/UI도 갈아엎어야겠다고 생각했다.

UX/UI 디자인을 하기 전, 디자인 시스템을 짜는 일은 중요하다. 그렇지 않으면 크기와 색상이 중구난방 섞이게 된다. 통일감을 주기 위해 기업에서도 디자인 시스템 가이드를 명시하고 있다.

네이버: https://developers.naver.com/console/clova/client/Design/DesignFoundation/Color.md
G-market: https://gds.gmarket.co.kr/foundation/color

개발자도 개인 프로젝트를 하며 간단한 UX/UI 디자인을 하게 된다. 이때 필자가 사용했던 가이드라인 몇가지를 적어보려 한다.

색상

색상은 명도에 따라 50 ~ 900까지 총 10단계로 구분한다. 이때 500이 주요(main) 색이 된다.

우리 같은 개발자는 전문가가 만든 색상표를 사용하면 된다. 대표적으로 Tailwind CSS가 있다. 직접 만들어 사용하고 싶다면 Material Design에서 제공하는 Color palettes을 사용하면 된다.

색상 종류

기본색(Primary color)은 브랜드를 대표하는 색이다. 브랜드(Brand) 컬러라고도 불린다. 예를 들어 Naver 초록색과 Kakao 노란색이 있다.

보조색(Secondary color)은 기본색과 함께 강조 효과를 주는 색이다. 보조색은 브랜드 이미지에 따라 선택적으로 사용한다. IKEA는 보색(Complementary)을 이용했으며, McDonald's는 유사색(Analogous)을 사용했다. emart24는 회색을 선택했고, PayPal은 기본색에서 톤을 조정해 사용했다.

중립색(Neutral color 또는 grey color)은 무채색으로 흰색에서 검은색 사이 색상이다. 배경과 텍스트의 대부분을 차지한다.

시멘틱 색(Semantic color)은 의미를 담고 있는 색이다. 대표적으로 Success, Danger, Warning , Info 등이 있다. 정해진 색상 코드는 없으나 보편적으로 성공(초록), 위험(빨강), 경고(노랑)를 사용한다.

G-market은 사용자 구매 유도가 중요하므로 CTA 색상을 정해 사용하고 있다. 즉, 색상을 통해 사용자 클릭을 유도한다. 이처럼 시멘틱 색은 목적에 따라 다양하게 지정할 수 있다.

색상 비율

기본색:보조색:중립색 비율은 5:25:70가 적당하다고 이야기한다. 대표적인 예로 스타벅스 매장이 있다.

original image: pixabay/starbucks-seattle-1651439

스타벅스를 생각하면 진한 초록색이 먼저 떠오르지만, 실제로는 매장에 초록색이 많지 않다. 근처 스타벅스 매장을 떠올려보면 연한 아이보리 색상이나 진한 회색 등 중립색이 대부분이며, 갈색으로 포인트를 준 모습일 것이다.

기본색은 브랜드를 각인시키는 중요한 포인트에만 사용한다. 이는 UX/UI 디자인에도 적용된다. 기본색이 너무 많으면 정신없어 보이고 정보를 찾는데 방해된다.

대비

배경과 텍스트는 충분히 대비되는 값을 사용한다.

Contrast (Minimum)
(Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

- Web Content Accessibility Guidelines (WCAG) 2.1

웹 콘텐츠 접근성 가이드(WCAG)는 일반 텍스트에 대해 4.5:1, 큰 텍스트에 대해 3:1 이상의 명암비를 권장한다. 대비되는 정도가 작다면 정보 인식에 어려움이 있을 수 있다.

폰트

폰트는 간결함이 중요하다. 폰트 종류는 1개 또는 2개(한국어 & 영어) 정도만 사용한다.

/*Google*/
{ font-family: Apple SD Gothic Neo, arial, sans-serif }

/*Notion*/
{ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" }

/*Github*/
{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" }

Google, Notion, Github에서 사용하는 폰트다. 이처럼 OS에서 제공하는 깔끔한 폰트만으로도 충분하다. 외부 폰트를 사용하고 싶다면 대표적으로 Noto Sans KR 또는 Pretendard가 있다. 무난한 폰트이며 OFL(Open Font License)을 따르기 때문에 자유롭게 이용 가능하다.

폰트 굵기도 2 ~ 3개면 충분하다. 폰트 굵기는 100 ~ 900으로 100이 가장 얇다. medium(기본)이 500이며, bold는 700이다. 그리고 너무 얇은 굵기는 보이지 않을 수 있으므로 사용하지 않는 편이 좋다.

크기

웹에서 기본 폰트 크기는 16px이다. 페이지마다 폰트마다 조금씩 차이는 있지만, 주로 아래에 적힌 크기 정도다.

제목: 18px ~ 32px
내용(PC): 14px, 16px
내용(모바일): 16px, 18px
세부정보: 12px, 14px

예시를 살펴보면 본문 폰트로 구글은 14px, 애플은 17px 정도를 사용하고 있다. 모바일의 경우, 텍스트를 조금 더 크게 사용하기도 한다. 네이버는 PC에서 14px, 모바일에서 16px을 사용한다.

실제 브라우저에서 보이는 크기는 아래와 같다.

32px 22px

18px 16px 14px

14px 12px

행간과 자간

제목 행간: 1.2 ~ 1.4
본문 행간: 1.5 ~ 1.9

행간(line-height) 1.4(em)는 폰트 크기의 140%를 뜻한다. 본문 행간을 크게 가져가는 이유는 가독성 때문이다.

행간이 좁으면 우리 눈이 글을 읽을 때 위아래 줄이 함께 인식된다. 따라서 본문 행간을 충분히 넓게 써야 텍스트를 읽을 때 방해되지 않는다.

자간(letter-spacing)은 글자와 글자 사이 간격이다. 행간에 비해 자간이 넓어지면 글자가 잘못 묶여보이는 현상이 나타난다. 반대로 자간이 좁으면 글자가 겹쳐보이는 현상이 생길 수 있다. 따라서 행간을 수정한 후 자간도 확인해야 한다.

정렬

3줄 이상 넘어가는 글은 좌측 정렬을 권장한다.

한국어, 영어는 좌측에서 우측으로 읽는 시스템이다. 따라서 줄이 넘어가면 우리 눈은 자연스럽게 왼쪽에서 시작점을 찾게 된다. 이때 좌측 정렬한 글은 시작점이 고정되어 있으므로 빠르게 시작점을 찾을 수 있다. 반면 아랍어와 같이 우측에서 좌측으로 진행되는 글은 우측 정렬을 통해 가독성을 높일 수 있다.

계층 구조

계층 구조는 제목, 본문, 세부 정보와 같이 정보를 중요도에 따라 나눈 것을 뜻한다.

보다시피 계층 구조를 나누면 정보를 쉽게 파악할 수 있다. 계층 구조를 나누는 일은 정보 전달에서 매우 중요하다. 또한 여백을 줌으로써 정보를 그룹핑할 수 있다. 위 예시는 "이미지", "브랜드+상품명", "가격" 3가지 그룹으로 정보를 보여주고 있다.

아이콘

우리 개발자는 전문 디자이너분들이 만든 아이콘을 사용하면 된다. 대표적인 오픈소스로 Bootstrap과 Font Awsome이 있다. 허용하는 범위 내에서 무료로 사용할 수 있다.

# Icons: CC BY 4.0 License.
The Font Awesome Free download is licensed under a Creative Commons Attribution 4.0 International License and applies to all icons packaged as SVG and JS file types.
- FortAwesome/Font-Awesome (Github/License)

The MIT License (MIT)
Copyright (c) 2019-2024 The Bootstrap Authors
- twbs/icons (Github/License)

같은 아이콘도 여러 스타일이 있다. 이때 아이콘 스타일은 통일해줘야 한다. 아이콘 스타일마다 무게감과 부피감이 다르기 때문이다.

공통 요소

공통 요소는 디자이너보다 개발자를 위한 팁이다. 하나의 요소를 공통으로 사용하면 개발 단계에서 유지 보수가 용이하다. Vue에서 Component를 재사용하는 것과 같은 맥락이다.

대표적인 실수로 버튼을 불필요하게 여러 가지로 가져가는 경우가 있다. 페이지 이동 버튼과 CTA 버튼을 다르게 가져간다면 문제가 되지 않는다. 그런데 같은 맥락의 버튼임에도 조금씩 다른 스타일을 적용하는 경우가 있다. 이럴 때는 스타일을 통일해주는 것이 개발자 정신건강에 좋다.

상호작용 스타일

상호작용이 가능한 요소는 티를 내야 한다. 만약 텍스트에 파란색 밑줄이 있다면 링크라는 사실을 우리는 경험적으로 알고 있다. 이처럼 보편적인 스타일 적용하거나 mouseover 효과를 통해 상호작용이 가능하다는 것을 보여줘야 한다.

더보기 ▾

버튼

개발을 하기 전 가이드를 작성해 보고 Figma나 Adobe XD와 같은 툴로 만들고 시작하면 개발이 편해진다. 그리고 본 글에서 제시한 수치가 정답은 아니다. 폰트에 따라 주변 요소들에 따라, 그리고 사람에 따라 정답이라고 느끼는 디자인이 다를 수 있다.

참고자료

Tailwind CSS: https://tailwindcss.com/docs/customizing-colors
Palette 만들기 + 보색, 유사색 찾기 : https://m2.material.io/inline-tools/color/
보색, 유사색 찾기: https://m2.material.io/inline-tools/color/
시멘틱 색 예시: https://getbootstrap.com/docs/4.0/components/alerts/#examples
대비 비율 확인: https://webaim.org/resources/contrastchecker/
Bootstrap Icons: https://icons.getbootstrap.com/
Font Awesome Icons: https://fontawesome.com/icons
Figma: https://www.figma.com/

본문 이미지 제작: Figma
본문 이미지 아이콘: Bootstrap Icons
본문 이미지 폰트: Noto Sans KR

저작자표시 비영리

색상