[강의]
3. 아이콘 세트 디자인
3-1. 아이콘 디자인의 원칙
1) 정의
- 아이콘, 정보 전달을 위한 시각적 상징
2) 역할
• Google Material Design
https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
3) 원칙
(1) Clarity, 명확성
- 보편적으로 이해할 수 있도록 명확하게 디자인하기
- 누구나 이해할 수 있는
- 추상적인 것을 표현할 때는 텍스트와 함께 표현할 수도 있다
(2) Readability, 가독성
- 작게 보아도 명확하게 볼 수 있어야 한다
- 사이즈의 개념을 잘 탑재해서
(3) Alignment, 정렬
- 숫자에 의존하지 않고, 시각적으로 보았을 때 정렬하는 것
- 정중앙이라는 좌우 길이 숫자에 의존하는 것이 아닌, 나의 눈을 믿고 조정하기
(4) Brevity, 간결성
- 형태가 구체적일 시, 구체적으로 바라보게 된다
- 형태를 간결하게 만들어, 포괄적인 의미를 담을 수 있자
(5) Consistency, 일관성
- 아이콘이 많으나, 스타일의 일관성이 유지되고 있다
- 명확한 규칙, 원칙을 세우는 것이 중요하
3-2. 아이콘 디자인 프로세스
1) 아이콘의 형식 결정
- 구글 아이콘: 개별적으로 사용되니, 색채가 뚜렷하고, 입체적인 아이콘
2) 아이콘 활용 계획
- 어디에 어떻게 어떤 의미로 쓰일 것인가, 계획이 있어야 한다. 이에 따라 전략도 세워진다
3) 유사 아이콘 리서치
- 유사한 목적, 쓰임을 가진 아이콘을 참고하면 유사한 문제에 대비할 수 있다
- 시행착오를 미리 해결할 수 있다
- "디자이너 경력 15년 넘어도 해봐야 알아" 그렇지만, 리서치를 하면 삽질도 적게..
4) 크기 규정과 그리드 활용
- 그리드의 간격이 촘촘할수록 디테일하게
- 크기, 그리드를 설정하는 것이 아이콘 디자인의 일종의 가이드라인으로
5) 디테일 원칙 세우기
- 원칙, 프로세스 실제로 어겨도 상관없으나, 이해하고 있는 게 중요하다
- 디자인에 정답은 없지만, 이론적인 부분을 알고 있으면 결과가 조금은 더 논리적일 것이다
(1) Stroke 끝의 형태 결정
- 동일하게 맞춰야 디자인에 일관성이 부연된다
(2) Stroke의 위치 결정
- 앵커포인트, 세그먼트를 중심으로 이뤄지는 Stroke
(3) Corner 곡률 결정
3-3. 라인 아이콘 디자인
1) Icon Concept
- [리서치] Stock이미지 사이트에서 보편적인 시각적 상징 공부하기
2) Preview Bounds
• Stroke
- 스트로크의 위치, 크기에 따라서 오브젝트의 크기가 달라진다
• Hiding Bounding Box / Use Preview Bounds
- 내가 작업하는 오브젝트의 정확한 크기
- View - Hiding Bounding Box
- Preferences - Use Preview Bounds: 최종적인 외형을 오브젝트의 경계로 인식하는 체크 (라인 아이콘 작업 시 체크 후 작업)
• Preview
- 최종 완성된 상태로 보여주는 것
• View - Outline
- Path, Ancar Point만 볼 수 있는 기능
- Ctrl + Y
• Pixel Preview
- 백터 기반의 디자인을 비트맵 상태, 픽셀 단위로 어떻게 보이는지를 미리 확인할 수 있게 해주는 기능
- 비트맵 형식으로 내보낼 때 오브젝트의 위치, 크기, 가장자리 모양을 픽셀 수준에서 정확하게 확인하는데 유용한 기능
3) 제작
- 논리적인 설명이 가능해야 한다
- 프로젝트 전체를 관통하는 주제 의식과 관련되게 디자인 설명을 할 수 있어야 한다
- ex) "이 아이콘이 들어가는 앱이 사용자에게 열려있는 개방성을 컨셉으로 하는 앱, 이 컨셉에 맞게 패스를 끊어 숨통을 튀어주는 디자인"
4) 실습
3-4. 솔리드 아이콘 디자인
- 면으로 채워진 아이콘
1) 기능
• Join
- 두 개의 앵커포인트를 연결, 결합하는 기능
- 엥커포인트가 적을수록 용량이 적어지기에 좋다
- 직선의 오브젝트에서 끊긴 Path를 연결할 때 주로 사용하기
- 특정한 점과 특정한 형식을 연결하고 싶다면, 그리듯이 연결하기
• Average
- 선택된 점을 이동시켜주는 기능
- 두 개 이상의 점을 직접 선택 툴로 드래그해서 선택한 후 Average 선택하기
- 한 지점으로 모아서 Path를 정리하거나, Path의 특정 부분을 합치고 싶을 때 사용할 수 있다
- 가로 방향/수평: X
- 세로 방향/수직선: Y
• Compound Path
- 개별적인 오브젝트를 하나의 개체로 인식하게 만들어 공동으로 효과를 주 기능
- 떨어져 있는 오브젝트가 하나로 연결되어, 그라디언트가 하나로 표현된다
- Realease Compound Path를 통해 해제할 수 있다
- 라인 아이콘을 솔리드 아이콘으로 변환할 때 활용 가능한 기능이다!
2) Demo
(1) Path-Join: 끊긴 아이콘 패스 연결해주
(2) Object-Expand: 선을 면으로 만들어주기
3) 실습
★ 3-5. 글래스모피즘 아이콘 디자인 ★
1) 개념
• 글래스모피즘
- 유리+형태의 합성
- 반투명한 유리 질감을 활용해 시각적인 깊이와 입체감을 주는 스타일
2) 특징
(1) 반투명성 & 배경 블러
(2) 화려한 배경
(3) 얇은 테두리
(4) 은은한 그림자
(5) 시각적 계층
3) Demo
• Clipping Mask
- 맨 위에 있는 오브젝트 모양대로 아래에 있는 오브젝트를 잘라주는 것
4) 실습
4. 일러스트레이션 완성도 높이기
- 평면적이었던 일러스트에 디테일을 더하는 것
- 디테일을 더하고, 밀도를 높이는 것
- 밀도를 높이다? 비어 보이지 않게 채워진 느낌, 디테일을 쌓아 탄탄해 보이는 느낌
4-1. 손 그림 느낌 표현
1) [기능] Scribble
- 개체의 선을 낙서한 것처럼 표현하는 방식
- 다양한 효과
2) 이미 적용된 효과에서 수정을 하는 방법
- 기존에 해놓은 효과에서 +가 되어 적용되기에, 이미 적용된 효과에서 수정해야 한다
- Windoq - Appearance(외관 효과 패널) -
3) [기능] Roughen
- 도형의 외곽선을 거칠게 만들어서 손으로 그린 듯한 투박한 느낌을 준다
- Size: 거칠게 만드는 정도
- Relative(상대적:일정부분) / Absolute(절대적:모든선)
- Detail: 거친 느낌의 복잡성 정도
- Appearance에서 변경할 수 있다
4) 실습
4-2. 자연스러운 텍스쳐 표현
1) [기능] Paint Brush
- 스트로크 적용으로 패스를 그리다
- 붓터치
- 붓터치 느낌에 스트로크를 적용할 수 있는 기능이다
• Fidelity: 브러쉬에 적용되는 앵커포인트 개수..?
- Accutate(정교한) vs Smooth(부드러운)
2) 종류
• Scatter Brushes: 등록한 이미지로 브러쉬 표현
• Art Brush
• Bristle Brushes
• Pattern Brushes
3) Register Art Brush
4) Scatter Brush
- 자연스러운 텍스처 표현
5) 실습
- 디자이너는 판단을 잘해야 한다. 툴을 다루는 속도보다도 본인의 생각과 판단 능력을 기르는 것을 우선적으로!
★ 4-3. 감성적인 분위기 표현 ★
1) [기능] Grain Effect
- 오브젝트에 작은 알갱이를 흩뿌린 효과를 주는 기능
- 아날로그적, 레트로
2) Demo
• Transparency
- 특정 오브젝트의 특정 부분만 투명하게 보이는 기능
- 위에 있는 오브젝트가 마스크, 마스크 영역의 부분이 투명해지고 검해진다
- 위에 있는 오브젝트가 마스크 영역이 되어 투명해진다. 투명해진 영역(본체)에 효과를 준다.
• Gradiant
- 두 가지 이상의 색상을 부드럽게 혼합해 깊이감, 입체감을 표현하는 기능
- 검은색 점: 그레인효과 안 들어감 / 흰색 점: 그레인효과 들어감
• Mezzotint
3) 실습
4-4. 입체감 표현
1) [기능] Mesh
• Mesh
- 그물망을 만드는 것
- flat: 기본
- to center: A중심에서 흰색 그라이언트
- to edge: 외부 테투리에서 흰색 그라이언트
2) Demo / 실습
4-5. 디테일과 완성도 표현
1) [기능] Clipping Mask
- 특정 모양의 경계 안에서 다른 오브젝트의 무늬를 보게 하는 것
- 원형 위로 올린 후, 체크무늬와 함께 선택한 다음 기능 적용
2) [기능] Drop Shadow
- Effect - Stylize - Drop Shadow
4-6. 일러스트 작품 완성 [실습]
'NBC' 카테고리의 다른 글
| 29~32. 개인과제(2)_Illustrator로 포스터 세트 제작 (0) | 2026.04.16 |
|---|---|
| 29. [강의] Illustrator (5) (1) | 2026.04.16 |
| 27. [강의] Illustrator (1~2) (0) | 2026.04.14 |
| 26. [세션] 튜터님 소개 / [강의] Illustrator (0) | 2026.04.13 |
| 25. [튜터링] FKiller / [발제] 개인과제1 해설 (0) | 2026.04.10 |