Icon 제작하기
새로운 아이콘을 더 쉽고 빠르게 제작하는 방법과 아이콘 제작 과정에서 유의해야 할 사항을 안내합니다.
Version 1.0그리드
아이콘을 새로 제작할 때는 기존 아이콘과의 일관성을 갖추기 위해 RDS 아이콘 그리드를 활용합니다.
단위는 픽셀(px) 기준으로 제작하며, 제작한 아이콘을 활용할 때는 각 플랫폼에 맞추어 Android dp, iOS pt로 변환합니다.
가로, 세로 24개의 픽셀로 이루어진 RDS 아이콘 그리드
형태가 복잡하거나 시각 보정이 필요한 상황이 아니라면, 아이콘의 선이나 면은 정숫값 위치를 적용하는 것이 좋습니다.
아이콘의 선이 그리드 한 칸 끝에 딱 맞게 떨어지도록 정숫값 위치 적용
아이콘의 선이 그리드 한 칸 끝에서 어긋나는 소숫값 위치 적용
키라인
키라인은 새로운 아이콘을 제작할 때 비율이나 모양의 기준이 되는 안내선입니다. 원형, 사각형, 직사각형 등의 모양별 기본 비율은 아래를 참고하세요.
표현하려는 대상의 형태에 알맞은 키라인을 선별하여 활용
표현하려는 대상의 일반적인 형태와 비율에 알맞는 키라인을 선별해 활용합니다. 또한, 각 키라인에서 제시하는 비율과 어긋나지 않도록 디자인에 유의합니다.
Horizontal Rectangle 키라인 비율에 맞게 제작
Horizontal Rectangle 키라인 비율에 어긋나게 제작
구조
키라인은 새로운 아이콘을 제작할 때 비율이나 모양의 기준이 되는 안내선입니다. 원형, 사각형, 직사각형 등의 모양별 기본 비율은 아래를 참고하세요.
1. 선 Stroke 2. 면 Surface 3. 모서리 Corner 4. 색상 Color
선
선은 기본적으로 곡률, 각도, 내부 및 외부 위치와 관계없이 2px의 굵기로 표현합니다.
아이콘을 구성하는 선 굵기를 일정하게 적용
복잡한 형태를 표현하기 위해 일부 선 굵기를 다르게 적용
면
면은 가리키는 대상의 겉 부분을 나타내기 위해 단일 컬러로 덮은 영역입니다.
모서리
모서리는 너무 날카롭게 보이지 않도록 2px의 곡률을 적용합니다. 단, 아이콘 형태에 따라 1~3px (0.5px 단위 증감 허용) 안에서 곡률을 조정할 수 있습니다.
모서리에 권장 곡률을 적용
모서리를 곡률 적용 없이 직각으로 표현
컬러
컬러를 활용하는 방법은 아이콘 타입에 따라 달라집니다.
아웃라인 아이콘, 필 아이콘
선과 면을 모두 Bluegray 900 로 표현합니다.
컬러 아이콘
가리키는 대상을 직관적으로 떠올릴 수 있는 컬러를 적용하며, 항상 RDS 컬러 중 선별해 활용해야 합니다.
RDS 컬러만으로 아이콘을 제작
컬러 아이콘의 선과 면은 단일 컬러로 표현해야 하며 임의로 그라데이션을 적용하지 않습니다.
단일 컬러로 면을 표현
컬러 그라데이션으로 면을 표현
기본 원칙
시각 보정을 거쳐 균형감 있게 표현합니다.
아웃라인 아이콘의 사이즈를 유지한 채로 필 아이콘으로 변환하면, 면에 적용된 컬러로 인해 사이즈가 더 커 보일 수 있습니다.
따라서 같은 형태로 여러 타입의 아이콘을 제작할 때는 서로 비슷한 사이즈로 보일 수 있도록 시각 보정을 거쳐야 합니다.
같은 대상을 표현한 아웃라인 아이콘과 필 아이콘을 시각 보정을 거쳐 다르게 제작
최대한 단순한 형태로 표현합니다.
가리키는 대상의 가장 기본적인 형태나 핵심 특징만을 표현하고 불필요한 묘사는 최대한 덜어냅니다.
대상의 핵심적인 특징만 최대한 단순하게 표현
대상의 세부적인 형태를 너무 자세하게 표현
너무 많은 정보를 한 아이콘에 모두 표현하면, 아이콘을 사용할 수 있는 상황이 제한되고 시각적인 복잡성도 높아집니다.
따라서 가장 핵심적인 특징 중 한 가지만 선별해 간결하게 표현하는 것이 좋습니다.
기능을 상징하는 최소한의 요소만 표현
기능의 세부적인 맥락을 나타내기 위해 여러 요소를 표현
각도는 항상 정면 시점에 맞추고 형태는 입체감 없이 평면으로 표현합니다.
대상을 정면 시점에서 입체감 없이 표현
대상을 정면이 아닌 각도에서 입체적으로 표현
범용적인 메타포를 활용합니다.
되도록 아이콘은 특정 언어, 지역, 문화권과 관계없이 누구에게나 익숙한 메타포를 활용해 표현하는 것이 좋습니다.
‘캐시’나 ‘인포메이션’과 같이 전 세계적으로 익숙한 메타포를 활용해 아이콘을 표현
네이밍 컨벤션 Naming convention
시각 보정을 거쳐 균형감 있게 표현합니다.
아이콘 이름은 RDS 아이콘 네이밍 컨벤션에 따라 정의합니다.
1. Icon_Name 2. Type
- 네이밍 컨벤션에 따라 항상 ‘Icon_Name_Type’ 형태로 정의합니다.
- Icon_Name1 은 가리키는 대상의 형태나 특성 등을 나타내는 짧은 키워드를 사용합니다.
동일한 아이콘에서 다른 형태나 상태를 부차적으로 설명해야 할 때는 언더바(_)를 활용해 다음 키워드를 덧붙입니다.
Arrow_Up
Share_iOS
Alarm_On
- Type2 은 Outline, Fill, Color과 같이 아이콘의 스타일을 설명합니다.
Arrow_Up_Outline
Share_iOS_Fill
Alarm_Color
Figma 활용 방법
아이콘을 제작할 때 사용할 수 있는 Figma용 템플릿과 아이콘을 제작할 때 유의해야 하는 설정 등을 안내합니다.
아이콘 디자인 템플릿
RDS는 새로운 아이콘을 제작할 때 사용할 수 있는 Figma 템플릿을 제공합니다.
템플릿에 포함된 그리드와 키라인을 활용해 기존 RDS 아이콘과 일관성 있는 아이콘을 제작하세요.
제작 시 유의 사항
아이콘을 다른 작업 환경에서 사용하거나 사이즈를 변경할 때 문제가 일어나지 않도록 항상 아래와 같이 Figma 설정값을 조정하세요.
Constraints 속성 설정
- 모든 레이어를 그룹핑하여 선택합니다.
- 오른쪽 UI 패널 > Contraints 영역의 Width와 Height를 모두 ‘Scale’로 설정합니다.
윤곽선 변환
- 제작한 아이콘의 모든 획을 선택합니다.
- Outline Stroke 기능으로 윤곽선을 변환합니다. (단축키: Command ⌘ +Shift ⇧ + O)
