![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F2ae9de95-4a91-4b48-8470-1376ee07916f&w=inherit&q=80)
# **상편.** 
# **포르투 도시 브랜딩을 통한 Flexible icon 사례 살펴보기**

아이콘 디자인 9편에서는 조금 특별한 아이콘을 제작하는 방법에 대해 서술하고자 합니다. 통칭 Flexible Icon이라고 하며, 말 그대로 아이콘들이 서로 유기체처럼 확장 및 결합하여 새로운 형태의 결과물들을 만들어 내는 성격을 지니고 있습니다. 이번 편은 조금 길

정말 흥미로운 포스팅이네요! Flexible Icon에 대한 심도 있는 분석과 예시가 매우 유익해 보입니다. 다음 편도 기대하고 있겠습니다! 😊

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

원티드 에이전트

상편.

포르투 도시 브랜딩을 통한 Flexible icon 사례 살펴보기

아이콘 디자인 9편에서는 조금 특별한 아이콘을 제작하는 방법에 대해 서술하고자 합니다. 통칭 Flexible Icon이라고 하며, 말 그대로 아이콘들이 서로 유기체처럼 확장 및 결합하여 새로운 형태의 결과물들을 만들어 내는 성격을 지니고 있습니다. 이번 편은 조금 길게 다룰 예정이라 상편과 하편으로 나누고자 합니다. 

상편에서는 Flexible Icon의 사례 분석, 
하편에서는 상편에서 다룬 작품을 오마주 하여 직접 제작해 보도록 하겠습니다.

먼저 오늘 사례를 분석할 작품은 디자이너라면 모르기 힘든 유명한 작품, 바로 Porto City Branding입니다. 아래 이미지를 보시면 아시겠지만 타일을 붙여서 조합하는 형태로 이루어져 있습니다. 이 작품의 제작 배경과 제작과정 및 원리, 그리고 활용사례에 대해서 아주 쉽게 서술해 보도록 하겠습니다.

출처 : Porto Behance(https://www.behance.net/gallery/33338423/Porto)

현대적으로 재해석하다.

제작사는 이 미션을 진행하기 전에 도시 전체에 퍼져 있는 파란색 타일에서 영감을 받았습니다. 이 타일그림을 재해석하여 전통방식은 따르되 현대적이고 새로운 도시 아이덴티티가 될 수 있겠다는 생각을 갖고 말이죠.

출처 : STUDIO EDUARDO AIRES Homepage

조화를 위한 과정

아이콘들은 독립적으로 사용할 수 있지만 서로 유기적으로 이어지는 형태를 지니고 있어야 합니다. 그러기 위해서는 두 가지 중요한 법칙이 있습니다.

첫째,

단순해야 합니다.

그래야만 10개가 결합하던 100개가 결합하던 시인성을 유지할 수 있습니다. 아이콘을 단순화하기 위해 최소한의 그리드시스템을 사용하였고, 8X8 시스템을 기반으로 아이콘(보통은 24X24)이 제작되었습니다. 이미지와 함께 설명하자면 다음과 같습니다.

수정궁 정원(Jardins do Palácio de Cristal)의 아이콘입니다. 돔 위의 마감 커버, 중간 부분의 둥근 유리창, 돔 하단부의 기둥 및 게이트 등의 요소를 배제하고 철저하게 상징적인 형태만 간결하게 표현하였습니다.

수정궁 정원(Jardins do Palácio de Cristal)의 돔

8X8로 간결하게 표현된 수정궁 정원 아이콘

포르투 시립 극장(Campo Alegre Theatre)의 아이콘입니다. 건물의 모든 요소를 생략하고 특징적인 일부분만 사용하여 간결하게 표현하였습니다.

포르투 시립 극장(Campo Alegre Theatre)의 건물 전경

간결하게 표현된 시립극장 아이콘

둘째,

그리드의 외곽 테두리까지 선이 이어져야 합니다.

여기 두 개의 나무 아이콘이 있습니다. 두 아이콘이 서로 연결되는 느낌을 받으려면 만나는 부분이 있어야 가능하겠죠? 간단한 이치입니다.

두 개의 아이콘을 붙여서 사용할 경우 접촉면이 닿아야만이 끊어지지 않고 서로 유기적으로 이어진 형태를 유지할 수 있습니다. 그러기 위해서는 그리드의 외곽 부분까지 닿도록 해야 합니다. 아래 몇 가지 예시를 보도록 하겠습니다.

먼저 건물 아이콘입니다. 그리드 시스템을 분석해 보면 외곽테두리에 닿아 있는 부분들이 존재합니다. 바로 이 부분들이 연결고리 역할을 담당합니다. 아래 이미지의 첫 번째 이미지가 그 부분들입니다.

독립적인 건물 아이콘 3개

위와 같이 아이콘을 제작할 경우 두 개 이상의 아이콘이 만나 서로 연결되어 하나를 이루게 됩니다. 아래 이미지는 각각 2, 3, 4, 8개의 조합입니다. 보시는 바와 같이 조합이 되어 이어지면서 점점 확장해 나가는 형태를 확인하실 수 있습니다.



몇 가지 조합된 다른 형태를 더 알아보겠습니다.


아까 위에서 언급한 라이프스타일 관련 아이콘들입니다. 와인, 음식 등의 콘셉트부터 열정이나 사랑 등의 무형의 아이콘도 존재합니다. 이것들의 조합 형태는 아래와 같습니다.


해당 도시(포르투)에서는 어떻게 사용하는지 사례들입니다.





상편이 마무리되었습니다. 하편에서는 이 글에서 설명한 법칙을 사용하여 서울을 브랜딩해 보고자 합니다.
감사합니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F2ae9de95-4a91-4b48-8470-1376ee07916f&w=inherit&q=80)
# **상편.** 
# **포르투 도시 브랜딩을 통한 Flexible icon 사례 살펴보기**

아이콘 디자인 9편에서는 조금 특별한 아이콘을 제작하는 방법에 대해 서술하고자 합니다. 통칭 Flexible Icon이라고 하며, 말 그대로 아이콘들이 서로 유기체처럼 확장 및 결합하여 새로운 형태의 결과물들을 만들어 내는 성격을 지니고 있습니다. 이번 편은 조금 길게 다룰 예정이라 상편과 하편으로 나누고자 합니다. 

상편에서는 Flexible Icon의 사례 분석, 
하편에서는 상편에서 다룬 작품을 오마주 하여 직접 제작해 보도록 하겠습니다.

먼저 오늘 사례를 분석할 작품은 디자이너라면 모르기 힘든 유명한 작품, 바로 Porto City Branding입니다. 아래 이미지를 보시면 아시겠지만 타일을 붙여서 조합하는 형태로 이루어져 있습니다. 이 작품의 제작 배경과 제작과정 및 원리, 그리고 활용사례에 대해서 아주 쉽게 서술해 보도록 하겠습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2Fd92402c7-f70f-4224-b237-c5bf7f43b3ba&w=inherit&q=80)출처 : Porto Behance(https://www.behance.net/gallery/33338423/Porto)




# **현대적으로 재해석하다.**

제작사는 이 미션을 진행하기 전에 도시 전체에 퍼져 있는 파란색 타일에서 영감을 받았습니다. 이 타일그림을 재해석하여 전통방식은 따르되 현대적이고 새로운 도시 아이덴티티가 될 수 있겠다는 생각을 갖고 말이죠.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F75eb4edc-953e-4dc4-bb24-2c56348cdb06&w=inherit&q=80)출처 : STUDIO EDUARDO AIRES Homepage




# **조화를 위한 과정**

아이콘들은 독립적으로 사용할 수 있지만 서로 유기적으로 이어지는 형태를 지니고 있어야 합니다. 그러기 위해서는 두 가지 중요한 법칙이 있습니다.


## **첫째,** 
## **단순해야 합니다.** 

그래야만 10개가 결합하던 100개가 결합하던 시인성을 유지할 수 있습니다. 아이콘을 단순화하기 위해 최소한의 그리드시스템을 사용하였고, 8X8 시스템을 기반으로 아이콘(보통은 24X24)이 제작되었습니다. 이미지와 함께 설명하자면 다음과 같습니다.

수정궁 정원(Jardins do Palácio de Cristal)의 아이콘입니다. 돔 위의 마감 커버, 중간 부분의 둥근 유리창, 돔 하단부의 기둥 및 게이트 등의 요소를 배제하고 철저하게 상징적인 형태만 간결하게 표현하였습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F1b4f5c17-48b4-4104-8b25-b2bbe1d7a8a9&w=inherit&q=80)수정궁 정원(Jardins do Palácio de Cristal)의 돔

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F4050c706-8b24-467c-a663-fb8162b1ee76&w=inherit&q=80)8X8로 간결하게 표현된 수정궁 정원 아이콘



포르투 시립 극장(Campo Alegre Theatre)의 아이콘입니다. 건물의 모든 요소를 생략하고 특징적인 일부분만 사용하여 간결하게 표현하였습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F3865374c-9bd6-4ddb-bd03-6947333c8dcf&w=inherit&q=80)포르투 시립 극장(Campo Alegre Theatre)의 건물 전경


![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2Faa9f04f4-e938-4ff2-be55-9f87d99031c0&w=inherit&q=80)간결하게 표현된 시립극장 아이콘





## **둘째,** 
## **그리드의 외곽 테두리까지 선이 이어져야 합니다.** 

여기 두 개의 나무 아이콘이 있습니다. 두 아이콘이 서로 연결되는 느낌을 받으려면 만나는 부분이 있어야 가능하겠죠? 간단한 이치입니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F47c8878f-b43e-49cc-bc8e-42d3af9e827a&w=inherit&q=80)두 개의 아이콘을 붙여서 사용할 경우 접촉면이 닿아야만이 끊어지지 않고 서로 유기적으로 이어진 형태를 유지할 수 있습니다. 그러기 위해서는 그리드의 외곽 부분까지 닿도록 해야 합니다. 아래 몇 가지 예시를 보도록 하겠습니다.

먼저 건물 아이콘입니다. 그리드 시스템을 분석해 보면 외곽테두리에 닿아 있는 부분들이 존재합니다. 바로 이 부분들이 연결고리 역할을 담당합니다. 아래 이미지의 첫 번째 이미지가 그 부분들입니다.




![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F09feca1d-39cf-40ec-8ee9-0332aeeaf930&w=inherit&q=80)독립적인 건물 아이콘 3개



위와 같이 아이콘을 제작할 경우 두 개 이상의 아이콘이 만나 서로 연결되어 하나를 이루게 됩니다. 아래 이미지는 각각 2, 3, 4, 8개의 조합입니다. 보시는 바와 같이 조합이 되어 이어지면서 점점 확장해 나가는 형태를 확인하실 수 있습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F5c307e9c-5447-4f32-b5c4-800ca1d778ca&w=inherit&q=80)



몇 가지 조합된 다른 형태를 더 알아보겠습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F76901b7b-a23f-4176-abd5-de56e81e8d66&w=inherit&q=80)
아까 위에서 언급한 라이프스타일 관련 아이콘들입니다. 와인, 음식 등의 콘셉트부터 열정이나 사랑 등의 무형의 아이콘도 존재합니다. 이것들의 조합 형태는 아래와 같습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F36237976-ce53-4f17-8f17-aaa204d2d241&w=inherit&q=80)
해당 도시(포르투)에서는 어떻게 사용하는지 사례들입니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2F0a1a1385-0cb2-4191-8d19-644ecb38e6f2&w=inherit&q=80)
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2Feb7ca73e-25ab-42f8-8b19-6c396e75d854&w=inherit&q=80)
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F18%2Fbd8f3ac6-1ab9-46d2-a970-db1800ca31ff&w=inherit&q=80)

상편이 마무리되었습니다. 하편에서는 이 글에서 설명한 법칙을 사용하여 서울을 브랜딩해 보고자 합니다.
감사합니다.

아이콘 디자인, 조화를 이루는 것

글쓰기챌린지

상편.

포르투 도시 브랜딩을 통한 Flexible icon 사례 살펴보기

글쓰기챌린지