안드로이드·iOS 가이드라인 이후, UI 디자인 컨셉은 어떻게 정해야 할까?

 

안드로이드 머티리얼 디자인, iOS 휴먼 인터페이스 가이드라인 한 번에 이해하기

 

 

이전 글에서는 안드로이드 머티리얼 디자인과 iOS 휴먼 인터페이스 가이드라인을 활용해 UI 디자인 컨셉을 정하는 방법을 정리했다. 이번 글에서는 수치에 매몰되지 않고 스타일을 만드는 실무 기준을 소개한다.

---

UI 디자인을 할 때 가이드라인은 디자이너에게 굉장히 편리한 도구다. 안드로이드의 머티리얼 디자인(Material Design)이나 iOS의 휴먼 인터페이스 가이드라인(HIG)은 여백, 폰트 크기, 컴포넌트 높이처럼 매우 구체적인 수치를 제공한다. 이 덕분에 기준 없이 헤매지 않아도 되고, 디자인 결과물의 완성도도 일정 수준 이상으로 유지할 수 있다.

 

하지만 가이드라인의 수치에만 맞춰 디자인을 하다 보면 한 가지 문제가 생긴다. 결과물이 다른 서비스와 크게 다르지 않다는 점이다. 이유는 단순하다. 수치가 곧 스타일을 만들어 버리기 때문이다. 같은 기준, 같은 컴포넌트, 같은 간격을 쓰면 자연스럽게 비슷한 화면이 나온다.

 

그래서 가이드라인을 사용할 때 가장 중요한 전제는 이것이다. 수치를 먼저 적용하는 것이 아니라, 스타일을 먼저 확정해야 한다는 점이다. 가이드는 ‘정답’이 아니라 ‘도움말’에 가깝다.

---

가이드라인을 대하는 올바른 태도

원하는 스타일을 정하지 않은 상태에서 가이드라인 수치만 기계적으로 적용하면, 디자인은 빠르게 완성되지만 개성은 사라진다. 반대로 스타일을 먼저 정한 뒤 가이드를 참고하면, 기준은 지키면서도 차별화된 결과를 만들 수 있다.

이때 주의할 점은 눈대중으로 디자인하지 않는 것이다. 레퍼런스 이미지를 뒤에 깔아두고 실제로 간격, 사이즈, 도형의 라운드(R) 값 등을 직접 재보는 과정을 거치는 것이 좋다. 이렇게 수치를 확인해보면, 같은 ‘미니멀’이나 ‘모던’이라는 키워드라도 서비스마다 얼마나 다른 기준을 쓰는지 체감할 수 있다.

---

 

UI 디자인 컨셉 정하는 방법

1. 키워드로 컨셉 정리하기

컨셉을 키워드로 정할 때 단어만 나열하면 추상적으로 느껴지기 쉽다. 그래서 키워드를 쓰기 전에 디자인 요소를 먼저 분해해보는 것이 좋다. UI 디자인은 보통 다음 다섯 가지 요소로 나눌 수 있다.

• Color : 메인 컬러, 포인트 컬러, 전반적인 색감
• Space (Layout) : 여백, 밀도, 레이아웃 구조
• Mood : 사진, 카피 문구에서 느껴지는 분위기
• Movement : 이펙트, 팝업, 화면 전환 방향과 속도
• Shape : 아이콘, 썸네일, 컴포넌트의 형태

이 다섯 가지 기준으로 키워드를 나누어 정리하면 컨셉이 훨씬 구체적으로 보인다. 템플릿 형식에 꼭 맞출 필요는 없지만, 메인 키워드와 서브 키워드는 반드시 구분해서 작성하는 것이 좋다. 그래야 디자인 과정에서 우선순위가 흔들리지 않는다.

---

2. 무드 보드(Mood Board)

키워드만으로 컨셉을 정리하면 보는 사람마다 전혀 다른 이미지를 떠올릴 수 있다. 이 때문에 협업 과정에서 오해가 생기기도 한다. 이런 문제를 줄이기 위해 사용하는 것이 바로 무드 보드다.

무드 보드는 내가 표현하고 싶은 스타일을 시각적으로 모아놓은 레퍼런스 모음이다. 사진이 될 수도 있고, UI 화면 캡처나 인터랙션 예시가 될 수도 있다. 중요한 것은 ‘많이’ 모으는 것이다. 가장 마음에 드는 한 장보다, 비슷한 결의 레퍼런스를 여러 개 모아두는 편이 스타일을 더 명확하게 보여준다.

경우에 따라서는 키워드보다 무드 보드가 훨씬 정확한 커뮤니케이션 도구가 되기도 한다.

---

스타일을 정할 때 고려해야 할 요소

1. 폰트(Font)

폰트는 보통 다음 네 가지 기준으로 나누어 생각해볼 수 있다.

• 국문
• 영문·숫자·특수문자
• 타이틀용
• 본문용

반드시 네 가지를 모두 다른 폰트로 써야 하는 것은 아니다. 중요한 것은 어떤 기준으로 사용할지 미리 정해두는 것이다. 특히 국문과 영문·숫자를 분리해서 생각하는 이유는, 브라우저에서 폰트가 출력되는 방식과 가독성 차이 때문이다. 이 부분은 웹 폰트 구조를 이해하면 훨씬 명확해진다.

---

2. 컬러(Color)

UI 디자인에서는 큰 이미지나 콘텐츠가 중심이 되는 경우가 많기 때문에, 인터페이스 컬러는 최소한으로 사용하는 것이 좋다. 콘텐츠를 돋보이게 하기 위해 UI 컬러를 의도적으로 ‘빼는’ 경우도 많다.

컬러를 정할 때는 신규 서비스인지, 리디자인인지에 따라 접근 방식이 달라진다.

신규 서비스의 경우

예를 들어 헬스케어 서비스를 새로 만든다면, 사람들이 자연스럽게 떠올리는 파란색 계열을 브랜드 컬러로 선택할 수 있다. 이는 서비스 이해도를 높이고, 브랜드명을 기억하는 데에도 도움을 준다. 다만 경쟁 서비스와 컬러가 겹치면 차별화가 어렵다는 단점이 있다. 이럴 때는 업계의 통념과 반대되는 색을 전략적으로 사용하는 것도 하나의 방법이다.

리디자인의 경우

리디자인에서는 브랜드 컬러를 함부로 바꾸는 것이 위험하다. 컬러는 단순한 시각 요소가 아니라 브랜드 인지도와 직결되기 때문이다. 대신 다음과 같은 방식으로 변화를 줄 수 있다.

1. 기존 브랜드 컬러를 기준으로 유사색 그라데이션 활용
2. 컬러는 유지하되 명도·채도 조절
3. 새로운 서브 컬러 또는 포인트 컬러 추가

이 방법들을 활용하면 브랜드 정체성은 유지하면서도 ‘달라진 느낌’을 줄 수 있다.

---

컬러 & 아이콘 참고 사이트

컬러 조합이 어렵다면 사이트의 도움을 받는 것도 좋은 방법이다. 단, UI가 지저분해지지 않도록 유사색, 단색, 보색 위주로 활용하는 것을 추천한다.

• Adobe Color : 색상 휠과 접근성 대비 검사 제공
• Coolors : 스페이스바로 랜덤 컬러 조합 생성
• Material Design Color : 메인 컬러 기반 톤 변형 제공
• Sass Color Generator : 동일 비율의 명도·채도 단계 생성

아이콘 역시 브랜드 개성을 드러내는 중요한 요소다. 다양한 스타일을 비교해보며 서비스와 맞는 톤을 선택하는 것이 좋다.

• Google Fonts Icons
• Noun Project

---

마무리

가이드라인은 디자인을 쉽게 만들어주지만, 동시에 개성을 약화시킬 수도 있다. 중요한 것은 가이드를 따르느냐가 아니라, 언제 참고하느냐다. 스타일을 먼저 정하고, 그 스타일을 구현하기 위한 도구로 가이드라인을 활용한다면 훨씬 설득력 있는 UI 디자인을 만들 수 있다.