brunch

You can make anything
by writing

C.S.Lewis

by 댕챱 Mar 26. 2023

UI디자이너로서의 실무 인사이트-레퍼런스 서치

당신의 디자인 레퍼런스는 안녕하십니까?

프롤로그

사실 디자이너로서 느끼는 많은 안타까움과 유감은, 대체로 UI디자인 중심의 디자이너로 일을 할 때 더 많이 만나게 된다. 말은 디자이너'님'이라고 하며 높여주는 것 같지만 실상 일이 진행되는 현실을 까보면 인간 피그마 그 이상이 될수 없는 슬픈 현실. 이런 현실은 프로덕트 디자이너로 일하는 지금조차 UI디자인에 대한 작업에서만큼은 여전히 현재 진행형이며, 아마 내가 그 7개월 사이에 한국에서의 삶과 완전히 결별된 것이 아니라면, (물론 이제는 그렇게까진 하지 않는 곳들도 있기야 하겠지만) 여전히 고통받는 디자이너가 많을것 같다는게 현재까지 느낀 점이다.


아무튼, 이 글은 '누가 이랬어, 당장 나와'를 외치고자 쓰는 글은 아니다. 다만 과거-현재-(아마도)미래까지 이어지는 이 구슬픈 현실경험을 떠올리며 나의 팁을 공유하자니, 다시한번 가슴이 답답하고 약간의 울화도 치미는 것 같아 잠시 휘갈겨 보았다.


사실, 억울함을 버리고 냉정하게 벌어지고 있는 상황을 따져보자면 그게 무조건 회사와 비-디자이너들에게만 귀책사유가 있는것은 아니라 생각한다. 나는 개인적으로 어느정도 쌍방과실이 있다고 보는 편인데, 아무튼 이 글은, 그런 대우를 벗어나고자 피튀기게 노력하는 근면성실한 신입/주니어 UX/UI디자이너들에게 진정으로 쓸모있는 디자인 레퍼런스를 찾는 방법에 대해 간단히 소개하기 위해 쓰게 되었다.


아마, '분명 레퍼런스를 찾을 때는 좋아보이는 걸 많이 찾은것 같은데, 왜 내 디자인에 입히려고 하면 반영이 안되지?'라는 생각으로 스스로에 대한 자괴감만 늘어가고 있는 UI디자이너 혹은 프로덕트(UX/UI) 디자이너들이 있다면, 이 글이 꽤 큰 도움이 될 수 있으리라 짐작한다.






1. UI 디자인은 비주얼 디자인이 아니다.


이 말에 고개를 갸우뚱 할 수 있다. 아니, 인터페이스가 비주얼이 아니라니?

내가 말하고자 하는 건, UI디자인이 어떤 성질을 가진 디자인작업인지부터 명확히 이해하고 있어야 한다는 것이다. 사용자 인터페이스, 줄여서 U.I(User Interface)디자인이라고 하는건, 어떤 행동이나 무언가를 유발시키고, 결과를 달성하는데 특정한 '쓰임'을 다해주는 역할을 하는, 한마디로 '기능 중심적인' 디자인이다. 즉, 로고나 포스터 디자인처럼, 그래픽 디자인을 위한 레퍼런스를 찾는게 아니라면 UI를 디자인하는 사람으로서는 절대 해선 안되는 것이 '추상적인 감'으로 접근하는 것이다.


솔직히 분명히 할 건 하자.

비록 UX기획까지 담당하는 포지션이 아니더라도, UI는 UX를 도와주는 든든한 조력자이기에, UX가 논리력을 베이스로 한다면 UI도 예외는 아니다. 구조적이고, 논리적이며, 체계적인 생각으로 디자인을 바라보고, 접근해야 한다.


이제 모든 UI 레퍼런스의 근간이 되는 원칙에 대한 이해와 인정을 바탕으로, 다음 내용들을 살펴보자.



2. 레퍼런스를 찾는 목표부터 명확히 정하자.


그렇다. 내가 이걸 왜 하는지부터 명확히 스스로 인지하고 있어야, 그 목표를 달성하는데 더 높은 효과를 가져다줄법한 리소스를 찾을 수 있을것이 아닌가? 이건 대체로 신입 디자이너나 학생, 또는 주니어에게서 (경험 통계상)많이 발견되는 케이스인데, (나도 바보같이 그랬던건 안비밀)뭐든 하기 전에 전체 프로세스에 대해서 먼저 명확히 스스로 어느정도 생각이 정리된 다음에 서치에 돌입하는 것이 좋다. 예전에는 레퍼런스도 찾지 않고 파일부터 켜는 사람이 많았다면, 이제는 그런 사람은 최소한 주니어중에서는 거의 찾기 힘든 것 같다. 정말 좋은 일이고 너무 잘 된 일이다.


그런데, 마음가짐은 너무 바람직하고 좋지만 한가지 중요한 요소를 놓치면 안된다. 바로 '내가 왜 레퍼런스를 찾고있는건지' 명확하게 인지하는 것.


솔직히 말해서, 나도 내가 레퍼런스를 왜 찾는지 가만히 생각해봤을 때 그 이유를 다른사람에게 설명할 수 없다면, 상황은 크게보면 둘중 하나가 아닐까 싶다.


A. 지금은 레퍼런스를 찾을 타이밍이 아닌데 습관적으로 피그마/포토샵을 열었듯 이번에도 홀리듯이 핀터레스트/드리블을 열어 매장에 진열된 물건을 구경하듯 보는 경우


B. 레퍼런스를 찾아봐야 할 시점이긴 한데, 아직 목표가 충분히 구체화되지 않은 경우


그러지 말자. 이건 정말 위험하다. 하물며 화장실을 갈 때도 우리는 목적과 니즈가 있어서(?) 간다. 그냥 심심해서 괜히 거울보려고 들락날락 하지는 않는다. (보통 외모 수시점검이 많은 경우는 손거울이나 스마트폰 화면을 비추면서 보는 경우가 많으리라....? 짐작해본다.)


하물며 하루동안 이 일을 하기 위해 주어진 8시간을 소중히 아껴서 잘 분배해 써도 모자랄 판국에, 69시간 근로제의 열렬한 지지자 디자이너가 아니라면... 그러지 말자. 그건 충분히 정시퇴근이 가능한 상황에서, 목적도 없는 괜한 일에 당신의 시간과 에너지를 낭비해 야근, 초과근무를 자초하는 것과도 같다.


뭐 보고서 같은걸 제출하거나 계획서를 맨날 쓰고 "그래, 결심했어!"라는 어떤 형식을 거치라는게 아니다.

드리블이던 뭐가 됐던, 레퍼런스 조사를 위해 브라우저를 켜기 전에 '이 레퍼런스 조사에서는 내가 뭘 찾아보면 좋을까?'를 혼자 한번 간단히 생각해보고, 결심해본 다음 찾아보라는 것이다.


목표가 명확하면, 쓸데없는 걸 찾지 않아도 된다.



3. 첫눈에 레퍼런스와 사랑에 빠지지 말자.


어떤 사람과 첫눈에 사랑에 빠지는 건 나도 훈계를 둘 레벨은 못되어서 잘 모르지만, UI디자인으로 커리어를 시작한 사람으로서는 최소한 첫눈에 어떤 디자인 레퍼런스와 사랑에 빠지는 건 독이라는 걸 알고 있다.


여기서, '첫눈에 사랑에 빠지는 것'을 내가 무엇을 생각하며 쓴 표현인지 밝힐 필요가 있어보인다.

이건 1번, 2번과도 연결되는 내용인데 즉흥적인 감, 많은 것이 조화를 이루어 형성된 기가막힌 UI레퍼런스에 대해, 막연한 첫인상, 첫느낌이 좋아보인다는 이유로 레퍼런스를 채택하지 말라는 이야기다.

나도 신입때 잠시 그런 어이없는 방식으로 UI 레퍼런스 서치에 접근했던 적이 있는데, 이건 말이 안되기도 하고 어차피 실컷 수백장을 모아놔 봤자, 분석력의 신이 아닌 이상 그중 95%는 휴지통으로 가거나 어딘가에서 용량만 잡아먹고 다시는 들여다보지 않게 될 가능성이 높다. 그러니 바보같은 짓은 하지 말자.


솔직히, 막연한 감으로 때려모은 레퍼런스도 기가막히게 활용할 줄 아는 디자이너였다면 진즉이 아무거나 막 느낌 가는대로 모아대지도 않았을거라 생각한다.



4. 큰 숲이 아닌 나무 하나하나에 집중하자.


자, 이제 무엇을 찾아볼지 명확한 레퍼런스 수집 목표를 정했다. 그리고 그에 따라, 무엇을 찾아야 할지도 좁혀졌다고 치자. 그러면 이제, 검색창 앞에 앉아서 스스로가 결정한 그 키워드, 디자인 스타일 등을 열심히 서치하면 된다. 그런데, 하다보면 뭘 참고자료로 선택해야 할지, 목표가 구체화된 만큼 오히려 더 '좋다'고 생각되는 레퍼런스를 찾기 어려워진다.


그렇다면 방법이 잘못된걸까? 아니, 그건 당신이 자꾸 하나의 완성된 퍼즐, '정답'을 찾으려하기 때문에 더 어려워지는 것이다. (물론 아닐수도 있다. 세상에는 일반화가 가능한 것이 있고 불가능한 것들이 있으니까.)


그럼 해결 방법은? 간단하다. 그 틀을 깨고 나오기만 하면 된다.

세상에 완벽한 것은 없다. 따라서, 불완전한 존재인 인간이 만드는 디자인인 만큼 완벽한 디자인도 존재하지 않는다. 모든 레퍼런스는 장단점이 있고, 따라서 레퍼런스 활용목적에 따라 한장의 디자인 레퍼런스여도 그 안에 무수히 많은 조각들의 '좋은 GUI/UI 사례'와 '지금 당신의 디자인에는 적합하지 않은 GUI/UI 사례'도 함께 들어가 있다.


예를 들어, 대시보드 디자인에서 탭메뉴 디자인에 참고할 레퍼런스를 찾는다고 했을 때 다음 2개 사례를 찾았다고 가정해보자.


사례 1)

https://dribbble.com/shots/6659892-SaaS-MVP-Dashboard-Revamp-See-Old-vs-New?utm_source=Pinterest_Shot&utm_campaign=Mkhalidkhan&utm_content=SaaS+MVP+Dashboard+Revamp+%28See+Old+vs+New%29&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=Mkhalidkhan&utm_content=SaaS%20MVP%20Dashboard%20Revamp%20(See%20Old%20vs%20New)&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=Mkhalidkhan&utm_content=SaaS%20MVP%20Dashboard%20Revamp%20(See%20Old%20vs%20New)&utm_medium=Social_Share


사례 2)

https://dribbble.com/shots/16349171/attachments/8809073?mode=media


아마 트민남녀라면 누가 봐도 2번을 선택할 것이다.


그럼, 사례 1은 룩앤필이 올드하기 때문에 좋지 않은 디자인 사례인걸까?

그건 디자인 레퍼런스를 '최신 스타일 찾기'로 밖에 보지 못하는 편견때문이다. UI디자인에 대한 진정한 이해가 있는 사람이라면, 아마 그 너머까지 보았을지도 모른다.


바로 '기능적 측면'이다.


탭메뉴 컴포넌트 디자인을 기능적인 관점으로 접근했을 때는, 도리어 순위가 뒤집힐 수 있다.

사례 1을 보면, 스타일은 보는 이에 따라 올드하다고 치부할 수 있으나, 'PO#12205'라고 적힌 탭메뉴의 디자인을 보면, 탭메뉴 제목과 그 하위에 존재하는 컨텐츠간 위계와 귀속관계가 이보다 더 명확하게 보일 수 없다.

그러나 반면에 사례 2를 보면, 스타일은 트렌디할지 모르지만 맨 상단의 LNB 탭메뉴를 보면 어떤 탭메뉴가 활성화된 화면인지는 알수 있을지 모르나, 컨텐츠의 그룹핑 측면에서는 그 하단에 펼쳐진 데이터와 탭메뉴 제목이 그렇게 가까운 시각적 연관성을 갖게하는 디자인이라고는 보기 어려워진다.


이처럼, UI/GUI 디자인 레퍼런스를 찾을 때는 목적에 따라, 색대비의 조화, 톤대비의 조화를 잘 쓴 케이스 등 디자인 하나를 통으로 보고 '어 이거 좋네, 이건 별론데'라고 판단할게 아니라, 오히려 미시적인 관점으로 접근하여 각각의 디자인들만이 가진 특장점을 찾아볼 수 있어야 한다. 그렇게 해야, UI디자인 레퍼런스를 찾아도 의미있는 것들이 찾아질 것이다.



5. 모은 레퍼런스를 샅샅이 분석하자.


UI디자인은 맨 처음에도 말했듯, 논리와 합리적 근거를 바탕으로한 산출물이다.

따라서, 내 디자인에 입힐 좋은 레퍼런스를 찾을 수 있으려면, 그리고 그 찾은 시간을 헛투루 날리지 않으려면, 또하나 잊지말아야 할 중요한 절차가 하나 있다. 바로, '분석'이다.


만일 좋아보인다면 왜, 무엇이 그 사례를 좋아보이게 만드는 지 명확하게 알아야 한다.

안좋아 보일 경우 또한 왜, 무엇이 그 케이스를 안좋게 만드는 지도 알고 있어야 한다.


참고로 안다는 건, '느낀다'가 아니다. 안다는 건, 누군가 물어봤을 때 그걸 잘 설명해 수 있다는 이야기다.

본 적이 있거나, 들어본 적이 있는 것과 안다는 것의 개념을 헷갈리지 말자.


레퍼런스를 열심히 모았다면, 이제 철저한 분석을 통해 그 디자인의 어떤 요소가 한눈에 그 디자인을 좋아보이게 만들었는지 알아내야 한다. 감으로만 대충 때려찾지 말라고 하는 이유중 하나는 사실, 대충 인상만 보고 찾게 되면 뭐가 그 디자인을 좋게 만드는지 아닌지를 모르기 때문에 내 디자인도 똑같이 좋아보이게 하고 싶어도 할 수가 없다. 조리법을 모르는데 셰프가 만드는 음식과 똑같은게 나올리가 있나?





생각을 한다는게 말은 참 쉬워보이지만, 정작 하려고 하면 쉽지 않은게 생각이다.

하지만 우리가 지금 하고 있는 이 일은, 이렇게 끊임없이 '생각'하지 않으면 할 수 없는 직업이다. 절대 예술가처럼 갑자기 어떤 것에 의한 순간적 영감을 받거나, 혹은 단순히 더 예쁘게, 깔끔하게만 만든다고 해서 좋은 UI디자이너는 될수 없다.



작가의 이전글 'Clickable' 하지 않아.
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari