by
Jul 04. 2022
프로모션 디자인 시스템 구축
1. 제작 목적
프로모션 UI/UX를 다양한 디바이스 경험 접점에서 일관되고 효과적으로 표현하기 위해서
기존에 있던 photoshop으로 제작된 스타일 가이드가 있었지만, 업무 메인 툴이 sketch로 변경되고 활용도가 줄어들며 라이브러리를 활용할 수 있는 새로운 가이드가 필요해서
외주 디자인 인력이 많은 부서라, 디자이너마다 상이한 산출물 퀄리티를 좀 더 일관되고 편리한 사용자 경험을 제공하기 위해서
2. 기존 가이드에서 개선점 파악하기
기존의 프로모션 스타일 가이드기존 스타일 가이드 프로젝트에도 참여했었지만,
디자인 시스템이라는 개념이 많이 없었을 때라 컴포넌트의 분류가 명확하지 않았고,
가이드에 비주얼 요소를 넣기에 급급했던 거 같다.
포토샵 특성상 정확한 수치를 파악하기 어려웠으며 라이브러리의 형태가 아니었기에
디자인 가이드 업데이트 후 일일이 배포해야 했고 적용도 어려웠다.
3. 디자인 가이드 요소
웹/앱 프로모션에 사용되는 UI 컴포넌트를 라이브러리로 제작하기 위해
필요한 요소들을 구체적으로 정의했다.
Typography
Checkbox
Radio button
Stepper
Toggle switch
Pagination
Tooltip
Module
Iconography
Tab
Popup
Alert
Notice
Sub Title
Borad
CMS 상품단 템플릿
이벤트 참여하기 템플릿
4. 프로모션 디자인 시스템
제작 당시, 메인 업무 툴이 Photoshop이었기에 Sketch 툴에 미숙했던 팀원들이 대부분이었다.
6개월 내로 모든 디자인 자산과 작업 툴을 Sketch로 변경해야 했기에
시행착오를 최소화하고 우리 조직에 적합한 형태로 변형하여 디자인 시스템을 빠르게 구축해야 했다.
기존 가이드에서 부족했던 점을 개선하고, 명확하고 일관되면서도,
Sketch 초보자도 이용할 수 있게끔 쉽게 시스템 환경을 만들었다.
Typography
프로모션 타이틀과 콘텐츠에 사용할 타이포 스타일 가이드를 제시해주었는데, 아래 조건에 부합하는 유형의 타이포 스타일을 제안하였다.
첫 번째 조건, "가독성과 심미성이 좋은가?"
그래픽 아트가 아닌 프로모션에 사용될 폰트이기 때문에 가독성이 좋아야 했고,
유행을 타거나 세리프가 구부정하다거나 심미적으로 호불호가 갈릴 수 있는 폰트는 제외했다.
두 번째 조건, "라이선스 이슈가 없는가?"
너무나 당연한 조건. 어디까지나 상업적 목적으로 사용되는 것이기에 라이선스 이슈가 없어야 했다.
우리 팀은 산돌을 제외하고는 가지고 있는 라이선스가 없었기 때문에
오픈소스를 최대한 활용하고자 했다.
세 번째 조건 "다양한 굵기를 제공하는가? (최소 3가지 이상)"
프로모션의 타이틀과 텍스트는
중요도에 따라 강약을 줘야 하는 경우가 많기 때문에 다양한 굵기도 조건에 있어야 했다.
네 번째 조건 "한글/영문/숫자 혼합 사용 시 Baseline이 조화로운 구조로 설계되었는가"
한글 영문 숫자 혼합 사용 시 Baseline이 무너지는 폰트가 간혹 있다.
예를 들면 똑같은 pt임에도 영문/숫자만 따로 1-2pt를 올려야 맞춰지는 그런 폰트들이 있다.
빠르게 작업하는 게 목적이기에 디테일한 수정이 필요한 폰트는 제외했다.
긴급 프로모션 건에 빠르게 대응할 수 있도록
Typography 가이드 기반으로 한 예시 템플릿도 제작하였다.
Icongraphy
As-is
2019년에 직접 제작했던 커머스 아이콘이다.
스케치 아이콘 가이드와 상관없이 일러스트레이터 위주로 작업되어 리사이징 이슈가 있었고,
11번가 로고의 조형적 특성을 반영하여 제작되었기에
시간이 지남에 따라 트렌드에 뒤떨어져 보인다는 단점이 있었다.
또한 아이콘이 라이브러리화 되지 않아 Sketch에서 사용하기가 불편했다.
19년에 제작했던 커머스 아이콘To-be
프로모션 UI와 콘텐츠에 맞는 새로운 유형의 아이콘이 필요했다.
아이콘 스타일은 유행을 타지 않고 어느 콘텐츠에나 잘 어울리는 simple line으로 지정했으며
웹/앱에서 공통으로 사용해야 했기에 디바이스의 해상도에 따라 이미지가 리사이징 되어도
아이콘의 픽셀이 어긋나지 않고 또렷하게 보이기 위해 아이콘의 크기는 짝수로 맞추어 주었다.
44*44 크기의 그리드에 맞춰 총 204가지의 아이콘을 제작했다.
CMS 상품 템플릿
프로모션에 들어가는 상품 영역을 모듈화 하여 라이브러리에 추가했다.
상품 특성상 들어가야 할 정보가 너무 많았고,
썸네일 크기에 제약이 있어서 완전히 개편하는 방향으로 갈 수는 없었다.
결과물이 디자이너 입장에서는 100% 마음에 들진 않지만 마크업 일정 안에 마무리 지어야 했기에
최대한 기획 의견을 수렴하고 서둘러 마무리했던 작업이어서 아쉬움이 많이 남는다.
디자인시스템 (웹/앱) - CMS 상품템플릿 일부마지막으로
시행착오를 최소화하고 우리 조직에 적합한 형태로 만들기 위해
Promotion Sample을 만들어 제공하였다.
