![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fddb4c23e-6639-4a8a-99ee-534b4a3dc02e&w=inherit&q=80)
아이콘 제작 방법론 8번째 이야기입니다. 
8편에서는 아이소메트릭 아이콘 제작법과 활용에 대해서 서술하도록 하겠습니다.

2019년부터 일룸에서는 나의 일룸생활이라는 메시지로 광고를 진행하고 있습니다. 해당 광고의 스틸컷은 다음과 같습니다.


아이콘 제작 과정에 대한 상세한 설명 감사합니다! 아이소메트릭 디자인에 대한 이해도가 높아진 것 같습니다. 앞으로도 유익한 포스팅 기대할게요! 😊

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

원티드 에이전트

아이콘 제작 방법론 8번째 이야기입니다. 
8편에서는 아이소메트릭 아이콘 제작법과 활용에 대해서 서술하도록 하겠습니다.

2019년부터 일룸에서는 나의 일룸생활이라는 메시지로 광고를 진행하고 있습니다. 해당 광고의 스틸컷은 다음과 같습니다.


이 광고에서 마지막에 등장하는 저 캠페인 로고를 활용하여 아이콘을 제작하고 스토리텔링을 풀어가도록 하겠습니다. 해당 로고는 다음과 같습니다.


아이콘 제작 과정을 말씀드리기 전에 이번 아이콘은 캠페인 로고의 3차원 공간을 활용하여 그 위에 배치할 수 있도록 입체감 있게 제작하려 합니다. 쉽게 하나의 예를 보여 드리겠습니다.



이렇게 입체감 있는 공간 위에 1인용 소파 아이콘을 올릴 경우 바닥의 각도와 맞게 입체감 있게 디자인해줄 필요가 있습니다. 3D 툴을 사용하지 않고 각도를 이용하여 입체감을 표현하는 디자인을 아이소메트릭 디자인이라고 합니다. 아이소메트릭의 사전적 정의는 여기를 클릭하시면 됩니다. 

그러면 아이콘 제작 과정을 보여드리겠습니다. 아이소메트릭의 경우 제작 시 가장 중요한 것은 대비입니다.
어떤 대비인지는 아래쪽에 서술하도록 하겠습니다.

제작과정 1.

원하는 각도의 그리드를 먼저 제작합니다. 두 가지 포인트가 기준입니다.
첫 번째는 원래 로고의 각도에 맞추어야 하지만 대칭이 되지 않아 대칭으로 각도 변경
두 번째로는 일반적으로는 중심축 60도 각도를 쓰지만 오브젝트가 지나치게 높아지므로 66도로 각도를 변경



제작과정 2.

그리드에 맞게 책장 아이콘 제작


제작과정 3.

이제 중요한 대비를 적용하도록 하겠습니다. 첫 번째는 선의 대비입니다. 아이소메트릭 아이콘은 기본적으로 선이 많고 복잡하여 시선이 분산되는 특징을 갖고 있습니다. 이를 보완하기 위해 둘러싼 형태의 선은 두껍게, 안의 구분을 이루는 선은 얇게 하여 전체 형태에 조금 더 집중할 수 있도록 적용합니다.


제작과정 4.

이제 면의 대비를 적용하도록 하겠습니다. 평면 형태를 입체로 보이긴 위해서 우리는 명암을 이용하는데 아이콘 또한 마찬가지입니다. 빛이 적게 들어오는 영역에 연한 회색을 채워줍니다.


위의 법칙에 따라 제작된 아이콘들은 다음과 같습니다.


그럼 이제 오늘의 제목인 글을 대체한다는 것에 대해 알아보도록 하겠습니다. 브랜딩의 관점에서 볼 때 아래와 같은 트리구조로 베리에이션이 가능합니다.


나의 서재생활을 아이콘으로만 표현한다면 아래와 같이 바꿀 수 있습니다. 이렇게 변경할 경우 아이콘만으로 글을 대체할 수 있습니다. 오히려 서재의 모습을 더 구체적, 상징적으로 표현할 수 있는 방법입니다.


같은 원리로 만든 나의 침실생활입니다. 연장선과 함께 쓸 경우 확장을 염두에 둔 느낌을 줄 수 있습니다.


이렇게도 활용이 가능합니다.


읽어주셔서 감사합니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fddb4c23e-6639-4a8a-99ee-534b4a3dc02e&w=inherit&q=80)
아이콘 제작 방법론 8번째 이야기입니다. 
8편에서는 아이소메트릭 아이콘 제작법과 활용에 대해서 서술하도록 하겠습니다.

2019년부터 일룸에서는 나의 일룸생활이라는 메시지로 광고를 진행하고 있습니다. 해당 광고의 스틸컷은 다음과 같습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2F217dca3b-f76c-4d03-9362-bb8db5b15587&w=inherit&q=80)
이 광고에서 마지막에 등장하는 저 캠페인 로고를 활용하여 아이콘을 제작하고 스토리텔링을 풀어가도록 하겠습니다. 해당 로고는 다음과 같습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2F5b469962-5eb2-4acf-a47c-a13038689c7b&w=inherit&q=80)
아이콘 제작 과정을 말씀드리기 전에 이번 아이콘은 캠페인 로고의 3차원 공간을 활용하여 그 위에 배치할 수 있도록 입체감 있게 제작하려 합니다. 쉽게 하나의 예를 보여 드리겠습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Ff7a183b0-3fbf-4807-bbd2-fac642c228c3&w=inherit&q=80)

이렇게 입체감 있는 공간 위에 1인용 소파 아이콘을 올릴 경우 바닥의 각도와 맞게 입체감 있게 디자인해줄 필요가 있습니다. 3D 툴을 사용하지 않고 각도를 이용하여 입체감을 표현하는 디자인을 아이소메트릭 디자인이라고 합니다. 아이소메트릭의 사전적 정의는 [여기](https://namu.wiki/w/%EC%BF%BC%ED%84%B0%EB%B7%B0)를 클릭하시면 됩니다. 

그러면 아이콘 제작 과정을 보여드리겠습니다. 아이소메트릭의 경우 제작 시 가장 중요한 것은 대비입니다.
어떤 대비인지는 아래쪽에 서술하도록 하겠습니다.


## **제작과정 1.**
원하는 각도의 그리드를 먼저 제작합니다. 두 가지 포인트가 기준입니다.
첫 번째는 원래 로고의 각도에 맞추어야 하지만 대칭이 되지 않아 대칭으로 각도 변경
두 번째로는 일반적으로는 중심축 60도 각도를 쓰지만 오브젝트가 지나치게 높아지므로 66도로 각도를 변경

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fa0d3f6d7-f8a8-4f48-97c0-2514b138651e&w=inherit&q=80)

## **제작과정 2.** 
그리드에 맞게 책장 아이콘 제작
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fa09ca215-e8fe-4290-9564-33614e51a433&w=inherit&q=80)

## **제작과정 3.** 
이제 중요한 대비를 적용하도록 하겠습니다. **첫 번째는 선의 대비입니다.** 아이소메트릭 아이콘은 기본적으로 선이 많고 복잡하여 시선이 분산되는 특징을 갖고 있습니다. 이를 보완하기 위해 둘러싼 형태의 선은 두껍게, 안의 구분을 이루는 선은 얇게 하여 전체 형태에 조금 더 집중할 수 있도록 적용합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2F1b26ac84-3d5d-4f9c-b047-7e4b97df0cf4&w=inherit&q=80)

## **제작과정 4.** 
이제 **면의 대비**를 적용하도록 하겠습니다. 평면 형태를 입체로 보이긴 위해서 우리는 명암을 이용하는데 아이콘 또한 마찬가지입니다. 빛이 적게 들어오는 영역에 연한 회색을 채워줍니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2F703c2ccd-d441-4322-8eae-943e29ef753e&w=inherit&q=80)

위의 법칙에 따라 제작된 아이콘들은 다음과 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fa4c2f4af-c317-461b-b5ee-1d630c6e85b7&w=inherit&q=80)

그럼 이제 오늘의 제목인 글을 대체한다는 것에 대해 알아보도록 하겠습니다. 브랜딩의 관점에서 볼 때 아래와 같은 트리구조로 베리에이션이 가능합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2F0c9f76c4-571f-41bf-9305-08eb35240290&w=inherit&q=80)

나의 서재생활을 아이콘으로만 표현한다면 아래와 같이 바꿀 수 있습니다. 이렇게 변경할 경우 **아이콘만으로 글을 대체할 수 있습니다.** 오히려 서재의 모습을 더 구체적, 상징적으로 표현할 수 있는 방법입니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fbb75f476-ce96-429f-85f5-20d450bcc25d&w=inherit&q=80)

같은 원리로 만든 나의 침실생활입니다. 연장선과 함께 쓸 경우 확장을 염두에 둔 느낌을 줄 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fb4d0d3f9-f278-4cb7-a4a6-743dd1769e24&w=inherit&q=80)

이렇게도 활용이 가능합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F13%2Fb54af6cb-2104-4676-aaff-798af0a48573&w=inherit&q=80)

읽어주셔서 감사합니다.

아이콘 디자인, 글을 대신하는 것

글쓰기챌린지

글쓰기챌린지