![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2Fc8b5a068-4cab-4f8f-a6ed-9b8610550404&w=inherit&q=80)
디자인에 정답은 없다고 말한다면 맞는 말일 수 있습니다. 그러나 정답에 가까운 답은 있습니다. 소위 좋아 보이는 것들의 법칙입니다. UI 템플릿이 만연하고 아이콘도 가져다 쓰는 세상이 되었습니다만 여전히 사람의 손을 타야 되는 부분들이 있습니다. 

이번 주제는 UI 디자인 완성도를 높일 수 있는 방법에 대해 연재하고자 합니다. 첫 번째로는 이미지의 완성도를 높

소개해 주신 내용 정말 유익하네요! UI 디자인의 완성도를 높이는 팁과 구체적인 사례들이 매우 도움이 됩니다. 다음 편도 기대할게요! 😊

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

원티드 에이전트

디자인에 정답은 없다고 말한다면 맞는 말일 수 있습니다. 그러나 정답에 가까운 답은 있습니다. 소위 좋아 보이는 것들의 법칙입니다. UI 템플릿이 만연하고 아이콘도 가져다 쓰는 세상이 되었습니다만 여전히 사람의 손을 타야 되는 부분들이 있습니다. 

이번 주제는 UI 디자인 완성도를 높일 수 있는 방법에 대해 연재하고자 합니다. 첫 번째로는 이미지의 완성도를 높이는 방법을 몇 회 차에 걸쳐 진행하도록 하겠습니다. 프로젝트를 진행하다 보면 사용하는 이미지의 완성도에 따라 시안의 완성도가 결정되기 때문에 매우 중요하다고 볼 수 있습니다. 참고로 모든 이미지는 1:1 비율로 제작함을 말씀드립니다.

구성요소를 최소화하기 위해 노력해 주세요.

일반적으로 비주얼의 구성요소는 "배경 + 오브젝트"로 이루어져 있습니다. 그리고 오브젝트의 개수와 복잡도, 배경의 색상(명도, 채도 포함)과 복잡도에 따라 디테일에 영향을 미칩니다.

사례 1.

배경 컬러를 모델이 착용하고 있는 아이템과 같은 계열로 톤을 맞추어 색상 요소를 줄이고, 색종이 개수를 줄여 오브젝트를 보다 단순화, 또한 채도를 낮추어 보다 화사한 이미지에서 세련된 이미지로 전환. 


사례 2.

배경 컬러를 모델이 착용하고 있는 무채색 계열로 변경, 다리 부분 아래 구두가 꼭 필요하지 않으므로 크랍하여 단순화, 또한 배경 컬러에 맞고 피부톤도 채도를 맞춤.


사례 3.

배경 컬러를 요거트 색상 계열로 변경, 요소 하나(스푼) 제거.


사례 4.

촛대 하나 제거, 화분의 돌출된 잎 제거.


사례 5.

강아지 뒷 배경의 펜스를 제거하여 이미지 단순화, 채도 또한 낮추어 줌.


위에서 제작된 샘플들로 시안을 만들어 보면 다음과 같습니다.

물론 위의 리터칭 된 이미지들을 처음부터 서칭 하여 사용하시면 최고의 선택입니다만 어떻게 해야 조금 더 완성도 있는 이미지를 만들 수 있는가를 고민할 수 있는 계기가 되었으면 합니다. 다음 편은 이미지 완성도 올리기 2편으로 구도에 대해서 서술하도록 하겠습니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2Fc8b5a068-4cab-4f8f-a6ed-9b8610550404&w=inherit&q=80)
디자인에 정답은 없다고 말한다면 맞는 말일 수 있습니다. 그러나 정답에 가까운 답은 있습니다. 소위 좋아 보이는 것들의 법칙입니다. UI 템플릿이 만연하고 아이콘도 가져다 쓰는 세상이 되었습니다만 여전히 사람의 손을 타야 되는 부분들이 있습니다. 

이번 주제는 UI 디자인 완성도를 높일 수 있는 방법에 대해 연재하고자 합니다. 첫 번째로는 이미지의 완성도를 높이는 방법을 몇 회 차에 걸쳐 진행하도록 하겠습니다. 프로젝트를 진행하다 보면 사용하는 이미지의 완성도에 따라 시안의 완성도가 결정되기 때문에 매우 중요하다고 볼 수 있습니다. 참고로 모든 이미지는 1:1 비율로 제작함을 말씀드립니다.


# **구성요소를 최소화하기 위해 노력해 주세요.**

일반적으로 비주얼의 구성요소는 "배경 + 오브젝트"로 이루어져 있습니다. 그리고 오브젝트의 개수와 복잡도, 배경의 색상(명도, 채도 포함)과 복잡도에 따라 디테일에 영향을 미칩니다.


## **사례 1.**
배경 컬러를 모델이 착용하고 있는 아이템과 같은 계열로 톤을 맞추어 색상 요소를 줄이고, 색종이 개수를 줄여 오브젝트를 보다 단순화, 또한 채도를 낮추어 보다 화사한 이미지에서 세련된 이미지로 전환. 
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2Fffc82905-e4cd-487a-a450-9db15f152495&w=inherit&q=80)

## **사례 2.**
배경 컬러를 모델이 착용하고 있는 무채색 계열로 변경, 다리 부분 아래 구두가 꼭 필요하지 않으므로 크랍하여 단순화, 또한 배경 컬러에 맞고 피부톤도 채도를 맞춤.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2F00761ef5-0664-46bc-a27f-1234149e1842&w=inherit&q=80)

## **사례 3.**
배경 컬러를 요거트 색상 계열로 변경, 요소 하나(스푼) 제거.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2Fcf95e4a9-435a-4920-9756-712b3ee59474&w=inherit&q=80)

## **사례 4.**
촛대 하나 제거, 화분의 돌출된 잎 제거.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2F6c937b6a-8f40-474b-91a2-f44f97b7aa05&w=inherit&q=80)

## **사례 5.**
강아지 뒷 배경의 펜스를 제거하여 이미지 단순화, 채도 또한 낮추어 줌.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2Ff36b8551-6e80-436e-8d86-90986d06792a&w=inherit&q=80)

위에서 제작된 샘플들로 시안을 만들어 보면 다음과 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F24%2Fec556683-1a3d-4f4f-8510-0eee166783e1&w=670&q=80)
물론 위의 리터칭 된 이미지들을 처음부터 서칭 하여 사용하시면 최고의 선택입니다만 어떻게 해야 조금 더 완성도 있는 이미지를 만들 수 있는가를 고민할 수 있는 계기가 되었으면 합니다. 다음 편은 이미지 완성도 올리기 2편으로 구도에 대해서 서술하도록 하겠습니다.


UI 디자인 완성도 올리기, 이미지 편(1)

글쓰기챌린지

글쓰기챌린지