최소한의 프로덕트 디자인 가이드를 만드는 4가지 방법
스트릿 출신의 프로덕트 디자이너가 가치 있는 제품을 만들려는 노력의 기록
기업이나 조직마다의 상황은 각각 다르겠지만 아마도 '웹/앱 디자인 가이드'를 만드는 것을 미루게 되는 이유는 '만들 시간이 없음'으로 동일할 것이다. 디자인 가이드는 '시간'을 바탕으로 만들어진다. 시간을 들이는 만큼 가이드는 정교해진다. 아이러니한 것은 정교한 것과 쓸모는 또 별개라는 것이다.
그렇다면 '시간을 적게 들여서 쓸모 있는 웹/앱 디자인 가이드'를 만들려면 어떻게 해야 할까?
4가지 질문을 통해 완성해볼 수 있다.
1. 누굴 위한 가이드 인가?
웹/앱 디자인 가이드는 작업자와 사용자를 위해서 필요하다. 이 때 작업자의 범위와 사용자의 범위를 명확히 해야 쓸모가 있어진다. 그래서 '어떤' 이 중요하다.
첫째, '어떤 작업자'를 위해서 필요한가?
여기서 작업자는 웹/앱을 만드는데 참여하는 모든 '작업자'를 말하며 이들끼리 원활한 협업을 위해서 필요하다. 주로 기획, 디자인, 개발 직군이 포함된다.
상황에 따라서 많은 이들과의 협업이 아닌 '나 혼자' 작업하는 경우도 있는데 이럴 때에도 가이드는 필요하다. 왜냐면 나 역시 작업자이기 때문이다.
단 이 프로젝트에 투여되는 작업자 직군에 따라 디자인 가이드의 적용 범위와 만들어야 하는 가이드 요소가 달라지기에 '어떤 작업자'가 함께 하는지를 확실히 해야 한다.
('어떤 작업자'가 참여하는지를 먼저 파악하는 것이 중요한 이유)둘째, '어떤 사용자'를 위해서 필요한가?
사용자에게 최적의 경험을 주기 위해 필요한 건 '탐험의 과정이 매끄럽도록 해주는 것'이다. 그리고 그걸 가능하게 해주는 것이 '한 서비스 내에서 동일한 디자인 요소를 경험' 하게 해주는 것이며 디자인 가이드가 그 역할을 담당한다.
여기서 중요한 것이 '어떤 사용자'를 정의하는 것이다. 사용자의 인터넷 숙련도, 데스크탑이나 모바일 기기, 해상도, 연령, 사용 환경, 사용 이유 등에 따라 디자인 방향성이 달라지기에 '어떤 사용자'를 정의하는 것이 매우 중요하다.
('어떤 사용자'가 서비스를 이용하는지 먼저 파악하는 것이 중요한 이유)2. 디자인 요소의 근거는 무엇인가?
디자이너는 자신의 디자인에 쓰인 다양한 요소들의 근거를 말할 수 있어야 한다. 컬러는 왜 이 컬러인지, 폰트는 왜 이 폰트로 선정했는지, 박스에 라운드는 왜 주었는지, 박스에 쉐도우 효과는 왜 주었는지 등등을 스스로 확실히 알아야 디자인 가이드가 간결해지며 힘도 생긴다. 스스로 근거가 없다면 디자인은 그날그날 디자이너의 눈높이와 컨디션에 따라 뒤집어질 수도 있다. 그렇게 되면 디자인 가이드 제작의 의미가 없어진다.
주로 아래와 같은 것들을 명확히 하는 것이 좋다.
(디자이너가 자신의 디자인에 확실한 근거가 없을 때 발생하는 현상)a. 컬러 선정의 이유
주요 색상과 보조 색상을 해당 색으로 선정한 이유를 명확히 한다.
컬러는 일을 진행시키는 힘을 가지고 있다. 그 힘을 강력하게 쓰기 위해서는 컬러마다 가지고 있는 힘이 무엇인지, 사회적으로 약속된 것은 무엇인지 등을 알고 써야 한다. 그걸 모른 채 디자이너의 직관의 의존하거나 디자이너의 취향에 맡긴다면 컬러의 힘은 약해지기 쉽다.
실무팁
주요 색상은 브랜드 컬러가 이미 있다면 선택이 쉬우나(선택의 여지가 없으니) 보조 색상은 정해진 게 없다면 선택이 어려울 수 있다.
이때를 조심해야 하는데, 보조 색상을 선택할 때 명확한 근거 없이 무조건 '주요 색상과 어울리는 색'으로만 정한다면 디자인 중간에 보조 색상이 여러 번 바뀔 수도 있기 때문이다. 웹/앱 화면을 디자인하다 보면 다양한 요소들과의 결합에 따른 화면이 나오게 된다. 모든 화면에 주요 색상이 들어가는 것도 아니며 주요 색상의 비율과 곁들여 쓰이는 색상 역시 화면마다 달라진다. 그럴 때 처음에 무턱대고 주요 색상과 어울린다는 이유만으로 선정한 보조 색상은 '이 화면에서는 어울리지 않을 수'있는 상황이 연출되기 쉽다.
그러니 주요 색상 자체와의 어울림만으로 보조 색상을 선택하지 말고 명확한 근거를 바탕으로 선택해야 한다.
예를 들어보자.
'LANMOM'라는 가상의 유아용품 브랜드가 있다. 이 브랜드의 타깃은 0~3세 아이를 가진 엄마이며 브랜드 컬러는 유아용품임을 잘 나타내는 노란색이다. 웹/앱 화면 UI 디자인을 할 때 주요 색상은 이미 있으니 이를 보조하는 색상을 정해야 한다. 이때 '노란색과 잘 어울리는 연두색'으로 정할 것이 아니라 타깃의 심리적 안정감을 유도하고 신뢰를 줄 수 있는 '진한 초록색'으로 정하는 것이다.
이렇게 명확한 근거를 가지고 선택한 색상은 디자이너가 작업 중 마음이 흔들리는 경우가 없다.
(보조 색상의 선정 이유에 근거가 있어야 추후 흔들리지 않을 수 있다)컬러에 대한 가이드는 아래를 참고하면 좋다.
https://brunch.co.kr/@kkokkodaec/5
b. 폰트 종류 선정의 이유
국문, 영문, 숫자 모두 명확히 해놓는 것이 좋으며 세 종류의 폰트가 모두 같아도 되고 달라도 된다.
가장 중요한 것은 해당 폰트를 선택한 명확한 이유이다. 그래야 나중에 가서 영향력 있는 조직 내의 누군가의 말 한마디로 모든 폰트를 교체해야 하는 불상사를 막을 수 있다. (실제로 있었던 일이다)
실무팁
폰트 선정 시 3가지를 고려하면 선정이 쉽다.
첫째, 우리 서비스의 느낌을 가장 잘 나타내는 폰트가 고딕인지 명조인지를 정한다.
둘째, 웹폰트냐 아니냐를 정한다. 웹폰트를 사용할 때는 특별한 이유가 없다면 용량이 가볍고 무료인 웹폰트를 이용하는 것을 추천한다.
셋째, 특별한 이유가 없다면 국문/영문/숫자 모두 하나의 폰트를 사용하여 관리를 편하게 한다.
c. 폰트 크기 선정의 이유
UI 디자인 시 각 화면마다 폰트끼리의 어울림을 고려하다 보면 크기가 제멋대로가 되기 쉽다. 그러다 보면 중구난방으로 쓰게 되는데 이는 화면을 어지럽게 만드는 요인이 된다. 폰트 크기의 역시 해당 사이즈를 선택한 이유를 명확히 해두면 좋다.
d. 박스 라운드 유무 선정의 이유
박스의 라운드 유무와 그 라운드 값의 크기는 의외로 브랜드의 느낌을 결정하는데 큰 역할을 한다. 브랜드가 추구하는 느낌에 따라 라운드의 유무를 결정해야 하며 라운드 값 또한 신중히 결정해야 한다. 동글동글할수록 부드럽고 유연한 느낌을 주고 직각일수록 단호하고 명확한 느낌을 주기 때문이다.
그런데 라운드는 디자이너마다 선호도가 다르다. 심지어 한 명의 디자이너가 작업했음에도 화면마다 다르게 넣는 경우가 생길 수도 있다. 이유는 디자이너도 잘 모른다. 그냥 어떤 날은 라운드가 예뻐 보이는데 어떤 날은 직각이 예뻐 보이는 뭐 그런 거다.
그렇기에 이걸 미리 정해놓지 않으면 어떤 화면에서는 인풋 박스에 16px의 라운드 값이 들어가 있는데 또 어떤 화면에서의 인풋 박스는 직각이 될 수 있다.
(나도 모르는 내 마음...)실무팁
박스 라운딩 사이즈 설정 시 배수의 규칙을 이용하면 좋다. 8 배수이든 4 배수이든 상관없다. 규칙을 정한다는 것이 중요하다.
e. 박스 쉐도우 유무 선정의 이유
박스 쉐도우는 언제, 어떤 상황에서, 어떤 이유로 인해 쓰겠다는 명확한 이유 없이 무분별하게 쓰이면 화면이 지저분해질 수 있으며 트렌디하지 않을 수 있다.
또한 이 역시 디자이너마다 또는 디자이너의 그날의 눈높이에 따라 선호 유무가 달라질 수 있으니 명확한 이유를 명시해놓아야 한다.
실무팁
쉐도우의 적용은 내 디자인을 적용해 줄 퍼블리셔나 개발자가 누구냐에 따라 개발 단에서 적용이 안 되는 경우가 있을 수 있다. 그러니 퍼블리셔 또는 개발자와 미리 가볍게 이야기해보는 것이 좋다.
f. 콘텐츠 간의 여백 사이즈 선정의 이유
콘텐츠 간의 여백이 일관적이지 않으면 화면이 정돈되지 않아 보이며 이는 사용자 여정에서도 동일한 경험을 제공하지 못한다. 이 역시 디자이너마다 선호하는 여백의 크기가 다르기에 미리 이유에 따른 사이즈를 정해놓는 것이 좋다.
실무팁
여백 사이즈를 설정할 때 가장 많이 쓰이고 쉽게 끝낼 수 있는 것이 배수를 쓰는 것이다.
예전에는 8의 배수를 쓰는 것이 정답인 것처럼 이야기되었으나 사실 중요한 건 8이라는 숫자 자체는 생각한다. 진짜 중요한 건 '우리 회사만의 명확한 이유를 근거로 한 규칙'을 잘 안착시키는 것이다.
3. 가장 자주 쓰이는 요소는 무엇인가?
어디서부터 어디까지 가이드화 해야 하는지 막막하다면? 먼저 해당 프로젝트 UI 디자인 작업 시 가장 자주 쓰이는 디자인 요소를 정한다. 와이어프레임을 보면서 정하면 좋다. 그런 다음 그 요소들을 규칙화한다. 규칙화할 때도 역시 근거를 가지고 하면 좋다. 그래야 디자이너가 중간에 흔들리지 않을 수 있다.
실무팁
프로젝트의 규모에 따라 다르겠지만 기본적으로 가장 자주 쓰이는 디자인 요소는 아래와 같다.
- 확인, 취소, 닫기 등의 버튼 (크기별 필요)
- 탭, 네비 등 이동을 위한 메뉴
- 각종 아이콘
- 모달 팝업
- 텍스트 필드, 드롭 다운 박스, 체크 박스, 라디오 박스 등의 입력 폼
- (이커머스라면) 썸네일이 들어가 있는 리스트 콘텐츠, 카드 콘텐츠
등등
(자주 쓰이는 요소를 먼저 정리해본다)4. 관리와 공유는 어떻게 할 것인가?
디자인 가이드는 '완성'이 목적이 아니다. '활용'이 목적이다. 그렇기에 잘 쓰이게 하는 것이 가장 중요하다. 더군다나 지금 만드는 이 디자인 가이드는 디자인에 들어가기 앞서 '최소한의 시간'을 들여 '쓸모'있게 만드는 것이기에 디자인 중이나 디자인 후에도 가이드는 수정되고 각종 요소들이 추가될 가능성이 높다.
그래서 관리와 공유에 대한 규칙도 같이 만들어 가이드화 해 놓는 것이 좋다. (이거야 말로 가이드를 위한 가이드가 되겠다.)
실무팁
관리와 공유에 대한 가이드 역시 거창하지 않아도 된다. 아까부터 지금까지 계속 중요한 것은 '규칙'이다. 내부 작업자들끼리 시간의 손실이 없도록 서로 간의 명확한 규칙을 만들면 된다. 그 정도는 그냥 메신저로 해도 된다.
이 방법들이 멋진 정답이 될 수는 없을 것이다. 멋진 답은 이미 뛰어난 사람들이 제시하고 있다. 그럼에도 내용을 공유하는 이유는 있다.
실무는 언제나 완벽하지 않고 주변 상황은 내 뜻대로 흘러가지 않는다. 내 디자인마저 내 뜻대로 척척 되지 않으며 무언가 고민할 시간은 항상 없거나 모자라다.
그런 상황을 잘 통제해주는 것이 바로 가이드이며 이 가이드를 만들 때 중요한 것은 '많은 시간을 들여 만드는 것' 아닌 '빨리 시작하고 진행에 흔들림이 없게 만드는 힘을 만드는 것'이다. 그리고 그 힘은 '근거'에서 나온다. 근거는 힘이 강해 흔들리는 모두를 잘 잡아준다.
위의 4가지 질문이 '최소한의 시간을 들인 쓸모 있는 가이드'를 만드는 데 도움이 되길 바라본다.
.
