나눔배움캠프 UXUI 6기 TIL / 레퍼런스 분석, UXUI 디자인 패턴

2025.01.30.

레퍼런스 분석, UXUI 디자인 패턴

---

1. 레퍼런스 분석

여러 가지 사례를 분류해 생각해 보고 도움이 될 만한 부분을 찾는 과정이다.

다양한 사례를 수집하고 세부 요소로 쪼개서 분석한다.

세부 요소를 관찰하면서 좋은 점, 나쁜 점 등 인사이트를 얻는다.

레퍼런스를 분석하는 과정에서 디자인에 대한 영감을 얻고 스스로 생각하는 힘을 기를 수 있다.

레퍼런스 분석하는 법

1) 화면 구조 분석

화면이 어떤 요소들로 구성되어 있는 지 분해해 보는 단계이다.

파운데이션-엘리먼트-모듈-페이지 순으로 나눌 수 있다.

 

2) 디자인 원칙 기반 분석

쪼개본 요소들을 5주차에서 배웠던 디자인 원칙에 대입해보면서 좋은 점, 나쁜 점을 찾는다.

디자인을 평가하고 그에 맞는 논리적인 근거를 찾는 것이 핵심이다.

 

3) 인사이트 정리

분석한 내용들을 정리해 내 것으로 만드는 단계이다.

더 나아가 어떻게 해야 더 나아질 수 있을지 생각하면 도움이 된다.

 

2. UX/UI 디자인 패턴

다수의 웹이나 앱에서 볼 수 있는 디자인 요소를 뜻한다.

UXUI 패턴을 사용하면 사용자가 익숙한 방식으로 자연스럽고 편하게 제품을 이용할 수 있다.

 

자주 사용되는 UXUI 디자인 패턴

 

온보딩

로딩

검색

회원가입

리스트

카드

캐러셀

 

1) 온보딩

사용자가 제품을 처음 만나는 과정

사용자가 제품의 기능을 잘 이해할 수 있도록 하는 것이 목적이다.

온보딩의 종류로는 튜토리얼, 얻을 수 있는 가치 보여주기, 개인화 설정 등이 있다.

 

2) 로딩

웹에서 사용자가 기다려야할 때 보여주는 화면이다.

좋은 로딩 화면은 가능한 빨리 콘텐츠를 표시해야하며,

시간이 얼마나 걸릴지 전달하고, 길어질 시 볼 수 있는 내용을 제공하는 것이 좋다.

로딩의 종류로는 스피너 아이콘이나 애니메이션, 프로그레스 바, 스켈레톤 등이 있다.

 

3) 검색

검색은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법이다.

좋은 검색 화면은 원하는 결과를 보여줄 수 없을 때 다른 행동을 유도하고 자동 완성 기능을 이용해

오타를 방지하고 관련된 내용을 쉽게 찾을 수 있도록 해야 한다.

검색 화면의 종류로는 예시로는 기본 검색 화면, 연관 상품이나 검색어 노출, 검색 결과가 없을 때의 화면 등이 있다.

3. 핀테크/금융

돈과 관련된 산업이여서 법이나 정책의 영향을 많이 받는다.

같은 기능을 어떻게 표현 했는지, 사용성을 높이기 위해 어떤 노력을 했는 지 살피면서 참고하면 좋다.

4. 콘텐츠

콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 종류의 특성에 따라 디자인의 차이가 크다. 콘텐츠 제품은 오래 머무를수록 수익과 연관된 행동을 할 가능성이 높아지기에, 콘텐츠 제품을 분석할 때는 사용자의 체류시간을 늘리는 UX/UI를 찾는데 집중해야 한다.

5. 커머스

주로 전자상거래인 이커머스를 말하며, 온라인에서 판매 및 거래가 이뤄지는 플랫폼을 뜻한다. 커머스는 상품 구매 전환률이 가장 중요한 지표이기에 상품의 탐색에서 구매로 이어가는 과정에 집중해야한다. 어떤 요인 때문에 구매를 포기하고 어떤 요인 때문에 구매를 결심하는지가 중요하다.

---

오늘 하루를 돌아보며

오늘은 레퍼런스를 어떤 식으로 분석해야 효과적으로 원하는 정보를 얻을 수 있는 지 자세하게 알게 되었다.

또한 각 제품들 마다 어떤 특징이 있고 어떤 점에 집중하면서 레퍼런스를 분석 해야할 지 새롭게 알게 되었다.

오늘 강의를 보면서 크게 어려운 부분은 없었지만 과제가 조금 어려워 보였다.

원래는 오늘 강의도 듣고 숙제도 진행하려고 했는데, 다른 걸 하다가 못하게 되어서 조금 아쉽다.

이제 연휴도 곧 끝나고 내일부터는 다시 캠프시작이니까 공부에 집중해야 될 것 같다.

---

내일 할 학습

UXUI 디자인 입문 강의 5주차, 6주차 숙제

개인과제 진행