비전문가의 디자인 씹어보기: 협업툴 잔디

sig03
4 min readMar 28, 2022

--

잔디 (출처: 잔디)

1.

처음 잔디를 접했을 때 뭐라고 설명하긴 어려우나 힙하고 젊은 느낌이 들었다. UI 만으로 이런 느낌을 준다는게 신기했다.구획화된 UI의 적절한 역할 분담과 절제된 색상이 이런 느낌을 만들어낸게 아닐까?

2.

기본 3bay, 추가메뉴 클릭 시 4bay 구조로 구역이 나뉜다. 특별할 건 없지만 익숙하면서도 안정감있다.

4bay 구조 (출처: 잔디)

3.

디자인이 복잡하게 느껴지지 않는데 주요 메뉴들을 아이콘으로 처리했기 때문인 듯 하다. 여기에 글자를 박았으면 UI가 난잡해 보였을 것이다. 아이콘을 클릭하면 세부 메뉴가 노출된다. 단점은 이게 뭐 하는 아이콘이지? 하고 의문이 드는 아이콘들이 있어 클릭을 해 봐야 한다는 점. 많이 사용하고 익숙해지면 난잡함이 없는 아이콘 방식이 더 좋을 듯 싶다.

아이콘 위주 메뉴 구성 (출처: 잔디)

4.

바탕이 흰 색이다. 아무 색상을 주지 않은 것인데 이렇게 UI를 구성하면 보면 깔끔하다. 대신 뭐가 없어 보이거나 비어 보이게 된다. 빈 공간이 지나치게 두드러진다. 그럼 또 공간에 뭔가를 배치해야되고 색상을 줘야되고 그러다 보면 너저분해진다. 잔디는 비어보이지 않는다. 채팅 위주의 서비스라 쓰면 쓸 수록 채팅창으로 공간이 채워지니 초기에 횡환 느낌도 나중에는 사라지게 된다.

5.

가운데는 비어 있어도(나중에 채팅창으로 채워지겠지만) 아이콘들을 성벽처럼 빙 둘러쳐서 안정감을 준다. 또 그런 배치가 비어있는 느낌을 상쇄시킨다.

6.

색상을 많이 쓰지 않았다. 포인트에 잔디 색상이 나오고 나머지는 회색, 검정색 정도만 쓰였다. 일관된 색상의 사용이 제품명 잔디와 잘 조화된다. 다크 모드도 동일하게 색상이 사용된다.

7.

원 또는 타원형 chip 아이콘의 사용이 많다. 전체적인 인상이 둥글둥글해서 부드러운 느낌을 준다.

chip 아이콘이 다수 사용 (출처: 잔디)

8.

튜토리얼을 비디오 태그에 담아 동영상으로 제공하고 있다. 영상이라는 느낌이 안든다. 이질감 없이 잘 만들었다.

동영상 튜토리얼 (출처: 잔디)

9.

잔디 UI에는 주요 색상이 없다. 바탕화면이 흰색이다. 그런데 막상 UI를 접하면 옅은 바탕색이 있는 것 처럼 느껴진다. 컬러 픽커로 잡아봐도 그냥 흰 색이다. 주변 색상들이 흰 색으로 안 보이도록 착시를 일으키는게 아닌가 싶다. 이걸 일부러 의도한 것일까?

브라우저에서 바탕을 흰색으로 하면 차가워 보이는데 잔디 UI는 따뜻한 느낌을 준다. UI 구성 시주변 색상 사용을 어떻게 하느냐가 중요한 포인트인 듯 하다.

--

--

sig03
sig03

No responses yet