brunch

You can make anything
by writing

C.S.Lewis

by 플러스엑스 Nov 01. 2018

우리만의 리그 같은

먼저먹어버린저녁식사 | UI 디자이너

우리는 UI/UX 프로젝트를 진행하면서 다양한 문제에 직면하게 된다. 많은 프로젝트를 경험해 보지만 새롭게 시작하는 프로젝트는 늘 처음 보는 문제처럼 낯설고 어렵다. 똑같은 서비스는 없으며 트렌드는 변화하고 디지털 환경과 유저 또한 끈임없이 진화하기 때문이다. 매번 대면하는 클라이언트도 어쩌면 그렇게 한결같이 다른지 같은 상황은 정말 없는 것 같다. 문제의 답이 단번에 ‘당연히 이거지!’라는 쉬운 결정이면 좋겠지만 대부분 상대적인 미묘한 차이를 가진 선택들이다. 정답은 없고 선택만 가득하다는 생각이 들기도 한다. 하지만 우리는 이런 다양한 환경에서 다양한 문제를 다수의 클라이언트와 유저가 공감하는 UI/UX적 솔루션을 제공해야 한다.

그것이 우리의 업이다.

서비스 구축이라는 일련의 과정 중 유저에게서 공감이라는 열매를 얻는 시점은 프로젝트의 결과에 해당한다. 니즈가 충족되어 많은 유저가 공감하고 서비스를 이용하게 된다면 성공적인 결과라 말할 수 있다. 이를 위한 우리의 업무를 대략적으로 나열하면 클라이언트 인터뷰와 데이터 수집, 사례와 트렌드 분석, 클라이언트와 공감대 형성 그리고 설계, 디자인, 개발 팔로업, QA이다. 이중 어렵지만 필수로 넘어야 할 허들 중 하나는 클라이언트와 공감대를 갖는 것이다. 하지만 과정이 어려운 이유는 클라이언트가 디자인 전공자이거나 동일한 업에 종사하는 사람이라면 좋겠지만 그렇지 않은 경우가 대부분이기 때문이다.

특히 디자이너의 언어 비례감, 색감, 편집감, 모션감 같은 시각적 표현이 주된 내용인 것에서 공감과 이해 끌어내기는 쉽지 않다.

“이걸 클라이언트에게 어떻게 설명하지?”

“설명하면 공감해 줄까?”

UI 디자이너라서 하게 되는 우리만의 리그 같은, 느낌적인 느낌 같은 소소한 고민들을 이야기해 본다.

여백

blank

브랜드 가이드, 스타일 가이드, 운영 가이드. 만들어내는 규칙들 중에 “여백”이라는 표현을 직접적으로 사용하지는 않는다. 하지만 여백은 디자인을 표현하기에 매우 중요한 요소 중 하나라고 생각한다.

빈 공간에 점이 있다면 그것을 포인트라 하고 포인트가 포인트로 보일 수 있는 것은 빈 공간이 있기 때문이다.

UI 디자인에서 주어진 요건과 기능에 따라 UI적 오브젝트를 화면의 어디에 어떤 비중으로 배치하느냐가 중요한데, 이와 마찬가지로 요소 간의 간섭이 없도록 적절한 여백을 남기는 것도 중요하다. 하지만 여러 부서의 이해관계가 얽혀 있고 보여주고 싶은 내용이 많은 클라이언트는 여유 있는 공간에 인색할 수밖에 없다. 손바닥 만한 모바일 환경에 아이덴티티도 담겨야 하고 내용도 담아야 하고 마케팅 영역도 확보해야 한다. 그리고 이것들이 다 잘 보여야 한다. 때문에 여백을 공간의 낭비라고 생각할 수 있다.

디자이너의 입장에서 이런 이유로 빈 공간 없이 텍스트나 이미지 또는 버튼 같은 기능적인 요소로 채우게 된다면 복잡도와 함께 피로감을 주는 UI 디자인이 될 수 있기 때문에 클라이언트와 자주 부딪히는 지점이더라도 여백을 포기하기 어렵다.

풍부한 여백을 가진 홈 디자인

의도적으로 확보하는 여백

담아야 할 내용이 많은 경우에도 내용과 상관없이 의도적으로 여백을 확보하는 경우가 있는데, 대표적인 것이 타이틀 하단과 배너와 상품 리스트 하단 텍스트 영역이다. 화면을 사람에 비유했을 때 타이틀은 머리, 컨텐트는 몸이라고 할 수 있다. 그렇다면 타이틀 하단은 목에 해당되는데 이 부분에 여백이 없다면 짧은 목에 넥타이를 맨 듯 답답한 인상을 주게 된다. 그리고 배너와 상품 리스트 하단 텍스트 영역에는 썸네일, 버튼, 타이틀과 보조 타이틀 같은 UI 요소의 밀도가 높기 때문에 의도적으로 빈 공간을 확보해 둔다.

이 외에도 이미지 및 배너 가이드에 솔리드한 영역을 두어 여백을 확보하는 것을 권장한다.

서비스를 소비하는 유저의 흐름에는 쉼이 필요하다. 그래서 우리는 플랫폼 전반에 쉼이 되는 빈 공간 "여백"을 만들려고 노력하는데 우리끼리는 이것을 "숨구멍"이라고 표현하기도 한다.

좌우 마진

side margin

UI 디자이너에겐 이미 익숙해진 비대칭 좌우 마진을 비전공자라면 어떻게 생각할까?

그리고 일반 사용자는 어떻게 받아들일까?

레퍼런스에서는 쉽게 찾아볼 수 있는 비대칭 좌우 마진을 실제 런칭 된 서비스에서는 찾아보기는 힘들다. 새로운 스타일을 추구하는 사람과 익숙하고 편안해 보이는 것을 추구하는 사람의 충돌이다. 디자이너에겐 이미 익숙한 하나의 트렌드지만 디자이너가 아니라면 어색하고 공감하기 어려운 내용일 수 있다. 비대칭은 화면이 한쪽으로 쏠린 오류 같은 느낌으로 인식되는 경우가 많다. 대부분의 클라이언트나 일반 유저에게 물으면 비슷한 반응이다. 그래서 UI 디자이너는 고민을 하게 된다. 동료와의 대화 중 “비대칭을 사용하지 않으면 디자인 안 한 것 같다”라는 말을 하기도 한다. 하지만 모든 화면에 비대칭을 사용하는 것은 아니기 때문에 상황에 맞게 적절하게 사용하는 것이 답일 것이다. 그렇다면 선택에 도움이 될 수 있도록 각 마진 스타일이 주는 느낌과 의미에 대해 이야기해본다.

UI에서 사용하는 마진은 정도의 차이가 있지만 크게 세가지 스타일로 나뉜다. 그리고 그 성격이 잘 표현되는 것은 이미지 썸네일이다.

01. 좌우가 안쪽으로 들여진 대칭형

02. 좌우가 끝까지 확장된 대칭형

03. 한쪽만 열린 비대칭형

첫 번째, 좌우가 안쪽으로 들여진 대칭형은 UI 초기부터 지금까지 많이 사용하는 가장 기본적인 스타일이다. 상하좌우가 프레임으로 둘러 쌓여 단단하면서 모던한 인상을 주며 좌우가 닿혀 있고 첫 화면에서 하단으로 콘텐츠가 크롭되어 있기 때문에 소비 방향이 아래로 흐른다. 따라서 하단 스크롤이 유도되는 느낌이 강하다.

두 번째, 좌우가 끝까지 확장된 대칭형은 좌우 이미지가 크롭되어 있어서 실제 이미지는 더 넓을 것 같은 확장된 개방감을 준다. 좌우 확장감이 강하기 때문에 소비 방향이 아래로 향하는 느낌은 좌우가 들여진 첫 번째 스타일보다 약하다. 그리고 세로로 이어진 화이트 면이 없기 때문에 긴 한판의 베이스에 그려진 UI로 보이지 않고 이미지와 면들을 세로로 이어 붙인 것 같은 느낌을 주는 단점이 있다.

마지막으로 한쪽만 열린 비대칭형은 한쪽으로 확장되는 개방감과 세로로 연결된 베이스 느낌으로 위 두 스타일의 장점을 반씩 차용한 것 같다. 비대칭형은 보통 왼쪽을 닫고 오른쪽 열어 두는데 이유는 오른쪽으로 연장되는 개방감이 오른쪽으로 진입할 Depth의 방향을 가지고 있어서 썸네일을 터치하면 다음 Depth로 연결된다는 메타포를 품고 있다. 개방감과 함께 해당 페이지의 소비 흐름과 다음 Depth의 방향성을 모두 가지고 있지만 위에서 언급한 대로 자칫 한쪽으로 쏠린 오류 같은 어색함을 줄 수 있는 단점이 있다.

텍스트 레이어드

text layered

정보의 레벨, 직관성, 가독성 또는 그리드 시스템이 중요한 UI 디자인에서 텍스트와 다른 요소를 겹쳐 표현하는 텍스트 레이어드는 UI 기본원칙에서 벗어나는 것일 수 있다. 반면 디자이너들은 이것을 포인트가 될 수 있는 일종의 엣지 요소로 많이 사용한다. 이유는 브로셔나 잡지에서 느껴지는 편집적인 느낌과 탈그리드적인 반전 효과를 줄 수 있기 때문이다. 하지만 일반적으로 이런 표현에 대한 반응은 ‘글자가 잘 보이지 않아요’라고 말할 것이다. 겹쳐진 이미지가 복잡할 경우 가독성이 떨어지는 것은 부정할 수 없는 사실이다. 가독성을 포기하고 디자인적 엣지를 위해 레이어드를 선택하는 것인데 대부분의 클라이언트와 유저는 이것을 받아들이기 힘들 것이다. “이쁘잖아요”라고 말로 설득할 자신도 없다. 그래서 열에 아홉은 텍스트 레이어드라는 디자인적 표현 방식을 포기하게 된다.

설득 없이 받아들였던 클라이언트는 29CM와 L.POINT 정도인데, 돌이켜 보면 두 프로젝트는 디자인적 자유도가 높은 편이었던 것 같다.

우리는 레이어트된 텍스트의 가독성을 위해 몇 가지 조건과 장치를 둔다. 기본적으로 크게 쓰이는 타이틀에서만 사용하거나 배경의 간섭이 적은 원색 텍스트를 사용하는 것. 그리고 이미지와 텍스트 사이에 튀지 않는 투명 화이트 그라데이션을 두어 어두운 이미지에서도 텍스트가 읽힐 수 있게 한 것이다.

우리는 이상적인 디자인을 동경하지만 현실이 발목을 잡는다. 이상은 기준도 관점도 업무 포지션에 따라 달라서 어느 한쪽으로 치우칠 수도 없다. 그렇기 때문에 설득이라는 과정을 거쳐 공감이라는 라인을 연결하고 모두가 인정하는 방향을 잡는다. 디자이너라는 영역이 근본적으로 혼자 만을 위한 것이 아니기 때문에 무엇보다 설득과 공감이 중요한 것 같다. 하지만 개인적으로 우리의 디자인적 지향점이 현실에서 손을 뻗으면 딱 닿을 수 있는 정도만 이상의 방향으로 서 있었으면 좋겠다.

끝.

keyword