일러스트레이션
일러스트레이션 (Illustrations)
일러스트레이션은 브랜드 인지도의 핵심 구성 요소예요. HiTu(海兔) 시스템은 자연스러운 디자인 원칙에 기반해 일관된 스타일을 재현 가능하게 만들고, 기업용 제품에서 활용도를 높여요.
출처: 문서
본문
배경 정보 (Background information)
일러스트레이션은 브랜드 인지도의 핵심 구성 요소예요. 디지털 제품과 오프라인 상품 양쪽에 널리 퍼져 있죠. 저작권 정보와 달리 일러스트레이션은 직관을 통해 정보를 전달할 뿐 아니라 감정도 전달해서, 고객에게 더 높은 몰입과 공감을 만들어요. 이는 비즈니스 목표를 달성하면서도 더 나은 사용자 경험으로 이어져요. 일러스트레이션은 작가의 뚜렷한 개인 스타일 덕분에 본질적으로 복잡함을 담고 있어요. 아티스트 팀 사이에서 일관된 스타일을 재현하는 것은 도전이고, 반대로 한 명의 아티스트에게 프로젝트의 모든 일러스트레이션을 맡기는 데는 본질적인 위험이 있어요. 일러스트레이션 시스템은 일관된 브랜딩을 제공하고 생산성을 높이는 데 특히 중요하며, 이런 면의 위험을 피하는 것은 아주 중요해요.
디자인 원칙 (Design Principles)
가장 기초적인 디자인 원칙부터 가장 상위의 디자인 기법까지, HiTu는 ETCG에서 영감을 받은 디자인을 채택했어요. 일러스트레이션은 그룹으로 묶여 있어요. 나누면 템플릿으로, 모으면 전체 사용 흐름으로 사용할 수 있어요. 이는 디자인에 큰 유연성과 커스터마이징 능력을 보태줘요.
HiTu 피라미드 모델 (HiTu Pyramid Model)
우리 디자인 전략을 구성하는 4가지 추상적 기반, 즉 기술(Technology), 확실성(Certainty), 자연(Nature), 성장(Growth)을 구체화했어요. 기술은 강력한 공학 기반을 나타내며 모든 디지털 제품에 강한 지원을 제공하면서 가능성의 창을 열어줘요. 그림이 보여주듯 개성과 제품, 과거 경험과 미래의 관계를 시각화할 수 있어요. 각각의 조합은 다양한 비즈니스 요구를 충족할 수 있어요.
색상 (Colors)
씨헤어(Sea Hare) 스와치
Sea Hare의 색상 매칭 시스템은 Ant Design이 장면에서 컬러 팔레트를 적용하는 방식에서 영감을 받았어요. UI의 색상 체계와는 달라요. 일러스트레이션에 사용되는 색상 매칭 시스템은 상대적으로 더 생동감 있고 유연할 거예요. Ant Design의 기본 컬러 팔레트에서 영감을 얻어 밝기와 허용 오차를 조정했어요. 그 결과 더 효율적이고 사용하기 쉬워졌어요. Ant Design의 컬러 팔레트에서 유래했기 때문에 다른 UI 자산과 매끄럽게 통합돼요.
Sea Hare의 기본 자산 색상 (Default Asset Colors of Sea Hare)
연구를 통해 기업용 제품에서 파란색과 흰색이 큰 비중을 차지한다는 것을 발견했어요. 기술적이고, 탐구적이며, 집중된 분위기 때문에 Geek Blue를 기본 색상으로 선택했어요.
Sea Hare의 팔레트를 Adobe의 삼색(ternary) 색상 선택기와 모자이크 볼과 결합하면, 기본 컬러 팔레트의 기본 버전을 쉽게 얻을 수 있어요.
디자인 자산 (Design Assets)
사람 일러스트레이션 (Illustrations of People)
자연스러운(natural) 디자인 원칙을 고려해, Q 버전 만화나 지나치게 과장된 예술 스타일은 권장하지 않아요. 대신 현실적인 머리-몸통 비율을 권장해요.
동시에 9가지 흔한 전문 직업 역할을 디자인할 때 감정을 통합했어요. 역할의 일부 특징을 융합하면서도 아주 다른 개성을 발산해서, 다양한 비즈니스 요구를 충족해요.
기본 캐릭터 디자인을 바탕으로 각 캐릭터를 분해하고 원하는 골격 구조에 맞게 재배치해요. 이는 다양한 자세를 재사용하고 확장할 수 있게 해 줘요.
기본 구성 요소 (Elementary Components)
기억은 차이에서 오고, 전문성은 통일성에서 와요. 기본 구성 요소(Elementary Components)는 비즈니스 환경에서 끊임없이 바뀌고 변하는 일부 상태를 가리켜요. 우리는 창의성을 제약하지 않으면서 통일성을 달성하기를 바라요. 일관된 리듬감을 위해 1024*1024 그리드를 권장하고, 8의 배수 크기의 라운드 코너를 유지해요.
사용법 (Usage)
이렇게 풍부한 자산을 어떻게 활용할까요? HiTu의 디자인 원칙을 지침으로 삼아, 디자이너가 Z축을 따라 공간감을 구축하고 일러스트레이션을 전경(foreground), 중경(middle ground), 배경(background)의 3개 레이어로 나누는 걸 권장해요. 핵심 요소(사람, 기본 구성 요소 등)는 전경에, 환경과 맥락은 중경에 배치하고, 배경에는 분위기를 조성해요. 전경은 가장 높은 채도와 가시성을 가져야 하며, 레이어가 내려갈수록 둘 다 낮아져요.
## 더 알아보기 (Learn more) - [색상 문서](https://ant.design/docs/spec/colors) - [Ant Design 디자인 가이드라인](https://ant.design/docs/spec/introduce) - [AntV 시각화](https://antv.antgroup.com/en)