[TIL] DAY26_일러스트레이터 기초 3강, 도메인 탐색 및 모작 스터디 3주차

2026.04.13 DAY.26

---

 

[ Today I Learned ]
DAY26_ 일러스트레이터 기초 3강, 도메인 탐색 및 모작 스터디 3주차

---

 

 

[일러스트레이터 기초] 제 3강. 아이콘 세트 디자인

 

 

1. 아이콘 디자인의 원칙

 

아이콘의 역할

네비게이션 기능	앱 메뉴, 웹 인터페이스에서 빠른 이동 지원 (예시: 홈, 검색, 설정)
인지 강화	텍스트만 있을 때보다 직관적 이해 속도가 빠름 (예시: 쓰레기통 아이콘 = 삭제)
공간 절약	UI에서 텍스트 대신 작은 아이콘으로 효율적인 공간 활용 가능
브랜드 아이덴티티	브랜드 철학과 톤 앤 매너를 반영하는 도구 (예시: Google Material Icons)

 

 

아이콘 디자인의 원칙 5가지

1️⃣ Clarity (명확성) : 아이콘은 한눈에 의미가 전달되어야 하며, 불필요한 요소 없이 직관적으로 이해되어야 한다.

2️⃣ Readability (가독성) : 작은 크기에서도 형태가 잘 보이고 구분 가능해야 하며, 복잡한 디테일은 최소화해야 한다.

3️⃣ Alignment (정렬) : 아이콘 내부 요소와 전체 아이콘 간 정렬이 균형 있게 맞아야 시각적으로 안정감을 준다.

4️⃣ Brevity (간결성) : 최소한의 요소로 핵심 의미만 표현해야 하며, 단순할수록 전달력이 높아진다.

5️⃣ Consistency (일관성) : 아이콘 세트 내에서 선 두께, 스타일, 비율 등을 동일하게 유지해 통일감을 만들어야 한다.

 

 

 

2. 아이콘 디자인 프로세스

 

아이콘의 형식 결정

• 아이콘을 라인형, 면형 등 어떤 스타일로 제작할지 먼저 정하고, 브랜드 톤앤매너에 맞는 방향을 설정한다.
• 사용 환경을 고려해 단순화 수준과 디테일 정도를 함께 결정하는 것이 중요하다.

 

아이콘 활용 계획

• 아이콘이 사용될 위치(앱, 웹, 인쇄물 등)와 크기를 고려해 다양한 상황에서도 잘 보이도록 설계한다.
• 세트로 활용될 경우 일관성을 유지할 수 있도록 확장성과 시스템을 함께 계획한다.

 

크기 규정과 그리드 활용

• 아이콘 디자인에서 크기 규정은 다양한 환경에서 동일한 기준을 유지하기 위해 중요한 요소이다.
• 보통 16px, 24px 같은 배수 단위로 제작하고 비율과 확장성을 고려해야 한다.
• 그리드를 활용해 요소의 정렬과 간격을 맞춰, 통일감과 균형을 만들어주며 작은 크기에서도 안정적으로 보이게 한다.
• 아이콘은 일정한 크기 기준과 그리드를 기반으로 균형 있게 설계해야 한다

 

디테일 원칙 세우기

이미지 출처 : https://goeuny.medium.com/

 

 

 

3. 라인 아이콘 디자인

 

[실습] 라인 아이콘 9종 디자인

• 라인 두께를 일정하게 유지해야 하며, 아이콘 간 시각적 무게가 달라 보이지 않도록 해야 한다.
• 너무 얇은 선은 작은 크기에서 깨져 보일 수 있으므로 사용 환경에 맞는 두께를 설정해야 한다.
• 불필요한 디테일은 줄이고 단순한 형태로 표현해 가독성을 높여야 한다.
• 선과 여백의 비율을 균형 있게 유지해 답답하거나 비어 보이지 않도록 해야 한다.
• 아이콘 세트 전체에서 스타일, 모서리 처리, 비율 등을 일관되게 유지하는 것이 중요하다.
• 얇고 단순한 선을 사용하되, 두께·비율·일관성을 유지하는 것이 핵심이다.

 

 

 

4. 솔리드 아이콘 디자인

 

[실습] 솔리드 아이콘 9종 디자인

• 형태가 면으로 표현되기 때문에 실루엣만으로도 의미가 명확하게 전달되도록 해야 한다.
• 작은 크기에서도 형태가 뭉개지지 않도록 내부 디테일은 최소화하는 것이 중요하다.
• 여백(네거티브 스페이스)을 적절히 활용해 답답하지 않고 구분이 잘 되도록 설계해야 한다.
• 아이콘 간 크기, 비율, 모서리 처리 등을 통일해 일관된 스타일을 유지해야 한다.
• 대비를 고려해 배경 위에서도 또렷하게 보이도록 색상과 형태를 설계해야 한다.
• 면 형태와 실루엣 중심으로, 단순하고 명확하게 표현하는 것이 핵심이다

 

 

5. 글래스모피즘 아이콘 디자인

 

[실습] 글래스모피즘 9종 디자인

 

• 기본 도형을 만든 후 Fill 색상을 밝은 색으로 설정하고, Transparency(투명도)를 20~40% 정도로 낮춰 반투명 효과를 만든다.
• Effect → Blur → Gaussian Blur를 적용하거나, 배경을 흐리게 표현해 유리 느낌을 강조한다.
• Stroke를 흰색으로 얇게 추가하거나, Gradient를 활용해 빛이 닿는 듯한 하이라이트를 표현한다.
• Effect → Stylize → Inner Glow 또는 Drop Shadow를 사용해 은은한 입체감을 더한다.

 

 

 

---

 

[ DAY.26 학습 일기 ]

일러스트레이터 4강까지 수강완료.. 실습은 3강 아이콘 만들기까지 완료... 이번 강의는 실습이 너무 많은게 변수였다. 과제하려면 강의를 듣고 실습을 해봐야할 것 같아서 하고는 있는데 이대로가다간 강의 실습도 과제도 둘다 시간내에 못끝낼 것 같다ㅋㅋㅋ... 무슨 아이콘을 27개를 만들지?.. 그리고 강의가 너무 늘어진다. 바로 이전 포토샵 강의와는 다르게 노션으로 정리된 것도 없고, 그냥 강사님의 PPT파일이 끝인데 이게 너무 불친절하다. 저번 포토샵 강의에서는 노션만 봐도 따라할 수 있게 잘 정리가 되있어서 계속 강의를 뒤로감아 돌려보지 않아도 잘 따라할 수 있었다. 근데 이번 강의는.. 노션에 정리된 것도 없고, 강사님 말씀들으려고 계속 돌려봐야 하고, 너무 불필요한 설명이 많은 느낌이고, 실습할거면 제대로 실습하는 강의만 제대로 보여줬으면 좋겠다.