실무에서 UI 레이아웃을 정리하는 방법

스크린샷을 찍고, 각각의 내용을 비교분석하고, 뜯어 붙여 짜집기하기

최근 신규 기획 & 디자인을 하시는 분이 들어와서 새로 교육을 하고있다. 그리고 그 과정에서 UI 레이아웃을 정리하고, 참고하는 방법에 대해서 간단한 교육을 진행해봤는데, 효과가 꽤 괜찮았다. 오늘은 그 방법에 대해서 이야기를 해보기로 한다.

일반적으로 하나의 UI 화면을 만들려고하면, 화면배치를 어떻게해야하는지. 정보는 무엇이 들어가야하는지 고민하게되기 마련이다. 심지어 본인이 만든 화면구성이 '왜 좋은지' 설명하거나, 다른 이들에게 이야기하려면 그 이유를 말하기도 쉽지 않다. 그러니 실무에서 어떻게하면 화면 레이아웃을 쉽게 참고하여 만들 수 있는지. 그 체계적인 과정을 이야기해보도록 하자.

1.

만들려하는 화면을 다른 서비스에서 찾아보기

원하는 서비스의 URL이나 앱을 설치해 직접 스크린샷을 찍어보자

세상에 새로운 화면은 없다. 이미 대부분의 서비스에서 비슷한 레이아웃이나, 똑같은 정보를 담은 서비스들이 나와있을 것이다. 그러니 우리는 그 '어떤 서비스'에서 그 화면을 쓰고있는지. 혹은 어디에서 '비슷한' 화면을 쓰고있는지만 알아도 된다. 내 경우에는 '최신 기준 앱서비스'를 깔아서 직접 스크린샷을 찍는걸 추천한다. 특히 웹에서 검색하는건 별로 좋은 방식이 아니라고 본다. 가장 큰 이유는 쓸모없는 해외의 목업 디자인들이 많이 걸려들기 때문이다. 특히 pinterest 와같은 곳은 과거 기준으로 만들어진 화면들도 언제 다시 스크랩을 하느냐에 따라서 '최신 이미지'로 검색될 가능성이 높다. 그러니 가능하면 '최신' 서비스를 스마트폰 화면으로 직접 찍는것이 더 안전하다.

심지어 나는 dribbble이나 behance 같은 포트폴리오성 서비스에서 찾는것도 별로 좋은 생각은 아니라고 본다. 해외와 국내의 디자인 스타일이 다른것도 있는데다, 대부분 시스템 UI적인 비례보다, 그들 고유의 독특한 비례나 타이포를 사용하는 경우가 많기 때문이다. 그래서 실제 그 시안을 한글 폰트로, 일반적인 방식으로 수정하고나면, 기존에 내가 느꼈던 '완성도'는 어디론가로 사라져버리게된다. 심지어  실제 UI 화면에 다시 액자식 구성을 해놓는 경우가 많아서, 실제 그 부분을 뜯어서 확대해보면, 굉장히 평범한 디자인인 경우가 많다. 그러니 괜히 해외 시안들 보며 뽕차지 말고 실제로 사용할 수 있는 서비스들 위주로 검색해보자.

2. 

각각의 화면과 정보배치를 분석 / 비교하기

하나의 화면만 놓고 분석해보면 그 화면의 장단점을 알기가 쉽지않다. 유사한 화면이나 비슷한 UI를 놓고 서로 비교해봐야 그 차이가 쉽게 보인다.그러니 적어도 3개 이상의 유사한 화면을 놓고, 각자의 특징과 장단점을 분석해보자. 그 과정에서 더 '좋다'고 여겨지는 것들을 위주로 참고자료를 삼거나. 그 서비스의 레이아웃과 구성을 따라하며 불필요한 지점을 잘라내면 된다.

유사한 레이아웃의 비교사례 (지그재그 / 브랜디 / 에이블리)

예를 들어서 위의 시안들 중, 지그재그는 세 시안들 중 배너 영역의 높이가 가장 높다. 그럼에도 불구하고 굉장히 안정적으로 보이는데, 가장 큰 이유는 큰 블럭 2개로 레이아웃을 구성했기 때문이다. 지그재그는 상단 메뉴와 하단 메뉴를 제외하면, 배너크기를 기준으로 화면을 2블럭으로 나누어 한 화면을 구성했다. 그에 비해 브랜디나 에이블리의 케이스는 배너크기를 기준으로 3개 이상의 단락이 등장하거나, 그마저도 너무 잘게 쪼개어 여러 시각물이 동시에 보여 개별 요소를 읽어내기가 어려운 상태다.

메뉴구성에 있어서도 브랜디나 에이블리는 텍스트가 너무 많거나, 아이콘 스타일에 있어 선이 얇아 각각의 정보를 구분하기가 쉽지 않다. 이런 관점에서 시각물 자료 후보인 브랜디와 에이블리는 '좋은 참고자료'가 아니라는걸 알 수 있다.

3. 

정보의 우선순위를 정리하기 + 불필요한 정보 제거하기

이제는 각 화면에 들어갈 정보들중 가장 중요한 정보가 무엇인지를 생각해볼 차례다. 중요한 정보는 더 크기가 크고, 색상적으로 강조가 되어야하며, 그보다 우선순위가 떨어지는 것들은 덜 강조가 되어야한다. 이런식으로 '대장' 역할을 하는 정보와, 그렇지 않은 정보가 확실하게 나뉘어있어야한다. 대장은 항상 자신과 어울리는 부하들을 데리고다녀야한다는 것. 그리고 그 부하들끼리는 서로 비슷한 수준의 정보 중요도를 갖고있어야한다는걸 기억하자.

 

카드 추가의 UI 사례. 이게 정말 최선일까?

위의 시안은 카드정보를 추가하는 UI화면의 사례다.

타이틀 : 카드추가

- 부하 1 : 카드번호

- 부하 2 : 카드 소유자 이름

- 부하 3 : 카드 유효기간 / CVC 번호

- 액션 버튼 : 카드 추가

위의 화면을 보면 여러가지 의문이 든다.

1) 카드 추가라는 타이틀 텍스트가 꼭 필요할까?

2) 타이틀 하단의 의미도 없는 설명 텍스트는 뭐하러 넣은걸까?

3) 카드 소유주 정보는 카드 번호 다음으로 올만큼 중요한 정보인가?

4) 카드 추가시 '기본카드로 설정'이란 기능은 꼭 넣어줘야만 구현이 가능한가?

-

1) 카드 추가라는 타이틀 텍스트가 꼭 필요할까? : 아니다. 카드라는 단어가 여러곳에서 너무 자주 들어가고있다. 메인 액션버튼마저 '카드추가'라고 되있잖아. 게다가 팝업 형태니까, 기존에 '카드추가' 같은 버튼을 눌렀을 때 나오는 화면이란 이야기다. 그러니 별도의 타이틀은 없어도 논리적으로 문제가 없다.

2) 타이틀 하단의 의미도 없는 설명 텍스트는 뭐하러 넣은걸까? : 의미가 없으니 빼자. 별도로 행동을 안내해주거나, 정보입력에 대해 이것저것 알려줘야할 정도라면, 이미 UI 로서는 실패한거나 마찬가지다.

3) 카드 소유주 정보는 카드 번호 다음으로 올만큼 중요한 정보인가? : 아니다. 일반적으로는 카드 사용시에는 이름을 쓸 필요가 없다. 오히려 카드번호와  유효기간, CVC 번호와 비밀번호 앞자리 정도만 있어도 즉시 결제가 가능하다. 결제시 이름이 꼭 필요한 경우라고 해도, 카드 '에' 대한 정보가 아닌 카드 '의 소유주' 가 가진 이름이므로. 우선순위는 상대적으로 낮다.

4) 카드 추가시 '기본카드로 설정'이란 기능은 꼭 넣어줘야만 구현이 가능한가? : 아니다. 카드가 하나밖에 없다면 그 카드가 기본 카드가 되면 된다. 심지어 다른 카드가 추가된 이후, 다른 방식으로도 주사용 카드 설정이 가능하다.

불필요한 정보를 과감하게 제거하고, 순서를 변경한 UI 화면

- 타이틀이 없어서 알아보기가 힘든가? : 별로 문제 없음.

- 정보배치를 바꿨더니 정보의 맥락이 달라졌는가 ? : 카드의 중요정보끼리 뭉쳤음

- 추가적인 기능을 제거한 경우 문제가 생기는가? : 쓸데없는 부분에 사용자가 고민할 필요가 없어졌음.

이런식으로 찾아낸 UI에 들어간 정보들 중 필요없는 정보는 과감히 빼버리거나. 정보의 우선순위를 정리해 재배치하는 과정만 거쳐도 좋은 UI를 얼마든지 만들어낼 수 있다. 이건 모바일이나, PC 웹이나 구분없이 마찬가지다. 직접 화면을 찾고, 스크린샷을 찍고, 정보를 분석해서 정리하는 과정은 처음에는 굉장히 귀찮을 수 있다. 하지만 이런 과정을 거치면서 무엇을 '왜' 선택했는가를 알 수 있고, 그것을 다른 사람에게도 설명할 수 있게 된다.

-

이런 지점은 기획자나 디자이너나 구분할 것 없이 실무에서 훈련을 거치면 도움이 될 거라고 생각한다. 실제로 회사에서 신입 인원을 가르칠떄 이런 형태로 가르쳤었는데, 그 프로세스를 명확히 하기 위해 일부 내용을 추가하여 정리해봤다. 다른 분들도 후임이나, 본인이 정리를 해야하는 상황이라면 위에서 이야기한 방식을 사용해보시길 추천한다.