![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2Fb4bdedb6-6b49-4d1e-b56f-c6b7623f64d8&w=inherit&q=80)
# **점이를 이용한 그리드시스템의 적용**

조형 원리 중 점이(Gradiation)라는 것이 있습니다. 이것은 형태나 색상, 크기 등을 규칙에 따라 점진적이고 조화롭게 변화시킵니다. UI 디자인에서 점이는 히스토리나 프로세스, 성장 과정 등의 컨텐츠에 적용할 경우보다 드라마틱한 시각적 메세지를 전달할 수 있습니다. 이번 회차는 레이아웃에 해당하는 내용이므로 

흥미로운 게시물이네요! 점이 원리를 통해 그리드 시스템을 어떻게 더욱 창의적이고 효과적으로 활용할 수 있는지 잘 설명해주셨습니다. 디자인과 관련된 인사이트를 공유해주셔서 감사합니다. 앞으로도 다양한 디자인 아이디어를 공유해주세요! 😊

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

원티드 에이전트

점이를 이용한 그리드시스템의 적용

조형 원리 중 점이(Gradiation)라는 것이 있습니다. 이것은 형태나 색상, 크기 등을 규칙에 따라 점진적이고 조화롭게 변화시킵니다. UI 디자인에서 점이는 히스토리나 프로세스, 성장 과정 등의 컨텐츠에 적용할 경우보다 드라마틱한 시각적 메세지를 전달할 수 있습니다. 이번 회차는 레이아웃에 해당하는 내용이므로 레이아웃으로만 이 원리를 적용해 보도록 하겠습니다.

사례 1.

여기 아이맥의 히스토리를 소개하는 페이지가 있습니다.


이 페이지의 레이아웃은 다음과 같습니다. 같은 크기의 이미지가 같은 간격으로 반복되고 있습니다. 반복, 균형, 대칭을 통한 안정적인 레이아웃입니다.


여기에 점이의 원리를 적용하면 어떻게 될까요? 오른쪽으로 갈수록 가로폭이 커지는 새로운 그리드를 만듭니다. 무규칙이 아닌 등차수열처럼 일정한 규칙을 적용하여 제작합니다. 랜덤으로 제작하면 점이가 아닌 지난 회차에서 언급한 리듬이 되어버립니다.


위의 그리드를 적용하면 아래와 같은 디자인으로 변화합니다.


왜?

그러면 이제 의문이 남습니다. 왜 저렇게 해야 하지?라고 말이죠. 오른쪽으로 갈수록 상승하는 형태는 바로 "미래에 더 발전할 수 있는 예측 가능성"을 사용자에게 더 강하게 시사할 수 있습니다. 마치 이족 보행으로 진화하는 인류의 진화도를 보듯이 말이죠. 당연히 "앞으로 더 발전하는 아이맥" 같은 워딩을 쓰지 않아도 됩니다.

사례 2.

위와 같은 원리를 세로로 적용해 보겠습니다. 여기 설립 5년 차의 케이리치라는 핀테크 기업이 있습니다. 이 회사는 5년 만에 엄청난 성장을 이루었고 그 역사의 기록을 모바일 페이지에 담았습니다. 


이제 이 세로로 균등한 비율의 높이값을 점점 높여 점이가 적용된 그리드를 만들어 적용해 보았습니다. 아래 이미지와 같습니다.


왜?

위와 같이 레이아웃을 적용한 이유는 이제 아시리라 믿습니다. 균등하게 반복되는 레이아웃보다 스크롤을 내리면서 눈으로 보는 실적에 대한 임팩트가 커집니다. "8조구나"가 아닌 "8조? 와"로 받아들이게 됩니다.

사례 3.

점이와 브랜드 아이덴티티를 연계하는 경우도 있습니다. 무슨 말이냐 하면 로고 자체에 점이가 적용되어 있는 것들이 있습니다. 대표적 사례가 바로 패션 브랜드인 더 한섬입니다. 더 한섬의 로고는 아래와 같습니다.


이 로고의 아카이브는 아래와 같습니다.


위 아카이브에서 처음과 중간 그리고 끝의 각각 가로값이 다른 사각형을 로고에 적용시킨 원리입니다. 다시 말하면 오른쪽으로 갈수록 또는 아래로 갈수록 점점 가로와 세로값이 커지는 점이의 원리가 로고에 담겨 있습니다. 

패션몰에서는 이런 식으로 적용할 수 있습니다.


이번 회차를 정리하면 다음과 같습니다.

"과정"이 담긴 컨텐츠에 점이를 적용하면 의미 있는 스토리텔링이 가능합니다.
점이의 가장 끝(GOAL)에 핵심 컨텐츠를 배치하시면 그 컨텐츠의 강조 효과는 배가 됩니다.
때로는 점이가 시각적 차별화의 요소로 유용하게 쓰이기도 합니다.

감사합니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2Fb4bdedb6-6b49-4d1e-b56f-c6b7623f64d8&w=inherit&q=80)
# **점이를 이용한 그리드시스템의 적용**

조형 원리 중 점이(Gradiation)라는 것이 있습니다. 이것은 형태나 색상, 크기 등을 규칙에 따라 점진적이고 조화롭게 변화시킵니다. UI 디자인에서 점이는 히스토리나 프로세스, 성장 과정 등의 컨텐츠에 적용할 경우보다 드라마틱한 시각적 메세지를 전달할 수 있습니다. 이번 회차는 레이아웃에 해당하는 내용이므로 레이아웃으로만 이 원리를 적용해 보도록 하겠습니다.



## **사례 1.**
여기 아이맥의 히스토리를 소개하는 페이지가 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2F967c8291-082b-449c-8e08-3841ce7868b1&w=inherit&q=80)


이 페이지의 레이아웃은 다음과 같습니다. 같은 크기의 이미지가 같은 간격으로 반복되고 있습니다. 반복, 균형, 대칭을 통한 안정적인 레이아웃입니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2Fc1028206-6819-4e26-a41a-1f3e6a92263d&w=inherit&q=80)


여기에 점이의 원리를 적용하면 어떻게 될까요? 오른쪽으로 갈수록 가로폭이 커지는 새로운 그리드를 만듭니다. 무규칙이 아닌 등차수열처럼 일정한 규칙을 적용하여 제작합니다. 랜덤으로 제작하면 점이가 아닌 지난 회차에서 언급한 리듬이 되어버립니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2F559e85b1-61c9-45c7-af6b-77cd026213c5&w=inherit&q=80)



위의 그리드를 적용하면 아래와 같은 디자인으로 변화합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2F0356690a-30b5-4905-ac71-e78e2fa78f44&w=inherit&q=80)


# 왜?
그러면 이제 의문이 남습니다. 왜 저렇게 해야 하지?라고 말이죠. 오른쪽으로 갈수록 상승하는 형태는 바로 "미래에 더 발전할 수 있는 예측 가능성"을 사용자에게 더 강하게 시사할 수 있습니다. 마치 이족 보행으로 진화하는 인류의 진화도를 보듯이 말이죠. 당연히 "앞으로 더 발전하는 아이맥" 같은 워딩을 쓰지 않아도 됩니다.



## **사례 2.**
위와 같은 원리를 세로로 적용해 보겠습니다. 여기 설립 5년 차의 케이리치라는 핀테크 기업이 있습니다. 이 회사는 5년 만에 엄청난 성장을 이루었고 그 역사의 기록을 모바일 페이지에 담았습니다. 
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2Fb27451c0-3d3a-4566-884a-495170b2eea2&w=inherit&q=80)


이제 이 세로로 균등한 비율의 높이값을 점점 높여 점이가 적용된 그리드를 만들어 적용해 보았습니다. 아래 이미지와 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2Fe85c3592-8382-45bd-8557-476ebeae2461&w=inherit&q=80)


# 왜?
위와 같이 레이아웃을 적용한 이유는 이제 아시리라 믿습니다. 균등하게 반복되는 레이아웃보다 스크롤을 내리면서 눈으로 보는 실적에 대한 임팩트가 커집니다. "8조구나"가 아닌 "8조? 와"로 받아들이게 됩니다.




## **사례 3.**
점이와 브랜드 아이덴티티를 연계하는 경우도 있습니다. 무슨 말이냐 하면 로고 자체에 점이가 적용되어 있는 것들이 있습니다. 대표적 사례가 바로 패션 브랜드인 더 한섬입니다. 더 한섬의 로고는 아래와 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2F509deb9b-d0ab-4bee-bd27-af6a6fb3d867&w=inherit&q=80)



이 로고의 아카이브는 아래와 같습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2F6dc0d06a-d1aa-4bc8-bd6d-2fcae1fabe7c&w=inherit&q=80)


위 아카이브에서 처음과 중간 그리고 끝의 각각 가로값이 다른 사각형을 로고에 적용시킨 원리입니다. 다시 말하면 오른쪽으로 갈수록 또는 아래로 갈수록 점점 가로와 세로값이 커지는 점이의 원리가 로고에 담겨 있습니다. 

패션몰에서는 이런 식으로 적용할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F10%2F18%2Fa4225f2c-c9ea-46cb-9abb-50dd4f1ae715&w=inherit&q=80)


이번 회차를 정리하면 다음과 같습니다.

1. "과정"이 담긴 컨텐츠에 점이를 적용하면 의미 있는 스토리텔링이 가능합니다.
2. 점이의 가장 끝(GOAL)에 핵심 컨텐츠를 배치하시면 그 컨텐츠의 강조 효과는 배가 됩니다.
3. 때로는 점이가 시각적 차별화의 요소로 유용하게 쓰이기도 합니다.

감사합니다.

UI 디자인 완성도 올리기, 레이아웃 편(2)

글쓰기챌린지

점이를 이용한 그리드시스템의 적용

글쓰기챌린지