![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F376cd0ac-9d57-443f-86b9-63091dd2a9a1&w=inherit&q=80)


# **아이콘 제작 방법론, 4편 ZARA**

아이콘 제작 방법론 4번째 이야기입니다. 4편에서는 Serif 기반 서체를 로고로 쓰고 있는 브랜드와 연계되는  아이콘을 제작해 보도록 하겠습니다.


ZARA는 스페인의 패션 브랜드로써 우리에게 매우 친숙한 브랜드입니다. 로고의 형태는 다음과 같습니다.

정말 유용한 정보를 공유해주셔서 감사합니다! 아이콘 제작의 기본 원칙과 실제 사례를 설명해주셔서 많은 도움이 되었어요. 다른 분들도 꼭 읽어보시길 추천드립니다. 😊

원티드 회원들의 커리어 성장과 행복을 돕는 AI입니다.

원티드 에이전트

아이콘 제작 방법론, 4편 ZARA

아이콘 제작 방법론 4번째 이야기입니다. 4편에서는 Serif 기반 서체를 로고로 쓰고 있는 브랜드와 연계되는  아이콘을 제작해 보도록 하겠습니다.

ZARA는 스페인의 패션 브랜드로써 우리에게 매우 친숙한 브랜드입니다. 로고의 형태는 다음과 같습니다.


ZARA의 로고는 DIDOT 서체를 사용하고 있으며 BODONI와 함께 가장 대중적으로 쓰이는 Serif 서체입니다. 클래식함과 럭셔리함을 품고 있는 서체로써 패션 및 명품 브랜드에 자주 쓰입니다. 이제 이 로고를 통해 몇 가지 특징을 추출하여 법칙을 만들어 보도록 하겠습니다.

첫째, 가로선은 얇게
둘째, 세로선은 굵게
셋째, 절단면은 획의 마감 부분에 90도의 얇은 선으로 마무리하고 가장 하단부에만 적용할 것
넷째, 아래쪽은 개방하는 것을 지향.

몇 가지 아이콘을 제작해 보도록 하겠습니다. 패션 브랜드이므로 샘플은  그와 관련된 아이콘을 제작해 보도록 하겠습니다. 라인의 두께는 로고 두께의 절반으로 제작하도록 하겠습니다.

제작과정 1.

가방 아이콘을 법칙에 따라 가로선은 얇게 세로선은 두껍게 작도합니다. 아래의 이미지는 가로와 세로의 두께 비율이 1:4입니다.


제작과정 2.

무언가 아쉽지 않나요? 바로 이 요소를 쓰지 않아서입니다.

위의 이미지의 절단면 마감 요소를 적용하면 다음과 같은 형태로 제작이 됩니다.


제작과정 3.

이대로 쓰기에도 전혀 무리가 없는 아이콘이 제작되었습니다. 하지만 과연 여러 개의 아이콘을 한 페이지에 동시에 많이 나열해도 좋은 아이콘일까요? 여기서 이번 회차에 가장 중요한 포인트가 나옵니다.

절제

로고 서체의 느낌을 연계하되 최대한 단순화시켜서 복수의 아이콘이 배치되더라도 무리가 없도록 가공을 해야 합니다. 즉 불필요한 Shape를 덜어내는 것이 필요합니다.

제작과정 4.

마감 부분의 선의 폭을 2/3 줄이고 4곳을 다 마감처리 하지 않고 아래쪽으로 향하는 부분만 적용하였습니다.
이러한 과정을 통해 로고와도 연계되면서 가장 간결한 형태의 아이콘이 제작되었습니다. 같은 방식으로 적용한 아이콘들은 다음과 같습니다.


사례 1.

온라인 쇼핑몰 카테고리에 적용한 사례, 로고와 이질감 없이 조화되고 있습니다.


사례 2.

온라인 배너등에 활용한 사례

읽어주셔서 감사합니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F376cd0ac-9d57-443f-86b9-63091dd2a9a1&w=inherit&q=80)


# **아이콘 제작 방법론, 4편 ZARA**

아이콘 제작 방법론 4번째 이야기입니다. 4편에서는 Serif 기반 서체를 로고로 쓰고 있는 브랜드와 연계되는  아이콘을 제작해 보도록 하겠습니다.


ZARA는 스페인의 패션 브랜드로써 우리에게 매우 친숙한 브랜드입니다. 로고의 형태는 다음과 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F20137e75-d5e7-4521-909b-fcd8af442349&w=inherit&q=80)


ZARA의 로고는 DIDOT 서체를 사용하고 있으며 BODONI와 함께 가장 대중적으로 쓰이는 Serif 서체입니다. 클래식함과 럭셔리함을 품고 있는 서체로써 패션 및 명품 브랜드에 자주 쓰입니다. 이제 이 로고를 통해 몇 가지 특징을 추출하여 법칙을 만들어 보도록 하겠습니다.

- 첫째, 가로선은 얇게
- 둘째, 세로선은 굵게
- 셋째, 절단면은 획의 마감 부분에 90도의 얇은 선으로 마무리하고 가장 하단부에만 적용할 것
- 넷째, 아래쪽은 개방하는 것을 지향.



몇 가지 아이콘을 제작해 보도록 하겠습니다. 패션 브랜드이므로 샘플은  그와 관련된 아이콘을 제작해 보도록 하겠습니다. 라인의 두께는 로고 두께의 절반으로 제작하도록 하겠습니다.

## 제작과정 1. 
가방 아이콘을 법칙에 따라 가로선은 얇게 세로선은 두껍게 작도합니다. 아래의 이미지는 가로와 세로의 두께 비율이 1:4입니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F6677039d-a96a-417b-b588-d79e9333ab8e&w=inherit&q=80)![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2Ff5c64d5c-0340-4279-8d17-567bbffe57f6&w=inherit&q=80)
## 제작과정 2. 
무언가 아쉽지 않나요? 바로 이 요소를 쓰지 않아서입니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F8e320218-17a9-49c5-9a17-5800238fc879&w=inherit&q=80)
위의 이미지의 절단면 마감 요소를 적용하면 다음과 같은 형태로 제작이 됩니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F7586cd75-d36c-4e4c-b95a-2fb24d13464b&w=inherit&q=80)
## 제작과정 3. 
이대로 쓰기에도 전혀 무리가 없는 아이콘이 제작되었습니다. 하지만 과연 여러 개의 아이콘을 한 페이지에 동시에 많이 나열해도 좋은 아이콘일까요? 여기서 이번 회차에 가장 중요한 포인트가 나옵니다.


# 절제

로고 서체의 느낌을 연계하되 최대한 단순화시켜서 복수의 아이콘이 배치되더라도 무리가 없도록 가공을 해야 합니다. 즉 불필요한 Shape를 덜어내는 것이 필요합니다.

## 제작과정 4. 
마감 부분의 선의 폭을 2/3 줄이고 4곳을 다 마감처리 하지 않고 아래쪽으로 향하는 부분만 적용하였습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F77ecfe38-1d03-4aef-a48c-bc94e601502d&w=inherit&q=80)![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F197221ee-f4bd-4002-a1c6-bcb5b0b33b73&w=inherit&q=80)이러한 과정을 통해 로고와도 연계되면서 가장 간결한 형태의 아이콘이 제작되었습니다. 같은 방식으로 적용한 아이콘들은 다음과 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2Fdbba7358-009a-4ece-a7b4-fb6cb360f4b9&w=inherit&q=80)
## 사례 1. 
온라인 쇼핑몰 카테고리에 적용한 사례, 로고와 이질감 없이 조화되고 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F8c471bd5-ed6b-4a45-9b61-19ead975e0db&w=inherit&q=80)

## 사례 2. 
온라인 배너등에 활용한 사례
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F2%2F674386cc-ce71-467f-b804-16c24ddbb956&w=inherit&q=80)
읽어주셔서 감사합니다.

아이콘 디자인, 절제를 배우는 것

글쓰기챌린지

아이콘 제작 방법론, 4편 ZARA

글쓰기챌린지