brunch

라이킷 21 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 댕챱 Mar 25. 2023

'Clickable' 하지 않아.

Clickable하다는거, 그거 어떻게 하는건데.

이건 실화다. (실화가 아닌게 있었나 싶지만, 암튼 최근 실화임.)

Climate tech 스타트업 관련 구직을 위해 열심히 어필하다가 DM을 주고받게 된 창업자가 있었는데, 개발자와 둘이 굉장히 멋진 아이템을 개발중이었다. 그리고 이 글은 그 과정중 발생한 문제인 'Clickable 하지 않은 디자인'이 고민이라는 그의 말에 간단하게 30분+ 정도 빠른 레퍼런스서치와 분석을 통해 새로운 솔루션을 제안했던 세상 짧고 간단한 프로세스에 대한 글이다.

긴 글 읽기 싫어져가는 내 또래를 위해서, 친히 목차를 남긴다.

(궁금한 부분만 알아서 찾아 읽으시길...근데 이러면 그 중 최소 50%는 바로 결말처럼 보이는 어딘가 즈음...으로 넘어갈 거라는걸 알기에, 결론이 어디에 숨어있는지는 알수 없게 목차를 쓸거다ㅋ)

일단 그 회사에 대해 간단히 소개해보면, 이 스타트업은 내가 요즘 깊은 애정과 관심을 가지고 보고 있는 주제중 하나인 Climate tech를 기반으로 활동하는 스타트업이었는데, 주요 비즈니스는 세상에 존재하는 Carbon project들을 자신들이 세운 가이드라인에 기반해 실제로 그 프로젝트들이 얼마나 탄소배출 절감에 기여하는지, 데이터 인사이트를 제공하는 프로그램이었다. 마치 이커머스에 리뷰기능이 있다면, 이 탄소절감 관련 프로젝트들에 대해서는 이 팀이 그런 역할을 하고자 하는것 같았달까.

이 창업자와는 온라인 커뮤니티를 통해 어찌저찌 알게 됐는데, 기타 등등 여러 얘기를 주거니받거니 하다가 이 이야기가나오게 됐고, 요약하면 'UI디자인의 어떤 걸 어떻게 개선해야 컴포넌트가 더 clickable 해보일지 네가 잠깐 우리 디자인 좀 살펴보고 조언좀 해줘'라는 부탁이었다.

난 무얼 했는가

"개발자가 이 컴포넌트가 아직도 Clickable하지 않대."

사실, 이 문제를 처음 마주한 건 아니었다고 했다.

개발자와 주력 상품의 메인화면인 Dashboard UI를 구현하고 있었는데, 그 인터페이스에서 버튼이 Clickable 하지 않다는 이유로 체크박스 등을 추가해 1차 개선을 한 다음이었다. 그런데도 이슈는 해결되지 않은 모양이었다.

조금 더 자세히 적어보면, 일단 개발자와 작업하는 와중에 컴포넌트가 별로 clickable하지 않다는 의견을 받았고, 이에 동의한 그 친구는 체크박스를 컴포넌트 디자인에 추가함으로써 '자, 이건 뭔가 클릭하는 그런 디자인 요소야'라는 메시지를 디자인에 한차례 입힌 뒤였다.

공유해준 디자인을 보니, 확실히 체크박스가 없었을 때에 비해 좀 더 그 요소와 interact해야 한다는 그런 느낌을 주는 디자인으로는 개선된 듯 했다. 하지만 개발자는 여전히 '내눈엔 별로 안 clickable해 보여'라는 의견을 보였고, 그사람은 이에 대해 '어떻게 시각디자인을 개선해야 clickable하게 보일 수 있을까?'가 고민이 되어 겸사겸사 나에게까지 물어본 것이었다.

그 친구가 이 제품은 유료이용자에게만 공개되는 디자인이라 실제 원본을 공개하기는 꺼려진다고 해서, 대충 비슷한 문제를 품고 있어보일만한 다른 무관한 예시로 가져왔다

디자인의 구성은 위와 같았다. 어떤 차트나 그래프 형태가 가장 메인이고, 그 메인 시각정보를 제어하는 CTA 컴포넌트들이 그 바로 아래 위치해 있었다. 예를들면 Project란에 있는 것들처럼.

Clickable 하다는 건 정확히 무슨 뜻일까?

더 깊은 얘기에 앞서, 'clickable'이라는 단어의 정확한 의미에 대해 살펴볼 필요가 있다.

영영 사전을 찾아보면, 대략 이렇게 설명이 나와있다.

...able to be clicked on with a mouse to produce a reaction.

(어떤 반응을 이끌어내기 위해 마우스로 클릭할 수 있는...)

하지만 내 경험으로 봤을 때는, 일반적으로 우리 사회에선 clickable하다는 말을 이러한 사전적 의미를 포함해, 좀 더 복합적인 느낌을 표현할 때 쓴다. 예컨대, 뭔가 별로 눈이 안가는것 같은 너겟적너낌이거나 할 때도 사람들로부터 'clickable하지가 않다' 라는 말을 듣기도 했다. 마치 'CTA가 안된다'라는 표현을 그런식으로 말하는 것 같이 해석되는 경우도 있었다.

그렇다면 지금 저 개발자의 말 또한 비슷한 의미일지 모른다는 생각이 들었고, 여기서 다시한번 clickable하다는 표현에 대해 우리만의 정의를 내릴 필요가 있었다.

Clickable한 디자인이다: 클릭하여 조작이 가능한 요소처럼 보이며, 필요하면 쉽게 상호작용을 해서 그 디자인을 이용할 것 같다.

그래서 어떻게 했나

그런데...

'컴포넌트가 그렇게 [안 clickable]해보이지 않는 것 같은데?'

말이 안되는 느낌이었다.

분명 컴포넌트 자체의 디자인은, 내가 다른 디자인작업에서 오히려 clickable하지 말아야 하는 요소에 대해 'clickable 해보인다'는 피드백을 들었던 사례와 동일한 비주얼을 보여주고 있었는데, 어떤 사람은 'clickable하다'고 말하고 또 어떤 사람은 'clickable하지 않다'고 말하고 있었다.

그렇다면, 이런 반응은 총 2가지의 가능성을 갖고있다고 볼 수 있다.

가능성 1. 둘중 한명은 어떤 흔한 스타일의 비주얼을 가진 요소의 의미를 제대로 파악해내지 못할정도로 둘 중 한명이 일자무식이다.

또는

가능성 2. 문제는 다른 곳에 있다.

2가지 모두 충분히 가능성이 있는 시나리오지만, 1번의 경우 개인차는 어찌할 수 없기도 할 뿐더러, 스마트폰을 사용하지 않는 사람이 아니고서야 요즘에는 앱을 쓰다보면 여러 디자인의 앱들을 접하기 때문에 최소한 뭐가 무엇을 가능하게 하는 요소인지 정도는 자연스레 학습된 내용에 의해 아예 인지를 못할 가능성은 거의 없다고 생각했다.

그렇다면 가능성은 2번이다. "문제는 다른 곳에 있을 수 있다"

'그럼 인터페이스 상에서, Clickable하다는 느낌이 명확한 디자인과 아닌 디자인의 차이는 뭐지?'

나는 우선 이 가설과, 통상적으로 널리 인정되는 앞선 사실에 근거해 간단한 조사를 진행했다.

일단 핀터레스트에 가서, 닥치는 대로 내 느낌이 닿는 디자인들을 긁어모았다.

여기서 모으는 레퍼런스들의 기준은 '내가 봤을 때 clickable한가? 아닌가?'였다.

그리고 그 디자인사례를 몇가지 모은 다음, 다음과 같이 양 극단의 기준들을 바탕으로 내가 찾은 사례들의 clickable해보이는 정도에 따라 배치했다.

그 다음, Most Clickable하다고 느껴졌던 디자인 레퍼런스들을 쭉 다시 살펴보고 분석했다.

분석 결과, 어떤 스타일에 명확한 차이가 갈리지는 않았다. 내가 clickable하다고 느꼈던 디자인 중에서는 플로팅 효과가 들어간 경우, 플랫한 스타일 등 다양했다. 공통적으로는 클릭가능한 요소가 과도하게 튀지 않는다는 대략적 공통분모가 있었는데, 솔직히 이건 더 clickable하게 만들어야 하는 기존의 디자인 컴포넌트에서도 이미 반영이 되어있는 부분이라, 해답이 될 수 없었다.

이게 아닌데

그럼 대체 뭐 때문에 지금 꺼는 clickable 해보이지 않을 수 있고, 저 디자인들은 명료하게 clickable 해보이는거야?

다시한번 clickable하다고 느꼈던 부분들을 짚어본 결과, 내가 clickable하다라고 느꼈던 것들에서는 '개연성이 보인다'는 또하나의 공통점이 있었다. 어떤 컴포넌트와 어떻게 상호작용해야 할지가 명확하게 보이는 경우가 있었고, 내가 필요에 의해서 찾다가 '이거 클릭해보면 다음 일을 알수 있을것 같아'싶게 느껴지는 그런 경우가 있었다.

그렇다면, 여기서 우리는 처음에 그 친구와 개발자가 고민하던 지점에 대해 다시 생각해볼 필요가 있다.

이건 누구 탓일까?

'지금의 UI/GUI를 개선한다고 정말로 해결되는 문제일까?'

문제상황의 핵심은 이거였다.

통상적으로 참고자료로써 활용되는 여러 레퍼런스와 실제 앱화면을 보면서 비교분석해 본 바로는, 이게 꼭 GUI나 UI(시각적요소)의 힘이 약해서만 발생할 수 있는 문제는 아니었던 것이다.

따라서 나의 결론은, '어쩌면 충분한 온보딩 UX전략이 갖춰지지 않았기 때문에' 였다.

디자인을 봤을 때, 어딘가 clickable해보이지 않는 결과를 불러왔을 수 있다는데 도달했다. 그런 생각을 하고 다시 원래 디자인을 살펴보니, 확실히 사용자가 처음으로 이 화면을 봤을 때는 '내가 이 것들을 누르면 이게 상단의 그래프에 결과가 어떻게 보여지겠구나'라는 힌트를 얻을수 있을만한 단서가 없었다. 한마디로, 개연성의 부족이 보였다. (맨 위에 디자인은 다시 볼 필요 없다. 어차피 그건 아무 관련없는 미방용 사진 같은거니까)

나는 지금까지의 내 과정을 정리해 피그잼보드에 인사이트를 공유해줬고, 그 사람은 고마워하며 평화롭게 하루를 마무리했다. 다행히 아직 그런데까지는 생각해보지 못했던 듯하다. (휴^^)

물론 저 분석은 내 관점에서 느껴지는 레퍼런스를 기반으로 한것이기에, 더욱 정확한 문제파악을 위해서는 그 개발자보고 본인이 느끼기에 클릭커블하다고 보여지는 레퍼런스를 직접 모아달라고 한 뒤 그 내용을 분석해야 한다.

하지만 뭐 일단은 그냥 가볍게 해 본 것이기도 하고, 내 디자인 수준이 통상적으로 심각한 기초학습의 부족을 느낄만큼 처참한 수준...까진 아닌것으로 객관적 검증이 이뤄져온 바, 대략 그 개발자와 내가 이해하고 느끼는 범주가 그래도 약간 비슷하다는 가정 정도에서 받아들이면 될 것 같다.

우리는 흔히 무언가가 잘못 돌아가고 있다는 걸 느꼈을 때, 문제상황이 닥쳤음을 직감한다. 그리고 대체로 최종 디자인까지 어느정도 완성되고 나면, 하나씩 과정을 밟아왔기 때문에 그 전 단계에 문제가 있었을지 모른다는 생각을 놓치기 쉬운게 아닐까 싶다. 이번 경험은 개인적으로, 문제를 충분히 들여다보는 것의 중요성을 알려주는 에피소드로 남은 것 같다.

이에 덧붙여, 사용자경험을 다루는 디자이너의 역할은, 회사에서 서비스에 대해 그런 일이 생겼을 때, 그것들을 잘 관찰하고, 분석하고, 파악해서 실천 가능한 솔루션들을 만들어 제시해주는 것이라고 생각한다.

끝

keyword