실무자를 위한 앱, 웹 UI 디자인 분석법

중급자 이상을 위한 웹, 앱 디자인을 분석하는 실무 분석법!

1. 서비스의 핵심 기능 / flow 파악하기

서비스 분석은 - 분석하려는 서비스의 핵심을 1줄 요약 할 수 있느냐가 관건입니다. 

1) 그 서비스를 쓰면 뭘 얻을수있냐

2) 어떤 단계를 거쳐서 그걸 얻을 수 있냐

주요 서비스가 뭔지. 그 무언가를 얻기위한 과정이 어떤 단계들로 이뤄져있는지. '걸러내는' 과정에 가깝습니다. 예를 들어 회원가입같은 기본적인 내용은 주요 기능이 아닙니다. 기본적인 내용은 과감히 제외해주세요.

UI를 통해 원하는 정보를 얻기 위한 과정은. 수많은 선물박스 속에서. 내가 좋아하는 상품을 찾는 과정과 비슷합니다. 예를 들어 100개의 선물박스가 있다고 했을 때. 내가원하는 박스는 두개 정도라고 해볼게요. 다만 어디에 무엇이있는지는 모르다보니, 여러가지 방식을 써야합니다.

- 개별 박스에 세부 태그 여러개를 붙이던. 

- 방에 이름을 써놓고 비슷한걸 모아놓던

- 이름표를 붙여서 검색하게하건

- 대리인 (봇, AI)를 붙여서 기존에 내가 쓰던 정보를 찾아오게하건

어떤식으로건 간에 그 무언가를 몇 단계에 걸쳐서 가져오게됩니다. 여기서 필요한게 사용자의 입력과정이고. 거기에 필요한 것이 UI죠. 이런 '단계에 걸친 선물박스 찾기'는 대부분 비슷한 형태입니다. 

- 이커머스에서는 대분류를 나누고, 상품을 찾게하거나, 직접 검색하는 경우가 많고

- OTT에서는 주로 자신이 좋아하는 태그 기준으로 검색 / 추천을 받는 경우가 많고

- 숙박은 지역기반으로 검색 후 가격대 필터로 순위를 잡죠 

이런식으로 개별 서비스의 주요패턴. 일반적으로 쓰이는 검색패턴의 설계 수준을 비교하는게 핵심이됩니다.

2. 서비스의 사업단위, 경쟁업체를 파악하기

제가 브리핑을 할 떄는. 항상 서비스 몇개만을 잡는게 아니라. 업계와 주요 업체들을 꼭 이야기하곤합니다. UI 디자인을 다루는데, 내가 사업까지 이해해야하나? 하고 생각하는 분도 계실텐데요. 제가 사업단위나, 경쟁업체 등을 다루는 이유는 다음과 같습니다.

- 대체 그 업계가 어떤 상태고

- 누가 1위업체인데

- 어떤 경쟁자가 있고

- 어떤 신기술들이 오가고있고

- 그중 어떤 기업들이 신기술 기반을 채택했고

- 실제 그런 경쟁 속에 더 나은 설계를 채택한건 누군지

위의 내용들을 알고나면 UI디자인에서 사업적인 이유나, 설계의 특징 들도 어느정도 이해할 수 있기 때문입니다. 

2-A. 업계 전반의 디자인 수준이 높은 경우

전체 업계상황을 이해했다면 어떤 서비스를 들여다봐야하는지. 어떤 업체의 성적이 좋은지 등을 알 수 있게 됩니다. 여기서 - '일반적인 상황'이라면 - 바로 주요 서비스들을 추리고 10개 업체정도를 선별해서 다음 과정을 거칩니다.
 

1) 전반적인 UI 설계 패턴 수준을 보고

2) 수준이 높은 것들 / 그렇지 않은 것들을 구분합니다

여기서 바라보는 기준은

- 컴포넌트가 일반적인 구글, iOS등의 표준 사용성을 고려한 UI인지.

- 비례와 규격들이 서로 엇갈리지않고 균일한 통일성을 갖고있는지

- 색상 및 정보 배치가 정보 입력, 및 결과 확인에 적합한지.

등의 기준을 확인합니다.

2-B. 업계 전반의 디자인 수준이 낮은 경우

전체 업계상황을 확인했지만,주요업체들의 디자인 수준이 높지않은 경우가 종종있는데요. 이 경우 해외업체들과 비교하는 과정을 추가합니다. 그러나 해외업체의 UI 설계, 완성도 수준이 높지 않은 경우라면.

1) 해당 서비스에서 쓰인 주요 컴포넌트나, 기능들. UI 패턴 단위에서 완성도가 높은 타 업계 케이스를 자료로 첨부합니다

2) 해당 서비스들의 비교대상을 개별 좋은 패턴과 비교해서 분석 + 어떤 설계적 차이나. 실수가있는지를 체크합니다.

서비스 한두개만 보아서는 이게 왜좋은지. 나쁜지를 알수가없습니다. 그래서 수많은 자료를 모으고 '상대적으로 더 좋은' 설계를 기반으로 놓고. 그 이후에 대상을 분석하는거죠. 다만 스스로 핵심 설계분석경험이 없으면 이런 비교과정들은 좋은 결과를 내기가 어렵습니다.

- 무엇이 불편한지 / 더 편한지 모른다

- 그래서 무엇이 더 나은 설계인지 기준이 없다

- 자료는 많이 모았는데 분석 기준점이 불확실하다

그래서 이렇게 좋은 디자인을 찾으려면 스스로 좋은 디자인의 기준이 뭔지. 해당 앱 서비스에서 표준으로 삼을만한 규격은 어떤게 있는지를 확인해야합니다. 말 그대로  아는만큼 보인다는 지점인거죠.

3. 정보 정리를 통해 키워드 압축하기

"어떻게해야 사람들이 UI 디자인의 설계나, 문제점들을 쉽게 발견할 수 있을까?" 제가 스터디 그룹을 관리해보면서 확인한 내용은 '정보정리 능력'이 좋은 사람이 더 좋은 결과를 낸다는 거였습니다. 
 

1) 해당 서비스의 주요 내용이 뭔지 2~3개 이하의 키워드로 정리할 수 있는 사람은 - 서비스 분석 결과가 좋았음

2) 개별 서비스의 특징과 단점 등을 다루는 과정은 꼭 필요했고. 개별 페이지마다 정보배치의 불편함 등을 느끼는 사람인 경우 더 자세한 분석이 가능했음.

3) 여러 서비스의 공통적인 주요 설계패턴을 찾아내는 사람이 더 높은 수준의 분석을 할 수 있었음

결국 서비스 분석을 한다는건. 남에게 글로 적어서 보여줄 수 있을 정도의 핵심을 다룰 수 있다는 거죠. 그래서 다음과 같은 질문에 답할 수 있어야한다고 봅니다.

- 그 서비스 (A)의 핵심 기능은 무엇인가?

- A가 속한 분야에서 주로 쓰이는 핵심 설계패턴은 무엇인가?

- A와 유사 / 동일한 설계를 쓰는 서비스는 무엇이 있는가? 

- A와 유사 서비스들 중 가장 군더더기없는 설계는 무엇인가?

- A 서비스의 핵심 기능 중, 가장 중요한 컴포넌트 5개는?

이런 내용에 바로답을 할 수 있을 정도로 파악을 해야 분석이 된 것이라고 생각합니다. 물론 현실적으로 쉬운 방식은 아닙니다. 하지만 구체적인 기준점이 있는 상태에서 - 서비스의 특징을 정리할 수 있다 / 없다. 그 차이가 가장 중요하다는 이야기입니다. 

4. 업계별, 서비스별로 좋은 기준점을 모아두자

머리에 도서관을 하나만들어놓는다고 생각해보세요. 다양한 설계 분석 경험을 해보고서 . 뭐가 더 나은 케이스인지. 여기서 더 복잡해진 정보단위를 다른 규격에 넣으려면 어떻게해야하는지 등등. 특별한 도구를 정리해나가는 과정이 필요합니다. 이런 노력들이 쌓이면 - 실무에서 쓸 수 있는 도구의 가짓수가 확 늘어나는거죠.

그리고 여기서 좀더 나아간다면

1. 업계별로 주로 쓰이는 패턴

2. OS들에서 주로 쓰이는 패턴, 그리고 신규패턴

3. CMS나 대시보드 등에서 주로 쓰이는 패턴

4. 확장설계를 고려한 패턴 / 모바일 웹을 집중적으로 한 패턴

이런식으로 테마를 잡아놓고 실제 케이스를 찾고. 정리하고. 주기적으로 그 지식들을 업데이트하는게 가장 중요합니다. 

UI 공부를 하는 방법은 수없이 많습니다. 단톡방을 만들어놓고 계속해서 새로운 패턴들을 정리하는 저같은 경우도. 결국 '자신의 머릿속에 업데이트'를 하는 과정인거죠. 남들이 보기 쉬울 정도로 글을 몇번이고 정리하다보면. 그 내용의 핵심이 뭔지를 파악하게되거든요.

그러니 혼자서 정리하기보다. 공부한 내용을 모아서 다시 다른사람들에게 말하고, 이야기하고. 더 많은 사례를 지속적으로 들여다보는 과정이 꼭 필요합니다. 

5. 입력창, 경고메시지, 키보드 팝업 등, 자세한 기획설계를 꼭 확인하자.

우리가 패턴을 다룰때 가장 잘 뺴먹는게 바로 얼럿 / 팝업 / 키보드 관련 내용입니다. 앱에서는 특히나 더 '당연하게'생각하고 넘어가는 지점들이죠. 특히 단순구축이아니라 자체 서비스를 만들때 더욱더 중요해지는 부분입니다. 

예를 들어 회원가입. input 창만하더라도 일반적으로 놓치기쉬운 수많은 디테일들이 들어가는데요

이메일 입력창의 경우

1) 영어 입력 키보드가 등장해야하고

2) 글자수 제한은 몇개까지?

3) 특수문자는 어디까지 허용?

4) 대문자, 소문자 인식할건가?

5) 아예 입력을 안하면?

6) 이메일 규격이 틀리면, 무슨 기준으로?

7) 이메일 인증을 통해 유효성 검사는 할거야?

이런식으로 정보가 유효한지. 아니면 에러 메시지를 띄워야하는지. 심지어 그 에러메시지는 팝업일지, bottom sheet 일지. 실제로 다양한 서비스들은 어떻게 이 문제를 처리하는지. 직접 확인해봐야만 알 수 있는 것들이 많습니다.

키보드 일반 관련

- 숫자가 떠야하는 경우 / 글자 패턴이 떠야하는 경우인가?

- 입력창별로 우측 하단 버튼을 어떻게 써야하지?

- 숫자만 있는 커스텀 키보드가 꼭 필요한가?

- 일반 키보드로 자유로운 메시지 입력이 가능한 경우에는?

입력창이 여러개인 경우에 등장하는 키보드 

- 우측 하단 '다음'을 누르면 어디로 넘어가지?

- 포커싱된 입력창을 키보드 상단에 맞춰줄건가?

- 입력이 마무리된 시점에서는 우측하단에 '닫기'를 넣을건가?

- 복사한 내용 붙여넣기는 허용해줄건가? 

뒤로가기 / 앱 끄기

- 회원가입 도중 뒤로가기 누르면 어떻게됨?

- 앱을 끄려고하면? 팝업이 뜰건가?

- 팝업 페이지에서 뒤로가기를 누르면, 팝업이 닫혀야할까?

- 내용 입력중에 뒤로가기를 누르면, 키보드가 내려아갸하나?

팝업 / bottomsheet / snackbar

- 메시지마다 어떤걸 써야하지?

- 전체 팝업과 bottom sheet의 사용을 가르는 기준은 뭐지?

- bottom sheet를 쓸 때, 어떤 요소까지 담을 수 있는거지?

- 스낵바를 써도 되는곳과 그렇지않은곳의 차이는?

- 버튼이 들어간 스낵바, 그냥 스낵바 UI는 언제 써야하지?

6. 서비스 사용시 불편한 사례를 찾고, 정리해두기

우리가 느끼는 사용성이라는건. 눈에보이는 화면들보다 실제 입력에서 오는 불편함이 더 많습니다. 그리고 대부분 사용자로 느끼는 불편함과, 설계자로 설계할때 바라보는 눈을 따로 사용하는 경우가 많죠. UI디자이너라면 이 두가지를 항상 고려해야하지 않을까요? 우리가 평소에 느낀 불편함의 크기가. '실무에서 피해야할 설계'에 직접적인 영향을 줍니다. 그 사례를 좀 확인해볼까요?

불편사례 (예시)

- 키보드에서 다음을 눌렀는데 다음칸으로 이동하지않는 입력창

- 키보드로 숫자 입력을 하려했더니 숫자가 작은 일반 키보드가 등장함

- 평소에 쓰는 비밀번호 넣었더니, 대문자 추가하라고함

- 뭐가 잘못되었는지 모르겠는데 다음 버튼이 활성화가 안됨

- 글씨 갯수 제한 카운터가 없는데 글씨제한이 걸림

- 입력하려고 포커싱했더니 입력창이 키보드에 가려짐

- 입력 완료하려고 키보드 내리려고 뒤로가기 눌렀더니, 페이지이동으로 입력한게 다 날아감

어찌보면 사소할 수 있는 지점들입니다. 하지만 사용자 입장에서는 너무나 크게 느껴지는 문제들이죠. 그래서 UI디자인을 하는 사람들은 QA.품질검증팀 하듯이 세부적인 내용까지 체크해봐야합니다.  그리고 이런 '패턴'까지 머리에 숙지가되었을 떄 기획을 하고. 설계를 하기가 쉬워지는거죠. 특히나 이런 지점은 거의 모든 앱 공통지점이라. '이 방식이있는데 왜 이걸 안썼지?' 하고 불편한 지점이 한눈에 보이게됩니다. 

UI 디자이너는 좋은 설계와, 편의성에 대해 강박같은 것이 필요하다고 봅니다. 그렇지 않고서는 무슨 서비스를 봐도 다 무난하고 나쁘지않고. 그냥 '선택일 뿐 아닌가'하며 넘어가게됩니다. 스스로 좋은 UI 디자이너가 되고싶다면 절대로 무언가를 '당연하게' 넘기지 마세요. 항상 더 좋은 패턴이 있을거란 생각과, 의문을 품고 분석해보세요. 분명 실제로 더 좋은 디자인이 어디엔가 숨어있을테니까요.

7. 좋은 UI 자료를 골라내는 훈련해보기

기초가 쌓인 분이라면, 특이한 훈련을 해보시는 것도 좋은 방법입니다. 웹 컴포넌트 라이브러리를 통해서 어떤 컴포넌트가 있는지를 체크하시고. 좋은 라이브러리를 비교해보시면서 더 좋은걸 골라내는 과정도 재미있는 훈련이 되겠죠.

https://designsystemsforfigma.com/

예를 들어 위 사이트에는 약 45개의 UI 라이브러리가 있습니다. 정말 무식한 방식이지만 저도 최근에 위의 45개를 하나하나 들여다보면서 내용을 골라봤죠. 다만 그 과정에서 '좋은 컴포넌트의 특징'이 뭔지를 다시한번 깨닫게되더군요. 물론 팁같은건 있겠죠. 줄간격, 컴포넌트 버튼 크기. 버튼 속 텍스트크기같은 것들의 비례가 안맞으면 컴포넌트가 완성도가 안좋다던가. 등등

하지만 이런 훈련은, 애초에 무엇이 좋은지. 어떤 것들이 왜 좋은지를 아는 사람에게 의미가있는 내용입니다. 

1. 업계별 주요 설계 FLOW

2. 컴포넌트에 대한 스탠다드

3. 세부 인터렉션에서 나오는 일반 사용 패턴

이 세가지가 잡혀있지않으면 뭘 봐도 헷갈리기만 할뿐이죠. 그러니 제가 아무리 다양한 방식으로 공부하는 법을 알려드려도. 각자 고유한 방식으로 

- 업계 

- 서비스

- 컴포넌트

- 비교분석

이 과정을 거치지않고서는 절대로 실력이 늘 수 없습니다. 제가 패스트캠퍼스에서 강의자로 일하기를 그만둔것도 그런 이유에서입니다. 이런 지점은 경험을 강제로 시키는 방식을 제외하면, 가르치는게 불가능하다고 봤기 때문이죠.

ui에선 이론같은게 중요한게아니에요 그냥 분야별로 지식의 총량이 중요합니다. 그러니 뜬구름잡는 소리말고 서비스 하나라도 더 들여다보는게 낫습니다.

총정리

그래서, 좋은 앱, 웹 UI를 확인하는 방법을 정리하면 다음과 같은 내용이 나올겁니다.

1. 아래 내용에 답할 수준으로 서비스 분석 기준을 자세하게 분석하기

- 그 서비스 (A)의 핵심 기능은 무엇인가?

- A가 속한 분야에서 주로 쓰이는 핵심 설계패턴은 무엇인가?

- A와 유사 / 동일한 설계를 쓰는 서비스는 무엇이 있는가? 

- A와 유사 서비스들 중 가장 군더더기없는 설계는 무엇인가?

- A 서비스의 핵심 기능 중, 가장 중요한 컴포넌트 5개는? 

2. 실제로 겪어보면서 느꼈던 불편사례를 기반으로 - 그런 문제가 가장 '덜 일어나는' 서비스를 기준으로 스탠다드 잡기.

불편사례

- 키보드에서 다음을 눌렀는데 다음칸으로 이동하지않는 입력창

- 키보드로 숫자 입력을 하려했더니 숫자가 작은 일반 키보드가 등장함

- 평소에 쓰는 비밀번호 넣었더니, 대문자 추가하라고함

- 뭐가 잘못되었는지 모르겠는데 다음 버튼이 활성화가 안됨

- 글씨 갯수 제한 카운터가 없는데 글씨제한이 걸림

- 입력하려고 포커싱했더니 입력창이 키보드에 가려짐

- 입력 완료하려고 키보드 내리려고 뒤로가기 눌렀더니, 페이지이동으로 입력한게 다 날아감

3. 디자인시스템 / 유료 컴포너트 테마 등을 기반으로 100개 이상의 서비스를 기준. 수준이 높은 것들을 추려보기

4. 마테리얼은 컴포넌트 기준으로 개별 컴포넌트가 웹 컴포넌트와 어떤 연관관계가 있는지 체크 / 외우기

5. OS 신규패턴, 기존 주요 패턴을 정리해서 이것도 외우기