UI 패턴 자료를 고르는 방법
UI 디자인 자료에도 좋은 자료와 나쁜 자료가 있다!
안녕하세요, 리플러스입니다.
UI 디자인에 있어서 좋은 패턴 자료와 나쁜 패턴자료가 있습니다. 무작정 다른 사이트나 앱을 벤치마킹하기하다보면 안정적인 기준을 잡기가 어려워지죠. 그러니 UI 패턴 자료를 찾을 때에도 정확한 기준점을 잡는 것이 중요합니다. 이번에 제가 제시하는 기준점은 - 실제 실무에서 주니어들에게 가르쳤던 내용들이 기반입니다.
1. 애플 / 구글 등의 OS 제조사 측에서 사용하고있는 UI 패턴인가
2. 실제 브랜드 서비스 등에서도 사용되고있는 UI 패턴인가
3. 기존 2~3년 내의 사용자들에게 익숙하거나, 예상 가능한 패턴인가
https://www.youtube.com/watch?v=2-9Dyn3wpYg
-
추후에는 구글 앱 85개를 분석정리한 내용을 다루게될 듯 합니다.
-
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
대본 내용
1. 안녕하세요, 리플러스입니다. 오늘은 UI 설계와 UI 패턴을 공부하는 기본적인 방법을 이야기해보도록 하겠습니다.
2. 항상 이야기드려왔듯 - UI 디자인을 공부하는 데 있어서 핵심은 설계입니다. 한 화면의 레이아웃과 편의성이 중요하고, 그 이후에는 여러 화면들이 함께 연결되며 만들어지는 사용성까지 담고있죠. 그리고 설계라는 것을 좀 더 파고들어가보면, '패턴'이라는 것이 나옵니다.
3. 내게 주어진 상황에. 어떤 화면을 써야하는지. 어떤 정보가 더 중요하고 어떤 정보가 덜 중요한지. 그 기준을 잡아야합니다. 다만 여기에서도 문제가 하나 있습니다. 어떤 상황에서, 어떤 UI 화면을 써야한다 - 라는. 확실한 정답같은 건 없다는 것입니다.
4. 그래서 우리는 '일반론'에 기댈 수 밖에 없습니다. 현재 시대에 유명한 기업들의 서비스들이나. 프레임워크. 디자인 패턴 등을 따라가는 것이 가장 편리한 방법이죠. 그러나 항상 누군가를 따라가는게 좋은 방법은 아닙니다.
5. 실제로 - UI 디자인 패턴에는 '일반적인 패턴'과 '실험적인 패턴'이 있습니다.
6. 일반적인 패턴이란 사용자들이 이미 자연스럽게 사용하고 있거나. OS 제조사 등에서 기본적으로 제공하는 UI 패턴을 말합니다.
7. '실험적인 패턴'은 그런 일반적인 형태에서 벗어난. 독특한 UI 패턴들을 말합니다.
8. 하지만 초심자 입장에서는 이런 '일반적이다, 아니다'의 기준을 잡는것도 쉬운 일이 아닙니다. 당장 뭘 보고 확인해야하는지도 알기가 힘드니까요. 그러니 이번 영상에서는 일반적인 UI 패턴의 3가지 기준점을 이야기드리겠습니다.
9. 1. 애플 / 구글 등의 OS 제조사 측에서 사용하고있는 UI 패턴인가
10. 2. 실제 브랜드 서비스 등에서도 사용되고있는 UI 패턴인가
11. 3. 기존 2~3년 내의 사용자들에게 익숙하거나, 예상 가능한 패턴인가 - 이렇게 세가지 정도의 기준점이 됩니다.
12. 애플 / 구글 등의 OS 제조사 측에서 사용하고있는 UI 패턴인가
- 일반적으로 애플이나 구글 등의 OS 제조사들은 모든 UI 디자인의 리더 역할을 하고있습니다. 그래서 그들이 만든 UI 형태는 거의 공식 UI 패턴이나 다름없다고 봐야겠죠. 그러니 애플이나 구글 등이 만들어낸 UI 디자인 패턴은 꼭 분석해보시는게 좋습니다.
13. 물론 여기에서도 주의해야할 지점이 있습니다. 특히 구글의 안드로이드 진영 같은 경우가 더 그런데요. 구글은 지속적인 UI 테스트를 진행하며 새로운 형식의 UI를 만들어내고있습니다. 그래서 가끔씩 유튜브나, 구글 검색을 사용하다보면, 기존에는 없던 화면들이 등장하기도 합니다. 이런 지점들을 '그대로 따라가는건' 매우 위험합니다. 실험을 통해 검증되지 않은 UI 패턴을 그대로 사용할 경우, 사용자들에게 익숙치 않거나. 심지어는 그 UI 자체가 사라지기도 하기 때문입니다.
14. 실제 브랜드 서비스 등에서도 사용되고있는 UI 패턴인가
- 기존 서비스들은 구글이나 애플 등의 OS 디자인 패턴에 영향을 받은 UI들입니다. 게다가 이미 만들어진지 시간이 좀 지난 서비스들이 많아서, 사용성에 있어서도 안정적이라고 말할 수 있죠. 그래서 보통 대기업이나, 유명 브랜드의 디자인 패턴을 따라가라는 것이. 우리가 알고있는 기본상식 중 하나일겁니다. 실제로 실무자들에게 가장 자연스럽게 받아들여지는 방식이죠.
15. 그러나 이 방식도 언제나 안전한 방식은 아닙니다. 기업이나 개별 브랜드들은 각자 자신의 상황에 맞는 UI 패턴을 사용합니다. 실제로 페이스북이나 인스타그램 등의 서비스는 독특한 고유 UI 패턴을 사용해서, 일반적인 사용성과는 동떨어진 경우도 생깁니다. 이런 경우 초심자들이 걸리기 쉬운 함정이 생기죠. 자신이 많이 사용하고있는 서비스이고, 다른 사람들도 많이 쓰고있으니. 이 디자인 패턴은 '좋은 것이다' 라고 생각하게되니까요.
16. 기존 2~3년 내의 사용자들에게 익숙하거나, 예상 가능한 패턴인가
- 굳이 시간을 예로 든 이유는, 사용자들의 사용환경이나. 패턴의 주기가 약 2~3년 주기로 크게 변화하기 때문입니다. 그래서 그보다 오래된 디자인 패턴을 사용하는 경우, 사용자에게 불편을 줄 수 있습니다. 그래서 가능하면 2~3년 주기로 주요 서비스들의 UI 패턴을 정리해보는 것이 좋습니다. 물론 그보다 짧은 시기 안에 서비스를 들여다본다면 더 좋겠죠.
17. 초심자들이 가장 실수하기 좋은 것이, '새로운 UI 패턴'은 이제 거의 존재하지 않습니다. 기본 규격만 갖고도 충분히 좋은 서비스를 만들 수 있고. 거기에서 추가적인 실험을 하는 건, 구글이나 애플 같은 OS 제조사들 뿐입니다. 그러니 조금 심심한 패턴이 되더라도, 기본 UI 패턴을 익히면서. 그것의 변형이 어떤 방식으로 만들어질 수 있는지를 파악하는 것이 중요합니다.
18. 사실 UI 패턴이라는건 수많은 서비스들을 들여다보고, 분석해봐야 더 좋은 결과가 나옵니다. 그리고 하나의 패턴이라도 온갖 변형과 응용타입들이 존재하죠. 그래서 수백 수천장의 스크린샷들을 보고, 정리하고, 다시 카테고리화하는 과정이 꼭 필요합니다.
19. 그러나 대부분의 실무자들도 그정도로 많은 서비스들을 들여다보는 것이 아니고. 대부분 자신이 익숙한 레이아웃이나, 자주 사용하는 앱 서비스를 따라가려합니다. 그러니 어떤 상황에, 뭘 봐야하는지를 이야기하기가 어려운거죠.
20. 실제 제대로된 UI 패턴이나 설계 공부를 하려면, 꾸준히 운동을 하듯. 여러가지 서비스 화면들을 들여다보아야합니다.
21. 그래서 제가 추천하는 디자인 패턴 분석방법 중 하나가. 구글이 만든 모든 기본앱들을 들여다보는 겁니다.
- 플레이스토어 기준, 구글 LLC의 모든 앱들을 다운받아보시고
- 그리고 거기에서 최신 버전 앱들과, 그렇지 않은 앱들을 구분해보시면 됩니다 (참쉽죠?)
22. 현재 구글 기본 앱은 한국 플레이스토어 기준으로 약 85개정도 됩니다.
23. 양이 엄청 많아보이지만, 실제로 설치하고 들여다보면, 하루정도면 전체 앱을 다 확인할 수 있습니다.
24. 85개 정도 되는 서비스들 중에 실제로 사용이 가능하거나, 계속 업데이트가 되고있는 것들은 그리 많지 않습니다. 또한 VR이나 안드로이드 TV용 서비스는 제외하고. 크롬캐스트 전용 앱이나 키보드 등을 제외하고나면. 양이 그렇게 많지 않죠.
25. 게다가 대부분의 구글 앱 서비스들은 UI 디자인 패턴이 거의 비슷한 경우가 많습니다. 그래서 오히려 '비슷하지 않은' 패턴을 찾아보는 것이 중요하죠. 무언가가 기본 패턴에서 변형이 되었다면, 그럴만한 이유가 있었을 거라고 보고. 그 이유를 찾아보면 됩니다.
26. 그렇게 만들어진 구분점을 통해 정리를 해보면 - 구글 LLC의 앱들 중에서도 과거 버전 앱들과. 신규 패턴이 적용된 앱들을 나눌 수 있습니다. 그리고 그 기준을 통해서, 다른 서비스들도 '일정한 패턴'을 분석할 수 있게 되죠.
27. 그 패턴의 차이와, 구분지점. 그리고 거기서 일반적인 화면들을 확인해두는것이 중요합니다.
28. 오늘은 UI 디자인에 있어서 어떤 서비스들을 들여다보아야하는지. 그리고 분석할 서비스를 찾는 기준점이 무엇인지에 대해 알아보았습니다. 이후에는 구글 서비스들에서 일반적으로 사용되는 패턴들을 알아보게될 것 같네요. 그럼 다음번에 다시 만나요!
-
끝
